, the wordmark's z:150 lives // in the root stacking context and would otherwise paint over a // z:50 navbar.) The IntroLoader at z:100 still covers it during the // initial page load — IntroLoader uses position:fixed so it sits in // the same root context as the navbar; bar appears as the loader // cream-fades out. return ( ); } /* --------------------------- HERO META ROW --------------------------- */ function HeroMetaRow({ label, value, delay = 0 }) { return ( {label} {/* The line lives between the label and value, extending to the value */} ); } /* ------------------------------- HERO ------------------------------- */ // Hero used to host the full split-panel "scroll-lock zoom-through- // window" intro on its first 600px of scroll: a blurred-glass left // half with a FOLLY cutout sliding from the corner, a solid-FOLLY // sliding from bottom-right, and a brand block with body copy + Get // In Touch link. That whole composition is now the IntroLoader (see // app.jsx) — a time-driven version of the same merge that plays once // while the hero video loads, then fades out to reveal Hero in its // post-merge final state. Hero itself is now just that final state: // centered FOLLY wordmark, width-locked definition line, full-zoom // desaturated cabin video, bottom meta rows. Scroll on the page goes // directly into the Y-letter spin-out + falling-figure choreography. function Hero() { // Scroll source for all Hero scroll-driven transforms (Y-letter // spin-out + hero video scale). Lenis (loaded in index.html) is // already smoothing wheel/trackpad input into a continuous scroll // curve before it reaches `window.scrollY`. A previous build wrapped // this in `useSpring2(rawScrollY, { stiffness: 320, damping: 80 })` // to add a second decel pass, but layering a framer-motion spring // ON TOP of Lenis's smoothing meant animations were double-damped // and lagged behind user input — the "stiff" feel during fast // scrolls through the hero. Removed: framer-motion subscribes to // the raw motion value directly now, animations track Lenis 1:1. // Falling figures (app.jsx) read `window.scrollY` directly and do // their own internal lerp; this change does not affect them. const { scrollY } = useScroll2(); // HERO_LOCK_END was the trailing offset of the (now-removed) hero // scroll-lock. Y-letter math and the falling-figure constants in // app.jsx are still expressed relative to it; setting it to 0 makes // the Y begin its tip → fall → spin-out and the figures begin their // emerge the moment the user starts scrolling, which is exactly the // post-loader state we want. MUST stay in sync with the same-named // constant in app.jsx (FallingFigure). const HERO_LOCK_END = 0; // Y-letter falling choreography — scroll-linked, gravity-shaped. // // The previous mapping had a dead first 280px (only a 22° tip + // 2vw/1vh — imperceptible) then crammed an 85°→380° spin + 18→85vw // flight into the final 240px. That read as "locked: nothing // happens, then it violently flings out." Redesigned so the Y // responds to scroll from pixel 1 and falls progressively the // whole way, like an object under gravity: // // - 5 keyframe stops at [0, 140, 340, 540, 720] with values // shaped as an EASE-IN (slow → fast). Each property's // progression is a quadratic-ish ramp (e.g. translateY // 0→3→12→34→78 vh ≈ 0/4/15/44/100% over 0/19/47/75/100% of // scroll) so the letter accelerates downward exactly like // real falling motion — no held-then-snap. // - Vertical drop dominates the read (it's *falling*, not // swinging sideways): translateY ends at 78vh, well below // the fold. // - Rotation tops out at 210° — one graceful tumble past // upside-down rather than the old 380° frantic double-spin. // - X flight reduced 85vw → 58vw so the exit is a calm arc, // not a violent sideways launch. // - Range ends ~720px, roughly when the sticky hero pin // releases on common viewports, so there's no dead // "still-locked" tail after the Y has gone. // - Opacity holds through the tumble and fades over the last // leg (560→700px) so the letter is well clear of the // wordmark before it disappears. // // Net: continuous, scroll-tracked, gentle — the scroll feels // smooth and connected the entire first screen instead of // gated behind an invisible pause. // Compressed back down so the gag resolves before the sticky hero starts // feeling like a scroll trap. The page now begins moving sooner while the // Y still tumbles far enough to sell the fall. const yKeys = [ HERO_LOCK_END + 0, HERO_LOCK_END + 75, HERO_LOCK_END + 170, HERO_LOCK_END + 275, HERO_LOCK_END + 390, ]; const yRotate = useTransform2(scrollY, yKeys, [0, 14, 52, 120, 210]); const yTranslateX = useTransform2( scrollY, yKeys, ['0vw', '2.5vw', '9vw', '26vw', '58vw'] ); const yTranslateY = useTransform2( scrollY, yKeys, ['0vh', '3vh', '12vh', '34vh', '78vh'] ); const yOpacity = useTransform2(scrollY, [HERO_LOCK_END + 285, HERO_LOCK_END + 380], [1, 0]); // Hero video — gentle scroll-driven dolly + wash bloom. // An earlier 1.0 → 1.16 scale was removed for perf (compositor cost // stacked on falling-figure canvases). This is the lighter version // requested back: 1.0 → 1.05 scale + 0.80 → 0.86 cream wash over the // first 800px of scroll. Stays visible the whole way down; just adds // a small breath of life on the first scroll. Both endpoints clamp // (Motion useTransform clamps by default) so the video locks at the // 1.05 / 0.86 end-state for the rest of the page rather than drifting. const heroVideoScale = useTransform2(scrollY, [HERO_LOCK_END + 0, HERO_LOCK_END + 320], [1, 1.05]); const heroWashOpacity = useTransform2(scrollY, [HERO_LOCK_END + 0, HERO_LOCK_END + 320], [0.80, 0.86]); // WORDMARK_FINAL_SCALE — visible scale of the centered FOLLY. The // definition line below it width-matches this exact scale so the // two stay edge-aligned at every viewport. const WORDMARK_FINAL_SCALE = 0.88; // Measure FOLLY's rendered width so the definition can match it // exactly. Two-pass system: PASS 1 picks an approximate font-size // from a hidden measurer, PASS 2 reads the actually-rendered // offsetWidth and applies a sub-percent scaleX correction so the // line ends EXACTLY at FOLLY's right edge — pixel-perfect at every // viewport regardless of font hinting / kerning drift. const follyRef = useRef2(null); const defMeasureRef = useRef2(null); const defLineRef = useRef2(null); const [follyWidth, setFollyWidth] = React.useState(null); const [defFontSize, setDefFontSize] = React.useState(null); const [defCorrection, setDefCorrection] = React.useState(1); // Horizontal translate applied to the def-line in addition to scaleX, // so its VISIBLE glyph center (not layout-box center) lands on FOLLY's // visible glyph center. FOLLY's right tip (Y diagonal overhang) pushes // its visible center to the right of its layout-box center; without // this translate the def-line reads slightly left even when widths // match. Computed once defCorrection is settled via a Range-based // measurement of both visible bboxes. const [defTranslateX, setDefTranslateX] = React.useState(0); React.useEffect(() => { if (!follyRef.current) return; const ro = new ResizeObserver(([entry]) => { setFollyWidth(entry.contentRect.width); }); ro.observe(follyRef.current); return () => ro.disconnect(); }, []); // Compute the visible-glyph / advance-width ratio for both FOLLY and // the def-line text. Width-matching the bounding boxes alone leaves a // visible drift because FOLLY's F/Y have small side-bearings while the // def line starts/ends with characters (capital F, closing curly // quote) whose bearings are different. Scaling the target by // (follyRatio / defRatio) puts the def line's VISIBLE left/right // glyph edges on FOLLY's VISIBLE left/right glyph edges instead. const computeGlyphAdjust = React.useCallback(() => { const follyEl = follyRef.current; const defEl = defMeasureRef.current; if (!follyEl || !defEl || typeof document === 'undefined') return 1; const make = (el, text) => { const cs = window.getComputedStyle(el); const c = document.createElement('canvas'); const ctx = c.getContext('2d'); if (!ctx) return null; const px = parseFloat(cs.fontSize); ctx.font = `${cs.fontWeight} ${px}px ${cs.fontFamily}`; if (cs.letterSpacing && 'letterSpacing' in ctx) { try { ctx.letterSpacing = cs.letterSpacing; } catch (_e) {} } const m = ctx.measureText(text); const advance = m.width; const visible = (m.actualBoundingBoxLeft || 0) + (m.actualBoundingBoxRight || 0); return advance > 0 && visible > 0 ? { advance, visible } : null; }; const f = make(follyEl, 'FOLLY'); const d = make(defEl, defEl.textContent || ''); if (!f || !d) return 1; const follyRatio = f.visible / f.advance; const defRatio = d.visible / d.advance; if (!Number.isFinite(follyRatio) || !Number.isFinite(defRatio) || defRatio <= 0) return 1; return follyRatio / defRatio; }, []); React.useLayoutEffect(() => { if (!follyWidth || !defMeasureRef.current) return; const measure = () => { const el = defMeasureRef.current; if (!el) return; const naturalWidth = el.getBoundingClientRect().width; if (naturalWidth > 0) { const targetWidth = follyWidth * WORDMARK_FINAL_SCALE * computeGlyphAdjust(); setDefFontSize((targetWidth / naturalWidth) * 100); } }; measure(); let cancelled = false; if (document.fonts && document.fonts.ready) { document.fonts.ready.then(() => { if (!cancelled) measure(); }); } return () => { cancelled = true; }; }, [follyWidth, computeGlyphAdjust]); React.useLayoutEffect(() => { if (!follyWidth || !defLineRef.current || !defFontSize) return; let raf = 0; const measure = () => { const el = defLineRef.current; if (!el) return; const w = el.offsetWidth; if (w > 0) { const targetWidth = follyWidth * WORDMARK_FINAL_SCALE * computeGlyphAdjust(); const next = targetWidth / w; if (Math.abs(next - defCorrection) > 0.0005) { setDefCorrection(next); } } }; raf = requestAnimationFrame(measure); let cancelled = false; if (document.fonts && document.fonts.ready) { document.fonts.ready.then(() => { if (!cancelled) requestAnimationFrame(measure); }); } return () => { cancelled = true; cancelAnimationFrame(raf); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [defFontSize, follyWidth, computeGlyphAdjust]); // ─── Visible-center alignment ───────────────────────────────────── // After scaleX has been computed (defCorrection settled), shift the // def-line so its INK center lands on FOLLY's INK center. // // Previous implementation measured "visible bbox" via Range. // getBoundingClientRect — but in every browser that ships today // that method returns the text's LAYOUT box (the em-box of each // text frame), NOT the ink box. So FOLLY's Y-diagonal overhang // (which extends a few px past the Y's layout box) was never // captured: fVisOffset came back at ~0, the correction came out // to ~0, and the def-line stayed centered on FOLLY's LAYOUT // center while FOLLY's ink center actually sat a few pixels to // the right. Net visual: def-line drifts left, FOLLY's Y tip // extends past the def-line's right edge — exactly the bug. // // Fix: derive the ink-vs-layout center offset via canvas's // actualBoundingBoxLeft / actualBoundingBoxRight metrics, which // DO report the ink extent (including the Y's diagonal). The // result is the intrinsic ink offset for each element, scaled by // whatever CSS transform it currently has applied. React.useLayoutEffect(() => { const f = follyRef.current; const d = defLineRef.current; if (!f || !d || !defCorrection) return; let raf = 0; const measure = () => { try { const fLayout = f.getBoundingClientRect(); const dLayout = d.getBoundingClientRect(); if (fLayout.width <= 0 || dLayout.width <= 0) return; const fLayoutCenter = (fLayout.left + fLayout.right) / 2; const dLayoutCenter = (dLayout.left + dLayout.right) / 2; // Canvas-based ink offset: how far an element's INK center // sits from its LAYOUT center, in viewport pixels. POSITIVE // when ink extends further right than left of the layout // box (FOLLY's Y diagonal). transformScale converts the // unscaled font-metric pixels to the element's actually- // rendered viewport size (FOLLY = WORDMARK_FINAL_SCALE, // def-line = defCorrection along x). const inkOffset = (el, text, transformScale) => { const cs = window.getComputedStyle(el); const c = document.createElement('canvas'); const ctx = c.getContext('2d'); if (!ctx) return 0; const px = parseFloat(cs.fontSize); ctx.font = `${cs.fontWeight} ${px}px ${cs.fontFamily}`; if (cs.letterSpacing && 'letterSpacing' in ctx) { try { ctx.letterSpacing = cs.letterSpacing; } catch (_e) {} } const m = ctx.measureText(text); const advance = m.width; if (!(advance > 0)) return 0; const left = m.actualBoundingBoxLeft || 0; const right = m.actualBoundingBoxRight || 0; // Layout box runs [0, advance]; ink box runs [-left, +right]. // Centers: layout = advance/2, ink = (right - left) / 2. // Offset = ink_center - layout_center // = (right - left) / 2 - advance / 2 // = (right - left - advance) / 2. return ((right - left - advance) * 0.5) * transformScale; }; const fVisOffset = inkOffset(f, 'FOLLY', WORDMARK_FINAL_SCALE); const dVisOffset = inkOffset(d, d.textContent || '', defCorrection); // Layout-center difference (≈0 since both are flex-centered // in the same column; included so we're robust against any // future container reshuffling). dLayoutCenter already // includes the currently-applied translateX, so the // "prev + needed" expression below converges to the absolute // target translate in one step. const layoutShift = fLayoutCenter - dLayoutCenter; const needed = fVisOffset - dVisOffset + layoutShift; setDefTranslateX(prev => { const next = prev + needed; if (Math.abs(next - prev) < 0.5) return prev; return next; }); } catch (_e) { /* getBoundingClientRect can throw on detached nodes */ } }; raf = requestAnimationFrame(measure); let cancelled = false; if (document.fonts && document.fonts.ready) { document.fonts.ready.then(() => { if (!cancelled) requestAnimationFrame(measure); }); } return () => { cancelled = true; cancelAnimationFrame(raf); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [defCorrection, follyWidth]); return (

