dsh-drawai 0.4.2 → 0.4.4

package/lib/motion/mgstyles/upstream/demos/23-ink-wash/film.js

@@ -0,0 +1,202 @@
+// 中国水墨写意（八大山人／齐白石）——纯代码。
+// 上游：huashu-art-motion / scripts/engine/scenes/17_ink.js（MIT）。以下是节选，保留了
+// 「宣纸 → 淡墨远山＋朱日 → 窗/桌飞白笔触 → 竹枝 → 挂轴虾 → 猫（赭石没骨＋留白＋焦墨）
+//  → 热气、钤印」的完整管线；seal（钤印）在 label 里。
+// 少女段落（花青没骨＋destination-out 挖交领＋藤黄发＋1.8px 焦墨白描面部）在同一文件里叫
+// girlWash / girlInk / girlArm，几何来自上游 RIG 库，没有随包 vendor —— 技法与猫是同一套，照猫写即可。
+//
+// 运行环境是上游的浏览器 harness：全局有 SCENES / U / PAINT(P) / KIT / RIG，逐帧调用 draw(ctx, lt, t)。
+// 这里只作阅读参考，不参与 DrawAI 的打包与渲染（见 brief 第 5 节怎么改写成 Remotion 场景）。
+SCENES['17_ink'] = (() => {
+  const W = 1920, H = 1080, { clamp, lerp, rng, ease } = U, P = PAINT;
+  const { ss } = U;
+
+  // ---------- 宣纸 ----------
+  const paper = () => P.cached('ink_paper', W, H, (g) => {
+    g.drawImage(P.texture('xuan', '#efe6d0', { scale: 0.0025, amt: 9, grain: 7, seed: 5 }), 0, 0);
+    const r = rng(41);
+    g.lineCap = 'round';
+    for (let i = 0; i < 2600; i++) {               // 纸纤维：短弧，亮暗混合
+      const x = r() * W, y = r() * H, a = r() * Math.PI * 2, l = 6 + r() * 26;
+      g.strokeStyle = r() < 0.5 ? `rgba(150,125,90,${0.05 + r() * 0.08})` : `rgba(255,252,240,${0.12 + r() * 0.15})`;
+      g.lineWidth = 0.6 + r() * 0.8; g.beginPath(); g.moveTo(x, y); g.quadraticCurveTo(x + Math.cos(a + 0.6) * l * 0.5, y + Math.sin(a + 0.6) * l * 0.5, x + Math.cos(a) * l, y + Math.sin(a) * l); g.stroke();
+    }
+    const vg = g.createRadialGradient(W / 2, H / 2, 500, W / 2, H / 2, 1250); vg.addColorStop(0, 'rgba(0,0,0,0)'); vg.addColorStop(1, 'rgba(120,90,50,.22)');
+    g.fillStyle = vg; g.fillRect(0, 0, W, H);
+  });
+
+  // 笔、叶、晕染都用库：P.brush（毛笔飞白）、P.leaf（两头尖单笔）、P.inkWash（墨晕洇开）
+  const brush = P.brush, leaf = P.leaf;
+  const washLayer = (c, key, grow, fn, o) => P.inkWash(c, 'ink_' + key, grow, fn, o);
+
+  // ---------- 静态笔触表（窗、桌、地） ----------
+  const WIN = [
+    { p: [[338, 116], [520, 112], [700, 118], [824, 114]], w: 16, d: 0.06, l: 0.18, dry: 0.55 },
+    { p: [[352, 104], [348, 300], [356, 470], [350, 578]], w: 15, d: 0.1, l: 0.16, dry: 0.5 },
+    { p: [[808, 108], [812, 330], [806, 572]], w: 14, d: 0.14, l: 0.16, dry: 0.6 },
+    { p: [[318, 572], [560, 566], [842, 574]], w: 18, d: 0.18, l: 0.16, dry: 0.45 },
+    { p: [[372, 140], [420, 140], [420, 186]], w: 4, d: 0.22, l: 0.08, dry: 0.3 }, { p: [[788, 140], [740, 140], [740, 186]], w: 4, d: 0.24, l: 0.08, dry: 0.3 },
+    { p: [[372, 546], [420, 546], [420, 500]], w: 4, d: 0.26, l: 0.08, dry: 0.3 }, { p: [[788, 546], [740, 546], [740, 500]], w: 4, d: 0.28, l: 0.08, dry: 0.3 },
+  ];
+  const TABLE = [
+    { p: [[800, 622], [1000, 614], [1212, 620]], w: 22, d: 0.12, l: 0.15, dry: 0.5 },
+    { p: [[820, 640], [1000, 646], [1196, 640]], w: 7, d: 0.2, l: 0.1, dry: 0.4 },
+    { p: [[842, 640], [846, 760], [838, 906]], w: 13, d: 0.18, l: 0.16, dry: 0.65 },
+    { p: [[1176, 640], [1172, 780], [1182, 906]], w: 13, d: 0.22, l: 0.16, dry: 0.65 },
+    { p: [[848, 664], [900, 690], [960, 676]], w: 5, d: 0.26, l: 0.1, dry: 0.4 }, { p: [[1170, 664], [1118, 690], [1058, 676]], w: 5, d: 0.28, l: 0.1, dry: 0.4 },
+    { p: [[300, 912], [700, 904], [1100, 914], [1520, 908]], w: 5, d: 0.3, l: 0.15, dry: 0.85, tone: 0.35 },
+  ];
+
+  // ---------- 远山、朱日 ----------
+  function mountains(g) {
+    g.save(); g.beginPath(); g.rect(366, 132, 428, 428); g.clip();
+    const ridge = (y0, amp, f, seed) => { const pts = []; for (let x = 340; x <= 830; x += 10) pts.push([x, y0 - amp * (0.5 + 0.5 * P.fbm(x * f + seed, seed, 3)) - amp * 0.6 * Math.exp(-Math.pow((x - 560 - seed * 40) / 120, 2))]); return pts; };
+    const fill = (pts, a, y1) => { const gr = g.createLinearGradient(0, Math.min(...pts.map(p => p[1])), 0, y1); gr.addColorStop(0, `rgba(40,40,44,${a})`); gr.addColorStop(1, 'rgba(40,40,44,0)'); g.fillStyle = gr; g.beginPath(); pts.forEach((p, i) => i ? g.lineTo(...p) : g.moveTo(...p)); g.lineTo(830, y1); g.lineTo(340, y1); g.closePath(); g.fill(); };
+    fill(ridge(380, 120, 0.006, 1), 0.32, 520); fill(ridge(450, 90, 0.009, 2.4), 0.5, 560);
+    g.restore();
+  }
+
+  // ---------- 竹（窗前，从右上斜入） ----------
+  function bamboo(c, t, rev) {
+    const sw = Math.sin(t * 2.9) * 0.11 + Math.sin(t * 6.1 + 1) * 0.025;
+    const base = [835, 70];
+    const rot = (x, y, k) => { const a = sw * k, dx = x - base[0], dy = y - base[1]; return [base[0] + dx * Math.cos(a) - dy * Math.sin(a), base[1] + dx * Math.sin(a) + dy * Math.cos(a)]; };
+    // 主枝：分节（每节一笔，节间留白），淡墨
+    const nodes = [[835, 70], [760, 150], [690, 215], [620, 268], [550, 312]];
+    for (let i = 0; i < nodes.length - 1; i++) {
+      const a = rot(...nodes[i], i / 4), b = rot(...nodes[i + 1], (i + 1) / 4);
+      const q0 = 0.04, A = [lerp(a[0], b[0], q0), lerp(a[1], b[1], q0)], B = [lerp(a[0], b[0], 0.94), lerp(a[1], b[1], 0.94)];
+      brush(c, [A, [lerp(A[0], B[0], .5), lerp(A[1], B[1], .5)], B], { w: 9, tone: 0.5, dry: 0.3, seed: 60 + i, reveal: ss(0.08 + i * 0.03, 0.18 + i * 0.03, rev), head: 0.06, tail: 0.1, bristles: 5 });
+    }
+    // 叶：个字、介字组，浓墨
+    const groups = [[2, -0.2, 0], [3, 0.4, 1], [4, -0.9, 2], [3, 2.2, 3], [4, 0.9, 4]];
+    groups.forEach(([ni, a0, gi]) => {
+      const np = nodes[Math.min(nodes.length - 1, ni)];
+      const p = rot(np[0], np[1], ni / 4); const flut = Math.sin(t * 7 + gi * 1.3) * 0.2;
+      const rv = ss(0.2 + gi * 0.04, 0.3 + gi * 0.04, rev); if (rv <= 0) return;
+      [[0, 1], [0.45, 0.82], [-0.42, 0.78]].forEach(([da, ls], k) => leaf(c, p[0], p[1], a0 + 1.4 + da + flut * (1 + k * 0.4) + sw * 2, 110 * ls * rv, 15, 0.86));
+    });
+  }
+
+  // ---------- 挂轴＋齐白石虾 ----------
+  function scrollStatic(g) {
+    g.fillStyle = 'rgba(170,140,95,.32)'; g.fillRect(1560, 240, 230, 640);           // 绫边
+    g.fillStyle = 'rgba(250,246,234,.9)'; g.fillRect(1580, 290, 190, 540);
+    g.fillStyle = 'rgba(60,40,25,.85)'; g.fillRect(1548, 870, 254, 16); g.fillRect(1556, 232, 238, 10);
+    g.strokeStyle = 'rgba(60,40,25,.6)'; g.lineWidth = 1.5; g.beginPath(); g.moveTo(1640, 232); g.lineTo(1675, 196); g.lineTo(1710, 232); g.stroke();
+    g.fillStyle = '#c23a2b'; g.fillRect(1742, 788, 16, 16);
+  }
+  function shrimp(c, x, y, ang, s, t, ph) {
+    c.save(); c.translate(x, y); c.rotate(ang); c.scale(s, s);
+    const flex = Math.sin(t * 7 + ph) * 0.12;
+    // 身体：6 节淡墨弧，从头到尾弯曲
+    let px = 0, py = 0, a = 0; const segs = [];
+    for (let i = 0; i < 6; i++) { a += 0.2 + flex; const l = 13 - i * 1.2; px += Math.cos(a) * l; py += Math.sin(a) * l; segs.push([px, py, a, 11 - i * 1.3]); }
+    segs.forEach(([sx, sy, sa, sw], i) => { c.fillStyle = `rgba(30,28,26,${0.22 + i * 0.03})`; c.beginPath(); c.ellipse(sx, sy, 9, sw * 1.05, sa + 0.25, 0, Math.PI * 2); c.fill(); c.strokeStyle = 'rgba(20,18,16,.3)'; c.lineWidth = 2.4; c.beginPath(); c.ellipse(sx, sy, 9, sw * 1.05, sa + 0.25, -1.2, 1.2); c.stroke(); });
+    const tl = segs[5]; [-0.5, 0, 0.5].forEach(d => leaf(c, tl[0], tl[1], tl[2] + d + 0.4, 15, 6, 0.4));
+    // 头胸甲：淡墨＋中间一笔焦墨
+    c.fillStyle = 'rgba(30,28,26,.33)'; c.beginPath(); c.ellipse(-10, -2, 17, 10, -0.15, 0, Math.PI * 2); c.fill();
+    c.fillStyle = 'rgba(10,10,10,.9)'; c.beginPath(); c.ellipse(-8, -3, 7, 3.2, -0.2, 0, Math.PI * 2); c.fill();
+    c.beginPath(); c.arc(-24, -8, 2.6, 0, Math.PI * 2); c.arc(-23, -1, 2.6, 0, Math.PI * 2); c.fill();
+    // 须：两长两短，波动
+    c.strokeStyle = 'rgba(10,10,10,.8)'; c.lineWidth = 1.1;
+    [[-1, 120, 0.9], [1, 105, 1.4], [-1, 40, 2.1], [1, 36, 2.8]].forEach(([sg, L, q]) => { c.beginPath(); c.moveTo(-26, -4); for (let i = 1; i <= 12; i++) { const u = i / 12; c.lineTo(-26 - u * L, -4 + sg * u * L * 0.18 + Math.sin(t * 5 + q + u * 4) * 6 * u); } c.stroke(); });
+    // 钳：长臂三节＋钳
+    [[-0.35, 0], [0.1, 1]].forEach(([da, k]) => { c.strokeStyle = 'rgba(10,10,10,.75)'; c.lineWidth = 1.6; const sw2 = Math.sin(t * 4 + k * 2 + ph) * 0.15; let qx = -20, qy = 4; c.beginPath(); c.moveTo(qx, qy);
+      [[22, 2.4], [20, 2.6], [16, 2.9]].forEach(([l, aa]) => { qx += Math.cos(aa + da + sw2) * l; qy += Math.sin(aa + da + sw2) * l; c.lineTo(qx, qy); }); c.stroke();
+      c.fillStyle = 'rgba(10,10,10,.82)'; c.beginPath(); c.ellipse(qx - 6, qy + 2, 8, 3, 2.9 + da, 0, Math.PI * 2); c.fill(); });
+    // 腿
+    c.strokeStyle = 'rgba(20,20,20,.5)'; c.lineWidth = 1; for (let i = 0; i < 5; i++) { const sg = segs[Math.min(4, i)]; c.beginPath(); c.moveTo(sg[0] - 2, sg[1] + 5); c.lineTo(sg[0] - 6 + Math.sin(t * 12 + i) * 2, sg[1] + 14); c.stroke(); }
+    c.restore();
+  }
+
+  // ---------- 猫（赭石没骨＋留白＋焦墨点斑＋八大白眼） ----------
+  function catWash(g, K) {
+    g.fillStyle = '#c47a3c'; g.fill(K.body); g.fill(K.head);
+    g.lineCap = 'round'; g.lineJoin = 'round'; g.strokeStyle = '#c47a3c'; g.lineWidth = K.tailW; g.stroke(K.tail);
+    g.save(); g.globalCompositeOperation = 'destination-out'; g.fill(K.white); K.legs.forEach(l => g.fill(l));
+    g.beginPath(); g.ellipse(K.nose[0] - 22, K.nose[1] + 12, 36, 26, 0, 0, Math.PI * 2); g.fill(); g.restore();
+  }
+  function catInk(c, K, t, rev) {
+    const R_ = (pts, o) => brush(c, pts, { ...o, reveal: ss(o.d || 0, (o.d || 0) + 0.18, rev) });
+    // 背线、头顶：焦墨几笔
+    const b = K.bodyPts;
+    R_([b[5], b[4], b[3], b[2]], { w: 12, dry: 0.55, seed: 81, d: 0.12, tone: 0.9 });
+    R_([b[2], b[1], b[0]], { w: 8, dry: 0.7, seed: 82, d: 0.18, tone: 0.75 });
+    R_([b[6], b[7], b[8]], { w: 5, dry: 0.6, seed: 83, d: 0.2, tone: 0.55 });
+    K.stripes.forEach((s, i) => R_([s[0], [(s[0][0] + s[1][0]) / 2 + 3, (s[0][1] + s[1][1]) / 2], s[1]], { w: i < 3 ? 9 : 13, dry: 0.4, seed: 90 + i, d: 0.2 + i * 0.015, tone: 0.92, head: 0.2, tail: 0.6, bristles: 5 }));
+    if (rev < 0.25) return;
+    c.save(); c.globalAlpha = ss(0.25, 0.4, rev);
+    // 耳：两笔焦墨三角
+    c.fillStyle = 'rgba(14,12,10,.9)'; K.earInner.forEach(e => { c.beginPath(); c.moveTo(...e[0]); c.lineTo(...e[1]); c.lineTo(...e[2]); c.closePath(); c.fill(); });
+    // 头轮廓：一笔淡墨
+    c.strokeStyle = 'rgba(20,18,16,.55)'; c.lineWidth = 3; c.stroke(K.head);
+    // 八大式白眼：圆眶，瞳点顶到上方（白眼向天）
+    K.eyes.forEach((e, i) => { c.strokeStyle = 'rgba(10,10,10,.92)'; c.lineWidth = 2.6; c.beginPath(); c.ellipse(e.x, e.y, K.eyeR * 1.15, K.eyeR * (K.blink ? 0.15 : 1), 0, 0, Math.PI * 2); c.stroke();
+      if (!K.blink) { c.fillStyle = 'rgba(8,8,8,.95)'; c.beginPath(); c.arc(e.x + 2.5, e.y - K.eyeR * 0.55 + Math.sin(t * 2) * 1.2, K.eyeR * 0.42, 0, Math.PI * 2); c.fill(); } });
+    c.fillStyle = 'rgba(14,12,10,.9)'; c.beginPath(); c.ellipse(K.nose[0], K.nose[1], 6, 4, 0, 0, Math.PI * 2); c.fill();
+    c.strokeStyle = 'rgba(14,12,10,.8)'; c.lineWidth = 2; c.beginPath(); c.moveTo(...K.mouth[0]); c.quadraticCurveTo(...K.mouth[1], ...K.mouth[2]); c.stroke();
+    K.whiskers.forEach((w, i) => brush(c, [w[0], [(w[0][0] + w[1][0]) / 2, (w[0][1] + w[1][1]) / 2 - 2], w[1]], { w: 2.4, dry: 0.5, bristles: 3, seed: 99 + i, tone: 0.8, head: 0.05, tail: 0.6 }));
+    // 腿、爪：淡墨轻勾
+    c.strokeStyle = 'rgba(20,18,16,.38)'; c.lineWidth = 2; K.legs.forEach(l => c.stroke(l));
+    // 尾：焦墨环纹
+    const tp = K.tailPts; [5, 9, 13, 17].forEach((i, k) => { const p = tp[i], q = tp[i + 1], a = Math.atan2(q[1] - p[1], q[0] - p[0]) + Math.PI / 2; brush(c, [[p[0] - Math.cos(a) * 12, p[1] - Math.sin(a) * 12], [p[0] + Math.cos(a) * 12, p[1] + Math.sin(a) * 12]], { w: 8, dry: 0.3, bristles: 4, seed: 120 + k, tone: 0.85 }); });
+    c.restore();
+  }
+
+  return {
+    draw(c, lt, t) {
+      lt += 0.12;                                          // 开场不从一张白纸开始：第 0 帧已经落下前几笔
+      const ch = KIT.choreo(lt, t);
+      const rev = clamp(lt / 0.45);                       // 开场「画出来」
+      const grow = ss(0, 1.15, lt);                        // 墨晕外扩
+      c.drawImage(paper(), 0, 0);
+      // 晕染：远山＋朱日
+      washLayer(c, 'mtn', ss(0, 0.3, lt) * (0.6 + 0.4 * grow), mountains, { blur: 3, halo: 14, haloA: 0.3 });
+      c.save(); c.globalCompositeOperation = 'multiply'; c.globalAlpha = ss(0.1, 0.3, lt); c.filter = `blur(${2 + grow * 3}px)`; c.fillStyle = '#d8553f'; c.beginPath(); c.arc(700, 230, 30 + grow * 3, 0, Math.PI * 2); c.fill(); c.filter = 'none'; c.restore();
+      // 雾带：纸色横向晕带缓缓左移，远山时隐时现
+      c.save(); c.beginPath(); c.rect(366, 132, 428, 428); c.clip(); c.filter = 'blur(14px)';
+      [[420, 46, 0], [500, 34, 1], [330, 28, 2], [460, 30, 3]].forEach(([y, h, k]) => { const x = 900 - ((lt * (150 + k * 40) + k * 230) % 900); c.fillStyle = `rgba(242,234,214,${0.72 * ss(0.15, 0.4, lt)})`; c.beginPath(); c.ellipse(x, y, 230, h, 0, 0, Math.PI * 2); c.fill(); });
+      c.filter = 'none'; c.restore();
+      // 一只八大式小鸟掠过窗外（两笔翅，每 0.12s 扇一次）
+      if (lt > 0.25) { const bx = 820 - (lt - 0.25) * 420, by = 470 - Math.sin(lt * 3) * 26, fl = Math.sin(lt * 52);
+        c.save(); c.beginPath(); c.rect(366, 132, 428, 428); c.clip(); c.fillStyle = 'rgba(14,12,10,.9)';
+        c.beginPath(); c.ellipse(bx, by, 11, 6, -0.2, 0, Math.PI * 2); c.fill(); c.beginPath(); c.arc(bx - 11, by - 4, 5, 0, Math.PI * 2); c.fill();
+        leaf(c, bx - 2, by - 2, -1.2 - fl * 0.7, 28, 9, 0.9); leaf(c, bx + 4, by - 1, -0.5 - fl * 0.5, 24, 8, 0.75);
+        c.fillStyle = '#f2ead6'; c.beginPath(); c.arc(bx - 13, by - 5, 2, 0, Math.PI * 2); c.fill(); c.restore(); }
+      // 静态笔触（写完就缓存）
+      const stat = (c2, rv) => { WIN.forEach((s, i) => brush(c2, s.p, { w: s.w, dry: s.dry, seed: 10 + i, reveal: ss(s.d, s.d + s.l, rv), tone: s.tone || 0.88 })); TABLE.forEach((s, i) => brush(c2, s.p, { w: s.w, dry: s.dry, seed: 30 + i, reveal: ss(s.d, s.d + s.l, rv), tone: s.tone || 0.88 })); };
+      if (rev < 1) stat(c, rev); else c.drawImage(P.cached('ink_static', W, H, g => stat(g, 1)), 0, 0);
+      bamboo(c, t, rev);
+      // 挂轴＋虾（两只，沿各自弧线游）
+      c.save(); c.globalAlpha = ss(0.15, 0.35, lt); scrollStatic(c);
+      c.beginPath(); c.rect(1580, 290, 190, 540); c.clip();
+      [[1716, 450, 0.5, 0], [1700, 700, 1.4, 1]].forEach(([x, y, a0, k]) => { const u = lt * 1.6 + k * 2; shrimp(c, x - 26 * Math.sin(u * 1.5) - lt * 40, y + Math.sin(u * 2) * 16 - lt * 30, -0.35 + a0 * 0.1 + Math.sin(u * 1.5) * 0.18, 1.45, t, k * 2); });
+      c.restore();
+      // 猫：先在剪影里补回纸色，再赭石晕染 → 焦墨
+      const K = RIG.cat({ tail: ch.tail, blink: ch.blink, breathe: ch.breathe });
+      c.save(); const ks = new Path2D(); ks.addPath(K.body); ks.addPath(K.head); c.clip(ks); c.drawImage(paper(), 0, 0); c.restore();   // 窗台墨线不透过赭石
+      washLayer(c, 'cat', ss(0.02, 0.3, lt) * (0.7 + 0.3 * grow), g => catWash(g, K), { blur: 2.5, halo: 9, haloA: 0.28, alpha: 0.78 });
+      catInk(c, K, t, rev);
+      // 热气：两缕淡墨游丝
+      if (lt > 0.3) { c.save(); c.globalAlpha = ss(0.3, 0.5, lt);
+        [0, 1].forEach(k => { const pts = []; for (let i = 0; i <= 8; i++) { const q = i / 8; pts.push([1180 + k * 14 + Math.sin(t * 3.5 + q * 5 + k * 2) * 10 * q, 610 - q * 80]); } brush(c, pts, { w: 3, dry: 0.7, bristles: 3, seed: 300 + k + P.boilSeed(t, 10), tone: 0.45, head: 0.05, tail: 0.8 }); });
+        c.restore(); }
+    },
+    label(c, lt) {
+      const a = ss(0.0, 0.25, lt);
+      KIT.label(c, { title: '水墨写意', sub: '八大山人 · 齐白石', tFont: '80px "LXGWWenKai-500"', sFont: '30px "LXGWWenKai-500"', tCol: `rgba(14,12,10,${0.92 * a})`, sCol: `rgba(40,34,28,${0.85 * a})`, spacing: 6 });
+      // 钤印：朱文方印「白石」，0.32s 盖下（先放大再压实，印泥略洇）
+      const q = ss(0.3, 0.4, lt); if (q <= 0) return;
+      const s = 1.5 - 0.5 * ease.out(q);
+      const seal = P.cached('ink_seal', 80, 80, g => { g.translate(40, 40);
+        g.fillStyle = '#c4281e'; g.fillRect(-34, -34, 68, 68);
+        g.globalCompositeOperation = 'destination-out'; g.font = '30px "LXGWWenKai-500"'; g.textAlign = 'center'; g.textBaseline = 'middle';
+        g.fillText('白', 0, -14); g.fillText('石', 0, 16);
+        const r = rng(7); for (let i = 0; i < 40; i++) g.fillRect(-34 + r() * 68, -34 + r() * 68, 1 + r() * 3, 1 + r() * 2);   // 印面斑驳
+      });
+      c.save(); c.translate(1500, 98); c.scale(s, s); c.globalAlpha = Math.min(1, q * 1.6); c.globalCompositeOperation = 'multiply';
+      c.drawImage(seal, -40, -40); c.restore();
+    },
+  };
+})();

