@biunow/agent-biuart 0.0.0-stage → 0.1.0

package/engine/demos/y3_whiteboard/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/demos/y4_storytime/eras.js

@@ -0,0 +1,14 @@
+// 示范 · 故事型简笔角色（storytime）「我第一次让 AI 帮我写代码」（8.75 秒五镜）。语法卡：references/动画语法/y4_storytime.md
+//   预览 index.html?film=demos/y4_storytime   渲染 render.py --film demos/y4_storytime --out y4.mp4（口播音轨另配；口型读 vo_env.js 的包络）
+// 镜头按口播切（不是按节拍）：一句口播 ≈ 一个镜头，反应镜头放在两句之间的「沉默」里。
+window.PUNCH = 0;                    // storytime 不卡音乐拍
+window.FILM_DURATION = 8.75;
+window.SCENE_LIBS = ['demos/y4_storytime/vo_env.js', 'demos/y4_storytime/story.js', 'demos/y4_storytime/world.js'];
+window.SCENE_DIR = 'demos/y4_storytime';
+window.ERAS = [
+  { id: 's1_desk', dur: 2.0 },                                                  // 中景：对镜头讲
+  { id: 's2_screen', dur: 2.4, transition: { type: 'whip', dur: 0.26, dir: 1 } }, // 甩镜 → 屏幕（过肩）。甩在两句之间的换气里，别切在句中
+  { id: 's3_react', dur: 1.2, transition: { type: 'smash', dur: 0.32 } },        // 砸镜 → 反应大特写（沉默）
+  { id: 's4_wide', dur: 1.65, transition: { type: 'cut', dur: 0.02 } },          // 硬切 → 同一房间大全景
+  { id: 's5_close', dur: 1.5, transition: { type: 'cut', dur: 0.02 } },          // 跳近 → 近景，笑点＋定住
+];

package/engine/demos/y4_storytime/s1_desk.js

@@ -0,0 +1,18 @@
+// S1 中景：花叔坐在桌后对镜头讲。口播「我第一次让AI帮我写代码，」
+// 动：口型（口播包络，一拍二）、说话点头、呼吸、换姿势回弹（talk → point）、眼神跟手、眨眼、窗外云、镜头慢推＋微漂。
+// 房间、桌子、笔记本都在 world.js（S4/S5 同一个房间换镜头）。
+(() => {
+const S = STORY;
+const KEYS = [[0, 'talk', 'happy'], [1.12, 'point', 'talk']];
+SCENES['s1_desk'] = {
+  draw(c, lt, t) {
+    const ts = MO.step(t, 24);                                     // 角色按 24fps（Flash 默认帧率）走，镜头按 60fps 平滑
+    const zoom = 1.01 + 0.035 * MO.expoOut(Math.min(1, lt / 2.0)) + 0.03 * (1 - MO.expoOut(Math.min(1, lt / 0.5)));   // 开场 1.04→1.01 落定，再慢推 3.5%
+    const [dx, dy] = CAM.drift(t, 4, 1);
+    CAM.with(c, { x: 900 + dx, y: 520 + dy, z: zoom }, c => {
+      const st = S.poseAt(KEYS, ts), al = S.alive(ts, 165);
+      S.world(c, t, { pose: st.pose, expr: st.expr, mouth: TOON.mouth(t), blink: S.blinkAt(ts), look: ts > 1.12 ? [1, 0] : [0, 0], squash: st.squash * al.breathe, bob: al.bob, tilt: ts > 1.12 ? 0.05 : -0.03 });
+    });
+  },
+};
+})();

package/engine/demos/y4_storytime/s2_screen.js

