@biunow/agent-biuvibe 0.0.0-stage → 1.0.1

package/engine/styles//350/247/243/350/257/264/350/257/255/346/263/225/01_/347/247/221/346/231/256/345/233/276/350/247/243/y3_whiteboard_/347/231/275/346/235/277//347/211/207/346/256/265/344/273/243/347/240/201.js

@@ -0,0 +1,206 @@
+// 片段 · 白板手绘（y3，RSA 型）：说一句写一句、讲到东西就画出来。一支马克笔在白板上写字、画图标、画箭头、圈重点，相机跟着往下走，最后拉远看全图。
+// cues：title（标题，7.5 字/秒起，赶不上下一个 cue 会自动提速）· point（要点：先画一个小圈当项目符号再写，16 字/秒起）
+//       draw（画一个手绘图标：data.icon 见下方 ICONS，text = 图标下的手写说明；和刚写的那条字并排；连续的 draw 用橙箭头连起来，像示范片「一摞图 → 网络」；data.arrow:false 不画箭头）
+//       image（截图/草图：笔走之字形把它「揭开」，再描一圈手绘框；等比放，不裁）
+//       highlight（橙圈圈住一条：data.index = 第几个要点（只数 point，从 0 起，和 t1/y1 同一口径）；
+//                 data.target = 'title' | 'draw' | 'image' 改圈那一类（配 index 数那一类，默认最新）；不写 = 最新写出的那一条；data.style:'underline' 改成划线）
+// 版式：横屏有 draw/image 时左文右图，竖屏有 draw 时图标在右侧窄栏；图标和刚写的那条字并排，连续的图标之间画往下的橙箭头。
+//       横屏纯文字、要点 ≥5 条时分左右两栏。字号随内容多少在 0.72–1.2 倍之间取，尽量一屏放下并撑满；放不下才让相机往下走。
+// 每一笔都在 at 这一帧落下第一点；写字速度＝max(基准速度, 字数 / 到下一个 cue 的间隔)，说到下一句时这句已写完。
+// 笔：两笔之间空档 <0.6s 沿弧线滑过去；更长就 0.35s 退出右下屏外，下一笔前 0.3s 再进来；最后一笔画完一定退场，不留在字上。
+// safe（spec.safe）：内容只排在 top..H−bottom 之间，收尾拉远也只拉进这一带。alpha：墨色外面描一圈白边，叠在深色画面上也看得见。
+CLIPS.y3_whiteboard = (() => {
+const { clamp, lerp } = U;
+const INK = '#0A0503', ORANGE = '#EF7226', WASH = 'rgba(239,114,38,.22)', BOARD = '#FBFBFB';
+const FONT = 'LXGWWenKai-500';
+// ---------- 手绘图标：单位框 [-0.5,0.5]²（y 朝下）里的笔画；o:1 = 橙色强调，seg:1 = 快速直线（网络连线），fill = 铺浅橙 ----------
+const A = (cx, cy, rx, ry, a0, a1, n = 22) => DG.arcPts(cx, cy, rx, ry, a0, a1, n);
+const box = (x0, y0, x1, y1) => [[x0, y0], [x1, y0], [x1, y1], [x0, y1], [x0, y0 + 0.01]];
+const ICONS = {
+  person: () => [{ p: A(0, -0.3, 0.13, 0.13, -Math.PI / 2, Math.PI * 1.55) }, { p: [[0, -0.17], [0, 0.14]] }, { p: [[-0.24, -0.04], [0, -0.1], [0.24, -0.04]] }, { p: [[-0.17, 0.44], [0, 0.14], [0.17, 0.44]] }],
+  cat: () => { const k = 1 / 380, T = pts => pts.map(([x, y]) => [x * k, y * k + 0.44]);
+    return [{ p: T([[-60, -250], [-92, -330], [-30, -300], [30, -300], [92, -330], [60, -250]]) }, { p: T(A(0, -230, 100, 82, -0.55, Math.PI + 0.55, 26).reverse()) },
+      { p: T([[-80, -170], [-120, -60], [-110, 0], [110, 0], [120, -60], [80, -170]]), fill: T([[-80, -170], [-120, -60], [-110, 0], [110, 0], [120, -60], [80, -170], [0, -150]]) },
+      { p: T([[110, -20], [190, -40], [210, -130], [170, -190]]) }, { p: T(A(-38, -240, 12, 16, 0, Math.PI * 2, 14)), w: 0.8 }, { p: T(A(38, -240, 12, 16, 0, Math.PI * 2, 14)), w: 0.8 },
+      { p: T([[-30, -196], [-110, -206]]), w: 0.6 }, { p: T([[30, -196], [110, -206]]), w: 0.6 }]; },
+  network: () => { const C = [[-0.38, [-0.28, 0, 0.28]], [0, [-0.33, -0.11, 0.11, 0.33]], [0.38, [-0.14, 0.14]]], r = 0.06, out = [];
+    for (const [x, ys] of C) for (const y of ys) out.push({ p: A(x, y, r, r, -Math.PI / 2, Math.PI * 1.55, 14), fast: 1 });
+    for (let a = 0; a < 2; a++) for (const y0 of C[a][1]) for (const y1 of C[a + 1][1]) out.push({ seg: [[C[a][0] + r, y0], [C[a + 1][0] - r, y1]] });
+    return out; },
+  doc: () => [{ p: [[0.14, -0.42], [-0.3, -0.42], [-0.3, 0.42], [0.3, 0.42], [0.3, -0.26], [0.14, -0.42], [0.14, -0.26], [0.3, -0.26]] },
+    { p: [[-0.18, -0.12], [0.18, -0.12]], w: 0.7 }, { p: [[-0.18, 0.04], [0.18, 0.04]], w: 0.7 }, { p: [[-0.18, 0.2], [0.06, 0.2]], w: 0.7 }],
+  chat: () => [{ p: [[-0.3, -0.36], [0.3, -0.36], [0.42, -0.24], [0.42, 0.1], [0.3, 0.22], [-0.06, 0.22], [-0.24, 0.4], [-0.2, 0.22], [-0.3, 0.22], [-0.42, 0.1], [-0.42, -0.24], [-0.3, -0.36]] },
+    ...[-0.18, 0, 0.18].map(x => ({ p: A(x, -0.07, 0.035, 0.035, 0, Math.PI * 2, 10), w: 0.9, fast: 1 }))],
+  bulb: () => [{ p: A(0, -0.12, 0.26, 0.26, Math.PI * 0.72, Math.PI * 2.28, 30), fill: A(0, -0.12, 0.26, 0.26, 0, Math.PI * 2, 30) }, { p: [[-0.11, 0.12], [-0.11, 0.27], [0.11, 0.27], [0.11, 0.12]] },
+    { p: [[-0.08, 0.36], [0.08, 0.36]] }, ...[-2.4, -1.57, -0.74].map(a => ({ p: [[Math.cos(a) * 0.34, -0.12 + Math.sin(a) * 0.34], [Math.cos(a) * 0.46, -0.12 + Math.sin(a) * 0.46]], o: 1, fast: 1 }))],
+  check: () => [{ p: [[-0.32, 0.0], [-0.08, 0.26], [0.36, -0.32]], o: 1, w: 1.5 }],
+  cross: () => [{ p: [[-0.28, -0.28], [0.28, 0.28]], o: 1, w: 1.5 }, { p: [[0.28, -0.28], [-0.28, 0.28]], o: 1, w: 1.5 }],
+  screen: () => [{ p: box(-0.44, -0.36, 0.44, 0.2) }, { p: [[0, 0.2], [0, 0.34]] }, { p: [[-0.2, 0.36], [0.2, 0.36]] },
+    { p: [[-0.32, -0.22], [0.06, -0.22]], w: 0.6, fast: 1 }, { p: [[-0.24, -0.1], [0.24, -0.1]], w: 0.6, fast: 1 }, { p: [[-0.24, 0.02], [0.12, 0.02]], w: 0.6, fast: 1 }],
+  stack: () => [2, 1, 0].map(i => ({ p: box(-0.4 + i * 0.09, -0.22 - i * 0.09, 0.2 + i * 0.09, 0.3 - i * 0.09), paper: 1 })).concat([{ p: [[-0.3, 0.2], [-0.14, 0.02], [0, 0.14], [0.1, 0.06], [0.2, 0.2]], w: 0.7 }]),
+  gear: () => { const pts = []; for (let i = 0; i <= 64; i++) { const a = i / 64 * Math.PI * 2, r = (Math.floor(i / 4) % 2) ? 0.3 : 0.4; pts.push([Math.cos(a) * r, Math.sin(a) * r]); }
+    return [{ p: pts }, { p: A(0, 0, 0.12, 0.12, 0, Math.PI * 2.1, 16) }]; },
+  target: () => [{ p: A(0, 0.04, 0.4, 0.4, -Math.PI / 2, Math.PI * 1.55, 32) }, { p: A(0, 0.04, 0.25, 0.25, -Math.PI / 2, Math.PI * 1.55, 24) }, { p: A(0, 0.04, 0.09, 0.09, 0, Math.PI * 2, 12), fill: A(0, 0.04, 0.09, 0.09, 0, Math.PI * 2, 12) },
+    { p: [[0.46, -0.42], [0.02, 0.02]], o: 1 }, { p: [[0.3, -0.42], [0.46, -0.42], [0.46, -0.26]], o: 1 }],
+  clock: () => [{ p: A(0, 0, 0.4, 0.4, -Math.PI / 2, Math.PI * 1.55, 32) }, { p: [[0, -0.26], [0, 0], [0.18, 0.1]] }],
+  chart: () => [{ p: [[-0.42, -0.42], [-0.42, 0.38], [0.44, 0.38]] }, { p: [[-0.32, 0.22], [-0.12, 0.04], [0.06, 0.12], [0.34, -0.26]], o: 1 }, { p: [[0.18, -0.26], [0.34, -0.26], [0.34, -0.1]], o: 1 }],
+};
+let B, keys, items, OFF, lastEnd, band;
+const halo = (c, src, W, H, col, r) => {                          // 透明底：墨色外描一圈白边（8 个方向各压一次剪影）
+  const s2 = UI.scratch('clip_y3halo', W, H), g = s2.getContext('2d'); g.globalCompositeOperation = 'source-over'; g.clearRect(0, 0, W, H);
+  g.drawImage(src, 0, 0); g.globalCompositeOperation = 'source-in'; g.fillStyle = col; g.fillRect(0, 0, W, H); g.globalCompositeOperation = 'source-over';
+  for (let i = 0; i < 8; i++) { const a = i / 8 * Math.PI * 2; c.drawImage(s2, Math.cos(a) * r, Math.sin(a) * r); }
+  c.drawImage(src, 0, 0);
+};
+// 折行但各行等长：先按栏宽折出 n 行，再找「仍是 n 行」的最窄宽度重折（不留一个字孤零零挂在第二行）
+const balance = (g, text, maxW, font) => { const n = TY.wrap(g, text, maxW, font).length; if (n < 2) return [text];
+  let lo = maxW * 0.4, hi = maxW; for (let k = 0; k < 14; k++) { const m = (lo + hi) / 2; if (TY.wrap(g, text, m, font).length > n) lo = m; else hi = m; } return TY.wrap(g, text, hi, font); };
+// 手绘矩形：先把四条边各加密成多点，再加抖动，角还是角（直接对 4 个角点做 Catmull-Rom 会画成一个圆团）
+const rectPts = (x, y, w, h) => { const P = [[x, y], [x + w, y], [x + w, y + h], [x, y + h], [x, y + 3]], out = [];
+  for (let i = 0; i < 4; i++) for (let k = 0; k < 12; k++) out.push([lerp(P[i][0], P[i + 1][0], k / 12), lerp(P[i][1], P[i + 1][1], k / 12)]); out.push(P[4]); return out; };
+function layout(ctx, f) {
+  const { W, H, u, FPS, safe } = ctx, pad = (ctx.portrait ? 80 : 150) * u, lw = 6.5 * u, g = document.createElement('canvas').getContext('2d');
+  const cues = ctx.cues, next = q => { const i = cues.indexOf(q); const n = cues.slice(i + 1).find(z => z.at > q.at + 1e-6); return n ? n.at : ctx.dur; };
+  const hasDraw = cues.some(q => q.kind === 'draw'), hasImg = cues.some(q => q.kind === 'image' && ctx.IMG[q.image]);
+  // 栏：横屏有图就左文右图；竖屏有 draw 时图标排在右侧窄栏、和它说的那条字并排（截图仍整宽）
+  const S = (ctx.portrait ? 250 : 210) * u * f, gap = 70 * u * f;
+  const two = ctx.portrait ? hasDraw : (hasDraw || hasImg);
+  const colP = !two ? null : ctx.portrait ? { x: W - pad - S, w: S } : { x: W * 0.55, w: W * 0.45 - pad };
+  const nPt = cues.filter(q => q.kind === 'point').length, split = !ctx.portrait && !two && nPt >= 5 ? Math.ceil(nPt / 2) : 0;   // 横屏纯文字、要点 ≥5 条：分左右两栏写
+  const colT = { x: pad, w: split ? W / 2 - pad - 40 * u : !two ? W - 2 * pad : ctx.portrait ? colP.x - gap - pad : W * 0.5 - pad };
+  let kPt = 0, col0 = null;
+  // 同一份清单的要点用同一个字号：取「放进一行」要缩到的最小那个（最小 0.72），还放不下的那条再折行
+  const pSize = Math.min(74 * u * f, ...cues.filter(q => q.kind === 'point').map(q => { const r = TY.fit(g, q.text || '', colT.w - 80 * u, 74 * u * f, FONT, { maxLines: 1, min: 0.72, soft: true }); return r.ok ? r.size : 74 * u * f * 0.72; }));
+  const B = DG.board({ ink: INK, lw, speed: 2600 * u, font: `"${FONT}"` }), items = [];
+  const top = (ctx.portrait ? 240 : 130) * u + safe.top;
+  let yT = top, yP = top, lastText = null, lastDraw = null;               // 文字流 / 图流的当前 y
+  const start = q => B.at(Math.max(0, q.at - 1 / FPS));                  // 第一笔在 at 这一帧可见
+  const capSz = (ctx.portrait ? 52 : 50) * u * Math.max(0.85, Math.min(1.1, f)), capRight = !ctx.portrait;   // 横屏说明写在图标右边，竖屏写在下面
+  for (const q of cues) {
+    if (q.kind === 'title' || q.kind === 'point') {
+      const title = q.kind === 'title', indent = title ? 0 : 80 * u, colW = title ? W - 2 * pad : colT.w;
+      const ft = title ? TY.fit(g, q.text || '', colW - indent, 112 * u * f, FONT, { maxLines: 1, min: 0.72, soft: true }) : { size: pSize, lines: TY.wrap(g, q.text || '', colW - indent, `${pSize}px "${FONT}"`) };   // 标题先缩字号放一行，放不下再折行
+      const size = ft.size, lines = ft.lines.length > 1 ? balance(g, q.text || '', colW - indent, `${size}px "${FONT}"`) : ft.lines;
+      const n = [...(q.text || '')].length, room = Math.max(0.35, next(q) - q.at - 0.15 - (title ? 0 : 0.15)), rate = Math.max(title ? 7.5 : 16, n / room);
+      if (title) yT = Math.max(yT, yP);
+      else { if (col0 == null) col0 = yT; if (split && kPt === split) { colT.x = W / 2 + 40 * u; yT = col0; } kPt++; }
+      let y = yT + size * (title ? 1.1 : 1.0);
+      start(q);
+      if (!title) B.line(DG.ellipsePts(colT.x + 26 * u, y - size * 0.32, 15 * u, 15 * u, -1.6, 1.05, 18), { w: lw * 0.9, col: ORANGE, speed: 9000 * u, min: 0.08, gap: 0.02 });
+      const x = (title ? pad : colT.x) + indent, it = { q, kind: q.kind, x, y0: y - size, lines, size };
+      lines.forEach((ln, k) => B.text(ln, x, y + k * size * 1.3, size, { col: INK, rate }));
+      g.font = `${size}px "${FONT}"`; it.w = Math.max(...lines.map(l => g.measureText(l).width)); it.y1 = y + (lines.length - 1) * size * 1.3 + size * 0.25;
+      yT = it.y1 + (title ? 60 : 44) * u * f; items.push(it);
+      if (title) yP = Math.max(yP, yT); else lastText = it;
+    } else if (q.kind === 'draw') {
+      const icon = (q.data && q.data.icon) || '', mk = ICONS[icon];
+      if (!mk && icon) console.warn(`y3 draw：没有图标「${icon}」，可用：${Object.keys(ICONS).join(' ')}（只写说明字）`);
+      // 和刚写的那条字并排（那条字还没配图、且在图流下面）；否则接在图流下面
+      const pair = lastText && !lastText.pic && lastText.y0 >= yP - 1;
+      const y0 = two ? (pair ? lastText.y0 + (lastText.y1 - lastText.y0) / 2 - S / 2 : yP) : yT;
+      const x0 = two ? colP.x : pad, cx = x0 + S / 2, cy = Math.max(y0, two ? yP : y0) + S / 2;
+      if (pair) lastText.pic = true;
+      const prev = lastDraw && !(q.data && q.data.arrow === false) ? lastDraw : null;
+      start(q);
+      const room = Math.max(0.5, next(q) - q.at - 0.15), strokes = mk ? mk() : [];
+      const P = pts => pts.map(([x, y]) => [cx + x * S, cy + y * S]);
+      const capN = [...(q.text || '')].length, arrowL = prev ? Math.max(0, cy - S / 2 - prev.y1) : 0;
+      const len = strokes.reduce((s, k) => s + (k.p ? DG.len(P(k.p)) : 0), 0) + arrowL;
+      const budget = clamp(room - (capN ? Math.max(0.3, capN / 16) : 0) - 0.1, 0.4, 1.4), sp = Math.max(2600 * u, len / budget);
+      if (prev && arrowL > 30 * u) { const ax = prev.cx, ay0 = prev.y1 + 8 * u, ay1 = cy - S / 2 - 8 * u;   // 箭头：上一个图标 → 这一个（往下）
+        B.line([[ax, ay0], [ax + 6 * u, lerp(ay0, ay1, 0.5)], [ax, ay1]], { col: ORANGE, w: lw, speed: sp });
+        const h = Math.min(20 * u, (ay1 - ay0) * 0.4); B.line([[ax - h, ay1 - h], [ax, ay1], [ax + h, ay1 - h]], { col: ORANGE, w: lw, speed: sp, smooth: false }); }
+      for (const k of strokes) {
+        if (k.seg) { B.segment(P([k.seg[0]])[0], P([k.seg[1]])[0], { w: 2.5 * u, dur: 0.05, gap: 0.008 }); continue; }
+        const pts = P(k.p);
+        if (k.paper) B.fill(U.poly(pts), BOARD, 0.01);
+        B.line(pts, { col: k.o ? ORANGE : INK, w: lw * (k.w || 1), speed: sp * (k.fast ? 2 : 1), gap: 0.015 });
+        if (k.fill) B.fill(U.poly(P(k.fill)), WASH);
+      }
+      B.at(B.cur + 0.02);
+      const capMax = capRight ? W - pad - (x0 + S + 24 * u) : W - 2 * pad, cs = q.text ? TY.fit(g, q.text, capMax, capSz, FONT, { maxLines: 1 }).size : capSz;   // 说明字放不下先缩字号
+      g.font = `${cs}px "${FONT}"`; const cw = q.text ? g.measureText(q.text).width : 0, crate = Math.max(16, capN / Math.max(0.3, room - (B.cur - q.at)));
+      const capX = capRight ? x0 + S + 24 * u : clamp(cx, pad + cw / 2, W - pad - cw / 2), capY = capRight ? cy + cs * 0.35 : cy + S / 2 + cs * 1.05;   // 竖屏图标在右侧窄栏：居中的说明字夹回画内
+      if (q.text) B.text(q.text, capX, capY, cs, { col: INK, align: capRight ? 'left' : 'center', rate: crate });
+      const it = { q, kind: 'draw', x: x0, w: S, cx, y0: cy - S / 2, y1: cy + S / 2 + (capRight ? 0 : cs * 1.3),
+        hx: capRight ? x0 : Math.min(x0, capX - cw / 2), hw: capRight ? S + 24 * u + cw : Math.max(x0 + S, capX + cw / 2) - Math.min(x0, capX - cw / 2) };
+      items.push(it); lastDraw = it;
+      if (two) { yP = it.y1 + gap; if (!ctx.portrait) yT = Math.max(yT, pair ? it.y1 + gap * 0.5 : yT); else yT = Math.max(yT, it.y1 + gap * 0.6); }
+      else yT = it.y1 + gap;
+    } else if (q.kind === 'image') {
+      const im = ctx.IMG[q.image]; if (!im) continue;
+      // 右栏的图只用剩下的高度，不让相机为右栏往下走、把左栏的字推出画
+      const inCol = two && !ctx.portrait, y = (inCol ? yP : Math.max(yT, yP)) + 30 * u, box = inCol ? colP : { x: pad, w: W - 2 * pad };
+      const f2 = CLIP.fit(im.width, im.height, box.x, y, box.w, inCol ? Math.max(H * 0.2, Math.min(H * 0.5 * Math.max(0.8, f), H - safe.bottom - 80 * u - y)) : H * (ctx.portrait ? 0.32 : 0.45) * Math.max(0.8, f)), it = { q, kind: 'image', x: f2.x, y0: f2.y, w: f2.w, y1: f2.y + f2.h };
+      const zz = DG.zigzag(f2.x - 20 * u, f2.y - 10 * u, f2.w + 40 * u, f2.h + 20 * u, 7), cum = DG.cum(zz), rowH = (f2.h + 20 * u) / 7;
+      start(q);
+      const s = B.push({ kind: 'custom', t0: B.cur, t1: B.cur + Math.min(1.0, Math.max(0.4, next(q) - q.at - 0.5)), col: INK,
+        draw(gg, p) { gg.save(); if (p < 1) gg.clip(DG.revealMask(zz, cum, cum[cum.length - 1] * p, rowH * 2.6)); gg.drawImage(im, f2.x, f2.y, f2.w, f2.h); gg.restore(); return p < 1 ? DG.pointAt(zz, cum, cum[cum.length - 1] * p) : null; },
+        start() { return zz[0]; }, end() { return zz[zz.length - 1]; } });
+      B.at(s.t1 + 0.02);
+      B.line(rectPts(f2.x - 10 * u, f2.y - 10 * u, f2.w + 20 * u, f2.h + 20 * u), { w: lw * 0.8, speed: 9000 * u, amp: 1.0 * u });
+      yP = f2.y + f2.h + 60 * u; if (!inCol) yT = yP; items.push(it); lastDraw = null;
+    } else if (q.kind === 'highlight') {
+      const d = q.data || {}, written = items.filter(z => z.q.at <= q.at), kind = d.target || (d.index != null ? 'point' : null);
+      const pool = kind ? written.filter(z => z.kind === kind) : written, all = kind ? items.filter(z => z.kind === kind) : items;
+      const it = d.index != null ? all[d.index] : pool[pool.length - 1];
+      if (!it) { console.warn(`y3 highlight at=${q.at}：找不到要圈的条目（index=${d.index} target=${d.target || 'point'}）`); continue; }
+      start(q);
+      const hx = it.hx ?? it.x, hw = it.hw ?? it.w;
+      if (d.style === 'underline') B.line([[hx - 10 * u, it.y1 + 12 * u], [hx + hw / 2, it.y1 + 18 * u], [hx + hw + 10 * u, it.y1 + 10 * u]], { col: ORANGE, w: lw * 1.3, speed: 3000 * u });
+      else B.line(DG.ellipsePts(hx + hw / 2, (it.y0 + it.y1) / 2, hw * 0.56 + 30 * u, (it.y1 - it.y0) * 0.62 + 24 * u, -2.9, 1.08, 44), { col: ORANGE, w: lw, speed: 3600 * u, amp: 1.6 * u });
+    }
+  }
+  const bottom = Math.max(...items.map(z => z.y1), top);
+  return { B, items, bottom, top, pad };
+}
+return {
+  fonts: [FONT],
+  safe: true,
+  init(ctx) {
+    const { W, H, u, safe } = ctx;
+    band = { y0: safe.top, y1: H - safe.bottom }; band.h = band.y1 - band.y0;
+    // 字号系数 f 从 1.2 往下试：内容少就放大撑满版面，内容多就缩（最小 0.72），还放不下才让相机往下走
+    let L; for (let f = 1.2; f >= 0.7; f -= 0.04) { L = layout(ctx, f); if (L.bottom + 70 * u <= band.y1) break; }   // 内容少就放大（最大 1.2）把版面撑满
+    ({ B, items } = L);
+    OFF = [W + 140 * u, H + 280 * u];
+    lastEnd = Math.max(0, ...B.S.map(s => s.t1));
+    // 相机：内容超出可用带就在下一条开写前平移过去（sineInOut）；最后有空就拉远看全图（只拉进 safe 带）
+    keys = [{ t: 0, x: W / 2, y: H / 2, z: 1 }]; let cy = H / 2, panned = false;
+    for (const it of items) {
+      const need = it.y1 + 70 * u - (cy + band.y1 - H / 2); if (need <= 0) continue;
+      panned = true; cy += need + band.h * 0.12; const t1 = Math.max(keys[keys.length - 1].t + 0.2, it.q.at), t0 = Math.max(keys[keys.length - 1].t + 0.01, t1 - 0.6);
+      keys.push({ t: t0, x: W / 2, y: keys[keys.length - 1].y, z: 1 }); keys.push({ t: t1, x: W / 2, y: cy, z: 1, ease: MO.sineInOut });
+    }
+    const y0c = Math.min(L.top, ...items.map(z => z.y0)) - 50 * u, y1c = L.bottom + 40 * u, total = y1c - y0c;
+    const zEnd = Math.min(0.94, band.h / total * 0.96);
+    // 收尾拉远：最后一笔后有 ≥0.6s 才拉；相机走过了的话，就算时间紧也在最后 0.8s 拉（不然末帧标题被切在顶上）
+    const tz0 = Math.max(keys[keys.length - 1].t + 0.01, panned ? Math.min(lastEnd + 0.1, ctx.dur - 0.8) : lastEnd + 0.1);
+    if (ctx.dur - tz0 >= 0.6) {
+      const prev = keys[keys.length - 1]; keys.push({ ...prev, t: tz0, ease: undefined });
+      const midW = (y0c + y1c) / 2, ty = midW - ((band.y0 + band.y1) / 2 - H / 2) / zEnd;     // 全图中心落在 safe 带中心
+      keys.push({ t: Math.min(ctx.dur - 0.15, tz0 + 0.8), x: W / 2, y: ty, z: zEnd, ease: MO.sineInOut });
+    }
+  },
+  draw(c, t, ctx) {
+    const { W, H, u } = ctx, cam = CAM.at(keys, t);
+    const g = ctx.alpha ? (() => { const b = UI.scratch('clip_y3buf', W, H), x = b.getContext('2d'); x.setTransform(1, 0, 0, 1, 0, 0); x.clearRect(0, 0, W, H); return x; })() : c;
+    if (!ctx.alpha) { c.fillStyle = BOARD; c.fillRect(0, 0, W, H); }
+    g.save(); CAM.apply(g, cam); const { tip, col } = B.draw(g, t); g.restore();
+    const pen = penAt(t, cam, tip, ctx);
+    if (pen) DG.pen(g, pen[0], pen[1], col || B.penColor(t), Math.sin(t * 7) * 0.03);
+    if (ctx.alpha) halo(c, g.canvas, W, H, 'rgba(255,255,255,0.92)', 4 * u);
+  },
+};
+// 笔的位置（屏幕）：在画 → 笔尖；空档短 → 沿弧线滑；空档长 → 退出右下再进来；画完最后一笔 → 0.35s 退场（返回 null = 不画）
+function penAt(t, cam, tip, ctx) {
+  if (tip) return CAM.toScreen(cam, tip[0], tip[1]);
+  const hs = B.S.filter(s => s.kind !== 'pop' && s.kind !== 'fill' && (s.kind !== 'custom' || s.handed !== false));
+  let prev = null, next = null; for (const s of hs) { if (s.t1 <= t) prev = s; else if (s.t0 > t && !next) next = s; }
+  if (prev && next && next.t0 - prev.t1 <= 0.6) return B.penAt(t, cam, null);
+  const end = s => B.penAt(s.t1, cam, null);                       // 上一笔终点（屏幕）
+  if (next && next.t0 - t <= 0.3) { const b = CAM.toScreen(cam, ...(next.kind === 'custom' ? next.start() : next.kind === 'line' ? next.pts[0] : [next.x, next.y - next.size * 0.3])), q = MO.cubicOut(1 - (next.t0 - t) / 0.3); return [lerp(OFF[0], b[0], q), lerp(OFF[1], b[1], q)]; }
+  if (prev && t - prev.t1 < 0.35) { const a = end(prev), q = MO.cubicIn((t - prev.t1) / 0.35); return [lerp(a[0], OFF[0], q), lerp(a[1], OFF[1], q)]; }
+  return null;
+}
+})();

