hyper-animator-codex 0.7.1 → 0.8.1

package/skills/hyper-animator-codex/references/shotcraft/source/demos/collab-cursor-moves/CursorDialogueDuet.tsx

@@ -0,0 +1,145 @@
+// cursor-dialogue-duet —— figma-devmode 0:16–0:20
+// 纯暗场上 Designer(蓝)/Developer(绿) 两枚具名光标做"对话式"双人舞：
+// 相互靠近 → 绕位交换 → 名牌一亮一暗交接 → 一枚放大成巨箭头当转场。
+import React from 'react';
+import { useCurrentFrame, interpolate } from 'remotion';
+
+const BLUE = '#4C8DF6';
+const GREEN = '#2FBF71';
+const DARK = '#101012';
+
+const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
+const easeInOutCubic = (t: number) =>
+  t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+const easeInCubic = (t: number) => t * t * t;
+
+const clamp01 = (t: number) => Math.min(1, Math.max(0, t));
+
+// 三次贝塞尔单段位移
+const bez = (
+  t: number,
+  p0: [number, number], c1: [number, number], c2: [number, number], p3: [number, number],
+): [number, number] => {
+  const u = 1 - t;
+  const x = u * u * u * p0[0] + 3 * u * u * t * c1[0] + 3 * u * t * t * c2[0] + t * t * t * p3[0];
+  const y = u * u * u * p0[1] + 3 * u * u * t * c1[1] + 3 * u * t * t * c2[1] + t * t * t * p3[1];
+  return [x, y];
+};
+
+const Cursor: React.FC<{
+  x: number; y: number; scale: number; color: string; name: string;
+  badgeLit: number; // 0 压暗 1 点亮
+  badgeOpacity?: number;
+}> = ({ x, y, scale, color, name, badgeLit, badgeOpacity = 1 }) => (
+  <div style={{ position: 'absolute', left: x, top: y, transform: `scale(${scale})`, transformOrigin: '0 0' }}>
+    <svg width={42} height={62} viewBox="0 0 13.5 20" style={{ display: 'block', overflow: 'visible' }}>
+      <path
+        d="M0.5 0.5 L0.5 17.2 L4.7 13.4 L7.3 19.5 L10 18.3 L7.4 12.3 L13 12.3 Z"
+        fill={color} stroke="#ffffff" strokeWidth={1.1} strokeLinejoin="round"
+      />
+    </svg>
+    <div style={{
+      position: 'absolute', left: 34, top: 56, whiteSpace: 'nowrap',
+      background: color, color: '#fff', borderRadius: 8, padding: '5px 13px',
+      fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 700, fontSize: 16,
+      opacity: badgeOpacity * (0.28 + 0.72 * badgeLit),
+      filter: `saturate(${0.35 + 0.65 * badgeLit})`,
+      boxShadow: badgeLit > 0.6 ? `0 0 ${22 * badgeLit}px ${color}` : 'none',
+    }}>
+      {name}
+    </div>
+  </div>
+);
+
+export const CursorDialogueDuet: React.FC = () => {
+  const f = useCurrentFrame();
+  const CX = 960; const CY = 520;
+  const R = 270;
+
+  // ---------- Designer(蓝) 轨迹 ----------
+  let dx = 0; let dy = 0;
+  // 入场：画外左 → 左位（弹性减速）
+  {
+    const t = easeOutCubic(clamp01(f / 24));
+    [dx, dy] = bez(t, [-140, 260], [300, 300], [520, 620], [CX - R, CY]);
+  }
+  // 靠近：向 Developer 探身（26–56）
+  if (f > 26) {
+    const t = easeInOutCubic(clamp01((f - 26) / 30));
+    const [nx, ny] = bez(t, [CX - R, CY], [CX - R + 120, CY - 150], [CX - 90, CY - 120], [CX - 120, CY - 24]);
+    dx = nx; dy = ny;
+  }
+  // 绕位：从左侧经上方绕到右侧（60–98）
+  if (f > 60) {
+    const t = easeInOutCubic(clamp01((f - 60) / 38));
+    const a = Math.PI + t * Math.PI; // 180° → 360°(上半弧)
+    dx = CX + Math.cos(a) * (R - 40) * (1 - t * 0.15) - 0;
+    dy = CY + Math.sin(a) * (R - 110);
+    if (t < 0.08) { // 与靠近段衔接的小混合
+      const m = t / 0.08;
+      dx = (CX - 120) * (1 - m) + dx * m;
+      dy = (CY - 24) * (1 - m) + dy * m;
+    }
+  }
+  // 退场：加速甩出画面左下（104–128）
+  if (f > 104) {
+    const t = easeInCubic(clamp01((f - 104) / 24));
+    dx = interpolate(t, [0, 1], [dx, -320]);
+    dy = interpolate(t, [0, 1], [dy, 1240]);
+  }
+
+  // ---------- Developer(绿) 轨迹 ----------
+  let gx = 0; let gy = 0;
+  {
+    const t = easeOutCubic(clamp01((f - 4) / 24));
+    [gx, gy] = bez(clamp01(t), [2080, 820], [1700, 760], [1420, 420], [CX + R, CY]);
+  }
+  // 回应：微微后仰再前倾（30–58）
+  if (f > 30) {
+    const t = easeInOutCubic(clamp01((f - 30) / 28));
+    const sway = Math.sin(t * Math.PI) * 70;
+    gx = CX + R + sway * 0.6;
+    gy = CY - Math.sin(t * Math.PI * 2) * 40;
+  }
+  // 绕位：从右侧经下方绕到左侧（60–98）
+  if (f > 60) {
+    const t = easeInOutCubic(clamp01((f - 60) / 38));
+    const a = 0 + t * Math.PI; // 0° → 180°(下半弧)
+    gx = CX + Math.cos(a) * (R - 40);
+    gy = CY + Math.sin(a) * (R - 110);
+  }
+  // 终场：冲向中心并放大成巨箭头（100–140）
+  const blow = easeInCubic(clamp01((f - 100) / 34));
+  if (f > 100) {
+    gx = interpolate(blow, [0, 1], [gx, -160]);
+    gy = interpolate(blow, [0, 1], [gy, -140]);
+  }
+  const gScale = 2.8 + blow * 66;
+
+  // ---------- 名牌灯光交接 ----------
+  // 前半 Designer 点亮，绕位中段(f≈78)交接给 Developer
+  const handoff = easeInOutCubic(clamp01((f - 70) / 14));
+  const dLit = f < 24 ? easeOutCubic(clamp01(f / 24)) : 1 - handoff;
+  const gLit = handoff;
+  const dBadgeIn = easeOutCubic(clamp01((f - 12) / 14));
+  const gBadgeIn = easeOutCubic(clamp01((f - 18) / 14));
+
+  // 对话"脉冲"——靠近对话时轻微缩放呼吸
+  const dPulse = f > 26 && f < 60 ? 1 + Math.sin((f - 26) * 0.5) * 0.05 : 1;
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: DARK, position: 'relative', overflow: 'hidden' }}>
+      {/* 暗场微光晕，给纯黑一点空间感 */}
+      <div style={{
+        position: 'absolute', inset: 0,
+        background: `radial-gradient(ellipse 1100px 700px at 50% 48%, rgba(255,255,255,0.045), transparent 70%)`,
+      }} />
+      {f <= 132 && (
+        <Cursor x={dx} y={dy} scale={2.8 * dPulse} color={BLUE} name="Designer"
+          badgeLit={dLit} badgeOpacity={dBadgeIn * (f > 104 ? 1 - easeInCubic(clamp01((f - 104) / 18)) : 1)} />
+      )}
+      <Cursor x={gx} y={gy} scale={gScale} color={GREEN} name="Developer"
+        badgeLit={gLit} badgeOpacity={gBadgeIn * (1 - clamp01((f - 102) / 12))} />
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/color-block-step-wipe/ColorBlockStepWipe.tsx