@@ -0,0 +1,82 @@
+// S2 过肩看屏幕：他只打了一行「帮我做个网站」，AI 回了一整面墙的代码，越滚越快，计数器在「三千」那个字上砸出「3000 行」。
+// 动：打字、代码瀑布加速滚、行数计数、3000 砸出＋屏幕震、前景花叔后脑勺随呼吸晃。
+(() => {
+const S = STORY, C = S.C, W = 1920, H = 1080;
+const { clamp, lerp, rng } = U;
+const T_TYPE = 2.30, T_SEND = 2.78, T_SLAM = 3.70;          // 全片时间；3.70 = 口播「三千」
+// 代码行（色块表示，远看就是代码；颜色取常见编辑器主题）
+const COLS = ['#C792EA', '#82AAFF', '#C3E88D', '#F78C6C', '#89DDFF', '#FFCB6B', '#676E95'];
+const LINES = (() => { const r = rng(42), out = []; let ind = 0;
+  for (let i = 0; i < 400; i++) { if (r() < 0.18) ind = Math.min(4, ind + 1); else if (r() < 0.2) ind = Math.max(0, ind - 1);
+    const toks = []; let x = ind * 34; const n = 1 + (r() * 4 | 0); for (let k = 0; k < n; k++) { const w = 30 + r() * 150; toks.push([x, w, COLS[(r() * COLS.length) | 0]]); x += w + 14; }
+    out.push(toks); } return out; })();
+// 滚动位置：发送后 0.25s 开始，加速（三次方），在 SLAM 时达到每秒上千行的视觉速度
+const scrollAt = t => { const q = Math.max(0, t - T_SEND - 0.25); return 46 * (q * 6 + Math.pow(q * 2.6, 3) * 6); };
+const countAt = t => t >= T_SLAM ? 3000 : Math.min(2999, Math.floor(Math.pow(Math.max(0, (t - T_SEND - 0.25)) / (T_SLAM - T_SEND - 0.25), 2.4) * 2999));
+SCENES['s2_screen'] = {
+  draw(c, lt, t) {
+    const slam = t - T_SLAM;
+    const shake = slam > 0 && slam < 0.3 ? MO.settle(slam, 14, 9, 14) : 0;   // 震：9Hz、0.3s 内衰减完
+    const zoom = 1.0 + 0.02 * Math.min(1, lt / 2.2) + (slam > 0 ? 0.04 * MO.expoOut(clamp(slam / 0.12)) : 0);
+    c.fillStyle = '#15161C'; c.fillRect(0, 0, W, H);
+    CAM.with(c, { x: 960 + shake, y: 540 - shake * 0.5, z: zoom }, c => {
+      // 屏幕边框
+      c.fillStyle = '#2B2D36'; c.beginPath(); c.roundRect(150, 40, 1620, 1000, 34); c.fill();
+      c.save(); c.beginPath(); c.roundRect(190, 80, 1540, 920, 14); c.clip();
+      c.fillStyle = C.screen; c.fillRect(190, 80, 1540, 920);
+      // 我的那一行：右侧气泡，打字
+      const sent = MO.at(t, T_SEND, 0.18), scr = scrollAt(t);
+      const bubY = 200 - Math.min(scr, 400);
+      const msg = TY.typed('帮我做个网站', MO.at(t, T_TYPE, 0.4));
+      if (bubY > 60) {
+        c.fillStyle = sent > 0 ? '#3B82F6' : '#2F3342'; const bw = TY.width(c, '帮我做个网站', 40, 'PuHui-Bold') + 60;
+        c.beginPath(); c.roundRect(1680 - bw, bubY - 52, bw, 78, 24); c.fill();
+        TY.text(c, msg + (sent <= 0 && Math.floor(t * 4) % 2 ? '|' : ''), 1680 - bw + 30, bubY + 2, { size: 40, fam: 'PuHui-Bold', color: '#fff', align: 'left' });
+      }
+      // AI 的回复：代码墙，从气泡下方开始往上滚
+      if (t > T_SEND + 0.1) {
+        const top = 300 - scr, lh = 46;
+        const i0 = Math.max(0, Math.floor((150 - top) / lh)), i1 = Math.min(LINES.length * 8, Math.ceil((1000 - top) / lh));
+        for (let i = i0; i < i1; i++) { const y = top + i * lh; if (y < 150 || y > 1000) continue;
+          const shown = MO.at(t, T_SEND + 0.1 + Math.min(i, 12) * 0.03, 0.05); if (shown <= 0) continue;   // 头几行逐行冒出来
+          c.fillStyle = '#4A4F66'; c.fillRect(220, y - 12, 44, 16);
+          for (const [x, w, col] of LINES[i % LINES.length]) { c.fillStyle = col; c.globalAlpha = 0.9; c.beginPath(); c.roundRect(300 + x, y - 14, w * shown, 20, 10); c.fill(); }
+          c.globalAlpha = 1; }
+        // 速度线感：滚太快时整屏加一层竖向拖影
+        const v = (scrollAt(t + 1 / 60) - scr) * 60; if (v > 1500) { c.fillStyle = `rgba(32,34,45,${clamp((v - 1500) / 6000) * 0.5})`; c.fillRect(190, 150, 1540, 850); }
+      }
+      // 顶栏（画在内容之后：滚上去的内容钻到它下面）
+      c.fillStyle = '#2A2D3A'; c.fillRect(190, 80, 1540, 64);
+      ['#FF5F57', '#FEBC2E', '#28C840'].forEach((col, i) => { c.fillStyle = col; c.beginPath(); c.arc(232 + i * 34, 112, 10, 0, Math.PI * 2); c.fill(); });
+      TY.text(c, 'AI助手', 960, 124, { size: 30, fam: 'PuHui-Bold', color: '#9AA3B8' });
+      const n = countAt(t);
+      if (t > T_SEND + 0.2) TY.text(c, `${n}行`, 1700, 124, { size: 32, fam: 'PuHui-Bold', color: n >= 3000 ? '#FFCB6B' : '#9AA3B8', align: 'right' });
+      // 3000 行：砸出来（backOut 过冲 23%）＋底板压暗
+      if (slam > 0) {
+        c.fillStyle = `rgba(10,10,16,${0.6 * MO.expoOut(clamp(slam / 0.15))})`; c.fillRect(190, 80, 1540, 920);
+        TY.pop(c, '3000行', 960, 600, clamp(slam / 0.24), { size: 230, fam: 'PuHui-Black', color: '#FFCB6B', over: 3.5, stroke: '#15161C', strokeW: 18 });
+      }
+      c.restore();
+    });
+    // 前景：花叔的背影（过肩）。不跟镜头推，只随呼吸起伏 —— 前景与屏幕的视差让镜头「有空间」。
+    // 返修：第一版是纯黑剪影，审片读成「另一个影子人」。现在画出主角背面的识别点：白帽＋帽带、耳朵、眼镜腿、后颈、白 T，屏幕那侧加一圈冷色轮廓光。
+    const by = 840 + 6 * Math.sin(2 * Math.PI * t / 1.6) + (slam > 0 ? -MO.settle(slam, 18, 4, 7) : 0), hx = 330, L = C.line;
+    c.save(); c.lineWidth = 7; c.strokeStyle = L; c.lineJoin = 'round'; c.lineCap = 'round';
+    c.fillStyle = '#FFFFFF'; c.beginPath(); c.ellipse(hx, by + 300, 330, 200, 0, Math.PI, 0); c.fill(); c.stroke();            // 肩（白 T）
+    c.fillStyle = '#FFE2CC'; c.beginPath(); c.roundRect(hx - 70, by + 120, 140, 110, 30); c.fill(); c.stroke();                 // 后颈
+    c.strokeStyle = '#E6E6EA'; c.lineWidth = 16; c.beginPath(); c.moveTo(hx - 95, by + 205); c.quadraticCurveTo(hx, by + 175, hx + 95, by + 205); c.stroke(); c.strokeStyle = L; c.lineWidth = 7;   // 领口
+    for (const sx of [-1, 1]) { c.fillStyle = '#FFE2CC'; c.beginPath(); c.ellipse(hx + sx * 196, by + 40, 34, 52, sx * 0.2, 0, Math.PI * 2); c.fill(); c.stroke(); }   // 耳朵
+    c.fillStyle = '#1B1B1F'; c.beginPath(); c.ellipse(hx, by + 40, 190, 175, 0, 0, Math.PI * 2); c.fill();                     // 后脑（短黑发）
+    c.strokeStyle = '#3A3A44'; c.lineWidth = 4; for (let i = -3; i <= 3; i++) { c.beginPath(); c.moveTo(hx + i * 40, by + 130); c.lineTo(hx + i * 44, by + 175); c.stroke(); }   // 发梢
+    c.strokeStyle = L; c.lineWidth = 9; for (const sx of [-1, 1]) { c.beginPath(); c.moveTo(hx + sx * 214, by + 10); c.lineTo(hx + sx * 236, by - 40); c.stroke(); }   // 眼镜腿（挂在耳朵上，往前伸）
+    c.lineWidth = 7;
+    c.fillStyle = '#FFFFFF'; c.beginPath(); c.moveTo(hx - 180, by - 20); c.bezierCurveTo(hx - 180, by - 290, hx + 180, by - 290, hx + 180, by - 20); c.closePath(); c.fill(); c.stroke();   // 帽冠
+    c.save(); c.beginPath(); c.moveTo(hx - 180, by - 20); c.bezierCurveTo(hx - 180, by - 290, hx + 180, by - 290, hx + 180, by - 20); c.closePath(); c.clip(); c.fillStyle = '#E4E4E8'; c.fillRect(hx - 200, by - 85, 400, 40); c.restore();   // 帽带
+    c.fillStyle = '#FFFFFF'; c.beginPath(); c.ellipse(hx, by - 12, 280, 64, 0, 0, Math.PI * 2); c.fill(); c.stroke();          // 帽檐
+    // 屏幕光轮廓（右上侧，冷色）
+    c.globalCompositeOperation = 'source-atop'; c.strokeStyle = 'rgba(140,200,255,0.55)'; c.lineWidth = 14;
+    c.beginPath(); c.ellipse(hx, by - 12, 272, 58, 0, -1.2, 0.1); c.stroke(); c.beginPath(); c.ellipse(hx, by + 300, 322, 192, 0, -1.3, -0.2); c.stroke();
+    c.restore();
+  },
+};
+})();

