@biunow/agent-biuart 0.0.0-stage → 0.1.1

package/engine/demos/y5_kinetic_type/k3_chat.js

@@ -0,0 +1,47 @@
+// K3 阶段二「对话」（第 8–11 拍，4.0–6.0s；推页 5.8s 起、6.0s 到位）
+// 第 8 拍主词砸在画右＋巨型「2」→ 8.5 拍你的气泡弹出 → 第 9 拍 AI 气泡长出、代码一行行流进来 → 9.5 拍辅句 → 10.5 拍「一整段」放大＋荧光笔。
+// 版式和 K2 镜像（主词左↔右），同一套拍位换位置，观众不会觉得重复。
+// 返修：辅句原在第 10 拍、10 个字只停 0.55s，左端离 AI 面板只剩 14px；现在提前、压到 7 个字、右对齐留 250px 以上。
+(() => {
+const K = KT, C = K.C, b = K.b;
+const COLS = ['#C792EA', '#82AAFF', '#C3E88D', '#F78C6C', '#89DDFF', '#FFCB6B'];
+SCENES['k3_chat'] = {
+  draw(c, lt, t) {
+    c.fillStyle = C.navy; c.fillRect(0, 0, 1920, 1080);
+    K.dots(c, t, C.white, 0.07);
+    K.cam(c, t, c => {
+      K.bigNum(c, t, '2', b(8), 1880, 1150, 'rgba(255,255,255,0.07)');
+      TY.rise(c, '阶段 02', 1790, 250, MO.at(t, b(8), 0.3), { size: K.SZ.label, fam: 'PuHui-Bold', color: C.yellow, track: 6, align: 'right' });
+      TY.underline(c, 1620, 272, 170, MO.at(t, b(8.25), 0.3), C.yellow, 6);
+      const hw = TY.width(c, '对话', K.SZ.hero);
+      K.slam(c, '对话', 1790 - hw, 600, t, b(8), { color: C.yellow });
+      const s1 = '一句话换', key = '一整段', w1 = TY.width(c, s1, K.SZ.sub, 'PuHui-Heavy'), wk = TY.width(c, key, K.SZ.sub, 'PuHui-Heavy');
+      const ky = 775, x1 = 1790 - w1 - wk * 1.35 - 12, kx = x1 + w1 + 12;
+      TY.rise(c, s1, x1, ky, MO.at(t, b(9.5), 0.35), { size: K.SZ.sub, fam: 'PuHui-Heavy', color: C.white });
+      const ksc = t >= b(10.5) ? 1 + 0.35 * MO.springHz(t - b(10.5), 2.5, 9) : 1;
+      K.keyMarker(c, kx, ky, wk, K.SZ.sub, t, b(10.5), ksc, C.yellow);
+      K.key(c, key, kx, ky, t, b(9.75), b(10.5), { size: K.SZ.sub, fam: 'PuHui-Heavy', color: t >= b(10.5) ? C.navy : C.white });
+      // 你的气泡（右对齐到 x=820），8.5 拍弹出
+      const p1 = MO.at(t, b(8.5), 0.3);
+      if (p1 > 0) { const s = MO.backOut(p1, 2.6); c.save(); c.translate(820, 250); c.scale(s, s);
+        const w = TY.width(c, '帮我做个登录页', 48, 'PuHui-Bold') + 70;
+        c.fillStyle = C.blue; c.beginPath(); c.roundRect(-w, -50, w, 96, 30); c.fill();
+        c.beginPath(); c.moveTo(-26, 40); c.lineTo(10, 58); c.lineTo(-6, 26); c.fill();
+        TY.text(c, '帮我做个登录页', -w / 2, 16, { size: 48, fam: 'PuHui-Bold', color: C.white }); c.restore(); }
+      // AI 气泡：第 9 拍长出（高度 expoOut 0.35s），之后代码每 0.045s 流入一行
+      const p2 = MO.at(t, b(9), 0.35);
+      if (p2 > 0) {
+        const e = MO.expoOut(p2), x = 130, y = 340, w = 690, h = 620 * e;
+        c.fillStyle = C.white; c.beginPath(); c.roundRect(x, y, w, Math.max(40, h), 30); c.fill();
+        c.save(); c.beginPath(); c.roundRect(x, y, w, Math.max(40, h), 30); c.clip();
+        const n = Math.floor(Math.max(0, t - b(9) - 0.1) / 0.045), r = U.rng(5);
+        for (let i = 0; i < 22; i++) { const toks = 1 + (r() * 3 | 0), ind = (r() * 3 | 0) * 28; let xx = x + 40 + ind;
+          const yy = y + 40 + i * 26, vis = i < n;
+          for (let k = 0; k < toks; k++) { const ww = 40 + r() * 140; if (vis) { c.fillStyle = COLS[(r() * 6) | 0]; c.beginPath(); c.roundRect(xx, yy, ww, 14, 7); c.fill(); } else r(); xx += ww + 12; } }
+        c.restore();
+        c.fillStyle = C.white; c.beginPath(); c.moveTo(x + 30, y + 4); c.lineTo(x - 10, y - 26); c.lineTo(x + 70, y + 4); c.fill();
+      }
+    });
+  },
+};
+})();

package/engine/demos/y5_kinetic_type/k4_agent.js

@@ -0,0 +1,49 @@
+// K4 阶段三「代理」（第 12 拍起，6.0–8.5s）
+// 第 12 拍主词砸进＋巨型「3」→ 12.5 拍「Agent」＋任务卡升起 → 第 13 拍辅句「你只说」、13.25 拍「要什么」→
+// 13.5 / 14 / 14.5 拍三条任务自己打勾 → 第 15 拍「要什么」放大＋下划线 → 第 16 拍收尾重拍：镜头拉远 6%、整屏一冲，留 0.5s 静住。
+// 返修：第一版高潮最弱——收尾无一击、打完勾全变灰、底部 28% 空着。现在内容整体下移 70px、勾完不变灰、加第 16 拍收尾。
+(() => {
+const K = KT, C = K.C, b = K.b;
+const { clamp } = U;
+const TASKS = [['写代码', 13.5], ['跑测试', 14], ['上线', 14.5]];
+SCENES['k4_agent'] = {
+  draw(c, lt, t) {
+    c.fillStyle = C.paper; c.fillRect(0, 0, 1920, 1080);
+    K.dots(c, t, C.ink, 0.06);
+    const pull = MO.expoOut(MO.at(t, b(16), 0.45)), hit = t >= b(16) ? 0.035 * Math.exp(-(t - b(16)) * 9) : 0;
+    K.cam(c, t, c => {
+      K.bigNum(c, t, '3', b(12), 1880, 1150, 'rgba(17,17,17,0.05)');
+      TY.rise(c, '阶段 03', 140, 300, MO.at(t, b(12), 0.3), { size: K.SZ.label, fam: 'PuHui-Bold', color: C.coral, track: 6 });
+      TY.underline(c, 140, 322, 170, MO.at(t, b(12.25), 0.3), C.coral, 6);
+      K.slam(c, '代理', 130, 650, t, b(12), { color: C.ink });
+      const hw = TY.width(c, '代理', K.SZ.hero);
+      TY.rise(c, 'Agent', 150 + hw, 650, MO.at(t, b(12.5), 0.35), { size: 96, fam: 'PuHui-Black', color: C.coral });
+      const s1 = '你只说', key = '要什么', w1 = TY.width(c, s1, K.SZ.sub, 'PuHui-Heavy'), wk = TY.width(c, key, K.SZ.sub, 'PuHui-Heavy');
+      const ky = 825, kx = 152 + w1;
+      TY.rise(c, s1, 140, ky, MO.at(t, b(13), 0.35), { size: K.SZ.sub, fam: 'PuHui-Heavy', color: C.ink });
+      const ksc = K.key(c, key, kx, ky, t, b(13.25), b(15), { size: K.SZ.sub, fam: 'PuHui-Heavy', color: C.coral });
+      TY.underline(c, kx, ky + 30 * ksc, wk * ksc, MO.at(t, b(15), 0.3), C.coral, 12);
+      // 任务卡：12.5 拍从下方升起
+      const pc = MO.expoOut(MO.at(t, b(12.5), 0.4)); if (pc <= 0) return;
+      c.save(); c.translate(1220, 360 + 260 * (1 - pc)); c.globalAlpha = clamp(pc * 2);
+      c.fillStyle = 'rgba(0,0,0,0.08)'; c.beginPath(); c.roundRect(12, 16, 600, 470, 28); c.fill();
+      c.fillStyle = C.white; c.beginPath(); c.roundRect(0, 0, 600, 470, 28); c.fill();
+      TY.text(c, 'TODO', 50, 80, { size: 40, fam: 'PuHui-Black', color: '#B5AFA4', align: 'left', track: 4 });
+      TASKS.forEach(([s, beat], i) => {
+        const y = 170 + i * 115, ck = MO.at(t, b(beat), 0.22), done = t >= b(beat);
+        // 打勾那一拍框先放大 1.25 再回，勾按弧长画出
+        const bs = done ? 1 + 0.25 * Math.exp(-(t - b(beat)) * 10) * Math.sin(Math.min(Math.PI, (t - b(beat)) * 20)) : 1;
+        c.save(); c.translate(80, y); c.scale(bs, bs);
+        c.fillStyle = done ? C.green : C.paper; c.strokeStyle = done ? C.green : '#CFC7BA'; c.lineWidth = 6;
+        c.beginPath(); c.roundRect(-30, -30, 60, 60, 14); c.fill(); c.stroke();
+        if (ck > 0) { c.strokeStyle = C.white; c.lineWidth = 10; c.lineCap = 'round'; c.lineJoin = 'round';
+          const L1 = Math.hypot(11, 12), L2 = Math.hypot(22, 26), d = MO.expoOut(ck) * (L1 + L2);
+          c.beginPath(); c.moveTo(-15, 0); if (d <= L1) c.lineTo(-15 + 11 * d / L1, 12 * d / L1); else { c.lineTo(-4, 12); const q = (d - L1) / L2; c.lineTo(-4 + 22 * q, 12 - 26 * q); } c.stroke(); }
+        c.restore();
+        TY.text(c, s, 140, y + 24, { size: 66, fam: 'PuHui-Heavy', color: done ? C.green : C.ink, align: 'left' });
+      });
+      c.restore();
+    }, { zoom: (1 - 0.06 * pull) * (1 + hit) });
+  },
+};
+})();

