dsh-drawai 0.3.4 → 0.4.0

package/lib/motion/shotcraft/upstream/demos/ui-entrance/document-typewriter-reveal/DocumentTypewriterReveal.tsx

@@ -0,0 +1,255 @@
+// document-typewriter-reveal —— 整页真排版文档在光标后自己"写"出来、侧栏跟进、历史条目逐个落入轨道
+// （第二轮重设计 · 极光暗场 · 悬浮应用窗）
+// 手法不变：内容块两两一对按节拍被"写"出（页面底色遮罩右锚收窄，强调色笔尖骑在揭示前沿，永远只有一个笔尖）；
+// 人名标题写完后长出强调色底；左右双栏随后自上而下揭开；尾段 6 条历史周报逐条落入左栏。
+//
+// 设计决定
+// - look = aurora（紫夜 + 紫/粉光）。真实周报页面截图保留（Q1），但不再铺满全屏：它是一扇悬浮在紫夜舞台上的
+//   应用窗口——圆角、发丝亮边、背后一圈紫色背光、脚下的长投影；暖白纸面在冷紫夜里像一盏灯。
+// - 相机（单调 Hermite 样条，起止无速度突变）：开场 1.42x 斜侧（rotY −18°）特写标题，窗口左上角与舞台光同时入画；
+//   笔尖往下写时相机一路后撤、把斜侧角收小，到全窗（双栏完整入画，Q10）；最后微俯、上移让出底部给一行标语。
+// - 笔尖：深紫 3px caret + 同色柔光；人名标题的强调底改成极光紫 multiply（只染纸不洗字）。
+// - 收尾标语「From screenshot / to showreel.」（video-shotcraft 宣传句：真实截图被拍成镜头）——第二段强调色，底部左对齐窗口左缘。
+//   截图纹理与历史条目是被拍摄的文档本身（与纹理里烤入的条目对齐），保持原样。
+//
+// 时间表（30fps，共 150f）
+//   0–8     标题特写已在画面（窗口 + 光），笔尖在标题起点
+//   8–58    写入：20 块两两一对，第 g 对 cue = 8 + 4.4g，每块 9f（in-out），最后一对 ~57f 写完
+//   0–64    相机后撤：1.42x 斜侧 → 0.86x 全窗
+//   54/62   左 / 右栏自上而下揭开（10f）+ 内缘强调线生长后淡去
+//   66–100  历史周报 6 条逐条落入左栏（每 5f 一条，9f 轻弹跳 + 空中影）
+//   70–104  相机微俯上移到海报位（0.74x）
+//   100–126 标语逐词升起
+//   126–150 hold：0.8% 极缓推近，光的呼吸
+import React from 'react';
+import { AbsoluteFill, Img, interpolate, staticFile, useCurrentFrame, Easing } from 'remotion';
+import { EASE, FONT, ramp } from '../../_fixtures/Polish';
+import { LOOKS, Stage, Dust, TextReveal, alpha, type } from '../../_fixtures/Look';
+import layout from '../../_textures/live-layout.json';
+
+export const DOCUMENT_TYPEWRITER_REVEAL_DURATION = 150;
+
+const L = LOOKS.aurora;
+type Block = { x: number; y: number; w: number; h: number; tag: string };
+const blocks = layout.wbr.blocks as Block[];
+const leftRail = layout.wbr.leftRail;
+const rightRail = layout.wbr.rightRail;
+const PAGE_W = 1920;
+const PAGE_H = layout.wbr.pageH;
+
+const PAPER = '#fefcf9'; // 纹理纸面实测色
+const CARET = '#7a4dff'; // 深一档的极光紫：暖白纸上要看得见
+const WASH = 'rgba(196,170,255,0.4)';
+const SANS = 'ui-sans-serif, system-ui, -apple-system, sans-serif';
+
+// ───────────── 相机 ─────────────
+type Cam = { cx: number; cy: number; zoom: number; rotX: number; rotY: number; sx: number; sy: number };
+type Key = Cam & { frame: number };
+const ANCHORS: Key[] = [
+  { frame: 0, cx: 690, cy: 320, zoom: 1.42, rotX: 8, rotY: -18, sx: 0, sy: 0 },
+  { frame: 26, cx: 770, cy: 390, zoom: 1.24, rotX: 6, rotY: -13, sx: 0, sy: 0 },
+  { frame: 64, cx: 960, cy: 540, zoom: 0.86, rotX: 4, rotY: -6, sx: 0, sy: -10 },
+  { frame: 104, cx: 960, cy: 540, zoom: 0.74, rotX: 9, rotY: -3, sx: 0, sy: -78 },
+  { frame: 150, cx: 960, cy: 540, zoom: 0.746, rotX: 9, rotY: -3, sx: 0, sy: -80 },
+];
+const PARAMS: (keyof Cam)[] = ['cx', 'cy', 'zoom', 'rotX', 'rotY', 'sx', 'sy'];
+const hermite = (xs: number[], ys: number[]) => {
+  const n = xs.length;
+  const d = xs.slice(0, -1).map((x, i) => (ys[i + 1] - ys[i]) / (xs[i + 1] - x));
+  const m = xs.map((_, i) => (i === 0 || i === n - 1 ? 0 : d[i - 1] * d[i] <= 0 ? 0 : (d[i - 1] + d[i]) / 2));
+  for (let i = 0; i < n - 1; i++) {
+    if (d[i] === 0) { m[i] = 0; m[i + 1] = 0; continue; }
+    const a = m[i] / d[i], b = m[i + 1] / d[i], h = a * a + b * b;
+    if (h > 9) { const k = 3 / Math.sqrt(h); m[i] = k * a * d[i]; m[i + 1] = k * b * d[i]; }
+  }
+  return (x: number) => {
+    if (x <= xs[0]) return ys[0];
+    if (x >= xs[n - 1]) return ys[n - 1];
+    let i = 0;
+    while (i < n - 2 && x > xs[i + 1]) i++;
+    const h = xs[i + 1] - xs[i];
+    const t = (x - xs[i]) / h;
+    const t2 = t * t, t3 = t2 * t;
+    return (2 * t3 - 3 * t2 + 1) * ys[i] + (t3 - 2 * t2 + t) * h * m[i] + (-2 * t3 + 3 * t2) * ys[i + 1] + (t3 - t2) * h * m[i + 1];
+  };
+};
+const CURVES = Object.fromEntries(PARAMS.map((p) => [p, hermite(ANCHORS.map((k) => k.frame), ANCHORS.map((k) => k[p]))])) as Record<keyof Cam, (x: number) => number>;
+const camAt = (f: number): Cam => Object.fromEntries(PARAMS.map((p) => [p, CURVES[p](f)])) as Cam;
+// 相机层：缩放走布局级 zoom（Q2），把页面点 (cx,cy) 送到屏幕 (960+sx, 540+sy)
+const PERSP = 2200;
+
+// ───────────── 写入节拍 ─────────────
+const REVEAL_EASE = Easing.bezier(0.4, 0, 0.6, 1);
+const cueFor = (i: number) => 8 + Math.floor(i / 2) * 4.4;
+const WIPE = 9;
+
+const PAST_WEEKS = [
+  { week: '2026 第 27 周', date: '7月3日', title: '2026-W27 · Shotcraft Weekly' },
+  { week: '2026 第 26 周', date: '6月26日', title: '2026-W26 · Shotcraft Weekly' },
+  { week: '2026 第 25 周', date: '6月19日', title: '2026-W25 · Shotcraft Weekly' },
+  { week: '2026 第 24 周', date: '6月12日', title: '2026-W24 · Shotcraft Weekly' },
+  { week: '2026 第 23 周', date: '6月5日', title: '2026-W23 · Shotcraft Weekly' },
+  { week: '2026 第 22 周', date: '5月29日', title: '2026-W22 · Shotcraft Weekly' },
+];
+const WEEK_Y0 = 228;
+const WEEK_H = 56;
+const WEEK_CUE = (i: number) => 66 + i * 5;
+const WEEK_DROP = Easing.bezier(0.2, 1.15, 0.3, 1);
+
+// 成员名标题（tag=h2，跳过第一个"Jackie's Download"摘要标题）写完后长出强调底
+const memberH2 = new Set<number>();
+{
+  let seenH2 = 0;
+  blocks.forEach((b, i) => {
+    if (b.tag === 'h2' && seenH2++ > 0) memberH2.add(i);
+  });
+}
+
+export const DocumentTypewriterReveal: React.FC = () => {
+  const frame = useCurrentFrame();
+  const cam = camAt(frame);
+
+  // 只有一个笔尖：跟最新的、仍在写的块
+  let caretIdx = -1;
+  blocks.forEach((_, i) => {
+    if (frame >= cueFor(i) && frame <= cueFor(i) + WIPE + 2) caretIdx = i;
+  });
+  // 开场 8f 笔尖在标题起点闪烁待命
+  const idleBlink = frame < cueFor(0) ? (Math.floor(frame / 4) % 2 === 0 ? 1 : 0.25) : 0;
+
+  const tagIn = ramp(frame, 100, 20, EASE.out);
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT.sans, overflow: 'hidden' }}>
+      <Stage look={L} keyLight={{ x: 0.5, y: 0.02 }} fill={{ x: 0.88, y: 0.95 }} horizon={0.9} breathe={0.7} intensity={0.9}>
+        <Dust look={L} count={24} seed={9} drift={0.16} opacity={0.4} />
+      </Stage>
+
+      {/* 3D 相机 */}
+      <AbsoluteFill style={{ transform: `translate(${cam.sx.toFixed(2)}px, ${cam.sy.toFixed(2)}px)` }}>
+        <div style={{ position: 'absolute', inset: 0, perspective: `${(PERSP * cam.zoom).toFixed(2)}px`, perspectiveOrigin: '960px 540px' }}>
+          <div
+            style={{
+              position: 'absolute', width: PAGE_W, height: PAGE_H, zoom: cam.zoom,
+              transform: `translate(${(960 / cam.zoom - cam.cx).toFixed(3)}px, ${(540 / cam.zoom - cam.cy).toFixed(3)}px) rotateY(${cam.rotY.toFixed(3)}deg) rotateX(${cam.rotX.toFixed(3)}deg)`,
+              transformOrigin: `${cam.cx.toFixed(2)}px ${cam.cy.toFixed(2)}px`,
+              transformStyle: 'preserve-3d',
+            }}
+          >
+            {/* 背光：窗口背后的一圈紫光（页面空间，随窗口一起透视） */}
+            <div
+              style={{
+                position: 'absolute', left: -220, top: -180, width: PAGE_W + 440, height: PAGE_H + 400, pointerEvents: 'none',
+                background: `radial-gradient(ellipse 50% 50% at 50% 50%, ${alpha(L.accent, 0.34)} 0%, ${alpha(L.accent2, 0.1)} 55%, transparent 72%)`,
+                transform: 'translateZ(-40px)',
+              }}
+            />
+            {/* 应用窗口：真实截图 + 写入遮罩 + 栏位 + 历史条目，全部裁进圆角 */}
+            <div
+              style={{
+                position: 'absolute', left: 0, top: 0, width: PAGE_W, height: PAGE_H, borderRadius: 26, overflow: 'hidden',
+                background: PAPER,
+                boxShadow: `0 0 0 1.5px ${alpha('#ffffff', 0.35)}, 0 70px 160px -20px ${alpha(L.shadow, 0.95)}, 0 20px 60px ${alpha('#000000', 0.55)}`,
+              }}
+            >
+              <Img src={staticFile('textures/live/wbr-full.png')} style={{ position: 'absolute', width: PAGE_W, height: PAGE_H }} />
+
+              {blocks.map((p, i) => {
+                const cue = cueFor(i);
+                const coverT = interpolate(frame, [cue, cue + WIPE], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: REVEAL_EASE });
+                const bx = p.tag === 'li' ? p.x - 28 : p.x - 4;
+                const by = p.y - 3;
+                const bw = p.w + (p.tag === 'li' ? 34 : 10) + (p.tag === 'li' ? 24 : 120);
+                const bh = p.h + 6;
+                const caretX = bx + bw * (1 - coverT);
+                const caretH = Math.min(22, p.h - 2);
+                const nameCue = cue + WIPE + 4;
+                const nameGrow = memberH2.has(i)
+                  ? interpolate(frame, [nameCue, nameCue + 8], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.bezier(0.3, 0, 0.2, 1) })
+                  : 0;
+                // 写入中的笔尖只骑在实际文字宽度内（遮罩右侧多盖的空白段不走笔尖）
+                const textRight = p.x + p.w + 6;
+                return (
+                  <React.Fragment key={i}>
+                    {nameGrow > 0 ? (
+                      <div style={{ position: 'absolute', left: p.x - 4, top: p.y - 1, width: (p.w + 10) * nameGrow, height: p.h + 2, background: WASH, borderRadius: 4, mixBlendMode: 'multiply' }} />
+                    ) : null}
+                    {coverT > 0 ? (
+                      <div style={{ position: 'absolute', left: bx, top: by, width: bw, height: bh, overflow: 'hidden' }}>
+                        <div style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: `${coverT * 100}%`, background: PAPER }} />
+                      </div>
+                    ) : null}
+                    {i === caretIdx ? (
+                      <div
+                        style={{
+                          position: 'absolute', left: Math.min(caretX, textRight), top: p.y + (p.h - caretH) / 2, width: 3, height: caretH, background: CARET, borderRadius: 2,
+                          boxShadow: `0 0 8px ${alpha(CARET, 0.6)}, 0 0 20px ${alpha(L.accent, 0.45)}`,
+                          opacity: coverT > 0 ? 1 : interpolate(frame, [cue + WIPE, cue + WIPE + 2], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }),
+                        }}
+                      />
+                    ) : null}
+                  </React.Fragment>
+                );
+              })}
+              {/* 开场待命笔尖 */}
+              {idleBlink > 0 ? (
+                <div style={{ position: 'absolute', left: blocks[0].x - 4, top: blocks[0].y + 3, width: 3, height: 22, background: CARET, borderRadius: 2, opacity: idleBlink, boxShadow: `0 0 8px ${alpha(CARET, 0.6)}` }} />
+              ) : null}
+
+              {/* 双栏揭开：纸面补丁自上而下收走，内缘强调线随揭示生长后淡去 */}
+              {[
+                { rail: leftRail, cue: 54, inner: 'right' as const },
+                { rail: rightRail, cue: 62, inner: 'left' as const },
+              ].map(({ rail, cue, inner }, i) => {
+                const t = interpolate(frame, [cue, cue + 10], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.bezier(0.3, 0, 0.2, 1) });
+                const lineFade = interpolate(frame, [cue + 10, cue + 24], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+                return (
+                  <React.Fragment key={`rail${i}`}>
+                    {t < 1 ? <div style={{ position: 'absolute', left: rail.x, top: rail.y + rail.h * t, width: rail.w, height: rail.h * (1 - t), background: PAPER }} /> : null}
+                    {frame >= cue && lineFade > 0 ? (
+                      <div style={{ position: 'absolute', left: inner === 'right' ? rail.x + rail.w - 2 : rail.x, top: rail.y, width: 2, height: rail.h * t, background: CARET, opacity: lineFade, boxShadow: `0 0 10px ${alpha(L.accent, 0.6)}` }} />
+                    ) : null}
+                  </React.Fragment>
+                );
+              })}
+
+              {/* 历史周报：从上方逐条落入左栏 */}
+              {PAST_WEEKS.map((w, i) => {
+                const cue = WEEK_CUE(i);
+                if (frame < cue) return null;
+                const t = interpolate(frame, [cue, cue + 9], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: WEEK_DROP });
+                const appear = interpolate(frame, [cue, cue + 3], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+                const air = Math.max(0, 1 - t);
+                return (
+                  <div
+                    key={w.week}
+                    style={{
+                      position: 'absolute', left: 4, top: WEEK_Y0 + i * WEEK_H, width: leftRail.w - 8, height: WEEK_H,
+                      transform: `translateY(${-48 * air}px)`, opacity: appear,
+                      boxShadow: air > 0.02 ? `0 ${12 * air}px ${24 * air}px rgba(40,20,60,${0.2 * air})` : 'none',
+                      background: PAPER, borderBottom: '1px solid rgba(31,41,55,0.07)', padding: '8px 10px 0', boxSizing: 'border-box', fontFamily: SANS,
+                    }}
+                  >
+                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
+                      <span style={{ fontSize: 13, fontWeight: 500, color: '#1f2937' }}>{w.week}</span>
+                      <span style={{ fontSize: 10, color: '#9ca3af' }}>{w.date}</span>
+                    </div>
+                    <div style={{ marginTop: 2, fontSize: 11, color: '#6b7280', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{w.title}</div>
+                  </div>
+                );
+              })}
+              {/* 窗口上沿受光：一道极淡的顶部高光（玻璃感） */}
+              <div style={{ position: 'absolute', left: 0, right: 0, top: 0, height: 3, background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent)' }} />
+            </div>
+          </div>
+        </div>
+      </AbsoluteFill>
+
+      {/* 收尾标语：底部，左对齐窗口左缘 */}
+      <div style={{ position: 'absolute', left: 250, top: 930, display: 'flex', alignItems: 'baseline', gap: 0, ...type(84, 760), color: L.ink, opacity: tagIn > 0 ? 1 : 0 }}>
+        <TextReveal text="From screenshot" by="word" variant="rise" start={100} each={16} gap={3} />
+        <TextReveal text="to showreel." by="word" variant="rise" start={108} each={16} gap={3} style={{ color: L.accent, marginLeft: '0.26em' }} />
+      </div>
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/ui-entrance/draw-svg-trace/DrawSvgTrace.tsx

@@ -0,0 +1,244 @@
+// draw-svg-trace —— 描边生长圈注（第二轮重设计 · 纸墨编辑风）
+// 手法不变：一条带笔头的墨线沿元素轮廓跑一圈把它"画"出来 → 闭合瞬间加深加粗（白底上不用发光）→
+// 描边交棒给元素自身边框、内容上墨 → 同一套路短版给重点词画一笔下划线。
+//
+// 设计决定
+// - look = paper（暖白纸 · 墨 · 朱红）。主体放大到 1120×660（画宽 58%），内容是一张出版级 video-shotcraft 渲染报告卡：
+//   眉题 mono、两段式大标题「Cuts on the beat / 100%」（100% 用 188px 黑体，是全镜头的重点词）、32px 说明、
+//   右侧 12 根逐镜头能量柱（末三根朱红）、署名行（video-shotcraft 标志 + 字标）。
+// - 开场就有东西：绘图纸点阵底 + 四角先长出裁切标记（印刷对位线）——观众先知道"这里要画一个东西"，笔再沿轮廓跑一圈。
+// - 笔头：主线 6px 墨 + 三段渐细短 dash + 实心笔尖（按圆角矩形弧长精确定位，带落影）；
+//   描边速度 in-out（起笔、收笔有呼吸），笔尖在四个圆角处自然减速（弧长参数化本身不减速，靠 in-out 整体曲线）。
+// - 闭合：2f 冲纯黑 + 6→11px 加粗，6f 回落；裁切标记同时向外"弹"一下后退场。
+// - 上墨：内容自上而下 3f 错峰由虚到实 + 上浮；柱子从基线长出（错峰 1.5f，末三根最后、朱红）；卡片从贴地升起（阴影长出来）。
+// - 第二用法：100% 下一笔手绘朱红马克笔下划线（略带弧度的路径，18f out-cubic，笔头跟随），画完常驻。
+//
+// 时间表（30fps，共 132f）
+//   0–12    裁切标记从四角长出（snappy，错峰 2f）
+//   10–50   轮廓描边 40f（in-out cubic），笔头可见
+//   50–58   闭合闪：50–52 冲黑加粗、52–58 回落；裁切标记外弹淡出
+//   50–74   上墨：卡底 + 内容逐块（3f 错峰）、柱图长出、卡片升起
+//   56–66   描边淡出 → 卡片自身发丝边淡入
+//   74–92   100% 下划线 18f
+//   92–132  hold 40f：0.9% 极缓推近
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from 'remotion';
+import { EASE, FONT, ramp, softShadow } from '../../_fixtures/Polish';
+import { LOOKS, Stage, alpha, type } from '../../_fixtures/Look';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const DRAW_SVG_TRACE_DURATION = 132;
+
+const L = LOOKS.paper;
+const CW = 1120;
+const CH = 660;
+const CX = (1920 - CW) / 2; // 400
+const CY = (1080 - CH) / 2; // 210
+const RX = 28; // 与卡片圆角一致（交棒不错型）
+const PEN = 0.04; // 笔头 dash 长度（占整圈比例）
+const INK = L.ink;
+const TRACE0 = 10, TRACE1 = 50;
+
+// 圆角矩形轮廓上弧长比例 u∈[0,1] 的点（与 SVG <rect> 的路径起点/方向一致：从上边 (x+rx, y) 顺时针）
+const rrPoint = (u: number, x: number, y: number, w: number, h: number, r: number): [number, number] => {
+  const sx = w - 2 * r, sy = h - 2 * r, arc = (Math.PI * r) / 2;
+  const Ltot = 2 * sx + 2 * sy + 4 * arc;
+  let s = (((u % 1) + 1) % 1) * Ltot;
+  const segs: Array<[number, (k: number) => [number, number]]> = [
+    [sx, (k) => [x + r + k * sx, y]],
+    [arc, (k) => [x + w - r + r * Math.sin((k * Math.PI) / 2), y + r - r * Math.cos((k * Math.PI) / 2)]],
+    [sy, (k) => [x + w, y + r + k * sy]],
+    [arc, (k) => [x + w - r + r * Math.cos((k * Math.PI) / 2), y + h - r + r * Math.sin((k * Math.PI) / 2)]],
+    [sx, (k) => [x + w - r - k * sx, y + h]],
+    [arc, (k) => [x + r - r * Math.sin((k * Math.PI) / 2), y + h - r + r * Math.cos((k * Math.PI) / 2)]],
+    [sy, (k) => [x, y + h - r - k * sy]],
+    [arc, (k) => [x + r - r * Math.cos((k * Math.PI) / 2), y + r - r * Math.sin((k * Math.PI) / 2)]],
+  ];
+  for (const [len, f] of segs) {
+    if (s <= len) return f(len > 0 ? s / len : 0);
+    s -= len;
+  }
+  return [x + r, y];
+};
+
+const BARS = [34, 40, 37, 48, 45, 54, 58, 56, 66, 74, 81, 96];
+const MONTHS = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L']; // 镜头 A–L（沿用原变量名）
+
+// 下划线：略带弧度的手绘笔画（本地坐标，宽 300）
+const UL_PATH = 'M4,14 C70,6 150,18 230,9 S290,10 300,8';
+
+export const DrawSvgTrace: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  const p = interpolate(frame, [TRACE0, TRACE1], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.inOut(Easing.cubic) });
+
+  // 闭合闪：50–52 冲峰，52–58 回落（纯黑 + 加粗，不发光）
+  const flash = frame < 52 ? ramp(frame, 50, 2, EASE.linear) : 1 - ramp(frame, 52, 6, EASE.out);
+  const strokeW = 6 + flash * 5;
+  const strokeColor = flash > 0.5 ? '#000000' : INK;
+
+  const traceOp = 1 - ramp(frame, 56, 10, EASE.linear);
+  const borderOp = 1 - traceOp;
+  const lift = ramp(frame, 50, 22, EASE.out);
+  const inkIn = (k: number) => ramp(frame, 52 + k * 3, 12, EASE.out);
+  const rise = (k: number): React.CSSProperties => {
+    const t = inkIn(k);
+    return { opacity: t, transform: `translateY(${((1 - t) * 14).toFixed(2)}px)`, filter: t < 1 ? `blur(${((1 - t) * 6).toFixed(2)}px)` : undefined };
+  };
+
+  const penOp = interpolate(p, [0, 0.02, 0.97, 0.995], [0, 1, 1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+  const [nx, ny] = rrPoint(p, 0, 0, CW, CH, RX);
+
+  // 裁切标记：0–12 长出，闭合时外弹 + 淡出
+  const marksIn = (k: number) => ramp(frame, k * 2, 12, EASE.snappy);
+  const marksPop = ramp(frame, 50, 10, EASE.out);
+  const marksOp = 1 - ramp(frame, 52, 12, EASE.out);
+
+  // 下划线
+  const up = interpolate(frame, [74, 92], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.cubic) });
+  const upenOp = interpolate(up, [0, 0.04, 0.92, 0.99], [0, 1, 1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+
+  const push = 1 + 0.009 * ramp(frame, 60, 72, EASE.smooth);
+
+  return (
+    <AbsoluteFill style={{ fontFamily: FONT.sans, overflow: 'hidden' }}>
+      <Stage look={L} keyLight={{ x: 0.42, y: 0.12 }} fill={{ x: 0.9, y: 0.9 }}>
+        {/* 绘图纸点阵：48px 网格的墨点，中心清晰、四周隐去——描边阶段的"画板"，也给第 1 帧一个底 */}
+        <div
+          style={{
+            position: 'absolute', inset: 0,
+            backgroundImage: `radial-gradient(circle, ${alpha(L.ink, 0.24)} 2px, transparent 2.4px)`,
+            backgroundSize: '48px 48px', backgroundPosition: '24px 18px',
+            WebkitMaskImage: 'radial-gradient(ellipse 62% 66% at 50% 50%, #000 30%, transparent 100%)',
+            maskImage: 'radial-gradient(ellipse 62% 66% at 50% 50%, #000 30%, transparent 100%)',
+          }}
+        />
+      </Stage>
+
+      <AbsoluteFill style={{ transform: `scale(${push.toFixed(5)})`, transformOrigin: '960px 540px' }}>
+        {/* 卡片底面：闭合后上墨、从贴地升起 */}
+        <div
+          style={{
+            position: 'absolute', left: CX, top: CY, width: CW, height: CH, borderRadius: RX,
+            background: `linear-gradient(180deg, #fffefb 0%, ${L.surface} 100%)`,
+            boxShadow: `inset 0 1px 0 #ffffff, ${softShadow(4 + lift * 26, { color: L.shadow, strength: 0.9 })}`,
+            opacity: ramp(frame, 50, 10, EASE.out),
+          }}
+        />
+
+        {/* 卡片内容 */}
+        <div style={{ position: 'absolute', left: CX, top: CY, width: CW, height: CH, padding: '52px 64px 46px', boxSizing: 'border-box' }}>
+          {/* 眉题行 */}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 14, ...rise(0) }}>
+            <div style={{ width: 12, height: 12, borderRadius: 6, background: L.accent }} />
+            <div style={{ ...type(26, 600, { mono: true }), letterSpacing: '0.14em', color: L.ink2 }}>LAUNCH FILM · RENDER</div>
+            <div style={{ flex: 1 }} />
+            <div style={{ ...type(26, 500, { mono: true }), color: L.ink3 }}>v3 · 1080p30</div>
+          </div>
+
+          {/* 左栏：两段式大标题 + 说明 */}
+          <div style={{ position: 'absolute', left: 64, top: 128, width: 560 }}>
+            <div style={{ ...type(72, 650), color: L.ink2, ...rise(1) }}>Cuts on the beat</div>
+            <div style={{ position: 'relative', display: 'inline-block', marginTop: 2, ...rise(2) }}>
+              {/* 四位数比原「38%」宽：字号 212→188 给右栏柱图留出呼吸 */}
+              <div style={{ ...type(188, 820), letterSpacing: '-0.055em', color: L.ink, lineHeight: 0.92 }}>100%</div>
+              {/* 第二用法：重点词下方一笔朱红马克笔下划线 */}
+              {up > 0.001 && (
+                <svg width={300} height={24} viewBox="0 0 300 24" style={{ position: 'absolute', left: 6, bottom: -26, width: 'calc(100% - 12px)', overflow: 'visible' }} preserveAspectRatio="none">
+                  <path d={UL_PATH} fill="none" stroke={L.accent} strokeWidth={12} strokeLinecap="round" pathLength={1} strokeDasharray="1" strokeDashoffset={1 - up} opacity={0.92} />
+                  {upenOp > 0 && (
+                    <path d={UL_PATH} fill="none" stroke={L.accent} strokeWidth={16} strokeLinecap="round" pathLength={1}
+                      strokeDasharray={`${0.06} ${0.94}`} strokeDashoffset={0.06 - up} opacity={upenOp} />
+                  )}
+                </svg>
+              )}
+            </div>
+            <div style={{ marginTop: 44, ...type(32, 450), lineHeight: 1.35, color: L.ink2, ...rise(3) }}>
+              Every cut snaps to the downbeat. Rendered by video-shotcraft.
+            </div>
+          </div>
+
+          {/* 右栏：逐镜头能量柱（从基线长出，末三根朱红） */}
+          <div style={{ position: 'absolute', left: 680, top: 150, width: 376, height: 300, display: 'flex', alignItems: 'flex-end', gap: 10, opacity: inkIn(3) > 0 ? 1 : 0 }}>
+            {BARS.map((v, i) => {
+              const g = ramp(frame, 56 + i * 1.5, 14, EASE.snappy);
+              const hot = i >= 9;
+              return (
+                <div key={i} style={{ flex: 1, height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', alignItems: 'center' }}>
+                  <div
+                    style={{
+                      width: '100%', height: `${(v * g).toFixed(2)}%`, borderRadius: 8,
+                      background: hot ? `linear-gradient(180deg, #f2674f 0%, ${L.accent} 100%)` : alpha(L.ink, 0.1),
+                      opacity: hot ? 0.6 + (i - 9) * 0.2 : 1,
+                    }}
+                  />
+                </div>
+              );
+            })}
+          </div>
+          <div style={{ position: 'absolute', left: 680, top: 462, width: 376, display: 'flex', gap: 10, ...rise(4) }}>
+            {MONTHS.map((m, i) => (
+              <div key={i} style={{ flex: 1, textAlign: 'center', ...type(20, 600, { mono: true }), color: i >= 9 ? L.accent : L.ink3 }}>{m}</div>
+            ))}
+          </div>
+          <div style={{ position: 'absolute', left: 680, top: 128, ...type(22, 600, { mono: true }), letterSpacing: '0.1em', color: L.ink3, ...rise(4) }}>ENERGY · PER SHOT</div>
+
+          {/* 署名行：video-shotcraft 标志 + 字标（亮底用 light 版） */}
+          <div style={{ position: 'absolute', left: 64, right: 64, bottom: 44, display: 'flex', alignItems: 'center', gap: 16, ...rise(5) }}>
+            <div style={{ position: 'absolute', left: 0, right: 0, top: -26, height: 1, background: L.line }} />
+            <ShotcraftMark size={52} tone="light" />
+            <div style={{ ...type(28, 700), fontFamily: BRAND.font, letterSpacing: '0.03em', color: L.ink }}>{BRAND.name}</div>
+            <div style={{ ...type(28, 450), color: L.ink3 }}>agent · rendered 2m ago</div>
+          </div>
+        </div>
+
+        {/* 卡片自身发丝边：描边淡出时接棒 */}
+        <div style={{ position: 'absolute', left: CX, top: CY, width: CW, height: CH, borderRadius: RX, border: `1.5px solid ${alpha(L.ink, 0.14)}`, boxSizing: 'border-box', opacity: borderOp }} />
+
+        {/* 裁切标记（印刷对位线）：四角外侧 */}
+        {marksOp > 0.001 && (
+          <svg width={1920} height={1080} style={{ position: 'absolute', left: 0, top: 0, overflow: 'visible', opacity: marksOp }}>
+            {[[CX, CY, -1, -1], [CX + CW, CY, 1, -1], [CX + CW, CY + CH, 1, 1], [CX, CY + CH, -1, 1]].map(([x, y, sx, sy], k) => {
+              const t = marksIn(k);
+              const off = 26 + 22 * marksPop;
+              const len = 54 * t;
+              const ox = x + sx * off, oy = y + sy * off;
+              return (
+                <g key={k} stroke={L.ink2} strokeWidth={2.5} strokeLinecap="round">
+                  <line x1={ox} y1={oy} x2={ox - sx * len} y2={oy} opacity={t} />
+                  <line x1={ox} y1={oy} x2={ox} y2={oy - sy * len} opacity={t} />
+                  <circle cx={ox} cy={oy} r={3.5} fill={L.accent} stroke="none" opacity={t} />
+                </g>
+              );
+            })}
+          </svg>
+        )}
+
+        {/* 描边生长层：主线 + 渐细笔头 + 圆形笔尖 */}
+        {traceOp > 0.001 && (
+          <svg width={CW} height={CH} style={{ position: 'absolute', left: CX, top: CY, overflow: 'visible', opacity: traceOp }}>
+            <rect x={0} y={0} width={CW} height={CH} rx={RX} fill="none" stroke={strokeColor} strokeWidth={strokeW}
+              pathLength={1} strokeDasharray="1" strokeDashoffset={1 - p} strokeLinecap="round" />
+            {penOp > 0 &&
+              [
+                { len: PEN, w: 6.4 },
+                { len: PEN * 0.6, w: 8 },
+                { len: PEN * 0.28, w: 9.6 },
+              ].map(({ len, w }, k) => (
+                <rect key={k} x={0} y={0} width={CW} height={CH} rx={RX} fill="none" stroke={INK} strokeWidth={w} opacity={penOp}
+                  pathLength={1} strokeDasharray={`${len} ${1 - len}`} strokeDashoffset={len - p} strokeLinecap="round" />
+              ))}
+            {penOp > 0 && (
+              <g opacity={penOp}>
+                <circle cx={nx + 1.5} cy={ny + 4} r={10} fill={alpha(L.shadow, 0.16)} />
+                <circle cx={nx} cy={ny} r={7.5} fill={INK} />
+                <circle cx={nx - 2.2} cy={ny - 2.4} r={2} fill="rgba(255,255,255,0.4)" />
+              </g>
+            )}
+          </svg>
+        )}
+      </AbsoluteFill>
+    </AbsoluteFill>
+  );
+};
+