package/engine/demos/y4_storytime/s3_react.js

@@ -0,0 +1,39 @@
+// S3 反应大特写：砸镜进来，死鱼眼，一言不发。整段是沉默 —— 笑点在「停顿」里。
+// 动：砸镜回弹（转场里）、极慢推进 6%、镜片反光扫过、汗滴滑落、一次慢眨眼、背景暗角呼吸、嘴角抽一下。
+(() => {
+const S = STORY, C = S.C, W = 1920, H = 1080;
+const { clamp } = U;
+SCENES['s3_react'] = {
+  draw(c, lt, t) {
+    const ts = MO.step(t, 24);
+    const lts = ts - 4.4;                               // 本段局部（步进后）
+    // 虚空背景：纯色＋暗角（反应镜头把环境拿掉，只留脸）
+    c.fillStyle = C.void; c.fillRect(0, 0, W, H);
+    const vg = c.createRadialGradient(960, 560, 200, 960, 560, 1100); vg.addColorStop(0, 'rgba(255,255,255,0.10)'); vg.addColorStop(1, 'rgba(0,0,0,0.35)');
+    c.fillStyle = vg; c.fillRect(0, 0, W, H);
+    // 集中线（很淡、极慢转）：漫画「凝固」的符号
+    c.save(); c.translate(960, 560); c.rotate(t * 0.04); c.strokeStyle = 'rgba(255,255,255,0.07)'; c.lineWidth = 6;
+    for (let i = 0; i < 48; i++) { const a = i / 48 * Math.PI * 2; c.beginPath(); c.moveTo(Math.cos(a) * 640, Math.sin(a) * 640); c.lineTo(Math.cos(a) * 1300, Math.sin(a) * 1300); c.stroke(); }
+    c.restore();
+    const zoom = 1 + 0.06 * Math.min(1, lt / 1.2);
+    CAM.with(c, { x: 960, y: 560, z: zoom }, c => {
+      const R = 360;
+      const blink = (lts >= 0.62 && lts < 0.62 + 0.125) ? 1 : 0;            // 慢眨眼：3 帧@24fps（比平时多 1 帧，读作「无语」）
+      const twitch = lts > 0.78 ? 'worry' : 'blank';                         // 第二声蟋蟀后 0.15s 眉毛一垮（声画同一件事）
+      const info = TOON.bean(c, { char: 'author', x: 960, y: 560 + R * 2.1 + 40, s: R, pose: TOON.POSES.stiff, expr: twitch, mouth: 0, blink, look: [0, 0], lw: 12 });
+      // 镜片反光：一条白色斜带从左扫到右（0.15–0.45s）
+      const g = MO.at(lts, 0.15, 0.3);
+      if (g > 0 && g < 1) {
+        const hy = info.head[1];
+        for (const sx of [-1, 1]) { const gx = 960 + sx * R * 0.37, gy = hy + R * 0.2, gr = R * 0.27;
+          c.save(); c.beginPath(); c.arc(gx, gy, gr - 4, 0, Math.PI * 2); c.clip();
+          const bx = gx - gr * 1.6 + g * gr * 3.2; c.fillStyle = 'rgba(255,255,255,0.85)';
+          c.beginPath(); c.moveTo(bx - 30, gy - gr); c.lineTo(bx + 20, gy - gr); c.lineTo(bx - 40, gy + gr); c.lineTo(bx - 90, gy + gr); c.closePath(); c.fill(); c.restore(); }
+      }
+      // 汗滴：太阳穴处，0.35s 起滑落 0.9s
+      const sw = MO.at(lt, 0.35, 0.9);
+      if (sw > 0) TOON.sweat(c, 960 + R * 0.88, info.head[1] - R * 0.1, 34, MO.expoOut(sw) * 0.6 + sw * 0.4);
+    });
+  },
+};
+})();

package/engine/demos/y4_storytime/s4_wide.js

