/* ========================================================================= Chan site v2 — scene components (P0.16: compose + mega-room MERGED into one pinned sequence. Verified live on extra.email 2026-06-10: their clip window opens over a room whose headline + list are ALREADY laid out at final positions underneath; the left column springs up first, the rows stamp top to bottom, and the last rail scene renders inside a phone outline that hands off to the next section's real device.) Vision-confirmed extra.email structure (2026-06-10 scroll-through): 1 cinematic hero (no product chrome) 2 compose BRIDGE, scroll-scrubbed: FROM/TO/ATTACHED chrome, body types itself (the manifesto lives INSIDE the compose body), giant Send arms 3 brand mega-room: full-bleed product surface that TRANSFORMS per rail scene (raw list → chips stamp on by scroll wipe → rows fly out → digest sheet slides up). Their stage bleeds past the viewport edge (measured right edge 1735px on a 1470px viewport). 4 cycling-word carousel: real device + ghost neighbor panels + emoji dock (Fae-grade phone treatment) 5 one full feature room · 6 pastel trio cards · 7 dark close. No pricing section. Voice rules: no em-dashes, no "ngl"/"yo"; bubbles are Chan (lowercase, first person); prose is brand third-person. Calls wear "in beta". Variant toggle: ?word=pill → bordered-chip cycling word. ========================================================================= */ const Q = new URLSearchParams(location.search); const WORD_PILL = Q.get('word') === 'pill'; const REDUCE = window.matchMedia('(prefers-reduced-motion: reduce)').matches; /* ---- tiny scroll-reveal: adds .seen when a [data-reveal] enters. Ratio thresholds lie for tall sections (22% of a 300vh pin = most of a viewport), so tall targets fire on ~180px of visible height instead. -- */ function useRevealRoot() { React.useEffect(() => { const io = new IntersectionObserver( (es) => es.forEach((e) => { if (!e.isIntersecting) return; if (e.intersectionRatio >= 0.22 || e.intersectionRect.height >= 180) { e.target.classList.add('seen'); } }), { threshold: [0, 0.04, 0.08, 0.22] } ); document.querySelectorAll('[data-reveal]').forEach((el) => io.observe(el)); return () => io.disconnect(); }, []); } /* ---- scroll progress through a tall section (0..1) ---------------------- */ function useScrollProgress(ref, initial) { const [p, setP] = React.useState(REDUCE ? initial : 0); React.useEffect(() => { if (REDUCE) return; const onScroll = () => { const el = ref.current; if (!el) return; const total = el.offsetHeight - window.innerHeight; setP(Math.min(0.999, Math.max(0, -el.getBoundingClientRect().top / total))); }; window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); return () => window.removeEventListener('scroll', onScroll); }, []); return p; } /* ---- the iMessage send affordance (blue circle, white up arrow) -------- */ function SendCircle() { return ( ); } /* ---- compose-bar CTA: a message field that actually sends -------------- */ function ComposeBar({ label, dark }) { return ( {label} ); } /* ---- iMessage composer row: + button, field, mic (the bottom anatomy a real iPhone always shows; every device frame on the page carries it). Pass `typed` to put live text + caret + the blue send button in the field (the carousel's typing showcase drives this). ------------------- */ function MsgBar({ light, typed }) { return ( ); } /* simplified iOS dark keyboard: fills the screen's lower half the way a real mid-conversation phone does (Folk's trick; no more dead black) */ function Keys() { const r1 = 'qwertyuiop'.split(''); const r2 = 'asdfghjkl'.split(''); const r3 = 'zxcvbnm'.split(''); return ( ); } /* composer + home indicator, pinned to the screen's bottom edge */ function DevFoot() { return ( ); } /* ---- device + thread: typing dots, then the bubble lands ---------------- */ function Thread({ msgs, replayKey }) { const [shown, setShown] = React.useState(REDUCE ? msgs.length : 0); const [typing, setTyping] = React.useState(false); React.useEffect(() => { if (REDUCE) { setShown(msgs.length); setTyping(false); return; } setShown(0); setTyping(false); const timers = []; let i = 0; const next = () => { if (i >= msgs.length) return; const m = msgs[i]; const land = () => { i += 1; setShown(i); timers.push(setTimeout(next, m.me ? 430 : 560)); }; if (m.me || m.call) land(); else { setTyping(true); timers.push(setTimeout(() => { setTyping(false); land(); }, 640)); } }; timers.push(setTimeout(next, 380)); return () => timers.forEach(clearTimeout); }, [replayKey, msgs]); return (
Chan ›
{msgs.slice(0, shown).map((m, i) => m.call ? (
📞 {m.call} {m.dur}
) : (
{m.t} {m.tap && {m.tapE || '👍'}}
))} {typing &&
}
); } /* Fae-grade frame: metallic rim, side buttons, status bar + island */ function Device({ msgs, replayKey, glint }) { return (