{/* Sticky inner — pins the hero content to the viewport for the first ~18svh of section scroll, giving the figures a brief stable FOLLY-anchored portal to emerge from. After that the parent section's bottom reaches the viewport top and the hero scrolls away naturally into About. */}

{/* Background video — the framing that used to be produced by `scale: 1.95` + `x: -20%` + `y: 15%` + `objectPosition: 65% 45%` has been BAKED into the source file. The previous build shipped a 1920×1080 source and used CSS transforms to crop down to the visible region (~984×554, right-of-centre mountains-only) — ~75% of the encoded pixels were never on screen. The source has been re-cropped to that visible region exactly and re- encoded at higher per-pixel quality (CRF 19, slow preset, no audio): file dropped from 9.2 MB → 3.8 MB while every visible pixel carries ~60% more bits than before, so the mountains read sharper through the cream wash. saturate(0.05) is preserved — that desaturation is brand, not a quality issue. Backup of the original 1920×1080 file lives at `media/hero.mp4.bak`. */} {/* Cream wash — starts at 0.80 (heavy enough to hide hero clip upscaling softness) and lifts gently to 0.86 across the first 800px of scroll, paired with the 1→1.05 scale dolly on the video wrapper above. Earlier builds tried 0.30 → 0.80 which exposed source softness at the start; this kinder 0.80 → 0.86 keeps the video legible throughout while adding a subtle white-bloom feel as the user scrolls in. */} {/* Bottom fade — dissolves the video into the surface color of the next section */}

{/* Centered wordmark + definition block. The wordmark carries the data-folly-wordmark attribute the FallingFigure code in app.jsx queries to locate the emerge portal. */}

FOLLY {/* Hidden measurer — base size 100px, same fonts/letter- spacing as the rendered line. Used by PASS 1 of the width-locking measurement above. */} {/* Definition — width-locked to FOLLY's visible width. */} Folly{' '} /ˈfälē/{' '} noun.{' '} Lack of good sense. Foolishness.{' '} “an act of sheer folly.”

); } /* ------------------------------- ABOUT ------------------------------- */ // Scroll-locked, three-page composition inside the liquid-glass panel. // // HOW IT WORKS // The outer