@@ -0,0 +1,16 @@
+// S4 大全景（同一个房间拉远到 0.5 倍）：小小的花叔坐在大房间里。口播「我问它：这些……」
+// 全景让人显得渺小无助 —— 远景本身就是笑点的铺垫。返修：两段停顿里加「眼睛瞟一下电脑再看镜头」、说「这些」时指电脑。
+// 动：口型、眼神（6.2 瞟电脑 → 6.6 回到镜头）、换姿势回弹（talk → point）、吊灯摆、云飘、屏幕光闪、镜头极慢拉远。
+(() => {
+const S = STORY;
+SCENES['s4_wide'] = {
+  draw(c, lt, t) {
+    const ts = MO.step(t, 24);
+    const zoom = 0.53 - 0.03 * MO.quintOut(Math.min(1, lt / 1.65));          // 0.53 → 0.50
+    CAM.with(c, { x: 900, y: 470, z: zoom }, c => {
+      const st = S.poseAt(S.KEYS_END, ts), al = S.alive(ts, 165);
+      S.world(c, t, { pose: st.pose, expr: st.expr, mouth: TOON.mouth(t), blink: S.blinkAt(ts), look: S.lookEnd(ts), squash: st.squash * al.breathe, bob: al.bob, lw: 10 });
+    });
+  },
+};
+})();

package/engine/demos/y4_storytime/s5_close.js

@@ -0,0 +1,18 @@
+// S5 近景（跳近：同机位直接切到 1.9 倍）：「贴哪儿？」——摊手、眉毛内端抬高、头顶「？」弹出，然后定住 0.95s 给笑。
+// 返修：第一版把这句放在全景里，脸只有 110px 高，表情看不清，「？」出来 0.4s 片子就完了。
+(() => {
+const S = STORY;
+SCENES['s5_close'] = {
+  draw(c, lt, t) {
+    const ts = MO.step(t, 24);
+    const zoom = 1.9 + 0.08 * MO.quintOut(Math.min(1, lt / 1.5));           // 跳近后极慢再推 4%
+    CAM.with(c, { x: 870, y: 470, z: zoom }, c => {
+      const st = S.poseAt(S.KEYS_END, ts), al = S.alive(ts, 165);
+      const info = S.world(c, t, { pose: st.pose, expr: st.expr, mouth: TOON.mouth(t), blink: S.blinkAt(ts, [8.3]), look: S.lookEnd(ts), squash: st.squash * al.breathe, bob: al.bob, tilt: ts >= 7.45 ? -0.07 : 0, browUp: ts >= 7.45 ? 0.04 : 0 });
+      // 「？」：问完那一刻弹出（过冲 30%），之后 ±3° 轻晃
+      const q = MO.at(t, 7.80, 0.26);
+      if (q > 0) { c.save(); c.translate(info.head[0] + 165 * 1.4, info.head[1] - 165 * 0.5); c.rotate(0.14 + 0.05 * Math.sin(t * 6)); TOON.mark(c, '？', 0, 0, q, 120); c.restore(); }
+    });
+  },
+};
+})();

package/engine/demos/y4_storytime/story.js

@@ -0,0 +1,25 @@
+// y4 本片共用：配色、姿势时间线（pose-to-pose＋换姿势回弹）、眨眼、字幕。
+// 用到的库：TOON（豆子花叔 bean、poseAt、blinkAt、alive、口型读 VO_ENV）、TY.text（字幕）、CAM（镜头）、MO（步进、弹簧）。
+(() => {
+const S = window.STORY = {};
+// 背景压低饱和与对比、线更细更灰；角色线最黑最粗 —— 视线永远先落到角色上
+S.C = { wall: '#DCE9EC', wall2: '#CFE0E4', floor: '#E8DCC8', desk: '#E2C29B', deskSide: '#CDA97F', bgLine: '#5B6470', line: '#1B1B1F',
+  sky: '#BFE3F5', cloud: '#FFFFFF', laptop: '#C9CDD6', screen: '#20222D', glow: 'rgba(120,200,255,0.35)', void: '#3D405B' };
+S.bgLW = 3;
+// 口播时间（秒，全片时间）：与 共享/音频/build_y4.py 的摆放一致
+S.LINES = [[0.12, 2.0, '我第一次让AI帮我写代码，'], [2.13, 4.40, '它一口气，给了我三千行。'], [5.75, 8.75, '我问它：这些……贴哪儿？']];   // 字幕和镜头切点同一帧换
+
+// 姿势时间线：keys = [[t, poseName, expr], ...]（全片时间）。换姿势 = TOON.poseAt：手臂 0.1s 快切、身体挤压 7% 后弹簧回弹
+S.poseAt = TOON.poseAt;
+// 眨眼：固定时刻表（「随机」间隔 2.4–3.6s 写死），闭眼 2 帧@24fps ≈ 0.083s
+S.blinkAt = (t, extra = []) => TOON.blinkAt(t, [0.9, 3.4, 6.1, ...extra]);
+// 说话时头随音节轻点＋呼吸（1.6s 一周期，±1.2%）
+S.alive = TOON.alive;
+
+// 字幕（中文平台需要烧录；YouTube 原生 storytime 不烧，靠 CC）：白字黑描边，整句切入切出，不做花样
+window.GLOBAL_OVERLAY = (c, t) => {
+  for (const [a, b, s] of S.LINES) if (t >= a && t < b) {
+    TY.text(c, s, 960, 1022, { size: 50, fam: 'PuHui-Bold', color: '#fff', stroke: '#1B1B1F', strokeW: 10, track: 1 });
+  }
+};
+})();

package/engine/demos/y4_storytime/vo_env.js

