// Step 6 — Review. Stat tiles only (Almost there + Blockers cards omitted per user). const STEP6_FRAME = { x: 192, y: 48, w: 1536, h: 984 }; // Beat plan (~7s): // 0.0 – 0.4 Scene fades in (all steps ✓, Step 6 active) // 0.4 – 1.0 Step strip slides in with all checks // 1.0 – 1.8 Tile row 1 cascades (School, Classes, Periods) // 1.6 – 2.4 Tile row 2 cascades (Subjects, Teachers, Coverage) // 2.4 – 4.0 Hold to read // 4.0 – 4.6 Cursor glides to "Finish setup" // 4.6 – 4.9 Click + halo // 4.9 – 6.0 Big confetti-ish celebration; button copy could shift // 6.0 – 7.0 Hold then fade function StepStripStep6() { const steps = ['School', 'Classes', 'Periods', 'Subjects', 'Teachers', 'Review']; return (
{steps.map((s, i) => { const isDone = i <= 4; const isActive = i === 5; return (
{isDone ? ( ) : (i + 1)}
{s}
{i < steps.length - 1 && (
)} ); })}
); } function ReviewTile({ icon, iconBg, iconStroke, label, value, sub, chips, opacity = 1, scale = 1 }) { return (
{icon}
{label}
{value}
{sub &&
{sub}
} {chips && (
{chips.map(c => ( {c} ))}
)}
); } function Step6Video({ start = 0 }) { const t = useTime(); const lt = t - start; const fadeIn = interpolate([0, 0.4], [0, 1], Easing.easeOutCubic)(lt); const fadeOut = interpolate([6.5, 7.0], [1, 0], Easing.easeInCubic)(lt); const sceneOp = fadeIn * fadeOut; const stripOp = interpolate([0.4, 1.0], [0, 1], Easing.easeOutCubic)(lt); const stripY = interpolate([0.4, 1.0], [16, 0], Easing.easeOutCubic)(lt); // Tiles cascade in const tileEntry = (i) => ({ op: interpolate([1.0 + i*0.12, 1.4 + i*0.12], [0, 1], Easing.easeOutCubic)(lt), scale: interpolate([1.0 + i*0.12, 1.4 + i*0.12], [0.92, 1], Easing.easeOutBack)(lt), }); // Continue / Finish click const finishClickT = 4.6; const finishHot = lt > 4.2 && lt < 4.9; const clkT = (lt - finishClickT) / 0.18; const clickSquish = clkT > 0 && clkT < 1 ? 0.05 * Math.sin(clkT * Math.PI) : 0; const haloOp = interpolate([finishClickT, finishClickT + 0.3, finishClickT + 0.9], [0, 0.8, 0], Easing.easeOutCubic)(lt); const haloScale = interpolate([finishClickT, finishClickT + 0.9], [1, 2.4], Easing.easeOutCubic)(lt); // Celebration check mark icon "✓ Setup complete" appears after click const celebOp = interpolate([finishClickT + 0.2, finishClickT + 0.7], [0, 1], Easing.easeOutBack)(lt); const celebScale = interpolate([finishClickT + 0.2, finishClickT + 0.7], [0.6, 1], Easing.easeOutBack)(lt); // Cursor const path = [ { t: 3.4, x: 1740, y: 1100 }, { t: 4.4, x: 1600, y: 995 }, // Finish setup button { t: 4.6, x: 1600, y: 995 }, { t: 7.0, x: 1600, y: 995 }, ]; const cur = (() => { if (lt < path[0].t) return { x: path[0].x, y: path[0].y, op: 0 }; if (lt >= path[path.length-1].t) return { x: path[path.length-1].x, y: path[path.length-1].y, op: 1 }; for (let i = 0; i < path.length - 1; i++) { if (lt >= path[i].t && lt <= path[i+1].t) { const seg = (lt - path[i].t) / (path[i+1].t - path[i].t || 1); const e = Easing.easeInOutCubic(seg); return { x: path[i].x + (path[i+1].x - path[i].x) * e, y: path[i].y + (path[i+1].y - path[i].y) * e, op: 1 }; } } return { x: path[0].x, y: path[0].y, op: 1 }; })(); const cursorFadeOut = interpolate([5.8, 6.4], [1, 0], Easing.easeInCubic)(lt); const cursorOp = cur.op * cursorFadeOut; const settle = lt > finishClickT && lt < finishClickT + 0.4 ? Math.sin((lt - finishClickT) * 30) * 1.5 * Math.exp(-(lt - finishClickT) * 8) : 0; // Confetti particles const confetti = React.useMemo(() => { const arr = []; for (let i = 0; i < 24; i++) { const angle = (i / 24) * Math.PI * 2 + Math.random() * 0.2; const dist = 280 + Math.random() * 220; const colors = ['#10b981', '#3b82f6', '#f59e0b', '#ec4899', '#8b5cf6', '#ef4444', '#14b8a6']; arr.push({ angle, dist, size: 6 + Math.random() * 8, color: colors[Math.floor(Math.random() * colors.length)], delay: Math.random() * 0.2, }); } return arr; }, []); const tiles = [ { label: 'School', iconBg: BRAND.greenSoft, iconStroke: BRAND.green, icon: , value: 'Sunridge Academy', sub: '2025-26', }, { label: 'Classes', iconBg: '#fef3c7', iconStroke: '#d97706', icon: , value: '1 class', sub: '1 section', chips: ['Class 1'], }, { label: 'Periods', iconBg: BRAND.greenSoft, iconStroke: BRAND.green, icon: , value: '8 regular', sub: '5-day week', }, { label: 'Subjects', iconBg: BRAND.greenSoft, iconStroke: BRAND.green, icon: , value: '5 subjects', sub: '2 class-subject mappings', chips: ['Mathematics', 'English', 'Social Studies', 'Science', 'Art'], }, { label: 'Teachers', iconBg: BRAND.greenSoft, iconStroke: BRAND.green, icon: , value: '1 teacher', sub: '1 assignment · 1 period / week', }, { label: 'Coverage', iconBg: BRAND.greenSoft, iconStroke: BRAND.green, icon: , value: '100%', sub: 'All classes covered', }, ]; const isClicked = lt > finishClickT; const buttonLabel = isClicked ? 'Generating timetable…' : 'Finish setup'; return (
{/* Step strip */}
{/* Stat tiles (2 rows × 3) */}
{tiles.map((tile, i) => { const e = tileEntry(i); return ( ); })}
{/* Footer */}
Back
{/* Confetti */} {lt >= finishClickT && confetti.map((p, i) => { const pt = (lt - finishClickT - p.delay) / 1.2; if (pt <= 0 || pt >= 1) return null; const ease = Easing.easeOutCubic(pt); const x = Math.cos(p.angle) * p.dist * ease; const y = Math.sin(p.angle) * p.dist * ease + (pt * pt * 200); // gravity return (
); })} {/* Halo */}
{/* Button */}
{isClicked && (
)} {buttonLabel} {!isClicked && ( )}
{/* Cursor */} {cursorOp > 0 && (
)}
); } function Step6App({ loop = true, persistKey = "step6video" }) { return ( ); } Object.assign(window, { Step6Video, Step6App }); if (!window.__STEP6_NO_AUTOMOUNT) { ReactDOM.createRoot(document.getElementById('root')).render(); }