package/engine/styles//350/247/243/350/257/264/350/257/255/346/263/225/01_/347/247/221/346/231/256/345/233/276/350/247/243/y3_whiteboard_/347/231/275/346/235/277//347/244/272/350/214/203/345/267/245/347/250/213/eras.js

@@ -0,0 +1,10 @@
+// 示范 · 白板手绘解说（RSA Animate 型）「AI 是怎么学会认猫的」（8 秒三镜）。语法卡：references/动画语法/y3_whiteboard.md
+//   预览 index.html?film=demos/y3_whiteboard   渲染 render.py --film demos/y3_whiteboard --out y3.mp4
+// 一整块大白板＝世界，相机在板上移动；三段是同一个画面函数（DG.board 的笔画时间线），段只是为了 qa 分镜。
+window.PUNCH = 0;
+window.SCENE_LIBS = ['demos/_shared/hero.js', 'demos/y3_whiteboard/whiteboard.js'];
+window.ERAS = [
+  { id: 'y3_s1', dur: 2.5 },                                                  // 画猫、写「猫？」、写问题
+  { id: 'y3_s2', dur: 2.25, transition: { type: 'same', dur: 0.8 } },         // 甩镜（0.8s 带运动模糊，笔不离板）
+  { id: 'y3_s3', dur: 3.25, transition: { type: 'same', dur: 0.85 } },        // 板上平滑移动 → 画花叔、「是猫！」→ 拉远看全图
+];

