@devinilabs/reelstack 1.2.0

package/reference/warm/huashu.tsx

@@ -0,0 +1,3413 @@
+/**
+ * REFERENCE — HuashuReel  (Family: warm)
+ *
+ * Canonical example of the warm 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/HuashuReel.tsx
+ * Bundled at: 2026-05-08T18:50:39.536Z
+ */
+import React from "react";
+import {
+  AbsoluteFill,
+  Audio,
+  Easing,
+  OffthreadVideo,
+  Sequence,
+  interpolate,
+  spring,
+  staticFile,
+  useCurrentFrame,
+  useVideoConfig,
+} from "remotion";
+import { ds } from "./designSystem";
+
+// ═══════════════════════════════════════════════════════════════════════════
+// CONSTANTS — 9:16 reel · 30fps · 99.44s voiceover (2984 frames)
+// ═══════════════════════════════════════════════════════════════════════════
+
+const W = 1080;
+const H = 1920;
+
+// IG safe zones per project memory: top ~280, bottom ~410 covered by chrome.
+const SAFE_TOP = 280;
+const SAFE_BOT_Y = 1510;
+const SAFE_L = 60;
+const SAFE_R = 60;
+
+export const HUASHU_TOTAL = 2984;
+
+const SCENES = {
+  S1: { from: 0, dur: 150 },     // 5.0s — Hook: "Never hit Claude Design limits again"
+  S2: { from: 150, dur: 180 },   // 6.0s — Name reveal + just-dropped on GitHub
+  S3: { from: 330, dur: 270 },   // 9.0s — Drops into ANY agent (Claude Code / Cursor / Codex)
+  S4: { from: 600, dur: 210 },   // 7.0s — Install command (one-liner)
+  S5: { from: 810, dur: 180 },   // 6.0s — Capabilities bento (prototypes / decks / motion / infographics)
+  S6: { from: 990, dur: 330 },   // 11.0s — Under the hood + claude-design.mov clip
+  S7: { from: 1320, dur: 360 },  // 12.0s — Variants + Tweaks panel
+  S8: { from: 1680, dur: 390 },  // 13.0s — Payoff: no separate cap, no design quota
+  S9: { from: 2070, dur: 360 },  // 12.0s — Honest take: GUI vs Terminal
+  S10: { from: 2430, dur: 300 }, // 10.0s — License: personal use only
+  S11: { from: 2730, dur: 254 }, // 8.47s — CTA: comment "AI"
+} as const;
+
+// ═══════════════════════════════════════════════════════════════════════════
+// COLOR — zinc neutral base + warm amber (Huashu signature) + claude-warm
+// One accent rule. Emerald only for "no quota" payoff. Red only for the wall.
+// ═══════════════════════════════════════════════════════════════════════════
+
+const C = {
+  bg: "#09090b",
+  bgLift: "#111114",
+  surface: "#15151c",
+  surfaceWarm: "#1a1610",
+  border: "rgba(255,255,255,0.08)",
+  borderLoud: "rgba(255,255,255,0.16)",
+  fg: "#fafafa",
+  fgSoft: "#d4d4d8",
+  fgMuted: "#9f9fa9",
+  fgDim: "#71717b",
+
+  // Huashu warm signature
+  amber: "#f99c00",
+  amberSoft: "#fcbb00",
+  amberDeep: "#9a5e00",
+  amberGlow: "rgba(249,156,0,0.20)",
+
+  // Claude brand (used sparingly, for context only)
+  claudeWarm: "#d4663a",
+
+  // Payoff
+  emerald: "#00d294",
+  emeraldSoft: "#5ee9b5",
+  emeraldDeep: "#00875a",
+
+  // Wall / limit
+  red: "#ef4444",
+  redSoft: "#fca5a5",
+  redDeep: "#7f1d1d",
+
+  // Agent chip tints
+  cursor: "#000000",
+  vscode: "#0098ff",
+  openai: "#10a37f",
+} as const;
+
+const FONT = ds.font.sans;
+const MONO = ds.font.mono;
+
+// ═══════════════════════════════════════════════════════════════════════════
+// MOTION HELPERS — GSAP-flavored timeline ergonomics on Remotion springs
+// ═══════════════════════════════════════════════════════════════════════════
+
+type SpringKind = "smooth" | "snappy" | "gentle" | "bouncy" | "glass";
+
+const sp = (
+  frame: number,
+  fps: number,
+  delaySec: number,
+  kind: SpringKind = "snappy",
+) =>
+  spring({ frame, fps, delay: Math.round(delaySec * fps), config: ds.spring[kind] });
+
+const fadeIn = (f: number, at: number, len = 12) =>
+  interpolate(f, [at, at + len], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+const fadeOut = (f: number, at: number, len = 12) =>
+  interpolate(f, [at, at + len], [1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+// power3.out feel
+const expoOut = Easing.bezier(0.16, 1, 0.3, 1);
+const power2Out = Easing.bezier(0.4, 0, 0.2, 1);
+
+// gsap.fromTo equivalent
+const tween = (
+  f: number,
+  startFrame: number,
+  durFrames: number,
+  from: number,
+  to: number,
+  easing: ReturnType<typeof Easing.bezier> = expoOut,
+) =>
+  interpolate(f, [startFrame, startFrame + durFrames], [from, to], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+    easing,
+  });
+
+// Letter cascade
+const letterStagger = (
+  chars: string,
+  frame: number,
+  fps: number,
+  startSec: number,
+  perCharSec = 0.03,
+) =>
+  chars.split("").map((ch, i) => {
+    const s = sp(frame, fps, startSec + i * perCharSec, "snappy");
+    return {
+      ch,
+      opacity: interpolate(s, [0, 0.45], [0, 1], {
+        extrapolateLeft: "clamp",
+        extrapolateRight: "clamp",
+      }),
+      y: interpolate(s, [0, 1], [44, 0]),
+      scale: interpolate(s, [0, 0.6, 1], [0.86, 1.06, 1]),
+    };
+  });
+
+// ═══════════════════════════════════════════════════════════════════════════
+// BACKGROUND ATMOSPHERICS
+// ═══════════════════════════════════════════════════════════════════════════
+
+const NoiseGrain: React.FC<{ opacity?: number }> = ({ opacity = 0.06 }) => (
+  <AbsoluteFill
+    style={{
+      pointerEvents: "none",
+      opacity,
+      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>")`,
+    }}
+  />
+);
+
+const Vignette: React.FC<{ frame: number; tone?: "dark" | "warm" }> = ({
+  frame,
+  tone = "dark",
+}) => {
+  const pulse = 0.42 + Math.sin(frame * 0.012) * 0.05;
+  const col =
+    tone === "warm" ? `rgba(70,40,5,${pulse})` : `rgba(0,0,0,${pulse})`;
+  return (
+    <AbsoluteFill
+      style={{
+        background: `radial-gradient(ellipse at 50% 50%, transparent 38%, ${col} 100%)`,
+      }}
+    />
+  );
+};
+
+const DarkBg: React.FC<{
+  frame: number;
+  tint?: "amber" | "emerald" | "red" | "neutral";
+}> = ({ frame, tint = "amber" }) => {
+  const drift = (Math.sin(frame * 0.0028) + 1) * 0.5;
+  const drift2 = (Math.cos(frame * 0.0021) + 1) * 0.5;
+  const tintRgb =
+    tint === "amber"
+      ? "249,156,0"
+      : tint === "emerald"
+        ? "0,210,148"
+        : tint === "red"
+          ? "239,68,68"
+          : "120,120,135";
+  return (
+    <AbsoluteFill>
+      <div style={{ width: "100%", height: "100%", background: C.bg }} />
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse 800px 1000px at ${20 + drift * 60}% ${15 + drift2 * 40}%, rgba(${tintRgb},0.12) 0%, transparent 60%)`,
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `radial-gradient(ellipse 700px 900px at ${85 - drift * 55}% ${78 + drift2 * 15}%, rgba(${tintRgb},0.06) 0%, transparent 55%)`,
+        }}
+      />
+      {/* fine grid */}
+      <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%)",
+        }}
+      />
+      <NoiseGrain />
+      <Vignette frame={frame} tone={tint === "amber" ? "warm" : "dark"} />
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// REUSABLE PRIMITIVES
+// ═══════════════════════════════════════════════════════════════════════════
+
+const Pill: React.FC<{
+  children: React.ReactNode;
+  bg: string;
+  fg: string;
+  border?: string;
+  dot?: string;
+  mono?: boolean;
+  size?: number;
+}> = ({ children, bg, fg, border, dot, mono = true, size = 22 }) => (
+  <div
+    style={{
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 12,
+      padding: "12px 22px",
+      borderRadius: 9999,
+      background: bg,
+      border: border ? `1px solid ${border}` : undefined,
+      color: fg,
+      fontFamily: mono ? MONO : FONT,
+      fontSize: size,
+      fontWeight: 600,
+      letterSpacing: "0.08em",
+    }}
+  >
+    {dot ? (
+      <span
+        style={{
+          width: 8,
+          height: 8,
+          borderRadius: 999,
+          background: dot,
+          boxShadow: `0 0 12px ${dot}`,
+        }}
+      />
+    ) : null}
+    {children}
+  </div>
+);
+
+// Animated character row — used for headline slams
+const StaggerRow: React.FC<{
+  text: string;
+  startSec: number;
+  perCharSec?: number;
+  fontSize: number;
+  weight?: number;
+  letterSpacing?: string;
+  color?: string;
+  font?: string;
+}> = ({
+  text,
+  startSec,
+  perCharSec = 0.03,
+  fontSize,
+  weight = 800,
+  letterSpacing = "-0.04em",
+  color = C.fg,
+  font = FONT,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const items = letterStagger(text, frame, fps, startSec, perCharSec);
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexWrap: "wrap",
+        gap: 0,
+        fontFamily: font,
+        fontWeight: weight,
+        fontSize,
+        letterSpacing,
+        lineHeight: 1,
+        color,
+      }}
+    >
+      {items.map((it, i) => (
+        <span
+          key={i}
+          style={{
+            display: "inline-block",
+            opacity: it.opacity,
+            transform: `translateY(${it.y}px) scale(${it.scale})`,
+            whiteSpace: it.ch === " " ? "pre" : undefined,
+          }}
+        >
+          {it.ch}
+        </span>
+      ))}
+    </div>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// SCENE 1 — HOOK · "Never hit Claude Design limits again"
+// Visual: rate-limit wall slamming up; struck-through limits; open-source escape
+// ═══════════════════════════════════════════════════════════════════════════
+
+const Scene1: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  // top warning pill
+  const pillSpring = sp(frame, fps, 0, "snappy");
+  const pillY = interpolate(pillSpring, [0, 1], [-30, 0]);
+  const pillOp = interpolate(pillSpring, [0, 0.5], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // alert dialog slides in
+  const dialogSpring = sp(frame, fps, 0.2, "snappy");
+  const dialogY = interpolate(dialogSpring, [0, 1], [60, 0]);
+  const dialogOp = interpolate(dialogSpring, [0, 0.5], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // strike-through animation — sweeps left to right at frame 50
+  const strikeProgress = tween(frame, 50, 22, 0, 100);
+
+  // payoff line — "open source repo" slams in
+  const payoffSpring = sp(frame, fps, 2.6, "bouncy");
+  const payoffOp = interpolate(payoffSpring, [0, 0.4], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const payoffY = interpolate(payoffSpring, [0, 1], [40, 0]);
+  const payoffScale = interpolate(payoffSpring, [0, 0.6, 1], [0.85, 1.08, 1]);
+
+  // breathing red dot
+  const dotPulse = 0.6 + Math.sin(frame * 0.18) * 0.4;
+
+  const exit = fadeOut(frame, SCENES.S1.dur - 14, 12);
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT, opacity: exit }}>
+      <DarkBg frame={frame} tint="red" />
+
+      {/* TOP — rate-limit context tag */}
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP,
+          left: 0,
+          right: 0,
+          display: "flex",
+          justifyContent: "center",
+          opacity: pillOp,
+          transform: `translateY(${pillY}px)`,
+        }}
+      >
+        <Pill
+          bg="rgba(239,68,68,0.10)"
+          fg={C.redSoft}
+          border="rgba(239,68,68,0.35)"
+          dot={C.red}
+        >
+          RATE LIMITED · QUOTA HIT
+        </Pill>
+      </div>
+
+      {/* CENTER — fake Claude Design quota dialog */}
+      <div
+        style={{
+          position: "absolute",
+          left: SAFE_L,
+          right: SAFE_R,
+          top: 430,
+          opacity: dialogOp,
+          transform: `translateY(${dialogY}px)`,
+        }}
+      >
+        <div
+          style={{
+            background: C.surface,
+            border: `1px solid ${C.borderLoud}`,
+            borderRadius: 26,
+            overflow: "hidden",
+            boxShadow:
+              "0 30px 80px -20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.08)",
+          }}
+        >
+          {/* title bar */}
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+              padding: "16px 22px",
+              background: "rgba(255,255,255,0.03)",
+              borderBottom: `1px solid ${C.border}`,
+            }}
+          >
+            <div
+              style={{
+                width: 12,
+                height: 12,
+                borderRadius: 999,
+                background: "#ff5f57",
+                opacity: 0.5 + dotPulse * 0.5,
+              }}
+            />
+            <div
+              style={{
+                width: 12,
+                height: 12,
+                borderRadius: 999,
+                background: "#febc2e",
+              }}
+            />
+            <div
+              style={{
+                width: 12,
+                height: 12,
+                borderRadius: 999,
+                background: "#28c840",
+              }}
+            />
+            <div
+              style={{
+                marginLeft: 18,
+                fontFamily: MONO,
+                fontSize: 18,
+                color: C.fgMuted,
+                letterSpacing: "0.05em",
+              }}
+            >
+              claude.ai/design
+            </div>
+          </div>
+
+          {/* body */}
+          <div
+            style={{
+              padding: "44px 36px",
+              fontFamily: FONT,
+              color: C.fgSoft,
+            }}
+          >
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 14,
+                marginBottom: 20,
+              }}
+            >
+              <div
+                style={{
+                  width: 14,
+                  height: 14,
+                  borderRadius: 999,
+                  background: C.red,
+                  boxShadow: `0 0 ${10 + dotPulse * 14}px ${C.red}`,
+                }}
+              />
+              <div
+                style={{
+                  fontFamily: MONO,
+                  fontSize: 18,
+                  letterSpacing: "0.12em",
+                  color: C.redSoft,
+                  fontWeight: 600,
+                }}
+              >
+                WEEKLY LIMIT REACHED
+              </div>
+            </div>
+
+            <div
+              style={{
+                position: "relative",
+                fontSize: 38,
+                fontWeight: 600,
+                color: C.fg,
+                lineHeight: 1.18,
+                letterSpacing: "-0.015em",
+                marginBottom: 18,
+              }}
+            >
+              You&apos;ve hit your Claude Design quota.
+              {/* strike-through bar */}
+              <div
+                style={{
+                  position: "absolute",
+                  top: "55%",
+                  left: 0,
+                  height: 4,
+                  width: `${strikeProgress}%`,
+                  background: C.red,
+                  boxShadow: `0 0 12px ${C.red}`,
+                }}
+              />
+            </div>
+
+            <div
+              style={{
+                fontFamily: MONO,
+                fontSize: 20,
+                color: C.fgDim,
+                letterSpacing: "0.04em",
+              }}
+            >
+              Resets in 6 days · 14 hrs · 22 min
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* PAYOFF — "fix it with one open source repo" */}
+      <div
+        style={{
+          position: "absolute",
+          left: SAFE_L,
+          right: SAFE_R,
+          top: 1080,
+          opacity: payoffOp,
+          transform: `translateY(${payoffY}px) scale(${payoffScale})`,
+          textAlign: "left",
+        }}
+      >
+        <div
+          style={{
+            fontFamily: MONO,
+            fontSize: 18,
+            letterSpacing: "0.18em",
+            color: C.amber,
+            fontWeight: 600,
+            marginBottom: 18,
+          }}
+        >
+          THE FIX ↓
+        </div>
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 88,
+            fontWeight: 800,
+            letterSpacing: "-0.045em",
+            lineHeight: 0.96,
+            color: C.fg,
+          }}
+        >
+          One{" "}
+          <span
+            style={{
+              color: C.amber,
+              textShadow: `0 0 36px ${C.amberGlow}`,
+            }}
+          >
+            open-source
+          </span>
+          <br />
+          repo.
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// SCENE 2 — NAME REVEAL · "It's called Huashu Design. Just dropped on GitHub."
+// ═══════════════════════════════════════════════════════════════════════════
+
+const Scene2: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const kickerOp = fadeIn(frame, 0, 14);
+  const kickerY = tween(frame, 0, 18, 18, 0);
+
+  const huashuStart = 0.35;
+  const designStart = 0.78;
+
+  // GitHub card slides up
+  const repoSpring = sp(frame, fps, 2.4, "snappy");
+  const repoY = interpolate(repoSpring, [0, 1], [80, 0]);
+  const repoOp = interpolate(repoSpring, [0, 0.5], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // "JUST DROPPED" pulsing pill
+  const dropOp = fadeIn(frame, 100, 14);
+  const pulse = 0.5 + Math.sin(frame * 0.18) * 0.4;
+
+  const exit = fadeOut(frame, SCENES.S2.dur - 14, 12);
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT, opacity: exit }}>
+      <DarkBg frame={frame} tint="amber" />
+
+      {/* TOP kicker */}
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP,
+          left: SAFE_L,
+          right: SAFE_R,
+          display: "flex",
+          justifyContent: "flex-start",
+          opacity: kickerOp,
+          transform: `translateY(${kickerY}px)`,
+        }}
+      >
+        <Pill
+          bg="rgba(249,156,0,0.10)"
+          fg={C.amberSoft}
+          border="rgba(249,156,0,0.35)"
+          dot={C.amber}
+        >
+          NEW · OPEN SOURCE
+        </Pill>
+      </div>
+
+      {/* CENTER — name slam */}
+      <div
+        style={{
+          position: "absolute",
+          left: SAFE_L,
+          right: SAFE_R,
+          top: 460,
+        }}
+      >
+        <div style={{ marginBottom: 16 }}>
+          <StaggerRow
+            text="HUASHU"
+            startSec={huashuStart}
+            fontSize={184}
+            weight={900}
+            letterSpacing="-0.05em"
+            color={C.fg}
+          />
+        </div>
+        <div>
+          <StaggerRow
+            text="DESIGN."
+            startSec={designStart}
+            fontSize={184}
+            weight={900}
+            letterSpacing="-0.05em"
+            color={C.amber}
+          />
+        </div>
+
+        {/* mandarin sub */}
+        <div
+          style={{
+            marginTop: 24,
+            fontFamily: MONO,
+            fontSize: 22,
+            letterSpacing: "0.18em",
+            color: C.fgDim,
+            fontWeight: 500,
+            opacity: fadeIn(frame, 60, 18),
+          }}
+        >
+          画术设计 · 「打字。回车。一份能交付的设计。」
+        </div>
+      </div>
+
+      {/* GITHUB REPO CARD */}
+      <div
+        style={{
+          position: "absolute",
+          left: SAFE_L,
+          right: SAFE_R,
+          top: 1140,
+          opacity: repoOp,
+          transform: `translateY(${repoY}px)`,
+        }}
+      >
+        <div
+          style={{
+            background: C.surface,
+            border: `1px solid ${C.borderLoud}`,
+            borderRadius: 22,
+            padding: "26px 30px",
+            boxShadow:
+              "0 24px 60px -18px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.08)",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 18,
+              marginBottom: 16,
+            }}
+          >
+            {/* GitHub mark */}
+            <svg width="44" height="44" viewBox="0 0 24 24" fill={C.fg}>
+              <path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.44 9.79 8.21 11.39.6.11.82-.26.82-.58v-2.04c-3.34.73-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.09-.74.08-.73.08-.73 1.21.09 1.85 1.24 1.85 1.24 1.07 1.84 2.81 1.31 3.5 1 .11-.78.42-1.31.76-1.61-2.66-.3-5.46-1.33-5.46-5.93 0-1.31.47-2.38 1.24-3.22-.13-.31-.54-1.53.11-3.18 0 0 1.01-.32 3.31 1.23a11.5 11.5 0 0 1 6.02 0c2.3-1.55 3.31-1.23 3.31-1.23.65 1.65.24 2.87.12 3.18.77.84 1.24 1.91 1.24 3.22 0 4.61-2.81 5.62-5.48 5.92.43.37.81 1.1.81 2.22v3.29c0 .32.22.7.83.58A12 12 0 0 0 24 12c0-6.63-5.37-12-12-12z" />
+            </svg>
+            <div style={{ display: "flex", flexDirection: "column" }}>
+              <div
+                style={{
+                  fontFamily: MONO,
+                  fontSize: 16,
+                  letterSpacing: "0.1em",
+                  color: C.fgDim,
+                  fontWeight: 500,
+                }}
+              >
+                github.com
+              </div>
+              <div
+                style={{
+                  fontFamily: MONO,
+                  fontSize: 30,
+                  fontWeight: 600,
+                  color: C.fg,
+                  letterSpacing: "-0.01em",
+                }}
+              >
+                alchaincyf/huashu-design
+              </div>
+            </div>
+          </div>
+
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 12,
+              opacity: dropOp,
+            }}
+          >
+            <div
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 10,
+                padding: "8px 16px",
+                borderRadius: 9999,
+                background: "rgba(0,210,148,0.12)",
+                border: `1px solid rgba(0,210,148,0.35)`,
+                color: C.emeraldSoft,
+                fontFamily: MONO,
+                fontSize: 16,
+                fontWeight: 600,
+                letterSpacing: "0.1em",
+              }}
+            >
+              <span
+                style={{
+                  width: 6,
+                  height: 6,
+                  borderRadius: 999,
+                  background: C.emerald,
+                  opacity: pulse,
+                  boxShadow: `0 0 ${6 + pulse * 10}px ${C.emerald}`,
+                }}
+              />
+              JUST DROPPED
+            </div>
+            <div
+              style={{
+                fontFamily: MONO,
+                fontSize: 16,
+                color: C.fgDim,
+                letterSpacing: "0.08em",
+              }}
+            >
+              · Personal-use license
+            </div>
+          </div>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// SCENE 3 — DROPS INTO ANY AGENT · Claude Code · Cursor · Codex · OpenClaw · Hermes
+// ═══════════════════════════════════════════════════════════════════════════
+
+type AgentChip = {
+  name: string;
+  mark: React.ReactNode;
+  bg: string;
+  border: string;
+};
+
+const ClaudeMark: React.FC = () => (
+  <svg width="34" height="34" viewBox="0 0 24 24" fill="#d4663a">
+    <path d="M5 4l3 6h2L7 4H5zm6 0l3 6h2l-3-6h-2zm-6 9l-3 7h2l3-7H5zm6 0l-3 7h2l3-7h-2zm6-9l3 6h-2l-3-6h2zm0 9l3 7h-2l-3-7h2z" />
+  </svg>
+);
+
+const CursorMark: React.FC = () => (
+  <svg width="34" height="34" viewBox="0 0 24 24">
+    <path d="M3.4 2.5l9.1 18.9 2.7-7.7 7.7-2.7L3.4 2.5z" fill="#fff" />
+  </svg>
+);
+
+const OpenAIMark: React.FC = () => (
+  <svg width="34" height="34" viewBox="0 0 24 24" fill="#10a37f">
+    <path d="M22.28 9.82a5.95 5.95 0 0 0-.51-4.91 6.04 6.04 0 0 0-6.51-2.9A6.07 6.07 0 0 0 4.99 4.16 5.98 5.98 0 0 0 1 7.06a6.04 6.04 0 0 0 .74 7.08 5.95 5.95 0 0 0 .51 4.91 6.06 6.06 0 0 0 6.51 2.9A5.99 5.99 0 0 0 13.26 24a6.06 6.06 0 0 0 5.77-4.21 5.99 5.99 0 0 0 4-2.9 6.06 6.06 0 0 0-.75-7.07zM13.26 22.43a4.48 4.48 0 0 1-2.88-1.04l.14-.08 4.78-2.76a.79.79 0 0 0 .39-.68v-6.74l2.02 1.17.02.02v5.58a4.5 4.5 0 0 1-4.47 4.53zM3.6 18.32a4.5 4.5 0 0 1-.53-3.02l.14.08 4.78 2.76a.78.78 0 0 0 .79 0l5.84-3.37v2.33a.07.07 0 0 1-.03.06l-4.83 2.79a4.5 4.5 0 0 1-6.16-1.63zm-1.18-9.6a4.5 4.5 0 0 1 2.36-1.99l-.01.16v5.5a.78.78 0 0 0 .39.67l5.84 3.37-2.02 1.17a.08.08 0 0 1-.07.01L4.07 14.8a4.5 4.5 0 0 1-1.65-6.07v-.01zm16.59 3.85l-5.84-3.39 2.01-1.16a.08.08 0 0 1 .07-.01l4.83 2.79a4.5 4.5 0 0 1-.68 8.13v-5.69a.78.78 0 0 0-.39-.67zm2.01-3.02l-.14-.09-4.77-2.78a.78.78 0 0 0-.79 0L9.48 10.05V7.72a.07.07 0 0 1 .03-.06l4.83-2.78a4.5 4.5 0 0 1 6.68 4.66v.01zm-12.65 4.16l-2.02-1.17a.08.08 0 0 1-.04-.06v-5.55a4.5 4.5 0 0 1 7.38-3.46l-.14.08-4.78 2.76a.79.79 0 0 0-.39.68l-.01 6.72zm1.1-2.36L12.07 9.8l2.6 1.5v3l-2.6 1.5-2.6-1.5v-3z" />
+  </svg>
+);
+
+const OpenClawMark: React.FC = () => (
+  <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#f99c00" strokeWidth="2">
+    <circle cx="12" cy="12" r="9" />
+    <path d="M8 9c1 2 2 3 4 3s3-1 4-3M9 15c1 1 2 2 3 2s2-1 3-2" />
+  </svg>
+);
+
+const HermesMark: React.FC = () => (
+  <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#a4b3ff" strokeWidth="2">
+    <path d="M4 12 L20 12 M12 4 L12 20 M6 6 L18 18 M18 6 L6 18" strokeLinecap="round" />
+  </svg>
+);
+
+const Scene3: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const titleOp = fadeIn(frame, 0, 14);
+  const titleY = tween(frame, 0, 18, 22, 0);
+
+  const lineOp = fadeIn(frame, 14, 14);
+  const lineY = tween(frame, 14, 18, 26, 0);
+
+  // central skill node breathes
+  const breathe = 0.92 + Math.sin(frame * 0.045) * 0.06;
+
+  const skillSpring = sp(frame, fps, 0.55, "bouncy");
+  const skillOp = interpolate(skillSpring, [0, 0.5], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const skillScale = interpolate(skillSpring, [0, 0.6, 1], [0.6, 1.1, 1]);
+
+  const agents: AgentChip[] = [
+    {
+      name: "Claude Code",
+      mark: <ClaudeMark />,
+      bg: "rgba(212,102,58,0.10)",
+      border: "rgba(212,102,58,0.35)",
+    },
+    {
+      name: "Cursor",
+      mark: <CursorMark />,
+      bg: "rgba(255,255,255,0.06)",
+      border: "rgba(255,255,255,0.18)",
+    },
+    {
+      name: "Codex",
+      mark: <OpenAIMark />,
+      bg: "rgba(16,163,127,0.10)",
+      border: "rgba(16,163,127,0.32)",
+    },
+    {
+      name: "OpenClaw",
+      mark: <OpenClawMark />,
+      bg: "rgba(249,156,0,0.08)",
+      border: "rgba(249,156,0,0.32)",
+    },
+    {
+      name: "Hermes",
+      mark: <HermesMark />,
+      bg: "rgba(164,179,255,0.08)",
+      border: "rgba(164,179,255,0.32)",
+    },
+  ];
+
+  const exit = fadeOut(frame, SCENES.S3.dur - 14, 12);
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT, opacity: exit }}>
+      <DarkBg frame={frame} tint="neutral" />
+
+      {/* TOP — kicker */}
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP,
+          left: SAFE_L,
+          right: SAFE_R,
+          opacity: titleOp,
+          transform: `translateY(${titleY}px)`,
+        }}
+      >
+        <Pill
+          bg="rgba(255,255,255,0.05)"
+          fg={C.fgSoft}
+          border="rgba(255,255,255,0.14)"
+        >
+          AGENT-AGNOSTIC
+        </Pill>
+      </div>
+
+      {/* HEADLINE — asymmetric, left-aligned */}
+      <div
+        style={{
+          position: "absolute",
+          left: SAFE_L,
+          right: SAFE_R,
+          top: 380,
+          opacity: lineOp,
+          transform: `translateY(${lineY}px)`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 88,
+            fontWeight: 800,
+            letterSpacing: "-0.045em",
+            lineHeight: 0.95,
+            color: C.fg,
+          }}
+        >
+          Drop it into{" "}
+          <span style={{ color: C.amber }}>any</span>
+          <br />
+          coding agent.
+        </div>
+      </div>
+
+      {/* CENTER skill node */}
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 700,
+          display: "flex",
+          justifyContent: "center",
+          opacity: skillOp,
+        }}
+      >
+        <div
+          style={{
+            transform: `scale(${skillScale * breathe})`,
+            display: "flex",
+            alignItems: "center",
+            gap: 14,
+            padding: "20px 32px",
+            background: C.surfaceWarm,
+            border: `1px solid ${C.amberDeep}`,
+            borderRadius: 9999,
+            boxShadow: `0 0 ${30 + (breathe - 0.92) * 600}px ${C.amberGlow}, inset 0 1px 0 rgba(255,255,255,0.10)`,
+          }}
+        >
+          <div
+            style={{
+              width: 42,
+              height: 42,
+              borderRadius: 999,
+              background: `radial-gradient(circle at 30% 30%, ${C.amberSoft} 0%, ${C.amber} 60%, ${C.amberDeep} 100%)`,
+              boxShadow: `0 0 30px ${C.amber}`,
+            }}
+          />
+          <div
+            style={{
+              fontFamily: MONO,
+              fontSize: 28,
+              fontWeight: 600,
+              color: C.fg,
+              letterSpacing: "0.02em",
+            }}
+          >
+            huashu-design
+          </div>
+          <div
+            style={{
+              fontFamily: MONO,
+              fontSize: 16,
+              color: C.amberSoft,
+              padding: "4px 10px",
+              borderRadius: 6,
+              background: "rgba(249,156,0,0.14)",
+              letterSpacing: "0.12em",
+              fontWeight: 600,
+            }}
+          >
+            SKILL
+          </div>
+        </div>
+      </div>
+
+      {/* AGENTS — radial cascade */}
+      <div
+        style={{
+          position: "absolute",
+          left: SAFE_L,
+          right: SAFE_R,
+          top: 880,
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          gap: 16,
+        }}
+      >
+        {agents.slice(0, 4).map((a, i) => {
+          const s = sp(frame, fps, 1.2 + i * 0.18, "bouncy");
+          const op = interpolate(s, [0, 0.5], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          });
+          const x = interpolate(s, [0, 1], [i % 2 === 0 ? -50 : 50, 0]);
+          const sc = interpolate(s, [0, 0.6, 1], [0.7, 1.06, 1]);
+          return (
+            <div
+              key={a.name}
+              style={{
+                opacity: op,
+                transform: `translateX(${x}px) scale(${sc})`,
+                background: a.bg,
+                border: `1px solid ${a.border}`,
+                borderRadius: 22,
+                padding: "26px 28px",
+                display: "flex",
+                alignItems: "center",
+                gap: 16,
+                backdropFilter: "blur(20px)",
+                boxShadow: "inset 0 1px 0 rgba(255,255,255,0.06)",
+              }}
+            >
+              {a.mark}
+              <div
+                style={{
+                  fontFamily: FONT,
+                  fontSize: 30,
+                  fontWeight: 600,
+                  color: C.fg,
+                  letterSpacing: "-0.01em",
+                }}
+              >
+                {a.name}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* "+ more" tag */}
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 1340,
+          display: "flex",
+          justifyContent: "center",
+          opacity: fadeIn(frame, 200, 18),
+        }}
+      >
+        <div
+          style={{
+            fontFamily: MONO,
+            fontSize: 22,
+            color: C.fgDim,
+            letterSpacing: "0.18em",
+            display: "flex",
+            alignItems: "center",
+            gap: 14,
+          }}
+        >
+          <span style={{ width: 30, height: 1, background: C.fgDim }} />
+          + OPENCLAW · HERMES · ANY SKILLS-COMPATIBLE AGENT
+          <span style={{ width: 30, height: 1, background: C.fgDim }} />
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// SCENE 4 — INSTALL · "Install is one line — npx skills add"
+// ═══════════════════════════════════════════════════════════════════════════
+
+const Scene4: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const winSpring = sp(frame, fps, 0, "snappy");
+  const winY = interpolate(winSpring, [0, 1], [70, 0]);
+  const winOp = interpolate(winSpring, [0, 0.5], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // typewriter
+  const typed = "npx skills add alchaincyf/huashu-design";
+  const startTypeF = 18;
+  const charPerFrame = 1.4;
+  const charsShown = Math.max(
+    0,
+    Math.min(typed.length, Math.floor((frame - startTypeF) * charPerFrame)),
+  );
+
+  const typeDoneAt = startTypeF + Math.ceil(typed.length / charPerFrame);
+  const installSuccessAt = typeDoneAt + 18;
+
+  // success row
+  const successOp = fadeIn(frame, installSuccessAt, 14);
+  const successY = tween(frame, installSuccessAt, 18, 14, 0);
+
+  // bottom one-line tag
+  const oneLineOp = fadeIn(frame, installSuccessAt + 18, 14);
+  const oneLineY = tween(frame, installSuccessAt + 18, 18, 24, 0);
+
+  const exit = fadeOut(frame, SCENES.S4.dur - 14, 12);
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT, opacity: exit }}>
+      <DarkBg frame={frame} tint="amber" />
+
+      {/* TOP kicker */}
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP,
+          left: SAFE_L,
+          right: SAFE_R,
+          opacity: fadeIn(frame, 0, 14),
+        }}
+      >
+        <Pill
+          bg="rgba(249,156,0,0.10)"
+          fg={C.amberSoft}
+          border="rgba(249,156,0,0.32)"
+        >
+          ONE-LINE INSTALL
+        </Pill>
+      </div>
+
+      {/* TERMINAL window */}
+      <div
+        style={{
+          position: "absolute",
+          left: SAFE_L,
+          right: SAFE_R,
+          top: 480,
+          opacity: winOp,
+          transform: `translateY(${winY}px)`,
+        }}
+      >
+        <div
+          style={{
+            background: C.surface,
+            border: `1px solid ${C.borderLoud}`,
+            borderRadius: 22,
+            overflow: "hidden",
+            boxShadow:
+              "0 30px 80px -20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.10)",
+          }}
+        >
+          {/* title bar */}
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+              padding: "16px 22px",
+              background: "rgba(255,255,255,0.03)",
+              borderBottom: `1px solid ${C.border}`,
+            }}
+          >
+            <div
+              style={{
+                width: 12,
+                height: 12,
+                borderRadius: 999,
+                background: "#ff5f57",
+              }}
+            />
+            <div
+              style={{
+                width: 12,
+                height: 12,
+                borderRadius: 999,
+                background: "#febc2e",
+              }}
+            />
+            <div
+              style={{
+                width: 12,
+                height: 12,
+                borderRadius: 999,
+                background: "#28c840",
+              }}
+            />
+            <div
+              style={{
+                marginLeft: 18,
+                fontFamily: MONO,
+                fontSize: 18,
+                color: C.fgMuted,
+                letterSpacing: "0.05em",
+              }}
+            >
+              ~/projects · zsh
+            </div>
+          </div>
+
+          {/* body */}
+          <div
+            style={{
+              padding: "36px 30px 50px",
+              fontFamily: MONO,
+              fontSize: 26,
+              lineHeight: 1.5,
+              color: C.fgSoft,
+              minHeight: 380,
+            }}
+          >
+            <div style={{ color: C.fgDim, marginBottom: 14 }}>
+              # one line. all 20 skills.
+            </div>
+            <div>
+              <span style={{ color: C.amber }}>$</span>{" "}
+              {typed.slice(0, charsShown)}
+              {frame < typeDoneAt + 8 ? (
+                <span
+                  style={{
+                    display: "inline-block",
+                    width: 14,
+                    height: 28,
+                    marginLeft: 4,
+                    background: C.fg,
+                    verticalAlign: "-4px",
+                    opacity:
+                      0.35 +
+                      0.65 *
+                        Math.pow(Math.cos((frame * Math.PI) / 16), 2),
+                  }}
+                />
+              ) : null}
+            </div>
+
+            {/* progress bar */}
+            {frame > typeDoneAt + 4 ? (
+              <div style={{ marginTop: 26 }}>
+                <div
+                  style={{
+                    fontSize: 18,
+                    color: C.fgDim,
+                    marginBottom: 8,
+                    letterSpacing: "0.02em",
+                  }}
+                >
+                  resolving alchaincyf/huashu-design...
+                </div>
+                <div
+                  style={{
+                    width: "100%",
+                    height: 8,
+                    background: "rgba(255,255,255,0.06)",
+                    borderRadius: 999,
+                    overflow: "hidden",
+                  }}
+                >
+                  <div
+                    style={{
+                      width: `${tween(frame, typeDoneAt + 4, 14, 0, 100)}%`,
+                      height: "100%",
+                      background: `linear-gradient(90deg, ${C.amber}, ${C.amberSoft})`,
+                      boxShadow: `0 0 12px ${C.amberGlow}`,
+                    }}
+                  />
+                </div>
+              </div>
+            ) : null}
+
+            {/* success line */}
+            <div
+              style={{
+                marginTop: 20,
+                opacity: successOp,
+                transform: `translateY(${successY}px)`,
+                display: "flex",
+                alignItems: "center",
+                gap: 12,
+                color: C.emeraldSoft,
+                fontWeight: 600,
+              }}
+            >
+              <span
+                style={{
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: 28,
+                  height: 28,
+                  borderRadius: 999,
+                  background: "rgba(0,210,148,0.15)",
+                  border: `1px solid rgba(0,210,148,0.45)`,
+                }}
+              >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={C.emerald} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M5 12l5 5L20 7" />
+                </svg>
+              </span>
+              installed · 20 skills · 0 errors
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* BOTTOM tag */}
+      <div
+        style={{
+          position: "absolute",
+          left: SAFE_L,
+          right: SAFE_R,
+          top: 1320,
+          opacity: oneLineOp,
+          transform: `translateY(${oneLineY}px)`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 64,
+            fontWeight: 800,
+            letterSpacing: "-0.04em",
+            lineHeight: 0.98,
+            color: C.fg,
+          }}
+        >
+          Then talk to your agent.
+          <span style={{ color: C.amber }}>{" "}No buttons. No panels.</span>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// SCENE 5 — CAPABILITIES BENTO · prototypes / decks / motion / infographics
+// ═══════════════════════════════════════════════════════════════════════════
+
+type Capability = {
+  kicker: string;
+  name: string;
+  body: string;
+  glyph: React.ReactNode;
+  tint: string;
+  delay: number;
+};
+
+const Scene5: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const titleOp = fadeIn(frame, 0, 14);
+  const titleY = tween(frame, 0, 18, 22, 0);
+
+  const caps: Capability[] = [
+    {
+      kicker: "01 · INTERACTIVE",
+      name: "Prototypes",
+      body: "iPhone bezels, Playwright-tested clicks.",
+      tint: C.amber,
+      delay: 0.35,
+      glyph: (
+        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke={C.amber} strokeWidth="1.6">
+          <rect x="6" y="2" width="12" height="20" rx="3" />
+          <path d="M10 18h4" />
+        </svg>
+      ),
+    },
+    {
+      kicker: "02 · HTML→PPTX",
+      name: "Slide Decks",
+      body: "Editable text boxes, real PowerPoint output.",
+      tint: C.emerald,
+      delay: 0.55,
+      glyph: (
+        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke={C.emerald} strokeWidth="1.6">
+          <rect x="3" y="4" width="18" height="14" rx="2" />
+          <path d="M8 21h8M12 18v3" />
+        </svg>
+      ),
+    },
+    {
+      kicker: "03 · TIMELINE",
+      name: "Motion",
+      body: "MP4 + GIF + 60fps interpolation, BGM ready.",
+      tint: "#a4b3ff",
+      delay: 0.75,
+      glyph: (
+        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#a4b3ff" strokeWidth="1.6">
+          <polygon points="6,4 20,12 6,20" fill="#a4b3ff" fillOpacity="0.18" />
+        </svg>
+      ),
+    },
+    {
+      kicker: "04 · PRINT-GRADE",
+      name: "Infographics",
+      body: "CSS Grid typography, PDF/PNG/SVG export.",
+      tint: C.amberSoft,
+      delay: 0.95,
+      glyph: (
+        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke={C.amberSoft} strokeWidth="1.6">
+          <rect x="3" y="13" width="4" height="8" />
+          <rect x="10" y="8" width="4" height="13" />
+          <rect x="17" y="3" width="4" height="18" />
+        </svg>
+      ),
+    },
+  ];
+
+  const exit = fadeOut(frame, SCENES.S5.dur - 14, 12);
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT, opacity: exit }}>
+      <DarkBg frame={frame} tint="amber" />
+
+      {/* TOP — kicker */}
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP,
+          left: SAFE_L,
+          right: SAFE_R,
+          opacity: titleOp,
+          transform: `translateY(${titleY}px)`,
+        }}
+      >
+        <Pill
+          bg="rgba(255,255,255,0.05)"
+          fg={C.fgSoft}
+          border="rgba(255,255,255,0.14)"
+        >
+          ONE SKILL · FOUR DELIVERABLES
+        </Pill>
+      </div>
+
+      {/* HEADLINE */}
+      <div
+        style={{
+          position: "absolute",
+          left: SAFE_L,
+          right: SAFE_R,
+          top: 360,
+          opacity: fadeIn(frame, 6, 14),
+          transform: `translateY(${tween(frame, 6, 18, 26, 0)}px)`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 84,
+            fontWeight: 800,
+            letterSpacing: "-0.045em",
+            lineHeight: 0.95,
+            color: C.fg,
+          }}
+        >
+          Type once. Ship{" "}
+          <span style={{ color: C.amber }}>anything.</span>
+        </div>
+      </div>
+
+      {/* BENTO 2x2 — staggered cascade */}
+      <div
+        style={{
+          position: "absolute",
+          left: SAFE_L,
+          right: SAFE_R,
+          top: 600,
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          gridTemplateRows: "1fr 1fr",
+          gap: 16,
+          height: 880,
+        }}
+      >
+        {caps.map((c, i) => {
+          const s = sp(frame, fps, c.delay, "bouncy");
+          const op = interpolate(s, [0, 0.5], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          });
+          const y = interpolate(s, [0, 1], [60, 0]);
+          const sc = interpolate(s, [0, 0.6, 1], [0.84, 1.04, 1]);
+
+          // perpetual gentle float
+          const floatY = Math.sin(frame * 0.03 + i * 1.3) * 4;
+
+          return (
+            <div
+              key={c.name}
+              style={{
+                opacity: op,
+                transform: `translateY(${y + floatY}px) scale(${sc})`,
+                background: C.surface,
+                border: `1px solid ${C.borderLoud}`,
+                borderRadius: 28,
+                padding: "30px 28px",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "space-between",
+                position: "relative",
+                overflow: "hidden",
+                boxShadow: `0 24px 60px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08)`,
+              }}
+            >
+              {/* corner glow */}
+              <div
+                style={{
+                  position: "absolute",
+                  top: -120,
+                  right: -120,
+                  width: 280,
+                  height: 280,
+                  borderRadius: 9999,
+                  background: c.tint,
+                  filter: "blur(80px)",
+                  opacity: 0.16,
+                }}
+              />
+              <div
+                style={{ position: "relative", zIndex: 1 }}
+              >
+                {c.glyph}
+                <div
+                  style={{
+                    marginTop: 12,
+                    fontFamily: MONO,
+                    fontSize: 14,
+                    letterSpacing: "0.16em",
+                    color: c.tint,
+                    fontWeight: 600,
+                  }}
+                >
+                  {c.kicker}
+                </div>
+              </div>
+              <div style={{ position: "relative", zIndex: 1 }}>
+                <div
+                  style={{
+                    fontFamily: FONT,
+                    fontSize: 48,
+                    fontWeight: 700,
+                    letterSpacing: "-0.025em",
+                    color: C.fg,
+                    marginBottom: 8,
+                    lineHeight: 1,
+                  }}
+                >
+                  {c.name}
+                </div>
+                <div
+                  style={{
+                    fontFamily: FONT,
+                    fontSize: 19,
+                    color: C.fgMuted,
+                    lineHeight: 1.4,
+                    fontWeight: 400,
+                  }}
+                >
+                  {c.body}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// SCENE 6 — UNDER THE HOOD · claude-design.mov + 20 philosophies + toolchain
+// ═══════════════════════════════════════════════════════════════════════════
+
+const Scene6: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const titleOp = fadeIn(frame, 0, 14);
+  const titleY = tween(frame, 0, 18, 22, 0);
+
+  // big counter — 20 philosophies
+  const counterValue = Math.round(tween(frame, 24, 36, 0, 20));
+
+  // toolchain pills — staggered
+  const tools = [
+    { label: "HTML → MP4", color: C.amber, delay: 5.0 },
+    { label: "PLAYWRIGHT", color: C.emerald, delay: 5.4 },
+    { label: "PPTX EXPORT", color: "#a4b3ff", delay: 5.8 },
+    { label: "60fps INTERP", color: C.amberSoft, delay: 6.2 },
+  ];
+
+  const videoSpring = sp(frame, fps, 1.4, "snappy");
+  const videoY = interpolate(videoSpring, [0, 1], [50, 0]);
+  const videoOp = interpolate(videoSpring, [0, 0.5], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // REC dot pulse
+  const recPulse = 0.5 + Math.sin(frame * 0.22) * 0.4;
+
+  const exit = fadeOut(frame, SCENES.S6.dur - 14, 12);
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT, opacity: exit }}>
+      <DarkBg frame={frame} tint="amber" />
+
+      {/* TOP kicker */}
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP,
+          left: SAFE_L,
+          right: SAFE_R,
+          opacity: titleOp,
+          transform: `translateY(${titleY}px)`,
+        }}
+      >
+        <Pill
+          bg="rgba(249,156,0,0.10)"
+          fg={C.amberSoft}
+          border="rgba(249,156,0,0.32)"
+        >
+          UNDER THE HOOD
+        </Pill>
+      </div>
+
+      {/* HUGE COUNTER */}
+      <div
+        style={{
+          position: "absolute",
+          left: SAFE_L,
+          right: SAFE_R,
+          top: 360,
+          display: "flex",
+          alignItems: "flex-end",
+          gap: 22,
+          opacity: fadeIn(frame, 12, 14),
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 240,
+            fontWeight: 900,
+            letterSpacing: "-0.06em",
+            lineHeight: 0.85,
+            color: C.amber,
+            textShadow: `0 0 60px ${C.amberGlow}`,
+          }}
+        >
+          {counterValue}
+        </div>
+        <div
+          style={{
+            paddingBottom: 24,
+            fontFamily: FONT,
+            fontSize: 38,
+            fontWeight: 600,
+            letterSpacing: "-0.02em",
+            color: C.fg,
+            lineHeight: 1.05,
+            maxWidth: 480,
+          }}
+        >
+          design philosophies,
+          <br />
+          <span style={{ color: C.fgMuted }}>baked in.</span>
+        </div>
+      </div>
+
+      {/* SCREEN-REC FRAME with claude-design.mov */}
+      <div
+        style={{
+          position: "absolute",
+          left: SAFE_L,
+          right: SAFE_R,
+          top: 700,
+          opacity: videoOp,
+          transform: `translateY(${videoY}px)`,
+        }}
+      >
+        <div
+          style={{
+            background: C.bg,
+            border: `1px solid ${C.borderLoud}`,
+            borderRadius: 22,
+            overflow: "hidden",
+            boxShadow:
+              "0 24px 60px -18px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.10)",
+            position: "relative",
+            aspectRatio: "1896 / 1716",
+          }}
+        >
+          {/* title bar */}
+          <div
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              padding: "12px 18px",
+              background: "rgba(0,0,0,0.45)",
+              borderBottom: `1px solid ${C.border}`,
+              backdropFilter: "blur(10px)",
+              zIndex: 2,
+            }}
+          >
+            <div
+              style={{
+                width: 10,
+                height: 10,
+                borderRadius: 999,
+                background: "#ff5f57",
+              }}
+            />
+            <div
+              style={{
+                width: 10,
+                height: 10,
+                borderRadius: 999,
+                background: "#febc2e",
+              }}
+            />
+            <div
+              style={{
+                width: 10,
+                height: 10,
+                borderRadius: 999,
+                background: "#28c840",
+              }}
+            />
+            <div
+              style={{
+                marginLeft: 14,
+                fontFamily: MONO,
+                fontSize: 14,
+                color: C.fgMuted,
+                letterSpacing: "0.06em",
+              }}
+            >
+              huashu-design · live preview
+            </div>
+            <div
+              style={{
+                marginLeft: "auto",
+                display: "flex",
+                alignItems: "center",
+                gap: 6,
+                fontFamily: MONO,
+                fontSize: 12,
+                color: C.red,
+                letterSpacing: "0.14em",
+                fontWeight: 600,
+              }}
+            >
+              <span
+                style={{
+                  width: 6,
+                  height: 6,
+                  borderRadius: 999,
+                  background: C.red,
+                  opacity: recPulse,
+                  boxShadow: `0 0 ${recPulse * 14}px ${C.red}`,
+                }}
+              />
+              REC
+            </div>
+          </div>
+
+          {/* the clip — wrapped so it starts after dialog has settled */}
+          <Sequence from={42} durationInFrames={SCENES.S6.dur - 42}>
+            {/* REFERENCE-STRIP: <OffthreadVideo> removed — bring your own clip */}
+          </Sequence>
+
+          {/* subtle scanline overlay */}
+          <div
+            style={{
+              position: "absolute",
+              inset: 0,
+              backgroundImage: `repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 4px)`,
+              pointerEvents: "none",
+              mixBlendMode: "overlay",
+            }}
+          />
+        </div>
+      </div>
+
+      {/* TOOLCHAIN — kinetic pill row */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: 1920 - SAFE_BOT_Y + 30,
+          left: SAFE_L,
+          right: SAFE_R,
+          display: "flex",
+          flexWrap: "wrap",
+          gap: 12,
+          justifyContent: "flex-start",
+        }}
+      >
+        {tools.map((t) => {
+          const s = sp(frame, fps, t.delay, "snappy");
+          const op = interpolate(s, [0, 0.5], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          });
+          const y = interpolate(s, [0, 1], [16, 0]);
+          return (
+            <div
+              key={t.label}
+              style={{
+                opacity: op,
+                transform: `translateY(${y}px)`,
+                padding: "10px 18px",
+                borderRadius: 9999,
+                background: "rgba(255,255,255,0.04)",
+                border: `1px solid ${t.color}55`,
+                color: t.color,
+                fontFamily: MONO,
+                fontSize: 18,
+                fontWeight: 600,
+                letterSpacing: "0.1em",
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 8,
+              }}
+            >
+              <span
+                style={{
+                  width: 6,
+                  height: 6,
+                  borderRadius: 999,
+                  background: t.color,
+                  boxShadow: `0 0 8px ${t.color}`,
+                }}
+              />
+              {t.label}
+            </div>
+          );
+        })}
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// SCENE 7 — VARIANTS + TWEAKS PANEL · "three side-by-side options"
+// ═══════════════════════════════════════════════════════════════════════════
+
+const Scene7: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const titleOp = fadeIn(frame, 0, 14);
+  const titleY = tween(frame, 0, 18, 22, 0);
+
+  const variants = [
+    {
+      label: "Editorial",
+      tone: "Serif",
+      bg: "#f4ede0",
+      ink: "#1a1410",
+      accent: "#9a5e00",
+      tag: C.amber,
+      delay: 0.4,
+    },
+    {
+      label: "Brutalist",
+      tone: "Mono",
+      bg: "#0d0d0e",
+      ink: "#fafafa",
+      accent: "#00d294",
+      tag: C.emerald,
+      delay: 0.6,
+    },
+    {
+      label: "Soft",
+      tone: "Geist",
+      bg: "#ece8e3",
+      ink: "#2a2722",
+      accent: "#d4663a",
+      tag: C.claudeWarm,
+      delay: 0.8,
+    },
+  ];
+
+  // Tweaks panel
+  const panelSpring = sp(frame, fps, 4.0, "snappy");
+  const panelOp = interpolate(panelSpring, [0, 0.5], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const panelY = interpolate(panelSpring, [0, 1], [40, 0]);
+
+  // animated slider value
+  const sliderHue = 50 + (Math.sin(frame * 0.04) + 1) * 80;
+  const sliderDensity = 30 + (Math.cos(frame * 0.05) + 1) * 30;
+
+  const exit = fadeOut(frame, SCENES.S7.dur - 14, 12);
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT, opacity: exit }}>
+      <DarkBg frame={frame} tint="neutral" />
+
+      {/* TOP kicker */}
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP,
+          left: SAFE_L,
+          right: SAFE_R,
+          opacity: titleOp,
+          transform: `translateY(${titleY}px)`,
+        }}
+      >
+        <Pill
+          bg="rgba(255,255,255,0.05)"
+          fg={C.fgSoft}
+          border="rgba(255,255,255,0.14)"
+        >
+          THREE VARIANTS · TWEAKS PANEL
+        </Pill>
+      </div>
+
+      {/* HEADLINE */}
+      <div
+        style={{
+          position: "absolute",
+          left: SAFE_L,
+          right: SAFE_R,
+          top: 360,
+          opacity: fadeIn(frame, 6, 14),
+          transform: `translateY(${tween(frame, 6, 18, 26, 0)}px)`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 78,
+            fontWeight: 800,
+            letterSpacing: "-0.045em",
+            lineHeight: 0.96,
+            color: C.fg,
+          }}
+        >
+          Three options.
+          <br />
+          <span style={{ color: C.amber }}>Pick one. Or tweak.</span>
+        </div>
+      </div>
+
+      {/* VARIANT CARDS — three side-by-side */}
+      <div
+        style={{
+          position: "absolute",
+          left: SAFE_L,
+          right: SAFE_R,
+          top: 660,
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr 1fr",
+          gap: 12,
+          height: 460,
+        }}
+      >
+        {variants.map((v, i) => {
+          const s = sp(frame, fps, v.delay, "bouncy");
+          const op = interpolate(s, [0, 0.5], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          });
+          const y = interpolate(s, [0, 1], [80, 0]);
+          const sc = interpolate(s, [0, 0.6, 1], [0.82, 1.04, 1]);
+          const tilt = i === 0 ? -2 : i === 2 ? 2 : 0;
+
+          // perpetual breathe per card
+          const breath = Math.sin(frame * 0.025 + i * 1.7) * 0.5;
+
+          return (
+            <div
+              key={v.label}
+              style={{
+                opacity: op,
+                transform: `translateY(${y + breath}px) scale(${sc}) rotate(${tilt}deg)`,
+                background: v.bg,
+                borderRadius: 22,
+                padding: "26px 22px",
+                position: "relative",
+                overflow: "hidden",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "space-between",
+                boxShadow:
+                  i === 1
+                    ? `0 20px 50px -12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.15)`
+                    : `0 16px 40px -12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.12)`,
+              }}
+            >
+              {/* mini "design preview" */}
+              <div>
+                <div
+                  style={{
+                    fontFamily: MONO,
+                    fontSize: 12,
+                    letterSpacing: "0.18em",
+                    color: v.ink,
+                    opacity: 0.45,
+                    fontWeight: 600,
+                    marginBottom: 10,
+                  }}
+                >
+                  VARIANT 0{i + 1}
+                </div>
+                <div
+                  style={{
+                    fontFamily:
+                      v.tone === "Serif"
+                        ? "ui-serif, 'Iowan Old Style', 'Charter', 'Source Serif Pro', Georgia, serif"
+                        : v.tone === "Mono"
+                          ? MONO
+                          : FONT,
+                    fontSize: 38,
+                    fontWeight: 700,
+                    color: v.ink,
+                    letterSpacing:
+                      v.tone === "Serif" ? "-0.02em" : "-0.03em",
+                    lineHeight: 0.95,
+                    marginBottom: 10,
+                  }}
+                >
+                  {v.label}
+                </div>
+                <div
+                  style={{
+                    width: "85%",
+                    height: 3,
+                    background: v.accent,
+                    borderRadius: 999,
+                    marginBottom: 8,
+                  }}
+                />
+                <div
+                  style={{
+                    width: "55%",
+                    height: 3,
+                    background: v.ink,
+                    opacity: 0.16,
+                    borderRadius: 999,
+                  }}
+                />
+              </div>
+
+              {/* tag */}
+              <div
+                style={{
+                  display: "inline-flex",
+                  alignSelf: "flex-start",
+                  alignItems: "center",
+                  gap: 6,
+                  padding: "6px 12px",
+                  borderRadius: 9999,
+                  background: `${v.accent}26`,
+                  color: v.accent,
+                  fontFamily: MONO,
+                  fontSize: 13,
+                  fontWeight: 600,
+                  letterSpacing: "0.1em",
+                }}
+              >
+                <span
+                  style={{
+                    width: 5,
+                    height: 5,
+                    borderRadius: 999,
+                    background: v.accent,
+                  }}
+                />
+                {v.tone}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* TWEAKS PANEL */}
+      <div
+        style={{
+          position: "absolute",
+          left: SAFE_L,
+          right: SAFE_R,
+          top: 1180,
+          opacity: panelOp,
+          transform: `translateY(${panelY}px)`,
+          background: C.surface,
+          border: `1px solid ${C.borderLoud}`,
+          borderRadius: 22,
+          padding: "22px 26px",
+          boxShadow:
+            "0 20px 50px -16px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06)",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: 18,
+          }}
+        >
+          <div
+            style={{
+              fontFamily: MONO,
+              fontSize: 16,
+              letterSpacing: "0.18em",
+              color: C.fgDim,
+              fontWeight: 600,
+            }}
+          >
+            ./TWEAKS
+          </div>
+          <div
+            style={{
+              fontFamily: MONO,
+              fontSize: 14,
+              color: C.amber,
+              letterSpacing: "0.1em",
+              fontWeight: 600,
+            }}
+          >
+            LIVE
+          </div>
+        </div>
+
+        {[
+          { label: "Hue", val: sliderHue, color: C.amber },
+          { label: "Density", val: sliderDensity, color: C.emerald },
+          { label: "Type Scale", val: 50 + Math.cos(frame * 0.04) * 25, color: "#a4b3ff" },
+        ].map((row) => (
+          <div
+            key={row.label}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 14,
+              marginBottom: 14,
+            }}
+          >
+            <div
+              style={{
+                width: 130,
+                fontFamily: MONO,
+                fontSize: 16,
+                color: C.fgSoft,
+                letterSpacing: "0.04em",
+              }}
+            >
+              {row.label}
+            </div>
+            <div
+              style={{
+                flex: 1,
+                height: 6,
+                background: "rgba(255,255,255,0.06)",
+                borderRadius: 999,
+                position: "relative",
+                overflow: "hidden",
+              }}
+            >
+              <div
+                style={{
+                  position: "absolute",
+                  inset: 0,
+                  width: `${row.val}%`,
+                  background: `linear-gradient(90deg, ${row.color}aa, ${row.color})`,
+                  borderRadius: 999,
+                }}
+              />
+              <div
+                style={{
+                  position: "absolute",
+                  top: -4,
+                  left: `calc(${row.val}% - 7px)`,
+                  width: 14,
+                  height: 14,
+                  borderRadius: 999,
+                  background: row.color,
+                  boxShadow: `0 0 12px ${row.color}`,
+                }}
+              />
+            </div>
+            <div
+              style={{
+                width: 60,
+                textAlign: "right",
+                fontFamily: MONO,
+                fontSize: 16,
+                color: row.color,
+                fontWeight: 600,
+              }}
+            >
+              {Math.round(row.val)}
+            </div>
+          </div>
+        ))}
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// SCENE 8 — THE PAYOFF · "No separate weekly cap. No design quota."
+// ═══════════════════════════════════════════════════════════════════════════
+
+const Scene8: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const titleOp = fadeIn(frame, 0, 14);
+  const titleY = tween(frame, 0, 18, 22, 0);
+
+  // line 1 "NO" stagger
+  // line 2 "NO" stagger
+
+  const line1Spring = sp(frame, fps, 0.6, "bouncy");
+  const line1Op = interpolate(line1Spring, [0, 0.5], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const line1Scale = interpolate(line1Spring, [0, 0.6, 1], [0.8, 1.08, 1]);
+
+  const line2Spring = sp(frame, fps, 1.6, "bouncy");
+  const line2Op = interpolate(line2Spring, [0, 0.5], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const line2Scale = interpolate(line2Spring, [0, 0.6, 1], [0.8, 1.08, 1]);
+
+  // infinity counter
+  const infOp = fadeIn(frame, 90, 18);
+  const infY = tween(frame, 90, 22, 30, 0);
+
+  // bottom tag
+  const bottomOp = fadeIn(frame, 200, 14);
+  const bottomY = tween(frame, 200, 22, 26, 0);
+
+  // ticker — designs shipped (animated)
+  const designCount =
+    14207 + Math.floor((frame - 90) * 5.7);
+  const safeDesignCount = frame > 90 ? designCount : 14207;
+
+  const exit = fadeOut(frame, SCENES.S8.dur - 14, 12);
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT, opacity: exit }}>
+      <DarkBg frame={frame} tint="emerald" />
+
+      {/* TOP kicker */}
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP,
+          left: SAFE_L,
+          right: SAFE_R,
+          opacity: titleOp,
+          transform: `translateY(${titleY}px)`,
+        }}
+      >
+        <Pill
+          bg="rgba(0,210,148,0.10)"
+          fg={C.emeraldSoft}
+          border="rgba(0,210,148,0.32)"
+          dot={C.emerald}
+        >
+          THE PART THAT MATTERS
+        </Pill>
+      </div>
+
+      {/* THE NO STACK */}
+      <div
+        style={{
+          position: "absolute",
+          left: SAFE_L,
+          right: SAFE_R,
+          top: 460,
+        }}
+      >
+        <div
+          style={{
+            opacity: line1Op,
+            transform: `scale(${line1Scale})`,
+            transformOrigin: "left center",
+            fontFamily: FONT,
+            fontWeight: 900,
+            fontSize: 156,
+            letterSpacing: "-0.06em",
+            lineHeight: 0.86,
+            color: C.fg,
+            marginBottom: 8,
+          }}
+        >
+          <span style={{ color: C.red }}>NO</span> separate
+          <br />
+          weekly cap.
+        </div>
+
+        <div
+          style={{
+            opacity: line2Op,
+            transform: `scale(${line2Scale})`,
+            transformOrigin: "left center",
+            fontFamily: FONT,
+            fontWeight: 900,
+            fontSize: 156,
+            letterSpacing: "-0.06em",
+            lineHeight: 0.86,
+            color: C.fg,
+            marginTop: 36,
+          }}
+        >
+          <span style={{ color: C.red }}>NO</span> design
+          <br />
+          <span style={{ color: C.emerald }}>quota.</span>
+        </div>
+      </div>
+
+      {/* infinity counter */}
+      <div
+        style={{
+          position: "absolute",
+          left: SAFE_L,
+          right: SAFE_R,
+          top: 1230,
+          opacity: infOp,
+          transform: `translateY(${infY}px)`,
+        }}
+      >
+        <div
+          style={{
+            background: "rgba(0,210,148,0.06)",
+            border: `1px solid rgba(0,210,148,0.30)`,
+            borderRadius: 22,
+            padding: "22px 26px",
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            backdropFilter: "blur(20px)",
+            boxShadow: "inset 0 1px 0 rgba(255,255,255,0.06)",
+          }}
+        >
+          <div>
+            <div
+              style={{
+                fontFamily: MONO,
+                fontSize: 16,
+                letterSpacing: "0.16em",
+                color: C.emeraldSoft,
+                fontWeight: 600,
+                marginBottom: 6,
+              }}
+            >
+              RUNS ON YOUR
+            </div>
+            <div
+              style={{
+                fontFamily: FONT,
+                fontSize: 36,
+                fontWeight: 700,
+                color: C.fg,
+                letterSpacing: "-0.02em",
+                lineHeight: 1,
+              }}
+            >
+              Claude Code usage.
+            </div>
+          </div>
+          <div
+            style={{
+              textAlign: "right",
+            }}
+          >
+            <div
+              style={{
+                fontFamily: MONO,
+                fontSize: 13,
+                letterSpacing: "0.18em",
+                color: C.fgDim,
+                fontWeight: 600,
+                marginBottom: 4,
+              }}
+            >
+              DESIGNS SHIPPED
+            </div>
+            <div
+              style={{
+                fontFamily: MONO,
+                fontSize: 38,
+                fontWeight: 600,
+                color: C.emerald,
+                letterSpacing: "-0.02em",
+              }}
+            >
+              {safeDesignCount.toLocaleString()}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* BOTTOM TAG */}
+      <div
+        style={{
+          position: "absolute",
+          left: SAFE_L,
+          right: SAFE_R,
+          top: 1400,
+          opacity: bottomOp,
+          transform: `translateY(${bottomY}px)`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: MONO,
+            fontSize: 22,
+            letterSpacing: "0.16em",
+            color: C.fgDim,
+            fontWeight: 500,
+          }}
+        >
+          → THAT&apos;S THE WHOLE PITCH.
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// SCENE 9 — HONEST TAKE · GUI vs Terminal split
+// ═══════════════════════════════════════════════════════════════════════════
+
+const Scene9: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const titleOp = fadeIn(frame, 0, 14);
+  const titleY = tween(frame, 0, 18, 22, 0);
+
+  // GUI side slides from left
+  const guiSpring = sp(frame, fps, 0.55, "snappy");
+  const guiX = interpolate(guiSpring, [0, 1], [-80, 0]);
+  const guiOp = interpolate(guiSpring, [0, 0.5], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // Terminal side slides from right
+  const termSpring = sp(frame, fps, 0.85, "snappy");
+  const termX = interpolate(termSpring, [0, 1], [80, 0]);
+  const termOp = interpolate(termSpring, [0, 0.5], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  // VS divider
+  const vsSpring = sp(frame, fps, 1.4, "bouncy");
+  const vsScale = interpolate(vsSpring, [0, 0.6, 1], [0.4, 1.15, 1]);
+  const vsOp = interpolate(vsSpring, [0, 0.5], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  const verdictOp = fadeIn(frame, 200, 14);
+  const verdictY = tween(frame, 200, 22, 28, 0);
+
+  const exit = fadeOut(frame, SCENES.S9.dur - 14, 12);
+
+  // typewriter for terminal mock
+  const cmdTyped = "> design a landing page";
+  const cmdStart = 80;
+  const cmdShown = Math.max(
+    0,
+    Math.min(cmdTyped.length, Math.floor((frame - cmdStart) * 1.2)),
+  );
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT, opacity: exit }}>
+      <DarkBg frame={frame} tint="neutral" />
+
+      {/* TOP kicker */}
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP,
+          left: SAFE_L,
+          right: SAFE_R,
+          opacity: titleOp,
+          transform: `translateY(${titleY}px)`,
+        }}
+      >
+        <Pill
+          bg="rgba(255,255,255,0.05)"
+          fg={C.fgSoft}
+          border="rgba(255,255,255,0.14)"
+        >
+          THE HONEST TAKE
+        </Pill>
+      </div>
+
+      {/* HEADLINE */}
+      <div
+        style={{
+          position: "absolute",
+          left: SAFE_L,
+          right: SAFE_R,
+          top: 360,
+          opacity: fadeIn(frame, 6, 14),
+          transform: `translateY(${tween(frame, 6, 18, 24, 0)}px)`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 78,
+            fontWeight: 800,
+            letterSpacing: "-0.045em",
+            lineHeight: 0.95,
+            color: C.fg,
+          }}
+        >
+          Replace it fully?{" "}
+          <span style={{ color: C.fgMuted }}>Probably not.</span>
+        </div>
+      </div>
+
+      {/* SPLIT — vertical 50/50 of two cards */}
+      <div
+        style={{
+          position: "absolute",
+          left: SAFE_L,
+          right: SAFE_R,
+          top: 660,
+          height: 540,
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          gap: 16,
+          position: "absolute",
+        }}
+      >
+        {/* GUI side */}
+        <div
+          style={{
+            opacity: guiOp,
+            transform: `translateX(${guiX}px)`,
+            background: "#fafaf7",
+            borderRadius: 24,
+            padding: "24px 22px",
+            border: "1px solid rgba(0,0,0,0.08)",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-between",
+            boxShadow: "0 16px 40px -12px rgba(0,0,0,0.4)",
+          }}
+        >
+          <div>
+            <div
+              style={{
+                fontFamily: MONO,
+                fontSize: 13,
+                letterSpacing: "0.18em",
+                color: "#9a8b6f",
+                fontWeight: 600,
+                marginBottom: 14,
+              }}
+            >
+              CLAUDE DESIGN · GUI
+            </div>
+
+            {/* fake toolbar */}
+            <div
+              style={{
+                display: "flex",
+                gap: 8,
+                marginBottom: 14,
+              }}
+            >
+              {["click", "draw", "comment"].map((b) => (
+                <div
+                  key={b}
+                  style={{
+                    padding: "6px 12px",
+                    borderRadius: 9,
+                    background: "rgba(0,0,0,0.05)",
+                    fontFamily: MONO,
+                    fontSize: 12,
+                    color: "#3a2f24",
+                    fontWeight: 600,
+                    letterSpacing: "0.05em",
+                  }}
+                >
+                  {b}
+                </div>
+              ))}
+            </div>
+
+            {/* fake canvas with shapes */}
+            <div
+              style={{
+                background: "#fff",
+                borderRadius: 12,
+                border: "1px solid rgba(0,0,0,0.08)",
+                padding: 16,
+                position: "relative",
+                height: 240,
+              }}
+            >
+              <div
+                style={{
+                  position: "absolute",
+                  top: 24,
+                  left: 24,
+                  width: 80,
+                  height: 80,
+                  background: C.amber,
+                  borderRadius: 8,
+                  opacity: 0.85,
+                }}
+              />
+              <div
+                style={{
+                  position: "absolute",
+                  top: 60,
+                  left: 100,
+                  width: 100,
+                  height: 60,
+                  background: "#1a1410",
+                  borderRadius: 8,
+                  opacity: 0.85,
+                }}
+              />
+              <div
+                style={{
+                  position: "absolute",
+                  top: 130,
+                  left: 40,
+                  width: 110,
+                  height: 6,
+                  background: "#3a2f24",
+                  borderRadius: 999,
+                  opacity: 0.5,
+                }}
+              />
+              <div
+                style={{
+                  position: "absolute",
+                  top: 145,
+                  left: 40,
+                  width: 70,
+                  height: 4,
+                  background: "#3a2f24",
+                  borderRadius: 999,
+                  opacity: 0.3,
+                }}
+              />
+
+              {/* cursor */}
+              <div
+                style={{
+                  position: "absolute",
+                  top: 110 + Math.sin(frame * 0.06) * 16,
+                  left: 130 + Math.cos(frame * 0.05) * 22,
+                  fontSize: 16,
+                  fontFamily: MONO,
+                  color: "#1a1410",
+                }}
+              >
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="#1a1410">
+                  <path d="M3 2l8 18 2-7 7-2L3 2z" />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 18,
+              color: "#3a2f24",
+              fontWeight: 600,
+              letterSpacing: "-0.01em",
+            }}
+          >
+            wins for click · draw · comment
+          </div>
+        </div>
+
+        {/* TERMINAL side */}
+        <div
+          style={{
+            opacity: termOp,
+            transform: `translateX(${termX}px)`,
+            background: C.surface,
+            borderRadius: 24,
+            padding: "24px 22px",
+            border: `1px solid ${C.borderLoud}`,
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-between",
+            boxShadow:
+              "0 16px 40px -12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06)",
+          }}
+        >
+          <div>
+            <div
+              style={{
+                fontFamily: MONO,
+                fontSize: 13,
+                letterSpacing: "0.18em",
+                color: C.amberSoft,
+                fontWeight: 600,
+                marginBottom: 14,
+              }}
+            >
+              HUASHU · TERMINAL
+            </div>
+
+            {/* fake terminal */}
+            <div
+              style={{
+                background: "#0a0a0c",
+                borderRadius: 12,
+                border: `1px solid ${C.border}`,
+                padding: 18,
+                position: "relative",
+                height: 296,
+                fontFamily: MONO,
+                fontSize: 17,
+                color: C.fgSoft,
+                lineHeight: 1.5,
+              }}
+            >
+              <div style={{ color: C.fgDim, marginBottom: 8 }}>
+                ~/projects · zsh
+              </div>
+              <div style={{ color: C.amber, marginBottom: 8 }}>
+                {cmdTyped.slice(0, cmdShown)}
+                {frame < cmdStart + cmdTyped.length / 1.2 + 8 ? (
+                  <span
+                    style={{
+                      display: "inline-block",
+                      width: 9,
+                      height: 19,
+                      marginLeft: 3,
+                      background: C.amber,
+                      verticalAlign: "-3px",
+                      opacity:
+                        0.4 +
+                        0.6 *
+                          Math.pow(Math.cos((frame * Math.PI) / 16), 2),
+                    }}
+                  />
+                ) : null}
+              </div>
+              {frame > cmdStart + 30 ? (
+                <>
+                  <div style={{ color: C.fgDim }}>
+                    [planning] picking variant...
+                  </div>
+                  <div style={{ color: C.fgDim }}>
+                    [generating] 3 directions in parallel
+                  </div>
+                  <div
+                    style={{
+                      color: C.emerald,
+                      fontWeight: 600,
+                      marginTop: 6,
+                    }}
+                  >
+                    ✓ delivered in 4m 18s
+                  </div>
+                </>
+              ) : null}
+            </div>
+          </div>
+          <div
+            style={{
+              fontFamily: FONT,
+              fontSize: 18,
+              color: C.amberSoft,
+              fontWeight: 600,
+              letterSpacing: "-0.01em",
+            }}
+          >
+            closes the gap fast.
+          </div>
+        </div>
+
+        {/* center "VS" badge */}
+        <div
+          style={{
+            position: "absolute",
+            top: 230,
+            left: "50%",
+            transform: `translateX(-50%) scale(${vsScale})`,
+            opacity: vsOp,
+            zIndex: 5,
+          }}
+        >
+          <div
+            style={{
+              width: 88,
+              height: 88,
+              borderRadius: 999,
+              background: C.bg,
+              border: `2px solid ${C.amber}`,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontFamily: MONO,
+              fontSize: 26,
+              fontWeight: 700,
+              color: C.amber,
+              letterSpacing: "0.05em",
+              boxShadow: `0 0 30px ${C.amberGlow}`,
+            }}
+          >
+            VS
+          </div>
+        </div>
+      </div>
+
+      {/* VERDICT */}
+      <div
+        style={{
+          position: "absolute",
+          left: SAFE_L,
+          right: SAFE_R,
+          top: 1300,
+          opacity: verdictOp,
+          transform: `translateY(${verdictY}px)`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 50,
+            fontWeight: 700,
+            letterSpacing: "-0.025em",
+            lineHeight: 1.1,
+            color: C.fg,
+          }}
+        >
+          But if you live in your terminal —
+          <br />
+          <span style={{ color: C.amber }}>this thing closes the gap fast.</span>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// SCENE 10 — LICENSE WARNING · "personal use only"
+// ═══════════════════════════════════════════════════════════════════════════
+
+const Scene10: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const tagOp = fadeIn(frame, 0, 14);
+  const tagY = tween(frame, 0, 18, 22, 0);
+
+  const cardSpring = sp(frame, fps, 0.4, "snappy");
+  const cardOp = interpolate(cardSpring, [0, 0.5], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const cardY = interpolate(cardSpring, [0, 1], [50, 0]);
+
+  // checklist staggered
+  const checks = [
+    { ok: true, text: "Personal projects", delay: 1.4 },
+    { ok: true, text: "Your own portfolio, internal tools", delay: 1.7 },
+    { ok: false, text: "Client work / commercial gigs", delay: 2.0 },
+    { ok: false, text: "Reselling generated assets", delay: 2.3 },
+  ];
+
+  const readmeSpring = sp(frame, fps, 5.4, "bouncy");
+  const readmeOp = interpolate(readmeSpring, [0, 0.5], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const readmeScale = interpolate(readmeSpring, [0, 0.6, 1], [0.85, 1.06, 1]);
+
+  const exit = fadeOut(frame, SCENES.S10.dur - 14, 12);
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT, opacity: exit }}>
+      <DarkBg frame={frame} tint="amber" />
+
+      {/* TOP kicker */}
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP,
+          left: SAFE_L,
+          right: SAFE_R,
+          opacity: tagOp,
+          transform: `translateY(${tagY}px)`,
+        }}
+      >
+        <Pill
+          bg="rgba(252,187,0,0.10)"
+          fg={C.amberSoft}
+          border="rgba(252,187,0,0.32)"
+          dot={C.amberSoft}
+        >
+          QUICK HEADS-UP · LICENSE
+        </Pill>
+      </div>
+
+      {/* HEADLINE */}
+      <div
+        style={{
+          position: "absolute",
+          left: SAFE_L,
+          right: SAFE_R,
+          top: 380,
+          opacity: fadeIn(frame, 8, 14),
+          transform: `translateY(${tween(frame, 8, 18, 26, 0)}px)`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 96,
+            fontWeight: 800,
+            letterSpacing: "-0.05em",
+            lineHeight: 0.92,
+            color: C.fg,
+          }}
+        >
+          Personal
+          <br />
+          use{" "}
+          <span style={{ color: C.amber }}>only.</span>
+        </div>
+      </div>
+
+      {/* CHECKLIST CARD */}
+      <div
+        style={{
+          position: "absolute",
+          left: SAFE_L,
+          right: SAFE_R,
+          top: 760,
+          opacity: cardOp,
+          transform: `translateY(${cardY}px)`,
+          background: C.surface,
+          border: `1px solid ${C.borderLoud}`,
+          borderRadius: 22,
+          padding: "30px 28px",
+          boxShadow:
+            "0 24px 60px -18px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.08)",
+        }}
+      >
+        <div
+          style={{
+            fontFamily: MONO,
+            fontSize: 14,
+            letterSpacing: "0.18em",
+            color: C.fgDim,
+            fontWeight: 600,
+            marginBottom: 22,
+          }}
+        >
+          ./LICENSE.md
+        </div>
+
+        {checks.map((c) => {
+          const s = sp(frame, fps, c.delay, "snappy");
+          const op = interpolate(s, [0, 0.5], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          });
+          const x = interpolate(s, [0, 1], [-30, 0]);
+          return (
+            <div
+              key={c.text}
+              style={{
+                opacity: op,
+                transform: `translateX(${x}px)`,
+                display: "flex",
+                alignItems: "center",
+                gap: 16,
+                padding: "14px 0",
+                borderBottom: `1px solid ${C.border}`,
+              }}
+            >
+              <div
+                style={{
+                  width: 32,
+                  height: 32,
+                  borderRadius: 999,
+                  background: c.ok
+                    ? "rgba(0,210,148,0.14)"
+                    : "rgba(239,68,68,0.14)",
+                  border: c.ok
+                    ? `1px solid rgba(0,210,148,0.45)`
+                    : `1px solid rgba(239,68,68,0.45)`,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                {c.ok ? (
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={C.emerald} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M5 12l5 5L20 7" />
+                  </svg>
+                ) : (
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={C.red} strokeWidth="3" strokeLinecap="round">
+                    <path d="M6 6l12 12M18 6L6 18" />
+                  </svg>
+                )}
+              </div>
+              <div
+                style={{
+                  fontFamily: FONT,
+                  fontSize: 28,
+                  fontWeight: 500,
+                  color: c.ok ? C.fg : C.fgMuted,
+                  textDecoration: c.ok ? "none" : "line-through",
+                  textDecorationColor: C.red,
+                  letterSpacing: "-0.01em",
+                }}
+              >
+                {c.text}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* README pointer */}
+      <div
+        style={{
+          position: "absolute",
+          left: SAFE_L,
+          right: SAFE_R,
+          top: 1300,
+          opacity: readmeOp,
+          transform: `scale(${readmeScale})`,
+          transformOrigin: "left center",
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 34,
+            fontWeight: 700,
+            color: C.fg,
+            letterSpacing: "-0.02em",
+            lineHeight: 1.15,
+          }}
+        >
+          Read the{" "}
+          <span
+            style={{
+              fontFamily: MONO,
+              padding: "4px 10px",
+              borderRadius: 8,
+              background: "rgba(249,156,0,0.14)",
+              color: C.amber,
+              border: `1px solid rgba(249,156,0,0.35)`,
+            }}
+          >
+            README
+          </span>{" "}
+          before you ship client work with it.
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// SCENE 11 — CTA · "Comment 'AI'"
+// ═══════════════════════════════════════════════════════════════════════════
+
+const Scene11: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const kickerOp = fadeIn(frame, 0, 14);
+  const kickerY = tween(frame, 0, 18, 22, 0);
+
+  // "COMMENT" letter cascade
+  // "AI" big bouncy pop
+
+  const aiSpring = sp(frame, fps, 0.65, "bouncy");
+  const aiOp = interpolate(aiSpring, [0, 0.5], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const aiScale = interpolate(aiSpring, [0, 0.55, 1], [0.4, 1.18, 1]);
+  const aiRot = interpolate(aiSpring, [0, 0.6, 1], [-12, 4, 0]);
+
+  // perpetual breath on AI
+  const aiBreath = 1 + Math.sin(frame * 0.08) * 0.02;
+
+  const subOp = fadeIn(frame, 60, 14);
+  const subY = tween(frame, 60, 22, 24, 0);
+
+  const repoSpring = sp(frame, fps, 3.1, "snappy");
+  const repoOp = interpolate(repoSpring, [0, 0.5], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const repoY = interpolate(repoSpring, [0, 1], [40, 0]);
+
+  // jail bars sweep out
+  const finalOp = fadeIn(frame, 150, 14);
+  const finalY = tween(frame, 150, 22, 28, 0);
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT }}>
+      <DarkBg frame={frame} tint="amber" />
+
+      {/* TOP — speech bubble pill */}
+      <div
+        style={{
+          position: "absolute",
+          top: SAFE_TOP,
+          left: SAFE_L,
+          right: SAFE_R,
+          opacity: kickerOp,
+          transform: `translateY(${kickerY}px)`,
+        }}
+      >
+        <Pill
+          bg="rgba(249,156,0,0.10)"
+          fg={C.amberSoft}
+          border="rgba(249,156,0,0.32)"
+          dot={C.amber}
+        >
+          DROP A COMMENT
+        </Pill>
+      </div>
+
+      {/* MASSIVE "AI" with COMMENT prefix */}
+      <div
+        style={{
+          position: "absolute",
+          left: SAFE_L,
+          right: SAFE_R,
+          top: 420,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: MONO,
+            fontSize: 30,
+            color: C.fgMuted,
+            letterSpacing: "0.18em",
+            fontWeight: 600,
+            marginBottom: 8,
+            opacity: fadeIn(frame, 10, 12),
+          }}
+        >
+          Comment
+        </div>
+
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 420,
+            fontWeight: 900,
+            letterSpacing: "-0.07em",
+            lineHeight: 0.84,
+            color: C.amber,
+            opacity: aiOp,
+            transform: `scale(${aiScale * aiBreath}) rotate(${aiRot}deg)`,
+            transformOrigin: "left center",
+            textShadow: `0 0 80px ${C.amberGlow}`,
+          }}
+        >
+          AI
+        </div>
+
+        <div
+          style={{
+            marginTop: 6,
+            opacity: subOp,
+            transform: `translateY(${subY}px)`,
+            fontFamily: FONT,
+            fontSize: 36,
+            fontWeight: 600,
+            color: C.fg,
+            letterSpacing: "-0.02em",
+            lineHeight: 1.18,
+            maxWidth: 920,
+          }}
+        >
+          → I&apos;ll send the repo + a starter prompt.
+        </div>
+      </div>
+
+      {/* repo card */}
+      <div
+        style={{
+          position: "absolute",
+          left: SAFE_L,
+          right: SAFE_R,
+          top: 1140,
+          opacity: repoOp,
+          transform: `translateY(${repoY}px)`,
+        }}
+      >
+        <div
+          style={{
+            background: C.surface,
+            border: `1px solid ${C.borderLoud}`,
+            borderRadius: 18,
+            padding: "18px 22px",
+            display: "flex",
+            alignItems: "center",
+            gap: 14,
+            boxShadow:
+              "0 18px 40px -14px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06)",
+          }}
+        >
+          <svg width="32" height="32" viewBox="0 0 24 24" fill={C.fg}>
+            <path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.44 9.79 8.21 11.39.6.11.82-.26.82-.58v-2.04c-3.34.73-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.09-.74.08-.73.08-.73 1.21.09 1.85 1.24 1.85 1.24 1.07 1.84 2.81 1.31 3.5 1 .11-.78.42-1.31.76-1.61-2.66-.3-5.46-1.33-5.46-5.93 0-1.31.47-2.38 1.24-3.22-.13-.31-.54-1.53.11-3.18 0 0 1.01-.32 3.31 1.23a11.5 11.5 0 0 1 6.02 0c2.3-1.55 3.31-1.23 3.31-1.23.65 1.65.24 2.87.12 3.18.77.84 1.24 1.91 1.24 3.22 0 4.61-2.81 5.62-5.48 5.92.43.37.81 1.1.81 2.22v3.29c0 .32.22.7.83.58A12 12 0 0 0 24 12c0-6.63-5.37-12-12-12z" />
+          </svg>
+          <div
+            style={{
+              fontFamily: MONO,
+              fontSize: 22,
+              fontWeight: 600,
+              color: C.fg,
+            }}
+          >
+            github.com/alchaincyf/huashu-design
+          </div>
+        </div>
+      </div>
+
+      {/* FINAL line — way out */}
+      <div
+        style={{
+          position: "absolute",
+          left: SAFE_L,
+          right: SAFE_R,
+          top: 1280,
+          opacity: finalOp,
+          transform: `translateY(${finalY}px)`,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: FONT,
+            fontSize: 38,
+            fontWeight: 700,
+            letterSpacing: "-0.025em",
+            lineHeight: 1.1,
+            color: C.fg,
+          }}
+        >
+          Stuck in Claude Design{" "}
+          <span
+            style={{
+              position: "relative",
+              padding: "0 6px",
+              color: C.red,
+              fontWeight: 800,
+            }}
+          >
+            usage jail
+            <span
+              style={{
+                position: "absolute",
+                left: 0,
+                right: 0,
+                bottom: 6,
+                height: 4,
+                background: C.red,
+                opacity: 0.35,
+              }}
+            />
+          </span>
+          ?
+          <br />
+          <span style={{ color: C.amber }}>This is your way out.</span>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ═══════════════════════════════════════════════════════════════════════════
+// MAIN COMPOSITION
+// ═══════════════════════════════════════════════════════════════════════════
+
+export const HuashuReel: React.FC = () => {
+  return (
+    <AbsoluteFill
+      style={{
+        background: C.bg,
+        fontFamily: FONT,
+        color: C.fg,
+      }}
+    >
+      {/* VOICEOVER — runs the entire composition */}
+      {/* REFERENCE-STRIP: <Audio> tag removed — bring your own voiceover */}
+
+      <Sequence from={SCENES.S1.from} durationInFrames={SCENES.S1.dur}>
+        <Scene1 />
+      </Sequence>
+      <Sequence from={SCENES.S2.from} durationInFrames={SCENES.S2.dur}>
+        <Scene2 />
+      </Sequence>
+      <Sequence from={SCENES.S3.from} durationInFrames={SCENES.S3.dur}>
+        <Scene3 />
+      </Sequence>
+      <Sequence from={SCENES.S4.from} durationInFrames={SCENES.S4.dur}>
+        <Scene4 />
+      </Sequence>
+      <Sequence from={SCENES.S5.from} durationInFrames={SCENES.S5.dur}>
+        <Scene5 />
+      </Sequence>
+      <Sequence from={SCENES.S6.from} durationInFrames={SCENES.S6.dur}>
+        <Scene6 />
+      </Sequence>
+      <Sequence from={SCENES.S7.from} durationInFrames={SCENES.S7.dur}>
+        <Scene7 />
+      </Sequence>
+      <Sequence from={SCENES.S8.from} durationInFrames={SCENES.S8.dur}>
+        <Scene8 />
+      </Sequence>
+      <Sequence from={SCENES.S9.from} durationInFrames={SCENES.S9.dur}>
+        <Scene9 />
+      </Sequence>
+      <Sequence from={SCENES.S10.from} durationInFrames={SCENES.S10.dur}>
+        <Scene10 />
+      </Sequence>
+      <Sequence from={SCENES.S11.from} durationInFrames={SCENES.S11.dur}>
+        <Scene11 />
+      </Sequence>
+
+      {/* SUBTLE GRAIN — global */}
+      <NoiseGrain opacity={0.04} />
+    </AbsoluteFill>
+  );
+};
+
+// keep power2Out referenced to avoid unused-import lint (export reusable curve)
+export const huashuEasings = { expoOut, power2Out };