@devinilabs/reelstack 1.3.2 → 1.4.0

package/reference/dark/codedrop.tsx

@@ -0,0 +1,908 @@
+/**
+ * REFERENCE — CodeDropReel  (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/CodeDropReel.tsx
+ * Bundled at: 2026-05-12T19:40:04.829Z
+ */
+import {
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+  AbsoluteFill,
+  Img,
+  staticFile,
+} from "remotion";
+import { ds } from "./designSystem";
+
+// ═══════════════════════════════════════════════════════════════
+// TOKENS — matched to ClaudeDispatchReel for family consistency
+// ═══════════════════════════════════════════════════════════════
+
+const FONT = ds.font.sans;
+const MONO = ds.font.mono;
+
+const C = {
+  bg: "#0a0a0b",
+  surface: "#1a1a1d",
+  border: "rgba(255,255,255,0.08)",
+  borderLoud: "rgba(255,255,255,0.14)",
+  fg: "#f5f5f7",
+  fgSoft: "#d1d1d6",
+  fgMuted: "#8e8e93",
+  fgDim: "#5a5a60",
+  claude: "#D4663A",
+  claudeSoft: "#e07a54",
+  claudeDim: "rgba(212,102,58,0.15)",
+  danger: "#e25822",
+  dangerSoft: "#ff6a45",
+  safe: "#4fc46a",
+  safeDim: "rgba(79,196,106,0.12)",
+} as const;
+
+// Blank 0-20s (user overlays website clips), Claude pitch 20-26s, CTA 26-37s.
+const BLANK_END_SEC = 20;
+const BUILD_START_SEC = 20;
+const BUILD_END_SEC = 26;
+const CTA_START_SEC = 26;
+const CTA_END_SEC = 37;
+
+// ═══════════════════════════════════════════════════════════════
+// BACKGROUND — same drifting spotlights + grid as previous reels
+// ═══════════════════════════════════════════════════════════════
+
+const Background: React.FC<{ frame: number }> = ({ frame }) => {
+  const drift = (Math.sin(frame * 0.004) + 1) * 0.5;
+  const drift2 = (Math.cos(frame * 0.003) + 1) * 0.5;
+  const vignettePulse = 0.35 + Math.sin(frame * 0.008) * 0.04;
+
+  return (
+    <AbsoluteFill>
+      <div style={{ width: "100%", height: "100%", background: C.bg }} />
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse 800px 900px at ${20 + drift * 60}% ${15 + drift2 * 40}%, rgba(212,102,58,0.14) 0%, transparent 60%)`,
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse 600px 800px at ${80 - drift * 50}% ${70 + drift2 * 25}%, rgba(79,196,106,0.06) 0%, transparent 55%)`,
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          backgroundImage: `
+            linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px)
+          `,
+          backgroundSize: "72px 72px",
+          maskImage:
+            "radial-gradient(ellipse at 50% 50%, black 30%, transparent 85%)",
+          WebkitMaskImage:
+            "radial-gradient(ellipse at 50% 50%, black 30%, transparent 85%)",
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          opacity: 0.06,
+          mixBlendMode: "overlay",
+          backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.7'/></svg>")`,
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,${vignettePulse}) 100%)`,
+        }}
+      />
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SAFE ZONE — IG reel: reserve top 290px + bottom 430px
+// ═══════════════════════════════════════════════════════════════
+
+const SafeZone: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div
+    style={{
+      position: "absolute",
+      top: 290,
+      left: 0,
+      right: 0,
+      bottom: 430,
+    }}
+  >
+    {children}
+  </div>
+);
+
+// ═══════════════════════════════════════════════════════════════
+// SPRING HELPER (shared by all scenes)
+// ═══════════════════════════════════════════════════════════════
+
+const gs = (
+  frame: number,
+  fps: number,
+  delaySec: number,
+  kind: "bouncy" | "snappy" | "gentle" | "glass" = "snappy",
+) =>
+  spring({
+    frame,
+    fps,
+    delay: Math.round(delaySec * fps),
+    config: ds.spring[kind],
+  });
+
+// ═══════════════════════════════════════════════════════════════
+// BUILD SCENE (20s → 26s) — "Build Within an Hour using Claude Skill"
+// ═══════════════════════════════════════════════════════════════
+
+const BuildScene: React.FC<{ frame: number; fps: number }> = ({ frame, fps }) => {
+  const startF = BUILD_START_SEC * fps;
+  const endF = BUILD_END_SEC * fps;
+  if (frame < startF || frame >= endF) return null;
+  const localF = frame - startF;
+  const totalLocal = endF - startF;
+
+  // Scene fade in/out
+  const sceneOp = interpolate(
+    localF,
+    [0, 0.4 * fps, totalLocal - 0.5 * fps, totalLocal],
+    [0, 1, 1, 0],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
+  );
+
+  // Logo entry — gentle scale + glow pulse
+  const logoSpring = gs(localF, fps, 0, "glass");
+  const logoScale = interpolate(logoSpring, [0, 1], [0.6, 1]);
+  const logoOp = interpolate(logoSpring, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const logoGlow = 0.3 + Math.sin(localF * 0.08) * 0.15;
+
+  // "POWERED BY CLAUDE" badge
+  const badgeSpring = gs(localF, fps, 0.3, "snappy");
+  const badgeOp = interpolate(badgeSpring, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const badgeY = interpolate(badgeSpring, [0, 1], [12, 0]);
+
+  // Headline word reveal: "Build Within An Hour"
+  const headWords = ["Build", "Within", "An", "Hour"];
+
+  // Subhead
+  const subSpring = gs(localF, fps, 1.8, "gentle");
+  const subOp = interpolate(subSpring, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const subY = interpolate(subSpring, [0, 1], [22, 0]);
+
+  // Stat chips entry
+  const chipDelays = [2.4, 2.6, 2.8];
+
+  // Highlight chip pulse on "Hour"
+  const hourPulse = 1 + Math.sin(localF * 0.12) * 0.04;
+
+  return (
+    <AbsoluteFill style={{ opacity: sceneOp }}>
+      <SafeZone>
+        {/* ── CLAUDE LOGO + BADGE ─────────────────── */}
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 22,
+          }}
+        >
+          {/* Logo with halo */}
+          <div
+            style={{
+              position: "relative",
+              opacity: logoOp,
+              transform: `scale(${logoScale})`,
+              width: 160,
+              height: 160,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <div
+              style={{
+                position: "absolute",
+                inset: -30,
+                background: `radial-gradient(circle, rgba(212,102,58,${logoGlow}) 0%, transparent 60%)`,
+                filter: "blur(12px)",
+              }}
+            />
+            <div
+              style={{
+                position: "relative",
+                width: 160,
+                height: 160,
+                borderRadius: 36,
+                background: `linear-gradient(135deg, #1a1a1d, #0f0f12)`,
+                border: `1.5px solid rgba(212,102,58,0.4)`,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                boxShadow: `0 20px 50px -10px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.08)`,
+                overflow: "hidden",
+              }}
+            >
+              <Img
+                src={staticFile("claude-ai-icon.webp")}
+                style={{
+                  width: 130,
+                  height: 130,
+                  objectFit: "contain",
+                  filter: "drop-shadow(0 0 14px rgba(212,102,58,0.55))",
+                }}
+              />
+            </div>
+          </div>
+
+          {/* Claude Code badge */}
+          <div
+            style={{
+              opacity: badgeOp,
+              transform: `translateY(${badgeY}px)`,
+              padding: "12px 26px",
+              borderRadius: 9999,
+              background: "rgba(212,102,58,0.14)",
+              border: "1.5px solid rgba(212,102,58,0.5)",
+              fontFamily: MONO,
+              fontSize: 26,
+              fontWeight: 700,
+              color: C.claudeSoft,
+              letterSpacing: "0.08em",
+              textTransform: "uppercase",
+            }}
+          >
+            Claude Code
+          </div>
+        </div>
+
+        {/* ── HEADLINE — "Build Within An Hour" ───────── */}
+        <div
+          style={{
+            position: "absolute",
+            top: 410,
+            width: "100%",
+            textAlign: "center",
+            padding: "0 50px",
+            display: "flex",
+            flexWrap: "wrap",
+            gap: "0 0.32em",
+            justifyContent: "center",
+            fontFamily: FONT,
+            fontSize: 96,
+            fontWeight: 700,
+            color: C.fg,
+            letterSpacing: "-0.04em",
+            lineHeight: 1.0,
+          }}
+        >
+          {headWords.map((w, i) => {
+            const s = gs(localF, fps, 0.7 + i * 0.1, "bouncy");
+            const y = interpolate(s, [0, 1], [50, 0]);
+            const op = interpolate(s, [0, 0.4], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            });
+            const isHour = w === "Hour";
+            return (
+              <span
+                key={`${w}-${i}`}
+                style={{
+                  display: "inline-block",
+                  transform: `translateY(${y}px)${isHour ? ` scale(${hourPulse})` : ""}`,
+                  opacity: op,
+                  color: isHour ? C.claude : C.fg,
+                  textShadow: isHour
+                    ? `0 0 24px rgba(212,102,58,0.5)`
+                    : "none",
+                }}
+              >
+                {w}
+              </span>
+            );
+          })}
+        </div>
+
+        {/* ── SUBHEAD ─────────────────────────────────── */}
+        <div
+          style={{
+            position: "absolute",
+            top: 590,
+            width: "100%",
+            textAlign: "center",
+            padding: "0 70px",
+            opacity: subOp,
+            transform: `translateY(${subY}px)`,
+            fontFamily: FONT,
+            fontSize: 36,
+            fontWeight: 500,
+            color: C.fgSoft,
+            letterSpacing: "-0.025em",
+            lineHeight: 1.2,
+          }}
+        >
+          using a custom-created{" "}
+          <span
+            style={{
+              color: C.claudeSoft,
+              fontWeight: 700,
+              background: `linear-gradient(135deg, ${C.claude}, ${C.claudeSoft})`,
+              WebkitBackgroundClip: "text",
+              backgroundClip: "text",
+              WebkitTextFillColor: "transparent",
+            }}
+          >
+            Claude Skill
+          </span>
+        </div>
+
+        {/* ── STAT CHIPS ──────────────────────────────── */}
+        <div
+          style={{
+            position: "absolute",
+            top: 740,
+            width: "100%",
+            display: "flex",
+            justifyContent: "center",
+            gap: 14,
+            padding: "0 30px",
+            flexWrap: "wrap",
+          }}
+        >
+          {[
+            { icon: "⏱", label: "1 HOUR", color: C.claudeSoft },
+            { icon: "⚡", label: "ZERO BOILERPLATE", color: C.fg },
+            { icon: "🚀", label: "SHIPPABLE", color: C.safe },
+          ].map((chip, i) => {
+            const s = gs(localF, fps, chipDelays[i], "snappy");
+            const op = interpolate(s, [0, 0.4], [0, 1], {
+              extrapolateLeft: "clamp",
+              extrapolateRight: "clamp",
+            });
+            const y = interpolate(s, [0, 1], [16, 0]);
+            return (
+              <div
+                key={chip.label}
+                style={{
+                  opacity: op,
+                  transform: `translateY(${y}px)`,
+                  padding: "10px 18px",
+                  borderRadius: 12,
+                  background: "rgba(255,255,255,0.04)",
+                  border: `1px solid ${C.border}`,
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  fontFamily: MONO,
+                  fontSize: 18,
+                  fontWeight: 600,
+                  color: chip.color,
+                  letterSpacing: "0.06em",
+                }}
+              >
+                <span style={{ fontSize: 20 }}>{chip.icon}</span>
+                {chip.label}
+              </div>
+            );
+          })}
+        </div>
+      </SafeZone>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// CTA SCENE (26s → 37s) — Like · Follow · Comment "AI"
+// ═══════════════════════════════════════════════════════════════
+
+const CTAScene: React.FC<{ frame: number; fps: number }> = ({ frame, fps }) => {
+  const startF = CTA_START_SEC * fps;
+  const endF = CTA_END_SEC * fps;
+  const localF = Math.max(0, frame - startF);
+
+  const sceneOp = interpolate(
+    frame,
+    [startF, startF + 0.4 * fps, endF - 0.3 * fps, endF],
+    [0, 1, 1, 1],
+    { extrapolateLeft: "clamp", extrapolateRight: "clamp" },
+  );
+  if (frame < startF) return null;
+
+  // Heading word reveal
+  const headingWords = ["Want", "this", "website's", "full", "code?"];
+  const subSpring = gs(localF, fps, 1.1, "gentle");
+  const subOp = interpolate(subSpring, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const subY = interpolate(subSpring, [0, 1], [20, 0]);
+
+  // Action rows — stagger in
+  const rowDelays = [1.6, 1.9, 2.2];
+  const rows = rowDelays.map((d) => {
+    const s = gs(localF, fps, d, "bouncy");
+    return {
+      op: interpolate(s, [0, 0.4], [0, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp",
+      }),
+      x: interpolate(s, [0, 1], [-60, 0]),
+      scale: interpolate(s, [0, 0.6, 1], [0.92, 1.02, 1]),
+    };
+  });
+
+  // "AI" typed into the comment row (3.2 → 3.9s)
+  const typed = Math.floor(
+    interpolate(localF, [3.2 * fps, 3.9 * fps], [0, 2], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+    }),
+  );
+  const aiText = "AI".slice(0, typed);
+  const cursorVis = Math.floor(localF / 10) % 2 === 0;
+
+  // Heart pulse when comment lands (4.0s)
+  const heartPulse = gs(localF, fps, 4.0, "bouncy");
+  const heartScale = interpolate(heartPulse, [0, 0.5, 1], [1, 1.35, 1.08]);
+  const heartFilled = localF > 4.0 * fps;
+
+  // Follow pill activates (4.3s)
+  const followActive = localF > 4.3 * fps;
+
+  // Bottom reward pill (4.8s)
+  const pillSpring = gs(localF, fps, 4.8, "glass");
+  const pillY = interpolate(pillSpring, [0, 1], [80, 0]);
+  const pillOp = interpolate(pillSpring, [0, 0.35], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const pillGlow = 0.5 + Math.sin(localF * 0.12) * 0.2;
+
+  // YouTube tutorial tag (5.3s)
+  const ytSpring = gs(localF, fps, 5.3, "gentle");
+  const ytOp = interpolate(ytSpring, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const ytY = interpolate(ytSpring, [0, 1], [16, 0]);
+
+  return (
+    <AbsoluteFill style={{ opacity: sceneOp }}>
+      <SafeZone>
+        {/* ── HEADING ─────────────────────────────────── */}
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            width: "100%",
+            textAlign: "center",
+            padding: "0 60px",
+          }}
+        >
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 72,
+              fontWeight: 700,
+              color: C.fg,
+              letterSpacing: "-0.035em",
+              lineHeight: 1.05,
+              display: "flex",
+              flexWrap: "wrap",
+              gap: "0 0.32em",
+              justifyContent: "center",
+            }}
+          >
+            {headingWords.map((w, i) => {
+              const s = gs(localF, fps, 0.1 + i * 0.08, "snappy");
+              const y = interpolate(s, [0, 1], [40, 0]);
+              const op = interpolate(s, [0, 0.4], [0, 1], {
+                extrapolateLeft: "clamp",
+                extrapolateRight: "clamp",
+              });
+              const isFinal = w === "code?";
+              return (
+                <span
+                  key={`${w}-${i}`}
+                  style={{
+                    display: "inline-block",
+                    transform: `translateY(${y}px)`,
+                    opacity: op,
+                    color: isFinal ? C.claude : C.fg,
+                  }}
+                >
+                  {w}
+                </span>
+              );
+            })}
+          </div>
+          {(() => {
+            const sweep = (localF * 1.1) % 260 - 30; // -30 → 230 loop
+            const glow = 0.35 + Math.sin(localF * 0.08) * 0.12;
+            const glowRadius = 16 + Math.sin(localF * 0.08) * 6;
+            return (
+              <div
+                style={{
+                  position: "relative",
+                  marginTop: 24,
+                  display: "inline-block",
+                  opacity: subOp,
+                  transform: `translateY(${subY}px)`,
+                }}
+              >
+                {/* Soft radial glow behind the text */}
+                <div
+                  style={{
+                    position: "absolute",
+                    inset: "-40px -80px",
+                    background: `radial-gradient(ellipse at center, rgba(212,102,58,${0.18 + Math.sin(localF * 0.06) * 0.05}) 0%, transparent 65%)`,
+                    pointerEvents: "none",
+                    filter: "blur(8px)",
+                  }}
+                />
+                {/* Text with animated sheen — gradient stays white, sheen band brightens to warm highlight */}
+                <div
+                  style={{
+                    position: "relative",
+                    fontFamily: MONO,
+                    fontSize: 32,
+                    fontWeight: 700,
+                    letterSpacing: "0.03em",
+                    textTransform: "uppercase",
+                    textShadow: `0 0 ${glowRadius}px rgba(212,102,58,${glow}), 0 0 40px rgba(212,102,58,0.15)`,
+                    backgroundImage: `linear-gradient(105deg, #f5f5f7 0%, #f5f5f7 ${sweep - 12}%, #ffe9d6 ${sweep}%, #f5f5f7 ${sweep + 12}%, #f5f5f7 100%)`,
+                    WebkitBackgroundClip: "text",
+                    backgroundClip: "text",
+                    WebkitTextFillColor: "transparent",
+                    color: "transparent",
+                  }}
+                >
+                  + THE ENTIRE SKILL PACK
+                </div>
+              </div>
+            );
+          })()}
+        </div>
+
+        {/* ── ACTION ROWS ─────────────────────────────── */}
+        <div
+          style={{
+            position: "absolute",
+            top: 320,
+            left: 0,
+            right: 0,
+            display: "flex",
+            flexDirection: "column",
+            gap: 18,
+            padding: "0 60px",
+          }}
+        >
+          {/* LIKE row */}
+          <ActionRow
+            anim={rows[0]}
+            active={heartFilled}
+            labelIdle="Like"
+            labelActive="Liked"
+            accent={C.danger}
+            icon={
+              <svg
+                width={58}
+                height={58}
+                viewBox="0 0 24 24"
+                fill={heartFilled ? C.danger : "none"}
+                stroke={heartFilled ? C.danger : C.fg}
+                strokeWidth="2"
+                style={{ transform: `scale(${heartScale})` }}
+              >
+                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+              </svg>
+            }
+          />
+
+          {/* FOLLOW row */}
+          <ActionRow
+            anim={rows[1]}
+            active={followActive}
+            labelIdle="Follow"
+            labelActive="Following"
+            accent={C.claude}
+            icon={
+              <svg
+                width={58}
+                height={58}
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke={followActive ? C.claude : C.fg}
+                strokeWidth="2"
+                strokeLinejoin="round"
+                strokeLinecap="round"
+              >
+                <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+                <circle cx="9" cy="7" r="4" />
+                <line x1="19" y1="8" x2="19" y2="14" />
+                <line x1="22" y1="11" x2="16" y2="11" />
+              </svg>
+            }
+          />
+
+          {/* COMMENT row — types "AI" */}
+          <ActionRow
+            anim={rows[2]}
+            active={typed > 0}
+            labelIdle="Comment"
+            accent={C.safe}
+            icon={
+              <svg
+                width={58}
+                height={58}
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke={typed > 0 ? C.safe : C.fg}
+                strokeWidth="2"
+                strokeLinejoin="round"
+                strokeLinecap="round"
+              >
+                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+              </svg>
+            }
+            trailing={
+              <div
+                style={{
+                  fontFamily: MONO,
+                  fontSize: 38,
+                  fontWeight: 600,
+                  color: typed > 0 ? C.safe : C.fgDim,
+                  letterSpacing: "0.04em",
+                  minWidth: 90,
+                  textAlign: "right",
+                }}
+              >
+                {aiText || "_"}
+                {typed < 2 && cursorVis && (
+                  <span style={{ color: C.fgMuted }}>|</span>
+                )}
+              </div>
+            }
+          />
+        </div>
+
+        {/* ── YOUTUBE TUTORIAL TAG — animated glassy border ───── */}
+        <div
+          style={{
+            position: "absolute",
+            bottom: 150,
+            left: "50%",
+            transform: `translate(-50%, ${ytY}px)`,
+            opacity: ytOp,
+            padding: 3,
+            borderRadius: 9999,
+            background: `conic-gradient(from ${(localF * 3) % 360}deg, rgba(255,255,255,0.06), rgba(255,255,255,0.55), rgba(212,102,58,0.8), rgba(255,255,255,0.5), rgba(79,196,106,0.45), rgba(255,255,255,0.06))`,
+            boxShadow: `0 18px 50px -12px rgba(0,0,0,0.7), 0 0 60px -10px rgba(212,102,58,${0.15 + Math.sin(localF * 0.1) * 0.08})`,
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 22,
+              padding: "26px 46px",
+              background: `linear-gradient(135deg, rgba(20,20,22,0.92), rgba(26,26,29,0.92))`,
+              borderRadius: 9999,
+              backdropFilter: "blur(14px)",
+              position: "relative",
+              overflow: "hidden",
+            }}
+          >
+            {/* subtle inner sheen */}
+            <div
+              style={{
+                position: "absolute",
+                inset: 0,
+                background: `linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.02) 100%)`,
+                pointerEvents: "none",
+              }}
+            />
+            {/* YouTube icon */}
+            <svg
+              width="58"
+              height="58"
+              viewBox="0 0 24 24"
+              fill="#FF0033"
+              style={{ position: "relative", flexShrink: 0 }}
+            >
+              <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.546 15.568V8.432L15.818 12l-6.272 3.568z" />
+            </svg>
+            <span
+              style={{
+                position: "relative",
+                fontFamily: FONT,
+                fontSize: 34,
+                fontWeight: 600,
+                color: C.fgSoft,
+                letterSpacing: "-0.02em",
+                whiteSpace: "nowrap",
+              }}
+            >
+              Check Bio, Full tutorial{" "}
+              <span style={{ fontWeight: 700, color: C.fg }}>@DeviniLabs</span>
+            </span>
+          </div>
+        </div>
+
+        {/* ── REWARD PILL ─────────────────────────────── */}
+        <div
+          style={{
+            position: "absolute",
+            bottom: 6,
+            left: "50%",
+            transform: `translate(-50%, ${pillY}px)`,
+            opacity: pillOp,
+            padding: "20px 36px",
+            background: `linear-gradient(135deg, ${C.claude}, ${C.claudeSoft})`,
+            borderRadius: 9999,
+            display: "flex",
+            alignItems: "center",
+            gap: 14,
+            boxShadow: `0 24px 50px -10px rgba(212,102,58,${0.45 + pillGlow * 0.15}), 0 0 80px rgba(212,102,58,${0.25 + pillGlow * 0.2})`,
+          }}
+        >
+          <svg
+            width="30"
+            height="30"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="#fff"
+            strokeWidth="2.6"
+            strokeLinejoin="round"
+            strokeLinecap="round"
+          >
+            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+          </svg>
+          <span
+            style={{
+              fontFamily: FONT,
+              fontSize: 28,
+              fontWeight: 700,
+              color: "#fff",
+              letterSpacing: "-0.02em",
+            }}
+          >
+            Like, Follow & Comment{" "}
+            <span
+              style={{
+                fontFamily: MONO,
+                background: "rgba(255,255,255,0.2)",
+                padding: "2px 12px",
+                borderRadius: 8,
+                fontSize: 26,
+              }}
+            >
+              AI
+            </span>
+          </span>
+        </div>
+      </SafeZone>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// ACTION ROW — single card for Like / Follow / Comment
+// ═══════════════════════════════════════════════════════════════
+
+const ActionRow: React.FC<{
+  anim: { op: number; x: number; scale: number };
+  active: boolean;
+  labelIdle: string;
+  labelActive?: string;
+  accent: string;
+  icon: React.ReactNode;
+  trailing?: React.ReactNode;
+}> = ({ anim, active, labelIdle, labelActive, accent, icon, trailing }) => {
+  return (
+    <div
+      style={{
+        opacity: anim.op,
+        transform: `translateX(${anim.x}px) scale(${anim.scale})`,
+        background: active
+          ? `linear-gradient(135deg, ${accent}22, ${C.surface})`
+          : C.surface,
+        border: `1.5px solid ${active ? accent : C.border}`,
+        borderRadius: 22,
+        padding: "22px 28px",
+        display: "flex",
+        alignItems: "center",
+        gap: 24,
+        boxShadow: active
+          ? `0 0 40px -8px ${accent}66, inset 0 1px 0 rgba(255,255,255,0.04)`
+          : `inset 0 1px 0 rgba(255,255,255,0.04)`,
+        transition: "none",
+      }}
+    >
+      <div
+        style={{
+          width: 84,
+          height: 84,
+          borderRadius: 20,
+          background: active ? `${accent}14` : "rgba(255,255,255,0.04)",
+          border: `1px solid ${active ? `${accent}55` : C.border}`,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0,
+        }}
+      >
+        {icon}
+      </div>
+      <div
+        style={{
+          fontFamily: FONT,
+          fontSize: 44,
+          fontWeight: 700,
+          color: active ? C.fg : C.fgSoft,
+          letterSpacing: "-0.03em",
+          flex: 1,
+        }}
+      >
+        {active && labelActive ? labelActive : labelIdle}
+      </div>
+      {trailing}
+    </div>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// MAIN
+// ═══════════════════════════════════════════════════════════════
+
+export const CodeDropReel: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: C.bg, fontFamily: FONT }}>
+      <Background frame={frame} />
+      {/*
+        0 → 20s: blank dark canvas. User layers website video clips on top.
+        20 → 26s: "Build Within an Hour" Claude pitch screen.
+        26 → 37s: CTA — Like, Follow, Comment AI.
+      */}
+      <BuildScene frame={frame} fps={fps} />
+      <CTAScene frame={frame} fps={fps} />
+    </AbsoluteFill>
+  );
+};