hyper-animator-codex 0.7.0 → 0.8.0

package/skills/hyper-animator-codex/references/shotcraft/source/demos/fui-hud-moves/ReticleLockOn.tsx

@@ -0,0 +1,139 @@
+// reticle-lock-on —— 准星咬合（钢铁侠 HUD / 安德的游戏）
+// FakeDashboard 静置。四个 L 形角标组成的取景框从画外飞入（大框），
+// 超调回弹后收缩贴紧目标卡片四角"咔"地咬合定格；咬合帧卡片微亮 +
+// 旁弹一行小标签。画面不冻结，是运动中的捕获。
+// f0–14 面板静置；f14–24 飞入；f24–46 收缩（含过冲回弹）；f46 咬合；
+// 标签 f46–56 弹出；f56 后真静止 ≥84f（140f 总长）。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, FakeDashboard } from '../_fixtures/Fixtures';
+
+// 目标：variant A 网格第 2 张卡（第一行中间）。
+// 布局推导：侧栏 220 + padding 36，网格 3 列 gap 28，
+// 内容区宽 1700-72=1628 → 卡宽 (1628-56)/3 ≈ 524，卡高 (1080-72-72-28)/2 ≈ 454...
+// 实测近似：目标框取第一行中间卡的外接矩形（含少量呼吸边距）。
+const CARD_X = 220 + 36 + 524 + 28; // ≈ 808
+const CARD_Y = 72 + 36; // 108
+const CARD_W = 524;
+const CARD_H = 425;
+const PAD = 14; // 咬合后角标与卡的呼吸距
+
+const TCX = CARD_X + CARD_W / 2;
+const TCY = CARD_Y + CARD_H / 2;
+
+const FLY_IN = 14; // 飞入开始
+const FLY_END = 24; // 飞入结束（大框就位）
+const LOCK_END = 46; // 咬合帧
+const LABEL_END = 56;
+
+const ARM = 56; // L 臂长
+const THICK = 10; // L 粗
+
+const clamp = { extrapolateLeft: 'clamp' as const, extrapolateRight: 'clamp' as const };
+
+export const ReticleLockOn: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 飞入：整框从右下画外冲进来，同时是个放大 2.2× 的大框
+  const flyT = interpolate(frame, [FLY_IN, FLY_END], [0, 1], {
+    easing: Easing.out(Easing.cubic),
+    ...clamp,
+  });
+  const flyDX = (1 - flyT) * 1100;
+  const flyDY = (1 - flyT) * 620;
+
+  // 收缩咬合：半宽/半高从 2.2× 收到贴紧，带超调（收过头 6% 再弹回）
+  const shrink = interpolate(
+    frame,
+    [FLY_END, LOCK_END - 8, LOCK_END - 3, LOCK_END],
+    [2.2, 1.06, 0.94, 1],
+    { easing: Easing.inOut(Easing.cubic), ...clamp },
+  );
+  const hw = (CARD_W / 2 + PAD) * shrink;
+  const hh = (CARD_H / 2 + PAD) * shrink;
+
+  // 咬合帧：卡片微亮（一层白色 overlay 快闪后停在 0.28）
+  const glow = interpolate(frame, [LOCK_END, LOCK_END + 3, LOCK_END + 10], [0, 0.55, 0.28], clamp);
+
+  // 标签：咬合后从角标右上弹出（scaleX 展开 + 淡入）
+  const labelT = interpolate(frame, [LOCK_END + 2, LABEL_END], [0, 1], {
+    easing: Easing.out(Easing.back(1.8)),
+    ...clamp,
+  });
+
+  const showReticle = frame >= FLY_IN;
+  const locked = frame >= LOCK_END;
+
+  // 四个 L 角：位置 = 中心 ± (hw, hh)，各自镜像
+  const corners = [
+    { x: TCX - hw, y: TCY - hh, sx: 1, sy: 1 },
+    { x: TCX + hw, y: TCY - hh, sx: -1, sy: 1 },
+    { x: TCX - hw, y: TCY + hh, sx: 1, sy: -1 },
+    { x: TCX + hw, y: TCY + hh, sx: -1, sy: -1 },
+  ];
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, overflow: 'hidden', position: 'relative' }}>
+      <FakeDashboard variant="A" />
+      {/* 咬合微亮层：条件渲染，锁定前不存在 */}
+      {locked && (
+        <div
+          style={{
+            position: 'absolute',
+            left: CARD_X,
+            top: CARD_Y,
+            width: CARD_W,
+            height: CARD_H,
+            borderRadius: 14,
+            background: '#ffffff',
+            opacity: glow,
+            pointerEvents: 'none',
+          }}
+        />
+      )}
+      {showReticle && (
+        <div style={{ position: 'absolute', left: 0, top: 0, transform: `translate(${flyDX}px, ${flyDY}px)` }}>
+          {corners.map((c, i) => (
+            <div
+              key={i}
+              style={{
+                position: 'absolute',
+                left: c.x,
+                top: c.y,
+                transform: `scale(${c.sx}, ${c.sy})`,
+                transformOrigin: '0 0',
+              }}
+            >
+              {/* L 形角标：横臂 + 竖臂 */}
+              <div style={{ position: 'absolute', left: 0, top: 0, width: ARM, height: THICK, background: G.ink }} />
+              <div style={{ position: 'absolute', left: 0, top: 0, width: THICK, height: ARM, background: G.ink }} />
+            </div>
+          ))}
+          {/* 小标签：右上角标外侧弹出 */}
+          {frame >= LOCK_END + 2 && (
+            <div
+              style={{
+                position: 'absolute',
+                left: TCX + hw + 18,
+                top: TCY - hh - 6,
+                transform: `scale(${labelT})`,
+                transformOrigin: '0 50%',
+                background: G.ink,
+                color: '#fff',
+                fontFamily: 'Helvetica, Arial, sans-serif',
+                fontWeight: 700,
+                fontSize: 26,
+                padding: '10px 18px',
+                borderRadius: 8,
+                whiteSpace: 'nowrap',
+                opacity: Math.min(1, labelT * 1.5),
+              }}
+            >
+              TARGET · CARD_02
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/gauge-readout-moves/NeedleSweepSelftest.tsx

@@ -0,0 +1,146 @@
+// needle-sweep-selftest —— 满弧扫针自检
+// 卡片内三个并排 270° 表盘。f12 "点火"后指针错峰 4f 依次从 0 甩满全弧
+// （去程 12f ease-out），再回落到各自真实值（回程 20f：先落过头 8° 再回摆），
+// 落定同帧盘下数值文字弹出。三表错峰形成波浪。f60 后真静止 80f。
+// 帧确定性：纯 interpolate 分段，全部 clamp，settle 后每帧输出常数。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, TitleBlock } from '../_fixtures/Fixtures';
+
+const AMBER = '#b45309';
+const RED = '#7c2d12';
+
+const CARD_W = 1500;
+const CARD_H = 640;
+const CARD_X = (1920 - CARD_W) / 2;
+const CARD_Y = 300;
+
+const GA_W = CARD_W / 3; // 每表盘占位宽
+const R = 148;
+const CX = GA_W / 2;
+const CY = 240;
+
+// 表盘角 d∈[0,270] → SVG 角 a = 135 + d（0=右，顺时针，y 向下）
+const polar = (a: number, r: number): [number, number] => [
+  CX + r * Math.cos((a * Math.PI) / 180),
+  CY + r * Math.sin((a * Math.PI) / 180),
+];
+
+const arcPath = (d0: number, d1: number, r: number): string => {
+  const [x0, y0] = polar(135 + d0, r);
+  const [x1, y1] = polar(135 + d1, r);
+  const large = d1 - d0 > 180 ? 1 : 0;
+  return `M ${x0.toFixed(2)} ${y0.toFixed(2)} A ${r} ${r} 0 ${large} 1 ${x1.toFixed(2)} ${y1.toFixed(2)}`;
+};
+
+// 三表：点火 f12，错峰 4f
+const GAUGES = [
+  { start: 12, target: 190 },
+  { start: 16, target: 120 },
+  { start: 20, target: 235 },
+];
+
+const needleAngle = (frame: number, s: number, target: number): number => {
+  if (frame <= s) return 0;
+  if (frame <= s + 12) {
+    // 去程：甩满全弧，ease-out（起步猛）
+    return interpolate(frame, [s, s + 12], [0, 270], {
+      easing: Easing.out(Easing.cubic),
+    });
+  }
+  if (frame <= s + 25) {
+    // 回程主段：落过真实值 8°
+    return interpolate(frame, [s + 12, s + 25], [270, target - 8], {
+      easing: Easing.inOut(Easing.cubic),
+    });
+  }
+  // 回摆：从过冲位弹回真实值，之后 clamp 为常数
+  return interpolate(frame, [s + 25, s + 32], [target - 8, target], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateRight: 'clamp',
+  });
+};
+
+const Gauge: React.FC<{ start: number; target: number }> = ({ start, target }) => {
+  const frame = useCurrentFrame();
+  const d = needleAngle(frame, start, target);
+  const settle = start + 32;
+  const value = Math.round((target / 270) * 100);
+
+  const popScale = interpolate(frame, [settle, settle + 4, settle + 8], [0.3, 1.18, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const popOp = interpolate(frame, [settle, settle + 3], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  const [tipX, tipY] = polar(135, R - 26);
+  const [tailX, tailY] = polar(315, 36);
+
+  // 大刻度 11 根（每 27°），小刻度每 9°
+  const ticks: React.ReactNode[] = [];
+  for (let k = 0; k <= 30; k++) {
+    const dd = k * 9;
+    const major = k % 3 === 0;
+    const a = 135 + dd;
+    const [x0, y0] = polar(a, R - 8);
+    const [x1, y1] = polar(a, major ? R - 30 : R - 19);
+    ticks.push(
+      <line key={k} x1={x0} y1={y0} x2={x1} y2={y1}
+        stroke={dd >= 225 ? RED : G.mid} strokeWidth={major ? 4 : 2} />
+    );
+  }
+
+  return (
+    <div style={{ width: GA_W, height: 480, position: 'relative' }}>
+      <svg width={GA_W} height={430}>
+        {/* 弧形轨道 + 红区 */}
+        <path d={arcPath(0, 270, R)} fill="none" stroke={G.line} strokeWidth={10} strokeLinecap="round" />
+        <path d={arcPath(225, 270, R)} fill="none" stroke={RED} strokeWidth={10} strokeLinecap="round" opacity={0.85} />
+        {ticks}
+        {/* 指针：琥珀刚体，rotate 全量程往返 */}
+        <g transform={`rotate(${d.toFixed(3)} ${CX} ${CY})`}>
+          <line x1={tailX} y1={tailY} x2={tipX} y2={tipY} stroke={AMBER} strokeWidth={9} strokeLinecap="round" />
+        </g>
+        <circle cx={CX} cy={CY} r={15} fill={G.ink} />
+        <circle cx={CX} cy={CY} r={6} fill={AMBER} />
+      </svg>
+      {/* 落定同帧弹出的数值 */}
+      <div style={{
+        position: 'absolute', left: 0, right: 0, top: 396, textAlign: 'center',
+        opacity: popOp, transform: `scale(${popScale.toFixed(4)})`,
+      }}>
+        <span style={{ fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 800, fontSize: 62, color: G.ink }}>
+          {value}
+        </span>
+        <span style={{ fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 700, fontSize: 30, color: G.mid, marginLeft: 8 }}>
+          %
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export const NeedleSweepSelftest: React.FC = () => {
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', top: 110, width: '100%', textAlign: 'center' }}>
+        <TitleBlock text="NEEDLE SWEEP SELF-TEST" size={72} />
+      </div>
+      <div style={{
+        position: 'absolute', left: CARD_X, top: CARD_Y, width: CARD_W, height: CARD_H,
+        background: G.card, border: `2px solid ${G.border}`, borderRadius: 14,
+        boxSizing: 'border-box', boxShadow: '0 2px 8px rgba(0,0,0,0.06)', padding: 32,
+      }}>
+        <div style={{ height: 16, width: 320, background: G.bar, borderRadius: 8 }} />
+        <div style={{ position: 'absolute', left: 0, top: 96, display: 'flex' }}>
+          {GAUGES.map((g, i) => (
+            <Gauge key={i} start={g.start} target={g.target} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/gauge-readout-moves/TapeScrollFixedPointer.tsx

@@ -0,0 +1,120 @@
+// tape-scroll-fixed-pointer —— 滚带定针
+// 取景窗+琥珀三角指针钉死在画面正中，竖向长刻度带（0–500，每 50 一大格）
+// 从窗后滚过："世界动、针不动"。先慢速爬（f12–55 读数 60→140 缓涨），
+// 然后一次大跳变：刻度带冲刺 ~23f（峰值 ~50px/f）冲过 420 到 442，
+// spring 刹车回摆一次（442→415→420）落定。窗内读数同步。f96 后真静止 44f。
+// 帧确定性：value(frame) 纯分段 interpolate 全 clamp，带偏移 = value 线性映射。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, TitleBlock } from '../_fixtures/Fixtures';
+
+const AMBER = '#b45309';
+
+const PXU = 3; // px per unit：500 量程 → 1500px 长带
+const CENTER_Y = 590; // 取景窗中线（屏幕坐标）
+const TAPE_X = 830; // 刻度带左缘
+const TAPE_W = 260;
+
+// 读数时间线：静置→慢爬→冲刺(过冲到442)→回摆(415)→落定420→真静止
+const valueAt = (frame: number): number => {
+  if (frame <= 12) return 60;
+  if (frame <= 55) {
+    return interpolate(frame, [12, 55], [60, 140]); // 慢爬 ~5.6px/f
+  }
+  if (frame <= 78) {
+    return interpolate(frame, [55, 78], [140, 442], {
+      easing: Easing.inOut(Easing.cubic), // 冲刺段，峰值 ~50px/f
+    });
+  }
+  if (frame <= 88) {
+    return interpolate(frame, [78, 88], [442, 415], {
+      easing: Easing.out(Easing.cubic), // 刹车回摆：甩过头再拉回
+    });
+  }
+  return interpolate(frame, [88, 96], [415, 420], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateRight: 'clamp',
+  });
+};
+
+export const TapeScrollFixedPointer: React.FC = () => {
+  const frame = useCurrentFrame();
+  const v = valueAt(frame);
+
+  // 刻度带：数值大在上。单位 u 的屏幕 y = CENTER_Y + (v - u) * PXU
+  const yOf = (u: number): number => CENTER_Y + (v - u) * PXU;
+
+  const ticks: React.ReactNode[] = [];
+  for (let u = 0; u <= 500; u += 10) {
+    const y = yOf(u);
+    if (y < 180 || y > 1010) continue; // 视野外裁剪
+    const major = u % 50 === 0;
+    ticks.push(
+      <div key={u} style={{
+        position: 'absolute', top: y - 2, right: 0,
+        width: major ? 92 : 46, height: major ? 5 : 3,
+        background: major ? G.ink : G.mid, borderRadius: 2,
+      }} />
+    );
+    if (major) {
+      ticks.push(
+        <div key={`n${u}`} style={{
+          position: 'absolute', top: y - 22, right: 110,
+          fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 700,
+          fontSize: 38, color: G.mid, textAlign: 'right', width: 90,
+        }}>
+          {u}
+        </div>
+      );
+    }
+  }
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', top: 90, width: '100%', textAlign: 'center' }}>
+        <TitleBlock text="TAPE SCROLL · FIXED POINTER" size={68} />
+      </div>
+
+      {/* 刻度带容器（世界层：整体在动） */}
+      <div style={{
+        position: 'absolute', left: TAPE_X, top: 180, width: TAPE_W, height: 830,
+        background: G.panel, border: `2px solid ${G.border}`, borderRadius: 12,
+        overflow: 'hidden', boxSizing: 'border-box',
+      }}>
+        <div style={{ position: 'absolute', inset: 0 }}>{
+          // 内层坐标 = 屏幕 y - 180
+          <div style={{ position: 'absolute', left: 0, right: 14, top: -180, height: 1080 + 400 }}>
+            {ticks}
+          </div>
+        }</div>
+      </div>
+
+      {/* 固定层：取景窗 + 琥珀三角指针 + 读数（针不动） */}
+      <div style={{
+        position: 'absolute', left: TAPE_X - 10, top: CENTER_Y - 46,
+        width: TAPE_W + 20, height: 92,
+        border: `5px solid ${AMBER}`, borderRadius: 10,
+        boxShadow: '0 4px 14px rgba(0,0,0,0.14)', boxSizing: 'border-box',
+        background: 'rgba(255,255,255,0.14)',
+      }} />
+      <svg width={60} height={64} style={{ position: 'absolute', left: TAPE_X - 66, top: CENTER_Y - 32 }}>
+        <polygon points="4,4 56,32 4,60" fill={AMBER} />
+      </svg>
+
+      {/* 同步读数窗 */}
+      <div style={{
+        position: 'absolute', left: TAPE_X + TAPE_W + 70, top: CENTER_Y - 84,
+        width: 380, height: 168, background: G.card,
+        border: `2px solid ${G.border}`, borderRadius: 14,
+        boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
+        display: 'flex', flexDirection: 'column', justifyContent: 'center',
+        padding: '0 36px', boxSizing: 'border-box',
+      }}>
+        <div style={{ height: 12, width: 150, background: G.line, borderRadius: 6, marginBottom: 12 }} />
+        <div style={{ fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 800, fontSize: 96, color: AMBER, letterSpacing: -2, lineHeight: 1 }}>
+          {Math.round(v)}
+        </div>
+      </div>
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/glow-flyline-moves/FlylineArc.tsx

@@ -0,0 +1,158 @@
+// flyline-arc —— 飞线连接
+// FakeDashboard A 微暗化(brightness 0.92)，左上卡→右下卡一条贝塞尔弧线
+// "打"过去(22f, out-cubic 生长)，亮点头部领跑、亮头暗尾拖尾；到达帧目标卡
+// 3px+ ink 描边脉冲 + 加深脉冲(白底禁提亮)。随后第二条线接力打到上中卡。
+// 收尾真静止：全部动画在 f86 前结束，之后所有元素冻结。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { FakeDashboard } from '../_fixtures/Fixtures';
+
+type Pt = { x: number; y: number };
+
+// 手写 cubic bezier 采样
+const bez = (p0: Pt, p1: Pt, p2: Pt, p3: Pt, t: number): Pt => {
+  const u = 1 - t;
+  return {
+    x: u * u * u * p0.x + 3 * u * u * t * p1.x + 3 * u * t * t * p2.x + t * t * t * p3.x,
+    y: u * u * u * p0.y + 3 * u * u * t * p1.y + 3 * u * t * t * p2.y + t * t * t * p3.y,
+  };
+};
+
+const N = 100; // 采样段数
+
+// 卡片几何（FakeDashboard variant A 实测网格）
+const CARD_LT = { x: 256, y: 108, w: 524, h: 454, cx: 518, cy: 335 }; // 左上
+const CARD_RB = { x: 1360, y: 590, w: 524, h: 454, cx: 1622, cy: 817 }; // 右下
+const CARD_TM = { x: 808, y: 108, w: 524, h: 454, cx: 1070, cy: 335 }; // 上中
+
+// 一条飞线：深色衬底 + 亮头暗尾白线分段 + 光头领跑（条件挂载）
+const Flyline: React.FC<{
+  frame: number;
+  start: number; // 生长起始帧
+  p0: Pt; p1: Pt; p2: Pt; p3: Pt;
+}> = ({ frame, start, p0, p1, p2, p3 }) => {
+  const DUR = 22;
+  if (frame < start) return null;
+  const e = interpolate(frame, [start, start + DUR], [0, 1], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const growing = frame < start + DUR;
+  // 到达后 10f 内尾部亮度线性抹匀 → 之后完全静止
+  const settle = interpolate(frame, [start + DUR, start + DUR + 10], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  const pts: Pt[] = [];
+  const nDrawn = Math.max(2, Math.ceil(e * N) + 1);
+  for (let i = 0; i < nDrawn; i++) {
+    const t = Math.min((i / N), e);
+    pts.push(bez(p0, p1, p2, p3, t));
+  }
+  const head = bez(p0, p1, p2, p3, e);
+  pts[pts.length - 1] = head;
+
+  const underlay = pts.map((p) => `${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ');
+
+  // 亮头暗尾：每段按"离头距离"给 opacity；到达后 settle 抹匀到 1
+  const segs = [];
+  for (let i = 0; i < pts.length - 1; i++) {
+    const tSeg = Math.min(i / N, e) / Math.max(e, 0.001); // 0 尾 → 1 头
+    const grad = 0.4 + 0.6 * tSeg * tSeg;
+    const op = grad + (1 - grad) * settle;
+    segs.push(
+      <line
+        key={i}
+        x1={pts[i].x} y1={pts[i].y} x2={pts[i + 1].x} y2={pts[i + 1].y}
+        stroke="#fafafa" strokeWidth={4.5} strokeLinecap="round" strokeOpacity={op}
+      />
+    );
+  }
+
+  return (
+    <g>
+      {/* 深色衬底：保证浅底可见 */}
+      <polyline
+        points={underlay} fill="none" stroke="#2f2f2f"
+        strokeWidth={9} strokeLinecap="round" strokeLinejoin="round" strokeOpacity={0.92}
+      />
+      {segs}
+      {/* 光头：仅生长期挂载，摘罩即真静止 */}
+      {growing && (
+        <g>
+          <circle cx={head.x} cy={head.y} r={26} fill="url(#headHalo)" />
+          <circle cx={head.x} cy={head.y} r={9} fill="#ffffff" stroke="#2f2f2f" strokeWidth={3} />
+        </g>
+      )}
+    </g>
+  );
+};
+
+// 目标卡脉冲：3px+ ink 描边 + 加深罩(白底不许提亮) —— 条件挂载
+const CardPulse: React.FC<{
+  frame: number;
+  at: number; // 触发帧
+  rect: { x: number; y: number; w: number; h: number };
+}> = ({ frame, at, rect }) => {
+  if (frame < at || frame > at + 18) return null;
+  // 扩散(起升)用 out-cubic 6f，消散用线性 12f
+  const amp =
+    frame <= at + 6
+      ? interpolate(frame, [at, at + 6], [0, 1], {
+          easing: Easing.out(Easing.cubic),
+          extrapolateLeft: 'clamp',
+          extrapolateRight: 'clamp',
+        })
+      : interpolate(frame, [at + 6, at + 18], [1, 0], {
+          extrapolateLeft: 'clamp',
+          extrapolateRight: 'clamp',
+        });
+  return (
+    <g>
+      <rect
+        x={rect.x + 2} y={rect.y + 2} width={rect.w - 4} height={rect.h - 4}
+        rx={14} fill={`rgba(0,0,0,${(0.16 * amp).toFixed(3)})`}
+      />
+      <rect
+        x={rect.x + 2} y={rect.y + 2} width={rect.w - 4} height={rect.h - 4}
+        rx={14} fill="none" stroke="#2f2f2f" strokeWidth={4} strokeOpacity={amp}
+      />
+    </g>
+  );
+};
+
+export const FlylineArc: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 时间轴：线1 生长 10–32f → 卡RB脉冲 32–50f；线2 生长 46–68f → 卡TM脉冲 68–86f
+  // f86 后全静止（140f 总长 → 静止 54f ≥ 35f）
+  const L1 = { p0: { x: CARD_LT.cx, y: CARD_LT.cy }, p1: { x: 818, y: 60 }, p2: { x: 1322, y: 380 }, p3: { x: CARD_RB.cx, y: CARD_RB.cy } };
+  const L2 = { p0: { x: CARD_RB.cx, y: CARD_RB.cy }, p1: { x: 1760, y: 560 }, p2: { x: 1360, y: 150 }, p3: { x: CARD_TM.cx, y: CARD_TM.cy } };
+
+  return (
+    <div style={{ width: 1920, height: 1080, position: 'relative', background: '#e0e0de' }}>
+      {/* 背景微暗化 0.92，常量、不动画 */}
+      <div style={{ filter: 'brightness(0.92)' }}>
+        <FakeDashboard variant="A" />
+      </div>
+      <svg
+        width={1920} height={1080} viewBox="0 0 1920 1080"
+        style={{ position: 'absolute', top: 0, left: 0, pointerEvents: 'none' }}
+      >
+        <defs>
+          <radialGradient id="headHalo">
+            <stop offset="0%" stopColor="rgba(0,0,0,0.38)" />
+            <stop offset="55%" stopColor="rgba(0,0,0,0.18)" />
+            <stop offset="100%" stopColor="rgba(0,0,0,0)" />
+          </radialGradient>
+        </defs>
+        <CardPulse frame={frame} at={32} rect={CARD_RB} />
+        <CardPulse frame={frame} at={68} rect={CARD_TM} />
+        <Flyline frame={frame} start={10} {...L1} />
+        <Flyline frame={frame} start={46} {...L2} />
+      </svg>
+    </div>
+  );
+};