hyper-animator-codex 0.7.1 → 0.8.0

package/skills/hyper-animator-codex/references/shotcraft/source/demos/paper-craft-moves/PopupBookRise.tsx

@@ -0,0 +1,134 @@
+// popup-book-rise —— 立体书立起
+// FakeDashboard(A) 打平躺下（场景 rotateX 75° 透视俯视），6 张卡片是贴在页上的
+// 纸片，沿各自底边从平躺错峰立起（rotateX 90°→-5° 过冲→0° 回弹，即立到 95° 再回 90°），
+// 根部投影随立起角度收窄变淡。全部立起后整个场景轻微回正（75°→68°）收尾。
+// 卡片用独立网格复刻 dashboard A 区布局（Fixtures 内嵌卡无法单独驱动）。
+// 收尾 f108 后真静止 ≥52f。帧确定性：全由 frame 派生。
+import React from 'react';
+import { useCurrentFrame, interpolate, spring, Easing } from 'remotion';
+import { G, Card } from '../_fixtures/Fixtures';
+
+const FPS = 30;
+const HOLD = 14; // 开头静置
+const STAGGER = 7;
+const RISE_DUR = 34; // spring 视觉收敛帧数
+const LAST_START = HOLD + 5 * STAGGER; // 49
+const SETTLE = LAST_START + RISE_DUR; // 83：全部立起
+const REST = SETTLE + 25; // 108：场景回正完成
+
+// dashboard A 区几何（照抄 FakeDashboard：侧栏 220 + 顶栏 72 + padding 36 + gap 28）
+const AREA_X = 220 + 36;
+const AREA_Y = 72 + 36;
+const AREA_W = 1920 - 220 - 72;
+const AREA_H = 1080 - 72 - 72;
+const GAP = 28;
+const CELL_W = (AREA_W - 2 * GAP) / 3;
+const CELL_H = (AREA_H - GAP) / 2;
+
+const PageCard: React.FC<{ i: number; frame: number }> = ({ i, frame }) => {
+  const col = i % 3;
+  const row = Math.floor(i / 3);
+  // 远排（row 0）先立，近排后立；同排从左到右
+  const order = row === 0 ? col : 3 + col;
+  const start = HOLD + order * STAGGER;
+
+  const s = spring({
+    frame: frame - start,
+    fps: FPS,
+    config: { damping: 11, stiffness: 130, mass: 0.9 },
+    durationInFrames: RISE_DUR,
+    durationRestThreshold: 0.0001,
+  });
+  // 平躺（贴页面 = local 0°）→ 立起（垂直页面 = local -90°，顶边朝观众翻起），
+  // spring 过冲自然冲过 -90° 到约 -95°（纸的韧性）再回弹。
+  const rx = interpolate(s, [0, 1], [0, -90]);
+
+  // 根部投影：躺平时长影（卡片盖在页面上），立起后收成窄条
+  const lie = 1 - Math.min(Math.abs(rx) / 90, 1); // 1 = 躺平, 0 = 立直
+  const shH = 14 + 90 * Math.max(lie, 0);
+  const shAlpha = 0.1 + 0.16 * Math.max(lie, 0);
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: AREA_X + col * (CELL_W + GAP),
+        top: AREA_Y + row * (CELL_H + GAP),
+        width: CELL_W,
+        height: CELL_H,
+        transformStyle: 'preserve-3d',
+      }}
+    >
+      {/* 根部投影贴在页面上，不随卡片立起 */}
+      <div
+        style={{
+          position: 'absolute',
+          left: 6,
+          right: 6,
+          bottom: -4,
+          height: shH,
+          background: `rgba(0,0,0,${shAlpha})`,
+          borderRadius: 12,
+          filter: 'blur(10px)',
+        }}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          transform: `rotateX(${rx}deg)`,
+          transformOrigin: '50% 100%',
+          backfaceVisibility: 'hidden',
+        }}
+      >
+        <Card w={0} h={0} seed={i + 1} style={{ width: '100%', height: '100%' }} />
+      </div>
+    </div>
+  );
+};
+
+export const PopupBookRise: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 场景（书页）俯视角：全程 75°，全部立起后轻微回正到 68°
+  const sceneRx = interpolate(frame, [SETTLE, REST], [75, 68], {
+    easing: Easing.inOut(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: '#dddddb', position: 'relative', overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', inset: 0, perspective: 2600, perspectiveOrigin: '50% 30%' }}>
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            transform: `translateY(-40px) rotateX(${sceneRx}deg)`,
+            transformOrigin: '50% 62%',
+            transformStyle: 'preserve-3d',
+          }}
+        >
+          {/* 书页底板：dashboard 的壳（侧栏+顶栏+空白页面） */}
+          <div style={{ position: 'absolute', inset: 0, background: G.bg, boxShadow: '0 40px 80px rgba(0,0,0,0.25)' }}>
+            <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 220, 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>
+            <div style={{ position: 'absolute', left: 220, right: 0, top: 0, height: 72, 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>
+          </div>
+          {/* 6 张纸片卡沿底边立起 */}
+          {Array.from({ length: 6 }).map((_, i) => (
+            <PageCard key={i} i={i} frame={frame} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/paper-plane-messenger/PaperPlaneMessenger.tsx

@@ -0,0 +1,183 @@
+// paper-plane-messenger —— pitch-app 77–82s（2.5D 简化）
+// 点击"发送"后镜头拉远脱离窗口 A，折纸飞机从窗口飞出沿弧线飞行
+// （俯仰角跟随切线），镜头伴飞穿过多层视差漂浮的灰阶道具，
+// 飞抵窗口 B 前落定，窗口 B 放大接管全屏。发送语义实体化成转场信使。
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame, interpolate, Easing } from 'remotion';
+import { Card, G } from '../_fixtures/Fixtures';
+
+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 AX = 520, AY = 560;   // 窗口 A 中心
+const BX = 3200, BY = 600;  // 窗口 B 中心
+const WIN_W = 760, WIN_H = 500;
+
+// 飞机三次贝塞尔弧线：A 的发送按钮 → 高抛 → B 门前
+const P0 = { x: AX + 300, y: AY + 150 };
+const P1 = { x: 1250, y: -80 };
+const P2 = { x: 2500, y: 300 };
+const P3 = { x: BX - 470, y: BY + 20 };
+const bez = (t: number) => {
+  const u = 1 - t;
+  return {
+    x: u * u * u * P0.x + 3 * u * u * t * P1.x + 3 * u * t * t * P2.x + t * t * t * P3.x,
+    y: u * u * u * P0.y + 3 * u * u * t * P1.y + 3 * u * t * t * P2.y + t * t * t * P3.y,
+  };
+};
+
+// ---- 时间轴（150f）----
+const CLICK = 12;        // 点击发送
+const ZOOM_OUT = [16, 42] as const; // 镜头拉远
+const FLY = [34, 104] as const;     // 飞行
+const TAKEOVER = [112, 146] as const; // 窗口 B 接管
+
+// 视差道具（圆环/方块），depth: 0.45 远 / 0.75 中 / 1.3 近
+type Prop = { x: number; y: number; size: number; ring: boolean; depth: number; drift: number };
+const PROPS: Prop[] = (() => {
+  const rng = mulberry32(42);
+  const out: Prop[] = [];
+  const depths = [0.45, 0.75, 1.3];
+  for (let i = 0; i < 16; i++) {
+    const depth = depths[i % 3];
+    out.push({
+      x: 500 + rng() * 2800,
+      y: -150 + rng() * 1350,
+      size: depth < 0.6 ? 60 + rng() * 70 : depth < 1 ? 110 + rng() * 100 : 220 + rng() * 160,
+      ring: rng() > 0.45,
+      depth,
+      drift: rng() * Math.PI * 2,
+    });
+  }
+  return out;
+})();
+
+const Window: React.FC<{ cx: number; cy: number; seed: number; sendBtn?: boolean; btnPulse?: number }> = ({ cx, cy, seed, sendBtn, btnPulse = 0 }) => (
+  <div style={{ position: 'absolute', left: cx - WIN_W / 2, top: cy - WIN_H / 2, width: WIN_W, height: WIN_H, borderRadius: 18, background: '#fff', border: `2px solid ${G.border}`, boxShadow: '0 40px 100px rgba(0,0,0,0.30)', boxSizing: 'border-box', overflow: 'hidden' }}>
+    <div style={{ height: 54, background: '#f2f2f0', borderBottom: `2px solid ${G.line}`, display: 'flex', alignItems: 'center', gap: 10, padding: '0 20px', boxSizing: 'border-box' }}>
+      {[0, 1, 2].map((i) => <div key={i} style={{ width: 15, height: 15, borderRadius: 8, background: G.bar }} />)}
+      <div style={{ marginLeft: 14, height: 13, width: 200, background: G.bar, borderRadius: 7 }} />
+    </div>
+    <div style={{ padding: 26, display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <Card w={WIN_W - 56} h={250} seed={seed} style={{ boxShadow: 'none' }} />
+      {sendBtn && (
+        <div style={{ alignSelf: 'flex-end', transform: `scale(${1 + btnPulse * 0.22})`, padding: '16px 46px', borderRadius: 12, background: G.ink, color: '#fff', fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 800, fontSize: 30, boxShadow: btnPulse > 0 ? `0 0 0 ${btnPulse * 22}px rgba(47,47,47,0.18)` : 'none' }}>
+          Send ➤
+        </div>
+      )}
+    </div>
+  </div>
+);
+
+const Plane: React.FC<{ x: number; y: number; angle: number; scale: number; opacity: number }> = ({ x, y, angle, scale, opacity }) => (
+  <svg width={180} height={110} viewBox="0 0 180 110" style={{ position: 'absolute', left: x - 90, top: y - 55, transform: `rotate(${angle}deg) scale(${scale})`, overflow: 'visible', opacity }}>
+    {/* 折纸飞机：三块折面，灰阶深浅示折痕 */}
+    <polygon points="176,30 6,4 62,66" fill="#ffffff" stroke="#b8b8b6" strokeWidth={3} />
+    <polygon points="176,30 62,66 78,102" fill="#d4d4d2" stroke="#b8b8b6" strokeWidth={3} />
+    <polygon points="176,30 6,4 50,44" fill="#efefed" stroke="#c6c6c4" strokeWidth={2} />
+  </svg>
+);
+
+export const PaperPlaneMessenger: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 飞行进度（整体 ease-in-out：起飞加速、落定减速）
+  const tFly = interpolate(frame, [FLY[0], FLY[1]], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    easing: Easing.bezier(0.45, 0.05, 0.25, 1),
+  });
+  const pos = bez(tFly);
+  const posNext = bez(Math.min(tFly + 0.012, 1));
+  const angle = Math.atan2(posNext.y - pos.y, posNext.x - pos.x) * (180 / Math.PI);
+
+  // ---- 镜头 ----
+  const zoomOutP = interpolate(frame, [ZOOM_OUT[0], ZOOM_OUT[1]], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.inOut(Easing.cubic),
+  });
+  const takeP = interpolate(frame, [TAKEOVER[0], TAKEOVER[1]], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.inOut(Easing.cubic),
+  });
+  // 镜头中心：A → 跟飞机 → B
+  const followW = interpolate(frame, [ZOOM_OUT[0], ZOOM_OUT[1]], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+  let cx = AX + (pos.x - AX) * followW;
+  let cy = (AY + (pos.y - AY) * followW) * (1 - takeP) + 0; // 占位，下一行合成
+  cy = AY + (Math.max(pos.y, 150) - AY) * followW;
+  cx = cx * (1 - takeP) + BX * takeP;
+  cy = cy * (1 - takeP) + BY * takeP;
+  // 变焦：1.55（贴脸 A）→ 0.62（拉远伴飞）→ 2.6（B 接管全屏）
+  const zBase = 1.55 + (0.62 - 1.55) * zoomOutP;
+  const zTake = 0.62 + (3.1 - 0.62) * takeP;
+  const z = frame < TAKEOVER[0] ? zBase : zTake;
+
+  const camX = (wx: number, d: number) => 960 + (wx - cx) * z * d;
+  const camY = (wy: number, d: number) => 540 + (wy - cy) * z * d;
+
+  const btnPulse = interpolate(frame, [CLICK, CLICK + 3, CLICK + 12], [0, 1, 0], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.quad),
+  });
+  const planeVisible = frame >= FLY[0] - 2;
+  // 飞行途中放大到 1.7 增强可读性，落定收回 1.1
+  const flightBoost = interpolate(tFly, [0, 0.25, 0.75, 1], [1, 1.7, 1.7, 1.1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+  const planeScale = interpolate(frame, [FLY[0] - 2, FLY[0] + 8], [0.3, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Easing.out(Easing.back(1.6)),
+  }) * flightBoost;
+  // 窗口 B 接管时飞机淡出，不留残影
+  const planeOpacity = interpolate(takeP, [0, 0.35], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+
+  return (
+    <AbsoluteFill style={{ background: 'linear-gradient(160deg, #e9e9e7 0%, #dcdcda 100%)', overflow: 'hidden' }}>
+      {/* 视差道具：远层 / 中层（世界层之下） */}
+      {PROPS.filter((p) => p.depth < 1).map((p, i) => {
+        const wob = Math.sin(frame * 0.035 + p.drift) * 14;
+        const x = camX(p.x, p.depth) + wob;
+        const y = camY(p.y, p.depth) + Math.cos(frame * 0.03 + p.drift) * 10;
+        const s = p.size * z * p.depth;
+        const fade = interpolate(takeP, [0.3, 0.9], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+        return (
+          <div key={i} style={{
+            position: 'absolute', left: x - s / 2, top: y - s / 2, width: s, height: s,
+            opacity: (p.depth < 0.6 ? 0.5 : 0.75) * fade,
+            borderRadius: p.ring ? '50%' : 14,
+            background: p.ring ? 'transparent' : '#c9c9c7',
+            border: p.ring ? `${Math.max(s * 0.13, 4)}px solid #bfbfbd` : 'none',
+            filter: p.depth < 0.6 ? 'blur(3px)' : 'none',
+            boxSizing: 'border-box',
+          }} />
+        );
+      })}
+
+      {/* 世界层（depth=1）：窗口 A / B + 飞机 */}
+      <div style={{ position: 'absolute', left: 0, top: 0, transformOrigin: '0 0', transform: `translate(${960 - cx * z}px, ${540 - cy * z}px) scale(${z})` }}>
+        <Window cx={AX} cy={AY} seed={3} sendBtn btnPulse={btnPulse} />
+        <Window cx={BX} cy={BY} seed={6} />
+        {planeVisible && planeOpacity > 0.01 && <Plane x={pos.x} y={pos.y} angle={angle} scale={planeScale} opacity={planeOpacity} />}
+      </div>
+
+      {/* 近景道具（世界层之上，焦外大件） */}
+      {PROPS.filter((p) => p.depth >= 1).map((p, i) => {
+        const wob = Math.sin(frame * 0.04 + p.drift) * 20;
+        const x = camX(p.x, p.depth) + wob;
+        const y = camY(p.y, p.depth) + Math.cos(frame * 0.033 + p.drift) * 16;
+        const s = p.size * z * p.depth;
+        const fade = interpolate(takeP, [0.2, 0.7], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+        return (
+          <div key={i} style={{
+            position: 'absolute', left: x - s / 2, top: y - s / 2, width: s, height: s,
+            opacity: 0.55 * fade,
+            borderRadius: p.ring ? '50%' : 22,
+            background: p.ring ? 'transparent' : '#b5b5b3',
+            border: p.ring ? `${Math.max(s * 0.12, 6)}px solid #adadab` : 'none',
+            filter: 'blur(8px)', boxSizing: 'border-box',
+          }} />
+        );
+      })}
+    </AbsoluteFill>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/particle-celebrate-hits/ConfettiCrossfire.tsx

@@ -0,0 +1,115 @@
+// confetti-crossfire —— 双侧礼炮交叉喷洒
+// 中央大 KPI 卡 scale 落定（f0–14），揭晓帧 f16 左下+右下两门炮各射 50 颗矩形彩屑：
+// 闭式弹道（初速 ~18px/f + spread 55° + 重力 + decay 0.9 的位移闭式解），每帧翻转 8–15°，
+// 灰阶为主 + 1/3 琥珀。全部彩屑 ~f100 前落出画外（越界即条件卸载），结尾真静止 ≥55f。
+// 帧确定性：sin 散列伪随机派生每颗初速/角度/翻转率，弹道 = 纯 age 的函数。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, TitleBlock } from '../_fixtures/Fixtures';
+
+const AMBER = '#b45309';
+const FIRE = 16; // 揭晓帧 = 发射帧
+const DECAY = 0.9;
+const GRAV = 1.5; // px/f² （等效重力；decay 下终端落速 = GRAV/(1-d) = 15px/f）
+
+const frac = (x: number) => x - Math.floor(x);
+const rnd = (i: number, salt: number) => frac(Math.sin(i * 12.9898 + salt * 78.233) * 43758.5453);
+
+// decay 弹道闭式解：v 每帧 ×0.9 → 位移 = v0·(1-d^age)/(1-d)；重力项同样按衰减序列累积
+const decaySum = (age: number) => (1 - Math.pow(DECAY, age)) / (1 - DECAY);
+
+type Confetto = {
+  vx: number; vy: number; w: number; h: number;
+  spin: number; phase: number; amber: boolean; shade: string;
+};
+
+const makeGun = (originDeg: number, saltBase: number): Confetto[] =>
+  Array.from({ length: 50 }).map((_, i) => {
+    const ang = ((originDeg + (rnd(i, saltBase) - 0.5) * 55) * Math.PI) / 180;
+    // decay 0.9 下初速总位移只有 10×v0（velocity 6.6f 减半），18px/f 只够 180px 完全不可感
+    // → 加码到 70–95px/f：最陡颗峰值升到 y≈390（画面上 1/3），弹幕跨越中央卡，~f96 全部落出
+    const speed = 70 + rnd(i, saltBase + 1) * 25;
+    const grays = ['#6d6d6b', '#8f8f8d', '#4a4a48', '#b0b0ae'];
+    return {
+      vx: Math.cos(ang) * speed,
+      vy: -Math.sin(ang) * speed, // 屏幕坐标向下为正，射向斜上
+      w: 14 + rnd(i, saltBase + 2) * 12,
+      h: 8 + rnd(i, saltBase + 3) * 8,
+      spin: 8 + rnd(i, saltBase + 4) * 7, // 8–15°/f
+      phase: rnd(i, saltBase + 5) * 360,
+      amber: rnd(i, saltBase + 6) < 1 / 3,
+      shade: grays[Math.floor(rnd(i, saltBase + 7) * 4)],
+    };
+  });
+
+const LEFT_GUN = makeGun(60, 3);   // 左下炮朝 60°（偏右上）
+const RIGHT_GUN = makeGun(120, 9); // 右下炮朝 120°（偏左上）
+const LEFT_POS = { x: 140, y: 1040 };
+const RIGHT_POS = { x: 1780, y: 1040 };
+
+export const ConfettiCrossfire: React.FC = () => {
+  const frame = useCurrentFrame();
+  const age = frame - FIRE;
+
+  // KPI 卡 scale 入场落定
+  const cardScale = interpolate(frame, [0, 14], [0.6, 1], {
+    easing: Easing.out(Easing.back(1.8)),
+    extrapolateRight: 'clamp',
+  });
+  const cardOp = interpolate(frame, [0, 8], [0, 1], { extrapolateRight: 'clamp' });
+
+  const renderGun = (gun: Confetto[], origin: { x: number; y: number }, keyBase: string) =>
+    gun.map((c, i) => {
+      if (age <= 0) return null;
+      const s = decaySum(age);
+      const x = origin.x + c.vx * s;
+      // 重力：每帧速度 +GRAV 再统一衰减 → 位移闭式 Σ 可整理为 GRAV·(age - s·d)/(1-d) 的近似；
+      // 直接用精确序列和：g 项位移 = GRAV · Σ_{k=1..age} (1-d^k)/(1-d) = GRAV·(age-(d-d^{age+1})/(1-d))/(1-d)
+      const gDisp = (GRAV * (age - (DECAY - Math.pow(DECAY, age + 1)) / (1 - DECAY))) / (1 - DECAY);
+      const y = origin.y + c.vy * s + gDisp;
+      // 落出画外即卸载（左右也裁）
+      if (y > 1140 || x < -80 || x > 2000) return null;
+      const rot = c.phase + c.spin * age;
+      return (
+        <div
+          key={`${keyBase}${i}`}
+          style={{
+            position: 'absolute', left: x, top: y, width: c.w, height: c.h,
+            background: c.amber ? AMBER : c.shade,
+            borderRadius: 2,
+            // rotateX 造翻牌式 3D 翻转（宽度不变、高度压扁），再加平面 rotate
+            transform: `rotate(${rot}deg) rotateX(${rot * 2.3}deg)`,
+          }}
+        />
+      );
+    });
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', top: 110, width: '100%', textAlign: 'center' }}>
+        <TitleBlock text="CONFETTI CROSSFIRE" size={72} />
+      </div>
+
+      {/* 中央 KPI 卡 */}
+      <div style={{
+        position: 'absolute', left: 660, top: 400, width: 600, height: 320,
+        background: G.card, border: `2px solid ${G.border}`, borderRadius: 16,
+        boxSizing: 'border-box', padding: 36, boxShadow: '0 4px 14px rgba(0,0,0,0.08)',
+        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+        transform: `scale(${cardScale})`, opacity: cardOp,
+      }}>
+        <div style={{ height: 14, width: 220, background: G.bar, borderRadius: 7 }} />
+        <div style={{
+          fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 800, fontSize: 150,
+          color: AMBER, letterSpacing: -3, lineHeight: 1.1, fontVariantNumeric: 'tabular-nums',
+        }}>
+          98.5%
+        </div>
+        <div style={{ height: 10, width: 150, background: G.line, borderRadius: 5 }} />
+      </div>
+
+      {renderGun(LEFT_GUN, LEFT_POS, 'L')}
+      {renderGun(RIGHT_GUN, RIGHT_POS, 'R')}
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/particle-celebrate-hits/CounterTickSparks.tsx

@@ -0,0 +1,103 @@
+// counter-tick-sparks —— 数字跳动溅火
+// 中央大计数器 0 → 12,847（easeOut 逐位跳动），每逢跳过整千的 tick 帧，
+// 数字顶部溅 6–10 颗大火星（初速向上 9–13px/f、重力下坠 14–18f 内坠灭）；
+// 终值揭晓那跳翻倍 20 颗 + 数字弹 1.1x 回落。
+// 结尾所有火星寿命耗尽条件卸载，真静止 ≥40f。
+// 帧确定性：tick 帧从同一 easeOut 曲线预解析（模块级求出），火星 = 纯 age 闭式弹道。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, TitleBlock } from '../_fixtures/Fixtures';
+
+const AMBER = '#b45309';
+const TARGET = 12847;
+const COUNT_END = 78; // 计数结束帧
+const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
+const valueAt = (f: number) => Math.round(TARGET * easeOutCubic(Math.min(Math.max(f / COUNT_END, 0), 1)));
+
+const frac = (x: number) => x - Math.floor(x);
+const rnd = (i: number, salt: number) => frac(Math.sin(i * 12.9898 + salt * 78.233) * 43758.5453);
+
+// 预解析 tick 帧：跳过整千的那一帧 + 终值揭晓帧
+const TICKS: { f: number; big: boolean }[] = (() => {
+  const out: { f: number; big: boolean }[] = [];
+  let prev = 0;
+  for (let f = 1; f <= COUNT_END; f++) {
+    const v = valueAt(f);
+    if (Math.floor(v / 1000) > Math.floor(prev / 1000)) out.push({ f, big: false });
+    prev = v;
+  }
+  out.push({ f: COUNT_END, big: true }); // 终值揭晓
+  return out;
+})();
+
+const SPARK_LIFE = 18;
+const GRAV = 0.9;
+
+export const CounterTickSparks: React.FC = () => {
+  const frame = useCurrentFrame();
+  const value = valueAt(frame);
+
+  // 终值揭晓弹 1.1x 回落
+  const popScale =
+    1 +
+    0.1 *
+      interpolate(frame, [COUNT_END, COUNT_END + 5, COUNT_END + 16], [0, 1, 0], {
+        easing: Easing.out(Easing.quad),
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp',
+      });
+
+  const TOP_Y = 452; // 数字顶缘（火星发射线）
+  const CX = 960;
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', top: 110, width: '100%', textAlign: 'center' }}>
+        <TitleBlock text="COUNTER TICK SPARKS" size={72} />
+      </div>
+
+      {/* 计数卡 */}
+      <div style={{
+        position: 'absolute', left: 560, top: 400, width: 800, height: 330,
+        background: G.card, border: `2px solid ${G.border}`, borderRadius: 16,
+        boxSizing: 'border-box', boxShadow: '0 4px 14px rgba(0,0,0,0.08)',
+        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 20,
+      }}>
+        <div style={{ height: 14, width: 220, background: G.bar, borderRadius: 7 }} />
+        <div style={{
+          fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 800, fontSize: 168,
+          color: G.ink, letterSpacing: -3, lineHeight: 1, fontVariantNumeric: 'tabular-nums',
+          transform: `scale(${popScale})`,
+        }}>
+          {value.toLocaleString('en-US')}
+        </div>
+        <div style={{ height: 10, width: 150, background: G.line, borderRadius: 5 }} />
+      </div>
+
+      {/* 火星：每个 tick 一簇，寿命耗尽条件卸载 */}
+      {TICKS.map((tick, t) => {
+        const age = frame - tick.f;
+        if (age <= 0 || age >= SPARK_LIFE) return null;
+        const n = tick.big ? 20 : 6 + Math.floor(rnd(t, 21) * 5); // 6–10，终跳 20
+        return Array.from({ length: n }).map((_, i) => {
+          const salt = t * 31 + i;
+          // 初速：向上 9–13px/f，水平 ±4.5px/f 扇形铺开（终跳更宽）
+          const vy = -(9 + rnd(salt, 2) * 4);
+          const vx = (rnd(salt, 3) - 0.5) * (tick.big ? 13 : 9);
+          const x0 = CX + (rnd(salt, 4) - 0.5) * (tick.big ? 560 : 380); // 沿数字顶缘散布
+          const x = x0 + vx * age;
+          const y = TOP_Y + vy * age + 0.5 * GRAV * age * age;
+          const life = 1 - age / SPARK_LIFE;
+          const size = (tick.big ? 7 : 5.5) * (0.4 + 0.6 * life);
+          return (
+            <div key={`${t}-${i}`} style={{
+              position: 'absolute', left: x, top: y, width: size, height: size,
+              borderRadius: size / 2, background: AMBER, opacity: life,
+              boxShadow: `0 0 ${6 * life}px ${AMBER}`,
+            }} />
+          );
+        });
+      })}
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/particle-sand-fill/ParticleSandFill.tsx

@@ -0,0 +1,119 @@
+// particle-sand-fill —— 粒子落斗成柱
+// 图表卡内 4 根柱，每根柱上方"下雨"：14px 方点错峰坠落（重力加速），触堆积面即停
+// + 15% 回弹一下，逐层堆高——堆积高度闭式预解析（第 k 层顶面 = 基线 - (k+1)×粒径，
+// 无真碰撞）。各柱错峰 6f 启动；堆满后粒子面淡出换实体柱 + 顶部数值标签弹出。
+// 结尾全部粒子条件卸载、只剩实体柱 + 标签，真静止 ≥35f。
+// 帧确定性：sin 散列派生每颗出发帧抖动/起点错高，落地帧由高度差闭式反解。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { G, TitleBlock } from '../_fixtures/Fixtures';
+
+const AMBER = '#b45309';
+const frac = (x: number) => x - Math.floor(x);
+const rnd = (i: number, salt: number) => frac(Math.sin(i * 12.9898 + salt * 78.233) * 43758.5453);
+
+const CARD = { x: 460, y: 300, w: 1000, h: 560 };
+const PLOT_BOTTOM = CARD.y + CARD.h - 70; // 堆积地面（卡内基线）
+const GRAIN = 14; // 方点边长（宁大勿小：4px 在 1080p 卡内不可感，加码到 14）
+const PER_LAYER = 9; // 每层 9 颗 → 柱宽 126px
+const BAR_W = GRAIN * PER_LAYER;
+const DROP_FROM = 230; // 距各自落点上方 ~230px 起落
+const GRAV = 1.6; // px/f²
+const STAGGER = 6; // 各柱错峰启动
+const RATE = 0.28; // 颗间出发间隔（帧）——最高柱 216 颗需 ~60f 发完，全局 f120 内收束
+
+const BARS = [
+  { cx: CARD.x + 175, h: 238, label: '238' },
+  { cx: CARD.x + 395, h: 336, label: '336' },
+  { cx: CARD.x + 615, h: 182, label: '182' },
+  { cx: CARD.x + 835, h: 294, label: '294' },
+].map((b) => ({ ...b, layers: Math.round(b.h / GRAIN), n: Math.round(b.h / GRAIN) * PER_LAYER }));
+
+const fallTime = (dist: number) => Math.sqrt((2 * dist) / GRAV);
+const departOf = (bar: number, i: number) => 8 + bar * STAGGER + i * RATE + rnd(i, bar * 7 + 1) * 1.5;
+
+export const ParticleSandFill: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      <div style={{ position: 'absolute', top: 110, width: '100%', textAlign: 'center' }}>
+        <TitleBlock text="PARTICLE SAND FILL" size={72} />
+      </div>
+
+      {/* 图表卡 */}
+      <div style={{
+        position: 'absolute', left: CARD.x, top: CARD.y, width: CARD.w, height: CARD.h,
+        background: G.card, border: `2px solid ${G.border}`, borderRadius: 14,
+        boxSizing: 'border-box', padding: 28, boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
+      }}>
+        <div style={{ height: 14, width: 260, background: G.bar, borderRadius: 7 }} />
+        <div style={{ height: 10, width: 160, background: G.line, borderRadius: 5, marginTop: 10 }} />
+      </div>
+      {/* 基线 */}
+      <div style={{ position: 'absolute', left: CARD.x + 40, top: PLOT_BOTTOM, width: CARD.w - 80, height: 3, background: G.line }} />
+
+      {BARS.map((bar, b) => {
+        const left = bar.cx - BAR_W / 2;
+        // 末颗落地帧（闭式）：末颗落点在堆顶，坠距仍 ≈DROP_FROM
+        const lastLand = departOf(b, bar.n - 1) + fallTime(DROP_FROM);
+        const doneAt = lastLand + 7; // 回弹收完 → 开始交接
+        const solidOp = interpolate(frame, [doneAt, doneAt + 10], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+        const labelScale = interpolate(frame, [doneAt + 6, doneAt + 18], [0, 1], {
+          easing: Easing.out(Easing.back(2.2)),
+          extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+        });
+
+        return (
+          <React.Fragment key={b}>
+            {solidOp > 0 && (
+              <div style={{
+                position: 'absolute', left, top: PLOT_BOTTOM - bar.h,
+                width: BAR_W, height: bar.h, background: b === 1 ? AMBER : G.bar,
+                borderRadius: '6px 6px 0 0', opacity: solidOp,
+              }} />
+            )}
+            {labelScale > 0 && (
+              <div style={{
+                position: 'absolute', left: bar.cx - 70, top: PLOT_BOTTOM - bar.h - 62, width: 140,
+                textAlign: 'center', fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 800,
+                fontSize: 46, color: b === 1 ? AMBER : G.ink,
+                transform: `scale(${labelScale})`,
+              }}>
+                {bar.label}
+              </div>
+            )}
+            {/* 粒子面：交接完成（solidOp=1）即整体条件卸载 → 真静止 */}
+            {solidOp < 1 && Array.from({ length: bar.n }).map((_, i) => {
+              const depart = departOf(b, i);
+              const age = frame - depart;
+              if (age <= 0) return null;
+              const layer = Math.floor(i / PER_LAYER);
+              const col = i % PER_LAYER;
+              const targetTop = PLOT_BOTTOM - (layer + 1) * GRAIN; // 闭式堆积面
+              const startTop = targetTop - DROP_FROM - rnd(i, b * 13 + 3) * 70;
+              const dist = targetTop - startTop;
+              const tLand = fallTime(dist);
+              let top: number;
+              if (age < tLand) {
+                top = startTop + 0.5 * GRAV * age * age;
+              } else {
+                const ba = age - tLand;
+                const bounce = ba < 6 ? Math.sin((ba / 6) * Math.PI) * GRAIN * 2 * 0.15 * (1 + rnd(i, b * 13 + 9)) : 0;
+                top = targetTop - bounce;
+              }
+              const amber = b === 1 || rnd(i, b * 13 + 7) < 0.18;
+              return (
+                <div key={i} style={{
+                  position: 'absolute', left: left + col * GRAIN + 1, top, width: GRAIN - 2, height: GRAIN - 2,
+                  background: amber ? AMBER : G.mid, opacity: 1 - solidOp,
+                  borderRadius: 2,
+                }} />
+              );
+            })}
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+};