hyper-animator-codex 0.7.1 → 0.8.0

package/skills/hyper-animator-codex/references/shotcraft/source/demos/text-column-converge/TextColumnConverge.tsx

@@ -0,0 +1,122 @@
+// text-column-converge —— raycast-teams（实测素材 28–36s 段）重做版：
+// 原片测量（1280 宽）：NEW 左缘钉死 x=412，特性词右缘钉死 x=867，
+// 两词到左右屏边距相等（412 vs 413），轮换期间间距完全不收缩；
+// 词换到 RAYCAST 后才发生唯一一次合拢——约 1.2s ease-in-out 连续滑动
+// （左缘 412→554 / 右缘 867→725），"NEW RAYCAST" 以屏幕中线居中定格；
+// 定格后约 0.6s，斜体 "COMING 2026" 在下方近乎硬切浮现。
+import React from 'react';
+import { AbsoluteFill, Easing, interpolate, useCurrentFrame } from 'remotion';
+
+// 词轮换表：停留帧数不均（机器节奏），全程钉在右缘，不做间距收缩
+const STEPS: { word: string; dur: number }[] = [
+  { word: 'LAUNCHER DESIGN', dur: 16 },
+  { word: 'COMPACT MODE', dur: 12 },
+  { word: 'HOTKEY RECORDER', dur: 9 },
+  { word: 'HOTKEY TYPES', dur: 8 },
+  { word: 'VOICE FEATURES', dur: 7 },
+  { word: 'SETTINGS DESIGN', dur: 8 },
+  { word: 'AI CHAT', dur: 10 },
+  { word: 'FILE SEARCH', dur: 12 },
+  { word: 'RAYCAST', dur: 999 }, // 最后一词：停稳后触发唯一一次合拢
+];
+
+const START = 8; // 开场黑场立静
+
+// 原片 1280 宽 → 1920 宽换算（×1.5）
+const NEW_LEFT_EDGE = 618; // 412×1.5：NEW 左缘（= 左屏边距）
+const WORD_RIGHT_EDGE = 1302; // 868×1.5：特性词右缘（= 右屏边距，1920-1302=618 对称）
+
+const FS = 42; // 原片字高很小（720p 下 cap ~20px → 1080p ~30px → 字号 ~42）
+const LSP = 3; // letterSpacing
+// 合拢终点按本字体实际步进计算（监视器等宽：0.6em + letterSpacing），
+// 保证 "NEW RAYCAST" 恰好一个空格咬合、整行居中于 960，不会重叠
+const ADV = 0.6 * FS + LSP; // 每字符步进
+const LINE_W = 11 * ADV; // "NEW RAYCAST" 共 11 字符
+const MERGED_LEFT = 960 - LINE_W / 2; // 合拢后 NEW 左缘
+const MERGED_RIGHT = 960 + LINE_W / 2; // 合拢后 RAYCAST 右缘
+const CONVERGE_DUR = 36; // 合拢时长：原片 ~1.2s ≈ 36 帧
+const CONVERGE_DELAY = 10; // RAYCAST 停稳后先静置 10 帧再合拢（原片 32.4→32.7s）
+const SUB_DELAY = 18; // 合拢定格后 ~0.6s 出斜体小字
+
+export const TextColumnConverge: React.FC = () => {
+  const f = useCurrentFrame();
+  const t = f - START;
+
+  // 定位当前步
+  let acc = 0;
+  let idx = 0;
+  let stepStart = 0;
+  for (let i = 0; i < STEPS.length; i++) {
+    if (t >= acc) { idx = i; stepStart = acc; }
+    acc += STEPS[i].dur;
+  }
+  const cur = STEPS[idx];
+  const isLast = idx === STEPS.length - 1;
+  const local = t - stepStart;
+
+  // 唯一一次合拢：RAYCAST 停稳 CONVERGE_DELAY 帧后，ease-in-out 连续滑动
+  const cvT = isLast ? local - CONVERGE_DELAY : -1;
+  const cv = interpolate(cvT, [0, CONVERGE_DUR], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.inOut(Easing.cubic),
+  });
+
+  // NEW 左缘：618 → 831；特性词右缘：1302 → 1088
+  const newLeft = interpolate(cv, [0, 1], [NEW_LEFT_EDGE, MERGED_LEFT]);
+  const wordRight = interpolate(cv, [0, 1], [WORD_RIGHT_EDGE, MERGED_RIGHT]);
+
+  const converged = cv >= 1;
+
+  // 斜体小字：合拢定格后 SUB_DELAY 帧，近乎硬切（4 帧快速淡入，无位移）
+  const subT = converged ? cvT - CONVERGE_DUR - SUB_DELAY : -1;
+  const subOp = interpolate(subT, [0, 4], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+
+  const visible = t >= 0;
+
+  const font: React.CSSProperties = {
+    fontFamily: '"SF Mono", Menlo, monospace',
+    fontWeight: 500,
+    fontSize: FS,
+    letterSpacing: 3,
+    color: '#f2f2f4',
+    whiteSpace: 'nowrap',
+    lineHeight: 1,
+  };
+
+  return (
+    <AbsoluteFill style={{ background: '#050506', overflow: 'hidden' }}>
+      {visible && (
+        <div style={{ position: 'absolute', inset: 0 }}>
+          {/* NEW：左缘定位（轮换期间钉死在左屏边距处） */}
+          <div style={{
+            ...font, position: 'absolute',
+            left: newLeft, top: 519,
+          }}>
+            NEW
+          </div>
+          {/* 特性词：右缘定位（词换长换短，右缘不动） */}
+          <div style={{
+            ...font, position: 'absolute',
+            right: 1920 - wordRight, top: 519,
+          }}>
+            {cur.word}
+          </div>
+
+          {/* 斜体小字：合拢后在整行正下方浮现，与整行同左缘 */}
+          <div style={{
+            ...font,
+            fontStyle: 'italic',
+            color: '#d8d8dc',
+            position: 'absolute',
+            left: MERGED_LEFT, top: 519 + FS + 14,
+            opacity: subOp,
+          }}>
+            COMING 2026
+          </div>
+        </div>
+      )}
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/theme-switch-moves/PaletteThemeRipple.tsx

@@ -0,0 +1,207 @@
+// 组合：命令面板 × 深浅扫场（palette-theme-ripple）
+// FakeDashboard 静置 → 整屏压暗+blur → ⌘K 面板弹落 → 模拟输入"dark"
+// （灰块字符逐个弹出）→ 回车帧面板 5f 收缩成一个亮点 → 深色扫场边界
+// **从该亮点位置**荡开（clip-path 圆扩张 + 亮边缘环）扫过全 UI 变深色版 → 真静止。
+// 组合命门：扫场起点必须是面板收缩点（960,470），收缩完成帧=扫场起始帧
+// （RIPPLE=73），从别处/别帧开始就断了因果。
+// 关键帧：0–15 浅色静置 → 15–22 压暗 blur → 22–30 面板弹落（超调）→
+// 38–62 逐字输入 d/a/r/k → 68 回车 → 68–73 面板收缩成亮点 → 73–95 扫场
+// 荡开 → 95–170 深色真静止 75f。深色版为手工反转 G 色板的本地 DarkDashboard。
+// 帧确定，无随机源。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, FakeDashboard } from '../_fixtures/Fixtures';
+
+const DIM_START = 15;
+const PANEL_IN = 22;
+const TYPE_FRAMES = [38, 46, 54, 62]; // d a r k
+const ENTER = 68;
+const RIPPLE = 73; // 面板收缩完成帧 = 扫场起始帧（组合命门）
+const RIPPLE_END = 95;
+const ORIGIN = { x: 960, y: 470 }; // 面板中心 = 收缩点 = 扫场圆心
+const MAX_R = 1250;
+
+// 手工反转 G 色板的深色版
+const D = {
+  bg: '#1a1a1c', panel: '#232325', line: '#3a3a38', bar: '#6f6f6d',
+  ink: '#e8e8e6', mid: '#7a7a78', card: '#262628', border: '#454543',
+  side: '#0e0e10', sideBar: '#555553',
+};
+
+const DarkCard: React.FC<{ seed: number }> = ({ seed }) => {
+  const titleW = 45 + ((seed * 37) % 40);
+  const lines = 2 + (seed % 3);
+  return (
+    <div style={{ width: '100%', height: '100%', background: D.card, border: `2px solid ${D.border}`, borderRadius: 14, padding: 18, boxSizing: 'border-box', display: 'flex', flexDirection: 'column', gap: 10 }}>
+      <div style={{ height: 16, width: `${titleW}%`, background: D.bar, borderRadius: 8 }} />
+      {Array.from({ length: lines }).map((_, i) => (
+        <div key={i} style={{ height: 10, width: `${88 - i * 14 - (seed % 5) * 3}%`, background: D.line, borderRadius: 5 }} />
+      ))}
+      <div style={{ marginTop: 'auto', display: 'flex', gap: 8, alignItems: 'center' }}>
+        <div style={{ width: 26, height: 26, borderRadius: 13, background: D.mid }} />
+        <div style={{ height: 10, width: 64, background: D.line, borderRadius: 5 }} />
+      </div>
+    </div>
+  );
+};
+
+// 与 FakeDashboard variant A 布局逐像素一致的深色版——扫场读作"同一 UI 换肤"
+const DarkDashboard: React.FC = () => (
+  <div style={{ width: 1920, height: 1080, background: D.bg, display: 'flex' }}>
+    <div style={{ width: 220, background: D.side, padding: '28px 22px', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', gap: 18 }}>
+      <div style={{ width: 40, height: 40, borderRadius: 10, background: '#8a8a88' }} />
+      {Array.from({ length: 7 }).map((_, i) => (
+        <div key={i} style={{ height: 12, width: `${60 + ((i * 29) % 35)}%`, background: D.sideBar, borderRadius: 6 }} />
+      ))}
+    </div>
+    <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
+      <div style={{ height: 72, background: D.panel, borderBottom: `2px solid ${D.line}`, display: 'flex', alignItems: 'center', padding: '0 32px', gap: 20, boxSizing: 'border-box' }}>
+        <div style={{ height: 18, width: 180, background: D.bar, borderRadius: 9 }} />
+        <div style={{ marginLeft: 'auto', height: 36, width: 320, background: D.card, border: `2px solid ${D.line}`, borderRadius: 18, boxSizing: 'border-box' }} />
+        <div style={{ width: 36, height: 36, borderRadius: 18, background: D.mid }} />
+      </div>
+      <div style={{ flex: 1, padding: 36, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gridAutoRows: '1fr', gap: 28, boxSizing: 'border-box' }}>
+        {Array.from({ length: 6 }).map((_, i) => (
+          <DarkCard key={i} seed={i + 1} />
+        ))}
+      </div>
+    </div>
+  </div>
+);
+
+export const PaletteThemeRipple: React.FC = () => {
+  const f = useCurrentFrame();
+
+  // 压暗 + blur：面板阶段生效，扫场完成后浅色层已被卸载
+  const dim = interpolate(f, [DIM_START, DIM_START + 7], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+
+  // 面板弹落（back-out 超调）
+  const panelT = interpolate(f, [PANEL_IN, PANEL_IN + 8], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.back(1.9)),
+  });
+  // 回车后 5f 收缩成一点（ease-in，越缩越快）
+  const shrink = interpolate(f, [ENTER, RIPPLE], [1, 0], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.in(Easing.cubic),
+  });
+  const panelMounted = f >= PANEL_IN && f < RIPPLE;
+  const panelScale = f < ENTER ? panelT : shrink;
+  const panelDropY = f < ENTER ? interpolate(panelT, [0, 1], [-120, 0]) : 0;
+
+  // 逐字输入：每个灰块 4f 内弹出
+  const charScale = (i: number) =>
+    interpolate(f, [TYPE_FRAMES[i], TYPE_FRAMES[i] + 4], [0, 1], {
+      extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+      easing: Easing.out(Easing.back(2.2)),
+    });
+  const typedCount = TYPE_FRAMES.filter((t) => f >= t).length;
+
+  // 扫场：圆从收缩点荡开（ease-out，先快后缓），边缘带亮环
+  const r = interpolate(f, [RIPPLE, RIPPLE_END], [12, MAX_R], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+  const rippling = f >= RIPPLE && f < RIPPLE_END;
+  const done = f >= RIPPLE_END;
+  const ringOpacity = interpolate(f, [RIPPLE, RIPPLE_END], [0.95, 0], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+
+  // 亮点：收缩完成前后 3f 的高光核（把"收缩点=扫场起点"钉死给观众看）
+  const dotOn = f >= ENTER + 2 && f < RIPPLE + 3;
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: D.bg, position: 'relative', overflow: 'hidden' }}>
+      {/* 浅色层：扫场完成后条件卸载（真静止） */}
+      {!done && (
+        <div style={{ position: 'absolute', inset: 0, filter: dim > 0 ? `brightness(${1 - dim * 0.45}) blur(${dim * 6}px)` : 'none' }}>
+          <FakeDashboard variant="A" />
+        </div>
+      )}
+
+      {/* 深色层：从收缩点起被圆形 clip 揭开；完成后铺满且无 clip */}
+      {(rippling || done) && (
+        <div style={{ position: 'absolute', inset: 0, clipPath: done ? 'none' : `circle(${r}px at ${ORIGIN.x}px ${ORIGIN.y}px)` }}>
+          <DarkDashboard />
+        </div>
+      )}
+
+      {/* 扫场亮边缘环 */}
+      {rippling && (
+        <div
+          style={{
+            position: 'absolute',
+            left: ORIGIN.x - r,
+            top: ORIGIN.y - r,
+            width: r * 2,
+            height: r * 2,
+            borderRadius: '50%',
+            border: '5px solid rgba(255,255,255,0.9)',
+            opacity: ringOpacity,
+            boxShadow: '0 0 40px rgba(255,255,255,0.5), inset 0 0 30px rgba(255,255,255,0.35)',
+          }}
+        />
+      )}
+
+      {/* 收缩亮点 */}
+      {dotOn && (
+        <div
+          style={{
+            position: 'absolute',
+            left: ORIGIN.x - 11,
+            top: ORIGIN.y - 11,
+            width: 22,
+            height: 22,
+            borderRadius: 11,
+            background: '#ffffff',
+            boxShadow: '0 0 46px 14px rgba(255,255,255,0.85)',
+          }}
+        />
+      )}
+
+      {/* ⌘K 命令面板 */}
+      {panelMounted && (
+        <div
+          style={{
+            position: 'absolute',
+            left: ORIGIN.x - 340,
+            top: ORIGIN.y - 130 + panelDropY,
+            width: 680,
+            height: 260,
+            transform: `scale(${Math.max(panelScale, 0.001)})`,
+            transformOrigin: 'center center',
+            background: G.card,
+            border: `2px solid ${G.border}`,
+            borderRadius: 18,
+            boxShadow: '0 30px 80px rgba(0,0,0,0.4)',
+            padding: 24,
+            boxSizing: 'border-box',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 16,
+          }}
+        >
+          {/* 输入行：⌘K 标识 + 逐字灰块 */}
+          <div style={{ height: 62, border: `2px solid ${G.line}`, borderRadius: 12, display: 'flex', alignItems: 'center', gap: 14, padding: '0 18px', boxSizing: 'border-box' }}>
+            <div style={{ padding: '6px 12px', borderRadius: 8, background: G.side, color: '#fff', fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 800, fontSize: 22 }}>⌘K</div>
+            {TYPE_FRAMES.map((_, i) => (
+              <div key={i} style={{ width: 30, height: 30, borderRadius: 6, background: G.ink, transform: `scale(${charScale(i)})` }} />
+            ))}
+            {/* 光标：帧确定闪烁（每 8f 翻转） */}
+            <div style={{ width: 4, height: 34, background: G.ink, opacity: Math.floor(f / 8) % 2 === 0 ? 1 : 0 }} />
+          </div>
+          {/* 结果行：输入完成后首行加深表示选中 */}
+          {Array.from({ length: 3 }).map((_, i) => (
+            <div key={i} style={{ height: 44, borderRadius: 10, background: i === 0 && typedCount === 4 ? G.line : G.panel, display: 'flex', alignItems: 'center', gap: 14, padding: '0 16px', boxSizing: 'border-box' }}>
+              <div style={{ width: 24, height: 24, borderRadius: 6, background: G.mid }} />
+              <div style={{ height: 12, width: `${34 + i * 16}%`, background: G.bar, borderRadius: 6 }} />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/theme-switch-moves/ThemeSweepToggle.tsx

@@ -0,0 +1,123 @@
+// theme-sweep-toggle —— 深浅模式扫场
+// 同一 dashboard 深浅两版叠放（深版手工映射 G 色板），上层深版用 clip-path
+// polygon 15° 斜边从左上扫到右下（先快后缓），边界带 2px 亮线；
+// 扫完深版整体 scale 0.995→1 "坐实"。f=70 后全静止（70f）。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+
+const CL = { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' } as const;
+
+// 浅色板 = Fixtures G；深色板手工反转映射
+type Pal = {
+  bg: string; panel: string; line: string; bar: string;
+  mid: string; card: string; border: string; side: string; sideBar: string;
+};
+const LIGHT: Pal = {
+  bg: '#ececea', panel: '#f7f7f6', line: '#dcdcda', bar: '#c2c2c0',
+  mid: '#8f8f8d', card: '#ffffff', border: '#d8d8d6', side: '#3a3a3a', sideBar: '#5a5a58',
+};
+const DARK: Pal = {
+  bg: '#1c1c1b', panel: '#242423', line: '#3a3a38', bar: '#6e6e6c',
+  mid: '#8f8f8d', card: '#2c2c2b', border: '#454543', side: '#0f0f0e', sideBar: '#6a6a68',
+};
+
+// 带色板参数的 dashboard（结构同 Fixtures.FakeDashboard variant A）
+const Dash: React.FC<{ p: Pal }> = ({ p }) => (
+  <div style={{ width: 1920, height: 1080, background: p.bg, display: 'flex' }}>
+    <div style={{ width: 220, background: p.side, padding: '28px 22px', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', gap: 18 }}>
+      <div style={{ width: 40, height: 40, borderRadius: 10, background: p.sideBar }} />
+      {Array.from({ length: 7 }).map((_, i) => (
+        <div key={i} style={{ height: 12, width: `${60 + ((i * 29) % 35)}%`, background: p.sideBar, borderRadius: 6 }} />
+      ))}
+    </div>
+    <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
+      <div style={{ height: 72, background: p.panel, borderBottom: `2px solid ${p.line}`, display: 'flex', alignItems: 'center', padding: '0 32px', gap: 20, boxSizing: 'border-box' }}>
+        <div style={{ height: 18, width: 180, background: p.bar, borderRadius: 9 }} />
+        <div style={{ marginLeft: 'auto', height: 36, width: 320, background: p.card, border: `2px solid ${p.line}`, borderRadius: 18, boxSizing: 'border-box' }} />
+        <div style={{ width: 36, height: 36, borderRadius: 18, background: p.mid }} />
+      </div>
+      <div style={{ flex: 1, padding: 36, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gridAutoRows: '1fr', gap: 28, boxSizing: 'border-box' }}>
+        {Array.from({ length: 6 }).map((_, i) => {
+          const titleW = 45 + (((i + 1) * 37) % 40);
+          const lines = 2 + ((i + 1) % 3);
+          return (
+            <div key={i} style={{ background: p.card, border: `2px solid ${p.border}`, borderRadius: 14, padding: 18, boxSizing: 'border-box', display: 'flex', flexDirection: 'column', gap: 10 }}>
+              <div style={{ height: 16, width: `${titleW}%`, background: p.bar, borderRadius: 8 }} />
+              {Array.from({ length: lines }).map((_, j) => (
+                <div key={j} style={{ height: 10, width: `${88 - j * 14 - ((i + 1) % 5) * 3}%`, background: p.line, borderRadius: 5 }} />
+              ))}
+              <div style={{ marginTop: 'auto', display: 'flex', gap: 8, alignItems: 'center' }}>
+                <div style={{ width: 26, height: 26, borderRadius: 13, background: p.mid }} />
+                <div style={{ height: 10, width: 64, background: p.line, borderRadius: 5 }} />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  </div>
+);
+
+// 时间轴
+const SWEEP0 = 14; // 扫场开始（前 14f 初始静置）
+const SWEEP1 = 52; // 扫场结束
+const SETTLE0 = 52;
+const SETTLE1 = 64; // 坐实结束 → 之后全静止
+
+const SLANT = 1080 * Math.tan((15 * Math.PI) / 180); // ≈ 289px，15° 斜边
+
+export const ThemeSweepToggle: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 边界顶端 x：先快后缓（poly(3) out）；从左外扫到右外+SLANT 保证底边也扫尽
+  const p = interpolate(frame, [SWEEP0, SWEEP1], [-20, 1920 + SLANT + 40], {
+    easing: Easing.out(Easing.poly(3)),
+    ...CL,
+  });
+
+  // 坐实：0.995 → 1
+  const settle = interpolate(frame, [SETTLE0, SETTLE0 + 1, SETTLE1], [1, 0.995, 1], {
+    easing: Easing.out(Easing.cubic),
+    ...CL,
+  });
+
+  // 亮线透明度：扫场期间可见，扫完 6f 内淡出
+  const lineOp = interpolate(frame, [SWEEP0, SWEEP0 + 4, SWEEP1 - 4, SWEEP1 + 2], [0, 1, 1, 0], CL);
+  const sweeping = frame >= SWEEP0 && frame < SWEEP1 + 2;
+
+  return (
+    <div style={{ width: 1920, height: 1080, position: 'relative', overflow: 'hidden', background: LIGHT.bg }}>
+      {/* 底层浅色版 */}
+      <Dash p={LIGHT} />
+      {/* 上层深色版，clip-path 斜切揭出 */}
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          clipPath: `polygon(0 0, ${p}px 0, ${p - SLANT}px 1080px, 0 1080px)`,
+          transform: `scale(${settle})`,
+          transformOrigin: '50% 50%',
+        }}
+      >
+        <Dash p={DARK} />
+      </div>
+      {/* 2px 亮线边界（条件卸载） */}
+      {sweeping && (
+        <div
+          style={{
+            position: 'absolute',
+            left: p - SLANT / 2 - 2,
+            top: 540 - 620,
+            width: 4,
+            height: 1240,
+            background: '#ffffff',
+            boxShadow: '0 0 18px 4px rgba(255,255,255,0.75)',
+            transform: 'rotate(15deg)',
+            transformOrigin: '50% 50%',
+            opacity: lineOp,
+          }}
+        />
+      )}
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/timeline-travel/TimelineTravel.tsx

@@ -0,0 +1,123 @@
+// timeline-travel —— 时间轴横移（《反恐王国》式）
+// 镜头沿水平刻度轴加速横移，v1.0/v2.0/v3.0/Today 四个刻度依次掠过，
+// 每过刻度对应 Card 从刻度线 spring 过冲弹立 + 短停，镜头不停；
+// 末刻度 4f 急停 + 推近 1.28×。世界层只动 translateX/scale。
+// f0–12 初始静置；f118 起真静止 ≥42f（160f 总长）。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing, spring } from 'remotion';
+import { G, Card, TitleBlock } from '../_fixtures/Fixtures';
+
+const W = 1920;
+const AXIS_Y = 700;
+const TICK_GAP = 1400; // 刻度间距（世界坐标）
+const TICKS = [
+  { label: 'v1.0', x: 960 },
+  { label: 'v2.0', x: 960 + TICK_GAP },
+  { label: 'v3.0', x: 960 + TICK_GAP * 2 },
+  { label: 'Today', x: 960 + TICK_GAP * 3 },
+];
+const WORLD_W = 960 + TICK_GAP * 3 + 960;
+
+const TRAVEL_START = 12;
+const TRAVEL_END = 104; // 急停帧
+const ZOOM_END = 114;
+
+// 相机 X：in-out 但前段慢后段快（poly(3) in 为主，末端 out 急收）
+// 用两段拼：0–0.82 加速段（Easing.in(poly(2.2))），0.82–1 急刹段
+const camXAt = (f: number): number => {
+  const total = TICKS[3].x - 960; // 需要位移的世界距离
+  const t = interpolate(f, [TRAVEL_START, TRAVEL_END], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  // 加速→巡航→急刹：分段缓动，前 15% 缓起，中段近匀加速冲刺，末 12% 急收
+  const eased = interpolate(t, [0, 0.15, 0.88, 1], [0, 0.055, 0.9, 1], {
+    easing: Easing.inOut(Easing.quad),
+  });
+  return eased * total;
+};
+
+// 每张卡的弹立帧：相机中心扫过该刻度的时刻（数值上预先求好，避免逐帧求逆）
+// 通过 camXAt 反查：找到 camX == tick.x - 960 的帧
+const popFrameOf = (tickX: number): number => {
+  for (let f = TRAVEL_START; f <= TRAVEL_END; f++) {
+    if (camXAt(f) >= tickX - 960) return f;
+  }
+  return TRAVEL_END;
+};
+
+const CARD_W = 360;
+const CARD_H = 240;
+
+const TickStop: React.FC<{ i: number; frame: number }> = ({ i, frame }) => {
+  const tick = TICKS[i];
+  const pop = popFrameOf(tick.x) - 6; // 提前 6f 起弹，掠过时正好立起
+  const s = spring({
+    frame: frame - pop,
+    fps: 30,
+    config: { damping: 11, stiffness: 160, mass: 0.9 }, // 明显过冲
+    durationInFrames: 26,
+  });
+  const appeared = frame >= pop;
+
+  return (
+    <div style={{ position: 'absolute', left: tick.x, top: 0 }}>
+      {/* 刻度竖线 */}
+      <div style={{ position: 'absolute', left: -3, top: AXIS_Y - 28, width: 6, height: 56, background: G.ink, borderRadius: 3 }} />
+      {/* 刻度标签 */}
+      <div style={{ position: 'absolute', left: -80, top: AXIS_Y + 44, width: 160, textAlign: 'center', fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 800, fontSize: 40, color: G.ink }}>
+        {tick.label}
+      </div>
+      {/* 卡片从刻度线弹立：以底边为轴 scaleY 0→1（带过冲），伴随上移 */}
+      {appeared && (
+        <div
+          style={{
+            position: 'absolute',
+            left: -CARD_W / 2,
+            top: AXIS_Y - 36 - CARD_H,
+            transform: `scaleY(${s}) scaleX(${0.6 + 0.4 * s})`,
+            transformOrigin: '50% 100%',
+            opacity: Math.min(1, s * 2),
+          }}
+        >
+          <Card w={CARD_W} h={CARD_H} seed={i + 2} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const TimelineTravel: React.FC = () => {
+  const frame = useCurrentFrame();
+  const camX = camXAt(frame);
+
+  // 急停后推近末刻度：scale 1 → 1.28，中心对准 Today 刻度
+  const zoom = interpolate(frame, [TRAVEL_END, ZOOM_END], [1, 1.28], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  return (
+    <div style={{ width: W, height: 1080, background: G.bg, overflow: 'hidden', position: 'relative' }}>
+      {/* 推近层：以画面中央偏下（末刻度落点）为原点放大 */}
+      <div style={{ width: W, height: 1080, transform: `scale(${zoom})`, transformOrigin: '50% 62%' }}>
+        {/* 世界层：唯一横移的容器 */}
+        <div style={{ position: 'absolute', left: 0, top: 0, width: WORLD_W, height: 1080, transform: `translateX(${-camX}px)` }}>
+          {/* 主轴线 */}
+          <div style={{ position: 'absolute', left: 200, top: AXIS_Y - 3, width: WORLD_W - 400, height: 6, background: G.bar, borderRadius: 3 }} />
+          {/* 次刻度（小点，增强速度感） */}
+          {Array.from({ length: 22 }).map((_, i) => (
+            <div key={i} style={{ position: 'absolute', left: 960 + i * (TICK_GAP / 5) - 2, top: AXIS_Y - 12, width: 4, height: 24, background: G.bar, borderRadius: 2 }} />
+          ))}
+          {TICKS.map((_, i) => (
+            <TickStop key={i} i={i} frame={frame} />
+          ))}
+        </div>
+      </div>
+      <div style={{ position: 'absolute', top: 90, width: '100%', textAlign: 'center' }}>
+        <TitleBlock text="TIMELINE TRAVEL" size={64} />
+      </div>
+    </div>
+  );
+};