// scenes.jsx — Scenes 1, 2, 3 (Obsidian Ridge design system) // // Timeline (100s total): // 0 – 10 Scene1Hook — $16.6B counter w/ ambient ticker // 10 – 23 Scene2AIEmail — AI-perfect wire-fraud email + cursor // 23 – 44 Scene3Arup — Hong Kong deepfake video call // 44 – 60 Scene4Vectors // 60 – 70 Scene5OneIn3 // 70 – 82 Scene6Fix // 82 – 94 Scene7Inside — what's in the program // 94 – 100 Scene8CTA // ─── Ambient ticker — small mono lines drifting up behind the counter ──── function AmbientTicker() { const t = useTime(); const items = [ 'Investment fraud · $6.57B', 'BEC · $2.77B', 'Tech-support · $1.46B', 'Personal-data breach · $1.45B', 'Ransomware · 44% of breaches', 'Identity theft · 358k complaints', 'Pig-butchering · $5.8B', '+33% YoY', 'Median time-to-click · 21 s', 'Elder fraud · $4.88B', '989,123 attacks / quarter', 'AI-generated lures · ↑↑↑', 'Token theft · +146% YoY', 'Help-desk vishing · +442%', ]; const totalHeight = 1080; const lineSpacing = 110; const speed = 22; return (
{items.map((txt, i) => { const baseY = i * lineSpacing - 60; const y = ((baseY - t * speed) % (totalHeight + 200) + totalHeight + 200) % (totalHeight + 200) - 100; const x = (i % 2 === 0) ? 80 : 1920 - 600; return (
{String(i + 1).padStart(2, '0')}   {txt}
); })}
); } // ─── Faceted ridge silhouette in background ──────────────────────────────── function RidgeSilhouette({ opacity = 0.10 }) { return ( {/* low-poly facets */} ); } // ═════════════════════════════════════════════════════════════════════════ // Scene 1 — $16.6 BILLION (0 → 10) // ═════════════════════════════════════════════════════════════════════════ function Scene1Hook() { const start = 0, end = 10.0; const t = useTime(); const local = t - start; const val = useCountUp({ from: 0, to: 16_600_000_000, start: 1.0, end: 7.0, ease: Easing.easeOutExpo }); const breathe = 1 + Math.sin(t * 1.4) * 0.004; const push = interpolate([0, 9], [1.025, 1.0], Easing.easeOutCubic)(local); const eb = interpolate([0.3, 1.0, 9.4, 9.9], [0, 1, 1, 0], Easing.linear)(local); const numO = interpolate([0.6, 1.1, 9.4, 9.9], [0, 1, 1, 0], Easing.linear)(local); const sub = interpolate([7.4, 8.1, 9.4, 9.9], [0, 1, 1, 0], Easing.linear)(local); return (
{/* PCB ornament corners */}
FBI IC3 · 2024 Annual Report
{/* giant counter */}
{fmtMoney(val)}
U.S. losses to internet crime · one year
{/* subtitle — Cinzel monumental */}
A 33% jump · in a single year
); } // ═════════════════════════════════════════════════════════════════════════ // Scene 2 — The AI-perfect email (10 → 23) // ═════════════════════════════════════════════════════════════════════════ function Scene2AIEmail() { const start = 10.0, end = 23.0; const t = useTime(); const local = t - start; const cardY = interpolate([0, 0.9, 12.0, 12.8], [80, 0, 0, -32], Easing.easeOutCubic)(local); const cardO = interpolate([0, 0.7, 12.0, 12.8], [0, 1, 1, 0], Easing.linear)(local); const fullBody = `Hi Sarah — quick favor before I board.\nI need you to wire the deposit for the\nNovaPharm acquisition today. Wire details\nattached. Keep this confidential for now,\nlegal is finalizing the press release.\n\nThanks,\nMichael`; const chars = Math.floor(interpolate([1.4, 7.0], [0, fullBody.length], Easing.linear)(local)); const shown = fullBody.slice(0, Math.max(0, chars)); const tagO = interpolate([8.5, 9.2, 12.0, 12.6], [0, 1, 1, 0], Easing.linear)(local); // cursor lands just BELOW the typo so it doesn't block the text const cx = interpolate([7.0, 8.4], [1700, 740], Easing.easeInOutCubic)(local); const cy = interpolate([7.0, 8.4], [900, 402], Easing.easeInOutCubic)(local); const cursorO = interpolate([6.8, 7.2, 12.0, 12.4], [0, 1, 1, 0], Easing.linear)(local); return (
Inbox · 09:47 AM · CEO
Wire confirmation needed — confidential
◆ Flagged
From
Michael Chen, CEO <mchen@northhriver-corp.com>
To
Sarah Pham, Controller
{shown} 0 ? 1 : 0, }} />
{/* circle on the typo — arrow only shown until the cursor arrives, then fades. */}
northhriver — not northriver
{/* arrow from tag to ellipse — only visible BEFORE cursor arrives */}
); } // ═════════════════════════════════════════════════════════════════════════ // Scene 3 — Hong Kong deepfake (23 → 44) // ═════════════════════════════════════════════════════════════════════════ function Scene3Arup() { const start = 23.0, end = 44.0; const t = useTime(); const local = t - start; const locO = interpolate([0.2, 1.0, 2.4, 3.0], [0, 1, 1, 0], Easing.linear)(local); const tileShow = (i) => { const a = 3.2 + i * 0.85; return interpolate([a, a + 0.7], [0, 1], Easing.easeOutCubic)(local); }; const tilesWrapO = interpolate([3.2, 6.8, 17.0, 18.4], [0, 1, 1, 0], Easing.linear)(local); const tileDim = interpolate([11.5, 12.2, 15.6, 16.0], [1, 0.18, 0.18, 1], Easing.linear)(local); const capRec = interpolate([6.8, 7.5, 10.6, 11.3], [0, 1, 1, 0], Easing.linear)(local); const wireO = interpolate([11.8, 12.6, 15.6, 16.0], [0, 1, 1, 0], Easing.linear)(local); const wireVal = useCountUp({ from: 0, to: 25_600_000, start: start + 12.4, end: start + 14.4, ease: Easing.easeOutExpo }); const glitch = interpolate([16.0, 17.8], [0, 1], Easing.easeInQuad)(local); const noiseO = interpolate([17.6, 18.3, 18.4, 18.6], [0, 1, 1, 0], Easing.linear)(local); const finalO = interpolate([18.4, 19.0, 20.4, 20.8], [0, 1, 1, 0], Easing.linear)(local); const portraits = [ { initials: 'MK', label: 'Michael Kwok', role: 'CFO · UK', hue: 38 }, { initials: 'DL', label: 'David Lin', role: 'Finance · HK', hue: 22 }, { initials: 'PS', label: 'Priya Shah', role: 'Legal', hue: 45 }, { initials: 'TR', label: 'Tom Reilly', role: 'Director · M&A', hue: 30 }, ]; const tileGeom = [ { x: 440, y: 200, w: 480, h: 320 }, { x: 1000, y: 200, w: 480, h: 320 }, { x: 440, y: 540, w: 480, h: 320 }, { x: 1000, y: 540, w: 480, h: 320 }, ]; return (
{/* location title */}
▌ Case File · ARUP
Hong Kong · 2024
A finance employee joins a video call.
{/* call-frame eyebrow */}
Live · Internal · Acquisition wire review
{portraits.map((p, i) => { const g = tileGeom[i]; return (
); })}
He recognized every face on the call.
{noiseO > 0 && (
\")", backgroundSize: '200px 200px', mixBlendMode: 'screen', }} /> )} {/* wire transfer counter */}
15 wire transfers · one day
{fmtMoney(wireVal)}
{/* FINAL stark line */}
◣ The realization
Every face
was a deepfake.
); } Object.assign(window, { Scene1Hook, Scene2AIEmail, Scene3Arup });