// Act 4 — Tres formas de usar Chispa (32–42s) // Reemplazamos las stats inventadas por los 3 modos del producto, mostrados con // micro-visuales que ilustran cada caso. Da el "qué exactamente hace Chispa" // que la landing necesita antes del CTA. function Act4Results() { return ( ); } function Act4Inner() { const { localTime: t } = useSprite(); return (
{/* Title strip (window 10s, fade-out 9.5-10.0) */}
9.5 ? Math.max(0, (10.0 - t) / 0.5) : 1, marginBottom: 56 }}>
Un mismo motor IA.
Tres formatos para usar Chispa.
{t >= 1.4 && t < 10.0 && }
); } function UseCases({ t }) { const opacity = t < 0.3 ? t / 0.3 : t > 8.0 ? Math.max(0, (8.6 - t) / 0.6) : 1; const cases = [ { tag: '01', label: 'Clips personalizados', meta: 'el día a día', desc: 'IA entrenada en TU canal. Gaming, deportes, podcast, comedy, lifestyle.', delay: 0.2, visual: 'clips', }, { tag: '02', label: 'Recortar bruto', meta: 'montaje · sin silencios', desc: 'Elimina silencios, voz de producción y tomas falladas. La pieza queda lista para entregar.', delay: 0.7, visual: 'timeline', }, { tag: '03', label: 'Highlights del directo', meta: '3 h → 5 min', desc: 'Detecta los picos de un stream o podcast y los condensa sin perder el hilo.', delay: 1.2, visual: 'condense', highlight: true, }, ]; return (
{cases.map((c, i) => { const local = t - c.delay; const ease = Easing.easeOutCubic(clamp(local * 2.5, 0, 1)); return (
{/* Header row */}
{c.tag}
{c.meta}
{/* Visual */} {/* Body */}
{c.label}
{c.desc}
); })}
{/* Nichos optimizados strip (compliance se muestra en Act 5 para no duplicar) */}
optimizado para gaming · fútbol · podcast · comedia
); } // ── Mini visualisations per case card ─────────────────────────────────────── function CaseVisual({ kind, t = 0, highlight }) { // local pulse for liveliness const tt = Math.max(0, t); const accent = '#F59E0B'; const orange = '#EA580C'; if (kind === 'clips') { // 5 mini 9:16 portrait clips, each with a "spark" bolt overlay const clips = [0, 1, 2, 3, 4]; return (
{clips.map(i => { const lift = Math.sin(tt * 3 + i) * 4; const tilt = (i - 2) * 4; return (
{/* fake subs bar */}
{/* center bolt on selected */} {i === 2 && ( )}
); })}
); } if (kind === 'timeline') { // Bruto con bloques 'silencio' que se tachan + playhead recortando const segments = [ { kind: 'voice', w: 14 }, { kind: 'silence', w: 8 }, { kind: 'voice', w: 22 }, { kind: 'silence', w: 6 }, { kind: 'voice', w: 18 }, { kind: 'silence', w: 10 }, { kind: 'voice', w: 12 }, { kind: 'silence', w: 10 }, ]; return (
fuera silencios · solo voz útil
{segments.map((s, i) => { if (s.kind === 'voice') { return (
{Array.from({ length: Math.round(s.w * 0.8) }).map((_, k) => { const h = 6 + Math.abs(Math.sin(k * 0.7 + i * 2.1 + tt * 2)) * 28; return
; })}
); } return (
cut
); })}
bruto largo → pieza final
); } if (kind === 'condense') { // Long bar → arrow → short condensed bar const pulse = 0.6 + Math.sin(tt * 4) * 0.4; return (
{/* Long form */}
3h
{Array.from({ length: 30 }).map((_, i) => (
))}
{/* Detection dots */}
{[0.12, 0.28, 0.45, 0.62, 0.81].map((p, i) => (
))}
{/* Arrow */}
{/* Condensed */}
5min
los mejores
); } return null; } window.Act4Results = Act4Results;