); } // ──────────────────────────────────────────────────────────────────────────── // SCENE 1 — HOOK (0 → 5s) // A chat window types a question, then dissolves into the line // "To actually produce video, chat isn't enough." // ──────────────────────────────────────────────────────────────────────────── function SceneHook() { const t = useTime(); const local = t; const S = PT(); // Chat bubble timeline — copy comes from strings.js (localized) const bubbleDelays = [0.0, 0.55, 1.15, 1.75]; const bubbles = S.hook.chatBubbles.map((b, i) => ({ ...b, delay: bubbleDelays[i] })); // Chat window stays through the whole scene; headline fades in below const headlineIn = clamp((local - 2.8) / 0.5, 0, 1); const kickerIn = clamp((local - 2.5) / 0.4, 0, 1); return (

{/* Chat window mockup (centered, top half) — stays through whole scene */}

{/* Window chrome */}

{S.hook.chatTitle}

{/* Bubbles */}

{bubbles.map((b, i) => { const ap = clamp((local - b.delay) / 0.3, 0, 1); const isUser = b.from === 'user'; return (

{b.text}

); })}

{/* Kicker label */}

{S.hook.kicker}

{/* Headline (the punch) */}

{S.hook.lineA}

{S.hook.lineB}

); } // ──────────────────────────────────────────────────────────────────────────── // SCENE 2 — PROBLEM (8 → 16s) // Title + 4 pain cards in 2x2, all about what chat can't do // ──────────────────────────────────────────────────────────────────────────── function SceneProblem() { const t = useTime(); const local = t - 8; const S = PT(); const pains = S.problem.pains; const delays = [0.5, 0.8, 1.1, 1.4]; return (

{/* Label */}

{S.problem.label}

{/* Title */}

{S.problem.title}{' '} {S.problem.titleEm}

{/* 2x2 pain grid */}

{pains.map((p, i) => { const ap = clamp((local - delays[i]) / 0.4, 0, 1); return (

{/* X badge */}

{p.title}

{p.sub}

); })}

{/* Kicker */} {({ localTime }) => { const ap = clamp(localTime / 0.4, 0, 1); return (

{S.problem.kicker}

); }}

); } // ──────────────────────────────────────────────────────────────────────────── // SCENE 3 — SOLUTION (16 → 23s) // Reveal of the cockpit: orbit of dots, big "13 AI agents work" line // ──────────────────────────────────────────────────────────────────────────── function SceneSolution() { const t = useTime(); const local = t - 16; const S = PT(); // Flash transition into the reveal const flash = local < 0.3 ? 1 - (local / 0.3) : 0; const kickerIn = clamp((local - 0.4) / 0.4, 0, 1); const lineAIn = clamp((local - 1.0) / 0.5, 0, 1); const lineBIn = clamp((local - 1.7) / 0.5, 0, 1); const taglineIn = clamp((local - 2.6) / 0.4, 0, 1); return (

{/* Flash */}

{/* 13 orbiting dots representing the agents */} {Array.from({ length: 13 }).map((_, i) => { const angle = (i / 13) * Math.PI * 2 + local * 0.5; const radius = 360 + Math.sin(local * 1.5 + i) * 24; const x = 960 + Math.cos(angle) * radius; const y = 540 + Math.sin(angle) * radius; const ap = clamp((local - 0.6 - i * 0.04) / 0.3, 0, 1); const pulse = 0.7 + 0.3 * Math.sin(local * 2 + i * 0.8); return (

); })} {/* Center cockpit logo halo */}

{/* Kicker */}

{S.solution.kicker}

{/* Line A */}

{S.solution.lineA}

{/* Line B (bold accent) */}

{S.solution.lineB}

{/* Tagline */}

{S.solution.tagline}

); } // ──────────────────────────────────────────────────────────────────────────── // SCENE 4 — PIPELINE (23 → 37s) // 13 stages arranged in a row, with Teleprompter and Render highlighted. // Below: cascade of 13 mini screenshots. // ──────────────────────────────────────────────────────────────────────────── const STAGE_ICONS = ['📁','📈','🗓','✍','🎤','🎭','🖼','🎬','✂','🎞','📤','📬','⚙']; const STAGE_SHOTS = [ 's-canal.png','s-tendencias.png','s-calendario.png','s-roteiro.png','s-teleprompter.png', 's-avatar.png','s-thumbnail.png','s-broll.png','s-roughcut.png','s-edicao.png', 's-publicar.png','s-email.png','s-config.png', ]; const HIGHLIGHTS = { 4: 'teleprompter', 9: 'render' }; // indices into the 13-stage array function ScenePipeline() { const t = useTime(); const local = t - 23; const S = PT(); const stages = S.pipeline.stages; const total = stages.length; // Spread 13 nodes across the screen width const padX = 110; const slotW = (W - padX * 2) / (total - 1); const nodeY = 360; // Title fade const titleIn = clamp(local / 0.4, 0, 1); // Stage cascade — 0.25s/each, starting at 0.4s const stageDelay = (i) => 0.45 + i * 0.18; // Highlight pulses const highlightShow = clamp((local - 4.5) / 0.5, 0, 1); return (

