// scenes-1-3.jsx — Hook, Definition, Formula // Globals: React, Easing, clamp, interpolate, animate, Sprite, useSprite, useTime, useTimeline // PlayingCard, ChipStack, ChipPile, Pill, Caption // ═════════════════════════════════════════════════════════════════════════════ // SCENE 1 — HOOK (0 → 14s) // "¿Cuántos botes caben en tu stack?" // ═════════════════════════════════════════════════════════════════════════════ function Scene1_Hook() { return ( {({ localTime }) => { const t = localTime; // Big SPR letters fade-in stagger const letters = ['S', 'P', 'R']; const titleY = interpolate([0, 0.8], [40, 0], Easing.easeOutCubic)(clamp(t/1.2, 0, 1)); // Question fades in at t=2.6 const qOp = clamp((t - 2.6) / 0.6, 0, 1); // Subtitle line at t=4.5 const sOp = clamp((t - 4.5) / 0.6, 0, 1); // Background "stack of pots" hint - 5 small piles growing const pilesT = clamp((t - 6) / 4, 0, 1); // Exit const exitT = clamp((t - 12.5) / 1.5, 0, 1); const exitOp = 1 - exitT; return (
{/* Ambient backdrop */}
{/* SPR mega type */}
{letters.map((L, i) => { const lt = clamp((t - 0.2 - i * 0.18) / 0.5, 0, 1); const op = Easing.easeOutCubic(lt); const dy = (1 - op) * 80; return ( {L} ); })}
Stack-to-Pot Ratio
{/* Big question */}
¿Cuántos botes caben en tu stack?
{/* Subtitle */}
La medida exacta del riesgo relativo en cada calle
{/* Decorative pile counter at bottom */}
{[1, 2, 4, 8, 15].map((n, i) => { const showT = clamp(pilesT * 5 - i, 0, 1); return (
{n}×
); })}
); }} ); } // ═════════════════════════════════════════════════════════════════════════════ // SCENE 2 — DEFINITION (14 → 36s) // "Un SPR de 4 = stack vale 4 botes" // ═════════════════════════════════════════════════════════════════════════════ function Scene2_Definition() { return ( {({ localTime }) => { const t = localTime; // Stack on left grows const stackCount = Math.floor(interpolate([0, 2.5], [0, 16], Easing.easeOutCubic)(clamp(t/2.5, 0, 1)) * (clamp(t/2.5, 0, 1))); // Actually simpler: const stackProg = Easing.easeOutCubic(clamp(t / 2.2, 0, 1)); const stackVisible = Math.round(16 * stackProg); // Pot pile appears at t=3 const potT = clamp((t - 3) / 1.5, 0, 1); const potCount = Math.round(20 * Easing.easeOutCubic(potT)); // Equation overlay at t=6 const eqOp = clamp((t - 6) / 0.6, 0, 1); // SPR result counter at t=8 const sprT = clamp((t - 8) / 2, 0, 1); const sprValue = (4 * Easing.easeOutCubic(sprT)).toFixed(1); // Caption transitions const captions = [ { start: 0.3, end: 5.5, text: 'Imagina tu stack restante…', sub: 'Definición' }, { start: 5.6, end: 11, text: '…y el bote actual. El SPR los compara.', sub: 'Definición' }, { start: 11.1, end: 18, text: 'Un SPR de 4 significa: tu stack es 4 veces el bote.', sub: 'Lectura' }, { start: 18.1, end: 22, text: 'Con SPR 1, stack y bote son iguales — un solo all-in los junta.', sub: 'Lectura' }, ]; // SPR=1 callout at t=14 const showSpr1 = t > 14 && t < 22; const spr1Op = showSpr1 ? clamp((t - 14) / 0.6, 0, 1) * clamp((22 - t) / 0.6, 0, 1) : 0; // Exit fade const exitOp = clamp((22 - t) / 1.2, 0, 1); return (
{/* Headline */}
01 · La idea
Stack ÷ Bote = SPR
{/* Stack visualization */}
Tu stack
{/* Divider */}
÷
{/* Pot pile */}
El bote
{/* SPR result */}
SPR =
{sprValue}
{/* SPR=1 inline callout */} {spr1Op > 0 && (
SPR = 1.0 · stack = bote
Un solo all-in y los stacks están en juego.
)} {/* Captions */} {captions.map((c, i) => ( t >= c.start && t <= c.end && ( ) ))}
); }} ); } // ═════════════════════════════════════════════════════════════════════════════ // SCENE 3 — FORMULA (36 → 62s) // SPR = Stack efectivo restante ÷ Tamaño del bote al inicio de la calle // ═════════════════════════════════════════════════════════════════════════════ function Scene3_Formula() { return ( {({ localTime }) => { const t = localTime; // Phase 1: formula assembly (0 → 6s) const part1 = clamp(t / 1.0, 0, 1); const part2 = clamp((t - 1.2) / 1.0, 0, 1); const part3 = clamp((t - 2.4) / 1.0, 0, 1); // Phase 2: highlight "efectivo" + "al inicio" (6 → 12s) const showHL = t > 6 && t < 13; const hl1 = clamp((t - 6) / 0.5, 0, 1) * clamp((13 - t) / 0.5, 0, 1); const hl2 = clamp((t - 8) / 0.5, 0, 1) * clamp((13 - t) / 0.5, 0, 1); // Phase 3: example walkthrough panel (13 → 26s) const showEx = t > 13; const exOp = clamp((t - 13) / 0.6, 0, 1); const exitOp = clamp((26 - t) / 1.2, 0, 1); return (
{/* Header */}
02 · La fórmula
Cómo se calcula, exactamente
{/* Formula panel */}
SPR = 0.05 ? `rgba(78,209,197,${0.18 * hl1})` : 'transparent', padding: '6px 12px', borderRadius: 8, transition: 'background 200ms', }}> Stack efectivo restante ÷ 0.05 ? `rgba(212,162,74,${0.18 * hl2})` : 'transparent', padding: '6px 12px', borderRadius: 8, transition: 'background 200ms', }}> Bote al inicio de la calle
{/* Highlight callouts */}
← Efectivo
El stack más pequeño en juego — no el tuyo si tu rival tiene menos.
Al inicio →
Antes de las apuestas de esta calle. Se recalcula al pasar al turn y al river.
{/* Example walkthrough panel */} {showEx && (
Ejemplo
NL100 · 100€ efectivos · CO open 2.5€, BTN call
{[ { label: 'Stack restante', val: '97.5€', delay: 14, color: '#4fd1c5' }, { label: 'Bote al flop', val: '6.5€', delay: 16, color: '#d4a24a' }, { label: 'Cálculo', val: '97.5 ÷ 6.5', delay: 18, color: '#f3f1ea' }, { label: 'SPR resultante', val: '≈ 15', delay: 20, color: '#e0556a', big: true }, ].map((item, i) => { const op = clamp((t - item.delay) / 0.6, 0, 1); return (
{item.label}
{item.val}
); })}
{/* Verdict */}
Stack profundo Quince botes por delante. La aventura empieza ahora.
)}
); }} ); } Object.assign(window, { Scene1_Hook, Scene2_Definition, Scene3_Formula });