@@ -0,0 +1,157 @@
+// color-block-step-wipe —— 纯色矩形按 steps() 离散阶跃吞屏转场
+// 源：notion-ai 1.5–3.5s（蓝块中央阶跃生长）+ 26–27s（红块右下角斜向吃屏，携带页面卡）
+// 核心语法：无缓动、逐帧硬跳的块状生长，像素游戏手感。
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { G, Card } from '../_fixtures/Fixtures';
+
+const BLUE = '#2383e2';
+const RED = '#e8503a';
+
+// 离散阶跃：frame 越过阈值瞬间跳到新值，无插值
+const stepVal = (frame: number, steps: Array<[number, number]>): number => {
+  let v = steps[0][1];
+  for (const [f, val] of steps) {
+    if (frame >= f) v = val;
+  }
+  return v;
+};
+
+// 蓝底上的圆形 AI 表情徽章
+const AiBadge: React.FC<{ scale: number; opacity: number }> = ({ scale, opacity }) => (
+  <div
+    style={{
+      width: 170,
+      height: 170,
+      borderRadius: '50%',
+      background: '#fdf6ec',
+      opacity,
+      transform: `scale(${scale})`,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      boxShadow: '0 6px 24px rgba(0,0,0,0.18)',
+    }}
+  >
+    <svg width={110} height={110} viewBox="0 0 110 110">
+      <circle cx={36} cy={44} r={8} fill={G.ink} />
+      <circle cx={74} cy={44} r={8} fill={G.ink} />
+      <path d="M32 70 Q55 88 78 70" stroke={G.ink} strokeWidth={7} fill="none" strokeLinecap="round" />
+      <path d="M24 28 Q34 20 44 26" stroke={G.ink} strokeWidth={6} fill="none" strokeLinecap="round" />
+      <path d="M66 26 Q76 20 86 28" stroke={G.ink} strokeWidth={6} fill="none" strokeLinecap="round" />
+    </svg>
+  </div>
+);
+
+// 变体 B 背景：极简灰阶页面（不动 Fixtures，只组合）
+const GrayPage: React.FC = () => (
+  <AbsoluteFill style={{ background: G.panel, padding: '90px 160px', boxSizing: 'border-box' }}>
+    <div style={{ height: 40, width: 560, background: G.bar, borderRadius: 12, marginBottom: 40 }} />
+    {[92, 78, 86, 60].map((w, i) => (
+      <div key={i} style={{ height: 18, width: `${w}%`, background: G.line, borderRadius: 9, marginBottom: 24 }} />
+    ))}
+    <div style={{ display: 'flex', gap: 32, marginTop: 30 }}>
+      <Card w={420} h={280} seed={2} />
+      <Card w={420} h={280} seed={5} />
+    </div>
+  </AbsoluteFill>
+);
+
+export const ColorBlockStepWipe: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // ---------- 场景 A（0–77f）：蓝块中央阶跃生长 ----------
+  if (frame < 78) {
+    // [宽, 高] 逐级硬跳：小条 → 长条 → 半屏色带 → 全屏
+    const w = stepVal(frame, [
+      [0, 0],
+      [8, 280],
+      [16, 820],
+      [24, 1340],
+      [32, 1920],
+      [44, 1920],
+    ]);
+    const h = stepVal(frame, [
+      [0, 0],
+      [8, 96],
+      [16, 96],
+      [24, 320],
+      [32, 580],
+      [44, 1080],
+    ]);
+    // 徽章：全屏接管后阶跃弹出（同样离散，两跳到位）
+    const badgeScale = stepVal(frame, [
+      [0, 0],
+      [52, 0.55],
+      [58, 1.12],
+      [63, 1],
+    ]);
+    const badgeOpacity = frame >= 52 ? 1 : 0;
+    return (
+      <AbsoluteFill style={{ background: G.bg, alignItems: 'center', justifyContent: 'center' }}>
+        <div
+          style={{
+            position: 'absolute',
+            left: 960 - w / 2,
+            top: 540 - h / 2,
+            width: w,
+            height: h,
+            background: BLUE,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        />
+        <AiBadge scale={badgeScale} opacity={badgeOpacity} />
+      </AbsoluteFill>
+    );
+  }
+
+  // ---------- 场景 B（78–149f）：红块从右下角斜向阶跃吃屏，携带灰阶页面卡 ----------
+  // p 控制对角线推进量：p=0 无，p=200 全覆盖
+  const p = stepVal(frame, [
+    [78, 0],
+    [84, 42],
+    [96, 106],
+    [108, 200],
+  ]);
+  // 卡片随色块逐跳前进（同样离散跳位）
+  const cardPos = stepVal(frame, [
+    [78, 0],
+    [84, 1],
+    [96, 2],
+    [108, 3],
+  ]);
+  const cardXY: Array<[number, number]> = [
+    [2100, 1180], // 画外
+    [1480, 800],
+    [980, 560],
+    [560, 350],
+  ];
+  const [cx, cy] = cardXY[cardPos];
+  const clip =
+    p <= 0
+      ? 'polygon(100% 100%, 100% 100%, 100% 100%)'
+      : `polygon(${100 - p}% 100%, 100% ${100 - p}%, 100% 100%)`;
+
+  return (
+    <AbsoluteFill>
+      <GrayPage />
+      <AbsoluteFill style={{ background: RED, clipPath: clip }} />
+      {p > 0 && (
+        <div
+          style={{
+            position: 'absolute',
+            left: cx - 210,
+            top: cy - 145,
+            transform: 'rotate(-4deg)',
+            boxShadow: '0 18px 50px rgba(0,0,0,0.3)',
+            borderRadius: 14,
+          }}
+        >
+          <Card w={420} h={290} seed={7} />
+        </div>
+      )}
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/command-palette-summon/CommandPaletteSummon.tsx

@@ -0,0 +1,173 @@
+// command-palette-summon —— 命令面板降临
+// FakeDashboard 静置 → 整屏压暗+blur → ⌘K 面板从中心上方 20px 带 overshoot 弹落
+// → 5 条候选行错峰浮现 → 模拟输入 2 字母（灰块当字符）候选 5→3→2 收窄
+// → 高亮首条。f=110 后全静止（40f）。光标 f<104 闪烁、之后常亮。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, FakeDashboard } from '../_fixtures/Fixtures';
+
+const CL = { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' } as const;
+
+// 时间轴
+const DIM0 = 12; // 压暗开始（前 12f 初始静置）
+const DIM1 = 22;
+const PANEL_IN = 18; // 面板开始弹落
+const ROWS_START = 32; // 候选行开始错峰浮现
+const KEY1 = 62; // 第一个字母
+const KEY2 = 78; // 第二个字母
+const HL = 94; // 高亮首条
+const BLINK_END = 104; // 光标停止闪烁（常亮）
+
+const PANEL_W = 780;
+const PANEL_X = (1920 - PANEL_W) / 2;
+const PANEL_Y = 290;
+const ROW_H = 72;
+const ROW_GAP = 8;
+const EXIT_DUR = 10;
+
+// exitAt: 0=留到最后，1=第一次按键后退出，2=第二次按键后退出
+const ROWS = [
+  { titleW: 52, exitAt: 0 },
+  { titleW: 38, exitAt: 0 },
+  { titleW: 61, exitAt: 2 },
+  { titleW: 45, exitAt: 1 },
+  { titleW: 56, exitAt: 1 },
+];
+
+const PaletteRow: React.FC<{ i: number; frame: number }> = ({ i, frame }) => {
+  const { titleW, exitAt } = ROWS[i];
+  const inStart = ROWS_START + i * 4;
+  const exitStart = exitAt === 1 ? KEY1 + 3 : exitAt === 2 ? KEY2 + 3 : null;
+
+  if (exitStart !== null && frame >= exitStart + EXIT_DUR) return null; // 条件卸载，非 opacity 0
+
+  const inOp = interpolate(frame, [inStart, inStart + 8], [0, 1], CL);
+  const inY = interpolate(frame, [inStart, inStart + 8], [12, 0], {
+    easing: Easing.out(Easing.cubic),
+    ...CL,
+  });
+  const exitT =
+    exitStart === null
+      ? 1
+      : interpolate(frame, [exitStart, exitStart + EXIT_DUR], [1, 0], {
+          easing: Easing.inOut(Easing.cubic),
+          ...CL,
+        });
+
+  // 高亮首条
+  const hl = i === 0 ? interpolate(frame, [HL, HL + 10], [0, 1], CL) : 0;
+
+  return (
+    <div
+      style={{
+        height: (ROW_H + ROW_GAP) * exitT,
+        opacity: inOp * exitT,
+        overflow: 'hidden',
+      }}
+    >
+      <div
+        style={{
+          height: ROW_H,
+          borderRadius: 12,
+          background: hl > 0 ? `rgba(228,228,226,${hl})` : 'transparent',
+          boxShadow: hl > 0 ? `inset 4px 0 0 rgba(47,47,47,${hl})` : 'none',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 20,
+          padding: '0 22px',
+          boxSizing: 'border-box',
+          transform: `translateY(${inY}px)`,
+        }}
+      >
+        <div style={{ width: 36, height: 36, borderRadius: 9, background: G.mid }} />
+        <div style={{ height: 14, width: `${titleW}%`, background: G.bar, borderRadius: 7 }} />
+        <div style={{ marginLeft: 'auto', width: 58, height: 24, borderRadius: 6, background: G.line }} />
+      </div>
+    </div>
+  );
+};
+
+export const CommandPaletteSummon: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 背景压暗 + blur
+  const dim = interpolate(frame, [DIM0, DIM1], [0, 0.45], CL);
+  const blur = interpolate(frame, [DIM0, DIM1], [0, 10], CL);
+
+  // 面板弹落：上方 20px → 过冲 +8px → 落回 0
+  const panelY =
+    frame < PANEL_IN + 9
+      ? interpolate(frame, [PANEL_IN, PANEL_IN + 9], [-20, 8], {
+          easing: Easing.out(Easing.cubic),
+          ...CL,
+        })
+      : interpolate(frame, [PANEL_IN + 9, PANEL_IN + 15], [8, 0], {
+          easing: Easing.inOut(Easing.cubic),
+          ...CL,
+        });
+  const panelOp = interpolate(frame, [PANEL_IN, PANEL_IN + 7], [0, 1], CL);
+
+  // 模拟输入：已敲字符数
+  const typed = (frame >= KEY1 ? 1 : 0) + (frame >= KEY2 ? 1 : 0);
+  // 光标闪烁（周期 16f），BLINK_END 后常亮保证收尾静止
+  const cursorOn = frame >= BLINK_END ? true : (frame - PANEL_IN) % 16 < 8;
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      <div style={{ filter: frame < DIM0 ? undefined : `blur(${blur}px)` }}>
+        <FakeDashboard variant="A" />
+      </div>
+      <div style={{ position: 'absolute', inset: 0, background: `rgba(20,20,20,${dim})` }} />
+
+      {frame >= PANEL_IN && (
+        <div
+          style={{
+            position: 'absolute',
+            left: PANEL_X,
+            top: PANEL_Y,
+            width: PANEL_W,
+            transform: `translateY(${panelY}px)`,
+            opacity: panelOp,
+            background: G.card,
+            borderRadius: 18,
+            border: `2px solid ${G.border}`,
+            boxShadow: '0 28px 90px rgba(0,0,0,0.4)',
+            padding: 20,
+            boxSizing: 'border-box',
+          }}
+        >
+          {/* 输入框 */}
+          <div
+            style={{
+              height: 76,
+              borderBottom: `2px solid ${G.line}`,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 14,
+              padding: '0 10px 14px 10px',
+              boxSizing: 'border-box',
+            }}
+          >
+            <div style={{ width: 32, height: 32, borderRadius: 8, background: G.bar }} />
+            {/* 已敲入的字符灰块 */}
+            {Array.from({ length: typed }).map((_, c) => (
+              <div key={c} style={{ width: 28, height: 38, borderRadius: 6, background: '#4a4a48' }} />
+            ))}
+            {/* 光标 */}
+            {cursorOn && <div style={{ width: 4, height: 42, background: G.ink, borderRadius: 2 }} />}
+            {/* 占位提示条：敲第一个字母时卸载 */}
+            {typed === 0 && (
+              <div style={{ width: 260, height: 14, borderRadius: 7, background: G.line, opacity: 0.8 }} />
+            )}
+          </div>
+          {/* 候选行 */}
+          <div style={{ paddingTop: 14 }}>
+            {ROWS.map((_, i) => (
+              <PaletteRow key={i} i={i} frame={frame} />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/crane-rise-reveal/CraneRiseReveal.tsx

@@ -0,0 +1,91 @@
+// 升降臂拉升揭示（crane-rise-reveal）——crane shot。
+// 世界 = FakeDashboard(B) 五行列表。相机 transform-origin 左上，联动公式：
+// translate = 屏幕中心 - 对准点*scale（对准点始终落在屏幕中心）。
+// 帧 0–20 hold 在底行特写（scale 3.2，对准第 5 行图标+长条）；
+// 帧 20–120 scale 3.2→1 + 对准点 (520,958)→(960,540)，Easing.out(quad) 减速升起；
+// 视野上缘每越过一行顶边，该行深色脉冲一拍（4f 起 18f 落）读作"涌入"；帧 120–150 满幅真静止。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, FakeDashboard } from '../_fixtures/Fixtures';
+
+const HOLD = 20; // 开场特写 hold
+const MOVE_END = 120; // 运镜结束，此后真静止
+const ease = Easing.out(Easing.quad);
+
+// FakeDashboard(B) 行几何：侧栏 220 + 内容 padding 36，header 72，5 行 gap 20
+const ROW_LEFT = 220 + 36;
+const ROW_W = 1920 - ROW_LEFT - 36;
+const ROW_H = (1080 - 72 - 72 - 4 * 20) / 5; // 171.2
+const rowTop = (i: number) => 72 + 36 + i * (ROW_H + 20);
+
+const F0 = { x: 520, y: rowTop(4) + ROW_H / 2 }; // 起点对准最底行（图标+标题条区域）
+const F1 = { x: 960, y: 540 }; // 终点对准整页中心
+const S0 = 3.2;
+
+const camAt = (frame: number) => {
+  const p = Math.min(1, Math.max(0, (frame - HOLD) / (MOVE_END - HOLD)));
+  const e = ease(p);
+  const s = S0 + (1 - S0) * e;
+  const fx = F0.x + (F1.x - F0.x) * e;
+  const fy = F0.y + (F1.y - F0.y) * e;
+  return { s, tx: 960 - fx * s, ty: 540 - fy * s, visTop: fy - 540 / s };
+};
+
+// 每行脉冲触发帧：视野上缘首次越过该行顶边（底行开场已在画内 → 运动一起步即触发）
+const triggers = Array.from({ length: 5 }, (_, i) => {
+  for (let f = HOLD; f <= MOVE_END; f++) {
+    if (camAt(f).visTop <= rowTop(i) + 1) return f;
+  }
+  return MOVE_END;
+});
+
+export const CraneRiseReveal: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { s, tx, ty } = camAt(frame);
+
+  return (
+    <div
+      style={{
+        width: 1920,
+        height: 1080,
+        background: G.bg,
+        overflow: 'hidden',
+        position: 'relative',
+      }}
+    >
+      <div
+        style={{
+          position: 'absolute',
+          width: 1920,
+          height: 1080,
+          transformOrigin: '0 0',
+          transform: `translate(${tx}px, ${ty}px) scale(${s})`,
+        }}
+      >
+        <FakeDashboard variant="B" />
+        {triggers.map((t, i) => {
+          const op = interpolate(frame, [t, t + 4, t + 22], [0, 0.22, 0], {
+            extrapolateLeft: 'clamp',
+            extrapolateRight: 'clamp',
+          });
+          if (op <= 0.001) return null;
+          return (
+            <div
+              key={i}
+              style={{
+                position: 'absolute',
+                left: ROW_LEFT,
+                top: rowTop(i),
+                width: ROW_W,
+                height: ROW_H,
+                borderRadius: 14,
+                background: G.ink,
+                opacity: op,
+              }}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/crash-zoom-punch/CrashImpactReal.tsx

@@ -0,0 +1,63 @@
+// crash-impact 急推撞停——同 crash-zoom 的急推，到位瞬间不回弹而是
+// 撞停震屏：高频抖 + 指数衰减 6f，然后真静止。对比点：重量感 vs 弹性感。
+import { AbsoluteFill, Img, interpolate, staticFile, useCurrentFrame, Easing } from 'remotion';
+import { CameraMotionBlur } from '@remotion/motion-blur';
+import layout from '../_textures/live-layout.json';
+
+export const CRASHIMPACT_DUR = 120;
+
+const TARGET = { cx: 960, cy: 772 };
+const VIEW_Y = 180;
+const HIT = 46;
+
+const Scene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const zoom = interpolate(frame, [40, HIT], [1, 2.5], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.bezier(0.55, 0, 0.7, 1),
+  });
+  const cx = interpolate(frame, [40, HIT], [960, TARGET.cx], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.in(Easing.quad),
+  });
+  const cy = interpolate(frame, [40, HIT], [VIEW_Y + 540, TARGET.cy], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.in(Easing.quad),
+  });
+  // 撞停震屏：amp 14px 指数衰减 ~6f 收干（可感幅度，参考轮 #2 可感档）
+  const since = frame - HIT;
+  const env = since >= 0 ? 14 * Math.exp(-since / 1.8) : 0;
+  const sx = env * Math.sin(since * 3.3);
+  const sy = env * 0.7 * Math.sin(since * 4.1 + 0.9);
+  return (
+    <AbsoluteFill style={{ backgroundColor: '#f9f6f1', overflow: 'hidden' }}>
+      <div
+        style={{
+          position: 'absolute', width: 1920, height: layout.projects.pageH,
+          transform: `translate(${960 - cx * zoom + sx}px, ${540 - cy * zoom + sy}px) scale(${zoom})`,
+          transformOrigin: '0 0',
+        }}
+      >
+        <Img src={staticFile('textures/live/projects-full.png')} style={{ position: 'absolute', width: 1920 }} />
+        <Img
+          src={staticFile('textures/live/card4-hires.png')}
+          style={{
+            position: 'absolute',
+            left: layout.projects.cards[3].x, top: layout.projects.cards[3].y,
+            width: layout.projects.cards[3].w, height: layout.projects.cards[3].h,
+          }}
+        />
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+export const CrashImpactReal: React.FC = () => {
+  const frame = useCurrentFrame();
+  // blur 只包急推段；撞停震屏段保持清晰抖动
+  return frame >= 38 && frame <= HIT ? (
+    <CameraMotionBlur shutterAngle={200} samples={20}>
+      <Scene />
+    </CameraMotionBlur>
+  ) : (
+    <Scene />
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/crash-zoom-punch/CrashZoomReal.tsx

@@ -0,0 +1,60 @@
+// crash-zoom 急推——真实 projects 页全景一拍推到 card4（高清纹理槽位）。
+// 节拍：0–40 全景 hold → 40–46 急推 6f（ease-in，峰值放大 2.6x）→
+// 46–51 过冲回弹（2.6→2.45）→ 51–120 特写 hold 真静止。
+// blur 只包 40–46 急推段（轮 A 规律：极速段 samples 20）。
+import { AbsoluteFill, Img, interpolate, staticFile, useCurrentFrame, Easing } from 'remotion';
+import { CameraMotionBlur } from '@remotion/motion-blur';
+import layout from '../_textures/live-layout.json';
+
+export const CRASHZOOM_DUR = 120;
+
+// card4 中心（页面空间）：x=781+357/2≈960, y=616+312/2=772
+const TARGET = { cx: 960, cy: 772 };
+const VIEW_Y = 180; // 全景观察窗顶（页面 y）
+
+const Scene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const zoom = interpolate(frame, [40, 46, 51], [1, 2.6, 2.45], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.bezier(0.55, 0, 0.7, 1),
+  });
+  const cx = interpolate(frame, [40, 46], [960, TARGET.cx], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.in(Easing.quad),
+  });
+  const cy = interpolate(frame, [40, 46], [VIEW_Y + 540, TARGET.cy], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.in(Easing.quad),
+  });
+  return (
+    <AbsoluteFill style={{ backgroundColor: '#f9f6f1', overflow: 'hidden' }}>
+      <div
+        style={{
+          position: 'absolute', width: 1920, height: layout.projects.pageH,
+          transform: `translate(${960 - cx * zoom}px, ${540 - cy * zoom}px) scale(${zoom})`,
+          transformOrigin: '0 0',
+        }}
+      >
+        <Img src={staticFile('textures/live/projects-full.png')} style={{ position: 'absolute', width: 1920 }} />
+        {/* 高清目标卡覆盖原位，放大后文字仍锐（Q2） */}
+        <Img
+          src={staticFile('textures/live/card4-hires.png')}
+          style={{
+            position: 'absolute',
+            left: layout.projects.cards[3].x, top: layout.projects.cards[3].y,
+            width: layout.projects.cards[3].w, height: layout.projects.cards[3].h,
+          }}
+        />
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+export const CrashZoomReal: React.FC = () => {
+  const frame = useCurrentFrame();
+  return frame >= 38 && frame <= 48 ? (
+    <CameraMotionBlur shutterAngle={200} samples={20}>
+      <Scene />
+    </CameraMotionBlur>
+  ) : (
+    <Scene />
+  );
+};