Step 3: 手绘动画引擎 + 15 个场景 + 横竖屏布局

README.md

@@ -24,7 +24,7 @@ pinned: false
 |---|------|------|
 | 1 | 写计划 / 大纲 / 步骤（本文件） | ✅ 完成 |
 | 2 | 旁白文案定稿 + TTS 生成配音 + 时长表（15 场景 / 77 句 / 约 6 分钟，旁白+商人+助手三种声线） | ✅ 完成 |
-| 3 | 动画引擎 + 全部场景（横屏 16:9 / 竖屏 9:16 双布局） | ⏳ |
+| 3 | 动画引擎 + 全部 15 个场景（横屏 16:9 / 竖屏 9:16 双布局，已用无头浏览器逐句截图验证） | ✅ 完成 |
 | 4 | 程序化音乐 + 音效 + 旁白混音（WebAudio 离线渲染） | ⏳ |
 | 5 | 播放器 UI + MP4 本地导出（24/30/60fps，横/竖屏） | ⏳ |
 | 6 | 抖音 / B站 发布文案（可一键复制） | ⏳ |

shouhouzi/js/draw.js

@@ -0,0 +1,629 @@
+/* =========================================================
+ * draw.js —— 手绘涂鸦风绘图库（角色 + 道具），全部程序化绘制
+ * 约定：所有函数都是纯函数，给定参数和 D.boil 就得到确定的画面
+ * ========================================================= */
+(function () {
+  const TAU = Math.PI * 2;
+  const INK = '#2b2321';
+  const FONT = '"KuaiLe","ZCOOL KuaiLe","PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif';
+  const C = {
+    ink: INK, paper: '#fbf3e1', sky: '#bfe7ff', sky2: '#eaf7ff', grass: '#9fd468', grass2: '#7fbf4f',
+    forest: '#4f9e55', forest2: '#3b8346', fur: '#a8693b', fur2: '#8a5229', face: '#f5d6a8',
+    gold: '#ffcd3c', gold2: '#f2a51a', red: '#ff5b4f', green: '#38b86a', blue: '#4a8fe2',
+    purple: '#7a5cc7', pink: '#ff8fb1', skin: '#ffd9b8', white: '#fffdf8', grey: '#9aa0a6',
+  };
+
+  function hash(n) { const s = Math.sin(n * 127.1 + 311.7) * 43758.5453123; return s - Math.floor(s); }
+  const D = { TAU, INK, C, FONT, boil: 0, hash };
+  // 线条"抖动"：随 boil 每秒变化 8 次，营造手绘动画感
+  function jit(seed, amt) { return (hash(seed * 1.37 + D.boil * 17.13) - 0.5) * 2 * amt; }
+  D.jit = jit;
+  const clamp01 = (x) => Math.max(0, Math.min(1, x));
+  D.clamp01 = clamp01;
+  D.lerp = (a, b, k) => a + (b - a) * k;
+
+  /* ---------- 缓动 ---------- */
+  const E = {
+    lin: clamp01,
+    out: (x) => 1 - Math.pow(1 - clamp01(x), 3),
+    in: (x) => Math.pow(clamp01(x), 3),
+    inout: (x) => { x = clamp01(x); return x < .5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2; },
+    back: (x) => { x = clamp01(x); const c = 1.9; return 1 + (c + 1) * Math.pow(x - 1, 3) + c * Math.pow(x - 1, 2); },
+    elastic: (x) => { x = clamp01(x); if (x === 0 || x === 1) return x; return Math.pow(2, -10 * x) * Math.sin((x * 10 - .75) * (TAU / 3)) + 1; },
+    bounce: (x) => { x = clamp01(x); const n = 7.5625, d = 2.75; if (x < 1 / d) return n * x * x; if (x < 2 / d) return n * (x -= 1.5 / d) * x + .75; if (x < 2.5 / d) return n * (x -= 2.25 / d) * x + .9375; return n * (x -= 2.625 / d) * x + .984375; },
+  };
+  D.E = E;
+
+  /* ---------- 基础路径 ---------- */
+  D.blob = function (ctx, cx, cy, rx, ry, seed = 1, amt = 0.035, n = 16) {
+    const pts = [];
+    for (let i = 0; i < n; i++) {
+      const a = i / n * TAU, r = 1 + jit(seed + i * 3.1, amt);
+      pts.push([cx + Math.cos(a) * rx * r, cy + Math.sin(a) * ry * r]);
+    }
+    ctx.beginPath();
+    let p0 = pts[n - 1], p1 = pts[0];
+    ctx.moveTo((p0[0] + p1[0]) / 2, (p0[1] + p1[1]) / 2);
+    for (let i = 0; i < n; i++) {
+      const p = pts[i], q = pts[(i + 1) % n];
+      ctx.quadraticCurveTo(p[0], p[1], (p[0] + q[0]) / 2, (p[1] + q[1]) / 2);
+    }
+    ctx.closePath();
+  };
+  D.rrect = function (ctx, x, y, w, h, r = 12, seed = 1, amt = 1.6) {
+    const j = (k) => jit(seed + k, amt);
+    r = Math.min(r, w / 2, h / 2);
+    ctx.beginPath();
+    ctx.moveTo(x + r + j(1), y + j(2));
+    ctx.quadraticCurveTo(x + w / 2, y + j(3), x + w - r + j(4), y + j(5));
+    ctx.quadraticCurveTo(x + w, y, x + w + j(6), y + r + j(7));
+    ctx.quadraticCurveTo(x + w + j(8), y + h / 2, x + w + j(9), y + h - r + j(10));
+    ctx.quadraticCurveTo(x + w, y + h, x + w - r + j(11), y + h + j(12));
+    ctx.quadraticCurveTo(x + w / 2, y + h + j(13), x + r + j(14), y + h + j(15));
+    ctx.quadraticCurveTo(x, y + h, x + j(16), y + h - r + j(17));
+    ctx.quadraticCurveTo(x + j(18), y + h / 2, x + j(19), y + r + j(20));
+    ctx.quadraticCurveTo(x, y, x + r + j(1), y + j(2));
+    ctx.closePath();
+  };
+  D.line = function (ctx, x1, y1, x2, y2, seed = 1, amt = 2) {
+    ctx.beginPath();
+    ctx.moveTo(x1 + jit(seed, amt * .5), y1 + jit(seed + 1, amt * .5));
+    ctx.quadraticCurveTo((x1 + x2) / 2 + jit(seed + 2, amt), (y1 + y2) / 2 + jit(seed + 3, amt), x2 + jit(seed + 4, amt * .5), y2 + jit(seed + 5, amt * .5));
+  };
+  D.poly = function (ctx, pts, seed = 1, amt = 1.5) {
+    ctx.beginPath();
+    pts.forEach((p, i) => { const x = p[0] + jit(seed + i * 2, amt), y = p[1] + jit(seed + i * 2 + 1, amt); i ? ctx.lineTo(x, y) : ctx.moveTo(x, y); });
+    ctx.closePath();
+  };
+  D.fs = function (ctx, fill, lw = 5, stroke = INK) {
+    if (fill) { ctx.fillStyle = fill; ctx.fill(); }
+    if (lw) { ctx.lineWidth = lw; ctx.strokeStyle = stroke; ctx.lineJoin = 'round'; ctx.lineCap = 'round'; ctx.stroke(); }
+  };
+  D.stroke = function (ctx, lw = 5, color = INK) { ctx.lineWidth = lw; ctx.strokeStyle = color; ctx.lineJoin = 'round'; ctx.lineCap = 'round'; ctx.stroke(); };
+  D.thick = function (ctx, x1, y1, x2, y2, color, w, seed = 1) { // 带描边的粗线（手臂/腿）
+    D.line(ctx, x1, y1, x2, y2, seed, 1.5); D.stroke(ctx, w + 8, INK);
+    D.line(ctx, x1, y1, x2, y2, seed, 1.5); D.stroke(ctx, w, color);
+  };
+
+  /* ---------- 文字 ---------- */
+  D.font = (size) => `${size}px ${FONT}`;
+  D.text = function (ctx, str, x, y, size, color = INK, o = {}) {
+    ctx.save();
+    ctx.translate(x, y);
+    if (o.rot) ctx.rotate(o.rot);
+    if (o.scale) ctx.scale(o.scale, o.scale);
+    ctx.font = D.font(size);
+    ctx.textAlign = o.align || 'center';
+    ctx.textBaseline = o.base || 'middle';
+    if (o.alpha != null) ctx.globalAlpha *= o.alpha;
+    if (o.stroke) { ctx.lineWidth = o.stroke; ctx.strokeStyle = o.strokeColor || INK; ctx.lineJoin = 'round'; ctx.strokeText(str, 0, 0); }
+    if (o.shadow) { ctx.fillStyle = o.shadow; ctx.fillText(str, o.sx || 4, o.sy || 6); }
+    ctx.fillStyle = color; ctx.fillText(str, 0, 0);
+    ctx.restore();
+  };
+  // 粗描边大字（海报字）
+  D.bigText = function (ctx, str, x, y, size, color, o = {}) {
+    D.text(ctx, str, x, y, size, color, Object.assign({ stroke: size * 0.16, shadow: 'rgba(43,35,33,.9)', sx: size * .05, sy: size * .08 }, o));
+  };
+
+  /* ---------- 通用变换 ---------- */
+  D.at = function (ctx, x, y, s, fn, rot = 0, alpha = 1) {
+    if (s <= 0.001 || alpha <= 0.001) return;
+    ctx.save(); ctx.translate(x, y); if (rot) ctx.rotate(rot); ctx.scale(s, s);
+    if (alpha < 1) ctx.globalAlpha *= alpha;
+    fn(); ctx.restore();
+  };
+
+  /* =======================================================
+   * 角色：猴子
+   * 原点在脚底中心，身高约 165
+   * o: {t, seed, flip, mood:'happy'|'shock'|'sad'|'smug'|'love', aL, aR, fur, blink, hold}
+   * ======================================================= */
+  D.monkey = function (ctx, x, y, s = 1, o = {}) {
+    const t = o.t || 0, sd = o.seed || 1;
+    const fur = o.fur || C.fur, face = C.face;
+    ctx.save(); ctx.translate(x, y); ctx.scale(o.flip ? -s : s, s); if (o.rot) ctx.rotate(o.rot);
+    // 尾巴
+    ctx.beginPath(); ctx.moveTo(22, -38);
+    ctx.bezierCurveTo(78, -26, 96, -98, 62 + Math.sin(t * 3 + sd) * 6, -112);
+    ctx.quadraticCurveTo(44, -122, 50, -100);
+    D.stroke(ctx, 15, INK);
+    ctx.beginPath(); ctx.moveTo(22, -38);
+    ctx.bezierCurveTo(78, -26, 96, -98, 62 + Math.sin(t * 3 + sd) * 6, -112);
+    ctx.quadraticCurveTo(44, -122, 50, -100);
+    D.stroke(ctx, 8, fur);
+    // 腿
+    D.blob(ctx, -18, -10, 17, 12, sd + 1); D.fs(ctx, fur, 4);
+    D.blob(ctx, 18, -10, 17, 12, sd + 2); D.fs(ctx, fur, 4);
+    // 身体
+    D.blob(ctx, 0, -52, 36, 42, sd + 3); D.fs(ctx, fur, 5);
+    D.blob(ctx, 0, -46, 22, 27, sd + 4); D.fs(ctx, face, 0);
+    // 手臂
+    const arm = (side, a) => {
+      const sx = side * 28, sy = -74, L = 46;
+      const ex = sx + side * Math.sin(a) * L, ey = sy + Math.cos(a) * L;
+      D.thick(ctx, sx, sy, ex, ey, fur, 9, sd + side * 7);
+      D.blob(ctx, ex, ey, 9, 9, sd + side * 9); D.fs(ctx, face, 4);
+      return [ex, ey];
+    };
+    const hL = arm(-1, o.aL != null ? o.aL : 0.35);
+    const hR = arm(1, o.aR != null ? o.aR : 0.35);
+    // 头
+    const hy = -122;
+    D.blob(ctx, -44, hy - 2, 17, 17, sd + 5); D.fs(ctx, fur, 5);
+    D.blob(ctx, 44, hy - 2, 17, 17, sd + 6); D.fs(ctx, fur, 5);
+    D.blob(ctx, -44, hy - 2, 9, 9, sd + 7); D.fs(ctx, C.pink, 0);
+    D.blob(ctx, 44, hy - 2, 9, 9, sd + 8); D.fs(ctx, C.pink, 0);
+    D.blob(ctx, 0, hy, 42, 39, sd + 9); D.fs(ctx, fur, 5);
+    D.blob(ctx, -14, hy - 2, 17, 16, sd + 10); D.fs(ctx, face, 0);
+    D.blob(ctx, 14, hy - 2, 17, 16, sd + 11); D.fs(ctx, face, 0);
+    D.blob(ctx, 0, hy + 17, 27, 17, sd + 12); D.fs(ctx, face, 3);
+    // 表情
+    const mood = o.mood || 'happy';
+    const blink = o.blink != null ? o.blink : ((t * 0.7 + sd * 0.37) % 3.2 < 0.12);
+    ctx.fillStyle = INK;
+    if (mood === 'shock') {
+      for (const ex of [-14, 14]) { D.blob(ctx, ex, hy - 3, 9, 10, sd + ex); D.fs(ctx, '#fff', 3); ctx.beginPath(); ctx.arc(ex, hy - 2, 4, 0, TAU); ctx.fillStyle = INK; ctx.fill(); }
+      D.blob(ctx, 0, hy + 20, 7, 9, sd + 30); D.fs(ctx, '#7a2b22', 3);
+    } else if (mood === 'love') {
+      for (const ex of [-14, 14]) D.text(ctx, '$', ex, hy - 2, 26, C.green, { stroke: 4 });
+      ctx.beginPath(); ctx.arc(0, hy + 14, 10, 0.1, Math.PI - 0.1); D.stroke(ctx, 4);
+    } else {
+      for (const ex of [-14, 14]) {
+        if (blink || mood === 'smug') { ctx.beginPath(); ctx.moveTo(ex - 6, hy - 2); ctx.lineTo(ex + 6, hy - 2); D.stroke(ctx, 4); }
+        else { ctx.beginPath(); ctx.arc(ex, hy - 3, 5.5, 0, TAU); ctx.fillStyle = INK; ctx.fill(); ctx.beginPath(); ctx.arc(ex + 2, hy - 5, 2, 0, TAU); ctx.fillStyle = '#fff'; ctx.fill(); }
+      }
+      ctx.beginPath(); ctx.arc(-5, hy + 10, 2, 0, TAU); ctx.arc(5, hy + 10, 2, 0, TAU); ctx.fillStyle = INK; ctx.fill();
+      ctx.beginPath();
+      if (mood === 'sad') { ctx.arc(0, hy + 26, 9, Math.PI + .3, -.3); D.stroke(ctx, 4); ctx.beginPath(); ctx.moveTo(-22, hy - 16); ctx.lineTo(-8, hy - 20); ctx.moveTo(22, hy - 16); ctx.lineTo(8, hy - 20); D.stroke(ctx, 3); }
+      else if (mood === 'smug') { ctx.moveTo(-10, hy + 18); ctx.quadraticCurveTo(4, hy + 26, 13, hy + 13); D.stroke(ctx, 4); }
+      else { ctx.arc(0, hy + 13, 11, 0.15, Math.PI - 0.15); D.stroke(ctx, 4); }
+      ctx.beginPath(); ctx.ellipse(-25, hy + 10, 6, 3.5, 0, 0, TAU); ctx.ellipse(25, hy + 10, 6, 3.5, 0, 0, TAU); ctx.fillStyle = 'rgba(255,120,120,.55)'; ctx.fill();
+    }
+    if (o.hold) o.hold(ctx, hR[0], hR[1], hL);
+    ctx.restore();
+  };
+
+  /* =======================================================
+   * 角色：人物（村民 / 商人 / 助手）
+   * 原点在脚底中心，身高约 280
+   * o: {t, walk(相位,null 为站立), shirt, pants, skin, hat:'straw'|'top'|'cap'|null, hair:'short'|'bun'|'slick'|'bald'|'spiky',
+   *     hairColor, mustache, glasses:'sun'|'round'|null, tie, belly, thin, mood, aL, aR, holdR, holdL, flip, jump}
+   * ======================================================= */
+  D.person = function (ctx, x, y, s = 1, o = {}) {
+    const t = o.t || 0, sd = o.seed || 3;
+    const skin = o.skin || C.skin, shirt = o.shirt || '#5aa9e6', pants = o.pants || '#5b4a3a';
+    ctx.save(); ctx.translate(x, y - (o.jump || 0)); ctx.scale(o.flip ? -s : s, s);
+    const w = o.walk;
+    const sw = w == null ? 0 : Math.sin(w) * 22;
+    const bob = w == null ? Math.sin(t * 2 + sd) * 1.5 : Math.abs(Math.cos(w)) * -5;
+    ctx.translate(0, bob);
+    const bw = o.thin ? 30 : 38;
+    // 腿
+    D.thick(ctx, -13, -98, -13 + sw, -6, pants, 15, sd + 1);
+    D.thick(ctx, 13, -98, 13 - sw, -6, pants, 15, sd + 2);
+    D.blob(ctx, -16 + sw, -4, 15, 8, sd + 3); D.fs(ctx, '#3a2f2a', 4);
+    D.blob(ctx, 16 - sw, -4, 15, 8, sd + 4); D.fs(ctx, '#3a2f2a', 4);
+    // 躯干
+    if (o.belly) { D.blob(ctx, 0, -138, bw + 14, 56, sd + 5); D.fs(ctx, shirt, 5); }
+    else { D.rrect(ctx, -bw, -192, bw * 2, 102, 22, sd + 5); D.fs(ctx, shirt, 5); }
+    if (o.tie) {
+      ctx.beginPath(); ctx.moveTo(-9, -188); ctx.lineTo(9, -188); ctx.lineTo(5, -176); ctx.lineTo(10, -128); ctx.lineTo(0, -116); ctx.lineTo(-10, -128); ctx.lineTo(-5, -176); ctx.closePath(); D.fs(ctx, o.tie, 3.5);
+    }
+    if (o.suit) { // 西装翻领
+      ctx.beginPath(); ctx.moveTo(-bw + 6, -190); ctx.lineTo(-12, -150); ctx.lineTo(-20, -190); ctx.closePath(); D.fs(ctx, '#ffffff', 3);
+      ctx.beginPath(); ctx.moveTo(bw - 6, -190); ctx.lineTo(12, -150); ctx.lineTo(20, -190); ctx.closePath(); D.fs(ctx, '#ffffff', 3);
+    }
+    // 手臂
+    const arm = (side, a, hold) => {
+      const sx = side * (bw - 2), sy = -180, L = 72;
+      const swing = w == null ? 0 : side * Math.sin(w) * 0.45;
+      const aa = a + swing;
+      const ex = sx + side * Math.sin(aa) * L, ey = sy + Math.cos(aa) * L;
+      D.thick(ctx, sx, sy, ex, ey, shirt, 13, sd + side * 5);
+      D.blob(ctx, ex, ey, 10, 10, sd + side * 6); D.fs(ctx, skin, 4);
+      if (hold) { ctx.save(); ctx.translate(ex, ey); hold(ctx); ctx.restore(); }
+    };
+    // 头
+    const hy = -236;
+    const drawHead = () => {
+      D.blob(ctx, 0, hy, 42, 44, sd + 7); D.fs(ctx, skin, 5);
+      const hc = o.hairColor || '#3b2b22';
+      const hair = o.hair || 'short';
+      if (hair === 'short') { ctx.beginPath(); ctx.moveTo(-42, hy - 4); ctx.quadraticCurveTo(-40, hy - 50, 0, hy - 46); ctx.quadraticCurveTo(40, hy - 50, 42, hy - 6); ctx.quadraticCurveTo(20, hy - 26, -10, hy - 24); ctx.quadraticCurveTo(-30, hy - 20, -42, hy - 4); D.fs(ctx, hc, 4); }
+      else if (hair === 'spiky') { D.poly(ctx, [[-42, hy - 6], [-38, hy - 46], [-22, hy - 36], [-12, hy - 58], [2, hy - 38], [16, hy - 58], [24, hy - 36], [40, hy - 46], [42, hy - 6], [0, hy - 24]], sd); D.fs(ctx, hc, 4); }
+      else if (hair === 'bun') { D.blob(ctx, 0, hy - 52, 18, 16, sd + 8); D.fs(ctx, hc, 4); ctx.beginPath(); ctx.moveTo(-43, hy + 6); ctx.quadraticCurveTo(-46, hy - 48, 0, hy - 44); ctx.quadraticCurveTo(46, hy - 48, 43, hy + 6); ctx.quadraticCurveTo(30, hy - 24, 0, hy - 26); ctx.quadraticCurveTo(-30, hy - 24, -43, hy + 6); D.fs(ctx, hc, 4); }
+      else if (hair === 'slick') { ctx.beginPath(); ctx.moveTo(-43, hy - 2); ctx.quadraticCurveTo(-44, hy - 50, 8, hy - 47); ctx.quadraticCurveTo(46, hy - 42, 43, hy - 4); ctx.quadraticCurveTo(30, hy - 30, -20, hy - 30); ctx.quadraticCurveTo(-34, hy - 24, -43, hy - 2); D.fs(ctx, hc, 4); ctx.beginPath(); ctx.moveTo(-20, hy - 40); ctx.quadraticCurveTo(10, hy - 46, 30, hy - 34); D.stroke(ctx, 2.5, '#777'); }
+      // 脸
+      const mood = o.mood || 'happy';
+      const blink = ((t * 0.6 + sd * 0.29) % 3.6) < 0.12;
+      if (o.glasses === 'sun') {
+        D.rrect(ctx, -34, hy - 12, 30, 18, 6, sd + 9, .8); D.fs(ctx, '#1b1b1b', 3);
+        D.rrect(ctx, 4, hy - 12, 30, 18, 6, sd + 10, .8); D.fs(ctx, '#1b1b1b', 3);
+        ctx.beginPath(); ctx.moveTo(-4, hy - 6); ctx.lineTo(4, hy - 6); D.stroke(ctx, 3);
+        ctx.beginPath(); ctx.moveTo(-28, hy - 8); ctx.lineTo(-20, hy - 8); D.stroke(ctx, 2.5, 'rgba(255,255,255,.7)');
+      } else if (mood === 'shock') {
+        for (const ex of [-15, 15]) { D.blob(ctx, ex, hy - 4, 10, 12, sd + ex); D.fs(ctx, '#fff', 3); ctx.beginPath(); ctx.arc(ex, hy - 3, 4, 0, TAU); ctx.fillStyle = INK; ctx.fill(); }
+      } else if (mood === 'money') {
+        for (const ex of [-15, 15]) D.text(ctx, '¥', ex, hy - 4, 30, C.green, { stroke: 5, strokeColor: INK });
+      } else {
+        for (const ex of [-15, 15]) {
+          if (blink || mood === 'sly') { ctx.beginPath(); ctx.moveTo(ex - 7, hy - 4); ctx.quadraticCurveTo(ex, hy - (mood === 'sly' ? 0 : 6), ex + 7, hy - 4); D.stroke(ctx, 4); }
+          else { ctx.beginPath(); ctx.arc(ex, hy - 4, 5.5, 0, TAU); ctx.fillStyle = INK; ctx.fill(); ctx.beginPath(); ctx.arc(ex + 2, hy - 6, 1.8, 0, TAU); ctx.fillStyle = '#fff'; ctx.fill(); }
+        }
+        if (mood === 'angry') { ctx.beginPath(); ctx.moveTo(-26, hy - 22); ctx.lineTo(-8, hy - 14); ctx.moveTo(26, hy - 22); ctx.lineTo(8, hy - 14); D.stroke(ctx, 4); }
+        if (mood === 'sad') { ctx.beginPath(); ctx.moveTo(-24, hy - 16); ctx.lineTo(-8, hy - 22); ctx.moveTo(24, hy - 16); ctx.lineTo(8, hy - 22); D.stroke(ctx, 4); }
+      }
+      if (o.glasses === 'round') { ctx.beginPath(); ctx.arc(-15, hy - 4, 12, 0, TAU); ctx.moveTo(27, hy - 4); ctx.arc(15, hy - 4, 12, 0, TAU); ctx.moveTo(-3, hy - 4); ctx.lineTo(3, hy - 4); D.stroke(ctx, 3); }
+      // 鼻子腮红
+      ctx.beginPath(); ctx.arc(0, hy + 8, 4, 0.3, Math.PI - 0.3); D.stroke(ctx, 3);
+      ctx.beginPath(); ctx.ellipse(-27, hy + 12, 7, 4, 0, 0, TAU); ctx.ellipse(27, hy + 12, 7, 4, 0, 0, TAU); ctx.fillStyle = 'rgba(255,120,120,.45)'; ctx.fill();
+      // 嘴
+      ctx.beginPath();
+      if (mood === 'shock') { D.blob(ctx, 0, hy + 26, 9, 11, sd + 20); D.fs(ctx, '#7a2b22', 3.5); }
+      else if (mood === 'sad' || mood === 'angry') { ctx.arc(0, hy + 34, 11, Math.PI + .35, -.35); D.stroke(ctx, 4); }
+      else if (mood === 'sly') { ctx.moveTo(-14, hy + 22); ctx.quadraticCurveTo(4, hy + 32, 18, hy + 16); D.stroke(ctx, 4); }
+      else if (mood === 'talk') { const k = Math.abs(Math.sin(t * 14)); D.blob(ctx, 0, hy + 24, 11, 3 + k * 8, sd + 21); D.fs(ctx, '#7a2b22', 3.5); }
+      else if (mood === 'laugh' || mood === 'money') { ctx.moveTo(-14, hy + 18); ctx.quadraticCurveTo(0, hy + 40, 14, hy + 18); ctx.closePath(); D.fs(ctx, '#7a2b22', 3.5); }
+      else { ctx.arc(0, hy + 16, 12, 0.2, Math.PI - 0.2); D.stroke(ctx, 4); }
+      if (o.mustache) { ctx.beginPath(); ctx.moveTo(0, hy + 13); ctx.quadraticCurveTo(-14, hy + 6, -26, hy + 16); ctx.quadraticCurveTo(-34, hy + 8, -30, hy + 2); ctx.moveTo(0, hy + 13); ctx.quadraticCurveTo(14, hy + 6, 26, hy + 16); ctx.quadraticCurveTo(34, hy + 8, 30, hy + 2); D.stroke(ctx, 6, '#3b2b22'); }
+      // 帽子
+      if (o.hat === 'straw') {
+        D.blob(ctx, 0, hy - 30, 66, 13, sd + 30); D.fs(ctx, '#f0c96a', 4);
+        D.blob(ctx, 0, hy - 46, 32, 20, sd + 31); D.fs(ctx, '#f0c96a', 4);
+        ctx.beginPath(); ctx.moveTo(-30, hy - 36); ctx.quadraticCurveTo(0, hy - 30, 30, hy - 36); D.stroke(ctx, 6, C.red);
+      } else if (o.hat === 'top') {
+        D.blob(ctx, 0, hy - 36, 58, 10, sd + 32); D.fs(ctx, '#222', 4);
+        D.rrect(ctx, -32, hy - 108, 64, 72, 6, sd + 33); D.fs(ctx, '#222', 4);
+        ctx.fillStyle = C.red; ctx.fillRect(-32, hy - 54, 64, 11);
+      } else if (o.hat === 'cap') {
+        ctx.beginPath(); ctx.moveTo(-42, hy - 14); ctx.quadraticCurveTo(-40, hy - 56, 0, hy - 54); ctx.quadraticCurveTo(40, hy - 56, 42, hy - 14); ctx.closePath(); D.fs(ctx, o.capColor || C.red, 4);
+        D.blob(ctx, 34, hy - 16, 30, 8, sd + 34); D.fs(ctx, o.capColor || C.red, 4);
+      }
+    };
+    // 先画背后手，再头，再前手
+    arm(-1, o.aL != null ? o.aL : 0.25, o.holdL);
+    drawHead();
+    arm(1, o.aR != null ? o.aR : 0.25, o.holdR);
+    ctx.restore();
+  };
+
+  // 预设角色
+  D.merchant = (ctx, x, y, s, o = {}) => D.person(ctx, x, y, s, Object.assign({ shirt: '#2f4a7a', pants: '#25365a', hat: 'top', mustache: true, tie: C.red, belly: true, suit: true, hair: 'bald', seed: 11 }, o));
+  D.assistant = (ctx, x, y, s, o = {}) => D.person(ctx, x, y, s, Object.assign({ shirt: '#6b6f7a', pants: '#3e4048', hair: 'slick', hairColor: '#1f1f1f', glasses: 'sun', tie: C.green, thin: true, suit: true, mood: 'sly', seed: 21 }, o));
+  const VILLAGERS = [
+    { shirt: '#e8743b', pants: '#5b4a3a', hat: 'straw', hair: 'short', seed: 31 },
+    { shirt: '#5aa9e6', pants: '#3d5a80', hair: 'bun', hairColor: '#2a1d16', seed: 32 },
+    { shirt: '#7bc96f', pants: '#6b4f3a', hat: 'cap', capColor: '#ffcd3c', hair: 'short', seed: 33 },
+    { shirt: '#c77dff', pants: '#40334f', hair: 'spiky', hairColor: '#4a2f22', seed: 34, glasses: 'round' },
+    { shirt: '#ff6b81', pants: '#4b3b47', hair: 'bun', hairColor: '#5a3a2a', seed: 35 },
+    { shirt: '#f4d35e', pants: '#5c5346', hat: 'straw', hair: 'short', seed: 36, skin: '#f1c6a0' },
+    { shirt: '#4ecdc4', pants: '#2f4858', hair: 'short', hairColor: '#222', seed: 37, mustache: true },
+  ];
+  D.villager = (ctx, i, x, y, s, o = {}) => D.person(ctx, x, y, s, Object.assign({}, VILLAGERS[((i % VILLAGERS.length) + VILLAGERS.length) % VILLAGERS.length], { seed: 31 + i * 3 }, o));
+
+  /* =======================================================
+   * 道具
+   * ======================================================= */
+  D.coin = function (ctx, x, y, r = 22, spin = 0) {
+    const sx = Math.max(0.12, Math.abs(Math.cos(spin)));
+    ctx.save(); ctx.translate(x, y); ctx.scale(sx, 1);
+    D.blob(ctx, 0, 0, r, r, 77, 0.02, 12); D.fs(ctx, C.gold, 4);
+    ctx.beginPath(); ctx.arc(0, 0, r * 0.7, 0, TAU); D.stroke(ctx, 2.5, C.gold2);
+    if (sx > .4) D.text(ctx, '¥', 0, 1, r * 1.05, '#b9770e');
+    ctx.restore();
+  };
+  D.bill = function (ctx, x, y, s = 1, rot = 0, val = '10') {
+    D.at(ctx, x, y, s, () => {
+      D.rrect(ctx, -60, -30, 120, 60, 6, 88); D.fs(ctx, '#9fdc8c', 4);
+      ctx.beginPath(); ctx.arc(0, 0, 18, 0, TAU); D.stroke(ctx, 3, '#3c8c3a');
+      D.text(ctx, '¥' + val, 0, 1, 22, '#2f6f2c');
+    }, rot);
+  };
+  D.tree = function (ctx, x, y, s = 1, seed = 1, col = C.forest) {
+    D.at(ctx, x, y, s, () => {
+      D.rrect(ctx, -12, -70, 24, 72, 6, seed); D.fs(ctx, '#8a5a35', 4);
+      D.blob(ctx, 0, -120, 66, 58, seed + 2, .07); D.fs(ctx, col, 5);
+      D.blob(ctx, -30, -95, 40, 32, seed + 3, .07); D.fs(ctx, col, 5);
+      D.blob(ctx, 32, -98, 40, 32, seed + 4, .07); D.fs(ctx, col, 5);
+      ctx.beginPath(); ctx.arc(-18, -140, 12, Math.PI * 1.1, Math.PI * 1.7); D.stroke(ctx, 4, 'rgba(255,255,255,.35)');
+    });
+  };
+  D.pine = function (ctx, x, y, s = 1, seed = 1, col = C.forest2) {
+    D.at(ctx, x, y, s, () => {
+      ctx.fillStyle = '#7a4f2e'; ctx.fillRect(-7, -20, 14, 22);
+      D.poly(ctx, [[0, -170], [44, -90], [-44, -90]], seed); D.fs(ctx, col, 4);
+      D.poly(ctx, [[0, -130], [56, -40], [-56, -40]], seed + 9); D.fs(ctx, col, 4);
+      D.poly(ctx, [[0, -90], [64, -14], [-64, -14]], seed + 19); D.fs(ctx, col, 4);
+    });
+  };
+  D.house = function (ctx, x, y, s = 1, seed = 1, wall = '#f6e3c3', roof = '#d9534f', smokeT = null) {
+    D.at(ctx, x, y, s, () => {
+      if (smokeT != null) for (let i = 0; i < 4; i++) { const k = ((smokeT * 0.35 + i / 4) % 1); D.blob(ctx, 46 + Math.sin(k * 6 + i) * 10, -190 - k * 120, 12 + k * 18, 10 + k * 14, seed + i); ctx.globalAlpha = 1 - k; D.fs(ctx, '#ffffff', 3, 'rgba(43,35,33,.5)'); ctx.globalAlpha = 1; }
+      D.rrect(ctx, 30, -190, 26, 50, 3, seed + 5); D.fs(ctx, '#a0522d', 4);
+      D.rrect(ctx, -80, -100, 160, 100, 6, seed); D.fs(ctx, wall, 5);
+      D.poly(ctx, [[-100, -96], [0, -176], [100, -96]], seed + 1); D.fs(ctx, roof, 5);
+      D.rrect(ctx, -18, -60, 36, 60, 4, seed + 2); D.fs(ctx, '#9b6a43', 4);
+      D.rrect(ctx, 34, -74, 30, 28, 3, seed + 3); D.fs(ctx, '#bfe7ff', 4);
+      D.rrect(ctx, -64, -74, 30, 28, 3, seed + 4); D.fs(ctx, '#bfe7ff', 4);
+    });
+  };
+  D.cloud = function (ctx, x, y, s = 1, seed = 1) {
+    D.at(ctx, x, y, s, () => {
+      D.blob(ctx, -40, 4, 44, 28, seed); D.fs(ctx, '#fff', 4);
+      D.blob(ctx, 34, 6, 40, 26, seed + 1); D.fs(ctx, '#fff', 4);
+      D.blob(ctx, 0, -14, 50, 36, seed + 2); D.fs(ctx, '#fff', 4);
+      ctx.fillStyle = '#fff'; ctx.fillRect(-60, -2, 110, 22);
+    });
+  };
+  D.sun = function (ctx, x, y, r, t, face = true) {
+    ctx.save(); ctx.translate(x, y); ctx.rotate(t * 0.2);
+    for (let i = 0; i < 12; i++) { const a = i / 12 * TAU; D.line(ctx, Math.cos(a) * (r + 14), Math.sin(a) * (r + 14), Math.cos(a) * (r + 38), Math.sin(a) * (r + 38), i); D.stroke(ctx, 6, '#ffb52e'); }
+    ctx.rotate(-t * 0.2);
+    D.blob(ctx, 0, 0, r, r, 5); D.fs(ctx, '#ffd84a', 5);
+    if (face) { ctx.beginPath(); ctx.arc(-r * .3, -r * .1, 4, 0, TAU); ctx.arc(r * .3, -r * .1, 4, 0, TAU); ctx.fillStyle = INK; ctx.fill(); ctx.beginPath(); ctx.arc(0, r * .1, r * .3, .2, Math.PI - .2); D.stroke(ctx, 4); }
+    ctx.restore();
+  };
+  // 笼子：count 只猴子（显示上限 cap 个头像）
+  D.cage = function (ctx, x, y, w, h, fill, t, o = {}) {
+    ctx.save(); ctx.translate(x, y);
+    D.rrect(ctx, -w / 2, -h, w, h, 10, 51); D.fs(ctx, 'rgba(255,240,210,.55)', 0);
+    // 猴子按网格排布，fill 0..1
+    const cols = o.cols || 5, rows = o.rows || 3;
+    const n = Math.round(cols * rows * D.clamp01(fill));
+    const cw = w / cols, rh = (h - 20) / rows;
+    for (let i = 0; i < n; i++) {
+      const r = rows - 1 - Math.floor(i / cols), c = i % cols;
+      const mx = -w / 2 + cw * (c + .5) + (r % 2 ? 8 : -8), my = -h + 20 + rh * (r + 1) - 4;
+      D.monkey(ctx, mx, my + Math.sin(t * 5 + i) * 2, Math.min(cw, rh) / 150, { t, seed: i + 1, mood: o.mood || (i % 3 ? 'happy' : 'shock'), aL: 2.6 + Math.sin(t * 4 + i) * .3, aR: 0.4 });
+    }
+    // 栏杆
+    for (let i = 0; i <= 10; i++) { const bx = -w / 2 + w * i / 10; D.line(ctx, bx, -h, bx, 0, 60 + i, 1.5); D.stroke(ctx, 6, '#5b5b66'); }
+    D.rrect(ctx, -w / 2 - 10, -h - 16, w + 20, 22, 6, 52); D.fs(ctx, '#7b6f66', 5);
+    D.rrect(ctx, -w / 2 - 10, -8, w + 20, 18, 6, 53); D.fs(ctx, '#7b6f66', 5);
+    if (o.label) { D.rrect(ctx, -70, -h - 64, 140, 44, 8, 54); D.fs(ctx, '#fff4d6', 4); D.text(ctx, o.label, 0, -h - 42, 26, INK); }
+    ctx.restore();
+  };
+  // 价格牌（木牌） flip 0..1 用于翻牌动画
+  D.priceSign = function (ctx, x, y, s, price, o = {}) {
+    D.at(ctx, x, y, s, () => {
+      if (!o.noPost) { D.rrect(ctx, -10, -40, 20, 200, 4, 71); D.fs(ctx, '#8a5a35', 4); }
+      ctx.save(); ctx.translate(0, -110); ctx.rotate(Math.sin((o.t || 0) * 2) * 0.03);
+      ctx.scale(1, o.flip != null ? Math.max(0.02, Math.abs(Math.cos(o.flip * Math.PI))) : 1);
+      D.rrect(ctx, -150, -95, 300, 190, 16, 72); D.fs(ctx, o.bg || '#ffe9a8', 6);
+      D.text(ctx, o.head || '高价收猴', 0, -52, 40, '#7a4b1c');
+      D.bigText(ctx, '¥' + price, -14, 18, 96, o.color || C.red);
+      D.text(ctx, '/只', 108, 42, 30, '#7a4b1c');
+      ctx.restore();
+    });
+  };
+  D.bubble = function (ctx, x, y, w, h, tx, ty, o = {}) { // 对话气泡，tail 指向 (tx,ty)
+    ctx.save();
+    const fill = o.fill || '#fff';
+    ctx.beginPath();
+    const bx = x - w / 2, by = y - h / 2;
+    D.rrect(ctx, bx, by, w, h, Math.min(30, h / 2), o.seed || 91, 1.2);
+    D.fs(ctx, fill, 5);
+    ctx.beginPath(); const mx = Math.max(bx + 30, Math.min(bx + w - 30, tx));
+    ctx.moveTo(mx - 16, y + (ty > y ? h / 2 - 3 : -h / 2 + 3)); ctx.lineTo(tx, ty); ctx.lineTo(mx + 16, y + (ty > y ? h / 2 - 3 : -h / 2 + 3));
+    D.fs(ctx, fill, 0); ctx.beginPath(); ctx.moveTo(mx - 16, y + (ty > y ? h / 2 : -h / 2)); ctx.lineTo(tx, ty); ctx.lineTo(mx + 16, y + (ty > y ? h / 2 : -h / 2)); D.stroke(ctx, 5);
+    if (o.text) {
+      const lines = Array.isArray(o.text) ? o.text : [o.text];
+      const sz = o.size || 40; lines.forEach((ln, i) => D.text(ctx, ln, x, y + (i - (lines.length - 1) / 2) * sz * 1.25, sz, o.color || INK));
+    }
+    ctx.restore();
+  };
+  D.thought = function (ctx, x, y, w, h, tx, ty, o = {}) {
+    D.blob(ctx, x, y, w / 2, h / 2, 93, .06, 22); D.fs(ctx, '#fff', 5);
+    D.blob(ctx, D.lerp(x, tx, .62), D.lerp(y, ty, .62), 14, 12, 94); D.fs(ctx, '#fff', 4);
+    D.blob(ctx, D.lerp(x, tx, .85), D.lerp(y, ty, .85), 8, 7, 95); D.fs(ctx, '#fff', 4);
+    if (o.text) { const lines = Array.isArray(o.text) ? o.text : [o.text]; const sz = o.size || 34; lines.forEach((ln, i) => D.text(ctx, ln, x, y + (i - (lines.length - 1) / 2) * sz * 1.25, sz, o.color || INK)); }
+  };
+  D.megaphone = function (ctx) {
+    ctx.save(); ctx.rotate(-0.35);
+    D.poly(ctx, [[0, -10], [70, -34], [70, 34], [0, 10]], 101); D.fs(ctx, C.red, 4);
+    D.blob(ctx, 72, 0, 9, 34, 102); D.fs(ctx, '#ffe9a8', 4);
+    ctx.restore();
+  };
+  D.net = function (ctx) {
+    ctx.save(); ctx.rotate(-0.5);
+    D.line(ctx, 0, 30, 0, -110, 111); D.stroke(ctx, 7, '#8a5a35');
+    D.blob(ctx, 0, -140, 34, 30, 112); D.fs(ctx, 'rgba(255,255,255,.4)', 4);
+    for (let i = -2; i <= 2; i++) { ctx.beginPath(); ctx.moveTo(i * 13, -168); ctx.lineTo(i * 13, -112); ctx.moveTo(-32, -140 + i * 11); ctx.lineTo(32, -140 + i * 11); D.stroke(ctx, 1.5, 'rgba(43,35,33,.6)'); }
+    ctx.restore();
+  };
+  D.car = function (ctx, x, y, s, t, o = {}) {
+    D.at(ctx, x, y, s, () => {
+      D.rrect(ctx, -130, -90, 260, 64, 20, 121); D.fs(ctx, o.color || C.red, 5);
+      D.rrect(ctx, -70, -142, 140, 60, 20, 122); D.fs(ctx, o.color || C.red, 5);
+      D.rrect(ctx, -56, -130, 52, 40, 8, 123); D.fs(ctx, '#bfe7ff', 4);
+      D.rrect(ctx, 6, -130, 52, 40, 8, 124); D.fs(ctx, '#bfe7ff', 4);
+      for (const wx of [-78, 78]) { ctx.save(); ctx.translate(wx, -24); ctx.rotate(t * 12); D.blob(ctx, 0, 0, 28, 28, 125); D.fs(ctx, '#333', 5); ctx.beginPath(); ctx.moveTo(-12, 0); ctx.lineTo(12, 0); ctx.moveTo(0, -12); ctx.lineTo(0, 12); D.stroke(ctx, 4, '#bbb'); ctx.restore(); }
+      if (o.driver) o.driver();
+    });
+  };
+  D.cow = function (ctx, x, y, s, t, o = {}) {
+    D.at(ctx, x, y, s, () => {
+      for (const lx of [-50, -20, 30, 58]) { D.rrect(ctx, lx - 9, -60, 18, 60, 5, 130 + lx); D.fs(ctx, '#fff', 4); }
+      D.blob(ctx, 0, -86, 96, 50, 131); D.fs(ctx, '#fff', 5);
+      D.blob(ctx, -30, -96, 26, 20, 132); D.fs(ctx, '#333', 0); D.blob(ctx, 34, -70, 20, 16, 133); D.fs(ctx, '#333', 0);
+      D.blob(ctx, 100, -120, 42, 36, 134); D.fs(ctx, '#fff', 5);
+      D.blob(ctx, 116, -104, 26, 18, 135); D.fs(ctx, '#ffb3c1', 4);
+      ctx.beginPath(); ctx.arc(92, -128, 5, 0, TAU); ctx.fillStyle = INK; ctx.fill();
+      D.poly(ctx, [[80, -150], [70, -176], [90, -156]], 136); D.fs(ctx, '#f6e3c3', 3);
+      D.poly(ctx, [[112, -152], [124, -178], [124, -150]], 137); D.fs(ctx, '#f6e3c3', 3);
+      if (o.tag) { D.rrect(ctx, -60, -190, 120, 46, 8, 138); D.fs(ctx, '#fff4d6', 4); D.text(ctx, o.tag, 0, -167, 28, C.red); }
+    });
+  };
+  D.stamp = function (ctx, x, y, s, text, color = C.red, rot = -0.2) {
+    D.at(ctx, x, y, s, () => {
+      ctx.globalAlpha *= 0.92;
+      ctx.font = D.font(64); const w = ctx.measureText(text).width + 60;
+      D.rrect(ctx, -w / 2, -50, w, 100, 14, 141, 2.5); D.stroke(ctx, 9, color);
+      D.text(ctx, text, 0, 3, 64, color);
+    }, rot);
+  };
+  D.cross = function (ctx, x, y, r, color = C.red) {
+    D.line(ctx, x - r, y - r, x + r, y + r, 151, 3); D.stroke(ctx, 12, color);
+    D.line(ctx, x + r, y - r, x - r, y + r, 152, 3); D.stroke(ctx, 12, color);
+  };
+  D.check = function (ctx, x, y, r, k = 1, color = C.green) {
+    ctx.beginPath(); ctx.moveTo(x - r, y);
+    const p1 = [x - r * .3, y + r * .7], p2 = [x + r, y - r * .8];
+    if (k < .4) { const q = k / .4; ctx.lineTo(D.lerp(x - r, p1[0], q), D.lerp(y, p1[1], q)); }
+    else { ctx.lineTo(p1[0], p1[1]); const q = (k - .4) / .6; ctx.lineTo(D.lerp(p1[0], p2[0], q), D.lerp(p1[1], p2[1], q)); }
+    D.stroke(ctx, 12, color);
+  };
+  D.arrow = function (ctx, x1, y1, x2, y2, color = INK, w = 8, k = 1) {
+    const ex = D.lerp(x1, x2, k), ey = D.lerp(y1, y2, k);
+    D.line(ctx, x1, y1, ex, ey, 161, 2); D.stroke(ctx, w, color);
+    const a = Math.atan2(ey - y1, ex - x1), h = w * 3;
+    ctx.beginPath(); ctx.moveTo(ex + Math.cos(a) * 4, ey + Math.sin(a) * 4);
+    ctx.lineTo(ex - Math.cos(a - .5) * h, ey - Math.sin(a - .5) * h);
+    ctx.lineTo(ex - Math.cos(a + .5) * h, ey - Math.sin(a + .5) * h); ctx.closePath();
+    ctx.fillStyle = color; ctx.fill(); D.stroke(ctx, 3, color);
+  };
+  D.qmark = function (ctx, x, y, s, t = 0, color = C.blue) {
+    D.at(ctx, x, y, s, () => D.bigText(ctx, '?', 0, 0, 120, color), Math.sin(t * 3) * .12);
+  };
+  D.exclaim = function (ctx, x, y, s, t = 0, color = C.red) {
+    D.at(ctx, x, y, s, () => D.bigText(ctx, '!', 0, 0, 120, color), Math.sin(t * 5) * .1);
+  };
+  D.sparkle = function (ctx, x, y, r, t, color = '#fff6a8') {
+    const k = 0.6 + 0.4 * Math.sin(t * 8);
+    ctx.save(); ctx.translate(x, y); ctx.scale(k, k); ctx.rotate(t);
+    ctx.beginPath(); for (let i = 0; i < 8; i++) { const a = i / 8 * TAU, rr = i % 2 ? r * .35 : r; ctx.lineTo(Math.cos(a) * rr, Math.sin(a) * rr); } ctx.closePath();
+    D.fs(ctx, color, 3); ctx.restore();
+  };
+  D.piggy = function (ctx, x, y, s, broken = 0) {
+    D.at(ctx, x, y, s, () => {
+      if (broken > 0) {
+        for (let i = 0; i < 5; i++) { const a = i / 5 * TAU + .3, d = broken * 80; D.at(ctx, Math.cos(a) * d, Math.sin(a) * d * .6 - 40 + broken * broken * 60, 1, () => { D.poly(ctx, [[-30, -20], [30, -26], [20, 24], [-26, 18]], 170 + i); D.fs(ctx, C.pink, 4); }, a + broken * 3); }
+        return;
+      }
+      D.blob(ctx, 0, -60, 80, 60, 171); D.fs(ctx, C.pink, 5);
+      D.blob(ctx, 78, -66, 20, 24, 172); D.fs(ctx, '#ff6f9a', 4);
+      ctx.beginPath(); ctx.arc(30, -84, 5, 0, TAU); ctx.fillStyle = INK; ctx.fill();
+      D.poly(ctx, [[10, -116], [26, -142], [36, -112]], 173); D.fs(ctx, C.pink, 4);
+      ctx.fillStyle = INK; ctx.fillRect(-20, -122, 34, 7);
+      for (const lx of [-46, 40]) { D.rrect(ctx, lx - 10, -14, 20, 18, 4, 174 + lx); D.fs(ctx, C.pink, 4); }
+    });
+  };
+  D.calendar = function (ctx, x, y, s, label, sub, flip = 0) {
+    D.at(ctx, x, y, s, () => {
+      D.rrect(ctx, -110, -130, 220, 250, 14, 181); D.fs(ctx, '#fff', 6);
+      D.rrect(ctx, -110, -130, 220, 64, 14, 182); D.fs(ctx, C.red, 6);
+      for (const rx of [-60, 60]) { D.rrect(ctx, rx - 7, -150, 14, 40, 6, 183 + rx); D.fs(ctx, '#888', 4); }
+      D.text(ctx, sub || '', 0, -98, 30, '#fff');
+      ctx.save(); ctx.scale(1, Math.max(0.05, 1 - flip)); D.bigText(ctx, label, 0, 20, 84, INK, { shadow: null }); ctx.restore();
+    });
+  };
+  D.tulip = function (ctx, x, y, s, t = 0) {
+    D.at(ctx, x, y, s, () => {
+      D.line(ctx, 0, 0, Math.sin(t) * 6, -140, 191); D.stroke(ctx, 8, C.green);
+      D.blob(ctx, -26, -50, 26, 10, 192); D.fs(ctx, '#58c06a', 4);
+      ctx.save(); ctx.translate(Math.sin(t) * 6, -150);
+      D.poly(ctx, [[-40, 0], [-44, -60], [-20, -34], [0, -70], [20, -34], [44, -60], [40, 0], [0, 26]], 193); D.fs(ctx, '#ff4f6d', 5);
+      ctx.restore();
+    });
+  };
+  D.laptop = function (ctx, x, y, s, t = 0) {
+    D.at(ctx, x, y, s, () => {
+      D.rrect(ctx, -110, -150, 220, 140, 12, 201); D.fs(ctx, '#3b3f4a', 5);
+      D.rrect(ctx, -96, -138, 192, 116, 6, 202); D.fs(ctx, '#e8f6ff', 3);
+      D.text(ctx, '.com', 0, -80, 52, C.blue);
+      D.poly(ctx, [[-140, -10], [140, -10], [120, 14], [-120, 14]], 203); D.fs(ctx, '#9aa0aa', 5);
+    });
+  };
+  D.sneaker = function (ctx, x, y, s) {
+    D.at(ctx, x, y, s, () => {
+      ctx.beginPath(); ctx.moveTo(-90, 0); ctx.lineTo(-90, -60); ctx.quadraticCurveTo(-40, -86, -20, -60); ctx.quadraticCurveTo(30, -40, 90, -26); ctx.quadraticCurveTo(100, 0, 90, 0); ctx.closePath(); D.fs(ctx, '#fff', 5);
+      D.rrect(ctx, -96, -10, 196, 22, 8, 211); D.fs(ctx, C.red, 5);
+      ctx.beginPath(); ctx.moveTo(-60, -40); ctx.quadraticCurveTo(0, -10, 60, -24); D.stroke(ctx, 7, C.blue);
+    });
+  };
+  D.card = function (ctx, x, y, s) {
+    D.at(ctx, x, y, s, () => {
+      D.rrect(ctx, -60, -84, 120, 168, 12, 221); D.fs(ctx, '#ffe17a', 5);
+      D.rrect(ctx, -46, -70, 92, 92, 8, 222); D.fs(ctx, '#bfe7ff', 4);
+      D.text(ctx, 'SSR', 0, 50, 34, C.purple);
+      D.sparkle(ctx, 30, -60, 16, 1);
+    });
+  };
+  D.cryptoCoin = function (ctx, x, y, s, t = 0) {
+    D.at(ctx, x, y, s, () => {
+      D.blob(ctx, 0, 0, 70, 70, 231, .02); D.fs(ctx, '#ffb547', 6);
+      ctx.beginPath(); ctx.arc(0, 0, 50, 0, TAU); D.stroke(ctx, 4, '#e08a12');
+      D.text(ctx, '空气', 0, 2, 36, '#8a4b00');
+    }, Math.sin(t * 2) * .1);
+  };
+  D.cricket = function (ctx, x, y, s, t) {
+    D.at(ctx, x, y, s, () => {
+      D.blob(ctx, 0, -20, 34, 16, 241); D.fs(ctx, '#5a7d3a', 4);
+      D.blob(ctx, 34, -26, 14, 12, 242); D.fs(ctx, '#5a7d3a', 4);
+      ctx.beginPath(); ctx.moveTo(42, -36); ctx.quadraticCurveTo(60, -80 + Math.sin(t * 20) * 6, 80, -70); ctx.moveTo(38, -36); ctx.quadraticCurveTo(46, -86, 64, -88 + Math.sin(t * 22) * 6); D.stroke(ctx, 3);
+      ctx.beginPath(); ctx.moveTo(-10, -10); ctx.lineTo(-30, 10); ctx.moveTo(10, -10); ctx.lineTo(24, 10); D.stroke(ctx, 4);
+    });
+  };
+  D.tumbleweed = function (ctx, x, y, s, t) {
+    D.at(ctx, x, y, s, () => {
+      for (let i = 0; i < 6; i++) { ctx.beginPath(); ctx.ellipse(0, 0, 40, 40 - i * 6, i, 0, TAU); D.stroke(ctx, 3, '#a07a4a'); }
+    }, t * 4);
+  };
+  D.ledgerBook = function (ctx, x, y, w, h) {
+    D.rrect(ctx, x, y, w, h, 16, 251); D.fs(ctx, '#fffaf0', 6);
+    ctx.save(); ctx.beginPath(); ctx.rect(x, y, w, h); ctx.clip();
+    for (let yy = y + 70; yy < y + h; yy += 56) { ctx.beginPath(); ctx.moveTo(x + 10, yy); ctx.lineTo(x + w - 10, yy); D.stroke(ctx, 2, 'rgba(74,143,226,.35)'); }
+    ctx.beginPath(); ctx.moveTo(x + 70, y); ctx.lineTo(x + 70, y + h); D.stroke(ctx, 2.5, 'rgba(255,91,79,.5)');
+    ctx.restore();
+  };
+  D.heart = function (ctx, x, y, r, color = C.red) {
+    ctx.beginPath(); ctx.moveTo(x, y + r * .9);
+    ctx.bezierCurveTo(x - r * 1.6, y - r * .2, x - r * .7, y - r * 1.4, x, y - r * .5);
+    ctx.bezierCurveTo(x + r * .7, y - r * 1.4, x + r * 1.6, y - r * .2, x, y + r * .9);
+    D.fs(ctx, color, 4);
+  };
+  // 确定性粒子：彩带
+  D.confetti = function (ctx, x, y, dt, n = 40, spread = 600, seed = 1) {
+    if (dt < 0 || dt > 4) return;
+    const cols = [C.red, C.gold, C.blue, C.green, C.pink, C.purple];
+    for (let i = 0; i < n; i++) {
+      const h1 = hash(seed + i), h2 = hash(seed + i * 7.3), h3 = hash(seed + i * 3.7);
+      const vx = (h1 - .5) * spread * 1.6, vy = -300 - h2 * 600;
+      const px = x + vx * dt, py = y + vy * dt + 700 * dt * dt;
+      ctx.save(); ctx.translate(px, py); ctx.rotate(dt * (4 + h3 * 8)); ctx.globalAlpha *= D.clamp01(1.4 - dt / 3);
+      ctx.fillStyle = cols[i % cols.length]; ctx.fillRect(-9, -5, 18, 10 * Math.abs(Math.cos(dt * 6 + i)) + 2);
+      ctx.restore();
+    }
+  };
+  D.coinBurst = function (ctx, x, y, dt, n = 14, seed = 3, power = 1) {
+    if (dt < 0 || dt > 2.4) return;
+    for (let i = 0; i < n; i++) {
+      const h1 = hash(seed + i), h2 = hash(seed + i * 5.1);
+      const vx = (h1 - .5) * 700 * power, vy = -(400 + h2 * 500) * power;
+      const px = x + vx * dt, py = y + vy * dt + 1100 * dt * dt;
+      ctx.save(); ctx.globalAlpha *= D.clamp01(2.4 - dt); D.coin(ctx, px, py, 20, dt * 10 + i); ctx.restore();
+    }
+  };
+  D.speedLines = function (ctx, cx, cy, t, color = 'rgba(43,35,33,.12)', n = 36, r0 = 380) {
+    ctx.save();
+    for (let i = 0; i < n; i++) {
+      const a = i / n * TAU + hash(i + Math.floor(t * 10)) * .1;
+      const r1 = r0 + hash(i * 3 + Math.floor(t * 10)) * 120;
+      ctx.beginPath(); ctx.moveTo(cx + Math.cos(a) * r1, cy + Math.sin(a) * r1); ctx.lineTo(cx + Math.cos(a) * 2400, cy + Math.sin(a) * 2400);
+      ctx.lineWidth = 6 + hash(i) * 14; ctx.strokeStyle = color; ctx.stroke();
+    }
+    ctx.restore();
+  };
+  D.dust = function (ctx, x, y, t, n = 5, seed = 1) {
+    for (let i = 0; i < n; i++) {
+      const k = ((t * 1.6 + i / n) % 1);
+      ctx.globalAlpha = (1 - k) * .8;
+      D.blob(ctx, x - k * 90 - i * 6, y - k * 40 - hash(seed + i) * 20, 10 + k * 24, 8 + k * 18, seed + i);
+      D.fs(ctx, '#efe2c8', 3, 'rgba(43,35,33,.5)');
+    }
+    ctx.globalAlpha = 1;
+  };
+
+  window.D = D;
+})();