is intentionally tall (LOCK_PAGES * 100vh + a // small entry/exit pad). Inside it, a `position: sticky` wrapper pins // the glass panel to viewport center while the user scrolls through // the lock range. We map scroll progress through that range to a // page index (0 → 1 → 2) and animate copy in/out between them with // a clean blur + lift + fade swap. // // The falling figures (Andrew + Chris) are pinned to viewport-center // while this section is locked, so they appear to hover in place // while their POSE keeps cycling with scroll. After the lock ends, // normal scroll resumes and they continue down the page until they // come to rest just above the People section. // // `data-about-lock` is read by the FallingFigure code in app.jsx to // detect the lock range; `data-about-progress` (0..1) is updated each // frame so app.jsx can stay perfectly in sync without re-measuring. // Paragraph data is now SEGMENT-BASED so the word-stagger renderer // (renderWords below) can walk every word individually and animate it as // its own motion.span. A `paragraph` is an array of `{ text, style? }` // segments; the renderer splits each segment's text into individual words // and emits one motion.span per word with the segment's style attached. // // Two-slide editorial sequence. Both slides use the same `prose` kind so // typography reads as one unified voice; emphasis lives in inline segment // styles ('serif-italic', 'link', etc.) rather than separate slide kinds. // Slide 2 carries an optional `definition` block that renders as a // dictionary-style footer beneath the prose (hairline above, smaller // type, left-aligned within a centered max-width — the visual idiom // readers already associate with a printed dictionary entry). const ABOUT_PAGES = [ { eyebrow: '(01) — The premise', kind: 'prose', paragraphs: [ [ { text: 'Folly Partners is the family office' }, // Explicit breaks around the parenthetical aside so the // italic phrase sits on its own visual row instead of // fragmenting mid-style across the surrounding prose. The // smaller italic ("aside voice") fits cleanly on one line // at the prose measure and visually recedes from the // main thought. { style: 'softbreak' }, { text: '(rich people speak for holding company that manages personal money)', style: 'serif-italic-small' }, { style: 'softbreak' }, { text: 'of' }, { text: 'Andrew Wilkinson', style: 'link', href: 'https://www.linkedin.com/in/awilkinson/' }, { text: 'and' }, { text: 'Chris Sparling,', style: 'link', href: 'https://www.linkedin.com/in/sparlingchris/' }, { text: 'the founders of' }, { text: 'Tiny.', style: 'link', href: 'https://www.tiny.com' }, ], [ { text: 'Tiny buys companies and operates them.' }, ], [ { text: 'Folly does the opposite: holds their personal money in stocks, bonds, real estate, fund stakes, and the occasional quiet minority — passively, patiently, and mostly out of the way.' }, ], ], }, { eyebrow: '(02) — The point', kind: 'prose', paragraphs: [ [ { text: 'Andrew and Chris made a bunch of money building things. The risk, from here, is that they get bored, get clever, and lose it.' }, ], [ { text: 'We exist to make that harder. To prevent an act of' }, { text: 'Folly.', style: 'serif-italic' }, ], ], definition: { word: 'Folly', pronunciation: 'fol-ee', partOfSpeech: 'noun', meaning: 'Lack of good sense; foolishness.', example: 'an act of sheer folly', }, }, ]; // SCROLL-LOCK + SLIDE STATE MACHINE REMOVED. // The About section used to be 300vh tall with a sticky panel pinned at // viewport centre, paginating between two "slides" as the user scrolled // through a 180vh lock zone. That scroll-jacking experience was poor — // jumpy on trackpads, fragile on slow wheels, and constantly fighting // Lenis's snap engine. It is replaced with a single natural-height liquid // glass card that flows as normal scroll; both editorial beats — eyebrow // (01) The premise and eyebrow (02) The point plus the dictionary block — // are stacked inside one card, and the falling figures stay centred // behind the card the whole way down. Constants previously needed for // the lock geometry (ABOUT_LOCK_VH / ABOUT_LOCK_MOBILE_VH / ABOUT_TAIL_VH / // aboutLockVh) and the slide animation variants (ABOUT_SLIDE_VARIANTS / // ABOUT_WORD_VARIANTS) are deleted — no slides means nothing to drive // their state machine. // MARKER-HIGHLIGHT WIPE — replaces the previous CSS hover pill on the // inline About-section links (Andrew Wilkinson, Chris Sparling, Tiny). // A lavender bar painted behind the text scales left → right with a // soft spring on hover/focus/tap, then collapses back smoothly when // the cursor leaves. transformOrigin: left + scaleX 0 → 1 reproduces // the Remotion reference's left-to-right wipe; framer-motion (already // loaded via UMD) drives it without the build pipeline Remotion would // require. // // Color is Folly's lavender accent (#CCBCEE) instead of the reference's // yellow #facc15, so the highlight stays on-brand. // // Variant strategy: // below / above → scaleX 0 (slide off-stage; marker never seen) // active → scaleX 0 (slide on-stage but cursor not over the // link; also the "un-hover" landing state) // hover → scaleX 1 (cursor over the link; spring fill) // // IMPLEMENTATION NOTE: the marker is driven by LOCAL React hover state // (not by the slide's variant chain) so it can never accidentally fire // on slide-enter. See AboutLink below — the marker has explicit // initial={{ scaleX: 0 }} and an animate prop derived from `hover`, // which is fully decoupled from the surrounding ABOUT_WORD_VARIANTS // cascade. // ─── ABOUT LINK ──────────────────────────────────────────────────────── // Inline link with a marker-highlight wipe on hover/focus. The marker // is a motion.span whose scaleX is driven entirely by local hover/focus // state — initial 0, springs to 1 on enter, eases back to 0 on leave. // The previous version wired the into the (now-removed) slide // word-stagger variants; that participation is gone with the slides. function AboutLink({ href, text }) { return ( {text} ); } // ─── WORD RENDERER ───────────────────────────────────────────────────── // Walk a paragraph (array of `{ text, style?, href? }` segments) and emit // inline children. Plain segments split into per-word s so wrap // behaviour matches the editorial line measure; `link` segments render as // a single so multi-word names stay on one line. The previous // version emitted motion.spans driven by ABOUT_WORD_VARIANTS for the now- // removed slide stagger; the parent card's blur-fade-up reveal handles // the entrance now, so plain spans are sufficient. function renderWords(paragraph) { return paragraph.flatMap((seg, sIdx) => { // Soft break: forces a line break between styled runs so a // parenthetical aside or emphasis block can sit on its own visual // row instead of fragmenting mid-phrase across the surrounding prose. if (seg.style === 'softbreak') { return []; } if (seg.style === 'link' && seg.href) { return [ {' '} , ]; } let cls = 'inline-block whitespace-nowrap align-baseline'; if (seg.style === 'serif-italic') { cls += ' font-serif italic font-normal'; } else if (seg.style === 'serif-italic-small') { // Quieter italic for a parenthetical aside — reads as the // editorial "narrator's whisper" rather than emphasis. Sized // at 0.88em so the whole aside fits on one line at the // prose's measure and visually recedes from the main thought. cls += ' font-serif italic font-normal text-[0.88em]'; } else if (seg.style === 'serif-italic-lowercase') { cls += ' font-serif italic font-normal lowercase tracking-[-0.02em]'; } else if (seg.style === 'bold') { cls += ' font-extrabold'; } const words = seg.text.trim().split(/\s+/).filter(Boolean); return words.map((word, wIdx) => ( {word} {' '} )); }); } /* ============================================================================ ABOUT — editorial spread inside the liquid glass ---------------------------------------------------------------------------- Five-zone layout (Le Corbusier × Identifont blend): 1. Massive cropped FAMILY OFFICE display headline (breaks the right edge) 2. (01) — THE PREMISE section label row 3. Numbered FIG. 01 / FIG. 02 rows — portraits for Andrew + Chris 4. Premise prose paragraphs (existing renderWords pipeline) 5. (02) — THE POINT label row 6. 4-cell icon principles grid: PATIENT / PASSIVE / QUIET / MINORITY 7. Point prose 8. Dictionary entry for Folly (headword in brick accent) Hairlines divide every row so the panel reads as one type system. Single accent color: rgb(var(--c-accent)) (warm brick/oxide rust). Pairs with the page's warm cream surface + warm charcoal text without clashing — a third warm tone, used as a 'wax-seal' moment on figure indices and the dictionary headword. Replaces the lavender that no longer fit the de-purpled monochrome system. ============================================================================ */ const ABOUT_ACCENT = 'rgb(var(--c-accent))'; const ABOUT_HAIRLINE = '1px solid rgb(var(--c-text) / 0.16)'; const ABOUT_MONO_STYLE = { fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', textTransform: 'uppercase', letterSpacing: '0.18em', fontSize: '10.5px', color: 'rgb(var(--c-text) / 0.55)', fontWeight: 400, }; /* ---- Lucide icons, inlined ---- Babel-standalone has no module system so the lucide-react package can't be imported the usual way. The icons themselves are just SVG path strings, so we inline the four we need here. Paths are the official Lucide source (https://lucide.dev). Stroke is currentColor so they inherit whatever text color the principle cell is rendering. */ const IconHourglass = (props) => ( ); const IconAnchor = (props) => ( ); const IconMoon = (props) => ( ); const IconPieChart = (props) => ( ); /* ---- FAMILY OFFICE handwritten note — Caveat, angled, wipes in left-to- right via clip-path. Lives in the bottom-right compartment of Box B. The companion arrow that connects this note back to the FAMILY OFFICE wordmark is rendered separately (FamilyOfficeArrow), positioned absolutely on Box B so it can cross the vertical hairline between the two columns. ---- */ function FamilyOfficeHandwriting({ isMobile, triggerRef }) { // Reuse the same in-view trigger as the arrow so both animations are // driven off the same scroll moment. const inView = useInView2(triggerRef, { once: true, margin: '-80px' }); return (

“rich people speak for a
holding company that
manages personal money”

); } /* ---- FAMILY OFFICE arrow — curved annotation arrow that crosses the vertical hairline between Box B's two columns. Tail starts near the handwritten note (right column, bottom compartment) and the arrowhead lands ON the FAMILY OFFICE wordmark (left column). Stroke-dashoffset draws it after the handwriting wipes in. ---- */ function FamilyOfficeArrow({ inView }) { // viewBox aspect 6.2:1 matches the SVG container's pixel aspect at // typical desktop block sizes (≈ 620 × 100 px). preserveAspectRatio // "xMidYMid meet" keeps the path proportional — no horizontal squish // of the arrowhead. return ( ); } /* ---- Box B — the FAMILY OFFICE display block. Two columns separated by a vertical hairline. Right column splits horizontally into a founders sentence (top) and the handwritten annotation note (bottom). An arrow SVG is positioned absolutely so it can cross the vertical hairline, with its arrowhead landing on the FAMILY OFFICE wordmark in the left column. ---- */ function FamilyOfficeBlock({ isMobile }) { const blockRef = React.useRef(null); const inView = useInView2(blockRef, { once: true, margin: '-80px' }); // Equal padding all four sides on every compartment so margins are // square + consistent across the whole block, regardless of viewport. const pad = isMobile ? 24 : 36; return (

{/* LEFT column — small lead-in + FAMILY OFFICE display. Owns the natural row height since it's the tallest content. */}

Folly Partners is the

FAMILY
OFFICE

{/* Margin gloss — dictionary-style descriptor for "family office". Pulled tight against the left edge in monospace small caps so it reads like a footnote engraved into the panel itself, not body copy. Low opacity + a brick-accent quote glyph hand it off to the eye as "an aside" not "another sentence." */}

n. rich-people speak for a holding company that manages personal money.

{/* RIGHT column — flex column with TWO cells that size to their CONTENT (no `flex: 1 1 0` stretching on the TOP cell). Both cells are top-aligned so the founders sentence's first line sits at the same baseline as "Folly Partners is the" on the left. The BOTTOM cell takes whatever vertical space remains so the right column meets the left column's bottom cleanly — no L-shape, no orphaned hairline stub. */}

{/* TOP cell — founders sentence, sized to content */}

and the founders of

{/* BOTTOM cell — handwriting note. Grows to absorb any remaining vertical space so the right column's bottom edge aligns with the left column's bottom edge. Note itself sits top-aligned. */}

{/* ABSOLUTE arrow — overlays the entire block so it can sweep across to point at FAMILY OFFICE. Hidden on mobile (column layout doesn't need a cross-column arrow). */} {!isMobile && }

); } /* ---- FIG. card — vertical centered card with square image, name, role. Used in the 3-up founders/Tiny grid. `isTiny` swaps the portrait for a 'tiny.' wordmark placeholder card so the third slot reads as the operating company alongside the two people. ---- */ function AboutFigureCard({ num, name, role, photo, href, isMobile, isTiny }) { // Tiny gets a 'big' treatment: name + role typography bump up; image // fills its wider column. Portraits stay restrained. const big = !!isTiny; // Equal padding on all sides so every card sits with square margins, // identical across breakpoints — keeps the grid feeling 'OCD-sorted.' const pad = isMobile ? 16 : 18; return (

FIG. {num}

{/* Image container — flex:1 fills the remaining vertical space in the card. Combined with the parent figure grid stretching all cards to Tiny's height, portraits snap to align with Tiny's edges. Heights are kept tight so the whole picture row stays close to one fold tall. */}

); } function About() { const sectionRef = useRef2(null); const cardRevealRef = useRef2(null); const isMobile = useIsMobile(); React.useEffect(() => { if (!sectionRef.current || !cardRevealRef.current) return; return applyBlurFadeUp(cardRevealRef.current, { startVh: 0.85, endVh: 0.30, dyPx: 56, blurPx: 14, getRefTop: () => sectionRef.current.getBoundingClientRect().top, }); }, []); // Per-bubble scroll reveal. The card effect above brings the liquid- // glass FRAME in as one unit; these make the content cascade inside // it the same way the People + Features blocks do — each bubble // blur-fades up from below as its own top crosses the viewport, so // the panel fills in chapter-by-chapter instead of appearing all at // once. Same `applyBlurFadeUp` helper + same site-wide ease-out // (that's what makes it read as one system); magnitude tuned a touch // gentler than the page default (48px / 12px vs. 60 / 18) because // these reveal NESTED inside the card's own entrance — the codebase // already tunes this helper per element size (the card itself runs // 56 / 14). Natural vertical spacing between bubbles supplies the // stagger; no explicit delays needed. const bubble1Ref = useRef2(null); const bubble2Ref = useRef2(null); const bubble3Ref = useRef2(null); const BUBBLE_REVEAL_INIT = { opacity: 0, transform: 'translate3d(0, 48px, 0)', filter: 'blur(12px)', willChange: 'opacity, transform, filter', }; React.useEffect(() => { const opts = { startVh: 0.92, endVh: 0.42, dyPx: 48, blurPx: 12 }; const cleanups = [bubble1Ref, bubble2Ref, bubble3Ref] .map((r) => (r.current ? applyBlurFadeUp(r.current, opts) : null)); return () => cleanups.forEach((fn) => fn && fn()); }, []); /* ════════════════════════════════════════════════════════════════════ ABOUT — Chaptered editorial composition (Identifont / Nike-grid vocabulary, Meta-Labs flow). Five numbered chapters stacked inside the rounded liquid-glass capsule, with an ASYMMETRIC interior grid in every chapter so cells don't all read the same. No FAMILY OFFICE wordmark up top — the chapters carry the read. 01 / Premise 7:5 split — sentence | family-office dictionary 02 / Inverse 7:5 split — TINY/FOLLY mega lines | image 03 / What Folly holds 5:4:3 split — list | image | doctrine quote 04 / The Point 5:7 split — image | risk + resolution — Folly definition footer full-width tight dictionary block ──────────────────────────────────────────────────────────────── */ // Type tiers — keep them in step with the rest of the page. // FONT_DISPLAY / FONT_TITLE share the Investments-row category scale // (VENTURE FUNDS / BUSINESS MAJORITY / etc.) so the panel reads at // the same editorial weight as the rest of the landing page rather // than at the heavy display scale it had before. const FONT_DISPLAY = isMobile ? 'clamp(1.05rem, 4.6vw, 1.4rem)' : 'clamp(1.5rem, 2.4vw, 2.25rem)'; const FONT_TITLE = FONT_DISPLAY; const FONT_BODY_LG = isMobile ? 'clamp(1.05rem, 4.2vw, 1.2rem)' : 'clamp(1.125rem, 1.45vw, 1.5rem)'; const FONT_BODY = isMobile ? 'clamp(0.95rem, 3.8vw, 1.05rem)' : 'clamp(1rem, 1.15vw, 1.25rem)'; const FONT_LABEL = isMobile ? '10.5px' : '12px'; const FONT_NUMERAL = isMobile ? '14px' : '16px'; // Padding tokens. Identifont-tight, consistent across chapters. // X and Y use the same value so every cell has the same cushion. const CHAPTER_PAD_X = isMobile ? '20px' : '28px'; const CHAPTER_PAD_Y = isMobile ? '20px' : '28px'; const HEADER_PAD_Y = isMobile ? '14px' : '18px'; // Inter-element gap inside a cell. const GAP_TIGHT = isMobile ? '10px' : '12px'; const GAP_BLOCK = isMobile ? '20px' : '28px'; // Image-placeholder height. Same value across every image cell // so all image moments in the panel sit at identical height — // no visual variance. const IMG_HEIGHT = isMobile ? 240 : 360; // Bubble design tokens — match the Built by Operators bubble and // the Investments accordion rows so this panel reads as part of // the same design system: 28px corners, hairline outline, charcoal // fill for image moments. const BUBBLE_RADIUS = isMobile ? 22 : 28; const BUBBLE_BORDER = '1px solid rgb(var(--c-text) / 0.22)'; const BUBBLE_GAP = isMobile ? '12px' : '16px'; const BUBBLE_EYEBROW_PAD_Y = isMobile ? '16px' : '20px'; const BUBBLE_CONTENT_PAD_Y = isMobile ? '32px' : '48px'; const PANEL_INNER_PAD = isMobile ? '12px' : '20px'; // Charcoal fill for image bubbles — matches the BBO portrait tile // background exactly so the panel's image moments feel of-a-piece // with the operators portraits up top. const IMG_BG = 'rgb(var(--c-invert-bg))'; // Chapter header — cream bg, dark text, hairline rule below. No // icon — the label and the numeral carry the read on their own. const ChapterHeader = ({ num, title }) => (

{num} {title}

); // KeyName highlight — wraps a string in a subtle inset pill so it // reads as a named token, matching the visual weight of AboutLink // hover-marker so all four key names in the premise sentence // (Folly Partners + Andrew + Chris + Tiny) read as the same kind // of object. const KeyName = ({ children }) => ( {children} ); // Icons — minimal geometric vocabulary. const ICON = isMobile ? 18 : 22; const IconAsterisk = ( ); const IconTwoCircles = ( ); const IconGrid = ( ); const IconBars = ( ); // Image placeholder cell. Subtle tint + corner ticks (photographer's // frame) + mono "IMG / 0X" label. Designed to read as INTENTIONALLY // empty — a slot waiting for real imagery — not a broken state. const ImagePlaceholder = ({ tag, ratio = '4 / 3' }) => (

