@devinilabs/reelstack 1.3.2 → 1.4.0

package/reference/dark/skills.tsx

@@ -0,0 +1,1460 @@
+/**
+ * REFERENCE — SkillsReel  (Family: dark)
+ *
+ * Canonical example of the dark family's motion vocabulary, frame-locked
+ * BEAT structure, and scene choreography. Bundled with ReelStack v1.4+
+ * for STUDY and as the source for the scaffold-from-reference flow.
+ *
+ * Asset imports stripped (look for REFERENCE-STRIP markers). Bring your own
+ * voiceover, brand SVGs, captures.
+ *
+ * License: study + adapt patterns OK. Verbatim re-publication as your own
+ * template NOT OK. See ReelStack LICENSE.
+ *
+ * Source: my-video/src/SkillsReel.tsx
+ * Bundled at: 2026-05-12T19:40:04.834Z
+ */
+import {
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+  Easing,
+  AbsoluteFill,
+} from "remotion";
+import { ds } from "./designSystem";
+
+// ═══════════════════════════════════════════════════════════════
+// CONSTANTS  — all values sourced from designSystem.ts
+// ═══════════════════════════════════════════════════════════════
+
+const FONT = ds.font.sans;
+
+// Scene time ranges [startSec, endSec]
+const SCENES = {
+  hook: [0, 5.5] as const,
+  powers: [5, 11] as const,
+  reveal: [10.5, 17.5] as const,
+  cats: [17, 23] as const,
+  compat: [22.5, 28.5] as const,
+  setup: [28, 34.5] as const,
+  cta: [34, 42] as const,
+};
+
+const CATEGORIES = [
+  { icon: "🎨", label: "UI Design" },
+  { icon: "🧪", label: "App Testing" },
+  { icon: "📈", label: "SEO" },
+  { icon: "✍️", label: "Writing" },
+  { icon: "🐛", label: "Debugging" },
+  { icon: "🚀", label: "Deploy" },
+];
+
+const PLATFORMS = [
+  { name: "Claude Code", icon: "⌨️" },
+  { name: "Codex", icon: "📦" },
+  { name: "Desktop App", icon: "🖥️" },
+  { name: "Any Editor", icon: "✏️" },
+];
+
+// ═══════════════════════════════════════════════════════════════
+// UTILITIES
+// ═══════════════════════════════════════════════════════════════
+
+const sceneOp = (
+  frame: number,
+  fps: number,
+  range: readonly [number, number],
+  fadeIn = 0.5,
+  fadeOut = 0.5,
+) =>
+  interpolate(
+    frame,
+    [
+      range[0] * fps,
+      (range[0] + fadeIn) * fps,
+      (range[1] - fadeOut) * fps,
+      range[1] * fps,
+    ],
+    [0, 1, 1, 0],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
+  );
+
+const lf = (frame: number, fps: number, startSec: number) =>
+  Math.max(0, frame - startSec * fps);
+
+interface SceneProps {
+  frame: number;
+  fps: number;
+}
+
+// ═══════════════════════════════════════════════════════════════
+// CLAUDE LOGO — accurate 12-ray organic starburst
+// ═══════════════════════════════════════════════════════════════
+
+const CLAUDE_COLOR = ds.color.claude;
+
+// 12 rays: [angle°, lengthRatio, widthRatio] — organic spacing & sizing
+const RAYS: [number, number, number][] = [
+  [0, 0.44, 0.055],
+  [30, 0.35, 0.048],
+  [58, 0.41, 0.052],
+  [88, 0.35, 0.048],
+  [118, 0.43, 0.054],
+  [148, 0.35, 0.048],
+  [178, 0.41, 0.052],
+  [208, 0.35, 0.048],
+  [238, 0.43, 0.053],
+  [266, 0.35, 0.048],
+  [295, 0.40, 0.052],
+  [325, 0.36, 0.048],
+];
+
+/** Just the starburst — for use on dark backgrounds */
+const ClaudeStarburst: React.FC<{
+  size: number;
+  color?: string;
+  rotation?: number;
+}> = ({ size, color = CLAUDE_COLOR, rotation = 0 }) => {
+  const c = size / 2;
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      style={{ transform: `rotate(${rotation}deg)` }}
+    >
+      {RAYS.map(([angle, len, w], i) => (
+        <ellipse
+          key={i}
+          cx={c}
+          cy={c - size * len * 0.46}
+          rx={size * w}
+          ry={size * len * 0.46}
+          fill={color}
+          transform={`rotate(${angle} ${c} ${c})`}
+        />
+      ))}
+      <circle cx={c} cy={c} r={size * 0.05} fill={color} />
+    </svg>
+  );
+};
+
+/** Full app icon — white rounded card + starburst + "Claude" text */
+const ClaudeIcon: React.FC<{
+  size: number;
+  rotation?: number;
+}> = ({ size, rotation = 0 }) => {
+  const starSize = size * 0.52;
+  return (
+    <div
+      style={{
+        width: size,
+        height: size,
+        position: "relative",
+      }}
+    >
+      {/* White rounded-square card */}
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          borderRadius: size * 0.22,
+          background: "linear-gradient(180deg, #FFFFFF 0%, #F4F4F8 100%)",
+          boxShadow: ds.shadow.cardLight,
+        }}
+      />
+      {/* Starburst — upper area */}
+      <div
+        style={{
+          position: "absolute",
+          top: size * 0.1,
+          left: "50%",
+          transform: "translate(-50%, 0)",
+        }}
+      >
+        <ClaudeStarburst size={starSize} rotation={rotation} />
+      </div>
+      {/* "Claude" text */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: size * 0.1,
+          width: "100%",
+          textAlign: "center",
+          fontFamily: "Georgia, 'Times New Roman', serif",
+          fontSize: size * 0.13,
+          fontWeight: 400,
+          color: "#1A1A1A",
+          letterSpacing: 0.5,
+        }}
+      >
+        Claude
+      </div>
+    </div>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// BACKGROUND
+// ═══════════════════════════════════════════════════════════════
+
+const Background: React.FC<{ frame: number }> = ({ frame }) => (
+  <AbsoluteFill>
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        background: ds.gradient.bgDark,
+      }}
+    />
+    {Array.from({ length: 20 }).map((_, i) => {
+      const seed = (i + 1) * 137.508;
+      const bx = (seed * 1.1) % 100;
+      const by = (seed * 2.3) % 100;
+      const spd = 0.12 + (i % 5) * 0.04;
+      const sz = 2 + (i % 3) * 1.5;
+      const op = 0.06 + (i % 4) * 0.03;
+      return (
+        <div
+          key={i}
+          style={{
+            position: "absolute",
+            left: `${bx + Math.sin(frame * 0.006 + seed) * 2.5}%`,
+            top: `${((by + frame * spd * 0.08) % 105) - 2.5}%`,
+            width: sz,
+            height: sz,
+            borderRadius: "50%",
+            background:
+              i % 2 === 0
+                ? `rgba(98,95,255,${op})`
+                : `rgba(212,102,58,${op})`,
+          }}
+        />
+      );
+    })}
+  </AbsoluteFill>
+);
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 1: HOOK
+// ═══════════════════════════════════════════════════════════════
+
+const HookScene: React.FC<SceneProps> = ({ frame, fps }) => {
+  const opacity = sceneOp(frame, fps, SCENES.hook);
+  if (opacity === 0) return null;
+
+  const f = lf(frame, fps, SCENES.hook[0]);
+
+  // Logo entrance
+  const logoScale = spring({
+    frame: f,
+    fps,
+    config: { damping: 12, stiffness: 80 },
+  });
+  const logoRot = interpolate(f, [0, 1.5 * fps], [-20, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.quad),
+  });
+  const logoGlow = interpolate(f, [0, 1 * fps], [0, 0.35], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // "Using Claude Code?"
+  const t1Op = interpolate(f, [0.8 * fps, 1.4 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const t1Y = interpolate(f, [0.8 * fps, 1.4 * fps], [40, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.quad),
+  });
+
+  // "You NEED Skills."
+  const t2Spring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(1.8 * fps),
+    config: { damping: 10, stiffness: 100 },
+  });
+  const t2Op = interpolate(f, [1.8 * fps, 2 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Gentle pulse on "Skills" after it appears
+  const pulseScale =
+    t2Spring > 0.95
+      ? 1 + Math.sin((f / fps) * 3) * 0.02
+      : interpolate(t2Spring, [0, 1], [1.4, 1]);
+
+  return (
+    <AbsoluteFill style={{ opacity }}>
+      {/* Claude App Icon */}
+      <div
+        style={{
+          position: "absolute",
+          top: "26%",
+          left: "50%",
+          transform: `translate(-50%, -50%) scale(${logoScale})`,
+        }}
+      >
+        <div style={{ position: "relative" }}>
+          <ClaudeIcon size={220} rotation={logoRot} />
+          {/* Glow behind icon */}
+          <div
+            style={{
+              position: "absolute",
+              inset: -60,
+              borderRadius: "50%",
+              background: `radial-gradient(circle, rgba(212,102,58,${logoGlow}) 0%, transparent 70%)`,
+              filter: "blur(30px)",
+              zIndex: -1,
+            }}
+          />
+        </div>
+      </div>
+
+      {/* Text */}
+      <div
+        style={{
+          position: "absolute",
+          top: "48%",
+          width: "100%",
+          textAlign: "center",
+          padding: "0 60px",
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 54,
+            fontWeight: 600,
+            color: ds.color.fg,
+            opacity: t1Op,
+            transform: `translateY(${t1Y}px)`,
+            lineHeight: 1.2,
+          }}
+        >
+          Using Claude Code?
+        </div>
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 72,
+            fontWeight: ds.text.bold,
+            color: ds.color.claude,
+            marginTop: 32,
+            opacity: t2Op,
+            transform: `scale(${pulseScale})`,
+            textShadow: "0 0 40px rgba(224,122,95,0.4)",
+          }}
+        >
+          You NEED Skills.
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 2: SUPERPOWERS
+// ═══════════════════════════════════════════════════════════════
+
+const PowersScene: React.FC<SceneProps> = ({ frame, fps }) => {
+  const opacity = sceneOp(frame, fps, SCENES.powers);
+  if (opacity === 0) return null;
+
+  const f = lf(frame, fps, SCENES.powers[0]);
+
+  // "Think of skills as"
+  const t1Op = interpolate(f, [0.5 * fps, 1 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const t1Y = interpolate(f, [0.5 * fps, 1 * fps], [30, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.quad),
+  });
+
+  // "SUPERPOWERS"
+  const bigSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(1 * fps),
+    config: { damping: 10, stiffness: 90 },
+  });
+  const bigScale = interpolate(bigSpring, [0, 1], [0.4, 1]);
+  const bigGlow = interpolate(bigSpring, [0, 1], [0, 0.5]);
+
+  // "for your AI"
+  const t3Op = interpolate(f, [1.8 * fps, 2.3 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const t3Y = interpolate(f, [1.8 * fps, 2.3 * fps], [20, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.quad),
+  });
+
+  // Glass card
+  const cardSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(2.5 * fps),
+    config: { damping: 12, stiffness: 80 },
+  });
+  const cardScale = interpolate(cardSpring, [0, 1], [0.8, 1]);
+  const cardOp = interpolate(f, [2.5 * fps, 3 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill style={{ opacity }}>
+      <div
+        style={{
+          position: "absolute",
+          top: "20%",
+          width: "100%",
+          textAlign: "center",
+          padding: "0 60px",
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 32,
+            fontWeight: 500,
+            color: ds.color.fgMuted,
+            opacity: t1Op,
+            transform: `translateY(${t1Y}px)`,
+            letterSpacing: 3,
+            textTransform: "uppercase",
+          }}
+        >
+          Think of skills as
+        </div>
+
+        <div style={{ position: "relative", display: "inline-block" }}>
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 84,
+              fontWeight: ds.text.bold,
+              color: ds.color.fg,
+              marginTop: 20,
+              transform: `scale(${bigScale})`,
+              opacity: interpolate(bigSpring, [0, 0.2], [0, 1], {
+                extrapolateLeft: "clamp",
+                extrapolateRight: "clamp",
+              }),
+              letterSpacing: -2,
+            }}
+          >
+            Superpowers
+          </div>
+          {/* Glow behind text */}
+          <div
+            style={{
+              position: "absolute",
+              inset: "-40px -60px",
+              borderRadius: "50%",
+              background: `radial-gradient(ellipse, rgba(139,92,246,${bigGlow * 0.6}) 0%, transparent 70%)`,
+              filter: "blur(40px)",
+              zIndex: -1,
+            }}
+          />
+        </div>
+
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 38,
+            fontWeight: 500,
+            color: ds.color.fgMuted,
+            marginTop: 16,
+            opacity: t3Op,
+            transform: `translateY(${t3Y}px)`,
+          }}
+        >
+          for your AI
+        </div>
+      </div>
+
+      {/* Glass card */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "22%",
+          left: "50%",
+          transform: `translate(-50%, 0) scale(${cardScale})`,
+          opacity: cardOp,
+          ...ds.glass.light,
+          borderRadius: ds.radius["2xl"],
+          boxShadow: ds.shadow.card,
+          padding: "40px 56px",
+          textAlign: "center",
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 34,
+            fontWeight: 600,
+            color: ds.color.fg,
+            lineHeight: 1.6,
+          }}
+        >
+          Install once{" "}
+          <span style={{ color: ds.color.fgMuted, fontSize: 28 }}>→</span>
+          <br />
+          <span style={{ color: ds.color.claude }}>Works forever</span>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 3: SKILL.SH REVEAL
+// ═══════════════════════════════════════════════════════════════
+
+const RevealScene: React.FC<SceneProps> = ({ frame, fps }) => {
+  const opacity = sceneOp(frame, fps, SCENES.reveal);
+  if (opacity === 0) return null;
+
+  const f = lf(frame, fps, SCENES.reveal[0]);
+
+  // Light burst
+  const burstOp = interpolate(
+    f,
+    [0.3 * fps, 0.8 * fps, 1.8 * fps],
+    [0, 0.7, 0],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
+  );
+
+  // "skill.sh" reveal
+  const nameSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(0.6 * fps),
+    config: { damping: 12, stiffness: 80 },
+  });
+  const nameScale = interpolate(nameSpring, [0, 1], [0.3, 1]);
+  const nameOp = interpolate(f, [0.6 * fps, 1 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const nameGlow = interpolate(nameSpring, [0, 1], [0, 0.6]);
+
+  // Counter 0 → 1000
+  const count = Math.round(
+    interpolate(f, [1.5 * fps, 3 * fps], [0, 1000], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+      easing: Easing.out(Easing.quad),
+    }),
+  );
+  const countOp = interpolate(f, [1.5 * fps, 2 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // "Free Claude Skills"
+  const subOp = interpolate(f, [2.8 * fps, 3.3 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const subY = interpolate(f, [2.8 * fps, 3.3 * fps], [20, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.quad),
+  });
+
+  // "Completely free" tag
+  const tagSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(3.5 * fps),
+    config: { damping: 12, stiffness: 100 },
+  });
+  const tagScale = interpolate(tagSpring, [0, 1], [0.6, 1]);
+
+  return (
+    <AbsoluteFill style={{ opacity }}>
+      {/* Light burst */}
+      <div
+        style={{
+          position: "absolute",
+          top: "32%",
+          left: "50%",
+          width: 400,
+          height: 400,
+          transform: "translate(-50%, -50%)",
+          borderRadius: "50%",
+          background:
+            "radial-gradient(circle, rgba(139,92,246,0.8) 0%, rgba(99,102,241,0.3) 40%, transparent 70%)",
+          opacity: burstOp,
+          filter: "blur(20px)",
+        }}
+      />
+
+      {/* "skill.sh" text */}
+      <div
+        style={{
+          position: "absolute",
+          top: "28%",
+          width: "100%",
+          textAlign: "center",
+        }}
+      >
+        <div
+          style={{
+            position: "relative",
+            display: "inline-block",
+          }}
+        >
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 96,
+              fontWeight: ds.text.bold,
+              letterSpacing: -2,
+              opacity: nameOp,
+              transform: `scale(${nameScale})`,
+              background: ds.gradient.accentText,
+              WebkitBackgroundClip: "text",
+              WebkitTextFillColor: "transparent",
+              backgroundClip: "text",
+            }}
+          >
+            skill.sh
+          </div>
+          {/* Glow */}
+          <div
+            style={{
+              position: "absolute",
+              inset: "-50px -80px",
+              borderRadius: "50%",
+              background: `radial-gradient(ellipse, rgba(139,92,246,${nameGlow * 0.5}) 0%, transparent 70%)`,
+              filter: "blur(40px)",
+              zIndex: -1,
+            }}
+          />
+        </div>
+      </div>
+
+      {/* Counter */}
+      <div
+        style={{
+          position: "absolute",
+          top: "48%",
+          width: "100%",
+          textAlign: "center",
+          opacity: countOp,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 120,
+            fontWeight: ds.text.bold,
+            color: ds.color.fg,
+            lineHeight: 1,
+          }}
+        >
+          {count.toLocaleString()}+
+        </div>
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 32,
+            fontWeight: 500,
+            color: ds.color.fgMuted,
+            marginTop: 16,
+            opacity: subOp,
+            transform: `translateY(${subY}px)`,
+            letterSpacing: 2,
+          }}
+        >
+          Free Claude Skills
+        </div>
+      </div>
+
+      {/* "Completely free" badge */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "22%",
+          left: "50%",
+          transform: `translate(-50%, 0) scale(${tagScale})`,
+          opacity: interpolate(tagSpring, [0, 0.3], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          background: "rgba(52,211,153,0.15)",
+          border: "1px solid rgba(52,211,153,0.3)",
+          borderRadius: 100,
+          padding: "16px 40px",
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 28,
+            fontWeight: 700,
+            color: ds.color.success,
+            letterSpacing: 1,
+          }}
+        >
+          Completely free
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 4: CATEGORIES
+// ═══════════════════════════════════════════════════════════════
+
+const CategoriesScene: React.FC<SceneProps> = ({ frame, fps }) => {
+  const opacity = sceneOp(frame, fps, SCENES.cats);
+  if (opacity === 0) return null;
+
+  const f = lf(frame, fps, SCENES.cats[0]);
+
+  // Header
+  const headerOp = interpolate(f, [0.3 * fps, 0.8 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const headerY = interpolate(f, [0.3 * fps, 0.8 * fps], [30, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.quad),
+  });
+
+  return (
+    <AbsoluteFill style={{ opacity }}>
+      {/* Header */}
+      <div
+        style={{
+          position: "absolute",
+          top: "10%",
+          width: "100%",
+          textAlign: "center",
+          padding: "0 60px",
+          opacity: headerOp,
+          transform: `translateY(${headerY}px)`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 52,
+            fontWeight: ds.text.bold,
+            color: ds.color.fg,
+            lineHeight: 1.2,
+          }}
+        >
+          Skills for{" "}
+          <span style={{ color: ds.color.accent }}>everything</span>
+        </div>
+      </div>
+
+      {/* Category cards - 2 column grid */}
+      <div
+        style={{
+          position: "absolute",
+          top: "24%",
+          left: "50%",
+          transform: "translate(-50%, 0)",
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          gap: 20,
+          padding: "0 48px",
+          width: "100%",
+          maxWidth: 900,
+        }}
+      >
+        {CATEGORIES.map((cat, i) => {
+          const delay = Math.round((0.8 + i * 0.15) * fps);
+          const cardSpring = spring({
+            frame: f,
+            fps,
+            delay,
+            config: { damping: 12, stiffness: 100 },
+          });
+          const fromX = i % 2 === 0 ? -80 : 80;
+          const x = interpolate(cardSpring, [0, 1], [fromX, 0]);
+          const cardOp = interpolate(f, [delay / fps * fps, delay + 0.3 * fps], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          });
+
+          return (
+            <div
+              key={cat.label}
+              style={{
+                ...ds.glass.light,
+                borderRadius: ds.radius["2xl"],
+                boxShadow: ds.shadow.card,
+                padding: "28px 24px",
+                display: "flex",
+                alignItems: "center",
+                gap: 16,
+                opacity: cardOp,
+                transform: `translateX(${x}px)`,
+              }}
+            >
+              <div style={{ fontSize: 40, lineHeight: 1 }}>{cat.icon}</div>
+              <div
+                style={{
+                  fontFamily: FONT,
+                  fontSize: 26,
+                  fontWeight: 600,
+                  color: ds.color.fg,
+                }}
+              >
+                {cat.label}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* "Whatever you're working on" */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "12%",
+          width: "100%",
+          textAlign: "center",
+          opacity: interpolate(f, [3 * fps, 3.5 * fps], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          transform: `translateY(${interpolate(f, [3 * fps, 3.5 * fps], [20, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" })}px)`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 28,
+            fontWeight: 500,
+            color: ds.color.fgMuted,
+            fontStyle: "italic",
+          }}
+        >
+          Whatever you're working on...
+          <br />
+          <span style={{ color: ds.color.claude, fontStyle: "normal", fontWeight: 600 }}>
+            there's a skill for it
+          </span>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 5: WORKS EVERYWHERE
+// ═══════════════════════════════════════════════════════════════
+
+const CompatScene: React.FC<SceneProps> = ({ frame, fps }) => {
+  const opacity = sceneOp(frame, fps, SCENES.compat);
+  if (opacity === 0) return null;
+
+  const f = lf(frame, fps, SCENES.compat[0]);
+
+  // Header
+  const headerOp = interpolate(f, [0.3 * fps, 0.8 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill style={{ opacity }}>
+      {/* Header */}
+      <div
+        style={{
+          position: "absolute",
+          top: "14%",
+          width: "100%",
+          textAlign: "center",
+          padding: "0 60px",
+          opacity: headerOp,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 52,
+            fontWeight: ds.text.bold,
+            color: ds.color.fg,
+          }}
+        >
+          Works{" "}
+          <span style={{ color: ds.color.accentViolet }}>everywhere</span>
+        </div>
+      </div>
+
+      {/* Platform list */}
+      <div
+        style={{
+          position: "absolute",
+          top: "30%",
+          left: "50%",
+          transform: "translate(-50%, 0)",
+          display: "flex",
+          flexDirection: "column",
+          gap: 24,
+          width: "80%",
+          maxWidth: 700,
+        }}
+      >
+        {PLATFORMS.map((plat, i) => {
+          const delay = Math.round((0.8 + i * 0.25) * fps);
+          const itemSpring = spring({
+            frame: f,
+            fps,
+            delay,
+            config: { damping: 14, stiffness: 100 },
+          });
+          const x = interpolate(itemSpring, [0, 1], [-60, 0]);
+          const itemOp = interpolate(f, [delay / fps * fps, delay + 0.3 * fps], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          });
+
+          // Checkmark appears after item lands
+          const checkDelay = delay + Math.round(0.3 * fps);
+          const checkSpring = spring({
+            frame: f,
+            fps,
+            delay: checkDelay,
+            config: { damping: 8, stiffness: 120 },
+          });
+          const checkScale = interpolate(checkSpring, [0, 1], [0, 1]);
+
+          return (
+            <div
+              key={plat.name}
+              style={{
+                ...ds.glass.light,
+                borderRadius: ds.radius.xl,
+                boxShadow: ds.shadow.card,
+                padding: "24px 32px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                opacity: itemOp,
+                transform: `translateX(${x}px)`,
+              }}
+            >
+              <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
+                <div style={{ fontSize: 36 }}>{plat.icon}</div>
+                <div
+                  style={{
+                    fontFamily: FONT,
+                    fontSize: 30,
+                    fontWeight: 600,
+                    color: ds.color.fg,
+                  }}
+                >
+                  {plat.name}
+                </div>
+              </div>
+              <div
+                style={{
+                  width: 40,
+                  height: 40,
+                  borderRadius: 12,
+                  background: "rgba(52,211,153,0.2)",
+                  border: "1px solid rgba(52,211,153,0.4)",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  transform: `scale(${checkScale})`,
+                }}
+              >
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                  <path
+                    d="M4 10L8 14L16 6"
+                    stroke={ds.color.success}
+                    strokeWidth="2.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* "It just works" */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "12%",
+          width: "100%",
+          textAlign: "center",
+          opacity: interpolate(f, [3.5 * fps, 4 * fps], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 30,
+            fontWeight: 600,
+            color: ds.color.fgMuted,
+          }}
+        >
+          It just works.
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 6: EASY SETUP
+// ═══════════════════════════════════════════════════════════════
+
+const STEPS = [
+  { num: "1", text: "Pick a skill", sub: "Browse 1,000+ options" },
+  { num: "2", text: "Copy the command", sub: "One-line install" },
+  { num: "3", text: "You're done", sub: "AI knows it forever" },
+];
+
+const SetupScene: React.FC<SceneProps> = ({ frame, fps }) => {
+  const opacity = sceneOp(frame, fps, SCENES.setup);
+  if (opacity === 0) return null;
+
+  const f = lf(frame, fps, SCENES.setup[0]);
+
+  // Header
+  const headerOp = interpolate(f, [0.3 * fps, 0.8 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const headerY = interpolate(f, [0.3 * fps, 0.8 * fps], [30, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.quad),
+  });
+
+  // Big checkmark at end
+  const allStepsDone = f > 4 * fps;
+  const bigCheckSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(4 * fps),
+    config: { damping: 8, stiffness: 100 },
+  });
+  const bigCheckScale = interpolate(bigCheckSpring, [0, 1], [0, 1]);
+
+  return (
+    <AbsoluteFill style={{ opacity }}>
+      {/* Header */}
+      <div
+        style={{
+          position: "absolute",
+          top: "10%",
+          width: "100%",
+          textAlign: "center",
+          opacity: headerOp,
+          transform: `translateY(${headerY}px)`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 52,
+            fontWeight: ds.text.bold,
+            color: ds.color.fg,
+          }}
+        >
+          Setup in{" "}
+          <span style={{ color: ds.color.claude }}>3 steps</span>
+        </div>
+      </div>
+
+      {/* Steps */}
+      <div
+        style={{
+          position: "absolute",
+          top: "25%",
+          left: "50%",
+          transform: "translate(-50%, 0)",
+          display: "flex",
+          flexDirection: "column",
+          gap: 28,
+          width: "85%",
+          maxWidth: 750,
+        }}
+      >
+        {STEPS.map((step, i) => {
+          const delay = Math.round((1 + i * 0.6) * fps);
+          const stepSpring = spring({
+            frame: f,
+            fps,
+            delay,
+            config: { damping: 12, stiffness: 90 },
+          });
+          const y = interpolate(stepSpring, [0, 1], [60, 0]);
+          const stepOp = interpolate(f, [delay / fps * fps, delay + 0.3 * fps], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          });
+
+          const isLast = i === STEPS.length - 1;
+          const numBg = isLast
+            ? "rgba(52,211,153,0.2)"
+            : `rgba(139,92,246,0.2)`;
+          const numBorder = isLast
+            ? "rgba(52,211,153,0.4)"
+            : "rgba(139,92,246,0.4)";
+          const numColor = isLast ? ds.color.success : ds.color.accent;
+
+          return (
+            <div
+              key={step.num}
+              style={{
+                ...ds.glass.light,
+                borderRadius: ds.radius["2xl"],
+                boxShadow: ds.shadow.card,
+                padding: "28px 32px",
+                display: "flex",
+                alignItems: "center",
+                gap: 24,
+                opacity: stepOp,
+                transform: `translateY(${y}px)`,
+              }}
+            >
+              {/* Step number */}
+              <div
+                style={{
+                  width: 56,
+                  height: 56,
+                  borderRadius: 16,
+                  background: numBg,
+                  border: `1.5px solid ${numBorder}`,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  fontFamily: FONT,
+                  fontSize: 28,
+                  fontWeight: ds.text.bold,
+                  color: numColor,
+                  flexShrink: 0,
+                }}
+              >
+                {isLast ? "✓" : step.num}
+              </div>
+              <div>
+                <div
+                  style={{
+                    fontFamily: FONT,
+                    fontSize: 28,
+                    fontWeight: 700,
+                    color: ds.color.fg,
+                  }}
+                >
+                  {step.text}
+                </div>
+                <div
+                  style={{
+                    fontFamily: FONT,
+                    fontSize: 20,
+                    fontWeight: 500,
+                    color: ds.color.fgMuted,
+                    marginTop: 4,
+                  }}
+                >
+                  {step.sub}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Big checkmark celebration */}
+      {allStepsDone && (
+        <div
+          style={{
+            position: "absolute",
+            bottom: "12%",
+            left: "50%",
+            transform: `translate(-50%, 0) scale(${bigCheckScale})`,
+            textAlign: "center",
+          }}
+        >
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 36,
+              fontWeight: 700,
+              color: ds.color.success,
+            }}
+          >
+            That's it. You're good.
+          </div>
+        </div>
+      )}
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 7: CTA
+// ═══════════════════════════════════════════════════════════════
+
+const CTAScene: React.FC<SceneProps> = ({ frame, fps }) => {
+  const opacity = sceneOp(frame, fps, SCENES.cta);
+  if (opacity === 0) return null;
+
+  const f = lf(frame, fps, SCENES.cta[0]);
+
+  // "Try it now"
+  const trySpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(0.3 * fps),
+    config: { damping: 12, stiffness: 90 },
+  });
+  const tryScale = interpolate(trySpring, [0, 1], [0.7, 1]);
+  const tryOp = interpolate(f, [0.3 * fps, 0.7 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // "skill.sh" URL
+  const urlSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(1 * fps),
+    config: { damping: 10, stiffness: 80 },
+  });
+  const urlScale = interpolate(urlSpring, [0, 1], [0.5, 1]);
+  const urlGlow = interpolate(urlSpring, [0, 1], [0, 0.5]);
+
+  // "Link in comments"
+  const linkOp = interpolate(f, [2 * fps, 2.5 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const linkY = interpolate(f, [2 * fps, 2.5 * fps], [20, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing: Easing.out(Easing.quad),
+  });
+
+  // Claude logo pulse
+  const logoPulse = 0.9 + Math.sin((f / fps) * 2.5) * 0.1;
+  const logoOp = interpolate(f, [2.5 * fps, 3 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Arrow bounce
+  const arrowY = Math.sin((f / fps) * 3) * 8;
+
+  return (
+    <AbsoluteFill style={{ opacity }}>
+      {/* Ambient glow */}
+      <div
+        style={{
+          position: "absolute",
+          top: "35%",
+          left: "50%",
+          width: 600,
+          height: 600,
+          transform: "translate(-50%, -50%)",
+          borderRadius: "50%",
+          background: `radial-gradient(circle, rgba(139,92,246,${urlGlow * 0.25}) 0%, transparent 60%)`,
+          filter: "blur(50px)",
+        }}
+      />
+
+      {/* "Try it now" */}
+      <div
+        style={{
+          position: "absolute",
+          top: "16%",
+          width: "100%",
+          textAlign: "center",
+          opacity: tryOp,
+          transform: `scale(${tryScale})`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 44,
+            fontWeight: 600,
+            color: ds.color.fgMuted,
+            letterSpacing: 2,
+          }}
+        >
+          Try it now
+        </div>
+      </div>
+
+      {/* "skill.sh" big */}
+      <div
+        style={{
+          position: "absolute",
+          top: "30%",
+          width: "100%",
+          textAlign: "center",
+        }}
+      >
+        <div style={{ position: "relative", display: "inline-block" }}>
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 110,
+              fontWeight: ds.text.bold,
+              letterSpacing: -3,
+              transform: `scale(${urlScale})`,
+              opacity: interpolate(urlSpring, [0, 0.2], [0, 1], {
+                extrapolateLeft: "clamp",
+                extrapolateRight: "clamp",
+              }),
+              background: ds.gradient.accentText,
+              WebkitBackgroundClip: "text",
+              WebkitTextFillColor: "transparent",
+              backgroundClip: "text",
+            }}
+          >
+            skill.sh
+          </div>
+          <div
+            style={{
+              position: "absolute",
+              inset: "-60px -100px",
+              borderRadius: "50%",
+              background: `radial-gradient(ellipse, rgba(139,92,246,${urlGlow * 0.4}) 0%, transparent 70%)`,
+              filter: "blur(50px)",
+              zIndex: -1,
+            }}
+          />
+        </div>
+      </div>
+
+      {/* Separator line */}
+      <div
+        style={{
+          position: "absolute",
+          top: "52%",
+          left: "50%",
+          width: 200,
+          height: 2,
+          background: "linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent)",
+          transform: `translate(-50%, 0) scaleX(${interpolate(urlSpring, [0, 1], [0, 1])})`,
+          transformOrigin: "center",
+          willChange: "transform",
+        }}
+      />
+
+      {/* "Link in comments" + arrow */}
+      <div
+        style={{
+          position: "absolute",
+          top: "58%",
+          width: "100%",
+          textAlign: "center",
+          opacity: linkOp,
+          transform: `translateY(${linkY}px)`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 36,
+            fontWeight: 600,
+            color: ds.color.fg,
+          }}
+        >
+          Link in comments
+        </div>
+        <div
+          style={{
+            fontSize: 48,
+            marginTop: 16,
+            transform: `translateY(${arrowY}px)`,
+          }}
+        >
+          👇
+        </div>
+      </div>
+
+      {/* Claude logo at bottom */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "10%",
+          left: "50%",
+          transform: `translate(-50%, 0) scale(${logoPulse})`,
+          opacity: logoOp,
+        }}
+      >
+        <ClaudeStarburst size={80} />
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 18,
+            fontWeight: 600,
+            color: ds.color.fgMuted,
+            textAlign: "center",
+            marginTop: 12,
+            letterSpacing: 2,
+            textTransform: "uppercase",
+          }}
+        >
+          Powered by Claude
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// MAIN COMPOSITION
+// ═══════════════════════════════════════════════════════════════
+
+export const SkillsReel: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  return (
+    <AbsoluteFill
+      style={{
+        backgroundColor: ds.color.bg,
+        fontFamily: FONT,
+      }}
+    >
+      <Background frame={frame} />
+      <HookScene frame={frame} fps={fps} />
+      <PowersScene frame={frame} fps={fps} />
+      <RevealScene frame={frame} fps={fps} />
+      <CategoriesScene frame={frame} fps={fps} />
+      <CompatScene frame={frame} fps={fps} />
+      <SetupScene frame={frame} fps={fps} />
+      <CTAScene frame={frame} fps={fps} />
+    </AbsoluteFill>
+  );
+};