@devinilabs/reelstack 1.2.0

package/reference/dark/stitch.tsx

@@ -0,0 +1,3040 @@
+/**
+ * REFERENCE — StitchReel  (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/StitchReel.tsx
+ * Bundled at: 2026-05-08T18:50:39.530Z
+ */
+import React from "react";
+import {
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+  Easing,
+  AbsoluteFill,
+  staticFile,
+  Sequence,
+  OffthreadVideo,
+  Img,
+} from "remotion";
+import { Audio } from "@remotion/media";
+import { ds } from "./designSystem";
+
+// ═══════════════════════════════════════════════════════════════
+// TOKENS — dark cinematic + Claude terracotta × Stitch rose
+// ═══════════════════════════════════════════════════════════════
+
+const FONT = ds.font.sans;
+const MONO = ds.font.mono;
+
+const C = {
+  bg: "#0a0a0b",
+  bgLift: "#141416",
+  surface: "#1a1a1d",
+  surfaceLift: "#222226",
+  border: "rgba(255,255,255,0.08)",
+  borderLoud: "rgba(255,255,255,0.14)",
+  fg: "#f5f5f7",
+  fgSoft: "#d1d1d6",
+  fgMuted: "#8e8e93",
+  fgDim: "#5a5a60",
+  claude: "#D4663A",
+  claudeSoft: "#e07a54",
+  claudeDim: "rgba(212,102,58,0.15)",
+  stitch: "#ff4d9b",
+  stitchSoft: "#ff7fb8",
+  stitchDim: "rgba(255,77,155,0.15)",
+  gemini: "#4285f4",
+  geminiDim: "rgba(66,133,244,0.18)",
+  safe: "#4fc46a",
+  safeDim: "rgba(79,196,106,0.12)",
+  danger: "#e25822",
+  amber: "#fcbb00",
+  violet: "#8d54ff",
+} as const;
+
+// Scene timeline — 76.56s voiceover, 8 segments with overlapping crossfades
+const SEGS = [
+  { s: 0, e: 8.3, name: "Hook" },
+  { s: 7.9, e: 14.6, name: "Stack" },
+  { s: 14.1, e: 22.6, name: "Features" },
+  { s: 22.1, e: 30.5, name: "Unlock" },
+  { s: 30, e: 44, name: "Magic" },
+  { s: 43.5, e: 52, name: "Clone" },
+  { s: 51.5, e: 67.5, name: "Test" },
+  { s: 67, e: 76.56, name: "CTA" },
+] as const;
+
+// ═══════════════════════════════════════════════════════════════
+// UTILITIES
+// ═══════════════════════════════════════════════════════════════
+
+const so = (
+  frame: number,
+  fps: number,
+  startS: number,
+  endS: number,
+  fadeIn = 0.45,
+  fadeOut = 0.55,
+) =>
+  interpolate(
+    frame,
+    [startS * fps, (startS + fadeIn) * fps, (endS - fadeOut) * fps, endS * fps],
+    [0, 1, 1, 0],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
+  );
+
+const lf = (frame: number, fps: number, startSec: number) =>
+  Math.max(0, frame - startSec * fps);
+
+const gsapSpring = (
+  f: number,
+  fps: number,
+  delaySec = 0,
+  kind: "bouncy" | "snappy" | "gentle" | "glass" = "snappy",
+) =>
+  spring({
+    frame: f,
+    fps,
+    delay: Math.round(delaySec * fps),
+    config: ds.spring[kind],
+  });
+
+// GSAP back.out(1.7) approximation
+const backOut = (t: number) => {
+  const c1 = 1.70158;
+  const c3 = c1 + 1;
+  return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
+};
+
+interface SP {
+  frame: number;
+  fps: number;
+}
+
+// ═══════════════════════════════════════════════════════════════
+// BACKGROUND — dark cinematic: dual spotlights + grid + grain
+// ═══════════════════════════════════════════════════════════════
+
+const Background: React.FC<{ frame: number; fps: number }> = ({ frame }) => {
+  const drift = (Math.sin(frame * 0.004) + 1) * 0.5;
+  const drift2 = (Math.cos(frame * 0.0032) + 1) * 0.5;
+  const vignettePulse = 0.38 + Math.sin(frame * 0.008) * 0.04;
+
+  return (
+    <AbsoluteFill>
+      <div style={{ width: "100%", height: "100%", background: C.bg }} />
+      {/* Claude terracotta spotlight */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse 780px 880px at ${18 + drift * 60}% ${14 + drift2 * 40}%, rgba(212,102,58,0.13) 0%, transparent 60%)`,
+        }}
+      />
+      {/* Stitch rose counter-spot */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse 640px 820px at ${82 - drift * 50}% ${78 + drift2 * 20}%, rgba(255,77,155,0.12) 0%, transparent 58%)`,
+        }}
+      />
+      {/* Grid lines */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          backgroundImage: `
+            linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px)
+          `,
+          backgroundSize: "72px 72px",
+          maskImage: "radial-gradient(ellipse at 50% 50%, black 30%, transparent 85%)",
+          WebkitMaskImage: "radial-gradient(ellipse at 50% 50%, black 30%, transparent 85%)",
+        }}
+      />
+      {/* Noise grain */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          opacity: 0.06,
+          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='200' height='200' filter='url(%23n)' opacity='0.7'/></svg>")`,
+        }}
+      />
+      {/* Vignette */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,${vignettePulse}) 100%)`,
+        }}
+      />
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SAFE ZONE — IG reel chrome reserves top 288 / bottom 422
+// ═══════════════════════════════════════════════════════════════
+
+const SafeZone: React.FC<{ children: React.ReactNode; style?: React.CSSProperties }> = ({
+  children,
+  style,
+}) => (
+  <div
+    style={{
+      position: "absolute",
+      top: 290,
+      left: 0,
+      right: 0,
+      bottom: 430,
+      ...style,
+    }}
+  >
+    {children}
+  </div>
+);
+
+// ═══════════════════════════════════════════════════════════════
+// PRIMITIVES — logos, pills, chrome, kinetic text
+// ═══════════════════════════════════════════════════════════════
+
+const StitchGlyph: React.FC<{ size?: number; color?: string; style?: React.CSSProperties }> = ({
+  size = 96,
+  color = C.stitch,
+  style,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 100 100"
+    style={{ filter: `drop-shadow(0 0 ${size * 0.35}px ${color}55)`, ...style }}
+  >
+    <rect
+      x="10"
+      y="10"
+      width="80"
+      height="80"
+      rx="22"
+      fill="none"
+      stroke={color}
+      strokeWidth="4"
+      strokeDasharray="8 6"
+    />
+    <circle cx="50" cy="50" r="14" fill={color} />
+    <circle cx="26" cy="26" r="3.5" fill={color} />
+    <circle cx="74" cy="26" r="3.5" fill={color} />
+    <circle cx="26" cy="74" r="3.5" fill={color} />
+    <circle cx="74" cy="74" r="3.5" fill={color} />
+  </svg>
+);
+
+const ClaudeGlyph: React.FC<{ size?: number; color?: string; style?: React.CSSProperties }> = ({
+  size = 96,
+  color = C.claude,
+  style,
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    style={{ filter: `drop-shadow(0 0 ${size * 0.3}px ${color}55)`, ...style }}
+  >
+    <path
+      fill={color}
+      d="M17.304 3.541h-3.672l6.696 16.918H24Zm-10.608 0L0 20.459h3.744l1.37-3.553h7.005l1.369 3.553h3.744L10.536 3.541Zm-.371 10.223L8.616 7.82l2.291 5.945Z"
+    />
+  </svg>
+);
+
+const GeminiGlyph: React.FC<{ size?: number; style?: React.CSSProperties }> = ({
+  size = 64,
+  style,
+}) => (
+  <svg width={size} height={size} viewBox="0 0 28 28" style={style}>
+    <defs>
+      <linearGradient id="gemini-grad" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop offset="0%" stopColor="#4285f4" />
+        <stop offset="55%" stopColor="#9b72cb" />
+        <stop offset="100%" stopColor="#d96570" />
+      </linearGradient>
+    </defs>
+    <path
+      d="M14 0c0 7.732 6.268 14 14 14-7.732 0-14 6.268-14 14 0-7.732-6.268-14-14-14C7.732 14 14 7.732 14 0Z"
+      fill="url(#gemini-grad)"
+    />
+  </svg>
+);
+
+const PillBadge: React.FC<{
+  children: React.ReactNode;
+  dotColor?: string;
+  pulseDot?: number;
+  style?: React.CSSProperties;
+}> = ({ children, dotColor = C.stitch, pulseDot = 1, style }) => (
+  <div
+    style={{
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 12,
+      padding: "10px 22px",
+      background: "rgba(255,255,255,0.06)",
+      border: `1px solid ${C.borderLoud}`,
+      borderRadius: 9999,
+      backdropFilter: "blur(10px)",
+      ...style,
+    }}
+  >
+    <div
+      style={{
+        width: 8,
+        height: 8,
+        borderRadius: "50%",
+        background: dotColor,
+        boxShadow: `0 0 ${10 + pulseDot * 10}px ${dotColor}`,
+        opacity: pulseDot,
+      }}
+    />
+    <span
+      style={{
+        fontFamily: MONO,
+        fontSize: 15,
+        fontWeight: 500,
+        color: C.fgSoft,
+        letterSpacing: "0.18em",
+      }}
+    >
+      {children}
+    </span>
+  </div>
+);
+
+const BrowserChrome: React.FC<{
+  children: React.ReactNode;
+  width: number;
+  height: number;
+  url?: string;
+  style?: React.CSSProperties;
+}> = ({ children, width, height, url = "stitch.withgoogle.com", style }) => (
+  <div
+    style={{
+      width,
+      height,
+      borderRadius: 20,
+      background: C.surfaceLift,
+      border: `1px solid ${C.borderLoud}`,
+      boxShadow: [
+        "0 40px 90px -20px rgba(0,0,0,0.7)",
+        "0 20px 40px -15px rgba(255,77,155,0.14)",
+        "inset 0 1px 0 rgba(255,255,255,0.06)",
+      ].join(", "),
+      overflow: "hidden",
+      ...style,
+    }}
+  >
+    <div
+      style={{
+        height: 42,
+        background: C.surface,
+        borderBottom: `1px solid ${C.border}`,
+        display: "flex",
+        alignItems: "center",
+        padding: "0 18px",
+        gap: 16,
+      }}
+    >
+      <div style={{ display: "flex", gap: 7 }}>
+        <div style={{ width: 11, height: 11, borderRadius: "50%", background: "#ff5f57" }} />
+        <div style={{ width: 11, height: 11, borderRadius: "50%", background: "#ffbd2e" }} />
+        <div style={{ width: 11, height: 11, borderRadius: "50%", background: "#28ca42" }} />
+      </div>
+      <div
+        style={{
+          flex: 1,
+          height: 24,
+          borderRadius: 6,
+          background: C.bg,
+          display: "flex",
+          alignItems: "center",
+          padding: "0 10px",
+          fontFamily: MONO,
+          fontSize: 12,
+          color: C.fgMuted,
+          letterSpacing: "0.02em",
+        }}
+      >
+        {url}
+      </div>
+    </div>
+    <div style={{ width: "100%", height: height - 42, overflow: "hidden" }}>{children}</div>
+  </div>
+);
+
+const KineticText: React.FC<{
+  text: string;
+  f: number;
+  fps: number;
+  startSec?: number;
+  wordStagger?: number;
+  size: number;
+  weight?: number;
+  color?: string;
+  mono?: boolean;
+  style?: React.CSSProperties;
+}> = ({
+  text,
+  f,
+  fps,
+  startSec = 0,
+  wordStagger = 0.06,
+  size,
+  weight = 700,
+  color = C.fg,
+  mono = false,
+  style,
+}) => {
+  const words = text.split(" ");
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "0 0.32em",
+        justifyContent: "center",
+        fontFamily: mono ? MONO : FONT,
+        fontSize: size,
+        fontWeight: weight,
+        color,
+        letterSpacing: "-0.03em",
+        lineHeight: 1.04,
+        ...style,
+      }}
+    >
+      {words.map((w, i) => {
+        const s = gsapSpring(f, fps, startSec + i * wordStagger, "snappy");
+        const y = interpolate(s, [0, 1], [40, 0]);
+        const op = interpolate(s, [0, 0.4], [0, 1], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+        });
+        return (
+          <span
+            key={`${w}-${i}`}
+            style={{ display: "inline-block", transform: `translateY(${y}px)`, opacity: op }}
+          >
+            {w}
+          </span>
+        );
+      })}
+    </div>
+  );
+};
+
+const Typewriter: React.FC<{
+  text: string;
+  f: number;
+  fps: number;
+  startSec: number;
+  cps?: number;
+  caret?: boolean;
+  style?: React.CSSProperties;
+}> = ({ text, f, fps, startSec, cps = 55, caret = true, style }) => {
+  const elapsed = Math.max(0, (f - startSec * fps) / fps);
+  const chars = Math.min(text.length, Math.floor(elapsed * cps));
+  const typed = text.slice(0, chars);
+  const blink = Math.floor(f / 10) % 2 === 0;
+  const done = chars >= text.length;
+  return (
+    <span style={style}>
+      {typed}
+      {caret && !done && blink ? <span style={{ opacity: 0.85 }}>▍</span> : null}
+    </span>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 1 — HOOK (0 → 8.3s)
+// "Google Stitch plugs into Claude Code, saves tokens. This changes everything."
+// ═══════════════════════════════════════════════════════════════
+
+const HookScene: React.FC<SP> = ({ frame, fps }) => {
+  const op = so(frame, fps, SEGS[0].s, SEGS[0].e);
+  if (op === 0) return null;
+  const f = lf(frame, fps, SEGS[0].s);
+
+  // Top pill
+  const pillSpring = gsapSpring(f, fps, 0.1, "bouncy");
+  const pillPulse = 0.6 + Math.sin(f * 0.15) * 0.4;
+
+  // Logo dock — Stitch flies from left, Claude from right, meet at center
+  const dockProg = interpolate(f, [0.3 * fps, 1.8 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.bezier(0.25, 1, 0.5, 1),
+  });
+  const dockX = interpolate(dockProg, [0, 1], [320, 0]);
+  const dockOp = interpolate(dockProg, [0, 0.3], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  // Impact flash at dock moment
+  const impact = interpolate(f, [1.7 * fps, 2.0 * fps, 2.4 * fps], [0, 1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Big wordmark — smash in after dock
+  const smashSpring = gsapSpring(f, fps, 2.1, "bouncy");
+  const smashScale = interpolate(smashSpring, [0, 1], [1.5, 1]);
+  const smashOp = interpolate(smashSpring, [0, 0.3], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const shakeT = interpolate(f, [2.1 * fps, 2.7 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const shakeX = Math.sin(shakeT * 22) * (1 - shakeT) * 5;
+
+  // "TOKEN SAVER" subtitle — after wordmark
+  const subSpring = gsapSpring(f, fps, 3.2, "gentle");
+  const subOp = interpolate(subSpring, [0, 0.5], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Slam closer "THIS CHANGES EVERYTHING"
+  const closeT = interpolate(f, [5.8 * fps, 6.3 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const closeScale = 0.85 + backOut(closeT) * 0.15;
+  const closeOp = closeT;
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      <SafeZone>
+        {/* Top pill */}
+        <div
+          style={{
+            position: "absolute",
+            top: 10,
+            left: "50%",
+            transform: `translate(-50%, 0) scale(${interpolate(pillSpring, [0, 1], [0.6, 1])})`,
+            opacity: interpolate(pillSpring, [0, 0.3], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            }),
+          }}
+        >
+          <PillBadge dotColor={C.stitch} pulseDot={pillPulse}>
+            GOOGLE STITCH × CLAUDE CODE
+          </PillBadge>
+        </div>
+
+        {/* Logo dock — Stitch + × + Claude */}
+        <div
+          style={{
+            position: "absolute",
+            top: 120,
+            left: 0,
+            right: 0,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            gap: 48,
+            opacity: dockOp,
+          }}
+        >
+          <div style={{ transform: `translateX(${-dockX}px)` }}>
+            <StitchGlyph size={128} />
+          </div>
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 80,
+              fontWeight: 300,
+              color: C.fgMuted,
+              opacity: interpolate(dockProg, [0.6, 1], [0, 1], {
+                extrapolateLeft: "clamp",
+                extrapolateRight: "clamp",
+              }),
+              transform: `scale(${interpolate(impact, [0, 1], [1, 1.25])})`,
+            }}
+          >
+            +
+          </div>
+          <div style={{ transform: `translateX(${dockX}px)` }}>
+            <ClaudeGlyph size={128} />
+          </div>
+        </div>
+
+        {/* Impact flash ring */}
+        <div
+          style={{
+            position: "absolute",
+            top: 148,
+            left: "50%",
+            transform: `translate(-50%, 0) scale(${1 + impact * 1.8})`,
+            width: 140,
+            height: 140,
+            borderRadius: "50%",
+            border: `2px solid ${C.stitch}`,
+            opacity: impact * 0.7,
+            pointerEvents: "none",
+          }}
+        />
+
+        {/* Big wordmark */}
+        <div
+          style={{
+            position: "absolute",
+            top: 350,
+            left: 0,
+            right: 0,
+            textAlign: "center",
+            transform: `scale(${smashScale}) translateX(${shakeX}px)`,
+            opacity: smashOp,
+          }}
+        >
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 138,
+              fontWeight: 700,
+              color: C.fg,
+              letterSpacing: "-0.055em",
+              lineHeight: 0.92,
+            }}
+          >
+            plug Stitch
+          </div>
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 138,
+              fontWeight: 700,
+              color: C.fg,
+              letterSpacing: "-0.055em",
+              lineHeight: 0.92,
+              marginTop: 4,
+            }}
+          >
+            into{" "}
+            <span style={{ color: C.claude, textShadow: "0 0 60px rgba(212,102,58,0.45)" }}>
+              Claude Code
+            </span>
+          </div>
+        </div>
+
+        {/* Subtitle */}
+        <div
+          style={{
+            position: "absolute",
+            top: 690,
+            left: 0,
+            right: 0,
+            textAlign: "center",
+            opacity: subOp,
+          }}
+        >
+          <span
+            style={{
+              fontFamily: MONO,
+              fontSize: 22,
+              fontWeight: 500,
+              color: C.fgMuted,
+              letterSpacing: "0.22em",
+            }}
+          >
+            ——  SAVES A LOT OF CLAUDE TOKENS  ——
+          </span>
+        </div>
+
+        {/* Closer */}
+        <div
+          style={{
+            position: "absolute",
+            bottom: 40,
+            left: 0,
+            right: 0,
+            textAlign: "center",
+            transform: `scale(${closeScale})`,
+            opacity: closeOp,
+          }}
+        >
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 58,
+              fontWeight: 700,
+              color: C.stitch,
+              letterSpacing: "-0.035em",
+              lineHeight: 1.02,
+              textShadow: "0 0 60px rgba(255,77,155,0.5)",
+            }}
+          >
+            this changes everything.
+          </div>
+        </div>
+      </SafeZone>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 2 — STACK (7.9 → 14.6s)
+// "Powered by Gemini 3.1. One-click install. Your coding agent can design."
+// ═══════════════════════════════════════════════════════════════
+
+const StackScene: React.FC<SP> = ({ frame, fps }) => {
+  const op = so(frame, fps, SEGS[1].s, SEGS[1].e);
+  if (op === 0) return null;
+  const f = lf(frame, fps, SEGS[1].s);
+
+  // "POWERED BY" eyebrow
+  const eyebrowS = gsapSpring(f, fps, 0.1, "gentle");
+  // Gemini badge slam
+  const gemS = gsapSpring(f, fps, 0.4, "bouncy");
+  const gemScale = interpolate(gemS, [0, 1], [1.4, 1]);
+  const gemOp = interpolate(gemS, [0, 0.3], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Target install cards
+  const card1 = gsapSpring(f, fps, 1.6, "snappy");
+  const card2 = gsapSpring(f, fps, 1.8, "snappy");
+
+  // Terminal typewriter
+  const termS = gsapSpring(f, fps, 2.6, "glass");
+  const termOp = interpolate(termS, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const termY = interpolate(termS, [0, 1], [30, 0]);
+  const checkT = interpolate(f, [4.2 * fps, 4.8 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Bottom tagline
+  const tagOp = interpolate(f, [4.8 * fps, 5.4 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      <SafeZone>
+        {/* Eyebrow */}
+        <div
+          style={{
+            position: "absolute",
+            top: 10,
+            left: 0,
+            right: 0,
+            textAlign: "center",
+            opacity: interpolate(eyebrowS, [0, 0.5], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            }),
+          }}
+        >
+          <span
+            style={{
+              fontFamily: MONO,
+              fontSize: 18,
+              fontWeight: 500,
+              color: C.fgMuted,
+              letterSpacing: "0.28em",
+            }}
+          >
+            POWERED BY
+          </span>
+        </div>
+
+        {/* Gemini 3.1 huge badge */}
+        <div
+          style={{
+            position: "absolute",
+            top: 60,
+            left: 0,
+            right: 0,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            gap: 22,
+            transform: `scale(${gemScale})`,
+            opacity: gemOp,
+          }}
+        >
+          <GeminiGlyph size={84} />
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 110,
+              fontWeight: 700,
+              letterSpacing: "-0.045em",
+              background: "linear-gradient(92deg, #4285f4, #9b72cb 55%, #d96570)",
+              WebkitBackgroundClip: "text",
+              WebkitTextFillColor: "transparent",
+              backgroundClip: "text",
+            }}
+          >
+            Gemini 3.1
+          </div>
+        </div>
+
+        {/* One-click install header */}
+        <div
+          style={{
+            position: "absolute",
+            top: 250,
+            left: 0,
+            right: 0,
+            textAlign: "center",
+            opacity: interpolate(f, [1.2 * fps, 1.6 * fps], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            }),
+          }}
+        >
+          <span
+            style={{
+              fontFamily: FONT,
+              fontSize: 40,
+              fontWeight: 600,
+              color: C.fgSoft,
+              letterSpacing: "-0.025em",
+            }}
+          >
+            one-click install into
+          </span>
+        </div>
+
+        {/* Two target cards */}
+        <div
+          style={{
+            position: "absolute",
+            top: 320,
+            left: 60,
+            right: 60,
+            display: "grid",
+            gridTemplateColumns: "1fr 1fr",
+            gap: 20,
+          }}
+        >
+          {[
+            { key: "cc", label: "Claude Code", color: C.claude, dot: C.claude, spring: card1, icon: "cc" },
+            { key: "ag", label: "Antigravity", color: C.violet, dot: C.violet, spring: card2, icon: "ag" },
+          ].map((t) => {
+            const s = t.spring;
+            const y = interpolate(s, [0, 1], [60, 0]);
+            const o = interpolate(s, [0, 0.4], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            });
+            return (
+              <div
+                key={t.key}
+                style={{
+                  padding: "24px 20px",
+                  borderRadius: 20,
+                  background: C.surface,
+                  border: `1px solid ${C.border}`,
+                  borderTop: `3px solid ${t.color}`,
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: 14,
+                  transform: `translateY(${y}px)`,
+                  opacity: o,
+                  boxShadow: ds.shadow.card,
+                }}
+              >
+                <div
+                  style={{
+                    width: 60,
+                    height: 60,
+                    borderRadius: 16,
+                    background: `${t.color}26`,
+                    border: `1px solid ${t.color}55`,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  {t.icon === "cc" ? (
+                    <ClaudeGlyph size={32} />
+                  ) : (
+                    <svg width="30" height="30" viewBox="0 0 24 24" fill="none">
+                      <circle cx="12" cy="12" r="9" stroke={t.color} strokeWidth="2" />
+                      <path d="M12 3v18M3 12h18" stroke={t.color} strokeWidth="2" strokeLinecap="round" />
+                    </svg>
+                  )}
+                </div>
+                <div
+                  style={{
+                    fontFamily: FONT,
+                    fontSize: 24,
+                    fontWeight: 600,
+                    color: C.fg,
+                    letterSpacing: "-0.02em",
+                  }}
+                >
+                  {t.label}
+                </div>
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8,
+                    padding: "4px 12px",
+                    borderRadius: 9999,
+                    background: `${C.safeDim}`,
+                    border: `1px solid ${C.safe}55`,
+                  }}
+                >
+                  <div
+                    style={{
+                      width: 6,
+                      height: 6,
+                      borderRadius: "50%",
+                      background: C.safe,
+                      boxShadow: `0 0 8px ${C.safe}`,
+                    }}
+                  />
+                  <span
+                    style={{
+                      fontFamily: MONO,
+                      fontSize: 12,
+                      fontWeight: 500,
+                      color: C.safe,
+                      letterSpacing: "0.12em",
+                    }}
+                  >
+                    READY
+                  </span>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Terminal */}
+        <div
+          style={{
+            position: "absolute",
+            top: 640,
+            left: 60,
+            right: 60,
+            transform: `translateY(${termY}px)`,
+            opacity: termOp,
+          }}
+        >
+          <div
+            style={{
+              borderRadius: 16,
+              background: C.bg,
+              border: `1px solid ${C.borderLoud}`,
+              padding: "18px 24px",
+              fontFamily: MONO,
+              fontSize: 22,
+              color: C.fg,
+              letterSpacing: 0,
+              lineHeight: 1.6,
+              boxShadow: "0 20px 50px -10px rgba(0,0,0,0.6)",
+            }}
+          >
+            <div style={{ color: C.fgDim }}>
+              <span style={{ color: C.stitch }}>$</span>{" "}
+              <Typewriter text="claude plugin install stitch" f={f} fps={fps} startSec={2.8} cps={28} />
+            </div>
+            <div
+              style={{
+                color: C.safe,
+                opacity: checkT,
+                transform: `translateY(${interpolate(checkT, [0, 1], [10, 0])}px)`,
+                display: "flex",
+                alignItems: "center",
+                gap: 10,
+                marginTop: 4,
+              }}
+            >
+              <span>✓</span>
+              <span style={{ color: C.fgSoft }}>installed — ready to design</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Tagline */}
+        <div
+          style={{
+            position: "absolute",
+            bottom: 10,
+            left: 0,
+            right: 0,
+            textAlign: "center",
+            opacity: tagOp,
+          }}
+        >
+          <span
+            style={{
+              fontFamily: FONT,
+              fontSize: 40,
+              fontWeight: 600,
+              color: C.fgSoft,
+              letterSpacing: "-0.025em",
+            }}
+          >
+            your coding agent can{" "}
+            <span style={{ color: C.stitch, fontStyle: "italic" }}>design</span>.
+          </span>
+        </div>
+      </SafeZone>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 3 — FEATURES (14.1 → 22.6s)
+// "Prompt a full website. Edit text on canvas. Drop a URL → Nano Banana 2."
+// ═══════════════════════════════════════════════════════════════
+
+const FEATURES = [
+  { t: 0.2, dur: 2.5, title: "prompt a full website", mono: "→ generate.stitch", icon: "prompt" },
+  { t: 2.7, dur: 2.3, title: "edit text on the canvas", mono: "→ canvas.direct", icon: "edit" },
+  { t: 5.0, dur: 3.3, title: "drop a URL → redesign", mono: "→ Nano Banana 2", icon: "url" },
+] as const;
+
+const FeaturesScene: React.FC<SP> = ({ frame, fps }) => {
+  const op = so(frame, fps, SEGS[2].s, SEGS[2].e);
+  if (op === 0) return null;
+  const f = lf(frame, fps, SEGS[2].s);
+  const durFrames = Math.round((SEGS[2].e - SEGS[2].s) * fps);
+
+  // Video chrome entrance
+  const vidS = gsapSpring(f, fps, 0.1, "glass");
+  const vidScale = interpolate(vidS, [0, 1], [0.9, 1]);
+  const vidOp = interpolate(vidS, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  // Perspective tilt — steady subtle
+  const tilt = -3 + Math.sin(f * 0.01) * 1;
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      <SafeZone>
+        {/* Eyebrow pill */}
+        <div
+          style={{
+            position: "absolute",
+            top: 10,
+            left: "50%",
+            transform: "translate(-50%, 0)",
+            opacity: vidOp,
+          }}
+        >
+          <PillBadge dotColor={C.stitch} pulseDot={0.6 + Math.sin(f * 0.15) * 0.4}>
+            STITCH · LIVE DEMO
+          </PillBadge>
+        </div>
+
+        {/* Browser chrome with video */}
+        <div
+          style={{
+            position: "absolute",
+            top: 85,
+            left: 0,
+            right: 0,
+            display: "flex",
+            justifyContent: "center",
+            transform: `scale(${vidScale}) rotateX(${tilt * 0.6}deg) rotateY(${tilt * 0.2}deg)`,
+            opacity: vidOp,
+            perspective: 1400,
+          }}
+        >
+          <BrowserChrome width={960} height={600} url="stitch.withgoogle.com/generate">
+            <Sequence
+              from={Math.round(SEGS[2].s * fps)}
+              durationInFrames={durFrames}
+            >
+              {/* REFERENCE-STRIP: <OffthreadVideo> removed — bring your own clip */}
+            </Sequence>
+          </BrowserChrome>
+        </div>
+
+        {/* Feature callout track */}
+        <div
+          style={{
+            position: "absolute",
+            bottom: 60,
+            left: 60,
+            right: 60,
+            height: 200,
+          }}
+        >
+          {FEATURES.map((feat, i) => {
+            const start = feat.t;
+            const end = feat.t + feat.dur;
+            const inS = gsapSpring(f, fps, start, "snappy");
+            const inOp = interpolate(inS, [0, 0.35], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            });
+            const outOp = interpolate(f, [(end - 0.4) * fps, end * fps], [1, 0], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            });
+            const ox = interpolate(inS, [0, 1], [120, 0]);
+            const o = Math.min(inOp, outOp);
+            if (o <= 0) return null;
+            return (
+              <div
+                key={i}
+                style={{
+                  position: "absolute",
+                  inset: 0,
+                  opacity: o,
+                  transform: `translateX(${ox}px)`,
+                }}
+              >
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 12,
+                    fontFamily: MONO,
+                    fontSize: 15,
+                    color: C.stitch,
+                    letterSpacing: "0.2em",
+                    marginBottom: 10,
+                  }}
+                >
+                  <div
+                    style={{
+                      width: 26,
+                      height: 1,
+                      background: C.stitch,
+                      boxShadow: `0 0 8px ${C.stitch}`,
+                    }}
+                  />
+                  FEATURE · 0{i + 1} / 03
+                </div>
+                <div
+                  style={{
+                    fontFamily: FONT,
+                    fontSize: 64,
+                    fontWeight: 700,
+                    color: C.fg,
+                    letterSpacing: "-0.035em",
+                    lineHeight: 1.02,
+                  }}
+                >
+                  {feat.title}
+                </div>
+                <div
+                  style={{
+                    fontFamily: MONO,
+                    fontSize: 18,
+                    fontWeight: 500,
+                    color: C.fgMuted,
+                    letterSpacing: "0.08em",
+                    marginTop: 10,
+                  }}
+                >
+                  {feat.mono}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Progress dots */}
+        <div
+          style={{
+            position: "absolute",
+            bottom: 10,
+            left: "50%",
+            transform: "translate(-50%, 0)",
+            display: "flex",
+            gap: 10,
+          }}
+        >
+          {FEATURES.map((feat, i) => {
+            const start = feat.t;
+            const end = feat.t + feat.dur;
+            const active = f >= start * fps && f < end * fps;
+            return (
+              <div
+                key={i}
+                style={{
+                  width: active ? 28 : 10,
+                  height: 6,
+                  borderRadius: 6,
+                  background: active ? C.stitch : C.border,
+                  boxShadow: active ? `0 0 10px ${C.stitch}` : "none",
+                  transition: "width 200ms",
+                }}
+              />
+            );
+          })}
+        </div>
+      </SafeZone>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 4 — UNLOCK (22.1 → 30.5s)
+// "The real unlock — Stitch GitHub repo packed with skills."
+// ═══════════════════════════════════════════════════════════════
+
+const UnlockScene: React.FC<SP> = ({ frame, fps }) => {
+  const op = so(frame, fps, SEGS[3].s, SEGS[3].e);
+  if (op === 0) return null;
+  const f = lf(frame, fps, SEGS[3].s);
+
+  // Pivot headline
+  const headS = gsapSpring(f, fps, 0, "bouncy");
+  const headScale = interpolate(headS, [0, 1], [1.3, 1]);
+  const headOp = interpolate(headS, [0, 0.3], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Git repo image — slow zoom
+  const repoS = gsapSpring(f, fps, 1.2, "glass");
+  const repoOp = interpolate(repoS, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const baseScale = 1 + interpolate(f, [1.5 * fps, (SEGS[3].e - SEGS[3].s) * fps], [0, 0.09], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Scan line
+  const scanY = ((f * 3) % 700) - 50;
+
+  // Skills folder highlight ring — at 3.5s
+  const ringS = gsapSpring(f, fps, 3.3, "snappy");
+  const ringScale = interpolate(ringS, [0, 1], [1.4, 1]);
+  const ringOp = interpolate(ringS, [0, 0.35], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Stats strip
+  const statS = gsapSpring(f, fps, 4.3, "snappy");
+  const statOp = interpolate(statS, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Closing line
+  const closeOp = interpolate(f, [5.5 * fps, 6.2 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const closeShake = Math.sin(f * 0.4) * 2;
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      <SafeZone>
+        {/* Pivot */}
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            textAlign: "center",
+            transform: `scale(${headScale})`,
+            opacity: headOp,
+          }}
+        >
+          <div
+            style={{
+              fontFamily: MONO,
+              fontSize: 16,
+              color: C.stitch,
+              letterSpacing: "0.26em",
+              marginBottom: 8,
+            }}
+          >
+            ——  THE REAL UNLOCK  ——
+          </div>
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 68,
+              fontWeight: 700,
+              color: C.fg,
+              letterSpacing: "-0.04em",
+              lineHeight: 1.0,
+            }}
+          >
+            a GitHub repo{" "}
+            <span style={{ color: C.stitch }}>packed with skills</span>
+          </div>
+        </div>
+
+        {/* Git repo image in browser chrome */}
+        <div
+          style={{
+            position: "absolute",
+            top: 200,
+            left: 0,
+            right: 0,
+            display: "flex",
+            justifyContent: "center",
+            opacity: repoOp,
+          }}
+        >
+          <div
+            style={{
+              transform: `scale(${baseScale})`,
+              transformOrigin: "center center",
+            }}
+          >
+            <BrowserChrome width={960} height={470} url="github.com/Leonxinx/stitch-skills">
+              <div style={{ position: "relative", width: "100%", height: "100%", background: C.bg }}>
+                <Img
+                  src={staticFile("captures/your-asset.png" /* REFERENCE-STRIP */)}
+                  style={{ width: "100%", height: "100%", objectFit: "contain", objectPosition: "center top" }}
+                />
+                {/* Scan line */}
+                <div
+                  style={{
+                    position: "absolute",
+                    left: 0,
+                    right: 0,
+                    top: scanY,
+                    height: 80,
+                    background: `linear-gradient(180deg, transparent, rgba(255,77,155,0.22), transparent)`,
+                    pointerEvents: "none",
+                  }}
+                />
+                {/* Skills folder ring */}
+                <div
+                  style={{
+                    position: "absolute",
+                    left: 108,
+                    top: 110,
+                    width: 130,
+                    height: 28,
+                    borderRadius: 8,
+                    border: `2px solid ${C.stitch}`,
+                    opacity: ringOp,
+                    transform: `scale(${ringScale})`,
+                    transformOrigin: "center center",
+                    boxShadow: `0 0 30px ${C.stitch}80, inset 0 0 20px ${C.stitchDim}`,
+                    pointerEvents: "none",
+                  }}
+                />
+                {/* Arrow callout to skills */}
+                <div
+                  style={{
+                    position: "absolute",
+                    left: 252,
+                    top: 112,
+                    opacity: ringOp,
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 10,
+                  }}
+                >
+                  <svg width="40" height="24" viewBox="0 0 40 24">
+                    <path
+                      d="M38 12 H4 M10 6 L4 12 L10 18"
+                      stroke={C.stitch}
+                      strokeWidth="2.5"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      fill="none"
+                    />
+                  </svg>
+                  <div
+                    style={{
+                      fontFamily: MONO,
+                      fontSize: 15,
+                      fontWeight: 600,
+                      color: C.stitch,
+                      letterSpacing: "0.2em",
+                      background: C.bg,
+                      border: `1px solid ${C.stitch}`,
+                      padding: "6px 12px",
+                      borderRadius: 8,
+                    }}
+                  >
+                    SKILLS FOLDER
+                  </div>
+                </div>
+              </div>
+            </BrowserChrome>
+          </div>
+        </div>
+
+        {/* Stats strip */}
+        <div
+          style={{
+            position: "absolute",
+            bottom: 80,
+            left: 0,
+            right: 0,
+            display: "flex",
+            justifyContent: "center",
+            gap: 18,
+            opacity: statOp,
+          }}
+        >
+          {[
+            { n: "4.7K", l: "STARS", c: C.amber },
+            { n: "43", l: "WATCHING", c: C.stitch },
+            { n: "560", l: "FORKS", c: C.safe },
+          ].map((s, i) => {
+            const d = gsapSpring(f, fps, 4.3 + i * 0.15, "bouncy");
+            const y = interpolate(d, [0, 1], [30, 0]);
+            return (
+              <div
+                key={s.l}
+                style={{
+                  padding: "10px 22px",
+                  background: C.surface,
+                  border: `1px solid ${s.c}55`,
+                  borderRadius: 14,
+                  display: "flex",
+                  alignItems: "baseline",
+                  gap: 8,
+                  transform: `translateY(${y}px)`,
+                }}
+              >
+                <span
+                  style={{
+                    fontFamily: FONT,
+                    fontSize: 28,
+                    fontWeight: 700,
+                    color: s.c,
+                    letterSpacing: "-0.02em",
+                  }}
+                >
+                  {s.n}
+                </span>
+                <span
+                  style={{
+                    fontFamily: MONO,
+                    fontSize: 12,
+                    fontWeight: 500,
+                    color: C.fgMuted,
+                    letterSpacing: "0.18em",
+                  }}
+                >
+                  {s.l}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Magic closing line */}
+        <div
+          style={{
+            position: "absolute",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            textAlign: "center",
+            opacity: closeOp,
+          }}
+        >
+          <span
+            style={{
+              fontFamily: FONT,
+              fontSize: 42,
+              fontWeight: 700,
+              color: C.fg,
+              letterSpacing: "-0.03em",
+              transform: `translateX(${closeShake}px)`,
+              display: "inline-block",
+            }}
+          >
+            this is where the{" "}
+            <span style={{ color: C.stitch, textShadow: "0 0 40px rgba(255,77,155,0.6)" }}>magic</span>{" "}
+            happens.
+          </span>
+        </div>
+      </SafeZone>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 5 — MAGIC LOOP (30 → 44s)
+// Stitch screen → Claude reads → design-system.md blueprint
+// ═══════════════════════════════════════════════════════════════
+
+const MagicScene: React.FC<SP> = ({ frame, fps }) => {
+  const op = so(frame, fps, SEGS[4].s, SEGS[4].e);
+  if (op === 0) return null;
+  const f = lf(frame, fps, SEGS[4].s);
+
+  // Phase A (0-3.5s): Stitch screen lights up
+  // Phase B (3.2-7s): Arrow flows to Claude
+  // Phase C (6.5-14s): design-system.md blueprint builds line by line
+
+  const phaseAS = gsapSpring(f, fps, 0.1, "glass");
+  const phaseAOp = interpolate(phaseAS, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const phaseAOut = interpolate(f, [6.5 * fps, 7.3 * fps], [1, 0.4], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Arrow draw
+  const arrowT = interpolate(f, [3.2 * fps, 5.2 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.bezier(0.4, 0, 0.2, 1),
+  });
+
+  // Claude pulse on arrival
+  const claudeS = gsapSpring(f, fps, 4.6, "bouncy");
+  const claudeScale = interpolate(claudeS, [0, 1], [0.6, 1]);
+  const claudePulse = 1 + Math.sin(f * 0.25) * 0.04;
+
+  // Blueprint panel
+  const bpS = gsapSpring(f, fps, 6.3, "glass");
+  const bpOp = interpolate(bpS, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const bpY = interpolate(bpS, [0, 1], [50, 0]);
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      <SafeZone>
+        {/* Eyebrow */}
+        <div
+          style={{
+            position: "absolute",
+            top: 10,
+            left: "50%",
+            transform: "translate(-50%, 0)",
+            opacity: phaseAOp,
+          }}
+        >
+          <PillBadge dotColor={C.stitch} pulseDot={0.6 + Math.sin(f * 0.15) * 0.4}>
+            THE MAGIC LOOP
+          </PillBadge>
+        </div>
+
+        {/* Top row: Stitch screen → arrow → Claude */}
+        <div
+          style={{
+            position: "absolute",
+            top: 80,
+            left: 0,
+            right: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 24,
+            opacity: phaseAOp,
+          }}
+        >
+          {/* Stitch screen card */}
+          <div
+            style={{
+              opacity: phaseAOut,
+              transform: `scale(${interpolate(phaseAS, [0, 1], [0.9, 1])})`,
+            }}
+          >
+            <BrowserChrome width={420} height={300} url="stitch.withgoogle.com">
+              <div style={{ position: "relative", width: "100%", height: "100%", background: C.bgLift }}>
+                <Sequence
+                  from={Math.round(SEGS[4].s * fps)}
+                  durationInFrames={Math.round(8 * fps)}
+                >
+                  {/* REFERENCE-STRIP: <OffthreadVideo> removed — bring your own clip */}
+                </Sequence>
+              </div>
+            </BrowserChrome>
+            <div
+              style={{
+                marginTop: 12,
+                fontFamily: MONO,
+                fontSize: 14,
+                color: C.stitch,
+                letterSpacing: "0.2em",
+                textAlign: "center",
+              }}
+            >
+              01 · STITCH SCREEN
+            </div>
+          </div>
+
+          {/* Arrow path */}
+          <svg width="140" height="80" viewBox="0 0 140 80">
+            <defs>
+              <marker
+                id="arrowhead-magic"
+                viewBox="0 0 10 10"
+                refX="9"
+                refY="5"
+                markerWidth="5"
+                markerHeight="5"
+                orient="auto"
+              >
+                <path d="M0,0 L10,5 L0,10 Z" fill={C.fg} />
+              </marker>
+            </defs>
+            <path
+              d="M10 40 Q 70 10 130 40"
+              stroke={C.fg}
+              strokeWidth="2.5"
+              fill="none"
+              strokeDasharray="220"
+              strokeDashoffset={220 - arrowT * 220}
+              markerEnd={arrowT > 0.9 ? "url(#arrowhead-magic)" : undefined}
+              strokeLinecap="round"
+              opacity={arrowT > 0.02 ? 1 : 0}
+            />
+            {/* Sparkle along path */}
+            {arrowT > 0.1 && arrowT < 1 ? (
+              <circle
+                cx={10 + (130 - 10) * arrowT}
+                cy={40 + Math.sin(arrowT * Math.PI) * -20}
+                r="4"
+                fill={C.stitch}
+                style={{ filter: `drop-shadow(0 0 8px ${C.stitch})` }}
+              />
+            ) : null}
+          </svg>
+
+          {/* Claude destination */}
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: 10,
+              transform: `scale(${claudeScale * claudePulse})`,
+            }}
+          >
+            <div
+              style={{
+                width: 140,
+                height: 140,
+                borderRadius: 32,
+                background: `${C.claudeDim}`,
+                border: `2px solid ${C.claude}`,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                boxShadow: `0 0 60px rgba(212,102,58,0.45)`,
+              }}
+            >
+              <ClaudeGlyph size={72} />
+            </div>
+            <div
+              style={{
+                fontFamily: MONO,
+                fontSize: 14,
+                color: C.claude,
+                letterSpacing: "0.2em",
+              }}
+            >
+              02 · CLAUDE READS
+            </div>
+          </div>
+        </div>
+
+        {/* Blueprint panel — full width */}
+        <div
+          style={{
+            position: "absolute",
+            top: 430,
+            left: 30,
+            right: 30,
+            transform: `translateY(${bpY}px)`,
+            opacity: bpOp,
+          }}
+        >
+          <div
+            style={{
+              borderRadius: 20,
+              background: C.bg,
+              border: `1px solid ${C.borderLoud}`,
+              boxShadow: "0 30px 80px -15px rgba(0,0,0,0.75)",
+              overflow: "hidden",
+            }}
+          >
+            {/* Header bar */}
+            <div
+              style={{
+                padding: "14px 20px",
+                background: C.surface,
+                borderBottom: `1px solid ${C.border}`,
+                display: "flex",
+                alignItems: "center",
+                gap: 10,
+              }}
+            >
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+                <path
+                  d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6Z"
+                  stroke={C.stitch}
+                  strokeWidth="1.8"
+                  strokeLinejoin="round"
+                />
+                <path d="M14 2v6h6" stroke={C.stitch} strokeWidth="1.8" strokeLinejoin="round" />
+              </svg>
+              <span
+                style={{
+                  fontFamily: MONO,
+                  fontSize: 15,
+                  color: C.fgSoft,
+                  letterSpacing: "0.04em",
+                }}
+              >
+                design-system.md
+              </span>
+              <span
+                style={{
+                  marginLeft: "auto",
+                  fontFamily: MONO,
+                  fontSize: 12,
+                  color: C.fgDim,
+                  letterSpacing: "0.15em",
+                }}
+              >
+                GENERATED BY CLAUDE
+              </span>
+            </div>
+            {/* Content */}
+            <div
+              style={{
+                padding: "22px 28px",
+                fontFamily: MONO,
+                fontSize: 19,
+                lineHeight: 1.55,
+                color: C.fgSoft,
+              }}
+            >
+              <div style={{ color: C.fgDim }}>---</div>
+              <BlueprintLine
+                f={f}
+                fps={fps}
+                startSec={6.5}
+                heading="# Colors"
+                items={["primary: #ff4d9b", "neutral: zinc-950 → zinc-50", "accent: emerald-400"]}
+                color={C.stitch}
+              />
+              <BlueprintLine
+                f={f}
+                fps={fps}
+                startSec={8.5}
+                heading="# Typography"
+                items={['font: "Geist", sans-serif', "weights: 400, 600, 700", "tracking: -0.03em"]}
+                color={C.claude}
+              />
+              <BlueprintLine
+                f={f}
+                fps={fps}
+                startSec={10.4}
+                heading="# Spacing"
+                items={["base: 4px", "scale: 4 / 8 / 12 / 16 / 24 / 32"]}
+                color={C.safe}
+              />
+              <BlueprintLine
+                f={f}
+                fps={fps}
+                startSec={12.0}
+                heading="# Vibe"
+                items={["editorial, confident, minimal"]}
+                color={C.violet}
+              />
+              <div style={{ color: C.fgDim, marginTop: 8 }}>---</div>
+            </div>
+          </div>
+        </div>
+
+        {/* Floating "03" stage label */}
+        <div
+          style={{
+            position: "absolute",
+            top: 400,
+            right: 50,
+            fontFamily: MONO,
+            fontSize: 14,
+            color: C.fgMuted,
+            letterSpacing: "0.25em",
+            opacity: bpOp,
+          }}
+        >
+          03 · BUILDS BLUEPRINT
+        </div>
+      </SafeZone>
+    </AbsoluteFill>
+  );
+};
+
+const BlueprintLine: React.FC<{
+  f: number;
+  fps: number;
+  startSec: number;
+  heading: string;
+  items: string[];
+  color: string;
+}> = ({ f, fps, startSec, heading, items, color }) => {
+  const headS = gsapSpring(f, fps, startSec, "snappy");
+  const headOp = interpolate(headS, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  return (
+    <div style={{ marginTop: 10, opacity: headOp }}>
+      <span style={{ color, fontWeight: 600 }}>{heading}</span>
+      {items.map((it, i) => {
+        const itS = gsapSpring(f, fps, startSec + 0.2 + i * 0.12, "snappy");
+        const op = interpolate(itS, [0, 0.4], [0, 1], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+        });
+        const y = interpolate(itS, [0, 1], [6, 0]);
+        return (
+          <div
+            key={i}
+            style={{
+              marginTop: 2,
+              opacity: op,
+              transform: `translateY(${y}px)`,
+              color: C.fgSoft,
+            }}
+          >
+            <span style={{ color: C.fgDim }}>  • </span>
+            {it}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 6 — CLONE (43.5 → 52s)
+// "Then it clones that look across every page."
+// ═══════════════════════════════════════════════════════════════
+
+const PALETTE_CHIPS = [C.stitch, C.claude, C.safe, C.violet, C.amber, "#4285f4"];
+
+const PageTile: React.FC<{
+  label: string;
+  idx: number;
+  f: number;
+  fps: number;
+  baseDelay: number;
+  kind: "pricing" | "faq" | "dashboard" | "onboarding";
+}> = ({ label, idx, f, fps, baseDelay, kind }) => {
+  const s = gsapSpring(f, fps, baseDelay + idx * 0.14, "bouncy");
+  const y = interpolate(s, [0, 1], [60, 0]);
+  const sc = interpolate(s, [0, 1], [0.9, 1]);
+  const o = interpolate(s, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  return (
+    <div
+      style={{
+        background: C.surface,
+        borderRadius: 18,
+        border: `1px solid ${C.border}`,
+        overflow: "hidden",
+        transform: `translateY(${y}px) scale(${sc})`,
+        opacity: o,
+        boxShadow: ds.shadow.card,
+      }}
+    >
+      {/* Palette bar — shared across all tiles to show consistency */}
+      <div
+        style={{
+          display: "flex",
+          height: 8,
+        }}
+      >
+        {PALETTE_CHIPS.map((c, i) => (
+          <div key={i} style={{ flex: 1, background: c, opacity: 0.85 }} />
+        ))}
+      </div>
+
+      {/* Mini wireframe content per kind */}
+      <div
+        style={{
+          padding: 14,
+          height: 210,
+          display: "flex",
+          flexDirection: "column",
+          gap: 8,
+        }}
+      >
+        {kind === "pricing" ? (
+          <>
+            <div style={{ fontFamily: FONT, fontSize: 14, fontWeight: 600, color: C.fg }}>
+              Pricing
+            </div>
+            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 6, marginTop: 4 }}>
+              {["$0", "$19", "$49"].map((p, i) => (
+                <div
+                  key={i}
+                  style={{
+                    padding: 8,
+                    background: i === 1 ? C.stitchDim : C.bg,
+                    borderRadius: 8,
+                    border: `1px solid ${i === 1 ? C.stitch : C.border}`,
+                    textAlign: "center",
+                  }}
+                >
+                  <div style={{ fontFamily: FONT, fontSize: 20, fontWeight: 700, color: i === 1 ? C.stitch : C.fg }}>
+                    {p}
+                  </div>
+                  <div style={{ fontFamily: MONO, fontSize: 9, color: C.fgDim, marginTop: 2 }}>
+                    /MO
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div style={{ marginTop: 6, display: "flex", flexDirection: "column", gap: 4 }}>
+              {[0.9, 0.7, 0.6].map((w, i) => (
+                <div
+                  key={i}
+                  style={{
+                    height: 6,
+                    borderRadius: 3,
+                    background: C.border,
+                    width: `${w * 100}%`,
+                  }}
+                />
+              ))}
+            </div>
+          </>
+        ) : kind === "faq" ? (
+          <>
+            <div style={{ fontFamily: FONT, fontSize: 14, fontWeight: 600, color: C.fg }}>FAQ</div>
+            {[0, 1, 2, 3].map((i) => (
+              <div
+                key={i}
+                style={{
+                  padding: "8px 10px",
+                  background: C.bg,
+                  borderRadius: 8,
+                  border: `1px solid ${C.border}`,
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
+              >
+                <div
+                  style={{
+                    height: 6,
+                    borderRadius: 3,
+                    background: C.border,
+                    width: `${70 - i * 10}%`,
+                  }}
+                />
+                <div style={{ fontFamily: MONO, fontSize: 12, color: C.fgDim }}>+</div>
+              </div>
+            ))}
+          </>
+        ) : kind === "dashboard" ? (
+          <>
+            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+              <div style={{ fontFamily: FONT, fontSize: 14, fontWeight: 600, color: C.fg }}>
+                Dashboard
+              </div>
+              <div
+                style={{
+                  padding: "2px 8px",
+                  fontFamily: MONO,
+                  fontSize: 9,
+                  color: C.safe,
+                  background: C.safeDim,
+                  borderRadius: 6,
+                  letterSpacing: "0.1em",
+                }}
+              >
+                LIVE
+              </div>
+            </div>
+            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6, marginTop: 4 }}>
+              {[
+                { v: "47.2%", l: "MRR" },
+                { v: "2.8K", l: "USERS" },
+              ].map((m, i) => (
+                <div
+                  key={i}
+                  style={{
+                    padding: 8,
+                    background: C.bg,
+                    borderRadius: 8,
+                    border: `1px solid ${C.border}`,
+                  }}
+                >
+                  <div style={{ fontFamily: FONT, fontSize: 16, fontWeight: 700, color: C.fg }}>
+                    {m.v}
+                  </div>
+                  <div style={{ fontFamily: MONO, fontSize: 9, color: C.fgDim, letterSpacing: "0.14em" }}>
+                    {m.l}
+                  </div>
+                </div>
+              ))}
+            </div>
+            {/* Mini sparkline */}
+            <svg width="100%" height="60" viewBox="0 0 200 60" preserveAspectRatio="none">
+              <path
+                d="M0 45 L25 38 L50 42 L75 28 L100 30 L125 18 L150 22 L175 10 L200 14"
+                stroke={C.stitch}
+                strokeWidth="2"
+                fill="none"
+              />
+              <path
+                d="M0 45 L25 38 L50 42 L75 28 L100 30 L125 18 L150 22 L175 10 L200 14 L200 60 L0 60 Z"
+                fill={`${C.stitch}22`}
+              />
+            </svg>
+          </>
+        ) : (
+          <>
+            <div style={{ fontFamily: FONT, fontSize: 14, fontWeight: 600, color: C.fg }}>
+              Onboarding
+            </div>
+            <div style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 6 }}>
+              {[0, 1, 2, 3].map((i) => (
+                <React.Fragment key={i}>
+                  <div
+                    style={{
+                      width: 20,
+                      height: 20,
+                      borderRadius: "50%",
+                      background: i <= 1 ? C.stitch : C.bg,
+                      border: `1.5px solid ${i <= 1 ? C.stitch : C.border}`,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      fontFamily: MONO,
+                      fontSize: 10,
+                      color: i <= 1 ? "#fff" : C.fgDim,
+                      fontWeight: 600,
+                    }}
+                  >
+                    {i + 1}
+                  </div>
+                  {i < 3 ? (
+                    <div
+                      style={{
+                        flex: 1,
+                        height: 2,
+                        background: i < 1 ? C.stitch : C.border,
+                      }}
+                    />
+                  ) : null}
+                </React.Fragment>
+              ))}
+            </div>
+            <div style={{ marginTop: 10, display: "flex", flexDirection: "column", gap: 5 }}>
+              {[0.95, 0.8, 0.55, 0.4].map((w, i) => (
+                <div
+                  key={i}
+                  style={{
+                    height: 6,
+                    borderRadius: 3,
+                    background: C.border,
+                    width: `${w * 100}%`,
+                  }}
+                />
+              ))}
+            </div>
+            <div
+              style={{
+                marginTop: "auto",
+                padding: "6px 10px",
+                borderRadius: 8,
+                background: C.stitch,
+                color: "#fff",
+                fontFamily: FONT,
+                fontSize: 11,
+                fontWeight: 600,
+                textAlign: "center",
+                letterSpacing: "-0.01em",
+              }}
+            >
+              Continue →
+            </div>
+          </>
+        )}
+      </div>
+
+      {/* Footer label */}
+      <div
+        style={{
+          padding: "8px 14px",
+          borderTop: `1px solid ${C.border}`,
+          fontFamily: MONO,
+          fontSize: 12,
+          color: C.fgMuted,
+          letterSpacing: "0.16em",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <span>{label}</span>
+        <span style={{ color: C.stitch }}>●</span>
+      </div>
+    </div>
+  );
+};
+
+const CloneScene: React.FC<SP> = ({ frame, fps }) => {
+  const op = so(frame, fps, SEGS[5].s, SEGS[5].e);
+  if (op === 0) return null;
+  const f = lf(frame, fps, SEGS[5].s);
+
+  const titleS = gsapSpring(f, fps, 0, "snappy");
+  const titleOp = interpolate(titleS, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Palette preview strip — shown at top
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      <SafeZone>
+        {/* Title */}
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            textAlign: "center",
+            opacity: titleOp,
+          }}
+        >
+          <div
+            style={{
+              fontFamily: MONO,
+              fontSize: 15,
+              color: C.stitch,
+              letterSpacing: "0.26em",
+              marginBottom: 8,
+            }}
+          >
+            ——  CLONES ACROSS EVERY PAGE  ——
+          </div>
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 60,
+              fontWeight: 700,
+              color: C.fg,
+              letterSpacing: "-0.038em",
+              lineHeight: 1.0,
+            }}
+          >
+            one palette.{" "}
+            <span style={{ color: C.stitch }}>every surface.</span>
+          </div>
+        </div>
+
+        {/* Shared palette legend */}
+        <div
+          style={{
+            position: "absolute",
+            top: 175,
+            left: "50%",
+            transform: "translate(-50%, 0)",
+            display: "flex",
+            alignItems: "center",
+            gap: 10,
+            padding: "10px 18px",
+            background: C.surface,
+            border: `1px solid ${C.border}`,
+            borderRadius: 9999,
+            opacity: interpolate(f, [0.4 * fps, 1 * fps], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            }),
+          }}
+        >
+          <span
+            style={{
+              fontFamily: MONO,
+              fontSize: 12,
+              color: C.fgMuted,
+              letterSpacing: "0.2em",
+            }}
+          >
+            SHARED PALETTE
+          </span>
+          <div style={{ display: "flex", gap: 4 }}>
+            {PALETTE_CHIPS.map((c, i) => (
+              <div
+                key={i}
+                style={{
+                  width: 14,
+                  height: 14,
+                  borderRadius: 4,
+                  background: c,
+                  border: "1px solid rgba(255,255,255,0.15)",
+                }}
+              />
+            ))}
+          </div>
+        </div>
+
+        {/* 2x2 bento grid */}
+        <div
+          style={{
+            position: "absolute",
+            top: 240,
+            left: 40,
+            right: 40,
+            display: "grid",
+            gridTemplateColumns: "1fr 1fr",
+            gap: 18,
+          }}
+        >
+          <PageTile label="PRICING.TSX" idx={0} f={f} fps={fps} baseDelay={0.9} kind="pricing" />
+          <PageTile label="FAQ.TSX" idx={1} f={f} fps={fps} baseDelay={0.9} kind="faq" />
+          <PageTile label="DASHBOARD.TSX" idx={2} f={f} fps={fps} baseDelay={0.9} kind="dashboard" />
+          <PageTile label="ONBOARDING.TSX" idx={3} f={f} fps={fps} baseDelay={0.9} kind="onboarding" />
+        </div>
+      </SafeZone>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 7 — TEST (51.5 → 67.5s)
+// "Tested full loop. 3 concepts → 8 pages. Never Figma. Never design brief."
+// ═══════════════════════════════════════════════════════════════
+
+const ConceptCard: React.FC<{
+  idx: number;
+  f: number;
+  fps: number;
+  baseDelay: number;
+  name: string;
+  palette: string[];
+  selected: boolean;
+  selectT: number;
+}> = ({ idx, f, fps, baseDelay, name, palette, selected, selectT }) => {
+  const s = gsapSpring(f, fps, baseDelay + idx * 0.15, "bouncy");
+  const y = interpolate(s, [0, 1], [80, 0]);
+  const o = interpolate(s, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const nonSelectFade = selected || selectT === 0 ? 1 : 0.4;
+
+  return (
+    <div
+      style={{
+        background: C.surface,
+        borderRadius: 20,
+        border: `2px solid ${selected ? C.stitch : C.border}`,
+        padding: 18,
+        transform: `translateY(${y}px) scale(${selected ? 1 + selectT * 0.05 : 1})`,
+        opacity: o * nonSelectFade,
+        boxShadow: selected
+          ? `0 30px 70px -10px rgba(255,77,155,${0.2 + selectT * 0.3}), 0 0 ${30 + selectT * 30}px ${C.stitchDim}`
+          : ds.shadow.card,
+        transition: "box-shadow 200ms",
+        position: "relative",
+      }}
+    >
+      {/* Selection ring */}
+      {selected ? (
+        <div
+          style={{
+            position: "absolute",
+            inset: -6,
+            borderRadius: 24,
+            border: `2px dashed ${C.stitch}`,
+            opacity: selectT,
+            transform: `rotate(${(f * 0.6) % 360}deg)`,
+            pointerEvents: "none",
+          }}
+        />
+      ) : null}
+
+      <div
+        style={{
+          fontFamily: MONO,
+          fontSize: 11,
+          color: C.fgDim,
+          letterSpacing: "0.2em",
+          marginBottom: 8,
+        }}
+      >
+        CONCEPT · 0{idx + 1}
+      </div>
+      <div
+        style={{
+          fontFamily: FONT,
+          fontSize: 26,
+          fontWeight: 700,
+          color: C.fg,
+          letterSpacing: "-0.03em",
+          lineHeight: 1.05,
+          marginBottom: 12,
+        }}
+      >
+        {name}
+      </div>
+      {/* Palette strip */}
+      <div style={{ display: "flex", gap: 4, marginBottom: 12 }}>
+        {palette.map((c, i) => (
+          <div
+            key={i}
+            style={{
+              flex: 1,
+              height: 36,
+              borderRadius: 6,
+              background: c,
+            }}
+          />
+        ))}
+      </div>
+      {/* Mock type sample */}
+      <div
+        style={{
+          fontFamily: FONT,
+          fontSize: 32,
+          fontWeight: 700,
+          color: palette[0],
+          letterSpacing: "-0.045em",
+          lineHeight: 1,
+        }}
+      >
+        Aa
+      </div>
+      <div
+        style={{
+          fontFamily: MONO,
+          fontSize: 10,
+          color: C.fgDim,
+          letterSpacing: "0.15em",
+          marginTop: 4,
+        }}
+      >
+        {name === "Aurora" ? "GEIST · SANS" : name === "Monograph" ? "OUTFIT · SANS" : "SATOSHI · SANS"}
+      </div>
+
+      {selected && selectT > 0.2 ? (
+        <div
+          style={{
+            position: "absolute",
+            top: -12,
+            right: -12,
+            width: 40,
+            height: 40,
+            borderRadius: "50%",
+            background: C.stitch,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            boxShadow: `0 0 20px ${C.stitch}`,
+            transform: `scale(${selectT})`,
+          }}
+        >
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
+            <path
+              d="M5 12.5 10 17 20 7"
+              stroke="#fff"
+              strokeWidth="3"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+const MiniPageCard: React.FC<{
+  idx: number;
+  f: number;
+  fps: number;
+  baseDelay: number;
+  label: string;
+}> = ({ idx, f, fps, baseDelay, label }) => {
+  const s = gsapSpring(f, fps, baseDelay + idx * 0.07, "bouncy");
+  const y = interpolate(s, [0, 1], [40, 0]);
+  const o = interpolate(s, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  return (
+    <div
+      style={{
+        background: C.surface,
+        borderRadius: 12,
+        border: `1px solid ${C.border}`,
+        padding: 10,
+        transform: `translateY(${y}px)`,
+        opacity: o,
+        overflow: "hidden",
+      }}
+    >
+      {/* Palette bar */}
+      <div style={{ display: "flex", height: 4, borderRadius: 2, overflow: "hidden", marginBottom: 8 }}>
+        {PALETTE_CHIPS.slice(0, 5).map((c, i) => (
+          <div key={i} style={{ flex: 1, background: c }} />
+        ))}
+      </div>
+      {/* Mini wireframe lines */}
+      <div style={{ display: "flex", flexDirection: "column", gap: 4, marginBottom: 6 }}>
+        <div style={{ height: 6, background: C.fgSoft, width: "60%", borderRadius: 2 }} />
+        <div style={{ height: 3, background: C.border, width: "90%", borderRadius: 1.5 }} />
+        <div style={{ height: 3, background: C.border, width: "75%", borderRadius: 1.5 }} />
+      </div>
+      <div style={{ display: "flex", gap: 4 }}>
+        <div style={{ flex: 1, height: 16, background: C.bg, borderRadius: 4, border: `1px solid ${C.border}` }} />
+        <div style={{ flex: 1, height: 16, background: C.stitch, borderRadius: 4 }} />
+      </div>
+      <div
+        style={{
+          fontFamily: MONO,
+          fontSize: 9,
+          color: C.fgMuted,
+          letterSpacing: "0.14em",
+          marginTop: 6,
+          textAlign: "center",
+        }}
+      >
+        {label}
+      </div>
+    </div>
+  );
+};
+
+const TestScene: React.FC<SP> = ({ frame, fps }) => {
+  const op = so(frame, fps, SEGS[6].s, SEGS[6].e);
+  if (op === 0) return null;
+  const f = lf(frame, fps, SEGS[6].s);
+
+  // Phase timing within scene (0-16s):
+  // 0.0-2.0 : Header "I tested the full loop"
+  // 1.8-5.0 : 3 concepts appear side by side
+  // 4.5-7.0 : Selection ring on middle concept
+  // 6.5-10.5: 8 page tiles waterfall
+  // 10.5-13 : Strike-through "Figma" and "design brief"
+  // 13-15.5 : Pipeline: idea → design → code → deploy
+
+  // Header
+  const headS = gsapSpring(f, fps, 0, "snappy");
+  const headOp = interpolate(headS, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const headOut = interpolate(f, [10.8 * fps, 11.8 * fps], [1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Concepts + selection + grid — all in one continuous phase
+  const conceptsOut = interpolate(f, [10.8 * fps, 11.8 * fps], [1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const selectT = interpolate(f, [4.5 * fps, 5.4 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Strike-through phase
+  const strikeIn = interpolate(f, [11.2 * fps, 11.8 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      <SafeZone>
+        {/* Top header */}
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            textAlign: "center",
+            opacity: headOp * headOut,
+          }}
+        >
+          <div
+            style={{
+              fontFamily: MONO,
+              fontSize: 15,
+              color: C.stitch,
+              letterSpacing: "0.26em",
+              marginBottom: 6,
+            }}
+          >
+            I TESTED THE FULL LOOP
+          </div>
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 52,
+              fontWeight: 700,
+              color: C.fg,
+              letterSpacing: "-0.035em",
+              lineHeight: 1.0,
+            }}
+          >
+            3 concepts → pick 1 →{" "}
+            <span style={{ color: C.stitch }}>8 pages</span>
+          </div>
+        </div>
+
+        {/* Three concepts */}
+        <div
+          style={{
+            position: "absolute",
+            top: 175,
+            left: 30,
+            right: 30,
+            display: "grid",
+            gridTemplateColumns: "1fr 1fr 1fr",
+            gap: 14,
+            opacity: conceptsOut,
+          }}
+        >
+          <ConceptCard
+            idx={0}
+            f={f}
+            fps={fps}
+            baseDelay={1.6}
+            name="Aurora"
+            palette={["#ff4d9b", "#8d54ff", "#4285f4"]}
+            selected={false}
+            selectT={selectT}
+          />
+          <ConceptCard
+            idx={1}
+            f={f}
+            fps={fps}
+            baseDelay={1.6}
+            name="Monograph"
+            palette={["#18181b", "#52525c", "#fcbb00"]}
+            selected={true}
+            selectT={selectT}
+          />
+          <ConceptCard
+            idx={2}
+            f={f}
+            fps={fps}
+            baseDelay={1.6}
+            name="Forest"
+            palette={["#1a2e1f", "#4fc46a", "#D4663A"]}
+            selected={false}
+            selectT={selectT}
+          />
+        </div>
+
+        {/* 8 pages grid — appears after selection */}
+        <div
+          style={{
+            position: "absolute",
+            top: 550,
+            left: 30,
+            right: 30,
+            display: "grid",
+            gridTemplateColumns: "repeat(4, 1fr)",
+            gap: 10,
+            opacity: conceptsOut,
+          }}
+        >
+          {["Landing", "Pricing", "FAQ", "Blog", "Dashboard", "Settings", "Auth", "Onboard"].map(
+            (label, i) => (
+              <MiniPageCard key={label} idx={i} f={f} fps={fps} baseDelay={6.5} label={label} />
+            ),
+          )}
+        </div>
+
+        {/* --- Strike-through + pipeline (second half of scene) --- */}
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            textAlign: "center",
+            opacity: strikeIn,
+          }}
+        >
+          <div
+            style={{
+              fontFamily: MONO,
+              fontSize: 15,
+              color: C.stitch,
+              letterSpacing: "0.26em",
+              marginBottom: 10,
+            }}
+          >
+            WHAT I DIDN'T DO
+          </div>
+          {/* Strikethrough rows */}
+          {[
+            { t: "Figma", delay: 0 },
+            { t: "a design brief", delay: 0.5 },
+          ].map((r, i) => {
+            const rs = interpolate(f, [(11.5 + r.delay) * fps, (12.2 + r.delay) * fps], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            });
+            return (
+              <div
+                key={r.t}
+                style={{
+                  position: "relative",
+                  display: "inline-block",
+                  marginTop: i > 0 ? 14 : 0,
+                  opacity: interpolate(f, [(11.4 + r.delay) * fps, (11.9 + r.delay) * fps], [0, 1], {
+                    extrapolateLeft: "clamp",
+                    extrapolateRight: "clamp",
+                  }),
+                }}
+              >
+                <span
+                  style={{
+                    fontFamily: FONT,
+                    fontSize: 62,
+                    fontWeight: 700,
+                    color: C.fgDim,
+                    letterSpacing: "-0.035em",
+                  }}
+                >
+                  never opened{" "}
+                  <span style={{ color: C.fgSoft }}>{r.t}</span>
+                </span>
+                <div
+                  style={{
+                    position: "absolute",
+                    top: "55%",
+                    left: 0,
+                    width: `${rs * 100}%`,
+                    height: 5,
+                    background: C.danger,
+                    borderRadius: 3,
+                    boxShadow: `0 0 14px ${C.danger}`,
+                  }}
+                />
+              </div>
+            );
+          })}
+          {/* Pipeline — idea → design → code → deploy */}
+          <div
+            style={{
+              marginTop: 50,
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              gap: 16,
+              flexWrap: "wrap",
+              opacity: interpolate(f, [13.2 * fps, 13.8 * fps], [0, 1], {
+                extrapolateLeft: "clamp",
+                extrapolateRight: "clamp",
+              }),
+            }}
+          >
+            {["idea", "design", "code", "deploy"].map((step, i) => {
+              const stepS = gsapSpring(f, fps, 13.2 + i * 0.18, "bouncy");
+              const y = interpolate(stepS, [0, 1], [40, 0]);
+              return (
+                <React.Fragment key={step}>
+                  <div
+                    style={{
+                      padding: "10px 22px",
+                      background: i === 3 ? C.stitch : C.surface,
+                      border: `1px solid ${i === 3 ? C.stitch : C.borderLoud}`,
+                      borderRadius: 9999,
+                      fontFamily: FONT,
+                      fontSize: 26,
+                      fontWeight: 600,
+                      color: i === 3 ? "#fff" : C.fg,
+                      letterSpacing: "-0.02em",
+                      transform: `translateY(${y}px)`,
+                      boxShadow: i === 3 ? `0 0 30px ${C.stitch}88` : "none",
+                    }}
+                  >
+                    {step}
+                  </div>
+                  {i < 3 ? (
+                    <svg width="40" height="20" viewBox="0 0 40 20">
+                      <path
+                        d="M4 10 H34 M28 4 L34 10 L28 16"
+                        stroke={C.fgMuted}
+                        strokeWidth="2.5"
+                        fill="none"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                  ) : null}
+                </React.Fragment>
+              );
+            })}
+          </div>
+          <div
+            style={{
+              marginTop: 24,
+              fontFamily: MONO,
+              fontSize: 18,
+              color: C.fgMuted,
+              letterSpacing: "0.2em",
+              opacity: interpolate(f, [14.4 * fps, 15 * fps], [0, 1], {
+                extrapolateLeft: "clamp",
+                extrapolateRight: "clamp",
+              }),
+            }}
+          >
+            ONE · CHAT · WINDOW.
+          </div>
+        </div>
+      </SafeZone>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 8 — CTA (67 → 76.56s)
+// "Solo founders got a design team. Like, follow, drop AI."
+// ═══════════════════════════════════════════════════════════════
+
+const CTAScene: React.FC<SP> = ({ frame, fps }) => {
+  const op = so(frame, fps, SEGS[7].s, SEGS[7].e);
+  if (op === 0) return null;
+  const f = lf(frame, fps, SEGS[7].s);
+
+  // Big closer headline
+  const hS = gsapSpring(f, fps, 0.1, "bouncy");
+  const hScale = interpolate(hS, [0, 1], [1.4, 1]);
+  const hOp = interpolate(hS, [0, 0.35], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Setup guide prompt
+  const guideOp = interpolate(f, [2.5 * fps, 3.1 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Three CTA icons
+  const icons = [
+    { delay: 4.3, key: "like", label: "LIKE" },
+    { delay: 4.5, key: "follow", label: "FOLLOW" },
+    { delay: 4.7, key: "comment", label: "COMMENT" },
+  ] as const;
+
+  // Comment bubble typewriter for "AI"
+  const aiOp = interpolate(f, [6.3 * fps, 6.8 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const aiPulse = 1 + Math.sin(f * 0.3) * 0.04;
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      <SafeZone>
+        {/* Big headline */}
+        <div
+          style={{
+            position: "absolute",
+            top: 10,
+            left: 0,
+            right: 0,
+            textAlign: "center",
+            transform: `scale(${hScale})`,
+            opacity: hOp,
+          }}
+        >
+          <div
+            style={{
+              fontFamily: MONO,
+              fontSize: 15,
+              color: C.stitch,
+              letterSpacing: "0.26em",
+              marginBottom: 12,
+            }}
+          >
+            SOLO FOUNDERS
+          </div>
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 82,
+              fontWeight: 700,
+              color: C.fg,
+              letterSpacing: "-0.045em",
+              lineHeight: 0.96,
+            }}
+          >
+            just got a
+          </div>
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 110,
+              fontWeight: 700,
+              color: C.stitch,
+              letterSpacing: "-0.05em",
+              lineHeight: 0.96,
+              marginTop: 6,
+              textShadow: `0 0 70px rgba(255,77,155,0.55)`,
+            }}
+          >
+            design team.
+          </div>
+        </div>
+
+        {/* Want setup guide */}
+        <div
+          style={{
+            position: "absolute",
+            top: 480,
+            left: 0,
+            right: 0,
+            textAlign: "center",
+            opacity: guideOp,
+          }}
+        >
+          <div
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 12,
+              padding: "14px 28px",
+              background: C.claudeDim,
+              border: `1px solid ${C.claude}`,
+              borderRadius: 9999,
+              fontFamily: FONT,
+              fontSize: 30,
+              fontWeight: 600,
+              color: C.claudeSoft,
+              letterSpacing: "-0.02em",
+              boxShadow: `0 0 50px rgba(212,102,58,0.3)`,
+            }}
+          >
+            <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
+              <path
+                d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6Z"
+                stroke={C.claudeSoft}
+                strokeWidth="2"
+                strokeLinejoin="round"
+              />
+              <path d="M14 2v6h6M8 13h8M8 17h6" stroke={C.claudeSoft} strokeWidth="2" strokeLinejoin="round" />
+            </svg>
+            want the full setup guide?
+          </div>
+        </div>
+
+        {/* CTA row */}
+        <div
+          style={{
+            position: "absolute",
+            top: 600,
+            left: 0,
+            right: 0,
+            display: "flex",
+            justifyContent: "center",
+            gap: 32,
+          }}
+        >
+          {icons.map((icn, i) => {
+            const s = gsapSpring(f, fps, icn.delay, "bouncy");
+            const scale = interpolate(s, [0, 1], [0, 1]);
+            const pulse = 1 + Math.sin((f + i * 8) * 0.18) * 0.04;
+            return (
+              <div
+                key={icn.key}
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: 10,
+                  transform: `scale(${scale * pulse})`,
+                }}
+              >
+                <div
+                  style={{
+                    width: 108,
+                    height: 108,
+                    borderRadius: "50%",
+                    background: C.surface,
+                    border: `2px solid ${C.stitch}`,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    boxShadow: `0 0 40px rgba(255,77,155,0.45)`,
+                  }}
+                >
+                  {icn.key === "like" ? (
+                    <svg width="54" height="54" viewBox="0 0 24 24" fill={C.stitch}>
+                      <path d="M12 21s-7-4.35-7-10a4 4 0 0 1 7-2.65A4 4 0 0 1 19 11c0 5.65-7 10-7 10Z" />
+                    </svg>
+                  ) : icn.key === "follow" ? (
+                    <svg width="54" height="54" viewBox="0 0 24 24" fill="none">
+                      <circle cx="12" cy="8" r="4" stroke={C.stitch} strokeWidth="2.5" />
+                      <path
+                        d="M4 21a8 8 0 0 1 16 0"
+                        stroke={C.stitch}
+                        strokeWidth="2.5"
+                        strokeLinecap="round"
+                      />
+                      <path
+                        d="M20 3v6M17 6h6"
+                        stroke={C.stitch}
+                        strokeWidth="2.5"
+                        strokeLinecap="round"
+                      />
+                    </svg>
+                  ) : (
+                    <svg width="54" height="54" 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.stitch}
+                        strokeWidth="2.5"
+                        strokeLinejoin="round"
+                        strokeLinecap="round"
+                      />
+                    </svg>
+                  )}
+                </div>
+                <div
+                  style={{
+                    fontFamily: MONO,
+                    fontSize: 13,
+                    fontWeight: 500,
+                    color: C.fgMuted,
+                    letterSpacing: "0.22em",
+                  }}
+                >
+                  {icn.label}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Comment bubble with "AI" */}
+        <div
+          style={{
+            position: "absolute",
+            bottom: 20,
+            left: 0,
+            right: 0,
+            display: "flex",
+            justifyContent: "center",
+            opacity: aiOp,
+            transform: `scale(${aiPulse})`,
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 14,
+              padding: "14px 24px",
+              background: C.stitch,
+              borderRadius: 9999,
+              boxShadow: `0 20px 50px -10px rgba(255,77,155,0.6), 0 0 60px rgba(255,77,155,0.4)`,
+            }}
+          >
+            <span
+              style={{
+                fontFamily: FONT,
+                fontSize: 22,
+                fontWeight: 500,
+                color: "rgba(255,255,255,0.85)",
+                letterSpacing: "-0.02em",
+              }}
+            >
+              drop
+            </span>
+            <span
+              style={{
+                fontFamily: FONT,
+                fontSize: 44,
+                fontWeight: 700,
+                color: "#fff",
+                letterSpacing: "-0.04em",
+              }}
+            >
+              "AI"
+            </span>
+            <span
+              style={{
+                fontFamily: FONT,
+                fontSize: 22,
+                fontWeight: 500,
+                color: "rgba(255,255,255,0.85)",
+                letterSpacing: "-0.02em",
+              }}
+            >
+              in the comments
+            </span>
+          </div>
+        </div>
+      </SafeZone>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// MAIN COMPOSITION
+// ═══════════════════════════════════════════════════════════════
+
+export const StitchReel: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: C.bg, fontFamily: FONT }}>
+      {/* REFERENCE-STRIP: <Audio> tag removed — bring your own voiceover */}
+
+      <Background frame={frame} fps={fps} />
+
+      <HookScene frame={frame} fps={fps} />
+      <StackScene frame={frame} fps={fps} />
+      <FeaturesScene frame={frame} fps={fps} />
+      <UnlockScene frame={frame} fps={fps} />
+      <MagicScene frame={frame} fps={fps} />
+      <CloneScene frame={frame} fps={fps} />
+      <TestScene frame={frame} fps={fps} />
+      <CTAScene frame={frame} fps={fps} />
+    </AbsoluteFill>
+  );
+};