{/* Four corner ticks — 18px L-brackets at each corner. */} {['tl', 'tr', 'bl', 'br'].map(corner => { const isTop = corner.startsWith('t'); const isLeft = corner.endsWith('l'); const COLOR = 'rgb(var(--c-text) / 0.32)'; return ( ); })} {/* Small mono tag — top-left. */} {tag} {/* Subtle diagonal hairline so the cell reads as "frame, not flat." */}

); return (

{/* ════════════════════════════════════════════════════════ ABOUT — Stack of rounded "bubble" rows. Inspired by the Built by Operators (BBO) bubble pattern and the Investments accordion rows: each section is a rounded outlined container (`borderRadius: 28`, `border: 1px solid rgb(var(--c-text) / 0.18)`), stacked vertically inside the liquid-glass capsule with a consistent BUBBLE_GAP between them. Image moments are charcoal-filled rounded bubbles that match the BBO portrait fill exactly. All text inside each bubble is centered, so whitespace is symmetric on both sides — fixes the lopsided right edge that the previous left-aligned blocks had. Cover image rounded charcoal bubble Bubble 01 Premise (lead + gloss) Bubble 02 What we do (TINY then FOLLY stacked) Image break rounded charcoal bubble Bubble 03 The point (context + closing) Bubble 04 Definition (Folly stamp) ──────────────────────────────────────────────── */}

{/* ── Bubble 01 — Premise (FULLY INVERTED) ─────────── Solid charcoal fill, cream text throughout. Stand- alone rounded bubble — separate from Bubble 02 below it (with a clean BUBBLE_GAP between), so the panel reads as four distinct editorial cards rather than a fused custom shape. The dark bubble is the panel's strong opening contrast. */}

Folly Partners is the family office of{' '} {' '} and{' '} {' '}the founders of{' '} .

{/* Family-office gloss — promoted from a hidden footer strip to a prominent dictionary entry that echoes the hero's definition motif (headword · pronunciation · part-of-speech · definition). No hairline: with the divider gone it reads as the bubble's second beat, not a cordoned-off footnote. Top padding is 0 so the gap above is carried by the statement block's own bottom padding (BUBBLE_CONTENT_PAD_Y), keeping the bubble vertically symmetric. */}

family office /ˈfam·ə·lee ˈä·fəs/ n.

rich-people speak for a holding company that manages personal money.

{/* ── Bubble 02 — What we do ─────────────────────── Magazine treatment: TINY and FOLLY become visual design objects, not inline words. Each wordmark sits at poster scale (clamp ~3rem → ~6rem) — the kind of oversized display type that magazine covers and editorial spreads use when there's no photograph and the typography itself has to be the visual content. Each wordmark is followed by a small editorial caption. Reads like an Investments accordion row treatment applied to the panel: big confident headline, short caption, generous breathing. Same family as the rest of the page rather than yet another container of text. */}

{/* TINY — wordmark as design object + caption */}

TINY

Buys companies and operates them.

{/* Generous editorial breath between the two poster moments — the silence is what makes each wordmark land as its own scene. Mobile gets a tighter gap (40 vs 96) so two short captions don't float in a sea of dead space on a small screen. */}

{/* FOLLY — wordmark as design object + caption */}

FOLLY

Does the opposite: holds their personal money in stocks, bonds, real estate, fund stakes, and the occasional quiet minority — patiently, and mostly out of the way.

{/* ── Bubble 03 — The point + Folly definition ───── The closing bubble, now built EXACTLY like Bubble 01: a main padded content area, a flat full-width hairline straight across, then a small italic- serif footer gloss. Bubble 01 carries the premise statement + "family office:" gloss; this one carries the "In short…" stand-first + the "folly:" definition. The definition is no longer its own Bubble 04 box — it's integrated into this box as the footer below the divider, so the panel closes on a matched pair of cards rather than a separate trailing strip. Divider alpha matches BUBBLE_BORDER (0.18) — the light-surface equivalent of Bubble 01's cream 0.18 rule. */}

In short…{' '} Andrew and Chris made a bunch of money building things. The risk is that they get bored, get clever, and lose it.

We exist to make that harder. {' '}To prevent an act of Folly.

{/* Folly gloss — promoted to a prominent dictionary entry mirroring Bubble 01's family-office entry, and capitalised: "Folly" is the firm's name doing double duty as the dictionary headword, so the pun lands. No hairline; top padding 0 so the statement block's own bottom padding carries the gap and the bubble stays vertically symmetric. */}

Folly /ˈfä·lee/ n.

lack of good sense; foolishness.

); } function FeatureCardShell({ children, index, className = '', style }) { const ref = useRef2(null); const inView = useInView2(ref, { once: true, margin: '-100px' }); return ( {children} ); } function IconPlaceholder({ label }) { // Stylized square stand-in for the feature icon return (

); } function ChecklistItem({ children }) { return (

{children}

); } function LearnMoreLink() { return ( Learn more ); } function TextCard({ index, number, title, items }) { return (

{number}

{title}

{it}

); } function VideoCard({ index }) { return (

Your creative canvas.

); } /* ------------------ PEOPLE — MOBILE-ONLY HORIZONTAL CAROUSEL ------------------ Mobile-only scroll-jacked horizontal carousel. The wrapper is N×100vh tall; inside, a `position: sticky` child pins to the viewport top for the duration of that scroll. The user's vertical scroll progress (0..1) maps to a positionFloat (0..N-1), which drives: - a horizontal translateX on the strip so portrait[positionFloat] sits in the optical centre of the viewport, neighbours bleeding in from both edges (Andrew→Chris→Ben→Kurtis as you scroll down) - a continuous opacity falloff: active portrait at 1.0, fully-off neighbours at 0.55 (matches the existing dim treatment) - a sharp opacity crossfade on the matching name + descriptor below, so the editorial copy swaps cleanly as each person crosses the centre No JS animation timer — every visual is a deterministic function of scroll position, so motion stays in lock-step with the user's finger and reverses cleanly on scroll-up. Desktop is untouched: this component is only rendered inside a `.sm:hidden` wrapper, which is `display:none` from the sm (640px) breakpoint up. The `-mx-5` lets the strip escape the section's horizontal padding so portraits can bleed to the actual viewport edges, not the section's content edge. */ function PeopleMobileCarousel({ people }) { const N = people.length; const wrapperRef = useRef2(null); const [progress, setProgress] = React.useState(0); /* entranceTop tracks the wrapper's getBoundingClientRect().top in px. Drives the entrance blur-fade-up reveal. We compute it here as React state (rather than mutating styles imperatively via a separate applyBlurFadeUp) because the carousel re-renders on every scroll tick (`progress` changes), and React would re-apply inline styles each render — clobbering any direct DOM mutations and breaking the reveal animation. Routing the reveal through React state means the styles flow through the normal render cycle and stay coherent. Initial value is large so first paint shows the elements in their hidden/lifted/blurred state until the first scroll tick measures real position. */ const [entranceTop, setEntranceTop] = React.useState(99999); React.useEffect(() => { const el = wrapperRef.current; if (!el) return; let raf = null; const tick = () => { const rect = el.getBoundingClientRect(); // Track wrapper top for the entrance reveal (used in render). setEntranceTop(rect.top); const totalScrollable = el.offsetHeight - window.innerHeight; if (totalScrollable <= 0) { raf = null; return; } const scrolled = -rect.top; const p = Math.max(0, Math.min(1, scrolled / totalScrollable)); setProgress(p); raf = null; }; const onScroll = () => { if (raf == null) raf = requestAnimationFrame(tick); }; // People-section snap uses `el.offsetHeight - window.innerHeight` // as totalScrollable; URL-bar collapse would jitter the mapping. const onResize = stableMobileResize(tick); tick(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onResize); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onResize); if (raf) cancelAnimationFrame(raf); }; }, []); /* Snap-to-person scroll: when the user stops scrolling INSIDE the pin region, ease them to the nearest person's centred position. Uses the modern `scrollend` event when available (Chrome 114+, Safari 18+, all current mobile browsers) so the snap fires after momentum scrolling settles, never mid-flick. Falls back to a 220ms debounced scroll listener for older engines. Why JS rather than CSS scroll-snap: the page itself is the scroll container (driven by Lenis), and applying mandatory CSS snap would conflict with Lenis's smoothing and disrupt scroll behavior site-wide. Targeting just this section's snap points in JS keeps the rest of the page untouched. */ React.useEffect(() => { const trySnap = () => { const el = wrapperRef.current; if (!el) return; const totalScrollable = el.offsetHeight - window.innerHeight; if (totalScrollable <= 0) return; const rect = el.getBoundingClientRect(); const scrolled = -rect.top; // Only snap inside the pin window; outside, leave scroll alone. if (scrolled < 0 || scrolled > totalScrollable) return; const p = scrolled / totalScrollable; const float = p * (N - 1); const nearest = Math.round(float); const targetP = nearest / (N - 1); const targetScrolled = targetP * totalScrollable; // Already within 2px of a snap point — don't ricochet on the // browser's own scrollend event right after we just snapped. if (Math.abs(scrolled - targetScrolled) < 2) return; const targetY = window.scrollY + (targetScrolled - scrolled); window.scrollTo({ top: targetY, behavior: 'smooth' }); }; if ('onscrollend' in window) { window.addEventListener('scrollend', trySnap, { passive: true }); return () => window.removeEventListener('scrollend', trySnap); } let timer = null; const onScroll = () => { if (timer) clearTimeout(timer); timer = setTimeout(trySnap, 220); }; window.addEventListener('scroll', onScroll, { passive: true }); return () => { window.removeEventListener('scroll', onScroll); if (timer) clearTimeout(timer); }; }, [N]); /* Entrance reveal — computed from `entranceTop` (the wrapper's getBoundingClientRect().top) on every render. Because this routes through React's normal render cycle (state → JSX → DOM), the reveal styles never get clobbered by re-renders the way direct DOM mutations from a separate applyBlurFadeUp helper would. Timings mirror the desktop "BUILT BY OPERATORS" reveal: headline: 1.00 → 0.30 (matches desktop headlineWrapRef) strip: 0.70 → -0.05 (matches desktop gridWrapRef) name+role lags slightly so the cascade reads top→bottom. The strong ease-out (1-(1-t)^4) means the reveal needs to span a wide rect.top range or it will complete off-screen — these values place the bulk of the animation in scroll positions where the elements are actually in viewport, so the lift + blur is visible to the user as the section rises. */ const vh = typeof window !== 'undefined' ? (window.innerHeight || 800) : 800; const computeReveal = (startVh, endVh) => { const start = vh * startVh; const end = vh * endVh; const span = start - end; if (span <= 0) return 1; const raw = (start - entranceTop) / span; const t = Math.max(0, Math.min(1, raw)); return 1 - Math.pow(1 - t, 4); }; const revealStyle = (t, dyPx, blurPx) => ({ opacity: t, transform: `translate3d(0, ${((1 - t) * dyPx).toFixed(2)}px, 0)`, filter: `blur(${((1 - t) * blurPx).toFixed(2)}px)`, willChange: 'opacity, transform, filter', }); /* Windows now mirror the DESKTOP BUILT BY OPERATORS reveal EXACTLY (they previously claimed to but didn't — the old 1.00→0.30 / 0.70→-0.05 spans were ~2× wider and completed while the section was barely on screen, so the headline oozed in instead of popping). Desktop: headline 0.95→0.55, grid 0.85→0.40 (applyBlurFadeUp defaults). Same easeOutQuart curve `computeReveal` already uses. Tighter span = punchy pop; later completion = it lands while clearly in view. name/role lags grid slightly so the cascade reads top→bottom (headline → portraits → byline). */ const headlineT = computeReveal(0.95, 0.55); const stripT = computeReveal(0.85, 0.40); const nameRoleT = computeReveal(0.78, 0.30); const positionFloat = progress * (N - 1); // Each portrait is 76vw — wide enough that the active one dominates // the screen, with ~12vw of bleed on each side for the neighbours to // peek through. NO inter-portrait gap: the four portraits read as // one continuous bar across the screen, with only the outermost // corners rounded (Andrew's left, Kurtis's right) — inner edges // butt flush. const PORTRAIT_VW = 76; // Centre portrait[positionFloat] in the viewport. With gap = 0, // each step is exactly PORTRAIT_VW. // stripTx = 50vw - (positionFloat * PORTRAIT_VW + PORTRAIT_VW/2) // At progress 0 (Andrew), stripTx = 12vw → Andrew sits centred with // 12vw to the left and Chris's left edge butting at viewport 88vw // (12vw of Chris peeks through). At progress 1 (Kurtis), stripTx // ≈ -216vw → Kurtis centred, the rest fully off-screen left. const stripTx = 50 - (positionFloat * PORTRAIT_VW + PORTRAIT_VW / 2); const RULE_COLOR = 'rgb(var(--c-text) / 0.16)'; return (

{/* Headline — pinned with the carousel so "BUILT BY OPERATORS" stays visible the whole time the carousel is locked. Uses the SAME clamp(2rem, 8vw, 7.5rem) as "Our Investments" and the desktop "BUILT BY OPERATORS" so title sizing reads as consistent across the whole page. On a 360px portrait phone this resolves to ~32px (8vw clamped at min 2rem). */}

Our Team

{/* Horizontal portrait strip — translates with scroll progress. Height clamps so the strip uses real estate proportionally: on iPhone SE (568px) it's ~205px, on iPhone 12 (844px) it's ~304px, capped at 360px on tall phones. Aspect-1/1 portraits inside take this height (so they're slightly landscape on very narrow screens, square on wider ones — the image object-cover absorbs the difference cleanly). */}

{people.map((p, i) => { const distance = Math.abs(i - positionFloat); // DWELL-PLATEAU opacity. The old `max(0.35, 1 - d*1.3)` // peaked at full brightness ONLY at the exact integer // centre — so for most of the travel between two people // BOTH were dim (the "large amount of time where neither // picture has full visibility" the user reported). // Instead: hold the centred portrait at full opacity // across a DWELL band, then a short, sharp crossfade to // the dim floor. Net: each portrait reads as fully // present for the bulk of its turn, with a quick // hand-off — no murky dead zone in the middle. const DWELL = 0.32; // ± band held at full opacity const FADE = 0.20; // crossfade width past the dwell const FLOOR = 0.32; // resting dim for off-centre portraits let opacity; if (distance <= DWELL) { opacity = 1; } else { const f = Math.min(1, (distance - DWELL) / FADE); // easeInOutCubic on the crossfade so the hand-off is // crisp in the middle but lands softly at both ends. const e = f < 0.5 ? 4 * f * f * f : 1 - Math.pow(-2 * f + 2, 3) / 2; opacity = Math.max(FLOOR, 1 - e * (1 - FLOOR)); } // Outermost corners only: Andrew (i=0) gets left-side // corners, Kurtis (i=N-1) gets right-side corners, // everyone in between has square corners so the strip // reads as one connected bar. Order in CSS shorthand is // top-left top-right bottom-right bottom-left. const isFirst = i === 0; const isLast = i === N - 1; const r = '20px'; const borderRadius = `${isFirst ? r : '0'} ${isLast ? r : '0'} ${isLast ? r : '0'} ${isFirst ? r : '0'}`; return (

); })}

{/* Name + role — sharp crossfade tied to the active person. Height clamps so the row stays compact on tiny phones and doesn't dominate vertical real estate. */}

{people.map((p, i) => { const distance = Math.abs(i - positionFloat); // Sharp crossfade: opacity hits 0 at distance ≥ 0.5, so two // bylines never read at half-strength simultaneously. const o = Math.max(0, 1 - distance * 2); return (

{p.name}

{p.role}

); })}

{/* Descriptor — all four cards stacked in a single CSS grid cell so the wrapper auto-sizes to the tallest, then opacity + ruleScale interpolate against scroll distance. The frame rules draw in/out continuously rather than animating on a timer, so the motion stays glued to the finger. mx-auto + maxWidth caps the line length on landscape mobile / wider phones so justified text doesn't stretch into a uncomfortable measure (>75 chars/line is the readability cliff). On a typical 360-430px wide phone, mx-5 still wins (the maxWidth doesn't kick in below 22rem); on a 600px+ mobile landscape, the maxWidth keeps the column tight. */}

75-char measure. mx auto keeps the block centred when maxWidth kicks in on wider screens. */ width: '100%', maxWidth: '32rem', marginLeft: 'auto', marginRight: 'auto', paddingLeft: '1.25rem', paddingRight: '1.25rem', boxSizing: 'border-box', }} > {people.map((p, i) => { const distance = Math.abs(i - positionFloat); const o = Math.max(0, 1 - distance * 2); const ruleScale = Math.max(0, 1 - distance * 2); return (

0.5 ? 'auto' : 'none', }} >

{/* No tag/byline row here on mobile — the active person's name + role already sits as a single block beneath the portrait above, so repeating it inside the framing rules would be redundant. The rules just frame the body copy directly. */}

{p.description}

); })}

); } /* ------------------------------- PEOPLE ------------------------------- */ function Features() { const people = [ { name: 'Andrew Wilkinson', role: 'Co-Founder', photo: 'media/people/andrew.png?v=6', photoStyle: { objectPosition: '50% 0%' }, description: 'Co-founder of Tiny. Has personally committed enough acts of folly to fund the firm’s existence.', }, { name: 'Chris Sparling', role: 'Co-Founder', photo: 'media/people/chris.png?v=7', photoStyle: { objectPosition: '50% 0%', }, description: 'Co-founder of Tiny. The reason most of the truly bad ideas don’t make it too far.', }, { name: 'Ben Moore', role: 'President', photo: 'media/people/ben.png?v=11', photoStyle: { objectPosition: '50% 0%' }, description: 'Fifteen years with Andrew and Chris — from copywriter to the C-suite of a public company. He has sat on every side of the table, and backs every deal we make with his own money.', }, { name: 'Kurtis Vallee', role: 'Chief Financial Officer', photo: 'media/people/kurtis.png?v=7', photoStyle: { objectPosition: '50% 0%', transform: 'translateY(-1.5%) scale(1.08)', }, description: 'Turns interesting conversations into clean deals, while also ensuring we don’t fly into the side of a mountain. Also puts his money where his mouth is, and cuts checks into every deal.', }, ]; // Resting state is NO selection (null) — nobody is singled out on // first paint. Hovering a tile makes it the active one (lifts it, // dims the rest, reveals its bio); leaving the portrait block // resets to null so every tile returns to the neutral state rather // than leaving the last-hovered person stuck active. const [hovered, setHovered] = React.useState(null); // ---- SCROLL-DRIVEN BLUR-FADE-UP REVEAL ---- // As the hand catcher + falling figures recede out of view above // (peopleRect.top vh*1.0 → vh*0.5), this section's three blocks // blur-fade up from below in a clean cascade — headline first, // portraits second, descriptor third. Each layer is keyed off the // PEOPLE section's getBoundingClientRect().top via the shared // applyBlurFadeUp helper (passing `getRefTop`), so the cascade // synchronises with the hand recede above rather than each // element's own scroll position. // // Timings sit ~0.10vh earlier than the original pass so the words // unblur sooner — feels less like "waiting for them to settle" // and more like the next section is taking the baton smoothly. const headlineWrapRef = useRef2(null); const gridWrapRef = useRef2(null); React.useEffect(() => { // Match the Investments reveal exactly so the lift+blur cascade // reads the same on both sections — same dyPx/blurPx (defaults // 60/18 from applyBlurFadeUp), same tight scroll range (~40vh), // and keyed off each element's own top (no getRefTop) so the // animation runs as the user scrolls the headline / grid into // view, not as the section as a whole moves. Tight range = punchy // pop-up rather than a slow gradual fade. const cleanups = [ applyBlurFadeUp(headlineWrapRef.current, { startVh: 0.95, endVh: 0.55 }), applyBlurFadeUp(gridWrapRef.current, { startVh: 0.85, endVh: 0.40 }), ]; return () => cleanups.forEach((fn) => fn && fn()); }, []); return (

{/* DESKTOP-ONLY headline — hidden on mobile because the PeopleMobileCarousel renders its own headline inside the pinned sticky region (so the title stays visible while the carousel is locked). The applyBlurFadeUp reveal still runs against this ref but mutates a display:none element on mobile, which is harmless. */}

{/* Headline — first reveal layer, blur-fades up as the hand recedes above. */}

Our Team

{/* DESKTOP-ONLY layout below — hidden on mobile (<640px) where the new PeopleMobileCarousel takes over. `hidden sm:block` sets display:none below sm, display:block from sm up, so desktop layout is byte-identical to its previous form (block container is layout-neutral around block children). */}

{/* Portraits + name row — second reveal layer, follows the headline. */}

{/* Unified portrait block — 4 tiles butted edge-to-edge, outer corners rounded, inner edges flush. No gaps. Hover dim/highlight uses 240ms ease-out (was 450ms). Hover should feel snappy — under 250ms reads as instant feedback, anything longer feels like the page is "thinking" about whether to respond. The tiles also gain a subtle :active scale so a tap registers as a press. */}

setHovered(null)} > {people.map((p, i) => { const isHovered = hovered === i; // At rest (nothing hovered) every tile sits untouched — no one // singled out. Hovering one keeps it bright and applies a cream // wash over the rest. The wash lives inside each tile instead of // lowering tile opacity, which avoids one-pixel seams between // adjacent portraits on subpixel/composited edges. const washOpacity = hovered === null || isHovered ? 0 : 0.45; return (

setHovered(i)} aria-label={`${p.name}, ${p.role}`} tabIndex={0} onFocus={() => setHovered(i)} >

); })}