@@ -0,0 +1,2 @@
+// 由 共享/音频/build_y4.py 生成：口播 RMS 包络，60fps，0..1
+window.VO_ENV = {"fps": 60, "a": [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.558, 0.959, 0.963, 0.984, 0.929, 0.834, 0.614, 0.501, 0.149, 0.385, 0.474, 0.541, 0.516, 0.521, 0.635, 0.651, 0.678, 0.671, 0.608, 0.611, 0.672, 0.455, 0.025, 0.058, 0.088, 0.071, 0.044, 0.639, 1.0, 1.0, 1.0, 0.965, 0.694, 0.498, 0.892, 1.0, 1.0, 0.654, 0.515, 0.5, 0.383, 0.159, 0.013, 0.006, 0.507, 0.883, 0.855, 0.89, 0.803, 0.691, 0.708, 0.498, 0.178, 0.018, 0.002, 0.0, 0.0, 0.0, 0.216, 0.78, 1.0, 1.0, 1.0, 0.99, 0.733, 0.615, 0.538, 0.598, 0.804, 0.838, 0.825, 0.785, 0.631, 0.584, 0.489, 0.348, 0.078, 0.106, 0.096, 0.062, 0.591, 0.877, 0.842, 0.844, 0.843, 0.696, 0.441, 0.207, 0.395, 0.516, 0.565, 0.479, 0.345, 0.422, 0.525, 0.795, 1.0, 1.0, 1.0, 0.917, 0.894, 0.88, 0.876, 0.653, 0.187, 0.05, 0.006, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.04, 0.047, 0.054, 0.698, 1.0, 1.0, 1.0, 0.81, 0.704, 0.724, 0.738, 0.694, 0.615, 0.567, 0.569, 0.461, 0.169, 0.072, 0.074, 0.065, 0.076, 0.679, 0.995, 0.908, 0.739, 0.652, 0.524, 0.315, 0.069, 0.089, 0.089, 0.067, 0.277, 0.744, 0.865, 0.818, 0.726, 0.655, 0.414, 0.039, 0.002, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.079, 0.633, 0.799, 0.847, 0.845, 0.785, 0.707, 0.678, 0.692, 0.724, 0.632, 0.626, 0.633, 0.571, 0.692, 0.86, 0.977, 0.923, 1.0, 0.729, 0.681, 0.407, 0.067, 0.061, 0.324, 0.616, 0.7, 0.654, 0.472, 0.321, 0.289, 0.295, 0.207, 0.054, 0.077, 0.081, 0.089, 0.111, 0.443, 0.625, 0.692, 0.771, 0.564, 0.419, 0.35, 0.274, 0.195, 0.065, 0.039, 0.034, 0.909, 1.0, 1.0, 1.0, 0.589, 0.432, 0.415, 0.315, 0.158, 0.011, 0.001, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.608, 0.957, 0.954, 0.955, 1.0, 0.946, 0.853, 0.768, 0.868, 0.969, 1.0, 1.0, 0.98, 0.714, 0.661, 0.65, 0.456, 0.417, 0.316, 0.051, 0.035, 0.046, 0.037, 0.07, 0.55, 0.946, 0.985, 0.849, 0.779, 0.715, 0.485, 0.151, 0.07, 0.049, 0.001, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.02, 0.068, 0.248, 0.875, 1.0, 1.0, 1.0, 0.98, 0.759, 0.404, 0.081, 0.095, 0.081, 0.387, 0.699, 0.75, 0.71, 0.75, 0.814, 0.513, 0.105, 0.014, 0.001, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.017, 0.056, 0.059, 0.046, 0.043, 0.371, 0.806, 0.956, 1.0, 0.903, 0.681, 0.602, 0.582, 0.514, 0.437, 0.513, 0.786, 0.765, 0.806, 0.761, 0.711, 0.376, 0.04, 0.006, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0]};

package/engine/demos/y4_storytime/world.js

