// scenes.jsx // Scene components for the 15s "real cost of scaling AI" video. const W = 1080; const H = 1920; // Palette const C = { bg: '#f4f0e6', // warm cream paper bgDark: '#0e0d0c', // deep ink ink: '#0e0d0c', // primary text inkDim: '#6b6458', // dim text on cream cream: '#f4f0e6', // text on dark accent: '#e0451f', // arrest-red accent accent2: '#1a3a2e', // deep money green rule: 'rgba(14,13,12,0.18)', }; const SERIF = '"Fraunces", "Times New Roman", serif'; const SANS = '"Inter Tight", "Inter", system-ui, sans-serif'; const MONO = '"JetBrains Mono", ui-monospace, monospace'; // ─── Background paper / grain ─────────────────────────────────────────────── function Paper({ dark = false }) { return (
); } // ─── Top chrome: small label and frame number ─────────────────────────────── function Chrome({ stepLabel, total = '06', current = '01', dark = false }) { const time = useTime(); const fade = Easing.easeOutCubic(clamp(time / 0.5, 0, 1)); const color = dark ? C.cream : C.ink; return (
{/* top-left mark */}
FIELD NOTES
/  ISSUE 014
{/* top-right step */}
{stepLabel} · {current} / {total}
{/* bottom rule */}
The real cost of scale 2026
); } // ─── Scene 1 — Title hook ─────────────────────────────────────────────────── function SceneTitle() { const { localTime } = useSprite(); // Letter-by-letter for the bold line const line1 = 'The real'; const line2 = 'cost of scaling'; const line3 = 'an AI product.'; const Letter = ({ ch, delay }) => { const t = clamp((localTime - delay) / 0.35, 0, 1); const e = Easing.easeOutBack(t); return ( {ch === ' ' ? '\u00A0' : ch} ); }; const Line = ({ text, startDelay, size, weight = 700, color = C.ink, italic = false, font = SERIF }) => { const chars = text.split(''); return (
{chars.map((ch, i) => ( ))}
); }; // kicker fade const kT = clamp(localTime / 0.4, 0, 1); return (
{/* big eyebrow */}
▸ A study in burn rates
{/* lower question */}
Three numbers from the last quarter that changed how we ship.
); } // ─── Stat card frame ──────────────────────────────────────────────────────── // reusable layout for scenes 2–4 function StatLayout({ index, label, sub, dark = false, children, stepLabel }) { const { localTime } = useSprite(); const eyebrowT = Easing.easeOutCubic(clamp(localTime / 0.4, 0, 1)); return (
▸ {sub}
{label}
{children}
); } // Animated counting number function CountUp({ from, to, duration, prefix = '', suffix = '', style, decimals = 0 }) { const { localTime } = useSprite(); const t = Easing.easeOutCubic(clamp(localTime / duration, 0, 1)); const v = from + (to - from) * t; const txt = decimals ? v.toFixed(decimals) : Math.round(v).toLocaleString(); return {prefix}{txt}{suffix}; } // ─── Scene 2 — Grok Build $300 ────────────────────────────────────────────── function SceneGrok() { const { localTime } = useSprite(); const tagT = Easing.easeOutBack(clamp((localTime - 0.4) / 0.6, 0, 1)); const stampT = clamp((localTime - 1.4) / 0.5, 0, 1); return ( GROK
BUILD.} > {/* huge price tag */}
$
M
{/* USD label under the figure */}
—  USD  —
{/* stamp */}
per quarter
{/* footnote */}
compute, talent, & the long tail of demos that never shipped.
); } // ─── Scene 3 — Cursor $1000× ──────────────────────────────────────────────── function SceneCursor() { const { localTime } = useSprite(); const numT = clamp((localTime - 0.3) / 1.5, 0, 1); // multiplier ticks up fast const v = Math.round(1000 * Easing.easeOutQuart(numT)); const xPulse = 1 + 0.06 * Math.sin(localTime * 6) * Math.max(0, 1 - (localTime - 1.5)); return ( CURSOR
OPS.} dark > {/* big multiplier — sized to fit 1080 canvas with margins */}
{v.toLocaleString()}
×
{/* caption under the figure */}
tokens billed,  2025 → 2026
{/* growth bar */}
TOKEN BURN · YOY
); } // ─── Scene 4 — AIbridge cut 55% ───────────────────────────────────────────── function SceneAibridge() { const { localTime } = useSprite(); const cutT = Easing.easeInOutCubic(clamp((localTime - 0.5) / 1.4, 0, 1)); const labelT = clamp((localTime - 1.6) / 0.4, 0, 1); return ( AIBRIDGE
CUT.} > {/* bars */}
{/* before */}
BEFORE
112features
{/* after, shrinks */}
AFTER
features
{/* −55% slap label */}
−55%
Surface area, knocked back
to what users actually use.
); } // ─── Scene 5 — Stacked summary ────────────────────────────────────────────── function SceneStack() { const { localTime } = useSprite(); const rows = [ { name: 'GROK BUILD', value: '$300M', tag: 'Per quarter' }, { name: 'CURSOR OPS', value: '1,000×', tag: 'Token burn' }, { name: 'AIBRIDGE', value: '−55%', tag: 'Feature cut' }, ]; return (
▸ The pattern
Three teams. One lesson.
{/* table */}
{rows.map((r, i) => { const t = clamp((localTime - 0.4 - i * 0.18) / 0.45, 0, 1); const e = Easing.easeOutCubic(t); return (
{String(i + 1).padStart(2, '0')} · {r.tag}
{r.name}
{r.value}
); })}
); } // ─── Scene 6 — Takeaway ───────────────────────────────────────────────────── function SceneTakeaway() { const { localTime } = useSprite(); const fewerT = Easing.easeOutBack(clamp((localTime - 0.2) / 0.7, 0, 1)); const deeperT = Easing.easeOutBack(clamp((localTime - 1.0) / 0.7, 0, 1)); const lineT = clamp((localTime - 0.0) / 0.5, 0, 1); const tailT = clamp((localTime - 2.0) / 0.6, 0, 1); // subtle parallax drift const drift = (localTime - 1.5) * 4; return (
{/* huge centered serif */}
{/* Pick fewer. */}
Pick{' '} fewer.
{/* Use deeper. */}
Use deeper.
{/* big rule */}
{/* closing body */}
The teams burning $300M{' '} and 1,000×{' '} learned it the hard way.
The team that cut 55%{' '} learned it first.
{/* sign-off */}
Field Notes · 014
); } // ─── Root composition ─────────────────────────────────────────────────────── function Video() { const time = useTime(); const sec = Math.floor(time); // expose timestamp via root attr (for comment context) React.useEffect(() => { const el = document.querySelector('[data-screen-label]'); if (el) el.setAttribute('data-screen-label', `t=${sec}s`); }, [sec]); return ( <> ); } Object.assign(window, { Video, W, H });