{/* Bubble box — 4-sided rounded outline that wraps the name row + description region. Border colour, weight, and radius match the Investment rows below so the page reads as one design system. The bubble's vertical edges run from the bottom of the portrait block above down to the bottom of the description, and the rounded corners are the same 28px the rest of the page uses. */}

{/* Name + role row — the bubble's RESTING content. Vertical padding is SYMMETRIC (equal top + bottom) so that, with the bio drawer collapsed to zero height below, the bubble reads as a deliberate, self-contained byline bar — not a header waiting for a body. Color/weight are HOVER-driven UI feedback and resolve quickly (220ms). The expanding bio drawer adds its OWN padding only while it is open, so at rest this centered bar is the entire box, top to bottom. */}

{people.map((p, i) => { const emphasized = hovered === i; return (

{p.name}

{p.role}

); })}

{/* ── COLLAPSE-THE-VOID BIO DRAWER ──────────────────────────── At rest (hovered === null) this whole region — hairline divider AND bio — is collapsed to height 0, so the bubble hugs the byline bar above as a complete, intentional bar with no empty cream below it. Hovering a person animates the drawer open to its natural height (Framer Motion height:auto → measured px), revealing the divider, then that person's bio; mouse-leave (handled on the portrait grid) collapses it back. Height + opacity + blur all ride the site's signature easing [0.23,1,0.32,1] so the open/close feels like the rest of the page rather than a generic accordion. The drawer holds the divider on the SAME element so the line only exists while open — no orphan hairline floating under the names at rest. Inside, the per-person bios are stacked absolutely and crossfade, so hovering a *different* person while already open swaps copy smoothly without re-collapsing. `aria-hidden` + a measured min-height keep the open state stable across the four bios (longest = Ben/Kurtis ~3 lines). */} {/* Hairline divider — lives inside the drawer so it appears only while a bio is open. Same colour/weight as the bubble border so the box reads as one design system. */}