@@ -0,0 +1,73 @@
+// y4 的「世界画布」：S1 中景、S4 大全景、S5 近景是同一个房间、同一套世界坐标，只换镜头。
+// （返修：第一版 S4 另画了一个房间，审片指出空间不连贯；中景镜头偏移露出画框外的黑边。
+//   现在世界铺到 x −1000..2900、y −700..1700，最远的全景 zoom 0.5 也盖得满。）
+// S1 镜头看到的范围 ≈ x 0..1920、y 0..1080；全景时才看得到书架、绿植、吊灯、地板。
+(() => {
+const S = STORY, C = S.C;
+const X0 = -1000, Y0 = -700, WW = 3900, WH = 2400;
+const back = () => PAINT.cached('y4_world_back', WW, WH, g => {
+  g.translate(-X0, -Y0);
+  g.lineWidth = S.bgLW; g.strokeStyle = C.bgLine; g.lineJoin = 'round';
+  g.fillStyle = C.wall; g.fillRect(X0, Y0, WW, WH);
+  // 天花板线、地板
+  g.fillStyle = C.wall2; g.fillRect(X0, Y0, WW, 330); g.beginPath(); g.moveTo(X0, Y0 + 330); g.lineTo(X0 + WW, Y0 + 330); g.stroke();
+  g.fillStyle = C.floor; g.fillRect(X0, 1150, WW, 600); g.fillStyle = '#D2C3AA'; g.fillRect(X0, 1132, WW, 18);
+  g.beginPath(); g.moveTo(X0, 1132); g.lineTo(X0 + WW, 1132); g.moveTo(X0, 1150); g.lineTo(X0 + WW, 1150); g.stroke();
+  // 猫画框（小猫补光灯的草图）
+  g.fillStyle = '#F4EEE2'; g.beginPath(); g.roundRect(1380, 210, 230, 170, 10); g.fill(); g.stroke();
+  g.strokeStyle = '#B9A88E'; g.lineWidth = 4; g.beginPath(); g.arc(1495, 300, 46, 0, Math.PI * 2); g.stroke();
+  g.beginPath(); g.moveTo(1462, 266); g.lineTo(1470, 238); g.lineTo(1484, 258); g.moveTo(1528, 266); g.lineTo(1520, 238); g.lineTo(1506, 258); g.stroke();
+  g.strokeStyle = C.bgLine; g.lineWidth = S.bgLW;
+  // 书架（S1 画外左侧）
+  const r = U.rng(9); g.fillStyle = '#D9C3A0'; g.beginPath(); g.roundRect(-700, 420, 420, 712, 8); g.fill(); g.stroke();
+  for (const sy of [420, 600, 780, 960]) { g.beginPath(); g.moveTo(-700, sy + 160); g.lineTo(-280, sy + 160); g.stroke();
+    let x = -675; while (x < -310) { const w = 22 + r() * 24, h = 90 + r() * 50; g.fillStyle = ['#8FB3C9', '#E7A37B', '#B9C98F', '#C6A0C9'][(r() * 4) | 0]; g.fillRect(x, sy + 160 - h, w, h); g.strokeRect(x, sy + 160 - h, w, h); x += w + 6; } }
+  // 绿植（画外右侧，地上）
+  g.fillStyle = '#E7A37B'; g.beginPath(); g.moveTo(2240, 1140); g.lineTo(2270, 990); g.lineTo(2410, 990); g.lineTo(2440, 1140); g.closePath(); g.fill(); g.stroke();
+  g.fillStyle = '#8DBF8B'; for (const [x, y, rx, ry, a] of [[2290, 900, 40, 110, -0.5], [2340, 870, 40, 128, 0], [2392, 905, 40, 106, 0.5]]) { g.beginPath(); g.ellipse(x, y, rx, ry, a, 0, Math.PI * 2); g.fill(); g.stroke(); }
+});
+// 桌子：S1 里只看得到桌面和挡板上沿；全景看得到桌腿
+const desk = (g) => {
+  g.lineWidth = S.bgLW; g.strokeStyle = C.bgLine; g.lineJoin = 'round';
+  g.fillStyle = C.deskSide; for (const x of [-120, 1960]) { g.fillRect(x, 740, 60, 400); g.strokeRect(x, 740, 60, 400); }
+  g.fillRect(-60, 740, 2020, 320); g.strokeRect(-60, 740, 2020, 320);
+  g.fillStyle = C.desk; g.beginPath(); g.rect(-160, 690, 2240, 50); g.fill(); g.stroke();
+  // 马克杯
+  g.fillStyle = '#F26B4F'; g.beginPath(); g.roundRect(470, 600, 70, 92, 10); g.fill(); g.stroke();
+  g.beginPath(); g.arc(548, 640, 22, -1.2, 1.2); g.lineWidth = 9; g.stroke(); g.lineWidth = S.bgLW;
+};
+const front = () => PAINT.cached('y4_world_front', WW, WH, g => { g.translate(-X0, -Y0); desk(g); });
+
+// ch: 角色参数（TOON.bean 的 o，不含 x/y/s）；返回 bean 的 info
+S.world = (c, t, ch) => {
+  c.drawImage(back(), X0, Y0);
+  // 窗：天空＋慢飘的云（18px/s、12px/s）
+  c.save(); c.beginPath(); c.roundRect(220, 190, 420, 300, 12); c.clip(); c.fillStyle = C.sky; c.fillRect(220, 190, 420, 300);
+  for (const [cx, cy, r, sp] of [[300, 300, 46, 18], [560, 400, 34, 12]]) { const x = 180 + ((cx + t * sp) % 520); c.fillStyle = C.cloud;
+    c.beginPath(); c.arc(x, cy, r, 0, Math.PI * 2); c.arc(x + r * 0.9, cy + 6, r * 0.75, 0, Math.PI * 2); c.arc(x - r * 0.9, cy + 8, r * 0.65, 0, Math.PI * 2); c.fill(); }
+  c.restore();
+  c.lineWidth = S.bgLW; c.strokeStyle = C.bgLine; c.beginPath(); c.roundRect(220, 190, 420, 300, 12); c.stroke();
+  c.beginPath(); c.moveTo(430, 190); c.lineTo(430, 490); c.moveTo(220, 340); c.lineTo(640, 340); c.stroke();
+  // 吊灯（只有全景看得到）：钟摆 1.9s、±4°
+  c.save(); c.translate(860, -370); c.rotate(0.07 * Math.sin(2 * Math.PI * t / 1.9)); c.lineWidth = S.bgLW; c.strokeStyle = C.bgLine;
+  c.beginPath(); c.moveTo(0, 0); c.lineTo(0, 240); c.stroke();
+  c.fillStyle = '#F2C86B'; c.beginPath(); c.moveTo(-90, 330); c.lineTo(-42, 240); c.lineTo(42, 240); c.lineTo(90, 330); c.closePath(); c.fill(); c.stroke(); c.restore();
+  // 角色
+  const info = TOON.bean(c, { x: 860, y: 760, s: 165, char: 'author', ...ch });   // 示范片讲的是作者自己的经历，显式用作者造型（TOON.bean 默认是中性角色）
+  c.drawImage(front(), X0, Y0);
+  // 笔记本（背面朝镜头、斜对着他），屏幕光打在桌上，光随代码滚动微闪
+  c.save(); c.lineWidth = S.bgLW; c.strokeStyle = C.bgLine; c.lineJoin = 'round';
+  const glow = c.createRadialGradient(1240, 690, 10, 1240, 690, 260); glow.addColorStop(0, `rgba(140,210,255,${0.42 + 0.06 * Math.sin(t * 9)})`); glow.addColorStop(1, 'rgba(140,210,255,0)');
+  c.fillStyle = glow; c.fillRect(980, 560, 520, 180);
+  c.fillStyle = C.laptop; c.beginPath(); c.moveTo(1080, 692); c.lineTo(1130, 470); c.lineTo(1420, 470); c.lineTo(1380, 692); c.closePath(); c.fill(); c.stroke();
+  c.fillStyle = '#AEB3BE'; c.beginPath(); c.roundRect(1050, 684, 360, 16, 6); c.fill(); c.stroke();
+  const k = 1 + 0.06 * Math.sin(t * 5);
+  c.translate(1255, 580); c.scale(k, k); c.fillStyle = '#F2A33A'; c.beginPath();
+  for (let i = 0; i < 8; i++) { const a = i / 8 * Math.PI * 2, r = i % 2 ? 14 : 36; c.lineTo(Math.cos(a) * r, Math.sin(a) * r); } c.closePath(); c.fill(); c.stroke();
+  c.restore();
+  return info;
+};
+// S4/S5 共用的姿势时间线（全片时间，跨两个镜头连续）
+S.KEYS_END = [[5.6, 'talk', 'worry'], [6.81, 'point', 'worry'], [7.45, 'shrug', 'worry']];
+S.lookEnd = t => t >= 7.45 ? [0, 0] : t >= 6.81 ? [1, 0.1] : (t >= 6.2 && t < 6.6) ? [1, 0.35] : [0, 0];
+})();

