@devinilabs/reelstack 1.3.1 → 1.4.0

package/reference/glass/jcode.tsx

@@ -0,0 +1,2267 @@
+/**
+ * REFERENCE — JcodeReel  (Family: glass)
+ *
+ * Canonical example of the glass family's motion vocabulary, frame-locked
+ * BEAT structure, and scene choreography. Bundled with ReelStack v1.4+
+ * for STUDY and as the source for the scaffold-from-reference flow.
+ *
+ * Asset imports stripped (look for REFERENCE-STRIP markers). Bring your own
+ * voiceover, brand SVGs, captures.
+ *
+ * License: study + adapt patterns OK. Verbatim re-publication as your own
+ * template NOT OK. See ReelStack LICENSE.
+ *
+ * Source: my-video/src/JcodeReel.tsx
+ * Bundled at: 2026-05-12T19:40:04.825Z
+ */
+import React from "react";
+import {
+  AbsoluteFill,
+  Img,
+  OffthreadVideo,
+  Sequence,
+  interpolate,
+  spring,
+  staticFile,
+  useCurrentFrame,
+  useVideoConfig,
+} from "remotion";
+import {
+  C,
+  ease,
+  glassBase,
+  CausticBlobs,
+  HairlineGrid,
+  IridescentRing,
+  GlassCard,
+  EyebrowPill,
+  StaggeredWords,
+  ScrambleText,
+  Counter,
+  SonarRings,
+  ParticleBurst,
+  LightBeam,
+  FONT,
+  MONO,
+} from "./GraphifyReel";
+
+// ═══════════════════════════════════════════════════════════════
+// TIMING — 72.13s @ 30fps = 2164 frames, audio-locked
+// BEATs derived from /tmp/jcode.srt sentence boundaries (whisper-cli base.en)
+// ═══════════════════════════════════════════════════════════════
+export const JCODE_TOTAL = 2164;
+
+export const BEAT = {
+  hook: 0,         //  0.00s — "63 times faster than Codex…"
+  intro: 348,      // 11.60s — "Welcome back guys"
+  harness: 554,    // 18.46s — "So here's the thing…"
+  rust: 907,       // 30.22s — "And jcode just rebuilt…in Rust"
+  memory: 1154,    // 38.45s — "Now about that built-in memory system"
+  parallel: 1463,  // 48.78s — "Parallel sessions are native too"
+  swarms: 1660,    // 55.35s — "And the craziest part?"
+  cta: 1995,       // 66.51s — "If you want the repo link"
+  end: 2164,       // 72.13s
+} as const;
+
+// jcode brand accent — the ONLY non-iridescent color, single accent per leonxinx Rule 2
+const JC = {
+  rust: "#E55A1A",
+  rustSoft: "#F9C5A5",
+  rustDeep: "#9B3A0E",
+  rustHaze: "rgba(229,90,26,0.18)",
+} as const;
+
+const SAFE_TOP = 290;       // 15% of 1920
+const SAFE_BOTTOM = 1500;   // bottom 22% begins
+
+// ═══════════════════════════════════════════════════════════════
+// FILM GRAIN — copy of GraphifyReel's overlay (it's not exported)
+// ═══════════════════════════════════════════════════════════════
+const FilmGrain: React.FC = () => (
+  <AbsoluteFill
+    style={{
+      backgroundImage:
+        "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E\")",
+      opacity: 0.06,
+      pointerEvents: "none",
+      mixBlendMode: "multiply",
+    }}
+  />
+);
+
+// ═══════════════════════════════════════════════════════════════
+// FLOATING GLYPHS — code-symbol pills drifting on sine paths (Scene 1)
+// Anti-emoji per leonxinx — uses Unicode math/code symbols only
+// ═══════════════════════════════════════════════════════════════
+const FloatingGlyphs: React.FC<{ startFrame?: number }> = ({ startFrame = 0 }) => {
+  const frame = useCurrentFrame();
+  const local = Math.max(0, frame - startFrame);
+  const glyphs = [
+    { ch: "</>", x: 120, y: 360, phase: 0.0, speed: 0.025, size: 36, color: C.iriCyan },
+    { ch: "{ }", x: 880, y: 480, phase: 1.1, speed: 0.022, size: 38, color: C.iriViolet },
+    { ch: "λ",   x: 200, y: 1240, phase: 2.0, speed: 0.028, size: 44, color: C.iriRose },
+    { ch: "∞",   x: 920, y: 1140, phase: 3.2, speed: 0.024, size: 40, color: JC.rust },
+    { ch: "Σ",   x: 100, y: 760, phase: 0.8, speed: 0.030, size: 42, color: C.iriGold },
+    { ch: "∇",   x: 940, y: 1380, phase: 4.5, speed: 0.026, size: 38, color: C.iriCyan },
+  ];
+  return (
+    <AbsoluteFill style={{ pointerEvents: "none" }}>
+      {glyphs.map((g, i) => {
+        const birth = i * 6;
+        const lo = Math.max(0, local - birth);
+        const intro = interpolate(lo, [0, 30], [0, 1], {
+          extrapolateRight: "clamp",
+          easing: ease.expoOut,
+        });
+        const driftX = Math.sin(local * g.speed + g.phase) * 26;
+        const driftY = Math.cos(local * g.speed * 1.3 + g.phase) * 22;
+        const rot = Math.sin(local * g.speed * 0.8 + g.phase) * 6;
+        return (
+          <div
+            key={i}
+            style={{
+              position: "absolute",
+              left: g.x + driftX,
+              top: g.y + driftY,
+              padding: "8px 14px",
+              borderRadius: 14,
+              ...glassBase,
+              opacity: intro * 0.85,
+              transform: `translate(-50%,-50%) scale(${0.7 + intro * 0.3}) rotate(${rot}deg)`,
+              fontFamily: MONO,
+              fontSize: g.size,
+              fontWeight: 600,
+              color: g.color,
+              willChange: "transform, opacity",
+            }}
+          >
+            {g.ch}
+          </div>
+        );
+      })}
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// CHIP — small glass capsule with optional dot
+// ═══════════════════════════════════════════════════════════════
+const Chip: React.FC<{
+  children: React.ReactNode;
+  dotColor?: string;
+  style?: React.CSSProperties;
+}> = ({ children, dotColor, style }) => (
+  <div
+    style={{
+      ...glassBase,
+      borderRadius: 9999,
+      padding: "10px 22px",
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 10,
+      fontFamily: MONO,
+      fontSize: 18,
+      fontWeight: 500,
+      color: C.inkSoft,
+      letterSpacing: "0.18em",
+      textTransform: "uppercase",
+      ...style,
+    }}
+  >
+    {dotColor && (
+      <div
+        style={{
+          width: 8,
+          height: 8,
+          borderRadius: "50%",
+          background: dotColor,
+          boxShadow: `0 0 12px ${dotColor}`,
+        }}
+      />
+    )}
+    {children}
+  </div>
+);
+
+// ═══════════════════════════════════════════════════════════════
+// FLOW ARROW — animated SVG path with strokeDashoffset cycle
+// ═══════════════════════════════════════════════════════════════
+const FlowArrow: React.FC<{
+  d: string;
+  stroke?: string;
+  strokeWidth?: number;
+  speed?: number;
+  startFrame?: number;
+}> = ({ d, stroke = C.iriViolet, strokeWidth = 3, speed = 1.2, startFrame = 0 }) => {
+  const frame = useCurrentFrame();
+  const local = Math.max(0, frame - startFrame);
+  // Continuous flow — dashoffset cycles every 40 frames
+  const dashCycle = (local * speed) % 40;
+  const drawIn = interpolate(local, [0, 24], [0, 1], {
+    extrapolateRight: "clamp",
+    easing: ease.expoOut,
+  });
+  return (
+    <svg
+      style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none" }}
+      viewBox="0 0 1080 1920"
+      preserveAspectRatio="none"
+    >
+      <path
+        d={d}
+        fill="none"
+        stroke={stroke}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeDasharray="20 8"
+        strokeDashoffset={-dashCycle}
+        opacity={drawIn * 0.85}
+        style={{ filter: `drop-shadow(0 0 8px ${stroke})` }}
+      />
+    </svg>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// HARNESS DIAGRAM (Scene 3)
+// Vertical stack: [Claude Code] [Codex CLI] → HARNESS → AI MODEL
+// ═══════════════════════════════════════════════════════════════
+const HarnessDiagram: React.FC<{ startFrame: number }> = ({ startFrame }) => {
+  const frame = useCurrentFrame();
+  const local = Math.max(0, frame - startFrame);
+
+  const tile = (delay: number) => {
+    const lo = Math.max(0, local - delay);
+    return {
+      opacity: interpolate(lo, [0, 24], [0, 1], { extrapolateRight: "clamp", easing: ease.expoOut }),
+      y: interpolate(lo, [0, 24], [40, 0], { extrapolateRight: "clamp", easing: ease.power3Out }),
+    };
+  };
+
+  const top = tile(0);
+  const mid = tile(20);
+  const bot = tile(40);
+
+  // pulsing border on harness layer (perpetual)
+  const pulse = (Math.sin(local * 0.08) + 1) * 0.5;
+  const harnessGlow = interpolate(pulse, [0, 1], [0.35, 0.85]);
+
+  // labels reveal inside harness layer (prompts / tools / memory / sessions)
+  const labels = ["prompts", "tools", "memory", "sessions"];
+  const labelStart = 70;
+
+  return (
+    <AbsoluteFill style={{ pointerEvents: "none" }}>
+      {/* Top row: source pills (Claude Code + Codex CLI) */}
+      <div
+        style={{
+          position: "absolute",
+          top: 460,
+          left: 0,
+          right: 0,
+          display: "flex",
+          gap: 24,
+          justifyContent: "center",
+          opacity: top.opacity,
+          transform: `translateY(${top.y}px)`,
+          willChange: "transform, opacity",
+        }}
+      >
+        <div
+          style={{
+            ...glassBase,
+            borderRadius: 24,
+            padding: "20px 28px",
+            display: "flex",
+            alignItems: "center",
+            gap: 14,
+            fontFamily: FONT,
+            fontSize: 26,
+            fontWeight: 600,
+            color: C.ink,
+          }}
+        >
+          <Img src={staticFile("captures/your-asset.png" /* REFERENCE-STRIP */)} style={{ width: 36, height: 36 }} />
+          Claude Code
+        </div>
+        <div
+          style={{
+            ...glassBase,
+            borderRadius: 24,
+            padding: "20px 28px",
+            display: "flex",
+            alignItems: "center",
+            gap: 14,
+            fontFamily: FONT,
+            fontSize: 26,
+            fontWeight: 600,
+            color: C.ink,
+          }}
+        >
+          <Img src={staticFile("captures/your-asset.png" /* REFERENCE-STRIP */)} style={{ width: 36, height: 36 }} />
+          Codex CLI
+        </div>
+      </div>
+
+      {/* Arrow from sources → harness */}
+      <FlowArrow
+        d="M 540 580 L 540 720"
+        stroke={C.iriViolet}
+        strokeWidth={4}
+        startFrame={startFrame + 14}
+      />
+
+      {/* Middle: HARNESS layer (the glowing intermediary) */}
+      <div
+        style={{
+          position: "absolute",
+          top: 760,
+          left: 80,
+          right: 80,
+          padding: "32px 36px",
+          ...glassBase,
+          borderRadius: 36,
+          opacity: mid.opacity,
+          transform: `translateY(${mid.y}px)`,
+          boxShadow: [
+            "0 24px 48px -12px rgba(120,100,180,0.22)",
+            "inset 0 1.5px 0 rgba(255,255,255,0.95)",
+            `0 0 ${24 + 24 * pulse}px ${C.iriViolet}${Math.round(harnessGlow * 60)
+              .toString(16)
+              .padStart(2, "0")}`,
+          ].join(", "),
+          willChange: "transform, opacity",
+        }}
+      >
+        <div
+          style={{
+            fontFamily: MONO,
+            fontSize: 16,
+            color: C.inkMuted,
+            letterSpacing: "0.18em",
+            textTransform: "uppercase",
+            marginBottom: 14,
+          }}
+        >
+          The Harness
+        </div>
+        <div
+          style={{
+            display: "flex",
+            flexWrap: "wrap",
+            gap: 12,
+            fontFamily: FONT,
+          }}
+        >
+          {labels.map((l, i) => {
+            const lo = Math.max(0, local - (labelStart + i * 14));
+            const op = interpolate(lo, [0, 18], [0, 1], { extrapolateRight: "clamp" });
+            const sc = interpolate(lo, [0, 18], [0.7, 1], {
+              extrapolateRight: "clamp",
+              easing: ease.backOut,
+            });
+            return (
+              <div
+                key={l}
+                style={{
+                  ...glassBase,
+                  borderRadius: 9999,
+                  padding: "10px 22px",
+                  fontSize: 22,
+                  fontWeight: 600,
+                  color: C.ink,
+                  opacity: op,
+                  transform: `scale(${sc})`,
+                  willChange: "transform, opacity",
+                }}
+              >
+                {l}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Arrow from harness → AI model */}
+      <FlowArrow
+        d="M 540 1070 L 540 1200"
+        stroke={C.iriCyan}
+        strokeWidth={4}
+        startFrame={startFrame + 32}
+      />
+
+      {/* Bottom: AI MODEL sphere */}
+      <div
+        style={{
+          position: "absolute",
+          top: 1250,
+          left: 0,
+          right: 0,
+          display: "flex",
+          justifyContent: "center",
+          opacity: bot.opacity,
+          transform: `translateY(${bot.y}px)`,
+          willChange: "transform, opacity",
+        }}
+      >
+        <div
+          style={{
+            position: "relative",
+            width: 220,
+            height: 220,
+          }}
+        >
+          <IridescentRing size={220} thickness={3} speed={1.2} borderRadius={9999} />
+          <div
+            style={{
+              position: "absolute",
+              inset: 4,
+              borderRadius: "50%",
+              background: `radial-gradient(circle at 35% 30%, #fff 0%, ${C.iriCyan} 35%, ${C.iriViolet} 80%)`,
+              boxShadow: `0 12px 40px ${C.iriViolet}80`,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontFamily: MONO,
+              fontSize: 22,
+              fontWeight: 600,
+              color: "#fff",
+              letterSpacing: "0.18em",
+              textTransform: "uppercase",
+            }}
+          >
+            AI Model
+          </div>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// MEMORY CONSTELLATION (Scene 5)
+// 8 glass nodes connected by drawing-in lines, breathing pulses
+// ═══════════════════════════════════════════════════════════════
+const MemoryConstellation: React.FC<{ startFrame: number }> = ({ startFrame }) => {
+  const frame = useCurrentFrame();
+  const local = Math.max(0, frame - startFrame);
+
+  // 8 nodes positioned around a soft elliptical orbit centered at (540, 960)
+  const nodes = [
+    { x: 540, y: 720, label: "ctx" },
+    { x: 760, y: 800, label: "files" },
+    { x: 860, y: 980, label: "decisions" },
+    { x: 760, y: 1160, label: "user" },
+    { x: 540, y: 1220, label: "goals" },
+    { x: 320, y: 1160, label: "stack" },
+    { x: 220, y: 980, label: "errors" },
+    { x: 320, y: 800, label: "diffs" },
+  ];
+
+  // edges (subset — neural-map look without overcrowding)
+  const edges: Array<[number, number]> = [
+    [0, 1], [1, 2], [2, 3], [3, 4], [4, 5], [5, 6], [6, 7], [7, 0],
+    [0, 4], [2, 6], [1, 5], [3, 7],
+  ];
+
+  return (
+    <AbsoluteFill style={{ pointerEvents: "none" }}>
+      {/* Edges — SVG, drawing in via strokeDashoffset */}
+      <svg
+        style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}
+        viewBox="0 0 1080 1920"
+        preserveAspectRatio="none"
+      >
+        {edges.map(([a, b], i) => {
+          const A = nodes[a];
+          const B = nodes[b];
+          const len = Math.hypot(B.x - A.x, B.y - A.y);
+          const drawIn = interpolate(
+            local,
+            [10 + i * 5, 40 + i * 5],
+            [len, 0],
+            { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: ease.expoOut },
+          );
+          const op = interpolate(local, [10 + i * 5, 40 + i * 5], [0, 0.6], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          });
+          return (
+            <line
+              key={i}
+              x1={A.x}
+              y1={A.y}
+              x2={B.x}
+              y2={B.y}
+              stroke={i % 2 === 0 ? C.iriViolet : C.iriCyan}
+              strokeWidth={2}
+              strokeDasharray={len}
+              strokeDashoffset={drawIn}
+              opacity={op}
+            />
+          );
+        })}
+      </svg>
+
+      {/* Nodes — glass orbs with breathing pulse */}
+      {nodes.map((n, i) => {
+        const birth = i * 5;
+        const lo = Math.max(0, local - birth);
+        const intro = interpolate(lo, [0, 24], [0, 1], {
+          extrapolateRight: "clamp",
+          easing: ease.backOut,
+        });
+        const breath = (Math.sin(local * 0.06 + i * 0.7) + 1) * 0.5;
+        const scale = intro * (1 + breath * 0.08);
+        return (
+          <div
+            key={i}
+            style={{
+              position: "absolute",
+              left: n.x,
+              top: n.y,
+              transform: `translate(-50%,-50%) scale(${scale})`,
+              willChange: "transform",
+              opacity: intro,
+            }}
+          >
+            <div
+              style={{
+                ...glassBase,
+                borderRadius: 9999,
+                width: 110,
+                height: 110,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontFamily: MONO,
+                fontSize: 16,
+                fontWeight: 600,
+                color: C.ink,
+                boxShadow: [
+                  "0 12px 30px -8px rgba(120,100,180,0.25)",
+                  "inset 0 1.5px 0 rgba(255,255,255,0.95)",
+                  `0 0 ${14 + breath * 14}px ${i % 3 === 0 ? JC.rust : i % 2 === 0 ? C.iriViolet : C.iriCyan}55`,
+                ].join(", "),
+              }}
+            >
+              {n.label}
+            </div>
+          </div>
+        );
+      })}
+
+      {/* Center heart — "memory" core */}
+      <div
+        style={{
+          position: "absolute",
+          left: 540,
+          top: 970,
+          transform: "translate(-50%,-50%)",
+        }}
+      >
+        <div
+          style={{
+            position: "relative",
+            width: 140,
+            height: 140,
+          }}
+        >
+          <IridescentRing size={140} thickness={3} speed={0.8} borderRadius={9999} />
+          <div
+            style={{
+              position: "absolute",
+              inset: 4,
+              borderRadius: "50%",
+              background: `radial-gradient(circle at 35% 35%, ${JC.rustSoft} 0%, ${JC.rust} 60%, ${JC.rustDeep} 100%)`,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "#fff",
+              fontFamily: MONO,
+              fontSize: 14,
+              fontWeight: 700,
+              letterSpacing: "0.2em",
+              textTransform: "uppercase",
+              boxShadow: `0 0 32px ${JC.rust}88`,
+            }}
+          >
+            mem
+          </div>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// AGENT SWARM DIAGRAM (Scene 7)
+// Coordinator orb center + 6 worker orbs spawning outward + connections
+// ═══════════════════════════════════════════════════════════════
+const AgentSwarmDiagram: React.FC<{ startFrame: number; fps: number }> = ({
+  startFrame,
+  fps,
+}) => {
+  const frame = useCurrentFrame();
+  const local = Math.max(0, frame - startFrame);
+
+  // 6 workers in circular orbit
+  const workers = Array.from({ length: 6 }, (_, i) => {
+    const angle = (i / 6) * Math.PI * 2 - Math.PI / 2;
+    return {
+      angle,
+      orbit: 360,
+      birth: 18 + i * 14,
+      label: `agent ${i + 1}`,
+    };
+  });
+
+  // Centralize on viewport center: x=540, y=960 (true center of 1080x1920)
+  const CX = 540;
+  const CY = 960;
+  const ORBIT = 320;
+  const WORKER_SIZE = 100;
+  const COORD_SIZE = 200;
+
+  return (
+    <AbsoluteFill style={{ pointerEvents: "none" }}>
+      {/* Orbit ring (faint, perfectly centered) */}
+      <div
+        style={{
+          position: "absolute",
+          left: CX - ORBIT,
+          top: CY - ORBIT,
+          width: ORBIT * 2,
+          height: ORBIT * 2,
+          border: `1px dashed ${C.hairline}`,
+          borderRadius: "50%",
+          opacity: interpolate(local, [10, 30], [0, 0.6], { extrapolateRight: "clamp" }),
+        }}
+      />
+
+      {/* Connection lines via SVG positioned at viewport center */}
+      <svg
+        style={{
+          position: "absolute",
+          left: 0,
+          top: 0,
+          width: "100%",
+          height: "100%",
+          pointerEvents: "none",
+        }}
+        viewBox="0 0 1080 1920"
+        preserveAspectRatio="none"
+      >
+        <defs>
+          <linearGradient id="conn-grad" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stopColor={JC.rust} stopOpacity="0.9" />
+            <stop offset="100%" stopColor={C.iriCyan} stopOpacity="0.6" />
+          </linearGradient>
+        </defs>
+        {workers.map((w, i) => {
+          const lo = Math.max(0, local - w.birth);
+          const draw = interpolate(lo, [0, 24], [0, 1], {
+            extrapolateRight: "clamp",
+            easing: ease.expoOut,
+          });
+          const x2 = CX + Math.cos(w.angle) * ORBIT * draw;
+          const y2 = CY + Math.sin(w.angle) * ORBIT * draw;
+          const dashCycle = (local * 1.4 + i * 5) % 24;
+          return (
+            <line
+              key={i}
+              x1={CX}
+              y1={CY}
+              x2={x2}
+              y2={y2}
+              stroke="url(#conn-grad)"
+              strokeWidth={2.5}
+              strokeDasharray="12 6"
+              strokeDashoffset={-dashCycle}
+              opacity={draw * 0.85}
+            />
+          );
+        })}
+      </svg>
+
+      {/* Workers — glass orbs spawn outward via spring, centered around (CX, CY) */}
+      {workers.map((w, i) => {
+        const lo = Math.max(0, local - w.birth);
+        const sp = spring({
+          frame: lo,
+          fps,
+          from: 0,
+          to: 1,
+          config: { damping: 14, stiffness: 95, mass: 0.7 },
+        });
+        const x = CX + Math.cos(w.angle) * ORBIT * sp;
+        const y = CY + Math.sin(w.angle) * ORBIT * sp;
+        const breath = (Math.sin(local * 0.1 + i * 1.1) + 1) * 0.5;
+        return (
+          <div
+            key={i}
+            style={{
+              position: "absolute",
+              left: x - WORKER_SIZE / 2,
+              top: y - WORKER_SIZE / 2,
+              width: WORKER_SIZE,
+              height: WORKER_SIZE,
+              transform: `scale(${sp})`,
+              transformOrigin: "center",
+              willChange: "transform",
+            }}
+          >
+            <div
+              style={{
+                ...glassBase,
+                borderRadius: "50%",
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontFamily: MONO,
+                fontSize: 14,
+                fontWeight: 600,
+                color: C.ink,
+                boxShadow: [
+                  "0 12px 24px -6px rgba(120,100,180,0.25)",
+                  "inset 0 1.5px 0 rgba(255,255,255,0.95)",
+                  `0 0 ${10 + breath * 14}px ${C.iriCyan}55`,
+                ].join(", "),
+              }}
+            >
+              {w.label}
+            </div>
+          </div>
+        );
+      })}
+
+      {/* Inner sonar pulses — centered on (CX, CY) */}
+      {[0, 30, 60].map((p, i) => {
+        const cycle = (local + p) % 90;
+        const sc = interpolate(cycle, [0, 90], [0.6, 2.0], { easing: ease.expoOut });
+        const op = interpolate(cycle, [0, 30, 90], [0, 0.45, 0]);
+        return (
+          <div
+            key={i}
+            style={{
+              position: "absolute",
+              left: CX - COORD_SIZE / 2,
+              top: CY - COORD_SIZE / 2,
+              width: COORD_SIZE,
+              height: COORD_SIZE,
+              borderRadius: "50%",
+              border: `2px solid ${JC.rust}`,
+              transform: `scale(${sc})`,
+              transformOrigin: "center",
+              opacity: op,
+            }}
+          />
+        );
+      })}
+
+      {/* Coordinator orb — exact viewport-centered */}
+      <div
+        style={{
+          position: "absolute",
+          left: CX - COORD_SIZE / 2,
+          top: CY - COORD_SIZE / 2,
+          width: COORD_SIZE,
+          height: COORD_SIZE,
+        }}
+      >
+        <IridescentRing size={COORD_SIZE} thickness={4} speed={1.4} borderRadius={9999} />
+        <div
+          style={{
+            position: "absolute",
+            inset: 4,
+            borderRadius: "50%",
+            background: `radial-gradient(circle at 35% 30%, #fff 0%, ${JC.rustSoft} 30%, ${JC.rust} 80%)`,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            fontFamily: MONO,
+            color: "#fff",
+            boxShadow: `0 12px 40px ${JC.rust}80`,
+          }}
+        >
+          <div style={{ fontSize: 12, letterSpacing: "0.22em", opacity: 0.85, textTransform: "uppercase" }}>
+            coordinator
+          </div>
+          <div style={{ fontSize: 24, fontWeight: 700, marginTop: 4 }}>0</div>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// COMMENT MORPH CHIP (Scene 8)
+// Speech bubble with "AI" → morphs into DM envelope
+// ═══════════════════════════════════════════════════════════════
+const CommentMorphChip: React.FC<{ startFrame: number }> = ({ startFrame }) => {
+  const frame = useCurrentFrame();
+  const local = Math.max(0, frame - startFrame);
+
+  // Phase 1: speech-bubble scale-pop (0-30)
+  // Phase 2: settle (30-90)
+  // Phase 3: crossfade to envelope (90-120)
+  // Phase 4: envelope holds (120+)
+  const popIn = interpolate(local, [0, 24], [0, 1], {
+    extrapolateRight: "clamp",
+    easing: ease.backOut,
+  });
+  const bubbleOpacity = interpolate(local, [0, 24, 90, 110], [0, 1, 1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const envelopeOpacity = interpolate(local, [90, 110], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const envelopeScale = interpolate(local, [90, 110], [0.7, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: ease.backOut,
+  });
+
+  return (
+    <div style={{ position: "relative", width: 280, height: 220 }}>
+      {/* Bubble */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          opacity: bubbleOpacity,
+          transform: `scale(${popIn})`,
+          willChange: "transform, opacity",
+        }}
+      >
+        <svg viewBox="0 0 280 220" style={{ width: "100%", height: "100%", overflow: "visible" }}>
+          <defs>
+            <linearGradient id="bubble-fill" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stopColor="#FFFFFFE6" />
+              <stop offset="100%" stopColor="#FFFFFFB3" />
+            </linearGradient>
+          </defs>
+          <path
+            d="M 30 30 H 250 a 24 24 0 0 1 24 24 v 100 a 24 24 0 0 1 -24 24 H 130 l -36 36 v -36 H 30 a 24 24 0 0 1 -24 -24 V 54 a 24 24 0 0 1 24 -24 z"
+            fill="url(#bubble-fill)"
+            stroke={C.glassBorder}
+            strokeWidth={2}
+            style={{ filter: `drop-shadow(0 12px 32px ${C.iriViolet}55)` }}
+          />
+        </svg>
+        <div
+          style={{
+            position: "absolute",
+            top: 56,
+            left: 0,
+            right: 30,
+            textAlign: "center",
+            fontFamily: FONT,
+            fontSize: 84,
+            fontWeight: 800,
+            color: JC.rust,
+            letterSpacing: "-0.04em",
+            lineHeight: 1,
+          }}
+        >
+          AI
+        </div>
+      </div>
+
+      {/* Envelope (DM) */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          opacity: envelopeOpacity,
+          transform: `scale(${envelopeScale})`,
+          willChange: "transform, opacity",
+        }}
+      >
+        <svg viewBox="0 0 280 220" style={{ width: "100%", height: "100%", overflow: "visible" }}>
+          <defs>
+            <linearGradient id="env-fill" x1="0%" y1="0%" x2="100%" y2="100%">
+              <stop offset="0%" stopColor={JC.rust} />
+              <stop offset="100%" stopColor={JC.rustDeep} />
+            </linearGradient>
+          </defs>
+          <rect
+            x={20}
+            y={50}
+            width={240}
+            height={140}
+            rx={20}
+            fill="url(#env-fill)"
+            style={{ filter: `drop-shadow(0 16px 36px ${JC.rust}80)` }}
+          />
+          <path
+            d="M 20 60 L 140 140 L 260 60"
+            fill="none"
+            stroke="#fff"
+            strokeWidth={4}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <text
+            x={140}
+            y={172}
+            textAnchor="middle"
+            fontFamily={MONO}
+            fontSize={18}
+            fontWeight={600}
+            fill="#fff"
+            letterSpacing="0.18em"
+          >
+            DM SENT
+          </text>
+        </svg>
+      </div>
+    </div>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// CHROMATIC STREAK NUMBER — number with R/G/B channel offset
+// (used in Scene 4 corner re-callbacks)
+// ═══════════════════════════════════════════════════════════════
+const ChromaticStat: React.FC<{
+  text: string;
+  startFrame: number;
+  size: number;
+  color?: string;
+}> = ({ text, startFrame, size, color = C.ink }) => {
+  const frame = useCurrentFrame();
+  const local = Math.max(0, frame - startFrame);
+  const slide = interpolate(local, [0, 30], [120, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: ease.expoOut,
+  });
+  const op = interpolate(local, [0, 18], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const offset = interpolate(local, [0, 30], [10, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: ease.expoOut,
+  });
+  return (
+    <div style={{ position: "relative", opacity: op, transform: `translateX(${slide}px)` }}>
+      <span
+        style={{
+          position: "absolute",
+          left: -offset,
+          top: 0,
+          fontFamily: MONO,
+          fontSize: size,
+          fontWeight: 700,
+          color: "#FF3344",
+          mixBlendMode: "multiply",
+          opacity: 0.7,
+        }}
+      >
+        {text}
+      </span>
+      <span
+        style={{
+          position: "absolute",
+          left: offset,
+          top: 0,
+          fontFamily: MONO,
+          fontSize: size,
+          fontWeight: 700,
+          color: "#22DDFF",
+          mixBlendMode: "multiply",
+          opacity: 0.7,
+        }}
+      >
+        {text}
+      </span>
+      <span
+        style={{
+          position: "relative",
+          fontFamily: MONO,
+          fontSize: size,
+          fontWeight: 700,
+          color,
+        }}
+      >
+        {text}
+      </span>
+    </div>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 1 — HOOK (0–348, 11.6s)
+// VO: "63 times faster than Codex. 20 times more memory efficient
+//      than Claude Code. Built-in memory, parallel sessions, agent
+//      swarms... and it's completely free. Built by one guy."
+// ═══════════════════════════════════════════════════════════════
+const HookScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const local = frame - BEAT.hook;
+
+  // Beat-aligned reveals (timed against subtitle 1: 0-6.82s, 16 words)
+  // 63 → 0s, 20 → ~2.6s (frame 78), built-in memory chip → ~5.6s (frame 168),
+  // FREE → ~6.5s (frame 195), built by one guy → ~10.7s (frame 320)
+  const F_63 = 8;
+  const F_20 = 78;
+  const F_KEYWORDS = 168;
+  const F_FREE = 220;
+  const F_TAG = 320;
+
+  return (
+    <AbsoluteFill>
+      {/* Layer 1: Sonar rings */}
+      <SonarRings />
+
+      {/* Layer 2: Three light beams */}
+      <LightBeam delay={F_63 + 6} angle={-18} />
+      <LightBeam delay={F_20 + 6} angle={22} />
+      <LightBeam delay={F_KEYWORDS + 6} angle={-12} />
+
+      {/* Layer 3: Particle burst */}
+      <ParticleBurst />
+
+      {/* Layer 4: Floating code glyphs */}
+      <FloatingGlyphs startFrame={20} />
+
+      {/* Layer 6 — Stat counter "63×" */}
+      <div
+        style={{
+          position: "absolute",
+          left: 80,
+          top: 440,
+          opacity: interpolate(local, [F_63, F_63 + 12], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          transform: `translateY(${interpolate(local, [F_63, F_63 + 24], [40, 0], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+            easing: ease.expoOut,
+          })}px)`,
+        }}
+      >
+        <div style={{ display: "flex", alignItems: "baseline", gap: 12 }}>
+          <ScrambleText
+            text="63"
+            startFrame={F_63}
+            duration={20}
+            fontSize={240}
+            fontWeight={800}
+            fontFamily={MONO}
+            color={JC.rust}
+            letterSpacing="-0.06em"
+          />
+          <span
+            style={{
+              fontFamily: MONO,
+              fontSize: 120,
+              fontWeight: 600,
+              color: C.inkSoft,
+              letterSpacing: "-0.04em",
+            }}
+          >
+            ×
+          </span>
+        </div>
+        <div
+          style={{
+            fontFamily: MONO,
+            fontSize: 22,
+            fontWeight: 600,
+            color: C.inkMuted,
+            letterSpacing: "0.18em",
+            textTransform: "uppercase",
+            marginTop: 4,
+          }}
+        >
+          faster than codex
+        </div>
+      </div>
+
+      {/* Stat counter "20×" — slides in from right */}
+      <div
+        style={{
+          position: "absolute",
+          right: 60,
+          top: 800,
+          textAlign: "right",
+          opacity: interpolate(local, [F_20, F_20 + 14], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          transform: `translateX(${interpolate(local, [F_20, F_20 + 28], [80, 0], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+            easing: ease.expoOut,
+          })}px)`,
+        }}
+      >
+        <div style={{ display: "flex", alignItems: "baseline", gap: 12, justifyContent: "flex-end" }}>
+          <ScrambleText
+            text="20"
+            startFrame={F_20}
+            duration={20}
+            fontSize={220}
+            fontWeight={800}
+            fontFamily={MONO}
+            color={C.iriViolet}
+            letterSpacing="-0.06em"
+          />
+          <span
+            style={{
+              fontFamily: MONO,
+              fontSize: 110,
+              fontWeight: 600,
+              color: C.inkSoft,
+              letterSpacing: "-0.04em",
+            }}
+          >
+            ×
+          </span>
+        </div>
+        <div
+          style={{
+            fontFamily: MONO,
+            fontSize: 22,
+            fontWeight: 600,
+            color: C.inkMuted,
+            letterSpacing: "0.18em",
+            textTransform: "uppercase",
+            marginTop: 4,
+          }}
+        >
+          less ram than claude code
+        </div>
+      </div>
+
+      {/* Keyword chips reveal: MEMORY · PARALLEL · SWARMS */}
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 1100,
+          display: "flex",
+          flexWrap: "wrap",
+          gap: 12,
+          justifyContent: "center",
+          padding: "0 60px",
+        }}
+      >
+        {[
+          { label: "memory", color: C.iriCyan, delay: 0 },
+          { label: "parallel", color: C.iriViolet, delay: 16 },
+          { label: "swarms", color: JC.rust, delay: 32 },
+        ].map((k) => {
+          const lo = Math.max(0, local - (F_KEYWORDS + k.delay));
+          const sp = spring({
+            frame: lo,
+            fps,
+            from: 0,
+            to: 1,
+            config: { damping: 12, stiffness: 100 },
+          });
+          return (
+            <Chip
+              key={k.label}
+              dotColor={k.color}
+              style={{
+                opacity: sp,
+                transform: `scale(${0.6 + sp * 0.4})`,
+                fontSize: 22,
+              }}
+            >
+              {k.label}
+            </Chip>
+          );
+        })}
+      </div>
+
+      {/* Built by one guy tag */}
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 1430,
+          textAlign: "center",
+          opacity: interpolate(local, [F_TAG, F_TAG + 18], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          transform: `translateY(${interpolate(local, [F_TAG, F_TAG + 24], [20, 0], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+            easing: ease.expoOut,
+          })}px)`,
+        }}
+      >
+        <Chip dotColor={C.iriRose} style={{ fontSize: 18 }}>
+          built by one guy
+        </Chip>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 2 — INTRO (348–554, 6.9s)
+// VO: "Welcome back guys. The tool's called jcode...
+//      and once you see what it actually does, you might never
+//      go back to the others."
+// ═══════════════════════════════════════════════════════════════
+const IntroScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const local = frame - BEAT.intro;
+
+  // jcode logotype — letters scale-blur entry, stagger 4 frames
+  const letters = "jcode".split("");
+  const F_WELCOME = 0;
+  const F_LOGO = 30;
+  const F_SUBTITLE = 96;
+
+  // logo halo pulse (perpetual)
+  const haloPulse = (Math.sin(local * 0.06) + 1) * 0.5;
+
+  return (
+    <AbsoluteFill>
+      {/* Floating glyphs continue from hook */}
+      <FloatingGlyphs startFrame={-300} />
+
+      {/* "Welcome back" eyebrow */}
+      <div
+        style={{
+          position: "absolute",
+          top: 460,
+          left: 0,
+          right: 0,
+          display: "flex",
+          justifyContent: "center",
+          opacity: interpolate(local, [F_WELCOME, F_WELCOME + 18], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          transform: `translateY(${interpolate(
+            local,
+            [F_WELCOME, F_WELCOME + 24],
+            [16, 0],
+            { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: ease.expoOut },
+          )}px)`,
+        }}
+      >
+        <EyebrowPill>Welcome back · the tool</EyebrowPill>
+      </div>
+
+      {/* jcode logotype — center */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        {/* halo behind logo */}
+        <div
+          style={{
+            position: "absolute",
+            width: 900,
+            height: 320,
+            borderRadius: "50%",
+            background: `radial-gradient(ellipse at center, ${JC.rust}40 0%, ${JC.rust}10 40%, transparent 70%)`,
+            filter: "blur(40px)",
+            opacity: 0.4 + haloPulse * 0.4,
+          }}
+        />
+        <div
+          style={{
+            position: "relative",
+            display: "flex",
+            gap: "0.04em",
+            fontFamily: FONT,
+            fontSize: 280,
+            fontWeight: 800,
+            letterSpacing: "-0.06em",
+            lineHeight: 1,
+            color: C.ink,
+          }}
+        >
+          {letters.map((ch, i) => {
+            const lo = Math.max(0, local - (F_LOGO + i * 4));
+            const op = interpolate(lo, [0, 22], [0, 1], {
+              extrapolateRight: "clamp",
+              easing: ease.expoOut,
+            });
+            const sc = interpolate(lo, [0, 22], [0.4, 1], {
+              extrapolateRight: "clamp",
+              easing: ease.backOut,
+            });
+            const blur = interpolate(lo, [0, 22], [16, 0], { extrapolateRight: "clamp" });
+            return (
+              <span
+                key={i}
+                style={{
+                  display: "inline-block",
+                  opacity: op,
+                  transform: `scale(${sc})`,
+                  filter: `blur(${blur}px)`,
+                  willChange: "transform, opacity, filter",
+                  // last char gets rust accent
+                  color: i === 0 ? JC.rust : C.ink,
+                }}
+              >
+                {ch}
+              </span>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Subtitle */}
+      <div
+        style={{
+          position: "absolute",
+          left: 80,
+          right: 80,
+          top: 1180,
+          textAlign: "center",
+        }}
+      >
+        <StaggeredWords
+          text="the harness you might never go back from"
+          startFrame={BEAT.intro + F_SUBTITLE}
+          fontSize={42}
+          fontWeight={500}
+          color={C.inkSoft}
+          align="center"
+          perWordDelay={3}
+          duration={20}
+          letterSpacing="-0.02em"
+          highlight="harness"
+          highlightColor={JC.rust}
+        />
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 3 — HARNESS EXPLAIN (554–907, 11.8s)
+// VO: "So here's the thing. Tools like Claude Code and Codex CLI
+//      have a layer sitting between you and the AI model. It handles
+//      your prompts, your tools, your memory, your sessions.
+//      It's called a harness."
+// ═══════════════════════════════════════════════════════════════
+const HarnessScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const local = frame - BEAT.harness;
+
+  return (
+    <AbsoluteFill>
+      <FloatingGlyphs startFrame={-500} />
+
+      {/* eyebrow */}
+      <div
+        style={{
+          position: "absolute",
+          top: 320,
+          left: 0,
+          right: 0,
+          display: "flex",
+          justifyContent: "center",
+          opacity: interpolate(local, [0, 18], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <EyebrowPill>How they work today</EyebrowPill>
+      </div>
+
+      {/* Diagram */}
+      <HarnessDiagram startFrame={BEAT.harness + 12} />
+
+      {/* "It's called a harness" payoff line — appears late in scene */}
+      <div
+        style={{
+          position: "absolute",
+          left: 80,
+          right: 80,
+          top: 1500,
+          textAlign: "center",
+          opacity: interpolate(local, [240, 270], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          transform: `translateY(${interpolate(local, [240, 270], [16, 0], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+            easing: ease.expoOut,
+          })}px)`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 38,
+            fontWeight: 600,
+            color: C.inkSoft,
+            letterSpacing: "-0.02em",
+          }}
+        >
+          it&apos;s called <span style={{ color: JC.rust, fontWeight: 800 }}>a harness</span>.
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 4 — RUST REBUILD (907–1154, 8.2s)
+// VO: "And jcode just rebuilt that entire harness from scratch in
+//      Rust. [exhale] Which is exactly why those numbers are even
+//      possible."
+// ═══════════════════════════════════════════════════════════════
+const RustRebuildScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const local = frame - BEAT.rust;
+
+  // Particles converging inward (reverse of ParticleBurst)
+  const ConvergingParticles = () => {
+    const particles = Array.from({ length: 60 }, (_, i) => {
+      const angle = (i / 60) * Math.PI * 2 + (i * 0.31);
+      const distance = 200 + (i % 6) * 90;
+      const size = 4 + (i % 4) * 3;
+      const colorIdx = i % 4;
+      const color = [JC.rust, JC.rustSoft, C.iriCyan, C.iriViolet][colorIdx];
+      const delay = (i * 0.6) % 18;
+      return { angle, distance, size, color, delay };
+    });
+    return (
+      <AbsoluteFill style={{ alignItems: "center", justifyContent: "center" }}>
+        {particles.map((p, i) => {
+          const lo = Math.max(0, local - p.delay);
+          const conv = interpolate(lo, [0, 60], [1, 0], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+            easing: ease.expoOut,
+          });
+          const x = Math.cos(p.angle) * p.distance * conv;
+          const y = Math.sin(p.angle) * p.distance * conv;
+          const op = interpolate(lo, [0, 12, 60, 90], [0, 0.85, 0.4, 0]);
+          return (
+            <div
+              key={i}
+              style={{
+                position: "absolute",
+                width: p.size,
+                height: p.size,
+                borderRadius: "50%",
+                background: p.color,
+                boxShadow: `0 0 ${p.size * 2}px ${p.color}`,
+                transform: `translate(${x}px, ${y}px)`,
+                opacity: op,
+                willChange: "transform, opacity",
+              }}
+            />
+          );
+        })}
+      </AbsoluteFill>
+    );
+  };
+
+  const F_EYEBROW = 0;
+  const F_RUST = 30;
+  const F_HEADLINE = 76;
+  const F_STATS = 138;
+  const F_TAG = 188;
+
+  const headlineWords = ["rebuilt", "from", "scratch"];
+
+  return (
+    <AbsoluteFill>
+      <ConvergingParticles />
+
+      {/* Eyebrow */}
+      <div
+        style={{
+          position: "absolute",
+          top: 340,
+          left: 0,
+          right: 0,
+          display: "flex",
+          justifyContent: "center",
+          opacity: interpolate(local, [F_EYEBROW, F_EYEBROW + 18], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          transform: `translateY(${interpolate(local, [F_EYEBROW, F_EYEBROW + 24], [12, 0], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+            easing: ease.expoOut,
+          })}px)`,
+        }}
+      >
+        <EyebrowPill>rebuilt in rust</EyebrowPill>
+      </div>
+
+      {/* Rust logo — center */}
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 500,
+          display: "flex",
+          justifyContent: "center",
+        }}
+      >
+        {(() => {
+          const lo = Math.max(0, local - F_RUST);
+          const sp = spring({
+            frame: lo,
+            fps,
+            from: 0,
+            to: 1,
+            config: { damping: 12, stiffness: 90, mass: 0.9 },
+          });
+          const rot = interpolate(lo, [0, 50], [-90, 0], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+            easing: ease.expoOut,
+          });
+          const breath = (Math.sin(local * 0.05) + 1) * 0.5;
+          return (
+            <div
+              style={{
+                position: "relative",
+                width: 280,
+                height: 280,
+                opacity: sp,
+                transform: `scale(${sp}) rotate(${rot}deg)`,
+                willChange: "transform, opacity",
+              }}
+            >
+              <div
+                style={{
+                  position: "absolute",
+                  inset: -50,
+                  borderRadius: "50%",
+                  background: `radial-gradient(circle, ${JC.rust}55 0%, ${JC.rust}18 32%, transparent 70%)`,
+                  filter: "blur(40px)",
+                  opacity: 0.6 + breath * 0.4,
+                }}
+              />
+              <Img
+                src={staticFile("captures/your-asset.png" /* REFERENCE-STRIP */)}
+                style={{ width: "100%", height: "100%", position: "relative" }}
+              />
+            </div>
+          );
+        })()}
+      </div>
+
+      {/* Headline — per-WORD entrance, single line via nowrap */}
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 920,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "baseline",
+          gap: "0.32em",
+          whiteSpace: "nowrap",
+          fontFamily: FONT,
+          fontSize: 92,
+          fontWeight: 800,
+          letterSpacing: "-0.045em",
+          lineHeight: 1,
+          color: C.ink,
+        }}
+      >
+        {headlineWords.map((w, i) => {
+          const lo = Math.max(0, local - (F_HEADLINE + i * 8));
+          const op = interpolate(lo, [0, 22], [0, 1], { extrapolateRight: "clamp" });
+          const y = interpolate(lo, [0, 28], [36, 0], {
+            extrapolateRight: "clamp",
+            easing: ease.expoOut,
+          });
+          const blur = interpolate(lo, [0, 22], [10, 0], { extrapolateRight: "clamp" });
+          const isRust = w === "scratch";
+          return (
+            <span
+              key={i}
+              style={{
+                display: "inline-block",
+                opacity: op,
+                transform: `translateY(${y}px)`,
+                filter: `blur(${blur}px)`,
+                color: isRust ? JC.rust : C.ink,
+                willChange: "transform, opacity, filter",
+              }}
+            >
+              {w}
+            </span>
+          );
+        })}
+      </div>
+
+      {/* Speed-callback row: 63x faster + 20x less RAM (visual proof of "those numbers") */}
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 1080,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: 56,
+          opacity: interpolate(local, [F_STATS, F_STATS + 24], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          transform: `translateY(${interpolate(local, [F_STATS, F_STATS + 28], [20, 0], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+            easing: ease.expoOut,
+          })}px)`,
+        }}
+      >
+        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
+          <div style={{ fontFamily: MONO, fontSize: 110, fontWeight: 800, color: JC.rust, letterSpacing: "-0.06em", lineHeight: 1 }}>63×</div>
+          <div style={{ fontFamily: MONO, fontSize: 18, fontWeight: 600, color: C.inkMuted, letterSpacing: "0.18em", textTransform: "uppercase" }}>faster</div>
+        </div>
+        <div style={{ width: 1, height: 90, background: C.hairline }} />
+        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
+          <div style={{ fontFamily: MONO, fontSize: 110, fontWeight: 800, color: C.iriViolet, letterSpacing: "-0.06em", lineHeight: 1 }}>20×</div>
+          <div style={{ fontFamily: MONO, fontSize: 18, fontWeight: 600, color: C.inkMuted, letterSpacing: "0.18em", textTransform: "uppercase" }}>less ram</div>
+        </div>
+      </div>
+
+      {/* Closing tag */}
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 1320,
+          display: "flex",
+          justifyContent: "center",
+          opacity: interpolate(local, [F_TAG, F_TAG + 24], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <Chip dotColor={JC.rust} style={{ fontSize: 14 }}>
+          why those numbers happen
+        </Chip>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 5 — MEMORY (1154–1463, 10.3s)
+// VO: "Now about that built-in memory system... zero extra setup.
+//      It just remembers stuff naturally, kinda like a human would.
+//      No more re-explaining your codebase every session."
+// ═══════════════════════════════════════════════════════════════
+const MemoryScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const local = frame - BEAT.memory;
+
+  return (
+    <AbsoluteFill>
+      {/* eyebrow */}
+      <div
+        style={{
+          position: "absolute",
+          top: 320,
+          left: 0,
+          right: 0,
+          display: "flex",
+          justifyContent: "center",
+          opacity: interpolate(local, [0, 18], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <EyebrowPill>built-in memory</EyebrowPill>
+      </div>
+
+      {/* "ZERO SETUP" badge */}
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 410,
+          display: "flex",
+          justifyContent: "center",
+        }}
+      >
+        {(() => {
+          const lo = Math.max(0, local - 30);
+          const sp = spring({
+            frame: lo,
+            fps,
+            from: 0,
+            to: 1,
+            config: { damping: 11, stiffness: 95 },
+          });
+          return (
+            <div
+              style={{
+                ...glassBase,
+                borderRadius: 9999,
+                padding: "16px 36px",
+                display: "flex",
+                alignItems: "center",
+                gap: 12,
+                opacity: sp,
+                transform: `scale(${0.6 + sp * 0.4})`,
+                fontFamily: FONT,
+                fontSize: 38,
+                fontWeight: 800,
+                color: JC.rust,
+                letterSpacing: "-0.02em",
+                boxShadow: [
+                  "0 16px 32px -8px rgba(229,90,26,0.25)",
+                  "inset 0 1.5px 0 rgba(255,255,255,0.95)",
+                ].join(", "),
+              }}
+            >
+              <div
+                style={{
+                  width: 10,
+                  height: 10,
+                  borderRadius: "50%",
+                  background: JC.rust,
+                  boxShadow: `0 0 14px ${JC.rust}`,
+                }}
+              />
+              ZERO SETUP
+            </div>
+          );
+        })()}
+      </div>
+
+      {/* Constellation */}
+      <MemoryConstellation startFrame={BEAT.memory + 50} />
+
+      {/* Quote-styled phrase below */}
+      <div
+        style={{
+          position: "absolute",
+          left: 80,
+          right: 80,
+          top: 1400,
+          textAlign: "center",
+        }}
+      >
+        <StaggeredWords
+          text="remembers your codebase, naturally."
+          startFrame={BEAT.memory + 180}
+          fontSize={40}
+          fontWeight={500}
+          color={C.inkSoft}
+          align="center"
+          perWordDelay={4}
+          duration={22}
+          letterSpacing="-0.02em"
+          highlight="naturally"
+          highlightColor={JC.rust}
+        />
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 6 — PARALLEL SESSIONS (1463–1660, 6.6s) — CLIP SCENE
+// VO: "Parallel sessions are native too. So you can run multiple
+//      agents side by side without melting your laptop."
+// Wrapped in <Sequence> at root so OffthreadVideo timing works.
+// useCurrentFrame() inside this scene returns LOCAL frames.
+// ═══════════════════════════════════════════════════════════════
+const ParallelScene: React.FC = () => {
+  const local = useCurrentFrame(); // LOCAL — Sequence.from = BEAT.parallel
+  const { fps } = useVideoConfig();
+
+  // Top frame entrance (jcode-repo)
+  const topSp = spring({
+    frame: local,
+    fps,
+    from: 0,
+    to: 1,
+    config: { damping: 14, stiffness: 100 },
+  });
+  // Bottom frame entrance (parallel-jscode), staggered
+  const botSp = spring({
+    frame: Math.max(0, local - 8),
+    fps,
+    from: 0,
+    to: 1,
+    config: { damping: 14, stiffness: 100 },
+  });
+
+  // Connecting line pulse
+  const linePulse = (Math.sin(local * 0.18) + 1) * 0.5;
+
+  return (
+    <AbsoluteFill>
+      {/* Header eyebrow */}
+      <div
+        style={{
+          position: "absolute",
+          top: 80,
+          left: 0,
+          right: 0,
+          display: "flex",
+          justifyContent: "center",
+        }}
+      >
+        <EyebrowPill>parallel sessions · native</EyebrowPill>
+      </div>
+
+      {/* Top frame: jcode-repo.mov */}
+      <div
+        style={{
+          position: "absolute",
+          top: 200,
+          left: 60,
+          width: 960,
+          height: 720,
+          borderRadius: 28,
+          overflow: "hidden",
+          ...glassBase,
+          opacity: topSp,
+          transform: `translateY(${(1 - topSp) * -40}px)`,
+          willChange: "transform, opacity",
+        }}
+      >
+        {/* REFERENCE-STRIP: <OffthreadVideo> removed — bring your own clip */}
+        {/* glass tint overlay */}
+        <div
+          style={{
+            position: "absolute",
+            inset: 0,
+            background: "linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(120,100,180,0.08) 100%)",
+            pointerEvents: "none",
+          }}
+        />
+      </div>
+
+      {/* Caption: agent · 1 */}
+      <div
+        style={{
+          position: "absolute",
+          top: 940,
+          left: 60,
+          opacity: topSp,
+        }}
+      >
+        <Chip dotColor={C.iriCyan} style={{ fontSize: 16 }}>
+          agent · 1
+        </Chip>
+      </div>
+
+      {/* Connecting glow line */}
+      <div
+        style={{
+          position: "absolute",
+          top: 990,
+          left: 60,
+          width: 960,
+          height: 2,
+          background: `linear-gradient(90deg, ${C.iriCyan}, ${JC.rust}, ${C.iriViolet})`,
+          opacity: 0.3 + linePulse * 0.5,
+          boxShadow: `0 0 ${8 + linePulse * 14}px ${JC.rust}`,
+        }}
+      />
+
+      {/* "running 2 sessions in parallel" status */}
+      <div
+        style={{
+          position: "absolute",
+          top: 1010,
+          left: 0,
+          right: 0,
+          display: "flex",
+          justifyContent: "center",
+          opacity: interpolate(local, [12, 28], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <div
+          style={{
+            ...glassBase,
+            borderRadius: 9999,
+            padding: "8px 18px",
+            fontFamily: MONO,
+            fontSize: 14,
+            fontWeight: 600,
+            color: JC.rust,
+            letterSpacing: "0.18em",
+            textTransform: "uppercase",
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+          }}
+        >
+          <div
+            style={{
+              width: 8,
+              height: 8,
+              borderRadius: "50%",
+              background: JC.rust,
+              boxShadow: `0 0 10px ${JC.rust}`,
+            }}
+          />
+          2 sessions · 0ms sync
+        </div>
+      </div>
+
+      {/* Bottom frame: parallel-jscode.mp4 */}
+      <div
+        style={{
+          position: "absolute",
+          top: 1060,
+          left: 60,
+          width: 960,
+          height: 720,
+          borderRadius: 28,
+          overflow: "hidden",
+          ...glassBase,
+          opacity: botSp,
+          transform: `translateY(${(1 - botSp) * 40}px)`,
+          willChange: "transform, opacity",
+        }}
+      >
+        {/* REFERENCE-STRIP: <OffthreadVideo> removed — bring your own clip */}
+        <div
+          style={{
+            position: "absolute",
+            inset: 0,
+            background: "linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(229,90,26,0.08) 100%)",
+            pointerEvents: "none",
+          }}
+        />
+      </div>
+
+      {/* Caption: agent · 2 */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: 80,
+          right: 60,
+          opacity: botSp,
+        }}
+      >
+        <Chip dotColor={JC.rust} style={{ fontSize: 16 }}>
+          agent · 2
+        </Chip>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 7 — SWARMS (1660–1995, 11.2s)
+// VO: "And the craziest part? Agents can spawn their own teammates.
+//      One becomes the coordinator, the others become workers...
+//      and they all collab on the same codebase, in real time."
+// ═══════════════════════════════════════════════════════════════
+const SwarmsScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const local = frame - BEAT.swarms;
+
+  return (
+    <AbsoluteFill>
+      {/* eyebrow */}
+      <div
+        style={{
+          position: "absolute",
+          top: 320,
+          left: 0,
+          right: 0,
+          display: "flex",
+          justifyContent: "center",
+          opacity: interpolate(local, [0, 18], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <EyebrowPill>agents spawn agents</EyebrowPill>
+      </div>
+
+      {/* Headline */}
+      <div
+        style={{
+          position: "absolute",
+          left: 80,
+          right: 80,
+          top: 410,
+          textAlign: "center",
+        }}
+      >
+        <StaggeredWords
+          text="agents that spawn teammates"
+          startFrame={BEAT.swarms + 6}
+          fontSize={62}
+          fontWeight={800}
+          color={C.ink}
+          align="center"
+          perWordDelay={4}
+          duration={22}
+          letterSpacing="-0.04em"
+          highlight="spawn"
+          highlightColor={JC.rust}
+        />
+      </div>
+
+      {/* Swarm diagram */}
+      <AgentSwarmDiagram startFrame={BEAT.swarms + 60} fps={fps} />
+
+      {/* Bottom row of role chips */}
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 1480,
+          display: "flex",
+          justifyContent: "center",
+          gap: 16,
+          opacity: interpolate(local, [200, 230], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <Chip dotColor={JC.rust}>1 coordinator</Chip>
+        <Chip dotColor={C.iriCyan}>n workers</Chip>
+        <Chip dotColor={C.iriViolet}>shared codebase</Chip>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 8 — CTA (1995–2164, 5.6s)
+// VO: "If you want the repo link, just comment 'AI' below and
+//      I'll slide it straight into your DMs"
+// ═══════════════════════════════════════════════════════════════
+const CTAScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const local = frame - BEAT.cta;
+
+  return (
+    <AbsoluteFill>
+      {/* Sonar rings continue at heightened intensity */}
+      <SonarRings />
+
+      {/* Particle burst kick at scene start */}
+      <ParticleBurst />
+
+      {/* Eyebrow */}
+      <div
+        style={{
+          position: "absolute",
+          top: 380,
+          left: 0,
+          right: 0,
+          display: "flex",
+          justifyContent: "center",
+          opacity: interpolate(local, [0, 18], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <EyebrowPill>want the repo?</EyebrowPill>
+      </div>
+
+      {/* Big "COMMENT 'AI'" headline with iridescent fill */}
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 480,
+          textAlign: "center",
+          fontFamily: FONT,
+          fontWeight: 800,
+          letterSpacing: "-0.04em",
+          lineHeight: 1.0,
+          opacity: interpolate(local, [10, 36], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          transform: `translateY(${interpolate(local, [10, 36], [30, 0], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+            easing: ease.expoOut,
+          })}px)`,
+        }}
+      >
+        <div style={{ fontSize: 72, color: C.ink }}>comment</div>
+        <div
+          style={{
+            fontSize: 220,
+            background: `linear-gradient(90deg, ${C.iriCyan}, ${JC.rust}, ${C.iriViolet})`,
+            WebkitBackgroundClip: "text",
+            WebkitTextFillColor: "transparent",
+            backgroundClip: "text",
+            color: "transparent",
+            marginTop: -10,
+          }}
+        >
+          &quot;AI&quot;
+        </div>
+      </div>
+
+      {/* Comment → DM morph chip, center */}
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 950,
+          display: "flex",
+          justifyContent: "center",
+        }}
+      >
+        <CommentMorphChip startFrame={BEAT.cta + 40} />
+      </div>
+
+      {/* "and i'll DM you" caption */}
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 1240,
+          textAlign: "center",
+          fontFamily: FONT,
+          fontSize: 36,
+          fontWeight: 500,
+          color: C.inkSoft,
+          letterSpacing: "-0.02em",
+          opacity: interpolate(local, [80, 110], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        i&apos;ll slide it straight into your DMs
+      </div>
+
+      {/* Bottom logo lockup */}
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 1380,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 12,
+          opacity: interpolate(local, [100, 130], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 100,
+            fontWeight: 800,
+            letterSpacing: "-0.06em",
+            color: C.ink,
+          }}
+        >
+          <span style={{ color: JC.rust }}>j</span>code
+        </div>
+        <Chip dotColor={JC.rust} style={{ fontSize: 14 }}>
+          free · open source
+        </Chip>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// MAIN COMPOSITION
+// ═══════════════════════════════════════════════════════════════
+export const JcodeReel: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { width, height } = useVideoConfig();
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: `radial-gradient(ellipse at 50% 30%, ${C.bgWarm} 0%, ${C.bg} 50%, ${C.bgCool} 100%)`,
+        width,
+        height,
+        overflow: "hidden",
+      }}
+    >
+      {/* === Persistent overlays (run all 72s) === */}
+      <CausticBlobs />
+      <HairlineGrid opacity={0.04} />
+      <FilmGrain />
+
+      {/* === Scenes (conditional render at root → useCurrentFrame() returns global) === */}
+      {frame >= BEAT.hook && frame < BEAT.intro && <HookScene />}
+      {frame >= BEAT.intro && frame < BEAT.harness && <IntroScene />}
+      {frame >= BEAT.harness && frame < BEAT.rust && <HarnessScene />}
+      {frame >= BEAT.rust && frame < BEAT.memory && <RustRebuildScene />}
+      {frame >= BEAT.memory && frame < BEAT.parallel && <MemoryScene />}
+      {frame >= BEAT.swarms && frame < BEAT.cta && <SwarmsScene />}
+      {frame >= BEAT.cta && frame < BEAT.end && <CTAScene />}
+
+      {/* === Parallel scene wrapped in Sequence so OffthreadVideo timing works
+             (per memory: useCurrentFrame() inside is LOCAL) === */}
+      <Sequence from={BEAT.parallel} durationInFrames={BEAT.swarms - BEAT.parallel}>
+        <ParallelScene />
+      </Sequence>
+
+      {/* === Vignette === */}
+      <AbsoluteFill
+        style={{
+          background:
+            "radial-gradient(ellipse at center, transparent 50%, rgba(14,14,18,0.18) 100%)",
+          pointerEvents: "none",
+        }}
+      />
+
+      {/* === Audio === */}
+      {/* REFERENCE-STRIP: voiceover tag removed — bring your own voiceover */}
+    </AbsoluteFill>
+  );
+};