hyper-animator-codex 0.7.1 → 0.8.1

package/skills/hyper-animator-codex/references/shotcraft/source/demos/space-camera-moves/ExplodedView.tsx

@@ -0,0 +1,178 @@
+import React from 'react';
+import { AbsoluteFill, Easing, interpolate, useCurrentFrame } from 'remotion';
+import { Card, G } from '../_fixtures/Fixtures';
+
+// exploded-view：整页 dashboard 带 3D 倾斜，咔地沿 Z 轴炸开——顶栏/侧栏/六卡
+// 各自浮到不同深度悬停（近大而实、远略暗），层间透出投影；hold 一拍后
+// 逆序咔哒合体，2f 震屏收口。
+//
+// 节拍：0–24 静止建立（已倾斜）→ 24–59 错峰炸开（每层 14f ease-out-back）
+//      → 悬停 → 90–123 逆序合体（每层 12f ease-in）→ 123 震屏 → 静止到 150
+
+const EXPLODE = 24; // 炸开起始帧
+const ASSEMBLE = 90; // 合体起始帧
+const STAGGER = 3; // 层间错峰
+const N = 8; // 可动层数（顶栏 + 侧栏 + 6 卡）
+const CLOSE = ASSEMBLE + (N - 1) * STAGGER + 12; // = 123，最后一层归位
+
+// FakeDashboard variant A 的布局常量（绝对定位复刻）
+const SIDE_W = 220;
+const TOP_H = 72;
+const PAD = 36;
+const GAP = 28;
+const CARD_W = (1920 - SIDE_W - PAD * 2 - GAP * 2) / 3; // 524
+const CARD_H = (1080 - TOP_H - PAD * 2 - GAP) / 2; // 454
+
+type Layer = {
+  key: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  z: number; // 炸开深度 60–320
+  order: number; // 错峰序
+  radius: number;
+  node: React.ReactNode;
+};
+
+const Sidebar: React.FC = () => (
+  <div style={{ width: SIDE_W, height: 1080, background: G.side, padding: '28px 22px', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', gap: 18 }}>
+    <div style={{ width: 40, height: 40, borderRadius: 10, background: '#777775' }} />
+    {Array.from({ length: 7 }).map((_, i) => (
+      <div key={i} style={{ height: 12, width: `${60 + ((i * 29) % 35)}%`, background: G.sideBar, borderRadius: 6 }} />
+    ))}
+  </div>
+);
+
+const Topbar: React.FC = () => (
+  <div style={{ width: 1920 - SIDE_W, height: TOP_H, background: G.panel, borderBottom: `2px solid ${G.line}`, display: 'flex', alignItems: 'center', padding: '0 32px', gap: 20, boxSizing: 'border-box' }}>
+    <div style={{ height: 18, width: 180, background: G.bar, borderRadius: 9 }} />
+    <div style={{ marginLeft: 'auto', height: 36, width: 320, background: '#fff', border: `2px solid ${G.line}`, borderRadius: 18, boxSizing: 'border-box' }} />
+    <div style={{ width: 36, height: 36, borderRadius: 18, background: G.mid }} />
+  </div>
+);
+
+// 六卡深度：错落分布在 60–320，近的自然更大（perspective 缩放）
+const CARD_Z = [150, 300, 80, 230, 320, 110];
+
+const LAYERS: Layer[] = [
+  { key: 'top', x: SIDE_W, y: 0, w: 1920 - SIDE_W, h: TOP_H, z: 260, order: 0, radius: 0, node: <Topbar /> },
+  { key: 'side', x: 0, y: 0, w: SIDE_W, h: 1080, z: 190, order: 1, radius: 0, node: <Sidebar /> },
+  ...Array.from({ length: 6 }).map((_, i) => {
+    const col = i % 3;
+    const row = Math.floor(i / 3);
+    return {
+      key: `card${i}`,
+      x: SIDE_W + PAD + col * (CARD_W + GAP),
+      y: TOP_H + PAD + row * (CARD_H + GAP),
+      w: CARD_W,
+      h: CARD_H,
+      z: CARD_Z[i],
+      order: 2 + i,
+      radius: 14,
+      node: <Card w={CARD_W} h={CARD_H} seed={i + 1} />,
+    };
+  }),
+];
+
+export const ExplodedView: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 每层进度：炸开 ease-out-back（带一点回弹的“咔”）× 合体逆序 ease-in
+  const layerP = (order: number) => {
+    const out = interpolate(
+      frame,
+      [EXPLODE + order * STAGGER, EXPLODE + order * STAGGER + 14],
+      [0, 1],
+      { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.back(1.7)) },
+    );
+    const back = interpolate(
+      frame,
+      [ASSEMBLE + (N - 1 - order) * STAGGER, ASSEMBLE + (N - 1 - order) * STAGGER + 12],
+      [0, 1],
+      { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.in(Easing.cubic) },
+    );
+    return out * (1 - back);
+  };
+
+  // 全局散开度（驱动底板变暗）
+  const g =
+    interpolate(frame, [EXPLODE, EXPLODE + 24], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.cubic) }) *
+    (1 - interpolate(frame, [ASSEMBLE, CLOSE], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.in(Easing.cubic) }));
+
+  // 合体收口：2f 震屏，指数衰减
+  const since = frame - CLOSE;
+  const env = since >= 0 ? 13 * Math.exp(-since / 1.3) : 0;
+  const shakeX = env * Math.sin(since * 3.3);
+  const shakeY = env * 0.7 * Math.sin(since * 4.7 + 1.1);
+
+  return (
+    <AbsoluteFill style={{ background: '#dedddb', overflow: 'hidden' }}>
+      <AbsoluteFill style={{ perspective: 1600, transform: `translate(${shakeX}px, ${shakeY}px)` }}>
+        <div
+          style={{
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            width: 1920,
+            height: 1080,
+            transform: 'scale(0.76) rotateX(18deg) rotateY(-12deg)',
+            transformOrigin: '50% 50%',
+            transformStyle: 'preserve-3d',
+          }}
+        >
+          {/* 底板：页面背景留在 Z=0，炸开时整体压暗，衬出层间深度 */}
+          <div style={{ position: 'absolute', inset: 0, background: G.bg, border: `2px solid ${G.border}`, boxSizing: 'border-box', filter: `brightness(${1 - g * 0.22})` }} />
+
+          {/* 投到底板上的假投影：随层浮起而下移/变虚 */}
+          {LAYERS.map((L) => {
+            const p = Math.min(1, Math.max(0, layerP(L.order)));
+            if (p <= 0.01) return null;
+            return (
+              <div
+                key={`sh-${L.key}`}
+                style={{
+                  position: 'absolute',
+                  left: L.x + L.z * 0.16 * p,
+                  top: L.y + L.z * 0.26 * p,
+                  width: L.w,
+                  height: L.h,
+                  borderRadius: L.radius,
+                  background: 'rgba(0,0,0,0.30)',
+                  filter: `blur(${8 + L.z * 0.09 * p}px)`,
+                  opacity: 0.5 * p,
+                  transform: 'translateZ(2px)',
+                }}
+              />
+            );
+          })}
+
+          {/* 可动层：沿 Z 浮起，近的更大更实、远的略暗 */}
+          {LAYERS.map((L) => {
+            const p = layerP(L.order);
+            const pc = Math.min(1, Math.max(0, p));
+            const bright = 1 - (1 - L.z / 320) * 0.28 * pc; // 深度越浅（z 小=离底板近=远离镜头）越暗
+            return (
+              <div
+                key={L.key}
+                style={{
+                  position: 'absolute',
+                  left: L.x,
+                  top: L.y,
+                  width: L.w,
+                  height: L.h,
+                  borderRadius: L.radius,
+                  transform: `translateZ(${L.z * p}px)`,
+                  filter: `brightness(${bright})`,
+                  boxShadow: pc > 0.02 ? `0 ${10 + L.z * 0.1 * pc}px ${16 + L.z * 0.14 * pc}px rgba(0,0,0,${0.12 + 0.1 * pc})` : 'none',
+                }}
+              >
+                {L.node}
+              </div>
+            );
+          })}
+        </div>
+      </AbsoluteFill>
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/space-camera-moves/SnorricamLock.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import { AbsoluteFill, Easing, interpolate, useCurrentFrame } from 'remotion';
+import { FakeDashboard, Card, G } from '../_fixtures/Fixtures';
+
+// snorricam-lock：KPI 卡片焊死画面正中纹丝不动，背后整页 dashboard
+// 倾斜/平移/翻滚地掠过——像卡片自己扛着摄影机在页面里狂奔，眩晕感全给背景。
+// 节拍：0-20 静止建立 → 20-55 起动加速 → 55-98 狂奔反甩 → 98-125 缓停 → 125-140 静止。
+
+// 分段关键帧插值：每段独立 easing，衔接处速度不连续也无妨（要的就是甩动感）
+type Key = { f: number; v: number; e?: (t: number) => number };
+const seg = (frame: number, keys: Key[]): number => {
+  if (frame <= keys[0].f) return keys[0].v;
+  const last = keys[keys.length - 1];
+  if (frame >= last.f) return last.v;
+  for (let i = 0; i < keys.length - 1; i++) {
+    const a = keys[i];
+    const b = keys[i + 1];
+    if (frame >= a.f && frame < b.f) {
+      return interpolate(frame, [a.f, b.f], [a.v, b.v], {
+        easing: b.e ?? Easing.inOut(Easing.quad),
+      });
+    }
+  }
+  return last.v;
+};
+
+// seed 正弦哈希（伪随机，禁 Math.random）
+const hash = (i: number) => {
+  const s = Math.sin(i * 127.3) * 43758.5453;
+  return s - Math.floor(s); // 0..1
+};
+
+export const SnorricamLock: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // —— 背景复合运动（三段 bezier 衔接，勿匀速）——
+  // x 位移：-800 → 400，先猛加速甩过头，再反向回甩，最后缓停
+  const bgX = seg(frame, [
+    { f: 20, v: -800 },
+    { f: 55, v: 120, e: Easing.bezier(0.55, 0.02, 0.35, 1.4) }, // 加速 + 过冲
+    { f: 98, v: 520, e: Easing.bezier(0.3, 0.9, 0.4, 1.1) },   // 狂奔反甩
+    { f: 125, v: 400, e: Easing.bezier(0.2, 0.8, 0.3, 1) },     // 回落缓停
+  ]);
+  // 翻滚：-6° → 8° → -3°
+  const bgRot = seg(frame, [
+    { f: 20, v: -6 },
+    { f: 60, v: 8, e: Easing.bezier(0.6, 0, 0.3, 1.2) },
+    { f: 100, v: -4.5, e: Easing.bezier(0.4, 0.1, 0.3, 1) },
+    { f: 125, v: -3, e: Easing.out(Easing.cubic) },
+  ]);
+  // zoom 波动：1.6 基准上呼吸
+  const bgScale = seg(frame, [
+    { f: 20, v: 1.6 },
+    { f: 50, v: 1.72, e: Easing.bezier(0.5, 0, 0.4, 1) },
+    { f: 90, v: 1.55, e: Easing.inOut(Easing.cubic) },
+    { f: 125, v: 1.62, e: Easing.out(Easing.quad) },
+  ]);
+  // 纵向轻甩，跟 x 错拍
+  const bgY = seg(frame, [
+    { f: 20, v: 60 },
+    { f: 58, v: -140, e: Easing.bezier(0.5, 0, 0.3, 1.3) },
+    { f: 100, v: 90, e: Easing.bezier(0.35, 0.6, 0.4, 1) },
+    { f: 125, v: 40, e: Easing.out(Easing.cubic) },
+  ]);
+
+  // 狂奔期的手持微颤（seed 正弦哈希，包络首尾归零，保证 hold 真静止）
+  const env = interpolate(frame, [20, 36, 105, 125], [0, 1, 1, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.inOut(Easing.quad),
+  });
+  const jx = env * 10 * Math.sin(frame * 0.9 + hash(1) * 6.28);
+  const jy = env * 7 * Math.sin(frame * 1.3 + hash(2) * 6.28);
+  const jr = env * 0.6 * Math.sin(frame * 0.7 + hash(3) * 6.28);
+
+  // 前景卡片投影随背景速度加重（狂奔时景深对比更狠）
+  const shadow = 24 + env * 32;
+  const shadowA = 0.28 + env * 0.14;
+
+  return (
+    <AbsoluteFill style={{ background: G.bg, overflow: 'hidden' }}>
+      {/* 背景：整页 dashboard 放大 1.6x 做复合运动 + 2px blur 区分景深 */}
+      <div
+        style={{
+          position: 'absolute',
+          left: '50%',
+          top: '50%',
+          width: 1920,
+          height: 1080,
+          marginLeft: -960,
+          marginTop: -540,
+          transform: `translate(${bgX + jx}px, ${bgY + jy}px) rotate(${bgRot + jr}deg) scale(${bgScale})`,
+          transformOrigin: '50% 50%',
+          filter: 'blur(2px)',
+        }}
+      >
+        <FakeDashboard variant="A" />
+      </div>
+
+      {/* 暗角：轻微压四周，让视线钉在中心卡片上 */}
+      <AbsoluteFill
+        style={{
+          background:
+            'radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 46%, rgba(0,0,0,0.18) 100%)',
+          pointerEvents: 'none',
+        }}
+      />
+
+      {/* 前景：KPI 卡片焊死正中，纹丝不动 */}
+      <div
+        style={{
+          position: 'absolute',
+          left: '50%',
+          top: '50%',
+          transform: 'translate(-50%, -50%)',
+        }}
+      >
+        <Card
+          w={700}
+          h={440}
+          seed={4}
+          style={{
+            boxShadow: `0 ${shadow}px ${shadow * 2.6}px rgba(0,0,0,${shadowA})`,
+            border: `2px solid ${G.border}`,
+          }}
+        />
+      </div>
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/spectrum-morph-ui/SpectrumMorphUi.tsx

@@ -0,0 +1,129 @@
+// spectrum-morph-ui —— 频谱化 UI
+// 标题 "LAUNCH WEEK" 下方 8px ink 下划线（720px）。25f 起裂成 28 根竖条
+// （20px 宽、6px 间隙），条高按伪 FFT 跳动 64f（低频端高、高频端矮的包络），
+// 条底对齐原线、向上生长。两小节后 12f 收拢回 8px 直线，收线后真静止 ≥35f。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, TitleBlock } from '../_fixtures/Fixtures';
+
+// 库内标准 seed hash（帧确定，无 Math.random）
+const h = (n: number) => {
+  const s = Math.sin(n * 127.3) * 43758.5453;
+  return s - Math.floor(s);
+};
+
+const LINE_W = 720;
+const LINE_H = 8;
+const LINE_X = (1920 - LINE_W) / 2; // 600
+const LINE_BOTTOM = 620; // 下划线底边 y（条从这里向上长）
+
+const N_BARS = 28;
+const GAP_MAX = 6;
+
+const SPLIT = 25; // 裂开起点
+const SPLIT_DUR = 8; // 裂开 & 幅度爬升
+const DANCE = 64; // 跳动两小节
+const COLLAPSE_START = SPLIT + DANCE; // 89
+const COLLAPSE_DUR = 12;
+const COLLAPSE_END = COLLAPSE_START + COLLAPSE_DUR; // 101 → 之后真静止 39f
+
+const AMP = 92; // 理论峰值 8 + 92 = 100px；wobble×jitter×env 很少同时取满，实测峰值 ~80px
+
+// 低频端高、高频端矮的包络
+const env = (i: number) => 0.4 + 0.6 * Math.pow(1 - i / (N_BARS - 1), 1.1);
+
+export const SpectrumMorphUi: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  const titleOp = interpolate(frame, [0, 10], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  // 幅度爬升（扩散 → out-cubic）与收拢（12f 归零）
+  const rampIn = interpolate(frame, [SPLIT, SPLIT + SPLIT_DUR], [0, 1], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const rampOut = interpolate(frame, [COLLAPSE_START, COLLAPSE_END], [1, 0], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const amp = rampIn * rampOut;
+
+  // 间隙：裂开时 0→6，收拢时 6→0（收拢结束恰好合成整线）
+  const gapIn = interpolate(frame, [SPLIT, SPLIT + SPLIT_DUR], [0, GAP_MAX], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const gapOut = interpolate(frame, [COLLAPSE_START, COLLAPSE_END], [GAP_MAX, 0], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const gap = Math.min(gapIn, gapOut);
+  const barW = (LINE_W - (N_BARS - 1) * gap) / N_BARS; // gap=6 时 ≈20px
+
+  // 条形阶段以外条件挂载整线（摘罩=条件挂载，保证收尾像素级静止）
+  const barsActive = frame >= SPLIT && frame < COLLAPSE_END;
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      <div
+        style={{
+          position: 'absolute',
+          top: 330,
+          width: '100%',
+          textAlign: 'center',
+          opacity: titleOp,
+          fontFamily: 'Helvetica, Arial, sans-serif',
+          fontWeight: 800,
+          fontSize: 120,
+          color: G.ink,
+          letterSpacing: -1,
+        }}
+      >
+        LAUNCH WEEK
+      </div>
+
+      {!barsActive && (
+        <div
+          style={{
+            position: 'absolute',
+            left: LINE_X,
+            top: LINE_BOTTOM - LINE_H,
+            width: LINE_W,
+            height: LINE_H,
+            background: G.ink,
+            borderRadius: 4,
+          }}
+        />
+      )}
+
+      {barsActive &&
+        Array.from({ length: N_BARS }).map((_, i) => {
+          // 伪 FFT：|sin| 摆动 × 每 4 帧换挡的 seed 随机 × 频段包络 × 幅度包络
+          const wobble = Math.abs(Math.sin(i * 0.7 + frame * 0.31));
+          const jitter = 0.4 + 0.6 * h(i * 13 + Math.floor(frame / 4));
+          const barH = LINE_H + AMP * wobble * jitter * env(i) * amp;
+          return (
+            <div
+              key={i}
+              style={{
+                position: 'absolute',
+                left: LINE_X + i * (barW + gap),
+                top: LINE_BOTTOM - barH, // 底边对齐原线，向上长
+                width: barW + (gap < 1 ? 0.5 : 0), // gap 收到 0 时补 0.5px 防细缝
+                height: barH,
+                background: G.ink,
+                borderRadius: 3,
+              }}
+            />
+          );
+        })}
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/speed-ramp-freeze/FreezeAnnotateReal.tsx

@@ -0,0 +1,70 @@
+// freeze-annotate 定格标注（轮 G）——真实卡片流运动中定格，
+// 马克笔琥珀圈注（feTurbulence 手绘抖动）圈住目标卡 + 箭头点题，解冻继续。
+// remap：0–45 流动 → 45–100 定格（斜率0）→ 100–135 解冻（1.4x 补偿）。
+import { AbsoluteFill, Img, interpolate, staticFile, useCurrentFrame } from 'remotion';
+import layout from '../_textures/live-layout.json';
+
+export const FREEZEANNOTATE_DUR = 135;
+
+const CARD_W = 460;
+const GAP = 60;
+const RAIL = layout.projects.cards.slice(0, 9);
+const TARGET_I = 5;
+const AMBER = '#b45309';
+
+export const FreezeAnnotateReal: React.FC = () => {
+  const frame = useCurrentFrame();
+  const src = interpolate(frame, [0, 45, 100, 135], [0, 45, 45, 94], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+  const dx = src * 22;
+  const draw = interpolate(frame, [52, 60], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+  const arrowDraw = interpolate(frame, [60, 66], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+  const fade = interpolate(frame, [96, 104], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+  // 导轨起点 -880：定格时（dx=990）目标卡 k=5 中心 = -880+2600-990+230 = 960 屏中
+  const X0 = -880;
+  const targetX = X0 + TARGET_I * (CARD_W + GAP) - dx + CARD_W / 2;
+  const C = 1750; // 椭圆周长近似
+  return (
+    <AbsoluteFill style={{ backgroundColor: '#f9f6f1', overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', top: 370, transform: `translateX(${-dx + X0}px)` }}>
+        {Array.from({ length: 14 }).map((_, k) => {
+          const c = RAIL[k % RAIL.length];
+          const isTarget = k === TARGET_I;
+          return (
+            <Img
+              key={k}
+              src={staticFile(`textures/live/${isTarget ? 'card4-hires.png' : c.file}`)}
+              style={{
+                position: 'absolute', left: k * (CARD_W + GAP), top: 0,
+                width: CARD_W, borderRadius: 12,
+                boxShadow: '0 4px 16px rgba(31,28,23,0.10)',
+              }}
+            />
+          );
+        })}
+      </div>
+      <svg width={1920} height={1080} style={{ position: 'absolute', inset: 0, pointerEvents: 'none', opacity: fade }}>
+        <defs>
+          <filter id="rough">
+            <feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="2" seed="7" result="n" />
+            <feDisplacementMap in="SourceGraphic" in2="n" scale="7" />
+          </filter>
+        </defs>
+        <ellipse
+          cx={targetX} cy={560} rx={290} ry={230}
+          fill="none" stroke={AMBER} strokeWidth={8} strokeLinecap="round"
+          strokeDasharray={C} strokeDashoffset={C * (1 - draw)}
+          transform={`rotate(-6 ${targetX} 560)`}
+          filter="url(#rough)"
+        />
+        <path
+          d={`M ${targetX + 330} 190 Q ${targetX + 220} 240 ${targetX + 140} 320`}
+          fill="none" stroke={AMBER} strokeWidth={8} strokeLinecap="round"
+          strokeDasharray={420} strokeDashoffset={420 * (1 - arrowDraw)}
+          filter="url(#rough)"
+        />
+      </svg>
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/speed-ramp-freeze/SpeedRampReal.tsx

@@ -0,0 +1,58 @@
+// speed-ramp 变速（轮 C）——真实卡片流帧号 remap：快(斜率2.2) →
+// 0.2x 慢速展示窗 → 快。慢速窗中目标卡（card4-hires）清晰滑过屏中。
+// blur 联动速率：快段包 blur、慢段不包，反差即"凝视感"。
+import { AbsoluteFill, Img, interpolate, staticFile, useCurrentFrame } from 'remotion';
+import { CameraMotionBlur } from '@remotion/motion-blur';
+import layout from '../_textures/live-layout.json';
+
+export const SPEEDRAMP_DUR = 135;
+
+const CARD_W = 460;
+const GAP = 60;
+const RAIL = layout.projects.cards.slice(0, 9);
+const TARGET_I = 5;
+
+const Scene: React.FC = () => {
+  const frame = useCurrentFrame();
+  // remap：0–40f 走 88 源帧（快），40–85f 走 9 源帧（0.2x），85–135f 走 110（快）
+  const src = interpolate(frame, [0, 40, 85, 135], [0, 88, 97, 207], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+  const dx = src * 28;
+  return (
+    <AbsoluteFill style={{ backgroundColor: '#f9f6f1', overflow: 'hidden' }}>
+      {/* 偏移 717：让慢速窗中点（src≈92.4，dx≈2587）时目标卡 k=5 中心落屏中 */}
+      <div style={{ position: 'absolute', top: 360, transform: `translateX(${-dx + 717}px)` }}>
+        {Array.from({ length: 16 }).map((_, k) => {
+          const c = RAIL[k % RAIL.length];
+          const isTarget = k === TARGET_I;
+          return (
+            <Img
+              key={k}
+              src={staticFile(`textures/live/${isTarget ? 'card4-hires.png' : c.file}`)}
+              style={{
+                position: 'absolute', left: k * (CARD_W + GAP), top: isTarget ? -16 : 0,
+                width: CARD_W, borderRadius: 12,
+                boxShadow: isTarget
+                  ? '0 10px 32px rgba(31,28,23,0.18)'
+                  : '0 4px 16px rgba(31,28,23,0.10)',
+              }}
+            />
+          );
+        })}
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+export const SpeedRampReal: React.FC = () => {
+  const frame = useCurrentFrame();
+  const fast = frame < 42 || frame > 83;
+  return fast ? (
+    <CameraMotionBlur shutterAngle={200} samples={20}>
+      <Scene />
+    </CameraMotionBlur>
+  ) : (
+    <Scene />
+  );
+};