package/engine/demos/y5_kinetic_type/eras.js

@@ -0,0 +1,16 @@
+// 示范 · 动态文字排版（kinetic typography）「AI 写代码的 3 个阶段」 120 BPM，8 秒 = 4 小节 = 16 拍，再静住 0.5s。
+//   语法卡：references/动画语法/y5_kinetic_type.md
+//   预览 index.html?film=demos/y5_kinetic_type   渲染 render.py --film demos/y5_kinetic_type --out y5.mp4
+// 揭开那一帧落在拍上：段起点 = 小节线 − 揭开点 × 转场时长（MO.onBeat）——
+//   fillZoom 揭开点 .55、dur .45 → 2.0−.25 = 1.75；bands 揭开点 ≈.6、dur .5 → 4.0−.3 = 3.7；push 到 90% 位移在 p≈.58、dur .35 → 6.0−.2 ≈ 5.80
+window.PUNCH = 0;                    // 拍点冲击由 kinetic.js 的 K.bump 自己做（每拍 1.2%）
+window.FILM_DURATION = 8.5;
+window.SCENE_LIBS = ['demos/y5_kinetic_type/kinetic.js'];
+window.SCENE_DIR = 'demos/y5_kinetic_type';
+window.ERAS = [
+  { id: 'k1_title', dur: 1.75 },
+  { id: 'k2_complete', dur: 1.95,   // 冲进点选在圆内、避开「3」字形（冲进白字会一片白）
+    transition: { type: 'fillZoom', dur: 0.45, k: 0.55, cx: 1075, cy: 773, maxZoom: 30, fill: '#FF5A36' } },
+  { id: 'k3_chat', dur: 2.1, transition: { type: 'bands', dur: 0.5, gap: 0.12, colors: ['#FFD23F', '#FFFFFF', '#14213D'] } },
+  { id: 'k4_agent', dur: 2.7, transition: { type: 'push', dur: 0.35 } },
+];

package/engine/demos/y5_kinetic_type/k1_title.js

@@ -0,0 +1,38 @@
+// K1 标题：「AI 写代码」两拍砸进来 →「的 3 个阶段」在第三拍落下 → 第四拍其余字快速退场，只剩「3」，镜头冲进 3 的圆里。
+// 入场慢（0.3–0.4s 弹簧）、退场快（0.18s expoIn）——退场比入场快，观众的注意力已经走了。
+(() => {
+const K = KT, C = K.C, b = K.b;
+const { clamp, lerp } = U;
+// 退场：t0 起 0.18s，缩到 0.6、下落 60px、透明
+const exitK = (t, t0) => MO.expoIn(clamp((t - t0) / 0.18));
+SCENES['k1_title'] = {
+  draw(c, lt, t) {
+    c.fillStyle = C.yellow; c.fillRect(0, 0, 1920, 1080);
+    K.dots(c, t, C.ink, 0.08);
+    K.cam(c, t, c => {
+      // 第一行：AI ｜ 写代码
+      const s1 = 300, wAI = TY.width(c, 'AI', s1), wCode = TY.width(c, '写代码', s1), gap = 50, x0 = 960 - (wAI + gap + wCode) / 2, y1 = 470;
+      const ex = [exitK(t, 1.45), exitK(t, 1.48), exitK(t, 1.51), exitK(t, 1.54)];
+      // AI：第 0 拍砸进来，带 -8° → 0° 的旋转回正
+      if (t >= 0) { const k = MO.springHz(t, 2.2, 10), e = ex[0];
+        TY.text(c, 'AI', x0, y1 + 60 * e, { size: s1, align: 'left', color: C.ink, scale: lerp(1.7, 1, k) * (1 - 0.4 * e), rot: -0.14 * (1 - k), alpha: clamp(t / 0.06) * (1 - e), ox: x0 + wAI / 2, oy: y1 - s1 * 0.36 }); }
+      // 写代码：第 1 拍从槽里升起（遮罩），0.35s expoOut
+      { const e = ex[1]; c.save(); c.globalAlpha = 1 - e; c.translate(0, 60 * e);
+        TY.rise(c, '写代码', x0 + wAI + gap, y1, MO.at(t, b(1), 0.35), { size: s1, color: C.ink }); c.restore(); }
+      // 第二行：的 ｜ (3) ｜ 个阶段     圆心 (960, 773) —— 转场从这里冲进去
+      const cy = 773, r = 165;
+      const pc = MO.at(t, b(2), 0.42);
+      if (pc > 0) {
+        const k = MO.backOut(pc, 3.0) * (t > b(3) ? 1 + 0.12 * MO.expoOut(clamp((t - b(3)) / 0.2)) : 1);
+        c.save(); c.translate(960, cy); c.scale(k, k); c.rotate(0.25 * (1 - MO.expoOut(pc)));
+        c.fillStyle = C.coral; c.beginPath(); c.arc(0, 0, r, 0, Math.PI * 2); c.fill();
+        TY.text(c, '3', 0, 92, { size: 270, color: C.white });
+        c.restore();
+      }
+      { const e = ex[2]; TY.text(c, '的', 960 - r - 40, cy + 40 + 60 * e, { size: 120, fam: 'PuHui-Heavy', align: 'right', color: C.ink, alpha: MO.at(t, b(1.75), 0.08) * (1 - e) }); }
+      { const e = ex[3]; c.save(); c.globalAlpha = 1 - e; c.translate(0, 60 * e);
+        TY.rise(c, '个阶段', 960 + r + 40, cy + 52, MO.at(t, b(2.25), 0.35), { size: 150, fam: 'PuHui-Heavy', color: C.ink }); c.restore(); }
+    });
+  },
+};
+})();