shouhouzi/js/engine.js

@@ -0,0 +1,304 @@
+/* =========================================================
+ * engine.js —— 时间轴、画幅布局、逐帧渲染（预览与导出共用）
+ * ========================================================= */
+(function () {
+  const PRE = 0.5, POST = 0.4;
+  const STAGE_W = 1280, STAGE_H = 960;
+
+  /* ---------- 时间轴 ---------- */
+  const TL = { scenes: [], total: 0, lines: [] };
+  let acc = 0;
+  window.SCRIPT.forEach((sc, si) => {
+    const s = { id: sc.id, title: sc.title, index: si, start: acc, L: [], lines: sc.lines };
+    let c = PRE;
+    sc.lines.forEach((ln, li) => {
+      s.L.push(c);
+      TL.lines.push({ scene: si, idx: li, start: acc + c, end: acc + c + ln.dur, until: acc + c + ln.dur + ln.gap, text: ln.s, v: ln.v, file: ln.file, dur: ln.dur });
+      c += ln.dur + ln.gap;
+    });
+    s.dur = c + POST;
+    acc += s.dur;
+    TL.scenes.push(s);
+  });
+  TL.total = acc;
+  TL.byId = {}; TL.scenes.forEach((s) => (TL.byId[s.id] = s));
+  TL.at = function (t) {
+    t = Math.max(0, Math.min(TL.total - 1e-4, t));
+    let lo = 0, hi = TL.scenes.length - 1;
+    while (lo < hi) { const m = (lo + hi + 1) >> 1; if (TL.scenes[m].start <= t) lo = m; else hi = m - 1; }
+    return { sc: TL.scenes[lo], lt: t - TL.scenes[lo].start };
+  };
+  // 全局时间：场景 id 第 i 句开始后 off 秒；i 为 -1 表示场景开始，'end' 表示场景结束
+  TL.cue = function (id, i = 0, off = 0) {
+    const s = TL.byId[id];
+    if (i === -1) return s.start + off;
+    if (i === 'end') return s.start + s.dur + off;
+    return s.start + s.L[i] + off;
+  };
+  TL.lineAt = function (t) {
+    for (let i = TL.lines.length - 1; i >= 0; i--) { const l = TL.lines[i]; if (t >= l.start - 0.05) return t <= l.until + 0.05 ? l : null; }
+    return null;
+  };
+  window.TL = TL;
+
+  /* ---------- 画幅布局 ---------- */
+  // landscape：B站 1920×1080；portrait：抖音 1080×1920（顶部刘海/状态栏/顶栏、底部文案与进度条、右侧互动按钮均避开）
+  const LAYOUTS = {
+    landscape: { name: 'landscape', W: 1920, H: 1080, k: 0.9, sx: (1920 - STAGE_W * 0.9) / 2, sy: 22, sub: { cx: 960, y: 952, size: 46, maxW: 1600 }, safe: null },
+    portrait: { name: 'portrait', W: 1080, H: 1920, k: 0.72, sx: 24, sy: 476, sub: { cx: 485, y: 1225, size: 50, maxW: 880 }, safe: { top: 210, bottom: 1480, right: 940 } },
+  };
+  window.LAYOUTS = LAYOUTS;
+
+  /* ---------- HUD 关键帧（收购价 / 笼中猴子） ---------- */
+  function buildHud() {
+    const P = [
+      [TL.cue('arrive', 2, 0.6), '10', '收购价'],
+      [TL.cue('twenty', 3, 0.3), '20', '收购价'],
+      [TL.cue('scarce', 1, 0.6), '25', '收购价'],
+      [TL.cue('fifty', 2, 0.8), '50', '收购价'],
+      [TL.cue('deal', 2, 1.6), '35', '助手卖价'],
+      [TL.cue('gone', 0, 0), '???', '收购价'],
+      [TL.cue('gone', 'end', -0.4), null, ''],
+    ];
+    const CAGE = [
+      [TL.cue('ten', 3, 0), 0], [TL.cue('ten', 4, 4.5), 600],
+      [TL.cue('twenty', 4, 0), 600], [TL.cue('twenty', 4, 4.5), 900],
+      [TL.cue('scarce', 3, 0), 900], [TL.cue('scarce', 3, 3.5), 1000],
+      [TL.cue('frenzy', 4, 0), 1000], [TL.cue('frenzy', 4, 3.6), 0],
+    ];
+    return { P, CAGE };
+  }
+  const HUD = buildHud();
+  function hudAt(t) {
+    let price = null, label = '', since = 99;
+    for (const [tt, p, lab] of HUD.P) if (t >= tt) { price = p; label = lab; since = t - tt; }
+    let cage = null;
+    if (t >= HUD.CAGE[0][0] && t < TL.cue('gone', -1)) {
+      cage = 0;
+      for (let i = 0; i < HUD.CAGE.length - 1; i++) {
+        const [a, va] = HUD.CAGE[i], [b, vb] = HUD.CAGE[i + 1];
+        if (t >= a && t < b) { cage = Math.round(D.lerp(va, vb, D.E.inout((t - a) / (b - a)))); break; }
+        if (t >= b) cage = vb;
+      }
+    }
+    return { price, label, since, cage };
+  }
+  window.hudAt = hudAt;
+
+  /* ---------- 纸张颗粒 ---------- */
+  let grain = null;
+  function getGrain() {
+    if (grain) return grain;
+    const c = document.createElement('canvas'); c.width = c.height = 256;
+    const g = c.getContext('2d'); const id = g.createImageData(256, 256);
+    for (let i = 0; i < 256 * 256; i++) { const v = 128 + (D.hash(i * 0.731) - .5) * 90; id.data[i * 4] = id.data[i * 4 + 1] = id.data[i * 4 + 2] = v; id.data[i * 4 + 3] = 255; }
+    g.putImageData(id, 0, 0); grain = c; return c;
+  }
+
+  /* ---------- 字幕折行 ---------- */
+  function wrap(ctx, text, maxW) {
+    const out = []; let cur = '';
+    for (const ch of text) {
+      if (ctx.measureText(cur + ch).width > maxW && cur) {
+        // 避免标点落在行首
+        if (/[，。！？、：；”）》…,.!?]/.test(ch)) { cur += ch; continue; }
+        out.push(cur); cur = ch;
+      } else cur += ch;
+    }
+    if (cur) out.push(cur);
+    // 均衡两行长度
+    if (out.length === 2) {
+      const all = out.join(''); const half = Math.ceil(all.length / 2);
+      let cut = half;
+      for (let d = 0; d < 5; d++) { if (/[，。！？：；]/.test(all[half + d - 1])) { cut = half + d; break; } if (/[，。！？：；]/.test(all[half - d - 1])) { cut = half - d; break; } }
+      const a = all.slice(0, cut), b = all.slice(cut);
+      if (ctx.measureText(a).width <= maxW && ctx.measureText(b).width <= maxW) return [a, b];
+    }
+    return out;
+  }
+
+  /* ---------- 叠加层 ---------- */
+  function drawSubtitle(ctx, t, Lo) {
+    const ln = TL.lineAt(t);
+    if (!ln) return;
+    const a = D.clamp01((t - ln.start + 0.05) / 0.15) * D.clamp01((ln.until + 0.05 - t) / 0.12);
+    if (a <= 0) return;
+    const S = Lo.sub;
+    ctx.save(); ctx.globalAlpha = a;
+    ctx.font = D.font(S.size);
+    const lines = wrap(ctx, ln.text, S.maxW);
+    const lh = S.size * 1.32;
+    const y0 = Lo.name === 'portrait' ? S.y : S.y - (lines.length - 1) * lh / 2;
+    const col = ln.v === 'm' ? '#ffd54a' : ln.v === 'a' ? '#8ff5b5' : '#ffffff';
+    if (ln.v !== 'n') {
+      const tag = ln.v === 'm' ? '商人' : '助手';
+      const ty = y0 - lh * 0.5 - 30;
+      ctx.font = D.font(S.size * 0.62); const tw = ctx.measureText(tag).width + 34;
+      D.rrect(ctx, S.cx - tw / 2, ty - 22, tw, 44, 20, 7, 0.6); D.fs(ctx, ln.v === 'm' ? '#d9a400' : '#2c9c5c', 4);
+      D.text(ctx, tag, S.cx, ty + 1, S.size * 0.62, '#fff');
+      ctx.font = D.font(S.size);
+    }
+    lines.forEach((s, i) => {
+      const y = y0 + i * lh;
+      ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
+      ctx.lineJoin = 'round';
+      ctx.lineWidth = S.size * 0.26; ctx.strokeStyle = 'rgba(30,22,20,.95)'; ctx.strokeText(s, S.cx, y);
+      ctx.fillStyle = col; ctx.fillText(s, S.cx, y);
+    });
+    ctx.restore();
+  }
+
+  function drawHud(ctx, t, Lo, sc, lt) {
+    const h = hudAt(t);
+    const P = Lo.name === 'portrait';
+    // 章节标签
+    const chap = sc.index === 0 ? '开场' : `第${sc.index}幕`;
+    const ttl = sc.index === 0 ? '先问你一个问题' : sc.title;
+    const ink = D.clamp01(lt / 0.5) * D.clamp01((sc.dur - lt) / 0.3);
+    if (P) {
+      // 竖屏：顶部安全区下方放系列标题 + 章节
+      D.bigText(ctx, '收猴子的故事', 485, 282, 74, '#ffcd3c', { shadow: 'rgba(43,35,33,.9)' });
+      ctx.save(); ctx.globalAlpha = ink;
+      ctx.font = D.font(38); const txt = `${chap}｜${ttl}`; const w = ctx.measureText(txt).width + 50;
+      D.rrect(ctx, 485 - w / 2, 340, w, 58, 28, 3, 1); D.fs(ctx, '#2b2321', 0);
+      D.text(ctx, txt, 485, 370, 38, '#fff');
+      ctx.restore();
+      if (h.price || h.cage != null) drawPriceChip(ctx, t, h, 485, 438, 0.92, true);
+    } else {
+      ctx.save(); ctx.globalAlpha = ink;
+      ctx.font = D.font(34); const txt = `${chap}｜${ttl}`; const w = ctx.measureText(txt).width + 46;
+      D.rrect(ctx, 34, 34, w, 56, 28, 3, 1); D.fs(ctx, 'rgba(43,35,33,.88)', 0);
+      D.text(ctx, txt, 34 + w / 2, 63, 34, '#fff');
+      ctx.restore();
+      D.text(ctx, '经济学寓言 · 收猴子的故事', 34, 120, 26, 'rgba(43,35,33,.55)', { align: 'left' });
+      if (h.price || h.cage != null) drawPriceChip(ctx, t, h, 1920 - 190, 120, 1, false);
+    }
+  }
+  function drawPriceChip(ctx, t, h, cx, cy, s, row) {
+    const pulse = h.since < 0.6 ? 1 + 0.25 * Math.sin(h.since / 0.6 * Math.PI) : 1;
+    ctx.save(); ctx.translate(cx, cy); ctx.scale(s, s);
+    if (row) {
+      // 横排：收购价 | 笼中猴子
+      let x = 0;
+      const parts = [];
+      if (h.price) parts.push(['p', h.label, '¥' + h.price]);
+      if (h.cage != null) parts.push(['c', '笼中猴子', h.cage + '只']);
+      const pw = 300, gap = 20, tot = parts.length * pw + (parts.length - 1) * gap;
+      x = -tot / 2;
+      parts.forEach(([k, lab, val]) => {
+        D.rrect(ctx, x, -34, pw, 68, 20, k === 'p' ? 5 : 6, 1); D.fs(ctx, k === 'p' ? '#fff4d6' : '#e7f6ff', 4);
+        D.text(ctx, lab, x + 20, 1, 28, '#6b5a4a', { align: 'left' });
+        ctx.save(); ctx.translate(x + pw - 22, 0); if (k === 'p') ctx.scale(pulse, pulse);
+        D.text(ctx, val, 0, 2, 44, k === 'p' ? (h.price === '???' ? '#888' : D.C.red) : D.C.blue, { align: 'right', stroke: 0 });
+        ctx.restore();
+        x += pw + gap;
+      });
+    } else {
+      let y = 0;
+      if (h.price) {
+        D.rrect(ctx, -150, -60, 300, 140, 22, 5, 1.2); D.fs(ctx, '#fff4d6', 5);
+        D.text(ctx, h.label, 0, -30, 30, '#6b5a4a');
+        ctx.save(); ctx.translate(0, 26); ctx.scale(pulse, pulse);
+        D.bigText(ctx, '¥' + h.price, 0, 0, 64, h.price === '???' ? '#aaa' : D.C.red, { shadow: null });
+        ctx.restore();
+        y = 100;
+      }
+      if (h.cage != null) {
+        D.rrect(ctx, -150, y, 300, 90, 22, 6, 1.2); D.fs(ctx, '#e7f6ff', 5);
+        D.text(ctx, '笼中猴子', 0, y + 26, 26, '#4b5d6b');
+        D.text(ctx, h.cage + ' 只', 0, y + 62, 38, D.C.blue);
+      }
+    }
+    ctx.restore();
+  }
+
+  function drawIris(ctx, Lo, sc, lt, first, last) {
+    let r = null;
+    const cx = Lo.sx + STAGE_W * Lo.k / 2, cy = Lo.sy + STAGE_H * Lo.k / 2;
+    const R = Math.hypot(Lo.W, Lo.H);
+    if (!first && lt < 0.45) r = D.E.inout(lt / 0.45) * R;
+    const endD = last ? 1.2 : 0.3;
+    if (sc.dur - lt < endD) r = D.E.inout((sc.dur - lt) / endD) * R;
+    if (first && lt < 0.6) { ctx.fillStyle = `rgba(43,35,33,${1 - lt / 0.6})`; ctx.fillRect(0, 0, Lo.W, Lo.H); }
+    if (r == null) return;
+    ctx.save(); ctx.beginPath(); ctx.rect(0, 0, Lo.W, Lo.H); ctx.arc(cx, cy, Math.max(0, r), 0, Math.PI * 2, true);
+    ctx.fillStyle = '#2b2321'; ctx.fill('evenodd'); ctx.restore();
+  }
+
+  function drawSafeGuides(ctx, Lo) {
+    if (!Lo.safe) {
+      ctx.save(); ctx.setLineDash([16, 12]); ctx.strokeStyle = 'rgba(0,200,255,.8)'; ctx.lineWidth = 3;
+      ctx.strokeRect(Lo.W * 0.05, Lo.H * 0.05, Lo.W * 0.9, Lo.H * 0.9); ctx.restore(); return;
+    }
+    const s = Lo.safe;
+    ctx.save();
+    ctx.fillStyle = 'rgba(255,0,80,.18)';
+    ctx.fillRect(0, 0, Lo.W, s.top); ctx.fillRect(0, s.bottom, Lo.W, Lo.H - s.bottom); ctx.fillRect(s.right, Lo.H * 0.45, Lo.W - s.right, s.bottom - Lo.H * 0.45);
+    ctx.font = '30px sans-serif'; ctx.fillStyle = 'rgba(255,255,255,.95)'; ctx.textAlign = 'center';
+    ctx.fillText('刘海 / 状态栏 / 顶部导航 区域', Lo.W / 2, s.top / 2);
+    ctx.fillText('抖音 账号名 / 文案 / 音乐 / 进度条 区域', Lo.W / 2, s.bottom + 120);
+    ctx.save(); ctx.translate(s.right + 70, Lo.H * 0.62); ctx.rotate(Math.PI / 2); ctx.fillText('点赞 / 评论 / 分享 按钮', 0, 0); ctx.restore();
+    ctx.restore();
+  }
+
+  /* ---------- 主渲染 ---------- */
+  function render(ctx, t, Lo, opts = {}) {
+    D.boil = Math.floor(t * 8);
+    const { sc, lt } = TL.at(t);
+    const scene = window.SCENES[sc.id];
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.globalAlpha = 1; ctx.globalCompositeOperation = 'source-over';
+    ctx.fillStyle = '#fbf3e1'; ctx.fillRect(0, 0, Lo.W, Lo.H);
+    const S = {
+      t, lt, dur: sc.dur, L: sc.L, id: sc.id, portrait: Lo.name === 'portrait',
+      ls: (i) => lt - sc.L[i],
+    };
+    ctx.save();
+    ctx.setTransform(Lo.k, 0, 0, Lo.k, Lo.sx, Lo.sy);
+    try { scene && scene(ctx, lt, S); } catch (e) { console.error(sc.id, e); }
+    ctx.restore();
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    // 颗粒与暗角
+    ctx.save(); ctx.globalAlpha = 0.07; ctx.globalCompositeOperation = 'multiply';
+    ctx.fillStyle = ctx.createPattern(getGrain(), 'repeat'); ctx.fillRect(0, 0, Lo.W, Lo.H); ctx.restore();
+    const vg = ctx.createRadialGradient(Lo.W / 2, Lo.H / 2, Math.min(Lo.W, Lo.H) * 0.45, Lo.W / 2, Lo.H / 2, Math.hypot(Lo.W, Lo.H) * 0.62);
+    vg.addColorStop(0, 'rgba(43,35,33,0)'); vg.addColorStop(1, 'rgba(43,35,33,.28)');
+    ctx.fillStyle = vg; ctx.fillRect(0, 0, Lo.W, Lo.H);
+    drawIris(ctx, Lo, sc, lt, sc.index === 0, sc.index === TL.scenes.length - 1);
+    const irisDark = (sc.index > 0 && lt < 0.12) || (sc.dur - lt < 0.08);
+    if (!irisDark) drawHud(ctx, t, Lo, sc, lt);
+    drawSubtitle(ctx, t, Lo);
+    if (opts.guides) drawSafeGuides(ctx, Lo);
+  }
+
+  /* ---------- 封面 ---------- */
+  function renderCover(ctx, Lo) {
+    D.boil = 3;
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.fillStyle = '#fbf3e1'; ctx.fillRect(0, 0, Lo.W, Lo.H);
+    ctx.save(); ctx.setTransform(Lo.k, 0, 0, Lo.k, Lo.sx, Lo.sy);
+    window.SCENES.__cover(ctx, Lo.name === 'portrait');
+    ctx.restore();
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.save(); ctx.globalAlpha = 0.07; ctx.globalCompositeOperation = 'multiply';
+    ctx.fillStyle = ctx.createPattern(getGrain(), 'repeat'); ctx.fillRect(0, 0, Lo.W, Lo.H); ctx.restore();
+    const P = Lo.name === 'portrait';
+    if (P) {
+      D.bigText(ctx, '收猴子的故事', 540, 330, 132, '#ffcd3c', { rot: -0.03 });
+      ctx.save(); D.rrect(ctx, 150, 420, 780, 92, 40, 2, 1); D.fs(ctx, '#ff5b4f', 6); ctx.restore();
+      D.text(ctx, '一个寓言，看懂所有泡沫', 540, 468, 54, '#fff');
+      D.bigText(ctx, '你会花35块', 470, 1320, 92, '#fff');
+      D.bigText(ctx, '买一只猴子吗？', 470, 1440, 92, '#ffcd3c');
+    } else {
+      D.bigText(ctx, '收猴子的故事', 960, 150, 150, '#ffcd3c', { rot: -0.03 });
+      D.rrect(ctx, 600, 238, 720, 84, 40, 2, 1); D.fs(ctx, '#ff5b4f', 6);
+      D.text(ctx, '一个寓言，看懂所有泡沫', 960, 281, 52, '#fff');
+      D.bigText(ctx, '35块买只猴子', 330, 560, 72, '#fff', { rot: -0.08 });
+      D.bigText(ctx, '你干不干？', 330, 660, 72, '#ffcd3c', { rot: -0.08 });
+      D.bigText(ctx, '博傻理论', 1640, 600, 70, '#fff', { rot: 0.08 });
+      D.bigText(ctx, '泡沫真相', 1640, 700, 70, '#8ff5b5', { rot: 0.08 });
+    }
+  }
+
+  window.ENGINE = { render, renderCover, TL, LAYOUTS, STAGE_W, STAGE_H };
+})();

