// Hero — editorial split layout, oversized serif headline + portrait card // ===== Dramatic intro overlays ===== function ShowcaseIntro({ onDone }) { const words = ['I', 'build', 'marketing', 'that earns', 'its budget', 'back.']; const WORD_MS = 440; const START_DELAY = 280; const LAST_HOLD = 480; const MORPH_MS = 820; const [ready, setReady] = React.useState(false); const [phase, setPhase] = React.useState('manifesto'); const [wordIdx, setWordIdx] = React.useState(-1); const backRef = React.useRef(null); const morphedRef = React.useRef(false); const targetRef = React.useRef(null); // Wait for fonts before any animation timers run — prevents FOUT mid-intro. React.useEffect(() => { let alive = true; const fontsReady = (document.fonts && document.fonts.ready) ? document.fonts.ready : Promise.resolve(); const fallback = new Promise(r => setTimeout(r, 1500)); Promise.race([fontsReady, fallback]).then(() => { if (alive) setReady(true); }); return () => { alive = false; }; }, []); React.useEffect(() => { if (!ready) return; const timers = []; timers.push(setTimeout(() => setWordIdx(0), START_DELAY)); words.forEach((_, i) => { if (i === 0) return; timers.push(setTimeout(() => setWordIdx(i), START_DELAY + i * WORD_MS)); }); const morphAt = START_DELAY + words.length * WORD_MS + LAST_HOLD; timers.push(setTimeout(() => setPhase('morphing'), morphAt)); timers.push(setTimeout(() => { const t = targetRef.current || document.querySelector('[data-back-target]'); if (t) t.style.visibility = ''; setPhase('done'); onDone && onDone(); }, morphAt + MORPH_MS)); return () => timers.forEach(clearTimeout); }, [ready]); // Position "back." at viewport center once it mounts (the last manifesto word). React.useLayoutEffect(() => { if (wordIdx !== words.length - 1) return; const node = backRef.current; if (!node) return; const r = node.getBoundingClientRect(); const vw = window.innerWidth; const vh = window.innerHeight; node.style.top = ((vh - r.height) / 2) + 'px'; node.style.left = ((vw - r.width) / 2) + 'px'; // Defer a frame so the position write commits before the entrance transition. requestAnimationFrame(() => { node.style.opacity = '1'; node.style.transform = 'none'; node.style.filter = 'none'; }); }, [wordIdx]); // FLIP morph (pixel-space — no percentage translates). React.useLayoutEffect(() => { if (phase !== 'morphing' || morphedRef.current) return; const node = backRef.current; const target = document.querySelector('[data-back-target]'); if (!node || !target) return; morphedRef.current = true; targetRef.current = target; const first = node.getBoundingClientRect(); const firstFs = parseFloat(window.getComputedStyle(node).fontSize); target.style.visibility = 'hidden'; const last = target.getBoundingClientRect(); const lastCs = window.getComputedStyle(target); const lastFs = parseFloat(lastCs.fontSize); node.style.transition = 'none'; node.style.top = last.top + 'px'; node.style.left = last.left + 'px'; node.style.fontSize = lastFs + 'px'; node.style.lineHeight = lastCs.lineHeight; node.style.letterSpacing = lastCs.letterSpacing; const dx = first.left - last.left; const dy = first.top - last.top; const scale = firstFs / lastFs; node.style.transformOrigin = 'top left'; node.style.transform = `translate(${dx}px, ${dy}px) scale(${scale})`; void node.offsetWidth; node.style.transition = `transform ${MORPH_MS}ms cubic-bezier(.7,.04,.32,1), color ${MORPH_MS}ms cubic-bezier(.7,.04,.32,1)`; node.style.transform = 'none'; node.style.color = lastCs.color; }, [phase]); React.useEffect(() => () => { const t = targetRef.current || document.querySelector('[data-back-target]'); if (t) t.style.visibility = ''; }, []); if (phase === 'done') return null; const isLast = wordIdx === words.length - 1; return ( ); } function ManifestoIntro({ onDone }) { const words = ['I', 'build', 'marketing', 'that earns', 'its budget', 'back.']; const WORD_MS = 440; const [idx, setIdx] = React.useState(0); const [fading, setFading] = React.useState(false); React.useEffect(() => { const timers = []; words.forEach((_, i) => { if (i > 0) timers.push(setTimeout(() => setIdx(i), i * WORD_MS)); }); timers.push(setTimeout(() => setFading(true), words.length * WORD_MS + 160)); timers.push(setTimeout(() => onDone && onDone(), words.length * WORD_MS + 160 + 520)); return () => timers.forEach(clearTimeout); }, []); return ( ); } function NameTakeoverIntro({ onDone }) { const [phase, setPhase] = React.useState('hold'); React.useEffect(() => { const t1 = setTimeout(() => setPhase('shrink'), 1050); const t2 = setTimeout(() => { setPhase('done'); onDone && onDone(); }, 1050 + 760); return () => { clearTimeout(t1); clearTimeout(t2); }; }, []); if (phase === 'done') return null; return ( ); } function PortraitTakeoverIntro({ targetRef, src, onDone }) { const cloneRef = React.useRef(null); const [done, setDone] = React.useState(false); React.useEffect(() => { const t1 = setTimeout(() => { const c = cloneRef.current, t = targetRef && targetRef.current; if (c && t) { const r = t.getBoundingClientRect(); c.style.transition = 'top 900ms cubic-bezier(.7,.04,.32,1), left 900ms cubic-bezier(.7,.04,.32,1), width 900ms cubic-bezier(.7,.04,.32,1), height 900ms cubic-bezier(.7,.04,.32,1), border-radius 900ms cubic-bezier(.7,.04,.32,1)'; c.style.top = r.top + 'px'; c.style.left = r.left + 'px'; c.style.width = r.width + 'px'; c.style.height = r.height + 'px'; c.style.borderRadius = '22px'; } }, 1150); const t2 = setTimeout(() => { setDone(true); onDone && onDone(); }, 1150 + 900 + 80); return () => { clearTimeout(t1); clearTimeout(t2); }; }, []); if (done) return null; return ( ); } function CurtainIntro({ onDone }) { const [phase, setPhase] = React.useState('enter'); React.useEffect(() => { const t1 = setTimeout(() => setPhase('hold'), 620); const t2 = setTimeout(() => setPhase('split'), 620 + 380); const t3 = setTimeout(() => setPhase('paint'), 620 + 380 + 240); const t4 = setTimeout(() => { setPhase('done'); onDone && onDone(); }, 620 + 380 + 720 + 600); return () => [t1, t2, t3, t4].forEach(clearTimeout); }, []); if (phase === 'done') return null; return ( <>