hyper-animator-codex 0.7.1 → 0.8.0

package/skills/hyper-animator-codex/references/shotcraft/source/demos/slam-entrance-moves/ImpactBurstKit.tsx

@@ -0,0 +1,185 @@
+// 落点冲击套件（impact-burst-kit）——shockwave-ring + particle-burst 组合变异。
+// 主卡砸落的落点帧同时触发：冲击波环扩散 + 14 粒子放射迸发 + 震屏，
+// 且冲击波前沿扫到左右邻卡的那一帧（按半径-距离算准=落点后 3f）邻卡被
+// 向外推开再 spring 弹回——"波及邻居"即两条词汇焊接成立的证据。
+// 关键帧：0–14 两侧卡驻场、主卡 scale1.8/y-120 悬停 → 14–20 主卡 6f 加速砸落 →
+// 20 落点帧：环 80→900px(14f out-cubic, op .75→0) + 14 粒子飞散 160–340px(22f)
+//   + 4f 震屏 6px 衰减 + 主卡 6f 压扁回弹 → 23 环前沿过邻卡(中心距 460px)：
+//   邻卡外推 30px + rotate ±3° 阻尼振荡弹回(40f 内钳到 0) → 63–140 全静止(77f)。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, Card, TitleBlock } from '../_fixtures/Fixtures';
+
+// 伪随机（帧确定）
+const h = (n: number): number => {
+  const s = Math.sin(n * 127.3) * 43758.5453;
+  return s - Math.floor(s);
+};
+
+const CW = 400;
+const CH = 280;
+const GAP = 60;
+const X_L = (1920 - (CW * 3 + GAP * 2)) / 2; // 300
+const Y = (1080 - CH) / 2; // 400
+const CX = 960; // 主卡中心
+const CY = Y + CH / 2; // 540
+
+const IMPACT = 20; // 落点帧
+// 冲击波：80→900px 14f out-cubic。前沿到达邻卡中心距 460px 的帧：
+// (460-80)/820=0.463 → 1-(1-p)^3 → p≈0.19 → t≈2.6f → 取落点后 3f = 帧 23
+const HIT_NEIGHBOR = IMPACT + 3;
+
+// 14 个粒子：方/圆混合，角度带向上偏置，飞散 160–340px 减速缩小消失
+const PARTICLES = Array.from({ length: 14 }).map((_, i) => ({
+  angle: -Math.PI / 2 + (h(i + 1) - 0.5) * Math.PI * 1.7, // 上半球为主
+  dist: 160 + h(i + 40) * 180,
+  size: 8 + h(i + 80) * 10,
+  square: i % 2 === 0,
+}));
+
+// 邻卡被推开的阻尼振荡包络：t=0 瞬时到 1，之后余弦衰减弹回，40f 后钳 0 保真静止
+const pushEnv = (f: number): number => {
+  const t = f - HIT_NEIGHBOR;
+  if (t < 0 || t >= 40) return 0;
+  return Math.cos(t * 0.5) * Math.exp(-t / 8);
+};
+
+export const ImpactBurstKit: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // ── 主卡砸落：14–20 帧 scale 1.8→1 / y -120→0，加速进场
+  const dropP = interpolate(frame, [14, IMPACT], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.in(Easing.cubic),
+  });
+  const mainScale = interpolate(dropP, [0, 1], [1.8, 1]);
+  const mainDy = interpolate(dropP, [0, 1], [-120, 0]);
+  // 落点后 6f 压扁回弹（squash & stretch）
+  const sq = interpolate(frame, [IMPACT, IMPACT + 3, IMPACT + 6], [0, 1, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.quad),
+  });
+  const mainSx = mainScale * (1 + 0.07 * sq);
+  const mainSy = mainScale * (1 - 0.1 * sq);
+
+  // ── ① 冲击波环：半径 80→900，14f，opacity 0.75→0
+  const ringP = interpolate(frame, [IMPACT, IMPACT + 14], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+  const ringR = interpolate(ringP, [0, 1], [80, 900]);
+  const ringOp = frame >= IMPACT && frame < IMPACT + 14 ? 0.75 * (1 - ringP) : 0;
+
+  // ── ② 粒子：落点起 22f，减速飞散 + 缩小 + 淡出
+  const pT = interpolate(frame, [IMPACT, IMPACT + 22], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+  const particlesAlive = frame >= IMPACT && frame < IMPACT + 22;
+
+  // ── ③ 邻卡外推 30px + rotate ±3°，阻尼弹回
+  const env = pushEnv(frame);
+  const pushX = 30 * env;
+  const pushRot = 3 * env;
+
+  // ── ④ 震屏：落点起 4f，6px 衰减（h 伪随机方向，帧确定）
+  let shakeX = 0;
+  let shakeY = 0;
+  if (frame >= IMPACT && frame < IMPACT + 4) {
+    const amp = 6 * (1 - (frame - IMPACT) / 4);
+    shakeX = (h(frame * 3.7) - 0.5) * 2 * amp;
+    shakeY = (h(frame * 7.1 + 13) - 0.5) * 2 * amp;
+  }
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', inset: 0, transform: `translate(${shakeX}px, ${shakeY}px)` }}>
+        <div style={{ position: 'absolute', left: 120, top: 96 }}>
+          <TitleBlock text="IMPACT BURST KIT" size={54} />
+        </div>
+
+        {/* 左邻卡：被冲击波推开再弹回 */}
+        <div
+          style={{
+            position: 'absolute',
+            left: X_L,
+            top: Y,
+            transform: `translateX(${-pushX}px) rotate(${-pushRot}deg)`,
+          }}
+        >
+          <Card w={CW} h={CH} seed={2} />
+        </div>
+
+        {/* 右邻卡 */}
+        <div
+          style={{
+            position: 'absolute',
+            left: X_L + (CW + GAP) * 2,
+            top: Y,
+            transform: `translateX(${pushX}px) rotate(${pushRot}deg)`,
+          }}
+        >
+          <Card w={CW} h={CH} seed={4} />
+        </div>
+
+        {/* 主卡：砸落 + 落点压扁回弹 */}
+        <div
+          style={{
+            position: 'absolute',
+            left: X_L + CW + GAP,
+            top: Y + mainDy,
+            transform: `scale(${mainSx}, ${mainSy})`,
+            transformOrigin: '50% 100%',
+          }}
+        >
+          <Card w={CW} h={CH} seed={7} style={{ boxShadow: '0 6px 18px rgba(0,0,0,0.16)' }} />
+        </div>
+
+        {/* ② 粒子迸发（画在卡之上） */}
+        {particlesAlive &&
+          PARTICLES.map((p, i) => {
+            const px = CX + Math.cos(p.angle) * p.dist * pT;
+            const py = CY + Math.sin(p.angle) * p.dist * pT;
+            const s = p.size * (1 - pT);
+            if (s < 0.5) return null;
+            return (
+              <div
+                key={i}
+                style={{
+                  position: 'absolute',
+                  left: px - s / 2,
+                  top: py - s / 2,
+                  width: s,
+                  height: s,
+                  background: G.ink,
+                  borderRadius: p.square ? 2 : '50%',
+                  opacity: 1 - pT * pT,
+                }}
+              />
+            );
+          })}
+
+        {/* ① 冲击波环（最上层扫过邻卡） */}
+        {ringOp > 0 && (
+          <div
+            style={{
+              position: 'absolute',
+              left: CX - ringR,
+              top: CY - ringR,
+              width: ringR * 2,
+              height: ringR * 2,
+              border: `3px solid ${G.ink}`,
+              borderRadius: '50%',
+              opacity: ringOp,
+              boxSizing: 'border-box',
+            }}
+          />
+        )}
+      </div>
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/slam-entrance-moves/KanadaPerspectiveSnap.tsx

@@ -0,0 +1,91 @@
+// 金田透视急停（kanada-perspective-snap）——金田伊功式夸张透视入场。
+// 一张卡片以鱼眼级夸张透视姿态高速甩入画面中心：容器 perspective 300→1500px
+// （短焦→长焦，透视畸变随之收敛），卡片 rotate3d(0.5,1,0.1) 58°→0 +
+// scale 1.7→1 + translateX -700→0，近角冲出画面感。落定瞬间"啪"地弹平：
+// rotateY 过冲 +5° 再 4f 回 0；同时 6px 震屏 2f 衰减，拉长斜影收为正常投影。
+// 甩入期整卡叠 blur(2px) 增速感，落定即摘（保证收尾逐帧全同）。
+// 关键帧：0–18 透视甩入（out cubic）→ 14–18 rotateY 过冲至 +5° →
+// 18–22 回弹归 0 + 震屏衰减 + 阴影收正 → 22–130 全静止（≥45f）。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, Card, TitleBlock } from '../_fixtures/Fixtures';
+
+// 确定性伪随机（震屏抖动用）
+const h = (n: number): number => {
+  const s = Math.sin(n * 127.3) * 43758.5453;
+  return s - Math.floor(s);
+};
+
+const CLAMP = { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' } as const;
+
+const CARD_W = 520;
+const CARD_H = 340;
+const CX = (1920 - CARD_W) / 2; // 700
+const CY = (1080 - CARD_H) / 2; // 370
+
+export const KanadaPerspectiveSnap: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 0–18f 甩入主通道（out cubic：先猛后缓，急停感）
+  const p = interpolate(frame, [0, 18], [0, 1], { ...CLAMP, easing: Easing.out(Easing.cubic) });
+  const persp = interpolate(p, [0, 1], [300, 1500]); // 短焦鱼眼→长焦收平
+  const angle3d = interpolate(p, [0, 1], [58, 0]); // rotate3d(0.5,1,0.1)
+  const scale = interpolate(p, [0, 1], [1.7, 1]);
+  const tx = interpolate(p, [0, 1], [-700, 0]);
+
+  // rotateY 过冲通道：14–18f 冲到 +5°，18–22f "啪"地回 0
+  const rotY =
+    frame < 18
+      ? interpolate(frame, [14, 18], [0, 5], CLAMP)
+      : interpolate(frame, [18, 22], [5, 0], { ...CLAMP, easing: Easing.out(Easing.cubic) });
+
+  // 落定震屏：18f 起 6px，2f 内衰减到 0（21f 后恒为 0，保证真静止）
+  const shakeAmp = frame >= 18 ? interpolate(frame, [18, 21], [6, 0], CLAMP) : 0;
+  const shakeX = shakeAmp * (h(frame * 7 + 1) * 2 - 1);
+  const shakeY = shakeAmp * (h(frame * 13 + 2) * 2 - 1);
+
+  // 阴影：飞行期拉长斜影（大偏移大模糊）→ 落定收为正常投影（18–22f 收拢）
+  const shOff = frame < 18 ? interpolate(p, [0, 1], [1, 0.35]) : interpolate(frame, [18, 22], [0.35, 0], { ...CLAMP, easing: Easing.out(Easing.quad) });
+  const shX = interpolate(shOff, [0, 1], [0, 70]);
+  const shY = interpolate(shOff, [0, 1], [8, 52]);
+  const shBlur = interpolate(shOff, [0, 1], [14, 36]);
+  const shAlpha = interpolate(shOff, [0, 1], [0.16, 0.3]);
+
+  // 甩速 blur：透视扭曲期叠 2px，落定（18f）即摘，收尾无逐帧滤镜
+  const blur = frame < 18 ? 2 : 0;
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', left: shakeX, top: shakeY, width: 1920, height: 1080 }}>
+        <div style={{ position: 'absolute', left: 120, top: 96 }}>
+          <TitleBlock text="KANADA PERSPECTIVE SNAP" size={54} />
+        </div>
+        {/* 落点槽位（虚线框，给"甩到哪"一个参照） */}
+        <div
+          style={{
+            position: 'absolute',
+            left: CX - 20,
+            top: CY - 20,
+            width: CARD_W + 40,
+            height: CARD_H + 40,
+            border: `3px dashed ${G.bar}`,
+            borderRadius: 22,
+            boxSizing: 'border-box',
+          }}
+        />
+        {/* 透视容器：perspective 随落定从鱼眼收敛到长焦 */}
+        <div style={{ position: 'absolute', left: CX, top: CY, perspective: `${persp}px`, perspectiveOrigin: '30% 50%' }}>
+          <div
+            style={{
+              transform: `translateX(${tx}px) scale(${scale}) rotate3d(0.5, 1, 0.1, ${angle3d}deg) rotateY(${rotY}deg)`,
+              transformOrigin: '20% 50%',
+              filter: `drop-shadow(${shX}px ${shY}px ${shBlur}px rgba(0,0,0,${shAlpha}))${blur ? ` blur(${blur}px)` : ''}`,
+            }}
+          >
+            <Card w={CARD_W} h={CARD_H} seed={3} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/slam-entrance-moves/ScoreSlam.tsx

@@ -0,0 +1,225 @@
+// 比分砸落入场（score-slam）——ESPN 比分弹窗 slam。
+// KPI 卡从 scale 2.5 / rotate 5° / y-80 高空加速砸落屏心，落点帧同时触发
+// 三件套：冲击波描边圆环扩散消散、8 个尘点小方块 seeded 抛物线飞散、
+// 整画面震屏指数衰减。砸落带 3% 压缩过冲回弹落定。
+// 关键帧：0–8 环境 hold → 8–14 砸落（Easing.in(quad)，scale 2.5→0.97，
+// rotate 5→0，y -80→0）→ 14 落点帧触发环/尘/震 → 14–22 过冲回弹 0.97→1 →
+// 14–28 圆环 60→720px 直径 op 0.7→0 → 14–30 尘点飞散 → 14–19 震屏 18px 衰减
+// → 30–135 全静止（≥45f，无逐帧噪声层）。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, FakeDashboard, TitleBlock } from '../_fixtures/Fixtures';
+
+// 库规伪随机
+const h = (n: number) => {
+  const s = Math.sin(n * 127.3) * 43758.5453;
+  return s - Math.floor(s);
+};
+
+const IMPACT = 14; // 落点帧
+const CX = 960;
+const CY = 540;
+const CARD_W = 460;
+const CARD_H = 260;
+
+export const ScoreSlam: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // —— 卡片砸落：8–14 加速下砸到 0.97（压缩过冲），14–22 回弹到 1 ——
+  const slamScale =
+    frame < IMPACT
+      ? interpolate(frame, [8, IMPACT], [2.5, 0.97], {
+          extrapolateLeft: 'clamp',
+          extrapolateRight: 'clamp',
+          easing: Easing.in(Easing.quad),
+        })
+      : interpolate(frame, [IMPACT, 22], [0.97, 1], {
+          extrapolateLeft: 'clamp',
+          extrapolateRight: 'clamp',
+          easing: Easing.out(Easing.cubic),
+        });
+  const slamRot = interpolate(frame, [8, IMPACT], [5, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.in(Easing.quad),
+  });
+  const slamY = interpolate(frame, [8, IMPACT], [-80, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.in(Easing.quad),
+  });
+  const cardOp = interpolate(frame, [8, 11], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  // —— 震屏：落点帧起 5f，18px 指数衰减，seeded 方向，19f 后严格归零 ——
+  let shakeX = 0;
+  let shakeY = 0;
+  if (frame >= IMPACT && frame < IMPACT + 5) {
+    const t = frame - IMPACT;
+    const amp = 18 * Math.exp(-t * 0.9);
+    shakeX = amp * (h(frame * 7 + 1) * 2 - 1);
+    shakeY = amp * (h(frame * 13 + 2) * 2 - 1);
+  }
+
+  // —— 冲击波圆环：14f 内直径 60→720，opacity 0.7→0 ——
+  const ringT = interpolate(frame, [IMPACT, IMPACT + 14], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+  const ringD = interpolate(ringT, [0, 1], [60, 860]);
+  // 不透明度走线性帧时间（与扩散的 out-cubic 解耦），扩到最大前都保持可见
+  const ringTLin = interpolate(frame, [IMPACT, IMPACT + 14], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const ringOp = interpolate(ringTLin, [0, 0.65, 1], [0.75, 0.55, 0]);
+  const ringOn = frame >= IMPACT && frame < IMPACT + 14;
+
+  // —— 8 个尘点：seeded 角度抛物线飞散 120–260px，16f 减速缩小消失 ——
+  const dustT = interpolate(frame, [IMPACT, IMPACT + 16], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.cubic),
+  });
+  const dustTLin = interpolate(frame, [IMPACT, IMPACT + 16], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const dustOn = frame >= IMPACT && frame < IMPACT + 16;
+
+  return (
+    <div
+      style={{
+        width: 1920,
+        height: 1080,
+        background: G.bg,
+        position: 'relative',
+        overflow: 'hidden',
+      }}
+    >
+      {/* 震屏容器：整画面一起抖 */}
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          transform: `translate(${shakeX}px, ${shakeY}px)`,
+        }}
+      >
+        {/* 虚化 dashboard 环境底 */}
+        <div
+          style={{
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            filter: 'blur(6px)',
+            transform: 'scale(1.05)',
+            transformOrigin: '50% 50%',
+          }}
+        >
+          <FakeDashboard variant="B" />
+        </div>
+
+        <div style={{ position: 'absolute', left: 120, top: 96 }}>
+          <TitleBlock text="SCORE SLAM" size={54} />
+        </div>
+
+        {/* ② 尘点飞散 */}
+        {dustOn &&
+          Array.from({ length: 8 }).map((_, i) => {
+            const ang = (i / 8) * Math.PI * 2 + (h(i + 3) - 0.5) * 0.7;
+            const dist = 160 + h(i + 11) * 160; // 160–320px
+            const size = 18 + h(i + 23) * 12; // 18–30px
+            const dx = Math.cos(ang) * dist * dustT;
+            // 抛物线：先随角度飞出，再叠加重力下坠
+            const dy = Math.sin(ang) * dist * dustT + 90 * dustT * dustT;
+            const s = size * (1 - 0.75 * dustTLin);
+            const op = interpolate(dustTLin, [0, 0.75, 1], [0.9, 0.7, 0]);
+            return (
+              <div
+                key={i}
+                style={{
+                  position: 'absolute',
+                  left: CX + dx - s / 2,
+                  top: CY + CARD_H / 2 - 20 + dy - s / 2,
+                  width: s,
+                  height: s,
+                  background: G.ink,
+                  opacity: op,
+                  borderRadius: 2,
+                }}
+              />
+            );
+          })}
+
+        {/* ① 冲击波圆环 */}
+        {ringOn && (
+          <div
+            style={{
+              position: 'absolute',
+              left: CX - ringD / 2,
+              top: CY - ringD / 2,
+              width: ringD,
+              height: ringD,
+              borderRadius: '50%',
+              border: `6px solid ${G.ink}`,
+              opacity: ringOp,
+              boxSizing: 'border-box',
+            }}
+          />
+        )}
+
+        {/* KPI 卡本体 */}
+        {frame >= 8 && (
+          <div
+            style={{
+              position: 'absolute',
+              left: CX - CARD_W / 2,
+              top: CY - CARD_H / 2,
+              width: CARD_W,
+              height: CARD_H,
+              background: G.card,
+              border: `3px solid ${G.border}`,
+              borderRadius: 18,
+              boxShadow: '0 10px 30px rgba(0,0,0,0.18)',
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: 8,
+              opacity: cardOp,
+              transform: `translateY(${slamY}px) rotate(${slamRot}deg) scale(${slamScale})`,
+              transformOrigin: '50% 50%',
+            }}
+          >
+            <div
+              style={{
+                fontFamily: 'Helvetica, Arial, sans-serif',
+                fontWeight: 800,
+                fontSize: 110,
+                color: G.ink,
+                letterSpacing: -3,
+                lineHeight: 1,
+              }}
+            >
+              +247%
+            </div>
+            <div
+              style={{
+                fontFamily: 'Helvetica, Arial, sans-serif',
+                fontWeight: 600,
+                fontSize: 26,
+                color: G.mid,
+                letterSpacing: 4,
+              }}
+            >
+              QUARTERLY GROWTH
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/smear-multiples/SmearMultiples.tsx

@@ -0,0 +1,88 @@
+// 残像分身（smear-multiples）——smear frame 多重残像。
+// 卡片高速横移时身后拖 4 个"可数"的半透明完整分身（各取当前帧减 k*2 帧
+// 时刻的位置，同一条插值函数换帧号求值，天然帧确定），与运动模糊的连续糊
+// 相区别。分身仅在本体速度 >25px/f 时可见（速度 = 相邻帧位置差）。
+// 关键帧：0–25 左槽 hold → 25–37 横移 900px（inOut cubic，带 3% 过冲）→
+// 35–38 分身延迟收缩至 0 合拢进本体 + opacity 归零 → 37–43 过冲回弹 → 43–130 全静止。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, Card, TitleBlock } from '../_fixtures/Fixtures';
+
+const X0 = 240; // 左槽卡片左边缘
+const X1 = 1140; // 右槽卡片左边缘（横移 900px）
+const OVER = 27; // 3% 过冲
+const Y = 380; // 卡片顶边（垂直居中 1080-320）
+
+// 本体位置：25–37 高速横移到过冲点，37–43 回弹落座，之后恒定 → 帧确定
+const posAt = (f: number): number =>
+  f < 37
+    ? interpolate(f, [25, 37], [X0, X1 + OVER], {
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp',
+        easing: Easing.inOut(Easing.cubic),
+      })
+    : interpolate(f, [37, 43], [X1 + OVER, X1], {
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp',
+        easing: Easing.out(Easing.cubic),
+      });
+
+const Slot: React.FC<{ x: number }> = ({ x }) => (
+  <div
+    style={{
+      position: 'absolute',
+      left: x - 20,
+      top: Y - 20,
+      width: 520,
+      height: 360,
+      border: `3px dashed ${G.bar}`,
+      borderRadius: 20,
+      boxSizing: 'border-box',
+    }}
+  />
+);
+
+export const SmearMultiples: React.FC = () => {
+  const frame = useCurrentFrame();
+  const bodyX = posAt(frame);
+  // 本体速度 = 相邻帧位置差；>25px/f 才渲染分身
+  const speed = Math.abs(posAt(frame) - posAt(frame - 1));
+  const speedGate = interpolate(speed, [25, 60], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  // 落位合拢：35–38 三帧内分身延迟收缩到 0（位置滑向本体）+ 不透明度归零
+  const cv = interpolate(frame, [35, 38], [0, 1], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.quad),
+  });
+  const convergeFade = frame >= 35 ? 1 - cv : 0;
+
+  const ghostOps = [0.45, 0.3, 0.18, 0.09];
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', left: 120, top: 96 }}>
+        <TitleBlock text="SMEAR MULTIPLES" size={54} />
+      </div>
+      <Slot x={X0} />
+      <Slot x={X1} />
+      {/* 4 个分身：第 k 个取 frame - k*2 帧时刻的位置；合拢期延迟×(1-cv) 收缩到 0 */}
+      {ghostOps.map((baseOp, i) => {
+        const k = i + 1;
+        const gx = posAt(frame - k * 2 * (1 - cv));
+        const op = baseOp * Math.max(speedGate, convergeFade);
+        if (op <= 0.001) return null;
+        return (
+          <div key={k} style={{ position: 'absolute', left: gx, top: Y, opacity: op }}>
+            <Card w={480} h={320} seed={5} />
+          </div>
+        );
+      })}
+      <div style={{ position: 'absolute', left: bodyX, top: Y }}>
+        <Card w={480} h={320} seed={5} />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,91 @@
+import React from 'react';
+import { AbsoluteFill, Easing, interpolate, useCurrentFrame } from 'remotion';
+import { CameraMotionBlur } from '@remotion/motion-blur';
+import { FakeDashboard, G } from '../_fixtures/Fixtures';
+
+// drone-dive-landing：上帝视角俯视整页平躺的 dashboard（近垂直俯角、缩小居中），
+// 相机猛扎下来——俯角抬平、页面放大立正，最后一段气垫式长尾减速，
+// 稳稳停在 hero 卡正前方特写。FPV 无人机俯冲降落的运镜翻译。
+//
+// hero 卡 = FakeDashboard A 网格左上格：
+// 侧栏 220 + padding 36 = x 256 起，列宽 (1628-56)/3 = 524；
+// 顶栏 72 + padding 36 = y 108 起，行高 (936-28)/2 = 454。
+// 卡中心 (256+262, 108+227) = (518, 335)，全程 transform-origin 钉在这里。
+const HERO = { cx: 518, cy: 335 };
+const DIVE_START = 20; // 开头 hold 20f：上帝视角建立
+const DIVE_END = 45;   // 主俯冲段 25f，ease-in(cubic) 越冲越快
+const LAND_END = 65;   // 气垫段 20f，ease-out(quint) 长尾减速，之后真静止
+const DIVE_SHARE = 0.82; // 俯冲段吃掉 82% 行程，剩 18% 留给气垫
+
+const Scene: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 两段速度曲线拼一条行程 p∈[0,1]：先猛加速扎下，切换帧速度骤降 = 气垫顶住的体感
+  const pDive = interpolate(frame, [DIVE_START, DIVE_END], [0, DIVE_SHARE], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.in(Easing.cubic),
+  });
+  const pLand = interpolate(frame, [DIVE_END, LAND_END], [0, 1 - DIVE_SHARE], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+    easing: Easing.out(Easing.poly(5)),
+  });
+  const p = frame < DIVE_END ? pDive : DIVE_SHARE + pLand;
+
+  // 三轴联动，全部由同一条 p 驱动（同一台"相机"的一次连续机动）
+  const rotX = interpolate(p, [0, 1], [72, 0]);      // 俯角抬平
+  const scale = interpolate(p, [0, 1], [0.42, 1.35]); // 缩小全景 → hero 特写
+  // 平移：起点让整页平躺在画面中央偏上；终点 hero 卡中心正对画面中心
+  const tx = interpolate(p, [0, 1], [256, 960 - HERO.cx]);
+  const ty = interpolate(p, [0, 1], [150, 540 - HERO.cy]);
+
+  // 地面投影：俯视时页面悬空、下方拖一团椭圆软影；落地立正后影子收干
+  const shadowOp = interpolate(p, [0, 0.8], [0.32, 0], {
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+  const shadowW = 1300 * (0.6 + scale * 0.4);
+
+  return (
+    <AbsoluteFill style={{ background: G.bg, overflow: 'hidden' }}>
+      {/* 地面软影（高度感线索） */}
+      <div
+        style={{
+          position: 'absolute',
+          left: 960 - shadowW / 2,
+          top: 620,
+          width: shadowW,
+          height: 320,
+          borderRadius: '50%',
+          background: 'radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 68%)',
+          opacity: shadowOp,
+          filter: 'blur(18px)',
+        }}
+      />
+      {/* 相机 = perspective 容器；页面绕 hero 卡中心做 rotateX + scale + translate */}
+      <AbsoluteFill style={{ perspective: 1400 }}>
+        <div
+          style={{
+            position: 'absolute',
+            width: 1920,
+            height: 1080,
+            transformOrigin: `${HERO.cx}px ${HERO.cy}px`,
+            transform: `translate(${tx}px, ${ty}px) rotateX(${rotX}deg) scale(${scale})`,
+            boxShadow: `0 ${6 + (1 - p) * 30}px ${20 + (1 - p) * 60}px rgba(0,0,0,${0.1 + (1 - p) * 0.14})`,
+            borderRadius: 6,
+            overflow: 'hidden',
+          }}
+        >
+          <FakeDashboard variant="A" />
+        </div>
+      </AbsoluteFill>
+    </AbsoluteFill>
+  );
+};
+
+export const DroneDiveLanding: React.FC = () => (
+  <CameraMotionBlur shutterAngle={220} samples={9}>
+    <Scene />
+  </CameraMotionBlur>
+);