hyper-animator-codex 0.7.1 → 0.8.0

package/skills/hyper-animator-codex/references/shotcraft/source/demos/icon-field-colorize/IconFieldColorize.tsx

@@ -0,0 +1,93 @@
+// icon-field-colorize —— 灰阶图标原野错峰浮现（错峰淡入+微弹），停一拍后
+// 蓝色整场极快扫翻，随后橙/绿/红三道色波依次向下扫过，终态四色横带。
+// 对标 bear-app.mp4 0–3s（密帧核实：非同帧硬翻，是极快多道波纹翻色）。
+import React from 'react';
+import { AbsoluteFill, interpolate, useCurrentFrame } from 'remotion';
+
+const mulberry32 = (a: number) => () => {
+  let t = (a += 0x6d2b79f5);
+  t = Math.imul(t ^ (t >>> 15), t | 1);
+  t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+};
+
+// 16 个简笔图标（viewBox 0 0 24 24，纯填充），求可辨认不求精致
+const SHAPES: ((c: string) => React.ReactNode)[] = [
+  (c) => <path fill={c} d="M12 21s-7.5-4.7-9.6-9C.9 8.7 2.7 5 6.2 5c2 0 3.3 1 4 2.1h3.6C14.5 6 15.8 5 17.8 5c3.5 0 5.3 3.7 3.8 7-2.1 4.3-9.6 9-9.6 9z" transform="scale(0.92) translate(1,0)" />,
+  (c) => <path fill={c} d="M12 2l2.7 6.3 6.8.5-5.2 4.4 1.6 6.6L12 16.2 6.1 19.8l1.6-6.6L2.5 8.8l6.8-.5z" />,
+  (c) => <path fill={c} d="M13 2L4 14h6l-1 8 9-12h-6z" />,
+  (c) => <circle fill={c} cx="12" cy="12" r="9" />,
+  (c) => <path fill={c} d="M9 3v12.3A3.5 3.5 0 1 0 11 18V7h7v6.3A3.5 3.5 0 1 0 20 16V3z" transform="scale(0.85) translate(1.5,1.5)" />,
+  (c) => <path fill={c} d="M4 4h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-5 4V6a2 2 0 0 1 2-2z" transform="scale(0.85) translate(2,2)" />,
+  (c) => <><rect fill={c} x="3" y="6" width="18" height="13" rx="2.5" /><circle fill="#fff" cx="12" cy="12.5" r="3.6" /><rect fill={c} x="8" y="3.5" width="8" height="4" rx="1.5" /></>,
+  (c) => <path fill={c} d="M6.5 19a4.5 4.5 0 0 1-.4-9A6 6 0 0 1 17.8 8.7 4.2 4.2 0 0 1 17.5 19z" />,
+  (c) => <path fill={c} d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z" transform="scale(0.9) translate(1.2,0.5)" />,
+  (c) => <path fill={c} d="M3.5 10L12 3l8.5 7V21h-6v-6h-5v6h-6z" />,
+  (c) => <><rect fill={c} x="3" y="8" width="18" height="4" rx="1" /><rect fill={c} x="5" y="12" width="14" height="9" rx="1" /><rect fill="#fff" x="10.9" y="8" width="2.2" height="13" /></>,
+  (c) => <path fill={c} d="M9.4 20.6l-1 1.9 7.2-.1 4.9-8.5-2.2.1-2 3.4L13 4.5h-2.1L7.6 17.3z" transform="scale(0.9) translate(1,1)" />,
+  (c) => <path fill={c} d="M20.3 6.7L9.6 17.4l-5.9-5.9 2.1-2.1 3.8 3.8 8.6-8.6z" />,
+  (c) => <path fill={c} d="M21.5 15.5L14 12V5.5a2 2 0 1 0-4 0V12l-7.5 3.5v2l7.5-2v4l-2.5 2v1.5l4.5-1 4.5 1V21.5l-2.5-2v-4l7.5 2z" transform="scale(0.85) translate(1.8,1.8)" />,
+  (c) => <><circle fill={c} cx="12" cy="12" r="4" /><path fill={c} d="M12 1.5l1.4 3.6h-2.8zM12 22.5l-1.4-3.6h2.8zM1.5 12l3.6-1.4v2.8zM22.5 12l-3.6 1.4v-2.8zM4.6 4.6l3.5 1.5-2 2zM19.4 19.4l-3.5-1.5 2-2zM19.4 4.6l-1.5 3.5-2-2zM4.6 19.4l1.5-3.5 2 2z" /></>,
+  (c) => <path fill={c} d="M20 4C10 4 4.5 9 4 15.7 3.9 17.5 4 20 4 20s2.7-.2 4.4-.3C15 19.2 20 13.5 20 4zM6.8 17.2C10 11 15 8 15 8s-5.5 1.5-8.8 8z" />,
+];
+
+const COLS = 17, ROWS = 10, CELL = 110, ICON = 44;
+const GRAYS = ['#9a9a9a', '#7c7c7c', '#b0b0b0', '#8b8b8b'];
+// 四道色波：蓝覆盖全场，橙/绿/红依次覆盖更低的行带 → 终态四色横带
+const WAVES = [
+  { color: '#5b67e8', fromRow: 0, start: 78 },
+  { color: '#e7a03c', fromRow: 3, start: 90 },
+  { color: '#34a56f', fromRow: 6, start: 100 },
+  { color: '#e2606b', fromRow: 9, start: 110 },
+];
+
+export const IconFieldColorize: React.FC = () => {
+  const frame = useCurrentFrame();
+  const rand = mulberry32(20260718);
+  const icons: React.ReactNode[] = [];
+
+  for (let r = 0; r < ROWS; r++) {
+    for (let c = 0; c < COLS; c++) {
+      const r1 = rand(), r2 = rand(), r3 = rand();
+      // —— 错峰浮现：分 10 批，批内再抖动
+      const batch = Math.floor(r1 * 10);
+      const t0 = 4 + batch * 4 + r2 * 3;
+      const ap = interpolate(frame, [t0, t0 + 8], [0, 1], {
+        extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+      });
+      if (ap <= 0) continue;
+      // 微弹：0.55 → 1.07 → 1
+      const easeOut = 1 - Math.pow(1 - ap, 3);
+      const appearScale = ap < 1 ? 0.55 + easeOut * 0.52 - Math.max(0, ap - 0.72) * 0.25 : 1;
+
+      // —— 色波：每道波从起始行向下快扫（行 1.4 帧 + 列微倾 + 抖动）
+      const gray = GRAYS[Math.floor(r2 * GRAYS.length)];
+      let color = gray;
+      let flipPhase = 0; // 最近一次翻色的进行度，用于 pop
+      for (const w of WAVES) {
+        if (r < w.fromRow) continue;
+        const arrive = w.start + (r - w.fromRow) * 1.4 + c * 0.25 + r3 * 1.5;
+        const p = interpolate(frame, [arrive, arrive + 3], [0, 1], {
+          extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+        });
+        if (p > 0) { color = w.color; flipPhase = p; }
+      }
+      const flipPop = flipPhase > 0 && flipPhase < 1
+        ? 1 + Math.sin(flipPhase * Math.PI) * 0.22 : 1;
+
+      const shape = SHAPES[Math.floor(r3 * SHAPES.length) % SHAPES.length];
+      const x = 48 + c * CELL + (r % 2) * 26;
+      const y = 26 + r * CELL;
+      icons.push(
+        <div key={`${r}-${c}`} style={{
+          position: 'absolute', left: x, top: y, width: ICON, height: ICON,
+          opacity: ap, transform: `scale(${appearScale * flipPop})`,
+        }}>
+          <svg viewBox="0 0 24 24" width={ICON} height={ICON}>{shape(color)}</svg>
+        </div>,
+      );
+    }
+  }
+
+  return <AbsoluteFill style={{ background: '#ffffff' }}>{icons}</AbsoluteFill>;
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/icon-performance-moves/AttentionBounce.tsx

@@ -0,0 +1,193 @@
+// 求关注弹跳（attention-bounce）——macOS Dock 语汇：icon 原地起跳讨拍
+// 半屏 app 图标（圆角方块+铃形符号）在地面线上连跳 4 次且一次比一次高
+// （首跳 0.5 倍 icon 高 → 末跳 1.2 倍）；每次落地帧压扁（宽 1.2x 高 0.8x）
+// + 落点尘点 2–3 颗；最高那跳镜头整体向 icon 轻推 8%（"被吸引"）；
+// 落定后 icon 右侧弹开一张功能面板卡收尾。
+// 节拍：0–12 静置 → 12 起跳（4 跳递增，各 16/18/20/24f）→ ~90 落定 →
+// 92–104 面板卡弹出 → 110 后真静止 40f。帧确定，尘点用 sin 散列。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, Card } from '../_fixtures/Fixtures';
+
+const AMBER = '#b45309';
+const ICON = 400; // icon 边长（半屏级）
+const GROUND = 940; // 地面线 y（末跳 1.2x 顶点 + 8% 推近后仍贴画面上沿不出框）
+const CX = 760; // icon 中心 x（右侧留面板位）
+
+// 4 跳：起跳帧、时长、峰高（相对 icon 高）
+const JUMPS = [
+  { start: 12, dur: 16, peak: 0.5 * ICON },
+  { start: 30, dur: 18, peak: 0.75 * ICON },
+  { start: 50, dur: 20, peak: 0.95 * ICON },
+  { start: 72, dur: 24, peak: 1.2 * ICON },
+];
+
+export const AttentionBounce: React.FC = () => {
+  const f = useCurrentFrame();
+
+  // 弹跳高度 + 落地挤压
+  let y = 0; // 离地高度
+  let squash = 0; // 0–1 落地压扁强度
+  let stretch = 0; // 空中拉伸强度（速度感）
+  JUMPS.forEach((j) => {
+    const t = (f - j.start) / j.dur;
+    if (t > 0 && t < 1) {
+      y = j.peak * 4 * t * (1 - t); // 抛物线
+      stretch = Math.abs(1 - 2 * t) * 0.14; // 起跳/下落速度快时拉长
+    }
+    // 落地帧后 5f 内压扁回弹
+    const land = j.start + j.dur;
+    if (f >= land && f < land + 6) {
+      squash = Math.max(squash, 1 - (f - land) / 6);
+    }
+  });
+  // 起跳前的预压（第一跳前 3f 蹲一下）
+  if (f >= 9 && f < 12) squash = Math.max(squash, (f - 9) / 3 * 0.7);
+
+  const sx = 1 + squash * 0.2 - stretch * 0.5;
+  const sy = 1 - squash * 0.2 + stretch;
+
+  // 镜头推近：第 4 跳（最高）期间整体 scale 1→1.08，落定后保持
+  const zoomT = interpolate(f, [72, 88], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.inOut(Easing.quad),
+  });
+  const zoom = 1 + 0.08 * zoomT;
+
+  // 尘点：每次落地帧生成 3 颗，向两侧飞散淡出（12f 生命）
+  const dusts: Array<{ x: number; y: number; r: number; op: number }> = [];
+  JUMPS.forEach((j, ji) => {
+    const land = j.start + j.dur;
+    const life = (f - land) / 12;
+    if (life <= 0 || life >= 1) return;
+    for (let k = 0; k < 3; k++) {
+      const seed = ji * 3 + k;
+      const dir = k === 1 ? 0 : k === 0 ? -1 : 1;
+      const spread = (60 + 40 * Math.abs(Math.sin(seed * 5.7))) * (ji + 2) * 0.45;
+      const e = Easing.out(Easing.cubic)(life);
+      dusts.push({
+        x: CX + dir * (ICON * 0.42 + spread * e) + (dir === 0 ? 30 * Math.sin(seed * 3.1) * e : 0),
+        y: GROUND - 14 - 46 * e * (0.6 + 0.5 * Math.abs(Math.sin(seed * 2.3))),
+        r: 12 + 6 * Math.abs(Math.sin(seed * 4.9)) - 8 * life,
+        op: (1 - life) * 0.8,
+      });
+    }
+  });
+
+  // 功能面板卡：落定后（f=98）从 icon 右侧弹出
+  const panelT = interpolate(f, [98, 110], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.back(1.8)),
+  });
+
+  const iconTop = GROUND - ICON - y;
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      {/* 镜头层：整体向 icon 轻推 */}
+      <div
+        style={{
+          width: 1920,
+          height: 1080,
+          transform: `scale(${zoom})`,
+          transformOrigin: `${CX}px ${GROUND - ICON / 2}px`,
+          position: 'relative',
+        }}
+      >
+        {/* 地面线 */}
+        <div style={{ position: 'absolute', left: 120, top: GROUND, width: 1680, height: 8, background: G.bar, borderRadius: 4 }} />
+
+        {/* 落地尘点 */}
+        {dusts.map((d, i) => (
+          <div
+            key={i}
+            style={{
+              position: 'absolute',
+              left: d.x - d.r,
+              top: d.y - d.r,
+              width: d.r * 2,
+              height: d.r * 2,
+              borderRadius: d.r,
+              background: G.mid,
+              opacity: d.op,
+            }}
+          />
+        ))}
+
+        {/* 影子：随高度缩小变淡 */}
+        <div
+          style={{
+            position: 'absolute',
+            left: CX - ICON * 0.42 * (1 - y / (ICON * 2.4)),
+            top: GROUND + 16,
+            width: ICON * 0.84 * (1 - y / (ICON * 2.4)),
+            height: 30,
+            borderRadius: '50%',
+            background: 'rgba(0,0,0,0.18)',
+            filter: 'blur(6px)',
+            opacity: 1 - (y / (ICON * 1.6)) * 0.5,
+          }}
+        />
+
+        {/* app icon：圆角方块 + 铃形符号（自绘 SVG，半屏特写） */}
+        <svg
+          width={ICON}
+          height={ICON}
+          viewBox="0 0 420 420"
+          style={{
+            position: 'absolute',
+            left: CX - ICON / 2,
+            top: iconTop,
+            transform: `scale(${sx}, ${sy})`,
+            transformOrigin: '50% 100%',
+          }}
+        >
+          <rect x={14} y={14} width={392} height={392} rx={88} fill={G.card} stroke={G.ink} strokeWidth={18} />
+          {/* 符号：简洁铃形 */}
+          <path
+            d="M 210 110 C 160 110 140 155 138 200 C 136 245 118 272 100 290 L 320 290 C 302 272 284 245 282 200 C 280 155 260 110 210 110 Z"
+            fill="none"
+            stroke={G.ink}
+            strokeWidth={22}
+            strokeLinejoin="round"
+          />
+          <circle cx={210} cy={322} r={22} fill={AMBER} />
+        </svg>
+
+        {/* 功能面板卡：落定后弹出 */}
+        {panelT > 0 && (
+          <div
+            style={{
+              position: 'absolute',
+              left: CX + ICON / 2 + 60,
+              top: GROUND - ICON - 40,
+              transform: `scale(${panelT})`,
+              transformOrigin: 'left bottom',
+              opacity: Math.min(1, panelT * 1.5),
+            }}
+          >
+            <Card w={520} h={330} seed={4} />
+            <div
+              style={{
+                position: 'absolute',
+                top: -28,
+                left: 24,
+                padding: '10px 24px',
+                borderRadius: 24,
+                background: AMBER,
+                color: '#fff',
+                fontFamily: 'Helvetica, Arial, sans-serif',
+                fontWeight: 800,
+                fontSize: 26,
+              }}
+            >
+              New
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/icon-performance-moves/PopBurstConfirm.tsx

@@ -0,0 +1,162 @@
+// 爆花确认（pop-burst-confirm）——确认时刻的三连爆
+// 半屏大对勾 icon（圆底+勾）：先缩 0.6x 蓄力 3f → 弹 1.35x 过冲 → 落回 1x，
+// 释放帧同帧中心射出 10 根短线粒子（径向飞出后消失）+ 一圈描边圆环从
+// icon 边缘扩到 2.5 倍直径淡出；随后 "Deployed" 小标签弹出。
+// 节拍：0–20 静置（空心圆待确认）→ 20–23 缩 0.6x → 23–27 蓄力 3f →
+// 27 释放（勾画出+粒子+圆环）→ 27–44 过冲落回 → 40–50 标签弹出 → 55 后真静止 65f。
+// 帧确定，无随机源（粒子角度抖动用 sin 散列）。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G } from '../_fixtures/Fixtures';
+
+const AMBER = '#b45309';
+const POP = 27; // 释放帧
+const DUR = 120;
+
+export const PopBurstConfirm: React.FC = () => {
+  const f = useCurrentFrame();
+
+  // icon 缩放：蓄力→过冲→落回
+  const scale = (() => {
+    if (f <= 20) return 1;
+    if (f <= 23)
+      return interpolate(f, [20, 23], [1, 0.6], { easing: Easing.in(Easing.quad) });
+    if (f <= POP) return 0.6;
+    if (f <= 33)
+      return interpolate(f, [POP, 33], [0.6, 1.35], { easing: Easing.out(Easing.cubic) });
+    return interpolate(f, [33, 44], [1.35, 1], {
+      extrapolateRight: 'clamp',
+      easing: Easing.out(Easing.back(2)),
+    });
+  })();
+
+  // 对勾：释放帧起 8f 内画出（dashoffset 滑窗）
+  const checkT = interpolate(f, [POP, POP + 8], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+
+  // 粒子：释放帧起 14f 径向飞出（幅度加码到 190px 保半屏可感）
+  const pt = interpolate(f, [POP, POP + 14], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const pDist = 210 + 190 * Easing.out(Easing.cubic)(pt);
+  const pLen = 46 * (1 - pt);
+
+  // 圆环：释放帧起 20f 从 icon 边缘扩到 2.5 倍直径淡出
+  const rt = interpolate(f, [POP, POP + 20], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const ringR = 200 + 300 * Easing.out(Easing.cubic)(rt);
+  const ringO = 0.85 * (1 - rt);
+  const ringW = 16 - 12 * rt;
+
+  // 标签：40f 弹出（back 超调）
+  const tagT = interpolate(f, [40, 50], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.back(2.6)),
+  });
+
+  const CX = 960;
+  const CY = 470;
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      {/* 扩散圆环（不随 icon 缩放） */}
+      {rt > 0 && rt < 1 && (
+        <svg
+          width={1400}
+          height={1400}
+          style={{ position: 'absolute', left: CX - 700, top: CY - 700 }}
+        >
+          <circle cx={700} cy={700} r={ringR} fill="none" stroke={AMBER} strokeWidth={ringW} opacity={ringO} />
+        </svg>
+      )}
+
+      {/* 粒子：10 根短线径向飞出，角度带 sin 散列微抖 */}
+      {pt > 0 && pt < 1 && (
+        <svg
+          width={1400}
+          height={1400}
+          style={{ position: 'absolute', left: CX - 700, top: CY - 700 }}
+        >
+          {Array.from({ length: 10 }).map((_, i) => {
+            const ang = ((i * 36 + 9 * Math.sin(i * 7.31)) * Math.PI) / 180;
+            const x1 = 700 + Math.cos(ang) * pDist;
+            const y1 = 700 + Math.sin(ang) * pDist;
+            const x2 = 700 + Math.cos(ang) * (pDist + pLen);
+            const y2 = 700 + Math.sin(ang) * (pDist + pLen);
+            return (
+              <line
+                key={i}
+                x1={x1} y1={y1} x2={x2} y2={y2}
+                stroke={i % 5 < 2 ? AMBER : G.ink}
+                strokeWidth={12}
+                strokeLinecap="round"
+                opacity={1 - pt}
+              />
+            );
+          })}
+        </svg>
+      )}
+
+      {/* 主体 icon：圆底 + 对勾（半屏特写 ~480px） */}
+      <svg
+        width={480}
+        height={480}
+        viewBox="0 0 480 480"
+        style={{
+          position: 'absolute',
+          left: CX - 240,
+          top: CY - 240,
+          transform: `scale(${scale})`,
+          transformOrigin: '50% 50%',
+        }}
+      >
+        <circle cx={240} cy={240} r={190} fill={G.card} stroke={G.ink} strokeWidth={22} />
+        {checkT > 0 && (
+          <path
+            d="M 150 245 L 215 310 L 340 175"
+            fill="none"
+            stroke={AMBER}
+            strokeWidth={34}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            pathLength={1}
+            strokeDasharray={1}
+            strokeDashoffset={1 - checkT}
+          />
+        )}
+      </svg>
+
+      {/* Deployed 小标签 */}
+      {tagT > 0 && (
+        <div
+          style={{
+            position: 'absolute',
+            left: CX - 130,
+            top: CY + 300,
+            width: 260,
+            transform: `scale(${tagT})`,
+            transformOrigin: '50% 0%',
+            padding: '16px 0',
+            borderRadius: 40,
+            background: G.ink,
+            color: '#ffffff',
+            textAlign: 'center',
+            fontFamily: 'Helvetica, Arial, sans-serif',
+            fontWeight: 800,
+            fontSize: 40,
+            letterSpacing: 1,
+          }}
+        >
+          Deployed
+        </div>
+      )}
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/impact-feedback/AnimeImpact.tsx

@@ -0,0 +1,149 @@
+import React from 'react';
+import { AbsoluteFill, Easing, interpolate, useCurrentFrame } from 'remotion';
+import { FakeDashboard, Card, TitleBlock, G } from '../_fixtures/Fixtures';
+
+// anime-impact 动漫打击帧〔组合〕：crash-zoom 急推撞停在目标卡上的那 3 帧，
+// 整幅画面反转成黑白负片 + 手绘放射集中线 + 红青通道 ±8px 色散——
+// 像素被打了一拳，第 4 帧一切撤掉恢复干净特写 + 6px 震屏衰减。
+// 节拍：0–24 建立全景 hold → 24–30 急推(6f ease-in 到 2.4x) →
+//       30–32 冲击帧(3f 负片/集中线/RGB split，每帧换形态) →
+//       33 起恢复特写 + 震屏衰减 → ~45–120 静止读卡。
+
+const ZOOM_START = 24;
+const ZOOM_END = 30; // 撞停帧
+const IMPACT_LEN = 3; // 冲击帧持续 3f（30/31/32）
+const RECOVER = ZOOM_END + IMPACT_LEN; // 33：恢复干净特写
+
+// 目标卡：盖在 3x2 网格中排第 2 格上（列 2 行 1）
+const CARD = { x: 808, y: 108, w: 524, h: 454 };
+const CX = CARD.x + CARD.w / 2; // 1070
+const CY = CARD.y + CARD.h / 2; // 335
+const SCALE_END = 2.4;
+
+// seed 正弦哈希（禁 Math.random）
+const rnd = (i: number) => {
+  const s = Math.sin(i * 127.3) * 43758.5453;
+  return s - Math.floor(s);
+};
+
+// 手绘放射集中线：30 根从卡片周缘指向画框外的尖楔形，phase 换一次形态
+const SpeedLines: React.FC<{ phase: number }> = ({ phase }) => {
+  const cx = 960;
+  const cy = 540;
+  const R_OUT = 1300; // 超出画框对角(~1101)
+  const polys = Array.from({ length: 30 }).map((_, i) => {
+    const k = i * 13 + phase * 101;
+    const ang = ((i + 0.5) / 30) * Math.PI * 2 + (rnd(k) - 0.5) * 0.22;
+    const r0 = 300 + rnd(k + 1) * 220; // 内端长短随机（卡片周缘一带）
+    const halfW = (7 + rnd(k + 2) * 16) / R_OUT; // 外端宽 7–23px 的楔形
+    const ax = cx + Math.cos(ang) * r0;
+    const ay = cy + Math.sin(ang) * r0;
+    const b1x = cx + Math.cos(ang - halfW) * R_OUT;
+    const b1y = cy + Math.sin(ang - halfW) * R_OUT;
+    const b2x = cx + Math.cos(ang + halfW) * R_OUT;
+    const b2y = cy + Math.sin(ang + halfW) * R_OUT;
+    return `${ax},${ay} ${b1x},${b1y} ${b2x},${b2y}`;
+  });
+  return (
+    <svg
+      viewBox="0 0 1920 1080"
+      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
+    >
+      {polys.map((pts, i) => (
+        <polygon key={i} points={pts} fill={i % 4 === 0 ? '#111111' : '#f5f5f5'} />
+      ))}
+    </svg>
+  );
+};
+
+// 目标卡叠层 + 全景底
+const Scene: React.FC = () => (
+  <>
+    <FakeDashboard variant="A" />
+    <div style={{ position: 'absolute', left: CARD.x, top: CARD.y }}>
+      <Card
+        w={CARD.w}
+        h={CARD.h}
+        seed={9}
+        style={{ boxShadow: '0 10px 36px rgba(0,0,0,0.18)', border: `3px solid ${G.ink}` }}
+      />
+      <div style={{ position: 'absolute', left: 24, bottom: 96 }}>
+        <TitleBlock text="IMPACT" size={92} />
+      </div>
+    </div>
+  </>
+);
+
+export const AnimeImpact: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 急推：6f ease-in 撞到 2.4x，卡心推到画面正中
+  const p = interpolate(frame, [ZOOM_START, ZOOM_END], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.in(Easing.cubic),
+  });
+  const scale = 1 + p * (SCALE_END - 1);
+  const tx = (960 - CX) * p;
+  const ty = (540 - CY) * p;
+
+  const impact = frame >= ZOOM_END && frame < RECOVER;
+  const phase = impact ? frame - ZOOM_END : 0; // 每 1f 换一次集中线形态
+
+  // 撞停后震屏：6px 起步、指数衰减，~12f 收干后真静止
+  const since = frame - RECOVER;
+  const env = since >= 0 ? 6 * Math.exp(-since / 2.2) : 0;
+  const shakeX = env * Math.sin(since * 3.7);
+  const shakeY = env * 0.7 * Math.sin(since * 5.1 + 0.9);
+
+  const zoomStyle: React.CSSProperties = {
+    position: 'absolute',
+    inset: 0,
+    transform: `translate(${tx}px, ${ty}px) scale(${scale})`,
+    transformOrigin: `${CX}px ${CY}px`,
+  };
+
+  return (
+    <AbsoluteFill style={{ background: impact ? '#131315' : G.bg, overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', inset: 0, transform: `translate(${shakeX}px, ${shakeY}px)` }}>
+        {/* 主层：冲击帧期间整幅负片黑白 */}
+        <div style={{ ...zoomStyle, filter: impact ? 'invert(1) grayscale(1)' : 'none' }}>
+          <Scene />
+        </div>
+        {/* RGB split：红/青双层负片副本，screen 叠底、±8px 错位（随 phase 抖动） */}
+        {impact && (
+          <>
+            <div
+              style={{
+                position: 'absolute',
+                inset: 0,
+                mixBlendMode: 'screen',
+                transform: `translate(-8px, ${phase % 2 === 0 ? 4 : -4}px)`,
+              }}
+            >
+              <div style={{ ...zoomStyle, filter: 'invert(1) grayscale(1)' }}>
+                <Scene />
+              </div>
+              <div style={{ position: 'absolute', inset: 0, background: '#ff0033', mixBlendMode: 'multiply' }} />
+            </div>
+            <div
+              style={{
+                position: 'absolute',
+                inset: 0,
+                mixBlendMode: 'screen',
+                transform: `translate(8px, ${phase % 2 === 0 ? -4 : 4}px)`,
+              }}
+            >
+              <div style={{ ...zoomStyle, filter: 'invert(1) grayscale(1)' }}>
+                <Scene />
+              </div>
+              <div style={{ position: 'absolute', inset: 0, background: '#00e5ff', mixBlendMode: 'multiply' }} />
+            </div>
+            {/* 手绘放射集中线：每帧换形态 */}
+            <SpeedLines phase={phase} />
+          </>
+        )}
+      </div>
+    </AbsoluteFill>
+  );
+};