/* global React */ const { useState: useStateSV, useEffect: useEffectSV, useMemo: useMemoSV, useRef: useRefSV } = React; // ============ Slide 1: Stadium panorama with phone lights ============ function StadiumPanorama({ accent = '#FFB300' }) { // Curved tribune tiers with phone lights on them const tiers = useMemoSV(() => { const arr = []; // 5 curved tiers for (let t = 0; t < 5; t++) { const lights = []; const count = 28 + t * 4; for (let i = 0; i < count; i++) { lights.push({ i, t, // distribute along the arc x: i / (count - 1), // jitter for natural feel jitter: (Math.sin(i * 17.31 + t * 3.7) + 1) / 2, on: Math.sin(i * 11.7 + t * 5.3) > 0.2, }); } arr.push(lights); } return arr; }, []); const [twinkle, setTwinkle] = useStateSV(0); useEffectSV(() => { const t = setInterval(() => setTwinkle((x) => x + 1), 300); return () => clearInterval(t); }, []); return (
{/* Field — bottom curve */} {/* Distant horizon — pitch */} {/* Center spot */} {/* Tribune arcs (back to front) */} {tiers.map((tier, ti) => { const tn = tiers.length; const yTop = 30 + ti * 14; // higher tiers are further back const yBot = yTop + 18; const curveDepth = 18 + ti * 4; const path = `M -10 ${yTop} Q 195 ${yTop - curveDepth} 400 ${yTop} L 400 ${yBot} Q 195 ${yBot - curveDepth} -10 ${yBot} Z`; return ( ); })} {/* Phone lights — overlaid as positioned dots */} {tiers.map((tier, ti) => { const yTop = 30 + ti * 14; const curveDepth = 18 + ti * 4; return tier.map((light) => { // bezier point at parameter x ∈ [0,1] for arc from (-10, yTop) → ctrl(195, yTop-curveDepth) → (400, yTop) const u = light.x; const px = (1 - u) * (1 - u) * -10 + 2 * (1 - u) * u * 195 + u * u * 400; const py = (1 - u) * (1 - u) * yTop + 2 * (1 - u) * u * (yTop - curveDepth) + u * u * yTop; // Random vertical placement within tier const yOff = 4 + light.jitter * 10; // Brightness varies + occasional twinkle const twinkleOn = ((light.i * 7 + ti * 11 + twinkle) % 13) > 8; const lit = light.on && twinkleOn; const isAccent = light.jitter > 0.85; const color = isAccent ? accent : (light.jitter > 0.55 ? '#fff' : '#b59a72'); const size = 1.5 + light.jitter * 1.3; return (
); }); })} {/* Foreground silhouette of nearest crowd / barrier */}
); } // ============ Slide 2: Synchronization wave ============ function SyncWave({ accent = '#22D3EE' }) { const [t, setT] = useStateSV(0); useEffectSV(() => { let raf; const start = performance.now(); const tick = (now) => { setT((now - start) / 1000); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); // Grid of phone "screens" pulsing in unison const cols = 9, rows = 7; const cells = useMemoSV(() => { const arr = []; for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) arr.push({ r, c }); } return arr; }, []); // Pulse all in unison (every 1.4s), but with slight perspective fade for back rows const phase = (t * 1.6) % 2; const on = phase < 1; return (
{cells.map((cell, i) => { const distFromCenter = Math.abs(cell.c - (cols - 1) / 2) / ((cols - 1) / 2); const rowFade = 1 - cell.r / rows * 0.4; return (
); })}
{/* Sync indicator — radial wave ring */}
{/* Server time badge */}
NTP · {Math.floor((t * 100) % 1000).toString().padStart(3, '0')}MS
); } // ============ Slide 3: Brightness & battery ============ function BrightnessBattery({ accent = '#FB7185' }) { const [t, setT] = useStateSV(0); useEffectSV(() => { let raf; const start = performance.now(); const tick = (now) => { setT((now - start) / 1000); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); const sunRays = 12; const rotation = t * 20; return (
{/* Sun rays (brightness) */} {Array.from({ length: sunRays }).map((_, i) => { const a = (i / sunRays) * Math.PI * 2; const x1 = Math.cos(a) * 75; const y1 = Math.sin(a) * 75; const x2 = Math.cos(a) * 130; const y2 = Math.sin(a) * 130; return ( ); })} {/* Phone silhouette */}
{/* Phone "screen" at max brightness */}
{/* Battery glyph */}
MAX · 100%
{/* Brightness scale labels */}
BRIGHTNESS
ALWAYS-ON
ACTIVE
); } // ============ Dispatcher ============ function OnboardVisual({ variant, accent }) { if (variant === 0) return ; if (variant === 1) return ; return ; } window.OnboardVisual = OnboardVisual;