{/* Bio stage — absolutely-stacked bios crossfade on hover. min-height is responsive so the drawer settles to one comfortable open height regardless of which bio is showing, avoiding a height "jump" when swapping between a short bio (Andrew/Chris, 1 line) and a longer one (Ben/Kurtis). */}

{people.map((p, i) => { const active = hovered === i; return (

{p.description}

); })}

{/* /bubble box */}

{/* /gridWrapRef — closes the second reveal layer */}

{/* /hidden sm:block — closes the desktop-only layout */} {/* MOBILE-ONLY layout — scroll-jacked horizontal carousel. `sm:hidden` is `display:none` from the sm (640px) breakpoint up, so this branch never renders on desktop and cannot affect that layout. Below sm it replaces the desktop grid/byline/descriptor stack with a single pinned composition (see PeopleMobileCarousel above). */}

); } /* ------------------------------ INVESTMENTS ------------------------------ */ // Per-letter scramble. When `active` flips true, each letter cycles through // random uppercase/digit glyphs on a stagger, then settles back to the // original. Spaces and punctuation are skipped so word boundaries stay // readable mid-scramble. Cleanup cancels the interval on unmount or when // `active` flips off, so jumping between rows never leaves an orphan // animation running on a row that is no longer hovered. function ScrambleText({ text, active, stagger = 18, duration = 260, frameInterval = 72, delay = 0, }) { const [display, setDisplay] = React.useState(text); const intervalRef = useRef2(null); const timeoutRef = useRef2(null); React.useEffect(() => { const clearAll = () => { if (intervalRef.current) { clearInterval(intervalRef.current); intervalRef.current = null; } if (timeoutRef.current) { clearTimeout(timeoutRef.current); timeoutRef.current = null; } }; clearAll(); if (!active) { setDisplay(text); return; } const CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*+=?/<>'; const targetChars = text.split(''); const totalDuration = targetChars.length * stagger + duration; const begin = () => { const start = performance.now(); const tick = () => { const elapsed = performance.now() - start; const next = targetChars.map((ch, i) => { if (!/[A-Za-z0-9]/.test(ch)) return ch; const charStart = i * stagger; const charEnd = charStart + duration; if (elapsed < charStart || elapsed >= charEnd) return ch; return CHARS[Math.floor(Math.random() * CHARS.length)]; }); setDisplay(next.join('')); if (elapsed >= totalDuration) { setDisplay(text); clearInterval(intervalRef.current); intervalRef.current = null; } }; tick(); intervalRef.current = setInterval(tick, frameInterval); }; if (delay > 0) { timeoutRef.current = setTimeout(begin, delay); } else { begin(); } return clearAll; }, [active, text, stagger, duration, frameInterval, delay]); return display; } // Stacked accordion-style list of investment categories. On hover, the row // expands vertically, its background fills solid lavender, and a placeholder // image panel appears on the right (ready to accept real imagery). function InvestmentRow({ item, isActive, index, onHover }) { const isMobile = useIsMobile(); // Active row inverts: warm near-black bg + cream text. rgb(var(--c-text)) is // the exact canvas color sampled from the BUILT BY OPERATORS portrait // backgrounds (andrew/ben/chris/kurtis), so the active row visually // ties back to the operator section above — one shared ink across // both inverted moments on the page. const INK_BG = 'rgb(var(--c-text))'; const CREAM_FG = 'rgb(var(--c-invert-text))'; const href = `/investments?category=${item.slug}`; const descriptionLines = item.descriptionLines || [item.description]; const titleLines = isActive && item.titleLines ? item.titleLines : [item.title]; // Unified 650ms / cubic-bezier(0.23, 1, 0.32, 1) across every // property that changes when a row activates (height, bg, border, // image opacity + height, arrow bg + border, every inline color // transition further down). Single source of truth — change DUR // or EASE here and every property re-tunes in lockstep. // // easeOutQuint — the same curve already used 13× elsewhere in // sections.jsx for hover/interaction transitions, so the row // expansion shares the site's interaction-curve vocabulary // rather than introducing a foreign one. Front-loaded enough to // feel responsive to hover, with a long silky tail so the settle // reads as premium rather than abrupt. // // 650ms on the 112px height jump = ~170 px/s — the comfortable // glide range for accordion reveals. Tuned between two prior // attempts: 1200ms read as patient/sluggish, 420ms read as // snappy/choppy because at short durations easeOutQuint's // front-loading exposes itself as a "snap" rather than a glide // AND multi-row sweeps couldn't overlap gracefully (the // outgoing row collapsed before the new one had committed, // creating a perceptual jump). 650ms gives the outgoing and // incoming transitions enough overlap that a cursor sweep // across rows reads as one continuous gesture. const EASE = 'cubic-bezier(0.23, 1, 0.32, 1)'; const DUR = '650ms'; const ROW_TRANSITION_DESKTOP = `height ${DUR} ${EASE},` + ` background-color ${DUR} ${EASE},` + ` border-color ${DUR} ${EASE}`; const ROW_TRANSITION_MOBILE = `background-color ${DUR} ${EASE},` + ` border-color ${DUR} ${EASE}`; const IMAGE_TRANSITION = `height ${DUR} ${EASE},` + ` opacity ${DUR} ${EASE}`; const ARROW_TRANSITION = `background-color ${DUR} ${EASE},` + ` border-color ${DUR} ${EASE}`; const COLOR_TRANSITION = `color ${DUR} ${EASE}`; // Mobile rows are uniform 152 px — keeping height constant prevents the // scroll-driven active detection from flickering when the active row // would otherwise grow and shift the geometry under the listener. const rowHeight = isMobile ? 152 : (isActive ? 190 : 78); const rowTransition = isMobile ? ROW_TRANSITION_MOBILE : ROW_TRANSITION_DESKTOP; // Touch screens fire onMouseEnter on tap — gating to (hover: hover) // keeps mobile scroll-driven activation from getting overridden by a // stray hover when the user taps a row. const handleMouseEnter = () => { if (isMobile) return; if (typeof window !== 'undefined' && window.matchMedia && !window.matchMedia('(hover: hover) and (pointer: fine)').matches) return; onHover(index); }; return ( {isMobile ? ( /* === MOBILE LAYOUT === Title up top (full width, smaller font), then a bottom row of VIDEO TILE | DESCRIPTION | ARROW. Constant 152 px height; the active state is communicated purely by the lavender background, brighter description, and the playing video tile. Scroll-driven activation is wired in Investments(). */

