hyper-animator-codex 0.7.1 → 0.8.0

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

@@ -0,0 +1,147 @@
+import React from 'react';
+import { AbsoluteFill, Easing, interpolate, useCurrentFrame } from 'remotion';
+import { FakeDashboard, Card, TitleBlock, G } from '../_fixtures/Fixtures';
+
+// hit-counter 连招计数：三张功能卡接连砸入槽位，每次命中 = 全局顿帧 2f
+// + 落点伤害数字上浮渐隐 + 右上角 ×N 计数跳字（脉冲/倾斜逐次加码）。
+// 组合：hitstop + damage-number-pop + combo-counter。
+
+// —— 时间结构（动画时间 t 空间）——
+// 0–19 建立 hold；卡 i 于 t = HIT-10 → HIT ease-in 砸落；HIT = 30/60/90；
+// 每命中后真实帧多出 2f 顿帧，末卡效果收完后静止 hold 到 150。
+const HITS_T = [30, 60, 90]; // 命中时刻（重映射后的动画时间）
+const STOP = 2; // 每次顿帧帧数
+// 真实命中帧 = 动画命中时刻 + 前面累计的顿帧
+const HITS_REAL = HITS_T.map((h, i) => h + i * STOP);
+
+const SLOT_W = 420;
+const SLOT_H = 300;
+const SLOT_Y = 430;
+const SLOT_XS = [390, 890, 1390].map((cx) => cx - SLOT_W / 2);
+
+const DMG_TEXT = ['+1.2k', '+2.4k', '+4.8k'];
+const PULSE = [1.3, 1.45, 1.6]; // 计数器脉冲峰值，逐次递增
+const TILT = [-2, -4, -6]; // 计数器倾斜，逐次递增并保持
+
+export const HitCounter: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // —— 全局帧 remap：每个真实命中帧起冻结 2f（全画面顿帧）——
+  let t = frame;
+  for (const h of HITS_REAL) {
+    t -= Math.min(Math.max(frame - h, 0), STOP);
+  }
+
+  const count = HITS_T.filter((h) => t >= h).length; // 当前连击数
+
+  // —— 计数器（右上角 ×N）——
+  let counterScale = 1;
+  let counterRot = 0;
+  let counterSize = 84;
+  if (count > 0) {
+    const i = count - 1;
+    const since = t - HITS_T[i];
+    counterScale = 1 + (PULSE[i] - 1) * Math.exp(-since / 2.4); // 脉冲后指数回落
+    counterRot = TILT[i]; // 倾斜保持，越打越斜
+    counterSize = 84 + i * 14; // 字号逐次加大
+  }
+
+  return (
+    <AbsoluteFill style={{ background: G.bg, overflow: 'hidden' }}>
+      {/* 背景 dashboard 压暗，突出前景连招 */}
+      <div style={{ filter: 'saturate(0.9)', opacity: 0.4 }}>
+        <FakeDashboard variant="B" />
+      </div>
+
+      {/* 三个槽位虚线框（全程可见，建立期先立预期） */}
+      {SLOT_XS.map((x, i) => (
+        <div
+          key={`slot-${i}`}
+          style={{
+            position: 'absolute', left: x, top: SLOT_Y,
+            width: SLOT_W, height: SLOT_H,
+            border: `3px dashed ${G.bar}`, borderRadius: 16,
+            boxSizing: 'border-box',
+          }}
+        />
+      ))}
+
+      {/* 三张功能卡：各隔 30f，命中前 10f ease-in 加速砸落 */}
+      {HITS_T.map((hit, i) => {
+        const y = interpolate(t, [hit - 10, hit], [-520, SLOT_Y], {
+          extrapolateLeft: 'clamp',
+          extrapolateRight: 'clamp',
+          easing: Easing.in(Easing.quad),
+        });
+        if (t < hit - 10) return null;
+        // 触地 3f 内轻微压扁，衬托命中
+        const since = t - hit;
+        const squash = since >= 0 ? 1 - 0.06 * Math.exp(-since / 1.5) : 1;
+        return (
+          <div
+            key={`card-${i}`}
+            style={{
+              position: 'absolute', left: SLOT_XS[i], top: y,
+              transform: `scaleY(${squash})`, transformOrigin: 'bottom center',
+            }}
+          >
+            <Card w={SLOT_W} h={SLOT_H} seed={i + 2} style={{ boxShadow: '0 16px 48px rgba(0,0,0,0.25)' }} />
+          </div>
+        );
+      })}
+
+      {/* 伤害数字：命中帧起 scale 1.4→1、上浮 60px、12f 渐隐 */}
+      {HITS_T.map((hit, i) => {
+        const s = t - hit;
+        if (s < 0 || s > 14) return null;
+        const scale = interpolate(s, [0, 5], [1.4, 1], {
+          extrapolateRight: 'clamp',
+          easing: Easing.out(Easing.quad),
+        });
+        const rise = interpolate(s, [0, 12], [0, -60], {
+          extrapolateRight: 'clamp',
+          easing: Easing.out(Easing.quad),
+        });
+        const opacity = interpolate(s, [0, 4, 12], [1, 1, 0], {
+          extrapolateRight: 'clamp',
+        });
+        return (
+          <div
+            key={`dmg-${i}`}
+            style={{
+              position: 'absolute',
+              left: SLOT_XS[i] + SLOT_W / 2, top: SLOT_Y - 40 + rise,
+              transform: `translateX(-50%) scale(${scale})`,
+              transformOrigin: 'center bottom',
+              opacity,
+            }}
+          >
+            <TitleBlock text={DMG_TEXT[i]} size={72} />
+          </div>
+        );
+      })}
+
+      {/* 右上角连击计数器：跳字 + 递增脉冲 + 递增倾斜 */}
+      <div
+        style={{
+          position: 'absolute', right: 70, top: 50,
+          transform: `scale(${counterScale}) rotate(${counterRot}deg)`,
+          transformOrigin: 'center center',
+          opacity: count === 0 ? 0.25 : 1,
+        }}
+      >
+        <div
+          style={{
+            background: G.ink, color: '#fff', borderRadius: 18,
+            padding: '10px 34px 16px',
+            fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 800,
+            fontSize: counterSize, letterSpacing: -2, lineHeight: 1.1,
+            boxShadow: '0 8px 28px rgba(0,0,0,0.3)',
+          }}
+        >
+          {`×${count}`}
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/input-trigger-moves/CursorPerformancePunchIn.tsx

@@ -0,0 +1,154 @@
+// cursor-performance-punch-in —— 光标拟人表演 + 点击跟随推近
+// 放大光标沿贝塞尔曲线从左下滑入（末端甩腕过冲）→ 悬停按钮微亮响应 →
+// 点击：按钮下陷 + 涟漪扩散 + 整画布以点击点为原点推近 1→1.4 → 停 → 缓退回。
+// 推近"有去有回"区别 crash-zoom。收尾真静止 ≥35f。全灰阶。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { FakeDashboard, G } from '../_fixtures/Fixtures';
+
+// 时间轴（30fps，共 150f）
+const T = {
+  cursorInEnd: 30, // 0–30f 光标贝塞尔滑入（f24 过冲峰值，f24–30 拐回落定）
+  click: 40,       // 30–40f 悬停响应 10f；f40 点击
+  punchEnd: 52,    // 40–52f 推近 1→1.4（out-cubic）
+  holdEnd: 72,     // 52–72f 停 20f
+  backEnd: 90,     // 72–90f 缓退回 1.0（inOut-cubic）
+  total: 150,      // 90–150f 真静止 60f
+};
+
+// 按钮与点击点（画布坐标）
+const BTN = { x: 1560, y: 130, w: 200, h: 64 };
+const CLICK = { x: 1665, y: 168 };
+
+// 光标贝塞尔路径：左下滑入，先沉后扬，曲线有性格
+const P0 = { x: 180, y: 1000 };
+const P1 = { x: 820, y: 1075 };
+const P2 = { x: 1795, y: 560 };
+const P3 = { x: CLICK.x, y: CLICK.y };
+const bez = (t: number) => {
+  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 Cursor: React.FC<{ x: number; y: number }> = ({ x, y }) => (
+  <svg
+    width={48}
+    height={48}
+    viewBox="0 0 28 28"
+    style={{
+      position: 'absolute',
+      left: x - 3.4,
+      top: y - 1.7,
+      filter: 'drop-shadow(0 4px 7px rgba(0,0,0,0.4))',
+    }}
+  >
+    <path
+      d="M2 1 L2 23 L8 17.5 L11.5 25 L15.5 23.2 L12 15.8 L20 15 Z"
+      fill="#ffffff"
+      stroke="#2f2f2f"
+      strokeWidth={1.6}
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export const CursorPerformancePunchIn: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // —— 光标：路径参数 t，f24 过冲到 1.05（沿切线甩过按钮），f24–30 拐回 1.0 ——
+  const t =
+    frame < 24
+      ? interpolate(frame, [0, 24], [0, 1.05], {
+          extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+          easing: Easing.out(Easing.cubic),
+        })
+      : interpolate(frame, [24, T.cursorInEnd], [1.05, 1], {
+          extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+          easing: Easing.inOut(Easing.quad),
+        });
+  const cur = bez(t);
+  // 点击帧光标随按钮微沉 3px（f40–42 下，f42–46 回）
+  const dip = interpolate(frame, [T.click, T.click + 2, T.click + 6], [0, 3, 0], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+
+  // —— 悬停响应：f30–34 按钮提亮（深底提亮可见）+ 微放大 ——
+  const lift = interpolate(frame, [T.cursorInEnd, T.cursorInEnd + 4], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+  const c = Math.round(47 + 38 * lift); // #2f2f2f → #555553 近似
+  const hoverScale = 1 + 0.05 * lift;
+
+  // —— 点击下陷：f40–42 scale→0.94，f42–46 弹回 ——
+  const press = interpolate(frame, [T.click, T.click + 2, T.click + 6], [1, 0.94, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+
+  // —— 推近有去有回：40–52f 1→1.4（out-cubic）；72–90f 1.4→1（inOut）——
+  const zoom =
+    frame < T.holdEnd
+      ? interpolate(frame, [T.click, T.punchEnd], [1, 1.4], {
+          extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+          easing: Easing.out(Easing.cubic),
+        })
+      : interpolate(frame, [T.holdEnd, T.backEnd], [1.4, 1], {
+          extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+          easing: Easing.inOut(Easing.cubic),
+        });
+
+  // —— 涟漪：扩散 out-cubic（40–62f，直径 60→380），消散线性（40–66f）帧时间解耦 ——
+  const rippleAlive = frame >= T.click && frame < T.click + 26;
+  const rippleD = interpolate(frame, [T.click, T.click + 22], [60, 380], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+  const rippleOp = interpolate(frame, [T.click, T.click + 26], [0.9, 0], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+  const rippleBw = interpolate(frame, [T.click, T.click + 22], [9, 3], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, overflow: 'hidden', position: 'relative' }}>
+      {/* 整画布以点击点为原点推近 */}
+      <div style={{
+        position: 'absolute', inset: 0,
+        transform: `scale(${zoom})`,
+        transformOrigin: `${CLICK.x}px ${CLICK.y}px`,
+      }}>
+        <FakeDashboard variant="A" />
+
+        {/* 右上自绘 Deploy 按钮（叠在页面上） */}
+        <div style={{
+          position: 'absolute', left: BTN.x, top: BTN.y, width: BTN.w, height: BTN.h,
+          borderRadius: 14, background: `rgb(${c},${c},${c - 2})`,
+          boxShadow: '0 6px 18px rgba(0,0,0,0.28)',
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          transform: `scale(${hoverScale * press})`,
+          fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 700,
+          fontSize: 27, color: '#ffffff', letterSpacing: 0.5,
+        }}>
+          Deploy
+        </div>
+
+        {/* 涟漪圆环：条件挂载，f66 后摘除 */}
+        {rippleAlive && (
+          <div style={{
+            position: 'absolute',
+            left: CLICK.x - rippleD / 2, top: CLICK.y - rippleD / 2,
+            width: rippleD, height: rippleD, borderRadius: '50%',
+            border: `${rippleBw}px solid ${G.ink}`,
+            opacity: rippleOp,
+          }} />
+        )}
+
+        {/* 放大光标（随画布一起被推近，钉在按钮上） */}
+        <Cursor x={cur.x} y={cur.y + dip} />
+      </div>
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/input-trigger-moves/KeycapSmashCut.tsx

@@ -0,0 +1,217 @@
+// keycap-smash-cut｜键帽引信+猛切句号（keycap-press-trigger × smash-cut）
+// 0–25f 浅底中央 3D 键帽（⌘⏎）悬浮呼吸 → 25–28f 砰按下（3f 下沉 14px +
+// 底座 12→3px 压扁 + 键面变暗）+ 底部亮环（扩散 out-cubic / 消散线性解耦）
+// → 按下即引爆轰鸣段 28–58f：5 张卡 + 1 面板从四面八方高速飞入冲镜
+// （ease-in 全程加速 + scale 1.5→3 冲脸 + 速度门控 blur），背景整体
+// ease-in 推近 1→1.3 + 滚动 1.5°——切点前一刻动势最猛 → 58f 一帧猛切：
+// FakeDashboard variant="A" 整齐静止全景，键帽已缩成小元素稳稳嵌在
+// 顶栏角落（引信呼应），死寂 82f（>50f）。总 140f。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, Card, FakeDashboard } from '../_fixtures/Fixtures';
+
+const T = {
+  press: 25,      // 按下起始（呼吸周期 25f，此帧位移恰好归零）
+  pressEnd: 28,   // 3f 压到底，同帧引爆轰鸣段
+  ringGrowEnd: 46, // 亮环扩散结束（out-cubic）
+  ringFadeEnd: 52, // 亮环消散结束（线性，帧时间与扩散解耦）
+  cut: 58,        // 猛切帧：>=58 全静止
+  total: 140,     // 死寂 82f
+};
+
+// —— 键帽（复用 keycap 规格：多层 box-shadow 造厚度）——
+const Keycap: React.FC<{ size: number; thick: number; bright: number; label?: string }> = ({
+  size, thick, bright, label = '⌘⏎',
+}) => (
+  <div style={{
+    width: size, height: size, borderRadius: size * 0.117,
+    background: 'linear-gradient(165deg, #ffffff 0%, #f2f2f0 45%, #e2e2e0 100%)',
+    border: `2px solid ${G.border}`, boxSizing: 'border-box',
+    boxShadow: [
+      `0 ${thick}px 0 #6e6e6c`,
+      `0 ${thick + 4}px 2px #565654`,
+      `0 ${thick * 2 + 10}px ${thick * 2 + 14}px rgba(0,0,0,0.28)`,
+      'inset 0 3px 0 rgba(255,255,255,0.9)',
+      'inset 0 -6px 10px rgba(0,0,0,0.07)',
+    ].join(', '),
+    filter: `brightness(${bright})`,
+    display: 'flex', alignItems: 'center', justifyContent: 'center',
+  }}>
+    <div style={{
+      fontSize: size * 0.3, fontWeight: 700, color: G.ink,
+      fontFamily: 'Helvetica, Arial, sans-serif',
+    }}>
+      {label}
+    </div>
+  </div>
+);
+
+// —— 轰鸣段飞入物：5 张卡 + 1 面板，四面八方冲镜 ——
+type Fly = {
+  from: [number, number];
+  to: [number, number];
+  rot: [number, number];
+  seed: number;
+  w: number;
+  h: number;
+  panel?: boolean;
+};
+
+const FLIES: Fly[] = [
+  { from: [-1400, -140], to: [1400, 80], rot: [-6, 5], seed: 1, w: 440, h: 290 },
+  { from: [1400, 200], to: [-1400, -120], rot: [7, -4], seed: 2, w: 400, h: 260 },
+  { from: [-260, -900], to: [180, 900], rot: [-3, 8], seed: 3, w: 460, h: 300 },
+  { from: [-1300, 820], to: [1300, -760], rot: [5, -7], seed: 4, w: 420, h: 280 },
+  { from: [1350, -800], to: [-1350, 840], rot: [-8, 4], seed: 5, w: 480, h: 310 },
+  // 第 6 位：面板（更大更重，斜穿）
+  { from: [1500, 700], to: [-1500, -600], rot: [4, -6], seed: 6, w: 700, h: 430, panel: true },
+];
+
+// 卡 i 的第 k 轮：start = 28 + i*3 + k*16，时长 15 / 11（第二轮更快=整体加速）。
+// i=3 k=1 的 53–64f 在切点 58f 被硬切截断——绝不减速迎接切点。
+const passWindow = (i: number, k: number): [number, number] => {
+  const start = T.pressEnd + i * 3 + k * 16;
+  const dur = k === 0 ? 15 : 11;
+  return [start, start + dur];
+};
+
+// 假面板飞入物：命令面板式灰阶块
+const FlyPanel: React.FC<{ w: number; h: number }> = ({ w, h }) => (
+  <div style={{
+    width: w, height: h, background: G.card, border: `2px solid ${G.border}`,
+    borderRadius: 20, padding: 26, boxSizing: 'border-box',
+    display: 'flex', flexDirection: 'column', gap: 16,
+    boxShadow: '0 16px 44px rgba(0,0,0,0.28)',
+  }}>
+    <div style={{ height: 52, border: `2px solid ${G.line}`, borderRadius: 12, background: G.panel }} />
+    {Array.from({ length: 3 }).map((_, i) => (
+      <div key={i} style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 16 }}>
+        <div style={{ width: 28, height: 28, borderRadius: 8, background: G.mid }} />
+        <div style={{ height: 12, width: `${50 + ((i * 27) % 30)}%`, background: G.line, borderRadius: 6 }} />
+      </div>
+    ))}
+  </div>
+);
+
+const FlyItem: React.FC<{ fly: Fly; i: number; frame: number }> = ({ fly, i, frame }) => {
+  let active: [number, number] | null = null;
+  for (let k = 0; k < 2; k++) {
+    const [s, e] = passWindow(i, k);
+    if (frame >= s && frame < e) { active = [s, e]; break; }
+  }
+  if (!active) return null;
+  const [s, e] = active;
+  // ease-in：全程加速，越近终点越快
+  const p = interpolate(frame, [s, e], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.in(Easing.quad),
+  });
+  const x = fly.from[0] + (fly.to[0] - fly.from[0]) * p;
+  const y = fly.from[1] + (fly.to[1] - fly.from[1]) * p;
+  const rot = fly.rot[0] + (fly.rot[1] - fly.rot[0]) * p;
+  const scale = 1.5 + 1.5 * p; // 冲脸
+  const blur = 1 + 4 * p;      // 速度门控方向糊感（ease-in 下速度 ∝ p）
+  return (
+    <div style={{
+      position: 'absolute', left: 960 - fly.w / 2, top: 540 - fly.h / 2,
+      transform: `translate(${x}px, ${y}px) rotate(${rot}deg) scale(${scale})`,
+      filter: `blur(${blur}px)`,
+    }}>
+      {fly.panel
+        ? <FlyPanel w={fly.w} h={fly.h} />
+        : <Card w={fly.w} h={fly.h} seed={fly.seed}
+            style={{ boxShadow: '0 12px 40px rgba(0,0,0,0.25)' }} />}
+    </div>
+  );
+};
+
+export const KeycapSmashCut: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // —— 死寂段：58f 起 variant A 整齐静止全景 + 键帽小元素嵌顶栏角落，
+  //    无任何随帧变化的属性 ——
+  if (frame >= T.cut) {
+    return (
+      <div style={{ width: 1920, height: 1080, position: 'relative' }}>
+        <FakeDashboard variant="A" />
+        {/* 键帽句号：稳稳嵌在顶栏（标题条右侧空档），呼应引信 */}
+        <div style={{ position: 'absolute', left: 464, top: 12 }}>
+          <Keycap size={44} thick={4} bright={1} />
+        </div>
+      </div>
+    );
+  }
+
+  // —— 引信段键帽运动 ——
+  // 呼吸：0–25f 一个完整正弦周期（±5px），f25 位移归零接按下
+  const breathY = frame < T.press ? -5 * Math.sin((2 * Math.PI * frame) / T.press) : 0;
+  // 按下：3f 下沉 14px，之后保持压死
+  const pressY = interpolate(frame, [T.press, T.pressEnd], [0, 14], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+  // 底座厚度 12→3px 压扁（灵魂），轰鸣段保持压扁
+  const thick = interpolate(frame, [T.press, T.pressEnd], [12, 3], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+  const bright = interpolate(frame, [T.press, T.pressEnd], [1, 0.9], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+
+  // —— 亮环：扩散 out-cubic 90→640px，消散线性，帧时间解耦，摘罩=条件挂载 ——
+  const ringOn = frame >= T.press && frame < T.ringFadeEnd;
+  const ringD = interpolate(frame, [T.press, T.ringGrowEnd], [90, 640], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+  const ringA = interpolate(frame, [T.press, T.ringFadeEnd], [0.9, 0], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+  const ringBorder = interpolate(frame, [T.press, T.ringGrowEnd], [14, 3], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+
+  // —— 轰鸣段背景动势：整体 ease-in 推近 + 滚动，切点前仍在加速 ——
+  const bgScale = interpolate(frame, [T.pressEnd, T.cut], [1, 1.3], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.in(Easing.quad),
+  });
+  const bgRot = interpolate(frame, [T.pressEnd, T.cut], [0, 1.5], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.in(Easing.quad),
+  });
+
+  return (
+    <div style={{
+      width: 1920, height: 1080, background: G.bg,
+      position: 'relative', overflow: 'hidden',
+    }}>
+      {/* 背景层（浅底 + 键帽 + 亮环），轰鸣段整体加速推近 */}
+      <div style={{
+        width: 1920, height: 1080, position: 'absolute',
+        transform: `scale(${bgScale}) rotate(${bgRot}deg)`,
+        transformOrigin: '50% 50%', background: G.bg,
+      }}>
+        {ringOn && (
+          <div style={{
+            position: 'absolute', left: 960 - ringD / 2, top: 540 + 120 + pressY - ringD / 2,
+            width: ringD, height: ringD, borderRadius: '50%',
+            border: `${ringBorder}px solid #4a4a48`, opacity: ringA,
+            boxSizing: 'border-box',
+          }} />
+        )}
+        <div style={{
+          position: 'absolute', left: 960 - 120, top: 540 - 120,
+          transform: `translateY(${breathY + pressY}px)`,
+        }}>
+          <Keycap size={240} thick={thick} bright={bright} />
+        </div>
+      </div>
+
+      {/* 轰鸣段飞入物 */}
+      {frame >= T.pressEnd && FLIES.map((fly, i) => (
+        <FlyItem key={i} fly={fly} i={i} frame={frame} />
+      ))}
+    </div>
+  );
+};