{/* spotlight + dust keyframes (scoped to this section) */} {/* AMBIENT BG: scattered spotlights + drifting dust */}

{/* 6 scattered spotlights, each subtly breathing in place */} {spotlights.map((s, i) => (

0 ? 'work-spot-drift' : 'work-spot-drift-rev'} ${s.dur}s ease-in-out infinite`, animationDelay: `${s.delay}s` }}>

))} {/* 90 dust particles — denser scatter */} {dust.map((p, i) => ( ))}

{/* TOP META ROW: eyebrow LEFT · counter RIGHT */}

07 — Selected Work

{/* MANIFESTO: 4 words stacked huge — the brand promise */}

{['Clear', 'Stronger', 'Intentional', 'Focused'].map((word, i) => (

{word}.

))}

{/* hairline + specifics caption */}

messaging · trust · flow · action

{/* scroll cue — enter the gallery */}

↓ enter gallery

{/* CASE STUDIES — sticky pin: mockup persists left, copy scrolls right */}

↳ TRUSTED CAPITAL · EST. 2018

{headline}

Liquidity, structure, and reporting in one ledger. Audited quarterly. Move when your strategy says move.

{/* fake chart */}

{[ ['AUM', '$1.42B', '+12.4% YoY'], ['Sharpe', '1.86', 'rolling 3y'], ['Drawdown', '−4.1%', 'all-time'] ].map(([k, v, d]) => (

{k.toUpperCase()}

{v}

{d}

))}

); } function MockCinematic({ palette, name, headline }) { return (

{/* aurora rings */} {[0,1,2,3].map(i => (

))} {/* corner brand */}

{name}

EP / 04 — ▶

{/* centered title */}

{headline}

AN AI STUDIO FOR ORIGINAL SOUND

BEGIN A SESSION →

{/* bottom waveform */}

{Array.from({ length: 60 }).map((_, i) => { const h = 2 + ((Math.sin(i * 0.6) + 1) * 6 + (i % 3)); return ; })}

); } function MockProduct({ palette, name, headline }) { return (

LIVE — 248 BUILDERS THIS WEEK

{headline}

Page template, copy framework, CTA library and the launch sequence. Everything you need by lunch.

GET THE KIT · $48 or preview the system →

{/* product card */}

INCLUDED

{['Hero framework × 4', 'Offer/copy worksheets', 'CTA library × 28', 'Launch email sequence'].map(x => (

{x}

))}

★ 4.93 · 380 BUILDERS SHIPPED

); } // ───────────────────────────────────────────────────────────────────────── // LAYOUT · STICKY PIN — mockup sticks, copy scrolls past, swaps active case // ───────────────────────────────────────────────────────────────────────── function LayoutSticky() { const [active, setActive] = React.useState(0); const copyRefs = React.useRef([]); const activeRef = React.useRef(0); React.useEffect(() => { activeRef.current = active; }, [active]); React.useEffect(() => { let raf = null; const update = () => { raf = null; const vh = window.innerHeight; const advanceLine = vh * 0.5; // next block center reaches center → swap forward const retreatLine = vh * 0.9; // current block center reaches near-bottom → swap back let idx = activeRef.current; // forward: advance while next block has reached center while (idx < copyRefs.current.length - 1) { const next = copyRefs.current[idx + 1]; if (!next) break; const r = next.getBoundingClientRect(); if (r.top + r.height / 2 <= advanceLine) idx++; else break; } // backward: retreat while current block has scrolled near bottom while (idx > 0) { const cur = copyRefs.current[idx]; if (!cur) break; const r = cur.getBoundingClientRect(); if (r.top + r.height / 2 > retreatLine) idx--; else break; } if (idx !== activeRef.current) setActive(idx); }; const onScroll = () => { if (raf == null) raf = requestAnimationFrame(update); }; window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); update(); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); if (raf != null) cancelAnimationFrame(raf); }; }, []); const w = WORK[active]; return (

{/* LEFT — sticky mockup (desktop only; mobile CSS turns this static & hides it) */}

{w.n}

{w.kind}

{w.year}

{/* RIGHT — scrolling copy blocks (each carries its own inline mockup for mobile) */}

{WORK.map((c, i) => (

copyRefs.current[i] = el} data-sticky-copy style={{ minHeight: '80dvh', display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingBlock: 40, opacity: active === i ? 1 : 0.35, transition: 'opacity 400ms ease' }}> {/* mobile chapter card — big /XX marker, hidden on desktop */}

{c.n}

{c.kind}

{c.year} · {String(i+1).padStart(2,'0')} / {String(WORK.length).padStart(2,'0')}

{/* inline mockup for mobile (hidden on desktop) */}

{/* desktop small marker — hidden on mobile (chapter card replaces) */}

{c.n} · {String(i+1).padStart(2,'0')} / {String(WORK.length).padStart(2,'0')}

{c.name}

{c.sub}

{c.tags.map(t => {t})}

))}

); }