dsh-drawai 0.3.4 → 0.4.0

package/lib/motion/shotcraft/upstream/demos/typography/flying-words/FlyingWords.tsx

@@ -0,0 +1,198 @@
+// flying-words — 词语纵深隧道：关键词在远处纵深生成，沿 z 轴向相机飞来擦身而过，透明度按
+// [0,1,0.5,0.2,0] 生命周期曲线变化；相机不动、元素动，spawn 完全确定性、跑满 2 整圈首尾无缝。
+//
+// 第二轮重设计（深蓝夜 · 光速隧道 + 前景字标）：
+// - look = midnight（深蓝黑 · 电光蓝）。按 1920×1080 原生作画（不再 480×270 放大），透视手算
+//   s = P/(P−z)（P=4400，z −7000→+3200，与 CSS perspective 逐点等价），所以每个元素都能按屏幕速度做效果。
+// - 三层纵深：① 隧道壁——10 道扁椭圆发丝环同速朝镜头推进（隧道的"结构"，近处变粗变淡出画）；
+//   ② 光速流线——56 粒尘埃画成沿径向拉长的线段（长度 = 本帧屏幕位移，越近越长），速度感的主力；
+//   ③ 22 个产品能力关键词：黄金角铺位、远小近大、远端大气雾失焦、近端按速度沿运动方向拖出 6 层渐虚残影
+//   （text-shadow 方向拖尾，比全屏 SVG 滤镜便宜得多）+ 冲到眼前时失焦。
+// - 字的层次：冷白三阶 sans 700 为主，6 个关键词用衬线斜体，4 个强调词电光蓝带泛光（光只给强调词）。
+// - 隧道尽头：中心电光蓝光晕按 2 次/片呼吸（与 CYCLES 对齐），整条隧道以 sin(2πt) 极缓滚转 ±2.5°，
+//   画面无一刻静止但不晃（滚转是周期的，首尾一致）。
+// - 前景：中段生命曲线压到 0.5 就是为前景让位——demo 在正中压一组静态字标（mono 眉题 + 112px 标题 +
+//   一层径向暗幕；飞进字标椭圆区的词压到 20%），证明隧道作背景层不打架；字标静止 = 循环无缝。
+// - 品牌：眉题 = 镜刻标志 + video-shotcraft 小字，标题 = 品牌短句；词表混入 video-shotcraft 的能力词。
+//
+// 时间轴：t = frame / DURATION（末帧的下一帧 = 第 0 帧，真正无缝 loop）；CYCLES = 2 整圈。
+//   每个元素 u = (t·CYCLES + 相位) mod 1：0 远处生成 → 0.25 亮到满 → 0.6 压到半透 → 1 擦身出画。
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { FONT } from '../../_fixtures/Polish';
+import { LOOKS, SERIF, Stage, alpha } from '../../_fixtures/Look';
+import { BRAND, PITCH, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const FLYING_WORDS_DURATION = 180; // 6000ms @30fps
+
+const L = LOOKS.midnight;
+const CYCLES = 2; // 整数圈 → 首尾一致
+
+// 关键词表：换成项目自己的关键词即可，词数/字长接近就不影响节奏（这里是 video-shotcraft 的能力词）
+const WORDS = ['Timeline', 'Keyframes', 'Easing', 'Camera', 'Depth', 'Parallax', 'Motion blur', 'Springs',
+  'Layers', 'Shot cards', 'Typography', 'Lighting', 'Grain', 'Remotion', 'Beat grid', 'Stagger',
+  'Transitions', 'Color', 'Workbench', 'Audio sync', 'Storyboard', 'Orbit'];
+const N = WORDS.length;
+const ACCENT = new Set([3, 7, 12, 19]); // Camera / Springs / Grain / Audio sync
+const SERIF_IDX = new Set([1, 5, 10, 14, 17, 21]);
+const INKS = ['#f2f5ff', '#c3cbe2', '#8a95b5'];
+
+const P = 4400; // 透视距离
+const Z0 = -7000;
+const Z1 = 3200;
+const CX = 960;
+const CY = 540;
+
+const rand = (n: number) => {
+  const x = Math.sin(n * 127.1 + 311.7) * 43758.5453;
+  return x - Math.floor(x);
+};
+
+const ITEMS = WORDS.map((w, i) => {
+  // 黄金角铺开 + 半径避开正中（近处不堆成一团）
+  const a = i * 2.39996 + rand(i * 7 + 1) * 0.8;
+  const r = 330 + rand(i * 13 + 2) * 660;
+  const accent = ACCENT.has(i);
+  return {
+    text: w, accent, serif: SERIF_IDX.has(i),
+    size: 64 + rand(i + 3) * 56,
+    color: accent ? '#86a8ff' : INKS[Math.floor(rand(i + 5) * 3)],
+    x: Math.cos(a) * r, y: Math.sin(a) * r * 0.6, rz: (rand(i + 21) - 0.5) * 12, ph: i / N,
+  };
+});
+
+const DUST = Array.from({ length: 56 }, (_, i) => {
+  const a = i * 2.39996 + rand(i * 5 + 77) * 1.2;
+  const r = 180 + rand(i * 3 + 91) * 1500;
+  return { x: Math.cos(a) * r, y: Math.sin(a) * r * 0.62, ph: rand(i * 9 + 13), w: 1 + rand(i + 50) * 1.6 };
+});
+
+const RINGS = Array.from({ length: 10 }, (_, k) => ({ ph: k / 10 }));
+
+// 生命周期透明曲线 [0,1,0.5,0.2,0] @ [0,0.25,0.6,0.85,1]，分段线性
+const OP = [0, 1, 0.5, 0.2, 0];
+const OT = [0, 0.25, 0.6, 0.85, 1];
+const curve = (u: number) => {
+  for (let k = 0; k < 4; k++) {
+    if (u <= OT[k + 1]) return OP[k] + ((OP[k + 1] - OP[k]) * (u - OT[k])) / (OT[k + 1] - OT[k]);
+  }
+  return 0;
+};
+
+// z 线性推进；drift = 0.5 + u·1.35（远处收拢、越近越向外散开）；roll = 整条隧道的滚转角
+const project = (x: number, y: number, u: number, roll: number, drift = true) => {
+  const z = Z0 + (Z1 - Z0) * u;
+  const d = drift ? 0.5 + u * 1.35 : 1;
+  const s = P / (P - z);
+  const c = Math.cos(roll), sn = Math.sin(roll);
+  const rx = x * c - y * sn, ry = x * sn + y * c;
+  return { sx: CX + rx * d * s, sy: CY + ry * d * s, s };
+};
+
+export const FlyingWords: React.FC = () => {
+  const frame = useCurrentFrame();
+  const t = frame / FLYING_WORDS_DURATION;
+  const roll = (2.5 * Math.PI / 180) * Math.sin(t * Math.PI * 2);
+  const du = CYCLES / FLYING_WORDS_DURATION; // 每帧 u 的增量
+  const glowB = 0.82 + 0.14 * Math.sin(t * Math.PI * 4);
+
+  return (
+    <AbsoluteFill>
+      <Stage look={L} keyLight={{ x: 0.5, y: 0.5 }} fill={null} intensity={0.5} vignette={0.7} grain={0.08}>
+        {/* 隧道尽头光晕：呼吸 2 次/片，与 CYCLES 对齐 */}
+        <div style={{
+          position: 'absolute', left: CX - 520, top: CY - 360, width: 1040, height: 720, borderRadius: '50%', opacity: glowB,
+          background: `radial-gradient(ellipse 50% 50% at 50% 50%, ${alpha(L.light, 0.42)} 0%, ${alpha(L.light, 0.12)} 38%, ${alpha(L.light, 0)} 70%)`,
+        }} />
+      </Stage>
+
+      {/* ① 隧道壁 + ② 光速流线（一张 SVG） */}
+      <svg width={1920} height={1080} style={{ position: 'absolute', inset: 0 }}>
+        {RINGS.map((rg, k) => {
+          const u = (t * CYCLES + rg.ph) % 1;
+          const p = project(0, 0, u, roll, false);
+          const rx = 1150 * p.s;
+          const op = Math.min(1, u / 0.3) * (1 - Math.min(1, Math.max(0, (u - 0.55) / 0.3)));
+          if (op <= 0.01) return null;
+          return (
+            <ellipse key={`r${k}`} cx={CX} cy={CY} rx={rx} ry={rx * 0.6} fill="none"
+              stroke={L.accent} strokeOpacity={op * 0.16} strokeWidth={1 + p.s * 0.8}
+              transform={`rotate(${(roll * 180) / Math.PI} ${CX} ${CY})`} />
+          );
+        })}
+        {DUST.map((d, i) => {
+          const u = (t * CYCLES + d.ph) % 1;
+          const u0 = Math.max(0, u - du * 2.6);
+          const a = project(d.x, d.y, u0, roll);
+          const b = project(d.x, d.y, u, roll);
+          const op = curve(u) * 0.75;
+          if (op <= 0.01) return null;
+          return (
+            <line key={`d${i}`} x1={a.sx} y1={a.sy} x2={b.sx} y2={b.sy} stroke="#cfdcff" strokeOpacity={op}
+              strokeWidth={d.w * Math.min(2.4, b.s)} strokeLinecap="round" />
+          );
+        })}
+      </svg>
+
+      {/* ③ 关键词：远端雾、中段清晰、近端方向拖尾 + 失焦 */}
+      {ITEMS.map((it, i) => {
+        const u = (t * CYCLES + it.ph) % 1;
+        const p = project(it.x, it.y, u, roll);
+        const q = project(it.x, it.y, Math.max(0, u - du), roll);
+        const vx = p.sx - q.sx, vy = p.sy - q.sy; // 屏幕速度 px/帧
+        // 前景字标区（椭圆）里的词压到 20%：像被暗幕遮住，不和标题打架
+        const k = ((p.sx - CX) / 760) ** 2 + ((p.sy - CY) / 190) ** 2;
+        const occl = k < 1 ? 0.2 + 0.8 * k * k : 1;
+        const op = curve(u) * occl;
+        if (op <= 0.005) return null;
+        const fog = u < 0.22 ? (1 - u / 0.22) * 2.2 : 0;
+        const near = u > 0.86 ? (u - 0.86) * 60 : 0;
+        const blur = fog + near;
+        const sp = Math.hypot(vx, vy);
+        const trail = sp > 6
+          ? [1, 2, 3, 4, 5, 6].map((j) => {
+            const k = (j / 6) * 0.9 / p.s;
+            return `${(-vx * k).toFixed(1)}px ${(-vy * k).toFixed(1)}px ${(j * 0.8).toFixed(1)}px ${alpha(it.color, 0.2 - j * 0.026)}`;
+          }).join(', ')
+          : '';
+        const glowS = it.accent ? `0 0 18px ${alpha(L.accent, 0.55)}, 0 0 48px ${alpha(L.accent, 0.3)}` : '';
+        return (
+          <div key={i} style={{
+            position: 'absolute', left: p.sx, top: p.sy, whiteSpace: 'nowrap', lineHeight: 1,
+            transform: `translate(-50%,-50%) scale(${p.s.toFixed(4)}) rotate(${it.rz + (roll * 180) / Math.PI}deg)`,
+            fontFamily: it.serif ? SERIF : FONT.sans, fontStyle: it.serif ? 'italic' : undefined,
+            fontWeight: it.serif ? 500 : 700, fontSize: it.size, letterSpacing: it.serif ? '-0.01em' : '-0.03em',
+            color: it.color, opacity: op,
+            textShadow: [glowS, trail].filter(Boolean).join(', ') || undefined,
+            filter: blur > 0.05 ? `blur(${(blur / Math.max(0.6, p.s)).toFixed(2)}px)` : undefined,
+          }}>
+            {it.text}
+          </div>
+        );
+      })}
+
+      {/* 前景字标：静态（循环无缝），一层极淡径向暗幕把它和隧道分开 */}
+      <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center' }}>
+        <div style={{
+          position: 'absolute', left: CX - 760, top: CY - 260, width: 1520, height: 520, borderRadius: '50%',
+          background: `radial-gradient(ellipse 50% 50% at 50% 50%, ${alpha('#04060d', 0.7)} 0%, ${alpha('#04060d', 0.38)} 45%, ${alpha('#04060d', 0)} 72%)`,
+        }} />
+        <div style={{ position: 'relative', textAlign: 'center' }}>
+          <div style={{
+            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 18,
+            fontFamily: FONT.mono, fontSize: 30, letterSpacing: '0.3em', color: L.accent, marginBottom: 30,
+          }}>
+            <ShotcraftMark size={42} tone="dark" />
+            <span>{BRAND.name}</span>
+          </div>
+          <div style={{
+            fontFamily: FONT.sans, fontSize: 112, fontWeight: 700, letterSpacing: '-0.045em', lineHeight: 1, color: L.ink,
+            textShadow: `0 4px 40px ${alpha('#000', 0.6)}`,
+          }}>
+            {PITCH.en.motto}
+          </div>
+        </div>
+      </AbsoluteFill>
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/typography/glitch-cycle/GlitchCycle.tsx

@@ -0,0 +1,221 @@
+// glitch-cycle — 乱码轮播：同一行等宽槽位循环轮播 4 条状态短语，每条头尾按概率关键帧
+// [1,0,0,0.1,0,0,1] 全乱码、中段偶发单字抖动，切换瞬间叠 RGB 分离、整行位移与水平撕裂；
+// 末条概率收 0 保证收尾干净。
+//
+// 第二轮重设计（极光夜 · 渲染控制台）：
+// - look = aurora（深紫黑 · 紫 · 粉）。原生 1920 作画：短语是 104px 等宽大写、固定 17 个槽位
+//   （短语居中补空格，字符不增删、整行永不重排），四角细括号框住槽位，像一块广播级状态屏。
+// - 噪声浓度 g 一个变量同时驱动：逐字换乱码（粉 / 暗紫）、整行横向抖动（±g·36px，纵向只 ±g·10）、
+//   RGB 分离（粉左 / 冰蓝右各 g·10px）、g>0.25 的水平撕裂带（中段横移 ±g·80px）、g>0.45 的 3 块
+//   像素块残影——所以几种故障永不打架。每 2f 重掷一次（1f 一换糊成灰带，4f 以上看得清是另一个词）。
+// - 上方状态行（脉冲点 + RENDERING · shotcraft/launch-film · #4127）、下方 1100px 进度轨（线性走满，四拍刻度 +
+//   发光头）+ STEP n/4 与百分比（tabular-nums）——给噪声一个稳定的"在推进"参照。
+// - 收尾：末条 READY TO SHIP 收干净的那一刻给一次柔和泛光（Q4：只给主角一次），进度到 100% 后
+//   状态行转 RENDERED、脉冲点转实心，下方升起一行强调色署名（镜刻标志 + video-shotcraft）；最后 ~28f 干净海报。
+//
+// 时间表（30fps，共 168f）：每条短语 38f（乱 → 定 → 0.1 抽字 → 定 → 乱熔进下一条）
+//   0–38    STORYBOARDING（第 0 帧即满乱码 = 开场就有画面）
+//   38–76   LOCKING BEAT GRID
+//   76–114  RENDERING FRAMES
+//   114–168 READY TO SHIP：按 38f 走 KF_LAST，~139f 起干净；进度 0→100% 线性走到 140f
+//   140–168 RENDERED 状态 + 署名升起 + hold
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, ramp } from '../../_fixtures/Polish';
+import { LOOKS, Stage, alpha } from '../../_fixtures/Look';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const GLITCH_CYCLE_DURATION = 168;
+
+const L = LOOKS.aurora;
+// video-shotcraft 渲染一支宣传片的四步；最长 17 字符（LOCKING BEAT GRID）= 槽位数，别超
+const PHRASES = ['STORYBOARDING', 'LOCKING BEAT GRID', 'RENDERING FRAMES', 'READY TO SHIP'];
+const POOL = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#$%&<>/\\';
+const KF = [1, 0, 0, 0.1, 0, 0, 1];
+const KF_LAST = [1, 0, 0, 0.1, 0, 0, 0];
+const MAXCH = Math.max(...PHRASES.map((p) => p.length));
+const SLOT = 38; // 每条短语帧数（末条之后一直延续到片尾）
+const DONE = 140; // 进度走满帧
+const SIZE = 104;
+const CELL = 0.64; // 槽宽（em）
+const SPLIT_A = '#ff4fa3'; // RGB 分离：粉
+const SPLIT_B = '#6fd8ff'; // RGB 分离：冰蓝
+const BAR_W = 1100;
+
+const rand = (n: number) => {
+  const x = Math.sin(n * 127.1 + 311.7) * 43758.5453;
+  return x - Math.floor(x);
+};
+const glitchAt = (kf: number[], p: number) => {
+  const segs = kf.length - 1;
+  const x = Math.min(segs - 1e-6, Math.max(0, p * segs));
+  const i = Math.floor(x);
+  return kf[i] + (kf[i + 1] - kf[i]) * (x - i);
+};
+const padCenter = (s: string) => {
+  const left = Math.floor((MAXCH - s.length) / 2);
+  return ' '.repeat(left) + s + ' '.repeat(MAXCH - s.length - left);
+};
+
+export const GlitchCycle: React.FC = () => {
+  const frame = useCurrentFrame();
+  const N = PHRASES.length;
+  const slot = Math.min(N - 1, Math.floor(frame / SLOT));
+  const p = Math.min(1, (frame - slot * SLOT) / SLOT);
+  const text = padCenter(PHRASES[slot]);
+  const g = glitchAt(slot === N - 1 ? KF_LAST : KF, p);
+  const bucket = Math.floor(frame / 2);
+
+  const jx = (rand(bucket * 5 + slot) - 0.5) * g * 36;
+  const jy = (rand(bucket * 9 + slot + 40) - 0.5) * g * 10;
+  const tear = g > 0.25;
+  const bandTop = 12 + rand(bucket * 3 + 7) * 50;
+  const bandH = 16 + rand(bucket * 11 + 3) * 24;
+  const tearX = (rand(bucket * 13 + 5) - 0.5) * g * 160;
+  const split = g * 10;
+
+  const prog = Math.min(1, frame / DONE);
+  const done = frame >= DONE;
+  const landed = slot === N - 1 && p > 0.66; // 末条干净
+  const bloom = landed ? Math.max(0, 1 - (frame - (slot * SLOT + SLOT * 0.66)) / 26) : 0;
+  const link = ramp(frame, DONE + 2, 16, EASE.snappy);
+  const pulse = 0.55 + 0.45 * Math.sin(frame / 4);
+  const intro = ramp(frame, 0, 14, EASE.out);
+
+  const row = (dx: number, clip?: string, key?: string) => (
+    <div key={key} style={{
+      position: clip ? 'absolute' : 'relative', left: 0, top: 0, display: 'flex',
+      transform: `translateX(${dx.toFixed(1)}px)`, clipPath: clip,
+      textShadow: g > 0.04
+        ? `${split.toFixed(1)}px 0 ${alpha(SPLIT_A, 0.8 * Math.min(1, g * 1.4))}, ${(-split).toFixed(1)}px 0 ${alpha(SPLIT_B, 0.8 * Math.min(1, g * 1.4))}`
+        : `0 0 ${(20 + 40 * bloom).toFixed(0)}px ${alpha(L.accent, 0.25 + 0.45 * bloom)}`,
+    }}>
+      {Array.from({ length: MAXCH }, (_, i) => {
+        const ch = text[i];
+        let content = ch;
+        let color: string = L.ink;
+        if (ch !== ' ') {
+          const hit = rand(i * 31 + bucket * 17 + slot * 97) < g;
+          if (hit) {
+            content = POOL[Math.floor(rand(i * 131 + bucket * 7 + slot * 13) * POOL.length)];
+            color = rand(i + bucket) > 0.5 ? L.accent2 : L.ink3;
+          }
+        }
+        return <span key={i} style={{ width: `${CELL}em`, textAlign: 'center', color, display: 'inline-block' }}>{content}</span>;
+      })}
+    </div>
+  );
+
+  // 像素块残影：g 高时 3 块小矩形在槽位里闪现（每 2f 重掷）
+  const blocks = g > 0.45
+    ? Array.from({ length: 3 }, (_, k) => ({
+      x: rand(bucket * 19 + k * 7) * 100, y: rand(bucket * 23 + k * 5) * 90,
+      w: 4 + rand(bucket * 29 + k) * 14, h: 6 + rand(bucket * 31 + k) * 14, c: k % 2 ? SPLIT_B : SPLIT_A,
+    }))
+    : [];
+
+  const slotW = MAXCH * CELL * SIZE;
+
+  return (
+    <AbsoluteFill>
+      <Stage look={L} keyLight={{ x: 0.5, y: 0.45 }} fill={{ x: 0.82, y: 0.12 }} breathe={0.4} vignette={0.65}>
+        {/* 信号带：短语背后一条横向柔光 */}
+        <div style={{
+          position: 'absolute', left: 0, right: 0, top: 380, height: 300,
+          background: `radial-gradient(ellipse 45% 50% at 50% 50%, ${alpha(L.accent, 0.16 + 0.1 * g)} 0%, ${alpha(L.accent, 0)} 70%)`,
+        }} />
+        {/* 扫描线（静态、极淡） */}
+        <div style={{
+          position: 'absolute', inset: 0, opacity: 0.5,
+          background: `repeating-linear-gradient(180deg, ${alpha('#000000', 0)} 0px, ${alpha('#000000', 0)} 3px, ${alpha('#000000', 0.22)} 4px)`,
+        }} />
+      </Stage>
+
+      <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center' }}>
+        <div style={{ position: 'relative', width: slotW, opacity: intro }}>
+          {/* 状态行 */}
+          <div style={{
+            display: 'flex', alignItems: 'center', gap: 18, marginBottom: 54, fontFamily: FONT.mono, fontSize: 30,
+            letterSpacing: '0.14em', color: L.ink2,
+          }}>
+            <span style={{
+              width: 14, height: 14, borderRadius: 7, boxSizing: 'border-box', border: `2px solid ${L.accent2}`,
+              background: done ? L.accent2 : alpha(L.accent2, pulse * 0.8),
+              boxShadow: `0 0 ${done ? 16 : 10 * pulse}px ${alpha(L.accent2, 0.7)}`,
+            }} />
+            <span style={{ color: done ? L.ink : L.ink2, fontWeight: 600 }}>{done ? 'RENDERED' : 'RENDERING'}</span>
+            <span style={{ color: L.ink3 }}>·</span>
+            <span>shotcraft/launch-film</span>
+            <span style={{ marginLeft: 'auto', color: L.ink3 }}>#4127</span>
+          </div>
+
+          {/* 槽位：四角括号 + 短语 */}
+          <div style={{ position: 'relative', padding: '30px 0' }}>
+            {[[0, 0], [1, 0], [0, 1], [1, 1]].map(([rx, ry], k) => (
+              <div key={k} style={{
+                position: 'absolute', width: 30, height: 30, left: rx ? undefined : -36, right: rx ? -36 : undefined,
+                top: ry ? undefined : 0, bottom: ry ? 0 : undefined,
+                borderLeft: rx ? undefined : `2px solid ${alpha(L.ink, 0.35)}`, borderRight: rx ? `2px solid ${alpha(L.ink, 0.35)}` : undefined,
+                borderTop: ry ? undefined : `2px solid ${alpha(L.ink, 0.35)}`, borderBottom: ry ? `2px solid ${alpha(L.ink, 0.35)}` : undefined,
+              }} />
+            ))}
+            <div style={{
+              position: 'relative', fontFamily: FONT.mono, fontSize: SIZE, fontWeight: 600, lineHeight: 1.1,
+              transform: `translate(${jx.toFixed(1)}px,${jy.toFixed(1)}px)`, whiteSpace: 'pre',
+            }}>
+              {tear ? (
+                <>
+                  <div style={{ visibility: 'hidden' }}>{row(0)}</div>
+                  {row(0, `inset(0 -200px ${100 - bandTop}% -200px)`, 'a')}
+                  {row(tearX, `inset(${bandTop}% -200px ${Math.max(0, 100 - bandTop - bandH)}% -200px)`, 'b')}
+                  {row(0, `inset(${Math.min(100, bandTop + bandH)}% -200px 0 -200px)`, 'c')}
+                </>
+              ) : row(0)}
+              {blocks.map((b, k) => (
+                <div key={k} style={{
+                  position: 'absolute', left: `${b.x}%`, top: `${b.y}%`, width: b.w * 4, height: b.h * 2,
+                  background: alpha(b.c, 0.55), mixBlendMode: 'screen',
+                }} />
+              ))}
+            </div>
+          </div>
+
+          {/* 进度轨：线性走满（全片唯一线性元素），四拍刻度 + 发光头 */}
+          <div style={{ position: 'relative', marginTop: 56, width: BAR_W, marginLeft: (slotW - BAR_W) / 2, height: 4, borderRadius: 2, background: alpha(L.ink, 0.1) }}>
+            <div style={{
+              position: 'absolute', left: 0, top: 0, bottom: 0, width: `${prog * 100}%`, borderRadius: 2,
+              background: `linear-gradient(90deg, ${alpha(L.accent, 0.3)} 0%, ${L.accent} 70%, ${L.accent2} 100%)`,
+              boxShadow: `0 0 14px ${alpha(L.accent, 0.6)}`,
+            }} />
+            {[1, 2, 3].map((k) => {
+              const x = (k * SLOT) / DONE;
+              return (
+                <div key={k} style={{
+                  position: 'absolute', left: `${x * 100}%`, top: -7, width: 2, height: 18, marginLeft: -1,
+                  background: prog >= x ? L.accent : alpha(L.ink, 0.25),
+                }} />
+              );
+            })}
+            <div style={{
+              display: 'flex', justifyContent: 'space-between', position: 'absolute', left: 0, right: 0, top: 30,
+              fontFamily: FONT.mono, fontSize: 32, letterSpacing: '0.1em', color: L.ink2, fontVariantNumeric: 'tabular-nums',
+            }}>
+              <span>STEP {slot + 1}/{N}</span>
+              <span style={{ color: done ? L.ink : L.ink2 }}>{String(Math.round(prog * 100)).padStart(3, ' ')}%</span>
+            </div>
+          </div>
+
+          {/* 收尾署名：镜刻标志 + 品牌名 */}
+          <div style={{
+            position: 'absolute', left: 0, right: 0, bottom: -170, display: 'flex', alignItems: 'center', justifyContent: 'center',
+            gap: 16, fontFamily: FONT.sans, fontSize: 40,
+            fontWeight: 600, letterSpacing: '-0.01em', color: L.accent, opacity: link, transform: `translateY(${(1 - link) * 24}px)`,
+          }}>
+            <ShotcraftMark size={48} tone="dark" />
+            <span>Crafted with {BRAND.name}</span>
+          </div>
+        </div>
+      </AbsoluteFill>
+    </AbsoluteFill>
+  );
+};