shouhouzi/js/scenes.js

@@ -0,0 +1,897 @@
+/* =========================================================
+ * scenes.js —— 15 个场景动画。舞台坐标 1280×960，地平线 GY。
+ * 每个场景函数签名 (ctx, lt, S)：lt 场景内时间，S.ls(i) = 距第 i 句开始的秒数
+ * 背景会画到舞台之外，以覆盖横屏两侧与竖屏上下的额外区域。
+ * ========================================================= */
+(function () {
+  const { C, E } = D;
+  const GY = 780;
+  const X0 = -900, X1 = 2200, Y0 = -1000, Y1 = 2300;
+  const SC = {};
+
+  /* ---------- 小工具 ---------- */
+  // 元素可见度：a 时刻弹入，b 时刻后收起；返回缩放系数
+  function vis(lt, a, b = null, inD = 0.45, outD = 0.3) {
+    if (lt < a) return 0;
+    let k = E.back((lt - a) / inD);
+    if (b != null && lt > b) k *= 1 - E.in((lt - b) / outD);
+    return Math.max(0, k);
+  }
+  function fade(lt, a, b = null, inD = 0.35, outD = 0.3) {
+    if (lt < a) return 0;
+    let k = D.clamp01((lt - a) / inD);
+    if (b != null && lt > b) k *= 1 - D.clamp01((lt - b) / outD);
+    return k;
+  }
+  const at = D.at;
+  function fillAll(ctx, col) { ctx.fillStyle = col; ctx.fillRect(X0, Y0, X1 - X0, Y1 - Y0); }
+  function sky(ctx, top = '#8fd3ff', bot = '#e9f8ff') {
+    const g = ctx.createLinearGradient(0, -700, 0, GY); g.addColorStop(0, top); g.addColorStop(1, bot);
+    ctx.fillStyle = g; ctx.fillRect(X0, Y0, X1 - X0, GY - Y0 + 10);
+  }
+  function ground(ctx, col = C.grass, col2 = C.grass2, t = 0) {
+    ctx.beginPath(); ctx.moveTo(X0, GY + 10);
+    for (let x = X0; x <= X1; x += 80) ctx.lineTo(x, GY + Math.sin(x * 0.01) * 10 + D.jit(x, 1.5));
+    ctx.lineTo(X1, Y1); ctx.lineTo(X0, Y1); ctx.closePath(); D.fs(ctx, col, 5);
+    // 草丛 / 小花
+    for (let i = 0; i < 60; i++) {
+      const x = X0 + D.hash(i * 3.3) * (X1 - X0), y = GY + 40 + D.hash(i * 7.7) * 1300;
+      ctx.beginPath(); ctx.moveTo(x - 12, y); ctx.lineTo(x - 4, y - 18); ctx.lineTo(x, y - 4); ctx.lineTo(x + 6, y - 20); ctx.lineTo(x + 12, y);
+      D.stroke(ctx, 4, col2);
+      if (i % 5 === 0) { ctx.beginPath(); ctx.arc(x + 20, y - 8, 7, 0, Math.PI * 2); D.fs(ctx, i % 2 ? '#fff' : '#ffd84a', 3); }
+    }
+  }
+  function mountains(ctx, col = '#bfe0c8', col2 = '#a6d1b4') {
+    D.poly(ctx, [[X0, GY], [-500, 380], [-200, 560], [100, 300], [420, 520], [700, 330], [1000, 540], [1300, 280], [1650, 500], [1900, 360], [X1, 520], [X1, GY]], 401, 2); D.fs(ctx, col, 4);
+    D.poly(ctx, [[X0, GY], [-350, 560], [0, 640], [300, 500], [640, 620], [900, 480], [1200, 640], [1500, 520], [X1, 640], [X1, GY]], 402, 2); D.fs(ctx, col2, 4);
+  }
+  function clouds(ctx, t, y = -40) {
+    for (let i = 0; i < 6; i++) {
+      const span = X1 - X0 + 400;
+      const x = X0 - 200 + ((D.hash(i * 9.1) * span + t * (14 + i * 4)) % span);
+      D.cloud(ctx, x, y + D.hash(i * 4.2) * 260 - (i % 2) * 380, 0.8 + D.hash(i) * 0.6, 410 + i);
+    }
+  }
+  // 森林带：density 0..1 控制树上猴子数量
+  const FOREST = [];
+  for (let i = 0; i < 20; i++) FOREST.push({ x: X0 + 60 + i * 160 + D.hash(i * 2.1) * 50, s: 0.95 + D.hash(i * 5.3) * 0.5, pine: i % 3 === 1 });
+  function forest(ctx, t, y, density = 1, o = {}) {
+    const sc = o.scale || 1;
+    FOREST.forEach((f, i) => {
+      if (f.pine) D.pine(ctx, f.x, y, f.s * sc * 1.05, 420 + i, o.col2 || C.forest2);
+      else D.tree(ctx, f.x, y, f.s * sc, 420 + i, o.col || C.forest);
+    });
+    const n = Math.round(FOREST.length * 1.5 * D.clamp01(density));
+    for (let i = 0; i < n; i++) {
+      const f = FOREST[(i * 7) % FOREST.length];
+      const hang = i % 3 === 0;
+      const sw = Math.sin(t * 2.2 + i) * 0.35;
+      const mx = f.x + (D.hash(i * 1.7) - .5) * 70, my = y - 150 * f.s * sc + (i % 2) * 30;
+      if (hang) { // 吊在树枝上荡秋千
+        ctx.save(); ctx.translate(mx, my - 40); ctx.rotate(sw);
+        D.line(ctx, 0, 0, 0, 40, 430 + i); D.stroke(ctx, 6, '#6b8e23');
+        D.monkey(ctx, 0, 190, 0.62 * sc, { t, seed: i + 3, aL: 3.0, aR: 2.9, mood: o.mood || 'happy' });
+        ctx.restore();
+      } else {
+        D.monkey(ctx, mx, my + 40 + Math.abs(Math.sin(t * 3 + i)) * -14, 0.55 * sc, { t, seed: i + 3, flip: i % 2, aL: 2.4 + Math.sin(t * 4 + i) * .4, mood: o.mood || 'happy' });
+      }
+    }
+  }
+  function houses(ctx, t, smoke = true) {
+    D.house(ctx, -330, GY + 20, 0.9, 501, '#f6e3c3', '#d9534f', smoke ? t : null);
+    D.house(ctx, 170, GY + 30, 1.05, 502, '#fdebd0', '#4a8fe2', smoke ? t + 1 : null);
+    D.house(ctx, 1120, GY + 30, 1.0, 503, '#f6e3c3', '#e8a33d', smoke ? t + 2 : null);
+    D.house(ctx, 1560, GY + 20, 0.9, 504, '#fdebd0', '#7bc96f', smoke ? t + 3 : null);
+  }
+  function paper(ctx, col = '#fbf3e1', grid = 'rgba(74,143,226,.13)') {
+    fillAll(ctx, col);
+    ctx.beginPath();
+    for (let x = -896; x < X1; x += 64) { ctx.moveTo(x, Y0); ctx.lineTo(x, Y1); }
+    for (let y = -960; y < Y1; y += 64) { ctx.moveTo(X0, y); ctx.lineTo(X1, y); }
+    ctx.lineWidth = 2; ctx.strokeStyle = grid; ctx.stroke();
+  }
+  function rays(ctx, cx, cy, t, col1 = '#ffe08a', col2 = '#ffd04d', n = 18) {
+    fillAll(ctx, col1);
+    ctx.save(); ctx.translate(cx, cy); ctx.rotate(t * 0.15);
+    for (let i = 0; i < n; i++) { ctx.beginPath(); ctx.moveTo(0, 0); ctx.arc(0, 0, 3200, i / n * Math.PI * 2, (i + .5) / n * Math.PI * 2); ctx.closePath(); ctx.fillStyle = col2; ctx.fill(); }
+    ctx.restore();
+  }
+  function cam(ctx, cx, cy, z, fn) { ctx.save(); ctx.translate(cx, cy); ctx.scale(z, z); ctx.translate(-cx, -cy); fn(); ctx.restore(); }
+  function shake(ctx, amt, t) { if (amt > 0) ctx.translate(Math.sin(t * 61) * amt, Math.cos(t * 47) * amt); }
+  function tint(ctx, col, a) { if (a <= 0) return; ctx.save(); ctx.globalAlpha = a; fillAll(ctx, col); ctx.restore(); }
+  function desat(ctx, a) { if (a <= 0) return; ctx.save(); ctx.globalCompositeOperation = 'saturation'; ctx.globalAlpha = a; fillAll(ctx, '#808080'); ctx.restore(); }
+  function card(ctx, x, y, w, h, col = '#fffaf0', seed = 600) { D.rrect(ctx, x - w / 2 + 10, y - h / 2 + 14, w, h, 28, seed + 1); D.fs(ctx, 'rgba(43,35,33,.25)', 0); D.rrect(ctx, x - w / 2, y - h / 2, w, h, 28, seed); D.fs(ctx, col, 6); }
+  function label(ctx, txt, x, y, size, bg = C.red, fg = '#fff', rot = 0) {
+    ctx.save(); ctx.translate(x, y); ctx.rotate(rot); ctx.font = D.font(size); const w = ctx.measureText(txt).width + size;
+    D.rrect(ctx, -w / 2, -size * .8, w, size * 1.6, size * .6, 611); D.fs(ctx, bg, 5);
+    D.text(ctx, txt, 0, 2, size, fg); ctx.restore();
+  }
+  function rock(ctx, x, y, s) { at(ctx, x, y, s, () => { D.blob(ctx, 0, -50, 120, 60, 620); D.fs(ctx, '#b8b2a7', 6); ctx.beginPath(); ctx.moveTo(-60, -70); ctx.lineTo(-30, -60); D.stroke(ctx, 4, '#8f897f'); }); }
+  function counterText(v) { return Math.round(v).toLocaleString('en-US'); }
+
+  /* =======================================================
+   * 0 开场 hook
+   * ======================================================= */
+  SC.hook = function (ctx, lt, S) {
+    const t = S.t;
+    const shout = fade(lt, S.L[2], S.L[3]);
+    rays(ctx, 640, 480, t, shout > 0 ? '#ffd27a' : '#ffe9a6', shout > 0 ? '#ffc04a' : '#ffdf8a');
+    if (shout > 0) D.speedLines(ctx, 640, 420, t, `rgba(255,255,255,${0.5 * shout})`);
+    ctx.save(); shake(ctx, shout * (S.ls(2) < 1.2 ? 6 : 0), t);
+    // L0 大问号
+    const q = vis(lt, S.L[0], S.L[1] + 0.2);
+    at(ctx, 640, 420, q * 2.2, () => D.qmark(ctx, 0, 0, 1, t, C.blue));
+    if (q > 0) at(ctx, 640, 640, q, () => D.text(ctx, '先问你一个问题', 0, 0, 64, C.ink));
+    // L1~L2 商人登场
+    const m = vis(lt, S.L[1], S.L[3] - 0.1, 0.6);
+    if (m > 0) {
+      const my = D.lerp(1300, GY + 120, E.back(D.clamp01(S.ls(1) / 0.6)));
+      D.merchant(ctx, 900, my, 1.5 * Math.min(1, m + .2), { t, mood: shout > 0 ? 'talk' : 'happy', aR: 2.3, holdR: (c) => D.megaphone(c), aL: 0.5 });
+      if (shout > 0) {
+        const b = vis(lt, S.L[2], S.L[3] - 0.1);
+        at(ctx, 420, 330, b, () => {
+          D.bubble(ctx, 0, 0, 640, 300, 360, 160, { seed: 3 });
+          D.bigText(ctx, '收猴子！', 0, -70, 78, C.ink, { shadow: null, stroke: 0 });
+          D.bigText(ctx, '¥10/只', 0, 40, 120, C.red);
+        }, -0.05);
+        D.coinBurst(ctx, 640, 500, S.ls(2) - 0.4, 18, 7, 1.1);
+      }
+    }
+    // L3 干不干
+    const b3 = vis(lt, S.L[3], S.L[4] + 1.5);
+    if (b3 > 0) {
+      const click = S.ls(3) > 1.4;
+      at(ctx, 400, 480, b3 * (click && S.ls(3) < 1.6 ? 0.9 : 1), () => { card(ctx, 0, 0, 380, 200, click ? '#6fe08f' : '#b9f0c9', 701); D.bigText(ctx, '干！', 0, 0, 100, '#fff'); });
+      at(ctx, 880, 480, b3, () => { card(ctx, 0, 0, 380, 200, '#e1e1e1', 702); D.text(ctx, '不干', 0, 0, 80, '#999'); });
+      // 手形光标
+      const k = E.inout(D.clamp01((S.ls(3) - 0.4) / 0.9));
+      const hx = D.lerp(1100, 440, k), hy = D.lerp(820, 520, k);
+      at(ctx, hx, hy, b3, () => { D.blob(ctx, 0, 0, 30, 36, 703); D.fs(ctx, '#fff', 5); D.rrect(ctx, -10, -70, 20, 60, 10, 704); D.fs(ctx, '#fff', 5); });
+      if (click) D.confetti(ctx, 400, 440, S.ls(3) - 1.4, 30, 500, 11);
+    }
+    // L4 白来的钱
+    const b4 = vis(lt, S.L[4] + 0.2, S.L[5] - 0.1);
+    if (b4 > 0) {
+      at(ctx, 640, 260, b4, () => D.bigText(ctx, '白来的钱？', 0, 0, 96, C.green));
+      D.villager(ctx, 0, 460, GY + 60, 1.3 * b4, { t, mood: 'money', aL: 2.6, aR: 2.6 });
+      D.monkey(ctx, 820, GY + 40, 1.6 * b4, { t, mood: 'smug', aR: 2.5 });
+      D.coinBurst(ctx, 460, 500, S.ls(4) - 0.6, 14, 21, 0.9);
+    }
+    // L5 最贵的钱
+    const b5 = vis(lt, S.L[5], S.L[6] - 0.1);
+    if (b5 > 0) {
+      tint(ctx, '#2b2321', 0.55 * D.clamp01(S.ls(5) / 1.5));
+      const k = D.clamp01(S.ls(5) / 2);
+      D.bill(ctx, 640, 440, 3.2 * b5, Math.sin(t * 2) * 0.06, '10');
+      at(ctx, 900, 300, vis(lt, S.L[5] + 2.2), () => { D.stamp(ctx, 0, 0, 1.2, '最贵的钱?', C.red, 0.15); });
+      at(ctx, 640, 700, b5, () => D.text(ctx, '……真的是白来的吗？', 0, 0, 52, '#fff', { alpha: k }));
+    }
+    // L6 标题卡
+    const b6 = vis(lt, S.L[6] - 0.05, null, 0.7);
+    if (b6 > 0) {
+      rays(ctx, 640, 420, t, '#ffcd3c', '#ffb52e', 22);
+      D.confetti(ctx, 640, 200, S.ls(6) - 0.2, 60, 800, 31);
+      const title = '收猴子的故事';
+      [...title].forEach((ch, i) => {
+        const d = S.ls(6) - 0.15 - i * 0.12;
+        const k = E.elastic(D.clamp01(d / 0.8));
+        at(ctx, 640 + (i - 2.5) * 150, 360 + Math.sin(t * 3 + i) * 8, k, () => D.bigText(ctx, ch, 0, 0, 150, i % 2 ? '#fff' : C.red));
+      });
+      at(ctx, 640, 520, vis(lt, S.L[6] + 1.2), () => label(ctx, '经济学寓言', 0, 0, 56, C.ink, '#ffcd3c', -0.03));
+      D.monkey(ctx, 240, GY + 120, 1.5 * vis(lt, S.L[6] + 0.8), { t, aL: 2.9, aR: 2.9, mood: 'happy' });
+      D.monkey(ctx, 1040, GY + 120, 1.5 * vis(lt, S.L[6] + 1.0), { t, flip: 1, aL: 2.9, aR: 2.9, mood: 'smug' });
+    }
+    ctx.restore();
+  };
+
+  /* =======================================================
+   * 1 小山村 village
+   * ======================================================= */
+  SC.village = function (ctx, lt, S) {
+    const t = S.t;
+    const z = D.lerp(1.25, 1, E.inout(lt / 6));
+    cam(ctx, 640, 520, z, () => {
+      sky(ctx); D.sun(ctx, 1050, 60, 70, t); clouds(ctx, t);
+      mountains(ctx);
+      forest(ctx, t, GY - 70, vis(lt, S.L[1], null, 1.2), { scale: 0.85 });
+      ground(ctx);
+      houses(ctx, t);
+      // 小路
+      ctx.beginPath(); ctx.moveTo(560, Y1); ctx.quadraticCurveTo(600, 1000, 660, GY + 20); ctx.lineTo(720, GY + 20); ctx.quadraticCurveTo(760, 1000, 900, Y1); D.fs(ctx, '#e9d3a6', 4);
+      const fy = fade(lt, S.L[0], S.L[1] + 1);
+      if (fy > 0) at(ctx, 640, 200, 1, () => D.bigText(ctx, '从前……', 0, 0, 90, '#fff', { alpha: fy }));
+      if (lt > S.L[1] && lt < S.L[2] + 0.2) at(ctx, 640, 210, vis(lt, S.L[1] + 0.8, S.L[2]), () => label(ctx, '成百上千只猴子', 0, 0, 56, C.fur, '#fff'));
+      // L2 三个不能
+      const icons = [['不能吃', '🍚'], ['不能用', '🔧'], ['卖不了钱', '¥']];
+      icons.forEach(([txt], i) => {
+        const k = vis(lt, S.L[2] + 0.4 + i * 1.3, S.L[3] - 0.1);
+        if (k <= 0) return;
+        at(ctx, 300 + i * 340, 250, k, () => {
+          card(ctx, 0, 0, 290, 170, '#fff', 720 + i);
+          D.monkey(ctx, -80, 60, 0.6, { t, seed: i + 9, mood: 'smug' });
+          D.text(ctx, txt, 40, 0, 46, C.ink);
+          if (lt > S.L[2] + 0.9 + i * 1.3) D.cross(ctx, 40, 0, 50);
+        });
+      });
+      // L3 偷玉米
+      if (lt > S.L[3]) {
+        const d = S.ls(3);
+        const mx = D.lerp(-200, 1500, d / 4.4);
+        D.monkey(ctx, mx, GY + 110 - Math.abs(Math.sin(d * 9)) * 40, 1.1, { t, seed: 5, flip: 0, aR: 2.2, mood: 'smug', hold: (c, x, y) => { D.blob(c, x + 6, y - 20, 14, 34, 730); D.fs(c, '#ffd84a', 4); D.blob(c, x + 6, y + 14, 18, 10, 731); D.fs(c, '#7bc96f', 3); } });
+        const vx = D.lerp(-500, 1150, (d - 0.3) / 4.4);
+        D.villager(ctx, 0, vx, GY + 140, 1.0, { t, walk: d * 14, mood: 'angry', aR: 2.8 });
+        if (d > 0.6) at(ctx, vx + 60, GY - 210, 1, () => D.text(ctx, '站住！', 0, 0, 44, C.red, { stroke: 8, strokeColor: '#fff' }));
+      }
+    });
+  };
+
+  /* =======================================================
+   * 2 商人进村 arrive
+   * ======================================================= */
+  SC.arrive = function (ctx, lt, S) {
+    const t = S.t;
+    sky(ctx); D.sun(ctx, 1120, 40, 60, t); clouds(ctx, t);
+    mountains(ctx); forest(ctx, t, GY - 70, 0.8, { scale: 0.8, mood: S.ls(2) > 0 ? 'shock' : 'happy' }); ground(ctx); houses(ctx, t);
+    rock(ctx, 640, GY + 150, 1.6);
+    // 村民探头
+    const peek = vis(lt, S.L[0] + 1.5);
+    [[150, 0], [300, 1], [1000, 2], [1150, 3]].forEach(([x, i]) => D.villager(ctx, i, x, GY + 220, 0.9 * peek, { t, mood: S.ls(2) > 0.4 ? 'shock' : 'happy', flip: x > 640 }));
+    // 商人走入 -> 跳上石头
+    const d0 = S.ls(0), d1 = S.ls(1);
+    let mx, my, walk = null, aR = 0.3, mood = 'happy';
+    if (d1 < 0) { mx = D.lerp(-300, 470, E.out(d0 / 4)); my = GY + 200; walk = d0 < 4 ? d0 * 10 : null; }
+    else { const k = D.clamp01(d1 / 0.7); mx = D.lerp(470, 640, k); my = D.lerp(GY + 200, GY + 50, k) - Math.sin(k * Math.PI) * 120; aR = D.lerp(0.3, 2.4, k); }
+    if (S.ls(2) > 0) { mood = 'talk'; aR = 2.4; }
+    if (walk != null) D.dust(ctx, mx - 30, my, t, 5, 3);
+    D.merchant(ctx, mx, my, 1.2, { t, walk, mood, aR, holdR: d1 > 0.2 ? (c) => D.megaphone(c) : null, aL: 0.4 });
+    if (d0 > 0.3 && d1 < 0) at(ctx, mx, my - 380, vis(lt, S.L[0] + 0.5, S.L[1]), () => label(ctx, '神秘商人', 0, 0, 42, C.ink, '#ffcd3c'));
+    // L2 喊话
+    if (S.ls(2) > 0) {
+      const k = vis(lt, S.L[2]);
+      D.speedLines(ctx, 760, 300, t, 'rgba(255,255,255,.35)', 28, 300);
+      at(ctx, 980, 230, k, () => {
+        D.bubble(ctx, 0, 0, 520, 280, -220, 160, { seed: 7 });
+        D.text(ctx, '高价收猴子！', 0, -70, 60, C.ink);
+        D.bigText(ctx, '¥10/只', 0, 30, 100, C.red);
+        D.text(ctx, '现金结算', 0, 105, 36, C.green);
+      }, Math.sin(t * 8) * 0.02);
+      [[150, 0], [300, 1], [1000, 2], [1150, 3]].forEach(([x], i) => D.exclaim(ctx, x, GY - 120, 0.5 * vis(lt, S.L[2] + 0.4 + i * 0.15), t));
+    }
+  };
+
+  /* =======================================================
+   * 3 十元一只 ten
+   * ======================================================= */
+  SC.ten = function (ctx, lt, S) {
+    const t = S.t;
+    sky(ctx); clouds(ctx, t); D.sun(ctx, 1100, 0, 60, t);
+    const dens = 1 - 0.35 * D.clamp01((lt - S.L[2]) / 14);
+    forest(ctx, t, GY - 10, dens, { scale: 1.15 });
+    ground(ctx);
+    const conv = S.ls(3) > 0; // 交易阶段
+    // 商人 + 笼子（左侧）
+    const cageFill = conv ? D.clamp01(S.ls(3) / 9) * 0.6 : 0;
+    if (lt > S.L[1]) {
+      D.cage(ctx, 260, GY + 200, 360, 250, cageFill, t, { cols: 5, rows: 3, label: '收购笼' });
+      D.merchant(ctx, 520, GY + 210, 1.0, { t, mood: 'laugh', aR: conv ? 1.6 + Math.sin(t * 6) * .3 : 0.4 });
+    }
+    // L0 村民怀疑
+    if (lt < S.L[2] + 0.3) {
+      const k = vis(lt, S.L[0], S.L[2]);
+      [[700, 0], [860, 1], [1020, 2]].forEach(([x, i]) => D.villager(ctx, i, x, GY + 200, 1.0, { t, mood: S.ls(1) > 1.5 ? 'shock' : 'sly', aR: 2.6 }));
+      at(ctx, 860, 250, k * (S.ls(1) > 0 ? 1 - D.clamp01(S.ls(1) / .3) : 1), () => D.thought(ctx, 0, 0, 520, 200, 0, 180, { text: ['这人……', '脑子有问题吧？'], size: 46 }));
+      // L1 第一个人拿到钱
+      if (S.ls(1) > 0) {
+        const d = S.ls(1);
+        const mx = D.lerp(700, 520, E.inout(d / 1)), my = GY + 40 - Math.sin(D.clamp01(d) * Math.PI) * 80;
+        if (d < 1.2) D.monkey(ctx, mx, my, 0.7, { t, mood: 'shock' });
+        D.coinBurst(ctx, 640, GY - 100, d - 1.1, 10, 41, 0.8);
+        at(ctx, 700, GY - 260, vis(lt, S.L[1] + 1.3), () => D.bigText(ctx, '+¥10', 0, -Math.min(60, (d - 1.3) * 40), 80, C.green));
+      }
+    }
+    // L2 冲进山
+    if (S.ls(2) > 0 && !conv) {
+      const d = S.ls(2);
+      for (let i = 0; i < 7; i++) {
+        const x = D.lerp(-300 - i * 170, 1700, (d - i * 0.08) / 4.2);
+        D.villager(ctx, i, x, GY + 170 + (i % 2) * 70, 0.95, { t: t + i, walk: d * 12 + i, mood: 'laugh', aR: 2.7, holdR: (c) => D.net(c) });
+        D.dust(ctx, x - 40, GY + 170 + (i % 2) * 70, t + i * .3, 3, i);
+      }
+      at(ctx, 640, 220, vis(lt, S.L[2] + 0.3, S.L[3] - 0.2), () => D.bigText(ctx, '冲啊！！', 0, 0, 110, C.red, { rot: -0.08 }));
+    }
+    // L3~L4 一手交猴一手交钱：猴子流水线
+    if (conv) {
+      const d = S.ls(3);
+      for (let i = 0; i < 6; i++) {
+        const ph = ((d * 0.55 + i / 6) % 1);
+        const x = D.lerp(1250, 330, ph), y = GY + 60 - Math.abs(Math.sin(ph * Math.PI * 3)) * 140;
+        D.monkey(ctx, x, y, 0.55, { t, seed: i + 20, mood: 'shock', aL: 2.8, aR: 2.8 });
+        const cx = D.lerp(560, 1150, ph), cy = GY - 260 - Math.sin(ph * Math.PI) * 160;
+        D.coin(ctx, cx, cy, 22, t * 8 + i);
+      }
+      [[900, 3], [1050, 4], [1200, 5]].forEach(([x, i], j) => D.villager(ctx, i, x, GY + 210, 0.95, { t, mood: 'money', aL: 2.5 + Math.sin(t * 6 + j) * .3, aR: 2.5, flip: true, jump: Math.abs(Math.sin(t * 5 + j)) * 20 }));
+      at(ctx, 640, 170, vis(lt, S.L[3] + 0.2, S.L[4]), () => label(ctx, '一手交猴 · 一手交钱', 0, 0, 52, C.ink, '#ffcd3c'));
+      if (S.ls(4) > 0) at(ctx, 950, 200, vis(lt, S.L[4] + 0.5), () => { card(ctx, 0, 0, 420, 140, '#fff', 740); D.text(ctx, '村民口袋：鼓起来了！', 0, 0, 40, C.green); });
+    }
+  };
+
+  /* =======================================================
+   * 4 二十元 twenty
+   * ======================================================= */
+  SC.twenty = function (ctx, lt, S) {
+    const t = S.t;
+    // L1 太阳快速划过（一整天）
+    const day = D.clamp01(S.ls(1) / 4.5);
+    const dusk = S.ls(1) > 0 && S.ls(2) < 0 ? Math.sin(day * Math.PI) * 0.0 + day * 0.5 : 0;
+    sky(ctx, dusk > 0 ? '#f6a96b' : '#8fd3ff', '#fff1d6');
+    D.sun(ctx, D.lerp(-100, 1400, S.ls(1) > 0 && S.ls(2) < 0 ? day : 0.75), D.lerp(300, -60, Math.sin((S.ls(1) > 0 && S.ls(2) < 0 ? day : .75) * Math.PI)), 60, t);
+    clouds(ctx, t);
+    const dens = D.lerp(0.6, 0.3, D.clamp01(lt / 8));
+    forest(ctx, t, GY - 10, S.ls(4) > 0 ? 0.3 : dens, { scale: 1.15 });
+    ground(ctx);
+    if (S.ls(2) < 0) {
+      // 抓猴子越来越难
+      const d = S.ls(1);
+      const x = 640 + Math.sin(t * 1.4) * 260;
+      D.villager(ctx, 0, x, GY + 200, 1.1, { t, walk: t * 8, flip: Math.cos(t * 1.4) < 0, mood: d > 0 ? 'sad' : 'happy', aR: 2.6, holdR: (c) => D.net(c) });
+      if (d > 0) {
+        for (let i = 0; i < 3; i++) { const k = (t * 1.5 + i / 3) % 1; ctx.globalAlpha = 1 - k; D.blob(ctx, x + 50 + i * 10, GY - 130 + k * 60, 8, 12, 750 + i); D.fs(ctx, '#7fd0ff', 3); ctx.globalAlpha = 1; }
+        at(ctx, 640, 200, vis(lt, S.L[1] + 0.6, S.L[2]), () => { card(ctx, 0, 0, 560, 150, '#fff', 751); D.text(ctx, '跑一整天……才 1~2 只', 0, 0, 48, C.ink); });
+      } else {
+        at(ctx, 640, 200, vis(lt, S.L[0] + 0.8, S.L[1]), () => label(ctx, '林子里的猴子：越来越少 ↓', 0, 0, 48, C.forest2));
+      }
+    } else {
+      // L2~L3 商人涨价
+      const d3 = S.ls(3);
+      D.merchant(ctx, 330, GY + 210, 1.15, { t, mood: S.ls(3) > 0 && S.ls(4) < 0 ? 'talk' : 'laugh', aR: 2.4, holdR: (c) => D.megaphone(c) });
+      const flip = D.clamp01((d3 + 0.1) / 0.6);
+      const price = flip > 0.5 ? '20' : '10';
+      D.priceSign(ctx, 760, GY + 160, 1.1, price, { t, flip });
+      if (d3 > 0.5) { at(ctx, 1030, 220, vis(lt, S.L[3] + 0.5), () => D.stamp(ctx, 0, 0, 1, '涨价！翻倍！', C.red, 0.18)); }
+      if (d3 > 0.3 && S.ls(4) < 0) D.speedLines(ctx, 760, 400, t, 'rgba(255,255,255,.4)', 24, 320);
+      // L4 全村沸腾 + 隔壁村
+      if (S.ls(4) > 0) {
+        const d = S.ls(4);
+        for (let i = 0; i < 6; i++) D.villager(ctx, i, 640 + i * 120 - 90, GY + 330, 0.8, { t: t + i, mood: 'laugh', aL: 2.8, aR: 2.8, jump: Math.abs(Math.sin(t * 6 + i)) * 30 });
+        D.confetti(ctx, 900, 300, d, 40, 700, 51);
+        at(ctx, 1150, 470, vis(lt, S.L[4] + 1.6), () => { D.rrect(ctx, -8, 0, 16, 180, 4, 760); D.fs(ctx, '#8a5a35', 4); D.poly(ctx, [[-120, -40], [110, -40], [150, 0], [110, 40], [-120, 40]], 761); D.fs(ctx, '#fff4d6', 5); D.text(ctx, '隔壁村 →', 0, 2, 40, C.ink); });
+        for (let i = 0; i < 4; i++) { const x = D.lerp(1900, 1100, (d - 2 - i * 0.3) / 2.5); if (d > 2 + i * .3) D.villager(ctx, i + 2, x, GY + 420, 0.75, { t, walk: t * 12 + i, flip: true, mood: 'laugh', aR: 2.6, holdR: (c) => D.net(c) }); }
+      }
+    }
+  };
+
+  /* =======================================================
+   * 5 二十五元 scarce
+   * ======================================================= */
+  SC.scarce = function (ctx, lt, S) {
+    const t = S.t;
+    sky(ctx, '#a9cbe0', '#eef4f2'); clouds(ctx, t);
+    forest(ctx, t, GY - 10, D.lerp(0.25, 0.06, D.clamp01(lt / 6)), { scale: 1.15, col: '#6aa36a', col2: '#4f8a55' });
+    ground(ctx, '#b5d488', '#93b866');
+    // L0-L1 价格牌 20 -> 25
+    if (S.ls(2) < 0) {
+      const flip = D.clamp01((S.ls(1) - 0.6) / 0.6);
+      D.priceSign(ctx, 900, GY + 170, 1.15, flip > 0.5 ? '25' : '20', { t, flip });
+      D.merchant(ctx, 470, GY + 210, 1.1, { t, mood: S.ls(1) > 0 ? 'talk' : 'happy', aR: 2.2, holdR: (c) => D.megaphone(c) });
+      at(ctx, 640, 180, vis(lt, S.L[0] + 0.4, S.L[1]), () => label(ctx, '猴子更少了……', 0, 0, 52, C.ink, '#fff'));
+      if (S.ls(1) > 1.2) at(ctx, 1100, 280, vis(lt, S.L[1] + 1.2), () => D.stamp(ctx, 0, 0, 0.9, '再涨！', C.red, 0.2));
+    } else if (S.ls(3) < 0) {
+      // L2 望远镜找猴子
+      const d = S.ls(2);
+      D.villager(ctx, 2, 420, GY + 200, 1.2, { t, mood: 'sad', aR: 2.0, holdR: (c) => { c.save(); c.rotate(-1.2); D.rrect(c, -10, -80, 26, 90, 6, 770); D.fs(c, '#c08a3e', 4); D.rrect(c, -14, -100, 34, 30, 6, 771); D.fs(c, '#8a5a35', 4); c.restore(); } });
+      // 望远镜视野
+      const vx = 860 + Math.sin(d * 1.3) * 200, vy = 330 + Math.cos(d * 1.7) * 60;
+      ctx.save(); ctx.beginPath(); ctx.arc(vx, vy, 150, 0, Math.PI * 2); ctx.lineWidth = 14; ctx.strokeStyle = C.ink; ctx.stroke(); ctx.fillStyle = 'rgba(255,255,255,.12)'; ctx.fill(); ctx.restore();
+      at(ctx, vx, vy, 1, () => D.text(ctx, '空', 0, 0, 90, 'rgba(43,35,33,.35)'));
+      [0, 1, 2].forEach((i) => D.qmark(ctx, 300 + i * 340, 150, 0.6 * vis(lt, S.L[2] + 0.6 + i * .4), t + i, C.blue));
+    } else {
+      // L3 抓到一只的人在炫耀
+      const d = S.ls(3);
+      for (let i = 0; i < 6; i++) { const x = 640 + (i - 2.5) * 210; if (Math.abs(x - 640) > 100) D.villager(ctx, i + 1, x, GY + 240 + (i % 2) * 40, 0.9, { t: t + i, mood: 'shock', aL: 2.5 + Math.sin(t * 8 + i) * .4, aR: 2.5 - Math.sin(t * 8 + i) * .4, flip: x > 640 }); }
+      D.villager(ctx, 0, 640, GY + 180, 1.25, { t, mood: 'laugh', aR: 2.9, aL: 0.6, jump: Math.abs(Math.sin(t * 4)) * 16, holdR: (c) => D.monkey(c, 0, 0, 0.75, { t, mood: 'smug', aL: 2.8, aR: 2.8 }) });
+      for (let i = 0; i < 6; i++) D.sparkle(ctx, 640 + Math.cos(i + t) * 200, 160 + Math.sin(i * 2 + t) * 80, 26, t + i);
+      at(ctx, 640, 120, vis(lt, S.L[3] + 0.4), () => label(ctx, '全村炫耀三天！', 0, 0, 54, C.purple));
+    }
+  };
+
+  /* =======================================================
+   * 6 五十元 fifty
+   * ======================================================= */
+  SC.fifty = function (ctx, lt, S) {
+    const t = S.t;
+    const spot = S.ls(2) < 0;
+    if (spot) {
+      fillAll(ctx, '#2a2340');
+      ctx.save(); const g = ctx.createRadialGradient(640, GY, 50, 640, GY - 200, 600); g.addColorStop(0, 'rgba(255,240,180,.9)'); g.addColorStop(1, 'rgba(255,240,180,0)');
+      ctx.fillStyle = g; ctx.beginPath(); ctx.moveTo(560, -900); ctx.lineTo(720, -900); ctx.lineTo(1000, GY + 250); ctx.lineTo(280, GY + 250); ctx.closePath(); ctx.fill(); ctx.restore();
+      ctx.fillStyle = '#3a3157'; ctx.fillRect(X0, GY + 200, X1 - X0, Y1);
+      D.merchant(ctx, 640, GY + 230, 1.4, { t, mood: S.ls(1) > 0 ? 'sly' : 'happy', aR: S.ls(1) > 0 ? 2.8 : 0.4, aL: S.ls(1) > 0 ? 2.8 : 0.4 });
+      at(ctx, 640, 120, vis(lt, S.L[1] + 0.2), () => D.bigText(ctx, '大  招', 0, 0, 120, '#ffcd3c'));
+      return;
+    }
+    rays(ctx, 640, 380, t, '#ffd27a', '#ffb547', 20);
+    const d2 = S.ls(2);
+    // 巨型 ¥50
+    if (S.ls(4) < 0) {
+      const drop = E.bounce(D.clamp01(d2 / 0.9));
+      D.priceSign(ctx, 640, D.lerp(-600, 600, drop), 1.6, '50', { t, noPost: true, bg: '#fff2b8', head: '最新收购价' });
+      D.confetti(ctx, 640, 100, d2 - 0.6, 70, 900, 61);
+      if (S.ls(3) > 0) {
+        // 村民瞪大眼
+        for (let i = 0; i < 5; i++) {
+          const x = 140 + i * 250, k = vis(lt, S.L[3] + i * 0.12);
+          D.villager(ctx, i, x, GY + 380, 1.05 * k, { t, mood: i % 2 ? 'money' : 'shock', aL: 2.7, aR: 2.7, jump: Math.abs(Math.sin(t * 7 + i)) * 20 });
+        }
+        at(ctx, 640, 120, vis(lt, S.L[3] + 0.3), () => D.bigText(ctx, '五十块！！', 0, 0, 96, '#fff'));
+      }
+    } else {
+      // L4 交接给助手 / L5 坐车离开
+      sky(ctx, '#ffd9a0', '#fff6e0'); clouds(ctx, t); ground(ctx);
+      const d5 = S.ls(5);
+      // 道路
+      ctx.fillStyle = '#c9b48f'; ctx.fillRect(X0, GY + 260, X1 - X0, 120);
+      const carX = d5 > 0 ? D.lerp(380, 2100, E.in(D.clamp01((d5 - 0.8) / 2.2))) : 380;
+      D.car(ctx, carX, GY + 360, 1.1, d5 > 0.8 ? t : 0, { color: C.red, driver: () => { if (d5 > 0.5) D.merchant(ctx, -10, -60, 0.45, { t, mood: 'laugh', hat: 'top', aR: 2.8 }); } });
+      if (d5 > 0.8) D.dust(ctx, carX - 140, GY + 350, t, 6, 9);
+      if (d5 < 0.6) D.merchant(ctx, 600, GY + 300, 1.1, { t, mood: 'talk', aR: 1.6 });
+      const ak = vis(lt, S.L[4] + 1.6);
+      D.assistant(ctx, 900, GY + 300, 1.1 * ak, { t, mood: 'sly', aR: d5 > 1 ? 2.6 + Math.sin(t * 10) * .3 : 0.3 });
+      if (ak > 0) at(ctx, 900, GY - 120, vis(lt, S.L[4] + 2.0, S.L[5] + 0.5), () => label(ctx, '助手', 0, 0, 44, C.green));
+      if (d5 < 0) at(ctx, 420, 220, vis(lt, S.L[4] + 0.3), () => D.bubble(ctx, 0, 0, 480, 160, 160, 330, { text: ['我进城办点事', '这里交给助手'], size: 40 }));
+      if (d5 > 0.9) at(ctx, Math.min(carX, 1150), GY - 40, vis(lt, S.L[5] + 0.9), () => D.bigText(ctx, '拜拜~', 0, 0, 70, '#fff'));
+    }
+  };
+
+  /* =======================================================
+   * 7 助手的提议 deal
+   * ======================================================= */
+  SC.deal = function (ctx, lt, S) {
+    const t = S.t;
+    const g = ctx.createLinearGradient(0, -800, 0, GY); g.addColorStop(0, '#3a2f6b'); g.addColorStop(1, '#c47aa0');
+    ctx.fillStyle = g; ctx.fillRect(X0, Y0, X1 - X0, GY - Y0 + 10);
+    ctx.beginPath(); ctx.arc(1080, 60, 60, 0, Math.PI * 2); D.fs(ctx, '#fff4c2', 5);
+    for (let i = 0; i < 30; i++) { ctx.fillStyle = 'rgba(255,255,255,.7)'; ctx.fillRect(X0 + D.hash(i) * (X1 - X0), -700 + D.hash(i * 3) * 900, 4, 4); }
+    ground(ctx, '#6f8f5a', '#5a7748');
+    D.cage(ctx, 330, GY + 230, 470, 330, 1, t, { cols: 6, rows: 3, label: '1000 只' });
+    // 价格标签
+    const tagK = vis(lt, S.L[2] + 1.4);
+    at(ctx, 330, GY - 210, tagK, () => { D.rrect(ctx, -110, -50, 220, 100, 18, 801); D.fs(ctx, '#8ff5b5', 6); D.bigText(ctx, '¥35', 0, 2, 78, C.ink, { shadow: null, stroke: 0 }); }, Math.sin(t * 3) * 0.08);
+    const lean = S.ls(1) > 0 ? 0.3 : 0;
+    D.assistant(ctx, 700, GY + 240, 1.25, { t, mood: S.ls(2) > 0 ? 'talk' : 'sly', aL: 1.2 + lean, aR: S.ls(2) > 0 ? 2.0 + Math.sin(t * 3) * .2 : 0.4 });
+    // 村民
+    for (let i = 0; i < 4; i++) {
+      const mood = S.ls(4) > 1.5 ? 'money' : S.ls(2) > 0 ? 'shock' : 'happy';
+      D.villager(ctx, i, 920 + i * 125, GY + 250 + (i % 2) * 40, 0.95, { t: t + i, mood, flip: true, aR: 0.4, jump: mood === 'money' ? Math.abs(Math.sin(t * 6 + i)) * 18 : 0 });
+    }
+    if (S.ls(1) > 0 && S.ls(2) < 0) at(ctx, 880, 300, vis(lt, S.L[1]), () => D.bubble(ctx, 0, 0, 240, 120, -120, 200, { text: '嘘……', size: 54 }));
+    // L3 等老板回来卖 50
+    if (S.ls(3) > 0) {
+      const k = vis(lt, S.L[3]);
+      at(ctx, 1000, 150, k, () => {
+        D.thought(ctx, 0, 0, 470, 260, -200, 180);
+        D.merchant(ctx, -110, 110, 0.5, { t, mood: 'laugh' });
+        D.arrow(ctx, -40, 0, 50, 0, C.ink, 7);
+        D.bigText(ctx, '¥50', 140, 0, 74, C.red, { shadow: null });
+      });
+    }
+    // L4 净赚 15
+    if (S.ls(4) > 0) {
+      const k = vis(lt, S.L[4] + 0.2);
+      at(ctx, 640, 470, k, () => { card(ctx, 0, 0, 640, 170, '#fff8d6', 810); D.bigText(ctx, '50 − 35 = +15', 0, 0, 84, C.green, { shadow: null }); });
+      for (let i = 0; i < 7; i++) D.sparkle(ctx, 360 + i * 95, 360 + Math.sin(t * 3 + i) * 20, 18, t + i);
+      if (S.ls(4) > 3) at(ctx, 700, GY - 200, vis(lt, S.L[4] + 3), () => D.bubble(ctx, 0, 0, 380, 110, -10, 140, { text: '只告诉你们哦', size: 42, fill: '#efffef' }));
+    }
+  };
+
+  /* =======================================================
+   * 8 全村抢购 frenzy
+   * ======================================================= */
+  SC.frenzy = function (ctx, lt, S) {
+    const t = S.t;
+    if (S.ls(1) < 0) {
+      rays(ctx, 640, 420, t, '#c9f5d3', '#a7ecb9', 20);
+      for (let i = 0; i < 26; i++) { const k = ((t * 0.5 + D.hash(i)) % 1); D.coin(ctx, X0 + D.hash(i * 3) * (X1 - X0), -800 + k * 2700, 24, t * 5 + i); }
+      for (let i = 0; i < 3; i++) D.villager(ctx, i, 360 + i * 280, GY + 160, 1.25, { t: t + i, mood: 'money', aL: 2.8, aR: 2.8, jump: Math.abs(Math.sin(t * 5 + i)) * 26 });
+      at(ctx, 640, 230, vis(lt, S.L[0] + 1.5), () => D.bigText(ctx, '这简直是捡钱！', 0, 0, 104, C.green, { rot: -0.05 }));
+      return;
+    }
+    sky(ctx, '#ffd29a', '#fff3dc'); clouds(ctx, t); ground(ctx, '#c9d98a', '#a9bf6a');
+    if (S.ls(3) < 0) {
+      // L1 砸存钱罐 / L2 借钱卖牛
+      const pb = S.ls(1);
+      const broken = D.clamp01((pb - 1.2) / 0.9);
+      at(ctx, 330, GY + 120, 1, () => D.piggy(ctx, 0, 0, 1.3, broken));
+      if (pb > 0.4 && pb < 1.4) at(ctx, 330, GY - 100, 1, () => { ctx.rotate(-0.6 + Math.sin(D.clamp01((pb - 0.4) / 0.8) * Math.PI) * 0.9); D.rrect(ctx, -12, -120, 24, 140, 6, 820); D.fs(ctx, '#8a5a35', 4); D.rrect(ctx, -50, -150, 100, 50, 8, 821); D.fs(ctx, '#888', 4); });
+      D.coinBurst(ctx, 330, GY, pb - 1.3, 16, 71, 1);
+      at(ctx, 330, 180, vis(lt, S.L[1] + 0.3), () => label(ctx, '掏空积蓄', 0, 0, 52, C.pink));
+      if (S.ls(2) > 0) {
+        at(ctx, 760, 330, vis(lt, S.L[2] + 0.1), () => { card(ctx, 0, 0, 260, 300, '#fff', 830); D.text(ctx, '借  条', 0, -100, 46, C.ink); for (let i = 0; i < 4; i++) { ctx.beginPath(); ctx.moveTo(-90, -40 + i * 40); ctx.lineTo(90, -40 + i * 40); D.stroke(ctx, 3, '#bbb'); } D.text(ctx, '¥¥¥', 0, 110, 40, C.red); }, -0.08);
+        D.cow(ctx, 1040, GY + 200, 1.1 * vis(lt, S.L[2] + 1.7), t, { tag: '卖牛' });
+        at(ctx, 950, 180, vis(lt, S.L[2] + 1.9), () => label(ctx, '借钱 · 卖牛', 0, 0, 50, C.red));
+      }
+    } else {
+      // L3 长队 / L4 抢空
+      const d = S.ls(3);
+      const fillK = S.ls(4) > 0 ? 1 - D.clamp01(S.ls(4) / 3.6) : 1;
+      D.cage(ctx, 220, GY + 220, 400, 300, fillK, t, { cols: 5, rows: 3, label: S.ls(4) > 3.6 ? '空了' : '¥35 一只' });
+      D.assistant(ctx, 500, GY + 230, 1.0, { t, mood: 'laugh', aR: 1.4 + Math.sin(t * 8) * .4 });
+      const qn = 9, off = (d * 60) % 150;
+      for (let i = 0; i < qn; i++) {
+        const x = 640 + i * 150 - off;
+        D.villager(ctx, i, x, GY + 250, 0.85, { t: t + i, walk: t * 10 + i, flip: true, mood: i % 3 ? 'money' : 'shock', aR: 2.6, holdR: S.ls(4) > 0 && i % 2 ? (c) => D.monkey(c, 0, 0, .35, { t, mood: 'smug' }) : null });
+      }
+      at(ctx, 960, 180, vis(lt, S.L[3] + 0.3, S.L[4]), () => label(ctx, '排队抢购中……', 0, 0, 50, C.ink, '#ffcd3c'));
+      if (S.ls(4) > 0) at(ctx, 640, 230, vis(lt, S.L[4] + 3.4), () => D.stamp(ctx, 0, 0, 1.4, '一抢而空', C.red, -0.15));
+    }
+  };
+
+  /* =======================================================
+   * 9 人去楼空 gone
+   * ======================================================= */
+  SC.gone = function (ctx, lt, S) {
+    const t = S.t;
+    sky(ctx, '#7c8ea3', '#c9d2da'); clouds(ctx, t * .5); mountains(ctx, '#a5b3ad', '#93a39b'); ground(ctx, '#8fa37a', '#7a8f66');
+    houses(ctx, t, false);
+    if (S.ls(2) < 0) {
+      // 空荡荡的收购点
+      ctx.fillStyle = '#b6a585'; ctx.fillRect(X0, GY + 250, X1 - X0, 110);
+      at(ctx, 360, GY + 230, 1, () => { D.rrect(ctx, -110, -110, 220, 20, 4, 840); D.fs(ctx, '#8a5a35', 4); D.rrect(ctx, -100, -90, 14, 90, 4, 841); D.fs(ctx, '#8a5a35', 4); D.rrect(ctx, 86, -90, 14, 90, 4, 842); D.fs(ctx, '#8a5a35', 4); });
+      at(ctx, 360, GY - 30, 1, () => { D.rrect(ctx, -6, 0, 12, 160, 3, 843); D.fs(ctx, '#8a5a35', 4); D.rrect(ctx, -130, -70, 260, 80, 10, 844); D.fs(ctx, '#e8dcc0', 4); D.text(ctx, '收猴处', 0, -30, 44, '#777'); }, 0.25);
+      const p = S.ls(0);
+      if (p < 1.5) for (let i = 0; i < 6; i++) { const k = D.clamp01(p / 1.2); ctx.globalAlpha = 1 - k; D.blob(ctx, 360 + Math.cos(i) * k * 120, GY + 40 + Math.sin(i * 2) * k * 80, 40 + k * 30, 30 + k * 20, 850 + i); D.fs(ctx, '#fff', 4); ctx.globalAlpha = 1; }
+      if (p < 0.4) D.assistant(ctx, 360, GY + 230, 1.0, { t, mood: 'sly' });
+      at(ctx, 360, 230, vis(lt, S.L[0] + 0.8), () => D.bigText(ctx, '人呢？', 0, 0, 80, '#fff'));
+      // 村民张望
+      for (let i = 0; i < 3; i++) D.villager(ctx, i, 820 + i * 150, GY + 260, 0.95, { t, mood: S.ls(1) > 0 ? 'sad' : 'shock', aR: S.ls(1) > 0 ? 2.2 : 0.3, holdL: (c) => D.monkey(c, 0, 20, .35, { t, mood: 'sad' }) });
+      if (S.ls(1) > 0) {
+        D.tumbleweed(ctx, D.lerp(-200, 1500, S.ls(1) / 3.4), GY + 290 - Math.abs(Math.sin(S.ls(1) * 5)) * 40, 1, S.ls(1));
+        at(ctx, 1000, 230, vis(lt, S.L[1] + 0.6), () => D.thought(ctx, 0, 0, 380, 160, -40, 140, { text: '老板呢……？', size: 44 }));
+      }
+    } else {
+      // 日历翻页 → 满村猴子
+      if (S.ls(3) < 0) {
+        const d = S.ls(2);
+        const labels = ['1周', '1个月', '1年'];
+        const idx = Math.min(2, Math.floor(d / 1.15));
+        const fl = (d % 1.15) / 1.15;
+        D.calendar(ctx, 640, 420, 1.5, labels[idx], '过去了', idx < 2 && fl > 0.75 ? (fl - 0.75) * 4 : 0);
+        for (let i = 0; i < 4; i++) D.monkey(ctx, 200 + i * 300, GY + 240, 0.7, { t, seed: i, mood: 'smug', flip: i % 2 });
+      } else {
+        // 雨 + 蟋蟀 + 满山猴子
+        for (let i = 0; i < 18; i++) { const sp = i % 6; const x = -500 + i * 140, y = GY - 120 + (sp % 3) * 80; D.monkey(ctx, x, y + Math.sin(t * 3 + i) * 6, 0.5, { t, seed: i + 30, mood: 'smug', flip: i % 2, aL: 2.5 + Math.sin(t * 3 + i) * .4 }); }
+        for (let i = 0; i < 4; i++) D.villager(ctx, i, 230 + i * 270, GY + 300, 1.0, { t, mood: 'sad', aR: 0.9, holdR: (c) => D.monkey(c, 0, 30, .4, { t, mood: 'smug' }) });
+        D.cricket(ctx, 1120, GY + 420, 0.8, t);
+        at(ctx, 640, 120, vis(lt, S.L[3] + 1.5), () => label(ctx, '只剩下：满山的猴子', 0, 0, 52, '#55606b'));
+      }
+      // 雨
+      ctx.save(); ctx.strokeStyle = 'rgba(220,235,255,.55)'; ctx.lineWidth = 3;
+      for (let i = 0; i < 90; i++) { const x = X0 + D.hash(i * 1.3) * (X1 - X0), y = Y0 + ((D.hash(i * 7.1) * 3000 + t * 1300) % 3000); ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x - 12, y + 42); ctx.stroke(); }
+      ctx.restore();
+    }
+    desat(ctx, 0.55);
+  };
+
+  /* =======================================================
+   * 10 算账 ledger
+   * ======================================================= */
+  SC.ledger = function (ctx, lt, S) {
+    const t = S.t;
+    paper(ctx, '#f7efdc');
+    const bookOut = S.ls(6) > 0 ? E.inout(S.ls(6) / 0.6) : 0;
+    if (bookOut < 1) {
+      ctx.save(); ctx.translate(0, bookOut * 1400);
+      D.ledgerBook(ctx, 90, 20, 1100, 920);
+      D.text(ctx, '收猴子 · 账本', 640, 72, 50, C.ink);
+      const rows = [
+        [S.L[1] + 1.4, '收购', '10元 × 600只', '6,000', C.ink],
+        [S.L[1] + 3.2, '收购', '20元 × 300只', '6,000', C.ink],
+        [S.L[1] + 5.0, '收购', '25元 × 100只', '2,500', C.ink],
+      ];
+      rows.forEach(([a, k, f, v, c], i) => {
+        const y = 170 + i * 72, p = fade(lt, a, null, 0.25);
+        if (p <= 0) return;
+        ctx.globalAlpha = p;
+        D.text(ctx, k, 180, y, 40, C.blue);
+        const typed = Math.floor(D.clamp01((lt - a) / 0.7) * f.length);
+        D.text(ctx, f.slice(0, typed), 300, y, 44, c, { align: 'left' });
+        D.text(ctx, v, 1110, y, 46, c, { align: 'right' });
+        ctx.globalAlpha = 1;
+      });
+      if (lt > S.L[2]) {
+        const p = D.clamp01(S.ls(2) / 0.5);
+        ctx.beginPath(); ctx.moveTo(160, 395); ctx.lineTo(160 + 960 * p, 395); D.stroke(ctx, 4);
+        D.text(ctx, '商人收购总成本', 180, 450, 44, C.ink, { align: 'left', alpha: p });
+        at(ctx, 1110, 450, vis(lt, S.L[2] + 0.4), () => D.text(ctx, '¥14,500', 0, 0, 56, C.blue, { align: 'right' }));
+      }
+      if (lt > S.L[3]) {
+        const p = fade(lt, S.L[3] + 0.6);
+        D.text(ctx, '卖出', 180, 540, 40, C.purple, { alpha: p });
+        const f = '35元 × 1000只'; D.text(ctx, f.slice(0, Math.floor(D.clamp01((S.ls(3) - 0.6) / 0.8) * f.length)), 300, 540, 44, C.ink, { align: 'left' });
+        at(ctx, 1110, 540, vis(lt, S.L[3] + 4.6), () => D.text(ctx, '¥35,000', 0, 0, 56, C.purple, { align: 'right' }));
+      }
+      if (lt > S.L[4]) {
+        const k = vis(lt, S.L[4] + 0.3);
+        at(ctx, 640, 660, k, () => { D.rrect(ctx, -460, -58, 920, 116, 24, 901); D.fs(ctx, '#e3f9e9', 5); D.text(ctx, '商人净赚', -280, 2, 50, C.ink); D.bigText(ctx, '+¥20,500', 140, 2, 84, C.green, { shadow: null }); });
+        D.coinBurst(ctx, 900, 640, S.ls(4) - 0.6, 14, 91, 0.8);
+      }
+      if (lt > S.L[5]) {
+        const k = vis(lt, S.L[5] + 0.4);
+        at(ctx, 640, 820, k, () => { D.rrect(ctx, -460, -58, 920, 116, 24, 902); D.fs(ctx, '#ffe4e1', 5); D.text(ctx, '村民净亏', -280, 2, 50, C.ink); D.bigText(ctx, '−¥20,500', 140, 2, 84, C.red, { shadow: null }); });
+        if (S.ls(5) > 4) at(ctx, 1000, 560, vis(lt, S.L[5] + 4), () => D.stamp(ctx, 0, 0, 0.75, '换回1000只猴子', C.fur, -0.12));
+      }
+      ctx.restore();
+      // L0 标题
+      if (S.ls(1) < 0) at(ctx, 640, 480, vis(lt, S.L[0], S.L[1] - .1), () => D.bigText(ctx, '算一笔账', 0, 0, 130, C.gold));
+    }
+    if (bookOut > 0) {
+      // 钱从村民口袋搬进商人口袋
+      const d = S.ls(6);
+      at(ctx, 0, (1 - bookOut) * -1200, 1, () => {
+        D.villager(ctx, 0, 240, GY + 120, 1.3, { t, mood: 'sad', aR: 0.4 });
+        D.merchant(ctx, 1040, GY + 120, 1.3, { t, mood: 'laugh', aL: 2.6 });
+        for (let i = 0; i < 9; i++) { const ph = (d * 0.6 + i / 9) % 1; const x = D.lerp(300, 980, ph), y = GY - 260 - Math.sin(ph * Math.PI) * 300; D.coin(ctx, x, y, 26, t * 6 + i); }
+        D.cage(ctx, 640, GY + 160, 330, 200, 1, t, { cols: 5, rows: 2, mood: 'smug' });
+        at(ctx, 640, 150, vis(lt, S.L[6] + 0.6), () => label(ctx, '猴子还是那些猴子', 0, 0, 54, C.ink, '#ffcd3c'));
+        D.text(ctx, '村民口袋', 240, GY + 190, 40, C.ink); D.text(ctx, '商人口袋', 1040, GY + 190, 40, C.ink);
+      });
+    }
+  };
+
+  /* =======================================================
+   * 11 为什么会上当 why
+   * ======================================================= */
+  SC.why = function (ctx, lt, S) {
+    const t = S.t;
+    paper(ctx, '#eef3fb', 'rgba(74,143,226,.12)');
+    if (S.ls(1) < 0) {
+      D.villager(ctx, 3, 640, GY + 160, 1.5, { t, mood: 'sad', aR: 2.9 });
+      [0, 1, 2].forEach((i) => D.qmark(ctx, 420 + i * 220, 200 + (i % 2) * 40, 0.8 * vis(lt, S.L[0] + 0.3 + i * .3), t + i, [C.red, C.blue, C.purple][i]));
+      at(ctx, 640, 420, vis(lt, S.L[0] + 1.6), () => D.bigText(ctx, '为什么会上当？', 0, 0, 90, C.ink, { shadow: null, stroke: 0 }));
+      return;
+    }
+    // 进度圆点
+    const step = S.ls(4) > 0 ? 3 : S.ls(3) > 0 ? 3 : S.ls(2) > 0 ? 2 : 1;
+    [1, 2, 3].forEach((n, i) => { D.blob(ctx, 520 + i * 120, 50, 34, 34, 910 + i); D.fs(ctx, n <= step ? C.red : '#ddd', 5); D.text(ctx, String(n), 520 + i * 120, 52, 40, '#fff'); });
+    if (S.ls(4) < 0) {
+      const cards = [
+        { i: 1, title: '价格是"造"出来的', sub: '只有一个买家', a: S.L[1], b: S.L[2] },
+        { i: 2, title: '真实的赚钱效应', sub: '前面的人真赚到了', a: S.L[2], b: S.L[3] },
+        { i: 3, title: '相信有人接盘', sub: '不是因为猴子有用', a: S.L[3], b: S.L[4] },
+      ];
+      cards.forEach((c) => {
+        if (lt < c.a - 0.1 || lt > c.b + 0.5) return;
+        const kin = E.out((lt - c.a) / 0.5), kout = E.in((lt - c.b) / 0.45);
+        const x = 640 + (1 - kin) * 1500 - kout * 1600;
+        ctx.save(); ctx.translate(x - 640, 0);
+        card(ctx, 640, 500, 1060, 760, '#fff', 920 + c.i);
+        D.blob(ctx, 230, 190, 50, 50, 930 + c.i); D.fs(ctx, C.red, 5); D.text(ctx, String(c.i), 230, 193, 60, '#fff');
+        D.text(ctx, c.title, 300, 180, 62, C.ink, { align: 'left' });
+        D.text(ctx, c.sub, 300, 250, 40, '#7a6a5a', { align: 'left' });
+        const d = lt - c.a;
+        if (c.i === 1) {
+          // 需求曲线：唯一买家离开 → 归零
+          ctx.save(); ctx.translate(200, 820);
+          ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(880, 0); ctx.moveTo(0, 0); ctx.lineTo(0, -480); D.stroke(ctx, 5);
+          D.text(ctx, '价格', -10, -510, 32, C.ink); D.text(ctx, '时间', 880, 36, 32, C.ink);
+          const pts = [[0, 10], [150, 20], [300, 25], [450, 50], [600, 35], [700, 0], [860, 0]];
+          const prog = D.clamp01(d / 5);
+          ctx.beginPath();
+          const maxX = 860 * prog;
+          pts.forEach((p, j) => { if (p[0] <= maxX) { const y = -p[1] * 8; j ? ctx.lineTo(p[0], y) : ctx.moveTo(p[0], y); } });
+          D.stroke(ctx, 9, C.red);
+          pts.slice(0, 5).forEach((p) => { if (p[0] <= maxX) D.text(ctx, '¥' + p[1], p[0], -p[1] * 8 - 34, 32, C.ink); });
+          if (prog > 0.82) { D.text(ctx, '商人走了 → 需求 = 0', 640, -120, 40, C.red); }
+          D.merchant(ctx, 520, -40, 0.45 * (prog > 0.75 ? Math.max(0, 1 - (prog - .75) * 5) : 1), { t, mood: 'laugh' });
+          ctx.restore();
+        } else if (c.i === 2) {
+          D.villager(ctx, 1, 420, 820, 1.2, { t, mood: 'money', aL: 2.7, aR: 2.7, jump: Math.abs(Math.sin(t * 5)) * 20 });
+          D.coinBurst(ctx, 420, 520, (d % 1.6) - 0.1, 10, 101 + Math.floor(d / 1.6), 0.8);
+          D.villager(ctx, 4, 860, 820, 1.1, { t, mood: 'shock', flip: true });
+          at(ctx, 880, 400, vis(lt, c.a + 1.5), () => D.thought(ctx, 0, 0, 340, 150, -40, 120, { text: ['他都赚了', '我也能！'], size: 38 }));
+        } else {
+          D.villager(ctx, 5, 420, 820, 1.1, { t, mood: 'money', aR: 2.4, holdR: (cx) => D.monkey(cx, 0, 0, .5, { t, mood: 'smug' }) });
+          D.arrow(ctx, 560, 560, 800, 560, C.ink, 8, D.clamp01((d - 1) / 0.8));
+          at(ctx, 900, 560, vis(lt, c.a + 1.8), () => { D.text(ctx, '更高价', 0, -60, 40, C.red); D.qmark(ctx, 0, 40, 0.8, t); });
+          at(ctx, 640, 380, vis(lt, c.a + 3), () => D.text(ctx, '猴子有没有用？不重要', 0, 0, 44, '#7a6a5a'));
+        }
+        ctx.restore();
+      });
+    } else {
+      // L4~L5 博傻链条
+      const d = S.ls(4);
+      D.text(ctx, '博 傻 理 论', 640, 160, 90, C.ink);
+      D.text(ctx, 'Greater Fool Theory', 640, 236, 36, '#7a6a5a');
+      const people = [[200, '¥35'], [480, '¥50'], [760, '¥80?'], [1040, '你']];
+      const last = S.ls(5) > 0;
+      people.forEach(([x, tag], i) => {
+        const k = vis(lt, S.L[4] + 0.4 + i * 0.7);
+        const isYou = i === 3;
+        if (last && !isYou) ctx.globalAlpha = Math.max(0.25, 1 - S.ls(5));
+        if (isYou && last) { ctx.save(); const g = ctx.createRadialGradient(x, 600, 20, x, 600, 360); g.addColorStop(0, 'rgba(255,230,120,.7)'); g.addColorStop(1, 'rgba(255,230,120,0)'); ctx.fillStyle = g; ctx.fillRect(x - 400, 200, 800, 800); ctx.restore(); }
+        D.villager(ctx, i + 1, x, GY + 40, (0.8 + i * 0.12) * k, { t: t + i, mood: isYou && last ? 'shock' : 'money', aR: 1.6 });
+        at(ctx, x, GY + 90, k, () => label(ctx, tag, 0, 0, 38, isYou ? C.red : C.ink, '#fff'));
+        if (i < 3) D.arrow(ctx, x + 80, 420, x + 200, 420, C.ink, 6, D.clamp01((lt - S.L[4] - 0.9 - i * 0.7) / 0.4));
+        ctx.globalAlpha = 1;
+      });
+      // 猴子沿链条传递
+      const pass = D.clamp01((d - 0.6) / 3.2) * 3;
+      const pi = Math.min(3, pass);
+      const mx = 200 + pi * 280, my = 400 - Math.abs(Math.sin(pass * Math.PI)) * 80;
+      D.monkey(ctx, mx, my, 0.6, { t, mood: 'smug' });
+      if (last) at(ctx, 640, 320, vis(lt, S.L[5] + 0.6), () => { D.rrect(ctx, -420, -50, 840, 100, 26, 940); D.fs(ctx, C.red, 5); D.text(ctx, '最后一个傻子 = 你自己', 0, 2, 52, '#fff'); });
+    }
+  };
+
+  /* =======================================================
+   * 12 现实中的猴子 real
+   * ======================================================= */
+  SC.real = function (ctx, lt, S) {
+    const t = S.t;
+    paper(ctx, '#fff6e6');
+    if (S.ls(2) < 0) {
+      const book = vis(lt, S.L[0]);
+      at(ctx, 640, 470, book, () => { card(ctx, 0, 0, 620, 420, '#ffe9b0', 950); D.text(ctx, '寓言', 0, -100, 90, C.fur); D.monkey(ctx, 0, 160, 1.0, { t, mood: 'smug', aL: 2.2, aR: 2.2 }); });
+      if (S.ls(1) > 0) {
+        at(ctx, 640, 150, vis(lt, S.L[1] + 0.2), () => D.bigText(ctx, '真实上演了几百年', 0, 0, 72, C.red, { rot: -0.03 }));
+        at(ctx, 1000, 640, vis(lt, S.L[1] + 1.4), () => D.stamp(ctx, 0, 0, 1, '真事!', C.red, 0.2));
+      }
+      return;
+    }
+    // 时间线
+    ctx.beginPath(); ctx.moveTo(60, 860); ctx.lineTo(1220, 860); D.stroke(ctx, 6);
+    [[200, '1637', S.L[2]], [640, '2000', S.L[3]], [1080, '今天', S.L[4]]].forEach(([x, y, a]) => {
+      const k = vis(lt, a);
+      at(ctx, x, 860, k, () => { D.blob(ctx, 0, 0, 20, 20, 960); D.fs(ctx, C.red, 4); D.text(ctx, y, 0, 50, 40, C.ink); });
+    });
+    if (S.ls(5) < 0) {
+      // 当前展示的卡片
+      const which = S.ls(4) > 0 ? 2 : S.ls(3) > 0 ? 1 : 0;
+      const a = [S.L[2], S.L[3], S.L[4]][which];
+      const k = vis(lt, a, null, 0.5);
+      at(ctx, 640, 430, k, () => {
+        card(ctx, 0, 0, 1080, 640, '#fff', 970 + which);
+        if (which === 0) {
+          D.text(ctx, '荷兰 · 郁金香狂热', 0, -250, 54, C.ink);
+          D.tulip(ctx, -280, 220, 1.6, t);
+          D.bigText(ctx, '=', 0, 30, 110, C.ink, { shadow: null, stroke: 0 });
+          D.house(ctx, 280, 200, 1.2, 971, '#f6e3c3', '#d9534f');
+          D.text(ctx, '一颗球茎 ≈ 一栋房子（据说）', 0, 270, 38, '#7a6a5a');
+        } else if (which === 1) {
+          D.text(ctx, '互联网泡沫', 0, -250, 54, C.ink);
+          D.laptop(ctx, -260, 120, 1.4, t);
+          // 走势：暴涨后暴跌
+          ctx.save(); ctx.translate(60, 170);
+          const pts = [[0, 0], [60, -40], [120, -60], [180, -150], [240, -290], [290, -330], [330, -120], [380, -40], [420, -20]];
+          const prog = D.clamp01((lt - a - 0.4) / 3.5);
+          ctx.beginPath(); pts.forEach((p, j) => { if (j / (pts.length - 1) <= prog) j ? ctx.lineTo(p[0], p[1]) : ctx.moveTo(p[0], p[1]); }); D.stroke(ctx, 10, prog > 0.7 ? C.red : C.green);
+          ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(440, 0); ctx.moveTo(0, 0); ctx.lineTo(0, -360); D.stroke(ctx, 4);
+          ctx.restore();
+          D.text(ctx, '名字加个“.com”，股价就大涨', 0, 270, 38, '#7a6a5a');
+        } else {
+          D.text(ctx, '空气币 · 炒鞋 · 炒卡', 0, -250, 54, C.ink);
+          const items = [(c) => D.cryptoCoin(c, 0, 0, 1.2, t), (c) => D.sneaker(c, 0, 20, 1.2), (c) => D.card(c, 0, 0, 1.1)];
+          items.forEach((fn, i) => {
+            const kk = vis(lt, a + 0.3 + i * 0.6);
+            at(ctx, -320 + i * 320, 40, kk, () => {
+              // 每样东西后面都探出一条猴子尾巴
+              ctx.beginPath(); ctx.moveTo(60, 40); ctx.bezierCurveTo(140, 60, 150, -60, 110, -80 + Math.sin(t * 4 + i) * 8); D.stroke(ctx, 14); ctx.beginPath(); ctx.moveTo(60, 40); ctx.bezierCurveTo(140, 60, 150, -60, 110, -80 + Math.sin(t * 4 + i) * 8); D.stroke(ctx, 7, C.fur);
+              fn(ctx);
+            });
+          });
+          D.text(ctx, '被包装成“稀缺资产”', 0, 270, 38, '#7a6a5a');
+        }
+      });
+    } else {
+      // L5 收猴子剧本循环
+      const steps = ['制造需求', '抬高价格', '让你接盘', '庄家离场'];
+      const cx = 640, cy = 440, R = 300;
+      ctx.save(); ctx.globalAlpha = 0.9; ctx.beginPath(); ctx.arc(cx, cy, R, 0, Math.PI * 2); ctx.setLineDash([18, 16]); D.stroke(ctx, 6, '#c9b9a5'); ctx.restore();
+      steps.forEach((s, i) => {
+        const a = -Math.PI / 2 + i * Math.PI / 2;
+        const k = vis(lt, S.L[5] + 0.6 + i * 0.9);
+        const x = cx + Math.cos(a) * R, y = cy + Math.sin(a) * R;
+        at(ctx, x, y, k, () => { D.rrect(ctx, -150, -46, 300, 92, 30, 980 + i); D.fs(ctx, [C.blue, C.gold, C.red, C.ink][i], 5); D.text(ctx, s, 0, 2, 48, '#fff'); });
+      });
+      const ang = -Math.PI / 2 + (lt - S.L[5]) * 1.2;
+      D.monkey(ctx, cx + Math.cos(ang) * (R - 110), cy + Math.sin(ang) * (R - 110) + 60, 0.5, { t, mood: 'smug' });
+      D.text(ctx, '剧本', cx, cy - 10, 60, C.ink);
+      D.text(ctx, '从没变过', cx, cy + 56, 40, '#7a6a5a');
+    }
+  };
+
+  /* =======================================================
+   * 13 识别猴子三问 check
+   * ======================================================= */
+  SC.check = function (ctx, lt, S) {
+    const t = S.t;
+    rays(ctx, 640, 480, t * .5, '#e3f4ff', '#d3ecff', 16);
+    if (S.ls(1) < 0) {
+      D.monkey(ctx, 640, GY + 80, 2.2 * vis(lt, S.L[0]), { t, mood: 'shock', aL: 2.4, aR: 2.4 });
+      D.at(ctx, 640, 260, vis(lt, S.L[0] + 0.6), () => { ctx.beginPath(); ctx.arc(0, 0, 130, 0, Math.PI * 2); D.stroke(ctx, 18); ctx.beginPath(); ctx.moveTo(90, 90); ctx.lineTo(190, 190); D.stroke(ctx, 26, '#8a5a35'); D.text(ctx, '?', 0, 0, 120, C.blue); }, -0.2);
+      return;
+    }
+    // 写字板
+    at(ctx, 640, 500, vis(lt, S.L[1] - 0.1), () => {
+      D.rrect(ctx, -500, -420, 1000, 860, 30, 1001); D.fs(ctx, '#c08a3e', 7);
+      D.rrect(ctx, -460, -370, 920, 790, 16, 1002); D.fs(ctx, '#fffdf6', 5);
+      D.rrect(ctx, -120, -450, 240, 70, 16, 1003); D.fs(ctx, '#999', 5);
+      D.text(ctx, '识别"猴子"的三个问题', 0, -300, 54, C.ink);
+      const qs = [['它本身到底有什么用？', '（抛开价格）'], ['现在是谁在买？为什么买？', ''], ['再也没人接盘，', '我还愿意拿着吗？']];
+      qs.forEach(([a, b], i) => {
+        const st = S.L[2 + i];
+        if (lt < st) return;
+        const y = -170 + i * 190;
+        ctx.save(); ctx.globalAlpha = D.clamp01((lt - st) / .3);
+        D.rrect(ctx, -400, y - 40, 80, 80, 14, 1010 + i); D.fs(ctx, '#fff', 5);
+        const typedA = a.slice(0, Math.floor(D.clamp01((lt - st) / 1.0) * a.length));
+        D.text(ctx, typedA, -290, b ? y - 20 : y, 48, C.ink, { align: 'left' });
+        if (b) D.text(ctx, b, -290, y + 36, b.startsWith('（') ? 34 : 48, b.startsWith('（') ? '#998' : C.ink, { align: 'left' });
+        D.check(ctx, -360, y, 28, D.clamp01((lt - st - 2.2) / 0.4));
+        ctx.restore();
+      });
+    });
+    if (S.ls(5) > 0) {
+      const k = vis(lt, S.L[5] + 0.3, null, 0.6);
+      tint(ctx, '#2b2321', 0.4 * D.clamp01(S.ls(5) / .5));
+      D.monkey(ctx, 640, GY + 40, 2.6 * k, { t, mood: 'smug', aL: 2.9, aR: 2.9 });
+      at(ctx, 640, 180, vis(lt, S.L[5] + 1.6), () => D.stamp(ctx, 0, 0, 1.5, '大概率是猴子', C.red, -0.1));
+    }
+  };
+
+  /* =======================================================
+   * 14 结尾 outro
+   * ======================================================= */
+  SC.outro = function (ctx, lt, S) {
+    const t = S.t;
+    sky(ctx, '#ff9e6b', '#ffe0b3'); D.sun(ctx, 640, 520, 110, t, false); mountains(ctx, '#e2a07c', '#c98a6a');
+    forest(ctx, t, GY - 60, 0.6, { scale: 0.8, col: '#5f8f4a', col2: '#4c7a3e' }); ground(ctx, '#a8b86a', '#8fa055'); houses(ctx, t);
+    if (S.ls(1) < 0) {
+      [['稳赚不赔', 360, 260, C.green], ['等老板回来就翻倍', 900, 380, C.purple]].forEach(([s, x, y, c], i) => {
+        const k = vis(lt, S.L[0] + 0.3 + i * 1.6);
+        at(ctx, x, y, k, () => { D.bubble(ctx, 0, 0, s.length * 56 + 80, 130, 0, 150, { text: s, size: 52, color: c }); if (lt > S.L[0] + 1.3 + i * 1.6) D.cross(ctx, 0, 0, 70); });
+      });
+      D.assistant(ctx, 640, GY + 240, 1.1, { t, mood: 'sly', aR: 2.2 });
+    } else if (S.ls(2) < 0) {
+      // 放大镜看笼子
+      D.cage(ctx, 640, GY + 220, 520, 340, 1, t, { cols: 5, rows: 2, mood: 'smug' });
+      const mx = 640 + Math.sin(t * 1.5) * 120, my = GY - 30;
+      at(ctx, mx, my, vis(lt, S.L[1] + 0.3), () => { ctx.beginPath(); ctx.arc(0, 0, 150, 0, Math.PI * 2); ctx.fillStyle = 'rgba(220,240,255,.35)'; ctx.fill(); D.stroke(ctx, 18); ctx.beginPath(); ctx.moveTo(105, 105); ctx.lineTo(230, 230); D.stroke(ctx, 30, '#8a5a35'); });
+      at(ctx, 640, 170, vis(lt, S.L[1] + 1.2), () => label(ctx, '先看看：是不是猴子？', 0, 0, 54, C.ink, '#ffcd3c'));
+    } else {
+      // 关注 + 再见
+      const d2 = S.ls(2);
+      const followK = vis(lt, S.L[2] + 0.2);
+      const pressed = d2 > 2.6;
+      at(ctx, 640, 380, followK * (pressed && d2 < 2.8 ? 0.9 : 1), () => { D.rrect(ctx, -230, -70, 460, 140, 70, 1101); D.fs(ctx, pressed ? '#bbbbbb' : '#ff4d6d', 6); D.text(ctx, pressed ? '已关注' : '+ 关注', 0, 4, 64, '#fff'); });
+      const icons = [['👍', '点赞'], ['🪙', '投币'], ['⭐', '收藏']];
+      icons.forEach(([, s], i) => at(ctx, 400 + i * 240, 600, vis(lt, S.L[2] + 0.8 + i * 0.3), () => {
+        D.blob(ctx, 0, 0, 70, 70, 1110 + i); D.fs(ctx, [C.blue, C.gold, C.pink][i], 5);
+        if (i === 0) D.heart(ctx, 0, 0, 30, '#fff'); else if (i === 1) D.coin(ctx, 0, 0, 30, 0); else D.sparkle(ctx, 0, 0, 40, 0.5, '#fff');
+        D.text(ctx, s, 0, 105, 36, C.ink);
+      }));
+      const k = E.inout(D.clamp01((d2 - 1.6) / 1));
+      at(ctx, D.lerp(1200, 690, k), D.lerp(820, 410, k), followK, () => { D.blob(ctx, 0, 0, 30, 36, 1120); D.fs(ctx, '#fff', 5); D.rrect(ctx, -10, -70, 20, 60, 10, 1121); D.fs(ctx, '#fff', 5); });
+      if (pressed) D.confetti(ctx, 640, 380, d2 - 2.6, 50, 700, 81);
+      if (S.ls(3) > 0) {
+        D.monkey(ctx, 640, GY + 200, 1.8 * vis(lt, S.L[3]), { t, mood: 'happy', aL: 0.4, aR: 2.6 + Math.sin(t * 10) * 0.4 });
+        at(ctx, 640, 170, vis(lt, S.L[3] + 0.2), () => D.bigText(ctx, '下期再见！', 0, 0, 110, '#fff'));
+      }
+    }
+  };
+
+  /* ---------- 封面 ---------- */
+  SC.__cover = function (ctx, portrait) {
+    const t = 1.3;
+    rays(ctx, 640, 520, 0, '#ffd27a', '#ffbf4a', 22);
+    D.speedLines(ctx, 640, 520, 0, 'rgba(255,255,255,.35)', 30, 420);
+    ctx.fillStyle = '#9fd468'; ctx.fillRect(X0, GY + 200, X1 - X0, Y1);
+    D.cage(ctx, 330, GY + 260, 470, 330, 1, t, { cols: 5, rows: 3, label: '1000只' });
+    D.merchant(ctx, 900, GY + 290, 1.35, { t, mood: 'laugh', aR: 2.4, holdR: (c) => D.megaphone(c), aL: 0.5 });
+    D.priceSign(ctx, 1090, GY + 10, 0.95, '50', { t: 0, noPost: true, bg: '#fff2b8' });
+    D.monkey(ctx, 640, GY + 330, 1.4, { t, mood: 'smug', aL: 2.8, aR: 2.4 });
+    for (let i = 0; i < 10; i++) D.coin(ctx, 120 + D.hash(i * 3) * 1040, 80 + D.hash(i * 7) * 380, 30, i);
+    D.exclaim(ctx, 640, 220, 0.9, 0.3);
+  };
+
+  window.SCENES = SC;
+})();

