hyper-animator-codex 0.7.1 → 0.8.1

package/skills/hyper-animator-codex/references/shotcraft/source/demos/neon-frame-orbit-drop/NeonFrameForerunOrbit.tsx

@@ -0,0 +1,273 @@
+// neon-frame-forerun-orbit v5（批次 14 #1）。用户意见（逐字）：
+// "这个应该是所有组件和文字同时从空中往下贴合"
+// ——单点修正：v4 的错峰贴落改为**所有组件和文字同时**从空中往下贴合
+// （同帧起落、同帧贴合，同形软影同步收敛）。判例：整体登场镜=同时贴合，
+// 错峰是巡礼镜的语法。其余全部保留：同款霓虹渐变框+灰面板+背景霓虹管
+// 框群；镜头视角 rotateY 从左侧(+38°) 连续弧线旋到右侧(-26°)。
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from 'remotion';
+
+const easeFall = Easing.bezier(0.5, 0.05, 0.6, 1); // 加速下落、末端软着陆
+
+/* 悬浮 + 同形软影（对标批次11 GrazeFaceTour FloatWrap）：
+ * h=悬浮高度(px)。本体向左上抬起，原位留模糊压暗同形影，h→0 重合影消失 */
+const FloatWrap: React.FC<{ h: number; children: React.ReactNode }> = ({ h, children }) => (
+  <div style={{ position: 'relative' }}>
+    {h > 1 && (
+      <div style={{
+        position: 'absolute', inset: 0,
+        transform: `translate(${h * 0.26}px, ${h * 0.48}px) scale(${1 + h * 0.0012})`,
+        filter: `blur(${2.5 + h * 0.09}px) brightness(0.32) saturate(0.4)`,
+        opacity: Math.min(0.4, 0.16 + h * 0.005),
+        pointerEvents: 'none',
+      }}>{children}</div>
+    )}
+    <div style={{ transform: `translate(${-h * 0.36}px, ${-h * 0.82}px)` }}>{children}</div>
+  </div>
+);
+
+/* v5：所有组件和文字**同时**从空中往下贴合——统一 land 时刻 LAND，
+ * 同帧起落（t=LAND-FALL）、同帧贴合（t=LAND），软影同步收敛；
+ * 各组件仅悬浮高度 H 略有差异（同窗下落，速度随高度自然区分） */
+const LAND = 0.52;
+const liftOf = (t: number, land: number, H: number) => {
+  const FALL = 0.3;
+  const p = Math.min(1, Math.max(0, (t - (LAND - FALL)) / FALL));
+  return (1 - easeFall(p)) * H;
+};
+
+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;
+};
+
+const ink = '#3c3c3a';
+const mid = '#9a9a98';
+const line = '#e3e3e1';
+
+const PW = 1330;
+const PH = 900;
+const PL = 1000;
+
+const FRAME_D = `M 0 ${PH / 2} L 0 0 L ${PW} 0 L ${PW} ${PH} L 0 ${PH} Z`;
+
+const Chip: React.FC<{ w: number }> = ({ w }) => (
+  <div style={{
+    width: w, height: 74, background: '#fdfdfc', border: `2px solid ${line}`,
+    borderRadius: 10, padding: '12px 14px', boxSizing: 'border-box',
+    display: 'flex', flexDirection: 'column', gap: 9,
+  }}>
+    <div style={{ height: 11, width: '70%', background: '#b5b5b3', borderRadius: 5 }} />
+    <div style={{ height: 9, width: '48%', background: line, borderRadius: 5 }} />
+  </div>
+);
+
+/* 与 v3 同款灰面板；t=贴落进程，各组件错峰空中贴落（重叠并行） */
+const GrayHome: React.FC<{ t?: number }> = ({ t = 1 }) => {
+  const L = (land: number, H = 72) => liftOf(t, land, H * 1.7);
+  return (
+  <div style={{ width: PW, height: PH, background: '#f5f5f4', borderRadius: 6, display: 'flex', overflow: 'hidden', boxSizing: 'border-box' }}>
+    <div style={{ width: 290, borderRight: `2px solid ${line}`, padding: '26px 24px', boxSizing: 'border-box' }}>
+      <FloatWrap h={L(0.24, 84)}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 28 }}>
+          <div style={{ width: 28, height: 28, borderRadius: 8, background: ink }} />
+          <div style={{ height: 15, width: 88, background: ink, borderRadius: 7 }} />
+        </div>
+      </FloatWrap>
+      {[76, 56, 96, 110, 66, 60].map((w, i) => (
+        <FloatWrap key={i} h={L(0.3 + i * 0.045, 66)}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 11, height: 34 }}>
+            <div style={{ width: 17, height: 17, borderRadius: 5, background: mid }} />
+            <div style={{ height: 10, width: w, background: '#c7c7c5', borderRadius: 5 }} />
+          </div>
+        </FloatWrap>
+      ))}
+      <FloatWrap h={L(0.56, 62)}>
+        <div style={{ height: 11, width: 70, background: '#b0b0ae', borderRadius: 5, margin: '24px 0 12px' }} />
+      </FloatWrap>
+      {[104, 126, 96, 118, 88].map((w, i) => (
+        <FloatWrap key={i} h={L(0.62 + i * 0.05, 66)}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 11, height: 32 }}>
+            <div style={{ width: 16, height: 16, borderRadius: 4, background: '#b8b8b6' }} />
+            <div style={{ height: 10, width: w, background: '#cfcfcd', borderRadius: 5 }} />
+          </div>
+        </FloatWrap>
+      ))}
+    </div>
+    <div style={{ flex: 1, padding: '30px 40px', boxSizing: 'border-box' }}>
+      <FloatWrap h={L(0.26, 90)}>
+        <div style={{ height: 24, width: 130, background: '#565654', borderRadius: 10, marginBottom: 22 }} />
+      </FloatWrap>
+      <FloatWrap h={L(0.34, 80)}>
+        <div style={{ height: 46, border: `2px solid ${line}`, borderRadius: 12, marginBottom: 26, display: 'flex', alignItems: 'center', padding: '0 16px', background: '#f5f5f4' }}>
+          <div style={{ width: 17, height: 17, borderRadius: 9, border: `2px solid ${mid}` }} />
+          <div style={{ height: 10, width: 250, background: line, borderRadius: 5, marginLeft: 12 }} />
+        </div>
+      </FloatWrap>
+      <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', marginBottom: 30 }}>
+        {[0, 1, 2, 3, 4, 5, 6].map((i) => (
+          <FloatWrap key={i} h={L(0.42 + i * 0.04, 76)}>
+            <Chip w={222} />
+          </FloatWrap>
+        ))}
+      </div>
+      <FloatWrap h={L(0.72, 60)}>
+        <div style={{ display: 'flex', gap: 18, marginBottom: 18 }}>
+          {[54, 84, 50, 82].map((w, i) => (
+            <div key={i} style={{ height: 11, width: w, background: i === 0 ? '#8a8a88' : line, borderRadius: 5 }} />
+          ))}
+        </div>
+      </FloatWrap>
+      {[0, 1, 2, 3].map((i) => (
+        <FloatWrap key={i} h={L(0.78 + i * 0.055, 64)}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 14, height: 46, borderBottom: `2px solid ${line}` }}>
+            <div style={{ width: 13, height: 13, borderRadius: 7, background: '#c26a6a' }} />
+            <div style={{ height: 11, width: 160 + ((i * 37) % 70), background: '#b6b6b4', borderRadius: 5 }} />
+            <div style={{ marginLeft: 'auto', display: 'flex', gap: 7 }}>
+              {[0, 1, 2].map((k) => <div key={k} style={{ width: 20, height: 20, borderRadius: 10, background: '#d2d2d0' }} />)}
+            </div>
+          </div>
+        </FloatWrap>
+      ))}
+    </div>
+  </div>
+  );
+};
+
+type BgFrame = { x: number; y: number; w: number; h: number; hue: string; phase: number; period: number; skew: number };
+const rng = mulberry32(20260718);
+const HUES = ['#b06af0', '#e879c9', '#f0a35c', '#6a7df0', '#e0679a', '#8a5cf0', '#c06af0'];
+const BG_FRAMES: BgFrame[] = Array.from({ length: 18 }).map(() => ({
+  x: rng() * 2000 - 120, y: rng() * 1100 - 60,
+  w: 160 + rng() * 480, h: 70 + rng() * 220,
+  hue: HUES[Math.floor(rng() * HUES.length)],
+  phase: rng() * 90, period: 55 + rng() * 70,
+  skew: -14 + rng() * 10,
+}));
+
+export const NeonFrameForerunOrbit: React.FC = () => {
+  const frame = useCurrentFrame();
+  // 开场快速描框（同款左缘中点两头奔画，14 帧成型——样式与 v3 一致）
+  const trace = interpolate(frame, [0, 14], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.bezier(0.3, 0.1, 0.3, 1),
+  });
+  // 面板早亮：本变体主角是旋转+贴落，不复刻暗转亮长过程
+  const lit = interpolate(frame, [8, 30], [0.25, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.bezier(0.35, 0, 0.3, 1),
+  });
+  const frameLine = interpolate(frame, [96, 130], [1, 0.35], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+  const rimGlow = interpolate(frame, [0, 20, 108, 138], [0.7, 1, 0.75, 0.5], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+  const bgLit = interpolate(frame, [0, 30, 100, 136], [0.3, 1, 0.85, 0.1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+  // 视角弧线：从页面左侧(+38°)连续旋到右侧(-26°)，全程不停——
+  // ease-in-out 起止柔和、中段持续转动
+  const orbit = interpolate(frame, [0, 128], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.bezier(0.42, 0.05, 0.32, 1),
+  });
+  const rotY = 38 - 64 * orbit;             // +38° → -26°
+  const rotX = 6 - 2.5 * orbit;
+  const rotZ = 3 - 7.5 * orbit;             // 左视角微仰 → 右视角微俯（对齐 v3 落定姿态）
+  const scale = 0.9 + 0.1 * Math.sin(orbit * Math.PI) + 0.02 * orbit; // 弧线中段略推近
+  // 透视原点随视角横移：镜头从左绕到右
+  const pOrigin = 30 + 34 * orbit;
+  const headP = trace * (PL / 2);
+  // 贴落进程：与旋转同时进行（帧 10–118），错峰起点+重叠下落
+  const drop = interpolate(frame, [10, 118], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+
+  return (
+    <AbsoluteFill style={{ background: '#060509', overflow: 'hidden' }}>
+      {/* 背景霓虹管框群（同款） */}
+      <svg width={1920} height={1080} style={{ position: 'absolute' }}>
+        <defs>
+          <filter id="obgblur" x="-60%" y="-60%" width="220%" height="220%">
+            <feGaussianBlur stdDeviation={7} />
+          </filter>
+        </defs>
+        {BG_FRAMES.map((b, i) => {
+          const breath = 0.5 + 0.5 * Math.sin(((frame + b.phase) / b.period) * Math.PI * 2);
+          const op = bgLit * (0.18 + 0.4 * breath);
+          return (
+            <g key={i} transform={`translate(${b.x} ${b.y}) skewY(${b.skew * 0.4}) skewX(${b.skew})`}>
+              <rect width={b.w} height={b.h} rx={4} fill="none"
+                stroke={b.hue} strokeWidth={7} filter="url(#obgblur)" opacity={op * 0.8} />
+              <rect width={b.w} height={b.h} rx={4} fill="none"
+                stroke={b.hue} strokeWidth={2} opacity={op} />
+            </g>
+          );
+        })}
+      </svg>
+      {/* 主体：视角弧线旋转中的框+面板 */}
+      <div style={{ position: 'absolute', inset: 0, perspective: 1500, perspectiveOrigin: `${pOrigin}% 44%` }}>
+        <div style={{
+          position: 'absolute', left: (1920 - PW) / 2, top: (1080 - PH) / 2 - 10,
+          transform: `scale(${scale}) rotateY(${rotY}deg) rotateX(${rotX}deg) rotateZ(${rotZ}deg)`,
+          transformStyle: 'preserve-3d',
+        }}>
+          <div style={{ opacity: trace > 0.4 ? 1 : 0, filter: `brightness(${Math.max(0.05, lit)})` }}>
+            <GrayHome t={drop} />
+            <div style={{
+              position: 'absolute', inset: 0, borderRadius: 6,
+              background: 'linear-gradient(150deg, rgba(30,20,60,0.5), rgba(0,0,0,0.78))',
+              opacity: 1 - lit,
+            }} />
+          </div>
+          <div style={{
+            position: 'absolute', left: -10, top: -10, width: PW + 20, height: PH + 20,
+            borderRadius: 12, opacity: rimGlow * Math.min(1, trace * 1.6),
+            boxShadow: '-18px -8px 42px 6px rgba(185,95,240,0.42), 22px 24px 56px 12px rgba(240,150,90,0.30), 0 14px 80px 22px rgba(200,100,220,0.20)',
+          }} />
+          <svg width={PW + 80} height={PH + 80} viewBox={`-40 -40 ${PW + 80} ${PH + 80}`}
+            style={{ position: 'absolute', left: -40, top: -40 }}>
+            <defs>
+              <linearGradient id="omainfg" gradientUnits="userSpaceOnUse" x1={0} y1={0} x2={PW} y2={PH}>
+                <stop offset="0%" stopColor="#c07af5" />
+                <stop offset="38%" stopColor="#e58bd8" />
+                <stop offset="72%" stopColor="#f0b06a" />
+                <stop offset="100%" stopColor="#e8925c" />
+              </linearGradient>
+              <filter id="ofblur" x="-40%" y="-40%" width="180%" height="180%">
+                <feGaussianBlur stdDeviation={10} />
+              </filter>
+              <filter id="ofblur2" x="-40%" y="-40%" width="180%" height="180%">
+                <feGaussianBlur stdDeviation={3} />
+              </filter>
+            </defs>
+            {[1, -1].map((dir) => (
+              <g key={dir}>
+                <path d={FRAME_D} pathLength={PL} fill="none" stroke="url(#omainfg)"
+                  strokeWidth={14} strokeLinecap="butt" filter="url(#ofblur)"
+                  strokeDasharray={`${headP} ${PL}`}
+                  strokeDashoffset={dir === 1 ? 0 : -(PL - headP)}
+                  opacity={0.6 * rimGlow} />
+                <path d={FRAME_D} pathLength={PL} fill="none" stroke="url(#omainfg)"
+                  strokeWidth={3.5} strokeLinecap="butt"
+                  strokeDasharray={`${headP} ${PL}`}
+                  strokeDashoffset={dir === 1 ? 0 : -(PL - headP)}
+                  opacity={0.95 * frameLine} />
+                {trace < 1 && (
+                  <path d={FRAME_D} pathLength={PL} fill="none" stroke="#ffffff"
+                    strokeWidth={6} strokeLinecap="round" filter="url(#ofblur2)"
+                    strokeDasharray={`8 ${PL}`}
+                    strokeDashoffset={dir === 1 ? -(Math.max(0, headP - 8)) : -(PL - headP)}
+                    opacity={0.95} />
+                )}
+              </g>
+            ))}
+          </svg>
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/neon-triple-marquee/NeonTripleMarquee.tsx

@@ -0,0 +1,111 @@
+// neon-triple-marquee —— clickup-30 61–64.5s
+// 三行霓虹描边巨字 BETTER/FASTER/STRONGER 满屏排布，
+// 奇偶行反向匀速无限滚动（marquee 允许 linear），
+// 三行明暗轮流脉冲（一行亮时其余压暗），结尾整组淡出。
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame, interpolate } from 'remotion';
+
+const FONT = '"Arial Black", "Helvetica Neue", Arial, sans-serif';
+
+// 单行 marquee：副本按固定 unitW 等距绝对定位，平移取模 → 回绕无缝。
+const MarqueeRow: React.FC<{
+  word: string;
+  color: string;
+  dir: 1 | -1;
+  speed: number; // px/frame
+  frame: number;
+  y: number;
+  fontSize: number;
+  brightness: number; // 0..1 脉冲亮度
+}> = ({ word, color, dir, speed, frame, y, fontSize, brightness }) => {
+  // 逐字符估宽（上限估计），保证槽位 >= 实际文本宽，副本不重叠
+  const est = word.length * fontSize * 0.92;
+  const unitW = est + fontSize * 1.3; // 词间空隙（含分隔点）
+  const copies = Math.ceil(1920 / unitW) + 3;
+  const offsetRaw = (frame * speed) % unitW;
+  const offset = dir === 1 ? -unitW * 1.5 + offsetRaw : -unitW * 0.5 - offsetRaw;
+
+  const strokeW = 5 + brightness * 3;
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: y,
+        left: 0,
+        width: '100%',
+        height: fontSize * 1.1,
+        overflow: 'visible',
+        transform: `translateX(${offset}px)`,
+        fontFamily: FONT,
+        fontWeight: 900,
+        fontSize,
+        letterSpacing: 4,
+        lineHeight: 1,
+        color: 'transparent',
+        WebkitTextStroke: `${strokeW}px ${color}`,
+        opacity: 0.35 + brightness * 0.65,
+        filter: `drop-shadow(0 0 ${8 + brightness * 22}px ${color}) drop-shadow(0 0 ${
+          20 + brightness * 50
+        }px ${color})`,
+      }}
+    >
+      {Array.from({ length: copies }).map((_, i) => (
+        <span
+          key={i}
+          style={{ position: 'absolute', left: i * unitW, top: 0, whiteSpace: 'nowrap' }}
+        >
+          {word}
+          <span style={{ display: 'inline-block', transform: `translateX(${fontSize * 0.4}px)` }}>
+            {'•'}
+          </span>
+        </span>
+      ))}
+    </div>
+  );
+};
+
+export const NeonTripleMarquee: React.FC = () => {
+  const f = useCurrentFrame();
+
+  // 三行轮流脉冲：周期 45 帧，每行占 1/3 相位，余弦软脉冲
+  const pulse = (idx: number) => {
+    const period = 45;
+    const phase = (((f - idx * (period / 3)) % period) + period) % period;
+    const t = phase / period;
+    if (t < 1 / 3) return 0.5 - 0.5 * Math.cos(t * 3 * Math.PI * 2);
+    return 0;
+  };
+
+  // 入场淡入 + 结尾整组淡出
+  const groupOpacity = interpolate(f, [0, 10, 128, 148], [0, 1, 1, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  const rows: { word: string; color: string; dir: 1 | -1; speed: number }[] = [
+    { word: 'BETTER', color: '#4d9fff', dir: 1, speed: 14 },
+    { word: 'FASTER', color: '#ff4dd2', dir: -1, speed: 17 },
+    { word: 'STRONGER', color: '#ffb347', dir: 1, speed: 14 },
+  ];
+
+  return (
+    <AbsoluteFill style={{ background: '#050308', overflow: 'hidden' }}>
+      <div style={{ opacity: groupOpacity, position: 'absolute', inset: 0 }}>
+        {rows.map((r, i) => (
+          <MarqueeRow
+            key={r.word}
+            word={r.word}
+            color={r.color}
+            dir={r.dir}
+            speed={r.speed}
+            frame={f}
+            y={40 + i * 350}
+            fontSize={300}
+            brightness={pulse(i)}
+          />
+        ))}
+      </div>
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/odometer-digit-roll/OdometerDigitRoll.tsx

@@ -0,0 +1,178 @@
+// 里程表数字滚动大字报（odometer-digit-roll）——声画钩子 / Vercel Ship 指标段。
+// 全屏巨号 "99.98%"（190px fw800 tabular-nums），四个数位各是一条 0–9 纵向
+// strip（overflow:hidden 数位盒），高速滚动后逐位停稳：位 i 在 20+i*7f 开始
+// 减速（Easing.out(cubic)），过冲半格再 6f 弹回锁定。滚动期每位叠 2 个错帧
+// 残影副本（translateY ±行高*0.5，opacity 0.25/0.12），按帧速度门控，停稳即摘。
+// 小数点与 % 不滚动，一直驻场。
+// 关键帧：0–20 四位全速滚（0.85 行/帧）→ 20/27/34/41 逐位开始减速（各 16f
+// 减速 + 6f 回弹，锁定于 42/49/56/63）→ 63–71 整体加深脉冲（ink→#000→ink，
+// 附 1.035 微缩放加码）→ 66–84 下方标签条淡入 → 84–150 全静止（66f ≥45f）。
+import React from 'react';
+import { useCurrentFrame, interpolate, interpolateColors, Easing } from 'remotion';
+import { G, TitleBlock } from '../_fixtures/Fixtures';
+
+const ROW = 210; // 数位行高（overflow 盒高）
+const DW = 126; // 数位盒宽
+const FS = 190; // 字号
+const SPIN = 0.85; // 高速滚动速度：行/帧
+const DIGITS = [9, 9, 9, 8]; // 目标数位（"99.98" 中可滚的四位）
+
+// 位 i 的 strip 位置（单位：行，连续值）。纯帧函数，天然确定性。
+const posAt = (f: number, i: number): number => {
+  const d = DIGITS[i];
+  const s = 20 + i * 7; // 开始减速帧
+  const p0 = SPIN * s;
+  // 最小再走 6 行后，落在个位 = d 的最近整数位置
+  const T = Math.ceil((p0 + 6 - d) / 10) * 10 + d;
+  if (f < s) return SPIN * Math.max(f, 0);
+  if (f < s + 16)
+    return interpolate(f, [s, s + 16], [p0, T + 0.5], {
+      extrapolateLeft: 'clamp',
+      extrapolateRight: 'clamp',
+      easing: Easing.out(Easing.cubic),
+    });
+  if (f < s + 22)
+    return interpolate(f, [s + 16, s + 22], [T + 0.5, T], {
+      extrapolateLeft: 'clamp',
+      extrapolateRight: 'clamp',
+      easing: Easing.out(Easing.cubic),
+    });
+  return T;
+};
+
+// 一条 0–9 纵列 strip（两轮 20 格，容过冲跨界）
+const Strip: React.FC<{ pos: number; color: string; opacity?: number; dy?: number }> = ({
+  pos,
+  color,
+  opacity = 1,
+  dy = 0,
+}) => (
+  <div
+    style={{
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      width: DW,
+      transform: `translateY(${-(pos % 10) * ROW + dy}px)`,
+      opacity,
+    }}
+  >
+    {Array.from({ length: 20 }).map((_, k) => (
+      <div
+        key={k}
+        style={{
+          width: DW,
+          height: ROW,
+          lineHeight: `${ROW}px`,
+          textAlign: 'center',
+          fontSize: FS,
+          fontWeight: 800,
+          fontVariantNumeric: 'tabular-nums',
+          color,
+        }}
+      >
+        {k % 10}
+      </div>
+    ))}
+  </div>
+);
+
+// 单个数位盒：本体 strip + 滚动期 2 个错帧残影（速度门控，停稳即摘）
+const DigitReel: React.FC<{ frame: number; i: number; color: string }> = ({ frame, i, color }) => {
+  const pos = posAt(frame, i);
+  const speed = Math.abs(pos - posAt(frame - 1, i));
+  const gate = interpolate(speed, [0.06, 0.5], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  return (
+    <div style={{ position: 'relative', width: DW, height: ROW, overflow: 'hidden' }}>
+      {gate > 0.001 && (
+        <>
+          <Strip pos={pos} color={color} opacity={0.25 * gate} dy={ROW * 0.5} />
+          <Strip pos={pos} color={color} opacity={0.12 * gate} dy={-ROW * 0.5} />
+        </>
+      )}
+      <Strip pos={pos} color={color} />
+    </div>
+  );
+};
+
+// 不滚动的静态字符（小数点 / %），一直驻场
+const StaticGlyph: React.FC<{ ch: string; color: string; w?: number }> = ({ ch, color, w }) => (
+  <div
+    style={{
+      width: w,
+      height: ROW,
+      lineHeight: `${ROW}px`,
+      textAlign: 'center',
+      fontSize: FS,
+      fontWeight: 800,
+      fontVariantNumeric: 'tabular-nums',
+      color,
+    }}
+  >
+    {ch}
+  </div>
+);
+
+export const OdometerDigitRoll: React.FC = () => {
+  const frame = useCurrentFrame();
+  // 全位锁定于 63f：整体加深脉冲 ink→#000→ink（8f），附微缩放加码可感性
+  const inkNow = interpolateColors(frame, [63, 67, 71], [G.ink, '#000000', G.ink]);
+  const pulseScale = interpolate(frame, [63, 67, 71], [1, 1.035, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.inOut(Easing.quad),
+  });
+  const labelOp = interpolate(frame, [66, 84], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.quad),
+  });
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', left: 120, top: 96 }}>
+        <TitleBlock text="ODOMETER DIGIT ROLL" size={54} />
+      </div>
+      <div
+        style={{
+          position: 'absolute',
+          left: 0,
+          top: 400,
+          width: 1920,
+          display: 'flex',
+          justifyContent: 'center',
+          fontFamily: 'Helvetica, Arial, sans-serif',
+          transform: `scale(${pulseScale})`,
+          transformOrigin: '960px 105px',
+        }}
+      >
+        <DigitReel frame={frame} i={0} color={inkNow} />
+        <DigitReel frame={frame} i={1} color={inkNow} />
+        <StaticGlyph ch="." color={inkNow} w={70} />
+        <DigitReel frame={frame} i={2} color={inkNow} />
+        <DigitReel frame={frame} i={3} color={inkNow} />
+        <StaticGlyph ch="%" color={inkNow} />
+      </div>
+      {/* 下方标签条：全部锁定后淡入 */}
+      <div
+        style={{
+          position: 'absolute',
+          left: 0,
+          top: 680,
+          width: 1920,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: 16,
+          opacity: labelOp,
+        }}
+      >
+        <div style={{ width: 520, height: 22, background: G.bar, borderRadius: 11 }} />
+        <div style={{ width: 320, height: 14, background: G.line, borderRadius: 7 }} />
+      </div>
+    </div>
+  );
+};