package/lib/motion/mgstyles/upstream/manifest.json

@@ -3,7 +3,7 @@
   "commit": "49052d80bfaf9fa8412cc9710530e5e95a3b8d8c",
   "license": "MIT",
   "vendoredAt": "2026-10-05",
-  "note": "只收文本：提示词 + demo 源码。视频/纹理/字体不在仓库里，也没有 vendor 进来。",
+  "note": "只收文本：提示词 + demo 源码。视频/纹理/字体不在仓库里，也没有 vendor 进来。23-ink-wash 来自 huashu-art-motion（MIT），见 origins。",
   "styles": [
     {
       "slug": "01-flat-vector",
@@ -176,6 +176,16 @@
         "demos/22-hud/js/util.js",
         "demos/22-hud/js/v5.js"
       ]
+    },
+    {
+      "slug": "23-ink-wash",
+      "heading": "水墨写意 Chinese Ink Wash / Xieyi",
+      "shot": "huashu 17_ink · 1920×1080 · 30 fps · 10 秒 · 单镜写意房间",
+      "prompt": "prompts/23-ink-wash.md",
+      "demos": [
+        "demos/23-ink-wash/film.js",
+        "demos/23-ink-wash/brush.js"
+      ]
     }
   ],
   "files": {
@@ -257,7 +267,10 @@
     "demos/22-hud/js/hud.js": "751c05b15e65474b89f55346587c85e9215317e900ecc64a0fce451827ee1c88",
     "demos/22-hud/js/post.js": "672ce9b4a1da6f59f2d65bb1f8e337851b7893553dc250aad2192388a0711a53",
     "demos/22-hud/js/util.js": "7ec7a52b27659de843f72f65ad4dbfc07e217f528bba5bbff69b31b4293081db",
-    "demos/22-hud/js/v5.js": "af2cf92f176962361826fc84593241805628afdf13ca9e88e023712dc6626fcb"
+    "demos/22-hud/js/v5.js": "af2cf92f176962361826fc84593241805628afdf13ca9e88e023712dc6626fcb",
+    "prompts/23-ink-wash.md": "2f51e3251caca5e66f89c14be8fda0a66b9b3b1b6150e94e87235f963c754246",
+    "demos/23-ink-wash/film.js": "93b1e80a3731b479beac56e0a9dae13d52aa20b7bbc71678527e49dbd22eac4f",
+    "demos/23-ink-wash/brush.js": "e83db04e5fc9fef83237d984d2ceba3c1ec71c0c2a8f8a798ecc939fc8c3b2d4"
   },
   "removedStyles": [
     {
@@ -265,5 +278,17 @@
       "heading": "3D 渲染系（C4D/Blender 质感） 3D Render / CGI Motion Design",
       "reason": "画面是 Blender 离线渲的 CGI 质感，插件里没有能出同等质感的等价物（拿 DOM 滤镜凑只会更假）。"
     }
-  ]
+  ],
+  "origins": {
+    "23-ink-wash": {
+      "source": "https://github.com/alchaincyf/huashu-art-motion",
+      "license": "MIT",
+      "files": {
+        "prompts/23-ink-wash.md": "references/风格配方/17_ink.md",
+        "demos/23-ink-wash/film.js": "scripts/engine/scenes/17_ink.js",
+        "demos/23-ink-wash/brush.js": "scripts/engine/lib/brush.js"
+      },
+      "note": "场景为节选（少女段落未收），brush.js 逐字收录；依赖上游全局 U/KIT/PAINT，只作阅读参考。"
+    }
+  }
 }