package/engine/styles//350/247/243/350/257/264/350/257/255/346/263/225/01_/347/247/221/346/231/256/345/233/276/350/247/243/y3_whiteboard_/347/231/275/346/235/277//347/244/272/350/214/203/345/267/245/347/250/213/whiteboard.js

@@ -0,0 +1,162 @@
+// Y3 · 白板手绘解说（RSA Animate 型：一整块大白板＋相机移动）：「AI 是怎么学会认猫的」
+// 依据：语法卡 y3_whiteboard.md（RSA 实测：黑 #0A0503＋唯一强调色橙 #EB701F；写字≈16 字/秒、比口播晚 0.5s；
+//       平滑移动 easeInOutSine 中位 1.8s；远跳用 0.8s 带运动模糊的甩镜；手从右下入画、画完出画；结尾拉远看全图）
+// ①画一只猫、写「猫？」、写问题 → 转场 A「甩镜」：笔不离板，相机 0.8s 甩到板上远处，带运动模糊
+// ②画 1000 万张图的一摞（橙色数字直接弹出、不带手）、箭头、神经网络、「自己找规律」
+// → 转场 B「板上平滑移动」：相机 sine 缓入缓出 0.95s 斜移到旁边空白处，手在相机落定前就开始画
+// ③画花叔指着猫、打勾，橙色「是猫！」弹出 → 收尾「拉远看全图」（RSA / VideoScribe 默认的 Zoom at end），整板铺一层灰
+// 用到的库：DG.board（笔画时间线＋跟随的笔）、DG.pen、DG.revealMask/zigzag（人物 Reveal）、CAM（关键帧相机、运动模糊）。
+(() => {
+const W = 1920, H = 1080;
+const { clamp, lerp, rng } = U;
+const seg = MO.seg;
+const Y3 = window.Y3 = {};
+const F0 = 0; Y3.F0 = F0;
+Y3.SHOTS = { s1: [0, 2.5], s2: [2.5, 4.75], s3: [4.75, 8.0] };
+const INK = '#0A0503', ORANGE = '#EF7226', WASH = 'rgba(239,114,38,.22)', BOARD = '#FBFBFB';
+const LW = 6.5;                                         // RSA 实测笔画约画高 0.6–0.7%（1080p≈6–7px）
+const R1 = [960, 540], R2 = [3000, 540], R3 = [3700, 1360], K3 = 0.8;
+const L3 = (x, y) => [R3[0] + (x - 960) * K3, R3[1] + (y - 540) * K3];
+const SPEED = 2600;                                    // 线条笔速：世界像素/秒（演示片比 RSA 实拍快约 2 倍，见卡片）
+
+// ---------- 笔画时间线：按顺序排，时长 = 长度 / 笔速 ----------
+const B = DG.board({ ink: INK, lw: LW, speed: SPEED, font: '"LXGWWenKai-500"' });
+const tr = DG.xform, arc = DG.arcPts, pathOf = pts => U.poly(pts);
+
+// 猫的笔画（本地坐标，原点 = 坐姿底部中心，约 400 高）
+const catStrokes = (ox, oy, s, sp, w, whiskers = true) => {
+  const P = (pts) => tr(pts, ox, oy, s);
+  B.line(P([[-60, -250], [-92, -330], [-30, -300], [30, -300], [92, -330], [60, -250]]), { w, speed: sp });
+  B.line(P(arc(0, -230, 100, 82, -0.55, Math.PI + 0.55, 26).reverse()), { w, speed: sp });
+  B.line(P([[-80, -170], [-120, -60], [-110, 0], [110, 0], [120, -60], [80, -170]]), { w, speed: sp });
+  B.line(P([[110, -20], [190, -40], [210, -130], [170, -190]]), { w, speed: sp });
+  B.line(P(arc(-38, -240, 12, 16, 0, Math.PI * 2, 14)), { w: w * 0.8, speed: sp * 1.6 });
+  B.line(P(arc(38, -240, 12, 16, 0, Math.PI * 2, 14)), { w: w * 0.8, speed: sp * 1.6 });
+  B.line(P([[-10, -205], [10, -205], [0, -194], [-10, -205]]), { w: w * 0.8, speed: sp * 1.6, smooth: false });
+  if (whiskers) for (const k of [-1, 1]) B.line(P([[k * 30, -196], [k * 110, -206]]), { w: w * 0.6, speed: sp * 2 });
+};
+const catBody = (ox, oy, s) => pathOf(tr([[-80, -170], [-120, -60], [-110, 0], [110, 0], [120, -60], [80, -170], [60, -160], [0, -150], [-60, -160]], ox, oy, s));
+
+// ===== 第一块 =====
+B.at(0.12);
+catStrokes(760, 820, 1.0, SPEED * 0.75, LW + 1);
+B.fill(catBody(760, 820, 1.0), WASH);
+B.text('猫？', 1060, 560, 150, { col: ORANGE, rate: 7.5 });                                    // 标题级：7.5 字/秒
+B.line([[1080, 610], [1020, 660], [930, 690]], { col: ORANGE });
+B.line([[960, 668], [928, 690], [966, 704]], { col: ORANGE, smooth: false });
+B.text('AI 怎么认出它？', 960, 960, 84, { align: 'center' });                                 // 正文：16 字/秒
+B.line([[1290, 590], [1500, 560], [1760, 540]], { col: ORANGE, speed: SPEED * 1.6 });           // 指向下一块的橙箭头：甩镜有了方向
+B.line([[1725, 512], [1764, 540], [1728, 572]], { col: ORANGE, smooth: false });
+const END1 = B.cur;
+// 甩镜时笔不离板：笔尖在屏幕上从第一块的箭头头滑向第二块的起笔点，板在笔下飞过，留下一条橙色连线（笔一直在画，视线一直被它领着）。
+// 轨迹 = 屏幕上的笔位置按当时的相机反算成世界点（第一次画时算好）。
+const trail = { kind: 'custom', from: [1764, 540], to: [2382, 278], t0: B.cur + 0.01, t1: 3.3, col: ORANGE, w: LW, wob: 14,
+  draw(g, q) {
+    const s = this;
+    if (!s.pts) { const N = 72, a = CAM.toScreen(camAt(s.t0), ...s.from), b = CAM.toScreen(camAt(s.t1), ...s.to); s.pts = [];
+      for (let i = 0; i <= N; i++) { const u = i / N, cm = camAt(lerp(s.t0, s.t1, u)), e = MO.sineInOut(u), sx = lerp(a[0], b[0], e), sy = lerp(a[1], b[1], e) + Math.sin(u * Math.PI * 3) * s.wob * Math.sin(u * Math.PI);
+        s.pts.push(CAM.toWorld(cm, sx, sy)); }
+      s.cum = DG.cum(s.pts); }
+    const k = q * (s.pts.length - 1), i = Math.floor(k), f = k - i, d = s.cum[i] + (i < s.pts.length - 1 ? (s.cum[i + 1] - s.cum[i]) * f : 0);
+    g.strokeStyle = s.col; g.lineWidth = s.w; return DG.drawPartial(g, s.pts, s.cum, d);
+  },
+  start() { return this.from; }, end() { return this.pts ? this.pts[this.pts.length - 1] : this.to; } };
+B.push(trail);
+
+// ===== 第二块（相机 2.5→3.3 甩过来） =====
+B.at(3.31);
+for (let i = 2; i >= 0; i--) { const x = 2330 + i * 26, y = 330 - i * 26; B.fill(pathOf([[x, y], [x + 260, y], [x + 260, y + 190], [x, y + 190]]), BOARD, 0.01); B.line([[x, y], [x + 260, y], [x + 260, y + 190], [x, y + 190], [x, y + 3]], { w: 6, speed: SPEED * 4.5, smooth: false, amp: 0 }); }
+B.line(tr([[-60, -250], [-92, -330], [-30, -300], [30, -300], [92, -330], [60, -250], ...arc(0, -230, 100, 82, -0.55, Math.PI + 0.55, 20).reverse(), [-60, -250]], 2460, 560, 0.4), { w: 5, speed: SPEED * 3, gap: 0 });
+B.line(tr([[-38, -240], [-38, -236], [38, -236], [38, -240]], 2460, 560, 0.4), { w: 6, speed: SPEED, smooth: false, gap: 0.01 });
+B.pop('×1000万张', 2470, 690, 74, { col: ORANGE });
+B.line([[2680, 450], [2800, 452], [2860, 450]]);
+B.line([[2830, 425], [2864, 450], [2830, 476]], { smooth: false });
+const NET = [[2960, [330, 450, 570]], [3090, [300, 450, 600]], [3220, [400, 500]]];
+for (const [x, ys] of NET) for (const y of ys) B.line(arc(x, y, 26, 26, -Math.PI / 2, Math.PI * 1.55, 16), { w: 6, speed: SPEED * 5, amp: 0.8, min: 0.03, gap: 0.01 });
+for (let a = 0; a < 2; a++) for (const y0 of NET[a][1]) for (const y1 of NET[a + 1][1]) B.segment([NET[a][0] + 26, y0], [NET[a + 1][0] - 26, y1], { w: 3 });
+B.at(B.cur + 0.05);
+B.text('自己找规律', 3090, 780, 64, { align: 'center' });
+// 橙色连线：从网络引向下一块（相机开始移动时画，手领着相机走）
+B.at(4.62); B.line([[3250, 470], [3420, 560], [3480, 760], [3420, 900]], { col: ORANGE, speed: SPEED * 1.4 }); B.line([[3392, 868], [3420, 902], [3452, 872]], { col: ORANGE, smooth: false });
+const END2 = B.cur;
+
+// ===== 第三块（相机 5.1→6.05 平滑斜移；手在 5.8 就入画开画） =====
+B.at(5.35);
+// VideoScribe 的 Reveal 画法——完整线稿藏在下面，笔尖从上往下走 8 行之字形，笔过之处揭开（笔尖永远在揭开的前沿上）
+const huashu = () => { const [x, y] = L3(500, 1010); return HUASHU.build({ x, y, s: 0.95 * K3, face: 1, pose: HUASHU.pose('point', 0, { ua1: 1.25, mouth: 0.8 }) }); };
+const rigZig = (HSb) => { if (rigZig.c) return rigZig.c; const js = Object.values(HSb.J).filter(v => Array.isArray(v)); const xs = js.map(v => v[0]), ys = js.map(v => v[1]);
+  const x0 = Math.min(...xs) - 70, x1 = Math.max(...xs) + 50, y0 = Math.min(...ys) - 20, y1 = Math.max(...ys) + 40, rows = 8;
+  rigZig.rowH = (y1 - y0) / rows; const zz = DG.zigzag(x0, y0, x1 - x0, y1 - y0, rows); return (rigZig.c = { zz, cum: DG.cum(zz) }); };
+const RIG3 = { t0: B.cur, t1: B.cur + 0.7 };
+B.push({ kind: 'custom', t0: RIG3.t0, t1: RIG3.t1,
+  draw(g, q, ft) {
+    const HSb = huashu(), { zz, cum } = rigZig(HSb), d = cum[cum.length - 1] * q;
+    g.save(); if (q < 1) g.clip(DG.revealMask(zz, cum, d, rigZig.rowH * 2.2)); g.lineJoin = 'round'; g.lineCap = 'round';   // 揭完就不再裁：之字形拐角处的三角会漏掉
+    const [fx, fy] = L3(500, 1010);
+    if (!HERO.y3(g, fx, fy, 0.95 * K3 * 740, ft)) {
+      for (const p of HSb.parts) { g.fillStyle = p.role === 'hair' ? INK : BOARD; g.fill(p.path); g.strokeStyle = INK; g.lineWidth = LW * 0.9; g.stroke(p.path); }
+      HUASHU.details(g, HSb, { line: INK, lw: 4.5, glass: INK, cheek: null, earLine: 'rgba(0,0,0,.5)', shoeHole: INK });
+    }
+    g.restore();
+    return q < 1 ? DG.pointAt(zz, cum, d) : null;
+  },
+  start() { return rigZig(huashu()).zz[0]; }, end() { const z = rigZig(huashu()).zz; return z[z.length - 1]; } });
+B.at(RIG3.t1 + 0.03);
+catStrokes(...L3(1150, 900), K3 * 0.95, SPEED * 1.6, LW, false);
+B.line([L3(1000, 330), L3(1070, 400), L3(1240, 200)], { col: ORANGE, w: LW + 2, speed: SPEED * 1.5, smooth: false });
+B.pop('是猫！', ...L3(1500, 410), 150 * K3, { col: ORANGE, align: 'left' });
+// 收尾：拉远的同时圈住「是猫！」，全景停住时回到第一块，在问题下面划一道——问题和答案连上，笔停在最后一笔上
+B.at(Math.max(B.cur + 0.02, 6.95));
+B.line(DG.ellipsePts(...L3(1720, 360), 300 * K3, 120 * K3, -2.9, 1.08, 40), { col: ORANGE, w: LW, speed: SPEED * 1.1 });
+B.at(Math.max(B.cur + 0.06, 7.52));
+B.line([[640, 1000], [960, 1006], [1290, 998]], { col: ORANGE, w: LW + 2, speed: SPEED * 0.9 });
+const END3 = B.cur;
+Y3.timeline = { END1, END2, END3, RIG3 };
+Y3.board = B;
+
+// ---------- 相机 ----------
+const OVER = { x: 2400, y: 930, z: 0.45 };
+const camAt = ft => CAM.at([
+  { t: 0, x: R1[0], y: R1[1], z: 1.0 },
+  { t: 2.5, x: R1[0] + 12, y: R1[1] + 6, z: 1.02, ease: MO.sineInOut },
+  // 甩镜：0.8s（RSA 实测远跳约 0.8s，带运动模糊）
+  { t: 3.3, x: R2[0], y: R2[1], z: 1.0, ease: MO.cubicInOut },
+  { t: 4.7, x: R2[0] + 16, y: R2[1] + 6, z: 1.02, ease: MO.sineInOut },
+  // 板上平滑移动：easeInOutSine 0.9s（实测中位 1.8s，演示片压缩）
+  { t: 5.6, x: R3[0], y: R3[1] - 20, z: 1.12, ease: MO.sineInOut },
+  { t: 6.85, x: R3[0] + 10, y: R3[1] - 14, z: 1.14, ease: MO.sineInOut },
+  // 拉远看全图，停 0.5s
+  { t: 7.5, ...OVER, ease: MO.sineInOut },
+  { t: 8.0, ...OVER, z: OVER.z * 0.985, ease: MO.sineInOut },
+], ft);
+Y3.camAt = camAt;
+
+// ---------- 画 ----------
+const drawBoard = (c, cam, ft) => {
+  // 结尾整板铺一层灰（RSA 实测），在拉远时 0.5s 淡入
+  const gray = MO.sineInOut(seg(ft, 6.9, 7.4));
+  c.fillStyle = gray > 0 ? PAINT.rgb(PAINT.mix(PAINT.hex(BOARD), [238, 238, 236], gray)) : BOARD; c.fillRect(0, 0, W, H);
+  // 极淡的擦痕：屏幕空间平铺、跟着相机平移走（不随缩放放大）
+  const sm = PAINT.cached('y3smudge', 1024, 1024, g => { const r = rng(5); for (let i = 0; i < 22; i++) { g.fillStyle = `rgba(120,120,130,${0.003 + r() * 0.005})`; g.beginPath(); g.ellipse(r() * 1024, r() * 1024, 80 + r() * 200, 14 + r() * 40, r() * 3, 0, 7); g.fill(); } });
+  c.save(); const ox = -(((cam.x * cam.z) % 1024) + 1024) % 1024, oy = -(((cam.y * cam.z) % 1024) + 1024) % 1024; c.translate(ox, oy); c.fillStyle = c.createPattern(sm, 'repeat'); c.fillRect(0, 0, W + 1024, H + 1024); c.restore();
+  c.save(); CAM.apply(c, cam);
+  const r = B.draw(c, ft);
+  c.restore();
+  return r;
+};
+const shot = (c, lt, t) => {
+  const ft = t - F0, cam = camAt(ft);
+  const buf = PAINT.scratch('yt_y3board'), g = buf.getContext('2d'); g.reset();
+  const { tip, col } = drawBoard(g, cam, ft);
+  const [vx, vy] = CAM.velocity(camAt, ft);
+  c.fillStyle = BOARD; c.fillRect(0, 0, W, H);
+  const whip = ft > 2.5 && ft < 3.3;                    // 只有甩镜带模糊；板上平滑移动和结尾拉远都是清楚的（RSA 实测）
+  CAM.motionBlur(c, buf, whip ? vx * 0.8 : 0, whip ? vy * 0.8 : 0, 9);
+  const [hx, hy] = B.penAt(ft, cam, tip);
+  DG.pen(c, hx, hy, col || B.penColor(ft), Math.sin(ft * 7) * 0.03);   // 只有一支马克笔，笔尾帽 = 墨色
+};
+Y3.shot1 = shot; Y3.shot2 = shot; Y3.shot3 = shot;
+SCENES['y3_s1'] = { draw: shot };
+SCENES['y3_s2'] = { draw: shot };
+SCENES['y3_s3'] = { draw: shot };
+})();

