); } // ───────────────────────────────────────────────────────────────────────── // SCENE 1 — Hook (0.0 – 3.0) // "Sunday. Five platforms." with italic accent on "Five platforms." // Five platform glyphs drift in soft orbit around the headline. // ───────────────────────────────────────────────────────────────────────── function SceneHook() { return ( {({ localTime }) => { // Headline reveal: 0.3s line 1, 1.0s line 2, exit at 2.5s const line1Op = clamp((localTime - 0.2) / 0.6, 0, 1); const line1Y = (1 - Easing.easeOutCubic(line1Op)) * 30; const line2Op = clamp((localTime - 0.9) / 0.6, 0, 1); const line2Y = (1 - Easing.easeOutCubic(line2Op)) * 30; // Exit const exit = clamp((localTime - 2.5) / 0.5, 0, 1); const containerOp = 1 - exit; const containerY = -exit * 24; return (

{/* Orbiting platform glyphs */} {PLAT_ORDER.map((id, i) => { const p = PLAT[id]; const angle = (i / 5) * Math.PI * 2 - Math.PI / 2 + localTime * 0.18; const r = 420; const cx = 960 + Math.cos(angle) * r; const cy = 540 + Math.sin(angle) * r * 0.55; const op = clamp((localTime - 0.1 - i * 0.06) / 0.5, 0, 1) * 0.6 * (1 - exit); return (

{p.icon(28)}

); })} {/* Headline */}

Sunday morning.

Five posts to write.

); }} ); } // ───────────────────────────────────────────────────────────────────────── // SCENE 2 — Brief composer (3.0 – 11.5) // Compose window slides up center, brief types out, Generate clicked, // spinner pulses, then transition. // ───────────────────────────────────────────────────────────────────────── const BRIEF_TEXT = "Just dropped our new product line. Big moment for the brand. Want to capture the energy without sounding corporate."; function SceneBrief() { return ( {({ localTime }) => { // Window entrance (0.0–0.6) const inT = clamp(localTime / 0.6, 0, 1); const winY = (1 - Easing.easeOutCubic(inT)) * 60; const winOp = inT; const winScale = 0.92 + 0.08 * Easing.easeOutCubic(inT); // Brief typing: starts 0.8s, 35ms per char (~3.7s for the whole thing) const typeStart = 0.8; const charsPerSec = 28; const chars = Math.floor(Math.max(0, (localTime - typeStart) * charsPerSec)); const typedText = BRIEF_TEXT.slice(0, Math.min(chars, BRIEF_TEXT.length)); const typingDone = chars >= BRIEF_TEXT.length; // Generate click (typingDone + 0.6s) const clickAt = typeStart + BRIEF_TEXT.length / charsPerSec + 0.4; // ~5.6s const clickActive = localTime >= clickAt && localTime < clickAt + 0.25; const btnScale = clickActive ? 0.94 : 1; // Spinner phase const spinnerStart = clickAt + 0.2; const spinning = localTime >= spinnerStart && localTime < 8.3; // Exit (window scales up and accelerates away after 8.3s) const exitT = clamp((localTime - 8.3) / 0.4, 0, 1); const exitScale = 1 + exitT * 0.06; const exitOp = 1 - exitT; return (

); }} ); } function ComposeWindow({ brief, cursor, generating, btnScale }) { return (

{/* Title bar */}

GENER8 · Compose

{/* Brief field */}

Brief

{brief} {cursor && }

{/* Footer: Generate button */}

{generating ? ( <> Writing your posts… ) : ( <>Generate → )}

); } // ───────────────────────────────────────────────────────────────────────── // CAPTIONS — lower-third explainer that narrates the real-world value // phase by phase, so a first-time viewer understands what's happening // and how GENER8 fits a real situation (not just a flashy animation). // Lives in the empty bottom band (clears the cards above and the trust // pill that arrives at ~20.4s). // ───────────────────────────────────────────────────────────────────────── const VIDEO_CAPTIONS = [ // Hook: the real, recurring situation — and why it's painful (each platform differs). { start: 0.4, end: 3.0, text: "Launch day — and every platform needs its own kind of post." }, // Brief: how little effort it takes from the user. { start: 3.5, end: 9.0, text: "You write one plain brief — just say what happened, like texting a coworker." }, // Reveal: the actual transformation, the core value. { start: 9.5, end: 18.6, text: "GENER8 rewrites it natively for each platform — matching tone, length, and format." }, // CTA payoff: restate the outcome while the bottom band is clear. { start: 23.0, end: 24.7, text: "Five platform-ready posts from one brief — in seconds." }, ]; function SceneCaptions() { const t = useTime(); return (

{VIDEO_CAPTIONS.map((c, i) => { const fadeIn = clamp((t - c.start) / 0.5, 0, 1); const fadeOut = clamp((c.end - t) / 0.5, 0, 1); const op = Math.min(fadeIn, fadeOut); if (op <= 0) return null; const y = (1 - Easing.easeOutCubic(fadeIn)) * 14; return (

{c.text}

); })}

); } Object.assign(window, { PLAT, PLAT_ORDER, AmbientOrbs, SceneHook, SceneBrief, ComposeWindow, BRIEF_TEXT, SceneCaptions, VIDEO_CAPTIONS, });