package/lib/motion/mgstyles/upstream/prompts/23-ink-wash.md

@@ -0,0 +1,59 @@
+# 17_ink · 中国水墨写意（八大山人／齐白石）
+
+> 上游：`huashu-art-motion`（alchaincyf，MIT）`references/风格配方/17_ink.md`，场景源码 `scripts/engine/scenes/17_ink.js`。
+> 上游实验记录：帧差 0.45↔0.9s 为 3.3%（阈值 24），相邻帧中位 0.62%，没有静止帧对。
+> 这份文件是上游的「配方卡」原文整理，不是 Remotion 施工说明 —— 怎么换到 DrawAI 的渲染栈里，看 `briefs/23-ink-wash.md`。
+
+## 管线（和 09 标杆相反：纸是底，墨只加不铺）
+
+开场 `lt += 0.12`，第 0 帧已经落下前几笔，不是一张白纸（审片指出白纸首帧不能当封面）。
+宣纸（缓存）→ 晕染层：淡墨远山、朱日 → 雾带（纸色模糊椭圆横移）→ 掠过的小鸟 → 静态笔触：窗、案、地线，写完缓存 → 竹枝（个字叶）→ 挂轴里的齐白石虾 → 猫：赭石晕染＋焦墨 → 少女：花青晕染＋白描＋衣纹 → 热气游丝 → 钤印。
+
+## 宣纸
+
+`P.texture('#efe6d0', scale .0025, amt 9, grain 7)`。上面叠 2600 根纸纤维短弧：一半褐色 α.05–.13，一半亮色 α.12–.27。再加径向暗角，到边缘 α.22。
+
+## 毛笔 `brush(c, pts, {w, tone, dry, reveal, bristles, head, tail})`
+
+- 点列先 Catmull-Rom 加密，再按 4px 等弧长重采样（`KIT.resample`）。不重采样的话，飞白噪声的频率会随笔画长短变化。
+- 笔压：`prof(q) = smoothstep(0,head,q) · (1−0.7·smoothstep(1−tail,1,q)) · (0.85+0.15·noise)`。
+- 湿笔芯：整笔都用 ribbon 填，宽度 `w·prof·(1−0.85·dry·q^0.8)`，α 为 tone×0.72。越往后越细，表示墨在用完。
+- 笔毛：每根一条**连续**折线，横向偏移 ±0.475w·prof。噪声 `noise(k·1.9, i·0.09)` 低于 `dry·q^1.2·0.95+0.05` 时断开，露出的纸就是飞白。
+- 坑：第一版按「每一小段单独 stroke＋round cap」画笔毛，接头处叠出一节节深点，看起来像竹节或麻绳。必须改成每根笔毛一条连续 path、butt cap。
+- 参数：窗框 w14–18、dry .45–.6；案面 w22；衣纹 w4–6、dry .3–.4、tone .78；地线 w5、dry .85、tone .35。
+
+## 晕染层 `washLayer`
+
+- 形状先画在 scratch 上，再用 multiply 合到纸上，分两遍。
+- 外晕：`blur(halo·(0.4+grow))`，α 为 haloA·grow。
+- 本体：`blur(blur·(1.6−0.6·grow))`。
+- grow 按 lt 从 0 走到 1：开场是从无到有洇开，之后外晕继续慢慢变宽，这就是「墨在纸上晕开」。
+- 少女 halo 12、α.6；猫 halo 9、α.78；远山 halo 14。
+
+## 留白
+
+- 猫的白色部分（口鼻、胸、爪）用 `destination-out` 从赭石层里挖掉，露出纸色。这比画白色更有水墨味。
+- 少女的交领内衫也这样挖掉。
+- 面部用纸色填，再用 1.8px 焦墨白描勾。
+
+## 色
+
+- 墨 `[16,14,12]`，用 tone 分出五色（焦 .9／浓 .8／重 .6／淡 .35／清 .15）。
+- 赭石（猫）`#c47a3c`；花青（衣）`#6f8aa0`、广袖 `#7d97ab`；藤黄（金发）`rgba(226,170,52,.75)` multiply。
+- 胭脂红只点三处：腰带、发簪珠、点唇，用 `[190,40,40]`。另有朱日 `#d8553f`、钤印 `#c4281e`。
+
+## 母题动画
+
+- **开场写出**：lt 0→0.45，每笔 `reveal = ss(d, d+l, lt/0.45)`，按窗、案、竹、猫、人的顺序依次写出。
+- 竹：分节淡墨主枝，绕 (835,70) 摆 `sin(2.9t)·0.11`，越往枝梢越大。5 组个字叶各 3 片（L110、w15），翻动 `sin(7t+g)·0.2`。
+- 雾带：4 条纸色椭圆，blur 14、α.72，以 150–270px/s 横移，远山时隐时现。
+- 八大式小鸟：从窗右侧以 420px/s 掠过，翅膀两笔，每秒约扇 8 次（`sin(52·lt)`）。
+- 齐白石虾（挂轴里两只，1.45 倍）：6 节淡墨节＋头胸甲中间一笔焦墨，两长两短须做行波，三节长钳，身体弯曲 `sin(7t)·0.12`，沿曲线游动。
+- 八大白眼：猫的瞳点顶到眼眶上方，「白眼向天」。
+- 钤印：lt 0.3–0.4 从 1.5 倍压到 1 倍，multiply 盖上；白文「白石」。
+
+## 坑
+
+- 静态笔触在写出期间实时画，写完一次性缓存成 `ink_static`，否则每帧要画几千根笔毛。
+- 小鸟第一版的路径穿过竹叶丛，看不见，改到雾带上方 y≈470 才读得出来。
+- 晕染用的是 multiply，透明，所以窗台墨线会透过猫的耳朵，桌腿会透过裙子，审片读成「层级错了」。修法是在猫和衣裙的剪影里先补一层纸色（clip 后 drawImage 纸），再上晕染。这等于在纸上「先留出这块地方」。

