@devinilabs/reelstack 1.2.0

package/reference/paper/opus.tsx

@@ -0,0 +1,1770 @@
+/**
+ * REFERENCE — OpusReel  (Family: paper)
+ *
+ * Canonical example of the paper 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/OpusReel.tsx
+ * Bundled at: 2026-05-08T18:50:39.511Z
+ */
+import {
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+  Easing,
+  AbsoluteFill,
+  staticFile,
+} from "remotion";
+import { Audio } from "@remotion/media";
+import { ds } from "./designSystem";
+
+// ═══════════════════════════════════════════════════════════════
+// CONSTANTS
+// ═══════════════════════════════════════════════════════════════
+
+const FONT = ds.font.sans;
+const MONO = ds.font.mono;
+const G = ds.card3d.green;
+
+// Light-mode text palette (cream paper background)
+const T = {
+  heading: "#1a1a1a",
+  body: "#2d2d2d",
+  muted: "#6b6b6b",
+  accent: ds.color.claude,       // #D4663A terracotta
+  accentDark: "#1e3a27",         // dark green for cards
+  danger: "#c0392b",
+  success: "#1e7a45",
+} as const;
+
+// Scene timeline: [startSec, endSec] — synced to 111s voiceover
+// 11 segments mapped to audio pacing
+const SEGS = [
+  { s: 0, e: 8, text: "Hook" },             // 1: Opus 4.7 just dropped
+  { s: 7.5, e: 18, text: "Mythos" },         // 2: Mythos preview reveal
+  { s: 17.5, e: 28, text: "Half-step" },     // 3: Half-step theory
+  { s: 27.5, e: 38, text: "Distilled" },     // 4: Distilled down theory
+  { s: 37.5, e: 52, text: "Wins" },          // 5: Benchmark wins
+  { s: 51.5, e: 60, text: "Speed" },         // 6: Speed / parallelism
+  { s: 59.5, e: 72, text: "Nerfed" },        // 7: Nerfed benchmarks
+  { s: 71.5, e: 82, text: "Thesis" },        // 8: Doesn't change anything
+  { s: 81.5, e: 92, text: "GPT3" },          // 9: Zero-to-one was GPT-3
+  { s: 91.5, e: 102, text: "Advice" },       // 10: Stop switching models
+  { s: 101.5, e: 111, text: "Close" },       // 11: Ship something
+] as const;
+
+// Screenshot placement: 5 screenshots, ~10s each, at key moments
+// ss1: Benchmark table (during Wins scene)
+// ss2: Agents.md dark card (during Distilled scene)
+// ss3: Claude referencing agents.md (during Nerfed scene)
+// ss4: What you do / How you sound (during Thesis scene)
+// ss5: Brand details card (during Advice scene)
+
+// ═══════════════════════════════════════════════════════════════
+// UTILITIES
+// ═══════════════════════════════════════════════════════════════
+
+const so = (
+  frame: number,
+  fps: number,
+  startS: number,
+  endS: number,
+  fadeIn = 0.6,
+  fadeOut = 0.6,
+) =>
+  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);
+
+interface SP {
+  frame: number;
+  fps: number;
+}
+
+// ═══════════════════════════════════════════════════════════════
+// BACKGROUND — dark with subtle green tint
+// ═══════════════════════════════════════════════════════════════
+
+const Background: React.FC<{ frame: number }> = ({ frame }) => {
+  // Warm paper cream — matched from Context.md reference image
+  const paperBase = "#e8e4de";
+  const paperLight = "#edeae4";
+  const gridLine = "rgba(180,175,165,0.25)";
+
+  // Subtle vignette pulse
+  const vignetteOp = 0.12 + Math.sin(frame * 0.006) * 0.03;
+
+  return (
+    <AbsoluteFill>
+      {/* Warm cream base with subtle radial gradient */}
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          background: `radial-gradient(ellipse at 50% 40%, ${paperLight} 0%, ${paperBase} 55%, #d9d4cc 100%)`,
+        }}
+      />
+      {/* Fine grid lines — matches Context.md paper grid */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          backgroundImage: `
+            linear-gradient(${gridLine} 1px, transparent 1px),
+            linear-gradient(90deg, ${gridLine} 1px, transparent 1px)
+          `,
+          backgroundSize: "48px 48px",
+        }}
+      />
+      {/* Soft center vignette — lighter in the middle */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse at 50% 45%, rgba(255,255,255,0.3) 0%, transparent 60%)`,
+        }}
+      />
+      {/* Edge vignette — slightly darker corners */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(0,0,0,${vignetteOp}) 100%)`,
+        }}
+      />
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// 3D FLOATING CARD — reusable component
+// ═══════════════════════════════════════════════════════════════
+
+const FloatingCard: React.FC<{
+  children: React.ReactNode;
+  width?: number | string;
+  rotateX?: number;
+  rotateY?: number;
+  scale?: number;
+  opacity?: number;
+  style?: React.CSSProperties;
+}> = ({
+  children,
+  width = "85%",
+  rotateX = 2,
+  rotateY = -1,
+  scale = 1,
+  opacity = 1,
+  style,
+}) => (
+  <div
+    style={{
+      width,
+      maxWidth: 900,
+      perspective: 1200,
+      opacity,
+      ...style,
+    }}
+  >
+    <div
+      style={{
+        ...ds.card3d.cardStyle,
+        transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${scale})`,
+        transformStyle: "preserve-3d",
+        padding: "32px 36px",
+        position: "relative",
+        overflow: "hidden",
+      }}
+    >
+      {/* Top edge highlight */}
+      <div
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 20,
+          right: 20,
+          height: 1,
+          background:
+            "linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent)",
+        }}
+      />
+      {children}
+    </div>
+  </div>
+);
+
+// ═══════════════════════════════════════════════════════════════
+// STAT BADGE — animated number with label
+// ═══════════════════════════════════════════════════════════════
+
+const StatBadge: React.FC<{
+  value: string;
+  label: string;
+  color?: string;
+  delay?: number;
+  frame: number;
+  fps: number;
+}> = ({ value, label, color = ds.color.claude, delay = 0, frame, fps }) => {
+  const s = spring({ frame, fps, delay, config: ds.spring.snappy });
+  const scale = interpolate(s, [0, 1], [0.7, 1]);
+  const op = interpolate(s, [0, 0.3], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  return (
+    <div
+      style={{
+        textAlign: "center",
+        opacity: op,
+        transform: `scale(${scale})`,
+      }}
+    >
+      <div
+        style={{
+          fontFamily: FONT,
+          fontSize: 44,
+          fontWeight: ds.text.bold,
+          color,
+          lineHeight: 1,
+          letterSpacing: ds.text.tighter,
+        }}
+      >
+        {value}
+      </div>
+      <div
+        style={{
+          fontFamily: FONT,
+          fontSize: 14,
+          fontWeight: ds.text.medium,
+          color: T.muted,
+          marginTop: 6,
+          letterSpacing: ds.text.wide,
+          textTransform: "uppercase",
+        }}
+      >
+        {label}
+      </div>
+    </div>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 1: HOOK — "Opus 4.7 just dropped"
+// ═══════════════════════════════════════════════════════════════
+
+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);
+
+  const titleSpring = spring({ frame: f, fps, config: ds.spring.gentle });
+  const titleScale = interpolate(titleSpring, [0, 1], [0.85, 1]);
+  const subOp = interpolate(f, [1 * fps, 1.8 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const subY = interpolate(f, [1 * fps, 1.8 * fps], [30, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.quad),
+  });
+
+  // Version badge
+  const badgeSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(0.5 * fps),
+    config: ds.spring.bouncy,
+  });
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      {/* Version badge */}
+      <div
+        style={{
+          position: "absolute",
+          top: "18%",
+          left: "50%",
+          transform: `translate(-50%, 0) scale(${interpolate(badgeSpring, [0, 1], [0.5, 1])})`,
+          opacity: interpolate(badgeSpring, [0, 0.3], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          ...ds.card3d.pillStyle,
+          display: "flex",
+          alignItems: "center",
+          gap: 10,
+        }}
+      >
+        <div
+          style={{
+            width: 8,
+            height: 8,
+            borderRadius: "50%",
+            background: ds.color.success,
+            boxShadow: `0 0 8px ${ds.color.success}`,
+          }}
+        />
+        <span
+          style={{
+            fontFamily: MONO,
+            fontSize: 16,
+            fontWeight: ds.text.medium,
+            color: G.text,
+            letterSpacing: 1,
+          }}
+        >
+          NEW RELEASE
+        </span>
+      </div>
+
+      {/* Title */}
+      <div
+        style={{
+          position: "absolute",
+          top: "30%",
+          width: "100%",
+          textAlign: "center",
+          padding: "0 48px",
+          transform: `scale(${titleScale})`,
+          opacity: interpolate(titleSpring, [0, 0.2], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 80,
+            fontWeight: ds.text.bold,
+            color: T.heading,
+            lineHeight: ds.text.lineTight,
+            letterSpacing: ds.text.tighter,
+          }}
+        >
+          Claude
+          <br />
+          <span style={{ color: ds.color.claude }}>Opus 4.7</span>
+        </div>
+      </div>
+
+      {/* Subtitle */}
+      <div
+        style={{
+          position: "absolute",
+          top: "60%",
+          width: "100%",
+          textAlign: "center",
+          padding: "0 60px",
+          opacity: subOp,
+          transform: `translateY(${subY}px)`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 28,
+            fontWeight: ds.text.regular,
+            color: T.muted,
+            lineHeight: ds.text.lineNormal,
+          }}
+        >
+          It's good... but it's not
+          <br />
+          what you think it is.
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 2: MYTHOS REVEAL — "galaxy-brain model"
+// ═══════════════════════════════════════════════════════════════
+
+const MythosScene: 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);
+
+  const cardSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(0.5 * fps),
+    config: ds.spring.glass,
+  });
+  const cardY = interpolate(cardSpring, [0, 1], [80, 0]);
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      {/* Title */}
+      <div
+        style={{
+          position: "absolute",
+          top: "12%",
+          width: "100%",
+          textAlign: "center",
+          padding: "0 48px",
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 24,
+            fontWeight: ds.text.medium,
+            color: T.muted,
+            letterSpacing: ds.text.wider,
+            textTransform: "uppercase",
+            opacity: interpolate(f, [0.3 * fps, 0.8 * fps], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            }),
+          }}
+        >
+          The hidden model
+        </div>
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 64,
+            fontWeight: ds.text.bold,
+            color: T.heading,
+            marginTop: 12,
+            letterSpacing: ds.text.tighter,
+            opacity: interpolate(f, [0.5 * fps, 1 * fps], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            }),
+          }}
+        >
+          Mythos Preview
+        </div>
+      </div>
+
+      {/* Info card */}
+      <div
+        style={{
+          position: "absolute",
+          top: "38%",
+          left: "50%",
+          transform: `translate(-50%, ${cardY}px)`,
+          opacity: interpolate(cardSpring, [0, 0.3], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          width: "85%",
+        }}
+      >
+        <FloatingCard rotateX={3} rotateY={-2}>
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 26,
+              fontWeight: ds.text.semibold,
+              color: G.text,
+              lineHeight: 1.6,
+            }}
+          >
+            Hacked Chrome and entire
+            <br />
+            operating systems.
+          </div>
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 20,
+              fontWeight: ds.text.regular,
+              color: G.textMuted,
+              marginTop: 16,
+              lineHeight: 1.5,
+            }}
+          >
+            They're terrified to release it.
+          </div>
+          {/* Danger badge */}
+          <div
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 8,
+              marginTop: 20,
+              background: "rgba(251,44,54,0.15)",
+              border: "1px solid rgba(251,44,54,0.3)",
+              borderRadius: ds.radius.pill,
+              padding: "6px 16px",
+            }}
+          >
+            <div
+              style={{
+                width: 6,
+                height: 6,
+                borderRadius: "50%",
+                background: "#fb2c36",
+              }}
+            />
+            <span
+              style={{
+                fontFamily: MONO,
+                fontSize: 13,
+                fontWeight: ds.text.medium,
+                color: "#ff6568",
+                letterSpacing: 1,
+              }}
+            >
+              RESTRICTED
+            </span>
+          </div>
+        </FloatingCard>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 3: HALF-STEP — "50% between 4.6 and Mythos"
+// ═══════════════════════════════════════════════════════════════
+
+const HalfStepScene: 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);
+
+  // Animated progress bar
+  const barProgress = interpolate(f, [1 * fps, 3 * fps], [0, 0.5], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.quad),
+  });
+
+  const labelOp = interpolate(f, [2.5 * fps, 3.2 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      <div
+        style={{
+          position: "absolute",
+          top: "15%",
+          width: "100%",
+          textAlign: "center",
+          padding: "0 48px",
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 48,
+            fontWeight: ds.text.bold,
+            color: T.heading,
+            letterSpacing: ds.text.tighter,
+            opacity: interpolate(f, [0.3 * fps, 0.8 * fps], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            }),
+          }}
+        >
+          A calculated
+          <br />
+          <span style={{ color: ds.color.claude }}>half-step</span>
+        </div>
+      </div>
+
+      {/* Progress visualization */}
+      <div
+        style={{
+          position: "absolute",
+          top: "40%",
+          left: "50%",
+          transform: "translate(-50%, 0)",
+          width: "80%",
+          maxWidth: 700,
+        }}
+      >
+        {/* Labels */}
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            marginBottom: 16,
+            fontFamily: MONO,
+            fontSize: 14,
+            fontWeight: ds.text.medium,
+            color: T.muted,
+          }}
+        >
+          <span>Opus 4.6</span>
+          <span style={{ opacity: labelOp, color: ds.color.claude }}>
+            4.7 sits here
+          </span>
+          <span>Mythos</span>
+        </div>
+
+        {/* Bar track */}
+        <div
+          style={{
+            width: "100%",
+            height: 12,
+            borderRadius: 6,
+            background: "rgba(0,0,0,0.08)",
+            position: "relative",
+            overflow: "hidden",
+          }}
+        >
+          {/* Fill */}
+          <div
+            style={{
+              width: `${barProgress * 100}%`,
+              height: "100%",
+              borderRadius: 6,
+              background: `linear-gradient(90deg, ${ds.color.accent}, ${ds.color.claude})`,
+              boxShadow: `0 0 20px rgba(212,102,58,0.3)`,
+            }}
+          />
+          {/* Marker */}
+          <div
+            style={{
+              position: "absolute",
+              left: `${barProgress * 100}%`,
+              top: -6,
+              width: 24,
+              height: 24,
+              borderRadius: "50%",
+              background: ds.color.claude,
+              border: "3px solid #1a2e1f",
+              transform: "translateX(-50%)",
+              boxShadow: "0 2px 8px rgba(212,102,58,0.4)",
+              opacity: labelOp,
+            }}
+          />
+        </div>
+
+        {/* Percentage labels */}
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            marginTop: 12,
+            fontFamily: MONO,
+            fontSize: 12,
+            color: "rgba(0,0,0,0.25)",
+          }}
+        >
+          <span>0%</span>
+          <span
+            style={{
+              color: ds.color.claude,
+              fontWeight: ds.text.bold,
+              fontSize: 16,
+              opacity: labelOp,
+            }}
+          >
+            ~50%
+          </span>
+          <span>100%</span>
+        </div>
+      </div>
+
+      {/* Suspicious note */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "18%",
+          width: "100%",
+          textAlign: "center",
+          opacity: interpolate(f, [4 * fps, 4.8 * fps], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 32,
+            fontWeight: ds.text.semibold,
+            color: T.heading,
+            fontStyle: "italic",
+          }}
+        >
+          Suspicious, right?
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 4: DISTILLED — "Mythos, dumbed down" + Screenshot
+// ═══════════════════════════════════════════════════════════════
+
+const DistilledScene: 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);
+
+  const cardSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(0.8 * fps),
+    config: ds.spring.glass,
+  });
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      <div
+        style={{
+          position: "absolute",
+          top: "10%",
+          width: "100%",
+          textAlign: "center",
+          padding: "0 48px",
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 22,
+            fontWeight: ds.text.medium,
+            color: T.muted,
+            letterSpacing: ds.text.wider,
+            textTransform: "uppercase",
+            opacity: interpolate(f, [0.2 * fps, 0.6 * fps], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            }),
+          }}
+        >
+          My theory
+        </div>
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 44,
+            fontWeight: ds.text.bold,
+            color: T.heading,
+            marginTop: 12,
+            letterSpacing: ds.text.tighter,
+            lineHeight: 1.2,
+            opacity: interpolate(f, [0.4 * fps, 0.9 * fps], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            }),
+          }}
+        >
+          Mythos, <span style={{ color: ds.color.claude }}>distilled</span>
+        </div>
+      </div>
+
+      {/* Properties card */}
+      <div
+        style={{
+          position: "absolute",
+          top: "32%",
+          left: "50%",
+          transform: `translate(-50%, 0) scale(${interpolate(cardSpring, [0, 1], [0.85, 1])})`,
+          opacity: interpolate(cardSpring, [0, 0.3], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          width: "85%",
+        }}
+      >
+        <FloatingCard rotateX={2} rotateY={-1}>
+          {[
+            { icon: "~", label: "Scary stuff stripped out" },
+            { icon: ">", label: "Runs faster" },
+            { icon: "$", label: "Costs less" },
+          ].map((item, i) => {
+            const itemSpring = spring({
+              frame: f,
+              fps,
+              delay: Math.round((1.2 + i * 0.3) * fps),
+              config: ds.spring.snappy,
+            });
+            return (
+              <div
+                key={item.label}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 16,
+                  padding: "14px 0",
+                  borderBottom:
+                    i < 2 ? "1px solid rgba(255,255,255,0.06)" : "none",
+                  opacity: interpolate(itemSpring, [0, 0.3], [0, 1], {
+                    extrapolateLeft: "clamp",
+                    extrapolateRight: "clamp",
+                  }),
+                  transform: `translateX(${interpolate(itemSpring, [0, 1], [30, 0])}px)`,
+                }}
+              >
+                <div
+                  style={{
+                    fontFamily: MONO,
+                    fontSize: 22,
+                    color: ds.color.claude,
+                    width: 36,
+                    textAlign: "center",
+                  }}
+                >
+                  {item.icon}
+                </div>
+                <div
+                  style={{
+                    fontFamily: FONT,
+                    fontSize: 22,
+                    fontWeight: ds.text.medium,
+                    color: G.text,
+                  }}
+                >
+                  {item.label}
+                </div>
+              </div>
+            );
+          })}
+        </FloatingCard>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 5: WINS — benchmark improvements + Screenshot 1
+// ═══════════════════════════════════════════════════════════════
+
+const WinsScene: 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);
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      <div
+        style={{
+          position: "absolute",
+          top: "6%",
+          width: "100%",
+          textAlign: "center",
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 42,
+            fontWeight: ds.text.bold,
+            color: T.heading,
+            letterSpacing: ds.text.tighter,
+            opacity: interpolate(f, [0.2 * fps, 0.7 * fps], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            }),
+          }}
+        >
+          The wins are{" "}
+          <span style={{ color: T.success }}>real</span>
+        </div>
+      </div>
+
+      {/* Stat grid */}
+      <div
+        style={{
+          position: "absolute",
+          top: "18%",
+          left: "50%",
+          transform: "translate(-50%, 0)",
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr 1fr",
+          gap: 24,
+          width: "90%",
+          maxWidth: 800,
+        }}
+      >
+        <StatBadge
+          value="82%"
+          label="Visual Reasoning"
+          color={T.success}
+          delay={Math.round(0.8 * fps)}
+          frame={f}
+          fps={fps}
+        />
+        <StatBadge
+          value="+10pt"
+          label="Software Eng"
+          color={ds.color.claude}
+          delay={Math.round(1.2 * fps)}
+          frame={f}
+          fps={fps}
+        />
+        <StatBadge
+          value="94.6%"
+          label="Grad Reasoning"
+          color={ds.color.accent}
+          delay={Math.round(1.6 * fps)}
+          frame={f}
+          fps={fps}
+        />
+      </div>
+
+      {/* Screenshot: Benchmark table */}
+      <div
+        style={{
+          position: "absolute",
+          top: "40%",
+          left: "50%",
+          transform: `translate(-50%, 0)`,
+          width: "92%",
+          perspective: 1000,
+          opacity: interpolate(f, [2 * fps, 3 * fps], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <div
+          style={{
+            borderRadius: ds.radius.xl,
+            overflow: "hidden",
+            boxShadow: ds.card3d.shadowTable,
+            transform: `rotateX(3deg) scale(${interpolate(f, [2 * fps, 3.5 * fps], [0.92, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.out(Easing.quad) })})`,
+            border: "1px solid rgba(255,255,255,0.06)",
+          }}
+        >
+          <div
+            style={{
+              width: "100%",
+              aspectRatio: "16 / 10",
+              background: G.bg,
+              borderRadius: ds.radius.xl,
+              padding: "28px 32px",
+              display: "flex",
+              flexDirection: "column",
+              gap: 14,
+              boxSizing: "border-box",
+            }}
+          >
+            <div style={{ fontFamily: MONO, fontSize: 16, fontWeight: ds.text.semibold, color: "#fff", letterSpacing: 0.5 }}>
+              Opus 4.7 Benchmarks
+            </div>
+            {[0.82, 0.71, 0.94, 0.65].map((w, i) => (
+              <div key={i} style={{ display: "flex", alignItems: "center", gap: 12 }}>
+                <div style={{ width: 80, fontFamily: MONO, fontSize: 11, color: "rgba(255,255,255,0.45)" }}>
+                  {["Visual", "SWE", "Grad", "Safety"][i]}
+                </div>
+                <div style={{ flex: 1, height: 10, borderRadius: 5, background: "rgba(255,255,255,0.06)" }}>
+                  <div style={{ width: `${w * 100}%`, height: "100%", borderRadius: 5, background: `linear-gradient(90deg, ${ds.color.accent}, ${ds.color.claude})` }} />
+                </div>
+                <div style={{ width: 40, fontFamily: MONO, fontSize: 11, color: "rgba(255,255,255,0.5)", textAlign: "right" }}>
+                  {`${Math.round(w * 100)}%`}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 6: SPEED — "thousands of times faster"
+// ═══════════════════════════════════════════════════════════════
+
+const SpeedScene: 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 numSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(0.4 * fps),
+    config: ds.spring.bouncy,
+  });
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      <div
+        style={{
+          position: "absolute",
+          top: "25%",
+          width: "100%",
+          textAlign: "center",
+          padding: "0 48px",
+        }}
+      >
+        {/* Big number */}
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 140,
+            fontWeight: ds.text.bold,
+            color: ds.color.claude,
+            lineHeight: 1,
+            letterSpacing: ds.text.tighter,
+            transform: `scale(${interpolate(numSpring, [0, 1], [0.5, 1])})`,
+            opacity: interpolate(numSpring, [0, 0.2], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            }),
+            textShadow: "0 0 60px rgba(212,102,58,0.3)",
+          }}
+        >
+          1000x
+        </div>
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 30,
+            fontWeight: ds.text.medium,
+            color: T.muted,
+            marginTop: 16,
+            opacity: interpolate(f, [1 * fps, 1.6 * fps], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            }),
+          }}
+        >
+          faster than your brain
+        </div>
+      </div>
+
+      {/* Bottom text */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "20%",
+          width: "100%",
+          textAlign: "center",
+          opacity: interpolate(f, [2 * fps, 2.8 * fps], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <FloatingCard width="75%">
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 24,
+              fontWeight: ds.text.semibold,
+              color: G.text,
+              textAlign: "center",
+            }}
+          >
+            One person with this
+            <br />
+            <span style={{ color: ds.color.claude }}>
+              = a whole team
+            </span>
+          </div>
+        </FloatingCard>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 7: NERFED — "some benchmarks got worse" + Screenshot
+// ═══════════════════════════════════════════════════════════════
+
+const NerfedScene: 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);
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      <div
+        style={{
+          position: "absolute",
+          top: "8%",
+          width: "100%",
+          textAlign: "center",
+          padding: "0 48px",
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 44,
+            fontWeight: ds.text.bold,
+            color: T.heading,
+            letterSpacing: ds.text.tighter,
+            opacity: interpolate(f, [0.2 * fps, 0.7 * fps], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            }),
+          }}
+        >
+          Some things got{" "}
+          <span style={{ color: T.danger }}>worse</span>
+        </div>
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 22,
+            fontWeight: ds.text.regular,
+            color: T.muted,
+            marginTop: 12,
+            opacity: interpolate(f, [0.8 * fps, 1.4 * fps], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            }),
+          }}
+        >
+          Nerfed on purpose. Safety stuff.
+        </div>
+      </div>
+
+      {/* Nerfed items */}
+      <div
+        style={{
+          position: "absolute",
+          top: "28%",
+          left: "50%",
+          transform: "translate(-50%, 0)",
+          width: "85%",
+          display: "flex",
+          flexDirection: "column",
+          gap: 16,
+        }}
+      >
+        {["Agentic browsing", "Cybersecurity reproduction"].map((item, i) => {
+          const itemSpring = spring({
+            frame: f,
+            fps,
+            delay: Math.round((1.2 + i * 0.4) * fps),
+            config: ds.spring.snappy,
+          });
+          return (
+            <div
+              key={item}
+              style={{
+                ...ds.card3d.cardStyle,
+                padding: "20px 28px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                opacity: interpolate(itemSpring, [0, 0.3], [0, 1], {
+                  extrapolateLeft: "clamp",
+                  extrapolateRight: "clamp",
+                }),
+                transform: `translateX(${interpolate(itemSpring, [0, 1], [-40, 0])}px)`,
+              }}
+            >
+              <span
+                style={{
+                  fontFamily: FONT,
+                  fontSize: 22,
+                  fontWeight: ds.text.medium,
+                  color: G.text,
+                }}
+              >
+                {item}
+              </span>
+              <span
+                style={{
+                  fontFamily: MONO,
+                  fontSize: 16,
+                  color: "#ff6568",
+                  fontWeight: ds.text.bold,
+                }}
+              >
+                NERFED
+              </span>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Screenshot 2: Agents.md card */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "6%",
+          left: "50%",
+          transform: "translate(-50%, 0)",
+          width: "75%",
+          perspective: 1000,
+          opacity: interpolate(f, [3 * fps, 4 * fps], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <div
+          style={{
+            borderRadius: ds.radius.xl,
+            overflow: "hidden",
+            boxShadow: ds.card3d.shadow3d,
+            transform: `rotateX(4deg) rotateY(-2deg) scale(${interpolate(f, [3 * fps, 4.5 * fps], [0.9, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" })})`,
+            border: "1px solid rgba(255,255,255,0.06)",
+          }}
+        >
+          <div
+            style={{
+              width: "100%",
+              aspectRatio: "16 / 10",
+              background: G.bg,
+              borderRadius: ds.radius.xl,
+              padding: "28px 32px",
+              display: "flex",
+              flexDirection: "column",
+              gap: 10,
+              boxSizing: "border-box",
+            }}
+          >
+            <div style={{ fontFamily: MONO, fontSize: 16, fontWeight: ds.text.semibold, color: "#fff", letterSpacing: 0.5 }}>
+              Agents.md
+            </div>
+            <div style={{ height: 1, background: "rgba(255,255,255,0.08)", margin: "4px 0" }} />
+            {[0.9, 0.6, 0.75, 0.5, 0.85, 0.4].map((w, i) => (
+              <div
+                key={i}
+                style={{
+                  height: 8,
+                  width: `${w * 100}%`,
+                  borderRadius: 4,
+                  background: i === 0 ? "rgba(212,102,58,0.35)" : "rgba(255,255,255,0.1)",
+                }}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 8: THESIS — "doesn't change anything"
+// ═══════════════════════════════════════════════════════════════
+
+const ThesisScene: 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);
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      <div
+        style={{
+          position: "absolute",
+          top: "12%",
+          width: "100%",
+          textAlign: "center",
+          padding: "0 48px",
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 52,
+            fontWeight: ds.text.bold,
+            color: T.heading,
+            letterSpacing: ds.text.tighter,
+            lineHeight: 1.15,
+            opacity: interpolate(f, [0.3 * fps, 0.8 * fps], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            }),
+          }}
+        >
+          This doesn't
+          <br />
+          <span style={{ color: T.muted }}>change anything.</span>
+        </div>
+      </div>
+
+      {/* Screenshot 3 */}
+      <div
+        style={{
+          position: "absolute",
+          top: "34%",
+          left: "50%",
+          transform: "translate(-50%, 0)",
+          width: "80%",
+          perspective: 1000,
+          opacity: interpolate(f, [1.5 * fps, 2.5 * fps], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <div
+          style={{
+            borderRadius: ds.radius.xl,
+            overflow: "hidden",
+            boxShadow: ds.card3d.shadow3d,
+            transform: `rotateX(2deg) rotateY(1deg) scale(${interpolate(f, [1.5 * fps, 3 * fps], [0.9, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" })})`,
+            border: "1px solid rgba(255,255,255,0.06)",
+          }}
+        >
+          <div
+            style={{
+              width: "100%",
+              aspectRatio: "16 / 10",
+              background: G.bg,
+              borderRadius: ds.radius.xl,
+              padding: "28px 32px",
+              display: "flex",
+              flexDirection: "column",
+              gap: 10,
+              boxSizing: "border-box",
+            }}
+          >
+            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+              <div style={{ width: 8, height: 8, borderRadius: "50%", background: ds.color.success, boxShadow: `0 0 6px ${ds.color.success}` }} />
+              <div style={{ fontFamily: MONO, fontSize: 14, color: "rgba(255,255,255,0.6)" }}>
+                Referencing agents.md...
+              </div>
+            </div>
+            <div style={{ height: 1, background: "rgba(255,255,255,0.08)", margin: "4px 0" }} />
+            {[0.7, 0.55, 0.85, 0.45, 0.65].map((w, i) => (
+              <div
+                key={i}
+                style={{
+                  height: 8,
+                  width: `${w * 100}%`,
+                  borderRadius: 4,
+                  background: "rgba(255,255,255,0.1)",
+                }}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom text */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "8%",
+          width: "100%",
+          textAlign: "center",
+          padding: "0 60px",
+          opacity: interpolate(f, [3 * fps, 3.8 * fps], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 24,
+            fontWeight: ds.text.regular,
+            color: T.muted,
+            lineHeight: 1.5,
+          }}
+        >
+          AI just makes things
+          <br />
+          <span style={{ fontWeight: ds.text.semibold, color: T.heading }}>
+            slightly more profitable.
+          </span>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 9: GPT-3 — "zero-to-one was 2020" + Screenshot
+// ═══════════════════════════════════════════════════════════════
+
+const GPT3Scene: React.FC<SP> = ({ frame, fps }) => {
+  const op = so(frame, fps, SEGS[8].s, SEGS[8].e);
+  if (op === 0) return null;
+  const f = lf(frame, fps, SEGS[8].s);
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      <div
+        style={{
+          position: "absolute",
+          top: "8%",
+          width: "100%",
+          textAlign: "center",
+          padding: "0 48px",
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 44,
+            fontWeight: ds.text.bold,
+            color: T.heading,
+            letterSpacing: ds.text.tighter,
+            opacity: interpolate(f, [0.2 * fps, 0.7 * fps], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            }),
+          }}
+        >
+          The zero-to-one?
+        </div>
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 72,
+            fontWeight: ds.text.bold,
+            color: ds.color.claude,
+            marginTop: 8,
+            letterSpacing: ds.text.tighter,
+            opacity: interpolate(f, [0.6 * fps, 1.2 * fps], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            }),
+          }}
+        >
+          GPT-3, 2020
+        </div>
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 24,
+            fontWeight: ds.text.regular,
+            color: T.muted,
+            marginTop: 16,
+            opacity: interpolate(f, [1.2 * fps, 1.8 * fps], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            }),
+          }}
+        >
+          Everything since has been horizontal.
+        </div>
+      </div>
+
+      {/* Screenshot 4: What you do / How you sound */}
+      <div
+        style={{
+          position: "absolute",
+          top: "42%",
+          left: "50%",
+          transform: "translate(-50%, 0)",
+          width: "78%",
+          perspective: 1000,
+          opacity: interpolate(f, [2 * fps, 3 * fps], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <div
+          style={{
+            borderRadius: ds.radius.xl,
+            overflow: "hidden",
+            boxShadow: ds.card3d.shadow3d,
+            transform: `rotateX(3deg) rotateY(-1deg) scale(${interpolate(f, [2 * fps, 3.5 * fps], [0.9, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" })})`,
+            border: "1px solid rgba(255,255,255,0.06)",
+          }}
+        >
+          <div
+            style={{
+              width: "100%",
+              aspectRatio: "16 / 10",
+              background: G.bg,
+              borderRadius: ds.radius.xl,
+              padding: "28px 32px",
+              display: "flex",
+              flexDirection: "column",
+              gap: 12,
+              boxSizing: "border-box",
+            }}
+          >
+            <div style={{ display: "flex", gap: 24 }}>
+              <div style={{ flex: 1 }}>
+                <div style={{ fontFamily: MONO, fontSize: 13, fontWeight: ds.text.semibold, color: ds.color.claude, letterSpacing: 0.5, marginBottom: 10 }}>
+                  What you do
+                </div>
+                {[0.8, 0.6, 0.9, 0.5].map((w, i) => (
+                  <div key={i} style={{ height: 7, width: `${w * 100}%`, borderRadius: 4, background: "rgba(255,255,255,0.1)", marginBottom: 6 }} />
+                ))}
+              </div>
+              <div style={{ width: 1, background: "rgba(255,255,255,0.08)" }} />
+              <div style={{ flex: 1 }}>
+                <div style={{ fontFamily: MONO, fontSize: 13, fontWeight: ds.text.semibold, color: ds.color.claude, letterSpacing: 0.5, marginBottom: 10 }}>
+                  How you sound
+                </div>
+                {[0.7, 0.85, 0.5, 0.75].map((w, i) => (
+                  <div key={i} style={{ height: 7, width: `${w * 100}%`, borderRadius: 4, background: "rgba(255,255,255,0.1)", marginBottom: 6 }} />
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 10: ADVICE — "stop switching models" + Screenshot
+// ═══════════════════════════════════════════════════════════════
+
+const AdviceScene: React.FC<SP> = ({ frame, fps }) => {
+  const op = so(frame, fps, SEGS[9].s, SEGS[9].e);
+  if (op === 0) return null;
+  const f = lf(frame, fps, SEGS[9].s);
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      <div
+        style={{
+          position: "absolute",
+          top: "8%",
+          width: "100%",
+          textAlign: "center",
+          padding: "0 48px",
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 44,
+            fontWeight: ds.text.bold,
+            color: T.heading,
+            letterSpacing: ds.text.tighter,
+            lineHeight: 1.2,
+            opacity: interpolate(f, [0.3 * fps, 0.8 * fps], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            }),
+          }}
+        >
+          Stop chasing
+          <br />
+          <span style={{ color: ds.color.claude }}>3% bumps</span>
+        </div>
+      </div>
+
+      {/* Screenshot 5: Brand details */}
+      <div
+        style={{
+          position: "absolute",
+          top: "28%",
+          left: "50%",
+          transform: "translate(-50%, 0)",
+          width: "78%",
+          perspective: 1000,
+          opacity: interpolate(f, [1 * fps, 2 * fps], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <div
+          style={{
+            borderRadius: ds.radius.xl,
+            overflow: "hidden",
+            boxShadow: ds.card3d.shadow3d,
+            transform: `rotateX(3deg) rotateY(-2deg) scale(${interpolate(f, [1 * fps, 2.5 * fps], [0.9, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" })})`,
+            border: "1px solid rgba(255,255,255,0.06)",
+          }}
+        >
+          <div
+            style={{
+              width: "100%",
+              aspectRatio: "16 / 10",
+              background: G.bg,
+              borderRadius: ds.radius.xl,
+              padding: "28px 32px",
+              display: "flex",
+              flexDirection: "column",
+              gap: 10,
+              boxSizing: "border-box",
+            }}
+          >
+            {[
+              { label: "Brand details", widths: [0.85, 0.6, 0.7] },
+              { label: "ICP", widths: [0.75, 0.5] },
+              { label: "Buying triggers", widths: [0.9, 0.65, 0.55] },
+            ].map((section, si) => (
+              <div key={si} style={{ marginBottom: si < 2 ? 4 : 0 }}>
+                <div style={{ fontFamily: MONO, fontSize: 12, fontWeight: ds.text.semibold, color: ds.color.claude, letterSpacing: 0.5, marginBottom: 6 }}>
+                  {section.label}
+                </div>
+                {section.widths.map((w, i) => (
+                  <div key={i} style={{ height: 6, width: `${w * 100}%`, borderRadius: 3, background: "rgba(255,255,255,0.1)", marginBottom: 4 }} />
+                ))}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom advice */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "10%",
+          left: "50%",
+          transform: "translate(-50%, 0)",
+          width: "85%",
+          opacity: interpolate(f, [3.5 * fps, 4.3 * fps], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <FloatingCard>
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 22,
+              fontWeight: ds.text.medium,
+              color: G.text,
+              textAlign: "center",
+              lineHeight: 1.6,
+            }}
+          >
+            Pick one that works.
+            <br />
+            Build around it.
+            <br />
+            <span style={{ color: ds.color.claude, fontWeight: ds.text.bold }}>
+              Ignore the noise.
+            </span>
+          </div>
+        </FloatingCard>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 11: CLOSE — "ship something"
+// ═══════════════════════════════════════════════════════════════
+
+const CloseScene: React.FC<SP> = ({ frame, fps }) => {
+  const op = so(frame, fps, SEGS[10].s, SEGS[10].e, 0.6, 0.8);
+  if (op === 0) return null;
+  const f = lf(frame, fps, SEGS[10].s);
+
+  const mainSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(0.3 * fps),
+    config: ds.spring.gentle,
+  });
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      <div
+        style={{
+          position: "absolute",
+          top: "30%",
+          width: "100%",
+          textAlign: "center",
+          padding: "0 48px",
+          transform: `scale(${interpolate(mainSpring, [0, 1], [0.9, 1])})`,
+          opacity: interpolate(mainSpring, [0, 0.2], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 56,
+            fontWeight: ds.text.bold,
+            color: T.heading,
+            letterSpacing: ds.text.tighter,
+            lineHeight: 1.2,
+          }}
+        >
+          Save your energy.
+        </div>
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 56,
+            fontWeight: ds.text.bold,
+            color: ds.color.claude,
+            marginTop: 16,
+            letterSpacing: ds.text.tighter,
+            textShadow: "0 0 40px rgba(212,102,58,0.3)",
+          }}
+        >
+          Ship something.
+        </div>
+      </div>
+
+      {/* Devini branding */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "12%",
+          width: "100%",
+          textAlign: "center",
+          opacity: interpolate(f, [2 * fps, 2.8 * fps], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 18,
+            fontWeight: ds.text.medium,
+            color: T.muted,
+            letterSpacing: 2,
+            textTransform: "uppercase",
+          }}
+        >
+          devini.io
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// MAIN COMPOSITION
+// ═══════════════════════════════════════════════════════════════
+
+export const OpusReel: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: "#e8e4de", fontFamily: FONT }}>
+      {/* Voiceover audio */}
+      {/* REFERENCE-STRIP: <Audio> tag removed — bring your own voiceover */}
+
+      <Background frame={frame} />
+      <HookScene frame={frame} fps={fps} />
+      <MythosScene frame={frame} fps={fps} />
+      <HalfStepScene frame={frame} fps={fps} />
+      <DistilledScene frame={frame} fps={fps} />
+      <WinsScene frame={frame} fps={fps} />
+      <SpeedScene frame={frame} fps={fps} />
+      <NerfedScene frame={frame} fps={fps} />
+      <ThesisScene frame={frame} fps={fps} />
+      <GPT3Scene frame={frame} fps={fps} />
+      <AdviceScene frame={frame} fps={fps} />
+      <CloseScene frame={frame} fps={fps} />
+    </AbsoluteFill>
+  );
+};