package/engine/styles//350/247/243/350/257/264/350/257/255/346/263/225/01_/347/247/221/346/231/256/345/233/276/350/247/243/y3_whiteboard_/347/231/275/346/235/277//350/257/255/346/263/225/345/215/241.md

@@ -0,0 +1,182 @@
+# Y3 · 白板手绘解说（RSA Animate 型）：视频动画语法卡
+
+一句话：讲者说一句，手就在一张大白板上写一句、画一个图；相机跟着论证在板上移动，最后拉远，观众看到整场论证是一张图。
+
+示范片：`scripts/engine/demos/y3_whiteboard/`（渲染 `render.py --film demos/y3_whiteboard`）（8s，3 镜，转场 2 种＋收尾拉远），总览：`assets/动画语法/y3_whiteboard_总览.jpg`
+依据：本风格的调研（调研原文与逐帧数据留在实验归档、没收进 skill，用到的数字已摘进本卡）。实测了 RSA Animate《Changing Education Paradigms》和 Minute Physics《Why is it Dark at Night?》，还查了 VideoScribe、Doodly 的官方文档和 Andrew Park、Henry Reich 的一手说法。
+
+**先选一种语法，不能混**：
+- RSA 型：一整块大白板，相机在板上移动，每分钟 5.3 次。
+- Minute Physics 型：一页一张纸，硬切换纸，每分钟 8.1 次，相机不动。
+- 本卡和示范片走 RSA 型。Minute Physics 型的要点写在 ④ 和 ⑧ 里。
+
+---
+
+## ① 适用场景
+
+**用它：**
+- 论证型内容：演讲、观点、因果链、历史脉络。概念之间有关系、能画成一张地图的内容最合适。Andrew Park 的原话是「把信息摆在空间里，让人看见事物之间的关系」【一手】。
+- 一条推理链的短科普，走 Minute Physics 型。
+- 口播语速平稳，关键词清楚。RSA 的写字速度大约等于语速，像「字幕被手写出来」【实测】。
+
+**别用它：**
+- 需要精确数据图表的内容，手绘误差大。
+- 动作和空间关系复杂的内容，白板没有景深。
+- 需要情绪强度的内容，单色线稿表达弱。
+- 想靠它「提升理解」：Türkay 2016 的实验没发现白板动画比其他形式学得更好。它的价值在吸引注意和陪伴感【二手】。
+
+## ② 画面构成
+
+- **配色**（RSA 实测）：
+  - 底：纯白 `#FBFBFB`
+  - 线：黑 `#0A0503`
+  - 唯一强调色：橙，文字 `#EB701F`，填色 `#F3742D`；斜线排出的浅橙面约 `#E9A67C`
+  - 橙色约占全部笔迹像素的 22%，只用在关键词和斜线填色上。
+  - Minute Physics 则是偏粉的米白纸 `#E7DBE1`，加彩铅浅黄 `#EDE6A2` 和浅蓝 `#B5CBE8`。
+- **【本片】**：底 `#FBFBFB`，线 `#0A0503`，强调 `#EF7226`。猫身用 22% 透明度的橙色铺一层。
+- **线宽**：RSA 笔画约为画高的 0.6–0.7%，1080p 下约 6–7px；阴影斜线约 0.3%；标题字高约为画高的 5.5%。Minute Physics 的线更粗，约 0.8%【实测】。【本片】线宽 6.5px。
+- **构图**：
+  - RSA 是「先规划好最终全图，再倒着画」【一手】。
+  - 每块画面里有 3–6 个图文组块，画满再移走。
+  - 平滑移动一次只移 0.23 个画宽，所以新旧两块大面积重叠，观众始终看得到上一块的边【实测】。
+  - 收尾露出的全图是一条很长的横向长卷。
+- **字**：RSA 是全大写的手写印刷体（漫画对白体）。【本片】中文用霞鹜文楷（LXGW WenKai），子集化成 woff。
+- **手**：
+  - 真人右手握黑马克笔，从**右下方**入画，前臂斜向右下，遮住 15–25% 的画面。
+  - 不画的时候整只手出画。手在画面里的时间：RSA 49%，Minute Physics 40%【实测】。
+  - 【本片】代码画的手：裸前臂带暗面和汗毛，食指压黑马克笔，缩放 0.82，按 7 rad/s 轻轻晃。
+
+## ③ 运动轨迹
+
+- **写字速度**【实测，9 例】：
+  - 正文中位约 16 字符/秒。
+  - 片头标题慢一半，约 7.5 字符/秒，用来「立题」。
+  - 口播约 13 字符/秒，所以写字速度大致等于语速。
+  - 【本片】正文 16 字/秒；「猫？」按标题 7.5 字/秒写。
+- **画图速度**【实测＋归纳】：
+  - 小图标 0.5–1s，人物头像约 2s。
+  - RSA 新增墨迹的面积中位是每秒 0.25% 画面。
+  - 复杂插画不当着镜头画：要么预先画好，相机移过去时露出来；要么整张硬切进来，手只补色。
+- **【本片】**：
+  - 线条笔速 2600 世界像素/秒，约为 RSA 实拍的 2 倍。8 秒演示片必须压缩，真片请放慢。
+  - 笔画时长按长度除以笔速算，每笔至少 0.04s，抬笔间隔 0.02s。
+  - 每笔内部用 sineInOut，起笔、收笔慢。
+  - 花叔用 0.7s「Reveal」揭开：笔尖在他的关节包围盒里走 8 行之字形，`DG.revealMask` 把走过的地方变成 clip，线稿只在 clip 里露出。
+  - 第一版是按部件 `setLineDash` 同时描、笔尖沿关节走，审片判「笔不领线」，所以换了。
+  - 汉字没有笔顺数据，每个字用 3 行之字形揭开，笔尖跟着来回，看起来就是在写。
+- **加速倍率**：Henry Reich 每秒拍 1 张照片，画画时每张停 2 帧，等效约 12 倍速。RSA 推断 5–8 倍【一手＋推断】。
+- **「不带手」的弹出**：RSA 有一部分橙色关键词是后期整词弹出的，没有手画（ANAESTHETIC、CREATIVITY）【实测】。【本片】「×1000万张」「是猫！」用 0.3s backOut(2.2) 弹出，手不过去。
+- **笔尖路径**：
+  - 两笔之间间隔 <0.25s 时，笔尖从上一笔终点沿弧线滑到下一笔起点（sineInOut，抬高 30px）。
+  - 间隔更长时，抬手出画：0.35s cubicIn 退到右下屏外。
+  - 下一笔开始前 0.3s，从右下 cubicOut 进来。
+- **持续运动**：白板片的「活」来自手一直在画。RSA 的画线活动量和说话词密度之间几乎不相关（|r|<0.07）：说话停顿时，手也不停【实测】。
+
+## ④ 转场（常用 5 种）
+
+1. **板上平滑移动或推拉**（RSA 主力，41 次）。
+   - 1.2–2.4s，**easeInOutSine**：实测速度峰值/均值 1.49，理论 sine 是 1.57。
+   - 一次平移约 0.23 画宽，与上一块重叠约 75%。
+   - 【本片】转场 B：0.9s sineInOut（4.7→5.6s），斜移约 0.5 画宽，同时推到 1.12 倍。移动开始时手正在画一支橙色连线引向新区域，手领着相机走。
+2. **甩镜**：快速摇加运动模糊，约 0.8s，一次移 0.5–1.2 画宽，用来跳到板上很远的区域（RSA 15 次）。
+   - 【本片】转场 A：0.8s cubicInOut 横移约一整屏。只在这 0.8s 里沿速度方向叠 9 次做模糊；平滑移动和拉远都保持清楚。
+3. **拉远揭示全图**（收尾）。
+   - RSA 片尾：灰色铺满 → 0.6s 快速拉远 → 约 9s 横摇扫过长卷 → 再拉远看全图。
+   - VideoScribe 默认就勾着「Zoom at end?」【一手】。
+   - 【本片】6.85→7.5s sineInOut 拉到 0.45 倍，停 0.5s，同时整板在 0.5s 里铺一层很浅的灰 `#EEEEEC`。
+4. **云团或爆炸擦除**：卡通烟团铺满再散开，约 1s（RSA 1 次）。
+5. **硬切**：硬切到预先画好的图（RSA 少量）；Minute Physics 型的换纸硬切（主力，每分钟 8.1 次）；Minute Physics 讲黑夜时整帧反相。
+
+**注意**：「推进到画框或泡泡里」「翻页」在样片里都没出现。本片第一版做了「推进思考泡泡」，看过调研后换成甩镜加平滑移动。
+
+## ⑤ 节奏与文字
+
+- **每块停留**：RSA 两次相机移动之间中位 6.6s（四分位 4.0–13.8s）；Minute Physics 每个镜头中位 7.1s【实测】。示范片 8s 放了 3 块，约为真片密度的 2.5 倍。
+- **和口播对齐（核心）**【实测】：
+  - 开写比对应短语开说晚 0.2–0.8s，中位 +0.5s。
+  - 短语说完后 1s 内写完：边说边写，稍微落后，**不抢先**。
+  - 例外是视觉铺垫（药瓶、箭头）会提前几秒画好，等台词说到。
+  - Minute Physics 是名词一说出来图就落下，中位 +0.3s。
+- **转场卡话题，不卡停顿**：新的一块板对应一个新论点【实测＋归纳】。
+- **音乐**：RSA 在讲话下面**没有音乐**。Minute Physics 全程有音乐垫底，约比人声低 9dB【实测】。
+- **工具默认值**：
+  - VideoScribe 画完停留默认 0.5s【一手】，相机移动默认 1s【二手】。
+  - Doodly 每个素材默认画 3s【一手】。
+
+## ⑥ 代码实现要点
+
+> 收进 skill 后（2026-10-04 v0.4）：本卡「新写」里的通用函数已统一进 `scripts/engine/lib/`（名字已换成统一后的 MO / CAM / DG / TY / CH / UI / CL / TOON），示范片自己的代码在 `scripts/engine/demos/y3_whiteboard/`。库速查和「怎么为一段口播选语法」见 `references/09-视频动画语法.md`。
+
+- 复用 skill：
+  - `KIT.densify / KIT.resample`：Catmull-Rom 加密后按弧长等距重采样，`DG.hand` 在这之上加低频噪声
+  - `PAINT.noise`、`PAINT.cached`
+  - `HUASHU.build/pose/details`：花叔线稿
+  - 引擎转场接口
+- 新写、现已统一进库（`lib/diagram.js` / `camera.js`）：
+  - `DG.cum / DG.pointAt / DG.drawPartial`：折线按长度描出，返回笔尖位置。
+  - `CAM.at`：关键帧相机。
+  - `CAM.motionBlur`：运动模糊。
+  - `DG.revealMask / DG.zigzag`：之字形揭开遮罩（审片后新加）。
+- 示范片自己的（`demos/y3_whiteboard/whiteboard.js`；笔画时间线、笔间滑移、马克笔已进库为 `DG.board` / `B.penAt` / `DG.pen`）：
+  - **笔画时间线**：`addLine / addText / addPop / addFill` 按顺序排，时长由长度和速度自动算，交付时打印 `Y3.timeline` 核对每块的结束时间。第一版第二块排到了 7.9s，比相机移动晚了 2.5s，靠这个数才发现。
+  - `drawStroke`：线、字、弹出、填色、角色五种。字和角色都用之字形遮罩揭开，笔尖坐标直接取遮罩的前沿。
+  - `penAt`：笔尖与手的路径，包括笔间滑移、抬手出画、入画。
+  - `drawHand`：手和马克笔。
+  - 擦痕纹理放在屏幕空间，只跟相机平移、不跟缩放，否则推近 5 倍时会变成大灰斑。
+- **关键架构**：三镜画的是同一块白板、同一台相机，转场全是 `same`。「转场」本身就是相机运动，所以白板上的东西在转场里绝不会跳。
+
+## ⑦ 代表作品与一手参考
+
+- 样片：
+  - RSA ANIMATE: Changing Education Paradigms https://www.youtube.com/watch?v=zDZFcDGpL4U
+  - MinutePhysics: Why is it Dark at Night? https://www.youtube.com/watch?v=gxJ4M7tyLRE
+- Andrew Park 访谈（Sketchnote Army 2025）https://sketchnotearmy.com/blog/2025/11/18/andrew-park
+- Cognitive Media「毛手」https://www.hairyhand.co/about
+- VideoScribe 官方文档：
+  - 相机与 Zoom at end https://help.videoscribe.co/knowledge/use-zoom-and-set-the-camera
+  - Draw 入场 https://help.videoscribe.co/knowledge/draw
+  - 入场动画 https://help.videoscribe.co/knowledge/entrance-animations
+- Doodly 默认值 https://support.voomly.com/en/articles/12735753-doodly-how-do-i-customize-video-settings
+- 学习效果研究（转引）https://en.wikipedia.org/wiki/Whiteboard_animation
+
+## ⑧ 最容易做错的 3 件事
+
+1. **一块画满才说话，或者说完才画**。白板片的魔力是「说一句写一句」：写字速度等于语速，比口播晚约 0.5s。先画后说会让观众等，先说后画会让画变成多余的复述。复杂插画不要现场画，预先画好，相机移过去露出来。
+2. **每次都整屏切到下一块空白**。RSA 的平滑移动只移 0.23 画宽，新旧区域大面积重叠，观众一直知道自己在一张大图的哪里。只在跳到远处时才用 0.8s 甩镜加模糊。收尾一定要拉远看全图，这是这个类型的落点。
+3. **颜色多、线太细或太均匀、手一直挂在画面上**。只用黑加一个强调色，线宽约为画高的 0.65%。手只在画的时候入画，画完就从右下退出；强调词可以不带手直接弹出。另外别把 RSA 和 Minute Physics 混用：要么一张大白板加相机移动，要么一页一张纸加硬切。
+
+---
+
+## 审片与修订（独立 agent 只看成片，6/10，三片里最低）
+
+审片意见和这一轮的处理：
+- 「笔尖不领着线走，花叔好几笔同时冒出来；字是遮罩擦出来的」：
+  - 花叔改成 VideoScribe 的 Reveal 画法：完整线稿藏在下面，笔尖走 8 行之字形，笔过之处揭开，笔尖永远在前沿上。
+  - 字改成逐字写：每个字一段时间，笔尖在字框里 3 行之字形来回，遮罩跟着揭开。
+  - 新写 `DG.revealMask`（同向绕行的方条并集，nonzero 下重叠不抵消）和 `DG.zigzag`。
+- 「甩镜后 0.4s 死区」：第二块提前到 3.12s 开画，手在甩镜收尾时就入画。
+- 「截图框线穿过猫头」：每个框先填一层白板色再描边，前框盖住后框的线。
+- 「『自己找规律』被上缘切一半」：第三块整体下移 60px。
+- 「拉远后灰底和擦痕像脏墙」：灰底减淡到 `#EEEEEC`，擦痕透明度减半。
+- 「全景只停 0.15s、三组画没连起来」：
+  - 第一块结尾加一支橙箭头指向右边，甩镜有了方向。
+  - 第二块结尾画一支橙色连线引向第三块，手领着相机走。
+  - 拉远提前到 6.85–7.5s，全景停 0.5s。
+- 「手是蓝袖子卡通手」：改成裸前臂，带暗面和汗毛，更接近 RSA 的真人手。仍是代码画的。
+
+## QA（skill `scripts/qa.py`，修订后终版）
+
+| 镜 | 量的窗口（镜内秒） | 运动面积% 均/峰 | 静止帧对% | 跳变帧 | 每帧耗时 均/峰 ms | 确定性 |
+|---|---|---|---|---|---|---|
+| y3_s1 | 0.35–2.48 | 3.1 / 5.31 | 0.0 | 0 | 6.5 / 6.9 | ✓ 逐像素一致 |
+| y3_s2 | 0.8–2.23 | 4.65 / 9.57 | 0.0 | 0 | 6.5 / 7.3 | ✓ 逐像素一致 |
+| y3_s3 | 0.85–3.23 | 4.45 / 10.94 | 0.0 | 0 | 8.3 / 9.0 | ✓ 逐像素一致 |
+
+转场冒烟（每个转场渲一遍，最慢一帧）：y3_s2（same）46.9ms；y3_s3（same）14ms
+
+读法：
+- 白板片三镜都没有跳变：所有「转场」都是同一块板上的相机运动，板上的东西不会跳。
+- 运动面积 3–4.7% 主要来自手和正在画的线，相机移动时会更高。
+- 每帧不到 10ms，因为全是矢量线条，没有像素级处理。
+
+复跑：`uv run scripts/qa.py --project scripts/engine --film demos/y3_whiteboard --out <目录>`（上表是实验时的数字；收进 skill 后的复跑见 09 号的回归表）。

