hyper-animator-codex 0.7.0 → 0.8.0

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

@@ -0,0 +1,120 @@
+// 套印错位冲击帧（riso-misregistration-hit）——标题撞停瞬间裂成两份单色"印版"
+// （浅灰琥珀版 G.mid + 深墨版 G.ink，mix-blend-mode: multiply 叠加），像 riso 印刷
+// 没对准版；两版反向错位（x 为主 y 少量）做衰减震荡 offset = A*cos(ωt)*exp(-t/τ)
+// 抖两下，帧 72 啪地硬切回单一正体（套准合一），带 4f scale 1.03→1 脉冲收束。
+// 结构：0–19f 空场 hold（只有底部装饰线）；20–28f 标题从右画外 Easing.in(cubic)
+// 撞入屏心（帧 28 命中）；28–71f 双版错位震荡；72–75f 套准脉冲；76–119f 真静止 44f。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, TitleBlock } from '../_fixtures/Fixtures';
+
+const HIT = 28; // 撞停命中帧
+const SNAP = 72; // 套准合一帧
+const AX = 16; // 单版 x 错位振幅（两版反向 → 总分离 ~32px，肉眼明显）
+const AY = 7; // 单版 y 错位振幅（少量，更像没对准版）
+const OMEGA = (2 * Math.PI) / 18; // 震荡周期 18f，44f 内抖两下半
+const TAU = 60; // 缓衰减：帧 72 前仍余 ~14px 总分离，被"啪地"硬切归零
+
+// 与 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: 200,
+        color,
+        letterSpacing: -1,
+        whiteSpace: 'nowrap',
+      }}
+    >
+      IMPACT
+    </div>
+  </div>
+);
+
+export const RisoMisregistrationHit: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 阶段判定
+  const entering = frame >= 20 && frame < HIT; // 撞入
+  const split = frame >= HIT && frame < SNAP; // 双版错位震荡
+  const showSingle = frame < HIT || frame >= SNAP; // 正体（画外/撞入/套准后）
+
+  // 撞入位移：右画外 1400px → 0，8f Easing.in(cubic)（加速撞停）
+  const slideX = interpolate(frame, [20, HIT], [1400, 0], {
+    easing: Easing.in(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  // 错位震荡包络：t 自命中起，衰减余弦（帧 72 前仍有可见残余，硬切归零成"啪"）
+  const t = frame - HIT;
+  const m = split ? Math.cos(OMEGA * t) * Math.exp(-t / TAU) : 0;
+  const dx = AX * m;
+  const dy = AY * m;
+
+  // 套准合一脉冲：帧 72 起 4f scale 1.03 → 1，之后精确 1（保证结尾真静止）
+  const pulse =
+    frame >= SNAP && frame < SNAP + 4 ? 1 + 0.03 * (1 - (frame - SNAP) / 4) : 1;
+
+  return (
+    <div
+      style={{
+        width: 1920,
+        height: 1080,
+        background: G.bg,
+        position: 'relative',
+        overflow: 'hidden',
+      }}
+    >
+      {/* 底部装饰线：全程静止的布景锚点 */}
+      <div
+        style={{
+          position: 'absolute',
+          left: 510,
+          top: 740,
+          width: 900,
+          height: 6,
+          borderRadius: 3,
+          background: G.bar,
+        }}
+      />
+
+      {/* 正体：画外等待 / 撞入 / 套准后（撞入前 frame<20 时在画外，视觉等同空场） */}
+      {showSingle && (
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            transform: `translateX(${entering || frame < 20 ? slideX : 0}px) scale(${pulse})`,
+            transformOrigin: 'center center',
+          }}
+        >
+          <TitleBlock text="IMPACT" size={200} />
+        </div>
+      )}
+
+      {/* 双版错位：浅灰版与深墨版反向偏移，multiply 叠加出"重影套印" */}
+      {split && (
+        <>
+          <Plate color={G.mid} dx={-dx} dy={dy} />
+          <Plate color={G.ink} dx={dx} dy={-dy} />
+        </>
+      )}
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/runway-ground-skim/RunwayGroundSkim.tsx

@@ -0,0 +1,258 @@
+// runway-ground-skim v5 —— 源片 clickup-30.mp4 约 46–50s（clickup10 截图 5 张）：
+// 用户 v5 意见（逐字）："去掉落地后弹起的效果，然后整个下落的过程快一点"
+// 落实：①删除落地压弹——着地即停，零回弹零压缩（判例：掉落感=干脆利落）；
+// ②下落整体提速——单卡下落 15→9 帧，全员落定 f45→f33，立起段随之前移；
+// ③保留项不动：错峰 3 帧起点、界面位置顺序（行优先左→右）、重力加速
+// （距离∝t²）、贴落完成后页面立起转正收尾。
+import React from 'react';
+import { AbsoluteFill, interpolate, useCurrentFrame, Easing } from 'remotion';
+
+const FONT = 'Helvetica, Arial, sans-serif';
+const INK = '#3c3c42';
+const MID = '#8d8d94';
+const FAINT = '#d2d2d5';
+
+const easeRise = Easing.bezier(0.42, 0, 0.16, 1);
+
+/* mulberry32 带种子（起跳节奏 ≤1.5 帧微差 < 3 帧错峰，顺序不乱） */
+const mulberry32 = (seed: number) => () => {
+  seed |= 0; seed = (seed + 0x6d2b79f5) | 0;
+  let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+  t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+};
+
+const CARD_W = 760;
+const MiniCardFace: React.FC<{ title: string; sub: string }> = ({ title, sub }) => (
+  <div style={{
+    width: CARD_W, border: `4px solid ${FAINT}`, borderRadius: 22, padding: '30px 40px',
+    background: '#fcfcfb', display: 'flex', flexDirection: 'column', gap: 14, boxSizing: 'border-box',
+  }}>
+    <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
+      <div style={{ width: 40, height: 40, border: '6px solid #85858b', borderRadius: 8, flexShrink: 0 }} />
+      <div style={{ fontFamily: FONT, fontSize: 46, color: INK, fontWeight: 650, whiteSpace: 'nowrap' }}>{title}</div>
+    </div>
+    <div style={{ fontFamily: FONT, fontSize: 36, color: MID, paddingLeft: 64, whiteSpace: 'nowrap' }}>{sub}</div>
+  </div>
+);
+
+/* 界面位置顺序 = 数组顺序：第一行左→右，再第二行左→右 */
+const CARDS: { title: string; sub: string; col: number; row: number }[] = [
+  { title: 'Creative Refresh', sub: 'New logo exploration', col: 0, row: 0 },
+  { title: 'New Bugs Per Week', sub: 'Bug tracker Dashboard', col: 1, row: 0 },
+  { title: 'Tiger Team Roadmap', sub: 'Roadmap Outline', col: 2, row: 0 },
+  { title: 'Design System', sub: 'Design Handbook Inspo', col: 3, row: 0 },
+  { title: 'Development Sprint Dashboard', sub: 'Dev Team Sprints', col: 0, row: 1 },
+  { title: 'CSS Bug Tracker', sub: 'Query Reports', col: 1, row: 1 },
+  { title: 'Platform', sub: 'System Health Monitor', col: 2, row: 1 },
+];
+
+/* Recent 网格槽位（面板内容坐标） */
+const GRID_X = 1180, GRID_Y = 760, COL_GAP = 850, ROW_GAP = 250;
+const slotPos = (col: number, row: number) => ({ x: GRID_X + col * COL_GAP, y: GRID_Y + row * ROW_GAP });
+
+/* 平躺地面：Home 仪表盘（卡片槽位留空，由悬浮卡片落入） */
+const Ground: React.FC = () => (
+  <div style={{ width: 4600, height: 2600, background: '#f6f6f5', borderRadius: 60, position: 'relative', overflow: 'hidden' }}>
+    <div style={{ display: 'flex', height: '100%' }}>
+      {/* 左侧栏 */}
+      <div style={{ width: 860, borderRight: `4px solid ${FAINT}`, padding: '70px 60px 0', background: '#f1f1f0' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 26 }}>
+          <div style={{ width: 64, height: 64, borderRadius: 18, background: 'linear-gradient(135deg,#adadb3,#6b6b72)' }} />
+          <div style={{ fontFamily: FONT, fontSize: 56, fontWeight: 800, color: INK }}>ClickUp</div>
+        </div>
+        <div style={{ height: 46 }} />
+        {['Home', 'Inbox', 'Company', 'People & Teams', 'Goals', 'Docs', 'More'].map((t, i) => (
+          <div key={t} style={{
+            display: 'flex', alignItems: 'center', gap: 30, height: 108, paddingLeft: 32,
+            background: i === 0 ? '#e6e6f0' : 'transparent', borderRadius: 20,
+          }}>
+            <div style={{ width: 36, height: 36, border: '6px solid #90909a', borderRadius: 9 }} />
+            <div style={{ fontFamily: FONT, fontSize: 46, color: INK, fontWeight: i === 0 ? 650 : 400 }}>{t}</div>
+          </div>
+        ))}
+        <div style={{ height: 60 }} />
+        <div style={{ fontFamily: FONT, fontSize: 38, letterSpacing: 5, color: MID, fontWeight: 600, paddingLeft: 32 }}>SPACES</div>
+        <div style={{ height: 16 }} />
+        {['EPD', 'Product roadmap', 'Design', 'Designer handbook', '3.0', 'Design system'].map((t) => (
+          <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 30, height: 96, paddingLeft: 32 }}>
+            <div style={{ width: 44, height: 44, borderRadius: 12, background: '#d6d6da' }} />
+            <div style={{ fontFamily: FONT, fontSize: 42, color: INK }}>{t}</div>
+          </div>
+        ))}
+      </div>
+      {/* 主区 */}
+      <div style={{ flex: 1, padding: '70px 100px 0', position: 'relative' }}>
+        {/* 顶部 tab 条 */}
+        <div style={{ display: 'flex', gap: 110, fontFamily: FONT, fontSize: 42, color: MID, marginBottom: 60 }}>
+          <div>Product analytics</div><div style={{ fontWeight: 700, color: INK }}>ClickUp 3.0</div>
+          <div>Widget brainstorm</div><div>Design system</div><div>Design</div>
+        </div>
+        <div style={{ fontFamily: FONT, fontSize: 110, fontWeight: 750, color: INK }}>Home</div>
+        <div style={{ height: 40 }} />
+        <div style={{
+          display: 'flex', alignItems: 'center', gap: 30, border: `4px solid ${FAINT}`,
+          borderRadius: 24, padding: '28px 42px', background: '#fff', width: 1400,
+        }}>
+          <div style={{ width: 38, height: 38, borderRadius: 19, border: '6px solid #9a9aa0' }} />
+          <div style={{ fontFamily: FONT, fontSize: 42, color: MID }}>Search by app, filetype, or keyword</div>
+        </div>
+        <div style={{ height: 66 }} />
+        <div style={{ display: 'flex', gap: 70, fontFamily: FONT, fontSize: 46 }}>
+          <div style={{ color: INK, fontWeight: 700 }}>Recent</div>
+          <div style={{ color: MID }}>Favorites</div>
+        </div>
+        {/* ↑ Recent 网格槽位区域留空（卡片从空中落入 GRID_X/GRID_Y 起的两行四列） */}
+        <div style={{ height: 560 }} />
+        <div style={{ display: 'flex', gap: 70, fontFamily: FONT, fontSize: 44 }}>
+          <div style={{ color: INK, fontWeight: 700 }}>Todo</div>
+          <div style={{ color: MID }}>Comments</div>
+          <div style={{ color: MID }}>Done</div>
+          <div style={{ color: MID }}>Delegated</div>
+        </div>
+        <div style={{ height: 36 }} />
+        <div style={{
+          display: 'inline-block', padding: '16px 40px', background: '#e4e4e3', borderRadius: 14,
+          fontFamily: FONT, fontSize: 36, letterSpacing: 4, color: '#6f6f75', fontWeight: 600,
+        }}>TODAY</div>
+        <div style={{ height: 40 }} />
+        {['New Bugs Per Week', 'Designer handbook', 'Mobile screens', 'Product roadmap'].map((t) => (
+          <div key={t} style={{
+            display: 'flex', alignItems: 'center', gap: 34, height: 118,
+            borderBottom: '3px solid #e5e5e3', width: 2600,
+          }}>
+            <div style={{ width: 32, height: 32, borderRadius: 9, background: '#c04a6e' }} />
+            <div style={{ fontFamily: FONT, fontSize: 46, color: INK, fontWeight: 550 }}>{t}</div>
+            <div style={{ marginLeft: 'auto', width: 180, height: 16, background: '#e3e3e8', borderRadius: 8 }} />
+          </div>
+        ))}
+      </div>
+    </div>
+  </div>
+);
+
+export const RunwayGroundSkim: React.FC = () => {
+  const frame = useCurrentFrame();
+  const rand = mulberry32(20260718);
+  const jit = CARDS.map(() => rand() * 1.2); // ≤1.2 帧微差 < 3 帧错峰，顺序绝不乱
+
+  /* ---- 节奏（掉落提速+着地即停版，118 帧）----
+   * f0–6    开场：全员悬空在黑色空域
+   * f6–33   掉落：第 i 张起跳 f = 6 + i*3（错峰只差 3 帧），下落 9 帧
+   *         ⇒ 9 >> 3，空中同时 3–4 张在落（重叠并行，非串行等待）；
+   *         重力加速（距离∝t²），着地即停——零回弹零压缩
+   * f38–94  页面立起 + 视角转正（rotateX 66→0，镜头拉远居中）
+   * f94–118 终态正视整页 hold */
+  // v6（批次 15）：用户意见"下落的时间差多调小一些，不需要一个落下了
+  // 再启动第二个"——起点差 3→1.5 帧（9 帧下落窗口重叠度 6 倍，
+  // 任意时刻空中 5–6 张同落，几乎齐落带涟漪感）
+  const START0 = 6, GAP = 1.5, FALLF = 9;
+
+  const lifts = CARDS.map((c, i) => {
+    const t = frame - (START0 + i * GAP + jit[i]);
+    const H = 560 + (i % 3) * 160; // 初始悬浮高度错落
+    if (t <= 0) return H;
+    const p = t / FALLF;
+    if (p < 1) return H * (1 - p * p); // 重力加速：下落距离 ∝ t²
+    return 0; // 着地即停，无弹起
+  });
+
+  /* 立起段进度 */
+  const riseP = interpolate(frame, [38, 94], [0, 1], { easing: easeRise, extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+
+  /* 镜头：落卡段轻微推进（72→66°），立起段转正（→0°）并拉远居中 */
+  const landP = interpolate(frame, [0, 34], [0, 1], { easing: Easing.bezier(0.3, 0.1, 0.6, 0.9), extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+  const rx = interpolate(landP, [0, 1], [72, 66]) - 66 * riseP;
+  const z = interpolate(landP, [0, 1], [-620, -320]) + riseP * (-1620 - -320);
+  const bright = interpolate(frame, [0, 32, 86], [0.32, 0.8, 1.0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+
+  /* 锚点/透视原点随立起归中：终态整页入画、中心≈画面中心 */
+  const anchorTop = 58 - riseP * 6;           // % ：58 → 52（终态整页不裁底）
+  const perspY = 30 + riseP * 20;             // % ：30 → 50
+
+  const cam = (children: React.ReactNode, extra?: React.CSSProperties) => (
+    <AbsoluteFill style={{ perspective: 1050, perspectiveOrigin: `50% ${perspY}%`, ...extra }}>
+      <div style={{
+        position: 'absolute', left: '50%', top: `${anchorTop}%`, width: 0, height: 0,
+        transformStyle: 'preserve-3d',
+        transform: `translateZ(${z}px) rotateX(${rx}deg)`,
+      }}>
+        {children}
+      </div>
+    </AbsoluteFill>
+  );
+
+  const scene = (
+    <div style={{ position: 'absolute', transformStyle: 'preserve-3d', transform: 'translate(-2300px, -1500px)' }}>
+      {/* 地面 */}
+      <div style={{ filter: `brightness(${bright})` }}>
+        <Ground />
+      </div>
+      {/* 地面上的软影（z≈0，卡片同形，随悬浮高度变化大小/偏移/浓度） */}
+      {CARDS.map((c, i) => {
+        const h = lifts[i];
+        if (h < 2) return null;
+        const s = slotPos(c.col, c.row);
+        return (
+          <div key={'sh' + i} style={{
+            position: 'absolute', left: s.x + 20, top: s.y + 14, width: CARD_W - 40, height: 150,
+            transform: `translateZ(1px) translate(${h * 0.08}px, ${h * 0.12}px) scale(${1 + h * 0.0004})`,
+            background: 'rgba(10,8,16,0.9)', borderRadius: 24,
+            filter: `blur(${10 + h * 0.03}px)`,
+            opacity: Math.max(0.12, 0.38 - h * 0.0003),
+          }} />
+        );
+      })}
+      {/* 悬空卡片：与地面同向平躺，translateZ 抬高，落回槽位。
+          空中时被"追光"打亮（比暗地面亮），落地融入地面亮度 */}
+      {CARDS.map((c, i) => {
+        const h = lifts[i];
+        const s = slotPos(c.col, c.row);
+        const airLit = h > 2 ? Math.max(1.35, bright) : bright;
+        return (
+          <div key={'card' + i} style={{
+            position: 'absolute', left: s.x, top: s.y,
+            transform: `translateZ(${h}px)`,
+            filter: `brightness(${airLit})`,
+            boxShadow: h > 2 ? `0 0 ${30 + h * 0.05}px rgba(240,235,255,${Math.min(0.3, h * 0.0004)})` : 'none',
+          }}>
+            <MiniCardFace title={c.title} sub={c.sub} />
+          </div>
+        );
+      })}
+    </div>
+  );
+
+  /* 立起段各氛围层收敛：黑空域压顶/地平线光/近景糊都随转正淡出 */
+  const airOp = 1 - riseP;
+
+  return (
+    <AbsoluteFill style={{ background: '#07060a' }}>
+      {/* 地平线微光（转正后消失） */}
+      <AbsoluteFill style={{
+        background: `radial-gradient(ellipse 60% 14% at 50% 40%, rgba(190,170,255,${(0.16 + landP * 0.1) * airOp}), transparent 75%)`,
+      }} />
+      {cam(scene)}
+      {/* 近景轻糊（转正后消失） */}
+      {airOp > 0.02 && (
+        <AbsoluteFill style={{
+          filter: 'blur(10px) brightness(0.88)', opacity: airOp,
+          WebkitMaskImage: 'linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.7) 84%, black 98%)',
+          maskImage: 'linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.7) 84%, black 98%)',
+        }}>
+          {cam(scene)}
+        </AbsoluteFill>
+      )}
+      {/* 上半空域压黑（随立起淡出） */}
+      <AbsoluteFill style={{
+        background: 'linear-gradient(180deg, rgba(4,3,8,0.9) 0%, rgba(4,3,8,0.35) 16%, transparent 32%)',
+        opacity: airOp, pointerEvents: 'none',
+      }} />
+      {/* 暗角（转正后减弱不消失） */}
+      <AbsoluteFill style={{
+        background: 'radial-gradient(ellipse 95% 90% at 50% 55%, transparent 50%, rgba(3,2,7,0.55) 85%, rgba(2,1,5,0.88) 100%)',
+        opacity: 1 - riseP * 0.55, pointerEvents: 'none',
+      }} />
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/sakuga-timing-shift/SakugaTimingShift.tsx

@@ -0,0 +1,178 @@
+// sakuga-timing-shift —— 一拍三转一拍一（作画打拍切换）
+// 0–48f：驱动帧 q = floor(f/3)*3，卡从左侧顿挫横移到右侧（10fps 手翻书感），
+// 每步 ≈74px + rotate 摆动 = 一拍三的钝感；48f 切换点后改用原始 f 连续驱动，
+// 48–75f 丝滑冲刺折返中央（out-poly(4) 高初速 + 运动拉伸 scaleX + 残影），
+// 过冲 36px 后 3f 回弹落位。左上角标 "on 3s"/"on 1s" 随段切换并带 line-boil
+// （boil 在 f=108 后冻结）。收尾真静止 ≥40f。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, Card, TitleBlock } from '../_fixtures/Fixtures';
+
+const W = 1920;
+const CARD_W = 420;
+const CARD_H = 260;
+const CARD_Y = (1080 - CARD_H) / 2; // 410
+
+const X_LEFT = 120;
+const X_RIGHT = 1380; // 卡左缘，右侧停点
+const X_CENTER = (W - CARD_W) / 2; // 750，中央落位
+const OVERSHOOT = 36;
+
+const SWITCH = 48; // 打拍切换帧
+const ARRIVE = 70; // 冲刺到过冲点
+const SETTLE = 75; // 回弹落位完成
+
+// 段一：一拍三。位置函数线性，但只在 q = floor(f/3)*3 上取值。
+const pos1 = (t: number): number =>
+  interpolate(t, [0, SWITCH], [X_LEFT, X_RIGHT], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+// 段二：一拍一。out-poly(4) 高初速冲刺 → 过冲 → 3f 回弹。
+const pos2 = (t: number): number =>
+  interpolate(t, [SWITCH, ARRIVE, SETTLE], [X_RIGHT, X_CENTER - OVERSHOOT, X_CENTER], {
+    easing: Easing.out(Easing.poly(4)),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+export const SakugaTimingShift: React.FC = () => {
+  const f = useCurrentFrame();
+  const onThrees = f < SWITCH;
+
+  // ---- 卡片位置 ----
+  const q = Math.floor(f / 3) * 3; // 一拍三驱动帧
+  const x = onThrees ? pos1(q) : pos2(f);
+
+  // 顿挫段 rotate 摆动（随 q 冻结，一步一个姿势）
+  const rot = onThrees
+    ? Math.sin(q * 0.7) * 5
+    : interpolate(f, [SWITCH, SWITCH + 8], [Math.sin(SWITCH * 0.7) * 5, 0], {
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp',
+      });
+
+  // 冲刺段速度（位置差分，帧时间解耦）→ 运动拉伸
+  const v = onThrees ? 0 : Math.abs(pos2(f) - pos2(f - 1));
+  const sFac = Math.min(v / 55, 1);
+  const stretchX = 1 + 0.35 * sFac; // 峰值 ≈1.35，横向拉丝
+  const stretchY = 1 - 0.12 * sFac;
+
+  // 落位急停回弹：72–78f scaleX 压扁再回 1
+  const sqX = interpolate(f, [SETTLE - 3, SETTLE, SETTLE + 3], [1, 0.9, 1], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const sqY = interpolate(f, [SETTLE - 3, SETTLE, SETTLE + 3], [1, 1.07, 1], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  // 冲刺残影：只在段二速度高时挂载（条件挂载，不留 opacity 0 的壳）
+  const ghosts =
+    !onThrees && f > SWITCH + 1 && f < ARRIVE + 2 && sFac > 0.15
+      ? [
+          { xg: pos2(f - 2), op: 0.28 * sFac },
+          { xg: pos2(f - 4), op: 0.13 * sFac },
+        ]
+      : [];
+
+  // ---- 角标 "on 3s" / "on 1s"，line-boil，f=108 后冻结 ----
+  const h = (n: number) => {
+    const s = Math.sin(n * 127.3) * 43758.5453;
+    return s - Math.floor(s);
+  };
+  const qb = Math.min(Math.floor(f / 4) * 4, 108); // boil 驱动帧，108 后冻结
+  const bx = (h(qb + 1) - 0.5) * 7;
+  const by = (h(qb + 2) - 0.5) * 7;
+  const brot = (h(qb + 3) - 0.5) * 3;
+  // 切换瞬间角标弹一下
+  const pop = interpolate(f, [SWITCH, SWITCH + 3, SWITCH + 9], [1, 1.35, 1], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  const titleOp = interpolate(f, [0, 10], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', top: 90, width: '100%', textAlign: 'center', opacity: titleOp }}>
+        <TitleBlock text="SAKUGA TIMING SHIFT" size={64} />
+      </div>
+
+      {/* 轨道基线 + 中央落位虚线槽 */}
+      <div
+        style={{
+          position: 'absolute',
+          left: 100,
+          right: 100,
+          top: CARD_Y + CARD_H + 24,
+          height: 3,
+          background: G.line,
+          borderRadius: 2,
+        }}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          left: X_CENTER,
+          top: CARD_Y,
+          width: CARD_W,
+          height: CARD_H,
+          border: `3px dashed ${G.bar}`,
+          borderRadius: 14,
+          boxSizing: 'border-box',
+        }}
+      />
+
+      {/* 冲刺残影 */}
+      {ghosts.map((g, i) => (
+        <div
+          key={`ghost-${i}`}
+          style={{ position: 'absolute', left: 0, top: CARD_Y, opacity: g.op, transform: `translateX(${g.xg}px)` }}
+        >
+          <Card w={CARD_W} h={CARD_H} seed={4} />
+        </div>
+      ))}
+
+      {/* 主卡 */}
+      <div
+        style={{
+          position: 'absolute',
+          left: 0,
+          top: CARD_Y,
+          transform: `translateX(${x}px) rotate(${rot}deg) scaleX(${stretchX * sqX}) scaleY(${stretchY * sqY})`,
+          transformOrigin: '50% 50%',
+        }}
+      >
+        <Card w={CARD_W} h={CARD_H} seed={4} />
+      </div>
+
+      {/* 角标：on 3s / on 1s */}
+      <div
+        style={{
+          position: 'absolute',
+          left: 120,
+          top: 160,
+          transform: `translate(${bx}px, ${by}px) rotate(${brot}deg) scale(${pop})`,
+          transformOrigin: '0% 50%',
+          fontFamily: 'Courier New, monospace',
+          fontWeight: 700,
+          fontSize: 84,
+          color: G.ink,
+          borderBottom: `6px solid ${G.ink}`,
+          paddingBottom: 6,
+        }}
+      >
+        {onThrees ? 'on 3s' : 'on 1s'}
+      </div>
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/scene-locked-title/SceneLockedTitle.tsx

@@ -0,0 +1,98 @@
+// scene-locked-title —— 透视锁定标题（《战栗空间》式）
+// dashboard 平面躺在 3D 空间里，巨大标题悬浮其前方（translateZ 分离）。
+// 只动最外层"相机"容器（缓慢平移 + 轻转），标题与 UI 共享灭点、
+// 随透视一起变形，视差让人读出"字钉在场景里"而非贴在玻璃上。
+// f0–12 初始静置，f12–112 相机运动（inOut，非匀速），f112 起真静止 ≥38f。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, FakeDashboard, TitleBlock } from '../_fixtures/Fixtures';
+
+const MOVE_START = 12;
+const MOVE_END = 112;
+const camEase = Easing.inOut(Easing.cubic);
+
+const cam = (f: number, from: number, to: number): number =>
+  interpolate(f, [MOVE_START, MOVE_END], [from, to], {
+    easing: camEase,
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+export const SceneLockedTitle: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 相机：横移 ±280px + rotateY ±8° + 轻微升降。幅度取可感下限以上。
+  const camX = cam(frame, 280, -280);
+  const camY = cam(frame, -40, 40);
+  const camRY = cam(frame, -8, 8);
+
+  return (
+    <div
+      style={{
+        width: 1920,
+        height: 1080,
+        background: G.bg,
+        overflow: 'hidden',
+        position: 'relative',
+        perspective: 1200,
+        perspectiveOrigin: '50% 42%',
+      }}
+    >
+      {/* 相机层：唯一被动画的 transform */}
+      <div
+        style={{
+          position: 'absolute',
+          left: '50%',
+          top: '50%',
+          width: 0,
+          height: 0,
+          transformStyle: 'preserve-3d',
+          transform: `translate3d(${camX}px, ${camY}px, 0) rotateY(${camRY}deg)`,
+        }}
+      >
+        {/* 场景层：静态的"躺倒"姿态，dashboard 与标题共享此平面系 */}
+        <div
+          style={{
+            transformStyle: 'preserve-3d',
+            transform: 'rotateX(50deg) rotateZ(-16deg)',
+          }}
+        >
+          {/* dashboard 平面（translateZ 0） */}
+          <div
+            style={{
+              position: 'absolute',
+              left: -960,
+              top: -540,
+              transform: 'translateZ(0px) scale(0.92)',
+            }}
+          >
+            <FakeDashboard variant="A" />
+          </div>
+          {/* 标题悬浮在平面前方 150px，与 UI 同灭点，随透视变形 */}
+          <div
+            style={{
+              position: 'absolute',
+              left: -700,
+              top: -140,
+              transform: 'translateZ(150px)',
+            }}
+          >
+            <TitleBlock text="NORTH STAR" size={200} />
+          </div>
+          {/* 副标题：更贴近平面（Z 60px），运动中与主标题产生层间视差 */}
+          <div
+            style={{
+              position: 'absolute',
+              left: -690,
+              top: 90,
+              transform: 'translateZ(60px)',
+              opacity: 0.75,
+            }}
+          >
+            <TitleBlock text="A FILM BY DASHBOARD" size={44} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};