package/engine/demos/y5_kinetic_type/kinetic.js

@@ -0,0 +1,52 @@
+// y5 本片共用：节拍网格、配色、字号阶梯、拍点微冲、进度轨（全片唯一连续的叙事锚）、背景点阵。
+// 一切「落点」都写成拍号：b(4) = 第 4 拍 = 2.0s。120 BPM：一拍 0.5s，八分 0.25s。
+// 用到的库：TY（slam 砸入、rise 遮罩升起、keyword 关键词强调、marker 荧光笔、underline）、CAM（with、drift）、MO（springHz、拍号）。
+(() => {
+const { clamp, lerp } = U;
+window.BPM = 120;
+const K = window.KT = {};
+K.b = n => MO.beat(n, 120);                           // 拍 → 秒
+const C0 = K.C = { ink: '#111111', paper: '#F4EFE6', yellow: '#FFD23F', coral: '#FF5A36', navy: '#14213D', blue: '#3A86FF', green: '#2BB673', white: '#FFFFFF', code: '#1B1D29' };
+// 字号阶梯：主词 : 辅句 : 标签 ≈ 3.4 : 1 : 0.4（主词必须一眼读完，辅句给耳朵对位）
+K.SZ = { hero: 340, sub: 96, label: 40 };
+// 拍点微冲：每个四分拍让画面放大 1.2%，0.12s 衰减（e^-25t）——画面跟着鼓「呼吸」
+K.bump = t => { const ph = t % 0.5; return 1 + 0.012 * Math.exp(-ph * 25); };
+// 背景点阵：斜向缓慢平移 36px/s（持续运动，低对比 8%，不和字抢）
+K.dots = (c, t, col, alpha = 0.1) => {
+  const g = 64, ox = (t * 36) % g, oy = (t * 18) % g;
+  c.save(); c.globalAlpha = alpha; c.fillStyle = col;
+  for (let y = -g; y < 1080 + g; y += g) for (let x = -g; x < 1920 + g; x += g) { c.beginPath(); c.arc(x + ox, y + oy, 4, 0, Math.PI * 2); c.fill(); }
+  c.restore();
+};
+// 进度轨：右上三格，画在固定层（GLOBAL_OVERLAY），不跟页面一起被推走（返修：第一版画在各段里，推页时跟着跳）。
+// 颜色在转场「揭开」那一帧换（2.0 / 4.0 / 6.0s），亮格同一帧点亮。
+K.STAGES = [2.0, 4.0, 6.0];
+K.trackCol = t => t < 4.0 ? [C0.white, 'rgba(255,255,255,0.35)'] : t < 6.0 ? [C0.yellow, 'rgba(255,255,255,0.25)'] : [C0.coral, 'rgba(17,17,17,0.18)'];
+window.GLOBAL_OVERLAY = (c, t) => {
+  if (t < 2.0) return;
+  const [col, dim] = K.trackCol(t), a = MO.expoOut(clamp((t - 2.0) / 0.3));
+  c.save(); c.globalAlpha = a;
+  for (let i = 0; i < 3; i++) {
+    const x = 1520 + i * 120, y = 92, on = t >= K.STAGES[i], fill = on ? MO.expoOut(clamp((t - K.STAGES[i]) / 0.3)) : 0;
+    c.fillStyle = dim; c.fillRect(x, y, 100, 10); c.fillStyle = col; c.fillRect(x, y, 100 * fill, 10);
+    TY.text(c, '0' + (i + 1), x, y - 18, { size: 30, fam: 'PuHui-Bold', color: on ? col : dim, align: 'left', track: 2 });
+  }
+  c.restore();
+};
+// 背景巨型阶段数字（900px、低对比、斜向慢漂）：数字是章节的主角之一，但不和主词抢（返修：审片说 01/02/03 太小，退成了装饰）
+K.bigNum = (c, t, s, t0, x, y, col) => {
+  const lt = t - t0; if (lt < 0) return;
+  const k = MO.springHz(lt, 2.0, 8), sc = lerp(1.35, 1, k);
+  TY.text(c, s, x + lt * 14, y - lt * 10, { size: 900, fam: 'PuHui-Black', align: 'right', color: col, scale: sc, alpha: clamp(lt / 0.08), ox: x - 250, oy: y - 320 });
+};
+// 关键词：先从槽里升起，到「强调拍」再放大 1.35 倍并钉住，荧光笔跟着放大（TY.keyword / TY.keywordMarker）
+K.key = TY.keyword;
+K.keyMarker = TY.keywordMarker;
+// 主词「砸」进来：从 1.7 倍缩到 1（弹簧 2.2Hz/10，过冲 ≈8%），前 0.06s 透明→不透明（TY.slam）
+K.slam = (c, s, x, y, t, t0, o = {}) => TY.slam(c, s, x, y, t - t0, { size: K.SZ.hero, ...o });
+// 镜头：微漂＋极慢旋转（±0.5°）＋拍点微冲
+K.cam = (c, t, fn, extra = {}) => {
+  const [dx, dy] = CAM.drift(t, 5, 2);
+  CAM.with(c, { x: 960 + dx + (extra.x || 0), y: 540 + dy + (extra.y || 0), z: K.bump(t) * (extra.zoom || 1), r: 0.009 * Math.sin(t * 0.8) + (extra.rot || 0) }, fn);
+};
+})();

package/engine/engine.js

