@devinilabs/reelstack 1.3.2 → 1.4.0

package/reference/dark/gpt55.tsx

@@ -0,0 +1,2608 @@
+/**
+ * REFERENCE — GPT55Reel  (Family: dark)
+ *
+ * Canonical example of the dark family's motion vocabulary, frame-locked
+ * BEAT structure, and scene choreography. Bundled with ReelStack v1.4+
+ * for STUDY and as the source for the scaffold-from-reference flow.
+ *
+ * Asset imports stripped (look for REFERENCE-STRIP markers). Bring your own
+ * voiceover, brand SVGs, captures.
+ *
+ * License: study + adapt patterns OK. Verbatim re-publication as your own
+ * template NOT OK. See ReelStack LICENSE.
+ *
+ * Source: my-video/src/GPT55Reel.tsx
+ * Bundled at: 2026-05-12T19:40:04.831Z
+ */
+import React from "react";
+import {
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+  Easing,
+  AbsoluteFill,
+  Sequence,
+  Img,
+  OffthreadVideo,
+  staticFile,
+} from "remotion";
+import { ds } from "./designSystem";
+
+// ═══════════════════════════════════════════════════════════════
+// CONSTANTS
+// ═══════════════════════════════════════════════════════════════
+
+const FPS = 30;
+const W = 1080;
+const H = 1920;
+const SAFE_TOP = 280;
+const SAFE_BOT_Y = 1510; // bottom = H - 410 = 1510 content limit
+const SAFE_L = 60;
+const SAFE_R = 60;
+
+const SCENES = {
+  S1: { from: 0, dur: 180 },
+  S2: { from: 180, dur: 240 },
+  S3: { from: 420, dur: 180 },
+  S4: { from: 600, dur: 330 },
+  S5: { from: 930, dur: 210 },
+  S6: { from: 1140, dur: 180 },
+  S7: { from: 1320, dur: 240 },
+  S8: { from: 1560, dur: 360 },
+  S9: { from: 1920, dur: 300 },
+  S10: { from: 2220, dur: 180 },
+  S11: { from: 2400, dur: 287 },
+  S12: { from: 2687, dur: 213 },
+};
+
+export const GPT55_TOTAL_FRAMES = 2900;
+
+const FONT = ds.font.sans;
+const MONO = ds.font.mono;
+
+const C = {
+  bg: "#0a0a0b",
+  surface: "#14141a",
+  surfaceLift: "#1c1c24",
+  border: "rgba(255,255,255,0.08)",
+  borderLoud: "rgba(255,255,255,0.14)",
+  fg: "#f5f5f7",
+  fgSoft: "#d1d1d6",
+  fgMuted: "#8e8e93",
+  fgDim: "#5a5a60",
+  oai: "#10a37f",
+  oaiSoft: "#1ac997",
+  oaiDeep: "#0a6e55",
+  rival: "#6466f1",
+  warn: "#fcbb00",
+  red: "#ff3b46",
+  yt: "#FF0033",
+} as const;
+
+// ═══════════════════════════════════════════════════════════════
+// HELPERS
+// ═══════════════════════════════════════════════════════════════
+
+const gs = (
+  frame: number,
+  fps: number,
+  delaySec: number,
+  kind: "bouncy" | "snappy" | "gentle" | "glass" = "snappy",
+) =>
+  spring({
+    frame,
+    fps,
+    delay: Math.round(delaySec * fps),
+    config: ds.spring[kind],
+  });
+
+const fadeIn = (frame: number, at: number, len = 12) =>
+  interpolate(frame, [at, at + len], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+const fadeOut = (frame: number, at: number, len = 12) =>
+  interpolate(frame, [at, at + len], [1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+// ═══════════════════════════════════════════════════════════════
+// BACKGROUND — drifting green spotlight + grain + vignette
+// ═══════════════════════════════════════════════════════════════
+
+const Background: React.FC<{ frame: number; tint?: "oai" | "rival" | "yt" }> = ({
+  frame,
+  tint = "oai",
+}) => {
+  const drift = (Math.sin(frame * 0.003) + 1) * 0.5;
+  const drift2 = (Math.cos(frame * 0.0025) + 1) * 0.5;
+  const vignettePulse = 0.4 + Math.sin(frame * 0.007) * 0.04;
+  const tintColor =
+    tint === "oai" ? "16,163,127" : tint === "rival" ? "100,102,241" : "255,0,51";
+
+  return (
+    <AbsoluteFill>
+      <div style={{ width: "100%", height: "100%", background: C.bg }} />
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse 900px 1000px at ${15 + drift * 70}% ${20 + drift2 * 45}%, rgba(${tintColor},0.14) 0%, transparent 60%)`,
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse 700px 900px at ${85 - drift * 55}% ${75 + drift2 * 20}%, rgba(${tintColor},0.07) 0%, transparent 55%)`,
+        }}
+      />
+      {/* Grid */}
+      <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 (static, pointer-events-none) */}
+      <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>")`,
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,${vignettePulse}) 100%)`,
+        }}
+      />
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// S1 — COLD OPEN: OpenAI logo + "GPT 5.5 JUST DROPPED"
+// ═══════════════════════════════════════════════════════════════
+
+const Scene1: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const logoSpring = gs(frame, fps, 0.1, "bouncy");
+  const logoScale = interpolate(logoSpring, [0, 1], [0.3, 1]);
+  const logoRot = interpolate(logoSpring, [0, 1], [-140, 0]);
+  const logoOp = interpolate(logoSpring, [0, 0.3], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // "GPT 5.5" letter-by-letter
+  const gptChars = "GPT 5.5".split("");
+  const dropSpring = gs(frame, fps, 1.8, "bouncy");
+  const dropOp = interpolate(dropSpring, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const dropScale = interpolate(dropSpring, [0, 0.6, 1], [0.7, 1.12, 1]);
+  const dropGlow = 0.3 + Math.sin(frame * 0.12) * 0.15;
+
+  const subOp = fadeIn(frame, 75);
+  const subY = interpolate(frame, [75, 95], [20, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  const tickerOp = fadeIn(frame, 90);
+  const tickerY = interpolate(frame, [90, 110], [15, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Exit fade last 12f
+  const exit = fadeOut(frame, SCENES.S1.dur - 18, 12);
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT, opacity: exit }}>
+      {/* Logo — big, center-top */}
+      <div
+        style={{
+          position: "absolute",
+          top: 360,
+          left: 0,
+          right: 0,
+          display: "flex",
+          justifyContent: "center",
+          opacity: logoOp,
+          transform: `scale(${logoScale}) rotate(${logoRot}deg)`,
+        }}
+      >
+        <div
+          style={{
+            width: 280,
+            height: 280,
+            borderRadius: 48,
+            background: `linear-gradient(135deg, ${C.oai}, ${C.oaiDeep})`,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            boxShadow: `0 30px 80px -10px rgba(16,163,127,0.55), inset 0 1px 0 rgba(255,255,255,0.12)`,
+          }}
+        >
+          <Img
+            src={staticFile("captures/your-asset.png" /* REFERENCE-STRIP */)}
+            style={{ width: 180, height: 180, filter: "invert(1)" }}
+          />
+        </div>
+      </div>
+
+      {/* Headline */}
+      <div
+        style={{
+          position: "absolute",
+          top: 760,
+          left: 0,
+          right: 0,
+          textAlign: "center",
+          padding: "0 40px",
+        }}
+      >
+        {/* GPT 5.5 letter-by-letter */}
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            fontSize: 168,
+            fontWeight: 800,
+            color: C.fg,
+            letterSpacing: "-0.05em",
+            lineHeight: 1,
+          }}
+        >
+          {gptChars.map((ch, i) => {
+            const s = gs(frame, fps, 0.6 + i * 0.07, "snappy");
+            const y = interpolate(s, [0, 1], [60, 0]);
+            const op = interpolate(s, [0, 0.4], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            });
+            return (
+              <span
+                key={`${ch}-${i}`}
+                style={{
+                  display: "inline-block",
+                  transform: `translateY(${y}px)`,
+                  opacity: op,
+                  width: ch === " " ? 36 : "auto",
+                }}
+              >
+                {ch === " " ? "\u00A0" : ch}
+              </span>
+            );
+          })}
+        </div>
+
+        {/* JUST DROPPED gradient slam */}
+        <div
+          style={{
+            marginTop: 24,
+            opacity: dropOp,
+            transform: `scale(${dropScale})`,
+            fontSize: 88,
+            fontWeight: 800,
+            background: `linear-gradient(135deg, ${C.oai}, ${C.oaiSoft})`,
+            WebkitBackgroundClip: "text",
+            backgroundClip: "text",
+            WebkitTextFillColor: "transparent",
+            letterSpacing: "-0.04em",
+            filter: `drop-shadow(0 0 30px rgba(16,163,127,${dropGlow}))`,
+          }}
+        >
+          JUST DROPPED
+        </div>
+
+        {/* Subtitle */}
+        <div
+          style={{
+            marginTop: 28,
+            opacity: subOp,
+            transform: `translateY(${subY}px)`,
+            fontSize: 36,
+            fontWeight: 500,
+            color: C.fgSoft,
+            letterSpacing: "-0.02em",
+            lineHeight: 1.3,
+          }}
+        >
+          <span style={{ color: C.fg, fontWeight: 700 }}>smartest</span>,{" "}
+          <span style={{ color: C.fg, fontWeight: 700 }}>most intuitive</span>
+          <br />
+          model yet.
+        </div>
+
+        {/* Date ticker */}
+        <div
+          style={{
+            marginTop: 36,
+            opacity: tickerOp,
+            transform: `translateY(${tickerY}px)`,
+            display: "inline-flex",
+            gap: 14,
+            padding: "12px 24px",
+            borderRadius: 9999,
+            background: "rgba(16,163,127,0.08)",
+            border: `1px solid rgba(16,163,127,0.35)`,
+            fontFamily: MONO,
+            fontSize: 22,
+            fontWeight: 600,
+            color: C.oaiSoft,
+            letterSpacing: "0.1em",
+          }}
+        >
+          <span style={{ color: C.oai }}>●</span> APR 23 · 2026
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// S2 — INTELLIGENCE INDEX chart reveal
+// ═══════════════════════════════════════════════════════════════
+
+const Scene2: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // Title in
+  const titleOp = fadeIn(frame, 0, 10);
+  const titleY = interpolate(frame, [0, 15], [20, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Chart reveal: left-to-right wipe
+  const wipeT = interpolate(frame, [15, 60], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.bezier(...ds.easing.standard),
+  });
+
+  // Stamp slam
+  const stampSpring = gs(frame, fps, 2.2, "bouncy");
+  const stampOp = interpolate(stampSpring, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const stampScale = interpolate(stampSpring, [0, 0.5, 1], [1.8, 0.9, 1]);
+  const stampRot = interpolate(stampSpring, [0, 1], [-20, -8]);
+
+  // Cost pill
+  const pillSpring = gs(frame, fps, 3.2, "snappy");
+  const pillOp = interpolate(pillSpring, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const pillY = interpolate(pillSpring, [0, 1], [30, 0]);
+
+  const exit = fadeOut(frame, SCENES.S2.dur - 15, 12);
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT, opacity: exit }}>
+      {/* Title */}
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP + 20,
+          left: SAFE_L,
+          right: SAFE_R,
+          opacity: titleOp,
+          transform: `translateY(${titleY}px)`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: MONO,
+            fontSize: 22,
+            fontWeight: 600,
+            color: C.oai,
+            letterSpacing: "0.14em",
+            textTransform: "uppercase",
+            marginBottom: 16,
+          }}
+        >
+          Artificial Analysis · Intelligence Index
+        </div>
+        <div
+          style={{
+            fontSize: 64,
+            fontWeight: 700,
+            color: C.fg,
+            letterSpacing: "-0.035em",
+            lineHeight: 1.0,
+          }}
+        >
+          GPT-5.5 leads.
+          <br />
+          <span style={{ color: C.oai }}>Across the board.</span>
+        </div>
+      </div>
+
+      {/* Chart image with wipe mask */}
+      <div
+        style={{
+          position: "absolute",
+          top: 660,
+          left: SAFE_L,
+          right: SAFE_R,
+          height: 560,
+          borderRadius: 24,
+          overflow: "hidden",
+          background: C.surface,
+          border: `1px solid ${C.border}`,
+          boxShadow: `0 30px 80px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04)`,
+        }}
+      >
+        <div
+          style={{
+            position: "absolute",
+            inset: 0,
+            clipPath: `inset(0 ${100 - wipeT * 100}% 0 0)`,
+          }}
+        >
+          <Img
+            src={staticFile("captures/your-asset.png" /* REFERENCE-STRIP */)}
+            style={{
+              width: "100%",
+              height: "100%",
+              objectFit: "contain",
+              padding: 16,
+              background: "#000",
+            }}
+          />
+        </div>
+        {/* wipe line */}
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            bottom: 0,
+            left: 0,
+            width: 3,
+            background: C.oai,
+            boxShadow: `0 0 24px rgba(16,163,127,0.8)`,
+            opacity: wipeT > 0.98 ? 0 : 1,
+            transform: `translateX(${wipeT * 100}vw)`,
+            willChange: "transform, opacity",
+          }}
+        />
+      </div>
+
+      {/* STATE-OF-THE-ART stamp */}
+      <div
+        style={{
+          position: "absolute",
+          top: 540,
+          right: 80,
+          opacity: stampOp,
+          transform: `rotate(${stampRot}deg) scale(${stampScale})`,
+        }}
+      >
+        <div
+          style={{
+            padding: "16px 24px",
+            borderRadius: 8,
+            background: C.oai,
+            color: "#fff",
+            fontFamily: MONO,
+            fontSize: 28,
+            fontWeight: 800,
+            letterSpacing: "0.05em",
+            textTransform: "uppercase",
+            border: `3px solid ${C.oaiSoft}`,
+            boxShadow: `0 15px 40px -10px rgba(16,163,127,0.65)`,
+          }}
+        >
+          State of
+          <br />
+          the Art
+        </div>
+      </div>
+
+      {/* 1/2 THE COST pill */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: H - SAFE_BOT_Y + 60,
+          left: 0,
+          right: 0,
+          textAlign: "center",
+          opacity: pillOp,
+          transform: `translateY(${pillY}px)`,
+        }}
+      >
+        <div
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 16,
+            padding: "22px 40px",
+            borderRadius: 22,
+            background: `linear-gradient(135deg, rgba(16,163,127,0.18), rgba(16,163,127,0.08))`,
+            border: `1.5px solid ${C.oai}`,
+            boxShadow: `0 18px 50px -12px rgba(16,163,127,0.4)`,
+          }}
+        >
+          <span
+            style={{
+              fontSize: 52,
+              fontWeight: 800,
+              color: C.oaiSoft,
+              letterSpacing: "-0.03em",
+            }}
+          >
+            ½
+          </span>
+          <span
+            style={{
+              fontSize: 40,
+              fontWeight: 600,
+              color: C.fg,
+              letterSpacing: "-0.02em",
+            }}
+          >
+            the cost of frontier rivals
+          </span>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// S3 — PIVOT: "The headline isn't the benchmark." → "It's what it's built to DO."
+// ═══════════════════════════════════════════════════════════════
+
+const Scene3: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const line1Op = fadeIn(frame, 0, 14);
+  const line1Y = interpolate(frame, [0, 18], [40, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Strike through "benchmark" from 45-75
+  const strikeT = interpolate(frame, [45, 75], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Line 2 appears after strike
+  const line2Op = fadeIn(frame, 80, 14);
+  const line2Y = interpolate(frame, [80, 100], [40, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // DO scales up
+  const doSpring = gs(frame, fps, 3.7, "bouncy");
+  const doScale = interpolate(doSpring, [0, 0.5, 1], [0.5, 1.3, 1.15]);
+  const doOp = interpolate(doSpring, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  const exit = fadeOut(frame, SCENES.S3.dur - 15, 12);
+
+  return (
+    <AbsoluteFill
+      style={{
+        fontFamily: FONT,
+        opacity: exit,
+        padding: `${SAFE_TOP}px ${SAFE_L}px 410px ${SAFE_L}px`,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: 80,
+      }}
+    >
+      {/* Line 1 */}
+      <div
+        style={{
+          opacity: line1Op,
+          transform: `translateY(${line1Y}px)`,
+          fontSize: 78,
+          fontWeight: 600,
+          color: C.fgSoft,
+          letterSpacing: "-0.04em",
+          lineHeight: 1.0,
+          textAlign: "center",
+        }}
+      >
+        The headline isn't the{" "}
+        <span style={{ position: "relative", color: C.fg, fontWeight: 700 }}>
+          benchmark.
+          {/* strike line */}
+          <span
+            style={{
+              position: "absolute",
+              top: "52%",
+              left: 0,
+              height: 8,
+              width: "100%",
+              background: C.red,
+              borderRadius: 4,
+              boxShadow: `0 0 16px ${C.red}`,
+              transform: `scaleX(${strikeT})`,
+              transformOrigin: "left center",
+              willChange: "transform",
+            }}
+          />
+        </span>
+      </div>
+
+      {/* Line 2 */}
+      <div
+        style={{
+          opacity: line2Op,
+          transform: `translateY(${line2Y}px)`,
+          fontSize: 72,
+          fontWeight: 600,
+          color: C.fg,
+          letterSpacing: "-0.035em",
+          lineHeight: 1.1,
+          textAlign: "center",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 12,
+        }}
+      >
+        <span>It's what 5.5 is</span>
+        <span>
+          built to{" "}
+          <span
+            style={{
+              display: "inline-block",
+              opacity: doOp,
+              transform: `scale(${doScale})`,
+              background: `linear-gradient(135deg, ${C.oai}, ${C.oaiSoft})`,
+              WebkitBackgroundClip: "text",
+              backgroundClip: "text",
+              WebkitTextFillColor: "transparent",
+              fontWeight: 800,
+              letterSpacing: "-0.05em",
+              padding: "0 12px",
+            }}
+          >
+            DO.
+          </span>
+        </span>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// S4 — 5 POWERS BENTO
+// ═══════════════════════════════════════════════════════════════
+
+type Power = {
+  label: string;
+  sub: string;
+  accent: string;
+  icon: React.ReactNode;
+};
+
+const POWERS: Power[] = [
+  {
+    label: "Write & debug code",
+    sub: "pulls PRs, fixes tests",
+    accent: C.oai,
+    icon: (
+      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <polyline points="16 18 22 12 16 6" />
+        <polyline points="8 6 2 12 8 18" />
+      </svg>
+    ),
+  },
+  {
+    label: "Research online",
+    sub: "reads, cites, decides",
+    accent: C.oai,
+    icon: (
+      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <circle cx="12" cy="12" r="10" />
+        <path d="M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20" />
+      </svg>
+    ),
+  },
+  {
+    label: "Analyze data",
+    sub: "pivots, charts, infers",
+    accent: C.oai,
+    icon: (
+      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M3 3v18h18" />
+        <rect x="7" y="12" width="3" height="6" />
+        <rect x="12" y="8" width="3" height="10" />
+        <rect x="17" y="4" width="3" height="14" />
+      </svg>
+    ),
+  },
+  {
+    label: "Docs & sheets",
+    sub: "drafts, edits, formats",
+    accent: C.oai,
+    icon: (
+      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+        <polyline points="14 2 14 8 20 8" />
+        <line x1="8" y1="13" x2="16" y2="13" />
+        <line x1="8" y1="17" x2="13" y2="17" />
+      </svg>
+    ),
+  },
+  {
+    label: "Operate software",
+    sub: "clicks, types, navigates",
+    accent: C.oai,
+    icon: (
+      <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M13 2L3 14h7l-1 8 10-12h-7z" />
+      </svg>
+    ),
+  },
+];
+
+const PowerCard: React.FC<{
+  power: Power;
+  frame: number;
+  fps: number;
+  delay: number;
+}> = ({ power, frame, fps, delay }) => {
+  const s = gs(frame, fps, delay, "snappy");
+  const op = interpolate(s, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const y = interpolate(s, [0, 1], [40, 0]);
+  const scale = interpolate(s, [0, 0.7, 1], [0.9, 1.02, 1]);
+
+  // Subtle breathe
+  const breathe = 1 + Math.sin((frame - delay * fps) * 0.05) * 0.008;
+
+  return (
+    <div
+      style={{
+        opacity: op,
+        transform: `translateY(${y}px) scale(${scale * breathe})`,
+        padding: "28px 28px",
+        borderRadius: 22,
+        background: `linear-gradient(145deg, ${C.surfaceLift}, ${C.surface})`,
+        border: `1px solid ${C.border}`,
+        boxShadow: `0 20px 40px -15px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05)`,
+        display: "flex",
+        alignItems: "center",
+        gap: 24,
+      }}
+    >
+      <div
+        style={{
+          width: 96,
+          height: 96,
+          borderRadius: 18,
+          background: `rgba(16,163,127,0.12)`,
+          border: `1px solid rgba(16,163,127,0.3)`,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: power.accent,
+          flexShrink: 0,
+        }}
+      >
+        {power.icon}
+      </div>
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div
+          style={{
+            fontSize: 38,
+            fontWeight: 700,
+            color: C.fg,
+            letterSpacing: "-0.03em",
+            lineHeight: 1.1,
+            marginBottom: 6,
+          }}
+        >
+          {power.label}
+        </div>
+        <div
+          style={{
+            fontFamily: MONO,
+            fontSize: 18,
+            fontWeight: 500,
+            color: C.fgMuted,
+            letterSpacing: "0.02em",
+          }}
+        >
+          {power.sub}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Scene4: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const titleOp = fadeIn(frame, 0, 10);
+  const titleY = interpolate(frame, [0, 15], [16, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Finished banner
+  const finSpring = gs(frame, fps, 7.5, "bouncy");
+  const finOp = interpolate(finSpring, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const finScale = interpolate(finSpring, [0, 0.6, 1], [0.7, 1.08, 1]);
+
+  const exit = fadeOut(frame, SCENES.S4.dur - 15, 12);
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT, opacity: exit }}>
+      {/* Title */}
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP + 10,
+          left: SAFE_L,
+          right: SAFE_R,
+          opacity: titleOp,
+          transform: `translateY(${titleY}px)`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: MONO,
+            fontSize: 20,
+            fontWeight: 600,
+            color: C.oai,
+            letterSpacing: "0.14em",
+            textTransform: "uppercase",
+            marginBottom: 12,
+          }}
+        >
+          What it's built to do
+        </div>
+        <div
+          style={{
+            fontSize: 54,
+            fontWeight: 700,
+            color: C.fg,
+            letterSpacing: "-0.035em",
+            lineHeight: 1.05,
+          }}
+        >
+          Five jobs. One model.
+        </div>
+      </div>
+
+      {/* 5 cards */}
+      <div
+        style={{
+          position: "absolute",
+          top: 560,
+          left: SAFE_L,
+          right: SAFE_R,
+          display: "flex",
+          flexDirection: "column",
+          gap: 16,
+        }}
+      >
+        {POWERS.map((p, i) => (
+          <PowerCard
+            key={p.label}
+            power={p}
+            frame={frame}
+            fps={fps}
+            delay={0.5 + i * 0.35}
+          />
+        ))}
+      </div>
+
+      {/* Finished chip */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: H - SAFE_BOT_Y + 40,
+          left: 0,
+          right: 0,
+          textAlign: "center",
+          opacity: finOp,
+          transform: `scale(${finScale})`,
+        }}
+      >
+        <div
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 14,
+            padding: "18px 32px",
+            borderRadius: 9999,
+            background: `linear-gradient(135deg, ${C.oai}, ${C.oaiDeep})`,
+            boxShadow: `0 15px 40px -10px rgba(16,163,127,0.55), inset 0 1px 0 rgba(255,255,255,0.12)`,
+          }}
+        >
+          <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+          <span
+            style={{
+              fontSize: 34,
+              fontWeight: 700,
+              color: "#fff",
+              letterSpacing: "-0.02em",
+            }}
+          >
+            until the task is finished
+          </span>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// S5 — DEMO MONITOR (plays demo.mp4 inside a bezel)
+// ═══════════════════════════════════════════════════════════════
+
+const Scene5: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const titleOp = fadeIn(frame, 0, 10);
+  const titleY = interpolate(frame, [0, 15], [16, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Monitor entry
+  const monSpring = gs(frame, fps, 0.4, "snappy");
+  const monOp = interpolate(monSpring, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const monScale = interpolate(monSpring, [0, 1], [0.92, 1]);
+  const monY = interpolate(monSpring, [0, 1], [40, 0]);
+
+  // Label chips stagger
+  const labels = ["Agentic coding", "Computer use", "Knowledge work", "Science research"];
+
+  const exit = fadeOut(frame, SCENES.S5.dur - 15, 12);
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT, opacity: exit }}>
+      {/* Title */}
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP + 10,
+          left: SAFE_L,
+          right: SAFE_R,
+          opacity: titleOp,
+          transform: `translateY(${titleY}px)`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: MONO,
+            fontSize: 20,
+            fontWeight: 600,
+            color: C.oai,
+            letterSpacing: "0.14em",
+            textTransform: "uppercase",
+            marginBottom: 12,
+          }}
+        >
+          Where the gains show up
+        </div>
+        <div
+          style={{
+            fontSize: 52,
+            fontWeight: 700,
+            color: C.fg,
+            letterSpacing: "-0.035em",
+            lineHeight: 1.0,
+          }}
+        >
+          Operating software.
+          <br />
+          <span style={{ color: C.oai }}>Tool-first thinking.</span>
+        </div>
+      </div>
+
+      {/* Monitor */}
+      <div
+        style={{
+          position: "absolute",
+          top: 620,
+          left: SAFE_L,
+          right: SAFE_R,
+          opacity: monOp,
+          transform: `translateY(${monY}px) scale(${monScale})`,
+        }}
+      >
+        <div
+          style={{
+            borderRadius: 20,
+            overflow: "hidden",
+            background: "#000",
+            border: `1px solid ${C.borderLoud}`,
+            boxShadow: `0 30px 80px -20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06)`,
+          }}
+        >
+          {/* Chrome bar */}
+          <div
+            style={{
+              height: 36,
+              background: C.surface,
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              padding: "0 16px",
+              borderBottom: `1px solid ${C.border}`,
+            }}
+          >
+            <div style={{ width: 10, height: 10, borderRadius: 5, background: "#ff5f56" }} />
+            <div style={{ width: 10, height: 10, borderRadius: 5, background: "#ffbd2e" }} />
+            <div style={{ width: 10, height: 10, borderRadius: 5, background: "#27c93f" }} />
+            <div
+              style={{
+                marginLeft: 16,
+                fontFamily: MONO,
+                fontSize: 14,
+                color: C.fgMuted,
+                letterSpacing: "0.05em",
+              }}
+            >
+              mission-control · live
+            </div>
+          </div>
+          {/* REFERENCE-STRIP: <OffthreadVideo> removed — bring your own clip */}
+        </div>
+      </div>
+
+      {/* Label chips */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: H - SAFE_BOT_Y + 30,
+          left: 0,
+          right: 0,
+          display: "flex",
+          justifyContent: "center",
+          flexWrap: "wrap",
+          gap: 12,
+          padding: `0 ${SAFE_L}px`,
+        }}
+      >
+        {labels.map((l, i) => {
+          const s = gs(frame, fps, 1.5 + i * 0.25, "snappy");
+          const op = interpolate(s, [0, 0.4], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          });
+          const yy = interpolate(s, [0, 1], [18, 0]);
+          return (
+            <div
+              key={l}
+              style={{
+                opacity: op,
+                transform: `translateY(${yy}px)`,
+                padding: "12px 22px",
+                borderRadius: 9999,
+                background: "rgba(16,163,127,0.1)",
+                border: `1px solid rgba(16,163,127,0.35)`,
+                fontFamily: MONO,
+                fontSize: 18,
+                fontWeight: 600,
+                color: C.oaiSoft,
+                letterSpacing: "0.04em",
+                textTransform: "uppercase",
+              }}
+            >
+              {l}
+            </div>
+          );
+        })}
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// S6 — BROCKMAN QUOTE
+// ═══════════════════════════════════════════════════════════════
+
+const Scene6: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const quoteMarkSpring = gs(frame, fps, 0.1, "bouncy");
+  const quoteMarkOp = interpolate(quoteMarkSpring, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const quoteMarkScale = interpolate(quoteMarkSpring, [0, 0.7, 1], [0.3, 1.15, 1]);
+
+  // Quote words staggered
+  const words = [
+    { t: "A", em: false },
+    { t: "faster,", em: true },
+    { t: "sharper", em: true },
+    { t: "thinker", em: false },
+    { t: "for", em: false },
+    { t: "fewer", em: false },
+    { t: "tokens.", em: false },
+  ];
+
+  const attrOp = fadeIn(frame, 110, 14);
+  const attrY = interpolate(frame, [110, 130], [16, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  const exit = fadeOut(frame, SCENES.S6.dur - 15, 12);
+
+  return (
+    <AbsoluteFill
+      style={{
+        fontFamily: FONT,
+        opacity: exit,
+        padding: `${SAFE_TOP}px ${SAFE_L}px ${H - SAFE_BOT_Y}px ${SAFE_L}px`,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      {/* Giant quote mark */}
+      <div
+        style={{
+          opacity: quoteMarkOp,
+          transform: `scale(${quoteMarkScale})`,
+          fontFamily: ds.font.serif,
+          fontSize: 280,
+          fontWeight: 700,
+          color: C.oai,
+          lineHeight: 0.6,
+          marginBottom: 30,
+        }}
+      >
+        “
+      </div>
+
+      {/* Quote text — stagger words */}
+      <div
+        style={{
+          display: "flex",
+          flexWrap: "wrap",
+          justifyContent: "center",
+          gap: "0 0.3em",
+          fontSize: 68,
+          fontWeight: 500,
+          color: C.fgSoft,
+          letterSpacing: "-0.035em",
+          lineHeight: 1.15,
+          textAlign: "center",
+          maxWidth: 960,
+        }}
+      >
+        {words.map((w, i) => {
+          const s = gs(frame, fps, 0.7 + i * 0.12, "snappy");
+          const op = interpolate(s, [0, 0.4], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          });
+          const y = interpolate(s, [0, 1], [30, 0]);
+          return (
+            <span
+              key={`${w.t}-${i}`}
+              style={{
+                display: "inline-block",
+                transform: `translateY(${y}px)`,
+                opacity: op,
+                color: w.em ? C.fg : C.fgSoft,
+                fontWeight: w.em ? 800 : 500,
+              }}
+            >
+              {w.t}
+            </span>
+          );
+        })}
+      </div>
+
+      {/* Attribution */}
+      <div
+        style={{
+          marginTop: 60,
+          opacity: attrOp,
+          transform: `translateY(${attrY}px)`,
+          display: "flex",
+          alignItems: "center",
+          gap: 16,
+        }}
+      >
+        <div
+          style={{
+            width: 3,
+            height: 40,
+            background: C.oai,
+          }}
+        />
+        <div>
+          <div
+            style={{
+              fontSize: 26,
+              fontWeight: 700,
+              color: C.fg,
+              letterSpacing: "-0.01em",
+            }}
+          >
+            Greg Brockman
+          </div>
+          <div
+            style={{
+              fontFamily: MONO,
+              fontSize: 16,
+              fontWeight: 500,
+              color: C.fgMuted,
+              letterSpacing: "0.05em",
+              textTransform: "uppercase",
+            }}
+          >
+            President · OpenAI
+          </div>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// S7 — AGENT LOOP (PLAN → USE TOOLS → CHECK → KEEP GOING)
+// ═══════════════════════════════════════════════════════════════
+
+const STEPS = ["Plan", "Use tools", "Check its work", "Keep going"];
+
+const Scene7: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const titleOp = fadeIn(frame, 0, 10);
+  const titleY = interpolate(frame, [0, 15], [16, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  const exit = fadeOut(frame, SCENES.S7.dur - 15, 12);
+
+  // Traveling dot 0..1 across steps
+  const dotT = interpolate(frame, [60, SCENES.S7.dur - 30], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const activeIdx = Math.min(STEPS.length - 1, Math.floor(dotT * STEPS.length));
+
+  const stepStartY = 560;
+  const stepGap = 150;
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT, opacity: exit }}>
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP + 10,
+          left: SAFE_L,
+          right: SAFE_R,
+          opacity: titleOp,
+          transform: `translateY(${titleY}px)`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: MONO,
+            fontSize: 20,
+            fontWeight: 600,
+            color: C.oai,
+            letterSpacing: "0.14em",
+            textTransform: "uppercase",
+            marginBottom: 12,
+          }}
+        >
+          Hand it a messy, multi-part task
+        </div>
+        <div
+          style={{
+            fontSize: 56,
+            fontWeight: 700,
+            color: C.fg,
+            letterSpacing: "-0.035em",
+            lineHeight: 1.0,
+          }}
+        >
+          Trust the loop.
+        </div>
+      </div>
+
+      {/* Connector line */}
+      <div
+        style={{
+          position: "absolute",
+          left: 170,
+          top: stepStartY + 50,
+          width: 3,
+          height: stepGap * (STEPS.length - 1),
+          background: `linear-gradient(180deg, ${C.border} 0%, ${C.borderLoud} 100%)`,
+        }}
+      />
+      {/* Traveling active segment */}
+      <div
+        style={{
+          position: "absolute",
+          left: 170,
+          top: stepStartY + 50,
+          width: 3,
+          height: stepGap * (STEPS.length - 1),
+          background: C.oai,
+          boxShadow: `0 0 16px ${C.oai}`,
+          transform: `scaleY(${dotT})`,
+          transformOrigin: "top center",
+          willChange: "transform",
+        }}
+      />
+
+      {/* Steps */}
+      {STEPS.map((step, i) => {
+        const inSpring = gs(frame, fps, 0.3 + i * 0.2, "snappy");
+        const op = interpolate(inSpring, [0, 0.4], [0, 1], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+        });
+        const x = interpolate(inSpring, [0, 1], [40, 0]);
+        const isActive = i <= activeIdx;
+        const isPulse = i === activeIdx;
+        const pulseScale = isPulse ? 1 + Math.sin(frame * 0.18) * 0.03 : 1;
+
+        return (
+          <div
+            key={step}
+            style={{
+              position: "absolute",
+              top: stepStartY + i * stepGap,
+              left: SAFE_L,
+              right: SAFE_R,
+              opacity: op,
+              transform: `translateX(${x}px)`,
+              display: "flex",
+              alignItems: "center",
+              gap: 32,
+            }}
+          >
+            {/* Dot */}
+            <div
+              style={{
+                width: 100,
+                height: 100,
+                borderRadius: "50%",
+                border: `3px solid ${isActive ? C.oai : C.borderLoud}`,
+                background: isActive ? `rgba(16,163,127,0.18)` : C.surface,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontFamily: MONO,
+                fontSize: 28,
+                fontWeight: 700,
+                color: isActive ? C.oaiSoft : C.fgMuted,
+                flexShrink: 0,
+                transform: `scale(${pulseScale})`,
+                boxShadow: isActive
+                  ? `0 0 30px -5px rgba(16,163,127,0.55), inset 0 1px 0 rgba(255,255,255,0.06)`
+                  : "inset 0 1px 0 rgba(255,255,255,0.04)",
+              }}
+            >
+              0{i + 1}
+            </div>
+
+            {/* Label */}
+            <div
+              style={{
+                fontSize: 56,
+                fontWeight: 700,
+                color: isActive ? C.fg : C.fgDim,
+                letterSpacing: "-0.03em",
+                transition: "color 0.3s",
+              }}
+            >
+              {step}
+              {i === STEPS.length - 1 && isPulse ? (
+                <span
+                  style={{
+                    color: C.oai,
+                    marginLeft: 8,
+                    display: "inline-block",
+                    animation: "blink 0.8s infinite",
+                  }}
+                >
+                  …
+                </span>
+              ) : null}
+            </div>
+          </div>
+        );
+      })}
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// S8 — THE SPEED WIN (bar race)
+// ═══════════════════════════════════════════════════════════════
+
+type Metric = {
+  label: string;
+  subA: string;
+  subB: string;
+  valA: number; // relative, 0..1
+  valB: number;
+  delta: string;
+  deltaKind: "same" | "up" | "down";
+};
+
+const METRICS: Metric[] = [
+  { label: "Per-token latency", subA: "GPT-5.4", subB: "GPT-5.5", valA: 0.92, valB: 0.92, delta: "IDENTICAL", deltaKind: "same" },
+  { label: "Output quality", subA: "GPT-5.4", subB: "GPT-5.5", valA: 0.62, valB: 0.88, delta: "+42%", deltaKind: "up" },
+  { label: "Tokens used", subA: "GPT-5.4", subB: "GPT-5.5", valA: 0.88, valB: 0.55, delta: "−38%", deltaKind: "down" },
+  { label: "Retries", subA: "GPT-5.4", subB: "GPT-5.5", valA: 0.80, valB: 0.28, delta: "−65%", deltaKind: "down" },
+];
+
+const Scene8: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const titleOp = fadeIn(frame, 0, 10);
+  const titleY = interpolate(frame, [0, 15], [16, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  const exit = fadeOut(frame, SCENES.S8.dur - 15, 12);
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT, opacity: exit }}>
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP + 10,
+          left: SAFE_L,
+          right: SAFE_R,
+          opacity: titleOp,
+          transform: `translateY(${titleY}px)`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: MONO,
+            fontSize: 20,
+            fontWeight: 600,
+            color: C.warn,
+            letterSpacing: "0.14em",
+            textTransform: "uppercase",
+            marginBottom: 12,
+          }}
+        >
+          Genuinely impressive
+        </div>
+        <div
+          style={{
+            fontSize: 56,
+            fontWeight: 700,
+            color: C.fg,
+            letterSpacing: "-0.035em",
+            lineHeight: 1.0,
+          }}
+        >
+          Same speed.
+          <br />
+          <span style={{ color: C.oai }}>Better everything.</span>
+        </div>
+      </div>
+
+      {/* Bars */}
+      <div
+        style={{
+          position: "absolute",
+          top: 540,
+          left: SAFE_L,
+          right: SAFE_R,
+          display: "flex",
+          flexDirection: "column",
+          gap: 32,
+        }}
+      >
+        {METRICS.map((m, i) => {
+          const inS = gs(frame, fps, 0.5 + i * 0.5, "snappy");
+          const op = interpolate(inS, [0, 0.4], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          });
+          const y = interpolate(inS, [0, 1], [20, 0]);
+
+          // Bars animate width
+          const barT = interpolate(frame, [15 + i * 15, 60 + i * 15], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+            easing: Easing.bezier(...ds.easing.standard),
+          });
+          const barAW = m.valA * barT * 100;
+          const barBW = m.valB * barT * 100;
+
+          const deltaColor =
+            m.deltaKind === "same" ? C.warn : m.deltaKind === "up" ? C.oai : C.red;
+
+          return (
+            <div
+              key={m.label}
+              style={{
+                opacity: op,
+                transform: `translateY(${y}px)`,
+                padding: "20px 24px",
+                borderRadius: 18,
+                background: C.surface,
+                border: `1px solid ${C.border}`,
+                boxShadow: `inset 0 1px 0 rgba(255,255,255,0.04)`,
+              }}
+            >
+              {/* Header: label + delta */}
+              <div
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  marginBottom: 14,
+                }}
+              >
+                <div
+                  style={{
+                    fontSize: 30,
+                    fontWeight: 700,
+                    color: C.fg,
+                    letterSpacing: "-0.02em",
+                  }}
+                >
+                  {m.label}
+                </div>
+                <div
+                  style={{
+                    padding: "6px 14px",
+                    borderRadius: 9999,
+                    background: `rgba(${m.deltaKind === "same" ? "252,187,0" : m.deltaKind === "up" ? "16,163,127" : "255,59,70"},0.15)`,
+                    border: `1px solid ${deltaColor}`,
+                    fontFamily: MONO,
+                    fontSize: 18,
+                    fontWeight: 700,
+                    color: deltaColor,
+                    letterSpacing: "0.04em",
+                  }}
+                >
+                  {m.delta}
+                </div>
+              </div>
+
+              {/* Bar A (5.4) */}
+              <div style={{ marginBottom: 8 }}>
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 12,
+                  }}
+                >
+                  <div
+                    style={{
+                      width: 80,
+                      fontFamily: MONO,
+                      fontSize: 14,
+                      fontWeight: 500,
+                      color: C.fgMuted,
+                      letterSpacing: "0.05em",
+                    }}
+                  >
+                    {m.subA}
+                  </div>
+                  <div style={{ flex: 1, height: 14, background: "rgba(255,255,255,0.05)", borderRadius: 7, overflow: "hidden" }}>
+                    <div
+                      style={{
+                        height: "100%",
+                        width: `${barAW}%`,
+                        background: C.fgDim,
+                        borderRadius: 7,
+                      }}
+                    />
+                  </div>
+                </div>
+              </div>
+              {/* Bar B (5.5) */}
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 12,
+                }}
+              >
+                <div
+                  style={{
+                    width: 80,
+                    fontFamily: MONO,
+                    fontSize: 14,
+                    fontWeight: 600,
+                    color: C.oaiSoft,
+                    letterSpacing: "0.05em",
+                  }}
+                >
+                  {m.subB}
+                </div>
+                <div style={{ flex: 1, height: 14, background: "rgba(255,255,255,0.05)", borderRadius: 7, overflow: "hidden" }}>
+                  <div
+                    style={{
+                      height: "100%",
+                      width: `${barBW}%`,
+                      background: `linear-gradient(90deg, ${C.oai}, ${C.oaiSoft})`,
+                      borderRadius: 7,
+                      boxShadow: `0 0 20px rgba(16,163,127,0.4)`,
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// S9 — RARE COMBO + benchmark stats
+// ═══════════════════════════════════════════════════════════════
+
+const Scene9: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const titleOp = fadeIn(frame, 0, 10);
+  const titleY = interpolate(frame, [0, 15], [20, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Equation entries
+  const eq1S = gs(frame, fps, 0.5, "bouncy");
+  const eq2S = gs(frame, fps, 1.0, "bouncy");
+  const eq3S = gs(frame, fps, 1.5, "bouncy");
+
+  // Stats image slides in
+  const statsS = gs(frame, fps, 2.0, "snappy");
+  const statsOp = interpolate(statsS, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const statsY = interpolate(statsS, [0, 1], [40, 0]);
+
+  // Final punch "rare."
+  const rareS = gs(frame, fps, 6.0, "bouncy");
+  const rareOp = interpolate(rareS, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const rareScale = interpolate(rareS, [0, 0.6, 1], [0.5, 1.15, 1]);
+  const rareGlow = 0.3 + Math.sin(frame * 0.14) * 0.15;
+
+  const exit = fadeOut(frame, SCENES.S9.dur - 15, 12);
+
+  const EqCell: React.FC<{
+    s: number;
+    label: string;
+    arrow: string;
+    color: string;
+  }> = ({ s, label, arrow, color }) => {
+    const op = interpolate(s, [0, 0.4], [0, 1], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+    });
+    const sc = interpolate(s, [0, 0.6, 1], [0.6, 1.1, 1]);
+    return (
+      <div
+        style={{
+          opacity: op,
+          transform: `scale(${sc})`,
+          padding: "20px 16px",
+          borderRadius: 16,
+          background: C.surface,
+          border: `1px solid ${C.border}`,
+          textAlign: "center",
+          flex: 1,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: MONO,
+            fontSize: 14,
+            fontWeight: 600,
+            color: C.fgMuted,
+            letterSpacing: "0.1em",
+            textTransform: "uppercase",
+            marginBottom: 8,
+          }}
+        >
+          {label}
+        </div>
+        <div
+          style={{
+            fontSize: 64,
+            fontWeight: 800,
+            color,
+            lineHeight: 1,
+            letterSpacing: "-0.04em",
+          }}
+        >
+          {arrow}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT, opacity: exit }}>
+      {/* Title */}
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP + 10,
+          left: SAFE_L,
+          right: SAFE_R,
+          opacity: titleOp,
+          transform: `translateY(${titleY}px)`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: MONO,
+            fontSize: 20,
+            fontWeight: 600,
+            color: C.warn,
+            letterSpacing: "0.14em",
+            textTransform: "uppercase",
+            marginBottom: 12,
+          }}
+        >
+          Efficiency win
+        </div>
+        <div
+          style={{
+            fontSize: 54,
+            fontWeight: 700,
+            color: C.fg,
+            letterSpacing: "-0.035em",
+            lineHeight: 1.0,
+          }}
+        >
+          Capability up.
+          <br />
+          Cost down.
+        </div>
+      </div>
+
+      {/* Equation row */}
+      <div
+        style={{
+          position: "absolute",
+          top: 540,
+          left: SAFE_L,
+          right: SAFE_R,
+          display: "flex",
+          gap: 14,
+        }}
+      >
+        <EqCell s={eq1S} label="Capability" arrow="↑" color={C.oai} />
+        <EqCell s={eq2S} label="Speed" arrow="=" color={C.warn} />
+        <EqCell s={eq3S} label="Cost" arrow="↓" color={C.oaiSoft} />
+      </div>
+
+      {/* Stats table image */}
+      <div
+        style={{
+          position: "absolute",
+          top: 800,
+          left: SAFE_L,
+          right: SAFE_R,
+          opacity: statsOp,
+          transform: `translateY(${statsY}px)`,
+        }}
+      >
+        <div
+          style={{
+            borderRadius: 20,
+            overflow: "hidden",
+            background: "#000",
+            border: `1px solid ${C.border}`,
+            boxShadow: `0 30px 60px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04)`,
+          }}
+        >
+          <Img
+            src={staticFile("captures/your-asset.png" /* REFERENCE-STRIP */)}
+            style={{ width: "100%", display: "block", objectFit: "contain", padding: 12 }}
+          />
+        </div>
+      </div>
+
+      {/* "That's rare." punch */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: H - SAFE_BOT_Y + 20,
+          left: 0,
+          right: 0,
+          textAlign: "center",
+          opacity: rareOp,
+          transform: `scale(${rareScale})`,
+        }}
+      >
+        <div
+          style={{
+            display: "inline-block",
+            fontSize: 78,
+            fontWeight: 800,
+            background: `linear-gradient(135deg, ${C.oai}, ${C.oaiSoft})`,
+            WebkitBackgroundClip: "text",
+            backgroundClip: "text",
+            WebkitTextFillColor: "transparent",
+            letterSpacing: "-0.05em",
+            filter: `drop-shadow(0 0 30px rgba(16,163,127,${rareGlow}))`,
+          }}
+        >
+          That's rare.
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// S10 — CURIOUS TAKE
+// ═══════════════════════════════════════════════════════════════
+
+const Scene10: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const line1 = fadeIn(frame, 0, 14);
+  const line1Y = interpolate(frame, [0, 18], [40, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  const line2 = fadeIn(frame, 30, 14);
+  const line2Y = interpolate(frame, [30, 48], [40, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Marquee scroll
+  const marqueeX = interpolate(frame, [45, SCENES.S10.dur], [W, -W * 1.2], {
+    extrapolateLeft: "clamp",
+  });
+
+  const dates = [
+    "APR 24",
+    "APR 25",
+    "APR 26",
+    "APR 27",
+    "APR 28",
+    "MAY 01",
+    "MAY 05",
+    "MAY 10",
+    "MAY 15",
+  ];
+
+  const exit = fadeOut(frame, SCENES.S10.dur - 15, 12);
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT, opacity: exit }}>
+      <div
+        style={{
+          position: "absolute",
+          top: 700,
+          left: SAFE_L,
+          right: SAFE_R,
+          textAlign: "center",
+        }}
+      >
+        <div
+          style={{
+            opacity: line1,
+            transform: `translateY(${line1Y}px)`,
+            fontFamily: MONO,
+            fontSize: 22,
+            fontWeight: 600,
+            color: C.oai,
+            letterSpacing: "0.14em",
+            textTransform: "uppercase",
+            marginBottom: 24,
+          }}
+        >
+          The next few weeks
+        </div>
+        <div
+          style={{
+            opacity: line2,
+            transform: `translateY(${line2Y}px)`,
+            fontSize: 70,
+            fontWeight: 700,
+            color: C.fg,
+            letterSpacing: "-0.04em",
+            lineHeight: 1.05,
+          }}
+        >
+          Let's see what
+          <br />
+          people <span style={{ color: C.oai }}>build.</span>
+        </div>
+      </div>
+
+      {/* Date marquee */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: H - SAFE_BOT_Y + 40,
+          left: 0,
+          right: 0,
+          height: 80,
+          overflow: "hidden",
+        }}
+      >
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            display: "flex",
+            gap: 22,
+            whiteSpace: "nowrap",
+            transform: `translateX(${marqueeX}px)`,
+            willChange: "transform",
+          }}
+        >
+          {dates.map((d, i) => (
+            <div
+              key={`${d}-${i}`}
+              style={{
+                padding: "16px 28px",
+                borderRadius: 9999,
+                background: i === 0 ? `rgba(16,163,127,0.18)` : C.surface,
+                border: `1px solid ${i === 0 ? C.oai : C.border}`,
+                fontFamily: MONO,
+                fontSize: 26,
+                fontWeight: 700,
+                color: i === 0 ? C.oaiSoft : C.fgMuted,
+                letterSpacing: "0.1em",
+              }}
+            >
+              {d}
+            </div>
+          ))}
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// S11 — ANTHROPIC BEAT (split + sharper moment)
+// ═══════════════════════════════════════════════════════════════
+
+const Scene11: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // Split-in: left (Anthropic) slides from left, right (OpenAI) from right
+  const splitS = gs(frame, fps, 0.1, "snappy");
+  const leftX = interpolate(splitS, [0, 1], [-W / 2, 0]);
+  const rightX = interpolate(splitS, [0, 1], [W / 2, 0]);
+
+  // Mythos line
+  const mythosOp = fadeIn(frame, 55, 14);
+  const mythosY = interpolate(frame, [55, 75], [20, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  // red underline draw
+  const mythosU = interpolate(frame, [85, 115], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // SHARPER MOMENT final
+  const sharpS = gs(frame, fps, 4.4, "bouncy");
+  const sharpOp = interpolate(sharpS, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const sharpScale = interpolate(sharpS, [0, 0.5, 1], [0.4, 1.2, 1.05]);
+  const sharpGlow = 0.4 + Math.sin(frame * 0.14) * 0.15;
+
+  const exit = fadeOut(frame, SCENES.S11.dur - 15, 12);
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT, opacity: exit }}>
+      {/* SPLIT LOGOS row */}
+      <div
+        style={{
+          position: "absolute",
+          top: 340,
+          left: 0,
+          right: 0,
+          height: 280,
+          display: "flex",
+        }}
+      >
+        {/* Anthropic panel */}
+        <div
+          style={{
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 16,
+            transform: `translateX(${leftX}px)`,
+            background: `linear-gradient(135deg, rgba(245,161,126,0.08), rgba(245,161,126,0.02))`,
+            borderRight: `1px solid ${C.border}`,
+            padding: "20px 40px",
+          }}
+        >
+          <div
+            style={{
+              color: "#f5a17e",
+              width: 240,
+              height: 48,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <Img
+              src={staticFile("captures/your-asset.png" /* REFERENCE-STRIP */)}
+              style={{
+                width: "100%",
+                height: "100%",
+                objectFit: "contain",
+                filter: "brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(340deg)",
+              }}
+            />
+          </div>
+          <div
+            style={{
+              fontFamily: MONO,
+              fontSize: 14,
+              fontWeight: 600,
+              color: "#f5a17e",
+              letterSpacing: "0.12em",
+              textTransform: "uppercase",
+              opacity: 0.75,
+            }}
+          >
+            dealing with Mythos
+          </div>
+        </div>
+
+        {/* OpenAI panel */}
+        <div
+          style={{
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: 16,
+            transform: `translateX(${rightX}px)`,
+            background: `linear-gradient(135deg, rgba(16,163,127,0.12), rgba(16,163,127,0.02))`,
+            padding: "20px 40px",
+          }}
+        >
+          <div
+            style={{
+              color: C.oai,
+              width: 80,
+              height: 80,
+            }}
+          >
+            <Img
+              src={staticFile("captures/your-asset.png" /* REFERENCE-STRIP */)}
+              style={{
+                width: "100%",
+                height: "100%",
+                objectFit: "contain",
+                filter: "invert(1)",
+              }}
+            />
+          </div>
+          <div
+            style={{
+              fontFamily: MONO,
+              fontSize: 14,
+              fontWeight: 600,
+              color: C.oaiSoft,
+              letterSpacing: "0.12em",
+              textTransform: "uppercase",
+            }}
+          >
+            shipping GPT-5.5
+          </div>
+        </div>
+      </div>
+
+      {/* Subtext */}
+      <div
+        style={{
+          position: "absolute",
+          top: 680,
+          left: SAFE_L,
+          right: SAFE_R,
+          textAlign: "center",
+          opacity: mythosOp,
+          transform: `translateY(${mythosY}px)`,
+          fontSize: 42,
+          fontWeight: 500,
+          color: C.fgSoft,
+          letterSpacing: "-0.02em",
+          lineHeight: 1.25,
+        }}
+      >
+        Given everything Anthropic's been dealing with around{" "}
+        <span style={{ position: "relative", color: C.fg, fontWeight: 700 }}>
+          Mythos
+          <span
+            style={{
+              position: "absolute",
+              bottom: -6,
+              left: 0,
+              height: 5,
+              width: "100%",
+              background: C.red,
+              borderRadius: 3,
+              boxShadow: `0 0 12px ${C.red}`,
+              transform: `scaleX(${mythosU})`,
+              transformOrigin: "left center",
+              willChange: "transform",
+            }}
+          />
+        </span>{" "}
+        lately…
+      </div>
+
+      {/* SHARPER MOMENT big close */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: H - SAFE_BOT_Y + 40,
+          left: 0,
+          right: 0,
+          textAlign: "center",
+          opacity: sharpOp,
+          transform: `scale(${sharpScale})`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: MONO,
+            fontSize: 18,
+            fontWeight: 600,
+            color: C.fgMuted,
+            letterSpacing: "0.14em",
+            textTransform: "uppercase",
+            marginBottom: 10,
+          }}
+        >
+          OpenAI picked a
+        </div>
+        <div
+          style={{
+            fontSize: 120,
+            fontWeight: 900,
+            background: `linear-gradient(135deg, ${C.oai}, ${C.oaiSoft})`,
+            WebkitBackgroundClip: "text",
+            backgroundClip: "text",
+            WebkitTextFillColor: "transparent",
+            letterSpacing: "-0.05em",
+            lineHeight: 0.95,
+            filter: `drop-shadow(0 0 40px rgba(16,163,127,${sharpGlow}))`,
+          }}
+        >
+          SHARPER
+          <br />
+          MOMENT.
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// S12 — LIKE + SUBSCRIBE CTA
+// ═══════════════════════════════════════════════════════════════
+
+const Scene12: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const f = frame;
+
+  const heroWords = ["Follow", "for", "more"];
+
+  const belowSpring = gs(f, fps, 1.0, "bouncy");
+  const belowOp = interpolate(belowSpring, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const belowScale = interpolate(belowSpring, [0, 0.6, 1], [0.6, 1.15, 1]);
+
+  const likeSpring = gs(f, fps, 1.8, "snappy");
+  const subSpring = gs(f, fps, 2.1, "snappy");
+
+  const likeOp = interpolate(likeSpring, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const likeY = interpolate(likeSpring, [0, 1], [22, 0]);
+
+  const subOp = interpolate(subSpring, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const subY = interpolate(subSpring, [0, 1], [22, 0]);
+
+  const subGlow = 0.4 + Math.sin(f * 0.15) * 0.2;
+
+  const heartFilled = f > 2.8 * fps;
+  const heartScaleSpring = gs(f, fps, 2.8, "bouncy");
+  const heartScale = interpolate(heartScaleSpring, [0, 0.5, 1], [1, 1.4, 1.1]);
+
+  const subActive = f > 3.3 * fps;
+  const bellRingT = interpolate(f, [3.3 * fps, 4.0 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const bellTilt = Math.sin(bellRingT * Math.PI * 4) * (1 - bellRingT) * 14;
+
+  // Particle burst when heart fills
+  const particleT = interpolate(f, [2.8 * fps, 3.8 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Handle
+  const handleOp = fadeIn(f, 4.3 * fps, 12);
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT, backgroundColor: C.bg }}>
+      <Background frame={frame} tint="yt" />
+
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP,
+          left: SAFE_L,
+          right: SAFE_R,
+          bottom: H - SAFE_BOT_Y,
+        }}
+      >
+        {/* HERO HEADLINE */}
+        <div
+          style={{
+            position: "absolute",
+            top: 40,
+            width: "100%",
+            display: "flex",
+            flexWrap: "wrap",
+            gap: "0 0.32em",
+            justifyContent: "center",
+            fontSize: 96,
+            fontWeight: 700,
+            color: C.fg,
+            letterSpacing: "-0.04em",
+            lineHeight: 1.0,
+            textAlign: "center",
+          }}
+        >
+          {heroWords.map((w, i) => {
+            const s = gs(f, fps, 0.1 + i * 0.08, "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>
+
+        {/* AI */}
+        <div
+          style={{
+            position: "absolute",
+            top: 180,
+            width: "100%",
+            textAlign: "center",
+            opacity: belowOp,
+            transform: `scale(${belowScale})`,
+            fontSize: 156,
+            fontWeight: 900,
+            background: `linear-gradient(135deg, ${C.yt}, #ff5577)`,
+            WebkitBackgroundClip: "text",
+            backgroundClip: "text",
+            WebkitTextFillColor: "transparent",
+            letterSpacing: "-0.05em",
+            textShadow: `0 0 60px rgba(255,0,51,0.4)`,
+            filter: `drop-shadow(0 0 30px rgba(255,0,51,${0.3 + Math.sin(f * 0.1) * 0.15}))`,
+            lineHeight: 1,
+          }}
+        >
+          AI DROPS
+        </div>
+
+        {/* Action pills */}
+        <div
+          style={{
+            position: "absolute",
+            bottom: 30,
+            left: 0,
+            right: 0,
+            display: "flex",
+            flexDirection: "column",
+            gap: 18,
+          }}
+        >
+          {/* LIKE pill */}
+          <div
+            style={{
+              opacity: likeOp,
+              transform: `translateY(${likeY}px)`,
+              padding: "20px 28px",
+              borderRadius: 22,
+              background: heartFilled
+                ? `linear-gradient(135deg, rgba(255,0,51,0.15), ${C.surface})`
+                : C.surface,
+              border: `1.5px solid ${heartFilled ? C.yt : C.borderLoud}`,
+              display: "flex",
+              alignItems: "center",
+              gap: 22,
+              position: "relative",
+              boxShadow: heartFilled
+                ? `0 0 30px -8px rgba(255,0,51,0.5), inset 0 1px 0 rgba(255,255,255,0.04)`
+                : `inset 0 1px 0 rgba(255,255,255,0.04)`,
+            }}
+          >
+            <div style={{ position: "relative" }}>
+              <svg
+                width={56}
+                height={56}
+                viewBox="0 0 24 24"
+                fill={heartFilled ? C.yt : "none"}
+                stroke={heartFilled ? C.yt : C.fg}
+                strokeWidth="2"
+                style={{ transform: `scale(${heartScale})` }}
+              >
+                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+              </svg>
+              {[0, 1, 2, 3, 4, 5].map((i) => {
+                const angle = (i / 6) * Math.PI * 2;
+                const dist = particleT * 60;
+                const px = Math.cos(angle) * dist;
+                const py = Math.sin(angle) * dist;
+                const pOp = interpolate(particleT, [0, 0.2, 1], [0, 1, 0], {
+                  extrapolateLeft: "clamp",
+                  extrapolateRight: "clamp",
+                });
+                return (
+                  <div
+                    key={i}
+                    style={{
+                      position: "absolute",
+                      top: 24,
+                      left: 24,
+                      width: 7,
+                      height: 7,
+                      borderRadius: "50%",
+                      background: C.yt,
+                      transform: `translate(${px}px, ${py}px)`,
+                      opacity: pOp,
+                    }}
+                  />
+                );
+              })}
+            </div>
+            <span
+              style={{
+                fontSize: 42,
+                fontWeight: 700,
+                color: C.fg,
+                letterSpacing: "-0.03em",
+                flex: 1,
+              }}
+            >
+              {heartFilled ? "Liked" : "Like"}
+            </span>
+          </div>
+
+          {/* SUBSCRIBE pill */}
+          <div
+            style={{
+              opacity: subOp,
+              transform: `translateY(${subY}px)`,
+              padding: "22px 28px",
+              borderRadius: 22,
+              background: subActive
+                ? `linear-gradient(135deg, ${C.yt}, #ff2d5a)`
+                : `linear-gradient(135deg, ${C.yt}, #cc0029)`,
+              border: `1.5px solid ${subActive ? "#ff5577" : C.yt}`,
+              display: "flex",
+              alignItems: "center",
+              gap: 22,
+              boxShadow: `0 18px 40px -10px rgba(255,0,51,${subGlow}), 0 0 60px rgba(255,0,51,${subGlow * 0.4})`,
+            }}
+          >
+            <svg
+              width={56}
+              height={56}
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#fff"
+              strokeWidth="2.4"
+              strokeLinejoin="round"
+              strokeLinecap="round"
+              style={{ transform: `rotate(${bellTilt}deg)`, flexShrink: 0 }}
+            >
+              <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
+              <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+            </svg>
+            <span
+              style={{
+                fontSize: 44,
+                fontWeight: 800,
+                color: "#fff",
+                letterSpacing: "-0.03em",
+                flex: 1,
+                textTransform: "uppercase",
+              }}
+            >
+              {subActive ? "Subscribed" : "Subscribe"}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* @DeviniLabs handle */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: H - SAFE_BOT_Y + 10,
+          left: 0,
+          right: 0,
+          textAlign: "center",
+          opacity: handleOp,
+          fontFamily: MONO,
+          fontSize: 22,
+          fontWeight: 600,
+          color: C.fgMuted,
+          letterSpacing: "0.08em",
+        }}
+      >
+        @DeviniLabs
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// MAIN COMPOSITION
+// ═══════════════════════════════════════════════════════════════
+
+export const GPT55Reel: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // Choose background tint based on active scene
+  const tint: "oai" | "rival" | "yt" =
+    frame >= SCENES.S11.from && frame < SCENES.S12.from
+      ? "rival"
+      : frame >= SCENES.S12.from
+        ? "yt"
+        : "oai";
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: C.bg, fontFamily: FONT }}>
+      {/* REFERENCE-STRIP: voiceover tag removed — bring your own voiceover */}
+
+      {/* Global background (Scene 12 draws its own) */}
+      {frame < SCENES.S12.from ? <Background frame={frame} tint={tint} /> : null}
+
+      <Sequence from={SCENES.S1.from} durationInFrames={SCENES.S1.dur}>
+        <Scene1 />
+      </Sequence>
+      <Sequence from={SCENES.S2.from} durationInFrames={SCENES.S2.dur}>
+        <Scene2 />
+      </Sequence>
+      <Sequence from={SCENES.S3.from} durationInFrames={SCENES.S3.dur}>
+        <Scene3 />
+      </Sequence>
+      <Sequence from={SCENES.S4.from} durationInFrames={SCENES.S4.dur}>
+        <Scene4 />
+      </Sequence>
+      <Sequence from={SCENES.S5.from} durationInFrames={SCENES.S5.dur}>
+        <Scene5 />
+      </Sequence>
+      <Sequence from={SCENES.S6.from} durationInFrames={SCENES.S6.dur}>
+        <Scene6 />
+      </Sequence>
+      <Sequence from={SCENES.S7.from} durationInFrames={SCENES.S7.dur}>
+        <Scene7 />
+      </Sequence>
+      <Sequence from={SCENES.S8.from} durationInFrames={SCENES.S8.dur}>
+        <Scene8 />
+      </Sequence>
+      <Sequence from={SCENES.S9.from} durationInFrames={SCENES.S9.dur}>
+        <Scene9 />
+      </Sequence>
+      <Sequence from={SCENES.S10.from} durationInFrames={SCENES.S10.dur}>
+        <Scene10 />
+      </Sequence>
+      <Sequence from={SCENES.S11.from} durationInFrames={SCENES.S11.dur}>
+        <Scene11 />
+      </Sequence>
+      <Sequence from={SCENES.S12.from} durationInFrames={SCENES.S12.dur}>
+        <Scene12 />
+      </Sequence>
+    </AbsoluteFill>
+  );
+};