@devinilabs/reelstack 1.2.0

package/reference/paper/justdrop.tsx

@@ -0,0 +1,1898 @@
+/**
+ * REFERENCE — JustDropReel  (Family: paper)
+ *
+ * Canonical example of the paper family's motion vocabulary, frame-locked
+ * BEAT structure, and scene choreography. Bundled with ReelStack v1.1.1+
+ * for STUDY and pattern adaptation.
+ *
+ * Asset imports stripped (look for REFERENCE-STRIP markers). Bring your own
+ * voiceover, brand SVGs, captures.
+ *
+ * License: study + adapt patterns OK. Verbatim re-publication as your own
+ * template NOT OK. See ReelStack LICENSE.
+ *
+ * Source: my-video/src/JustDropReel.tsx
+ * Bundled at: 2026-05-08T18:50:39.507Z
+ */
+import {
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+  Easing,
+  AbsoluteFill,
+  Img,
+  OffthreadVideo,
+  Sequence,
+  staticFile,
+} from "remotion";
+import { Audio } from "@remotion/media";
+import { ds } from "./designSystem";
+
+// ═══════════════════════════════════════════════════════════════
+// CONSTANTS
+// ═══════════════════════════════════════════════════════════════
+
+const FONT = ds.font.sans;
+const MONO = ds.font.mono;
+const G = ds.card3d.green;
+
+// Light-mode text palette (cream paper background) — matches OpusReel
+const T = {
+  heading: "#1a1a1a",
+  body: "#2d2d2d",
+  muted: "#6b6b6b",
+  accent: ds.color.claude,       // #D4663A terracotta
+  accentDark: "#1e3a27",
+  danger: "#c0392b",
+  success: "#1e7a45",
+} as const;
+
+// Scene timeline: aligned to 58.52s voiceover
+// Timing follows the 7 script segments with natural pacing
+const SEGS = [
+  { s: 0, e: 7.5, text: "Hook" },           // 1: "using Claude Code... missing the point"
+  { s: 7, e: 18.5, text: "Powers" },        // 2: "superpowers for your AI... install once"
+  { s: 18, e: 29.5, text: "Reveal" },       // 3: "JustDrop... 1000+ skills... all free"
+  { s: 29, e: 37.5, text: "Examples" },     // 4: "UI, testing, SEO, writing"
+  { s: 37, e: 46.5, text: "Platforms" },    // 5: "works everywhere"
+  { s: 46, e: 53.5, text: "Setup" },        // 6: "pick, copy, paste, done"
+  { s: 53, e: 58.5, text: "CTA" },          // 7: "drop Claude in comments"
+] as const;
+
+// ═══════════════════════════════════════════════════════════════
+// 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 OpusReel)
+// ═══════════════════════════════════════════════════════════════
+
+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>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// 3D FLOATING CARD — reusable component from OpusReel
+// ═══════════════════════════════════════════════════════════════
+
+const FloatingCard: React.FC<{
+  children: React.ReactNode;
+  width?: number | string;
+  rotateX?: number;
+  rotateY?: number;
+  scale?: number;
+  opacity?: number;
+  style?: React.CSSProperties;
+}> = ({
+  children,
+  width = "85%",
+  rotateX = 2,
+  rotateY = -1,
+  scale = 1,
+  opacity = 1,
+  style,
+}) => (
+  <div
+    style={{
+      width,
+      maxWidth: 900,
+      perspective: 1200,
+      opacity,
+      ...style,
+    }}
+  >
+    <div
+      style={{
+        ...ds.card3d.cardStyle,
+        transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${scale})`,
+        transformStyle: "preserve-3d",
+        padding: "32px 36px",
+        position: "relative",
+        overflow: "hidden",
+      }}
+    >
+      <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 SHAPES — pure CSS primitives (cone, cube, sphere)
+// ═══════════════════════════════════════════════════════════════
+
+/** 3D rotating Claude app icon — uses the official asset from /public */
+const JustDropShape: React.FC<{
+  size: number;
+  rotation?: number;
+  glow?: number;
+}> = ({ size, rotation = 0, glow = 0.4 }) => {
+  return (
+    <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)`,
+        }}
+      >
+        {/* Soft background glow */}
+        <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)",
+          }}
+        />
+        {/* Real Claude icon asset */}
+        <Img
+          src={staticFile("captures/your-asset.png" /* REFERENCE-STRIP */)}
+          style={{
+            width: size,
+            height: size,
+            display: "block",
+            filter: "drop-shadow(0 18px 28px rgba(150,60,30,0.4))",
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+/** 3D isometric cube — used for skills visualization */
+const IsoCube: React.FC<{
+  size: number;
+  color?: string;
+  delay?: number;
+  frame: number;
+  fps: number;
+}> = ({ size, color = G.surface, delay = 0, frame, fps }) => {
+  const s = spring({ frame, fps, delay, config: { damping: 14, stiffness: 90 } });
+  const op = interpolate(s, [0, 0.3], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const sc = interpolate(s, [0, 1], [0.3, 1]);
+  const w = size;
+  const h = size;
+  return (
+    <div
+      style={{
+        width: w,
+        height: h * 1.15,
+        position: "relative",
+        opacity: op,
+        transform: `scale(${sc})`,
+      }}
+    >
+      {/* Top face */}
+      <div
+        style={{
+          position: "absolute",
+          top: 0,
+          left: w * 0.25,
+          width: w * 0.5,
+          height: h * 0.3,
+          background: `linear-gradient(135deg, ${color}, ${G.bgLight})`,
+          transform: "rotateX(60deg) rotateZ(-45deg)",
+          transformOrigin: "center bottom",
+          borderTop: "1px solid rgba(255,255,255,0.15)",
+        }}
+      />
+      {/* Left face */}
+      <div
+        style={{
+          position: "absolute",
+          top: h * 0.28,
+          left: 0,
+          width: w * 0.5,
+          height: h * 0.7,
+          background: `linear-gradient(180deg, ${G.bg}, #0d1812)`,
+          borderRight: "1px solid rgba(255,255,255,0.08)",
+          clipPath: "polygon(0 15%, 100% 0, 100% 85%, 0 100%)",
+        }}
+      />
+      {/* Right face */}
+      <div
+        style={{
+          position: "absolute",
+          top: h * 0.28,
+          right: 0,
+          width: w * 0.5,
+          height: h * 0.7,
+          background: `linear-gradient(180deg, ${G.bgLight}, ${G.bg})`,
+          borderLeft: "1px solid rgba(255,255,255,0.12)",
+          clipPath: "polygon(0 0, 100% 15%, 100% 100%, 0 85%)",
+        }}
+      />
+    </div>
+  );
+};
+
+/** 3D rotating ring — orbital decoration */
+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",
+    }}
+  />
+);
+
+// ═══════════════════════════════════════════════════════════════
+// ICON PRIMITIVES — clean SVG (no emojis per design guidelines)
+// ═══════════════════════════════════════════════════════════════
+
+const Icon = {
+  Brush: ({ color = "#fff", size = 28 }) => (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <path d="M3 21c0-1.5 1-3 3-3 2 0 3 1.5 3 3H3zm18-18L9 15l-1 5 5-1L25 7" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" transform="translate(-2 0)" />
+    </svg>
+  ),
+  Beaker: ({ color = "#fff", size = 28 }) => (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <path d="M9 3h6v5l5 11a2 2 0 0 1-2 3H6a2 2 0 0 1-2-3l5-11V3z" stroke={color} strokeWidth="1.8" strokeLinejoin="round" />
+      <path d="M7 14h10" stroke={color} strokeWidth="1.8" />
+    </svg>
+  ),
+  Chart: ({ color = "#fff", size = 28 }) => (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <path d="M3 3v18h18" stroke={color} strokeWidth="1.8" strokeLinecap="round" />
+      <path d="M7 14l4-4 3 3 5-6" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  ),
+  Pen: ({ color = "#fff", size = 28 }) => (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <path d="M4 20l4-1 11-11-3-3L5 16l-1 4z" stroke={color} strokeWidth="1.8" strokeLinejoin="round" />
+      <path d="M14 5l3 3" stroke={color} strokeWidth="1.8" />
+    </svg>
+  ),
+  Terminal: ({ color = "#fff", size = 28 }) => (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <rect x="2.5" y="4" width="19" height="16" rx="2" stroke={color} strokeWidth="1.8" />
+      <path d="M7 9l3 3-3 3M13 15h4" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  ),
+  Sparkle: ({ color = "#fff", size = 28 }) => (
+    <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>
+  ),
+  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>
+  ),
+  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>
+  ),
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 1: HOOK — "If you're not messing with skills yet..."
+// ═══════════════════════════════════════════════════════════════
+
+const HookScene: React.FC<SP> = ({ frame, fps }) => {
+  const op = so(frame, fps, SEGS[0].s, SEGS[0].e);
+  if (op === 0) return null;
+  const f = lf(frame, fps, SEGS[0].s);
+
+  const badgeSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(0.3 * fps),
+    config: ds.spring.bouncy,
+  });
+
+  const titleSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(0.8 * fps),
+    config: ds.spring.gentle,
+  });
+  const titleScale = interpolate(titleSpring, [0, 1], [0.85, 1]);
+
+  const subOp = interpolate(f, [2.8 * fps, 3.5 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const subY = interpolate(f, [2.8 * fps, 3.5 * fps], [30, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.quad),
+  });
+
+  // Subtle float for the shape
+  const floatY = Math.sin(f / fps * 1.4) * 6;
+  const shapeRot = interpolate(f, [0, 7.5 * fps], [-15, 15]);
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      {/* Top pill badge */}
+      <div
+        style={{
+          position: "absolute",
+          top: "17%",
+          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: 15,
+            fontWeight: ds.text.medium,
+            color: G.text,
+            letterSpacing: 1.2,
+          }}
+        >
+          CLAUDE CODE TIP
+        </span>
+      </div>
+
+      {/* Big droplet shape above title */}
+      <div
+        style={{
+          position: "absolute",
+          top: "26%",
+          left: "50%",
+          transform: `translate(-50%, ${floatY}px)`,
+          opacity: interpolate(badgeSpring, [0.2, 1], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <JustDropShape size={180} rotation={shapeRot} glow={0.3} />
+      </div>
+
+      {/* Title */}
+      <div
+        style={{
+          position: "absolute",
+          top: "48%",
+          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: 68,
+            fontWeight: ds.text.bold,
+            color: T.heading,
+            lineHeight: ds.text.lineTight,
+            letterSpacing: ds.text.tighter,
+          }}
+        >
+          Not using{" "}
+          <span style={{ color: ds.color.claude }}>Skills</span>?
+        </div>
+      </div>
+
+      {/* Subtitle */}
+      <div
+        style={{
+          position: "absolute",
+          top: "68%",
+          width: "100%",
+          textAlign: "center",
+          padding: "0 60px",
+          opacity: subOp,
+          transform: `translateY(${subY}px)`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 30,
+            fontWeight: ds.text.regular,
+            color: T.muted,
+            lineHeight: ds.text.lineNormal,
+          }}
+        >
+          You're kinda missing
+          <br />
+          <span style={{ color: T.heading, fontWeight: ds.text.semibold }}>
+            the whole point.
+          </span>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 2: POWERS — "Skills = superpowers for your AI"
+// ═══════════════════════════════════════════════════════════════
+
+const PowersScene: React.FC<SP> = ({ frame, fps }) => {
+  const op = so(frame, fps, SEGS[1].s, SEGS[1].e);
+  if (op === 0) return null;
+  const f = lf(frame, fps, SEGS[1].s);
+
+  const headOp = interpolate(f, [0.3 * fps, 0.9 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  const bigSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(0.8 * fps),
+    config: { damping: 10, stiffness: 90 },
+  });
+
+  const cardSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(2.2 * fps),
+    config: ds.spring.glass,
+  });
+
+  // Prompt card animation — frame that gets "replaced" by install
+  const typedChars = Math.floor(
+    interpolate(f, [4.2 * fps, 6 * fps], [0, 42], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+    }),
+  );
+  const longPrompt = "Act as senior dev, review my code, check ";
+  const typedText = longPrompt.slice(0, typedChars);
+
+  // "strikethrough" long prompt, replaced by short skill
+  const strikeOp = interpolate(f, [6.3 * fps, 7 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const skillOp = interpolate(f, [7 * fps, 7.7 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Forever pulse
+  const foreverPulse = 1 + Math.sin((f / fps) * 2.4) * 0.025;
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      {/* Label */}
+      <div
+        style={{
+          position: "absolute",
+          top: "16%",
+          width: "100%",
+          textAlign: "center",
+          opacity: headOp,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 22,
+            fontWeight: ds.text.medium,
+            color: T.muted,
+            letterSpacing: ds.text.wider,
+            textTransform: "uppercase",
+          }}
+        >
+          Think of skills as
+        </div>
+      </div>
+
+      {/* Big title */}
+      <div
+        style={{
+          position: "absolute",
+          top: "23%",
+          width: "100%",
+          textAlign: "center",
+          padding: "0 48px",
+          transform: `scale(${interpolate(bigSpring, [0, 1], [0.6, 1])})`,
+          opacity: interpolate(bigSpring, [0, 0.2], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 76,
+            fontWeight: ds.text.bold,
+            color: T.heading,
+            lineHeight: 1.05,
+            letterSpacing: ds.text.tighter,
+          }}
+        >
+          <span style={{ color: ds.color.claude }}>Superpowers</span>
+          <br />
+          for your AI
+        </div>
+      </div>
+
+      {/* Prompt comparison card — "before / after" */}
+      <div
+        style={{
+          position: "absolute",
+          top: "48%",
+          left: "50%",
+          transform: `translate(-50%, ${interpolate(cardSpring, [0, 1], [60, 0])}px)`,
+          opacity: interpolate(cardSpring, [0, 0.3], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          width: "86%",
+        }}
+      >
+        <FloatingCard rotateX={3} rotateY={-1}>
+          {/* Before row — long prompt being typed */}
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 14,
+              padding: "14px 0",
+              opacity: strikeOp > 0 ? 1 - strikeOp * 0.45 : 1,
+            }}
+          >
+            <div
+              style={{
+                fontFamily: MONO,
+                fontSize: 11,
+                fontWeight: ds.text.semibold,
+                color: "#9B6B4F",
+                letterSpacing: 1.2,
+                width: 60,
+              }}
+            >
+              BEFORE
+            </div>
+            <div
+              style={{
+                flex: 1,
+                fontFamily: MONO,
+                fontSize: 18,
+                color: G.text,
+                padding: "10px 14px",
+                background: "rgba(0,0,0,0.25)",
+                borderRadius: ds.radius.md,
+                border: "1px solid rgba(255,255,255,0.05)",
+                minHeight: 26,
+                position: "relative",
+              }}
+            >
+              <span
+                style={{
+                  position: "relative",
+                  display: "inline-block",
+                }}
+              >
+                {typedText}
+                {typedChars < 42 && typedChars > 0 && (
+                  <span style={{ opacity: Math.sin(f * 0.4) > 0 ? 1 : 0 }}>|</span>
+                )}
+                {/* Animated strike line — avoids React textDecoration conflict warning */}
+                {strikeOp > 0 && (
+                  <span
+                    style={{
+                      position: "absolute",
+                      top: "50%",
+                      left: 0,
+                      width: `${Math.min(strikeOp * 100, 100)}%`,
+                      height: 2,
+                      background: "rgba(255,100,100,0.75)",
+                      transform: "translateY(-50%)",
+                      borderRadius: 1,
+                    }}
+                  />
+                )}
+              </span>
+            </div>
+          </div>
+
+          {/* Divider */}
+          <div
+            style={{
+              height: 1,
+              background: "rgba(255,255,255,0.06)",
+              margin: "4px 0",
+            }}
+          />
+
+          {/* After row — install once */}
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 14,
+              padding: "14px 0",
+              opacity: skillOp,
+              transform: `translateX(${interpolate(skillOp, [0, 1], [-20, 0])}px)`,
+            }}
+          >
+            <div
+              style={{
+                fontFamily: MONO,
+                fontSize: 11,
+                fontWeight: ds.text.semibold,
+                color: ds.color.claude,
+                letterSpacing: 1.2,
+                width: 60,
+              }}
+            >
+              AFTER
+            </div>
+            <div
+              style={{
+                flex: 1,
+                fontFamily: MONO,
+                fontSize: 18,
+                color: G.text,
+                padding: "10px 14px",
+                background: "rgba(212,102,58,0.12)",
+                borderRadius: ds.radius.md,
+                border: "1px solid rgba(212,102,58,0.25)",
+                display: "flex",
+                alignItems: "center",
+                gap: 10,
+              }}
+            >
+              <span style={{ color: ds.color.claude, fontWeight: ds.text.bold }}>/</span>
+              <span>code-review</span>
+              <span style={{ marginLeft: "auto", fontSize: 13, color: G.textMuted }}>
+                installed ·
+              </span>
+              <Icon.Sparkle color={ds.color.claude} size={16} />
+            </div>
+          </div>
+        </FloatingCard>
+      </div>
+
+      {/* "Forever" tagline */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "24%",
+          width: "100%",
+          textAlign: "center",
+          opacity: interpolate(f, [8.5 * fps, 9.3 * fps], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          transform: `scale(${foreverPulse})`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 34,
+            fontWeight: ds.text.semibold,
+            color: T.heading,
+          }}
+        >
+          Install once.{" "}
+          <span style={{ color: ds.color.claude, fontWeight: ds.text.bold }}>
+            Works forever.
+          </span>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 3: REVEAL — "1000+ skills · free" with screen recording
+// ═══════════════════════════════════════════════════════════════
+
+const RevealScene: 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);
+
+  // Logo entrance
+  const logoSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(0.3 * fps),
+    config: { damping: 10, stiffness: 85 },
+  });
+  const logoRot = interpolate(f, [0, 11.5 * fps], [-25, 25]);
+  const logoFloat = Math.sin(f / fps * 1.8) * 8;
+
+  // Screen recording entrance
+  const videoSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(1 * fps),
+    config: { damping: 14, stiffness: 95 },
+  });
+
+  // Counter 0 → 1000
+  const count = Math.round(
+    interpolate(f, [3.5 * fps, 6.5 * fps], [0, 1000], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.cubic),
+    }),
+  );
+  const countOp = interpolate(f, [3.5 * fps, 4 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const countScale = interpolate(f, [6.3 * fps, 6.7 * fps, 7 * fps], [1, 1.08, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Free badge pop
+  const freeSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(7.8 * fps),
+    config: { damping: 8, stiffness: 110 },
+  });
+
+  // Orbiting rings
+  const ringRot = (f / fps) * 40;
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      {/* Orbiting rings behind logo */}
+      <div
+        style={{
+          position: "absolute",
+          top: "27%",
+          left: "50%",
+          transform: `translate(-50%, 0)`,
+          opacity: interpolate(logoSpring, [0, 1], [0, 0.6]),
+        }}
+      >
+        <div style={{ position: "absolute", top: -90, left: -180 }}>
+          <OrbitRing size={380} rotation={ringRot} tilt={70} />
+        </div>
+        <div style={{ position: "absolute", top: -60, left: -150 }}>
+          <OrbitRing
+            size={320}
+            rotation={-ringRot * 0.7}
+            tilt={65}
+            color="rgba(30,60,40,0.35)"
+          />
+        </div>
+      </div>
+
+      {/* Center logo — big droplet */}
+      <div
+        style={{
+          position: "absolute",
+          top: "18%",
+          left: "50%",
+          transform: `translate(-50%, ${logoFloat}px) scale(${interpolate(logoSpring, [0, 1], [0.3, 1])})`,
+          opacity: interpolate(logoSpring, [0, 0.2], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <JustDropShape size={200} rotation={logoRot} glow={0.5} />
+      </div>
+
+      {/* Screen recording — skills library demo */}
+      <div
+        style={{
+          position: "absolute",
+          top: "32%",
+          left: "50%",
+          width: "88%",
+          transform: `translate(-50%, 0) scale(${interpolate(videoSpring, [0, 1], [0.92, 1])})`,
+          opacity: interpolate(videoSpring, [0, 0.5], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          borderRadius: 20,
+          overflow: "hidden",
+          boxShadow: ds.shadow.cardLight,
+          border: "1px solid rgba(0,0,0,0.08)",
+          background: "#000",
+          aspectRatio: "1920 / 1024",
+        }}
+      >
+        <Sequence from={Math.round(SEGS[2].s * fps)}>
+          {/* REFERENCE-STRIP: <OffthreadVideo> removed — bring your own clip */}
+        </Sequence>
+      </div>
+
+      {/* Counter */}
+      <div
+        style={{
+          position: "absolute",
+          top: "60%",
+          width: "100%",
+          textAlign: "center",
+          opacity: countOp,
+          transform: `scale(${countScale})`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 150,
+            fontWeight: ds.text.bold,
+            color: ds.color.claude,
+            lineHeight: 1,
+            letterSpacing: "-0.06em",
+            textShadow: "0 0 50px rgba(212,102,58,0.25)",
+          }}
+        >
+          {count.toLocaleString()}+
+        </div>
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 26,
+            fontWeight: ds.text.medium,
+            color: T.body,
+            marginTop: 10,
+            letterSpacing: 1.5,
+          }}
+        >
+          Claude skills, ready to drop in
+        </div>
+      </div>
+
+      {/* "Completely free" badge */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "24%",
+          left: "50%",
+          transform: `translate(-50%, 0) scale(${interpolate(freeSpring, [0, 1], [0.6, 1])})`,
+          opacity: interpolate(freeSpring, [0, 0.3], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          background: "rgba(30,122,69,0.15)",
+          border: "1.5px solid rgba(30,122,69,0.4)",
+          borderRadius: ds.radius.pill,
+          padding: "14px 32px",
+          display: "flex",
+          alignItems: "center",
+          gap: 12,
+        }}
+      >
+        <div
+          style={{
+            width: 10,
+            height: 10,
+            borderRadius: "50%",
+            background: T.success,
+            boxShadow: `0 0 12px ${T.success}`,
+          }}
+        />
+        <span
+          style={{
+            fontFamily: FONT,
+            fontSize: 26,
+            fontWeight: ds.text.bold,
+            color: T.success,
+            letterSpacing: 0.5,
+          }}
+        >
+          Completely free
+        </span>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 4: EXAMPLES — category grid
+// ═══════════════════════════════════════════════════════════════
+
+const CATEGORIES: { label: string; icon: "Brush" | "Beaker" | "Chart" | "Pen" }[] = [
+  { label: "UI Design", icon: "Brush" },
+  { label: "App Testing", icon: "Beaker" },
+  { label: "SEO", icon: "Chart" },
+  { label: "Writing", icon: "Pen" },
+];
+
+const ExamplesScene: 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.3 * fps, 0.9 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      {/* Title */}
+      <div
+        style={{
+          position: "absolute",
+          top: "16%",
+          width: "100%",
+          textAlign: "center",
+          padding: "0 48px",
+          opacity: headOp,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 54,
+            fontWeight: ds.text.bold,
+            color: T.heading,
+            letterSpacing: ds.text.tighter,
+            lineHeight: 1.1,
+          }}
+        >
+          Skills for{" "}
+          <span style={{ color: ds.color.claude }}>everything</span>
+        </div>
+      </div>
+
+      {/* 2x2 grid */}
+      <div
+        style={{
+          position: "absolute",
+          top: "32%",
+          left: "50%",
+          transform: "translate(-50%, 0)",
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          gap: 22,
+          width: "88%",
+          maxWidth: 820,
+        }}
+      >
+        {CATEGORIES.map((cat, i) => {
+          const delay = Math.round((0.8 + i * 0.28) * fps);
+          const s = spring({
+            frame: f,
+            fps,
+            delay,
+            config: { damping: 13, stiffness: 100 },
+          });
+          const fromX = i % 2 === 0 ? -60 : 60;
+          const x = interpolate(s, [0, 1], [fromX, 0]);
+          const y = interpolate(s, [0, 1], [30, 0]);
+          const itemOp = interpolate(s, [0, 0.3], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          });
+          const IconComp = Icon[cat.icon];
+
+          return (
+            <div
+              key={cat.label}
+              style={{
+                ...ds.card3d.cardStyle,
+                padding: "28px 26px",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "flex-start",
+                gap: 18,
+                opacity: itemOp,
+                transform: `translate(${x}px, ${y}px) rotateX(2deg) rotateY(${i % 2 === 0 ? -2 : 2}deg)`,
+                transformStyle: "preserve-3d",
+                minHeight: 180,
+                justifyContent: "space-between",
+              }}
+            >
+              {/* Icon tile */}
+              <div
+                style={{
+                  width: 58,
+                  height: 58,
+                  borderRadius: 16,
+                  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={30} />
+              </div>
+
+              {/* Label + count */}
+              <div>
+                <div
+                  style={{
+                    fontFamily: FONT,
+                    fontSize: 26,
+                    fontWeight: ds.text.semibold,
+                    color: G.text,
+                    letterSpacing: -0.3,
+                  }}
+                >
+                  {cat.label}
+                </div>
+                <div
+                  style={{
+                    fontFamily: MONO,
+                    fontSize: 13,
+                    fontWeight: ds.text.medium,
+                    color: G.textMuted,
+                    marginTop: 4,
+                    letterSpacing: 0.5,
+                  }}
+                >
+                  {["214", "87", "132", "164"][i]} skills
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Footer copy */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "24%",
+          width: "100%",
+          textAlign: "center",
+          padding: "0 48px",
+          opacity: interpolate(f, [4.5 * fps, 5.2 * fps], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 26,
+            fontWeight: ds.text.regular,
+            color: T.muted,
+            fontStyle: "italic",
+            lineHeight: 1.4,
+          }}
+        >
+          Whatever you're building,
+          <br />
+          <span style={{ color: T.heading, fontStyle: "normal", fontWeight: ds.text.semibold }}>
+            there's probably one for it.
+          </span>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 5: PLATFORMS — "works everywhere"
+// ═══════════════════════════════════════════════════════════════
+
+const PLATFORMS: { name: string; hint: string }[] = [
+  { name: "Anti-Gravity", hint: "Google's AI editor" },
+  { name: "Codex", hint: "OpenAI CLI" },
+  { name: "Claude Desktop", hint: "Native app" },
+  { name: "Any code editor", hint: "VS Code, Cursor, etc." },
+];
+
+const PlatformsScene: 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.3 * fps, 0.9 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      {/* Title */}
+      <div
+        style={{
+          position: "absolute",
+          top: "16%",
+          width: "100%",
+          textAlign: "center",
+          padding: "0 48px",
+          opacity: headOp,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 22,
+            fontWeight: ds.text.medium,
+            color: T.muted,
+            letterSpacing: ds.text.wider,
+            textTransform: "uppercase",
+          }}
+        >
+          One library
+        </div>
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 56,
+            fontWeight: ds.text.bold,
+            color: T.heading,
+            letterSpacing: ds.text.tighter,
+            marginTop: 8,
+          }}
+        >
+          Works{" "}
+          <span style={{ color: ds.color.claude }}>everywhere</span>
+        </div>
+      </div>
+
+      {/* Platform list — floating 3D rows */}
+      <div
+        style={{
+          position: "absolute",
+          top: "32%",
+          left: "50%",
+          transform: "translate(-50%, 0)",
+          display: "flex",
+          flexDirection: "column",
+          gap: 16,
+          width: "88%",
+          maxWidth: 800,
+        }}
+      >
+        {PLATFORMS.map((plat, i) => {
+          const delay = Math.round((0.8 + i * 0.3) * fps);
+          const s = spring({
+            frame: f,
+            fps,
+            delay,
+            config: { damping: 14, stiffness: 100 },
+          });
+          const x = interpolate(s, [0, 1], [-80, 0]);
+          const itemOp = interpolate(s, [0, 0.3], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          });
+          // Check pops in after row lands
+          const checkDelay = delay + Math.round(0.35 * fps);
+          const cs = spring({
+            frame: f,
+            fps,
+            delay: checkDelay,
+            config: { damping: 8, stiffness: 120 },
+          });
+
+          return (
+            <div
+              key={plat.name}
+              style={{
+                ...ds.card3d.cardStyle,
+                padding: "20px 26px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                opacity: itemOp,
+                transform: `translateX(${x}px) rotateY(-1deg)`,
+                transformStyle: "preserve-3d",
+              }}
+            >
+              <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
+                {/* Tile with platform initial */}
+                <div
+                  style={{
+                    width: 52,
+                    height: 52,
+                    borderRadius: 14,
+                    background: "linear-gradient(145deg, rgba(255,255,255,0.08), rgba(0,0,0,0.3))",
+                    border: "1px solid rgba(255,255,255,0.08)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontFamily: MONO,
+                    fontSize: 22,
+                    fontWeight: ds.text.bold,
+                    color: ds.color.claude,
+                  }}
+                >
+                  {plat.name[0]}
+                </div>
+                <div>
+                  <div
+                    style={{
+                      fontFamily: FONT,
+                      fontSize: 26,
+                      fontWeight: ds.text.semibold,
+                      color: G.text,
+                    }}
+                  >
+                    {plat.name}
+                  </div>
+                  <div
+                    style={{
+                      fontFamily: MONO,
+                      fontSize: 13,
+                      fontWeight: ds.text.regular,
+                      color: G.textMuted,
+                      marginTop: 2,
+                      letterSpacing: 0.3,
+                    }}
+                  >
+                    {plat.hint}
+                  </div>
+                </div>
+              </div>
+
+              {/* Checkmark pill */}
+              <div
+                style={{
+                  width: 40,
+                  height: 40,
+                  borderRadius: 12,
+                  background: "rgba(30,122,69,0.2)",
+                  border: "1px solid rgba(30,122,69,0.4)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  transform: `scale(${interpolate(cs, [0, 1], [0, 1])})`,
+                }}
+              >
+                <Icon.Check color="#5be8a0" size={20} />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Close line */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "24%",
+          width: "100%",
+          textAlign: "center",
+          opacity: interpolate(f, [5 * fps, 5.7 * fps], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 30,
+            fontWeight: ds.text.semibold,
+            color: T.heading,
+            fontStyle: "italic",
+          }}
+        >
+          It just{" "}
+          <span style={{ color: ds.color.claude, fontStyle: "normal" }}>works.</span>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 6: SETUP — 3D terminal walkthrough
+// ═══════════════════════════════════════════════════════════════
+
+const SetupScene: 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.3 * fps, 0.9 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  const termSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(0.6 * fps),
+    config: ds.spring.glass,
+  });
+
+  // Typing progression for the command — uses the JustDrop brand, no URL reveal
+  const cmdText = "justdrop install code-review";
+  const cmdChars = Math.floor(
+    interpolate(f, [1.5 * fps, 3 * fps], [0, cmdText.length], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+    }),
+  );
+
+  // Success state after typing
+  const successOp = interpolate(f, [3.5 * fps, 4.2 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Final "You're good" celebration
+  const doneSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(5.5 * fps),
+    config: { damping: 8, stiffness: 110 },
+  });
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      {/* Title */}
+      <div
+        style={{
+          position: "absolute",
+          top: "16%",
+          width: "100%",
+          textAlign: "center",
+          opacity: headOp,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 52,
+            fontWeight: ds.text.bold,
+            color: T.heading,
+            letterSpacing: ds.text.tighter,
+            lineHeight: 1.1,
+          }}
+        >
+          Setup is{" "}
+          <span style={{ color: ds.color.claude }}>nothing</span>
+        </div>
+      </div>
+
+      {/* 3D Terminal window */}
+      <div
+        style={{
+          position: "absolute",
+          top: "30%",
+          left: "50%",
+          transform: `translate(-50%, ${interpolate(termSpring, [0, 1], [60, 0])}px)`,
+          opacity: interpolate(termSpring, [0, 0.3], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          width: "90%",
+          maxWidth: 900,
+          perspective: 1000,
+        }}
+      >
+        <div
+          style={{
+            borderRadius: ds.radius.xl,
+            overflow: "hidden",
+            boxShadow: ds.card3d.shadowTable,
+            transform: `rotateX(6deg) rotateY(-2deg) scale(${interpolate(termSpring, [0, 1], [0.9, 1])})`,
+            border: "1px solid rgba(255,255,255,0.08)",
+            background: "#0d1812",
+          }}
+        >
+          {/* Terminal chrome */}
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              padding: "14px 18px",
+              background: "linear-gradient(180deg, #1a2e1f, #142318)",
+              borderBottom: "1px solid rgba(255,255,255,0.04)",
+            }}
+          >
+            <div style={{ width: 12, height: 12, borderRadius: "50%", background: "#ff5f57" }} />
+            <div style={{ width: 12, height: 12, borderRadius: "50%", background: "#febb2e" }} />
+            <div style={{ width: 12, height: 12, borderRadius: "50%", background: "#28c840" }} />
+            <div
+              style={{
+                marginLeft: 12,
+                fontFamily: MONO,
+                fontSize: 12,
+                color: "rgba(255,255,255,0.35)",
+                letterSpacing: 0.5,
+              }}
+            >
+              terminal · ~/project
+            </div>
+          </div>
+
+          {/* Terminal body */}
+          <div
+            style={{
+              padding: "28px 32px",
+              minHeight: 320,
+              fontFamily: MONO,
+              fontSize: 20,
+              lineHeight: 1.7,
+            }}
+          >
+            {/* Prompt + command */}
+            <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
+              <span style={{ color: "#5be8a0", fontWeight: ds.text.bold }}>$</span>
+              <span style={{ color: "#fff" }}>
+                {cmdText.slice(0, cmdChars)}
+                {cmdChars < cmdText.length && (
+                  <span style={{ opacity: Math.sin(f * 0.4) > 0 ? 1 : 0, color: ds.color.claude }}>
+                    ▊
+                  </span>
+                )}
+              </span>
+            </div>
+
+            {/* Success output */}
+            <div style={{ opacity: successOp, marginTop: 14 }}>
+              <div style={{ color: "rgba(255,255,255,0.55)", fontSize: 16 }}>
+                → Fetching from JustDrop...
+              </div>
+              <div
+                style={{
+                  color: "rgba(255,255,255,0.55)",
+                  fontSize: 16,
+                  opacity: interpolate(f, [4 * fps, 4.6 * fps], [0, 1], {
+                    extrapolateLeft: "clamp",
+                    extrapolateRight: "clamp",
+                  }),
+                }}
+              >
+                → Picking agent: <span style={{ color: ds.color.claude }}>Claude Code</span>
+              </div>
+              <div
+                style={{
+                  marginTop: 10,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 10,
+                  opacity: interpolate(f, [4.6 * fps, 5.3 * fps], [0, 1], {
+                    extrapolateLeft: "clamp",
+                    extrapolateRight: "clamp",
+                  }),
+                }}
+              >
+                <span
+                  style={{
+                    display: "inline-flex",
+                    width: 22,
+                    height: 22,
+                    borderRadius: "50%",
+                    background: "rgba(30,122,69,0.25)",
+                    border: "1px solid rgba(91,232,160,0.5)",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  <Icon.Check color="#5be8a0" size={12} />
+                </span>
+                <span style={{ color: "#5be8a0", fontWeight: ds.text.semibold }}>
+                  Installed — code-review ready
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* "You're good" */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "24%",
+          width: "100%",
+          textAlign: "center",
+          transform: `scale(${interpolate(doneSpring, [0, 1], [0.7, 1])})`,
+          opacity: interpolate(doneSpring, [0, 0.3], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 34,
+            fontWeight: ds.text.bold,
+            color: T.success,
+          }}
+        >
+          That's it. You're good.
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 7: CTA — "Drop Claude in comments"
+// ═══════════════════════════════════════════════════════════════
+
+const CTAScene: React.FC<SP> = ({ frame, fps }) => {
+  const op = so(frame, fps, SEGS[6].s, SEGS[6].e, 0.5, 0.6);
+  if (op === 0) return null;
+  const f = lf(frame, fps, SEGS[6].s);
+
+  const mainSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(0.2 * fps),
+    config: { damping: 10, stiffness: 90 },
+  });
+
+  // Comment bubble entry
+  const bubbleSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(1.2 * fps),
+    config: { damping: 11, stiffness: 95 },
+  });
+
+  // Arrow bounce
+  const arrowY = Math.sin((f / fps) * 3.5) * 10;
+
+  // Drop logo floats
+  const floatY = Math.sin(f / fps * 2) * 6;
+  const dropRot = interpolate(f, [0, 5.5 * fps], [0, 30]);
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      {/* Drop shape watermark top */}
+      <div
+        style={{
+          position: "absolute",
+          top: "17%",
+          left: "50%",
+          transform: `translate(-50%, ${floatY}px) scale(${interpolate(mainSpring, [0, 1], [0.5, 1])})`,
+          opacity: interpolate(mainSpring, [0, 0.3], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <JustDropShape size={110} rotation={dropRot} glow={0.45} />
+      </div>
+
+      {/* Main instruction */}
+      <div
+        style={{
+          position: "absolute",
+          top: "34%",
+          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: 54,
+            fontWeight: ds.text.bold,
+            color: T.heading,
+            letterSpacing: ds.text.tighter,
+            lineHeight: 1.1,
+          }}
+        >
+          Drop{" "}
+          <span
+            style={{
+              color: ds.color.claude,
+              textShadow: "0 0 30px rgba(212,102,58,0.3)",
+            }}
+          >
+            "Claude"
+          </span>
+          <br />
+          in the comments
+        </div>
+      </div>
+
+      {/* Comment bubble 3D mockup */}
+      <div
+        style={{
+          position: "absolute",
+          top: "55%",
+          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: "80%",
+          maxWidth: 720,
+          perspective: 1000,
+        }}
+      >
+        <div
+          style={{
+            ...ds.card3d.cardStyle,
+            padding: "22px 26px",
+            transform: "rotateX(4deg) rotateY(-2deg)",
+            transformStyle: "preserve-3d",
+            display: "flex",
+            alignItems: "center",
+            gap: 16,
+          }}
+        >
+          {/* Avatar circle */}
+          <div
+            style={{
+              width: 52,
+              height: 52,
+              borderRadius: "50%",
+              background: "linear-gradient(135deg, #D4663A, #8B3A1E)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontFamily: FONT,
+              fontSize: 22,
+              fontWeight: ds.text.bold,
+              color: "#fff",
+              flexShrink: 0,
+            }}
+          >
+            <Icon.Chat color="#fff" size={24} />
+          </div>
+
+          {/* Comment text */}
+          <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: 28,
+                fontWeight: ds.text.semibold,
+                color: G.text,
+                marginTop: 2,
+                letterSpacing: -0.3,
+              }}
+            >
+              Claude
+              {f > 3 * fps && (
+                <span
+                  style={{
+                    opacity: Math.sin(f * 0.3) > 0 ? 1 : 0,
+                    color: ds.color.claude,
+                    marginLeft: 2,
+                  }}
+                >
+                  |
+                </span>
+              )}
+            </div>
+          </div>
+
+          {/* Send icon */}
+          <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 arrow + hint */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "26%",
+          width: "100%",
+          textAlign: "center",
+          opacity: interpolate(f, [2.5 * fps, 3.2 * fps], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <div
+          style={{
+            display: "inline-flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 8,
+          }}
+        >
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 20,
+              fontWeight: ds.text.medium,
+              color: T.muted,
+              letterSpacing: 2,
+              textTransform: "uppercase",
+            }}
+          >
+            Link sent straight to you
+          </div>
+          <div style={{ transform: `translateY(${arrowY}px)`, color: ds.color.claude }}>
+            <Icon.ArrowDown color={ds.color.claude} size={36} />
+          </div>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// MAIN COMPOSITION
+// ═══════════════════════════════════════════════════════════════
+
+export const JustDropReel: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: "#e8e4de", fontFamily: FONT }}>
+      {/* REFERENCE-STRIP: <Audio> tag removed — bring your own voiceover */}
+      <Background frame={frame} />
+      <HookScene frame={frame} fps={fps} />
+      <PowersScene frame={frame} fps={fps} />
+      <RevealScene frame={frame} fps={fps} />
+      <ExamplesScene frame={frame} fps={fps} />
+      <PlatformsScene frame={frame} fps={fps} />
+      <SetupScene frame={frame} fps={fps} />
+      <CTAScene frame={frame} fps={fps} />
+    </AbsoluteFill>
+  );
+};