@@ -0,0 +1,277 @@
+// 引擎：时间 t（秒）→ 一帧画面。确定性：同一个 t 永远画出同一帧（随机数全部用种子）。
+// 时间轴由节拍网格驱动：128 BPM，每段占若干八分音符（见 eras.js 的 eighths）。
+(() => {
+// 画布尺寸：?w=1080&h=1920（render.py --width/--height 传）＞ eras.js 里的 window.FILM_SIZE = [w, h] ＞ 1920×1080。
+// 一次性 U.setStage：转场、相机和各库都跟着换；竖屏整片的场景代码要按 window.STAGE（或 CAM/UI 等库）排版，35 种艺术风格场景只按横屏画过。
+const qs = new URLSearchParams(location.search), qw = +qs.get('w'), qh = +qs.get('h');
+const [W, H] = qw > 0 && qh > 0 ? [qw, qh] : Array.isArray(window.FILM_SIZE) ? window.FILM_SIZE.map(Number) : [1920, 1080];
+window.U.setStage(W, H);
+const cv = document.getElementById('c');
+cv.width = W; cv.height = H; window.__size = [W, H];
+const ctx = cv.getContext('2d');
+window.__canvas = cv;
+
+const EIGHTH = 60 / (window.BPM || 128) / 2;   // 0.234375s @128；片子可设 window.BPM
+// 段长：eighths（八分音符数，卡节拍）或 dur（秒，按口播切的解说片）。写了 dur 就以 dur 为准。
+let acc = 0;
+for (const e of ERAS) { e.t0 = acc; acc += e.dur != null ? e.dur : e.eighths * EIGHTH; e.t1 = acc; }
+// 片长 = 最后一段的 t1；window.FILM_DURATION 优先。render.py / 预览都读 window.__total。
+window.__total = window.FILM_DURATION || ERAS[ERAS.length - 1].t1;
+ERAS[ERAS.length - 1].t1 = 1e9;
+
+// 离屏缓冲：A=上一段，B=当前段
+const mk = () => { const c = document.createElement('canvas'); c.width = W; c.height = H; return c; };
+const bufA = mk(), bufB = mk(), bufT = mk();
+window.__mk = mk;
+
+// ---------- 资源 ----------
+const IMG = {};
+function load(src) {
+  return new Promise((res, rej) => { const im = new Image(); im.onload = () => res(im); im.onerror = () => rej(src); im.src = src; });
+}
+async function boot() {
+  if (window.__bootErrors && __bootErrors.length) { window.__bootFailed = __bootErrors.join('\n'); console.error('BOOT FAILED\n' + window.__bootFailed); return; }
+  const list = new Set();
+  for (const e of ERAS) (e.assets || []).concat(e.plate ? [e.plate] : []).forEach(s => list.add(s));
+  (window.EXTRA_ASSETS || []).forEach(s => list.add(s));
+  try { await Promise.all([...list].map(async s => { IMG[s] = await load(s); })); }
+  catch (src) { window.__bootFailed = `图片加载失败：${src}（段的 assets / plate / window.EXTRA_ASSETS 里点名的文件不存在或不是图片）`; console.error('BOOT FAILED\n' + window.__bootFailed); return; }
+  for (const f of (window.FONT_FACES || [])) { const ff = new FontFace(f.family, `url(${f.url})`, f.desc || {}); await ff.load(); document.fonts.add(ff); }
+  await document.fonts.ready;
+  await U.loadCmaps();                                  // 字形检查用（U.assertGlyphs）
+  for (const e of ERAS) if (e.init) e.init(IMG);
+  checkCounterGlyphs();
+  await window.prepare(0);                              // 第 0 帧的视频帧先加载（缺帧在这里就报错）
+  window.__ready = true;
+  renderFrame(0);
+}
+window.IMG = IMG;
+
+const U = window.U;
+
+// ---------- 角标（右上角）：可插拔 ----------
+// 每段 era.counter 三种写法：
+//  1) 默认：年份计数器 U.yearCounter——数值只由全局时间决定（U.counterAt），跨段连续滚动；label 写风格名。
+//  2) counter.draw(c, lt, t)（别名 counter.custom(c, lt)）：自绘。年代不单调、要印章/榜题/漫画旁白框时用。
+//  3) counter.mode = 'tag'：U.styleTag 画「年份＋风格名」两行静态牌（年代乱序时不滚动）。
+// 转场期间：默认（window.COUNTER_IN_TRANSITION = 'cut'）新旧两层都不画角标，转场画完后在最上层按 p<0.5 硬切旧/新角标——
+//   各段角标版式不同时，局部揭示的转场（点灯、扫光、水波）会让两套字叠成一团（迁移测试 C、D 的独立审片都抓到）。
+//   'layers'：角标留在各自层里随转场一起变（原片复刻：年份牌位置固定、数字连续滚动，混在一起看不出来）。单个转场可用 transition.counter 覆盖。
+function drawCounter(c, e, t) {
+  const ct = e.counter; if (!ct) return;
+  const lt = t - e.t0;
+  if (ct.draw) ct.draw(c, lt, t);
+  else if (ct.custom) ct.custom(c, lt);
+  else if (ct.mode === 'tag') U.styleTag(c, ct, lt);
+  else { const cv = U.counterAt(t); U.yearCounter(c, ct, cv.v, cv.rolling, lt); }
+}
+// 启动时检查角标用到的字形（缺字静默回退系统字体是迁移测试 B、D 都踩过的坑）。自绘角标的字请在 scene.init 里自己 U.assertGlyphs。
+function checkCounterGlyphs() {
+  for (const e of ERAS) { const ct = e.counter; if (!ct || ct.draw || ct.custom) continue;
+    if (ct.mode === 'tag') { if (ct.name) U.assertGlyphs(ct.nameFont || ct.font, ct.name, e.id + ' 角标'); if (ct.sub) U.assertGlyphs(ct.subFont || ct.nameFont || ct.font, ct.sub, e.id + ' 角标'); continue; }
+    U.assertGlyphs(ct.font, '0123456789' + (Math.abs(ct.year) >= 10000 ? ',' : ''), e.id + ' 年份');
+    if (ct.label) U.assertGlyphs(ct.label.font, ct.label.text, e.id + ' 角标');
+    if (ct.suffix) U.assertGlyphs(ct.suffix.font || ct.font, 'BCAD', e.id + ' 角标后缀');
+  }
+}
+// 「年份＋风格名」静态牌：{ year, name, sub?, x, y, font, size, color, nameFont, nameColor, subFont, subColor, box(c,lt), shadow, align }
+U.styleTag = function (c, ct, lt) {
+  if (ct.box) ct.box(c, lt);
+  c.save(); c.textAlign = ct.align || 'right'; c.textBaseline = 'alphabetic';
+  if (ct.shadow) { c.shadowColor = ct.shadow.color; c.shadowBlur = ct.shadow.blur || 0; c.shadowOffsetX = ct.shadow.x || 0; c.shadowOffsetY = ct.shadow.y || 0; }
+  const x = ct.x ?? 1866, y = ct.y ?? 128;
+  if (ct.year != null) { c.font = `${ct.size || 96}px "${U.fontFamily(ct.font)}"`; c.fillStyle = ct.color || '#fff'; c.fillText(ct.yearText || (ct.year < 0 ? U.fmtYear(ct.year) + ' BC' : String(ct.year)), x, y); }
+  if (ct.name) { c.font = ct.nameFont || `34px "${U.fontFamily(ct.font)}"`; c.fillStyle = ct.nameColor || ct.color || '#fff'; c.fillText(ct.name, x, ct.ny ?? y + 52); }
+  if (ct.sub) { c.font = ct.subFont || ct.nameFont; c.fillStyle = ct.subColor || ct.nameColor || ct.color; c.fillText(ct.sub, x, ct.sy ?? y + 92); }
+  c.restore();
+};
+
+// ---------- 年份计数器（里程表逐位滚动） ----------
+// from/to 是数值；fmt 把数值格式化成字符串；滚动时每一位独立从旧字符滚到新字符，低位先动、错开 stagger。
+U.odometer = function (c, opt, p) {
+  const { x, y, size, font, color, fromStr, toStr, align = 'right', stagger = 0.12, spacing = 0, shadow } = opt;
+  c.save();
+  c.font = `${size}px ${font}`;
+  c.textBaseline = 'alphabetic';
+  c.fillStyle = color;
+  const n = Math.max(fromStr.length, toStr.length);
+  const a = fromStr.padStart(n, ' '), b = toStr.padStart(n, ' ');
+  const widths = [...b].map(ch => c.measureText(ch === ' ' ? '0' : ch).width + spacing);
+  const total = widths.reduce((s, w) => s + w, 0) - spacing;
+  let cx = align === 'right' ? x - total : align === 'center' ? x - total / 2 : x;
+  for (let i = 0; i < n; i++) {
+    const order = n - 1 - i;                           // 低位先滚
+    const pi = U.clamp((p - order * stagger) / Math.max(0.0001, 1 - (n - 1) * stagger));
+    const e = U.ease.inOut(pi);
+    const w = widths[i];
+    c.save();
+    c.beginPath(); c.rect(cx - 4, y - size * 1.05, w + 8, size * 1.35); c.clip();
+    if (shadow) { c.shadowColor = shadow.color; c.shadowBlur = shadow.blur || 0; c.shadowOffsetX = shadow.x || 0; c.shadowOffsetY = shadow.y || 0; }
+    if (a[i] === b[i]) c.fillText(b[i], cx, y);
+    else {
+      const dy = size * 1.1 * e;
+      c.globalAlpha = 1 - e * 0.6; if (a[i] !== ' ') c.fillText(a[i], cx, y - dy);
+      c.globalAlpha = 0.4 + e * 0.6; if (b[i] !== ' ') c.fillText(b[i], cx, y + size * 1.1 - dy);
+    }
+    c.restore();
+    cx += w;
+  }
+  c.restore();
+};
+
+// ---------- 年份计数器：数值插值（ease-out）＋个位数滚动残影 ----------
+// ct: {year, x, y, size, font, color, suffix:{font,size,color,dy,gap}, label:{text,font,color,x,y,spacing}, box(c), shadow, spacing}
+U.fmtYear = (v) => { const a = Math.abs(Math.round(v)); return a >= 10000 ? a.toLocaleString('en-US') : String(a); };
+// 计数器的值只由全局时间决定：转场中新旧两层显示同一个数字
+U.counterAt = function (t) {
+  let k = 0; for (let i = 0; i < ERAS.length; i++) if (t >= ERAS[i].t0) k = i;
+  const cur = ERAS[k].counter, prv = k ? ERAS[k - 1].counter : cur;
+  const p = cur.roll ? U.clamp((t - ERAS[k].t0 - 0.03) / cur.roll) : 1;
+  return { v: prv.year + (cur.year - prv.year) * U.ease.inOut(p), rolling: p > 0 && p < 1 };
+};
+U.yearCounter = function (c, ct, v, rolling, lt) {
+  if (ct.box) ct.box(c, lt);
+  const vi = Math.round(v);
+  const str = U.fmtYear(vi);
+  const era = v < 0 ? 'BC' : 'AD';
+  c.save();
+  c.textBaseline = 'alphabetic';
+  if (ct.shadow) { c.shadowColor = ct.shadow.color; c.shadowBlur = ct.shadow.blur || 0; c.shadowOffsetX = ct.shadow.x || 0; c.shadowOffsetY = ct.shadow.y || 0; }
+  let x = ct.x;
+  // 后缀（BC/AD）
+  const sfx = ct.suffix && (ct.suffix.show === 'always' || (ct.suffix.show !== 'never')) ? ((ct.suffix.text === 'BC' || ct.suffix.text === 'AD') ? era : (ct.suffix.text || era)) : '';
+  if (sfx) {
+    c.font = `${ct.suffix.size}px "${ct.suffix.font || ct.font}"`; c.fillStyle = ct.suffix.color || ct.color; c.textAlign = 'right';
+    c.fillText(sfx, x, ct.y + (ct.suffix.dy || 0));
+    x -= c.measureText(sfx).width + (ct.suffix.gap || 12);
+  }
+  c.font = `${ct.size}px "${ct.font}"`; c.fillStyle = ct.color; c.textAlign = 'left';
+  if (ct.spacing) c.letterSpacing = ct.spacing + 'px';
+  const w = c.measureText(str).width - (ct.spacing || 0);
+  const x0 = x - w;
+  // 滚动中：除个位外照常画，个位画成上下滚动
+  if (rolling) {
+    const head = str.slice(0, -1), last = str.slice(-1);
+    c.fillText(head, x0, ct.y);
+    const hw = head ? c.measureText(head).width : 0;
+    const frac = (Math.abs(v) % 1);
+    const lw = c.measureText(last).width;
+    c.save(); c.beginPath(); c.rect(x0 + hw - 2, ct.y - ct.size * 1.0, lw + 30, ct.size * 1.25); c.clip();
+    c.fillText(last, x0 + hw, ct.y - frac * ct.size * 0.3);
+    c.globalAlpha = 0.35; c.fillText(String((+last + 1) % 10), x0 + hw, ct.y - ct.size * 0.85 - frac * ct.size * 0.3);
+    c.restore();
+  } else c.fillText(str, x0, ct.y);
+  c.restore();
+  if (ct.label) {
+    const L = ct.label; c.save(); c.font = L.font; c.fillStyle = L.color; c.textAlign = L.align || 'right'; c.textBaseline = 'alphabetic';
+    if (L.spacing) c.letterSpacing = L.spacing + 'px';
+    if (L.shadow) { c.shadowColor = L.shadow.color; c.shadowBlur = L.shadow.blur || 0; c.shadowOffsetX = L.shadow.x || 0; c.shadowOffsetY = L.shadow.y || 0; }
+    if (L.gradient) { const g = c.createLinearGradient(0, L.y - 30, 0, L.y); L.gradient.forEach((col, i) => g.addColorStop(i / (L.gradient.length - 1), col)); c.fillStyle = g; }
+    c.fillText(L.text, (L.x || ct.x) + (L.spacing && (L.align || 'right') === 'right' ? L.spacing : 0), L.y); c.restore();
+  }
+};
+
+// ---------- 热气（通用：多条正弦卷曲的半透明笔触） ----------
+U.steam = function (c, t, { x, y, h = 70, n = 3, w = 3, color = 'rgba(255,255,255,.8)', spread = 14, speed = 1, seed = 1, wobble = 8 }) {
+  c.save(); c.strokeStyle = color; c.lineCap = 'round'; c.lineWidth = w;
+  for (let k = 0; k < n; k++) {
+    const ox = (k - (n - 1) / 2) * spread;
+    const ph = t * 2.2 * speed + k * 1.7 + seed;
+    c.beginPath();
+    for (let s = 0; s <= 24; s++) {
+      const q = s / 24, yy = y - q * h, xx = x + ox + Math.sin(ph + q * 5) * wobble * q;
+      c.globalAlpha = 1;
+      s ? c.lineTo(xx, yy) : c.moveTo(xx, yy);
+    }
+    const g = c.createLinearGradient(0, y, 0, y - h); g.addColorStop(0, color); g.addColorStop(1, 'rgba(255,255,255,0)');
+    c.strokeStyle = g; c.stroke();
+  }
+  c.restore();
+};
+
+// ---------- 视频层：每个时代可挂一段帧序列（clips/<id>/%04d.jpg），按需异步加载 ----------
+// clip: {dir, fps, n, in, speed, loop}  本段局部时间 lt → 片内时间 in + lt*speed → 帧号
+const FRAMES = new Map();                 // url -> Image（已 decode）
+function clipFrameUrl(e, lt) {
+  const c = e.clip; let ct = (c.in || 0) + Math.max(0, lt) * (c.speed || 1);
+  let i = Math.round(ct * c.fps);
+  if (c.loop === 'pingpong') { const m = 2 * (c.n - 1); i = i % m; if (i >= c.n) i = m - i; } else i = Math.min(c.n - 1, i);
+  return `${c.dir}/${String(i + 1).padStart(4, '0')}.jpg`;
+}
+async function need(url) {
+  if (FRAMES.has(url)) return;
+  const im = new Image(); im.src = url;
+  try { await im.decode(); } catch (e) { const msg = `视频帧缺失或解不开：${url}（clip.dir / n / in 对不上帧序列）`; console.error(msg); throw new Error(msg); }
+  FRAMES.set(url, im);
+  if (FRAMES.size > 240) { const k = FRAMES.keys().next().value; FRAMES.delete(k); }
+}
+function layersAt(t) {
+  let k = ERAS.findIndex(e => t >= e.t0 && t < e.t1); if (k < 0) k = ERAS.length - 1;
+  const out = [k]; const e = ERAS[k];
+  if (k > 0 && e.transition && t - e.t0 < e.transition.dur + (e.transition.delay || 0)) out.push(k - 1);
+  return out;
+}
+window.prepare = async function (t) {
+  await Promise.all(layersAt(t).map(k => ERAS[k].clip ? need(clipFrameUrl(ERAS[k], t - ERAS[k].t0)) : null));
+};
+
+// ---------- 画一个时代（本段局部时间 lt） ----------
+function drawEra(c, e, t, prev, punchFrom, noCounter) {
+  const lt = t - e.t0;
+  c.save();
+  c.clearRect(0, 0, W, H);
+  // 拍点镜头冲击（只作用于场景层，年份牌不缩放）：s(k)=1+0.03·(1-k/20)^1.5，k=转场开始后的帧数
+  // 冲击跟「正在进来的那一段」的转场起点走：转场期间旧段也一起放大（原片拍点那一帧整屏都在冲）
+  const pe = punchFrom || e;
+  // 幅度：transition.punch（数字；false/0 关掉）＞ 片级 window.PUNCH ＞ 0.03。解说/发布会/数据片不要这一下，写 window.PUNCH = 0。
+  const pa = pe.transition ? (pe.transition.punch ?? window.PUNCH ?? 0.03) : 0, amp = pa === true ? 0.03 : +pa || 0;
+  const k60 = amp ? (t - pe.t0) * 60 : 99;
+  const punch = k60 >= 0 && k60 < 20 ? 1 + amp * Math.pow(1 - k60 / 20, 1.5) : 1;
+  c.save(); if (punch !== 1) { c.translate(W / 2, H / 2); c.scale(punch, punch); c.translate(-W / 2, -H / 2); }
+  // 视频帧：等比铺满（MD.cover，不拉伸）；段里写 clipDraw(c, frame, lt, t) 自己摆（推近、焦点、冲印件）。帧没准备好不许静默空白——直接报错
+  if (e.clip) { const url = clipFrameUrl(e, lt), im = FRAMES.get(url);
+    if (!im) throw new Error(`视频帧没加载：${url}（渲染前要先 await window.prepare(t)；render.py 已经这么做，自己写的脚本也要）`);
+    if (e.clipDraw) e.clipDraw(c, im, lt, t); else MD.cover(c, im); }
+  else if (e.plate && !e.draw) c.drawImage(IMG[e.plate], 0, 0, W, H);
+  if (e.draw) e.draw(c, lt, t, IMG, prev);
+  c.restore();
+  if (!noCounter) drawCounter(c, e, t);
+  c.restore();
+}
+
+// ---------- 主渲染 ----------
+function renderFrame(t) {
+  let k = ERAS.findIndex(e => t >= e.t0 && t < e.t1); if (k < 0) k = ERAS.length - 1;
+  const e = ERAS[k], prev = ERAS[k - 1];
+  const tr = e.transition;
+  const trDur = tr ? tr.dur + (tr.delay || 0) : 0;
+  const lt = t - e.t0;
+  if (prev && tr && lt < trDur) {
+    const cut = (tr.counter || window.COUNTER_IN_TRANSITION || 'cut') === 'cut';
+    drawEra(bufA.getContext('2d'), prev, t, ERAS[k - 2], e, cut);
+    drawEra(bufB.getContext('2d'), e, t, prev, undefined, cut);
+    const p = U.clamp((lt - (tr.delay || 0)) / tr.dur);
+    ctx.save(); ctx.clearRect(0, 0, W, H);
+    // o.id / o.from = 进入段 / 离开段的 id：依赖画面内容的转场缓存要带上它（transitions.js 的 once(k, f, o)）
+    TRANSITIONS[tr.type](ctx, bufA, bufB, p, { ...tr, id: e.id, from: prev.id, lt, t, W, H, tmp: bufT, IMG });
+    ctx.restore();
+    if (cut) drawCounter(ctx, p < 0.5 ? prev : e, t);
+  } else {
+    drawEra(ctx, e, t, prev);
+  }
+  if (window.GLOBAL_OVERLAY) window.GLOBAL_OVERLAY(ctx, t);
+  return k;
+}
+window.renderFrame = renderFrame;
+// 单段预览：opt.counter = false 不画角标（自检量帧差时计数器滚动会抬高数字——迁移测试 B）
+window.renderSolo = function (id, lt, opt = {}) { const e = ERAS.find(x => x.id === id); if (!e) throw new Error('renderSolo: 没有这一段 ' + id); const k = ERAS.indexOf(e); drawEra(ctx, e, e.t0 + lt, ERAS[k - 1], undefined, opt.counter === false); };
+
+// ---------- 预览 UI ----------
+if (location.search.includes('render=1')) document.body.classList.add('render');
+const scrub = document.getElementById('scrub'), tt = document.getElementById('tt'); scrub.max = window.__total;
+let playing = false, t0 = 0, base = 0;
+scrub.oninput = () => { playing = false; renderFrame(+scrub.value); tt.textContent = (+scrub.value).toFixed(3); };
+document.getElementById('play').onclick = () => { playing = !playing; t0 = performance.now(); base = +scrub.value; if (playing) loop(); };
+function loop() { if (!playing) return; let t = base + (performance.now() - t0) / 1000; if (t > window.__total) { t = 0; base = 0; t0 = performance.now(); } scrub.value = t; tt.textContent = t.toFixed(3); renderFrame(t); requestAnimationFrame(loop); }
+boot().catch(err => { window.__bootFailed = String(err && err.stack || err); console.error('BOOT FAILED\n' + window.__bootFailed); });
+})();

