@devinilabs/reelstack 1.2.0

package/reference/paper/designreel.tsx

@@ -0,0 +1,883 @@
+/**
+ * REFERENCE — DesignReel  (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/DesignReel.tsx
+ * Bundled at: 2026-05-08T18:50:39.512Z
+ */
+import {
+  useCurrentFrame,
+  useVideoConfig,
+  interpolate,
+  spring,
+  Easing,
+  AbsoluteFill,
+  Img,
+  staticFile,
+} from "remotion";
+import { Audio } from "@remotion/media";
+import { ds } from "./designSystem";
+
+// ═══════════════════════════════════════════════════════════════
+// CONSTANTS — matches JustDropReel (cream paper + terracotta)
+// ═══════════════════════════════════════════════════════════════
+
+const FONT = ds.font.sans;
+const MONO = ds.font.mono;
+const G = ds.card3d.green;
+
+const T = {
+  heading: "#1a1a1a",
+  body: "#2d2d2d",
+  muted: "#6b6b6b",
+  accent: ds.color.claude, // #D4663A
+  success: "#1e7a45",
+} as const;
+
+// 10s total = 300 frames @ 30fps
+// Beats compressed for a fast teaser cut
+const SEGS = [
+  { s: 0, e: 4.0 },   // Hook: "Describe it. Get it."
+  { s: 3.7, e: 7.0 }, // Tagline: "Design at the speed of thought"
+  { s: 6.7, e: 10 },  // CTA: "Drop 'Design' in comments"
+] as const;
+
+// ═══════════════════════════════════════════════════════════════
+// UTILITIES
+// ═══════════════════════════════════════════════════════════════
+
+const so = (
+  frame: number,
+  fps: number,
+  startS: number,
+  endS: number,
+  fadeIn = 0.35,
+  fadeOut = 0.35,
+) =>
+  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 (matches JustDropReel)
+// ═══════════════════════════════════════════════════════════════
+
+const Background: React.FC<{ frame: number }> = ({ frame }) => {
+  const paperBase = "#e8e4de";
+  const paperLight = "#edeae4";
+  const gridLine = "rgba(180,175,165,0.25)";
+  const vignetteOp = 0.12 + Math.sin(frame * 0.006) * 0.03;
+
+  return (
+    <AbsoluteFill>
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          background: `radial-gradient(ellipse at 50% 40%, ${paperLight} 0%, ${paperBase} 55%, #d9d4cc 100%)`,
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          backgroundImage: `
+            linear-gradient(${gridLine} 1px, transparent 1px),
+            linear-gradient(90deg, ${gridLine} 1px, transparent 1px)
+          `,
+          backgroundSize: "48px 48px",
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse at 50% 45%, rgba(255,255,255,0.3) 0%, transparent 60%)`,
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(0,0,0,${vignetteOp}) 100%)`,
+        }}
+      />
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// 3D FLOATING CARD (same pattern as JustDrop)
+// ═══════════════════════════════════════════════════════════════
+
+const FloatingCard: React.FC<{
+  children: React.ReactNode;
+  width?: number | string;
+  rotateX?: number;
+  rotateY?: number;
+  scale?: number;
+  style?: React.CSSProperties;
+}> = ({ children, width = "85%", rotateX = 3, rotateY = -1, scale = 1, style }) => (
+  <div
+    style={{
+      width,
+      maxWidth: 900,
+      perspective: 1200,
+      ...style,
+    }}
+  >
+    <div
+      style={{
+        ...ds.card3d.cardStyle,
+        transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${scale})`,
+        transformStyle: "preserve-3d",
+        padding: "26px 30px",
+        position: "relative",
+        overflow: "hidden",
+      }}
+    >
+      <div
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 20,
+          right: 20,
+          height: 1,
+          background:
+            "linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent)",
+        }}
+      />
+      {children}
+    </div>
+  </div>
+);
+
+// ═══════════════════════════════════════════════════════════════
+// ICONS
+// ═══════════════════════════════════════════════════════════════
+
+const Icon = {
+  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>
+  ),
+  ArrowDown: ({ color = "#fff", size = 32 }) => (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <path
+        d="M12 5v14M6 13l6 6 6-6"
+        stroke={color}
+        strokeWidth="2.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  ),
+  Chat: ({ color = "#fff", size = 28 }) => (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <path
+        d="M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-8l-5 4v-4H5a2 2 0 0 1-2-2V6z"
+        stroke={color}
+        strokeWidth="1.8"
+        strokeLinejoin="round"
+      />
+    </svg>
+  ),
+  Bolt: ({ color = "#fff", size = 28 }) => (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <path
+        d="M13 2L4 14h7l-1 8 9-12h-7l1-8z"
+        fill={color}
+        stroke={color}
+        strokeWidth="1.2"
+        strokeLinejoin="round"
+      />
+    </svg>
+  ),
+};
+
+// ═══════════════════════════════════════════════════════════════
+// FLOATING ORBIT RING
+// ═══════════════════════════════════════════════════════════════
+
+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",
+    }}
+  />
+);
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 1: HOOK — "Describe it. Get it."
+// ═══════════════════════════════════════════════════════════════
+
+const HookScene: React.FC<SP> = ({ frame, fps }) => {
+  const op = so(frame, fps, SEGS[0].s, SEGS[0].e, 0.3, 0.4);
+  if (op === 0) return null;
+  const f = lf(frame, fps, SEGS[0].s);
+
+  const badgeSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(0.15 * fps),
+    config: ds.spring.bouncy,
+  });
+
+  const word1Spring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(0.6 * fps),
+    config: { damping: 11, stiffness: 100 },
+  });
+
+  const word2Spring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(2.0 * fps),
+    config: { damping: 11, stiffness: 100 },
+  });
+
+  const sparklePulse = 1 + Math.sin((f / fps) * 4.5) * 0.08;
+  const ringRot = (f / fps) * 70;
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      {/* Orbit rings */}
+      <div
+        style={{
+          position: "absolute",
+          top: "30%",
+          left: "50%",
+          transform: "translate(-50%, 0)",
+          opacity: interpolate(badgeSpring, [0, 1], [0, 0.5]),
+        }}
+      >
+        <div style={{ position: "absolute", top: -120, left: -200 }}>
+          <OrbitRing size={400} rotation={ringRot} tilt={72} />
+        </div>
+        <div style={{ position: "absolute", top: -90, left: -170 }}>
+          <OrbitRing
+            size={340}
+            rotation={-ringRot * 0.6}
+            tilt={68}
+            color="rgba(30,60,40,0.3)"
+          />
+        </div>
+      </div>
+
+      {/* Top pill */}
+      <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,
+          }}
+        >
+          DESIGN, REIMAGINED
+        </span>
+      </div>
+
+      {/* Claude logo with glow + subtle rotation */}
+      <div
+        style={{
+          position: "absolute",
+          top: "25%",
+          left: "50%",
+          transform: `translate(-50%, 0) scale(${sparklePulse * interpolate(badgeSpring, [0, 1], [0.3, 1])})`,
+          opacity: interpolate(badgeSpring, [0.1, 1], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          perspective: 800,
+        }}
+      >
+        <div
+          style={{
+            width: 200,
+            height: 200,
+            borderRadius: "50%",
+            background: `radial-gradient(circle, rgba(212,102,58,0.4) 0%, transparent 65%)`,
+            filter: "blur(24px)",
+            position: "absolute",
+            top: -40,
+            left: -40,
+          }}
+        />
+        <div
+          style={{
+            transformStyle: "preserve-3d",
+            transform: `rotateY(${interpolate(f, [0, 4 * fps], [-20, 20])}deg) rotateX(-6deg)`,
+          }}
+        >
+          <Img
+            src={staticFile("captures/your-asset.png" /* REFERENCE-STRIP */)}
+            style={{
+              width: 120,
+              height: 120,
+              display: "block",
+              filter: "drop-shadow(0 18px 28px rgba(150,60,30,0.42))",
+            }}
+          />
+        </div>
+      </div>
+
+      {/* Two-word reveal */}
+      <div
+        style={{
+          position: "absolute",
+          top: "46%",
+          width: "100%",
+          textAlign: "center",
+          padding: "0 48px",
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 84,
+            fontWeight: ds.text.bold,
+            color: T.heading,
+            lineHeight: 1.05,
+            letterSpacing: ds.text.tighter,
+          }}
+        >
+          <div
+            style={{
+              transform: `translateY(${interpolate(word1Spring, [0, 1], [40, 0])}px) scale(${interpolate(word1Spring, [0, 1], [0.85, 1])})`,
+              opacity: interpolate(word1Spring, [0, 0.3], [0, 1], {
+                extrapolateLeft: "clamp",
+                extrapolateRight: "clamp",
+              }),
+            }}
+          >
+            Describe it.
+          </div>
+          <div
+            style={{
+              marginTop: 8,
+              transform: `translateY(${interpolate(word2Spring, [0, 1], [40, 0])}px) scale(${interpolate(word2Spring, [0, 1], [0.85, 1])})`,
+              opacity: interpolate(word2Spring, [0, 0.3], [0, 1], {
+                extrapolateLeft: "clamp",
+                extrapolateRight: "clamp",
+              }),
+              color: ds.color.claude,
+            }}
+          >
+            Get it.
+          </div>
+        </div>
+      </div>
+
+      {/* Subtitle */}
+      <div
+        style={{
+          position: "absolute",
+          top: "72%",
+          width: "100%",
+          textAlign: "center",
+          padding: "0 60px",
+          opacity: interpolate(f, [2.8 * fps, 3.4 * fps], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 26,
+            fontWeight: ds.text.regular,
+            color: T.muted,
+            lineHeight: 1.35,
+          }}
+        >
+          Just describe what's
+          <br />
+          <span style={{ color: T.heading, fontWeight: ds.text.semibold }}>
+            in your head.
+          </span>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 2: TAGLINE — "Design at the speed of thought"
+// ═══════════════════════════════════════════════════════════════
+
+const TaglineScene: React.FC<SP> = ({ frame, fps }) => {
+  const op = so(frame, fps, SEGS[1].s, SEGS[1].e, 0.3, 0.4);
+  if (op === 0) return null;
+  const f = lf(frame, fps, SEGS[1].s);
+
+  const labelOp = interpolate(f, [0.2 * fps, 0.7 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Word-by-word cascade
+  const words = ["Design", "at the", "speed of"];
+  const accentDelay = 1.4;
+
+  const accentSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(accentDelay * fps),
+    config: { damping: 9, stiffness: 110 },
+  });
+
+  const accentPulse = 1 + Math.sin((f / fps) * 3.2) * 0.03;
+  const boltPulse = 1 + Math.sin((f / fps) * 6) * 0.12;
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      {/* Small label */}
+      <div
+        style={{
+          position: "absolute",
+          top: "18%",
+          width: "100%",
+          textAlign: "center",
+          opacity: labelOp,
+          transform: `translateY(${interpolate(labelOp, [0, 1], [-10, 0])}px)`,
+        }}
+      >
+        <div
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 12,
+            fontFamily: MONO,
+            fontSize: 17,
+            fontWeight: ds.text.semibold,
+            color: T.muted,
+            letterSpacing: ds.text.wider,
+            textTransform: "uppercase",
+          }}
+        >
+          <span
+            style={{
+              display: "inline-flex",
+              transform: `scale(${boltPulse})`,
+              color: ds.color.claude,
+            }}
+          >
+            <Icon.Bolt color={ds.color.claude} size={22} />
+          </span>
+          Welcome to
+        </div>
+      </div>
+
+      {/* Main tagline — stacked big type */}
+      <div
+        style={{
+          position: "absolute",
+          top: "30%",
+          width: "100%",
+          textAlign: "center",
+          padding: "0 40px",
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 90,
+            fontWeight: ds.text.bold,
+            color: T.heading,
+            lineHeight: 1.0,
+            letterSpacing: ds.text.tighter,
+          }}
+        >
+          {words.map((w, i) => {
+            const delay = Math.round((0.4 + i * 0.22) * fps);
+            const s = spring({
+              frame: f,
+              fps,
+              delay,
+              config: { damping: 12, stiffness: 105 },
+            });
+            return (
+              <div
+                key={w}
+                style={{
+                  transform: `translateY(${interpolate(s, [0, 1], [60, 0])}px)`,
+                  opacity: interpolate(s, [0, 0.3], [0, 1], {
+                    extrapolateLeft: "clamp",
+                    extrapolateRight: "clamp",
+                  }),
+                  marginBottom: 4,
+                }}
+              >
+                {w}
+              </div>
+            );
+          })}
+
+          {/* Accent word */}
+          <div
+            style={{
+              marginTop: 12,
+              transform: `translateY(${interpolate(accentSpring, [0, 1], [80, 0])}px) scale(${interpolate(accentSpring, [0, 1], [0.7, 1]) * accentPulse})`,
+              opacity: interpolate(accentSpring, [0, 0.3], [0, 1], {
+                extrapolateLeft: "clamp",
+                extrapolateRight: "clamp",
+              }),
+              color: ds.color.claude,
+              textShadow: `0 0 40px rgba(212,102,58,0.35)`,
+              fontSize: 110,
+              letterSpacing: "-0.055em",
+            }}
+          >
+            thought.
+          </div>
+        </div>
+      </div>
+
+      {/* Tiny footer */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "23%",
+          width: "100%",
+          textAlign: "center",
+          opacity: interpolate(f, [2.4 * fps, 3.0 * fps], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 22,
+            fontWeight: ds.text.medium,
+            color: T.muted,
+            letterSpacing: 1.5,
+          }}
+        >
+          No tools. No friction. Just flow.
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// SCENE 3: CTA — "Drop 'Design' in the comments"
+// ═══════════════════════════════════════════════════════════════
+
+const CTAScene: React.FC<SP> = ({ frame, fps }) => {
+  const op = so(frame, fps, SEGS[2].s, SEGS[2].e, 0.35, 0.5);
+  if (op === 0) return null;
+  const f = lf(frame, fps, SEGS[2].s);
+
+  const mainSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(0.15 * fps),
+    config: { damping: 10, stiffness: 95 },
+  });
+
+  const bubbleSpring = spring({
+    frame: f,
+    fps,
+    delay: Math.round(1.1 * fps),
+    config: { damping: 11, stiffness: 100 },
+  });
+
+  // "Design" typed into comment
+  const typed = "Design";
+  const chars = Math.floor(
+    interpolate(f, [1.7 * fps, 2.5 * fps], [0, typed.length], {
+      extrapolateLeft: "clamp",
+      extrapolateRight: "clamp",
+    }),
+  );
+
+  const arrowY = Math.sin((f / fps) * 3.5) * 10;
+  const hintOp = interpolate(f, [2.2 * fps, 2.8 * fps], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill style={{ opacity: op }}>
+      {/* Headline */}
+      <div
+        style={{
+          position: "absolute",
+          top: "24%",
+          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: 24,
+            fontWeight: ds.text.medium,
+            color: T.muted,
+            letterSpacing: ds.text.wider,
+            textTransform: "uppercase",
+            marginBottom: 14,
+          }}
+        >
+          Want the setup guide?
+        </div>
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 62,
+            fontWeight: ds.text.bold,
+            color: T.heading,
+            letterSpacing: ds.text.tighter,
+            lineHeight: 1.05,
+          }}
+        >
+          Drop{" "}
+          <span
+            style={{
+              color: ds.color.claude,
+              textShadow: "0 0 30px rgba(212,102,58,0.35)",
+            }}
+          >
+            "Design"
+          </span>
+          <br />
+          in the comments
+        </div>
+      </div>
+
+      {/* Comment bubble mockup */}
+      <div
+        style={{
+          position: "absolute",
+          top: "54%",
+          left: "50%",
+          transform: `translate(-50%, 0) scale(${interpolate(bubbleSpring, [0, 1], [0.6, 1])})`,
+          opacity: interpolate(bubbleSpring, [0, 0.3], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          }),
+          width: "82%",
+          maxWidth: 740,
+          perspective: 1000,
+        }}
+      >
+        <FloatingCard rotateX={4} rotateY={-2}>
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 16,
+            }}
+          >
+            {/* Claude logo avatar */}
+            <div
+              style={{
+                width: 56,
+                height: 56,
+                borderRadius: "50%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                flexShrink: 0,
+                background: "rgba(212,102,58,0.18)",
+                border: "1px solid rgba(212,102,58,0.35)",
+                padding: 6,
+              }}
+            >
+              <Img
+                src={staticFile("captures/your-asset.png" /* REFERENCE-STRIP */)}
+                style={{ width: "100%", height: "100%", display: "block" }}
+              />
+            </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: 30,
+                  fontWeight: ds.text.semibold,
+                  color: G.text,
+                  marginTop: 2,
+                  letterSpacing: -0.3,
+                  display: "flex",
+                  alignItems: "center",
+                }}
+              >
+                {typed.slice(0, chars)}
+                {chars < typed.length && (
+                  <span
+                    style={{
+                      opacity: Math.sin(f * 0.4) > 0 ? 1 : 0,
+                      color: ds.color.claude,
+                      marginLeft: 2,
+                    }}
+                  >
+                    |
+                  </span>
+                )}
+              </div>
+            </div>
+
+            {/* Send button */}
+            <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>
+        </FloatingCard>
+      </div>
+
+      {/* Bottom hint + arrow */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: "24%",
+          width: "100%",
+          textAlign: "center",
+          opacity: hintOp,
+        }}
+      >
+        <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",
+            }}
+          >
+            DM'd straight to you
+          </div>
+          <div style={{ transform: `translateY(${arrowY}px)` }}>
+            <Icon.ArrowDown color={ds.color.claude} size={36} />
+          </div>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════
+// MAIN COMPOSITION — 10s @ 30fps = 300 frames
+// ═══════════════════════════════════════════════════════════════
+
+export const DesignReel: 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} />
+      <TaglineScene frame={frame} fps={fps} />
+      <CTAScene frame={frame} fps={fps} />
+    </AbsoluteFill>
+  );
+};