@devinilabs/reelstack 1.2.0

package/reference/dark/claudedispatch.tsx

@@ -0,0 +1,2441 @@
+/**
+ * REFERENCE — ClaudeDispatchReel  (Family: dark)
+ *
+ * Canonical example of the dark family's motion vocabulary, frame-locked
+ * BEAT structure, and scene choreography. Bundled with ReelStack v1.1.1+
+ * for STUDY and pattern adaptation.
+ *
+ * Asset imports stripped (look for REFERENCE-STRIP markers). Bring your own
+ * voiceover, brand SVGs, captures.
+ *
+ * License: study + adapt patterns OK. Verbatim re-publication as your own
+ * template NOT OK. See ReelStack LICENSE.
+ *
+ * Source: my-video/src/ClaudeDispatchReel.tsx
+ * Bundled at: 2026-05-08T18:50:39.532Z
+ */
+import {
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+  Easing,
+  AbsoluteFill,
+  staticFile,
+  Sequence,
+  OffthreadVideo,
+  Img,
+} from "remotion";
+import { Audio } from "@remotion/media";
+import { ds } from "./designSystem";
+
+// ═══════════════════════════════════════════════════════════════
+// TOKENS — dark cinematic palette built on the design system
+// ═══════════════════════════════════════════════════════════════
+
+const FONT = ds.font.sans;
+const MONO = ds.font.mono;
+
+const C = {
+  // Base
+  bg: "#0a0a0b",
+  bgLift: "#141416",
+  surface: "#1a1a1d",
+  border: "rgba(255,255,255,0.08)",
+  borderLoud: "rgba(255,255,255,0.14)",
+  // Text
+  fg: "#f5f5f7",
+  fgSoft: "#d1d1d6",
+  fgMuted: "#8e8e93",
+  fgDim: "#5a5a60",
+  // Brand
+  claude: "#D4663A",
+  claudeSoft: "#e07a54",
+  claudeDim: "rgba(212,102,58,0.15)",
+  // Semantic
+  danger: "#e25822",
+  dangerSoft: "#ff6a45",
+  dangerDim: "rgba(226,88,34,0.14)",
+  safe: "#4fc46a",
+  safeDim: "rgba(79,196,106,0.12)",
+  // Accents for cards
+  darkGreen: "#1a2e1f",
+  darkGreenLift: "#243a28",
+} as const;
+
+// Scene timeline — 74s voiceover, 8 segments with crossfade overlaps
+const SEGS = [
+  { s: 0, e: 8.2, name: "Hook" },
+  { s: 7.8, e: 20, name: "Idea" },
+  { s: 19.5, e: 33, name: "Example" },
+  { s: 32.5, e: 41, name: "Why" },
+  { s: 40.5, e: 52, name: "Issues" },
+  { s: 51.5, e: 62.5, name: "Solution" },
+  { s: 62, e: 68.5, name: "Wins" },
+  { s: 68, e: 74, name: "CTA" },
+] as const;
+
+// ═══════════════════════════════════════════════════════════════
+// UTILITIES
+// ═══════════════════════════════════════════════════════════════
+
+// Scene opacity — fade in/out at the edges of each segment
+const so = (
+  frame: number,
+  fps: number,
+  startS: number,
+  endS: number,
+  fadeIn = 0.45,
+  fadeOut = 0.55,
+) =>
+  interpolate(
+    frame,
+    [startS * fps, (startS + fadeIn) * fps, (endS - fadeOut) * fps, endS * fps],
+    [0, 1, 1, 0],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
+  );
+
+// Local frame — elapsed frames within a segment
+const lf = (frame: number, fps: number, startSec: number) =>
+  Math.max(0, frame - startSec * fps);
+
+// Staggered spring with GSAP-style defaults (bouncy, snappy, gentle)
+const gsapSpring = (
+  f: number,
+  fps: number,
+  delaySec = 0,
+  kind: "bouncy" | "snappy" | "gentle" | "glass" = "snappy",
+) =>
+  spring({
+    frame: f,
+    fps,
+    delay: Math.round(delaySec * fps),
+    config: ds.spring[kind],
+  });
+
+// GSAP "back.out(1.7)" approximation — snappy overshoot
+const backOut = (t: number) => {
+  const c1 = 1.70158;
+  const c3 = c1 + 1;
+  return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
+};
+
+interface SP {
+  frame: number;
+  fps: number;
+}
+
+// ═══════════════════════════════════════════════════════════════
+// BACKGROUND — dark cinematic with animated grid + orbs
+// ═══════════════════════════════════════════════════════════════
+
+const Background: React.FC<{ frame: number; fps: number }> = ({ frame }) => {
+  // Slow drifting spotlight
+  const drift = (Math.sin(frame * 0.004) + 1) * 0.5;
+  const drift2 = (Math.cos(frame * 0.003) + 1) * 0.5;
+  const vignettePulse = 0.35 + Math.sin(frame * 0.008) * 0.04;
+
+  return (
+    <AbsoluteFill>
+      {/* Base */}
+      <div style={{ width: "100%", height: "100%", background: C.bg }} />
+
+      {/* Primary terracotta spotlight — slowly drifts */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse 800px 900px at ${20 + drift * 60}% ${15 + drift2 * 40}%, rgba(212,102,58,0.14) 0%, transparent 60%)`,
+        }}
+      />
+      {/* Cool counter-spot */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse 600px 800px at ${80 - drift * 50}% ${70 + drift2 * 25}%, rgba(79,196,106,0.06) 0%, transparent 55%)`,
+        }}
+      />
+
+      {/* Grid lines */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          backgroundImage: `
+            linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px)
+          `,
+          backgroundSize: "72px 72px",
+          maskImage: "radial-gradient(ellipse at 50% 50%, black 30%, transparent 85%)",
+          WebkitMaskImage: "radial-gradient(ellipse at 50% 50%, black 30%, transparent 85%)",
+        }}
+      />
+
+      {/* Noise grain — fine texture */}
+      <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>")`,
+        }}
+      />
+
+      {/* Corner vignette */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,${vignettePulse}) 100%)`,
+        }}
+      />
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SAFE ZONE — IG-compliant content container
+// ═══════════════════════════════════════════════════════════════
+
+const SafeZone: React.FC<{ children: React.ReactNode; style?: React.CSSProperties }> = ({
+  children,
+  style,
+}) => (
+  <div
+    style={{
+      position: "absolute",
+      top: 290,
+      left: 0,
+      right: 0,
+      bottom: 430,
+      ...style,
+    }}
+  >
+    {children}
+  </div>
+);
+
+// ═══════════════════════════════════════════════════════════════
+// KINETIC TEXT — word-by-word reveal à la GSAP stagger
+// ═══════════════════════════════════════════════════════════════
+
+const KineticText: React.FC<{
+  text: string;
+  f: number;
+  fps: number;
+  startSec?: number;
+  wordStagger?: number;
+  size: number;
+  weight?: number;
+  color?: string;
+  mono?: boolean;
+  style?: React.CSSProperties;
+}> = ({
+  text,
+  f,
+  fps,
+  startSec = 0,
+  wordStagger = 0.06,
+  size,
+  weight = 700,
+  color = C.fg,
+  mono = false,
+  style,
+}) => {
+  const words = text.split(" ");
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "0 0.32em",
+        justifyContent: "center",
+        fontFamily: mono ? MONO : FONT,
+        fontSize: size,
+        fontWeight: weight,
+        color,
+        letterSpacing: "-0.03em",
+        lineHeight: 1.04,
+        ...style,
+      }}
+    >
+      {words.map((w, i) => {
+        const s = gsapSpring(f, fps, startSec + i * wordStagger, "snappy");
+        const y = interpolate(s, [0, 1], [40, 0]);
+        const op = interpolate(s, [0, 0.4], [0, 1], {
+          extrapolateLeft: "clamp",
+          extrapolateRight: "clamp",
+        });
+        return (
+          <span
+            key={`${w}-${i}`}
+            style={{
+              display: "inline-block",
+              transform: `translateY(${y}px)`,
+              opacity: op,
+            }}
+          >
+            {w}
+          </span>
+        );
+      })}
+    </div>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCANLINE — subtle moving highlight line inside cards
+// ═══════════════════════════════════════════════════════════════
+
+const Scanline: React.FC<{ frame: number; color?: string }> = ({
+  frame,
+  color = "rgba(255,255,255,0.09)",
+}) => {
+  const y = ((frame * 1.8) % 300) - 50;
+  return (
+    <div
+      style={{
+        position: "absolute",
+        left: 0,
+        right: 0,
+        top: y,
+        height: 80,
+        background: `linear-gradient(180deg, transparent, ${color}, transparent)`,
+        pointerEvents: "none",
+      }}
+    />
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 1 — HOOK (0-8.2s)
+// ═══════════════════════════════════════════════════════════════
+
+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);
+
+  // Anthropic A logo — subtle pulse in
+  const logoSpring = gsapSpring(f, fps, 0, "gentle");
+  const logoScale = interpolate(logoSpring, [0, 1], [0.4, 1]);
+  const logoOp = interpolate(logoSpring, [0, 0.3], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // "Anthropic just launched" — kinetic word reveal
+  // Primary headline "CLAUDE DISPATCH" — smash in at 2.2s
+  const smashSpring = gsapSpring(f, fps, 2.3, "bouncy");
+  const smashScale = interpolate(smashSpring, [0, 1], [1.6, 1]);
+  const smashOp = interpolate(smashSpring, [0, 0.25], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  // Subtle shake at peak of smash
+  const shakeT = interpolate(f, [2.3 * fps, 2.7 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const shakeX = Math.sin(shakeT * 20) * (1 - shakeT) * 6;
+
+  // OpenClaw fade in at 5s, get crossed out at 6.5s
+  const clawSpring = gsapSpring(f, fps, 5, "gentle");
+  const clawOp = interpolate(clawSpring, [0, 0.3], [0, 0.65], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const crossT = interpolate(f, [6.4 * fps, 7.2 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.quad),
+  });
+
+  // Badge pulse
+  const badgeSpring = gsapSpring(f, fps, 0.3, "bouncy");
+  const dotPulse = 0.6 + Math.sin(f * 0.15) * 0.4;
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      <SafeZone>
+        {/* NEW RELEASE pill */}
+        <div
+          style={{
+            position: "absolute",
+            top: 20,
+            left: "50%",
+            transform: `translate(-50%, 0) scale(${interpolate(badgeSpring, [0, 1], [0.6, 1])})`,
+            opacity: interpolate(badgeSpring, [0, 0.3], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            }),
+            display: "flex",
+            alignItems: "center",
+            gap: 12,
+            padding: "10px 22px",
+            background: "rgba(255,255,255,0.06)",
+            border: `1px solid ${C.borderLoud}`,
+            borderRadius: 9999,
+            backdropFilter: "blur(10px)",
+          }}
+        >
+          <div
+            style={{
+              width: 8,
+              height: 8,
+              borderRadius: "50%",
+              background: C.claude,
+              boxShadow: `0 0 ${10 + dotPulse * 10}px ${C.claude}`,
+              opacity: dotPulse,
+            }}
+          />
+          <span
+            style={{
+              fontFamily: MONO,
+              fontSize: 16,
+              fontWeight: 500,
+              color: C.fgSoft,
+              letterSpacing: "0.18em",
+            }}
+          >
+            QUIETLY LAUNCHED
+          </span>
+        </div>
+
+        {/* Anthropic A — large wordmark */}
+        <div
+          style={{
+            position: "absolute",
+            top: 90,
+            left: "50%",
+            transform: `translate(-50%, 0) scale(${logoScale})`,
+            opacity: logoOp,
+            display: "flex",
+            alignItems: "center",
+            gap: 16,
+          }}
+        >
+          <svg
+            width="60"
+            height="60"
+            viewBox="0 0 24 24"
+            style={{ color: C.claude, filter: "drop-shadow(0 0 24px rgba(212,102,58,0.35))" }}
+          >
+            <path
+              fill="currentColor"
+              d="M17.304 3.541h-3.672l6.696 16.918H24Zm-10.608 0L0 20.459h3.744l1.37-3.553h7.005l1.369 3.553h3.744L10.536 3.541Zm-.371 10.223L8.616 7.82l2.291 5.945Z"
+            />
+          </svg>
+          <span
+            style={{
+              fontFamily: FONT,
+              fontSize: 40,
+              fontWeight: 500,
+              color: C.fg,
+              letterSpacing: "-0.03em",
+            }}
+          >
+            Anthropic
+          </span>
+        </div>
+
+        {/* Subline */}
+        <div
+          style={{
+            position: "absolute",
+            top: 210,
+            width: "100%",
+            textAlign: "center",
+            padding: "0 56px",
+          }}
+        >
+          <KineticText
+            text="just dropped a feature that"
+            f={f}
+            fps={fps}
+            startSec={1.0}
+            wordStagger={0.05}
+            size={34}
+            weight={400}
+            color={C.fgMuted}
+          />
+        </div>
+
+        {/* Huge "CLAUDE DISPATCH" */}
+        <div
+          style={{
+            position: "absolute",
+            top: 340,
+            left: 0,
+            right: 0,
+            textAlign: "center",
+            transform: `scale(${smashScale}) translateX(${shakeX}px)`,
+            opacity: smashOp,
+          }}
+        >
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 150,
+              fontWeight: 700,
+              color: C.fg,
+              letterSpacing: "-0.055em",
+              lineHeight: 0.9,
+            }}
+          >
+            Claude
+          </div>
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 150,
+              fontWeight: 700,
+              color: C.claude,
+              letterSpacing: "-0.055em",
+              lineHeight: 0.9,
+              marginTop: 8,
+              textShadow: "0 0 60px rgba(212,102,58,0.4)",
+            }}
+          >
+            Dispatch
+          </div>
+        </div>
+
+        {/* Subtext + OpenClaw cameo */}
+        <div
+          style={{
+            position: "absolute",
+            bottom: 20,
+            left: "50%",
+            transform: "translate(-50%, 0)",
+            display: "flex",
+            alignItems: "center",
+            gap: 20,
+          }}
+        >
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 30,
+              fontWeight: 500,
+              color: C.fgSoft,
+              letterSpacing: "-0.02em",
+              opacity: interpolate(f, [4 * fps, 5 * fps], [0, 1], {
+                extrapolateLeft: "clamp",
+                extrapolateRight: "clamp",
+              }),
+            }}
+          >
+            Might end
+          </div>
+          <div
+            style={{
+              position: "relative",
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+              opacity: clawOp,
+            }}
+          >
+            <Img
+              src={staticFile("captures/your-asset.png" /* REFERENCE-STRIP */)}
+              style={{ width: 48, height: 48, opacity: 1 - crossT * 0.5 }}
+            />
+            <span
+              style={{
+                fontFamily: FONT,
+                fontSize: 30,
+                fontWeight: 600,
+                color: C.fgSoft,
+                letterSpacing: "-0.02em",
+              }}
+            >
+              OpenClaw
+            </span>
+            {/* Strike through line */}
+            <div
+              style={{
+                position: "absolute",
+                top: "50%",
+                left: 0,
+                width: `${crossT * 100}%`,
+                height: 4,
+                background: C.danger,
+                transformOrigin: "0 50%",
+                borderRadius: 2,
+                boxShadow: `0 0 12px ${C.danger}`,
+              }}
+            />
+          </div>
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 30,
+              fontWeight: 500,
+              color: C.fgSoft,
+              letterSpacing: "-0.02em",
+              opacity: interpolate(f, [6.2 * fps, 7 * fps], [0, 1], {
+                extrapolateLeft: "clamp",
+                extrapolateRight: "clamp",
+              }),
+            }}
+          >
+            overnight.
+          </div>
+        </div>
+      </SafeZone>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 2 — THE IDEA (7.8-20s)
+// ═══════════════════════════════════════════════════════════════
+
+const PhoneFrame: React.FC<{
+  children: React.ReactNode;
+  scale?: number;
+  style?: React.CSSProperties;
+}> = ({ children, scale = 1, style }) => (
+  <div
+    style={{
+      width: 340 * scale,
+      height: 700 * scale,
+      borderRadius: 48 * scale,
+      background: "#1a1a1d",
+      border: `${2 * scale}px solid #2a2a2d`,
+      padding: 10 * scale,
+      boxShadow: [
+        "0 40px 80px -20px rgba(0,0,0,0.7)",
+        "0 20px 40px -15px rgba(212,102,58,0.15)",
+        "inset 0 1px 0 rgba(255,255,255,0.08)",
+      ].join(", "),
+      position: "relative",
+      overflow: "hidden",
+      ...style,
+    }}
+  >
+    {/* Notch */}
+    <div
+      style={{
+        position: "absolute",
+        top: 22 * scale,
+        left: "50%",
+        transform: "translate(-50%, 0)",
+        width: 100 * scale,
+        height: 30 * scale,
+        background: "#000",
+        borderRadius: 18 * scale,
+        zIndex: 5,
+      }}
+    />
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        borderRadius: 38 * scale,
+        background: "#0c0c0e",
+        overflow: "hidden",
+        position: "relative",
+      }}
+    >
+      {children}
+    </div>
+  </div>
+);
+
+const IdeaScene: 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);
+
+  // Phone slides in from left
+  const phoneSpring = gsapSpring(f, fps, 0.2, "glass");
+  const phoneX = interpolate(phoneSpring, [0, 1], [-400, 0]);
+
+  // Computer slides in from right
+  const compSpring = gsapSpring(f, fps, 0.5, "glass");
+  const compX = interpolate(compSpring, [0, 1], [400, 0]);
+
+  // Text typing on phone (starts at 2s local)
+  const typedChars = Math.floor(
+    interpolate(f, [2 * fps, 4 * fps], [0, 28], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+    }),
+  );
+  const phoneText = "fix the bugs in my code".slice(0, typedChars);
+  const cursorVisible = Math.floor(f / 10) % 2 === 0;
+
+  // Connecting line draws from phone → computer at 3.5s local
+  const lineT = interpolate(f, [3.5 * fps, 5 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.inOut(Easing.quad),
+  });
+
+  // Tasks appearing on computer side
+  const tasks = [
+    { label: "Parsing codebase...", color: C.fgMuted },
+    { label: "Locating bug in auth.ts", color: C.fgSoft },
+    { label: "Writing fix + tests", color: C.claude },
+  ];
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      <SafeZone>
+        {/* Section label */}
+        <div
+          style={{
+            position: "absolute",
+            top: 10,
+            left: "50%",
+            transform: "translate(-50%, 0)",
+            fontFamily: MONO,
+            fontSize: 18,
+            fontWeight: 500,
+            color: C.fgDim,
+            letterSpacing: "0.24em",
+            opacity: interpolate(f, [0.3 * fps, 0.8 * fps], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            }),
+          }}
+        >
+          HERE'S THE IDEA
+        </div>
+
+        {/* Headline */}
+        <div
+          style={{
+            position: "absolute",
+            top: 60,
+            width: "100%",
+            textAlign: "center",
+            padding: "0 48px",
+          }}
+        >
+          <KineticText
+            text="Text it. Walk away."
+            f={f}
+            fps={fps}
+            startSec={0.6}
+            wordStagger={0.08}
+            size={72}
+            weight={700}
+            color={C.fg}
+          />
+        </div>
+
+        {/* Phone on left */}
+        <div
+          style={{
+            position: "absolute",
+            top: 240,
+            left: 40,
+            transform: `translateX(${phoneX}px)`,
+          }}
+        >
+          <PhoneFrame scale={0.75}>
+            {/* iMessage-style header */}
+            <div
+              style={{
+                padding: "60px 18px 14px",
+                borderBottom: "1px solid rgba(255,255,255,0.06)",
+                display: "flex",
+                alignItems: "center",
+                gap: 10,
+              }}
+            >
+              <div
+                style={{
+                  width: 32,
+                  height: 32,
+                  borderRadius: "50%",
+                  background: `linear-gradient(135deg, ${C.claude}, ${C.claudeSoft})`,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  fontFamily: FONT,
+                  fontSize: 16,
+                  fontWeight: 700,
+                  color: "#fff",
+                }}
+              >
+                C
+              </div>
+              <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
+                <div style={{ fontFamily: FONT, fontSize: 14, fontWeight: 600, color: C.fg }}>
+                  Claude Dispatch
+                </div>
+                <div
+                  style={{
+                    fontFamily: MONO,
+                    fontSize: 9,
+                    color: C.safe,
+                    letterSpacing: "0.1em",
+                  }}
+                >
+                  ● ACTIVE
+                </div>
+              </div>
+            </div>
+            {/* Bubble stack */}
+            <div style={{ padding: "18px 16px", display: "flex", flexDirection: "column", gap: 10 }}>
+              {/* User message bubble — with typing */}
+              <div style={{ alignSelf: "flex-end", maxWidth: "85%" }}>
+                <div
+                  style={{
+                    background: C.claude,
+                    color: "#fff",
+                    padding: "10px 14px",
+                    borderRadius: "18px 18px 4px 18px",
+                    fontFamily: FONT,
+                    fontSize: 14,
+                    fontWeight: 500,
+                    boxShadow: "0 4px 12px rgba(212,102,58,0.3)",
+                    minHeight: 20,
+                  }}
+                >
+                  {phoneText}
+                  {typedChars > 0 && typedChars < 28 && cursorVisible && "|"}
+                </div>
+              </div>
+
+              {/* Reply bubble — appears after typing done */}
+              <div
+                style={{
+                  alignSelf: "flex-start",
+                  maxWidth: "85%",
+                  opacity: interpolate(f, [4.2 * fps, 5 * fps], [0, 1], {
+                    extrapolateLeft: "clamp",
+                    extrapolateRight: "clamp",
+                  }),
+                  transform: `translateY(${interpolate(f, [4.2 * fps, 5 * fps], [10, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" })}px)`,
+                }}
+              >
+                <div
+                  style={{
+                    background: "rgba(255,255,255,0.08)",
+                    color: C.fgSoft,
+                    padding: "10px 14px",
+                    borderRadius: "18px 18px 18px 4px",
+                    fontFamily: FONT,
+                    fontSize: 13,
+                    fontWeight: 400,
+                  }}
+                >
+                  On it. Running now.
+                </div>
+              </div>
+            </div>
+            <Scanline frame={frame} />
+          </PhoneFrame>
+        </div>
+
+        {/* Computer / terminal on right */}
+        <div
+          style={{
+            position: "absolute",
+            top: 280,
+            right: 40,
+            width: 560,
+            transform: `translateX(${compX}px)`,
+          }}
+        >
+          <div
+            style={{
+              background: C.darkGreen,
+              border: "1px solid rgba(255,255,255,0.08)",
+              borderRadius: 18,
+              overflow: "hidden",
+              boxShadow: [
+                "0 40px 80px -20px rgba(0,0,0,0.7)",
+                "0 0 40px rgba(79,196,106,0.08)",
+                "inset 0 1px 0 rgba(255,255,255,0.06)",
+              ].join(", "),
+            }}
+          >
+            {/* Title bar */}
+            <div
+              style={{
+                padding: "14px 18px",
+                borderBottom: "1px solid rgba(255,255,255,0.08)",
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+              }}
+            >
+              <div style={{ width: 10, height: 10, borderRadius: "50%", background: "#ff5f57" }} />
+              <div style={{ width: 10, height: 10, borderRadius: "50%", background: "#febc2e" }} />
+              <div style={{ width: 10, height: 10, borderRadius: "50%", background: "#28c840" }} />
+              <div
+                style={{
+                  marginLeft: 12,
+                  fontFamily: MONO,
+                  fontSize: 13,
+                  color: "rgba(255,255,255,0.4)",
+                }}
+              >
+                dispatch --run
+              </div>
+            </div>
+            {/* Body */}
+            <div style={{ padding: "20px 22px", minHeight: 360 }}>
+              {tasks.map((t, i) => {
+                const delay = 1.5 + i * 0.55;
+                const s = gsapSpring(f, fps, delay, "snappy");
+                const y = interpolate(s, [0, 1], [20, 0]);
+                const o = interpolate(s, [0, 0.4], [0, 1], {
+                  extrapolateLeft: "clamp",
+                  extrapolateRight: "clamp",
+                });
+                return (
+                  <div
+                    key={t.label}
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 12,
+                      padding: "10px 0",
+                      fontFamily: MONO,
+                      fontSize: 17,
+                      opacity: o,
+                      transform: `translateY(${y}px)`,
+                    }}
+                  >
+                    <span style={{ color: C.safe, fontWeight: 600 }}>
+                      {i === 2 && f > (3 + i * 0.55) * fps ? "●" : "○"}
+                    </span>
+                    <span style={{ color: t.color }}>{t.label}</span>
+                  </div>
+                );
+              })}
+              {/* Output preview */}
+              <div
+                style={{
+                  marginTop: 12,
+                  padding: "12px 14px",
+                  background: "rgba(0,0,0,0.4)",
+                  border: "1px solid rgba(79,196,106,0.18)",
+                  borderRadius: 8,
+                  fontFamily: MONO,
+                  fontSize: 13,
+                  color: C.safe,
+                  opacity: interpolate(f, [4 * fps, 5.2 * fps], [0, 1], {
+                    extrapolateLeft: "clamp",
+                    extrapolateRight: "clamp",
+                  }),
+                }}
+              >
+                {"> "}
+                {`auth.ts — bug patched. 3 tests passing.`}
+              </div>
+            </div>
+            <Scanline frame={frame} color="rgba(79,196,106,0.08)" />
+          </div>
+
+          {/* Subtitle below computer */}
+          <div
+            style={{
+              marginTop: 20,
+              fontFamily: FONT,
+              fontSize: 22,
+              fontWeight: 500,
+              color: C.fgMuted,
+              letterSpacing: "-0.015em",
+              lineHeight: 1.4,
+              opacity: interpolate(f, [6 * fps, 7 * fps], [0, 1], {
+                extrapolateLeft: "clamp",
+                extrapolateRight: "clamp",
+              }),
+            }}
+          >
+            Full tasks. In the background.
+          </div>
+        </div>
+
+        {/* Connecting dotted line — phone → computer */}
+        <svg
+          style={{
+            position: "absolute",
+            top: 580,
+            left: 310,
+            width: 260,
+            height: 60,
+            pointerEvents: "none",
+          }}
+          viewBox="0 0 260 60"
+        >
+          <defs>
+            <linearGradient id="flowGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+              <stop offset="0%" stopColor={C.claude} />
+              <stop offset="100%" stopColor={C.safe} />
+            </linearGradient>
+          </defs>
+          <path
+            d="M 10 30 Q 130 -20 250 30"
+            fill="none"
+            stroke="url(#flowGrad)"
+            strokeWidth="3"
+            strokeDasharray="4 8"
+            strokeDashoffset={-frame * 0.8}
+            strokeLinecap="round"
+            opacity={lineT}
+          />
+          {/* Arrowhead */}
+          <circle cx="250" cy="30" r="6" fill={C.safe} opacity={lineT} />
+        </svg>
+      </SafeZone>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 3 — EXAMPLE (19.5-33s) — Dispatch clip + task stack
+// ═══════════════════════════════════════════════════════════════
+
+const ExampleScene: 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);
+
+  // Video clip slides in
+  const videoSpring = gsapSpring(f, fps, 0.2, "glass");
+  const videoY = interpolate(videoSpring, [0, 1], [60, 0]);
+  const videoOp = interpolate(videoSpring, [0, 0.5], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  const tasks = [
+    { t: "☕", label: "Grabbing coffee", status: "idle", delay: 1.2 },
+    { t: ">", label: "Fix bugs in my code", status: "run", delay: 2.4 },
+    { t: "⚡", label: "Pull data from 50 sites", status: "run", delay: 3.8 },
+    { t: "✓", label: "Pinged you — all done", status: "done", delay: 7.5 },
+  ];
+
+  // Counter animates from 0 → 50 from 5s to 8s
+  const count = Math.floor(
+    interpolate(f, [5 * fps, 8 * fps], [0, 50], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.quad),
+    }),
+  );
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      <SafeZone>
+        {/* Section label */}
+        <div
+          style={{
+            position: "absolute",
+            top: 10,
+            left: "50%",
+            transform: "translate(-50%, 0)",
+            fontFamily: MONO,
+            fontSize: 18,
+            color: C.fgDim,
+            letterSpacing: "0.24em",
+          }}
+        >
+          WHILE YOU'RE AWAY
+        </div>
+
+        {/* Video clip — trimmed section of claude-dispatch.mp4 */}
+        <div
+          style={{
+            position: "absolute",
+            top: 60,
+            left: "50%",
+            transform: `translate(-50%, ${videoY}px)`,
+            opacity: videoOp,
+            width: 900,
+            height: 500,
+            borderRadius: 22,
+            overflow: "hidden",
+            border: `1px solid ${C.borderLoud}`,
+            boxShadow: [
+              "0 40px 90px -20px rgba(0,0,0,0.7)",
+              "0 0 60px rgba(212,102,58,0.15)",
+              "inset 0 1px 0 rgba(255,255,255,0.08)",
+            ].join(", "),
+            background: "#000",
+          }}
+        >
+          <Sequence from={Math.round(SEGS[2].s * fps)} durationInFrames={Math.round(8 * fps)}>
+            {/* REFERENCE-STRIP: <OffthreadVideo> removed — bring your own clip */}
+          </Sequence>
+          {/* Corner label */}
+          <div
+            style={{
+              position: "absolute",
+              top: 16,
+              left: 16,
+              padding: "6px 14px",
+              background: "rgba(0,0,0,0.55)",
+              backdropFilter: "blur(8px)",
+              borderRadius: 9999,
+              border: "1px solid rgba(255,255,255,0.12)",
+              fontFamily: MONO,
+              fontSize: 13,
+              fontWeight: 500,
+              color: "#fff",
+              letterSpacing: "0.12em",
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+            }}
+          >
+            <div
+              style={{
+                width: 6,
+                height: 6,
+                borderRadius: "50%",
+                background: C.danger,
+                boxShadow: `0 0 8px ${C.danger}`,
+                opacity: 0.5 + Math.sin(f * 0.2) * 0.5,
+              }}
+            />
+            LIVE · DISPATCH
+          </div>
+        </div>
+
+        {/* Task stack — right side overlay */}
+        <div
+          style={{
+            position: "absolute",
+            top: 610,
+            left: "50%",
+            transform: "translate(-50%, 0)",
+            width: 900,
+            display: "flex",
+            flexDirection: "column",
+            gap: 14,
+          }}
+        >
+          {tasks.map((task) => {
+            const s = gsapSpring(f, fps, task.delay, "snappy");
+            const x = interpolate(s, [0, 1], [50, 0]);
+            const o = interpolate(s, [0, 0.4], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            });
+            const isDone = task.status === "done";
+            const isRun = task.status === "run";
+            return (
+              <div
+                key={task.label}
+                style={{
+                  padding: "18px 26px",
+                  background: isDone
+                    ? "rgba(79,196,106,0.08)"
+                    : "rgba(255,255,255,0.04)",
+                  border: `1px solid ${isDone ? "rgba(79,196,106,0.3)" : C.border}`,
+                  borderRadius: 16,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 18,
+                  opacity: o,
+                  transform: `translateX(${x}px)`,
+                  backdropFilter: "blur(10px)",
+                }}
+              >
+                <div
+                  style={{
+                    width: 44,
+                    height: 44,
+                    borderRadius: "50%",
+                    background: isDone
+                      ? C.safe
+                      : isRun
+                        ? C.claude
+                        : "rgba(255,255,255,0.08)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontFamily: MONO,
+                    fontSize: 22,
+                    fontWeight: 700,
+                    color: isDone || isRun ? "#0a0a0b" : C.fgSoft,
+                    flexShrink: 0,
+                  }}
+                >
+                  {task.t}
+                </div>
+                <div
+                  style={{
+                    flex: 1,
+                    fontFamily: FONT,
+                    fontSize: 28,
+                    fontWeight: 500,
+                    color: C.fg,
+                    letterSpacing: "-0.015em",
+                  }}
+                >
+                  {task.label}
+                </div>
+                {task.label.includes("50") && (
+                  <div
+                    style={{
+                      fontFamily: MONO,
+                      fontSize: 32,
+                      fontWeight: 700,
+                      color: C.claude,
+                      minWidth: 72,
+                      textAlign: "right",
+                    }}
+                  >
+                    {count}/50
+                  </div>
+                )}
+                {isDone && (
+                  <div
+                    style={{
+                      fontFamily: MONO,
+                      fontSize: 14,
+                      fontWeight: 600,
+                      color: C.safe,
+                      letterSpacing: "0.12em",
+                    }}
+                  >
+                    DONE
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </SafeZone>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 4 — WHY IT MATTERS / OPENCLAW INTRO (32.5-41s)
+// ═══════════════════════════════════════════════════════════════
+
+const WhyScene: 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 clawSpring = gsapSpring(f, fps, 1.0, "gentle");
+  const clawScale = interpolate(clawSpring, [0, 1], [0.5, 1]);
+  const clawOp = interpolate(clawSpring, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  // Slight sway
+  const sway = Math.sin(f * 0.05) * 5;
+  // Danger ring pulse
+  const ringScale = 1 + (Math.sin(f * 0.12) + 1) * 0.08;
+  const ringOp = 0.35 + Math.sin(f * 0.12) * 0.25;
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      <SafeZone>
+        <div
+          style={{
+            position: "absolute",
+            top: 30,
+            left: "50%",
+            transform: "translate(-50%, 0)",
+            fontFamily: MONO,
+            fontSize: 18,
+            color: C.fgDim,
+            letterSpacing: "0.24em",
+            opacity: interpolate(f, [0.2 * fps, 0.8 * fps], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            }),
+          }}
+        >
+          WHY THIS MATTERS
+        </div>
+
+        <div
+          style={{
+            position: "absolute",
+            top: 90,
+            width: "100%",
+            textAlign: "center",
+            padding: "0 48px",
+          }}
+        >
+          <KineticText
+            text="People tried this before."
+            f={f}
+            fps={fps}
+            startSec={0.5}
+            wordStagger={0.07}
+            size={60}
+            weight={700}
+            color={C.fg}
+          />
+        </div>
+
+        {/* OpenClaw mascot — large, with danger ring */}
+        <div
+          style={{
+            position: "absolute",
+            top: 300,
+            left: "50%",
+            transform: `translate(-50%, 0) scale(${clawScale})`,
+            opacity: clawOp,
+            width: 360,
+            height: 360,
+          }}
+        >
+          {/* Danger ring */}
+          <div
+            style={{
+              position: "absolute",
+              inset: -20,
+              borderRadius: "50%",
+              border: `2px solid ${C.danger}`,
+              opacity: ringOp,
+              transform: `scale(${ringScale})`,
+              boxShadow: `0 0 40px ${C.danger}`,
+            }}
+          />
+          {/* Second ring offset */}
+          <div
+            style={{
+              position: "absolute",
+              inset: -40,
+              borderRadius: "50%",
+              border: `1px solid ${C.danger}`,
+              opacity: ringOp * 0.5,
+              transform: `scale(${ringScale * 0.95})`,
+            }}
+          />
+          <Img
+            src={staticFile("captures/your-asset.png" /* REFERENCE-STRIP */)}
+            style={{
+              width: "100%",
+              height: "100%",
+              transform: `translateX(${sway}px) rotate(${sway * 0.3}deg)`,
+              filter: "drop-shadow(0 20px 40px rgba(226,88,34,0.4))",
+            }}
+          />
+        </div>
+
+        {/* Tag */}
+        <div
+          style={{
+            position: "absolute",
+            top: 690,
+            left: "50%",
+            transform: "translate(-50%, 0)",
+            fontFamily: FONT,
+            fontSize: 32,
+            fontWeight: 600,
+            color: C.danger,
+            letterSpacing: "0.14em",
+            textTransform: "uppercase",
+            opacity: interpolate(f, [2.5 * fps, 3.2 * fps], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            }),
+          }}
+        >
+          openclaw
+        </div>
+
+        {/* Subline */}
+        <div
+          style={{
+            position: "absolute",
+            bottom: 30,
+            width: "100%",
+            textAlign: "center",
+            padding: "0 60px",
+            opacity: interpolate(f, [4 * fps, 5 * fps], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            }),
+          }}
+        >
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 34,
+              fontWeight: 500,
+              color: C.fgSoft,
+              letterSpacing: "-0.02em",
+              lineHeight: 1.35,
+            }}
+          >
+            It had{" "}
+            <span style={{ color: C.danger, fontWeight: 700 }}>
+              serious issues.
+            </span>
+          </div>
+        </div>
+      </SafeZone>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 5 — OPENCLAW ISSUES (40.5-52s)
+// ═══════════════════════════════════════════════════════════════
+
+const IssueCard: React.FC<{
+  idx: number;
+  icon: React.ReactNode;
+  title: string;
+  detail: string;
+  f: number;
+  fps: number;
+  baseDelay: number;
+}> = ({ idx, icon, title, detail, f, fps, baseDelay }) => {
+  const delay = baseDelay + idx * 0.55;
+  const s = gsapSpring(f, fps, delay, "snappy");
+  const x = interpolate(s, [0, 1], [120, 0]);
+  const o = interpolate(s, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  // Inner "alarm" pulse on icon
+  const pulse = 0.7 + Math.sin(f * 0.15 + idx) * 0.3;
+
+  return (
+    <div
+      style={{
+        padding: "22px 28px",
+        background: `linear-gradient(135deg, rgba(226,88,34,0.08), rgba(226,88,34,0.02))`,
+        border: `1px solid ${C.danger}`,
+        borderLeftWidth: 4,
+        borderRadius: 16,
+        display: "flex",
+        alignItems: "center",
+        gap: 20,
+        opacity: o,
+        transform: `translateX(${x}px)`,
+        position: "relative",
+        overflow: "hidden",
+      }}
+    >
+      {/* Subtle diagonal stripe */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(226,88,34,0.03) 20px, rgba(226,88,34,0.03) 40px)`,
+          pointerEvents: "none",
+        }}
+      />
+      <div
+        style={{
+          width: 64,
+          height: 64,
+          borderRadius: 14,
+          background: `rgba(226,88,34,${0.15 + pulse * 0.1})`,
+          border: `1px solid rgba(226,88,34,${0.3 + pulse * 0.3})`,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0,
+          boxShadow: `0 0 ${20 + pulse * 15}px rgba(226,88,34,${0.2 + pulse * 0.2})`,
+        }}
+      >
+        {icon}
+      </div>
+      <div style={{ flex: 1, zIndex: 1 }}>
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 32,
+            fontWeight: 700,
+            color: C.fg,
+            letterSpacing: "-0.025em",
+            lineHeight: 1.1,
+          }}
+        >
+          {title}
+        </div>
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 18,
+            fontWeight: 400,
+            color: C.fgMuted,
+            marginTop: 4,
+            letterSpacing: "-0.01em",
+          }}
+        >
+          {detail}
+        </div>
+      </div>
+      <div
+        style={{
+          padding: "6px 14px",
+          background: C.danger,
+          borderRadius: 9999,
+          fontFamily: MONO,
+          fontSize: 12,
+          fontWeight: 700,
+          color: "#fff",
+          letterSpacing: "0.14em",
+          flexShrink: 0,
+        }}
+      >
+        ISSUE
+      </div>
+    </div>
+  );
+};
+
+const IssuesScene: 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 }}>
+      <SafeZone>
+        {/* Label */}
+        <div
+          style={{
+            position: "absolute",
+            top: 20,
+            left: "50%",
+            transform: "translate(-50%, 0)",
+            padding: "8px 20px",
+            background: "rgba(226,88,34,0.12)",
+            border: `1px solid rgba(226,88,34,0.3)`,
+            borderRadius: 9999,
+            fontFamily: MONO,
+            fontSize: 16,
+            fontWeight: 500,
+            color: C.dangerSoft,
+            letterSpacing: "0.2em",
+            opacity: interpolate(f, [0.2 * fps, 0.7 * fps], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            }),
+          }}
+        >
+          OPENCLAW · WHAT WENT WRONG
+        </div>
+
+        {/* Title */}
+        <div
+          style={{
+            position: "absolute",
+            top: 90,
+            width: "100%",
+            textAlign: "center",
+            padding: "0 48px",
+          }}
+        >
+          <KineticText
+            text="Three deal-breakers."
+            f={f}
+            fps={fps}
+            startSec={0.5}
+            wordStagger={0.08}
+            size={58}
+            weight={700}
+            color={C.fg}
+          />
+        </div>
+
+        {/* Issue cards */}
+        <div
+          style={{
+            position: "absolute",
+            top: 260,
+            left: 40,
+            right: 40,
+            display: "flex",
+            flexDirection: "column",
+            gap: 20,
+          }}
+        >
+          <IssueCard
+            idx={0}
+            baseDelay={1.1}
+            f={f}
+            fps={fps}
+            icon={
+              <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
+                <path
+                  d="M15 7a4 4 0 1 1-3.5 6.37M10.5 13.37l-6 6V22h3l.5-2.5 2.5-.5v-2.5h2.5v-2.5"
+                  stroke={C.dangerSoft}
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            }
+            title="API keys leaking"
+            detail="Tokens exposed in every request trace."
+          />
+          <IssueCard
+            idx={1}
+            baseDelay={1.1}
+            f={f}
+            fps={fps}
+            icon={
+              <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
+                <path
+                  d="M12 3 4 7v5c0 4.5 3 8 8 9 5-1 8-4.5 8-9V7l-8-4Z"
+                  stroke={C.dangerSoft}
+                  strokeWidth="2"
+                  strokeLinejoin="round"
+                />
+                <path d="m9 11 3 3m0-3-3 3" stroke={C.dangerSoft} strokeWidth="2" strokeLinecap="round" />
+              </svg>
+            }
+            title="Security? Shaky."
+            detail="No sandbox. Any prompt was a live wire."
+          />
+          <IssueCard
+            idx={2}
+            baseDelay={1.1}
+            f={f}
+            fps={fps}
+            icon={
+              <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
+                <path
+                  d="M12 2v4m0 12v4m10-10h-4M6 12H2m15.07-7.07-2.83 2.83M9.76 14.24l-2.83 2.83m0-12.14 2.83 2.83m4.48 4.48 2.83 2.83"
+                  stroke={C.dangerSoft}
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                />
+                <circle cx="12" cy="12" r="3" stroke={C.dangerSoft} strokeWidth="2" />
+              </svg>
+            }
+            title="Wallet on fire"
+            detail="Every single request billed. It stacked up fast."
+          />
+        </div>
+
+        {/* Bottom verdict */}
+        <div
+          style={{
+            position: "absolute",
+            bottom: 10,
+            width: "100%",
+            textAlign: "center",
+            opacity: interpolate(f, [8 * fps, 9 * fps], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            }),
+          }}
+        >
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 38,
+              fontWeight: 700,
+              color: C.fgSoft,
+              letterSpacing: "-0.025em",
+              fontStyle: "italic",
+            }}
+          >
+            Not great.
+          </div>
+        </div>
+      </SafeZone>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 6 — DISPATCH SOLVES IT (51.5-62.5s)
+// ═══════════════════════════════════════════════════════════════
+
+const SolutionRow: React.FC<{
+  idx: number;
+  icon: React.ReactNode;
+  title: string;
+  detail: string;
+  f: number;
+  fps: number;
+  baseDelay: number;
+}> = ({ idx, icon, title, detail, f, fps, baseDelay }) => {
+  const delay = baseDelay + idx * 0.55;
+  const s = gsapSpring(f, fps, delay, "snappy");
+  const x = interpolate(s, [0, 1], [-120, 0]);
+  const o = interpolate(s, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  // Check mark draws after card arrives
+  const checkDraw = interpolate(f, [(delay + 0.3) * fps, (delay + 0.9) * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <div
+      style={{
+        padding: "22px 28px",
+        background: `linear-gradient(135deg, rgba(79,196,106,0.08), rgba(212,102,58,0.04))`,
+        border: `1px solid rgba(79,196,106,0.25)`,
+        borderLeftColor: C.claude,
+        borderLeftWidth: 4,
+        borderRadius: 16,
+        display: "flex",
+        alignItems: "center",
+        gap: 20,
+        opacity: o,
+        transform: `translateX(${x}px)`,
+        position: "relative",
+        overflow: "hidden",
+      }}
+    >
+      <div
+        style={{
+          width: 64,
+          height: 64,
+          borderRadius: 14,
+          background: `rgba(79,196,106,0.15)`,
+          border: `1px solid rgba(79,196,106,0.3)`,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0,
+        }}
+      >
+        {icon}
+      </div>
+      <div style={{ flex: 1 }}>
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 32,
+            fontWeight: 700,
+            color: C.fg,
+            letterSpacing: "-0.025em",
+            lineHeight: 1.1,
+          }}
+        >
+          {title}
+        </div>
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 18,
+            fontWeight: 400,
+            color: C.fgMuted,
+            marginTop: 4,
+            letterSpacing: "-0.01em",
+          }}
+        >
+          {detail}
+        </div>
+      </div>
+      {/* Checkmark */}
+      <div
+        style={{
+          width: 56,
+          height: 56,
+          borderRadius: "50%",
+          background: C.safe,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0,
+          boxShadow: `0 0 20px rgba(79,196,106,0.4)`,
+        }}
+      >
+        <svg width="30" height="30" viewBox="0 0 24 24" fill="none">
+          <path
+            d="M5 12.5 10 17 20 7"
+            stroke="#0a0a0b"
+            strokeWidth="3.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeDasharray="30"
+            strokeDashoffset={30 - checkDraw * 30}
+          />
+        </svg>
+      </div>
+    </div>
+  );
+};
+
+const SolutionScene: 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);
+
+  // Video inset — smaller, top-right
+  const videoSpring = gsapSpring(f, fps, 0.3, "glass");
+  const videoScale = interpolate(videoSpring, [0, 1], [0.85, 1]);
+  const videoOp = interpolate(videoSpring, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      <SafeZone>
+        {/* Header */}
+        <div
+          style={{
+            position: "absolute",
+            top: 15,
+            left: "50%",
+            transform: "translate(-50%, 0)",
+            padding: "8px 20px",
+            background: C.claudeDim,
+            border: `1px solid ${C.claude}`,
+            borderRadius: 9999,
+            fontFamily: MONO,
+            fontSize: 16,
+            fontWeight: 500,
+            color: C.claudeSoft,
+            letterSpacing: "0.2em",
+            opacity: interpolate(f, [0.1 * fps, 0.6 * fps], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            }),
+          }}
+        >
+          DISPATCH · HOW IT'S DIFFERENT
+        </div>
+
+        {/* Title */}
+        <div
+          style={{
+            position: "absolute",
+            top: 80,
+            width: "100%",
+            textAlign: "center",
+            padding: "0 48px",
+          }}
+        >
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 60,
+              fontWeight: 700,
+              color: C.fg,
+              letterSpacing: "-0.035em",
+              lineHeight: 1.05,
+              opacity: interpolate(f, [0.3 * fps, 0.9 * fps], [0, 1], {
+                extrapolateLeft: "clamp",
+                extrapolateRight: "clamp",
+              }),
+            }}
+          >
+            Dispatch fixes{" "}
+            <span style={{ color: C.claude }}>all of it.</span>
+          </div>
+        </div>
+
+        {/* Dispatch clip — small inset */}
+        <div
+          style={{
+            position: "absolute",
+            top: 200,
+            left: "50%",
+            transform: `translate(-50%, 0) scale(${videoScale})`,
+            opacity: videoOp,
+            width: 820,
+            height: 300,
+            borderRadius: 18,
+            overflow: "hidden",
+            border: `1px solid ${C.borderLoud}`,
+            boxShadow: [
+              "0 30px 60px -15px rgba(0,0,0,0.6)",
+              "0 0 40px rgba(212,102,58,0.1)",
+            ].join(", "),
+            background: "#000",
+          }}
+        >
+          <Sequence from={Math.round(SEGS[5].s * fps)} durationInFrames={Math.round(11 * fps)}>
+            {/* REFERENCE-STRIP: <OffthreadVideo> removed — bring your own clip */}
+          </Sequence>
+          {/* Gradient overlay for text legibility */}
+          <div
+            style={{
+              position: "absolute",
+              inset: 0,
+              background:
+                "linear-gradient(180deg, rgba(0,0,0,0.15), transparent 40%, transparent 70%, rgba(10,10,11,0.85))",
+              pointerEvents: "none",
+            }}
+          />
+          {/* Live chip */}
+          <div
+            style={{
+              position: "absolute",
+              top: 14,
+              left: 14,
+              padding: "5px 12px",
+              background: "rgba(0,0,0,0.6)",
+              backdropFilter: "blur(6px)",
+              borderRadius: 9999,
+              border: "1px solid rgba(255,255,255,0.15)",
+              fontFamily: MONO,
+              fontSize: 11,
+              fontWeight: 600,
+              color: C.claudeSoft,
+              letterSpacing: "0.14em",
+            }}
+          >
+            CLAUDE · DISPATCH
+          </div>
+        </div>
+
+        {/* Solution rows */}
+        <div
+          style={{
+            position: "absolute",
+            top: 540,
+            left: 40,
+            right: 40,
+            display: "flex",
+            flexDirection: "column",
+            gap: 18,
+          }}
+        >
+          <SolutionRow
+            idx={0}
+            baseDelay={1.5}
+            f={f}
+            fps={fps}
+            icon={
+              <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
+                <rect
+                  x="3"
+                  y="4"
+                  width="18"
+                  height="13"
+                  rx="2"
+                  stroke={C.safe}
+                  strokeWidth="2"
+                />
+                <path d="M8 20h8m-4-3v3" stroke={C.safe} strokeWidth="2" strokeLinecap="round" />
+                <circle cx="12" cy="10.5" r="2" fill={C.safe} />
+              </svg>
+            }
+            title="Runs on your machine"
+            detail="No API keys. No cloud. Just local."
+          />
+          <SolutionRow
+            idx={1}
+            baseDelay={1.5}
+            f={f}
+            fps={fps}
+            icon={
+              <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
+                <path
+                  d="M12 3 4 7v5c0 4.5 3 8 8 9 5-1 8-4.5 8-9V7l-8-4Z"
+                  stroke={C.safe}
+                  strokeWidth="2"
+                  strokeLinejoin="round"
+                />
+                <path d="m9 12 2 2 4-4" stroke={C.safe} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
+            }
+            title="Asks before it acts"
+            detail="Sensitive action? Prompts you first."
+          />
+        </div>
+      </SafeZone>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 7 — WINS (62-68.5s) — Safer · Cheaper · Smoother
+// ═══════════════════════════════════════════════════════════════
+
+const WinsScene: 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);
+
+  const words = [
+    { t: "SAFER.", color: C.safe, delay: 0.2 },
+    { t: "CHEAPER.", color: C.claude, delay: 1.0 },
+    { t: "SMOOTHER.", color: C.fg, delay: 1.8 },
+  ];
+
+  // OBSOLETE stamp
+  const stampSpring = gsapSpring(f, fps, 3.4, "bouncy");
+  const stampScale = interpolate(stampSpring, [0, 1], [3, 1]);
+  const stampOp = interpolate(stampSpring, [0, 0.3], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const stampRot = interpolate(stampSpring, [0, 1], [-25, -8]);
+
+  // OpenClaw fades at stamp moment
+  const clawFade = interpolate(f, [3.6 * fps, 4.4 * fps], [0.75, 0.15], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      <SafeZone>
+        {/* Three giant words stacked */}
+        <div
+          style={{
+            position: "absolute",
+            top: 40,
+            width: "100%",
+            textAlign: "center",
+            padding: "0 40px",
+          }}
+        >
+          {words.map((w) => {
+            const s = gsapSpring(f, fps, w.delay, "bouncy");
+            const scale = interpolate(s, [0, 1], [0.6, 1]);
+            const o = interpolate(s, [0, 0.3], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            });
+            return (
+              <div
+                key={w.t}
+                style={{
+                  fontFamily: FONT,
+                  fontSize: 128,
+                  fontWeight: 700,
+                  color: w.color,
+                  letterSpacing: "-0.055em",
+                  lineHeight: 1.04,
+                  transform: `scale(${scale})`,
+                  opacity: o,
+                  textShadow:
+                    w.color === C.claude
+                      ? "0 0 60px rgba(212,102,58,0.4)"
+                      : w.color === C.safe
+                        ? "0 0 60px rgba(79,196,106,0.3)"
+                        : "none",
+                }}
+              >
+                {w.t}
+              </div>
+            );
+          })}
+        </div>
+
+        {/* OpenClaw at bottom, fading with stamp */}
+        <div
+          style={{
+            position: "absolute",
+            bottom: 10,
+            left: "50%",
+            transform: "translate(-50%, 0)",
+            opacity: interpolate(f, [3 * fps, 3.5 * fps], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            }),
+          }}
+        >
+          <div style={{ position: "relative", display: "flex", alignItems: "center", gap: 16 }}>
+            <Img
+              src={staticFile("captures/your-asset.png" /* REFERENCE-STRIP */)}
+              style={{
+                width: 72,
+                height: 72,
+                opacity: clawFade,
+                filter: "grayscale(0.8)",
+              }}
+            />
+            <div
+              style={{
+                fontFamily: FONT,
+                fontSize: 34,
+                fontWeight: 600,
+                color: C.fgMuted,
+                opacity: clawFade + 0.3,
+                letterSpacing: "-0.02em",
+              }}
+            >
+              OpenClaw workflows
+            </div>
+            {/* OBSOLETE stamp */}
+            <div
+              style={{
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: `translate(-50%, -50%) scale(${stampScale}) rotate(${stampRot}deg)`,
+                opacity: stampOp,
+                padding: "8px 24px",
+                border: `4px solid ${C.danger}`,
+                borderRadius: 4,
+                fontFamily: FONT,
+                fontSize: 44,
+                fontWeight: 700,
+                color: C.danger,
+                letterSpacing: "0.08em",
+                textTransform: "uppercase",
+                background: "rgba(10,10,11,0.5)",
+                textShadow: `0 0 20px ${C.danger}`,
+                whiteSpace: "nowrap",
+              }}
+            >
+              OBSOLETE
+            </div>
+          </div>
+        </div>
+      </SafeZone>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 8 — CTA (68-74s) — Comment "Claude" + Like
+// ═══════════════════════════════════════════════════════════════
+
+const CTAScene: React.FC<SP> = ({ frame, fps }) => {
+  const op = so(frame, fps, SEGS[7].s, SEGS[7].e, 0.4, 0.6);
+  if (op === 0) return null;
+  const f = lf(frame, fps, SEGS[7].s);
+
+  // Phone mockup scale-in
+  const phoneSpring = gsapSpring(f, fps, 0, "glass");
+  const phoneScale = interpolate(phoneSpring, [0, 1], [0.85, 1]);
+  const phoneOp = interpolate(phoneSpring, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // "Claude" typing in comment
+  const chars = Math.floor(
+    interpolate(f, [1.2 * fps, 2.6 * fps], [0, 6], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+    }),
+  );
+  const commentText = "Claude".slice(0, chars);
+  const cursorVis = Math.floor(f / 10) % 2 === 0;
+
+  // Heart pulse & particle burst at 3.2s
+  const heartSpring = gsapSpring(f, fps, 3.0, "bouncy");
+  const heartScale = interpolate(heartSpring, [0, 1], [1, 1.4]);
+  const heartSettle = interpolate(f, [3.6 * fps, 4.2 * fps], [1.4, 1.1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const finalHeartScale = f < 3.6 * fps ? heartScale : heartSettle;
+
+  const particleT = interpolate(f, [3.0 * fps, 4.0 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Guide pill slide up at 4.2s
+  const pillSpring = gsapSpring(f, fps, 4.0, "glass");
+  const pillY = interpolate(pillSpring, [0, 1], [60, 0]);
+  const pillOp = interpolate(pillSpring, [0, 0.3], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      <SafeZone>
+        {/* Instruction title */}
+        <div
+          style={{
+            position: "absolute",
+            top: 10,
+            width: "100%",
+            textAlign: "center",
+            padding: "0 40px",
+          }}
+        >
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 58,
+              fontWeight: 700,
+              color: C.fg,
+              letterSpacing: "-0.035em",
+              lineHeight: 1.1,
+              opacity: interpolate(f, [0.2 * fps, 0.8 * fps], [0, 1], {
+                extrapolateLeft: "clamp",
+                extrapolateRight: "clamp",
+              }),
+            }}
+          >
+            Drop{" "}
+            <span
+              style={{
+                color: C.claude,
+                background: `${C.claudeDim}`,
+                padding: "4px 14px",
+                borderRadius: 8,
+                border: `1px solid ${C.claude}`,
+              }}
+            >
+              Claude
+            </span>{" "}
+            in comments
+          </div>
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 26,
+              fontWeight: 400,
+              color: C.fgMuted,
+              marginTop: 16,
+              letterSpacing: "-0.015em",
+              opacity: interpolate(f, [0.8 * fps, 1.4 * fps], [0, 1], {
+                extrapolateLeft: "clamp",
+                extrapolateRight: "clamp",
+              }),
+            }}
+          >
+            + like for the full setup guide.
+          </div>
+        </div>
+
+        {/* Phone preview */}
+        <div
+          style={{
+            position: "absolute",
+            top: 220,
+            left: "50%",
+            transform: `translate(-50%, 0) scale(${phoneScale})`,
+            opacity: phoneOp,
+          }}
+        >
+          <PhoneFrame scale={0.9}>
+            <div
+              style={{
+                padding: "54px 18px 0",
+                display: "flex",
+                flexDirection: "column",
+                gap: 14,
+              }}
+            >
+              {/* IG post header */}
+              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+                <div
+                  style={{
+                    width: 40,
+                    height: 40,
+                    borderRadius: "50%",
+                    background: `conic-gradient(from 45deg, ${C.claude}, #f0a659, ${C.claude}, ${C.claudeSoft})`,
+                    padding: 2,
+                  }}
+                >
+                  <div
+                    style={{
+                      width: "100%",
+                      height: "100%",
+                      borderRadius: "50%",
+                      background: "#0a0a0b",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      fontFamily: FONT,
+                      fontWeight: 700,
+                      fontSize: 15,
+                      color: C.claude,
+                    }}
+                  >
+                    D
+                  </div>
+                </div>
+                <div style={{ flex: 1 }}>
+                  <div style={{ fontFamily: FONT, fontSize: 13, fontWeight: 600, color: C.fg }}>
+                    devini.io
+                  </div>
+                  <div style={{ fontFamily: FONT, fontSize: 10, color: C.fgDim }}>
+                    Claude Dispatch · 2m
+                  </div>
+                </div>
+              </div>
+
+              {/* Comment field */}
+              <div
+                style={{
+                  marginTop: 8,
+                  padding: "12px 14px",
+                  background: "rgba(255,255,255,0.04)",
+                  border: "1px solid rgba(255,255,255,0.08)",
+                  borderRadius: 12,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 10,
+                }}
+              >
+                <div
+                  style={{
+                    width: 26,
+                    height: 26,
+                    borderRadius: "50%",
+                    background: "rgba(255,255,255,0.08)",
+                    flexShrink: 0,
+                  }}
+                />
+                <div
+                  style={{
+                    flex: 1,
+                    fontFamily: FONT,
+                    fontSize: 14,
+                    color: commentText ? C.fg : C.fgDim,
+                    fontWeight: 500,
+                    minHeight: 18,
+                  }}
+                >
+                  {commentText || "Add a comment..."}
+                  {commentText && commentText.length < 6 && cursorVis && "|"}
+                </div>
+                <div
+                  style={{
+                    fontFamily: FONT,
+                    fontSize: 12,
+                    fontWeight: 700,
+                    color: chars === 6 ? C.claude : C.fgDim,
+                    letterSpacing: "-0.01em",
+                  }}
+                >
+                  Post
+                </div>
+              </div>
+
+              {/* Action row with like */}
+              <div
+                style={{
+                  marginTop: 6,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 18,
+                  padding: "8px 2px",
+                }}
+              >
+                {/* Heart with particles */}
+                <div style={{ position: "relative" }}>
+                  <svg
+                    width={42}
+                    height={42}
+                    viewBox="0 0 24 24"
+                    fill={f > 3.0 * fps ? C.danger : "none"}
+                    stroke={f > 3.0 * fps ? C.danger : C.fg}
+                    strokeWidth="2"
+                    style={{
+                      transform: `scale(${finalHeartScale})`,
+                      transition: "transform 0.1s ease",
+                    }}
+                  >
+                    <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>
+                  {/* Particles */}
+                  {[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: 20,
+                          left: 20,
+                          width: 6,
+                          height: 6,
+                          borderRadius: "50%",
+                          background: i % 2 === 0 ? C.danger : C.claude,
+                          transform: `translate(${px}px, ${py}px) scale(${1 - particleT * 0.5})`,
+                          opacity: pOp,
+                        }}
+                      />
+                    );
+                  })}
+                </div>
+                <svg width={38} height={38} viewBox="0 0 24 24" fill="none" stroke={C.fg} strokeWidth="2">
+                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+                </svg>
+                <svg width={38} height={38} viewBox="0 0 24 24" fill="none" stroke={C.fg} strokeWidth="2">
+                  <path d="m22 2-7 20-4-9-9-4Z" strokeLinejoin="round" strokeLinecap="round" />
+                </svg>
+                <div style={{ flex: 1 }} />
+                <svg width={38} height={38} viewBox="0 0 24 24" fill="none" stroke={C.fg} strokeWidth="2">
+                  <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2Z" strokeLinejoin="round" />
+                </svg>
+              </div>
+            </div>
+          </PhoneFrame>
+        </div>
+
+        {/* Setup guide pill at bottom */}
+        <div
+          style={{
+            position: "absolute",
+            bottom: 10,
+            left: "50%",
+            transform: `translate(-50%, ${pillY}px)`,
+            opacity: pillOp,
+            padding: "18px 32px",
+            background: `linear-gradient(135deg, ${C.claude}, ${C.claudeSoft})`,
+            borderRadius: 9999,
+            display: "flex",
+            alignItems: "center",
+            gap: 14,
+            boxShadow: `0 20px 40px -10px rgba(212,102,58,0.5), 0 0 60px rgba(212,102,58,0.3)`,
+          }}
+        >
+          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5">
+            <path
+              d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
+              strokeLinejoin="round"
+              strokeLinecap="round"
+            />
+          </svg>
+          <span
+            style={{
+              fontFamily: FONT,
+              fontSize: 26,
+              fontWeight: 700,
+              color: "#fff",
+              letterSpacing: "-0.02em",
+            }}
+          >
+            I'll DM the setup guide
+          </span>
+        </div>
+      </SafeZone>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// MAIN COMPOSITION
+// ═══════════════════════════════════════════════════════════════
+
+export const ClaudeDispatchReel: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: C.bg, fontFamily: FONT }}>
+      {/* REFERENCE-STRIP: <Audio> tag removed — bring your own voiceover */}
+
+      <Background frame={frame} fps={fps} />
+
+      <HookScene frame={frame} fps={fps} />
+      <IdeaScene frame={frame} fps={fps} />
+      <ExampleScene frame={frame} fps={fps} />
+      <WhyScene frame={frame} fps={fps} />
+      <IssuesScene frame={frame} fps={fps} />
+      <SolutionScene frame={frame} fps={fps} />
+      <WinsScene frame={frame} fps={fps} />
+      <CTAScene frame={frame} fps={fps} />
+    </AbsoluteFill>
+  );
+};