@devinilabs/reelstack 1.2.0

package/reference/dark/notebooklm.tsx

@@ -0,0 +1,2316 @@
+/**
+ * REFERENCE — NotebookLMReel  (Family: dark)
+ *
+ * Canonical example of the dark family's motion vocabulary, frame-locked
+ * BEAT structure, and scene choreography. Bundled with ReelStack v1.1.1+
+ * for STUDY and pattern adaptation.
+ *
+ * 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/NotebookLMReel.tsx
+ * Bundled at: 2026-05-08T18:50:39.534Z
+ */
+import {
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+  Easing,
+  AbsoluteFill,
+  Img,
+  Sequence,
+  staticFile,
+} from "remotion";
+import { Audio } from "@remotion/media";
+import { gsap } from "gsap";
+import { ds } from "./designSystem";
+
+// ═══════════════════════════════════════════════════════════════
+// CONSTANTS
+// ═══════════════════════════════════════════════════════════════
+
+const FONT = ds.font.sans;
+const MONO = ds.font.mono;
+
+// GSAP easing bridges (usable inside Remotion's interpolate)
+const e = {
+  expoOut: gsap.parseEase("expo.out"),
+  expoInOut: gsap.parseEase("expo.inOut"),
+  power4Out: gsap.parseEase("power4.out"),
+  power3InOut: gsap.parseEase("power3.inOut"),
+  backOut: gsap.parseEase("back.out(1.8)"),
+  backIn: gsap.parseEase("back.in(1.5)"),
+  elasticOut: gsap.parseEase("elastic.out(1, 0.45)"),
+  circOut: gsap.parseEase("circ.out"),
+};
+
+// Audio is 55.84s. Reel total = 56s = 1680 frames at 30fps
+// Scene timeline (seconds) — aligned to the voiceover rhythm
+const SEGS = [
+  { s: 0,    e: 3.6,  id: "Hook" },       // "99% of Claude users don't know this exists"
+  { s: 3.4,  e: 7.2,  id: "Gift" },       // "gave Claude infinite memory for zero tokens"
+  { s: 7.0,  e: 13.2, id: "Problem" },    // "every new chat starts from zero, burning tokens"
+  { s: 13.0, e: 19.0, id: "Connect" },    // "connect Claude to NotebookLM"
+  { s: 18.8, e: 22.8, id: "SecondBrain" },// "second brain that never forgets"
+  { s: 22.6, e: 28.8, id: "Benefits1" },  // "persistent memory, lower token costs"
+  { s: 28.6, e: 35.2, id: "Benefits2" },  // "infographics, videos, deep research"
+  { s: 35.0, e: 41.8, id: "Wrapup" },     // "wrap-up skill stores the whole convo"
+  { s: 41.6, e: 47.6, id: "Semantic" },   // "semantic search pulls what it needs"
+  { s: 47.4, e: 51.2, id: "Changes" },    // "this one setup changes everything"
+  { s: 51.0, e: 55.9, id: "CTA" },        // "Like, Follow, Comment AI"
+] as const;
+
+// Layout — Instagram safe zones: top ~15% & bottom ~22%
+const SAFE_TOP = 300;
+const SAFE_BOTTOM = 1500;
+const W = 1080;
+
+// Palette — dark Claude aesthetic + NotebookLM electric blue
+const C = {
+  bg: "#07070a",
+  bgSurface: "#0f0f14",
+  ink: "#f5f2ec",
+  ink2: "#a8a59d",
+  inkDim: "#6b6863",
+  claude: "#D4663A",
+  claudeGlow: "rgba(212,102,58,0.45)",
+  nlm: "#4F7DF3",             // NotebookLM signature blue
+  nlmGlow: "rgba(79,125,243,0.5)",
+  gold: "#F0C23A",
+  danger: "#E8483A",
+  success: "#3CCB7F",
+  line: "rgba(255,255,255,0.08)",
+  lineStrong: "rgba(255,255,255,0.18)",
+};
+
+// ═══════════════════════════════════════════════════════════════
+// UTILITIES
+// ═══════════════════════════════════════════════════════════════
+
+// Scene opacity helper — fade in / hold / fade out
+const so = (
+  frame: number,
+  fps: number,
+  startS: number,
+  endS: number,
+  fadeIn = 0.35,
+  fadeOut = 0.45,
+) =>
+  interpolate(
+    frame,
+    [startS * fps, (startS + fadeIn) * fps, (endS - fadeOut) * fps, endS * fps],
+    [0, 1, 1, 0],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
+  );
+
+// Local frame since scene start, never negative
+const lf = (frame: number, fps: number, startSec: number) =>
+  Math.max(0, frame - startSec * fps);
+
+// Tween helper using a GSAP ease — maps localFrame into output range
+const tween = (
+  localFrame: number,
+  fps: number,
+  durationSec: number,
+  from: number,
+  to: number,
+  ease: (t: number) => number = e.expoOut,
+  delaySec = 0,
+) => {
+  const start = delaySec * fps;
+  const end = start + durationSec * fps;
+  return interpolate(localFrame, [start, end], [from, to], {
+    easing: ease,
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+};
+
+interface SP {
+  frame: number;
+  fps: number;
+}
+
+// ═══════════════════════════════════════════════════════════════
+// BACKGROUND — Deep space with subtle gradient breathing
+// ═══════════════════════════════════════════════════════════════
+
+const Background: React.FC<{ frame: number; accent: string }> = ({ frame, accent }) => {
+  const pulse = 0.3 + Math.sin(frame * 0.02) * 0.1;
+  const drift = (frame * 0.04) % 100;
+  return (
+    <AbsoluteFill style={{ background: C.bg, overflow: "hidden" }}>
+      {/* Vignette wash */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse at 50% 45%, ${C.bgSurface} 0%, ${C.bg} 65%, #000 100%)`,
+        }}
+      />
+      {/* Grid lines */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          backgroundImage: `linear-gradient(${C.line} 1px, transparent 1px), linear-gradient(90deg, ${C.line} 1px, transparent 1px)`,
+          backgroundSize: "80px 80px",
+          backgroundPosition: `0 ${drift}px`,
+          opacity: 0.5,
+          maskImage: `radial-gradient(ellipse at 50% 45%, #000 0%, transparent 70%)`,
+          WebkitMaskImage: `radial-gradient(ellipse at 50% 45%, #000 0%, transparent 70%)`,
+        }}
+      />
+      {/* Accent atmospheric glow */}
+      <div
+        style={{
+          position: "absolute",
+          width: 1400,
+          height: 1400,
+          top: 260,
+          left: -160,
+          borderRadius: "50%",
+          background: `radial-gradient(circle, ${accent} 0%, transparent 55%)`,
+          opacity: pulse,
+          filter: "blur(80px)",
+        }}
+      />
+      {/* Film grain */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          pointerEvents: "none",
+          opacity: 0.18,
+          mixBlendMode: "overlay",
+          backgroundImage:
+            "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>\")",
+        }}
+      />
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// REUSABLE ATOMS
+// ═══════════════════════════════════════════════════════════════
+
+const ClaudeGlyph: React.FC<{ size: number; glow?: number; rotate?: number }> = ({
+  size,
+  glow = 0.55,
+  rotate = 0,
+}) => (
+  <div style={{ position: "relative", width: size, height: size }}>
+    <div
+      style={{
+        position: "absolute",
+        inset: -size * 0.25,
+        borderRadius: "50%",
+        background: `radial-gradient(circle, rgba(212,102,58,${glow}) 0%, transparent 55%)`,
+        filter: "blur(24px)",
+      }}
+    />
+    <Img
+      src={staticFile("captures/your-asset.png" /* REFERENCE-STRIP */)}
+      style={{
+        width: size,
+        height: size,
+        display: "block",
+        transform: `rotate(${rotate}deg)`,
+        filter: "drop-shadow(0 14px 22px rgba(150,60,30,0.45))",
+      }}
+    />
+  </div>
+);
+
+// NotebookLM logo — recreated with the authentic stacked-arc mark
+const NotebookLMGlyph: React.FC<{ size: number; glow?: number; rings?: number }> = ({
+  size,
+  glow = 0.55,
+  rings = 3,
+}) => {
+  // Rings radii decreasing
+  const stroke = size * 0.09;
+  const step = (size / 2 - stroke) / rings;
+  const arcs = Array.from({ length: rings }, (_, i) => (size / 2 - stroke) - step * i);
+  return (
+    <div
+      style={{
+        position: "relative",
+        width: size,
+        height: size,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <div
+        style={{
+          position: "absolute",
+          inset: -size * 0.25,
+          borderRadius: "50%",
+          background: `radial-gradient(circle, rgba(79,125,243,${glow}) 0%, transparent 55%)`,
+          filter: "blur(26px)",
+        }}
+      />
+      <svg width={size} height={size} viewBox="0 0 100 100" style={{ position: "relative" }}>
+        <defs>
+          <linearGradient id="nlmG" x1="0" y1="0" x2="1" y2="1">
+            <stop offset="0" stopColor="#6B9AFF" />
+            <stop offset="0.5" stopColor="#4F7DF3" />
+            <stop offset="1" stopColor="#E84B6C" />
+          </linearGradient>
+        </defs>
+        {arcs.map((r, i) => (
+          <path
+            key={i}
+            d={`M ${50 - r} 72 A ${r} ${r} 0 0 1 ${50 + r} 72`}
+            fill="none"
+            stroke="url(#nlmG)"
+            strokeWidth={size * 0.055}
+            strokeLinecap="round"
+            opacity={0.35 + (i / rings) * 0.65}
+          />
+        ))}
+        {/* Base line suggesting a book spine */}
+        <rect
+          x="22"
+          y="74"
+          width="56"
+          height={size * 0.045}
+          rx="2"
+          fill="url(#nlmG)"
+        />
+      </svg>
+    </div>
+  );
+};
+
+// Minimal plug/wire that animates drawing
+const WireConnect: React.FC<{
+  from: [number, number];
+  to: [number, number];
+  progress: number;
+  color: string;
+  spark?: number;
+  width?: number;
+}> = ({ from, to, progress, color, spark = 0, width = 3 }) => {
+  const len = Math.hypot(to[0] - from[0], to[1] - from[1]);
+  const cx = (from[0] + to[0]) / 2;
+  const cy = (from[1] + to[1]) / 2 - 70;
+  return (
+    <svg
+      width={W}
+      height={1920}
+      viewBox={`0 0 ${W} 1920`}
+      style={{ position: "absolute", inset: 0, pointerEvents: "none" }}
+    >
+      <defs>
+        <linearGradient id="wireG" x1="0" y1="0" x2="1" y2="0">
+          <stop offset="0" stopColor={C.claude} />
+          <stop offset="1" stopColor={C.nlm} />
+        </linearGradient>
+        <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
+          <feGaussianBlur stdDeviation="4" result="b" />
+          <feMerge>
+            <feMergeNode in="b" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+      </defs>
+      <path
+        d={`M ${from[0]} ${from[1]} Q ${cx} ${cy} ${to[0]} ${to[1]}`}
+        fill="none"
+        stroke="url(#wireG)"
+        strokeWidth={width}
+        strokeLinecap="round"
+        strokeDasharray={len * 1.2}
+        strokeDashoffset={(1 - progress) * len * 1.2}
+        filter="url(#glow)"
+      />
+      {spark > 0 && (
+        <circle
+          cx={from[0] + (to[0] - from[0]) * progress}
+          cy={(from[1] + (to[1] - from[1])) / 2 - 70 * 4 * progress * (1 - progress)}
+          r={8 * spark}
+          fill={color}
+          opacity={spark}
+          filter="url(#glow)"
+        />
+      )}
+    </svg>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 1 — HOOK  (99% don't know this exists)
+// ═══════════════════════════════════════════════════════════════
+
+const Scene1Hook: React.FC<SP> = ({ frame, fps }) => {
+  const lof = lf(frame, fps, SEGS[0].s);
+  // Count up 0 → 99
+  const raw = tween(lof, fps, 1.4, 0, 99, e.expoOut, 0.15);
+  const pct = Math.round(raw);
+
+  const headY = tween(lof, fps, 0.9, 50, 0, e.expoOut, 0.1);
+  const headOp = tween(lof, fps, 0.6, 0, 1, e.expoOut, 0.05);
+
+  const subScale = tween(lof, fps, 0.9, 0.7, 1, e.backOut, 1.0);
+  const subOp = tween(lof, fps, 0.6, 0, 1, e.expoOut, 1.0);
+
+  const tagY = tween(lof, fps, 0.8, 30, 0, e.expoOut, 1.6);
+  const tagOp = tween(lof, fps, 0.6, 0, 1, e.expoOut, 1.6);
+
+  const highlightP = tween(lof, fps, 1.2, 0, 1, e.expoOut, 2.2);
+
+  return (
+    <AbsoluteFill
+      style={{
+        justifyContent: "center",
+        alignItems: "center",
+        paddingTop: SAFE_TOP + 80,
+        paddingBottom: 1920 - SAFE_BOTTOM + 80,
+      }}
+    >
+      {/* Small label */}
+      <div
+        style={{
+          transform: `translateY(${tagY}px)`,
+          opacity: tagOp,
+          padding: "10px 22px",
+          borderRadius: 9999,
+          border: `1px solid ${C.lineStrong}`,
+          background: "rgba(255,255,255,0.03)",
+          fontFamily: MONO,
+          fontSize: 24,
+          letterSpacing: "0.2em",
+          color: C.ink2,
+          textTransform: "uppercase",
+          marginBottom: 36,
+        }}
+      >
+        a secret most miss
+      </div>
+
+      {/* Giant 99% */}
+      <div
+        style={{
+          transform: `translateY(${headY}px)`,
+          opacity: headOp,
+          fontFamily: FONT,
+          color: C.ink,
+          fontSize: 440,
+          fontWeight: 700,
+          letterSpacing: "-0.06em",
+          lineHeight: 0.85,
+          textAlign: "center",
+          textShadow: `0 0 80px rgba(212,102,58,0.35)`,
+        }}
+      >
+        <span style={{ color: C.claude }}>{pct}</span>
+        <span style={{ color: C.ink, opacity: 0.85 }}>%</span>
+      </div>
+
+      {/* Subheader */}
+      <div
+        style={{
+          transform: `scale(${subScale})`,
+          opacity: subOp,
+          marginTop: 32,
+          fontFamily: FONT,
+          color: C.ink,
+          fontSize: 64,
+          fontWeight: 600,
+          letterSpacing: "-0.03em",
+          textAlign: "center",
+          lineHeight: 1.05,
+          maxWidth: 900,
+        }}
+      >
+        of Claude users have <br />
+        <span
+          style={{
+            background: `linear-gradient(90deg, ${C.claude} 0%, ${C.gold} 100%)`,
+            WebkitBackgroundClip: "text",
+            backgroundClip: "text",
+            WebkitTextFillColor: "transparent",
+            position: "relative",
+          }}
+        >
+          no idea this exists
+          <span
+            style={{
+              position: "absolute",
+              left: 0,
+              bottom: -6,
+              height: 4,
+              width: `${highlightP * 100}%`,
+              background: `linear-gradient(90deg, ${C.claude}, ${C.gold})`,
+              borderRadius: 2,
+            }}
+          />
+        </span>
+      </div>
+
+      {/* Dot swarm representing users */}
+      <div
+        style={{
+          marginTop: 56,
+          display: "grid",
+          gridTemplateColumns: "repeat(20, 18px)",
+          gap: 10,
+          opacity: tagOp * 0.9,
+        }}
+      >
+        {Array.from({ length: 100 }).map((_, i) => {
+          const isLit = i === 42; // the 1%
+          const reveal = tween(lof, fps, 1.4, 0, 1, e.expoOut, 0.25 + (i / 100) * 0.5);
+          return (
+            <div
+              key={i}
+              style={{
+                width: 18,
+                height: 18,
+                borderRadius: 9999,
+                background: isLit ? C.claude : "rgba(255,255,255,0.18)",
+                boxShadow: isLit ? `0 0 18px ${C.claudeGlow}` : "none",
+                transform: `scale(${reveal})`,
+              }}
+            />
+          );
+        })}
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 2 — GIFT  (infinite memory, zero tokens)
+// ═══════════════════════════════════════════════════════════════
+
+const Scene2Gift: React.FC<SP> = ({ frame, fps }) => {
+  const lof = lf(frame, fps, SEGS[1].s);
+
+  const claudeP = tween(lof, fps, 0.8, 0, 1, e.backOut, 0.0);
+  const infP = tween(lof, fps, 1.0, 0, 1, e.expoOut, 0.4);
+  const badgeP = tween(lof, fps, 0.7, 0, 1, e.backOut, 0.9);
+
+  // Animated infinity stroke-draw
+  const infDraw = infP;
+
+  // Token counter: starts at 10,000, plunges to 0
+  const tokRaw = tween(lof, fps, 1.4, 10000, 0, e.expoOut, 1.2);
+  const tokCount = Math.max(0, Math.round(tokRaw / 10) * 10);
+
+  return (
+    <AbsoluteFill
+      style={{
+        justifyContent: "center",
+        alignItems: "center",
+        paddingTop: SAFE_TOP,
+        paddingBottom: 1920 - SAFE_BOTTOM,
+      }}
+    >
+      {/* Headline */}
+      <div
+        style={{
+          fontFamily: FONT,
+          fontSize: 56,
+          fontWeight: 600,
+          color: C.ink,
+          textAlign: "center",
+          letterSpacing: "-0.02em",
+          opacity: claudeP,
+          marginBottom: 28,
+        }}
+      >
+        I gave Claude
+      </div>
+
+      {/* Infinity + Claude combo */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 28,
+          marginBottom: 44,
+        }}
+      >
+        <div style={{ transform: `scale(${claudeP})` }}>
+          <ClaudeGlyph size={170} glow={0.7} />
+        </div>
+        <div style={{ transform: `scale(${infP})`, position: "relative" }}>
+          <svg width={260} height={140} viewBox="0 0 260 140">
+            <defs>
+              <linearGradient id="infG" x1="0" y1="0" x2="1" y2="0">
+                <stop offset="0" stopColor={C.claude} />
+                <stop offset="1" stopColor={C.nlm} />
+              </linearGradient>
+            </defs>
+            <path
+              d="M 35 70 C 35 25 95 25 130 70 C 165 115 225 115 225 70 C 225 25 165 25 130 70 C 95 115 35 115 35 70 Z"
+              fill="none"
+              stroke="url(#infG)"
+              strokeWidth={14}
+              strokeLinecap="round"
+              strokeDasharray={700}
+              strokeDashoffset={(1 - infDraw) * 700}
+              style={{
+                filter: `drop-shadow(0 0 18px ${C.claudeGlow})`,
+              }}
+            />
+          </svg>
+        </div>
+      </div>
+
+      {/* Memory label */}
+      <div
+        style={{
+          fontFamily: FONT,
+          fontSize: 86,
+          fontWeight: 700,
+          color: C.ink,
+          letterSpacing: "-0.04em",
+          textAlign: "center",
+          opacity: infP,
+          lineHeight: 1,
+          marginBottom: 48,
+        }}
+      >
+        infinite memory
+      </div>
+
+      {/* Cost badge — dramatic zero */}
+      <div
+        style={{
+          transform: `scale(${badgeP})`,
+          padding: "22px 38px",
+          borderRadius: 28,
+          border: `1px solid ${C.line}`,
+          background: "rgba(60,203,127,0.08)",
+          display: "flex",
+          alignItems: "center",
+          gap: 18,
+          boxShadow: `0 20px 60px -16px rgba(60,203,127,0.25), inset 0 1px 0 rgba(255,255,255,0.08)`,
+        }}
+      >
+        <div
+          style={{
+            width: 10,
+            height: 10,
+            borderRadius: 9999,
+            background: C.success,
+            boxShadow: `0 0 14px ${C.success}`,
+          }}
+        />
+        <div
+          style={{
+            fontFamily: MONO,
+            fontSize: 28,
+            color: C.ink2,
+            letterSpacing: "0.15em",
+            textTransform: "uppercase",
+          }}
+        >
+          cost ·
+        </div>
+        <div
+          style={{
+            fontFamily: MONO,
+            fontSize: 54,
+            color: C.success,
+            fontWeight: 600,
+            minWidth: 220,
+          }}
+        >
+          {tokCount.toLocaleString()}
+          <span style={{ color: C.ink2, marginLeft: 10, fontSize: 24 }}>tokens</span>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 3 — PROBLEM  (every chat resets, tokens burning)
+// ═══════════════════════════════════════════════════════════════
+
+const Scene3Problem: React.FC<SP> = ({ frame, fps }) => {
+  const lof = lf(frame, fps, SEGS[2].s);
+
+  const headP = tween(lof, fps, 0.7, 0, 1, e.expoOut, 0);
+
+  // Three chat cards, each cycling through reset animations
+  const cards = [0, 1, 2];
+  const cardDelays = [0.3, 0.7, 1.1];
+
+  // Token burn meter — fills then crashes
+  const burnFill = interpolate(
+    lof,
+    [3.0 * fps, 4.0 * fps, 4.4 * fps, 5.4 * fps],
+    [0, 1, 1, 0],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
+  );
+  const burnCrash = interpolate(lof, [4.2 * fps, 5.2 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill
+      style={{
+        paddingTop: SAFE_TOP,
+        paddingBottom: 1920 - SAFE_BOTTOM,
+        paddingLeft: 80,
+        paddingRight: 80,
+      }}
+    >
+      {/* Header */}
+      <div
+        style={{
+          opacity: headP,
+          fontFamily: FONT,
+          color: C.ink,
+          fontSize: 72,
+          fontWeight: 700,
+          letterSpacing: "-0.03em",
+          lineHeight: 1,
+          marginTop: 40,
+          marginBottom: 60,
+        }}
+      >
+        Every new chat
+        <br />
+        <span style={{ color: C.danger }}>starts from zero.</span>
+      </div>
+
+      {/* Stacked chat cards */}
+      <div style={{ display: "flex", flexDirection: "column", gap: 22, marginBottom: 60 }}>
+        {cards.map((i) => {
+          const delay = cardDelays[i];
+          const enter = tween(lof, fps, 0.6, 0, 1, e.backOut, delay);
+          const wipe = tween(lof, fps, 0.8, 0, 1, e.expoInOut, delay + 1.6);
+          const msgs = [
+            ["Hi Claude, remember our project…", "No prior context found."],
+            ["Continue from last session?", "Starting fresh."],
+            ["You already know my stack?", "Tell me again."],
+          ][i];
+          return (
+            <div
+              key={i}
+              style={{
+                transform: `translateX(${(1 - enter) * -80}px) scale(${0.95 + enter * 0.05})`,
+                opacity: enter,
+                background: "rgba(255,255,255,0.03)",
+                border: `1px solid ${C.line}`,
+                borderRadius: 20,
+                padding: "20px 26px",
+                display: "flex",
+                alignItems: "center",
+                gap: 22,
+                position: "relative",
+                overflow: "hidden",
+              }}
+            >
+              {/* User dot */}
+              <div
+                style={{
+                  width: 44,
+                  height: 44,
+                  flexShrink: 0,
+                  borderRadius: 9999,
+                  background: `linear-gradient(135deg, ${C.ink2}, ${C.inkDim})`,
+                }}
+              />
+              <div style={{ flex: 1 }}>
+                <div
+                  style={{
+                    fontFamily: FONT,
+                    fontSize: 26,
+                    color: C.ink,
+                    marginBottom: 6,
+                    opacity: 1 - wipe * 0.85,
+                  }}
+                >
+                  {msgs[0]}
+                </div>
+                <div
+                  style={{
+                    fontFamily: MONO,
+                    fontSize: 22,
+                    color: C.danger,
+                    letterSpacing: "0.02em",
+                    opacity: wipe,
+                  }}
+                >
+                  {msgs[1]}
+                </div>
+              </div>
+              {/* Reset sweep */}
+              <div
+                style={{
+                  position: "absolute",
+                  top: 0,
+                  bottom: 0,
+                  left: `${wipe * 100 - 8}%`,
+                  width: 180,
+                  background: `linear-gradient(90deg, transparent, rgba(232,72,58,0.35), transparent)`,
+                  pointerEvents: "none",
+                }}
+              />
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Token burn meter */}
+      <div
+        style={{
+          padding: "22px 28px",
+          background: "rgba(255,255,255,0.03)",
+          border: `1px solid ${C.line}`,
+          borderRadius: 20,
+          opacity: headP,
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: 16,
+          }}
+        >
+          <div
+            style={{
+              fontFamily: MONO,
+              fontSize: 22,
+              color: C.ink2,
+              letterSpacing: "0.15em",
+              textTransform: "uppercase",
+            }}
+          >
+            tokens burning
+          </div>
+          <div
+            style={{
+              fontFamily: MONO,
+              fontSize: 34,
+              fontWeight: 600,
+              color: burnCrash > 0.5 ? C.danger : C.ink,
+            }}
+          >
+            {Math.round((1 - burnCrash) * 82_500 * burnFill).toLocaleString()}
+          </div>
+        </div>
+        <div
+          style={{
+            position: "relative",
+            height: 18,
+            background: "rgba(255,255,255,0.05)",
+            borderRadius: 9999,
+            overflow: "hidden",
+          }}
+        >
+          <div
+            style={{
+              position: "absolute",
+              left: 0,
+              top: 0,
+              bottom: 0,
+              width: `${burnFill * 100}%`,
+              background: `linear-gradient(90deg, ${C.gold}, ${C.danger})`,
+              boxShadow: `0 0 20px ${C.danger}`,
+              transition: "none",
+            }}
+          />
+          {/* Flame flickers */}
+          {burnFill > 0.15 && (
+            <div
+              style={{
+                position: "absolute",
+                top: -12,
+                left: `${burnFill * 100 - 6}%`,
+                width: 28,
+                height: 42,
+                borderRadius: "50% 50% 30% 30%",
+                background: `radial-gradient(circle at 50% 80%, ${C.gold}, ${C.danger})`,
+                filter: "blur(3px)",
+                opacity: 0.85 - burnCrash,
+                transform: `scaleY(${1 + Math.sin(lof * 0.4) * 0.15})`,
+              }}
+            />
+          )}
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 4 — CONNECT  (Claude × NotebookLM)
+// ═══════════════════════════════════════════════════════════════
+
+const Scene4Connect: React.FC<SP> = ({ frame, fps }) => {
+  const lof = lf(frame, fps, SEGS[3].s);
+
+  const labelOp = tween(lof, fps, 0.7, 0, 1, e.expoOut, 0);
+  const cP = tween(lof, fps, 0.8, 0, 1, e.backOut, 0.3);
+  const nP = tween(lof, fps, 0.8, 0, 1, e.backOut, 0.8);
+  const wire = tween(lof, fps, 1.2, 0, 1, e.expoInOut, 1.6);
+  const spark = interpolate(lof, [2.8 * fps, 3.2 * fps, 3.6 * fps, 4.0 * fps], [0, 1, 1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const flash = interpolate(lof, [2.9 * fps, 3.1 * fps, 3.6 * fps], [0, 1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const badgeP = tween(lof, fps, 0.7, 0, 1, e.backOut, 3.6);
+
+  return (
+    <AbsoluteFill
+      style={{
+        paddingTop: SAFE_TOP,
+        paddingBottom: 1920 - SAFE_BOTTOM,
+      }}
+    >
+      {/* Top eyebrow */}
+      <div
+        style={{
+          opacity: labelOp,
+          textAlign: "center",
+          fontFamily: MONO,
+          color: C.ink2,
+          letterSpacing: "0.25em",
+          fontSize: 22,
+          textTransform: "uppercase",
+          marginTop: 60,
+        }}
+      >
+        the trick
+      </div>
+      <div
+        style={{
+          opacity: labelOp,
+          textAlign: "center",
+          fontFamily: FONT,
+          color: C.ink,
+          fontWeight: 700,
+          fontSize: 72,
+          letterSpacing: "-0.035em",
+          lineHeight: 1.02,
+          marginTop: 20,
+        }}
+      >
+        Plug Claude into<br />NotebookLM.
+      </div>
+
+      {/* Side-by-side logos with connecting wire */}
+      <div
+        style={{
+          position: "relative",
+          flex: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "0 80px",
+          marginTop: 60,
+        }}
+      >
+        {/* Claude card */}
+        <div
+          style={{
+            transform: `scale(${cP}) translateX(${(1 - cP) * -60}px)`,
+            opacity: cP,
+            padding: 34,
+            borderRadius: 28,
+            background: "rgba(212,102,58,0.08)",
+            border: `1px solid rgba(212,102,58,0.3)`,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 14,
+            width: 340,
+          }}
+        >
+          <ClaudeGlyph size={170} glow={0.6} />
+          <div style={{ fontFamily: FONT, color: C.ink, fontSize: 34, fontWeight: 600 }}>
+            Claude
+          </div>
+          <div
+            style={{
+              fontFamily: MONO,
+              fontSize: 18,
+              color: C.ink2,
+              letterSpacing: "0.1em",
+              textTransform: "uppercase",
+            }}
+          >
+            reasoning engine
+          </div>
+        </div>
+
+        {/* NotebookLM card */}
+        <div
+          style={{
+            transform: `scale(${nP}) translateX(${(1 - nP) * 60}px)`,
+            opacity: nP,
+            padding: 34,
+            borderRadius: 28,
+            background: "rgba(79,125,243,0.08)",
+            border: `1px solid rgba(79,125,243,0.35)`,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 14,
+            width: 340,
+          }}
+        >
+          <NotebookLMGlyph size={170} glow={0.7} />
+          <div style={{ fontFamily: FONT, color: C.ink, fontSize: 34, fontWeight: 600 }}>
+            NotebookLM
+          </div>
+          <div
+            style={{
+              fontFamily: MONO,
+              fontSize: 18,
+              color: C.ink2,
+              letterSpacing: "0.1em",
+              textTransform: "uppercase",
+            }}
+          >
+            memory vault
+          </div>
+        </div>
+      </div>
+
+      {/* Connection wire */}
+      <WireConnect
+        from={[350, 900]}
+        to={[730, 900]}
+        progress={wire}
+        color={C.gold}
+        spark={spark}
+        width={5}
+      />
+
+      {/* Flash at connection moment */}
+      <div
+        style={{
+          position: "absolute",
+          left: 540 - 240,
+          top: 830,
+          width: 480,
+          height: 160,
+          borderRadius: "50%",
+          background: `radial-gradient(circle, rgba(240,194,58,${flash * 0.6}) 0%, transparent 60%)`,
+          filter: "blur(24px)",
+          pointerEvents: "none",
+        }}
+      />
+
+      {/* Bottom connected badge */}
+      <div
+        style={{
+          alignSelf: "center",
+          transform: `scale(${badgeP})`,
+          opacity: badgeP,
+          padding: "16px 28px",
+          borderRadius: 9999,
+          background: "rgba(60,203,127,0.1)",
+          border: `1px solid rgba(60,203,127,0.4)`,
+          display: "flex",
+          alignItems: "center",
+          gap: 12,
+          marginBottom: 60,
+          boxShadow: `0 0 40px rgba(60,203,127,0.3)`,
+        }}
+      >
+        <div
+          style={{
+            width: 12,
+            height: 12,
+            borderRadius: 9999,
+            background: C.success,
+            boxShadow: `0 0 16px ${C.success}`,
+          }}
+        />
+        <div
+          style={{
+            fontFamily: MONO,
+            fontSize: 26,
+            color: C.success,
+            letterSpacing: "0.2em",
+            fontWeight: 600,
+            textTransform: "uppercase",
+          }}
+        >
+          link established
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 5 — SECOND BRAIN
+// ═══════════════════════════════════════════════════════════════
+
+const Scene5SecondBrain: React.FC<SP> = ({ frame, fps }) => {
+  const lof = lf(frame, fps, SEGS[4].s);
+
+  const leftP = tween(lof, fps, 0.7, 0, 1, e.backOut, 0.0);
+  const rightP = tween(lof, fps, 0.8, 0, 1, e.backOut, 0.7);
+  const headP = tween(lof, fps, 0.7, 0, 1, e.expoOut, 0.3);
+  const neuralP = tween(lof, fps, 1.0, 0, 1, e.expoOut, 1.3);
+
+  // Neural node positions (inside second brain)
+  const nodes = [
+    [62, 40], [76, 58], [56, 68], [80, 84], [44, 56], [68, 74], [50, 30], [82, 42],
+  ];
+
+  return (
+    <AbsoluteFill style={{ paddingTop: SAFE_TOP, paddingBottom: 1920 - SAFE_BOTTOM }}>
+      <div
+        style={{
+          opacity: headP,
+          textAlign: "center",
+          fontFamily: FONT,
+          color: C.ink,
+          fontSize: 72,
+          fontWeight: 700,
+          letterSpacing: "-0.035em",
+          lineHeight: 1.02,
+          marginTop: 60,
+        }}
+      >
+        A second brain<br />
+        <span style={{ color: C.nlm }}>that never forgets.</span>
+      </div>
+
+      <div
+        style={{
+          flex: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 40,
+          position: "relative",
+        }}
+      >
+        {/* Left brain = Claude reasoning */}
+        <div style={{ transform: `scale(${leftP})`, opacity: leftP, textAlign: "center" }}>
+          <div style={{ position: "relative", width: 300, height: 300 }}>
+            <svg width="300" height="300" viewBox="0 0 100 100">
+              <defs>
+                <radialGradient id="brainC" cx="50%" cy="50%" r="60%">
+                  <stop offset="0" stopColor={C.claude} stopOpacity="0.25" />
+                  <stop offset="1" stopColor={C.claude} stopOpacity="0" />
+                </radialGradient>
+              </defs>
+              <circle cx="50" cy="50" r="46" fill="url(#brainC)" />
+              {/* Stylized brain path */}
+              <path
+                d="M30 50 Q30 28 48 28 Q52 20 58 28 Q72 28 72 44 Q78 44 78 54 Q78 70 62 70 Q56 78 48 70 Q30 70 30 54 Z"
+                fill="none"
+                stroke={C.claude}
+                strokeWidth="2"
+                opacity="0.9"
+              />
+              <path
+                d="M50 28 L50 70 M40 40 Q50 46 60 40 M40 60 Q50 54 60 60"
+                fill="none"
+                stroke={C.claude}
+                strokeWidth="1.4"
+                opacity="0.6"
+              />
+            </svg>
+          </div>
+          <div
+            style={{
+              fontFamily: MONO,
+              color: C.ink2,
+              fontSize: 20,
+              letterSpacing: "0.2em",
+              textTransform: "uppercase",
+              marginTop: 8,
+            }}
+          >
+            reasoning
+          </div>
+        </div>
+
+        {/* Synchronize connectors */}
+        <svg width="180" height="300" viewBox="0 0 180 300" style={{ opacity: neuralP }}>
+          <defs>
+            <linearGradient id="syncG" x1="0" y1="0" x2="1" y2="0">
+              <stop offset="0" stopColor={C.claude} />
+              <stop offset="1" stopColor={C.nlm} />
+            </linearGradient>
+          </defs>
+          {[100, 150, 200].map((y, i) => (
+            <line
+              key={i}
+              x1="0"
+              y1={y}
+              x2="180"
+              y2={y}
+              stroke="url(#syncG)"
+              strokeWidth="2"
+              strokeDasharray="6 8"
+              opacity={0.5 + Math.sin(lof * 0.2 + i) * 0.5}
+            />
+          ))}
+        </svg>
+
+        {/* Right brain = NotebookLM memory */}
+        <div style={{ transform: `scale(${rightP})`, opacity: rightP, textAlign: "center" }}>
+          <div style={{ position: "relative", width: 300, height: 300 }}>
+            <svg width="300" height="300" viewBox="0 0 100 100">
+              <defs>
+                <radialGradient id="brainN" cx="50%" cy="50%" r="60%">
+                  <stop offset="0" stopColor={C.nlm} stopOpacity="0.25" />
+                  <stop offset="1" stopColor={C.nlm} stopOpacity="0" />
+                </radialGradient>
+              </defs>
+              <circle cx="50" cy="50" r="46" fill="url(#brainN)" />
+              <path
+                d="M30 50 Q30 28 48 28 Q52 20 58 28 Q72 28 72 44 Q78 44 78 54 Q78 70 62 70 Q56 78 48 70 Q30 70 30 54 Z"
+                fill="none"
+                stroke={C.nlm}
+                strokeWidth="2"
+                opacity="0.9"
+              />
+              {/* Neural firing nodes */}
+              {nodes.map(([x, y], i) => {
+                const fire = (Math.sin(lof * 0.15 + i) + 1) / 2;
+                return (
+                  <circle
+                    key={i}
+                    cx={x}
+                    cy={y}
+                    r={1.6}
+                    fill={C.nlm}
+                    opacity={0.4 + fire * 0.6 * neuralP}
+                  />
+                );
+              })}
+              {/* Network lines */}
+              {nodes.slice(0, -1).map(([x1, y1], i) => {
+                const [x2, y2] = nodes[i + 1];
+                return (
+                  <line
+                    key={i}
+                    x1={x1}
+                    y1={y1}
+                    x2={x2}
+                    y2={y2}
+                    stroke={C.nlm}
+                    strokeWidth="0.5"
+                    opacity={0.3 * neuralP}
+                  />
+                );
+              })}
+            </svg>
+          </div>
+          <div
+            style={{
+              fontFamily: MONO,
+              color: C.ink2,
+              fontSize: 20,
+              letterSpacing: "0.2em",
+              textTransform: "uppercase",
+              marginTop: 8,
+            }}
+          >
+            memory
+          </div>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 6 — BENEFITS 1  (Persistent memory, lower costs)
+// ═══════════════════════════════════════════════════════════════
+
+const BenefitCard: React.FC<{
+  icon: React.ReactNode;
+  title: string;
+  sub: string;
+  tone: string;
+  reveal: number;
+}> = ({ icon, title, sub, tone, reveal }) => (
+  <div
+    style={{
+      transform: `translateY(${(1 - reveal) * 60}px)`,
+      opacity: reveal,
+      padding: "28px 32px",
+      borderRadius: 22,
+      background: "rgba(255,255,255,0.03)",
+      border: `1px solid ${C.line}`,
+      display: "flex",
+      alignItems: "center",
+      gap: 24,
+      position: "relative",
+      overflow: "hidden",
+    }}
+  >
+    <div
+      style={{
+        position: "absolute",
+        left: 0,
+        top: 0,
+        bottom: 0,
+        width: 4,
+        background: tone,
+        boxShadow: `0 0 20px ${tone}`,
+      }}
+    />
+    <div
+      style={{
+        width: 80,
+        height: 80,
+        flexShrink: 0,
+        borderRadius: 20,
+        background: "rgba(255,255,255,0.04)",
+        border: `1px solid ${C.line}`,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: tone,
+      }}
+    >
+      {icon}
+    </div>
+    <div style={{ flex: 1 }}>
+      <div style={{ fontFamily: FONT, color: C.ink, fontSize: 38, fontWeight: 600, letterSpacing: "-0.02em" }}>
+        {title}
+      </div>
+      <div
+        style={{
+          fontFamily: FONT,
+          color: C.ink2,
+          fontSize: 24,
+          marginTop: 4,
+        }}
+      >
+        {sub}
+      </div>
+    </div>
+  </div>
+);
+
+const Scene6Benefits1: React.FC<SP> = ({ frame, fps }) => {
+  const lof = lf(frame, fps, SEGS[5].s);
+
+  const headP = tween(lof, fps, 0.6, 0, 1, e.expoOut, 0);
+  const c1 = tween(lof, fps, 0.8, 0, 1, e.backOut, 0.7);
+  const c2 = tween(lof, fps, 0.8, 0, 1, e.backOut, 1.3);
+
+  // Animated savings count
+  const saveRaw = tween(lof, fps, 1.6, 0, 87, e.expoOut, 1.6);
+
+  return (
+    <AbsoluteFill
+      style={{
+        paddingTop: SAFE_TOP,
+        paddingBottom: 1920 - SAFE_BOTTOM,
+        paddingLeft: 60,
+        paddingRight: 60,
+      }}
+    >
+      <div
+        style={{
+          opacity: headP,
+          fontFamily: FONT,
+          color: C.ink,
+          fontSize: 76,
+          fontWeight: 700,
+          letterSpacing: "-0.035em",
+          lineHeight: 1,
+          marginTop: 40,
+          marginBottom: 48,
+        }}
+      >
+        What you get.
+      </div>
+
+      <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
+        <BenefitCard
+          reveal={c1}
+          tone={C.success}
+          title="Persistent memory"
+          sub="Every session, recalled. Never starts cold."
+          icon={
+            <svg width="42" height="42" viewBox="0 0 24 24" fill="none">
+              <rect x="3" y="5" width="18" height="14" rx="3" stroke="currentColor" strokeWidth="2" />
+              <path d="M7 10h10M7 14h6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+              <circle cx="18" cy="17" r="3" fill="currentColor" />
+            </svg>
+          }
+        />
+        <BenefitCard
+          reveal={c2}
+          tone={C.nlm}
+          title={`~${Math.round(saveRaw)}% fewer tokens`}
+          sub="Skip the re-briefs. Context lives next door."
+          icon={
+            <svg width="42" height="42" viewBox="0 0 24 24" fill="none">
+              <path
+                d="M12 3v12m0 0l-4-4m4 4l4-4M5 19h14"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          }
+        />
+      </div>
+
+      {/* Receipts */}
+      <div
+        style={{
+          marginTop: 40,
+          opacity: c2 * 0.9,
+          fontFamily: MONO,
+          color: C.ink2,
+          fontSize: 22,
+          letterSpacing: "0.1em",
+          textTransform: "uppercase",
+          textAlign: "center",
+        }}
+      >
+        · same brain · lower bill ·
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 7 — BENEFITS 2  (Infographics, videos, research)
+// ═══════════════════════════════════════════════════════════════
+
+const Scene7Benefits2: React.FC<SP> = ({ frame, fps }) => {
+  const lof = lf(frame, fps, SEGS[6].s);
+
+  const headP = tween(lof, fps, 0.6, 0, 1, e.expoOut, 0);
+  const tiles = [
+    {
+      title: "Infographics",
+      sub: "auto-designed",
+      tone: C.gold,
+      delay: 0.6,
+      icon: (
+        <svg width="54" height="54" viewBox="0 0 24 24" fill="none">
+          <rect x="3" y="12" width="4" height="9" rx="1" fill="currentColor" />
+          <rect x="10" y="7" width="4" height="14" rx="1" fill="currentColor" />
+          <rect x="17" y="3" width="4" height="18" rx="1" fill="currentColor" />
+        </svg>
+      ),
+    },
+    {
+      title: "Cinematic video",
+      sub: "storyboard → clip",
+      tone: C.claude,
+      delay: 1.0,
+      icon: (
+        <svg width="54" height="54" viewBox="0 0 24 24" fill="none">
+          <rect x="3" y="5" width="18" height="14" rx="3" stroke="currentColor" strokeWidth="2" />
+          <path d="M10 9.5v5l5-2.5z" fill="currentColor" />
+        </svg>
+      ),
+    },
+    {
+      title: "Deep research",
+      sub: "sourced & cited",
+      tone: C.nlm,
+      delay: 1.4,
+      icon: (
+        <svg width="54" height="54" viewBox="0 0 24 24" fill="none">
+          <circle cx="11" cy="11" r="6" stroke="currentColor" strokeWidth="2" />
+          <path d="M16 16l5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+          <path d="M8 11h6M11 8v6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+        </svg>
+      ),
+    },
+  ];
+
+  return (
+    <AbsoluteFill
+      style={{
+        paddingTop: SAFE_TOP,
+        paddingBottom: 1920 - SAFE_BOTTOM,
+        paddingLeft: 60,
+        paddingRight: 60,
+      }}
+    >
+      <div
+        style={{
+          opacity: headP,
+          fontFamily: FONT,
+          color: C.ink,
+          fontSize: 72,
+          fontWeight: 700,
+          letterSpacing: "-0.035em",
+          lineHeight: 1,
+          marginTop: 40,
+          marginBottom: 48,
+        }}
+      >
+        Plus — all free,
+        <br />
+        <span style={{ color: C.nlm }}>in NotebookLM.</span>
+      </div>
+
+      <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
+        {tiles.map((t, i) => {
+          const reveal = tween(lof, fps, 0.7, 0, 1, e.backOut, t.delay);
+          const side = i % 2 === 0 ? -1 : 1;
+          return (
+            <div
+              key={i}
+              style={{
+                transform: `translateX(${(1 - reveal) * side * 80}px)`,
+                opacity: reveal,
+                padding: "26px 30px",
+                borderRadius: 22,
+                background: "rgba(255,255,255,0.03)",
+                border: `1px solid ${C.line}`,
+                display: "flex",
+                alignItems: "center",
+                gap: 24,
+              }}
+            >
+              <div
+                style={{
+                  width: 96,
+                  height: 96,
+                  flexShrink: 0,
+                  borderRadius: 22,
+                  background: `linear-gradient(135deg, ${t.tone}22, transparent)`,
+                  border: `1px solid ${t.tone}55`,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: t.tone,
+                  boxShadow: `0 0 24px ${t.tone}33`,
+                }}
+              >
+                {t.icon}
+              </div>
+              <div style={{ flex: 1 }}>
+                <div
+                  style={{
+                    fontFamily: FONT,
+                    color: C.ink,
+                    fontSize: 42,
+                    fontWeight: 600,
+                    letterSpacing: "-0.02em",
+                  }}
+                >
+                  {t.title}
+                </div>
+                <div
+                  style={{
+                    fontFamily: MONO,
+                    color: C.ink2,
+                    fontSize: 22,
+                    letterSpacing: "0.1em",
+                    textTransform: "uppercase",
+                    marginTop: 4,
+                  }}
+                >
+                  {t.sub}
+                </div>
+              </div>
+              <div
+                style={{
+                  fontFamily: MONO,
+                  color: t.tone,
+                  fontSize: 24,
+                  fontWeight: 600,
+                  opacity: reveal,
+                }}
+              >
+                FREE
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 8 — WRAPUP SKILL  (convo flows into notebook)
+// ═══════════════════════════════════════════════════════════════
+
+const Scene8Wrapup: React.FC<SP> = ({ frame, fps }) => {
+  const lof = lf(frame, fps, SEGS[7].s);
+
+  const headP = tween(lof, fps, 0.6, 0, 1, e.expoOut, 0);
+  const badgeP = tween(lof, fps, 0.7, 0, 1, e.backOut, 0.4);
+
+  // Message bubbles condense into NotebookLM
+  const bubbleCount = 4;
+  const bubbleDelays = [1.0, 1.4, 1.8, 2.2];
+  const nbP = tween(lof, fps, 0.8, 0, 1, e.backOut, 1.8);
+  const saveP = tween(lof, fps, 0.7, 0, 1, e.expoOut, 4.6);
+
+  return (
+    <AbsoluteFill style={{ paddingTop: SAFE_TOP, paddingBottom: 1920 - SAFE_BOTTOM }}>
+      {/* Header */}
+      <div
+        style={{
+          opacity: headP,
+          textAlign: "center",
+          marginTop: 40,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: MONO,
+            color: C.ink2,
+            fontSize: 22,
+            letterSpacing: "0.25em",
+            textTransform: "uppercase",
+          }}
+        >
+          the secret
+        </div>
+        <div
+          style={{
+            fontFamily: FONT,
+            color: C.ink,
+            fontSize: 76,
+            fontWeight: 700,
+            letterSpacing: "-0.035em",
+            lineHeight: 1,
+            marginTop: 18,
+          }}
+        >
+          "wrap-up" skill.
+        </div>
+      </div>
+
+      {/* Badge */}
+      <div
+        style={{
+          alignSelf: "center",
+          transform: `scale(${badgeP})`,
+          opacity: badgeP,
+          marginTop: 22,
+          padding: "10px 22px",
+          borderRadius: 9999,
+          background: `linear-gradient(90deg, ${C.claude}22, ${C.nlm}22)`,
+          border: `1px solid ${C.line}`,
+          fontFamily: MONO,
+          color: C.ink,
+          fontSize: 22,
+          letterSpacing: "0.1em",
+          fontWeight: 600,
+        }}
+      >
+        runs after every session
+      </div>
+
+      {/* Flow diagram */}
+      <div
+        style={{
+          flex: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          position: "relative",
+          padding: "40px 60px",
+          marginTop: 20,
+        }}
+      >
+        {/* Left: Chat session with bubbles collapsing */}
+        <div style={{ flex: 1, position: "relative", height: 440 }}>
+          <div
+            style={{
+              fontFamily: MONO,
+              color: C.ink2,
+              fontSize: 18,
+              letterSpacing: "0.2em",
+              textTransform: "uppercase",
+              marginBottom: 14,
+            }}
+          >
+            session
+          </div>
+          {Array.from({ length: bubbleCount }).map((_, i) => {
+            const appear = tween(lof, fps, 0.4, 0, 1, e.expoOut, bubbleDelays[i]);
+            const shrink = tween(lof, fps, 0.9, 1, 0, e.expoInOut, bubbleDelays[i] + 2.0);
+            const yMove = (1 - shrink) * (400 + i * 20);
+            const xMove = (1 - shrink) * 380;
+            return (
+              <div
+                key={i}
+                style={{
+                  position: "absolute",
+                  top: i * 78,
+                  left: i % 2 === 0 ? 0 : 40,
+                  opacity: appear * (shrink > 0.05 ? 1 : 0),
+                  transform: `translate(${xMove}px, ${yMove}px) scale(${Math.max(0.2, shrink)})`,
+                  padding: "14px 20px",
+                  borderRadius: 18,
+                  background: i % 2 === 0 ? "rgba(212,102,58,0.15)" : "rgba(79,125,243,0.15)",
+                  border: `1px solid ${i % 2 === 0 ? "rgba(212,102,58,0.4)" : "rgba(79,125,243,0.4)"}`,
+                  maxWidth: 340,
+                  fontFamily: FONT,
+                  color: C.ink,
+                  fontSize: 22,
+                  lineHeight: 1.35,
+                }}
+              >
+                {
+                  [
+                    "Here's the API pattern…",
+                    "Use async iterators.",
+                    "Cache invalidation by key?",
+                    "Use SWR + stale-while-revalidate.",
+                  ][i]
+                }
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Arrow */}
+        <svg width="140" height="60" viewBox="0 0 140 60" style={{ flexShrink: 0 }}>
+          <defs>
+            <linearGradient id="arrG" x1="0" y1="0" x2="1" y2="0">
+              <stop offset="0" stopColor={C.claude} />
+              <stop offset="1" stopColor={C.nlm} />
+            </linearGradient>
+          </defs>
+          <path
+            d="M 10 30 L 120 30"
+            stroke="url(#arrG)"
+            strokeWidth="4"
+            strokeLinecap="round"
+            strokeDasharray="400"
+            strokeDashoffset={(1 - nbP) * 400}
+          />
+          <path
+            d="M 110 20 L 130 30 L 110 40"
+            fill="none"
+            stroke={C.nlm}
+            strokeWidth="4"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            opacity={nbP}
+          />
+        </svg>
+
+        {/* Right: NotebookLM destination */}
+        <div
+          style={{
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 16,
+            transform: `scale(${nbP})`,
+            opacity: nbP,
+          }}
+        >
+          <NotebookLMGlyph size={220} glow={0.75} />
+          <div
+            style={{
+              fontFamily: FONT,
+              color: C.ink,
+              fontSize: 34,
+              fontWeight: 600,
+              letterSpacing: "-0.02em",
+            }}
+          >
+            NotebookLM
+          </div>
+          <div
+            style={{
+              transform: `scale(${saveP})`,
+              opacity: saveP,
+              padding: "8px 18px",
+              borderRadius: 9999,
+              background: "rgba(60,203,127,0.12)",
+              border: `1px solid rgba(60,203,127,0.4)`,
+              fontFamily: MONO,
+              color: C.success,
+              fontSize: 20,
+              letterSpacing: "0.15em",
+              textTransform: "uppercase",
+              fontWeight: 600,
+            }}
+          >
+            + saved
+          </div>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 9 — SEMANTIC SEARCH  (pulls only what it needs)
+// ═══════════════════════════════════════════════════════════════
+
+const Scene9Semantic: React.FC<SP> = ({ frame, fps }) => {
+  const lof = lf(frame, fps, SEGS[8].s);
+
+  const headP = tween(lof, fps, 0.6, 0, 1, e.expoOut, 0);
+  const searchP = tween(lof, fps, 0.7, 0, 1, e.backOut, 0.6);
+
+  // Typewriter for query
+  const query = "how did we structure that auth flow?";
+  const typeP = tween(lof, fps, 1.6, 0, query.length, e.circOut, 1.1);
+  const shown = query.slice(0, Math.max(0, Math.round(typeP)));
+  const cursorOn = Math.floor(lof / 10) % 2 === 0;
+
+  // Vector grid reveal
+  const gridP = tween(lof, fps, 0.9, 0, 1, e.expoOut, 2.0);
+
+  // Highlight 4 specific cells
+  const hitIdx = [11, 23, 35, 52];
+  const hitP = tween(lof, fps, 1.0, 0, 1, e.expoOut, 3.0);
+
+  // Summary pill
+  const summaryP = tween(lof, fps, 0.7, 0, 1, e.backOut, 4.2);
+
+  return (
+    <AbsoluteFill
+      style={{
+        paddingTop: SAFE_TOP,
+        paddingBottom: 1920 - SAFE_BOTTOM,
+        paddingLeft: 60,
+        paddingRight: 60,
+      }}
+    >
+      <div
+        style={{
+          opacity: headP,
+          fontFamily: FONT,
+          color: C.ink,
+          fontSize: 72,
+          fontWeight: 700,
+          letterSpacing: "-0.035em",
+          lineHeight: 1,
+          marginTop: 40,
+          marginBottom: 40,
+        }}
+      >
+        Claude pulls only
+        <br />
+        <span style={{ color: C.gold }}>what it needs.</span>
+      </div>
+
+      {/* Search bar */}
+      <div
+        style={{
+          transform: `translateY(${(1 - searchP) * 30}px) scale(${0.96 + searchP * 0.04})`,
+          opacity: searchP,
+          padding: "22px 24px",
+          borderRadius: 18,
+          background: "rgba(255,255,255,0.04)",
+          border: `1px solid ${C.lineStrong}`,
+          display: "flex",
+          alignItems: "center",
+          gap: 18,
+          boxShadow: `0 0 40px rgba(240,194,58,0.12)`,
+          marginBottom: 36,
+        }}
+      >
+        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" style={{ color: C.gold }}>
+          <circle cx="11" cy="11" r="6" stroke="currentColor" strokeWidth="2" />
+          <path d="M16 16l5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+        </svg>
+        <div
+          style={{
+            fontFamily: MONO,
+            color: C.ink,
+            fontSize: 28,
+            letterSpacing: "0.01em",
+            flex: 1,
+          }}
+        >
+          {shown}
+          <span
+            style={{
+              display: "inline-block",
+              width: 2,
+              height: 28,
+              background: C.gold,
+              marginLeft: 2,
+              verticalAlign: "middle",
+              opacity: cursorOn ? 1 : 0,
+            }}
+          />
+        </div>
+      </div>
+
+      {/* Vector grid representing memory */}
+      <div
+        style={{
+          flex: 1,
+          padding: 20,
+          borderRadius: 20,
+          background: "rgba(79,125,243,0.04)",
+          border: `1px solid ${C.line}`,
+          opacity: gridP,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: MONO,
+            color: C.ink2,
+            fontSize: 18,
+            letterSpacing: "0.2em",
+            textTransform: "uppercase",
+            marginBottom: 14,
+            display: "flex",
+            justifyContent: "space-between",
+          }}
+        >
+          <span>memory vectors · 12,847</span>
+          <span style={{ color: hitP > 0.3 ? C.success : C.ink2 }}>
+            {hitP > 0.3 ? `matches · ${hitIdx.length}` : "searching…"}
+          </span>
+        </div>
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(10, 1fr)",
+            gap: 8,
+          }}
+        >
+          {Array.from({ length: 70 }).map((_, i) => {
+            const hit = hitIdx.includes(i);
+            const cellP = interpolate(
+              gridP,
+              [0, 1],
+              [0, 1],
+              { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
+            );
+            const hitFade = hit ? hitP : 0;
+            return (
+              <div
+                key={i}
+                style={{
+                  aspectRatio: "1/1",
+                  borderRadius: 8,
+                  background: hit
+                    ? `linear-gradient(135deg, ${C.nlm}, ${C.gold})`
+                    : `rgba(255,255,255,${0.04 + (i % 7) * 0.008})`,
+                  border: hit
+                    ? `1px solid ${C.gold}`
+                    : `1px solid rgba(255,255,255,0.05)`,
+                  transform: `scale(${cellP}) ${hit ? `scale(${1 + hitFade * 0.12})` : ""}`,
+                  boxShadow: hit ? `0 0 18px ${C.nlm}` : "none",
+                  opacity: cellP,
+                }}
+              />
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Summary */}
+      <div
+        style={{
+          alignSelf: "center",
+          transform: `scale(${summaryP})`,
+          opacity: summaryP,
+          marginTop: 28,
+          padding: "14px 24px",
+          borderRadius: 9999,
+          border: `1px solid rgba(60,203,127,0.4)`,
+          background: "rgba(60,203,127,0.08)",
+          fontFamily: MONO,
+          color: C.success,
+          fontSize: 22,
+          letterSpacing: "0.1em",
+          fontWeight: 600,
+          display: "flex",
+          alignItems: "center",
+          gap: 12,
+        }}
+      >
+        <div style={{ width: 8, height: 8, borderRadius: 9999, background: C.success }} />
+        NO CONTEXT OVERLOAD
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 10 — CHANGES EVERYTHING
+// ═══════════════════════════════════════════════════════════════
+
+const Scene10Changes: React.FC<SP> = ({ frame, fps }) => {
+  const lof = lf(frame, fps, SEGS[9].s);
+
+  const p1 = tween(lof, fps, 0.7, 0, 1, e.expoOut, 0);
+  const p2 = tween(lof, fps, 1.0, 0, 1, e.backOut, 0.5);
+  const underline = tween(lof, fps, 0.8, 0, 1, e.expoInOut, 1.3);
+  const flash = interpolate(lof, [0.5 * fps, 0.7 * fps, 1.0 * fps], [0, 1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill
+      style={{
+        justifyContent: "center",
+        alignItems: "center",
+        paddingTop: SAFE_TOP,
+        paddingBottom: 1920 - SAFE_BOTTOM,
+      }}
+    >
+      {/* Flash background */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(circle at 50% 50%, rgba(240,194,58,${flash * 0.25}) 0%, transparent 60%)`,
+          pointerEvents: "none",
+        }}
+      />
+
+      <div
+        style={{
+          fontFamily: FONT,
+          color: C.ink,
+          fontSize: 56,
+          fontWeight: 500,
+          letterSpacing: "-0.02em",
+          textAlign: "center",
+          opacity: p1,
+          marginBottom: 16,
+        }}
+      >
+        One setup.
+      </div>
+      <div
+        style={{
+          transform: `scale(${p2})`,
+          opacity: p2,
+          fontFamily: FONT,
+          color: C.ink,
+          fontSize: 150,
+          fontWeight: 700,
+          letterSpacing: "-0.05em",
+          lineHeight: 0.92,
+          textAlign: "center",
+          position: "relative",
+        }}
+      >
+        Changes
+        <br />
+        <span
+          style={{
+            background: `linear-gradient(90deg, ${C.claude} 0%, ${C.gold} 50%, ${C.nlm} 100%)`,
+            WebkitBackgroundClip: "text",
+            backgroundClip: "text",
+            WebkitTextFillColor: "transparent",
+            position: "relative",
+            display: "inline-block",
+          }}
+        >
+          everything.
+          <div
+            style={{
+              position: "absolute",
+              left: 0,
+              bottom: -16,
+              height: 8,
+              width: `${underline * 100}%`,
+              background: `linear-gradient(90deg, ${C.claude}, ${C.gold}, ${C.nlm})`,
+              borderRadius: 4,
+              boxShadow: `0 0 20px ${C.gold}`,
+            }}
+          />
+        </span>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 11 — CTA  (Like + Follow + Comment "AI")
+// ═══════════════════════════════════════════════════════════════
+
+const Scene11CTA: React.FC<SP> = ({ frame, fps }) => {
+  const lof = lf(frame, fps, SEGS[10].s);
+
+  const headP = tween(lof, fps, 0.6, 0, 1, e.expoOut, 0);
+  const likeP = tween(lof, fps, 0.7, 0, 1, e.backOut, 0.3);
+  const followP = tween(lof, fps, 0.7, 0, 1, e.backOut, 0.7);
+  const commentP = tween(lof, fps, 0.7, 0, 1, e.backOut, 1.1);
+
+  // Type "AI" into comment box
+  const typeStart = 2.0;
+  const aiText = "AI";
+  const typeP = tween(lof, fps, 0.5, 0, aiText.length, e.circOut, typeStart);
+  const typed = aiText.slice(0, Math.round(typeP));
+  const cursorOn = Math.floor(lof / 8) % 2 === 0;
+
+  // Heart pulse
+  const heartPulse = 1 + Math.sin(lof * 0.3) * 0.05 * likeP;
+
+  return (
+    <AbsoluteFill
+      style={{
+        paddingTop: SAFE_TOP,
+        paddingBottom: 1920 - SAFE_BOTTOM,
+        paddingLeft: 60,
+        paddingRight: 60,
+      }}
+    >
+      <div
+        style={{
+          opacity: headP,
+          textAlign: "center",
+          fontFamily: FONT,
+          color: C.ink,
+          fontSize: 68,
+          fontWeight: 700,
+          letterSpacing: "-0.035em",
+          lineHeight: 1,
+          marginTop: 40,
+        }}
+      >
+        Want the exact steps?
+      </div>
+      <div
+        style={{
+          opacity: headP,
+          textAlign: "center",
+          fontFamily: MONO,
+          color: C.ink2,
+          fontSize: 22,
+          letterSpacing: "0.2em",
+          textTransform: "uppercase",
+          marginTop: 16,
+        }}
+      >
+        I'll send them over.
+      </div>
+
+      {/* Engagement row */}
+      <div
+        style={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          gap: 22,
+          justifyContent: "center",
+        }}
+      >
+        {/* Like button */}
+        <div
+          style={{
+            transform: `translateX(${(1 - likeP) * -60}px) scale(${heartPulse})`,
+            opacity: likeP,
+            padding: "20px 26px",
+            borderRadius: 22,
+            background: "rgba(255,255,255,0.03)",
+            border: `1px solid ${C.line}`,
+            display: "flex",
+            alignItems: "center",
+            gap: 22,
+          }}
+        >
+          <svg width="60" height="60" viewBox="0 0 24 24" fill={C.danger}>
+            <path d="M12 21s-7-4.5-9.5-9A5.5 5.5 0 0 1 12 6a5.5 5.5 0 0 1 9.5 6C19 16.5 12 21 12 21z" />
+          </svg>
+          <div style={{ flex: 1 }}>
+            <div
+              style={{
+                fontFamily: FONT,
+                color: C.ink,
+                fontSize: 38,
+                fontWeight: 600,
+                letterSpacing: "-0.02em",
+              }}
+            >
+              Like this
+            </div>
+            <div style={{ fontFamily: MONO, color: C.ink2, fontSize: 20, letterSpacing: "0.1em" }}>
+              so more people see it
+            </div>
+          </div>
+        </div>
+
+        {/* Comment box with typing */}
+        <div
+          style={{
+            transform: `translateX(${(1 - commentP) * -60}px)`,
+            opacity: commentP,
+            padding: "20px 26px",
+            borderRadius: 22,
+            background: `linear-gradient(135deg, rgba(212,102,58,0.15), rgba(240,194,58,0.1))`,
+            border: `1px solid ${C.gold}`,
+            boxShadow: `0 0 40px rgba(240,194,58,0.25)`,
+            display: "flex",
+            alignItems: "center",
+            gap: 22,
+          }}
+        >
+          <svg width="60" height="60" viewBox="0 0 24 24" fill="none">
+            <path
+              d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
+              stroke={C.gold}
+              strokeWidth="2.5"
+              strokeLinejoin="round"
+            />
+          </svg>
+          <div style={{ flex: 1 }}>
+            <div
+              style={{
+                fontFamily: MONO,
+                color: C.ink2,
+                fontSize: 20,
+                letterSpacing: "0.1em",
+                textTransform: "uppercase",
+                marginBottom: 4,
+              }}
+            >
+              comment
+            </div>
+            <div
+              style={{
+                fontFamily: FONT,
+                color: C.ink,
+                fontSize: 52,
+                fontWeight: 700,
+                letterSpacing: "0.08em",
+              }}
+            >
+              "{typed}
+              <span
+                style={{
+                  display: "inline-block",
+                  width: 3,
+                  height: 48,
+                  background: C.gold,
+                  marginLeft: 4,
+                  verticalAlign: "middle",
+                  opacity: cursorOn ? 1 : 0,
+                }}
+              />
+              "
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom line */}
+      <div
+        style={{
+          opacity: commentP,
+          textAlign: "center",
+          fontFamily: MONO,
+          color: C.ink2,
+          fontSize: 22,
+          letterSpacing: "0.15em",
+          textTransform: "uppercase",
+          marginBottom: 40,
+        }}
+      >
+        I'll DM the full setup →
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE ROUTER — renders the right scene for each SEGS window
+// ═══════════════════════════════════════════════════════════════
+
+const SceneRouter: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // Pick accent tone for background based on currently dominant scene
+  const sceneIdx = SEGS.findIndex((seg) => frame < seg.e * fps);
+  const accentByScene = [
+    C.claudeGlow, // 1 hook
+    C.claudeGlow, // 2 gift
+    "rgba(232,72,58,0.4)", // 3 problem
+    C.nlmGlow, // 4 connect
+    C.nlmGlow, // 5 second brain
+    "rgba(60,203,127,0.38)", // 6 benefits1
+    "rgba(240,194,58,0.38)", // 7 benefits2
+    C.nlmGlow, // 8 wrapup
+    "rgba(240,194,58,0.4)", // 9 semantic
+    "rgba(240,194,58,0.45)", // 10 changes
+    C.claudeGlow, // 11 cta
+  ];
+  const accent = accentByScene[sceneIdx === -1 ? accentByScene.length - 1 : sceneIdx];
+
+  const sp = { frame, fps };
+
+  return (
+    <>
+      <Background frame={frame} accent={accent} />
+      <AbsoluteFill style={{ opacity: so(frame, fps, SEGS[0].s, SEGS[0].e) }}>
+        <Scene1Hook {...sp} />
+      </AbsoluteFill>
+      <AbsoluteFill style={{ opacity: so(frame, fps, SEGS[1].s, SEGS[1].e) }}>
+        <Scene2Gift {...sp} />
+      </AbsoluteFill>
+      <AbsoluteFill style={{ opacity: so(frame, fps, SEGS[2].s, SEGS[2].e) }}>
+        <Scene3Problem {...sp} />
+      </AbsoluteFill>
+      <AbsoluteFill style={{ opacity: so(frame, fps, SEGS[3].s, SEGS[3].e) }}>
+        <Scene4Connect {...sp} />
+      </AbsoluteFill>
+      <AbsoluteFill style={{ opacity: so(frame, fps, SEGS[4].s, SEGS[4].e) }}>
+        <Scene5SecondBrain {...sp} />
+      </AbsoluteFill>
+      <AbsoluteFill style={{ opacity: so(frame, fps, SEGS[5].s, SEGS[5].e) }}>
+        <Scene6Benefits1 {...sp} />
+      </AbsoluteFill>
+      <AbsoluteFill style={{ opacity: so(frame, fps, SEGS[6].s, SEGS[6].e) }}>
+        <Scene7Benefits2 {...sp} />
+      </AbsoluteFill>
+      <AbsoluteFill style={{ opacity: so(frame, fps, SEGS[7].s, SEGS[7].e) }}>
+        <Scene8Wrapup {...sp} />
+      </AbsoluteFill>
+      <AbsoluteFill style={{ opacity: so(frame, fps, SEGS[8].s, SEGS[8].e) }}>
+        <Scene9Semantic {...sp} />
+      </AbsoluteFill>
+      <AbsoluteFill style={{ opacity: so(frame, fps, SEGS[9].s, SEGS[9].e) }}>
+        <Scene10Changes {...sp} />
+      </AbsoluteFill>
+      <AbsoluteFill style={{ opacity: so(frame, fps, SEGS[10].s, SEGS[10].e) }}>
+        <Scene11CTA {...sp} />
+      </AbsoluteFill>
+    </>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// MAIN COMPOSITION
+// ═══════════════════════════════════════════════════════════════
+
+export const NotebookLMReel: React.FC = () => {
+  return (
+    <AbsoluteFill style={{ background: C.bg }}>
+      {/* REFERENCE-STRIP: <Audio> tag removed — bring your own voiceover */}
+      <SceneRouter />
+    </AbsoluteFill>
+  );
+};