hyper-animator-codex 0.7.0 → 0.8.0

package/skills/hyper-animator-codex/references/shotcraft/source/demos/pill-slot-cycle/PillSlotCycle.tsx

@@ -0,0 +1,220 @@
+// pill-slot-cycle —— 句中词槽轮换：固定句干 + 句尾 pill 老虎机式滚一格
+// 源：notion-ai 4.5–8.5s。旧 pill 上飞淡出、新 pill 从下带运动模糊滑入，
+// 连换 6 次后 pill 消失、句子落成 "One AI tool to do it all." 收束。
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G } from '../_fixtures/Fixtures';
+
+const FONT = 'Helvetica, Arial, sans-serif';
+
+const PILLS = [
+  { label: 'Ask a question', icon: '?' },
+  { label: 'Find in Drive', icon: '▲' },
+  { label: 'Find in Slack', icon: '#' },
+  { label: 'Summarize', icon: '≡' },
+  { label: 'Improve writing', icon: '✎' },
+  { label: 'Draft an agenda', icon: '☰' },
+];
+
+const BEAT = 21; // ~0.7s @30fps
+const INTRO = 12; // 句干入场
+const CYCLES = PILLS.length;
+
+const Pill: React.FC<{ label: string; icon: string; style?: React.CSSProperties }> = ({
+  label,
+  icon,
+  style,
+}) => (
+  <div
+    style={{
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: 16,
+      padding: '14px 36px 14px 24px',
+      borderRadius: 999,
+      background: '#fff',
+      border: `3px solid ${G.border}`,
+      boxShadow: '0 6px 18px rgba(0,0,0,0.10)',
+      fontFamily: FONT,
+      fontWeight: 700,
+      fontSize: 64,
+      color: G.ink,
+      whiteSpace: 'nowrap',
+      ...style,
+    }}
+  >
+    <span
+      style={{
+        width: 58,
+        height: 58,
+        borderRadius: 14,
+        background: G.bg,
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: 38,
+        color: G.mid,
+        flexShrink: 0,
+      }}
+    >
+      {icon}
+    </span>
+    {label}
+  </div>
+);
+
+export const PillSlotCycle: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 句干入场：ease-out 上浮淡入
+  const stemT = interpolate(frame, [0, INTRO], [0, 1], {
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+
+  const cycleStart = INTRO;
+  const cycleEnd = cycleStart + CYCLES * BEAT;
+
+  // 当前处于第几个 pill 拍
+  const rel = frame - cycleStart;
+  const idx = Math.min(Math.floor(rel / BEAT), CYCLES - 1);
+  const beatFrame = rel - idx * BEAT;
+
+  const SWAP = 8; // 每拍前 8f 完成换位
+
+  // 收束段：pill 上飞消失，"do it all." 从下滑入落位
+  const isFinale = frame >= cycleEnd;
+  const finT = interpolate(frame, [cycleEnd, cycleEnd + 14], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.back(1.4)),
+  });
+
+  // 槽内容渲染
+  let slot: React.ReactNode = null;
+  if (!isFinale && rel >= 0) {
+    const incoming = PILLS[idx];
+    const outgoing = idx > 0 ? PILLS[idx - 1] : null;
+
+    // 新 pill：从下 +120px 带 blur 滑入，ease-out
+    const inT = interpolate(beatFrame, [0, SWAP], [0, 1], {
+      extrapolateRight: 'clamp',
+      easing: Easing.out(Easing.cubic),
+    });
+    const inY = interpolate(inT, [0, 1], [120, 0]);
+    const inBlur = interpolate(inT, [0, 0.7, 1], [14, 4, 0]);
+
+    // 旧 pill：向上 -120px 加速飞出淡掉
+    const outT = interpolate(beatFrame, [0, SWAP - 1], [0, 1], {
+      extrapolateRight: 'clamp',
+      easing: Easing.in(Easing.cubic),
+    });
+    const outY = interpolate(outT, [0, 1], [0, -130]);
+
+    slot = (
+      <div style={{ position: 'relative', display: 'inline-block' }}>
+        {/* 撑起槽宽度的隐形占位（当前 pill） */}
+        <Pill label={incoming.label} icon={incoming.icon} style={{ visibility: 'hidden' }} />
+        {outgoing && outT < 1 && (
+          <div
+            style={{
+              position: 'absolute',
+              left: 0,
+              top: 0,
+              transform: `translateY(${outY}px)`,
+              opacity: 1 - outT,
+              filter: `blur(${outT * 10}px)`,
+            }}
+          >
+            <Pill label={outgoing.label} icon={outgoing.icon} />
+          </div>
+        )}
+        <div
+          style={{
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            transform: `translateY(${inY}px)`,
+            opacity: idx === 0 ? inT : Math.min(1, inT * 1.6),
+            filter: `blur(${inBlur}px)`,
+          }}
+        >
+          <Pill label={incoming.label} icon={incoming.icon} />
+        </div>
+      </div>
+    );
+  } else if (isFinale) {
+    // 最后一个 pill 上飞离场（前 8f），然后 "do it all." 落位
+    const lastOutT = interpolate(frame, [cycleEnd, cycleEnd + 7], [0, 1], {
+      extrapolateLeft: 'clamp',
+      extrapolateRight: 'clamp',
+      easing: Easing.in(Easing.cubic),
+    });
+    slot = (
+      <div style={{ position: 'relative', display: 'inline-block' }}>
+        <span
+          style={{
+            fontFamily: FONT,
+            fontWeight: 800,
+            fontSize: 96,
+            color: G.ink,
+            letterSpacing: -1,
+            display: 'inline-block',
+            opacity: finT,
+            transform: `translateY(${(1 - finT) * 90}px)`,
+            filter: `blur(${(1 - finT) * 8}px)`,
+            whiteSpace: 'nowrap',
+          }}
+        >
+          do it all.
+        </span>
+        {lastOutT < 1 && (
+          <div
+            style={{
+              position: 'absolute',
+              left: 0,
+              top: -8,
+              transform: `translateY(${-130 * lastOutT}px)`,
+              opacity: 1 - lastOutT,
+              filter: `blur(${lastOutT * 10}px)`,
+            }}
+          >
+            <Pill label={PILLS[CYCLES - 1].label} icon={PILLS[CYCLES - 1].icon} />
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <AbsoluteFill style={{ background: G.bg }}>
+      {/* 句干固定不动：整行左端锚死，不随 pill 宽度居中重排 */}
+      <div
+        style={{
+          position: 'absolute',
+          left: 300,
+          top: 540,
+          transform: `translateY(calc(-50% + ${(1 - stemT) * 50}px))`,
+          display: 'flex',
+          alignItems: 'center',
+          gap: 36,
+          opacity: stemT,
+        }}
+      >
+        <span
+          style={{
+            fontFamily: FONT,
+            fontWeight: 800,
+            fontSize: 96,
+            color: G.ink,
+            letterSpacing: -1,
+            whiteSpace: 'nowrap',
+          }}
+        >
+          One AI tool to
+        </span>
+        {slot}
+      </div>
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/print-texture-transitions/InkBleedReveal.tsx

@@ -0,0 +1,81 @@
+// 墨渗揭示（ink-bleed-reveal）——水墨转场（轨道遮罩法）。
+// 旧景：G.bg 纸底 + 居中 TitleBlock "BEFORE"；新景 FakeDashboard(A) 放进
+// SVG <foreignObject>，套 <mask>：中心偏左上 (800,420) 的白圆当轨道遮罩。
+// 圆本身套 feTurbulence(baseFrequency 0.02, octaves 3, seed 7 固定) +
+// feDisplacementMap（scale 60→160 随帧涨）造须状渗边——filter 只作用在
+// mask 形状上，新景内容始终清晰。帧 0–20 hold 旧景；帧 20–98 半径
+// 0→1450（Easing.out(quad)）再叠 ±8% 低频正弦扰动（帧 78–98 扰动衰减到 0，
+// 洇满全屏）；帧 100–130 摘掉 mask 直接铺新景，真静止 30f。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, FakeDashboard, TitleBlock } from '../_fixtures/Fixtures';
+
+export const InkBleedReveal: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 墨滴落点：画面中心偏左上
+  const cx = 800;
+  const cy = 420;
+
+  // 基础半径：帧 20–98，0 → 1450px（最远角 ~1300px + 渗边位移余量 150px）
+  const baseR = interpolate(frame, [20, 98], [0, 1450], {
+    easing: Easing.out(Easing.quad),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  // ±8% 低频正弦扰动 = 快慢不匀的洇开；帧 78–98 幅度衰减到 0，保证吃满后能真静止
+  const wobbleEnv = interpolate(frame, [78, 98], [1, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const r = Math.max(0, baseR * (1 + 0.08 * Math.sin(frame * 0.32) * wobbleEnv));
+
+  // 渗边发散度：displacement scale 60 → 160（边缘越洇越散、指尖分叉越长）
+  const dispScale = interpolate(frame, [20, 98], [60, 160], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  // 帧 100 起 mask 已全白：摘掉 SVG 直接铺新景，确保结尾像素级真静止
+  const settled = frame >= 100;
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      {/* 旧景：纸底 + BEFORE 标题 */}
+      <div style={{ position: 'absolute', inset: 0, background: G.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <TitleBlock text="BEFORE" size={120} />
+      </div>
+
+      {settled ? (
+        <div style={{ position: 'absolute', inset: 0 }}>
+          <FakeDashboard variant="A" />
+        </div>
+      ) : (
+        <svg
+          width={1920}
+          height={1080}
+          viewBox="0 0 1920 1080"
+          style={{ position: 'absolute', inset: 0, display: 'block' }}
+        >
+          <defs>
+            {/* filter 只挂在 mask 的圆上——揉的是遮罩边，不是画面内容 */}
+            <filter id="inkBleed" x="-40%" y="-40%" width="180%" height="180%">
+              <feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="3" seed="7" result="noise" />
+              <feDisplacementMap in="SourceGraphic" in2="noise" scale={dispScale} xChannelSelector="R" yChannelSelector="G" />
+            </filter>
+            <mask id="inkMask" maskUnits="userSpaceOnUse" x="0" y="0" width="1920" height="1080">
+              <rect x="0" y="0" width="1920" height="1080" fill="black" />
+              {r > 0.5 && <circle cx={cx} cy={cy} r={r} fill="white" filter="url(#inkBleed)" />}
+            </mask>
+          </defs>
+          <g mask="url(#inkMask)">
+            <foreignObject x="0" y="0" width="1920" height="1080">
+              <FakeDashboard variant="A" />
+            </foreignObject>
+          </g>
+        </svg>
+      )}
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/rhythm-interrupt-moves/JumpCutPunchIn.tsx

@@ -0,0 +1,72 @@
+// 三级跳切推近（jump-cut-punch-in）——节奏剪辑｜戈达尔跳切/纪录片 punch-in。
+// FakeDashboard A 固定构图，transform-origin 钉在第 2 行中间卡中心
+// (1070px, 817px)。三次无补间硬切逐级放大：刻意零 interpolate，
+// 切换帧一帧到位。每次跳切帧叠 2f 整画面 brightness 0.92 加深脉冲当 tick。
+// 关键帧：0–34 scale 1.0 hold → 帧 35 直跳 1.6（35–36 加深脉冲）→ hold →
+// 帧 70 直跳 2.6（70–71 加深脉冲）→ 72–134 全静止（63f ≥45f）。
+import React from 'react';
+import { useCurrentFrame } from 'remotion';
+import { G, FakeDashboard, TitleBlock } from '../_fixtures/Fixtures';
+
+// 目标卡片（3×2 网格第 2 行中间卡）几何：
+// 侧栏 220 + 内边距 36；卡宽 (1920-220-72-56)/3 = 524.67，卡高 (1080-72-72-28)/2 = 454
+const CARD_L = 220 + 36 + 524.67 + 28; // ≈808.67
+const CARD_T = 72 + 36 + 454 + 28; // 590
+const CARD_W = 524.67;
+const CARD_H = 454;
+const ORIGIN_X = CARD_L + CARD_W / 2; // ≈1071
+const ORIGIN_Y = CARD_T + CARD_H / 2; // 817
+
+// 三级硬切：零补间，帧 35 / 帧 70 一帧到位
+const scaleAt = (f: number): number => (f < 35 ? 1.0 : f < 70 ? 1.6 : 2.6);
+
+// 跳切帧 2f 加深脉冲（整画面 brightness 0.92）
+const pulseAt = (f: number): number =>
+  (f >= 35 && f <= 36) || (f >= 70 && f <= 71) ? 0.92 : 1;
+
+export const JumpCutPunchIn: React.FC = () => {
+  const frame = useCurrentFrame();
+  const s = scaleAt(frame);
+  const b = pulseAt(frame);
+
+  return (
+    <div
+      style={{
+        width: 1920,
+        height: 1080,
+        background: G.bg,
+        position: 'relative',
+        overflow: 'hidden',
+        filter: `brightness(${b})`,
+      }}
+    >
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          transform: `scale(${s})`,
+          transformOrigin: `${ORIGIN_X}px ${ORIGIN_Y}px`,
+        }}
+      >
+        <FakeDashboard variant="A" />
+        {/* 目标卡片标记：随构图一起缩放，提示 punch-in 落点 */}
+        <div
+          style={{
+            position: 'absolute',
+            left: CARD_L - 10,
+            top: CARD_T - 10,
+            width: CARD_W + 20,
+            height: CARD_H + 20,
+            border: `3px dashed ${G.mid}`,
+            borderRadius: 20,
+            boxSizing: 'border-box',
+          }}
+        />
+      </div>
+      {/* 标签不随缩放，固定左上角 */}
+      <div style={{ position: 'absolute', left: 260, top: 20 }}>
+        <TitleBlock text="JUMP CUT PUNCH-IN" size={54} />
+      </div>
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/rhythm-interrupt-moves/StrobeBlackFrames.tsx

@@ -0,0 +1,99 @@
+// 频闪黑帧（strobe-black-frames）——节奏剪辑｜VJ strobe / 剪映闪黑。
+// FakeDashboard A 全程缓慢推近蓄张力（scale 1.0→1.05，Easing.in(quad)，
+// 越到后段越快）。40–80f 频闪窗：全屏纯黑 #0c0c0c 按写死帧号表闪现，
+// 每次持续 2f，间隔从 8f 收敛到 3f，窒息感逐渐逼近。最后一闪盖住 79–80，
+// 帧 81 掀开时构图已硬切到 scale 1.35 对准第 2 行中间卡（零补间一帧到位），
+// 叠 2f brightness 0.88 加深脉冲当落锤。
+// 关键帧：0–78 推近 1.0→~1.05 → 黑闪 [40,48,55,61,66,70,73,76,79]（各 2f）→
+// 79–80 全黑 → 帧 81 硬切 scale 1.35（81–82 加深脉冲）→ 83–134 全静止（52f ≥50f）。
+// 光敏警示：实战建议配乐渐强使用。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, FakeDashboard, TitleBlock } from '../_fixtures/Fixtures';
+
+// punch-in 落点：3×2 网格第 2 行中间卡中心（同 JumpCutPunchIn 几何）
+// 侧栏 220 + 内边距 36；卡宽 (1920-220-72-56)/3 ≈ 524.67，卡高 (1080-72-72-28)/2 = 454
+const CARD_L = 220 + 36 + 524.67 + 28; // ≈808.67
+const CARD_T = 72 + 36 + 454 + 28; // 590
+const CARD_W = 524.67;
+const CARD_H = 454;
+const ORIGIN_X = CARD_L + CARD_W / 2; // ≈1071
+const ORIGIN_Y = CARD_T + CARD_H / 2; // 817
+
+// 黑闪帧号表（写死）：间隔 8→7→6→5→4→3→3→3，每次持续 2f（f0 与 f0+1）
+const FLASHES = [40, 48, 55, 61, 66, 70, 73, 76, 79];
+
+const isBlack = (f: number): boolean =>
+  FLASHES.some((f0) => f >= f0 && f <= f0 + 1);
+
+// 帧 81 前缓慢推近（Easing.in 蓄力），81 起零补间硬切 1.35 定住
+const scaleAt = (f: number): number =>
+  f < 81
+    ? interpolate(f, [0, 80], [1.0, 1.05], {
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp',
+        easing: Easing.in(Easing.quad),
+      })
+    : 1.35;
+
+// 落锤：81–82 两帧整画面加深脉冲
+const pulseAt = (f: number): number => (f >= 81 && f <= 82 ? 0.88 : 1);
+
+export const StrobeBlackFrames: React.FC = () => {
+  const frame = useCurrentFrame();
+  const s = scaleAt(frame);
+  const b = pulseAt(frame);
+  const black = isBlack(frame);
+
+  return (
+    <div
+      style={{
+        width: 1920,
+        height: 1080,
+        background: G.bg,
+        position: 'relative',
+        overflow: 'hidden',
+        filter: `brightness(${b})`,
+      }}
+    >
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          transform: `scale(${s})`,
+          transformOrigin: `${ORIGIN_X}px ${ORIGIN_Y}px`,
+        }}
+      >
+        <FakeDashboard variant="A" />
+        {/* 落点卡片标记：随构图一起缩放，提示硬切对准的核心卡 */}
+        <div
+          style={{
+            position: 'absolute',
+            left: CARD_L - 10,
+            top: CARD_T - 10,
+            width: CARD_W + 20,
+            height: CARD_H + 20,
+            border: `3px dashed ${G.mid}`,
+            borderRadius: 20,
+            boxSizing: 'border-box',
+          }}
+        />
+      </div>
+      {/* 标签不随缩放，固定顶栏位置 */}
+      <div style={{ position: 'absolute', left: 260, top: 20 }}>
+        <TitleBlock text="STROBE BLACK FRAMES" size={54} />
+      </div>
+      {/* 全屏黑闪层：盖住一切（含标签），每次 2f */}
+      {black && (
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            background: '#0c0c0c',
+            zIndex: 10,
+          }}
+        />
+      )}
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/riso-print-hits/RisoBeatPump.tsx

@@ -0,0 +1,155 @@
+// 套印节拍泵（riso-beat-pump）——beat-punch-in（卡点顿推）× riso-misregistration-hit
+// （套印错位）的组合节奏。节拍帧 [30,54,78,102]（每 24f 一拍），每命中帧：
+// ① 整画面 scale 一帧瞬跳 1.08（无渐入），14f 内按 exp(-t/3) 指数衰减回 1；
+// ② 标题裂成 G.mid/G.ink 双色印版 multiply 错位，初始错位逐拍加码 4/7/11/16px
+//    （每版反向 → 总分离 8/14/22/32px），12f 衰减余弦震荡收敛套准；
+// ③ 底部对应节拍刻度点闪深并常驻。结构：0–29f hold；30–115f 四拍；116–139f 真静止。
+import React from 'react';
+import { useCurrentFrame } from 'remotion';
+import { G, Card, TitleBlock } from '../_fixtures/Fixtures';
+
+const HITS = [30, 54, 78, 102]; // 节拍命中帧
+const AMP = [4, 7, 11, 16]; // 每拍单版初始错位（px），逐拍加码
+const PUMP_WIN = 14; // scale 泵窗口：14f 后精确归 1（保证结尾真静止）
+const SPLIT_WIN = 12; // 错位窗口：12f 后精确归 0（余量 <0.4px，硬切套准）
+
+// 与 TitleBlock 同字形的单色印版（错位需要可调色副本）
+const Plate: React.FC<{ color: string; dx: number; dy: number }> = ({ color, dx, dy }) => (
+  <div
+    style={{
+      position: 'absolute',
+      inset: 0,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      transform: `translate(${dx}px, ${dy}px)`,
+      mixBlendMode: 'multiply',
+    }}
+  >
+    <div
+      style={{
+        fontFamily: 'Helvetica, Arial, sans-serif',
+        fontWeight: 800,
+        fontSize: 160,
+        color,
+        letterSpacing: -1,
+        whiteSpace: 'nowrap',
+      }}
+    >
+      ON THE BEAT
+    </div>
+  </div>
+);
+
+export const RisoBeatPump: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 找最近一次已命中的节拍（24f 间隔 > 14f 窗口，永远只有一拍在作用）
+  let beatIdx = -1;
+  for (let i = 0; i < HITS.length; i++) {
+    if (frame >= HITS[i]) beatIdx = i;
+  }
+  const t = beatIdx >= 0 ? frame - HITS[beatIdx] : Infinity;
+
+  // ① 整画面泵：命中帧一帧到位 1.08（t=0 即满值，无渐入），指数衰减回 1
+  const pump = t < PUMP_WIN ? 1 + 0.08 * Math.exp(-t / 3) : 1;
+
+  // ② 标题错位：衰减余弦震荡（周期 6f 抖两下），窗口外精确 0 = 套准
+  const split = t < SPLIT_WIN;
+  const m = split ? Math.cos((2 * Math.PI * t) / 6) * Math.exp(-t / 3) : 0;
+  const dx = beatIdx >= 0 ? AMP[beatIdx] * m : 0;
+  const dy = dx * 0.45; // y 少量，更像没对准版
+
+  return (
+    <div
+      style={{
+        width: 1920,
+        height: 1080,
+        background: G.bg,
+        position: 'relative',
+        overflow: 'hidden',
+      }}
+    >
+      {/* 整画面容器：scale 泵作用在全部内容上 */}
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          transform: `scale(${pump})`,
+          transformOrigin: 'center center',
+        }}
+      >
+        {/* 标题区：正体 / 双版错位互斥切换 */}
+        <div style={{ position: 'absolute', left: 0, right: 0, top: 0, height: 660 }}>
+          {!split && (
+            <div
+              style={{
+                position: 'absolute',
+                inset: 0,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <TitleBlock text="ON THE BEAT" size={160} />
+            </div>
+          )}
+          {split && (
+            <>
+              <Plate color={G.mid} dx={-dx} dy={dy} />
+              <Plate color={G.ink} dx={dx} dy={-dy} />
+            </>
+          )}
+        </div>
+
+        {/* 底下一排 3 张小卡 */}
+        <div
+          style={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            top: 660,
+            display: 'flex',
+            justifyContent: 'center',
+            gap: 44,
+          }}
+        >
+          <Card w={330} h={200} seed={2} />
+          <Card w={330} h={200} seed={5} />
+          <Card w={330} h={200} seed={8} />
+        </div>
+
+        {/* 节拍刻度：命中即闪深（8f 缩放脉冲 1.8→1）并常驻深色 */}
+        <div
+          style={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            top: 950,
+            display: 'flex',
+            justifyContent: 'center',
+            gap: 60,
+          }}
+        >
+          {HITS.map((hit, i) => {
+            const dt = frame - hit;
+            const on = dt >= 0;
+            const s = on && dt < 8 ? 1 + 0.8 * (1 - dt / 8) : 1;
+            return (
+              <div
+                key={i}
+                style={{
+                  width: 22,
+                  height: 22,
+                  borderRadius: 11,
+                  background: on ? G.ink : G.bar,
+                  transform: `scale(${s})`,
+                }}
+              />
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};