@devinilabs/reelstack 1.3.1 → 1.4.0

package/reference/paper/devini3d.tsx

@@ -0,0 +1,1799 @@
+/**
+ * REFERENCE — Devini3DReel  (Family: paper)
+ *
+ * Canonical example of the paper family's motion vocabulary, frame-locked
+ * BEAT structure, and scene choreography. Bundled with ReelStack v1.4+
+ * for STUDY and as the source for the scaffold-from-reference flow.
+ *
+ * Asset imports stripped (look for REFERENCE-STRIP markers). Bring your own
+ * voiceover, brand SVGs, captures.
+ *
+ * License: study + adapt patterns OK. Verbatim re-publication as your own
+ * template NOT OK. See ReelStack LICENSE.
+ *
+ * Source: my-video/src/Devini3DReel.tsx
+ * Bundled at: 2026-05-12T19:40:04.828Z
+ */
+import { Fragment } from "react";
+import {
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+  Easing,
+  AbsoluteFill,
+  Img,
+  OffthreadVideo,
+  Sequence,
+  staticFile,
+} from "remotion";
+import { ds } from "./designSystem";
+
+// ═══════════════════════════════════════════════════════════════
+// CONSTANTS
+// ═══════════════════════════════════════════════════════════════
+
+const FONT = ds.font.sans;
+const MONO = ds.font.mono;
+const G = ds.card3d.green;
+
+const T = {
+  heading: "#1a1a1a",
+  body: "#2d2d2d",
+  muted: "#6b6b6b",
+  accent: ds.color.claude,
+  accentDark: "#1e3a27",
+  danger: "#c0392b",
+  success: "#1e7a45",
+} as const;
+
+// 8 scene segments aligned to 38s voiceover
+// Clip stays visible for SEGS[0]..SEGS[5]; SEGS[6]+ is full motion graphics.
+const SEGS = [
+  { s: 0,    e: 4.5,  text: "Hook" },         // 1: "this entire 3D website? Built in an hour"
+  { s: 4.0,  e: 13.0, text: "WildPart" },     // 2: "custom Claude skill that handles everything"
+  { s: 12.5, e: 17.0, text: "Breadth" },      // 3: "from asset creation to execution"
+  { s: 16.5, e: 22.0, text: "Prompt" },       // 4: "I just told Claude what I wanted"
+  { s: 21.5, e: 27.0, text: "Pipeline" },     // 5: "3D models, code, scene, shipped"
+  { s: 26.5, e: 31.0, text: "NoStitching" },  // 6: "no asset packs, no boilerplate, no stitching"
+  { s: 30.5, e: 34.5, text: "OneSkill" },     // 7: "just one skill doing the whole pipeline" (motion graphics)
+  { s: 34.0, e: 38.5, text: "CTA" },          // 8: "Comment AI down below..."
+] as const;
+
+// Clip visibility window — fades out as scene 7 begins
+const CLIP_FADE_OUT_START = 30.5;
+const CLIP_FADE_OUT_END = 31.5;
+
+// ═══════════════════════════════════════════════════════════════
+// UTILITIES
+// ═══════════════════════════════════════════════════════════════
+
+const so = (
+  frame: number,
+  fps: number,
+  startS: number,
+  endS: number,
+  fadeIn = 0.5,
+  fadeOut = 0.5,
+) =>
+  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 — warm cream paper with subtle grid (matches JustDropReel)
+// ═══════════════════════════════════════════════════════════════
+
+const Background: React.FC<{ frame: number }> = ({ frame }) => {
+  const paperBase = "#e8e4de";
+  const paperLight = "#edeae4";
+  const gridLine = "rgba(180,175,165,0.25)";
+  const vignetteOp = 0.12 + Math.sin(frame * 0.006) * 0.03;
+
+  return (
+    <AbsoluteFill>
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          background: `radial-gradient(ellipse at 50% 40%, ${paperLight} 0%, ${paperBase} 55%, #d9d4cc 100%)`,
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          backgroundImage: `
+            linear-gradient(${gridLine} 1px, transparent 1px),
+            linear-gradient(90deg, ${gridLine} 1px, transparent 1px)
+          `,
+          backgroundSize: "48px 48px",
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse at 50% 45%, rgba(255,255,255,0.3) 0%, transparent 60%)`,
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(0,0,0,${vignetteOp}) 100%)`,
+        }}
+      />
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// FLOATING CARD (reused from JustDropReel)
+// ═══════════════════════════════════════════════════════════════
+
+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: "26px 30px",
+        position: "relative",
+        overflow: "hidden",
+      }}
+    >
+      <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>
+);
+
+// ═══════════════════════════════════════════════════════════════
+// 3D CLAUDE SKILL ICON (reused JustDropShape pattern)
+// ═══════════════════════════════════════════════════════════════
+
+const SkillIcon: React.FC<{
+  size: number;
+  rotation?: number;
+  glow?: number;
+}> = ({ size, rotation = 0, glow = 0.4 }) => (
+  <div
+    style={{
+      width: size,
+      height: size,
+      position: "relative",
+      perspective: 800,
+    }}
+  >
+    <div
+      style={{
+        position: "absolute",
+        inset: 0,
+        transformStyle: "preserve-3d",
+        transform: `rotateY(${rotation}deg) rotateX(-8deg)`,
+      }}
+    >
+      <div
+        style={{
+          position: "absolute",
+          inset: -size * 0.2,
+          borderRadius: "50%",
+          background: `radial-gradient(circle, rgba(212,102,58,${glow}) 0%, transparent 60%)`,
+          filter: "blur(24px)",
+        }}
+      />
+      <Img
+        src={staticFile("claude-ai-icon.webp")}
+        style={{
+          width: size,
+          height: size,
+          display: "block",
+          filter: "drop-shadow(0 18px 28px rgba(150,60,30,0.4))",
+        }}
+      />
+    </div>
+  </div>
+);
+
+// Orbital ring for hero scenes
+const OrbitRing: React.FC<{
+  size: number;
+  rotation: number;
+  tilt: number;
+  color?: string;
+}> = ({ size, rotation, tilt, color = "rgba(212,102,58,0.4)" }) => (
+  <div
+    style={{
+      width: size,
+      height: size,
+      borderRadius: "50%",
+      border: `1.5px solid ${color}`,
+      transform: `rotateX(${tilt}deg) rotateZ(${rotation}deg)`,
+      transformStyle: "preserve-3d",
+    }}
+  />
+);
+
+// ═══════════════════════════════════════════════════════════════
+// ICONS (reused from JustDropReel)
+// ═══════════════════════════════════════════════════════════════
+
+const Icon = {
+  Cube: ({ color = "#fff", size = 24 }) => (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <path d="M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3z" stroke={color} strokeWidth="1.7" strokeLinejoin="round" />
+      <path d="M4 7.5L12 12l8-4.5M12 12v9" stroke={color} strokeWidth="1.7" strokeLinejoin="round" />
+    </svg>
+  ),
+  Code: ({ color = "#fff", size = 24 }) => (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <path d="M8 6l-5 6 5 6M16 6l5 6-5 6M14 4l-4 16" stroke={color} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  ),
+  Scene: ({ color = "#fff", size = 24 }) => (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <rect x="3" y="5" width="18" height="14" rx="2" stroke={color} strokeWidth="1.7" />
+      <path d="M3 10h18M9 5v14" stroke={color} strokeWidth="1.7" />
+    </svg>
+  ),
+  Ship: ({ color = "#fff", size = 24 }) => (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <path d="M12 3v18M5 10l7-7 7 7" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  ),
+  Check: ({ color = "#fff", size = 20 }) => (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <path d="M5 12l5 5L20 7" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  ),
+  Cross: ({ color = "#fff", size = 18 }) => (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <path d="M6 6l12 12M18 6L6 18" stroke={color} strokeWidth="2.4" strokeLinecap="round" />
+    </svg>
+  ),
+  Sparkle: ({ color = "#fff", size = 24 }) => (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <path d="M12 3l2 6 6 2-6 2-2 6-2-6-6-2 6-2 2-6z" fill={color} />
+    </svg>
+  ),
+  ArrowDown: ({ color = "#fff", size = 32 }) => (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <path d="M12 5v14M6 13l6 6 6-6" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  ),
+  Chat: ({ color = "#fff", size = 28 }) => (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <path d="M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-8l-5 4v-4H5a2 2 0 0 1-2-2V6z" stroke={color} strokeWidth="1.8" strokeLinejoin="round" />
+    </svg>
+  ),
+  Bolt: ({ color = "#fff", size = 24 }) => (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z" fill={color} />
+    </svg>
+  ),
+};
+
+// ═══════════════════════════════════════════════════════════════
+// CLIP FRAME — the "showcase window" that holds the 3D website video
+// Stays mounted for SEGS 0..5, fades out before SEGS[6] (OneSkill)
+// ═══════════════════════════════════════════════════════════════
+
+const ClipShowcase: React.FC<SP> = ({ frame, fps }) => {
+  // Master visibility — fade out at NoStitching → OneSkill boundary
+  const visibility = interpolate(
+    frame,
+    [0, 0.4 * fps, CLIP_FADE_OUT_START * fps, CLIP_FADE_OUT_END * fps],
+    [0, 1, 1, 0],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
+  );
+  if (visibility === 0) return null;
+
+  // Entrance spring (gsap-style power3.out — "back.out(1.4)")
+  const entrance = spring({
+    frame,
+    fps,
+    delay: Math.round(0.15 * fps),
+    config: { damping: 12, stiffness: 95 },
+  });
+  const entranceScale = interpolate(entrance, [0, 1], [0.78, 1]);
+  const entranceY = interpolate(entrance, [0, 1], [60, 0]);
+
+  // Exit lift (during fade-out)
+  const exitLift = interpolate(
+    frame,
+    [CLIP_FADE_OUT_START * fps, CLIP_FADE_OUT_END * fps],
+    [0, -120],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.in(Easing.cubic) },
+  );
+  const exitScale = interpolate(
+    frame,
+    [CLIP_FADE_OUT_START * fps, CLIP_FADE_OUT_END * fps],
+    [1, 0.85],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
+  );
+
+  // Subtle float
+  const floatY = Math.sin((frame / fps) * 1.1) * 4;
+  const tiltSwing = Math.sin((frame / fps) * 0.6) * 1.2;
+
+  return (
+    <div
+      style={{
+        position: "absolute",
+        top: "26%",
+        left: "50%",
+        transform: `translate(-50%, ${entranceY + floatY + exitLift}px) scale(${entranceScale * exitScale})`,
+        opacity: visibility,
+        width: "92%",
+        maxWidth: 1000,
+        perspective: 1400,
+      }}
+    >
+      <div
+        style={{
+          borderRadius: 28,
+          overflow: "hidden",
+          boxShadow: [
+            "0 40px 80px -20px rgba(0,0,0,0.35)",
+            "0 18px 36px -8px rgba(0,0,0,0.22)",
+            "inset 0 1px 0 rgba(255,255,255,0.25)",
+          ].join(", "),
+          border: "1px solid rgba(0,0,0,0.10)",
+          background: "#0a0a0a",
+          aspectRatio: "3328 / 2160",
+          transform: `rotateX(${4 + tiltSwing * 0.4}deg) rotateY(${-2 + tiltSwing}deg)`,
+          transformStyle: "preserve-3d",
+          position: "relative",
+        }}
+      >
+        {/* Browser-like top bar */}
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            height: 38,
+            background: "linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0))",
+            borderBottom: "1px solid rgba(255,255,255,0.06)",
+            display: "flex",
+            alignItems: "center",
+            padding: "0 16px",
+            gap: 7,
+            zIndex: 2,
+          }}
+        >
+          <div style={{ width: 11, height: 11, borderRadius: "50%", background: "#ff5f57" }} />
+          <div style={{ width: 11, height: 11, borderRadius: "50%", background: "#febb2e" }} />
+          <div style={{ width: 11, height: 11, borderRadius: "50%", background: "#28c840" }} />
+          <div
+            style={{
+              marginLeft: 14,
+              fontFamily: MONO,
+              fontSize: 11,
+              color: "rgba(255,255,255,0.5)",
+              letterSpacing: 0.5,
+            }}
+          >
+            devini.io / 3d-website
+          </div>
+        </div>
+
+        {/* The video itself */}
+        <Sequence from={0}>
+          {/* REFERENCE-STRIP: <OffthreadVideo> removed — bring your own clip */}
+        </Sequence>
+
+        {/* Glassy reflection edge */}
+        <div
+          style={{
+            position: "absolute",
+            top: 38,
+            left: 0,
+            right: 0,
+            height: 30,
+            background: "linear-gradient(180deg, rgba(255,255,255,0.08), transparent)",
+            pointerEvents: "none",
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 1: HOOK — "this entire 3D website? Built in an hour"
+// ═══════════════════════════════════════════════════════════════
+
+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);
+
+  // gsap-style timeline: badge → title → countdown
+  const badgeSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(0.2 * fps),
+    config: ds.spring.bouncy,
+  });
+  const titleSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(0.6 * fps),
+    config: ds.spring.gentle,
+  });
+  const titleScale = interpolate(titleSpring, [0, 1], [0.85, 1]);
+
+  // Bottom timer chip
+  const chipOp = interpolate(f, [1.6 * fps, 2.2 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const chipPulse = 1 + Math.sin((f / fps) * 4) * 0.04;
+
+  return (
+    <AbsoluteFill style={{ opacity: op, pointerEvents: "none" }}>
+      {/* Top pill badge */}
+      <div
+        style={{
+          position: "absolute",
+          top: "9.5%",
+          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.claude,
+            boxShadow: `0 0 10px ${ds.color.claude}`,
+          }}
+        />
+        <span
+          style={{
+            fontFamily: MONO,
+            fontSize: 14,
+            fontWeight: ds.text.medium,
+            color: G.text,
+            letterSpacing: 1.2,
+          }}
+        >
+          BUILT WITH CLAUDE
+        </span>
+      </div>
+
+      {/* Big headline — pinned high so the clip below reads underneath */}
+      <div
+        style={{
+          position: "absolute",
+          top: "13.5%",
+          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: 56,
+            fontWeight: ds.text.bold,
+            color: T.heading,
+            lineHeight: 1.04,
+            letterSpacing: ds.text.tighter,
+          }}
+        >
+          This whole 3D site?{" "}
+          <span style={{ color: ds.color.claude }}>1 hour.</span>
+        </div>
+      </div>
+
+      {/* Bottom timer chip */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "23%",
+          left: "50%",
+          transform: `translate(-50%, 0) scale(${chipPulse})`,
+          opacity: chipOp,
+          display: "flex",
+          alignItems: "center",
+          gap: 10,
+          background: "rgba(212,102,58,0.14)",
+          border: "1.5px solid rgba(212,102,58,0.4)",
+          borderRadius: ds.radius.pill,
+          padding: "12px 24px",
+        }}
+      >
+        <Icon.Bolt color={ds.color.claude} size={20} />
+        <span
+          style={{
+            fontFamily: FONT,
+            fontSize: 22,
+            fontWeight: ds.text.semibold,
+            color: ds.color.claude,
+            letterSpacing: 0.4,
+          }}
+        >
+          start to ship · 60 minutes
+        </span>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 2: WILD PART — "custom Claude skill that handles everything"
+// ═══════════════════════════════════════════════════════════════
+
+const WildPartScene: 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);
+
+  // gsap timeline: header pop → skill tag drops → "everything" emphasis
+  const headerOp = interpolate(f, [0.2 * fps, 0.7 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const headerY = interpolate(f, [0.2 * fps, 0.7 * fps], [-20, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.cubic),
+  });
+
+  const tagSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(0.9 * fps),
+    config: ds.spring.bouncy,
+  });
+
+  // The "EVERYTHING" emphasis stamp
+  const stampSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(5.2 * fps),
+    config: { damping: 7, stiffness: 110 },
+  });
+  const stampRotate = interpolate(stampSpring, [0, 1], [-25, -8]);
+
+  // Bottom bar reveal
+  const barOp = interpolate(f, [2.2 * fps, 2.9 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill style={{ opacity: op, pointerEvents: "none" }}>
+      {/* Top label */}
+      <div
+        style={{
+          position: "absolute",
+          top: "10%",
+          width: "100%",
+          textAlign: "center",
+          opacity: headerOp,
+          transform: `translateY(${headerY}px)`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 18,
+            fontWeight: ds.text.medium,
+            color: T.muted,
+            letterSpacing: ds.text.wider,
+            textTransform: "uppercase",
+          }}
+        >
+          here's the wild part
+        </div>
+      </div>
+
+      {/* Headline */}
+      <div
+        style={{
+          position: "absolute",
+          top: "13%",
+          width: "100%",
+          textAlign: "center",
+          padding: "0 56px",
+          opacity: headerOp,
+          transform: `translateY(${headerY}px)`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 48,
+            fontWeight: ds.text.bold,
+            color: T.heading,
+            lineHeight: 1.05,
+            letterSpacing: ds.text.tighter,
+          }}
+        >
+          One{" "}
+          <span style={{ color: ds.color.claude }}>custom skill</span>
+          <br />
+          handles it all
+        </div>
+      </div>
+
+      {/* "EVERYTHING" stamp — appears later in the scene */}
+      <div
+        style={{
+          position: "absolute",
+          top: "22.2%",
+          right: "8%",
+          transform: `rotate(${stampRotate}deg) scale(${interpolate(stampSpring, [0, 1], [0.4, 1])})`,
+          opacity: interpolate(stampSpring, [0, 0.3], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          background: "rgba(192,52,43,0.12)",
+          border: "2.5px dashed #c0392b",
+          borderRadius: 8,
+          padding: "6px 14px",
+          fontFamily: MONO,
+          fontSize: 18,
+          fontWeight: ds.text.bold,
+          color: "#c0392b",
+          letterSpacing: 1.5,
+        }}
+      >
+        EVERYTHING
+      </div>
+
+      {/* Bottom skill tag — anchored under the clip */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "23%",
+          left: "50%",
+          transform: `translate(-50%, ${interpolate(tagSpring, [0, 1], [40, 0])}px) scale(${interpolate(tagSpring, [0, 1], [0.7, 1])})`,
+          opacity: interpolate(tagSpring, [0, 0.3], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          display: "flex",
+          alignItems: "center",
+          gap: 12,
+          background: "rgba(0,0,0,0.85)",
+          border: "1px solid rgba(212,102,58,0.4)",
+          borderRadius: ds.radius.pill,
+          padding: "13px 22px",
+        }}
+      >
+        <Icon.Sparkle color={ds.color.claude} size={18} />
+        <span
+          style={{
+            fontFamily: MONO,
+            fontSize: 16,
+            fontWeight: ds.text.semibold,
+            color: "#fff",
+            letterSpacing: 0.5,
+          }}
+        >
+          /3d-website-builder
+        </span>
+        <span
+          style={{
+            fontFamily: MONO,
+            fontSize: 12,
+            fontWeight: ds.text.medium,
+            color: ds.color.claude,
+            background: "rgba(212,102,58,0.18)",
+            padding: "3px 9px",
+            borderRadius: ds.radius.sm,
+            letterSpacing: 0.8,
+          }}
+        >
+          CUSTOM
+        </span>
+      </div>
+
+      {/* Subtle bottom strap */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "19%",
+          width: "100%",
+          textAlign: "center",
+          opacity: barOp,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 16,
+            fontWeight: ds.text.medium,
+            color: T.muted,
+            fontStyle: "italic",
+          }}
+        >
+          built once · runs forever
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 3: BREADTH — "from asset creation to execution"
+// Pipeline arrows: ASSETS → CODE → SCENE → SHIP
+// ═══════════════════════════════════════════════════════════════
+
+const PIPELINE = [
+  { label: "Assets", icon: "Cube" as const },
+  { label: "Code", icon: "Code" as const },
+  { label: "Scene", icon: "Scene" as const },
+  { label: "Ship", icon: "Ship" as const },
+];
+
+const BreadthScene: React.FC<SP> = ({ frame, fps }) => {
+  const op = so(frame, fps, SEGS[2].s, SEGS[2].e);
+  if (op === 0) return null;
+  const f = lf(frame, fps, SEGS[2].s);
+
+  const headOp = interpolate(f, [0.2 * fps, 0.7 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill style={{ opacity: op, pointerEvents: "none" }}>
+      {/* Title */}
+      <div
+        style={{
+          position: "absolute",
+          top: "10.5%",
+          width: "100%",
+          textAlign: "center",
+          padding: "0 48px",
+          opacity: headOp,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 44,
+            fontWeight: ds.text.bold,
+            color: T.heading,
+            letterSpacing: ds.text.tighter,
+            lineHeight: 1.05,
+          }}
+        >
+          From <span style={{ color: ds.color.claude }}>assets</span>
+          {" → "}
+          <span style={{ color: ds.color.claude }}>execution</span>
+        </div>
+      </div>
+
+      {/* Pipeline pills under the clip */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "22%",
+          left: "50%",
+          transform: "translate(-50%, 0)",
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          width: "92%",
+          maxWidth: 980,
+          justifyContent: "center",
+        }}
+      >
+        {PIPELINE.map((step, i) => {
+          const delay = Math.round((0.6 + i * 0.32) * fps);
+          const s = spring({
+            frame: f,
+            fps,
+            delay,
+            config: { damping: 12, stiffness: 110 },
+          });
+          const sc = interpolate(s, [0, 1], [0.4, 1]);
+          const itemOp = interpolate(s, [0, 0.3], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          });
+          const IconComp = Icon[step.icon];
+
+          // Arrow between items
+          const arrowDelay = delay + Math.round(0.18 * fps);
+          const arrowOp = interpolate(
+            f,
+            [arrowDelay, arrowDelay + 0.3 * fps],
+            [0, 1],
+            { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
+          );
+
+          return (
+            <Fragment key={step.label}>
+              <div
+                style={{
+                  ...ds.card3d.cardStyle,
+                  padding: "12px 14px",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: 6,
+                  opacity: itemOp,
+                  transform: `scale(${sc})`,
+                  minWidth: 100,
+                }}
+              >
+                <div
+                  style={{
+                    width: 38,
+                    height: 38,
+                    borderRadius: 11,
+                    background: "rgba(212,102,58,0.18)",
+                    border: "1px solid rgba(212,102,58,0.3)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  <IconComp color={ds.color.claude} size={20} />
+                </div>
+                <div
+                  style={{
+                    fontFamily: MONO,
+                    fontSize: 12,
+                    fontWeight: ds.text.semibold,
+                    color: G.text,
+                    letterSpacing: 0.6,
+                    textTransform: "uppercase",
+                  }}
+                >
+                  {step.label}
+                </div>
+              </div>
+              {i < PIPELINE.length - 1 && (
+                <div
+                  style={{
+                    fontFamily: MONO,
+                    fontSize: 24,
+                    fontWeight: ds.text.bold,
+                    color: ds.color.claude,
+                    opacity: arrowOp,
+                  }}
+                >
+                  →
+                </div>
+              )}
+            </Fragment>
+          );
+        })}
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 4: PROMPT — "I just told Claude what I wanted"
+// ═══════════════════════════════════════════════════════════════
+
+const PromptScene: 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 headOp = interpolate(f, [0.2 * fps, 0.7 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  const cardSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(0.9 * fps),
+    config: ds.spring.glass,
+  });
+
+  // Type out the prompt
+  const promptText = "build me a 3D website";
+  const typedChars = Math.floor(
+    interpolate(f, [1.8 * fps, 3.4 * fps], [0, promptText.length], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+    }),
+  );
+
+  return (
+    <AbsoluteFill style={{ opacity: op, pointerEvents: "none" }}>
+      {/* Heading */}
+      <div
+        style={{
+          position: "absolute",
+          top: "11%",
+          width: "100%",
+          textAlign: "center",
+          opacity: headOp,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 42,
+            fontWeight: ds.text.bold,
+            color: T.heading,
+            letterSpacing: ds.text.tighter,
+          }}
+        >
+          I just <span style={{ color: ds.color.claude }}>asked</span>.
+        </div>
+      </div>
+
+      {/* Prompt card */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "22%",
+          left: "50%",
+          transform: `translate(-50%, ${interpolate(cardSpring, [0, 1], [40, 0])}px)`,
+          opacity: interpolate(cardSpring, [0, 0.3], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          width: "92%",
+          maxWidth: 880,
+        }}
+      >
+        <FloatingCard rotateX={3} rotateY={-1}>
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 14,
+              padding: "4px 0",
+            }}
+          >
+            <div
+              style={{
+                width: 42,
+                height: 42,
+                borderRadius: "50%",
+                background: "linear-gradient(135deg, #D4663A, #8B3A1E)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                flexShrink: 0,
+              }}
+            >
+              <Img
+                src={staticFile("claude-ai-icon.webp")}
+                style={{ width: 26, height: 26, display: "block" }}
+              />
+            </div>
+            <div style={{ flex: 1 }}>
+              <div
+                style={{
+                  fontFamily: MONO,
+                  fontSize: 11,
+                  color: G.textMuted,
+                  letterSpacing: 1.2,
+                  marginBottom: 2,
+                }}
+              >
+                YOU → CLAUDE
+              </div>
+              <div
+                style={{
+                  fontFamily: FONT,
+                  fontSize: 24,
+                  fontWeight: ds.text.semibold,
+                  color: G.text,
+                  letterSpacing: -0.2,
+                }}
+              >
+                {promptText.slice(0, typedChars)}
+                {typedChars < promptText.length && (
+                  <span
+                    style={{
+                      opacity: Math.sin(f * 0.4) > 0 ? 1 : 0,
+                      color: ds.color.claude,
+                      marginLeft: 2,
+                    }}
+                  >
+                    ▊
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+        </FloatingCard>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 5: PIPELINE — "3D models, code, scene, shipped" (checklist)
+// ═══════════════════════════════════════════════════════════════
+
+const PIPELINE_STEPS = [
+  "Generated the 3D models",
+  "Wrote the code",
+  "Set up the scene",
+  "Shipped it",
+];
+
+const PipelineScene: 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);
+
+  const headOp = interpolate(f, [0.2 * fps, 0.7 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill style={{ opacity: op, pointerEvents: "none" }}>
+      {/* Title */}
+      <div
+        style={{
+          position: "absolute",
+          top: "10.5%",
+          width: "100%",
+          textAlign: "center",
+          opacity: headOp,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 38,
+            fontWeight: ds.text.bold,
+            color: T.heading,
+            letterSpacing: ds.text.tighter,
+            lineHeight: 1.05,
+          }}
+        >
+          And it just{" "}
+          <span style={{ color: ds.color.claude }}>did it</span>
+        </div>
+      </div>
+
+      {/* Checklist below clip */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "18%",
+          left: "50%",
+          transform: "translate(-50%, 0)",
+          display: "flex",
+          flexDirection: "column",
+          gap: 8,
+          width: "88%",
+          maxWidth: 820,
+        }}
+      >
+        {PIPELINE_STEPS.map((step, i) => {
+          const delay = Math.round((0.4 + i * 0.55) * fps);
+          const s = spring({
+            frame: f,
+            fps,
+            delay,
+            config: { damping: 14, stiffness: 110 },
+          });
+          const x = interpolate(s, [0, 1], [-50, 0]);
+          const itemOp = interpolate(s, [0, 0.3], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          });
+          const checkDelay = delay + Math.round(0.25 * fps);
+          const cs = spring({
+            frame: f,
+            fps,
+            delay: checkDelay,
+            config: { damping: 8, stiffness: 130 },
+          });
+
+          return (
+            <div
+              key={step}
+              style={{
+                ...ds.card3d.cardStyle,
+                padding: "12px 18px",
+                display: "flex",
+                alignItems: "center",
+                gap: 14,
+                opacity: itemOp,
+                transform: `translateX(${x}px)`,
+                minHeight: 50,
+              }}
+            >
+              <div
+                style={{
+                  width: 30,
+                  height: 30,
+                  borderRadius: 9,
+                  background: "rgba(30,122,69,0.22)",
+                  border: "1px solid rgba(30,122,69,0.45)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  transform: `scale(${interpolate(cs, [0, 1], [0, 1])})`,
+                  flexShrink: 0,
+                }}
+              >
+                <Icon.Check color="#5be8a0" size={16} />
+              </div>
+              <span
+                style={{
+                  fontFamily: FONT,
+                  fontSize: 22,
+                  fontWeight: ds.text.semibold,
+                  color: G.text,
+                  letterSpacing: -0.2,
+                }}
+              >
+                {step}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 6: NO STITCHING — "no asset packs, no boilerplate, no stitching"
+// ═══════════════════════════════════════════════════════════════
+
+const NEGATIVES = ["asset packs", "boilerplate", "stitching things together"];
+
+const NoStitchingScene: 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 headOp = interpolate(f, [0.2 * fps, 0.7 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill style={{ opacity: op, pointerEvents: "none" }}>
+      {/* Title */}
+      <div
+        style={{
+          position: "absolute",
+          top: "11%",
+          width: "100%",
+          textAlign: "center",
+          opacity: headOp,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 42,
+            fontWeight: ds.text.bold,
+            color: T.heading,
+            letterSpacing: ds.text.tighter,
+          }}
+        >
+          And{" "}
+          <span style={{ color: T.danger }}>none</span>{" "}
+          of the usual mess
+        </div>
+      </div>
+
+      {/* Stack of strikethrough cards */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "21%",
+          left: "50%",
+          transform: "translate(-50%, 0)",
+          display: "flex",
+          flexDirection: "column",
+          gap: 10,
+          width: "86%",
+          maxWidth: 760,
+        }}
+      >
+        {NEGATIVES.map((label, i) => {
+          const delay = Math.round((0.4 + i * 0.55) * fps);
+          const s = spring({
+            frame: f,
+            fps,
+            delay,
+            config: { damping: 13, stiffness: 110 },
+          });
+          const x = interpolate(s, [0, 1], [60, 0]);
+          const itemOp = interpolate(s, [0, 0.3], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          });
+
+          // Strike line animates AFTER card lands
+          const strikeDelay = delay + Math.round(0.3 * fps);
+          const strikeWidth = interpolate(
+            f,
+            [strikeDelay, strikeDelay + 0.45 * fps],
+            [0, 100],
+            { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
+          );
+
+          return (
+            <div
+              key={label}
+              style={{
+                ...ds.card3d.cardStyle,
+                padding: "14px 22px",
+                display: "flex",
+                alignItems: "center",
+                gap: 14,
+                opacity: itemOp,
+                transform: `translateX(${x}px)`,
+                background: "linear-gradient(145deg, #2a1a18, #1f1210)",
+                border: "1px solid rgba(192,52,43,0.25)",
+              }}
+            >
+              <div
+                style={{
+                  width: 32,
+                  height: 32,
+                  borderRadius: 9,
+                  background: "rgba(192,52,43,0.25)",
+                  border: "1px solid rgba(192,52,43,0.5)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  flexShrink: 0,
+                }}
+              >
+                <Icon.Cross color="#ff8b80" size={16} />
+              </div>
+              <div
+                style={{
+                  flex: 1,
+                  position: "relative",
+                  fontFamily: FONT,
+                  fontSize: 24,
+                  fontWeight: ds.text.semibold,
+                  color: "rgba(255,200,195,0.85)",
+                  letterSpacing: -0.2,
+                }}
+              >
+                no {label}
+                <div
+                  style={{
+                    position: "absolute",
+                    top: "52%",
+                    left: 0,
+                    width: `${strikeWidth}%`,
+                    height: 2,
+                    background: "rgba(255,140,130,0.7)",
+                    borderRadius: 1,
+                  }}
+                />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 7: ONE SKILL — clip is GONE; full motion-graphics climax
+// "Just one skill doing the whole pipeline"
+// ═══════════════════════════════════════════════════════════════
+
+const OneSkillScene: React.FC<SP> = ({ frame, fps }) => {
+  const op = so(frame, fps, SEGS[6].s, SEGS[6].e, 0.35, 0.4);
+  if (op === 0) return null;
+  const f = lf(frame, fps, SEGS[6].s);
+
+  // Hero icon entrance — gsap "back.out(1.6)" feel
+  const heroSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(0.1 * fps),
+    config: { damping: 9, stiffness: 90 },
+  });
+  const heroScale = interpolate(heroSpring, [0, 1], [0.2, 1]);
+  const heroFloat = Math.sin((f / fps) * 1.6) * 8;
+  const heroRot = interpolate(f, [0, SEGS[6].e * fps], [-30, 30]);
+
+  // Orbiting rings rotate
+  const ringRot = (f / fps) * 50;
+
+  // Headline pop
+  const titleSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(0.6 * fps),
+    config: ds.spring.gentle,
+  });
+
+  // 4 chips orbiting around the icon (assets, code, scene, ship)
+  const chipsSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(1.4 * fps),
+    config: { damping: 14, stiffness: 100 },
+  });
+
+  // Tagline strap
+  const strapOp = interpolate(f, [2.4 * fps, 3.0 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const strapPulse = 1 + Math.sin((f / fps) * 2.8) * 0.025;
+
+  return (
+    <AbsoluteFill style={{ opacity: op, pointerEvents: "none" }}>
+      {/* Orbital rings around hero */}
+      <div
+        style={{
+          position: "absolute",
+          top: "32%",
+          left: "50%",
+          transform: "translate(-50%, 0)",
+          opacity: interpolate(heroSpring, [0, 1], [0, 0.7]),
+        }}
+      >
+        <div style={{ position: "absolute", top: -150, left: -210 }}>
+          <OrbitRing size={420} rotation={ringRot} tilt={70} />
+        </div>
+        <div style={{ position: "absolute", top: -110, left: -170 }}>
+          <OrbitRing
+            size={340}
+            rotation={-ringRot * 0.7}
+            tilt={65}
+            color="rgba(30,60,40,0.4)"
+          />
+        </div>
+      </div>
+
+      {/* Hero skill icon */}
+      <div
+        style={{
+          position: "absolute",
+          top: "26%",
+          left: "50%",
+          transform: `translate(-50%, ${heroFloat}px) scale(${heroScale})`,
+          opacity: interpolate(heroSpring, [0, 0.2], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <SkillIcon size={220} rotation={heroRot} glow={0.55} />
+      </div>
+
+      {/* Headline */}
+      <div
+        style={{
+          position: "absolute",
+          top: "52%",
+          width: "100%",
+          textAlign: "center",
+          padding: "0 56px",
+          transform: `scale(${interpolate(titleSpring, [0, 1], [0.85, 1])})`,
+          opacity: interpolate(titleSpring, [0, 0.2], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 60,
+            fontWeight: ds.text.bold,
+            color: T.heading,
+            lineHeight: 1.04,
+            letterSpacing: ds.text.tighter,
+          }}
+        >
+          One <span style={{ color: ds.color.claude }}>skill</span>.
+          <br />
+          Whole <span style={{ color: ds.color.claude }}>pipeline</span>.
+        </div>
+      </div>
+
+      {/* Pipeline chips floating in a row */}
+      <div
+        style={{
+          position: "absolute",
+          top: "67%",
+          left: "50%",
+          transform: `translate(-50%, ${interpolate(chipsSpring, [0, 1], [30, 0])}px)`,
+          opacity: interpolate(chipsSpring, [0, 0.3], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          display: "flex",
+          gap: 8,
+          flexWrap: "wrap",
+          justifyContent: "center",
+          maxWidth: 920,
+        }}
+      >
+        {PIPELINE.map((p, i) => {
+          const delay = Math.round((1.4 + i * 0.18) * fps);
+          const s = spring({
+            frame: f,
+            fps,
+            delay,
+            config: { damping: 13, stiffness: 110 },
+          });
+          const IconComp = Icon[p.icon];
+          return (
+            <div
+              key={p.label}
+              style={{
+                background: "rgba(0,0,0,0.85)",
+                border: "1px solid rgba(212,102,58,0.35)",
+                borderRadius: ds.radius.pill,
+                padding: "10px 18px",
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                opacity: interpolate(s, [0, 0.3], [0, 1], {
+                  extrapolateLeft: "clamp",
+                  extrapolateRight: "clamp",
+                }),
+                transform: `scale(${interpolate(s, [0, 1], [0.4, 1])})`,
+              }}
+            >
+              <IconComp color={ds.color.claude} size={16} />
+              <span
+                style={{
+                  fontFamily: MONO,
+                  fontSize: 13,
+                  fontWeight: ds.text.semibold,
+                  color: "#fff",
+                  letterSpacing: 0.6,
+                  textTransform: "uppercase",
+                }}
+              >
+                {p.label}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Bottom tagline */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "25%",
+          width: "100%",
+          textAlign: "center",
+          opacity: strapOp,
+          transform: `scale(${strapPulse})`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 28,
+            fontWeight: ds.text.semibold,
+            color: T.heading,
+            fontStyle: "italic",
+          }}
+        >
+          asset → code → scene →{" "}
+          <span style={{ color: T.success, fontStyle: "normal", fontWeight: ds.text.bold }}>
+            shipped
+          </span>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 8: CTA — "Comment AI down below..."
+// ═══════════════════════════════════════════════════════════════
+
+const CTAScene: React.FC<SP> = ({ frame, fps }) => {
+  const op = so(frame, fps, SEGS[7].s, SEGS[7].e, 0.4, 0.5);
+  if (op === 0) return null;
+  const f = lf(frame, fps, SEGS[7].s);
+
+  const mainSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(0.15 * fps),
+    config: { damping: 10, stiffness: 90 },
+  });
+
+  const bubbleSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(0.9 * fps),
+    config: { damping: 11, stiffness: 100 },
+  });
+
+  const arrowY = Math.sin((f / fps) * 3.5) * 10;
+  const dropFloat = Math.sin((f / fps) * 2) * 6;
+  const dropRot = interpolate(f, [0, 5 * fps], [0, 30]);
+
+  return (
+    <AbsoluteFill style={{ opacity: op, pointerEvents: "none" }}>
+      {/* Drop watermark */}
+      <div
+        style={{
+          position: "absolute",
+          top: "13%",
+          left: "50%",
+          transform: `translate(-50%, ${dropFloat}px) scale(${interpolate(mainSpring, [0, 1], [0.5, 1])})`,
+          opacity: interpolate(mainSpring, [0, 0.3], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <SkillIcon size={100} rotation={dropRot} glow={0.45} />
+      </div>
+
+      {/* Main instruction */}
+      <div
+        style={{
+          position: "absolute",
+          top: "29%",
+          width: "100%",
+          textAlign: "center",
+          padding: "0 44px",
+          transform: `scale(${interpolate(mainSpring, [0, 1], [0.88, 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.06,
+          }}
+        >
+          Comment{" "}
+          <span
+            style={{
+              color: ds.color.claude,
+              textShadow: "0 0 30px rgba(212,102,58,0.3)",
+            }}
+          >
+            "AI"
+          </span>
+          <br />
+          for the full setup
+        </div>
+      </div>
+
+      {/* Comment bubble */}
+      <div
+        style={{
+          position: "absolute",
+          top: "52%",
+          left: "50%",
+          transform: `translate(-50%, 0) scale(${interpolate(bubbleSpring, [0, 1], [0.6, 1])})`,
+          opacity: interpolate(bubbleSpring, [0, 0.3], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          width: "82%",
+          maxWidth: 760,
+          perspective: 1000,
+        }}
+      >
+        <div
+          style={{
+            ...ds.card3d.cardStyle,
+            padding: "20px 24px",
+            transform: "rotateX(4deg) rotateY(-2deg)",
+            transformStyle: "preserve-3d",
+            display: "flex",
+            alignItems: "center",
+            gap: 16,
+          }}
+        >
+          <div
+            style={{
+              width: 52,
+              height: 52,
+              borderRadius: "50%",
+              background: "linear-gradient(135deg, #D4663A, #8B3A1E)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0,
+            }}
+          >
+            <Icon.Chat color="#fff" size={24} />
+          </div>
+          <div style={{ flex: 1 }}>
+            <div
+              style={{
+                fontFamily: FONT,
+                fontSize: 13,
+                color: G.textMuted,
+                letterSpacing: 0.5,
+              }}
+            >
+              you · just now
+            </div>
+            <div
+              style={{
+                fontFamily: FONT,
+                fontSize: 30,
+                fontWeight: ds.text.bold,
+                color: G.text,
+                marginTop: 2,
+                letterSpacing: -0.3,
+              }}
+            >
+              AI
+              {f > 2 * fps && (
+                <span
+                  style={{
+                    opacity: Math.sin(f * 0.3) > 0 ? 1 : 0,
+                    color: ds.color.claude,
+                    marginLeft: 2,
+                  }}
+                >
+                  |
+                </span>
+              )}
+            </div>
+          </div>
+          <div
+            style={{
+              width: 44,
+              height: 44,
+              borderRadius: 12,
+              background: "rgba(212,102,58,0.22)",
+              border: "1px solid rgba(212,102,58,0.45)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0,
+            }}
+          >
+            <svg width={20} height={20} viewBox="0 0 24 24" fill="none">
+              <path d="M3 12l18-8-5 18-4-8-9-2z" stroke={ds.color.claude} strokeWidth="1.8" strokeLinejoin="round" />
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom hint + arrow */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "26%",
+          width: "100%",
+          textAlign: "center",
+          opacity: interpolate(f, [1.8 * fps, 2.4 * fps], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <div style={{ display: "inline-flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 18,
+              fontWeight: ds.text.medium,
+              color: T.muted,
+              letterSpacing: 1.5,
+              textTransform: "uppercase",
+            }}
+          >
+            running tonight · guaranteed
+          </div>
+          <div style={{ transform: `translateY(${arrowY}px)`, color: ds.color.claude }}>
+            <Icon.ArrowDown color={ds.color.claude} size={32} />
+          </div>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// MAIN COMPOSITION
+// ═══════════════════════════════════════════════════════════════
+
+export const Devini3DReel: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: "#e8e4de", fontFamily: FONT }}>
+      {/* REFERENCE-STRIP: voiceover tag removed — bring your own voiceover */}
+      <Background frame={frame} />
+      <ClipShowcase frame={frame} fps={fps} />
+      <HookScene frame={frame} fps={fps} />
+      <WildPartScene frame={frame} fps={fps} />
+      <BreadthScene frame={frame} fps={fps} />
+      <PromptScene frame={frame} fps={fps} />
+      <PipelineScene frame={frame} fps={fps} />
+      <NoStitchingScene frame={frame} fps={fps} />
+      <OneSkillScene frame={frame} fps={fps} />
+      <CTAScene frame={frame} fps={fps} />
+    </AbsoluteFill>
+  );
+};