package/engine/demos/y5_kinetic_type/k2_complete.js

@@ -0,0 +1,55 @@
+// K2 阶段一「补全」（一小节 = 第 4–7 拍，2.0–4.0s）
+// 第 4 拍主词砸进＋巨型「1」→ 4.5 拍代码卡滑入、开始打字 → 第 5 拍辅句「它补完」升起、5.25 拍「下一行」→
+// 第 6 拍灰色补全闪现＋Tab 键弹出 → 6.5 拍按下 Tab、灰字变实、「下一行」放大 1.35 倍＋荧光笔（字和动作说同一件事）。
+// 返修：辅句原在第 6 拍出、7 个字，到被色带盖住只剩 0.7s；现在提前一拍、压到 6 个字，可读 1.2s。
+(() => {
+const K = KT, C = K.C, b = K.b;
+const { clamp } = U;
+const MONO = 'Menlo';      // 代码用等宽（返修：第一版用了比例字体，不像代码）
+SCENES['k2_complete'] = {
+  draw(c, lt, t) {
+    c.fillStyle = C.coral; c.fillRect(0, 0, 1920, 1080);
+    K.dots(c, t, C.white, 0.1);
+    K.cam(c, t, c => {
+      K.bigNum(c, t, '1', b(4), 1880, 1150, 'rgba(255,255,255,0.13)');
+      TY.rise(c, '阶段 01', 140, 250, MO.at(t, b(4), 0.3), { size: K.SZ.label, fam: 'PuHui-Bold', color: C.white, track: 6 });
+      TY.underline(c, 140, 272, 170, MO.at(t, b(4.25), 0.3), C.white, 6);
+      K.slam(c, '补全', 130, 600, t, b(4), { color: C.white });
+      const sub = '它补完', key = '下一行', sw = TY.width(c, sub, K.SZ.sub, 'PuHui-Heavy'), kw = TY.width(c, key, K.SZ.sub, 'PuHui-Heavy');
+      const ky = 775, kx = 150 + sw;
+      TY.rise(c, sub, 140, ky, MO.at(t, b(5), 0.35), { size: K.SZ.sub, fam: 'PuHui-Heavy', color: C.white });
+      const ksc = t >= b(6.5) ? 1 + 0.35 * MO.springHz(t - b(6.5), 2.5, 9) : 1;
+      K.keyMarker(c, kx, ky, kw, K.SZ.sub, t, b(6.5), ksc, C.yellow);
+      K.key(c, key, kx, ky, t, b(5.25), b(6.5), { size: K.SZ.sub, fam: 'PuHui-Heavy', color: t >= b(6.5) ? C.ink : C.white });
+      // 代码卡：4.5 拍从右侧滑入（expoOut 0.4s，起点 +700px，带 3.4° 回正）
+      const pin = MO.expoOut(MO.at(t, b(4.5), 0.4));
+      if (pin > 0) {
+        const cx = 1010 + 700 * (1 - pin), cy = 330;
+        c.save(); c.translate(cx, cy); c.rotate(0.06 * (1 - pin));
+        c.fillStyle = 'rgba(0,0,0,0.18)'; c.beginPath(); c.roundRect(14, 18, 800, 330, 26); c.fill();
+        c.fillStyle = C.code; c.beginPath(); c.roundRect(0, 0, 800, 330, 26); c.fill();
+        ['#FF5F57', '#FEBC2E', '#28C840'].forEach((col, i) => { c.fillStyle = col; c.beginPath(); c.arc(40 + i * 30, 40, 9, 0, Math.PI * 2); c.fill(); });
+        const T = (s, x, y, col, a = 1) => TY.text(c, s, x, y, { size: 40, fam: MONO, color: col, align: 'left', alpha: a });
+        T('1', 40, 130, '#555A72'); T('function hello() {', 96, 130, '#82AAFF');
+        T('2', 40, 210, '#555A72');
+        const typed = TY.typed('  const name =', MO.at(t, b(4.75), 0.5)); T(typed, 96, 210, '#E9ECF5');
+        const tw = TY.width(c, typed, 40, MONO), acc = t >= b(6.5);
+        // 补全：第 6 拍整段灰字 0 帧闪现（补全本来就是瞬间出现），Tab 按下后变实色
+        if (t >= b(6)) T(" 'huashu';", 96 + tw, 210, acc ? '#C3E88D' : 'rgba(233,236,245,0.35)');
+        T('3', 40, 290, '#555A72'); if (acc) T('}', 96, 290, '#82AAFF', MO.at(t, b(6.6), 0.1));
+        if (Math.floor(t * 4) % 2 === 0) { const cxr = 96 + tw + (acc ? TY.width(c, " 'huashu';", 40, MONO) : 0); c.fillStyle = '#FFD23F'; c.fillRect(cxr + 4, 172, 5, 50); }
+        c.restore();
+      }
+      // Tab 键帽：第 6 拍弹出，6.5 拍按下（压 14%，e^-18t 回弹）
+      const kp = MO.at(t, b(6), 0.3); if (kp > 0) {
+        const press = t >= b(6.5) ? 1 - 0.14 * Math.exp(-(t - b(6.5)) * 18) : 1, s = MO.backOut(kp, 2.6) * press;
+        c.save(); c.translate(1410, 790); c.scale(s, s);
+        c.fillStyle = '#C24128'; c.beginPath(); c.roundRect(-130, -62, 260, 136, 22); c.fill();
+        c.fillStyle = C.white; c.beginPath(); c.roundRect(-130, -76 + (1 - press) * 70, 260, 128, 22); c.fill();
+        TY.text(c, 'TAB', 0, 12 + (1 - press) * 70, { size: 64, fam: 'PuHui-Black', color: C.coral });
+        c.restore();
+      }
+    });
+  },
+};
+})();