package/engine/eras.js

@@ -0,0 +1,60 @@
+// 纯代码版：每个时代的画面由 scenes/<id>.js 的 draw(c, lt, t) 程序化绘制。
+// 15 个时代 + 2026 结尾。eighths = 本段占几个八分音符（128 BPM，见 references/风格配方/_音轨_艺术史速通.md）。
+const R = 1866;                                   // 右对齐基准
+const box = (x0, y0, x1, y1, fill, stroke, lw = 4, inset = 0) => c => {
+  c.save(); c.fillStyle = fill; c.fillRect(x0, y0, x1 - x0, y1 - y0);
+  if (stroke) { c.strokeStyle = stroke; c.lineWidth = lw; c.strokeRect(x0 + inset, y0 + inset, x1 - x0 - 2 * inset, y1 - y0 - 2 * inset); }
+  c.restore();
+};
+// 原片复刻：年份牌位置固定、数字连续滚动，转场时角标留在新旧两层里一起变（engine 默认是转场中点硬切，见 drawCounter）
+window.COUNTER_IN_TRANSITION = 'layers';
+window.ERAS = [
+ { id: '01_cave', eighths: 6, 
+   counter: { year: -40000, roll: 0, x: R, y: 114, size: 84, font: 'GochiHand-400', color: '#f3ead8', spacing: 14,
+     suffix: { text: 'BC', size: 44, gap: 18, dy: 0 }, label: { text: 'Cave painting', font: '38px "Kalam-700"', color: '#efe4cf', y: 178 } } },
+ { id: '02_egypt', eighths: 4, transition: { type: 'tiles', dur: 0.42, delay: 0 },
+   counter: { year: -1350, roll: 0.45, x: R, y: 129, size: 100, font: 'IMFellEnglish-400', color: '#6b2318', spacing: 6,
+     suffix: { text: 'BC', size: 50, gap: 14 }, label: { text: 'Egyptian wall painting', font: '34px "EBGaramond-400"', color: '#4a3424', y: 186 } } },
+ { id: '03_greek', eighths: 4, transition: { type: 'cube', dur: 0.32, delay: 0 },
+   counter: { year: -530, roll: 0.47, x: 1855, y: 136, size: 98, font: 'Cinzel-700', color: '#e3a066',
+     box: box(1544, 42, 1888, 208, '#1b1310', '#c8743c', 3, 4),
+     suffix: { text: 'BC', size: 48, gap: 14 }, label: { text: 'ATTIC BLACK-FIGURE', font: '29px "Cinzel-700"', color: '#e8b27c', x: 1855, y: 184, spacing: 2 } } },
+ { id: '04_roman', eighths: 4, transition: { type: 'mosaic', dur: 0.38, delay: 0 },
+   counter: { year: 79, roll: 0.43, x: 1852, y: 132, size: 96, font: 'Cinzel-400', color: '#1d1a17',
+     box: box(1607, 40, 1888, 208, '#f4ede0', '#2b2724', 4, 0),
+     suffix: { text: 'AD', size: 46, gap: 18 }, label: { text: 'ROMAN MOSAIC', font: '26px "Cinzel-400"', color: '#2b2724', x: 1860, y: 182, spacing: 2 } } },
+ { id: '05_gothic', eighths: 4, transition: { type: 'pageTurn', dur: 0.32, delay: 0 },
+   counter: { year: 1290, roll: 0.45, x: R, y: 134, size: 100, font: 'LibreBaskerville-700', color: '#b3222b',
+     label: { text: 'Gothic illumination', font: '36px "IMFellEnglish-400"', color: '#2b211a', y: 184 } } },
+ { id: '06_renaissance', eighths: 4, transition: { type: 'godRays', dur: 0.4, delay: 0, cx: 560, cy: 290 },
+   counter: { year: 1503, roll: 0.42, x: R, y: 142, size: 104, font: 'CormorantGaramond-500', color: '#ece0bf', spacing: 22,
+     label: { text: 'HIGH RENAISSANCE', font: '30px "Cinzel-700"', color: '#e7d9b4', y: 184, spacing: 2 } } },
+ { id: '08_impressionism', eighths: 3, transition: { type: 'dabs', dur: 0.28, delay: 0 },
+   counter: { year: 1874, roll: 0.37, x: R, y: 139, size: 104, font: 'PlayfairDisplay-400i', color: '#5a4f9a',
+     label: { text: 'Impressionism', font: '30px "EBGaramond-600"', color: '#6a5a9a', y: 182 } } },
+ { id: '09_postimp', eighths: 3, transition: { type: 'swirl', dur: 0.28, delay: 0, cx: 560, cy: 340 },
+   counter: { year: 1889, roll: 0.34, x: R, y: 134, size: 104, font: 'LilitaOne-400', color: '#f5d03b', shadow: { color: '#2a2a6a', x: 3, y: 4 },
+     label: { text: 'Post-Impressionism', font: '34px "LilitaOne-400"', color: '#f5d03b', y: 182, shadow: { color: '#2a2a6a', x: 2, y: 3 } } } },
+ { id: '10_nouveau', eighths: 3, transition: { type: 'organic', dur: 0.24, delay: 0, cx: 1330, cy: 320 },
+   counter: { year: 1896, roll: 0.37, x: R, y: 134, size: 96, font: 'LibreBaskerville-700', color: '#3a2a1c',
+     label: { text: 'ART NOUVEAU POSTER', font: '29px "EBGaramond-600"', color: '#3a2a1c', y: 182, spacing: 3 } } },
+ { id: '11_cubism', eighths: 2, transition: { type: 'shards', dur: 0.24, delay: 0 },
+   counter: { year: 1912, roll: 0.23, x: R, y: 134, size: 98, font: 'AlfaSlabOne-400', color: '#1e1b18', spacing: 4,
+     label: { text: 'CUBISM', font: '27px "AlfaSlabOne-400"', color: '#1e1b18', y: 182, spacing: 3 } } },
+ { id: '12_bauhaus', eighths: 2, transition: { type: 'bauhaus', dur: 0.2, delay: 0, cx: 1330, cy: 590 },
+   counter: { year: 1923, roll: 0.2, x: R, y: 134, size: 104, font: 'ArchivoBlack-400', color: '#151515',
+     label: { text: 'bauhaus', font: '36px "Poppins-800"', color: '#c4202b', y: 184 } } },
+ { id: '13_pop', eighths: 2, transition: { type: 'zigzag', dur: 0.16, delay: 0 },
+   counter: { year: 1962, roll: 0.22, x: 1852, y: 144, size: 104, font: 'Anton-400', color: '#111',
+     box: c => { c.save(); c.fillStyle = '#111'; c.fillRect(1637, 40, 253, 170); c.fillStyle = '#f7e23a'; c.fillRect(1643, 46, 241, 158); c.restore(); },
+     label: { text: 'POP ART', font: '30px "Anton-400"', color: '#111', x: 1852, y: 192, spacing: 1 } } },
+ { id: '14_8bit', eighths: 1, transition: { type: 'pixelate', dur: 0.12, delay: 0 },
+   counter: { year: 1985, roll: 0.07, x: R + 4, y: 86, size: 60, font: 'PressStart2P-400', color: '#ffffff', shadow: { color: '#0b1d24', x: 4, y: 4 },
+     label: { text: '8-BIT', font: '30px "PressStart2P-400"', color: '#ffffff', y: 138, shadow: { color: '#0b1d24', x: 3, y: 3 } } } },
+ { id: '15_raytrace', eighths: 1, transition: { type: 'wireframe', dur: 0.14, delay: 0 },
+   counter: { year: 1993, roll: 0.07, x: R, y: 129, size: 104, font: 'Exo2-800i', color: '#ffffff', shadow: { color: '#d23aa6', x: 5, y: 5 },
+     label: { text: 'RAY-TRACED CGI', font: '30px "Exo2-800i"', gradient: ['#ffd84a', '#f08a2a'], y: 182, shadow: { color: '#7a2a7a', x: 2, y: 2 } } } },
+ { id: '16_2026', eighths: 1 + 9 + 8, dur: 4.28, finale: true, transition: { type: 'iris', dur: 0.183, delay: 0 },
+   counter: { year: 2026, roll: 0.4, x: R, y: 132, size: 100, font: 'Poppins-800', color: '#232a5c',
+     label: { text: 'Flat vector illustration', font: '30px "Poppins-600"', color: '#e2554e', y: 182 } } },
+];

