dsh-drawai 0.3.3 → 0.4.0

package/lib/motion/shotcraft/upstream/demos/typography/brace-expand/BraceExpand.tsx

@@ -0,0 +1,143 @@
+// brace-expand — Brace Expand Reveal 括号拉幕
+// 一对紧贴的花括号先小字号出现在正中，随即带一次过冲向左右弹开并放大到标题级，括号之间的标题像被拉开的幕布
+// 一样从中间露出（clip 宽度严格绑括号间距），落定后字距再细微松弛。
+//
+// 第二轮重设计（午夜 · 开发者发布会字卡）：
+// - look = midnight。画面是一张技术产品发布字卡：等宽 300px 电光蓝花括号（带泛光）夹住 164px 800 字重的
+//   品牌名「video-shotcraft」（全小写，字宽贴满括号内腔）；上方等宽眉题「// shot recipes for your agent」、
+//   下方副标（品牌短句 Frame motion. Craft the shot.）逐词浮现。背景是编辑器式点阵网格
+//   （径向渐隐）+ 顶光 + 地平线光带，括号下方一道冷光反射。
+// - 开场：第 0 帧画面中心已有一个闪烁的输入光标（编辑器语感，不是空帧）；6f 光标被一对紧贴的 0.4 倍小括号
+//   "{}" 硬切替换（符号啪地在那儿，不淡入）——先建立"这是一对括号"。
+// - 主动作：14f 起物理弹簧 ex（damping 14 / stiffness 130：起跳后 ~8f 到位、~11f 过冲峰 ≈9%、一次回弹）；
+//   sc = mix(0.4, 1, ex)，幕布半宽 x = (HALF−内缘)·ex·sc，位移与放大乘在一起（放大本身也在推开括号）；
+//   括号中心 = ±(x + 内缘·sc)，文字 clip 宽度 = 2x，严格绑括号内缘，括号与文字共用同一个 sc。括号按水平速度加方向性运动模糊，落定为 0。
+// - 余波：落定后字距 −0.05em → −0.03em 松弛（呼一口气）、括号泛光从峰值回落；眉题与副标随后入场。
+//
+// 时间表（30fps，共 120f）：
+//   0–6     光标闪烁（中心，第 0 帧即在）
+//   6–14    小括号 "{}" 硬切出现、静置 8f
+//   14–38   弹开：弹簧 ~22f 到位、~25f 过冲峰 ≈9%、~38f 收敛；文字从中间被"拉"出来
+//   40–64   松弛：字距 −0.05→−0.03em（smooth）、泛光回落
+//   44–80   眉题字距收拢入场（44f）、副标逐词浮现（54f 起）
+//   80–120  hold：整幅极缓前推 1→1.012
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, SpeedBlur, mix, ramp } from '../../_fixtures/Polish';
+import { LOOKS, Stage, TextReveal, alpha, glow, springAt, type } from '../../_fixtures/Look';
+import { BRAND, PITCH } from '../../_fixtures/Brand';
+
+export const BRACE_EXPAND_DURATION = 120;
+
+const L = LOOKS.midnight;
+const CY = 520; // 标题中线
+const HALF = 676; // 括号中心最终半距（px）
+const BRACE_FS = 300; // 括号最终字号
+const BRACE_INNER = 64; // 括号字形中心到内缘的距离（×sc），clip 从这里起算
+const TITLE = BRAND.name; // 字标全小写
+const TITLE_FS = 164; // 字宽 ≈ 内腔宽 2·(HALF−内缘)：幕布拉到头才露全（换文案要同步调 HALF 或字号）
+const APPEAR = 6;
+const EXPAND = 14;
+
+const expandAt = (f: number) => (f < EXPAND ? 0 : springAt(f, EXPAND, { damping: 14, stiffness: 130 }));
+// 幕布半宽 x = (HALF − 内缘)·ex·sc；括号中心 = ±(x + 内缘·sc)——ex=0 时两只括号内缘相贴成 "{}"
+const braceX = (f: number) => {
+  const ex = expandAt(f);
+  return (HALF - BRACE_INNER) * ex * mix(0.4, 1, ex);
+};
+
+const Brace: React.FC<{ ch: string; x: number; sc: number; v: number; glowK: number }> = ({ ch, x, sc, v, glowK }) => (
+  <SpeedBlur vx={v} amount={0.22} max={16}>
+    <div style={{
+      position: 'absolute', left: 960 + x, top: CY, transform: `translate(-50%, -52%) scale(${sc.toFixed(4)})`,
+      fontFamily: FONT.mono, fontSize: BRACE_FS, fontWeight: 500, lineHeight: 1, color: L.accent,
+      textShadow: glow(L.accent, 0.5 + 0.5 * glowK),
+    }}>{ch}</div>
+  </SpeedBlur>
+);
+
+export const BraceExpand: React.FC = () => {
+  const frame = useCurrentFrame();
+  const on = frame >= APPEAR;
+  const ex = expandAt(frame);
+  const sc = mix(0.4, 1, ex);
+  const x = braceX(frame);
+  const v = braceX(frame + 0.5) - braceX(frame - 0.5); // 括号水平速度（px/帧）
+
+  // 文字揭示宽度：严格绑括号内缘（= 2x），两侧 14px 羽化（窄时跟着收）
+  const clipW = Math.max(0, 2 * x);
+  const bx = x + BRACE_INNER * sc; // 括号中心
+  const feather = Math.min(14, clipW / 4);
+  const mask = `linear-gradient(90deg, transparent 0px, #000 ${feather}px, #000 calc(100% - ${feather}px), transparent 100%)`;
+
+  // 落定后字距松弛 + 泛光回落（泛光峰值跟着过冲走）
+  const relax = ramp(frame, 40, 24, EASE.smooth);
+  const ls = mix(-0.05, -0.03, relax);
+  const glowK = Math.min(1, ex) * (1 - ramp(frame, 34, 30, EASE.out));
+
+  // 光标：0–6f 闪烁
+  const caretOn = !on && Math.floor(frame / 3) % 2 === 0;
+
+  const cam = 1 + 0.012 * ramp(frame, 70, 50, EASE.smooth);
+
+  return (
+    <AbsoluteFill style={{ background: L.bg[1], overflow: 'hidden' }}>
+      <Stage look={L} keyLight={{ x: 0.5, y: 0.02 }} fill={null} horizon={0.66} breathe={0.4}>
+        {/* 编辑器点阵：32px 栅格，中心亮、四周隐去 */}
+        <div style={{
+          position: 'absolute', inset: 0,
+          backgroundImage: `radial-gradient(circle, ${alpha('#a9bcff', 0.16)} 1.4px, transparent 1.8px)`,
+          backgroundSize: '32px 32px', backgroundPosition: '16px 8px',
+          WebkitMaskImage: 'radial-gradient(ellipse 60% 55% at 50% 48%, #000 0%, rgba(0,0,0,0.35) 55%, transparent 85%)',
+          maskImage: 'radial-gradient(ellipse 60% 55% at 50% 48%, #000 0%, rgba(0,0,0,0.35) 55%, transparent 85%)',
+        }} />
+        {/* 括号下方的冷光反射带（随弹开展宽） */}
+        <div style={{
+          position: 'absolute', left: 960 - (x + 120), width: 2 * (x + 120), top: CY + 150, height: 90,
+          background: `radial-gradient(ellipse 50% 50% at 50% 50%, ${alpha(L.accent, 0.22 * Math.min(1, ex))} 0%, ${alpha(L.accent, 0)} 70%)`,
+        }} />
+      </Stage>
+
+      <div style={{ position: 'absolute', inset: 0, transform: `scale(${cam.toFixed(5)})`, transformOrigin: `50% ${CY}px` }}>
+        {/* 眉题：等宽注释 */}
+        <div style={{
+          position: 'absolute', left: 0, right: 0, top: CY - 248, textAlign: 'center', color: L.accent2,
+          ...type(32, 500, { mono: true }), letterSpacing: `${mix(0.5, 0.08, ramp(frame, 44, 20, EASE.snappy)).toFixed(3)}em`,
+          opacity: ramp(frame, 44, 14, EASE.out),
+        }}>// shot recipes for your agent</div>
+
+        {/* 标题：clip 宽度绑括号间距（幕布感，不是淡入/打字） */}
+        {on && (
+          <div style={{
+            position: 'absolute', left: 960 - clipW / 2, width: clipW, top: CY - 110, height: 220, overflow: 'hidden',
+            WebkitMaskImage: mask, maskImage: mask,
+          }}>
+            <div style={{
+              position: 'absolute', left: clipW / 2, top: 110, transform: `translate(-50%, -54%) scale(${sc.toFixed(4)})`,
+              fontFamily: FONT.sans, fontSize: TITLE_FS, fontWeight: 800, letterSpacing: `${ls.toFixed(4)}em`, lineHeight: 1,
+              whiteSpace: 'nowrap',
+              backgroundImage: 'linear-gradient(180deg, #ffffff 0%, #e8eeff 55%, #a9b9e8 100%)',
+              WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent', paddingBottom: 8,
+            }}>{TITLE}</div>
+          </div>
+        )}
+
+        {on && <Brace ch="{" x={-bx} sc={sc} v={-v} glowK={glowK} />}
+        {on && <Brace ch="}" x={bx} sc={sc} v={v} glowK={glowK} />}
+
+        {/* 开场光标 */}
+        {caretOn && (
+          <div style={{
+            position: 'absolute', left: 960 - 4, top: CY - 60, width: 8, height: 120, borderRadius: 2,
+            background: L.accent, boxShadow: glow(L.accent, 0.6),
+          }} />
+        )}
+
+        {/* 副标 */}
+        <div style={{ position: 'absolute', left: 0, right: 0, top: CY + 170, textAlign: 'center', color: L.ink2, ...type(44, 450) }}>
+          <TextReveal text={PITCH.en.motto} by="word" variant="blur" start={54} each={16} gap={3} />
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/typography/brand-ink-open/BrandInkOpen.tsx

@@ -0,0 +1,134 @@
+// brand-ink-open —— 墨线十字准星描画 → 字标逐字 letterpress → 打字机副标
+// → 满一秒静止 → 上浮消散。品牌开场第一拍：任何产品画面出现前先立名号。
+// 参考实现从 template SceneOpen 帧 0–83 段剥离，self-contained：
+// 十字准星 SVG pathLength dashoffset 描画后淡出；字标逐字从大 scale 压到 1 +
+// blur→0（入场三件套定式），字底强调色 glint 短划闪过；kicker mono 打字机
+// 逐字符 + 强调色块光标周期闪；46–76f 整整 1s 静止 hold；退场 7f 上浮+缩+淡。
+// 品牌名/副标/强调色可换成目标品牌。demo 立的是 video-shotcraft：字标全小写（保留纸墨 letterpress 的衬线字），副标打品牌短句。
+import { AbsoluteFill, interpolate, useCurrentFrame, Easing } from 'remotion';
+import { BRAND, PITCH } from '../../_fixtures/Brand';
+
+export const BRAND_INK_OPEN_DURATION = 104;
+
+const SERIF = 'ui-serif, Georgia, "Times New Roman", serif';
+const MONO = 'ui-monospace, SFMono-Regular, Menlo, monospace';
+const INK = 'oklch(18% 0.006 82)';
+const AMBER = 'oklch(52% 0.115 65)';
+const INK2 = 'oklch(50% 0.006 82)';
+
+const WORDMARK = BRAND.name; // 'video-shotcraft'
+const KICKER = PITCH.en.motto; // 'Frame motion. Craft the shot.'（textTransform 转大写）
+
+export const BrandInkOpen: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // --- crosshair draw-on (SVG pathLength = 100): vertical 0→9f, horizontal
+  // 8→18f, then fades 24→34f so it doesn't fight the wordmark ---
+  const vDraw = interpolate(frame, [0, 9], [100, 0], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.bezier(0.3, 0, 0.2, 1),
+  });
+  const hDraw = interpolate(frame, [8, 18], [100, 0], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.linear,
+  });
+  const crossFade = interpolate(frame, [24, 34], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+
+  // --- kicker typewriter (28 → ~43), 0.7 frames per char (decorative small
+  // text only — real interaction typing should be 3f/char, see type-and-filter) ---
+  const perChar = 0.7;
+  const kickStart = 28;
+  const kickChars = Math.floor(Math.max(0, frame - kickStart) / perChar);
+  const kickDone = kickStart + KICKER.length * perChar;
+  const cursorOn = (() => {
+    if (frame < kickStart) return false;
+    if (frame < kickDone) return true;
+    if (frame > 95) return false;
+    const b = frame - kickDone;
+    return Math.floor(b / 2) % 2 === 0;
+  })();
+
+  // --- brand group rests fully-on for ~1s (wordmark completes ~64f; the last
+  // glyph is done at 10+14*3+12=64), then dissolves out (97 → 104): lift +
+  // shrink + fade. This leaves a clean ~33-frame hold of the COMPLETE title
+  // (64→97), per the card's "完整标题停留 ~30 帧" requirement. ---
+  const brandOut = interpolate(frame, [97, 104], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.bezier(0.4, 0, 0.5, 1),
+  });
+  const brandOpacity = 1 - brandOut;
+  const groupY = -brandOut * 40;
+  const groupScale = 1 - brandOut * 0.12;
+
+  return (
+    <AbsoluteFill style={{ backgroundColor: '#faf7f2', justifyContent: 'center', alignItems: 'center' }}>
+      <div style={{ textAlign: 'center', opacity: brandOpacity, transform: `translateY(${groupY}px) scale(${groupScale})` }}>
+        {/* crosshair drawn by an invisible amber pen */}
+        <svg width={64} height={64} viewBox="0 0 64 64" style={{ display: 'block', margin: '0 auto 34px', opacity: crossFade }}>
+          <line
+            x1={32} y1={2} x2={32} y2={62}
+            stroke={AMBER} strokeWidth={5} strokeLinecap="round"
+            pathLength={100} strokeDasharray={100} strokeDashoffset={vDraw}
+          />
+          <line
+            x1={2} y1={32} x2={62} y2={32}
+            stroke={AMBER} strokeWidth={5} strokeLinecap="round"
+            pathLength={100} strokeDasharray={100} strokeDashoffset={hDraw}
+          />
+        </svg>
+
+        {/* wordmark: glyph-by-glyph letterpress with amber under-glint */}
+        <div
+          style={{
+            fontFamily: SERIF, fontSize: 132, fontWeight: 600, color: INK,
+            letterSpacing: '-0.01em', lineHeight: 1, whiteSpace: 'pre',
+            display: 'inline-flex', alignItems: 'flex-end',
+          }}
+        >
+          {WORDMARK.split('').map((ch, i) => {
+            const delay = 10 + i * 3;
+            const t = interpolate(frame, [delay, delay + 12], [0, 1], {
+              extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.bezier(0.2, 0.7, 0.25, 1),
+            });
+            const glintCenter = delay + 12;
+            const glint = interpolate(frame, [glintCenter - 4, glintCenter, glintCenter + 4], [0, 1, 0], {
+              extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+            });
+            return (
+              <span
+                key={i}
+                style={{
+                  position: 'relative', display: 'inline-block', opacity: t,
+                  transform: `scale(${1.6 - 0.6 * t})`, transformOrigin: 'center bottom',
+                  filter: `blur(${(1 - t) * 6}px)`,
+                }}
+              >
+                {ch === ' ' ? ' ' : ch}
+                <span
+                  style={{
+                    position: 'absolute', left: '50%', bottom: -6, transform: 'translateX(-50%)',
+                    width: `${glint * 100}%`, height: 2, background: AMBER, opacity: glint, borderRadius: 2,
+                  }}
+                />
+              </span>
+            );
+          })}
+        </div>
+
+        {/* mono kicker typewriter + amber block cursor */}
+        <div
+          style={{
+            fontFamily: MONO, fontSize: 26, letterSpacing: '0.14em', color: INK2,
+            marginTop: 30, textTransform: 'uppercase', height: 30,
+            display: 'flex', justifyContent: 'center', alignItems: 'center',
+          }}
+        >
+          <span style={{ whiteSpace: 'pre' }}>{KICKER.slice(0, kickChars)}</span>
+          <span
+            style={{
+              display: 'inline-block', width: 14, height: 24, marginLeft: 4,
+              background: AMBER, opacity: cursorOn ? 0.85 : 0,
+            }}
+          />
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/typography/countdown-arc-scatter/CountdownArcScatter.tsx

@@ -0,0 +1,217 @@
+// countdown-arc-scatter — 表盘数字扫过：等大数字沿大弧切向排布，整盘扫过 96° 后急停，
+// "5" 停在弧顶随即平移落位成标题首字符，其余数字带 blur 原地散去，标题逐词模糊淡入、末词转强调色。
+//
+// 第二轮重设计（瑞士网格 · 纸面仪表）：
+// - look = paper（暖白纸 · 墨 · 朱红）。按 1920×1080 原生作画（不再 480×270 放大）：
+//   表盘半径 700px、圆心在画面下方（960,1150），弧顶在 y=450，可视角窗 ±70° 让整条弧横跨画面 ~70%；
+//   9 个数字 112px Helvetica 粗体 tabular、切向排布，像刻在一只巨大的纸面仪表上。
+// - 盘面层次：数字内侧一圈随盘同速转的细刻度（每 4° 一根、数字位加长）+ 外侧一道静止的发丝弧与
+//   朱红读数标（盘面散去后以 35% 留在海报上，标题像是从仪表上读出来的）；
+//   朱红指针以 0.35 倍差速回正（"盘 vs 指针"），是扫动段唯一的强调色。
+// - 扫动：先 5f 反向蓄力 3°（anticipation），再一记物理弹簧扫 99°→0°（damping 12 / stiffness 60，
+//   ~2° 一次可见过冲后急停，像真表针）；快速段每个数字按切向速度做方向性运动模糊。
+// - 落位："5" 在回弹落定的同一刻起飞（不留静置），20f 不对称 in-out 平移 + 112→150px 放大到
+//   标题首字符槽；其余数字原地失焦淡出（不位移，不和 "5" 抢戏），刻度/指针同步退场。
+// - 标题「5 min to install」150px，逐词 blur 淡入（窗重叠 = 一句话），末词 install 转朱红是全片
+//   唯一的颜色事件；下方 mono 34px 命令行 `$ npx skills add Vincentwei1021/video-shotcraft`（README 里的真实安装命令）补一句产品事实。
+// - 瑞士网格框：顶部发丝线 + 左标签 SETUP TIME / 右侧 video-shotcraft 字标，全程 0.6% 极缓推近。
+//
+// 时间表（30fps，共 100f）：
+//   0–5     预备：盘面已在画面里（第 0 帧有数字/刻度），反向蓄力 3°
+//   5–34    扫动：弹簧 99°→0°，~24f 冲过 0°（≈−2°）、~34f 落定
+//   28–44   其余数字 / 刻度 / 指针失焦淡出（早于 "5" 起飞 4f 先让路）
+//   32–52   "5" 平移 + 放大落位
+//   42–66   标题三词逐词模糊淡入（"5" 落进一句正在成形的话）；64–76 install → 朱红
+//   62–78   命令行升起
+//   78–100  hold 22f
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, SpeedBlur, ramp, mix } from '../../_fixtures/Polish';
+import { LOOKS, Stage, alpha, springAt } from '../../_fixtures/Look';
+import { ShotcraftWordmark } from '../../_fixtures/Brand';
+
+export const COUNTDOWN_ARC_SCATTER_DURATION = 100;
+
+const L = LOOKS.paper;
+const GROT = '"Helvetica Neue", Helvetica, Arial, sans-serif';
+const NUMS = [45, 35, 28, 22, 17, 10, 5, 4, 3]; // 递减不等距 = 真量程；"5" 在 i=6
+const HERO = 6;
+const SP = 24; // 相邻数字角距
+const R = 700; // 数字所在半径
+const CX = 960;
+const CY = 1150; // 圆心：弧顶 y = 450
+const NUM_SIZE = 112;
+const TITLE_SIZE = 150;
+const ARC = 800; // 外侧发丝弧半径（弧顶 y = 350）
+const SLOT_EM = 0.6; // "5" 的固定槽宽（em）：飞行的 5 与标题槽中心严格对齐
+const TITLE_Y = 600;
+const WORDS: { text: string; win: [number, number] }[] = [
+  { text: 'min', win: [42, 56] },
+  { text: 'to', win: [46, 60] },
+  { text: 'install', win: [50, 66] },
+];
+const GAP_EM = 0.24;
+// 标题总宽估算（Helvetica Neue Bold 字宽，-0.03em 字距）：只用于整行居中
+const TITLE_EM = SLOT_EM + GAP_EM * 3 + 1.69 + 0.88 + 2.68;
+const TITLE_X0 = CX - (TITLE_EM * TITLE_SIZE) / 2;
+const SLOT_CX = TITLE_X0 + (SLOT_EM * TITLE_SIZE) / 2;
+
+// 盘面转角：0–5 反向蓄力 +3°，5 起弹簧扫到 0（~2° 过冲）
+const rotAt = (f: number) => {
+  const pre = 96 + 3 * ramp(f, 0, 5, EASE.swift);
+  if (f <= 5) return pre;
+  return 99 * (1 - springAt(f, 5, { damping: 12, stiffness: 60 }));
+};
+const HAND0 = 32;
+const handAt = (f: number) => ramp(f, HAND0, 20, EASE.swift);
+const outAt = (f: number) => ramp(f, 28, 16, EASE.swift);
+
+const deg = Math.PI / 180;
+const polar = (a: number, r: number) => ({ x: CX + Math.sin(a * deg) * r, y: CY - Math.cos(a * deg) * r });
+const windowOp = (pa: number) => Math.min(1, Math.max(0, (70 - Math.abs(pa)) / 22)); // 弧两端按角度淡入淡出
+
+// 第 i 个数字：中心位置 / 自转 / 透明度 / 字号
+const numState = (i: number, f: number) => {
+  const pa = (i - HERO) * SP + rotAt(f);
+  const p = polar(pa, R);
+  let { x, y } = p;
+  let rSelf = pa;
+  let op = windowOp(pa);
+  let size = NUM_SIZE;
+  if (i === HERO) {
+    const h = handAt(f);
+    x = mix(x, SLOT_CX, h);
+    y = mix(y, TITLE_Y, h);
+    rSelf *= 1 - h;
+    size = mix(NUM_SIZE, TITLE_SIZE, h);
+    op = Math.max(op, h);
+  } else {
+    op *= 1 - outAt(f);
+  }
+  return { x, y, rSelf, op, size };
+};
+
+const TICKS = Array.from({ length: 61 }, (_, k) => (k - 30) * 4 - 48); // 盘面角 −168°..+72°（覆盖扫动全程）
+
+export const CountdownArcScatter: React.FC = () => {
+  const frame = useCurrentFrame();
+  const rot = rotAt(frame);
+  const out = outAt(frame);
+  const push = 1 + 0.006 * ramp(frame, 0, 100, EASE.smooth);
+  const frameIn = ramp(frame, 0, 14, EASE.out);
+  const tint = ramp(frame, 64, 12, EASE.swift); // install → 朱红
+  const cmd = ramp(frame, 62, 16, EASE.snappy);
+
+  return (
+    <AbsoluteFill>
+      <Stage look={L} keyLight={{ x: 0.5, y: 0.3 }} fill={null} vignette={0.14} grain={0.05} />
+
+      {/* 瑞士网格框：顶部发丝线 + 标签 */}
+      <div style={{ position: 'absolute', left: 120, right: 120, top: 150, height: 1.5, background: alpha(L.ink, 0.5), transform: `scaleX(${frameIn})`, transformOrigin: 'left' }} />
+      <div style={{
+        position: 'absolute', top: 104, left: 120, fontFamily: GROT, fontSize: 28, fontWeight: 700,
+        letterSpacing: '0.14em', color: L.ink, opacity: frameIn,
+      }}>
+        SETUP TIME
+      </div>
+      {/* 右上：video-shotcraft 字标（全小写），与左标签同一基线带 */}
+      <div style={{ position: 'absolute', top: 104, right: 120, opacity: frameIn }}>
+        <ShotcraftWordmark size={28} markScale={1.3} gap={12} tone="light" color={L.ink} />
+      </div>
+
+      <AbsoluteFill style={{ transform: `scale(${push})`, transformOrigin: '50% 50%' }}>
+        {/* 盘面：随盘转的细刻度 + 静止发丝弧 + 0.35 倍差速的朱红指针 */}
+        <svg width={1920} height={1080} style={{ position: 'absolute', inset: 0, opacity: 1 - out }}>
+          {TICKS.map((a, k) => {
+            const pa = a + rot;
+            const op = windowOp(pa);
+            if (op <= 0) return null;
+            const major = ((a % SP) + SP) % SP === 0;
+            const p0 = polar(pa, major ? 584 : 600);
+            const p1 = polar(pa, 620);
+            return (
+              <line key={k} x1={p0.x} y1={p0.y} x2={p1.x} y2={p1.y}
+                stroke={L.ink} strokeOpacity={op * (major ? 0.7 : 0.28)} strokeWidth={major ? 3 : 1.5} strokeLinecap="round" />
+            );
+          })}
+          {(() => {
+            const a = rot * 0.35;
+            const p0 = polar(a, 490), p1 = polar(a, 566);
+            return <line x1={p0.x} y1={p0.y} x2={p1.x} y2={p1.y} stroke={L.accent} strokeWidth={6} strokeLinecap="round" />;
+          })()}
+        </svg>
+
+        {/* 外侧静止发丝弧 + 朱红读数标：盘面散去后仍以 35% 留在海报上，作"仪表读数"的记忆 */}
+        <svg width={1920} height={1080} style={{ position: 'absolute', inset: 0, opacity: (1 - out * 0.65) * frameIn }}>
+          <path
+            d={`M ${polar(-70, ARC).x} ${polar(-70, ARC).y} A ${ARC} ${ARC} 0 0 1 ${polar(70, ARC).x} ${polar(70, ARC).y}`}
+            fill="none" stroke={alpha(L.ink, 0.3)} strokeWidth={1.5}
+          />
+          <path d={`M ${CX - 13} ${CY - ARC + 8} L ${CX + 13} ${CY - ARC + 8} L ${CX} ${CY - ARC + 30} Z`} fill={L.accent} />
+        </svg>
+
+        {/* 数字 */}
+        {NUMS.map((n, i) => {
+          const s = numState(i, frame);
+          if (s.op <= 0.002) return null;
+          const a = numState(i, frame - 0.5);
+          const b = numState(i, frame + 0.5);
+          const isHero = i === HERO;
+          const blurOut = isHero ? 0 : out * 6;
+          const B = 360; // 局部盒：方向性运动模糊只作用在数字附近
+          return (
+            <div key={i} style={{ position: 'absolute', left: s.x - B / 2, top: s.y - B / 2, width: B, height: B }}>
+              <SpeedBlur vx={b.x - a.x} vy={b.y - a.y} amount={0.16} max={14}>
+                <div style={{
+                  position: 'absolute', left: B / 2, top: B / 2, width: `${SLOT_EM}em`, textAlign: 'center',
+                  fontFamily: GROT, fontWeight: 700, fontSize: s.size, lineHeight: 1, letterSpacing: '-0.03em',
+                  fontVariantNumeric: 'tabular-nums', color: L.ink, opacity: s.op,
+                  transform: `translate(-50%,-50%) rotate(${s.rSelf.toFixed(3)}deg)`,
+                  filter: blurOut > 0.05 ? `blur(${blurOut.toFixed(2)}px)` : undefined,
+                  whiteSpace: 'nowrap',
+                }}>
+                  {n}
+                </div>
+              </SpeedBlur>
+            </div>
+          );
+        })}
+
+        {/* 标题：首槽留给飞来的 "5"，其余三词逐词模糊淡入 */}
+        <div style={{
+          position: 'absolute', left: TITLE_X0, top: TITLE_Y, transform: 'translateY(-50%)', display: 'flex', alignItems: 'center',
+          fontFamily: GROT, fontWeight: 700, fontSize: TITLE_SIZE, lineHeight: 1, letterSpacing: '-0.03em', color: L.ink, whiteSpace: 'nowrap',
+        }}>
+          <span style={{ display: 'inline-block', width: `${SLOT_EM}em` }} />
+          {WORDS.map((w, k) => {
+            const p = ramp(frame, w.win[0], w.win[1] - w.win[0], EASE.out);
+            const last = k === WORDS.length - 1;
+            return (
+              <span key={k} style={{
+                display: 'inline-block', marginLeft: `${GAP_EM}em`, opacity: p,
+                transform: `translateY(${((1 - p) * 0.12).toFixed(3)}em)`,
+                filter: p < 0.999 ? `blur(${((1 - p) * 10).toFixed(2)}px)` : undefined,
+                color: last ? `color-mix(in srgb, ${L.accent} ${(tint * 100).toFixed(1)}%, ${L.ink})` : undefined,
+              }}>
+                {w.text}
+              </span>
+            );
+          })}
+        </div>
+
+        {/* 命令行 */}
+        <div style={{
+          position: 'absolute', left: 0, right: 0, top: TITLE_Y + 130, display: 'flex', justifyContent: 'center',
+          opacity: cmd, transform: `translateY(${(1 - cmd) * 24}px)`,
+        }}>
+          <div style={{
+            fontFamily: FONT.mono, fontSize: 34, color: L.ink2, letterSpacing: '0.01em', padding: '14px 30px',
+            border: `1.5px solid ${alpha(L.ink, 0.18)}`, borderRadius: 12, background: alpha('#ffffff', 0.35),
+          }}>
+            <span style={{ color: L.accent }}>$</span> npx skills add Vincentwei1021/video-shotcraft
+          </div>
+        </div>
+      </AbsoluteFill>
+    </AbsoluteFill>
+  );
+};