@amg555/frameforge-mcp 2.7.3 → 2.7.7

package/plugins/aiinsight-shorts/styles/tall-tale/example/src/core/props.js

@@ -0,0 +1,166 @@
+// 3D props and buildings for the Tall Tale world. Each returns a THREE.Group (feet / base at y = 0) and, when it
+// animates, an update function on the group (group.update(...)).
+//   house({ wall, roof, trim }) .door (hinge group)   ·  signpost([['LEWISTON', 'r'], ...])   ·  platformScale() .set(lbs)
+//   train() .update(t)  (locomotive + mail car + smoke)   ·  rails(len)   ·  cubbies(w, h)   ·  mailSack()   ·  parcel(w, h, d)
+//   desk()   ·  poster(lines, opts)   ·  chickCrate() .update(t)
+import * as THREE from 'three';
+import { T, mat, canvasTex, signBoard } from './world.js';
+
+const rnd = (i) => { const x = Math.sin(i * 127.1 + 311.7) * 43758.5453; return x - Math.floor(x); };
+const box = (w, h, d, m, x = 0, y = 0, z = 0, parent) => { const b = new THREE.Mesh(new THREE.BoxGeometry(w, h, d), m); b.position.set(x, y, z); b.castShadow = b.receiveShadow = true; if (parent) parent.add(b); return b; };
+const cyl = (r1, r2, h, m, x, y, z, parent, seg = 16) => { const c = new THREE.Mesh(new THREE.CylinderGeometry(r1, r2, h, seg), m); c.position.set(x, y, z); c.castShadow = c.receiveShadow = true; if (parent) parent.add(c); return c; };
+const INK = '#1F1C33';
+
+/** a farmhouse facing +z: 6 wide, 4.5 deep. Porch in front. g.door is the door's hinge group (rotate .y to open) */
+export function house({ wall = '#F2E6CF', roof = '#B5553C', trim = '#FFFFFF', door = '#3C6FB6' } = {}) {
+  const g = new THREE.Group(), W = 6, D = 4.5, H = 3.2;
+  const wm = mat({ map: T.siding(wall, [3, 2]) });
+  box(W, H, D, wm, 0, H / 2, 0, g);
+  // gable: a triangular prism
+  const sh = new THREE.Shape(); sh.moveTo(-W / 2 - 0.4, 0); sh.lineTo(0, 2.0); sh.lineTo(W / 2 + 0.4, 0); sh.lineTo(-W / 2 - 0.4, 0);
+  const gable = new THREE.Mesh(new THREE.ExtrudeGeometry(sh, { depth: D - 0.02, bevelEnabled: false }), wm); gable.position.set(0, H, -D / 2 + 0.01); gable.castShadow = true; g.add(gable);
+  const rm = mat({ color: roof, map: T.planks(roof, [2, 2]) }), slope = Math.hypot(W / 2 + 0.6, 2.1);
+  [-1, 1].forEach((s) => { const r = box(slope, 0.14, D + 0.8, rm, s * (W / 4 + 0.15), H + 1.02, 0, g); r.rotation.z = -s * Math.atan2(2.1, W / 2 + 0.6); });
+  cyl(0.3, 0.3, 1.4, mat({ color: '#9E4A3A', map: T.brick('#9E4A3A', [0.5, 1]) }), 1.6, H + 1.6, -0.6, g, 4);
+  // porch
+  box(W + 0.4, 0.25, 1.8, mat({ map: T.planks('#A8693E', [2, 1]) }), 0, 0.12, D / 2 + 0.9, g);
+  [-W / 2, -1, 1, W / 2].forEach((x) => box(0.14, 2.6, 0.14, mat({ color: trim }), x, 1.4, D / 2 + 1.7, g));
+  const pr = box(W + 0.6, 0.12, 2.0, mat({ color: roof }), 0, 2.75, D / 2 + 0.9, g); pr.rotation.x = 0.12;
+  for (let x = -W / 2; x <= W / 2; x += 0.35) if (Math.abs(x) > 0.9) box(0.06, 0.7, 0.06, mat({ color: trim }), x, 0.6, D / 2 + 1.75, g);
+  [-1, 1].forEach((sd) => box(W / 2 - 0.9, 0.08, 0.08, mat({ color: trim }), sd * (W / 4 + 0.45), 0.95, D / 2 + 1.75, g));
+  // windows
+  const winTex = canvasTex('housewin', 128, 160, (c) => { c.fillStyle = trim; c.fillRect(0, 0, 128, 160); const gr = c.createLinearGradient(0, 0, 128, 160); gr.addColorStop(0, '#9CC7E4'); gr.addColorStop(1, '#3F6E9A'); c.fillStyle = gr; c.fillRect(12, 12, 104, 136); c.fillStyle = trim; c.fillRect(60, 12, 8, 136); c.fillRect(12, 76, 104, 8); c.fillStyle = '#E58A9A'; c.fillRect(12, 12, 20, 136); c.fillRect(96, 12, 20, 136); });
+  [-1.9, 1.9].forEach((x) => { const w = new THREE.Mesh(new THREE.PlaneGeometry(0.9, 1.15), mat({ map: winTex })); w.position.set(x, 1.7, D / 2 + 0.01); g.add(w); box(1.1, 0.1, 0.25, mat({ color: trim }), x, 1.07, D / 2 + 0.1, g); });
+  // door on a hinge
+  const hinge = new THREE.Group(); hinge.position.set(-0.5, 0.25, D / 2 + 0.03); g.add(hinge);
+  const dTex = canvasTex('door' + door, 128, 256, (c) => { c.fillStyle = door; c.fillRect(0, 0, 128, 256); c.strokeStyle = 'rgba(0,0,0,0.25)'; c.lineWidth = 6; c.strokeRect(16, 16, 96, 100); c.strokeRect(16, 136, 96, 104); c.fillStyle = '#E2B33C'; c.beginPath(); c.arc(104, 136, 7, 0, 7); c.fill(); });
+  const dm = box(1.0, 2.1, 0.08, [mat({ color: door }), mat({ color: door }), mat({ color: door }), mat({ color: door }), mat({ map: dTex }), mat({ color: door })], 0.5, 1.05, 0, hinge);
+  const dark = new THREE.Mesh(new THREE.PlaneGeometry(1.0, 2.1), new THREE.MeshBasicMaterial({ color: '#2A1E1A' })); dark.position.set(0, 1.3, D / 2 + 0.005); g.add(dark);
+  box(1.2, 0.1, 0.1, mat({ color: trim }), 0, 2.4, D / 2 + 0.05, g);
+  g.door = hinge; return g;
+}
+
+export function signpost(arms = [['LEWISTON  73 MI', 'r'], ['GRANGEVILLE', 'l']]) {
+  const g = new THREE.Group(); cyl(0.08, 0.1, 3, mat({ color: '#7A5236', map: T.planks('#7A5236', [0.3, 1]) }), 0, 1.5, 0, g, 8);
+  arms.forEach(([txt, dir], i) => {
+    const t = canvasTex('arm' + txt, 512, 128, (c) => { c.fillStyle = '#F2E6CF'; c.beginPath(); if (dir === 'r') { c.moveTo(0, 8); c.lineTo(440, 8); c.lineTo(504, 64); c.lineTo(440, 120); c.lineTo(0, 120); } else { c.moveTo(512, 8); c.lineTo(72, 8); c.lineTo(8, 64); c.lineTo(72, 120); c.lineTo(512, 120); } c.closePath(); c.fill(); c.strokeStyle = INK; c.lineWidth = 8; c.stroke(); c.fillStyle = INK; c.font = '700 54px Caladea, Georgia, serif'; c.textAlign = 'center'; c.textBaseline = 'middle'; c.fillText(txt, 256, 68); });
+    const m = new THREE.Mesh(new THREE.PlaneGeometry(1.8, 0.45), new THREE.MeshStandardMaterial({ map: t, transparent: true, alphaTest: 0.5, side: THREE.DoubleSide, roughness: 0.8 }));
+    m.position.set(dir === 'r' ? 0.85 : -0.85, 2.5 - i * 0.55, 0.1); m.rotation.y = (i ? -0.15 : 0.12); m.castShadow = true; g.add(m);
+  });
+  return g;
+}
+
+/** a post-office platform scale with a round dial (0-60 lb). g.set(lbs) moves the needle */
+export function platformScale() {
+  const g = new THREE.Group(), iron = mat({ color: '#2E3A35', roughness: 0.4, metalness: 0.4 }), brass = mat({ color: '#C9A13B', roughness: 0.3, metalness: 0.7 });
+  box(0.9, 0.08, 0.7, brass, 0, 0.04, 0, g); box(0.95, 0.04, 0.75, iron, 0, 0.0, 0, g);
+  box(0.08, 1.45, 0.08, iron, 0, 0.75, -0.3, g);
+  const cv = document.createElement('canvas'); cv.width = cv.height = 512; const c = cv.getContext('2d');
+  const tex = new THREE.CanvasTexture(cv); tex.colorSpace = THREE.SRGBColorSpace;
+  const dial = new THREE.Mesh(new THREE.CylinderGeometry(0.3, 0.3, 0.08, 40), [iron, new THREE.MeshStandardMaterial({ map: tex, roughness: 0.4 }), iron]);
+  dial.rotation.x = Math.PI / 2; dial.position.set(0, 1.62, -0.28); dial.castShadow = true; g.add(dial);
+  const ang = (v) => -Math.PI * 0.75 + (v / 60) * Math.PI * 1.5;
+  g.set = (lbs) => {
+    c.fillStyle = '#C9A13B'; c.fillRect(0, 0, 512, 512); c.fillStyle = '#FFF8E6'; c.beginPath(); c.arc(256, 256, 236, 0, 7); c.fill();
+    c.strokeStyle = '#D8343F'; c.lineWidth = 34; c.beginPath(); c.arc(256, 256, 196, ang(50) - Math.PI / 2, ang(60) - Math.PI / 2); c.stroke();
+    c.fillStyle = INK; c.font = '900 40px Inter'; c.textAlign = 'center'; c.textBaseline = 'middle';
+    for (let v = 0; v <= 60; v += 5) { const a = ang(v) - Math.PI / 2, big = v % 10 === 0; c.strokeStyle = INK; c.lineWidth = big ? 8 : 4; c.beginPath(); c.moveTo(256 + Math.cos(a) * 214, 256 + Math.sin(a) * 214); c.lineTo(256 + Math.cos(a) * (big ? 176 : 192), 256 + Math.sin(a) * (big ? 176 : 192)); c.stroke(); if (big) c.fillText(String(v), 256 + Math.cos(a) * 140, 256 + Math.sin(a) * 140); }
+    c.font = '900 30px Inter'; c.fillStyle = '#D8343F'; c.fillText('LIMIT', 256, 360); c.fillStyle = INK; c.fillText('POUNDS', 256, 400);
+    const a = ang(lbs) - Math.PI / 2; c.strokeStyle = '#B5372E'; c.lineWidth = 12; c.lineCap = 'round'; c.beginPath(); c.moveTo(256 - Math.cos(a) * 30, 256 - Math.sin(a) * 30); c.lineTo(256 + Math.cos(a) * 200, 256 + Math.sin(a) * 200); c.stroke();
+    c.fillStyle = INK; c.beginPath(); c.arc(256, 256, 18, 0, 7); c.fill();
+    tex.needsUpdate = true;
+  };
+  g.set(0); g.dial = dial; return g;
+}
+
+export function rails(len = 200) {
+  const g = new THREE.Group(), steel = mat({ color: '#6E6A6A', roughness: 0.4, metalness: 0.6 });
+  [-0.72, 0.72].forEach((z) => box(len, 0.1, 0.08, steel, 0, 0.17, z, g));
+  const ties = new THREE.InstancedMesh(new THREE.BoxGeometry(0.25, 0.1, 2.2), mat({ color: '#5A3E2A' }), Math.floor(len / 0.7)), m4 = new THREE.Matrix4();
+  for (let i = 0; i < ties.count; i++) { m4.makeTranslation(-len / 2 + i * 0.7, 0.07, 0); ties.setMatrixAt(i, m4); } ties.receiveShadow = true; g.add(ties);
+  const bed = box(len, 0.06, 3.0, mat({ map: T.dirt('#9C8A78', [len / 4, 1], false) }), 0, 0.02, 0, g); bed.castShadow = false;
+  return g;
+}
+
+let smokeT = null;
+function smokeTex() { if (smokeT) return smokeT; const c = document.createElement('canvas'); c.width = c.height = 128; const g = c.getContext('2d'); const gr = g.createRadialGradient(64, 64, 4, 64, 64, 60); gr.addColorStop(0, 'rgba(240,240,245,1)'); gr.addColorStop(0.7, 'rgba(225,225,235,0.85)'); gr.addColorStop(1, 'rgba(225,225,235,0)'); g.fillStyle = gr; g.fillRect(0, 0, 128, 128); smokeT = new THREE.CanvasTexture(c); return smokeT; }
+
+/** an old steam locomotive pulling a green U.S. MAIL car, running along +x. g.update(t) puffs smoke + turns wheels */
+export function train() {
+  const g = new THREE.Group(), black = mat({ color: '#25242B', roughness: 0.45, metalness: 0.3 }), red = mat({ color: '#B5372E', roughness: 0.5 }), brass = mat({ color: '#C9A13B', metalness: 0.7, roughness: 0.3 });
+  const loco = new THREE.Group(); g.add(loco);
+  const boiler = cyl(0.62, 0.62, 3.4, black, 1.0, 1.55, 0, loco, 24); boiler.rotation.z = Math.PI / 2;
+  [0.2, 1.0, 1.8].forEach((x) => { const b = cyl(0.64, 0.64, 0.08, brass, x, 1.55, 0, loco, 24); b.rotation.z = Math.PI / 2; });
+  const front = cyl(0.5, 0.5, 0.1, mat({ color: '#3A3940' }), 2.72, 1.55, 0, loco, 24); front.rotation.z = Math.PI / 2;
+  const lampM = new THREE.MeshStandardMaterial({ color: '#FFF3C8', emissive: '#FFE7A0', emissiveIntensity: 1 }); const lp = new THREE.Mesh(new THREE.SphereGeometry(0.16, 12, 8), lampM); lp.position.set(2.75, 2.3, 0); loco.add(lp);
+  cyl(0.2, 0.32, 0.9, black, 2.2, 2.55, 0, loco); cyl(0.36, 0.2, 0.25, black, 2.2, 3.05, 0, loco);
+  cyl(0.22, 0.22, 0.4, brass, 1.2, 2.3, 0, loco);
+  box(1.6, 1.9, 1.7, red, -1.3, 1.95, 0, loco); box(1.9, 0.12, 1.95, black, -1.3, 2.95, 0, loco);
+  [-0.86, 0.86].forEach((z) => { const w = new THREE.Mesh(new THREE.PlaneGeometry(0.7, 0.6), mat({ color: '#F2D37A', emissive: '#F2C060', emissiveIntensity: 0.25 })); w.position.set(-1.3, 2.2, z * 1.001); w.rotation.y = z > 0 ? 0 : Math.PI; loco.add(w); });
+  box(4.6, 0.3, 1.5, black, 0.2, 0.75, 0, loco);
+  const cc = new THREE.Mesh(new THREE.ConeGeometry(0.8, 0.9, 4), red); cc.rotation.set(0, Math.PI / 4, Math.PI / 2); cc.position.set(3.0, 0.55, 0); cc.scale.set(1, 1, 0.5); loco.add(cc);
+  const wheels = [];
+  [[-1.3, 0.55], [0.0, 0.55], [1.0, 0.55], [2.1, 0.38]].forEach(([x, r]) => [-0.72, 0.72].forEach((z) => { const w = cyl(r, r, 0.12, red, x, r + 0.2, z, loco, 20); w.rotation.x = Math.PI / 2; wheels.push(w); const hub = cyl(r * 0.3, r * 0.3, 0.14, brass, x, r + 0.2, z, loco, 10); hub.rotation.x = Math.PI / 2; }));
+  // mail car
+  const car = new THREE.Group(); car.position.x = -6.2; g.add(car);
+  const green = mat({ color: '#2E5A44', roughness: 0.6, map: T.planks('#2E5A44', [2, 1]) });
+  box(7.0, 2.4, 2.2, green, 0, 2.0, 0, car); box(7.3, 0.2, 2.5, black, 0, 3.3, 0, car); box(7.0, 0.3, 1.6, black, 0, 0.75, 0, car);
+  [1, -1].forEach((s) => { const sb = signBoard('U.S. MAIL', { w: 3.2, h: 0.55, bg: '#2E5A44', fg: '#F2D37A' }); sb.position.set(0, 2.6, s * 1.13); if (s < 0) sb.rotation.y = Math.PI; car.add(sb); for (let x = -3; x <= 3; x += 2) if (Math.abs(x) > 1.5) { const w = new THREE.Mesh(new THREE.PlaneGeometry(0.7, 0.6), mat({ color: '#F2D37A', emissive: '#F2C060', emissiveIntensity: 0.3 })); w.position.set(x, 2.0, s * 1.115); if (s < 0) w.rotation.y = Math.PI; car.add(w); } });
+  [-2.6, -1.8, 1.8, 2.6].forEach((x) => [-0.72, 0.72].forEach((z) => { const w = cyl(0.4, 0.4, 0.12, black, x, 0.6, z, car, 18); w.rotation.x = Math.PI / 2; wheels.push(w); }));
+  // smoke
+  const puffs = []; for (let i = 0; i < 14; i++) { const s = new THREE.Sprite(new THREE.SpriteMaterial({ map: smokeTex(), transparent: true, depthWrite: false, color: '#EEEEF4' })); g.add(s); puffs.push(s); }
+  g.update = (t, speed = 6) => {
+    wheels.forEach((w) => { w.rotation.y = -t * speed * 1.6; });
+    puffs.forEach((p, i) => { const age = ((t * 1.4 + i / puffs.length) % 1); const k = age; p.position.set(2.2 - k * speed * 0.9 - k * 1.5, 3.2 + k * 2.6, (rnd(i) - 0.5) * k * 1.4); const sc = 0.5 + k * 2.4; p.scale.set(sc, sc, 1); p.material.opacity = (1 - k) * 0.9; });
+  };
+  g.update(0); return g;
+}
+
+/** a wall of wooden mail cubbies with letters poking out (w x h metres, faces +z) */
+export function cubbies(w = 3, h = 1.8) {
+  const g = new THREE.Group(), wood = mat({ map: T.planks('#8A5A36', [1, 1]) });
+  box(w, h, 0.4, mat({ color: '#4A2E1E' }), 0, h / 2, 0, g);
+  const nx = Math.round(w / 0.32), ny = Math.round(h / 0.26);
+  for (let i = 0; i <= nx; i++) box(0.03, h, 0.42, wood, -w / 2 + i * w / nx, h / 2, 0.01, g);
+  for (let j = 0; j <= ny; j++) box(w, 0.03, 0.42, wood, 0, j * h / ny, 0.01, g);
+  const lm = [mat({ color: '#FFFDF4' }), mat({ color: '#F2E6CF' }), mat({ color: '#E9D7A5' })];
+  for (let i = 0; i < nx; i++) for (let j = 0; j < ny; j++) if (rnd(i * 17 + j) > 0.35) { const l = box(w / nx * 0.7, h / ny * (0.4 + rnd(i + j * 3) * 0.4), 0.02, lm[(i + j) % 3], -w / 2 + (i + 0.5) * w / nx, j * h / ny + 0.03 + h / ny * 0.25, 0.12, g); l.rotation.z = (rnd(i * j) - 0.5) * 0.2; }
+  return g;
+}
+export function mailSack(s = 1, col = '#C9B48A') {
+  const g = new THREE.Group(); const m = new THREE.Mesh(new THREE.SphereGeometry(0.4 * s, 16, 12), mat({ color: col, roughness: 1 })); m.scale.set(1, 1.2, 0.85); m.position.y = 0.42 * s; m.castShadow = m.receiveShadow = true; g.add(m);
+  const tie = cyl(0.08 * s, 0.14 * s, 0.25 * s, mat({ color: col }), 0, 0.98 * s, 0, g, 10);
+  const lab = canvasTex('sacklab', 128, 64, (c) => { c.fillStyle = '#F2E6CF'; c.fillRect(0, 0, 128, 64); c.fillStyle = '#2E4E8A'; c.font = '900 26px Inter'; c.textAlign = 'center'; c.fillText('U.S. MAIL', 64, 42); });
+  const l = new THREE.Mesh(new THREE.PlaneGeometry(0.4 * s, 0.2 * s), mat({ map: lab })); l.position.set(0, 0.45 * s, 0.35 * s); g.add(l); return g;
+}
+export function parcel(w = 0.5, h = 0.35, d = 0.4, label = true) {
+  const t = canvasTex('parcel', 256, 256, (c) => { c.fillStyle = '#C8935A'; c.fillRect(0, 0, 256, 256); c.fillStyle = '#B07A48'; for (let i = 0; i < 30; i++) c.fillRect(rnd(i) * 256, rnd(i * 3) * 256, 40, 2); c.fillStyle = '#E9D7A5'; c.fillRect(120, 0, 16, 256); c.fillRect(0, 120, 256, 16); if (label) { c.fillStyle = '#FFFDF4'; c.fillRect(150, 150, 90, 70); c.fillStyle = '#D8343F'; c.fillRect(214, 156, 20, 24); } });
+  const g = new THREE.Group(); box(w, h, d, mat({ map: t }), 0, h / 2, 0, g); return g;
+}
+export function desk(w = 2.2) {
+  const g = new THREE.Group(), wood = mat({ map: T.planks('#6B3E26', [1, 1]) });
+  box(w, 0.08, 1.0, mat({ map: T.felt('#2E5A44') }), 0, 0.84, 0, g); box(w + 0.1, 0.06, 1.1, wood, 0, 0.78, 0, g);
+  box(0.5, 0.76, 0.95, wood, -w / 2 + 0.3, 0.38, 0, g); box(0.5, 0.76, 0.95, wood, w / 2 - 0.3, 0.38, 0, g); box(w - 1, 0.6, 0.06, wood, 0, 0.45, -0.45, g);
+  return g;
+}
+/** a printed notice on paper (plane). g.mesh to animate */
+export function poster(lines = ['NOTICE'], { w = 1.6, h = 2.0, bg = '#F4EBD6', fg = '#1F1C33', accent = '#B5372E' } = {}) {
+  const t = canvasTex('poster' + lines.join('|'), Math.round(w * 300), Math.round(h * 300), (c, cw, ch) => {
+    c.fillStyle = bg; c.fillRect(0, 0, cw, ch); c.strokeStyle = fg; c.lineWidth = 8; c.strokeRect(16, 16, cw - 32, ch - 32);
+    c.textAlign = 'center'; c.textBaseline = 'middle'; let y = ch * 0.16;
+    lines.forEach((l, i) => { const big = i === 0 || l.startsWith('!'); const txt = l.replace(/^!/, ''); let fs = big ? ch * 0.12 : ch * 0.065; c.font = `${big ? 900 : 800} ${fs}px Inter`; while (c.measureText(txt).width > cw * 0.84) { fs -= 2; c.font = `${big ? 900 : 800} ${fs}px Inter`; } c.fillStyle = l.startsWith('!') ? accent : fg; c.fillText(txt, cw / 2, y); y += fs * 1.35; if (i === 0) { c.fillStyle = accent; c.fillRect(cw * 0.2, y - fs * 0.3, cw * 0.6, 8); y += 24; } });
+  });
+  const m = new THREE.Mesh(new THREE.PlaneGeometry(w, h), mat({ map: t, side: THREE.DoubleSide })); m.castShadow = true; const g = new THREE.Group(); g.add(m); g.mesh = m; return g;
+}
+/** a crate of peeping baby chicks (2D cut-outs that bob). g.update(t) */
+export function chickCrate(n = 6) {
+  const g = new THREE.Group();
+  const holes = canvasTex('crate', 256, 128, (c) => { c.fillStyle = '#C8935A'; c.fillRect(0, 0, 256, 128); c.fillStyle = '#5A3E2A'; for (let i = 0; i < 5; i++) { c.beginPath(); c.arc(30 + i * 49, 64, 12, 0, 7); c.fill(); } c.fillStyle = '#D8343F'; c.font = '900 22px Inter'; c.textAlign = 'center'; c.fillText('LIVE CHICKS', 128, 112); c.fillText('THIS SIDE UP', 128, 26); });
+  const wood = mat({ color: '#C8935A' }), fm = mat({ map: holes });
+  box(1.0, 0.36, 0.6, [wood, wood, wood, wood, fm, wood], 0, 0.18, 0, g);
+  const ct = canvasTex('chick', 256, 256, (c) => { c.lineWidth = 9; c.strokeStyle = INK; c.fillStyle = '#F6D54A'; c.beginPath(); c.ellipse(128, 160, 88, 80, 0, 0, 7); c.fill(); c.stroke(); c.beginPath(); c.arc(128, 92, 62, 0, 7); c.fill(); c.stroke(); c.fillStyle = '#F6D54A'; c.beginPath(); c.moveTo(118, 32); c.quadraticCurveTo(128, 6, 140, 34); c.fill(); c.stroke(); c.fillStyle = INK; [-1, 1].forEach((s) => { c.beginPath(); c.ellipse(128 + s * 24, 86, 8, 11, 0, 0, 7); c.fill(); }); c.fillStyle = '#F2913A'; c.beginPath(); c.moveTo(114, 104); c.lineTo(142, 104); c.lineTo(128, 124); c.closePath(); c.fill(); c.lineWidth = 5; c.stroke(); c.fillStyle = 'rgba(240,120,130,0.4)'; [-1, 1].forEach((s) => { c.beginPath(); c.ellipse(128 + s * 44, 112, 12, 7, 0, 0, 7); c.fill(); }); });
+  const chicks = [];
+  for (let i = 0; i < n; i++) { const s = new THREE.Mesh(new THREE.PlaneGeometry(0.22, 0.22), new THREE.MeshBasicMaterial({ map: ct, transparent: true, alphaTest: 0.1 })); s.position.set(-0.38 + i * 0.76 / (n - 1), 0.4, -0.05 + (i % 2) * 0.1); g.add(s); chicks.push(s); }
+  g.update = (t) => chicks.forEach((c, i) => { c.position.y = 0.38 + Math.max(0, Math.sin(t * 7 + i * 1.7)) * 0.07; c.rotation.z = Math.sin(t * 5 + i) * 0.15; });
+  g.chicks = chicks; return g;
+}