shouhouzi/tools/frame-test.html

@@ -0,0 +1,9 @@
+<!doctype html><meta charset="utf-8">
+<style>@font-face{font-family:"KuaiLe";src:url(../fonts/kuaile.woff2) format("woff2");}</style>
+<canvas id="c"></canvas>
+<script src="../js/script-data.js"></script><script src="../js/draw.js"></script><script src="../js/scenes.js"></script><script src="../js/engine.js"></script>
+<script>
+window.snap=async(t,mode,guides)=>{await document.fonts.load('40px KuaiLe');const L=LAYOUTS[mode];const c=document.getElementById('c');c.width=L.W;c.height=L.H;const x=c.getContext('2d');ENGINE.render(x,t,L,{guides});return c.toDataURL('image/jpeg',0.8)};
+window.cover=async(mode)=>{await document.fonts.load('40px KuaiLe');const L=LAYOUTS[mode];const c=document.getElementById('c');c.width=L.W;c.height=L.H;const x=c.getContext('2d');ENGINE.renderCover(x,L);return c.toDataURL('image/png')};
+window.bench=async(n,mode)=>{const L=LAYOUTS[mode];const c=document.getElementById('c');c.width=L.W;c.height=L.H;const x=c.getContext('2d');const t0=performance.now();for(let i=0;i<n;i++)ENGINE.render(x,i*TL.total/n,L);return (performance.now()-t0)/n};
+</script>

shouhouzi/tools/subset_font.py

@@ -0,0 +1,15 @@
+# 收集项目中所有用到的字符，子集化站酷快乐体为 woff2
+import os,glob,sys
+from fontTools import subset
+ROOT=os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+src=sys.argv[1] if len(sys.argv)>1 else '/tmp/ZCOOLKuaiLe-Regular.ttf'
+chars=set()
+for f in glob.glob(ROOT+'/js/*.js')+glob.glob(ROOT+'/*.html'):
+    chars|=set(open(f,encoding='utf-8').read())
+chars|=set('0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ ¥$%+-−×=.,:;!?()[]/|·…“”‘’，。！？、：；（）《》【】～~')
+text=''.join(sorted(c for c in chars if ord(c)>=32))
+opts=subset.Options(); opts.flavor='woff2'; opts.layout_features=['*']
+f=subset.load_font(src,opts); s=subset.Subsetter(opts); s.populate(text=text); s.subset(f)
+os.makedirs(ROOT+'/fonts',exist_ok=True)
+subset.save_font(f,ROOT+'/fonts/kuaile.woff2',opts)
+print(len(text),'chars',os.path.getsize(ROOT+'/fonts/kuaile.woff2'),'bytes')