package/engine/eras_gallery.js

@@ -0,0 +1,115 @@
+// 全风格样片：skill 里 35 种风格（15 原段＋迁移测试 A–D 的 20 段）各一段，按年代排，用作回归测试与风格目录。
+//   打开：index.html?film=gallery    渲染：render.py --film gallery    验收：qa.py --project scripts/engine --film gallery
+// 每段 5 个八分音符（128 BPM ≈ 1.17s），最后一段 6 个。相邻段用「进入段」的签名转场（原 16 段沿用原片转场，A–D 组用各自配方卡里的转场；
+// 每组第一段原来在片头没有进入转场，样片补了 inkBloom / redWedge / comicPanels / chiaroscuro）。
+// 角标：年份严格单调，所以全片一个年份计数器连续滚动；各段沿用自己风格的字体与版式，label 写风格名。转场中点硬切新旧角标（引擎默认）。
+// name 字段只给总览图/文档用（「年份＋风格名」），引擎不读。
+const R = 1866;
+const box = (x0, y0, x1, y1, fill, stroke, lw = 4, inset = 0) => c => {
+  c.save(); c.fillStyle = fill; c.fillRect(x0, y0, x1 - x0, y1 - y0);
+  if (stroke) { c.strokeStyle = stroke; c.lineWidth = lw; c.strokeRect(x0 + inset, y0 + inset, x1 - x0 - 2 * inset, y1 - y0 - 2 * inset); }
+  c.restore();
+};
+window.ERAS = [
+ { id: '01_cave', name: '洞穴壁画', eighths: 5,
+   counter: { year: -40000, roll: 0, x: R, y: 114, size: 84, font: 'GochiHand-400', color: '#f3ead8', spacing: 14,
+     suffix: { text: 'BC', size: 44, gap: 18, dy: 0 }, label: { text: 'Cave painting', font: '38px "Kalam-700"', color: '#efe4cf', y: 178 } } },
+ { id: '02_egypt', name: '古埃及壁画', eighths: 5, transition: { type: 'tiles', dur: 0.42 },
+   counter: { year: -1350, roll: 0.4, x: R, y: 129, size: 100, font: 'IMFellEnglish-400', color: '#6b2318', spacing: 6,
+     suffix: { text: 'BC', size: 50, gap: 14 }, label: { text: 'Egyptian wall painting', font: '34px "EBGaramond-400"', color: '#4a3424', y: 186 } } },
+ { id: '03_greek', name: '古希腊黑绘陶', eighths: 5, transition: { type: 'cube', dur: 0.32 },
+   counter: { year: -530, roll: 0.4, x: 1855, y: 136, size: 98, font: 'Cinzel-700', color: '#e3a066',
+     box: box(1544, 42, 1888, 208, '#1b1310', '#c8743c', 3, 4),
+     suffix: { text: 'BC', size: 48, gap: 14 }, label: { text: 'ATTIC BLACK-FIGURE', font: '29px "Cinzel-700"', color: '#e8b27c', x: 1855, y: 184, spacing: 2 } } },
+ { id: '04_roman', name: '罗马马赛克', eighths: 5, transition: { type: 'mosaic', dur: 0.38 },
+   counter: { year: 79, roll: 0.4, x: 1852, y: 132, size: 96, font: 'Cinzel-400', color: '#1d1a17',
+     box: box(1607, 40, 1888, 208, '#f4ede0', '#2b2724', 4, 0),
+     suffix: { text: 'AD', size: 46, gap: 18 }, label: { text: 'ROMAN MOSAIC', font: '26px "Cinzel-400"', color: '#2b2724', x: 1860, y: 182, spacing: 2 } } },
+ { id: '20_dunhuang', name: '敦煌壁画', eighths: 5, transition: { type: 'apsara', dur: 0.5 },
+   counter: { year: 720, roll: 0.4, x: 1852, y: 132, size: 92, font: 'LXGWWenKai-500', color: '#2a1a14', box: box(1500, 44, 1880, 204, '#e6d6b2', '#5a2414', 4, 6), suffix: { text: 'AD', size: 40, gap: 14, font: 'Cinzel-700' }, label: { text: '敦煌壁画 · 盛唐', font: '34px "LXGWWenKai-500"', color: '#8a2a1c', x: 1852, y: 184, spacing: 4 } } },
+ { id: '34_shadowpuppet', name: '皮影戏', eighths: 5, transition: { type: 'lampGlow', dur: 0.4, cx: 960, cy: 470 },
+   counter: { year: 1050, roll: 0.4, x: R, y: 132, size: 96, font: 'LXGWWenKai-500', color: '#7a1d12', spacing: 4, suffix: { text: 'AD', size: 40, gap: 14, font: 'Cinzel-700' }, label: { text: '皮影戏 · 北宋', font: '36px "LXGWWenKai-500"', color: '#5a2a14', y: 184, spacing: 4 } } },
+ { id: '05_gothic', name: '哥特手抄本', eighths: 5, transition: { type: 'pageTurn', dur: 0.32 },
+   counter: { year: 1290, roll: 0.4, x: R, y: 134, size: 100, font: 'LibreBaskerville-700', color: '#b3222b',
+     label: { text: 'Gothic illumination', font: '36px "IMFellEnglish-400"', color: '#2b211a', y: 184 } } },
+ { id: '06_renaissance', name: '文艺复兴', eighths: 5, transition: { type: 'godRays', dur: 0.4, cx: 560, cy: 290 },
+   counter: { year: 1503, roll: 0.4, x: R, y: 142, size: 104, font: 'CormorantGaramond-500', color: '#ece0bf', spacing: 22,
+     label: { text: 'HIGH RENAISSANCE', font: '30px "Cinzel-700"', color: '#e7d9b4', y: 184, spacing: 2 } } },
+ { id: '32_rembrandt', name: '伦勃朗明暗法', eighths: 5, transition: { type: 'chiaroscuro', dur: 0.45, cx: 580, cy: 300 },
+   counter: { year: 1642, roll: 0.4, x: R, y: 134, size: 104, font: 'CormorantGaramond-500', color: '#e9c98a', spacing: 10, label: { text: 'Rembrandt · chiaroscuro', font: '34px "IMFellEnglish-400i"', color: '#c9a467', y: 184 } } },
+ { id: '17_ink', name: '水墨写意', eighths: 5, transition: { type: 'inkBloom', dur: 0.45, cx: 560, cy: 740 },
+   counter: { year: 1690, roll: 0.4, x: R, y: 132, size: 100, font: 'LXGWWenKai-500', color: '#1a1612', spacing: 4, label: { text: '水墨写意 · 八大山人', font: '38px "LXGWWenKai-500"', color: '#3a2c22', y: 186, spacing: 4 } } },
+ { id: '08_impressionism', name: '印象派', eighths: 5, transition: { type: 'dabs', dur: 0.28 },
+   counter: { year: 1874, roll: 0.4, x: R, y: 139, size: 104, font: 'PlayfairDisplay-400i', color: '#5a4f9a',
+     label: { text: 'Impressionism', font: '30px "EBGaramond-600"', color: '#6a5a9a', y: 182 } } },
+ { id: '29_seurat', name: '修拉点彩', eighths: 5, transition: { type: 'pointill', dur: 0.34 },
+   counter: { year: 1884, roll: 0.4, x: R, y: 134, size: 100, font: 'Marcellus-400', color: '#20306a', spacing: 6,
+     label: { text: 'SEURAT · LA GRANDE JATTE', font: '27px "Marcellus-400"', color: '#7a3a2a', y: 182, spacing: 2 } } },
+ { id: '09_postimp', name: '后印象派（梵高）', eighths: 5, transition: { type: 'swirl', dur: 0.28, cx: 560, cy: 340 },
+   counter: { year: 1889, roll: 0.4, x: R, y: 134, size: 104, font: 'LilitaOne-400', color: '#f5d03b', shadow: { color: '#2a2a6a', x: 3, y: 4 },
+     label: { text: 'Post-Impressionism', font: '34px "LilitaOne-400"', color: '#f5d03b', y: 182, shadow: { color: '#2a2a6a', x: 2, y: 3 } } } },
+ { id: '19_munch', name: '蒙克表现主义', eighths: 5, transition: { type: 'screamWarp', dur: 0.5 },
+   counter: { year: 1893, roll: 0.4, x: R, y: 134, size: 100, font: 'IMFellEnglish-400', color: '#f6c040', shadow: { color: 'rgba(40,10,20,.6)', x: 4, y: 4 }, label: { text: 'Munch · The Scream', font: '38px "IMFellEnglish-400i"', color: '#f8d88a', y: 184, shadow: { color: 'rgba(40,10,20,.6)', x: 2, y: 3 } } } },
+ { id: '10_nouveau', name: '新艺术运动海报', eighths: 5, transition: { type: 'organic', dur: 0.24, cx: 1330, cy: 320 },
+   counter: { year: 1896, roll: 0.4, x: R, y: 134, size: 96, font: 'LibreBaskerville-700', color: '#3a2a1c',
+     label: { text: 'ART NOUVEAU POSTER', font: '29px "EBGaramond-600"', color: '#3a2a1c', y: 182, spacing: 3 } } },
+ { id: '28_monet', name: '莫奈睡莲', eighths: 5, transition: { type: 'ripple', dur: 0.34, cx: 1000, cy: 600 },
+   counter: { year: 1899, roll: 0.4, x: R, y: 136, size: 104, font: 'PlayfairDisplay-400i', color: '#3e5a86', spacing: 4, shadow: { color: 'rgba(252,248,238,1)', blur: 18, x: 0, y: 0 },
+     label: { text: 'Monet · Nymphéas', font: '36px "PlayfairDisplay-400i"', color: '#4a5f8e', y: 186, shadow: { color: 'rgba(252,248,238,1)', blur: 14, x: 0, y: 0 } } } },
+ { id: '36_picasso_blue', name: '毕加索蓝色时期', eighths: 5, transition: { type: 'blueBrush', dur: 0.42 },
+   counter: { year: 1903, roll: 0.4, x: R, y: 136, size: 108, font: 'Caveat-600', color: '#c9d6e4', label: { text: 'Picasso · période bleue', font: '38px "Caveat-600"', color: '#9fb3cc', y: 188 } } },
+ { id: '18_klimt', name: '克里姆特金色时期', eighths: 5, transition: { type: 'goldLeaf', dur: 0.5, cx: 1300, cy: 380 },
+   counter: { year: 1907, roll: 0.4, x: R, y: 134, size: 100, font: 'Marcellus-400', color: '#f6dc8a', shadow: { color: 'rgba(40,24,6,.7)', x: 3, y: 4, blur: 6 }, label: { text: '克里姆特 · 金色时期', font: '36px "LXGWWenKai-500"', color: '#f3d27a', y: 186, shadow: { color: 'rgba(40,24,6,.7)', x: 2, y: 3, blur: 4 } } } },
+ { id: '11_cubism', name: '立体主义', eighths: 5, transition: { type: 'shards', dur: 0.24 },
+   counter: { year: 1912, roll: 0.4, x: R, y: 134, size: 98, font: 'AlfaSlabOne-400', color: '#1e1b18', spacing: 4,
+     label: { text: 'CUBISM', font: '27px "AlfaSlabOne-400"', color: '#1e1b18', y: 182, spacing: 3 } } },
+ { id: '12_bauhaus', name: '包豪斯', eighths: 5, transition: { type: 'bauhaus', dur: 0.2, cx: 1330, cy: 590 },
+   counter: { year: 1923, roll: 0.4, x: R, y: 134, size: 104, font: 'ArchivoBlack-400', color: '#151515',
+     label: { text: 'bauhaus', font: '36px "Poppins-800"', color: '#c4202b', y: 184 } } },
+ { id: '22_constructivism', name: '构成主义海报', eighths: 5, transition: { type: 'redWedge', dur: 0.4 },
+   counter: { year: 1924, roll: 0.4, x: R, y: 132, size: 104, font: 'Anton-400', color: '#151311',
+     box: c => { c.save(); c.fillStyle = '#c8231c'; c.beginPath(); c.moveTo(1560, 46); c.lineTo(1892, 30); c.lineTo(1892, 152); c.lineTo(1560, 160); c.closePath(); c.fill(); c.restore(); },
+     label: { text: 'CONSTRUCTIVISM', font: '30px "ArchivoBlack-400"', color: '#151311', y: 196, spacing: 4 } } },
+ { id: '33_rubberhose', name: '橡皮管卡通', eighths: 5, transition: { type: 'irisFilm', dur: 0.4, cx: 1236, cy: 420 },
+   counter: { year: 1930, roll: 0.4, x: 1858, y: 134, size: 100, font: 'Rye-400', color: '#141210', spacing: 4, box: c => { c.save(); c.fillStyle = '#efe7d2'; c.strokeStyle = '#141210'; c.lineWidth = 6; c.beginPath(); c.roundRect(1560, 44, 330, 166, 26); c.fill(); c.stroke(); c.restore(); }, label: { text: 'RUBBER HOSE', font: '34px "LilitaOne-400"', color: '#141210', x: 1858, y: 186, spacing: 2 } } },
+ { id: '23_dali', name: '达利超现实', eighths: 5, transition: { type: 'melt', dur: 0.36 },
+   counter: { year: 1931, roll: 0.4, x: R, y: 136, size: 104, font: 'PlayfairDisplay-700i', color: '#f6e8c8', shadow: { color: 'rgba(10,20,50,.55)', x: 5, y: 5, blur: 4 },
+     label: { text: 'Surrealism', font: '34px "PlayfairDisplay-400i"', color: '#f0dcae', y: 184 } } },
+ { id: '24_hopper', name: '霍珀美国现实主义', eighths: 5, transition: { type: 'sunShaft', dur: 0.34 },
+   counter: { year: 1942, roll: 0.4, x: R, y: 134, size: 100, font: 'LibreBaskerville-700', color: '#f3e3b5', shadow: { color: 'rgba(20,30,25,.55)', x: 4, y: 4 },
+     label: { text: 'AMERICAN REALISM', font: '27px "LibreBaskerville-400"', color: '#f0dca8', y: 182, spacing: 3 } } },
+ { id: '30_matisse', name: '马蒂斯剪纸', eighths: 5, transition: { type: 'cutouts', dur: 0.36 },
+   counter: { year: 1947, roll: 0.4, x: R, y: 136, size: 108, font: 'Caveat-600', color: '#111', spacing: 2,
+     label: { text: 'Matisse · Jazz', font: '46px "Caveat-600"', color: '#c8242a', y: 188 } } },
+ { id: '13_pop', name: '波普艺术', eighths: 5, transition: { type: 'zigzag', dur: 0.16 },
+   counter: { year: 1962, roll: 0.4, x: 1852, y: 144, size: 104, font: 'Anton-400', color: '#111',
+     box: c => { c.save(); c.fillStyle = '#111'; c.fillRect(1637, 40, 253, 170); c.fillStyle = '#f7e23a'; c.fillRect(1643, 46, 241, 158); c.restore(); },
+     label: { text: 'POP ART', font: '30px "Anton-400"', color: '#111', x: 1852, y: 192, spacing: 1 } } },
+ { id: '21_kusama', name: '草间弥生波点', eighths: 5, transition: { type: 'dotBloom', dur: 0.48, cx: 540, cy: 760 },
+   counter: { year: 1965, roll: 0.4, x: R, y: 134, size: 104, font: 'Poppins-800', color: '#ffffff', shadow: { color: '#141414', x: 5, y: 5 }, label: { text: '草间弥生 · 无限波点', font: '36px "LXGWWenKai-500"', color: '#ffffff', y: 186, shadow: { color: '#141414', x: 3, y: 3 } } } },
+ { id: '27_kirby', name: 'Kirby 漫画', eighths: 5, transition: { type: 'comicPanels', dur: 0.42 },
+   counter: { year: 1966, roll: 0.4, x: 1858, y: 132, size: 100, font: 'Bangers-400', color: '#151313', spacing: 4,
+     box: c => { c.save(); c.translate(6, 7); c.fillStyle = '#151313'; c.fillRect(1560, 38, 330, 176); c.restore();
+       c.save(); c.fillStyle = '#ffe23a'; c.fillRect(1560, 38, 330, 176); c.strokeStyle = '#151313'; c.lineWidth = 6; c.strokeRect(1560, 38, 330, 176); c.restore(); },
+     label: { text: 'JACK KIRBY · MARVEL', font: '34px "Bangers-400"', color: '#d8202a', x: 1858, y: 190, spacing: 2 } } },
+ { id: '31_haring', name: '哈林涂鸦', eighths: 5, transition: { type: 'radiant', dur: 0.32, cx: 1000, cy: 600 },
+   counter: { year: 1982, roll: 0.4, x: R, y: 136, size: 108, font: 'Kalam-700', color: '#111', spacing: 2,
+     label: { text: 'KEITH HARING', font: '40px "Kalam-700"', color: '#111', y: 188, spacing: 2 } } },
+ { id: '14_8bit', name: '8-bit 像素', eighths: 5, transition: { type: 'pixelate', dur: 0.12 },
+   counter: { year: 1985, roll: 0.4, x: R + 4, y: 86, size: 60, font: 'PressStart2P-400', color: '#ffffff', shadow: { color: '#0b1d24', x: 4, y: 4 },
+     label: { text: '8-BIT', font: '30px "PressStart2P-400"', color: '#ffffff', y: 138, shadow: { color: '#0b1d24', x: 3, y: 3 } } } },
+ { id: '25_ghibli', name: '吉卜力水彩', eighths: 5, transition: { type: 'bleed', dur: 0.38, cx: 580, cy: 330 },
+   counter: { year: 1988, roll: 0.4, x: R, y: 132, size: 104, font: 'Kalam-700', color: '#3f6a4a',
+     label: { text: 'Ghibli-style watercolor', font: '34px "Caveat-600"', color: '#4d7a58', y: 182 } } },
+ { id: '15_raytrace', name: '光追 CGI', eighths: 5, transition: { type: 'wireframe', dur: 0.14 },
+   counter: { year: 1993, roll: 0.4, x: R, y: 129, size: 104, font: 'Exo2-800i', color: '#ffffff', shadow: { color: '#d23aa6', x: 5, y: 5 },
+     label: { text: 'RAY-TRACED CGI', font: '30px "Exo2-800i"', gradient: ['#ffd84a', '#f08a2a'], y: 182, shadow: { color: '#7a2a7a', x: 2, y: 2 } } } },
+ { id: '26_vaporwave', name: '蒸汽波', eighths: 5, transition: { type: 'vhs', dur: 0.3 },
+   counter: { year: 2011, roll: 0.4, x: R, y: 130, size: 104, font: 'Exo2-800i', color: '#ffffff', shadow: { color: '#ff2fb4', x: 6, y: 5 },
+     label: { text: 'VAPORWAVE', font: '32px "Righteous-400"', gradient: ['#7ff6ff', '#ff71ce'], y: 182, spacing: 7, shadow: { color: '#3a0a6a', x: 2, y: 2 } } } },
+ { id: '35_shinkai', name: '新海诚光影', eighths: 5, transition: { type: 'flareSweep', dur: 0.38 },
+   counter: { year: 2016, roll: 0.4, x: R, y: 134, size: 100, font: 'Poppins-600', color: '#ffffff', shadow: { color: 'rgba(40,90,150,.5)', x: 3, y: 4, blur: 4 }, label: { text: 'Makoto Shinkai light', font: '30px "Poppins-600"', color: '#eaf6ff', y: 182, shadow: { color: 'rgba(40,90,150,.5)', x: 2, y: 3 } } } },
+ { id: '16_2026', name: '2026 扁平插画', eighths: 6, transition: { type: 'iris', dur: 0.183 },
+   counter: { year: 2026, roll: 0.4, x: R, y: 132, size: 100, font: 'Poppins-800', color: '#232a5c',
+     label: { text: 'Flat vector illustration', font: '30px "Poppins-600"', color: '#e2554e', y: 182 } } },
+];