dsh-drawai 0.3.3 → 0.4.0

package/lib/motion/shotcraft/upstream/demos/data/chart-live-moves/OscilloscopeStreamV2.tsx

@@ -0,0 +1,290 @@
+// oscilloscope-stream-v2 —— 示波流线：曲线写入点钉在右侧上下起伏，旧数据向左流出画；
+// 中途一次突发尖峰（振幅 2.2×，读数跳大变强调色），最后刹停真静止。
+//
+// 第二轮重设计（深蓝夜 · 满版示波监控墙）：
+// - look = midnight（深蓝夜 · 电光蓝），事件色单独给一抹珊瑚红（只给尖峰）。不再是"卡片里的小图"：
+//   整个画面就是一块示波器屏——1728×520 的满版绘图区，示波器式刻度网（主格实线 + 次格点阵 + 中心十字刻度），
+//   电光蓝磷光迹线（实线 + 两层泛光），写入头在 86% 处：竖向扫描线 + 光斑 + 一条横向读数参考线。
+// - 文字层级：左上 video-shotcraft 标志 + 字标眉题（渲染农场 · 帧/秒）+ LIVE 灯、168px 实时读数（每 3 帧采样保持，像真的仪表）；
+//   右上 p99 延迟 / 错误率两枚副读数，跟着尖峰一起跳。
+// - 尖峰事件：写入头经过时迹线该段整段变珊瑚红并加粗，大读数放大 + 变珊瑚红，p99 跳到 3 位数；
+//   写完后峰顶钉一枚「Burst」事件标签 + 竖向落线，随流向左带走。
+// - 刹停：流速 out-cubic 刹车（初速与流速相同，无速度跳变），LIVE → PAUSED，写入头光斑熄灭；
+//   之后相机缓推 3% 对准尖峰（有明确目标与落点），真静止 hold。
+//
+// 时间表（30fps，共 165f）：
+//   0–16    屏幕点亮：刻度网从中心展开、迹线已在流动（直播感，第 1 帧即有内容）、读数/眉题浮入
+//   0–104   匀速流动 8px/f（采样窗平移是机械语义，刻意匀速）
+//   46–68   尖峰写入（读数/副读数随包络跳变）；~70f 事件标签 overshoot 弹出
+//   104–118 刹停 14f（out-cubic）
+//   118–165 hold 47f：相机 1 → 1.03 缓推向尖峰（smooth），其余静止
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame } from 'remotion';
+import { EASE, FONT, mix, ramp } from '../../_fixtures/Polish';
+import { LOOKS, Stage, alpha, type } from '../../_fixtures/Look';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const OSCILLOSCOPE_STREAM_V2_DURATION = 165;
+
+const L = LOOKS.midnight;
+const TRACE = L.accent; // 电光蓝
+const HOT = '#ff6b5b'; // 事件色：珊瑚红（只给尖峰）
+
+// 绘图区
+const PX = 96;
+const PW = 1728;
+const PY = 404;
+const PH = 520;
+const HEAD = Math.round(PW * 0.86); // 写入头位置（绘图区内 x）
+
+const SPEED = 8;
+const FREEZE0 = 104;
+const FREEZE1 = 118;
+const OFFSET = 1400; // 世界坐标偏移：第 0 帧时窗口里已有完整历史
+
+// 有效时间（世界 x）：匀速，FREEZE 段 out-cubic 刹停；刹车距离 = SPEED×dur/3（初速连续）
+const worldAt = (f: number) => {
+  if (f <= FREEZE0) return OFFSET + f * SPEED;
+  const brake = (SPEED * (FREEZE1 - FREEZE0)) / 3;
+  return OFFSET + FREEZE0 * SPEED + brake * ramp(f, FREEZE0, FREEZE1 - FREEZE0, (x) => 1 - Math.pow(1 - x, 3));
+};
+
+// 尖峰：写入头在 f46 起经过 worldX [S0, S0+SW]；主峰是一记尖锐的高斯脉冲（+2.2× 常态振幅），
+// 前后各带一个小的前兆 / 余震，峰段内原波形抖动加倍
+const S0 = OFFSET + 46 * SPEED;
+const SW = 176;
+const SC = S0 + SW * 0.5;
+const gauss = (x: number, c: number, w: number) => Math.exp(-Math.pow((x - c) / w, 2));
+const bump = (x: number) => 2.2 * gauss(x, SC, 26) + 0.45 * gauss(x, SC - 62, 18) + 0.6 * gauss(x, SC + 48, 20);
+const burstK = (x: number) => Math.min(1, bump(x) / 2.2);
+const wave = (x: number) =>
+  0.34 * Math.sin(x * 0.019) + 0.27 * Math.sin(x * 0.047 + 1.7) + 0.18 * Math.sin(x * 0.011 + 4.2) + 0.11 * Math.sin(x * 0.083 + 2.3);
+const inSpike = (x: number) => gauss(x, SC, SW * 0.45);
+const signal = (x: number) => wave(x) * (1 + 0.6 * inSpike(x)) + bump(x);
+const valueOf = (x: number) => 1350 + signal(x) * 560; // fps（渲染帧 / 秒）
+const MAXV = 3000;
+const yOf = (x: number) => PH - (valueOf(x) / MAXV) * PH;
+
+const PEAK_X = (() => {
+  let best = S0;
+  for (let x = S0; x <= S0 + SW; x += 0.5) if (signal(x) > signal(best)) best = x;
+  return best;
+})();
+
+const fmt = (n: number) => Math.round(n).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+const hexMix = (a: string, b: string, t: number) => {
+  const p = (h: string) => [1, 3, 5].map((i) => parseInt(h.slice(i, i + 2), 16));
+  const A = p(a);
+  const B = p(b);
+  return `rgb(${A.map((v, i) => Math.round(v + (B[i] - v) * t)).join(',')})`;
+};
+
+export const OscilloscopeStreamV2: React.FC = () => {
+  const frame = useCurrentFrame();
+  const T = worldAt(frame); // 写入头的世界 x
+  const worldOf = (px: number) => T - (HEAD - px);
+
+  // 迹线采样（写入头以左）
+  const STEP = 4;
+  const pts: Array<[number, number, number]> = [];
+  for (let px = 0; px <= HEAD; px += STEP) pts.push([px, yOf(worldOf(px)), worldOf(px)]);
+  if (pts[pts.length - 1][0] !== HEAD) pts.push([HEAD, yOf(T), T]);
+  const toD = (a: Array<[number, number, number]>) => a.map(([x, y], i) => `${i ? 'L' : 'M'}${x.toFixed(1)},${y.toFixed(1)}`).join(' ');
+  const lineD = toD(pts);
+  const areaD = `${lineD} L${HEAD},${PH} L0,${PH} Z`;
+  const spike = pts.filter(([, , w]) => w >= S0 + 10 && w <= Math.min(T, S0 + SW - 10));
+  const spikeD = spike.length > 1 ? toD(spike) : '';
+  const headY = yOf(T);
+  const freshD = toD(pts.filter(([x]) => x >= HEAD - 284));
+
+  // 读数：每 3 帧采样保持（真仪表的刷新感）；尖峰包络驱动放大 + 变色
+  const held = worldAt(Math.floor(frame / 3) * 3);
+  // 读数热度：写入头附近 ±40px 的尖峰强度（峰前两帧就开始升温，峰后缓降）
+  const spikeK = Math.max(burstK(T), 0.8 * burstK(T - 30), 0.5 * burstK(T - 60));
+  const hot = EASE.out(Math.min(1, spikeK * 1.6));
+  const readScale = 1 + 0.08 * spikeK;
+  const p99 = Math.round(42 + 84 * spikeK + 2 * Math.sin(frame / 5));
+  const errRate = (0.02 + 0.12 * spikeK).toFixed(2);
+
+  const live = 1 - ramp(frame, FREEZE0, FREEZE1 - FREEZE0, EASE.out);
+  const pulse = 0.5 + 0.5 * Math.cos((frame / 24) * Math.PI * 2);
+
+  // 事件标签：写入头越过峰顶后弹出，钉在峰顶随流向左
+  const peakPx = HEAD - (T - PEAK_X);
+  const peakY = yOf(PEAK_X);
+  const passF = (PEAK_X - OFFSET) / SPEED;
+  const tagIn = ramp(frame, passF + 3, 14, EASE.overshoot);
+
+  // 屏幕点亮
+  const on = ramp(frame, 0, 16, EASE.snappy);
+  const headIn = ramp(frame, 2, 16, EASE.out);
+
+  // 刹停后缓推向尖峰
+  const push = ramp(frame, FREEZE1 - 4, 165 - FREEZE1 + 4, EASE.smooth);
+  const cam = mix(1, 1.025, push);
+  const camOX = PX + mix(HEAD, peakPx, 0.6);
+  const camOY = PY + PH * 0.45;
+
+  const gridV = 12;
+  const gridH = 6;
+
+  return (
+    <AbsoluteFill style={{ background: L.bg[1], overflow: 'hidden' }}>
+      <Stage look={L} keyLight={{ x: 0.62, y: 0.55 }} fill={{ x: 0.08, y: 0.1 }} intensity={0.8} breathe={0.4} />
+
+      <div style={{ position: 'absolute', inset: 0, transform: `scale(${cam.toFixed(5)})`, transformOrigin: `${camOX}px ${camOY}px` }}>
+        {/* 眉题 + LIVE */}
+        <div style={{ position: 'absolute', left: PX, top: 92, display: 'flex', alignItems: 'center', gap: 22, opacity: headIn }}>
+          <span style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            <ShotcraftMark size={40} tone="dark" />
+            <span style={{ ...type(32, 700), fontFamily: BRAND.font, letterSpacing: '0.03em', color: L.ink }}>{BRAND.name}</span>
+          </span>
+          <span style={{ ...type(32, 500, { caps: true }), color: L.ink3 }}>render-farm · prod · fps</span>
+          <span style={{
+            display: 'flex', alignItems: 'center', gap: 10, padding: '6px 16px 6px 12px', borderRadius: 99,
+            background: live > 0.5 ? alpha(L.accent2, 0.12) : alpha('#ffffff', 0.06),
+            border: `1px solid ${live > 0.5 ? alpha(L.accent2, 0.35) : alpha('#ffffff', 0.12)}`,
+            ...type(26, 750, { caps: true }), color: live > 0.5 ? L.accent2 : L.ink3,
+          }}>
+            <span style={{
+              width: 12, height: 12, borderRadius: 6, background: live > 0.5 ? L.accent2 : L.ink3,
+              boxShadow: live > 0.5 ? `0 0 0 ${(3 + 5 * pulse).toFixed(1)}px ${alpha(L.accent2, 0.25 * (1 - pulse))}` : 'none',
+            }} />
+            {live > 0.5 ? 'Live' : 'Paused'}
+          </span>
+        </div>
+
+        {/* 大读数 */}
+        <div style={{
+          position: 'absolute', left: PX - 8, top: 140, display: 'flex', alignItems: 'baseline', gap: 22,
+          transform: `scale(${readScale.toFixed(4)})`, transformOrigin: 'left bottom', opacity: headIn,
+        }}>
+          <span style={{
+            ...type(176, 700), color: hexMix('#f2f5ff', HOT, hot),
+            textShadow: hot > 0.02 ? `0 0 40px ${alpha(HOT, 0.35 * hot)}` : undefined,
+          }}>{fmt(valueOf(held))}</span>
+          <span style={{ ...type(48, 500), color: hexMix('#a9b4d0', HOT, hot) }}>fps</span>
+        </div>
+
+        {/* 右上副读数 */}
+        <div style={{ position: 'absolute', right: 1920 - PX - PW, top: 150, display: 'flex', gap: 72, opacity: ramp(frame, 6, 14, EASE.out) }}>
+          {[
+            { k: 'p99 frame time', v: `${p99}`, u: 'ms', hotK: hot },
+            { k: 'Failed jobs', v: errRate, u: '%', hotK: hot * 0.8 },
+          ].map((s) => (
+            <div key={s.k} style={{ textAlign: 'right' }}>
+              <div style={{ ...type(32, 500), color: L.ink3 }}>{s.k}</div>
+              <div style={{ marginTop: 8 }}>
+                <span style={{ ...type(84, 650), color: hexMix('#f2f5ff', HOT, s.hotK) }}>{s.v}</span>
+                <span style={{ ...type(36, 500), color: L.ink2, marginLeft: 8 }}>{s.u}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* 示波屏 */}
+        <div style={{ position: 'absolute', left: PX, top: PY, width: PW, height: PH }}>
+          <svg width={PW} height={PH + 80} style={{ position: 'absolute', left: 0, top: 0, overflow: 'visible' }}>
+            <defs>
+              <linearGradient id="osArea" x1="0" y1="0" x2="0" y2={PH} gradientUnits="userSpaceOnUse">
+                <stop offset="0" stopColor={TRACE} stopOpacity={0.3} />
+                <stop offset="1" stopColor={TRACE} stopOpacity={0} />
+              </linearGradient>
+              <linearGradient id="osFade" x1="0" y1="0" x2={PW} y2="0" gradientUnits="userSpaceOnUse">
+                <stop offset="0" stopColor="#fff" stopOpacity={0} />
+                <stop offset="0.14" stopColor="#fff" stopOpacity={1} />
+                <stop offset="1" stopColor="#fff" stopOpacity={1} />
+              </linearGradient>
+              <mask id="osMask" maskUnits="userSpaceOnUse" x={-20} y={-200} width={PW + 40} height={PH + 300}>
+                <rect x={-20} y={-200} width={PW + 40} height={PH + 300} fill="url(#osFade)" />
+              </mask>
+              <filter id="osGlowA" x="-10%" y="-30%" width="120%" height="160%"><feGaussianBlur stdDeviation="5" /></filter>
+              <filter id="osGlowB" x="-10%" y="-40%" width="120%" height="180%"><feGaussianBlur stdDeviation="16" /></filter>
+              <radialGradient id="osHead">
+                <stop offset="0" stopColor="#ffffff" stopOpacity={1} />
+                <stop offset="0.25" stopColor={hexMix('#5b8cff', HOT, hot)} stopOpacity={0.8} />
+                <stop offset="1" stopColor={hexMix('#5b8cff', HOT, hot)} stopOpacity={0} />
+              </radialGradient>
+              <linearGradient id="osFresh" x1={HEAD - 280} y1="0" x2={HEAD} y2="0" gradientUnits="userSpaceOnUse">
+                <stop offset="0" stopColor="#ffffff" stopOpacity={0} />
+                <stop offset="1" stopColor="#ffffff" stopOpacity={0.95} />
+              </linearGradient>
+            </defs>
+
+            {/* 刻度网：主格线 + 次格点阵 + 中心十字刻度；从中心展开 */}
+            <g opacity={on}>
+              {Array.from({ length: gridV + 1 }, (_, i) => {
+                const x = (i / gridV) * PW;
+                const reach = (PH / 2) * on;
+                return <line key={`v${i}`} x1={x} x2={x} y1={PH / 2 - reach} y2={PH / 2 + reach} stroke={L.accent} strokeOpacity={i === 0 || i === gridV ? 0.22 : 0.1} strokeWidth={1.2} />;
+              })}
+              {Array.from({ length: gridH + 1 }, (_, i) => {
+                const y = (i / gridH) * PH;
+                const reach = (PW / 2) * on;
+                return <line key={`h${i}`} x1={PW / 2 - reach} x2={PW / 2 + reach} y1={y} y2={y} stroke={L.accent} strokeOpacity={i === 0 || i === gridH ? 0.22 : 0.1} strokeWidth={1.2} />;
+              })}
+              {Array.from({ length: gridV * 5 + 1 }, (_, i) => (
+                <line key={`tk${i}`} x1={(i / (gridV * 5)) * PW} x2={(i / (gridV * 5)) * PW} y1={PH / 2 - (i % 5 ? 5 : 10)} y2={PH / 2 + (i % 5 ? 5 : 10)} stroke={L.accent} strokeOpacity={0.28} strokeWidth={1.2} />
+              ))}
+            </g>
+
+            {/* 迹线：面积 + 两层泛光 + 实线（左端渐隐出画） */}
+            <g mask="url(#osMask)">
+              <path d={areaD} fill="url(#osArea)" />
+              <path d={lineD} fill="none" stroke={TRACE} strokeWidth={10} opacity={0.5} filter="url(#osGlowB)" />
+              <path d={lineD} fill="none" stroke={TRACE} strokeWidth={5} opacity={0.75} filter="url(#osGlowA)" />
+              <path d={lineD} fill="none" stroke="#cfdcff" strokeWidth={3.5} strokeLinejoin="round" strokeLinecap="round" />
+              {/* 最新 280px：磷光最亮的"新鲜"段 */}
+              <path d={freshD} fill="none" stroke="url(#osFresh)" strokeWidth={4.5} strokeLinejoin="round" strokeLinecap="round" opacity={0.4 + 0.6 * live} />
+              {spikeD && (
+                <>
+                  <path d={spikeD} fill="none" stroke={HOT} strokeWidth={14} opacity={0.55} filter="url(#osGlowB)" />
+                  <path d={spikeD} fill="none" stroke={HOT} strokeWidth={5} strokeLinejoin="round" strokeLinecap="round" />
+                </>
+              )}
+            </g>
+
+            {/* 写入头：竖向扫描线 + 横向读数参考线 + 光斑 */}
+            <line x1={HEAD} x2={HEAD} y1={0} y2={PH} stroke={hexMix('#5b8cff', HOT, hot)} strokeOpacity={0.45 * live + 0.12} strokeWidth={1.5} />
+            <line x1={HEAD} x2={PW} y1={headY} y2={headY} stroke={hexMix('#cfdcff', HOT, hot)} strokeOpacity={0.4} strokeWidth={1.5} strokeDasharray="4 6" />
+            <circle cx={HEAD} cy={headY} r={70} fill="url(#osHead)" opacity={0.55 * live} />
+            <circle cx={HEAD} cy={headY} r={9} fill={hexMix('#ffffff', HOT, hot * 0.6)} stroke={L.bg[1]} strokeWidth={3} />
+
+            {/* 事件：峰顶标记 + 竖向落线 */}
+            {tagIn > 0 && peakPx > 40 && (
+              <g opacity={Math.min(1, tagIn * 1.5)}>
+                <line x1={peakPx} x2={peakPx} y1={peakY + 14} y2={PH} stroke={HOT} strokeOpacity={0.5} strokeWidth={1.5} strokeDasharray="3 5" />
+                <circle cx={peakPx} cy={peakY} r={9 * tagIn} fill={HOT} stroke={L.bg[1]} strokeWidth={3} />
+              </g>
+            )}
+
+            {/* 时间轴 */}
+            {['−50s', '−40s', '−30s', '−20s', '−10s', 'now'].map((t, i) => (
+              <text key={t} x={(HEAD * (i + 1)) / 6} y={PH + 52} textAnchor="middle" fill={i === 5 ? L.ink2 : L.ink3}
+                style={{ ...type(32, 500), fontFamily: FONT.sans }} opacity={headIn}>{t}</text>
+            ))}
+          </svg>
+
+          {/* y 轴刻度（屏内左上，压在主格线上方） */}
+          {['3k', '2k', '1k'].map((t, i) => (
+            <div key={t} style={{ position: 'absolute', left: 14, top: (i * 2 * PH) / 6 + 8, ...type(28, 600), color: L.ink3, opacity: on }}>{t}</div>
+          ))}
+
+          {/* 事件标签 */}
+          {tagIn > 0 && peakPx > 40 && (
+            <div style={{
+              position: 'absolute', left: peakPx + 22, top: peakY - 36, height: 72, padding: '0 26px 0 20px',
+              display: 'flex', alignItems: 'center', gap: 14, borderRadius: 14, whiteSpace: 'nowrap',
+              background: `linear-gradient(180deg, ${alpha(HOT, 0.22)}, ${alpha(HOT, 0.12)})`, border: `1px solid ${alpha(HOT, 0.55)}`,
+              boxShadow: `0 16px 40px -10px ${alpha('#000000', 0.6)}`,
+              transform: `scale(${tagIn.toFixed(4)})`, transformOrigin: '0% 50%', opacity: Math.min(1, tagIn * 1.5),
+            }}>
+              <span style={{ ...type(32, 800, { caps: true }), color: HOT }}>Burst</span>
+              <span style={{ ...type(32, 600), color: '#ffe3de' }}>{fmt(valueOf(PEAK_X))} fps</span>
+            </div>
+          )}
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};

package/lib/motion/shotcraft/upstream/demos/data/chart-live-moves/UnitDotSwarmRegroupV2.tsx

@@ -0,0 +1,278 @@
+// unit-dot-swarm-regroup-v2 —— 单位点阵重组：320 个点（每点 ≈ 40 次渲染）三幕迁徙——
+// 散布 → 按片型聚成三簇 → 列队成柱 → 拼成大数字「12,847」。同一批点，观众能跟着某一颗看它归队。
+//
+// 第二轮重设计（瓷白 · 信息图发布镜头）：
+// - look = porcelain（冷白 · 钴蓝）。三组配色只用一个强调色：Promo 雾蓝灰 / Launch film 钴蓝（主角）/ Explainer 深海军蓝。
+// - 点改成 20px 实心小珠（顶部受光微渐变 + 贴地软影），高速迁徙时按速度沿运动方向拉成胶囊（速度感），停下变回圆。
+// - 文字层级：左上眉题（video-shotcraft 标志 + 字标 · Renders · Q3 2026）+ 84px 叙事标题，每幕换一句
+//   （Every dot is 40 renders → Split by format → Stacked by format → Total renders），旧句上推出、新句从线下升起；
+//   簇标签 / 柱顶数值 60px，片型名 32px。
+// - 终幕：数字点按弧长连续分配给三组（Promo 拼出 12,8 / Launch film 接上 4 / Explainer 收尾 7），
+//   数字本身就是一根构成条；下方三枚图例把颜色含义留在海报上。
+//
+// 时间表（30fps，共 192f）：
+//   0–20    开场：点从画面中心向外逐颗弹出（按距中心错峰，先密后疏）并缓慢漂浮；标题升起
+//   24–48   第一幕迁徙 → 三簇（随机错峰 8f，spring stiffness 150 / damping 13）；38f 起簇标签浮现
+//   62–86   第二幕 → 三根柱（按行自底向上码放，越往上越快）；76f 起柱顶数值 + 套餐名
+//   100–128 第三幕 → 数字（按目标 x 自左向右扫入）；118f 起图例与标题落定
+//   128–192 hold 64f：极缓推镜 1 → 1.02
+import React from 'react';
+import { AbsoluteFill, spring, useCurrentFrame } from 'remotion';
+import { EASE, mix, ramp } from '../../_fixtures/Polish';
+import { LOOKS, Stage, TextReveal, alpha, type } from '../../_fixtures/Look';
+import { BRAND, ShotcraftMark } from '../../_fixtures/Brand';
+
+export const UNIT_DOT_SWARM_REGROUP_V2_DURATION = 192;
+
+const L = LOOKS.porcelain;
+const N = 320;
+const R = 10; // 点半径
+
+const M1 = 24;
+const M2 = 62;
+const M3 = 100;
+const DUR = 24;
+const STAG = 8;
+
+// 三组：Promo 180 / Launch film 102 / Explainer 38
+const GROUP_N = [180, 102, 38];
+const GROUP_NAME = ['Promo', 'Launch film', 'Explainer'];
+const GROUP_VAL = ['7,210', '4,102', '1,535'];
+const COL: Array<[string, string]> = [
+  ['#b9c3da', '#97a3c0'], // Promo：雾蓝灰
+  ['#5b80ff', '#2348e8'], // Launch film：钴蓝（主角）
+  ['#2b3554', '#121a33'], // Explainer：深海军蓝
+];
+const groupOf = (i: number) => (i < 180 ? 0 : i < 282 ? 1 : 2);
+const idxIn = (i: number) => (i < 180 ? i : i < 282 ? i - 180 : i - 282);
+
+const rnd = (i: number, salt: number) => {
+  const x = Math.sin(i * 12.9898 + salt * 78.233) * 43758.5453;
+  return x - Math.floor(x);
+};
+type P2 = [number, number];
+
+// 第 0 幕：散布（中心略密）
+const scatter = (i: number): P2 => [
+  200 + ((rnd(i, 1) + rnd(i, 11)) / 2) * 1520,
+  330 + ((rnd(i, 2) + rnd(i, 12)) / 2) * 640,
+];
+const drift = (i: number, f: number): P2 => [9 * Math.sin(f / 21 + rnd(i, 8) * 6.28), 7 * Math.cos(f / 27 + rnd(i, 9) * 6.28)];
+
+// 第 1 幕：三簇（向日葵螺旋紧密排布：等面积、不重叠，读起来是"一团被码好的人"）
+const CC: P2[] = [[520, 650], [1000, 650], [1420, 650]];
+const VOGEL = 12.6; // r_k = VOGEL·√k ≈ 每点占 500px²
+const CR = GROUP_N.map((n) => VOGEL * Math.sqrt(n) + R);
+const cluster = (i: number): P2 => {
+  const g = groupOf(i);
+  const k = idxIn(i) + 0.5;
+  const r = VOGEL * Math.sqrt(k);
+  const a = k * 2.39996 + g;
+  return [CC[g][0] + r * Math.cos(a), CC[g][1] + r * Math.sin(a)];
+};
+
+// 第 2 幕：三根柱（8 列网格自底向上）
+const BASE = 900;
+const BX = [520, 1000, 1420];
+const SP = 23;
+const row = (i: number) => Math.floor(idxIn(i) / 8);
+const bar = (i: number): P2 => [BX[groupOf(i)] + ((idxIn(i) % 8) - 3.5) * SP, BASE - R - row(i) * SP];
+const barTop = (g: number) => BASE - R - (Math.ceil(GROUP_N[g] / 8) - 1) * SP;
+
+// 第 3 幕：数字 "12,847" —— 单线骨架等弧长 160 采样 → 法向 ±10.5 双排 = 320 点
+const arc = (cx: number, cy: number, r: number, a0: number, a1: number, n = 48): P2[] =>
+  Array.from({ length: n + 1 }, (_, k) => {
+    const a = ((a0 + ((a1 - a0) * k) / n) * Math.PI) / 180;
+    return [cx + r * Math.cos(a), cy + r * Math.sin(a)];
+  });
+const GS = 1.08; // 字形放大
+const GLYPHS: Array<{ x0: number; strokes: P2[][] }> = [
+  { x0: 0, strokes: [[[58, 64], [112, 22], [112, 258]], [[52, 258], [172, 258]]] },
+  { x0: 228, strokes: [[...arc(100, 86, 64, 198, 378), [36, 258], [172, 258]]] },
+  { x0: 462, strokes: [[[22, 236], [4, 290]]] },
+  { x0: 540, strokes: [arc(100, 76, 53, -90, 270, 56), arc(100, 198, 62, -90, 270, 64)] },
+  { x0: 772, strokes: [[[142, 258], [142, 22], [26, 188], [118, 188]], [[164, 188], [200, 188]]] },
+  { x0: 1004, strokes: [[[26, 24], [176, 24], [84, 258]]] },
+];
+const GW = (1004 + 200) * GS;
+const GX = (1920 - GW) / 2;
+const GY = 372;
+const DIGIT: P2[] = (() => {
+  const segs: Array<{ a: P2; b: P2; len: number }> = [];
+  GLYPHS.forEach(({ x0, strokes }) =>
+    strokes.forEach((s) => {
+      for (let k = 0; k < s.length - 1; k++) {
+        const a: P2 = [GX + (x0 + s[k][0]) * GS, GY + s[k][1] * GS];
+        const b: P2 = [GX + (x0 + s[k + 1][0]) * GS, GY + s[k + 1][1] * GS];
+        segs.push({ a, b, len: Math.hypot(b[0] - a[0], b[1] - a[1]) });
+      }
+    }),
+  );
+  const total = segs.reduce((s, x) => s + x.len, 0);
+  const out: P2[] = [];
+  const half = N / 2;
+  let si = 0;
+  let acc = 0;
+  for (let k = 0; k < half; k++) {
+    const target = ((k + 0.5) / half) * total;
+    while (si < segs.length - 1 && acc + segs[si].len < target) acc += segs[si++].len;
+    const { a, b, len } = segs[si];
+    const u = len > 0 ? (target - acc) / len : 0;
+    const nx = -(b[1] - a[1]) / (len || 1);
+    const ny = (b[0] - a[0]) / (len || 1);
+    const x = a[0] + (b[0] - a[0]) * u;
+    const y = a[1] + (b[1] - a[1]) * u;
+    out.push([x + nx * 10.5, y + ny * 10.5], [x - nx * 10.5, y - ny * 10.5]);
+  }
+  return out;
+})();
+
+const mixHex = (a: string, b: string, t: number) => {
+  const q = (h: string) => [1, 3, 5].map((k) => parseInt(h.slice(k, k + 2), 16));
+  const A = q(a);
+  const B = q(b);
+  return `rgb(${A.map((v, k) => Math.round(v + (B[k] - v) * t)).join(',')})`;
+};
+const lerp2 = (a: P2, b: P2, t: number): P2 => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
+
+// 每颗点每幕的错峰
+const stagOf = (i: number, phase: 0 | 1 | 2) => {
+  if (phase === 0) return rnd(i, 7) * STAG;
+  if (phase === 1) {
+    const rows = Math.ceil(GROUP_N[groupOf(i)] / 8);
+    return Math.sqrt(row(i) / Math.max(1, rows - 1)) * STAG + rnd(i, 13) * 2;
+  }
+  return ((DIGIT[i][0] - GX) / GW) * (STAG + 4) + rnd(i, 14) * 1.5;
+};
+
+const posAt = (i: number, f: number): P2 => {
+  const mig = (start: number, phase: 0 | 1 | 2) =>
+    spring({ frame: f - start - stagOf(i, phase), fps: 30, config: { damping: 13, stiffness: 150, mass: 0.8 }, durationInFrames: DUR, durationRestThreshold: 0.0001 });
+  const d = drift(i, f);
+  const s = scatter(i);
+  let p: P2 = [s[0] + d[0], s[1] + d[1]];
+  p = lerp2(p, cluster(i), mig(M1, 0));
+  p = lerp2(p, bar(i), mig(M2, 1));
+  p = lerp2(p, DIGIT[i], mig(M3, 2));
+  return p;
+};
+
+// 开场弹出顺序：按距中心
+const popDelay = (i: number) => {
+  const s = scatter(i);
+  const d = Math.hypot(s[0] - 960, (s[1] - 650) * 1.6) / 900;
+  return EASE.out(Math.min(1, d)) * 10;
+};
+
+// 一段叙事标题：in 帧升起、out 帧上推出
+const Headline: React.FC<{ text: string; inF: number; outF?: number }> = ({ text, inF, outF }) => (
+  <div style={{ position: 'absolute', left: 0, top: 0, whiteSpace: 'nowrap' }}>
+    <TextReveal text={text} by="word" variant="rise" start={inF} each={16} gap={3} out={outF !== undefined ? { start: outF, dur: 10 } : undefined} />
+  </div>
+);
+
+export const UnitDotSwarmRegroupV2: React.FC = () => {
+  const frame = useCurrentFrame();
+  const cam = mix(1, 1.02, ramp(frame, M3 + 20, UNIT_DOT_SWARM_REGROUP_V2_DURATION - M3 - 20, EASE.smooth));
+
+  const clusterOp = Math.min(ramp(frame, 38, 12, EASE.out), 1 - ramp(frame, M2 - 2, 8, EASE.exit));
+  const barOp = Math.min(ramp(frame, 78, 12, EASE.out), 1 - ramp(frame, M3 - 2, 8, EASE.exit));
+  const legendIn = (k: number) => ramp(frame, 120 + k * 4, 14, EASE.snappy);
+
+  return (
+    <AbsoluteFill style={{ background: L.bg[1], overflow: 'hidden' }}>
+      <Stage look={L} keyLight={{ x: 0.5, y: 0.3 }} fill={null} />
+
+      <div style={{ position: 'absolute', inset: 0, transform: `scale(${cam.toFixed(5)})`, transformOrigin: '50% 52%' }}>
+        {/* 眉题 + 叙事标题 */}
+        <div style={{ position: 'absolute', left: 96, top: 92, display: 'flex', alignItems: 'center', gap: 12, ...type(32, 650, { caps: true }), color: L.ink3, opacity: ramp(frame, 0, 12, EASE.out) }}>
+          <ShotcraftMark size={38} tone="light" style={{ marginTop: -2 }} />
+          <span style={{ fontFamily: BRAND.font, fontWeight: 700, textTransform: 'none', letterSpacing: '0.03em', color: L.ink }}>{BRAND.name}</span>
+          <span>· Renders · Q3 2026</span>
+        </div>
+        <div style={{ position: 'absolute', left: 90, top: 152, ...type(84, 760), color: L.ink }}>
+          <Headline text="Every dot is 40 renders" inF={2} outF={M1 + 4} />
+          <Headline text="Split by format" inF={M1 + 14} outF={M2 + 2} />
+          <Headline text="Stacked by format" inF={M2 + 12} outF={M3 + 2} />
+          <Headline text="Total renders" inF={M3 + 14} />
+        </div>
+
+        {/* 簇标签 */}
+        {clusterOp > 0.01 && GROUP_NAME.map((n, g) => (
+          <div key={n} style={{
+            position: 'absolute', left: CC[g][0] - 200, top: CC[g][1] - CR[g] - 128, width: 400, textAlign: 'center',
+            opacity: clusterOp, transform: `translateY(${mix(14, 0, ramp(frame, 38 + g * 3, 14, EASE.snappy)).toFixed(2)}px)`,
+          }}>
+            <div style={{ ...type(32, 650, { caps: true }), color: g === 1 ? L.accent : L.ink2 }}>{n}</div>
+            <div style={{ ...type(60, 750), color: g === 1 ? L.accent : L.ink, marginTop: 4 }}>{GROUP_VAL[g]}</div>
+          </div>
+        ))}
+
+        {/* 柱：基线 + 柱顶数值 + 套餐名 */}
+        <div style={{
+          position: 'absolute', left: 300, width: 1340, top: BASE + 2, height: 3, borderRadius: 2, background: L.ink,
+          transform: `scaleX(${Math.min(ramp(frame, M2 + 4, 18, EASE.snappy), 1 - ramp(frame, M3 - 2, 10, EASE.exit))})`, transformOrigin: '0% 50%',
+          opacity: 0.85,
+        }} />
+        {barOp > 0.01 && GROUP_NAME.map((n, g) => (
+          <React.Fragment key={n}>
+            <div style={{
+              position: 'absolute', left: BX[g] - 200, top: barTop(g) - R - 92, width: 400, textAlign: 'center', ...type(60, 750),
+              color: g === 1 ? L.accent : L.ink, opacity: barOp, transform: `translateY(${mix(16, 0, ramp(frame, 78 + g * 3, 14, EASE.snappy)).toFixed(2)}px)`,
+            }}>{GROUP_VAL[g]}</div>
+            <div style={{
+              position: 'absolute', left: BX[g] - 200, top: BASE + 22, width: 400, textAlign: 'center', ...type(32, 650, { caps: true }),
+              color: g === 1 ? L.accent : L.ink2, opacity: barOp,
+            }}>{n}</div>
+          </React.Fragment>
+        ))}
+
+        {/* 点 */}
+        {Array.from({ length: N }, (_, i) => {
+          const p = posAt(i, frame);
+          const q = posAt(i, frame - 1);
+          const vx = p[0] - q[0];
+          const vy = p[1] - q[1];
+          const sp = Math.hypot(vx, vy);
+          const stretch = Math.min(sp * 0.45, 20); // 速度拉伸（px）
+          const ang = (Math.atan2(vy, vx) * 180) / Math.PI;
+          const pop = spring({ frame: frame - popDelay(i), fps: 30, config: { damping: 12, stiffness: 200 } });
+          const g = groupOf(i);
+          const w = 2 * R + stretch;
+          // 落进数字后统一收拢成钴蓝（数字是终幕主角；构成信息交给下方图例）
+          const land = ramp(frame, M3 + stagOf(i, 2) + 10, 12, EASE.out);
+          const c0 = land > 0 ? mixHex(COL[g][0], '#6a8bff', land) : COL[g][0];
+          const c1 = land > 0 ? mixHex(COL[g][1], '#2348e8', land) : COL[g][1];
+          return (
+            <div key={i} style={{
+              position: 'absolute', left: p[0] - w / 2, top: p[1] - R, width: w, height: 2 * R, borderRadius: R,
+              background: `linear-gradient(180deg, ${c0}, ${c1})`,
+              boxShadow: `0 ${(2 + stretch * 0.05).toFixed(1)}px ${(4 + stretch * 0.1).toFixed(1)}px ${alpha(L.shadow, 0.16)}, inset 0 1px 0 rgba(255,255,255,0.35)`,
+              transform: `rotate(${sp > 0.3 ? ang.toFixed(2) : 0}deg) scale(${pop.toFixed(4)}, ${(pop * (1 - Math.min(stretch / 120, 0.18))).toFixed(4)})`,
+            }} />
+          );
+        })}
+
+        {/* 图例 */}
+        <div style={{ position: 'absolute', left: 0, right: 0, top: 790, display: 'flex', justifyContent: 'center', gap: 64 }}>
+          {GROUP_NAME.map((n, g) => (
+            <div key={n} style={{
+              display: 'flex', alignItems: 'center', gap: 16, opacity: legendIn(g),
+              transform: `translateY(${mix(18, 0, legendIn(g)).toFixed(2)}px)`,
+            }}>
+              <span style={{ width: 22, height: 22, borderRadius: 11, background: `linear-gradient(180deg, ${COL[g][0]}, ${COL[g][1]})` }} />
+              <span style={{ ...type(36, 650), color: g === 1 ? L.accent : L.ink }}>{n}</span>
+              <span style={{ ...type(36, 450), color: L.ink2 }}>{GROUP_VAL[g]}</span>
+            </div>
+          ))}
+        </div>
+        <div style={{
+          position: 'absolute', left: 0, right: 0, top: 862, textAlign: 'center', ...type(32, 500), color: L.ink3,
+          opacity: ramp(frame, 132, 14, EASE.out),
+        }}>
+          Each dot ≈ 40 renders
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};