{/* Header */}

{S.pipeline.label}

{S.pipeline.titleA}{' '} {S.pipeline.titleB}

{/* Spine line */}

{/* Animated progress fill on the spine */}

{/* 13 stage nodes */} {stages.map((label, i) => { const cx = padX + i * slotW; const ap = clamp((local - stageDelay(i)) / 0.35, 0, 1); const eased = Easing.easeOutBack(ap); const isHighlight = HIGHLIGHTS[i] !== undefined; const pulse = isHighlight ? (0.6 + 0.4 * Math.sin(local * 4 + i)) : 0; return (

{/* Node circle */}

{STAGE_ICONS[i]}

{/* Number */}

{String(i + 1).padStart(2, '0')}

{/* Label */}

{label}

); })} {/* Highlight callouts for Teleprompter + Render */} {Object.entries(HIGHLIGHTS).map(([idx, key]) => { const i = Number(idx); const cx = padX + i * slotW; const text = key === 'teleprompter' ? S.pipeline.highlightTeleprompter : S.pipeline.highlightRender; const isTop = key === 'teleprompter'; return (

★ {text}

{/* connector arrow */}

); })} {/* Mini screenshot strip — cascades in after stages */}

{STAGE_SHOTS.map((src, i) => { const ap = clamp((local - 3.0 - i * 0.1) / 0.35, 0, 1); const isHighlight = HIGHLIGHTS[i] !== undefined; return (

); })}

{/* Caption */} {({ localTime }) => { const ap = clamp(localTime / 0.4, 0, 1); return (

{S.pipeline.caption}

); }}

); } // ──────────────────────────────────────────────────────────────────────────── // SCENE 5 — FEATURES (37 → 47s) // 4 feature cards in a 2x2 grid, each with a small screenshot + copy. // Bottom: "the cockpit is ours, the APIs are yours — no markup". // ──────────────────────────────────────────────────────────────────────────── const FEATURE_SHOTS = ['s-teleprompter.png', 's-studio.png', 's-canal.png', 's-channel-selector.png']; const FEATURE_ICONS = ['🎤', '🖥', '📚', '🔀']; const FEATURE_ACCENT = [BRAND.green, BRAND.blue, BRAND.purple, BRAND.amber]; function SceneFeatures() { const t = useTime(); const local = t - 37; const S = PT(); const items = S.features.items.map((it, i) => ({ ...it, shot: PROMO_ASSET(FEATURE_SHOTS[i]), icon: FEATURE_ICONS[i], accent: FEATURE_ACCENT[i], })); const delays = [0.4, 0.7, 1.0, 1.3]; return (

{/* Header */}

{S.features.label}

{S.features.title}

{/* 2x2 grid of feature cards */}

{items.map((it, i) => { const ap = clamp((local - delays[i]) / 0.4, 0, 1); return (

{/* Screenshot */}

{/* Text */}

{it.icon}

{it.title}

{it.desc}

); })}

{/* Bottom pricing line */} {({ localTime }) => { const ap = clamp(localTime / 0.4, 0, 1); return (

{S.features.pricingLine}{' '} {S.features.pricingHighlight}

); }}

); } // ──────────────────────────────────────────────────────────────────────────── // SCENE 6 — CTA (47 → 54s) // Logo, big "Download free." + bring your own keys, 3 bullets, URL // ──────────────────────────────────────────────────────────────────────────── function SceneCTA() { const t = useTime(); const local = t - 47; const S = PT(); const pulse = 0.5 + 0.5 * Math.sin(local * 3); const logoIn = clamp(local / 0.4, 0, 1); const titleIn = clamp((local - 0.4) / 0.5, 0, 1); const bulletsIn = clamp((local - 1.4) / 0.4, 0, 1); const buttonIn = clamp((local - 2.0) / 0.5, 0, 1); return (

{/* Logo + wordmark */}

AI Content Team

{/* Kicker */}

{S.cta.kicker}

{/* Big title */}

{S.cta.titleA}

{S.cta.titleB}

{/* Bullets */}

{S.cta.bullets.map((b, i) => (

{b}

))}

{/* CTA button */}

{S.cta.button}

{/* URL */}

{S.cta.url}

); } // ──────────────────────────────────────────────────────────────────────────── // TIMESTAMP LABEL (used by snapshot tooling) // ──────────────────────────────────────────────────────────────────────────── function TimestampLabel() { const t = useTime(); const sec = Math.floor(t); React.useEffect(() => { const root = document.getElementById('video-root'); if (root) root.setAttribute('data-screen-label', `t=${sec}s`); }, [sec]); return null; } // ──────────────────────────────────────────────────────────────────────────── // MAIN VIDEO — 43s total // ──────────────────────────────────────────────────────────────────────────── function Video() { return ( <> ); }