@vfrey/vfrey 0.0.1 → 1.0.0-beta.0

package/src/remotion/films/claude/ClaudeFilm.tsx

@@ -0,0 +1,1014 @@
+import React from "react";
+import {
+  AbsoluteFill,
+  Audio,
+  Sequence,
+  interpolate,
+  staticFile,
+  useCurrentFrame,
+} from "remotion";
+
+// Measured from the takes of these lines so the film lands on 200 words per minute.
+export const PLAYBACK_RATE = 1.1147;
+
+const FPS = 30;
+const W = 1080;
+const H = 1920;
+const CAPTION_BAND = 180;
+const GOLD = "#f0c14a";
+const CREAM = "#f6f3ec";
+const BG = "#0f1115";
+const INK = "#1b1f27";
+const TEAL = "#5ec8c0";
+const CORAL = "#ff7a6b";
+const GREEN = "#6fd38a";
+const GITHUB_PATH =
+  "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12";
+
+type SceneDef = { id: string; text: string };
+
+const SCENES: SceneDef[] = [
+  { id: "s01", text: "You love a feature in an app, but there is no source code to open. How does it even work?" },
+  { id: "s02", text: "That is what R. E. A. is for. Reverse Engineer Anything. More than 360,000 people have starred it on GitHub." },
+  { id: "s03", text: "It gives your coding assistant one connection to look through an app. Say, how the search box in Notes behaves." },
+  { id: "s04", text: "Starting is one line. Type n p x, rea agents, setup, and press enter." },
+  { id: "s05", text: "Pick your coding assistant. Review the changes it wants to make, approve them, then restart the assistant." },
+  { id: "s06", text: "Now ask a plain question. How does the search in Notes find my words so fast?" },
+  { id: "s07", text: "The looking happens on your computer. The app is never uploaded anywhere." },
+  { id: "s08", text: "You get an explanation, the proof behind it, and a clear note on what could not be proven." },
+  { id: "s09", text: "A JavaScript app needs nothing extra. A compiled program uses Hopper, Ghidra, or IDA to be read. Setup can offer Hopper, only after you approve." },
+  { id: "s10", text: "The payoff is a similar search appearing in your own project, sitting right beside the proof that shaped it." },
+  { id: "s11", text: "One rule matters. Use it only on software you own, or are allowed to open, for research and learning." },
+  { id: "s12", text: "That is R. E. A. Official sources are github dot com slash morluto slash rea, rea dot tools, and the package rea agents. Run n p x, rea agents, setup." },
+];
+
+const countWords = (t: string) => t.split(/\s+/).filter(Boolean).length;
+const sceneFrames = (t: string) =>
+  Math.ceil((countWords(t) / 200) * 60 * FPS + 1.1 * FPS);
+
+const FRAMES = SCENES.map((s) => sceneFrames(s.text));
+const STARTS: number[] = [];
+{
+  let acc = 0;
+  for (const f of FRAMES) {
+    STARTS.push(acc);
+    acc += f;
+  }
+}
+export const claudeDurationInFrames = FRAMES.reduce((a, b) => a + b, 0);
+
+const clamp = { extrapolateLeft: "clamp", extrapolateRight: "clamp" } as const;
+const easeOut = (t: number) => 1 - Math.pow(1 - t, 3);
+const prog = (frame: number, start: number, dur: number) =>
+  easeOut(interpolate(frame, [start, start + dur], [0, 1], clamp));
+
+/* ---------- shared drawing pieces ---------- */
+
+const Defs: React.FC<{ id: string }> = ({ id }) => (
+  <defs>
+    <linearGradient id={`${id}-body`} x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stopColor="#3a4150" />
+      <stop offset="1" stopColor="#1f242e" />
+    </linearGradient>
+    <linearGradient id={`${id}-gold`} x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stopColor="#ffe08a" />
+      <stop offset="1" stopColor="#d99a1e" />
+    </linearGradient>
+    <linearGradient id={`${id}-paper`} x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stopColor="#fff8dc" />
+      <stop offset="1" stopColor="#f0dd9a" />
+    </linearGradient>
+    <linearGradient id={`${id}-screen`} x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stopColor="#262c3a" />
+      <stop offset="1" stopColor="#161a22" />
+    </linearGradient>
+    <linearGradient id={`${id}-teal`} x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stopColor="#8fe3dc" />
+      <stop offset="1" stopColor="#3aa39b" />
+    </linearGradient>
+    <filter id={`${id}-shadow`} x="-30%" y="-30%" width="160%" height="180%">
+      <feGaussianBlur stdDeviation="10" />
+    </filter>
+    <filter id={`${id}-glow`} x="-50%" y="-50%" width="200%" height="200%">
+      <feGaussianBlur stdDeviation="7" result="b" />
+      <feMerge>
+        <feMergeNode in="b" />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+  </defs>
+);
+
+const Shadow: React.FC<{ id: string; cx: number; cy: number; rx: number; ry?: number }> = ({
+  id,
+  cx,
+  cy,
+  rx,
+  ry = 14,
+}) => (
+  <ellipse cx={cx} cy={cy} rx={rx} ry={ry} fill="#000" opacity={0.5} filter={`url(#${id}-shadow)`} />
+);
+
+/* Laptop */
+const Laptop: React.FC<{
+  id: string;
+  x: number;
+  y: number;
+  scale?: number;
+  children?: React.ReactNode;
+  glow?: number;
+}> = ({ id, x, y, scale = 1, children, glow = 0 }) => (
+  <g transform={`translate(${x} ${y}) scale(${scale})`}>
+    <Defs id={id} />
+    <Shadow id={id} cx={0} cy={250} rx={330} ry={22} />
+    {/* lid back rim */}
+    <rect x={-300} y={-210} width={600} height={400} rx={26} fill="#0c0e13" />
+    {/* bezel */}
+    <rect x={-290} y={-200} width={580} height={380} rx={22} fill={`url(#${id}-body)`} />
+    {/* screen */}
+    <rect x={-262} y={-174} width={524} height={330} rx={10} fill={`url(#${id}-screen)`} />
+    {glow > 0 && (
+      <rect x={-262} y={-174} width={524} height={330} rx={10} fill={TEAL} opacity={glow * 0.08} />
+    )}
+    {/* camera dot */}
+    <circle cx={0} cy={-187} r={4} fill="#0c0e13" />
+    {children}
+    {/* base */}
+    <path d="M -340 190 L 340 190 L 310 236 Q 305 246 292 246 L -292 246 Q -305 246 -310 236 Z" fill={`url(#${id}-body)`} />
+    <path d="M -340 190 L 340 190 L 336 200 L -336 200 Z" fill="#555e70" />
+    <rect x={-48} y={190} width={96} height={12} rx={6} fill="#171b23" />
+  </g>
+);
+
+/* Notes app window drawn inside the laptop screen (coordinates are screen-local) */
+const NotesWindow: React.FC<{ id: string; typed?: number; highlight?: number }> = ({
+  id,
+  typed = 0,
+  highlight = 0,
+}) => {
+  const q = "meeting".slice(0, Math.round(typed * 7));
+  return (
+    <g>
+      {/* sidebar */}
+      <rect x={-262} y={-174} width={150} height={330} fill="#2b2f3a" />
+      <rect x={-252} y={-120} width={130} height={20} rx={6} fill="#3a4050" />
+      <rect x={-252} y={-90} width={130} height={20} rx={6} fill="#3a4050" />
+      <rect x={-252} y={-60} width={130} height={20} rx={6} fill="#3a4050" />
+      {/* traffic dots */}
+      <circle cx={-246} cy={-160} r={5} fill="#ff5f56" />
+      <circle cx={-228} cy={-160} r={5} fill="#ffbd2e" />
+      <circle cx={-210} cy={-160} r={5} fill="#27c93f" />
+      {/* search box */}
+      <rect x={-92} y={-160} width={340} height={34} rx={17} fill="#0f1218" stroke={highlight > 0 ? GOLD : "#3a4050"} strokeWidth={highlight > 0 ? 3 : 2} />
+      <circle cx={-70} cy={-143} r={8} fill="none" stroke="#8b93a5" strokeWidth={3} />
+      <line x1={-64} y1={-137} x2={-56} y2={-129} stroke="#8b93a5" strokeWidth={3} strokeLinecap="round" />
+      <text x={-42} y={-134} fontFamily="Helvetica, Arial, sans-serif" fontSize={18} fill={CREAM}>
+        {q}
+      </text>
+      {/* note rows */}
+      {[0, 1, 2, 3].map((i) => (
+        <g key={i}>
+          <rect x={-92} y={-100 + i * 62} width={340} height={52} rx={8} fill={highlight > 0 && i < 2 ? "#4b4320" : "#2f3441"} />
+          <rect x={-80} y={-90 + i * 62} width={140} height={10} rx={5} fill={highlight > 0 && i < 2 ? GOLD : "#6b7387"} />
+          <rect x={-80} y={-70 + i * 62} width={250} height={8} rx={4} fill="#4d5568" />
+        </g>
+      ))}
+    </g>
+  );
+};
+
+/* Padlock (closed, shows no source) */
+const Padlock: React.FC<{ id: string; x: number; y: number; scale?: number; open?: number }> = ({
+  id,
+  x,
+  y,
+  scale = 1,
+  open = 0,
+}) => (
+  <g transform={`translate(${x} ${y}) scale(${scale})`}>
+    <Defs id={id} />
+    <Shadow id={id} cx={0} cy={130} rx={110} />
+    <path
+      d={`M -60 -20 L -60 -${70 + open * 24} A 60 60 0 0 1 60 -${70 + open * 24} L 60 -20`}
+      fill="none"
+      stroke="#9aa3b5"
+      strokeWidth={22}
+      strokeLinecap="round"
+    />
+    <rect x={-100} y={-24} width={200} height={150} rx={26} fill={`url(#${id}-gold)`} />
+    <rect x={-100} y={96} width={200} height={30} rx={14} fill="#a8741a" />
+    <circle cx={0} cy={36} r={20} fill="#6b4a0f" />
+    <rect x={-6} y={44} width={12} height={36} rx={6} fill="#6b4a0f" />
+  </g>
+);
+
+/* Chat bubble */
+const Bubble: React.FC<{
+  id: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  fill: string;
+  tail?: "left" | "right";
+  children?: React.ReactNode;
+}> = ({ id, x, y, w, h, fill, tail = "left", children }) => (
+  <g transform={`translate(${x} ${y})`}>
+    <Defs id={id} />
+    <rect x={6} y={10} width={w} height={h} rx={34} fill="#000" opacity={0.35} filter={`url(#${id}-shadow)`} />
+    <rect x={0} y={0} width={w} height={h} rx={34} fill={fill} />
+    <rect x={0} y={h - 22} width={w} height={22} rx={22} fill="#000" opacity={0.12} />
+    {tail === "left" ? (
+      <path d={`M 34 ${h - 4} L 6 ${h + 40} L 78 ${h - 4} Z`} fill={fill} />
+    ) : (
+      <path d={`M ${w - 34} ${h - 4} L ${w - 6} ${h + 40} L ${w - 78} ${h - 4} Z`} fill={fill} />
+    )}
+    {children}
+  </g>
+);
+
+/* Star */
+const Star: React.FC<{ cx: number; cy: number; r: number; fill?: string; opacity?: number }> = ({
+  cx,
+  cy,
+  r,
+  fill = GOLD,
+  opacity = 1,
+}) => {
+  const pts: string[] = [];
+  for (let i = 0; i < 10; i++) {
+    const a = (Math.PI / 5) * i - Math.PI / 2;
+    const rr = i % 2 === 0 ? r : r * 0.45;
+    pts.push(`${cx + Math.cos(a) * rr},${cy + Math.sin(a) * rr}`);
+  }
+  return <polygon points={pts.join(" ")} fill={fill} opacity={opacity} stroke="#a8741a" strokeWidth={r * 0.06} strokeLinejoin="round" />;
+};
+
+/* Terminal window */
+const Terminal: React.FC<{ id: string; x: number; y: number; w: number; h: number; children?: React.ReactNode }> = ({
+  id,
+  x,
+  y,
+  w,
+  h,
+  children,
+}) => (
+  <g transform={`translate(${x} ${y})`}>
+    <Defs id={id} />
+    <rect x={8} y={14} width={w} height={h} rx={24} fill="#000" opacity={0.5} filter={`url(#${id}-shadow)`} />
+    <rect x={0} y={0} width={w} height={h} rx={24} fill="#0a0c10" stroke="#3a4150" strokeWidth={3} />
+    <path d={`M 0 24 Q 0 0 24 0 L ${w - 24} 0 Q ${w} 0 ${w} 24 L ${w} 64 L 0 64 Z`} fill="#262c3a" />
+    <circle cx={34} cy={32} r={9} fill="#ff5f56" />
+    <circle cx={64} cy={32} r={9} fill="#ffbd2e" />
+    <circle cx={94} cy={32} r={9} fill="#27c93f" />
+    {children}
+  </g>
+);
+
+/* Magnifier */
+const Magnifier: React.FC<{ id: string; x: number; y: number; scale?: number; rot?: number }> = ({
+  id,
+  x,
+  y,
+  scale = 1,
+  rot = 0,
+}) => (
+  <g transform={`translate(${x} ${y}) rotate(${rot}) scale(${scale})`}>
+    <Defs id={id} />
+    <Shadow id={id} cx={20} cy={170} rx={100} />
+    <line x1={50} y1={50} x2={140} y2={150} stroke="#6b4a0f" strokeWidth={34} strokeLinecap="round" />
+    <line x1={50} y1={50} x2={140} y2={150} stroke={`url(#${id}-gold)`} strokeWidth={22} strokeLinecap="round" />
+    <circle cx={0} cy={0} r={78} fill="#8fe3dc" opacity={0.25} />
+    <circle cx={0} cy={0} r={78} fill="none" stroke="#a8741a" strokeWidth={22} />
+    <circle cx={0} cy={0} r={78} fill="none" stroke={`url(#${id}-gold)`} strokeWidth={14} />
+    <path d="M -46 -20 A 52 52 0 0 1 -14 -50" fill="none" stroke="#fff" strokeWidth={8} strokeLinecap="round" opacity={0.7} />
+  </g>
+);
+
+/* Cloud, crossed out */
+const CrossedCloud: React.FC<{ id: string; x: number; y: number; scale?: number; cross: number }> = ({
+  id,
+  x,
+  y,
+  scale = 1,
+  cross,
+}) => (
+  <g transform={`translate(${x} ${y}) scale(${scale})`}>
+    <Defs id={id} />
+    <Shadow id={id} cx={0} cy={110} rx={150} />
+    <path
+      d="M -120 70 Q -170 70 -170 20 Q -170 -30 -120 -34 Q -110 -100 -40 -100 Q 10 -100 28 -62 Q 100 -76 110 -10 Q 170 -6 170 40 Q 170 70 130 70 Z"
+      fill={`url(#${id}-body)`}
+      stroke="#6b7387"
+      strokeWidth={6}
+    />
+    <path d="M -120 70 L 130 70 L 130 54 L -120 54 Z" fill="#000" opacity={0.18} />
+    <line x1={-110} y1={-70} x2={-110 + 230 * cross} y2={-70 + 190 * cross} stroke={CORAL} strokeWidth={22} strokeLinecap="round" />
+    <line x1={120} y1={-70} x2={120 - 230 * cross} y2={-70 + 190 * cross} stroke={CORAL} strokeWidth={22} strokeLinecap="round" />
+  </g>
+);
+
+/* Document with proof stamp */
+const Doc: React.FC<{
+  id: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  rot?: number;
+  lines?: number;
+  stamp?: "check" | "question" | null;
+  stampScale?: number;
+}> = ({ id, x, y, w, h, rot = 0, lines = 5, stamp = null, stampScale = 1 }) => (
+  <g transform={`translate(${x} ${y}) rotate(${rot})`}>
+    <Defs id={id} />
+    <rect x={8} y={12} width={w} height={h} rx={16} fill="#000" opacity={0.4} filter={`url(#${id}-shadow)`} />
+    <rect x={0} y={0} width={w} height={h} rx={16} fill={`url(#${id}-paper)`} />
+    <path d={`M ${w - 50} 0 L ${w} 50 L ${w - 50} 50 Z`} fill="#d9c47a" />
+    <path d={`M ${w - 50} 0 L ${w} 50 L ${w} 0 Z`} fill={BG} opacity={0.0} />
+    <rect x={w - 12} y={0} width={12} height={h} rx={6} fill="#000" opacity={0.08} />
+    {Array.from({ length: lines }).map((_, i) => (
+      <rect key={i} x={26} y={28 + i * 30} width={(w - 80) * (i === lines - 1 ? 0.55 : 1)} height={10} rx={5} fill="#8a7a3a" opacity={0.7} />
+    ))}
+    {stamp && (
+      <g transform={`translate(${w - 70} ${h - 70}) scale(${stampScale}) rotate(-12)`}>
+        <circle r={46} fill="none" stroke={stamp === "check" ? "#2f9e5b" : CORAL} strokeWidth={8} opacity={0.95} />
+        <circle r={36} fill="none" stroke={stamp === "check" ? "#2f9e5b" : CORAL} strokeWidth={3} opacity={0.8} />
+        {stamp === "check" ? (
+          <path d="M -18 2 L -4 16 L 20 -14" fill="none" stroke="#2f9e5b" strokeWidth={10} strokeLinecap="round" strokeLinejoin="round" />
+        ) : (
+          <>
+            <path d="M -12 -10 Q -12 -22 0 -22 Q 14 -22 14 -10 Q 14 -2 2 2 L 2 10" fill="none" stroke={CORAL} strokeWidth={9} strokeLinecap="round" />
+            <circle cx={2} cy={24} r={5} fill={CORAL} />
+          </>
+        )}
+      </g>
+    )}
+  </g>
+);
+
+/* Chip: compiled program */
+const Chip: React.FC<{ id: string; x: number; y: number; scale?: number }> = ({ id, x, y, scale = 1 }) => (
+  <g transform={`translate(${x} ${y}) scale(${scale})`}>
+    <Defs id={id} />
+    <Shadow id={id} cx={0} cy={110} rx={120} />
+    {Array.from({ length: 6 }).map((_, i) => (
+      <g key={i}>
+        <rect x={-76 + i * 28} y={-104} width={12} height={30} rx={3} fill="#9aa3b5" />
+        <rect x={-76 + i * 28} y={74} width={12} height={30} rx={3} fill="#9aa3b5" />
+        <rect x={-104} y={-76 + i * 28} width={30} height={12} rx={3} fill="#9aa3b5" />
+        <rect x={74} y={-76 + i * 28} width={30} height={12} rx={3} fill="#9aa3b5" />
+      </g>
+    ))}
+    <rect x={-80} y={-80} width={160} height={160} rx={18} fill={`url(#${id}-body)`} stroke="#6b7387" strokeWidth={4} />
+    <rect x={-80} y={56} width={160} height={24} rx={12} fill="#000" opacity={0.25} />
+    <rect x={-48} y={-48} width={96} height={96} rx={10} fill="#0c0e13" />
+    <text x={0} y={14} textAnchor="middle" fontFamily="Menlo, monospace" fontSize={36} fontWeight={700} fill={TEAL}>
+      01
+    </text>
+    <circle cx={-64} cy={-64} r={5} fill={GOLD} />
+  </g>
+);
+
+/* Code window for JS app */
+const JsCard: React.FC<{ id: string; x: number; y: number; scale?: number }> = ({ id, x, y, scale = 1 }) => (
+  <g transform={`translate(${x} ${y}) scale(${scale})`}>
+    <Defs id={id} />
+    <Shadow id={id} cx={0} cy={120} rx={130} />
+    <rect x={-110} y={-100} width={220} height={210} rx={22} fill={`url(#${id}-gold)`} />
+    <rect x={-110} y={80} width={220} height={30} rx={15} fill="#a8741a" />
+    <text x={86} y={64} textAnchor="end" fontFamily="Helvetica, Arial, sans-serif" fontSize={72} fontWeight={800} fill="#1b1f27">
+      JS
+    </text>
+    <rect x={-84} y={-76} width={100} height={12} rx={6} fill="#1b1f27" opacity={0.35} />
+    <rect x={-84} y={-52} width={60} height={12} rx={6} fill="#1b1f27" opacity={0.35} />
+  </g>
+);
+
+/* Person (filled shapes, no face) */
+const Person: React.FC<{ id: string; x: number; y: number; scale?: number; armsUp?: number }> = ({
+  id,
+  x,
+  y,
+  scale = 1,
+  armsUp = 0,
+}) => (
+  <g transform={`translate(${x} ${y}) scale(${scale})`}>
+    <Defs id={id} />
+    <Shadow id={id} cx={0} cy={230} rx={110} />
+    <rect x={-46} y={110} width={32} height={110} rx={14} fill="#2b3040" />
+    <rect x={14} y={110} width={32} height={110} rx={14} fill="#2b3040" />
+    <ellipse cx={-30} cy={224} rx={30} ry={13} fill="#14171d" />
+    <ellipse cx={30} cy={224} rx={30} ry={13} fill="#14171d" />
+    <path d="M -64 -10 Q -64 -30 -40 -30 L 40 -30 Q 64 -30 64 -10 L 58 124 L -58 124 Z" fill={`url(#${id}-gold)`} />
+    <path d="M 22 -30 L 40 -30 Q 64 -30 64 -10 L 58 124 L 22 124 Z" fill="#000" opacity={0.15} />
+    <g transform={`rotate(${-20 - armsUp * 50} -64 -10)`}>
+      <rect x={-86} y={-18} width={28} height={110} rx={14} fill={`url(#${id}-gold)`} />
+    </g>
+    <g transform={`rotate(${20 + armsUp * 50} 64 -10)`}>
+      <rect x={58} y={-18} width={28} height={110} rx={14} fill="#c98c1a" />
+    </g>
+    <circle cx={0} cy={-76} r={40} fill="#f1c7a0" />
+    <path d="M -42 -82 Q -40 -128 0 -126 Q 42 -128 42 -82 Q 20 -104 -42 -82 Z" fill="#3a2a22" />
+    <path d="M 14 -110 Q 42 -108 42 -82 L 30 -80 Z" fill="#000" opacity={0.18} />
+  </g>
+);
+
+/* Arrow with filled head */
+const Arrow: React.FC<{ x1: number; y1: number; x2: number; y2: number; color?: string; draw?: number; w?: number }> = ({
+  x1,
+  y1,
+  x2,
+  y2,
+  color = GOLD,
+  draw = 1,
+  w = 14,
+}) => {
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const len = Math.hypot(dx, dy);
+  const ux = dx / len;
+  const uy = dy / len;
+  const ex = x1 + dx * draw;
+  const ey = y1 + dy * draw;
+  const hs = 34;
+  const bx = ex - ux * hs;
+  const by = ey - uy * hs;
+  return (
+    <g opacity={draw > 0.02 ? 1 : 0}>
+      <line x1={x1} y1={y1} x2={bx} y2={by} stroke={color} strokeWidth={w} strokeLinecap="round" />
+      <polygon points={`${ex},${ey} ${bx - uy * 26},${by + ux * 26} ${bx + uy * 26},${by - ux * 26}`} fill={color} />
+    </g>
+  );
+};
+
+/* Label pill */
+const Label: React.FC<{ x: number; y: number; text: string; color?: string; size?: number; opacity?: number }> = ({
+  x,
+  y,
+  text,
+  color = CREAM,
+  size = 40,
+  opacity = 1,
+}) => {
+  const w = text.length * size * 0.56 + 56;
+  return (
+    <g opacity={opacity} transform={`translate(${x} ${y})`}>
+      <rect x={-w / 2} y={-size * 0.95} width={w} height={size * 1.6} rx={size * 0.8} fill="#1b1f27" stroke="#3a4150" strokeWidth={3} />
+      <text x={0} y={size * 0.2} textAnchor="middle" fontFamily="Helvetica, Arial, sans-serif" fontSize={size} fontWeight={700} fill={color}>
+        {text}
+      </text>
+    </g>
+  );
+};
+
+/* Dust motes backdrop */
+const Backdrop: React.FC<{ frame: number }> = ({ frame }) => (
+  <AbsoluteFill>
+    <svg width={W} height={H} viewBox={`0 0 ${W} ${H}`}>
+      <defs>
+        <radialGradient id="bg-main" cx="50%" cy="38%" r="75%">
+          <stop offset="0" stopColor="#1d2230" />
+          <stop offset="1" stopColor={BG} />
+        </radialGradient>
+      </defs>
+      <rect width={W} height={H} fill="url(#bg-main)" />
+      {Array.from({ length: 14 }).map((_, i) => {
+        const bx = (i * 173) % W;
+        const by = (i * 311) % (H - CAPTION_BAND);
+        const dy = Math.sin((frame + i * 20) / 60) * 14;
+        return <circle key={i} cx={bx} cy={by + dy} r={3 + (i % 3)} fill="#fff" opacity={0.05 + (i % 4) * 0.015} />;
+      })}
+    </svg>
+  </AbsoluteFill>
+);
+
+/* ---------- scenes ---------- */
+
+type SceneProps = { f: number; len: number };
+
+const SvgStage: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <AbsoluteFill>
+    <svg width={W} height={H} viewBox={`0 0 ${W} ${H}`}>
+      {children}
+    </svg>
+  </AbsoluteFill>
+);
+
+/* 1: feature you love, no source code */
+const Scene1: React.FC<SceneProps> = ({ f }) => {
+  const lockIn = prog(f, 20, 24);
+  const q = prog(f, 40, 20);
+  const wobble = Math.sin(f / 8) * 4;
+  return (
+    <SvgStage>
+      <Laptop id="s1l" x={540} y={560} scale={1.35}>
+        <NotesWindow id="s1n" typed={prog(f, 4, 30)} highlight={prog(f, 4, 30)} />
+      </Laptop>
+      <g opacity={lockIn} transform={`translate(0 ${(1 - lockIn) * 40})`}>
+        <Padlock id="s1p" x={540} y={1150} scale={1.5} open={0} />
+      </g>
+      <g opacity={q} transform={`translate(0 ${wobble})`}>
+        <Doc id="s1d" x={170} y={1010} w={230} h={290} rot={-8} lines={5} stamp="question" stampScale={q} />
+        <Label x={285} y={1360} text="no source" size={40} />
+      </g>
+      <g opacity={q}>
+        <Label x={540} y={1500} text="How does it work?" size={56} color={GOLD} />
+      </g>
+    </SvgStage>
+  );
+};
+
+/* 2: name REA + stars */
+const Scene2: React.FC<SceneProps> = ({ f }) => {
+  const logo = prog(f, 4, 22);
+  const count = Math.round(interpolate(f, [30, 140], [0, 364800], clamp));
+  const label = (count / 1000).toFixed(1) + "k";
+  const stars = [0, 1, 2, 3, 4, 5, 6];
+  return (
+    <SvgStage>
+      <Defs id="s2" />
+      {/* card */}
+      <g transform={`translate(540 ${760 + (1 - logo) * 60}) scale(${0.85 + logo * 0.15})`} opacity={logo}>
+        <Shadow id="s2" cx={0} cy={320} rx={380} ry={26} />
+        <rect x={-380} y={-300} width={760} height={600} rx={48} fill="url(#s2-body)" stroke="#555e70" strokeWidth={4} />
+        <rect x={-380} y={240} width={760} height={60} rx={30} fill="#000" opacity={0.25} />
+        <g transform="translate(-300 -230) scale(6)">
+          <path d={GITHUB_PATH} fill={CREAM} />
+        </g>
+        <text x={-130} y={-150} fontFamily="Helvetica, Arial, sans-serif" fontSize={64} fontWeight={800} fill={CREAM}>
+          morluto/rea
+        </text>
+        <text x={0} y={30} textAnchor="middle" fontFamily="Helvetica, Arial, sans-serif" fontSize={190} fontWeight={900} fill={GOLD} letterSpacing={20}>
+          REA
+        </text>
+        <text x={0} y={120} textAnchor="middle" fontFamily="Helvetica, Arial, sans-serif" fontSize={44} fontWeight={600} fill={CREAM}>
+          Reverse Engineer Anything
+        </text>
+        <g transform="translate(-60 190)">
+          <Star cx={-120} cy={30} r={44} />
+          <text x={-60} y={52} fontFamily="Helvetica, Arial, sans-serif" fontSize={80} fontWeight={800} fill={GOLD}>
+            {label}
+          </text>
+        </g>
+      </g>
+      {stars.map((i) => {
+        const p = prog(f, 40 + i * 9, 30);
+        const sx = 160 + i * 130;
+        return <Star key={i} cx={sx} cy={1340 - p * 200 + (i % 2) * 40} r={34 + (i % 3) * 8} opacity={p} />;
+      })}
+      <Label x={540} y={1560} text="more than 360,000 stars" size={48} color={GOLD} opacity={prog(f, 90, 24)} />
+    </SvgStage>
+  );
+};
+
+/* 3: what it does, Notes search */
+const Scene3: React.FC<SceneProps> = ({ f }) => {
+  const reaIn = prog(f, 10, 24);
+  const beam = prog(f, 40, 40);
+  const mag = prog(f, 20, 26);
+  return (
+    <SvgStage>
+      <Laptop id="s3l" x={540} y={620} scale={1.35} glow={beam}>
+        <NotesWindow id="s3n" typed={1} highlight={beam} />
+      </Laptop>
+      <g opacity={mag} transform={`translate(0 ${Math.sin(f / 10) * 8})`}>
+        <Magnifier id="s3m" x={700} y={560} scale={1.7} rot={-8} />
+      </g>
+      <g opacity={reaIn}>
+        <Doc id="s3d" x={140} y={1130} w={360} h={300} rot={-4} lines={6} stamp="check" stampScale={prog(f, 70, 18)} />
+        <Label x={320} y={1480} text="explanation" size={42} />
+      </g>
+      <g opacity={reaIn}>
+        <rect x={580} y={1150} width={330} height={260} rx={30} fill="#1b1f27" stroke={TEAL} strokeWidth={5} />
+        <text x={745} y={1260} textAnchor="middle" fontFamily="Helvetica, Arial, sans-serif" fontSize={110} fontWeight={900} fill={TEAL}>
+          REA
+        </text>
+        <text x={745} y={1330} textAnchor="middle" fontFamily="Helvetica, Arial, sans-serif" fontSize={34} fill={CREAM}>
+          coding assistant
+        </text>
+        <Arrow x1={580} y1={1280} x2={510} y2={1280} color={TEAL} draw={beam} w={12} />
+      </g>
+      <Label x={540} y={1620} text="Notes search box" size={46} color={GOLD} opacity={prog(f, 30, 20)} />
+    </SvgStage>
+  );
+};
+
+/* 4: one setup command */
+const Scene4: React.FC<SceneProps> = ({ f }) => {
+  const cmd = "npx rea-agents setup";
+  const typed = Math.round(interpolate(f, [16, 90], [0, cmd.length], clamp));
+  const caret = Math.floor(f / 10) % 2 === 0;
+  const enter = prog(f, 100, 14);
+  return (
+    <SvgStage>
+      <Terminal id="s4t" x={70} y={560} w={940} h={520}>
+        <text x={50} y={190} fontFamily="Menlo, Courier, monospace" fontSize={44} fill={TEAL}>
+          $
+        </text>
+        <text x={100} y={190} fontFamily="Menlo, Courier, monospace" fontSize={56} fontWeight={700} fill={CREAM}>
+          {cmd.slice(0, typed)}
+          {caret ? "▌" : ""}
+        </text>
+        <g opacity={enter}>
+          <rect x={50} y={260} width={520} height={14} rx={7} fill="#262c3a" />
+          <rect x={50} y={260} width={520 * enter} height={14} rx={7} fill={GREEN} />
+          <text x={50} y={330} fontFamily="Menlo, Courier, monospace" fontSize={36} fill={GREEN}>
+            setup started
+          </text>
+        </g>
+      </Terminal>
+      <g transform={`translate(0 ${enter * -10})`}>
+        <rect x={420} y={1180} width={240} height={100} rx={22} fill="#262c3a" stroke="#555e70" strokeWidth={4} />
+        <rect x={420} y={1250} width={240} height={30} rx={15} fill="#000" opacity={0.25} />
+        <text x={540} y={1245} textAnchor="middle" fontFamily="Helvetica, Arial, sans-serif" fontSize={44} fontWeight={800} fill={GOLD}>
+          enter
+        </text>
+      </g>
+      <Label x={540} y={1450} text="one line" size={56} color={GOLD} opacity={prog(f, 10, 20)} />
+    </SvgStage>
+  );
+};
+
+/* 5: pick assistant, review, approve, restart */
+const Scene5: React.FC<SceneProps> = ({ f, len }) => {
+  const t1 = prog(f, 8, 20);
+  const t2 = prog(f, len * 0.3, 20);
+  const t3 = prog(f, len * 0.5, 20);
+  const t4 = prog(f, len * 0.7, 20);
+  const step = (i: number, p: number, y: number, name: string, draw: React.ReactNode) => (
+    <g opacity={p} transform={`translate(0 ${(1 - p) * 30})`}>
+      <rect x={90} y={y} width={900} height={250} rx={36} fill="#1b1f27" stroke="#3a4150" strokeWidth={4} />
+      <circle cx={170} cy={y + 125} r={44} fill={GOLD} />
+      <text x={170} y={y + 142} textAnchor="middle" fontFamily="Helvetica, Arial, sans-serif" fontSize={52} fontWeight={900} fill={INK}>
+        {i}
+      </text>
+      <text x={250} y={y + 140} fontFamily="Helvetica, Arial, sans-serif" fontSize={54} fontWeight={800} fill={CREAM}>
+        {name}
+      </text>
+      {draw}
+    </g>
+  );
+  return (
+    <SvgStage>
+      <Defs id="s5" />
+      {step(1, t1, 330, "Pick assistant",
+        <g transform="translate(880 455)">
+          {[-80, 0, 80].map((dx, k) => (
+            <circle key={k} cx={dx - 20} cy={0} r={28} fill={k === 1 ? GOLD : "#3a4150"} />
+          ))}
+        </g>
+      )}
+      {step(2, t2, 620, "Review changes",
+        <g transform="translate(840 745)">
+          <rect x={-50} y={-55} width={100} height={110} rx={12} fill="url(#s5-paper)" />
+          <rect x={-34} y={-34} width={68} height={8} rx={4} fill="#8a7a3a" />
+          <rect x={-34} y={-14} width={50} height={8} rx={4} fill="#8a7a3a" />
+          <rect x={-34} y={6} width={60} height={8} rx={4} fill="#8a7a3a" />
+        </g>
+      )}
+      {step(3, t3, 910, "Approve",
+        <g transform="translate(880 1035)">
+          <circle r={50} fill={GREEN} />
+          <path d="M -24 2 L -6 22 L 28 -18" fill="none" stroke={INK} strokeWidth={14} strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+      )}
+      {step(4, t4, 1200, "Restart",
+        <g transform="translate(880 1325)">
+          <path d="M 40 -10 A 44 44 0 1 1 10 -42" fill="none" stroke={TEAL} strokeWidth={14} strokeLinecap="round" />
+          <polygon points="50,-52 54,-12 14,-30" fill={TEAL} />
+        </g>
+      )}
+    </SvgStage>
+  );
+};
+
+/* 6: the question */
+const Scene6: React.FC<SceneProps> = ({ f }) => {
+  const ask = prog(f, 10, 24);
+  const reply = prog(f, 80, 24);
+  return (
+    <SvgStage>
+      <Person id="s6p" x={250} y={780} scale={1.5} armsUp={ask} />
+      <g opacity={ask} transform={`translate(0 ${(1 - ask) * 30})`}>
+        <Bubble id="s6b" x={90} y={170} w={700} h={270} fill={GOLD} tail="left">
+          <text x={40} y={90} fontFamily="Helvetica, Arial, sans-serif" fontSize={50} fontWeight={800} fill={INK}>
+            How does the search
+          </text>
+          <text x={40} y={150} fontFamily="Helvetica, Arial, sans-serif" fontSize={50} fontWeight={800} fill={INK}>
+            in Notes find my
+          </text>
+          <text x={40} y={210} fontFamily="Helvetica, Arial, sans-serif" fontSize={50} fontWeight={800} fill={INK}>
+            words so fast?
+          </text>
+        </Bubble>
+      </g>
+      <Laptop id="s6l" x={640} y={1330} scale={0.82}>
+        <NotesWindow id="s6n" typed={1} highlight={1} />
+      </Laptop>
+      <g opacity={reply} transform={`translate(0 ${(1 - reply) * 30})`}>
+        <Bubble id="s6r" x={480} y={560} w={520} h={190} fill={TEAL} tail="right">
+          <text x={40} y={84} fontFamily="Helvetica, Arial, sans-serif" fontSize={44} fontWeight={800} fill={INK}>
+            Looking now...
+          </text>
+          <rect x={40} y={116} width={320} height={14} rx={7} fill={INK} opacity={0.3} />
+          <rect x={40} y={116} width={320 * reply} height={14} rx={7} fill={INK} />
+        </Bubble>
+      </g>
+    </SvgStage>
+  );
+};
+
+/* 7: stays on your computer */
+const Scene7: React.FC<SceneProps> = ({ f }) => {
+  const up = prog(f, 20, 40);
+  const cross = prog(f, 56, 24);
+  return (
+    <SvgStage>
+      <Laptop id="s7l" x={540} y={1110} scale={1.3} glow={1}>
+        <NotesWindow id="s7n" typed={1} highlight={1} />
+        <g transform="translate(150 70)">
+          <Magnifier id="s7m" x={0} y={0} scale={0.6} rot={-10} />
+        </g>
+      </Laptop>
+      <g opacity={1 - cross * 0.0} transform={`translate(0 ${-up * 40})`}>
+        <Arrow x1={540} y1={760} x2={540} y2={470} color={CORAL} draw={up} w={16} />
+      </g>
+      <CrossedCloud id="s7c" x={540} y={330} scale={1.5} cross={cross} />
+      <Label x={540} y={1560} text="stays on your computer" size={50} color={GREEN} opacity={prog(f, 70, 20)} />
+    </SvgStage>
+  );
+};
+
+/* 8: explanation, proof, unknown */
+const Scene8: React.FC<SceneProps> = ({ f, len }) => {
+  const a = prog(f, 10, 22);
+  const b = prog(f, len * 0.35, 22);
+  const c = prog(f, len * 0.62, 22);
+  return (
+    <SvgStage>
+      <g opacity={a} transform={`translate(0 ${(1 - a) * 30})`}>
+        <Doc id="s8a" x={80} y={250} w={420} h={340} rot={-3} lines={6} stamp={null} />
+        <Label x={290} y={650} text="explanation" size={46} />
+      </g>
+      <g opacity={b} transform={`translate(0 ${(1 - b) * 30})`}>
+        <Doc id="s8b" x={580} y={500} w={420} h={340} rot={3} lines={6} stamp="check" stampScale={b} />
+        <Label x={790} y={910} text="proof" size={46} color={GREEN} />
+      </g>
+      <g opacity={c} transform={`translate(0 ${(1 - c) * 30})`}>
+        <Doc id="s8c" x={80} y={980} w={420} h={340} rot={-2} lines={4} stamp="question" stampScale={c} />
+        <Label x={290} y={1390} text="not proven" size={46} color={CORAL} />
+      </g>
+      <Arrow x1={400} y1={610} x2={620} y2={560} color={TEAL} draw={b} w={10} />
+      <Arrow x1={760} y1={880} x2={440} y2={1020} color={CORAL} draw={c} w={10} />
+    </SvgStage>
+  );
+};
+
+/* 9: JS vs compiled */
+const Scene9: React.FC<SceneProps> = ({ f, len }) => {
+  const left = prog(f, 10, 22);
+  const right = prog(f, len * 0.35, 22);
+  const tools = prog(f, len * 0.55, 22);
+  return (
+    <SvgStage>
+      <line x1={540} y1={180} x2={540} y2={1560} stroke="#3a4150" strokeWidth={4} strokeDasharray="14 16" />
+      <g opacity={left} transform={`translate(0 ${(1 - left) * 30})`}>
+        <JsCard id="s9j" x={290} y={480} scale={1.4} />
+        <Label x={290} y={780} text="JavaScript app" size={42} />
+        <g transform="translate(290 940)">
+          <circle r={64} fill={GREEN} />
+          <path d="M -30 2 L -8 26 L 34 -22" fill="none" stroke={INK} strokeWidth={16} strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <Label x={290} y={1100} text="nothing extra" size={44} color={GREEN} />
+      </g>
+      <g opacity={right} transform={`translate(0 ${(1 - right) * 30})`}>
+        <Chip id="s9c" x={790} y={480} scale={1.5} />
+        <Label x={790} y={780} text="compiled program" size={42} />
+      </g>
+      <g opacity={tools} transform={`translate(0 ${(1 - tools) * 30})`}>
+        {["Hopper", "Ghidra", "IDA"].map((name, i) => (
+          <g key={name} transform={`translate(790 ${900 + i * 140})`}>
+            <rect x={-170} y={-50} width={340} height={110} rx={26} fill="#1b1f27" stroke={GOLD} strokeWidth={4} />
+            <rect x={-170} y={20} width={340} height={40} rx={20} fill="#000" opacity={0.2} />
+            <Magnifier id={`s9m${i}`} x={-110} y={0} scale={0.4} />
+            <text x={30} y={20} textAnchor="middle" fontFamily="Helvetica, Arial, sans-serif" fontSize={56} fontWeight={800} fill={CREAM}>
+              {name}
+            </text>
+          </g>
+        ))}
+      </g>
+    </SvgStage>
+  );
+};
+
+/* 10: similar search appears beside proof */
+const Scene10: React.FC<SceneProps> = ({ f, len }) => {
+  const proof = prog(f, 8, 22);
+  const arrow = prog(f, len * 0.3, 24);
+  const mine = prog(f, len * 0.45, 24);
+  return (
+    <SvgStage>
+      <g opacity={proof} transform={`translate(0 ${(1 - proof) * 30})`}>
+        <Laptop id="s10a" x={300} y={620} scale={0.78}>
+          <NotesWindow id="s10n" typed={1} highlight={1} />
+        </Laptop>
+        <Label x={300} y={930} text="Notes search" size={40} />
+      </g>
+      <Arrow x1={520} y1={560} x2={640} y2={560} color={GOLD} draw={arrow} w={14} />
+      <g opacity={mine} transform={`translate(0 ${(1 - mine) * 30})`}>
+        <Laptop id="s10b" x={800} y={620} scale={0.78}>
+          <rect x={-262} y={-174} width={524} height={330} rx={10} fill="#1d2430" />
+          <rect x={-232} y={-150} width={300} height={34} rx={17} fill="#0f1218" stroke={TEAL} strokeWidth={3} />
+          {[0, 1, 2].map((i) => (
+            <g key={i}>
+              <rect x={-232} y={-96 + i * 70} width={440} height={56} rx={10} fill={i < 2 ? "#1d4a46" : "#2f3441"} />
+              <rect x={-216} y={-84 + i * 70} width={170} height={10} rx={5} fill={i < 2 ? TEAL : "#6b7387"} />
+              <rect x={-216} y={-62 + i * 70} width={280} height={8} rx={4} fill="#4d5568" />
+            </g>
+          ))}
+        </Laptop>
+        <Label x={800} y={930} text="your project" size={40} color={TEAL} />
+      </g>
+      <g opacity={mine} transform={`translate(540 1250)`}>
+        <Doc id="s10d" x={-220} y={0} w={440} h={280} rot={-1} lines={5} stamp="check" stampScale={prog(f, len * 0.6, 18)} />
+        <Label x={0} y={350} text="the proof stays beside it" size={44} color={GOLD} />
+      </g>
+    </SvgStage>
+  );
+};
+
+/* 11: lawful use only */
+const Scene11: React.FC<SceneProps> = ({ f, len }) => {
+  const a = prog(f, 8, 22);
+  const b = prog(f, len * 0.4, 22);
+  return (
+    <SvgStage>
+      <g opacity={a} transform={`translate(0 ${(1 - a) * 30})`}>
+        <Laptop id="s11l" x={540} y={480} scale={1.0}>
+          <NotesWindow id="s11n" typed={1} highlight={1} />
+        </Laptop>
+        <g transform="translate(790 420)">
+          <circle r={60} fill={GREEN} />
+          <path d="M -28 2 L -8 24 L 30 -20" fill="none" stroke={INK} strokeWidth={14} strokeLinecap="round" strokeLinejoin="round" />
+        </g>
+        <Label x={540} y={800} text="software you own" size={50} color={GREEN} />
+      </g>
+      <g opacity={b} transform={`translate(0 ${(1 - b) * 30})`}>
+        <Padlock id="s11p" x={300} y={1200} scale={1.2} open={1} />
+        <Doc id="s11d" x={560} y={1020} w={360} h={280} rot={3} lines={5} stamp="check" stampScale={b} />
+        <Label x={300} y={1400} text="allowed to open" size={42} />
+        <Label x={740} y={1400} text="research and learning" size={38} color={GOLD} />
+      </g>
+    </SvgStage>
+  );
+};
+
+/* 12: close */
+const Scene12: React.FC<SceneProps> = ({ f, len }) => {
+  const logo = prog(f, 6, 24);
+  const cmd = prog(f, len * 0.5, 24);
+  return (
+    <SvgStage>
+      <Defs id="s12" />
+      <g opacity={logo} transform={`translate(540 ${430 + (1 - logo) * 40})`}>
+        <Shadow id="s12" cx={0} cy={250} rx={330} ry={24} />
+        <rect x={-340} y={-230} width={680} height={460} rx={48} fill="url(#s12-body)" stroke="#555e70" strokeWidth={4} />
+        <rect x={-340} y={170} width={680} height={60} rx={30} fill="#000" opacity={0.25} />
+        <g transform="translate(-60 -190) scale(5)">
+          <path d={GITHUB_PATH} fill={CREAM} />
+        </g>
+        <text x={0} y={60} textAnchor="middle" fontFamily="Helvetica, Arial, sans-serif" fontSize={190} fontWeight={900} fill={GOLD} letterSpacing={20}>
+          REA
+        </text>
+        <text x={0} y={140} textAnchor="middle" fontFamily="Helvetica, Arial, sans-serif" fontSize={42} fontWeight={600} fill={CREAM}>
+          Reverse Engineer Anything
+        </text>
+      </g>
+      <g opacity={logo}>
+        {["github.com/morluto/rea", "rea.tools", "rea-agents"].map((t, i) => (
+          <Label key={t} x={540} y={850 + i * 100} text={t} size={42} color={TEAL} />
+        ))}
+      </g>
+      <g opacity={cmd} transform={`translate(0 ${(1 - cmd) * 30})`}>
+        <Terminal id="s12t" x={110} y={1200} w={860} h={280}>
+          <text x={46} y={170} fontFamily="Menlo, Courier, monospace" fontSize={40} fill={TEAL}>
+            $
+          </text>
+          <text x={90} y={172} fontFamily="Menlo, Courier, monospace" fontSize={52} fontWeight={700} fill={CREAM}>
+            npx rea-agents setup
+          </text>
+        </Terminal>
+      </g>
+    </SvgStage>
+  );
+};
+
+const SCENE_COMPONENTS: React.FC<SceneProps>[] = [
+  Scene1,
+  Scene2,
+  Scene3,
+  Scene4,
+  Scene5,
+  Scene6,
+  Scene7,
+  Scene8,
+  Scene9,
+  Scene10,
+  Scene11,
+  Scene12,
+];
+
+/* ---------- karaoke ---------- */
+
+const Karaoke: React.FC<{ text: string; f: number; len: number }> = ({ text, f, len }) => {
+  const words = text.split(/\s+/).filter(Boolean);
+  const speakFrames = len - Math.round(0.7 * FPS);
+  const per = speakFrames / words.length;
+  const active = Math.min(words.length - 1, Math.max(0, Math.floor(f / per)));
+  const speaking = f < speakFrames;
+  return (
+    <div
+      style={{
+        position: "absolute",
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height: CAPTION_BAND,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "0 56px",
+        background: "linear-gradient(to top, rgba(8,9,12,0.92), rgba(8,9,12,0.0))",
+      }}
+    >
+      <div
+        style={{
+          fontFamily: "Helvetica, Arial, sans-serif",
+          fontSize: 42,
+          fontWeight: 800,
+          lineHeight: 1.18,
+          textAlign: "center",
+          color: CREAM,
+        }}
+      >
+        {words.map((w, i) => (
+          <span
+            key={i}
+            style={{
+              color: speaking && i === active ? GOLD : CREAM,
+              marginRight: 12,
+              display: "inline-block",
+            }}
+          >
+            {w}
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+/* ---------- film ---------- */
+
+const SceneWrap: React.FC<{ index: number }> = ({ index }) => {
+  const f = useCurrentFrame();
+  const len = FRAMES[index];
+  const Comp = SCENE_COMPONENTS[index];
+  const fadeIn = interpolate(f, [0, 6], [0, 1], clamp);
+  const fadeOut = interpolate(f, [len - 6, len], [1, 0], clamp);
+  const op = Math.min(fadeIn, index === SCENES.length - 1 ? 1 : fadeOut);
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      <Comp f={f} len={len} />
+      <Karaoke text={SCENES[index].text} f={f} len={len} />
+    </AbsoluteFill>
+  );
+};
+
+const Bed: React.FC = () => {
+  const frame = useCurrentFrame();
+  const vol = interpolate(
+    frame,
+    [0, 24, claudeDurationInFrames - 36, claudeDurationInFrames],
+    [0, 0.08, 0.08, 0],
+    clamp,
+  );
+  return <Audio src={staticFile("bed.wav")} volume={vol} />;
+};
+
+export const ClaudeFilm: React.FC = () => {
+  const frame = useCurrentFrame();
+  return (
+    <AbsoluteFill style={{ backgroundColor: BG }}>
+      <Backdrop frame={frame} />
+      {SCENES.map((s, i) => (
+        <Sequence key={s.id} from={STARTS[i]} durationInFrames={FRAMES[i]}>
+          <SceneWrap index={i} />
+          <Audio src={staticFile(`voice-${String(i + 1).padStart(2, "0")}.wav`)} playbackRate={PLAYBACK_RATE} />
+        </Sequence>
+      ))}
+      <Bed />
+    </AbsoluteFill>
+  );
+};