// Promo Video — Scenes 1-4 // 1. Cold open (0-8s) // 2. Why generic AI failed (8-18s) // 3. Mentor energy check (18-30s) // 4. 4-level hint ladder (30-43s) // ============================================================================ // SCENE 1 — Cold Open. Pi refuses to give the answer. // ============================================================================ function Scene1ColdOpen() { const { localTime } = useSprite(); const t = localTime; // Frame fade in const frameOp = Math.min(1, t / 0.6); const frameTy = (1 - Easing.easeOutCubic(Math.min(1, t / 0.6))) * 30; return (
} footer={
↻ session 03 · year 8 · algebra Show your working →
} > Hi Rina — I see you've got 18 minutes before piano. Let's expand 3(x + 4).{' '} Before I tell you how — what do you remember about the distributive property? {/* Rina typing dots */} {t >= 3.0 && t < 3.9 && (
{[0, 1, 2].map(i => ( ))}
Rina is typing
)} Multiply the 3 with both terms?
{/* Highlighted question callout at end */} {t >= 5.5 && (
A tutor that opens with a question.
)}
); } // ============================================================================ // SCENE 2 — Why generic AI failed her. Side-by-side comparison. // ============================================================================ function Scene2Comparison() { const { localTime } = useSprite(); const t = localTime; // Left card: enters 0-1s const leftOp = Math.min(1, t / 0.6); const leftTx = (1 - Easing.easeOutCubic(Math.min(1, t / 0.7))) * -60; // Right card: enters at 4.5s const rightStart = 4.5; const rightOp = t < rightStart ? 0 : Math.min(1, (t - rightStart) / 0.6); const rightTx = t < rightStart ? 60 : (1 - Easing.easeOutCubic(Math.min(1, (t - rightStart) / 0.7))) * 60; // Red strike on left card: 3.6s const strikeStart = 3.6; const strikeProg = Math.max(0, Math.min(1, (t - strikeStart) / 0.5)); return (
{/* LEFT — generic AI */}
0 ? `grayscale(${strikeProg}) opacity(${1 - strikeProg * 0.3})` : 'none', transition: 'none', }}>
◇ Generic AI helper instant answers
{/* Kid question */} {t >= 1.0 && (
what is 3(x + 4)?
)} {/* Instant AI reply */} {t >= 2.2 && (
3x + 12 ✓
)} {/* Outcome stamp */} {t >= 3.2 && (
↳ homework done in 4 seconds · nothing retained
)}
{/* Red strike-through across the card */} {strikeProg > 0 && ( {strikeProg > 0.8 && ( she stopped learning. )} )}
{/* RIGHT — aitutors.me */}
aitutors.me · Pi understanding first
{t >= rightStart + 0.4 && (
what is 3(x + 4)?
)} {t >= rightStart + 1.6 && (
Before I tell you — what do you remember about the distributive property?
)} {t >= rightStart + 3.4 && (
↳ misconception caught · understanding built
)}
); } // ============================================================================ // SCENE 3 — Mentor energy check (GREEN / AMBER / RED). // ============================================================================ function Scene3EnergyCheck() { const { localTime } = useSprite(); const t = localTime; const lights = [ { key: 'green', label: 'GREEN', sub: 'rested · sharp', color: palette.go, action: 'push hard' }, { key: 'amber', label: 'AMBER', sub: 'okay · scattered', color: palette.amber, action: '15 min · light' }, { key: 'red', label: 'RED', sub: 'spent · drained', color: palette.stop, action: 'rest tonight' }, ]; // Cursor moves and clicks AMBER around t=4 const clickTime = 4.5; const selectedAt = clickTime + 0.2; // Cursor moves from off-screen to AMBER ring center const targetX = 1100, targetY = 690; const cursorEntry = Math.min(1, Math.max(0, (t - 2.5) / 1.8)); const cursorX = -100 + (targetX + 100) * Easing.easeInOutCubic(cursorEntry); const cursorY = 420 + (targetY - 420) * Easing.easeInOutCubic(cursorEntry); const cursorPress = t >= clickTime && t < clickTime + 0.25 ? 0.85 : 1; const cursorVisible = t >= 2.2 && t < clickTime + 2; const cursorOp = cursorVisible ? Math.min(1, (t - 2.2) / 0.3) * Math.max(0, 1 - Math.max(0, (t - clickTime - 1.7) / 0.4)) : 0; return (
{/* The Mentor card */}
{/* Header */}
The Mentor · routing today's session tues 17:42 · before piano
{/* Mentor's question */}
{t >= 0.6 && (
Mentor asks Hi Rina — football was a long one. How's your energy right now?
)}
{/* Three energy chips */}
{lights.map((l, i) => { const showAt = 1.6 + i * 0.2; const op = Math.min(1, Math.max(0, (t - showAt) / 0.4)); const isAmber = l.key === 'amber'; const isSelected = isAmber && t >= selectedAt; const pulse = isSelected ? 1 + 0.04 * Math.sin((t - selectedAt) * 6) : 1; const dim = !isSelected && t >= selectedAt + 0.4 ? 0.45 : 1; return (
{l.label}
{l.sub}
→ {l.action}
); })}
{/* Mentor's adapted response */} {t >= selectedAt + 1.0 && (
MENTOR → Got it. Let's keep it light — 15 minutes of fractions, not Pythagoras. Save the hard stuff for Sunday morning.
)}
{/* Animated cursor */} {cursorOp > 0 && ( )}
); } // ============================================================================ // SCENE 4 — 4-level hint ladder. Pi guides without giving answer. // ============================================================================ function Scene4HintLadder() { const { localTime } = useSprite(); const t = localTime; const hints = [ { lvl: 'L1', text: 'What operation might help here?', start: 1.0 }, { lvl: 'L2', text: <>You've got 3(x + 4). What does distributing mean?, start: 3.6 }, { lvl: 'L3', text: <>Try multiplying the 3 across each term — 3 × x, then 3 × 4., start: 6.6 }, { lvl: 'L4', text: 'Worked example with one number swapped (locked — not needed yet)', start: 9.6, locked: true }, ]; // Rina solves at 9.5s, before L4 unlocks const solveAt = 9.5; return (
{/* LEFT — the chat */}
{/* Pi opens */} {t >= 0.3 && (
Professor Pi
Expand 3(x + 4). Show your working.
)} {/* Rina hesitant */} {t >= 2.2 && t < solveAt + 0.5 && (
um… not sure
)} {/* Rina's answer */} {t >= solveAt && (
RINA · Y8
Oh — 3x and 12. So 3x + 12.
)} {/* Pi confirms */} {t >= solveAt + 1.5 && (
Professor Pi
Exactly. You did the move yourself.
)}
{/* RIGHT — the hint ladder */}
Pi's hint ladder
4 levels · escalate only when stuck
{hints.map((h, i) => { const shown = t >= h.start; const op = shown ? Math.min(1, (t - h.start) / 0.45) : 0; const ty = shown ? (1 - Easing.easeOutBack(Math.min(1, (t - h.start) / 0.5))) * 12 : 0; // Pulse the latest live hint until next one comes (or solve) const next = hints[i + 1]; const live = shown && (next ? t < next.start : t < solveAt); const skipped = h.locked && t >= solveAt; return (
{h.lvl} {h.text} {skipped && (
skipped — she got it
)}
); })}
{/* Result chip */} {t >= solveAt + 1.5 && (
answer reached at L2 · misconception caught
)}
); } Object.assign(window, { Scene1ColdOpen, Scene2Comparison, Scene3EnergyCheck, Scene4HintLadder, });