hyper-animator-codex 0.7.0 → 0.8.0

package/skills/hyper-animator-codex/references/shotcraft/source/demos/chart-live-moves/UnitDotSwarmRegroupV2.tsx

@@ -0,0 +1,248 @@
+// unit-dot-swarm-regroup-v2 —— 单位点阵重组 v2（批次 6 "改改再看" 重做）
+// 相对 v1 的加码：点数 200→320、点径 7→9；真实叙事语境：图例 "Each dot ≈ 40 customers"，
+// 聚簇时每簇上方浮真标签（Free · 7,210 / Pro · 4,102 / Enterprise · 1,535，Pro 琥珀主角色），
+// 列队成柱时柱底浮真轴标 + 基线；终幕点阵聚成 "12,847"（1/2/,/8/4/7 位图字形），
+// 下方浮 "Total customers"。阶段间 hold 更短（14/38/36f 间隔）、迁徙 spring 更冲
+// （stiffness 110→150、DUR 26→20）。收尾 f126 后真静止 44f。
+// 帧确定性：伪随机全用 sin 散列，无 Math.random / Date.now。
+import React from 'react';
+import { useCurrentFrame, spring, interpolate } from 'remotion';
+import { G, TitleBlock } from '../_fixtures/Fixtures';
+
+const AMBER = '#b45309';
+const FPS = 30;
+const N = 320;
+const DOT_R = 9;
+
+const M1 = 12; // 聚簇
+const M2 = 48; // 列队成柱
+const M3 = 84; // 收拢成 12,847
+const DUR = 20;
+const STAG = 8;
+
+// 帧确定伪随机
+const rnd = (i: number, salt: number): number => {
+  const x = Math.sin(i * 12.9898 + salt * 78.233) * 43758.5453;
+  return x - Math.floor(x);
+};
+
+// —— 阶段 0：散布（星群） ——
+const scatter = (i: number): [number, number] => [
+  300 + rnd(i, 1) * 1320,
+  330 + rnd(i, 2) * 620,
+];
+
+// —— 分组：Free 180 / Pro 102 / Enterprise 38（每点 ≈ 40 customers） ——
+const groupOf = (i: number): number => (i < 180 ? 0 : i < 282 ? 1 : 2);
+const idxInGroup = (i: number): number => (i < 180 ? i : i < 282 ? i - 180 : i - 282);
+const GROUP_N = [180, 102, 38];
+const GROUP_LABEL = ['Free · 7,210', 'Pro · 4,102', 'Enterprise · 1,535'];
+
+// —— 阶段 1：三簇（圆盘散布，sqrt 半径均匀） ——
+const CLUSTER_C: [number, number][] = [
+  [520, 620],
+  [980, 570],
+  [1400, 640],
+];
+const CLUSTER_R = GROUP_N.map((n) => 58 + n * 0.46); // 141 / 105 / 75
+const cluster = (i: number): [number, number] => {
+  const g = groupOf(i);
+  const r = Math.sqrt(rnd(i, 3)) * CLUSTER_R[g];
+  const a = rnd(i, 4) * Math.PI * 2;
+  return [CLUSTER_C[g][0] + r * Math.cos(a), CLUSTER_C[g][1] + r * Math.sin(a)];
+};
+
+// —— 阶段 2：三根柱（8 点宽网格自底向上码放，底边对齐） ——
+const BAR_BASE = 840;
+const BAR_X = [520, 980, 1400];
+const SPACING = 20;
+const bar = (i: number): [number, number] => {
+  const g = groupOf(i);
+  const j = idxInGroup(i);
+  const col = j % 8;
+  const row = Math.floor(j / 8);
+  return [BAR_X[g] + (col - 3.5) * SPACING, BAR_BASE - row * SPACING];
+};
+
+// —— 阶段 3：数字 "12,847" 点阵（5×7 位图 × 2×2 上采样 + 逗号） ——
+const ONE = ['00100', '01100', '00100', '00100', '00100', '00100', '01110'];
+const TWO = ['01110', '10001', '00001', '00010', '00100', '01000', '11111'];
+const EIGHT = ['01110', '10001', '10001', '01110', '10001', '10001', '01110'];
+const FOUR = ['00110', '01010', '10010', '11111', '00010', '00010', '00010'];
+const SEVEN = ['11111', '00001', '00010', '00100', '00100', '00100', '00100'];
+const CELL = 40;
+const SUB = 20;
+const Y0 = 390;
+const cellPts = (x: number, y: number): [number, number][] => [
+  [x, y],
+  [x + SUB, y],
+  [x, y + SUB],
+  [x + SUB, y + SUB],
+];
+const buildDigit = (bitmap: string[], x0: number): [number, number][] => {
+  const out: [number, number][] = [];
+  bitmap.forEach((rowStr, r) => {
+    rowStr.split('').forEach((c, col) => {
+      if (c === '1') out.push(...cellPts(x0 + col * CELL, Y0 + r * CELL));
+    });
+  });
+  return out;
+};
+const DIGIT_PTS: [number, number][] = [
+  ...buildDigit(ONE, 350),
+  ...buildDigit(TWO, 590),
+  // 逗号：基线处两格，微斜的小尾巴
+  ...cellPts(845, Y0 + 5.4 * CELL),
+  ...cellPts(836, Y0 + 6.3 * CELL),
+  ...buildDigit(EIGHT, 920),
+  ...buildDigit(FOUR, 1160),
+  ...buildDigit(SEVEN, 1400),
+];
+const digit = (i: number): [number, number] => {
+  const p = DIGIT_PTS[i % DIGIT_PTS.length];
+  const jx = (rnd(i, 5) - 0.5) * 7;
+  const jy = (rnd(i, 6) - 0.5) * 7;
+  return [p[0] + jx, p[1] + jy];
+};
+
+const lerp = (a: [number, number], b: [number, number], t: number): [number, number] => [
+  a[0] + (b[0] - a[0]) * t,
+  a[1] + (b[1] - a[1]) * t,
+];
+
+const fade = (frame: number, inA: number, inB: number, outA?: number, outB?: number): number => {
+  const fi = interpolate(frame, [inA, inB], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+  if (outA === undefined || outB === undefined) return fi;
+  const fo = interpolate(frame, [outA, outB], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
+  return Math.min(fi, fo);
+};
+
+const LABEL_FONT = 'Helvetica, Arial, sans-serif';
+
+export const UnitDotSwarmRegroupV2: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  const dots = Array.from({ length: N }, (_, i) => {
+    const stag = rnd(i, 7) * STAG;
+    const mig = (start: number) =>
+      spring({
+        frame: frame - start - stag,
+        fps: FPS,
+        config: { damping: 11.5, stiffness: 150, mass: 0.8 },
+        durationInFrames: DUR,
+        durationRestThreshold: 0.0001,
+      });
+    let p = scatter(i);
+    p = lerp(p, cluster(i), mig(M1));
+    p = lerp(p, bar(i), mig(M2));
+    p = lerp(p, digit(i), mig(M3));
+    return p;
+  });
+
+  // 各阶段标签透明度（迁徙完成后浮现，下一次迁徙启动即撤）
+  const clusterLabelOp = fade(frame, 38, 46, M2, M2 + 8);
+  const barLabelOp = fade(frame, 72, 80, M3, M3 + 8);
+  const captionOp = fade(frame, 114, 126);
+
+  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="UNIT DOT SWARM REGROUP V2" size={72} />
+      </div>
+
+      {/* 图例：每点的含义（全程挂角） */}
+      <div
+        style={{
+          position: 'absolute',
+          left: 90,
+          bottom: 70,
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12,
+          fontFamily: LABEL_FONT,
+          fontSize: 24,
+          fontWeight: 600,
+          color: G.mid,
+        }}
+      >
+        <div style={{ width: 18, height: 18, borderRadius: 9, background: G.mid }} />
+        Each dot ≈ 40 customers
+      </div>
+
+      <svg width={1920} height={1080} style={{ position: 'absolute', inset: 0 }}>
+        {dots.map((p, i) => (
+          <circle key={i} cx={p[0]} cy={p[1]} r={DOT_R} fill={groupOf(i) === 1 ? AMBER : groupOf(i) === 2 ? G.ink : G.mid} />
+        ))}
+      </svg>
+
+      {/* 阶段 1：簇标签（真人数） */}
+      {clusterLabelOp > 0 &&
+        CLUSTER_C.map((c, g) => (
+          <div
+            key={`cl${g}`}
+            style={{
+              position: 'absolute',
+              left: c[0] - 200,
+              top: c[1] - CLUSTER_R[g] - 66,
+              width: 400,
+              textAlign: 'center',
+              fontFamily: LABEL_FONT,
+              fontSize: 30,
+              fontWeight: 700,
+              color: g === 1 ? AMBER : G.ink,
+              opacity: clusterLabelOp,
+            }}
+          >
+            {GROUP_LABEL[g]}
+          </div>
+        ))}
+
+      {/* 阶段 2：柱底基线 + 真轴标 */}
+      {barLabelOp > 0 && (
+        <>
+          <div style={{ position: 'absolute', left: 380, width: 1160, top: BAR_BASE + 16, height: 3, background: G.bar, opacity: barLabelOp }} />
+          {BAR_X.map((x, g) => (
+            <div
+              key={`bl${g}`}
+              style={{
+                position: 'absolute',
+                left: x - 150,
+                top: BAR_BASE + 30,
+                width: 300,
+                textAlign: 'center',
+                fontFamily: LABEL_FONT,
+                fontSize: 28,
+                fontWeight: 700,
+                color: g === 1 ? AMBER : G.mid,
+                opacity: barLabelOp,
+              }}
+            >
+              {['Free', 'Pro', 'Enterprise'][g]}
+            </div>
+          ))}
+        </>
+      )}
+
+      {/* 终幕：数字下方真文案 */}
+      {captionOp > 0 && (
+        <div
+          style={{
+            position: 'absolute',
+            left: 0,
+            width: 1920,
+            top: Y0 + 7 * CELL + 60,
+            textAlign: 'center',
+            fontFamily: LABEL_FONT,
+            fontSize: 34,
+            fontWeight: 600,
+            color: G.mid,
+            opacity: captionOp,
+            letterSpacing: 2,
+          }}
+        >
+          Total customers
+        </div>
+      )}
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/circle-match-iris/CircleMatchIris.tsx

@@ -0,0 +1,124 @@
+// 圆心匹配光圈切(match-cut × iris-reveal 组合):
+// 帧 0–30:景 A(列表面板)hold,第 2 行 44px 圆形头像做两次脉冲 + 扩散光环提示"看这里";
+// 帧 30–75:景 B 以 clip-path: circle(r at CX CY) 从 22px 炸开到 2100px(Easing.inOut(cubic)),
+//   景 B 是深色圆环图表页,圆环半径同步从 22px 长到 170px——在光圈吃满全屏前就"接住"头像的圆;
+// 帧 45–100:圆环描边 sweep 到 78%,中央大数字随之浮现计数;帧 100–140 全属性静止收尾(≥35f)。
+// 命门:两景的圆严格同心——CX/CY 写死为 FakeDashboard B 第 2 行头像的屏幕坐标常量。
+import React from 'react';
+import { useCurrentFrame, interpolate, Easing } from 'remotion';
+import { FakeDashboard, G } from '../_fixtures/Fixtures';
+
+// FakeDashboard variant B 第 2 行左侧 44px 头像的圆心(手算自 fixture 布局)
+const CX = 308;
+const CY = 384.8;
+
+export const CircleMatchIris: React.FC = () => {
+  const f = useCurrentFrame();
+
+  // ---- 景 A:头像脉冲(帧 0–30,两次呼吸) ----
+  const pulseT = Math.min(f, 30) / 30;
+  const scale = f < 30 ? 1 + 0.45 * Math.abs(Math.sin(pulseT * Math.PI * 2)) : 1;
+  // 两道扩散光环
+  const waves = [0, 14].map((start) => {
+    const p = interpolate(f, [start, start + 16], [0, 1], {
+      extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+    });
+    return { r: 22 + p * 40, o: f < start + 16 ? 0.85 * (1 - p) : 0 };
+  });
+
+  // ---- 光圈:景 B 从同一圆心炸开 ----
+  const irisR = interpolate(f, [30, 75], [22, 2100], {
+    easing: Easing.inOut(Easing.cubic),
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+
+  // ---- 景 B 圆环:半径从 22 长到 170,"接住"头像的圆 ----
+  const ringR = interpolate(f, [30, 70], [22, 170], {
+    easing: Easing.inOut(Easing.cubic),
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+  const ringW = interpolate(f, [30, 70], [12, 40], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+  // 描边 sweep 到 78%
+  const sweep = interpolate(f, [45, 100], [0, 0.78], {
+    easing: Easing.out(Easing.cubic),
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+  const circ = 2 * Math.PI * ringR;
+  const num = Math.round(sweep * 100);
+  const numOpacity = interpolate(f, [68, 88], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+  const furnitureOpacity = interpolate(f, [60, 85], [0, 1], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  });
+
+  return (
+    <div style={{ width: 1920, height: 1080, position: 'relative', overflow: 'hidden', background: G.bg }}>
+      {/* ===== 景 A:列表面板 ===== */}
+      <FakeDashboard variant="B" />
+      {/* 白色补丁盖住 fixture 自带的圆角方块,再叠真正的圆形头像 */}
+      <div style={{ position: 'absolute', left: CX - 23, top: CY - 23, width: 46, height: 46, background: G.card }} />
+      <div style={{
+        position: 'absolute', left: CX - 22, top: CY - 22, width: 44, height: 44,
+        borderRadius: 22, background: G.mid, border: `3px solid ${G.ink}`,
+        boxSizing: 'border-box', transform: `scale(${scale})`,
+      }} />
+      {/* 脉冲扩散光环 */}
+      <svg width={1920} height={1080} style={{ position: 'absolute', left: 0, top: 0 }}>
+        {waves.map((w, i) => (
+          <circle key={i} cx={CX} cy={CY} r={w.r} fill="none" stroke={G.ink} strokeWidth={4} opacity={w.o} />
+        ))}
+      </svg>
+
+      {/* ===== 景 B:深色圆环图表页,从同一圆心以光圈长出 ===== */}
+      {f >= 30 && (
+        <div style={{
+          position: 'absolute', left: 0, top: 0, width: 1920, height: 1080,
+          background: G.ink,
+          clipPath: `circle(${irisR}px at ${CX}px ${CY}px)`,
+        }}>
+          {/* 圆环 donut:圆心与头像严格同点 */}
+          <svg width={1920} height={1080} style={{ position: 'absolute', left: 0, top: 0 }}>
+            {/* 底轨 */}
+            <circle cx={CX} cy={CY} r={ringR} fill="none" stroke="#5a5a58" strokeWidth={ringW} />
+            {/* sweep 弧,从正上方起 */}
+            <circle
+              cx={CX} cy={CY} r={ringR} fill="none" stroke="#ececea"
+              strokeWidth={ringW} strokeLinecap="round"
+              strokeDasharray={`${sweep * circ} ${circ}`}
+              transform={`rotate(-90 ${CX} ${CY})`}
+            />
+          </svg>
+          {/* 中央大数字 */}
+          <div style={{
+            position: 'absolute', left: CX - 150, top: CY - 80, width: 300, height: 160,
+            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+            opacity: numOpacity,
+          }}>
+            <div style={{ fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 800, fontSize: 96, color: '#f2f2f0', letterSpacing: -2 }}>
+              {num}%
+            </div>
+            <div style={{ marginTop: 6, height: 12, width: 130, background: '#6a6a68', borderRadius: 6 }} />
+          </div>
+          {/* 右侧页面家具:标题 + 统计条,证明这是一整页 */}
+          <div style={{ position: 'absolute', left: 680, top: 260, opacity: furnitureOpacity, display: 'flex', flexDirection: 'column', gap: 30 }}>
+            <div style={{ height: 34, width: 520, background: '#c2c2c0', borderRadius: 10 }} />
+            <div style={{ height: 16, width: 780, background: '#5a5a58', borderRadius: 8 }} />
+            <div style={{ height: 16, width: 640, background: '#5a5a58', borderRadius: 8 }} />
+            <div style={{ height: 16, width: 700, background: '#5a5a58', borderRadius: 8 }} />
+            <div style={{ display: 'flex', gap: 28, marginTop: 24 }}>
+              {[0, 1, 2].map((i) => (
+                <div key={i} style={{ width: 240, height: 150, background: '#454543', border: '2px solid #5a5a58', borderRadius: 14, padding: 20, boxSizing: 'border-box', display: 'flex', flexDirection: 'column', gap: 12 }}>
+                  <div style={{ height: 12, width: `${55 + i * 12}%`, background: '#8f8f8d', borderRadius: 6 }} />
+                  <div style={{ height: 30, width: '45%', background: '#c2c2c0', borderRadius: 8, marginTop: 'auto' }} />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/cloner-depth-echo/ClonerDepthEcho.tsx

@@ -0,0 +1,90 @@
+// cloner-depth-echo —— 克隆纵队
+// 一张主卡瞬间"复印"出 7 个克隆体沿 Z 轴向后等距排开（间隔 120px、
+// opacity 100%→20% 衰减、整队 8° rotateY 侧视），12f 错峰弹出；停 25f；
+// 全部克隆加速吸回本体合一（10f ease-in），合体瞬间本体弹 1.08x。
+// 收尾 f120 后真静止 40f。全部 frame 派生。
+import React from 'react';
+import { useCurrentFrame, interpolate, spring, Easing } from 'remotion';
+import { G, Card, TitleBlock } from '../_fixtures/Fixtures';
+
+const FPS = 30;
+const N = 7; // 克隆数
+const GAP_Z = 120;
+
+const SPREAD_START = 18; // 排开起始帧
+const HOLD_END = 18 + 12 + 25; // f55：停留结束
+const MERGE_DUR = 10; // 吸回时长
+
+export const ClonerDepthEcho: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // 吸回进度（全体同步，ease-in 加速）
+  const merge = interpolate(frame, [HOLD_END, HOLD_END + MERGE_DUR], [0, 1], {
+    easing: Easing.in(Easing.cubic),
+    extrapolateLeft: 'clamp',
+    extrapolateRight: 'clamp',
+  });
+
+  // 合体瞬间本体弹一下
+  const popS = spring({
+    frame: frame - (HOLD_END + MERGE_DUR),
+    fps: FPS,
+    config: { damping: 11, stiffness: 200, mass: 0.7 },
+    durationInFrames: 18,
+  });
+  const heroScale = frame >= HOLD_END + MERGE_DUR ? 1 + 0.08 * Math.sin(popS * Math.PI) : 1;
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, overflow: 'hidden', position: 'relative' }}>
+      <div style={{ position: 'absolute', top: 100, width: '100%', textAlign: 'center' }}>
+        <TitleBlock text="CLONER DEPTH ECHO" size={72} />
+      </div>
+
+      <div style={{ position: 'absolute', inset: 0, perspective: 1600, perspectiveOrigin: '58% 46%' }}>
+        <div
+          style={{
+            position: 'absolute',
+            left: 960 - 260,
+            top: 540 - 170 + 40,
+            transformStyle: 'preserve-3d',
+            transform: 'rotateY(16deg)',
+          }}
+        >
+          {/* 克隆队列：从后往前渲染保证遮挡正确 */}
+          {Array.from({ length: N }, (_, k) => N - k).map((idx) => {
+            // idx 1..N，idx 越大越靠后
+            const spread = spring({
+              frame: frame - SPREAD_START - (idx - 1) * 1.6,
+              fps: FPS,
+              config: { damping: 14, stiffness: 160, mass: 0.8 },
+              durationInFrames: 16,
+            });
+            const p = spread * (1 - merge);
+            const z = -GAP_Z * idx * p;
+            // 斜向错位让纵队肉眼可见（像侧看一列纵队）
+            const dx = 64 * idx * p;
+            const dy = -34 * idx * p;
+            const op = (1 - (idx / N) * 0.8) * spread * (1 - merge);
+            if (op <= 0.005) return null;
+            return (
+              <div
+                key={idx}
+                style={{
+                  position: 'absolute',
+                  transform: `translate3d(${dx.toFixed(2)}px, ${dy.toFixed(2)}px, ${z.toFixed(2)}px)`,
+                  opacity: op,
+                }}
+              >
+                <Card w={520} h={340} seed={3} />
+              </div>
+            );
+          })}
+          {/* 本体 */}
+          <div style={{ position: 'absolute', transform: `translateZ(0px) scale(${heroScale.toFixed(4)})` }}>
+            <Card w={520} h={340} seed={3} style={{ boxShadow: '0 10px 36px rgba(31,28,23,0.22)' }} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/skills/hyper-animator-codex/references/shotcraft/source/demos/collab-cursor-moves/CursorCastEnsemble.tsx

@@ -0,0 +1,136 @@
+// cursor-cast-ensemble —— figma 0:05 (cursor-badge-cast) + miro 全片 cursor-ensemble-ambience
+// 5 枚具名彩色光标从画外飞入（弹簧减速+名牌淡入），落位后在灰阶画布上持续漂移、
+// 指向、聚拢；灰阶便签当环境道具；其中一枚(Rita)在便签上实时打字补全一行文本
+// （pitch collaborator-cameo 的打字戏并入）。
+import React from 'react';
+import { useCurrentFrame, spring, interpolate } from 'remotion';
+import { 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 FPS = 30;
+const clamp01 = (t: number) => Math.min(1, Math.max(0, t));
+const easeInOut = (t: number) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2);
+
+type Actor = {
+  name: string; color: string;
+  from: [number, number]; home: [number, number];
+  delay: number; phase: number;
+};
+
+const ACTORS: Actor[] = [
+  { name: 'Lisa', color: '#4C8DF6', from: [-160, 200], home: [430, 330], delay: 0, phase: 0.0 },
+  { name: 'Lucas', color: '#2FBF71', from: [2080, 160], home: [1370, 290], delay: 5, phase: 1.7 },
+  { name: 'Marta', color: '#F2994A', from: [-160, 900], home: [560, 760], delay: 9, phase: 3.1 },
+  { name: 'Niko', color: '#4C8DF6', from: [2080, 950], home: [1420, 780], delay: 13, phase: 4.4 },
+  { name: 'Rita', color: '#2FBF71', from: [900, -180], home: [960, 545], delay: 17, phase: 5.6 },
+];
+
+const TYPED = 'Our customers love it';
+
+const CursorActor: React.FC<{ x: number; y: number; a: Actor; badge: number; scale?: number }> = ({
+  x, y, a, badge, scale = 2.1,
+}) => (
+  <div style={{ position: 'absolute', left: x, top: y, transform: `scale(${scale})`, transformOrigin: '0 0', zIndex: 10 }}>
+    <svg width={30} height={44} viewBox="0 0 13.5 20" style={{ display: 'block', overflow: 'visible' }}>
+      <path d="M0.5 0.5 L0.5 17.2 L4.7 13.4 L7.3 19.5 L10 18.3 L7.4 12.3 L13 12.3 Z"
+        fill={a.color} stroke="#ffffff" strokeWidth={1.1} strokeLinejoin="round" />
+    </svg>
+    <div style={{
+      position: 'absolute', left: 24, top: 40, whiteSpace: 'nowrap',
+      background: a.color, color: '#fff', borderRadius: 7, padding: '4px 11px',
+      fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 700, fontSize: 14,
+      opacity: badge, transform: `translateY(${(1 - badge) * 10}px)`,
+    }}>
+      {a.name}
+    </div>
+  </div>
+);
+
+export const CursorCastEnsemble: React.FC = () => {
+  const f = useCurrentFrame();
+  const rnd = mulberry32(88);
+  // 便签的固定随机旋转
+  const noteRots = Array.from({ length: 4 }).map(() => (rnd() - 0.5) * 8);
+
+  // 聚拢时刻：90 帧后所有光标向中央便签聚拢
+  const gatherT = easeInOut(clamp01((f - 92) / 26));
+  const GATHER: [number, number][] = [
+    [770, 430], [1160, 420], [800, 640], [1130, 650], [960, 545],
+  ];
+
+  // 打字进度（Rita 落位后开始，60–130 帧）
+  const typedCount = Math.floor(interpolate(f, [58, 118], [0, TYPED.length], {
+    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
+  }));
+  const caretOn = Math.floor(f / 8) % 2 === 0;
+
+  return (
+    <div style={{ width: 1920, height: 1080, background: G.bg, position: 'relative', overflow: 'hidden' }}>
+      {/* 点阵无限画布底 */}
+      <div style={{
+        position: 'absolute', inset: 0,
+        backgroundImage: `radial-gradient(${G.line} 2.4px, transparent 2.4px)`,
+        backgroundSize: '46px 46px',
+      }} />
+      {/* 灰阶便签环境道具 */}
+      {[
+        { x: 250, y: 170, s: 1 }, { x: 1490, y: 140, s: 2 },
+        { x: 210, y: 700, s: 3 }, { x: 1530, y: 690, s: 4 },
+      ].map((n, i) => (
+        <div key={i} style={{
+          position: 'absolute', left: n.x, top: n.y, width: 230, height: 210,
+          background: '#e6e6e2', border: `2px solid ${G.border}`, borderRadius: 6,
+          boxShadow: '0 4px 14px rgba(0,0,0,0.10)', transform: `rotate(${noteRots[i]}deg)`,
+          padding: 18, boxSizing: 'border-box', display: 'flex', flexDirection: 'column', gap: 12,
+        }}>
+          <div style={{ height: 12, width: '70%', background: G.bar, borderRadius: 6 }} />
+          <div style={{ height: 10, width: '86%', background: G.line, borderRadius: 5 }} />
+          <div style={{ height: 10, width: '58%', background: G.line, borderRadius: 5 }} />
+        </div>
+      ))}
+      {/* 中央大便签：Rita 打字的舞台 */}
+      <div style={{
+        position: 'absolute', left: 660, top: 420, width: 600, height: 240,
+        background: '#ffffff', border: `2px solid ${G.border}`, borderRadius: 12,
+        boxShadow: '0 6px 22px rgba(0,0,0,0.12)', padding: 30, boxSizing: 'border-box',
+      }}>
+        <div style={{ height: 14, width: 180, background: G.bar, borderRadius: 7, marginBottom: 24 }} />
+        <div style={{
+          fontFamily: 'Helvetica, Arial, sans-serif', fontWeight: 700, fontSize: 44,
+          color: G.ink, letterSpacing: -0.5, minHeight: 56,
+        }}>
+          {TYPED.slice(0, typedCount)}
+          <span style={{
+            display: 'inline-block', width: 4, height: 44, background: '#2FBF71',
+            marginLeft: 3, verticalAlign: 'middle',
+            opacity: f > 50 && typedCount < TYPED.length ? (caretOn ? 1 : 0.15) : 0,
+          }} />
+        </div>
+      </div>
+
+      {/* 五枚光标 */}
+      {ACTORS.map((a, i) => {
+        const s = spring({ frame: f - a.delay, fps: FPS, config: { damping: 15, stiffness: 90, mass: 0.9 } });
+        let x = interpolate(s, [0, 1], [a.from[0], a.home[0]]);
+        let y = interpolate(s, [0, 1], [a.from[1], a.home[1]]);
+        // 落位后持续漂移 + 偶尔"指向"性的小冲刺
+        const settled = clamp01((f - a.delay - 26) / 10);
+        const driftX = Math.sin(f * 0.055 + a.phase) * 46 + Math.sin(f * 0.021 + a.phase * 2) * 30;
+        const driftY = Math.cos(f * 0.047 + a.phase * 1.3) * 38 + Math.cos(f * 0.017 + a.phase) * 24;
+        x += driftX * settled * (1 - gatherT * 0.55);
+        y += driftY * settled * (1 - gatherT * 0.55);
+        // 聚拢
+        x = interpolate(gatherT, [0, 1], [x, GATHER[i][0] + driftX * 0.25]);
+        y = interpolate(gatherT, [0, 1], [y, GATHER[i][1] + driftY * 0.25]);
+        const badge = clamp01((f - a.delay - 12) / 12);
+        return <CursorActor key={a.name} x={x} y={y} a={a} badge={badge} />;
+      })}
+    </div>
+  );
+};