{titleLines.map((line, lineIndex) => ( {lineIndex > 0 &&
} ))}

{item.video ? ( ) : item.image && (

)}

{/* Join the pre-split lines into one string on mobile and let it wrap naturally — the desktop line-break points are too wide for the narrow phone column and were clipping mid-word. */} {(item.description || descriptionLines.join(' '))}

) : ( /* === DESKTOP LAYOUT (unchanged from prior) === */

{titleLines.map((line, lineIndex) => ( {lineIndex > 0 &&
} ))}

{item.video ? ( ) : item.image && (

)}

{descriptionLines.map((line, lineIndex) => ( {lineIndex > 0 &&
} {line} ))}

)} ); } function Investments() { // Slugs MUST match the investments page taxonomy (CAT_ORDER in // investments.html: funds / venture / businesses / public-equities / // real-estate). Any other value falls through to "all". The old // taxonomy (venture-funds / business-minority / business-majority / // philanthropy) is dead — those rows silently landed on the unfiltered // grid. Business minority + majority collapsed into one "Businesses" // row (one slug, no duplicate deep-link); philanthropy was removed // entirely. Titles/labels track the investments-page category labels. const items = [ { title: 'VENTURE', slug: 'venture', description: 'Semi-random investments in founders we admire.', descriptionLines: ['Semi-random investments', 'in founders we admire.'], video: 'media/investments/15.mp4' }, { title: 'BUSINESSES', slug: 'businesses', description: 'Passive investments in wonderful private businesses.', descriptionLines: ['Passive investments in', 'wonderful private businesses.'], video: 'media/investments/business-shop.mp4?v=12' }, { title: 'PUBLIC EQUITIES', slug: 'public-equities', titleLines: ['PUBLIC', 'EQUITIES'], description: 'Long-held positions in public companies.', descriptionLines: ['Long-held positions in', 'public companies.'], video: 'media/investments/14.mp4' }, { title: 'FUNDS', slug: 'funds', description: 'We back managers we think highly of and leave them alone.', descriptionLines: ['We back managers we think highly of', 'and leave them alone.'], video: 'media/investments/funds-manager.mp4?v=11' }, { title: 'REAL ESTATE', slug: 'real-estate', description: 'We occasionally buy buildings, often to make a neighborhood better.', descriptionLines: ['We occasionally buy buildings, often', 'to make a neighborhood better.'], video: 'media/investments/13.mp4?v=2' }, ]; const [active, setActive] = React.useState(null); const isMobile = useIsMobile(); // Blur-fade-up reveal — headline rises first, accordion list a beat // later. Both keyed off the section's own scroll position so they // enter as the user reaches them, matching the cascade in the // BUILT BY OPERATORS block above. const headlineRef = useRef2(null); const listRef = useRef2(null); useBlurFadeUp(headlineRef, { startVh: 0.95, endVh: 0.55 }); useBlurFadeUp(listRef, { startVh: 0.85, endVh: 0.40 }); // ---- HEADLINE FIT-TO-WIDTH ---- // "Our Investments" is sized to span the exact same horizontal width // as the accordion rows below. Both live inside the same `max-w-7xl` // container, so we measure the container's content width, measure the // headline at a base font-size of 100px in a hidden span (same font / // weight / letter-spacing as the visible h2), then scale up. // Re-runs on resize and on fonts.ready so the layout resettles with // real font metrics rather than the system fallback. const titleContainerRef = useRef2(null); const titleMeasureRef = useRef2(null); const [titleFontSize, setTitleFontSize] = React.useState(120); React.useEffect(() => { if (!titleContainerRef.current || !titleMeasureRef.current) return; const fit = () => { const cw = titleContainerRef.current?.getBoundingClientRect().width; const measureEl = titleMeasureRef.current; if (!cw || !measureEl) return; const naturalWidth = measureEl.getBoundingClientRect().width; if (naturalWidth > 0) { const computed = (cw / naturalWidth) * 100; // Clamp so the headline never goes absurdly small on tiny phones // (where px-5 padding eats most of the viewport) or absurdly // large on a giant 6K display. setTitleFontSize(Math.max(40, Math.min(260, computed))); } }; fit(); const ro = new ResizeObserver(fit); ro.observe(titleContainerRef.current); let cancelled = false; if (document.fonts && document.fonts.ready) { document.fonts.ready.then(() => { if (!cancelled) fit(); }); } return () => { cancelled = true; ro.disconnect(); }; }, []); // ---- SCROLL-DRIVEN ACTIVE ROW (MOBILE ONLY) ---- // Touch devices have no hover, so the user can't activate a row by // pointing at it. Instead, the row whose vertical centre is closest // to the viewport's vertical centre becomes "active" — its lavender // wash lights up, its description brightens, and its video plays // (paused={!isActive} on the LazyVideo inside the row). // // Only updates `active` when at least one row is actually inside the // viewport — otherwise, scrolling above or below the section would // keep flipping the active to the topmost / bottommost row and start // a video the user can't see. React.useEffect(() => { if (!isMobile) return; const list = listRef.current; if (!list) return; let raf = 0; const tick = () => { const vh = window.innerHeight || 800; const vpCentre = vh * 0.5; const rows = list.querySelectorAll('[data-investment-row]'); let bestIdx = -1; let bestDist = Infinity; rows.forEach((el, i) => { const r = el.getBoundingClientRect(); // Skip rows entirely outside the viewport. if (r.bottom < 0 || r.top > vh) return; const rowCentre = r.top + r.height * 0.5; const dist = Math.abs(rowCentre - vpCentre); if (dist < bestDist) { bestDist = dist; bestIdx = i; } }); if (bestIdx >= 0) { setActive((cur) => (cur === bestIdx ? cur : bestIdx)); } }; const onScroll = () => { if (raf) return; raf = requestAnimationFrame(() => { raf = 0; tick(); }); }; tick(); // Re-tick after layout settles — the BUILT BY OPERATORS reveal // above + lazy-loaded videos can shift row positions for the // first second or so. const settle = [50, 200, 600, 1500].map((ms) => setTimeout(tick, ms)); // Wrap so iOS URL-bar collapse doesn't flip the active section // mid-scroll (vh-based threshold math). const onResize = stableMobileResize(tick); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onResize); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onResize); settle.forEach(clearTimeout); if (raf) cancelAnimationFrame(raf); }; }, [isMobile]); // pb-16 (mobile only — sm:py-28 overrides from 640px up) keeps the // Investments→Footer gap at 8rem on mobile, matching the // BBO→Investments gap above for consistent inter-section rhythm. // Desktop py values are untouched. return (

{/* Ultra-bold headline — single line, font-size computed in JS so the text spans EXACTLY the container width, matching the accordion rows below edge-to-edge. No text-center: at full container width both edges already align flush. */}

Our Investments

{/* Hidden measurer — same font / weight / letter-spacing as the visible h2 above, fixed at base font-size 100. Used by the fit-to-width effect to compute the pixel font-size that makes the visible h2 span the container's content width. */}

{/* Accordion list — sits below, tight gap between rows. Top margin scaled up (mt-12 sm:mt-16 md:mt-20) since the headline above is now a full-width display headline rather than a smaller centered one — the bigger title needs more air below it for balance. */}

{ if (!isMobile) setActive(null); }} > {items.map((item, i) => ( ))}