package/lib/motion/mgstyles/vendor/README.md

@@ -1,28 +1,28 @@
-# vendored demo 依赖
-
-`upstream/demos/*/index.html` 的 importmap 和 `<script src>` 指向 `/node_modules/*`。这些包不在
-视频运行时（`src/motion/runtime/package.json`）的依赖里，装到用户机器上就无从服务，于是
-`mg_style action:"frames"` 直接报「依赖没装在本机」（issue #27）。
-
-这里按**原包内路径**放好被引用的构建产物，`src/motion/style-frames.js` 在服务 `/node_modules/*`
-时先查视频运行时、再回落到本目录，所以用户什么都不用装。
-
-```
-modules/<包名>/<包内原路径>
-```
-
-| 包 | 版本 | 文件 | 许可证 |
-| --- | --- | --- | --- |
-| d3 | 7.9.0 | `d3/dist/d3.min.js` | ISC（见 `d3/LICENSE`） |
-| topojson-client | 3.1.0 | `topojson-client/dist/topojson-client.min.js` | ISC（见 `topojson-client/LICENSE`） |
-| opentype.js | 1.3.4 | `opentype.js/dist/opentype.mjs` | MIT（见 `opentype.js/LICENSE`） |
-| simplex-noise | 4.0.3 | `simplex-noise/dist/esm/simplex-noise.js` | MIT（见 `simplex-noise/LICENSE`） |
-
-- 只用到的文件放进来了，没有整包拷（约 780 KB）。
-- 目录叫 `modules` 而不是 `node_modules`：npm 打包会无条件跳过任何名为 `node_modules` 的目录，
-  那样 vendored 文件进不了 tarball。`.gitignore` / `.npmignore` 里给了 `dist/` 的例外规则，
-  否则这几个文件会被当成构建产物忽略。
-- `opentype.js` 1.3.4 的 ESM 构建叫 `dist/opentype.module.js`，demo 按 `dist/opentype.mjs` 引用，
-  所以这里用前者的内容放到后者的文件名下；升级时按同样规则替换。
-- `three` 不在这里：视频运行时的依赖清单已包含 three 0.183.2，`/node_modules/three/*` 由运行时提供。
-- 升级包时同步改本表版本号，并重跑 `node tools/check-package.mjs`（它校验这几个文件是否存在）。
+# vendored demo 依赖
+
+`upstream/demos/*/index.html` 的 importmap 和 `<script src>` 指向 `/node_modules/*`。这些包不在
+视频运行时（`src/motion/runtime/package.json`）的依赖里，装到用户机器上就无从服务，于是
+`mg_style action:"frames"` 直接报「依赖没装在本机」（issue #27）。
+
+这里按**原包内路径**放好被引用的构建产物，`src/motion/style-frames.js` 在服务 `/node_modules/*`
+时先查视频运行时、再回落到本目录，所以用户什么都不用装。
+
+```
+modules/<包名>/<包内原路径>
+```
+
+| 包 | 版本 | 文件 | 许可证 |
+| --- | --- | --- | --- |
+| d3 | 7.9.0 | `d3/dist/d3.min.js` | ISC（见 `d3/LICENSE`） |
+| topojson-client | 3.1.0 | `topojson-client/dist/topojson-client.min.js` | ISC（见 `topojson-client/LICENSE`） |
+| opentype.js | 1.3.4 | `opentype.js/dist/opentype.mjs` | MIT（见 `opentype.js/LICENSE`） |
+| simplex-noise | 4.0.3 | `simplex-noise/dist/esm/simplex-noise.js` | MIT（见 `simplex-noise/LICENSE`） |
+
+- 只用到的文件放进来了，没有整包拷（约 780 KB）。
+- 目录叫 `modules` 而不是 `node_modules`：npm 打包会无条件跳过任何名为 `node_modules` 的目录，
+  那样 vendored 文件进不了 tarball。`.gitignore` / `.npmignore` 里给了 `dist/` 的例外规则，
+  否则这几个文件会被当成构建产物忽略。
+- `opentype.js` 1.3.4 的 ESM 构建叫 `dist/opentype.module.js`，demo 按 `dist/opentype.mjs` 引用，
+  所以这里用前者的内容放到后者的文件名下；升级时按同样规则替换。
+- `three` 不在这里：视频运行时的依赖清单已包含 three 0.183.2，`/node_modules/three/*` 由运行时提供。
+- 升级包时同步改本表版本号，并重跑 `node tools/check-package.mjs`（它校验这几个文件是否存在）。

package/lib/motion/mgstyles/vendor/modules/d3/LICENSE

@@ -1,13 +1,13 @@
-Copyright 2010-2023 Mike Bostock
-
-Permission to use, copy, modify, and/or distribute this software for any purpose
-with or without fee is hereby granted, provided that the above copyright notice
-and this permission notice appear in all copies.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
-FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
-OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
-TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
-THIS SOFTWARE.
+Copyright 2010-2023 Mike Bostock
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.