{/* Title */}

{tr.systemOnline}

{tr.brand}

{tr.subtitle}

); } // ── Scene 2: Notification appears (3 - 5s) ────────────────────────────────── function Scene_Notification() { const time = useTime(); const { t: tr } = useLang(); const t = time - 3; if (t < 0 || t > 2.5) return null; // Notification slides down from top const slideY = interpolate([0, 0.6], [-300, 80], Easing.easeOutBack)(t); const op = interpolate([0, 0.4, 1.8, 2.5], [0, 1, 1, 0])(t); return ( <>

{/* Panel */}

{/* Edge glow */}

{/* Content */}

{tr.notification}

{tr.dailyQuest}

{tr.threeObjectives}

{/* Hex icon right */}

); } // ── Scene 3: Quest panel (5.2 - 17s) ──────────────────────────────────────── function Scene_QuestPanel() { const time = useTime(); const { t: tr } = useLang(); const t = time - 5.2; if (t < 0 || t > 12.0) return null; // Panel scale-in const panelScale = interpolate([0, 0.6], [0.85, 1], Easing.easeOutBack)(t); const panelOp = interpolate([0, 0.4, 11.4, 12.0], [0, 1, 1, 0])(t); // Quest completion timestamps (in scene-local time) const completeTimes = [3.0, 5.2, 7.4]; // when each quest completes const cursorPath = [ { time: 2.2, x: 540, y: 1130 }, // before quest 1 { time: 3.0, x: 200, y: 1130 }, // tap quest 1 { time: 4.4, x: 540, y: 1300 }, { time: 5.2, x: 200, y: 1300 }, // tap quest 2 { time: 6.6, x: 540, y: 1470 }, { time: 7.4, x: 200, y: 1470 }, // tap quest 3 { time: 8.4, x: 800, y: 1700 }, // off panel ]; // Lerp cursor position along path const cursor = (() => { if (t < cursorPath[0].time) return { ...cursorPath[0], op: clamp((t - 1.4) / 0.4, 0, 1), tap: 0 }; if (t > cursorPath[cursorPath.length - 1].time) return { ...cursorPath[cursorPath.length - 1], op: clamp((9.5 - t) / 0.4, 0, 1), tap: 0 }; for (let i = 0; i < cursorPath.length - 1; i++) { const a = cursorPath[i], b = cursorPath[i + 1]; if (t >= a.time && t <= b.time) { const localT = (t - a.time) / (b.time - a.time); const eased = Easing.easeInOutCubic(localT); return { x: a.x + (b.x - a.x) * eased, y: a.y + (b.y - a.y) * eased, op: 1, tap: 0, }; } } return { ...cursorPath[0], op: 1, tap: 0 }; })(); // Tap pulse — fires within 0.4s after each completeTime let tap = 0; for (const ct of completeTimes) { if (t >= ct && t < ct + 0.4) { tap = (t - ct) / 0.4; } } // Quest statuses const questStatus = (idx) => t >= completeTimes[idx] ? 'complete' : 'pending'; // XP fill: starts at 0.42, hits target at each completion const xpStops = [ { time: 0, fill: 0.42 }, { time: completeTimes[0] + 0.6, fill: 0.58 }, { time: completeTimes[1] + 0.6, fill: 0.74 }, { time: completeTimes[2] + 0.6, fill: 0.96 }, ]; const xpFill = (() => { if (t <= xpStops[0].time) return xpStops[0].fill; for (let i = 0; i < xpStops.length - 1; i++) { const a = xpStops[i], b = xpStops[i + 1]; if (t >= a.time && t <= b.time) { const lt = (t - a.time) / (b.time - a.time); return a.fill + (b.fill - a.fill) * Easing.easeOutCubic(lt); } } return xpStops[xpStops.length - 1].fill; })(); // Camera zoom-in at end (focus on level up around t = 9.0+) const camScale = interpolate([8.5, 9.5], [1, 1.08], Easing.easeInOutCubic)(t); const camY = interpolate([8.5, 9.5], [0, -40], Easing.easeInOutCubic)(t); // Level up flash at t = 9.5 const levelUpStart = 9.4; const lvlT = t - levelUpStart; const showLevelUp = lvlT > 0 && lvlT < 2.5; const lvlOp = lvlT > 0 ? interpolate([0, 0.3, 2.0, 2.5], [0, 1, 1, 0])(lvlT) : 0; const lvlScale = lvlT > 0 ? interpolate([0, 0.4], [0.4, 1], Easing.easeOutBack)(lvlT) : 1; // White flash const flashOp = lvlT > 0 && lvlT < 0.6 ? (1 - lvlT / 0.6) * 0.85 : 0; return ( <>

{/* Header */}

{tr.questDate}

{tr.roadTo}
{tr.rankD}

{/* Quest rows */} {/* XP Bar */} 0.4 ? 'D' : 'E'} label={tr.expRank(lvlT > 0.4 ? 'D' : 'E')} /> {/* Footer reward */}

{tr.reward} {tr.streak}

{/* Cursor — only during interaction window */} {t > 1.3 && t < 8.6 && ( )}

{/* LEVEL UP overlay */} {showLevelUp && ( <> {/* White flash */} {flashOp > 0 && (

)}

{tr.notification}

{tr.levelUp1}
{tr.levelUp2}

{tr.rankChange}

{tr.xpGain}

)} ); } // ── Scene 4: Phone reveal — pulls back to show the app (17.5 - 22s) ───────── function Scene_PhoneReveal() { const time = useTime(); const { t: tr } = useLang(); const t = time - 17.2; if (t < 0) return null; // Phone slides up from below const phoneY = interpolate([0, 1.0], [400, 100], Easing.easeOutCubic)(t); const phoneOp = interpolate([0, 0.5], [0, 1])(t); const phoneScale = interpolate([0, 1.0], [0.92, 1], Easing.easeOutCubic)(t); const phoneW = 760; const phoneH = 1500; const phoneX = (STAGE_W - phoneW) / 2; // Tagline const tagOp = interpolate([1.5, 2.0], [0, 1])(t); return ( <> {/* Background hex grid behind phone */}

{/* Header */}

{tr.rankD2}

{tr.goodHunt1}
{tr.goodHunt2}

{/* Mini XP bar */}

{tr.miniExp} {tr.miniStreak}

{/* Mini quest rows (all complete) */}

{tr.todayCleared}

{[ { label: tr.miniDeep, xp: 120 }, { label: tr.miniRun, xp: 80 }, { label: tr.miniSleep, xp: 60 }, ].map((q, i) => (

{q.label}

+{q.xp} XP · {tr.cleared}

))} {/* Tomorrow tease */}

{tr.tomorrow}

{tr.newQuest}

{/* Bottom nav */}

{tr.nav.map((label, i) => (

{label}

))}

} /> {/* Tagline overlay — bottom, beneath the phone */}

{tr.brand}

{tr.tagline}

); } // ── Global background grid ────────────────────────────────────────────────── function BackdropGrid() { const time = useTime(); const drift = (time * 8) % 80; return ( <> {/* Base radial */}

{/* Hex grid — subtle */}

{/* Vignette */}

); } // ── Frame label (for comments) ───────────────────────────────────────────── function FrameLabel() { const time = useTime(); const sec = Math.floor(time); React.useEffect(() => { const root = document.querySelector('[data-video-root]'); if (root) root.setAttribute('data-screen-label', `t=${sec}s`); }, [sec]); return null; } // ── Root ──────────────────────────────────────────────────────────────────── function Root() { return (

); } function App() { return ( ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render();