package/plugins/aiinsight-shorts/styles/tall-tale/example/src/core/timing.js

@@ -0,0 +1,23 @@
+// Timing: everything on screen is placed on the narration's clock.
+//   data/lines.json  { duration, lines: [{ i, text, start, end }] }   (voice.py, or estimate.py for captions-only)
+//   data/words.json  [{ w, line, s, e }]                                (words.py, or estimate.py)
+// L(i) = line i start · Le(i) = line i end · Wd(word, line) = start of the first word in that line matching
+// the prefix (case/punctuation ignored; throws if it isn't there, so a rewritten script can't silently drift).
+export const T = { dur: 0, lines: [], words: [] };
+const norm = (w) => String(w).toLowerCase().replace(/[^a-z0-9'\u0D00-\u0D7F]+/g, '');
+
+export async function loadTiming() {
+  const get = async (f) => { const r = await fetch(f, { cache: 'no-store' }); if (!r.ok) throw new Error(`missing ${f}: run voice.py + words.py (or estimate.py)`); return r.json(); };
+  const lines = await get('data/lines.json'), words = await get('data/words.json');
+  T.lines = lines.lines; T.words = words; T.dur = lines.duration;
+  return T;
+}
+export const L = (i) => { const l = T.lines[i]; if (!l) throw new Error(`no line ${i}`); return l.start; };
+export const Le = (i) => { const l = T.lines[i]; if (!l) throw new Error(`no line ${i}`); return l.end; };
+export function Wd(word, line, which = 's') {
+  const n = norm(word);
+  const hit = T.words.find((w) => (line == null || w.line === line) && norm(w.w).startsWith(n));
+  if (!hit) throw new Error(`word "${word}" not found${line != null ? ` in line ${line}` : ''}`);
+  return hit[which];
+}
+export const lineWords = (i) => T.words.filter((w) => w.line === i);

package/plugins/aiinsight-shorts/styles/tall-tale/example/src/core/toon.js

@@ -0,0 +1,352 @@
+// Toon people: flat 2D cartoon characters (thick ink outlines, big round heads, bean bodies, stick limbs) that live
+// inside the 3D world as camera-facing cut-outs with real shadows.
+//
+//   drawToon(g, look, st)   draws one character into any 2D context, in a 512 x 1024 box (feet at y 1000)
+//   new Toon(look, { height })  a 3D cut-out:  .set(st) every frame, .face(camera), .group (position it), .tint(col)
+//
+// look = { body: '#E8734A', shade?, pattern: 'plain'|'check'|'stripes'|'overalls'|'vest'|'apron', patCol,
+//          hat: 'none'|'cap'|'bowler'|'boater'|'beanie'|'visor'|'tophat'|'bun'|'flower', hatCol, band,
+//          neck: 'none'|'bowtie'|'tie'|'scarf'|'collar', neckCol, dots,
+//          extra: ['mustache','glasses','freckles','blush','pencil','monocle'], head: '#F7F7FA' }
+// st   = { mood: 'neutral'|'smug'|'happy'|'laugh'|'shock'|'worried'|'angry'|'sad'|'sly'|'proud'|'tired'|'dizzy',
+//          look: [dx, dy] (-1..1 pupils), blink 0..1, talk 0..1 (mouth open), sweat, tears,
+//          armL / armR: [shoulder°, elbow°]  (0 = hanging down, + = outward/up, elbow + = bends up),
+//          legs: 'stand'|'walk'|'run'|'sit'|'jump', phase (walk cycle, radians), lean°, bob (px), squash,
+//          holdL / holdR: (g, x, y, angle) => draws a prop in that hand,  flip (mirror left/right) }
+import * as THREE from 'three';
+
+export const INK = '#1F1C33';
+const LW = 9;
+const R2D = Math.PI / 180;
+
+export function shadeOf(hex, k = 0.78) {
+  const n = parseInt(hex.slice(1), 16), r = (n >> 16) & 255, gg = (n >> 8) & 255, b = n & 255;
+  const f = (v) => Math.max(0, Math.min(255, Math.round(v * k)));
+  return '#' + ((1 << 24) + (f(r) << 16) + (f(gg) << 8) + f(b)).toString(16).slice(1);
+}
+
+// ---------- the drawing ----------
+export function drawToon(g, look = {}, st = {}) {
+  const L = { body: '#E8734A', head: '#F7F7FA', hat: 'none', neck: 'none', pattern: 'plain', extra: [], ...look };
+  const S = { mood: 'neutral', look: [0, 0], blink: 0, talk: 0, armL: [8, 6], armR: [8, 6], legs: 'stand', phase: 0, lean: 0, bob: 0, squash: 0, ...st };
+  g.save();
+  g.lineCap = 'round'; g.lineJoin = 'round';
+  if (S.flip) { g.translate(512, 0); g.scale(-1, 1); }
+  // whole-body lean pivots at the feet
+  g.translate(256, 1000); g.rotate((S.lean || 0) * R2D); g.translate(-256, -1000);
+  const sit = S.legs === 'sit', jump = S.legs === 'jump';
+  const by = (sit ? 210 : 0) + (L.kid ? 190 : 0) + (S.bob || 0) + (jump ? -60 : 0);       // how far the upper body drops (kids: short legs)
+  const sq = 1 + (S.squash || 0);
+  // body box
+  const bx = 256, top = 330 + by, bot = 600 + by * 0.98, bw = 92;     // half width at the hips
+  const hipY = bot - 26;
+
+  // ---- legs (behind the body) ----
+  g.strokeStyle = INK; g.lineWidth = 15;
+  const leg = (sx, side) => {
+    let kx, ky, fx, fy;
+    if (sit) {                                           // thighs come toward us (short), shins hang down
+      const kx2 = sx + side * 30, ky2 = hipY + 44; fx = sx + side * 34; fy = 1000;
+      g.beginPath(); g.moveTo(sx, hipY); g.lineTo(kx2, ky2); g.lineTo(fx, fy); g.stroke();
+      g.fillStyle = INK; g.beginPath(); g.ellipse(fx + side * 10, fy - 4, 20, 10, 0, 0, Math.PI * 2); g.fill(); return;
+    }
+    else if (S.legs === 'walk' || S.legs === 'run') {
+      const amp = S.legs === 'run' ? 1.0 : 0.55, a = Math.sin(S.phase + (side > 0 ? Math.PI : 0)) * amp;
+      const lift = Math.max(0, -Math.cos(S.phase + (side > 0 ? Math.PI : 0))) * (S.legs === 'run' ? 70 : 34);
+      kx = sx + a * 22 + side * 6; ky = hipY + 200 - lift * 0.6; fx = sx + a * 34 + side * 8; fy = 1000 - lift;
+    } else if (jump) { kx = sx + side * 40; ky = hipY + 170; fx = sx + side * 18; fy = 940; }
+    else { kx = sx + side * 4; ky = hipY + 210; fx = sx + side * 10; fy = 1000; }
+    g.beginPath(); g.moveTo(sx, hipY); g.quadraticCurveTo(kx, ky, fx, fy); g.stroke();
+    g.fillStyle = INK; g.beginPath(); g.ellipse(fx + side * 10, fy - 4, 20, 10, 0, 0, Math.PI * 2); g.fill();
+  };
+  leg(bx - 42, -1); leg(bx + 42, 1);
+
+  // ---- body (a bean) ----
+  const body = new Path2D();
+  body.moveTo(bx - 58, top + 10);
+  body.bezierCurveTo(bx - 80, top + 40, bx - bw - 6, bot - 120, bx - bw, bot - 50);
+  body.bezierCurveTo(bx - bw + 4, bot + 6, bx + bw - 4, bot + 6, bx + bw, bot - 50);
+  body.bezierCurveTo(bx + bw + 6, bot - 120, bx + 80, top + 40, bx + 58, top + 10);
+  body.bezierCurveTo(bx + 30, top - 8, bx - 30, top - 8, bx - 58, top + 10);
+  body.closePath();
+  g.fillStyle = L.body; g.fill(body);
+  g.save(); g.clip(body);
+  drawPattern(g, L, bx, top, bot, bw);
+  g.fillStyle = L.shade || shadeOf(L.body, 0.8); g.globalAlpha = 0.85;
+  g.beginPath(); g.ellipse(bx + bw + 40, (top + bot) / 2 + 20, 70, 260, 0, 0, Math.PI * 2); g.fill();
+  g.globalAlpha = 0.25; g.fillStyle = '#FFFFFF'; g.beginPath(); g.ellipse(bx - 50, top + 90, 16, 60, 0.2, 0, Math.PI * 2); g.fill();
+  g.globalAlpha = 1; g.restore();
+  g.strokeStyle = INK; g.lineWidth = LW; g.stroke(body);
+  drawNeckwear(g, L, bx, top);
+
+  // ---- arms (in front of the body) ----
+  const hands = {};
+  const arm = (side, [a, e], hold) => {
+    const sx = bx + side * 66, sy = top + 46;
+    const u = 118, lo = 112;
+    const a1 = a * R2D, a2 = (a + e) * R2D;
+    const ex = sx + side * Math.sin(a1) * u, ey = sy + Math.cos(a1) * u;
+    const hx = ex + side * Math.sin(a2) * lo, hy = ey + Math.cos(a2) * lo;
+    g.strokeStyle = INK; g.lineWidth = 14;
+    g.beginPath(); g.moveTo(sx, sy); g.quadraticCurveTo(ex, ey, hx, hy); g.stroke();
+    if (hold) { g.save(); hold(g, hx, hy, side * (a + e) * R2D, side); g.restore(); }
+    g.fillStyle = INK; g.beginPath(); g.ellipse(hx, hy, 15, 17, 0, 0, Math.PI * 2); g.fill();
+    hands[side < 0 ? 'L' : 'R'] = [hx, hy];
+  };
+  arm(-1, S.armL, S.holdL); arm(1, S.armR, S.holdR);
+
+  // ---- head ----
+  const hx = 256, hy = 178 + by * 0.99, r = 138;
+  g.save(); g.translate(hx, hy); g.scale(1 + (S.squash || 0) * -0.3, sq); g.translate(-hx, -hy);
+  if (L.hat === 'bun') { g.fillStyle = L.hatCol || '#6B4A3A'; g.beginPath(); g.arc(hx + 10, hy - r - 8, 46, 0, Math.PI * 2); g.fill(); g.strokeStyle = INK; g.lineWidth = LW; g.stroke(); }
+  const head = new Path2D(); head.ellipse(hx, hy, r, r * 0.97, 0, 0, Math.PI * 2);
+  g.fillStyle = L.head; g.fill(head);
+  g.save(); g.clip(head);
+  g.fillStyle = shadeOf(L.head, 0.9); g.beginPath(); g.arc(hx + 52, hy + 44, r, 0, Math.PI * 2); g.rect(hx - 400, hy - 400, 800, 800); g.fill('evenodd');
+  g.restore();
+  g.strokeStyle = INK; g.lineWidth = LW + 1; g.stroke(head);
+  drawFace(g, L, S, hx, hy);
+  drawHat(g, L, hx, hy, r);
+  g.restore();
+  g.restore();
+  return hands;
+}
+
+function drawPattern(g, L, bx, top, bot, bw) {
+  const pc = L.patCol || shadeOf(L.body, 0.7);
+  if (L.pattern === 'check') {
+    g.strokeStyle = pc; g.globalAlpha = 0.55; g.lineWidth = 6;
+    for (let x = bx - 120; x < bx + 120; x += 34) { g.beginPath(); g.moveTo(x, top - 20); g.lineTo(x, bot + 20); g.stroke(); }
+    for (let y = top; y < bot + 20; y += 34) { g.beginPath(); g.moveTo(bx - 130, y); g.lineTo(bx + 130, y); g.stroke(); }
+    g.lineWidth = 2; g.globalAlpha = 0.5; g.strokeStyle = L.patCol2 || '#B5372E';
+    for (let x = bx - 103; x < bx + 120; x += 68) { g.beginPath(); g.moveTo(x, top - 20); g.lineTo(x, bot + 20); g.stroke(); }
+    g.globalAlpha = 1;
+  } else if (L.pattern === 'stripes') {
+    g.fillStyle = pc; for (let x = bx - 130; x < bx + 130; x += 36) g.fillRect(x, top - 20, 14, bot - top + 40);
+  } else if (L.pattern === 'overalls') {
+    g.fillStyle = L.patCol || '#3E5FA8';
+    g.beginPath(); g.roundRect(bx - 62, top + 110, 124, 110, 14); g.fill(); g.fillRect(bx - 130, top + 190, 260, 200);
+    g.strokeStyle = shadeOf(g.fillStyle, 0.75); g.lineWidth = 4; g.setLineDash([8, 7]); g.strokeRect(bx - 48, top + 124, 96, 80); g.setLineDash([]);
+    g.fillStyle = L.patCol || '#3E5FA8'; g.fillRect(bx - 58, top, 16, 120); g.fillRect(bx + 42, top, 16, 120);
+    g.fillStyle = '#F1C24B'; [[-50, 118], [50, 118]].forEach(([dx, dy]) => { g.beginPath(); g.arc(bx + dx, top + dy, 8, 0, 7); g.fill(); });
+  } else if (L.pattern === 'vest') {
+    g.fillStyle = L.patCol || '#3B3346';
+    g.beginPath(); g.moveTo(bx - 140, top - 10); g.lineTo(bx - 8, top + 120); g.lineTo(bx - 8, bot + 20); g.lineTo(bx - 140, bot + 20); g.fill();
+    g.beginPath(); g.moveTo(bx + 140, top - 10); g.lineTo(bx + 8, top + 120); g.lineTo(bx + 8, bot + 20); g.lineTo(bx + 140, bot + 20); g.fill();
+    g.fillStyle = '#E9C46A'; [150, 195, 240].forEach((dy) => { g.beginPath(); g.arc(bx + 26, top + dy, 6, 0, 7); g.fill(); });
+  } else if (L.pattern === 'stamps' || L.stamps) {
+    const n = L.stamps ?? 6; const spots = [[-50, 70, -0.2], [30, 60, 0.15], [-10, 140, 0.05], [50, 150, -0.12], [-60, 180, 0.18], [10, 215, -0.1], [-30, 100, 0.3], [60, 105, 0.08], [20, 175, 0.25], [-45, 240, -0.05]];
+    spots.slice(0, n).forEach(([dx, dy, r], i) => { g.save(); g.translate(bx + dx, top + dy); g.rotate(r); const cols = ['#D8343F', '#3C6FB6', '#2E8A5A', '#E2B33C', '#8C6FC9']; g.fillStyle = '#FFFDF4'; g.strokeStyle = INK; g.lineWidth = 3;
+      g.beginPath(); g.rect(-22, -27, 44, 54); g.fill(); g.stroke(); g.fillStyle = cols[i % 5]; g.fillRect(-15, -20, 30, 32); g.fillStyle = '#FFFDF4'; g.font = '900 13px Inter'; g.textAlign = 'center'; g.fillText(i % 2 ? '5¢' : '2¢', 0, 22);
+      g.beginPath(); g.arc(0, -6, 8, 0, 7); g.fill(); g.restore(); });
+  } else if (L.pattern === 'apron') {
+    g.fillStyle = L.patCol || '#F4EFE4'; g.beginPath(); g.roundRect(bx - 70, top + 90, 140, bot - top, 18); g.fill();
+    g.strokeStyle = shadeOf(L.patCol || '#F4EFE4', 0.8); g.lineWidth = 4; g.beginPath(); g.roundRect(bx - 40, top + 190, 80, 60, 8); g.stroke();
+  }
+}
+
+function drawNeckwear(g, L, bx, top) {
+  const c = L.neckCol || '#D8343F';
+  g.strokeStyle = INK; g.lineWidth = 6;
+  if (L.neck === 'bowtie') {
+    const y = top + 24, bt = new Path2D();
+    bt.moveTo(bx, y); bt.bezierCurveTo(bx - 30, y - 30, bx - 64, y - 26, bx - 62, y); bt.bezierCurveTo(bx - 64, y + 26, bx - 30, y + 30, bx, y);
+    bt.bezierCurveTo(bx + 30, y - 30, bx + 64, y - 26, bx + 62, y); bt.bezierCurveTo(bx + 64, y + 26, bx + 30, y + 30, bx, y);
+    g.fillStyle = c; g.fill(bt);
+    if (L.dots) { g.save(); g.clip(bt); g.fillStyle = '#FFFFFF'; for (let i = -3; i <= 3; i++) for (let j = -1; j <= 1; j++) { g.beginPath(); g.arc(bx + i * 18 + (j & 1) * 9, y + j * 15, 4.5, 0, 7); g.fill(); } g.restore(); }
+    g.stroke(bt); g.fillStyle = shadeOf(c, 0.75); g.beginPath(); g.roundRect(bx - 13, y - 13, 26, 26, 6); g.fill(); g.stroke();
+  } else if (L.neck === 'tie') {
+    g.fillStyle = c; g.beginPath(); g.moveTo(bx - 14, top + 10); g.lineTo(bx + 14, top + 10); g.lineTo(bx + 20, top + 140); g.lineTo(bx, top + 170); g.lineTo(bx - 20, top + 140); g.closePath(); g.fill(); g.stroke();
+  } else if (L.neck === 'scarf') {
+    g.fillStyle = c; g.beginPath(); g.moveTo(bx + 20, top + 20); g.lineTo(bx + 58, top + 130); g.lineTo(bx + 24, top + 138); g.lineTo(bx + 6, top + 26); g.closePath(); g.fill(); g.stroke();
+    g.beginPath(); g.moveTo(bx - 70, top + 4); g.quadraticCurveTo(bx, top + 44, bx + 70, top + 4); g.lineTo(bx + 66, top + 34); g.quadraticCurveTo(bx, top + 76, bx - 66, top + 34); g.closePath(); g.fill(); g.stroke();
+    g.strokeStyle = shadeOf(c, 0.75); g.lineWidth = 4; g.beginPath(); g.moveTo(bx - 50, top + 26); g.quadraticCurveTo(bx, top + 56, bx + 50, top + 26); g.stroke();
+  } else if (L.neck === 'collar') {
+    g.fillStyle = '#FFFFFF';
+    [-1, 1].forEach((s) => { g.beginPath(); g.moveTo(bx, top + 18); g.lineTo(bx + s * 56, top + 2); g.lineTo(bx + s * 40, top + 46); g.closePath(); g.fill(); g.stroke(); });
+  }
+}
+
+function eye(g, x, y, S, side, L) {
+  const [lx, ly] = S.look; const m = S.mood; const bl = S.blink || 0;
+  g.fillStyle = INK; g.strokeStyle = INK;
+  if (m === 'happy' || m === 'laugh' || (m === 'proud' && side > 0 && false)) {
+    g.lineWidth = 10; g.beginPath(); g.arc(x, y + 10, 20, Math.PI * 1.15, Math.PI * 1.85); g.stroke(); return;
+  }
+  if (m === 'dizzy') { g.lineWidth = 6; g.beginPath(); for (let a = 0; a < 12; a += 0.3) { const rr = a * 1.6; g.lineTo(x + Math.cos(a * side) * rr, y + Math.sin(a * side) * rr); } g.stroke(); return; }
+  if (m === 'angry' && false) return;
+  if (m === 'shock') {
+    g.fillStyle = '#FFFFFF'; g.lineWidth = 6; g.beginPath(); g.ellipse(x, y, 26, 30, 0, 0, 7); g.fill(); g.stroke();
+    g.fillStyle = INK; g.beginPath(); g.arc(x + lx * 8, y + ly * 8, 7, 0, 7); g.fill(); return;
+  }
+  if (bl > 0.6) { g.lineWidth = 8; g.beginPath(); g.moveTo(x - 14, y + 4); g.quadraticCurveTo(x, y + 10, x + 14, y + 4); g.stroke(); return; }
+  // pupil
+  const px = x + lx * 9, py = y + ly * 8;
+  g.beginPath(); g.ellipse(px, py, 13, 17 * (1 - bl * 0.6), 0, 0, 7); g.fill();
+  if (m === 'smug' || m === 'tired' || m === 'sly' || m === 'proud') {           // heavy lid over the top half
+    g.fillStyle = L.head; g.fillRect(x - 24, y - 28, 48, 26 + (m === 'tired' ? 6 : 0));
+    g.lineWidth = 7; g.beginPath(); g.moveTo(x - 20, y - 2 + (m === 'tired' ? 6 : 0)); g.lineTo(x + 20, y - 2 + (m === 'tired' ? 6 : 0)); g.stroke();
+  }
+  if (m === 'sad' || m === 'worried') { g.fillStyle = '#FFFFFF'; g.beginPath(); g.arc(px - 3, py - 5, 3.5, 0, 7); g.fill(); }
+}
+
+function drawFace(g, L, S, hx, hy) {
+  const m = S.mood, ex = 46, ey = hy + 4;
+  // eyebrows
+  const brow = { neutral: [4, 0], smug: [-8, 10], happy: [8, 0], laugh: [10, 0], shock: [24, 0], worried: [10, -16], angry: [-10, 22],
+    sad: [8, -18], sly: [-6, 12], proud: [6, 4], tired: [-2, 0], dizzy: [14, 0] }[m] || [4, 0];
+  g.strokeStyle = INK; g.lineWidth = 12;
+  [-1, 1].forEach((s) => {
+    let lift = brow[0], tilt = brow[1] * s;           // tilt > 0: inner end lower (angry)
+    if ((m === 'smug' || m === 'sly') && s > 0) { lift = 16; tilt = -4; }
+    const y = ey - 44 - lift;
+    g.beginPath(); g.moveTo(hx + s * (ex - 26), y + tilt * 0.5); g.quadraticCurveTo(hx + s * ex, y - 7, hx + s * (ex + 26), y - tilt * 0.5);
+    g.stroke();
+  });
+  eye(g, hx - ex, ey, S, -1, L); eye(g, hx + ex, ey, S, 1, L);
+  if (L.extra.includes('glasses')) { g.strokeStyle = INK; g.lineWidth = 5; [-1, 1].forEach((s) => { g.beginPath(); g.arc(hx + s * ex, ey, 30, 0, 7); g.stroke(); }); g.beginPath(); g.moveTo(hx - 16, ey - 4); g.lineTo(hx + 16, ey - 4); g.stroke(); }
+  if (L.extra.includes('monocle')) { g.strokeStyle = '#C9A13B'; g.lineWidth = 5; g.beginPath(); g.arc(hx + ex, ey, 30, 0, 7); g.stroke(); g.beginPath(); g.moveTo(hx + ex + 22, ey + 22); g.quadraticCurveTo(hx + ex + 40, ey + 90, hx + ex + 10, ey + 140); g.stroke(); }
+  if (L.extra.includes('blush') || m === 'laugh' || m === 'proud') { g.fillStyle = 'rgba(240,120,130,0.35)'; [-1, 1].forEach((s) => { g.beginPath(); g.ellipse(hx + s * 78, ey + 40, 22, 12, 0, 0, 7); g.fill(); }); }
+  if (L.extra.includes('freckles')) { g.fillStyle = '#C98A64'; [-1, 1].forEach((s) => [[0, 0], [12, 8], [-10, 10]].forEach(([dx, dy]) => { g.beginPath(); g.arc(hx + s * (74 + dx), ey + 36 + dy, 3.5, 0, 7); g.fill(); })); }
+  // mouth
+  const my = ey + 62, t = S.talk || 0;
+  g.strokeStyle = INK; g.fillStyle = INK; g.lineWidth = 8;
+  const openMouth = (w, h, tongue = true) => {
+    g.beginPath(); g.ellipse(hx, my + h * 0.3, w, Math.max(4, h), 0, 0, 7); g.fillStyle = '#3A1A2A'; g.fill(); g.stroke();
+    if (tongue && h > 12) { g.save(); g.clip(); g.fillStyle = '#E2697A'; g.beginPath(); g.ellipse(hx, my + h * 1.1, w * 0.7, h * 0.6, 0, 0, 7); g.fill(); g.restore(); }
+  };
+  if (m === 'shock') openMouth(16, 20 + t * 6);
+  else if (m === 'laugh') { g.beginPath(); g.moveTo(hx - 40, my - 6); g.quadraticCurveTo(hx, my - 2, hx + 40, my - 6); g.quadraticCurveTo(hx + 34, my + 52, hx, my + 52); g.quadraticCurveTo(hx - 34, my + 52, hx - 40, my - 6); g.closePath(); g.fillStyle = '#3A1A2A'; g.fill(); g.save(); g.clip(); g.fillStyle = '#E2697A'; g.beginPath(); g.ellipse(hx, my + 50, 24, 18, 0, 0, 7); g.fill(); g.fillStyle = '#FFFFFF'; g.fillRect(hx - 40, my - 10, 80, 12); g.restore(); g.stroke(); }
+  else if (t > 0.05) openMouth(14 + t * 10, 6 + t * 18);
+  else if (m === 'happy' || m === 'proud') { g.beginPath(); g.moveTo(hx - 28, my); g.quadraticCurveTo(hx, my + 26, hx + 28, my); g.stroke(); }
+  else if (m === 'smug' || m === 'sly') { g.beginPath(); g.moveTo(hx - 22, my + 6); g.quadraticCurveTo(hx + 4, my + 16, hx + 24, my - 4); g.stroke(); }
+  else if (m === 'worried') { g.beginPath(); g.moveTo(hx - 26, my + 8); g.bezierCurveTo(hx - 12, my - 4, hx + 8, my + 14, hx + 26, my + 2); g.stroke(); }
+  else if (m === 'angry') { g.beginPath(); g.moveTo(hx - 30, my + 12); g.quadraticCurveTo(hx, my - 8, hx + 30, my + 12); g.stroke(); g.lineWidth = 5; g.fillStyle = '#FFFFFF'; g.beginPath(); g.roundRect(hx - 24, my - 2, 48, 14, 6); g.fill(); g.stroke(); }
+  else if (m === 'sad') { g.beginPath(); g.moveTo(hx - 24, my + 12); g.quadraticCurveTo(hx, my - 4, hx + 24, my + 12); g.stroke(); }
+  else if (m === 'tired' || m === 'dizzy') { g.beginPath(); g.moveTo(hx - 18, my + 6); g.lineTo(hx + 18, my + 6); g.stroke(); }
+  else { g.beginPath(); g.moveTo(hx - 20, my + 2); g.quadraticCurveTo(hx, my + 14, hx + 20, my + 2); g.stroke(); }
+  if (L.extra.includes('mustache')) {
+    g.fillStyle = L.mustacheCol || '#3A2A22'; g.strokeStyle = INK; g.lineWidth = 4;
+    g.beginPath(); g.moveTo(hx, my - 18); g.bezierCurveTo(hx - 20, my - 32, hx - 60, my - 22, hx - 64, my - 2); g.bezierCurveTo(hx - 44, my - 8, hx - 20, my - 4, hx, my - 10);
+    g.bezierCurveTo(hx + 20, my - 4, hx + 44, my - 8, hx + 64, my - 2); g.bezierCurveTo(hx + 60, my - 22, hx + 20, my - 32, hx, my - 18); g.fill(); g.stroke();
+  }
+  if (L.extra.includes('pencil')) { g.save(); g.translate(hx + 132, hy - 50); g.rotate(-0.5); g.fillStyle = '#F2C230'; g.fillRect(-8, -60, 16, 120); g.fillStyle = '#E58A9A'; g.fillRect(-8, -70, 16, 14); g.strokeStyle = INK; g.lineWidth = 4; g.strokeRect(-8, -70, 16, 130); g.restore(); }
+  if (S.sweat || m === 'worried') { const k = S.sweat ?? 1; g.globalAlpha = Math.min(1, k); g.fillStyle = '#8FD3F4'; g.strokeStyle = INK; g.lineWidth = 4; g.beginPath(); const sx = hx + 104, sy = hy - 70; g.moveTo(sx, sy - 26); g.quadraticCurveTo(sx + 18, sy, sx, sy + 12); g.quadraticCurveTo(sx - 18, sy, sx, sy - 26); g.fill(); g.stroke(); g.globalAlpha = 1; }
+  if (S.tears || m === 'sad') { g.fillStyle = '#8FD3F4'; [-1, 1].forEach((s) => { g.beginPath(); g.ellipse(hx + s * (ex + 6), ey + 40, 7, 14, 0, 0, 7); g.fill(); }); }
+}
+
+function drawHat(g, L, hx, hy, r) {
+  const c = L.hatCol || '#7A5236', top = hy - r * 0.97;
+  g.strokeStyle = INK; g.lineWidth = LW; g.fillStyle = c;
+  const band = (y, w, col) => { g.fillStyle = col; g.fillRect(hx - w, y - 12, w * 2, 24); g.strokeRect(hx - w, y - 12, w * 2, 24); };
+  if (L.hat === 'cap') {                                  // newsboy cap
+    g.beginPath(); g.ellipse(hx + 6, top + 34, r * 0.98, 62, -0.05, Math.PI, 0); g.closePath(); g.fill(); g.stroke();
+    g.fillStyle = shadeOf(c, 0.75); g.beginPath(); g.ellipse(hx - 24, top + 40, r * 0.78, 22, 0.05, 0, Math.PI); g.fill(); g.stroke();
+    g.fillStyle = shadeOf(c, 1.15); g.beginPath(); g.arc(hx + 6, top - 26, 12, 0, 7); g.fill(); g.stroke();
+  } else if (L.hat === 'bowler') {
+    g.beginPath(); g.ellipse(hx, top + 26, r * 1.02, 22, 0, 0, 7); g.fill(); g.stroke();
+    g.beginPath(); g.ellipse(hx, top + 14, r * 0.66, 80, 0, Math.PI, 0); g.closePath(); g.fill(); g.stroke();
+    band(top + 4, r * 0.64, L.band || shadeOf(c, 0.6));
+  } else if (L.hat === 'boater') {
+    g.fillStyle = c; g.beginPath(); g.ellipse(hx, top + 30, r * 1.3, 26, 0, 0, 7); g.fill(); g.stroke();
+    g.beginPath(); g.roundRect(hx - r * 0.66, top - 46, r * 1.32, 76, [16, 16, 4, 4]); g.fill(); g.stroke();
+    band(top + 8, r * 0.66, L.band || '#3C6FB6');
+    g.strokeStyle = shadeOf(c, 0.82); g.lineWidth = 3; for (let x = -r * 0.6; x < r * 0.6; x += 16) { g.beginPath(); g.moveTo(hx + x, top - 40); g.lineTo(hx + x + 6, top - 6); g.stroke(); }
+  } else if (L.hat === 'beanie') {
+    g.beginPath(); g.ellipse(hx, top + 50, r * 0.95, 96, 0, Math.PI, 0); g.closePath(); g.fill(); g.stroke();
+    g.fillStyle = shadeOf(c, 0.8); g.beginPath(); g.roundRect(hx - r * 0.98, top + 30, r * 1.96, 40, 18); g.fill(); g.stroke();
+    g.fillStyle = L.band || '#F4EFE4'; g.beginPath(); g.arc(hx, top - 52, 22, 0, 7); g.fill(); g.stroke();
+  } else if (L.hat === 'visor') {
+    g.fillStyle = 'rgba(70,190,120,0.85)'; g.beginPath(); g.moveTo(hx - r * 1.0, top + 70); g.quadraticCurveTo(hx, top + 10, hx + r * 1.0, top + 70); g.lineTo(hx + r * 1.15, top + 98); g.quadraticCurveTo(hx, top + 54, hx - r * 1.15, top + 98); g.closePath(); g.fill(); g.stroke();
+    g.fillStyle = c; g.beginPath(); g.moveTo(hx - r * 0.96, top + 64); g.quadraticCurveTo(hx, top + 4, hx + r * 0.96, top + 64); g.lineTo(hx + r * 0.9, top + 80); g.quadraticCurveTo(hx, top + 24, hx - r * 0.9, top + 80); g.closePath(); g.fill(); g.stroke();
+  } else if (L.hat === 'tophat') {
+    g.beginPath(); g.ellipse(hx, top + 24, r * 1.0, 20, 0, 0, 7); g.fill(); g.stroke();
+    g.beginPath(); g.roundRect(hx - r * 0.6, top - 140, r * 1.2, 164, 8); g.fill(); g.stroke();
+    band(top - 4, r * 0.6, L.band || '#B5372E');
+  } else if (L.hat === 'bow') {
+    const fx = hx + r * 0.5, fy = top + 26, c2 = L.hatCol || '#D8343F'; g.fillStyle = c2; g.lineWidth = 6;
+    [-1, 1].forEach((s2) => { g.beginPath(); g.moveTo(fx, fy); g.bezierCurveTo(fx + s2 * 30, fy - 46, fx + s2 * 66, fy - 30, fx + s2 * 60, fy); g.bezierCurveTo(fx + s2 * 66, fy + 30, fx + s2 * 30, fy + 40, fx, fy); g.fill(); g.stroke(); });
+    g.beginPath(); g.arc(fx, fy, 15, 0, 7); g.fill(); g.stroke();
+    g.fillStyle = L.hairCol || '#6B4A3A'; [-1, 1].forEach((s2) => { g.beginPath(); g.ellipse(hx + s2 * (r + 4), hy + 10, 22, 50, s2 * -0.2, 0, 7); g.fill(); g.stroke(); });
+  } else if (L.hat === 'mailcap') {
+    g.fillStyle = c; g.beginPath(); g.roundRect(hx - r * 0.72, top - 40, r * 1.44, 70, [20, 20, 4, 4]); g.fill(); g.stroke();
+    g.fillStyle = INK; g.beginPath(); g.ellipse(hx - 10, top + 34, r * 0.82, 18, 0.04, 0, Math.PI); g.fill();
+    g.fillStyle = '#E2B33C'; g.beginPath(); g.arc(hx, top - 6, 13, 0, 7); g.fill(); g.lineWidth = 4; g.stroke();
+  } else if (L.hat === 'flower') {
+    const fx = hx + r * 0.62, fy = top + 40;
+    for (let i = 0; i < 6; i++) { const a = i / 6 * Math.PI * 2; g.fillStyle = L.hatCol || '#F29BB5'; g.beginPath(); g.arc(fx + Math.cos(a) * 18, fy + Math.sin(a) * 18, 14, 0, 7); g.fill(); g.lineWidth = 4; g.stroke(); }
+    g.fillStyle = '#F6C945'; g.beginPath(); g.arc(fx, fy, 11, 0, 7); g.fill(); g.stroke();
+  }
+}
+
+// ---------- props held in a hand: (g, x, y, angle, side) ----------
+export const PROPS = {
+  parcels: (g, x, y) => { [[0, 0, 150, 90], [10, -88, 120, 80], [-6, -160, 96, 64]].forEach(([dx, dy, w, h], i) => { g.fillStyle = ['#C8935A', '#B9844E', '#D3A26A'][i]; g.strokeStyle = INK; g.lineWidth = 6; g.beginPath(); g.rect(x - w / 2 + dx - 40, y - h + dy, w, h); g.fill(); g.stroke(); g.fillStyle = '#E9D7A5'; g.fillRect(x + dx - 46, y - h + dy, 12, h); g.fillStyle = '#D8343F'; g.fillRect(x + dx + w / 2 - 70, y - h + dy + 10, 18, 22); }); },
+  book: (title = 'RULES', open = 0) => (g, x, y) => { g.save(); g.translate(x, y - 70); g.strokeStyle = INK; g.lineWidth = 6;
+    if (open > 0.5) { g.fillStyle = '#F4EFE4'; g.beginPath(); g.rect(-110, -70, 110, 140); g.rect(0, -70, 110, 140); g.fill(); g.stroke(); g.fillStyle = '#9B958A'; for (let i = 0; i < 6; i++) { g.fillRect(-96, -50 + i * 20, 82, 6); g.fillRect(14, -50 + i * 20, 82, 6); } }
+    else { g.fillStyle = '#8A2E2E'; g.beginPath(); g.roundRect(-80, -100, 160, 200, 8); g.fill(); g.stroke(); g.fillStyle = '#E2B33C'; g.font = '900 30px Inter'; g.textAlign = 'center'; g.fillText(title, 0, -20); g.fillRect(-50, 10, 100, 6); }
+    g.restore(); },
+  ticket: (g, x, y) => { g.save(); g.translate(x + 10, y - 40); g.rotate(-0.2); g.fillStyle = '#F2D37A'; g.strokeStyle = INK; g.lineWidth = 5; g.beginPath(); g.roundRect(-70, -40, 140, 80, 6); g.fill(); g.stroke(); g.fillStyle = INK; g.font = '900 24px Inter'; g.textAlign = 'center'; g.fillText('TICKET', 0, -4); g.font = '900 30px Inter'; g.fillStyle = '#B5372E'; g.fillText('$$$', 0, 30); g.restore(); },
+  purse: (g, x, y) => { g.fillStyle = '#7A5236'; g.strokeStyle = INK; g.lineWidth = 5; g.beginPath(); g.ellipse(x, y - 30, 44, 34, 0, 0, 7); g.fill(); g.stroke(); g.strokeStyle = '#C9A13B'; g.beginPath(); g.moveTo(x - 30, y - 56); g.lineTo(x + 30, y - 56); g.stroke(); g.fillStyle = '#C9C2B5'; g.beginPath(); g.arc(x + 30, y - 6, 4, 0, 7); g.fill(); },
+  letters: (g, x, y) => { for (let i = 0; i < 3; i++) { g.save(); g.translate(x - 10 + i * 10, y - 40 - i * 8); g.rotate(-0.3 + i * 0.2); g.fillStyle = i === 1 ? '#F2E6CF' : '#FFFDF4'; g.strokeStyle = INK; g.lineWidth = 4; g.beginPath(); g.rect(-50, -30, 100, 60); g.fill(); g.stroke(); g.beginPath(); g.moveTo(-50, -30); g.lineTo(0, 6); g.lineTo(50, -30); g.stroke(); g.fillStyle = '#D8343F'; g.fillRect(28, -24, 14, 16); g.restore(); } },
+  rubberStamp: (g, x, y) => { g.strokeStyle = INK; g.lineWidth = 5; g.fillStyle = '#7A5236'; g.beginPath(); g.roundRect(x - 14, y - 90, 28, 60, 8); g.fill(); g.stroke(); g.fillStyle = '#B5372E'; g.beginPath(); g.roundRect(x - 40, y - 34, 80, 28, 4); g.fill(); g.stroke(); g.fillStyle = '#7A5236'; g.beginPath(); g.arc(x, y - 100, 20, 0, 7); g.fill(); g.stroke(); },
+  stamp: (g, x, y) => { g.save(); g.translate(x, y - 40); g.fillStyle = '#FFFDF4'; g.strokeStyle = INK; g.lineWidth = 4; g.beginPath(); g.rect(-24, -30, 48, 60); g.fill(); g.stroke(); g.fillStyle = '#D8343F'; g.fillRect(-16, -22, 32, 36); g.restore(); },
+  cash: (n = 1) => (g, x, y) => { for (let i = 0; i < n; i++) bill(g, x - 30, y - 34 - i * 12, 0.06 * (i % 2 ? -1 : 1)); },
+  bill: (g, x, y) => bill(g, x - 10, y - 50, -0.5),
+  stack: (g, x, y) => { for (let i = 0; i < 5; i++) { g.fillStyle = i % 2 ? '#7FBF7A' : '#8FD08A'; g.strokeStyle = INK; g.lineWidth = 5; g.beginPath(); g.roundRect(x - 60, y - 40 - i * 16, 120, 18, 4); g.fill(); g.stroke(); } g.fillStyle = '#E9D7A5'; g.fillRect(x - 12, y - 120, 24, 82); g.strokeRect(x - 12, y - 120, 24, 82); },
+  paper: (text = 'NEWS') => (g, x, y) => { g.save(); g.translate(x, y - 70); g.rotate(-0.08); g.fillStyle = '#F2EDE0'; g.strokeStyle = INK; g.lineWidth = 5; g.beginPath(); g.rect(-70, -90, 140, 180); g.fill(); g.stroke(); g.fillStyle = INK; g.font = '900 30px Inter'; g.textAlign = 'center'; g.fillText(text, 0, -50); g.fillStyle = '#9B958A'; for (let i = 0; i < 6; i++) g.fillRect(-56, -26 + i * 18, i === 2 ? 60 : 112, 7); g.restore(); },
+  mirror: (g, x, y) => { g.strokeStyle = '#B8862F'; g.lineWidth = 12; g.beginPath(); g.moveTo(x, y); g.lineTo(x, y - 60); g.stroke(); g.fillStyle = '#E6B850'; g.strokeStyle = INK; g.lineWidth = 6; g.beginPath(); g.arc(x, y - 110, 54, 0, 7); g.fill(); g.stroke(); g.fillStyle = '#BFE6F5'; g.beginPath(); g.arc(x, y - 110, 40, 0, 7); g.fill(); g.fillStyle = 'rgba(255,255,255,0.8)'; g.beginPath(); g.ellipse(x - 14, y - 124, 9, 18, 0.6, 0, 7); g.fill(); },
+  cup: (g, x, y) => { g.fillStyle = '#F4EFE4'; g.strokeStyle = INK; g.lineWidth = 6; g.beginPath(); g.roundRect(x - 30, y - 70, 60, 70, [4, 4, 14, 14]); g.fill(); g.stroke(); g.beginPath(); g.arc(x + 34, y - 36, 16, -1.4, 1.4); g.stroke(); g.fillStyle = '#7A4A2A'; g.fillRect(x - 24, y - 64, 48, 10); },
+  key: (g, x, y) => { g.strokeStyle = INK; g.lineWidth = 5; g.fillStyle = '#E6B850'; g.beginPath(); g.arc(x, y - 60, 22, 0, 7); g.fill(); g.stroke(); g.fillRect(x - 5, y - 40, 10, 50); g.strokeRect(x - 5, y - 40, 10, 50); },
+  sign: (text = 'SALE', col = '#F2EDE0') => (g, x, y) => { g.strokeStyle = INK; g.lineWidth = 6; g.fillStyle = '#9A6A43'; g.fillRect(x - 6, y - 150, 12, 160); g.strokeRect(x - 6, y - 150, 12, 160); g.fillStyle = col; g.beginPath(); g.roundRect(x - 100, y - 250, 200, 110, 10); g.fill(); g.stroke(); g.fillStyle = INK; g.font = '900 44px Inter'; g.textAlign = 'center'; g.textBaseline = 'middle'; g.fillText(text, x, y - 194); },
+};
+function bill(g, x, y, rot) {
+  g.save(); g.translate(x, y); g.rotate(rot); g.fillStyle = '#9ED39A'; g.strokeStyle = INK; g.lineWidth = 5;
+  g.beginPath(); g.roundRect(-10, -26, 100, 52, 6); g.fill(); g.stroke();
+  g.strokeStyle = '#4F8F55'; g.lineWidth = 3; g.beginPath(); g.roundRect(-2, -18, 84, 36, 4); g.stroke();
+  g.fillStyle = '#4F8F55'; g.beginPath(); g.arc(40, 0, 11, 0, 7); g.fill(); g.restore();
+}
+
+// ---------- the 3D cut-out ----------
+let shadowTex = null;
+function blobTex() {
+  if (shadowTex) return shadowTex;
+  const c = document.createElement('canvas'); c.width = c.height = 128; const g = c.getContext('2d');
+  const gr = g.createRadialGradient(64, 64, 0, 64, 64, 64); gr.addColorStop(0, 'rgba(30,20,40,0.75)'); gr.addColorStop(0.6, 'rgba(30,20,40,0.25)'); gr.addColorStop(1, 'rgba(30,20,40,0)');
+  g.fillStyle = gr; g.fillRect(0, 0, 128, 128); shadowTex = new THREE.CanvasTexture(c); return shadowTex;
+}
+
+export class Toon {
+  /** height = metres from feet to the top of the head (≈1.75); res = canvas scale (2 = 1024x2048) */
+  constructor(look = {}, { height = 1.75, res = 2, castShadow = true } = {}) {
+    this.look = look; this.res = res;
+    this.canvas = document.createElement('canvas'); this.canvas.width = 512 * res; this.canvas.height = 1024 * res;
+    this.g = this.canvas.getContext('2d');
+    this.tex = new THREE.CanvasTexture(this.canvas); this.tex.colorSpace = THREE.SRGBColorSpace; this.tex.anisotropy = 4;
+    const H = height / 0.96, Wd = H / 2;                       // the head top sits ~4% below the canvas top
+    const geo = new THREE.PlaneGeometry(Wd, H); geo.translate(0, H / 2 - H * (24 / 1024), 0);
+    this.mat = new THREE.MeshBasicMaterial({ map: this.tex, transparent: true, alphaTest: 0.04, side: THREE.DoubleSide, toneMapped: false });
+    this.mesh = new THREE.Mesh(geo, this.mat);
+    this.mesh.castShadow = castShadow;
+    this.mesh.customDepthMaterial = new THREE.MeshDepthMaterial({ depthPacking: THREE.RGBADepthPacking, map: this.tex, alphaTest: 0.5 });
+    this.blob = new THREE.Mesh(new THREE.PlaneGeometry(Wd * 0.9, Wd * 0.34), new THREE.MeshBasicMaterial({ map: blobTex(), transparent: true, depthWrite: false, opacity: 0.55 }));
+    this.blob.rotation.x = -Math.PI / 2; this.blob.position.y = 0.01;
+    this.group = new THREE.Group(); this.pivot = new THREE.Group(); this.pivot.add(this.mesh); this.group.add(this.pivot, this.blob);
+    this.key = ''; this.H = H; this.set({});
+  }
+  /** redraws only when the state changed */
+  set(st = {}) {
+    const key = JSON.stringify(st, (k, v) => (typeof v === 'function' ? (v.name || String(v).length) : typeof v === 'number' ? Math.round(v * 100) / 100 : v));
+    if (key === this.key) return this;
+    this.key = key; this.st = st;
+    const g = this.g; g.setTransform(1, 0, 0, 1, 0, 0); g.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    g.scale(this.res, this.res); this.hands = drawToon(g, this.look, st);
+    this.tex.needsUpdate = true; return this;
+  }
+  /** turn the cut-out to face the camera (around the vertical axis only) */
+  face(cam) { const p = new THREE.Vector3(); this.group.getWorldPosition(p); this.pivot.rotation.y = Math.atan2(cam.position.x - p.x, cam.position.z - p.z) - this.group.rotation.y; return this; }
+  tint(col) { this.mat.color.set(col); return this; }
+  /** change the look (e.g. more stamps) and force a redraw */
+  restyle(patch) { Object.assign(this.look, patch); this.key = ''; return this; }
+  at(x, y, z) { this.group.position.set(x, y, z); return this; }
+}