{/* "View the full portfolio" CTA — clean editorial link sitting below the accordion list, deep-linking to the dedicated investments page. Reuses the page's existing `nav-link` / `nav-arrow` classes so the hover arrow-nudge (translateX on hover-capable devices, gated via the CSS media query already in index.html) is identical to the top-bar links — one consistent affordance across the page. `press-strong` adds the 0.97 scale-on-press feedback so taps feel responsive. Generous top margin (mt-12 / 16 / 20) matches the rhythm separating the headline from the list above, so the CTA reads as a deliberate next-beat rather than a tail to the last row. Mobile uses `text-lg` (18px) instead of `text-base` (16px) so the CTA sits at the same scale as the accordion item titles above (clamp(1.05rem, 4.6vw, 1.4rem) ≈ 17-22px). 16px would have read as visually quieter than the rows it follows — undermining its role as the "next step" affordance. The `gap-2.5` mobile (was `gap-2`) gives a touch more breath between the bumped-up label and the arrow so the inline-flex pair stays balanced. */}

View the full portfolio

); } Object.assign(window, { Hero, About, Features, Investments, Navbar, // Reveal helpers shared with footer.jsx (separate Babel script scope). applyBlurFadeUp, useBlurFadeUp, REVEAL_INITIAL_STYLE, });

FAMILYOFFICE

{title}

Your creative canvas.

Our Team

Our Team

{titleLines.map((line, lineIndex) => ( {lineIndex > 0 && } ))}

{titleLines.map((line, lineIndex) => ( {lineIndex > 0 && } ))}

Our Investments

FAMILY
OFFICE

{titleLines.map((line, lineIndex) => ( {lineIndex > 0 &&
} ))}

{titleLines.map((line, lineIndex) => ( {lineIndex > 0 &&
} ))}