package/engine/styles//350/247/243/350/257/264/350/257/255/346/263/225/02_/346/226/260/351/227/273/344/270/216/346/225/260/346/215/256/t2_keynote_ui_/345/217/221/345/270/203/344/274/232//345/217/202/346/225/260/347/244/272/344/276/213.json

@@ -0,0 +1,17 @@
+{
+  "grammar": "t2_keynote_ui",
+  "duration": 10,
+  "fps": 30,
+  "width": 1920,
+  "height": 1080,
+  "data": { "eyebrow": "全 新 发 布", "title": "参数化动画片段", "subtitle": "一份 JSON，出一段时长精确的动画" },
+  "cues": [
+    { "at": 0.0, "kind": "title" },
+    { "at": 2.2, "kind": "card", "text": "8 种动画语法", "sub": "从 3Blue1Brown 到动态文字", "data": { "icon": "layers" } },
+    { "at": 3.0, "kind": "card", "text": "时长精确到帧", "sub": "帧数 = 时长 × 帧率", "data": { "icon": "clock", "value": 30, "suffix": " fps", "label": "默认帧率" } },
+    { "at": 3.8, "kind": "card", "text": "横竖屏都能出", "sub": "竖屏自动换一套排版", "data": { "icon": "phone" } },
+    { "at": 6.0, "kind": "number", "text": "英伟达五个财年的营收涨幅", "data": { "value": 7.8, "decimals": 1, "suffix": " 倍" } },
+    { "at": 7.2, "kind": "card", "text": "用 t3 财经图表出的一帧", "sub": "数据：英伟达 2021–2025 财年 10-K 年报", "image": "assets/财经图表_横屏.png" },
+    { "at": 8.4, "kind": "highlight", "data": { "rect": [0.648, 0.245, 0.104, 0.105] } }
+  ]
+}