@amg555/frameforge-mcp 2.7.3 → 2.7.7

package/plugins/faceless-shorts/styles/deep-dive/example/script.json

@@ -0,0 +1,27 @@
+{
+  "title": "What Happens If You Hold Your Breath?",
+  "voice": "am_michael",
+  "speed": 1.0,
+  "lead": 0.35,
+  "outro": 1.0,
+  "gap": 0.26,
+  "music": "tension",
+  "sources": [
+    "Healthline, 'What happens when you hold your breath' (CO2 build-up drives the urge to breathe; involuntary breathing movements; fainting, after which breathing resumes)",
+    "UBC Science Creative Quarterly, 'Waiting to inhale: why it hurts to hold your breath' (CO2 sensing, diaphragm contractions)",
+    "Redwoods Group, 'Breath holding and shallow water blackout' (passing out underwater can be fatal)",
+    "Mammalian diving reflex: breath-holding slows the heart rate (bradycardia), most strongly with the face in cold water"
+  ],
+  "lines": [
+    { "text": "What happens if you hold your breath for as long as you can?", "caps": "What *happens | if you *hold | your *breath?" },
+    { "text": "For the first thirty seconds, nothing much.", "caps": "The first | *30 seconds | nothing *much" },
+    { "text": "Your lungs are full, and your blood is still carrying plenty of oxygen.", "caps": "Lungs are *full | your *blood | still has *oxygen" },
+    { "text": "But carbon dioxide starts building up,", "caps": "Carbon *dioxide | starts *building up" },
+    { "text": "and that, not the lack of oxygen, is what makes you desperate to breathe.", "caps": "That, *not | lack of *oxygen | makes you *desperate | to *breathe" },
+    { "text": "Your diaphragm starts twitching, trying to force a breath,", "caps": "Your *diaphragm | starts *twitching | trying to *force | a *breath" },
+    { "text": "and your heart actually slows down to save oxygen.", "caps": "Your *heart | slows *down | to save *oxygen" },
+    { "text": "Push even further, and your brain simply switches you off.", "caps": "Push even *further | your *brain | switches you *off" },
+    { "text": "You pass out, and your body starts breathing again on its own.", "caps": "You pass *out | your *body | *breathing again | on its *own" },
+    { "text": "Which is why you should never try this underwater.", "caps": "Which is *why | you should *never | try this *underwater", "gap": 0.2 }
+  ]
+}

package/plugins/faceless-shorts/styles/deep-dive/example/sheet.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html><head><meta charset="utf-8"><title>Style sheet</title>
+<style>
+@font-face { font-family: 'Inter'; font-weight: 900; src: url('fonts/Inter-Black.otf'); }
+@font-face { font-family: 'Inter'; font-weight: 800; src: url('fonts/Inter-ExtraBold.otf'); }
+html, body { margin: 0; background: #111; } canvas { display: block; max-width: 100vw; height: auto; } #gl, #gl2 { display: none; }
+</style></head>
+<body><canvas id="cv" width="1920" height="1080"></canvas><canvas id="gl" width="1080" height="1920"></canvas><canvas id="gl2" width="1280" height="860"></canvas>
+<script type="importmap">{"imports":{"three":"./vendor/three.module.js","three/addons/":"./vendor/addons/"}}</script>
+<script type="module" src="src/sheet.js"></script></body></html>

package/plugins/faceless-shorts/styles/deep-dive/example/src/core/board.js

@@ -0,0 +1,62 @@
+// Style-sheet board (1920x1080): the style's look on one page, drawn with the style's OWN kit, so the sheet always
+// matches what renders. Used by sheet.html -> node tools/capture.mjs stylesheet ../style-sheet.png
+import { setCtx } from './lib.js';
+
+export const BW = 1920, BH = 1080;
+let B = null;                                   // the board's 2D context
+const off = document.createElement('canvas'); off.width = 1080; off.height = 1920;
+const offCtx = off.getContext('2d');
+
+export function startBoard(canvas, { title, author = 'MADE BY YOUR NAME · 2026', bg = '#17181C', line = '#4A4D55', head = '#F2F2F2', accent = '#FFD43B', font = 'Inter' }) {
+  B = canvas.getContext('2d'); setCtx(B);
+  B.fillStyle = bg; B.fillRect(0, 0, BW, BH);
+  B.font = `900 44px ${font}`; B.fillStyle = head; B.textBaseline = 'alphabetic'; B.textAlign = 'left'; B.letterSpacing = '3px';
+  B.fillText(title, 24, 52);
+  B.font = `800 22px Inter`; B.textAlign = 'right'; B.fillStyle = '#B9BCC4'; B.letterSpacing = '2px'; B.fillText(author, BW - 24, 48);
+  B.letterSpacing = '0px';
+  board.line = line; board.head = head; board.accent = accent; board.font = font;
+  return B;
+}
+export const board = { line: '#444', head: '#fff', accent: '#ff0', font: 'Inter' };
+
+/** a numbered panel with its heading; returns the inner content box */
+export function panel(x, y, w, h, n, label) {
+  B.strokeStyle = board.line; B.lineWidth = 2; B.strokeRect(x + 0.5, y + 0.5, w, h);
+  B.font = `900 30px ${board.font}`; B.fillStyle = board.head; B.textAlign = 'left'; B.letterSpacing = '6px';
+  B.fillText(`${n}. ${label}`, x + 18, y + 42); B.letterSpacing = '0px';
+  B.strokeStyle = board.line; B.beginPath(); B.moveTo(x + 18, y + 58); B.lineTo(x + w - 18, y + 58); B.stroke();
+  return { x: x + 18, y: y + 72, w: w - 36, h: h - 90 };
+}
+/** render a 1080x1920 frame with drawFn (which uses the kit) and place it at x, y, w (height = w * 16/9) */
+export function frame(x, y, w, drawFn) {
+  offCtx.setTransform(1, 0, 0, 1, 0, 0); offCtx.globalAlpha = 1; offCtx.clearRect(0, 0, 1080, 1920);
+  setCtx(offCtx); offCtx.save(); drawFn(); offCtx.restore(); setCtx(B);
+  const h = w * 16 / 9; B.drawImage(off, x, y, w, h);
+  B.strokeStyle = board.line; B.lineWidth = 2; B.strokeRect(x, y, w, h);
+  return h;
+}
+/** draw a kit component at (cx, cy) scaled by s, with a label under it */
+export function cell(cx, cy, s, drawFn, label, labelY = 90, color = '#3A3640') {
+  B.save(); B.translate(cx, cy); B.scale(s, s); drawFn(); B.restore(); setCtx(B);
+  if (label) small(label, cx, cy + labelY, 'center', 15, color);
+}
+export function small(text, x, y, align = 'left', size = 17, color = '#D7D9DE') {
+  B.font = `800 ${size}px Inter`; B.fillStyle = color; B.textAlign = align; B.letterSpacing = '2px';
+  text.split('\n').forEach((l, i) => B.fillText(l, x, y + i * (size + 5))); B.letterSpacing = '0px';
+}
+export function swatches(box, list) {
+  const n = list.length, gap = 12, sw = Math.min(78, (box.w - gap * (n - 1)) / n), tw = n * sw + (n - 1) * gap, x0 = box.x + (box.w - tw) / 2;
+  list.forEach(([name, hex], i) => {
+    const x = x0 + i * (sw + gap); B.fillStyle = hex; B.beginPath(); B.roundRect(x, box.y + 10, sw, sw * 0.9, 8); B.fill();
+    B.strokeStyle = 'rgba(255,255,255,0.15)'; B.lineWidth = 1; B.stroke();
+    small(name + '\n' + hex.toUpperCase(), x + sw / 2, box.y + sw * 0.9 + 34, 'center', 13);
+  });
+  return box.y + sw * 0.9 + 80;
+}
+export function rules(box, list, y0 = box.y + 20, size = 19, step = 52) {
+  list.forEach((r, i) => {
+    B.beginPath(); B.arc(box.x + 18, y0 + i * step - 6, 17, 0, 7); B.strokeStyle = board.head; B.lineWidth = 2; B.stroke();
+    small(String(i + 1), box.x + 18, y0 + i * step + 1, 'center', 17, board.head);
+    small(r, box.x + 50, y0 + i * step, 'left', size, '#E6E7EA');
+  });
+}

package/plugins/faceless-shorts/styles/deep-dive/example/src/core/captions.js

@@ -0,0 +1,68 @@
+// Captions: 1-3 words, Inter Black, white with a thick ink outline, ONE yellow word, centre lower third.
+// Each script line has "caps": "WHAT IF *YOU | SWALLOW *GUM?"  ("|" = next caption, "*" = the yellow word).
+// Without "caps", the line is chunked automatically (2-3 words, the longest word goes yellow).
+// A chunk appears 0.05 s before its first word and stays until the next chunk (or shortly after the line ends).
+import { ctx, C, clamp, lerp, seg, eob } from './lib.js';
+import { T, lineWords } from './timing.js';
+
+export const CAP = { y: 1480, size: 118, maxW: 940 };
+let caps = [];
+
+function autoChunks(text) {
+  const ws = text.toUpperCase().split(/\s+/).filter(Boolean), out = [];
+  for (let i = 0; i < ws.length;) { const n = ws.length - i === 4 ? 2 : Math.min(3, ws.length - i); out.push(ws.slice(i, i + n)); i += n; }
+  return out.map((c) => { const k = c.reduce((b, w, j) => (w.replace(/[^A-Z]/g, '').length > c[b].replace(/[^A-Z]/g, '').length ? j : b), 0); return c.map((w, j) => (j === k ? '*' + w : w)).join(' '); });
+}
+
+export function buildCaptions(script) {
+  caps = [];
+  script.lines.forEach((ln, i) => {
+    const chunks = (ln.caps ? ln.caps.split('|') : autoChunks(ln.text)).map((s) => s.trim()).filter(Boolean);
+    const ws = lineWords(i); if (!ws.length) return;
+    const counts = chunks.map((c) => c.split(/\s+/).length), N = counts.reduce((a, b) => a + b, 0);
+    const nm = (w) => String(w).toLowerCase().replace(/[^a-z0-9']+/g, '');
+    let acc = 0, from = 0;
+    chunks.forEach((c, j) => {
+      // find the chunk's first word in the spoken line (from where the last chunk started); else place it by word count
+      const first = nm(c.split(/\s+/)[0]);
+      let idx = j === 0 ? 0 : ws.findIndex((w, k) => k > from && first && (nm(w.w) === first || (first.length > 2 && nm(w.w).startsWith(first))));
+      if (idx < 0) idx = Math.max(from + (j ? 1 : 0), Math.min(ws.length - 1, Math.round(acc * ws.length / N)));
+      acc += counts[j]; from = idx;
+      caps.push({ line: i, s: ws[idx].s - 0.05, words: c.split(/\s+/).map((w) => ({ txt: w.replace('*', ''), hi: w.startsWith('*') })) });
+    });
+  });
+  caps.forEach((c, k) => {
+    const next = caps[k + 1], lineEnd = T.lines[c.line].end;
+    c.e = next ? (next.s - lineEnd > 0.7 && next.line !== c.line ? lineEnd + 0.35 : next.s) : T.dur;
+  });
+  return caps;
+}
+export const captionList = () => caps;
+
+export function drawCaption(t) {
+  const c = caps.find((c) => t >= c.s && t < c.e); if (!c) return;
+  const lt = t - c.s, size = CAP.size;
+  ctx.font = `900 ${size}px Inter`; ctx.letterSpacing = '-1px';
+  const sp = size * 0.26;
+  c.words.forEach((w) => (w.w = ctx.measureText(w.txt).width));
+  const width = (ws) => ws.reduce((a, w) => a + w.w, 0) + sp * (ws.length - 1);
+  let lines = [c.words];
+  if (width(c.words) > CAP.maxW && c.words.length > 1) {
+    let best = null;
+    for (let i = 1; i < c.words.length; i++) { const a = c.words.slice(0, i), b = c.words.slice(i), m = Math.max(width(a), width(b)); if (!best || m < best.m) best = { m, l: [a, b] }; }
+    lines = best.l;
+  }
+  const fit = Math.min(1, CAP.maxW / Math.max(...lines.map(width)));
+  const sc = (lt < 0.2 ? lerp(0.65, 1, eob(seg(lt, 0, 0.2))) : 1) * fit;
+  ctx.save(); ctx.translate(540, CAP.y); ctx.scale(sc, sc);
+  ctx.textBaseline = 'middle'; ctx.textAlign = 'left'; ctx.lineJoin = 'round';
+  const lh = size, y0 = -(lines.length - 1) * lh / 2;
+  lines.forEach((ln, li) => {
+    let x = -width(ln) / 2; const y = y0 + li * lh;
+    for (const w of ln) {
+      ctx.lineWidth = 22; ctx.strokeStyle = '#111'; ctx.strokeText(w.txt, x, y + 6); ctx.strokeText(w.txt, x, y);
+      ctx.fillStyle = w.hi ? C.yellow : C.white; ctx.fillText(w.txt, x, y); x += w.w + sp;
+    }
+  });
+  ctx.letterSpacing = '0px'; ctx.restore();
+}

package/plugins/faceless-shorts/styles/deep-dive/example/src/core/engine.js

@@ -0,0 +1,65 @@
+// Renderer + film look: ACES tone curve, soft shadows, environment light, bloom, depth of field, vignette + grain.
+//   const E = makeEngine(canvas)   ·   E.render(scene, camera, { bloom, focus, aperture, maxblur, grade })
+import * as THREE from 'three';
+import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
+import { BokehPass } from 'three/addons/postprocessing/BokehPass.js';
+import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
+import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
+
+export const W = 1080, H = 1920;
+/** render quality from the URL: ?res=0.6 renders 3D at 60% size (upscaled), ?aa=0 turns MSAA off, ?shadow=1024 */
+const Q = new URLSearchParams(typeof location !== 'undefined' ? location.search : '');
+export const RES = +(Q.get('res') || 1), AA = +(Q.get('aa') ?? 4), SHADOW = +(Q.get('shadow') || 2048);
+const GRADE = {
+  uniforms: { tDiffuse: { value: null }, uVig: { value: 0.35 }, uGrain: { value: 0.025 }, uTime: { value: 0 }, uWarm: { value: 0.04 } },
+  vertexShader: 'varying vec2 vUv; void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }',
+  fragmentShader: `uniform sampler2D tDiffuse; uniform float uVig, uGrain, uTime, uWarm; varying vec2 vUv;
+    float h(vec2 p){ return fract(sin(dot(p, vec2(12.9898, 78.233)) + uTime * 7.13) * 43758.5453); }
+    void main(){ vec4 c = texture2D(tDiffuse, vUv); vec2 d = vUv - 0.5; d.x *= 0.5625;
+      c.rgb *= 1.0 - uVig * smoothstep(0.25, 0.75, length(d) * 1.4);
+      c.rgb += (h(vUv * 1000.0) - 0.5) * uGrain; c.r += uWarm * 0.5; c.b -= uWarm * 0.5; gl_FragColor = c; }`,
+};
+
+export function makeEngine(canvas, { w = W, h = H, samples = 4, shadowSize = 2048 } = {}) {
+  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, preserveDrawingBuffer: true });
+  renderer.setSize(w, h, false); renderer.setPixelRatio(1);
+  renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.0;
+  renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.outputColorSpace = THREE.SRGBColorSpace;
+  const pmrem = new THREE.PMREMGenerator(renderer), envMap = pmrem.fromScene(new RoomEnvironment(), 0.04).texture;
+  const rt = new THREE.WebGLRenderTarget(w, h, { type: THREE.HalfFloatType, samples });
+  renderer.userData = { shadowSize };
+  const composer = new EffectComposer(renderer, rt); composer.setSize(w, h);
+  const rp = new RenderPass(new THREE.Scene(), new THREE.PerspectiveCamera()); composer.addPass(rp);
+  const bokeh = new BokehPass(rp.scene, rp.camera, { focus: 3, aperture: 0.002, maxblur: 0.008 }); composer.addPass(bokeh);
+  const bloom = new UnrealBloomPass(new THREE.Vector2(w, h), 0.35, 0.6, 0.85); composer.addPass(bloom);
+  composer.addPass(new OutputPass());
+  const grade = new ShaderPass(GRADE); composer.addPass(grade);
+  return {
+    renderer, envMap, composer,
+    /** look = { bloom, bloomThreshold, focus (m), aperture (0 = all sharp), maxblur, exposure, vignette, grain, warm, t } */
+    render(scene, camera, look = {}) {
+      rp.scene = scene; rp.camera = camera; bokeh.scene = scene; bokeh.camera = camera;
+      bokeh.enabled = (look.aperture ?? 0.0015) > 0;
+      bokeh.uniforms.focus.value = look.focus ?? 3; bokeh.uniforms.aperture.value = look.aperture ?? 0.0015; bokeh.uniforms.maxblur.value = look.maxblur ?? 0.006;
+      bloom.strength = look.bloom ?? 0.3; bloom.threshold = look.bloomThreshold ?? 0.85; bloom.radius = 0.6;
+      renderer.toneMappingExposure = look.exposure ?? 1.0;
+      grade.uniforms.uVig.value = look.vignette ?? 0.35; grade.uniforms.uGrain.value = look.grain ?? 0.02; grade.uniforms.uWarm.value = look.warm ?? 0.03; grade.uniforms.uTime.value = look.t ?? 0;
+      composer.render();
+    },
+  };
+}
+/** the default light rig: warm key with soft shadow, cool fill, rim, sky/ground bounce. Returns { key, rim, group } */
+export function lightRig(scene, { key = '#FFE2C2', keyI = 3.2, keyPos = [2.5, 4, 3], rimCol = '#BFD8FF', rimI = 2.2, sky = '#FFF4E6', ground = '#8C6E55', hemiI = 0.9, shadowBox = 3, target = [0, 1, 0] } = {}) {
+  const g = new THREE.Group(); scene.add(g);
+  const k = new THREE.DirectionalLight(key, keyI); k.position.set(...keyPos); k.target.position.set(...target); k.castShadow = true;
+  k.shadow.mapSize.set(SHADOW, SHADOW); k.shadow.bias = -0.0004; k.shadow.normalBias = 0.02; k.shadow.radius = 6;
+  Object.assign(k.shadow.camera, { left: -shadowBox, right: shadowBox, top: shadowBox, bottom: -shadowBox, near: 0.1, far: 20 }); k.shadow.camera.updateProjectionMatrix();
+  g.add(k, k.target);
+  const r = new THREE.DirectionalLight(rimCol, rimI); r.position.set(-3, 3, -3); g.add(r);
+  g.add(new THREE.HemisphereLight(sky, ground, hemiI));
+  return { key: k, rim: r, group: g };
+}
+export function camera(fov = 30) { return new THREE.PerspectiveCamera(fov, W / H, 0.05, 120); }

package/plugins/faceless-shorts/styles/deep-dive/example/src/core/human.js

@@ -0,0 +1,128 @@
+// A stylized 3D person sculpted from SDFs (smooth, clay-like), split into rigid parts on a simple skeleton so it can
+// be posed every frame. new Human({ skin, shirt, pants, shoes, hair, face: true|false, scale }).
+//   h.group (add to scene; feet at y = 0) · h.pose({ spine, chest, head, shL, elL, shR, elR, hipL, knL, hipR, knR }) degrees
+//   h.setXray(true) (body becomes x-ray glass with bones + organs inside, head stays) · h.setLook(mat) (Night File looks)
+import * as THREE from 'three';
+import { sphere, ellipsoid, capsule, smin, smax, ssub, noise3, mesh, rgb } from './sdf.js';
+
+const D = THREE.MathUtils.degToRad;
+const cache = new Map();
+const mixc = (a, b, t) => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];
+const sstep = (a, b, x) => { const t = Math.max(0, Math.min(1, (x - a) / (b - a))); return t * t * (3 - 2 * t); };                                    // sculpts are reused across characters with the same look
+function sculpt(key, f, bounds, step, color) { const k = key; if (!cache.has(k)) cache.set(k, mesh(f, bounds, step, color)); return cache.get(k); }
+
+export const SKIN_MAT = () => new THREE.MeshPhysicalMaterial({ vertexColors: true, roughness: 0.55, sheen: 0.35, sheenRoughness: 0.7, sheenColor: new THREE.Color('#ffd6c2') });
+
+export class Human {
+  constructor(o = {}) {
+    const c = { skin: '#E3A988', shirt: '#3E7CC9', pants: '#2B3550', shoes: '#F2F2F2', hair: '#3A2618', iris: '#4A3426', ...o };
+    this.o = c; const face = c.face !== false, K = JSON.stringify(c);
+    const S = rgb(c.skin), SH = rgb(c.shirt), PA = rgb(c.pants), SO = rgb(c.shoes);
+    this.mat = SKIN_MAT(); this.parts = [];
+    const add = (parent, geo, pos = [0, 0, 0]) => { const m = new THREE.Mesh(geo, this.mat); m.castShadow = true; m.receiveShadow = true; m.position.set(...pos); parent.add(m); this.parts.push(m); return m; };
+    const G = (parent, pos) => { const g = new THREE.Group(); g.position.set(...pos); parent.add(g); return g; };
+
+    this.group = new THREE.Group(); this.group.scale.setScalar(c.scale || 1);
+    this.hips = G(this.group, [0, 0.93, 0]);
+    // torso (pivot low in the back so the spine bends naturally)
+    this.spine = G(this.hips, [0, 0.04, 0]);
+    add(this.spine, sculpt('torso' + K, (p) => {
+      let d = ellipsoid(p, [0, 0.34, 0], [0.185, 0.165, 0.118]);
+      d = smin(d, ellipsoid(p, [0, 0.13, 0.008], [0.162, 0.17, 0.112]), 0.08);
+      d = smin(d, ellipsoid(p, [0, -0.04, 0], [0.165, 0.11, 0.108]), 0.07);
+      d = smin(d, capsule(p, [-0.165, 0.43, -0.005], [0.165, 0.43, -0.005], 0.062), 0.07);
+      d = smin(d, capsule(p, [0, 0.46, -0.005], [0, 0.6, 0.0], 0.05, 0.047), 0.05);
+      return d;
+    }, [[-0.27, -0.17, -0.16], [0.27, 0.64, 0.17]], 0.0065, (p) => { const collar = ellipsoid(p, [0, 0.555, 0.03], [0.078, 0.085, 0.085]); const top = mixc(SH, S, sstep(0.006, -0.006, collar)); return mixc(PA, top, sstep(0.0, 0.03, p[1])); }));
+    // head
+    this.head = G(this.spine, [0, 0.58, 0]);
+    add(this.head, sculpt('head' + face + c.skin, (p) => {
+      let d = ellipsoid(p, [0, 0.15, -0.005], [0.108, 0.128, 0.118]);
+      if (!face) return smin(d, capsule(p, [0, -0.02, 0], [0, 0.06, 0.01], 0.05), 0.05);
+      d = smin(d, ellipsoid(p, [0, 0.072, 0.03], [0.094, 0.082, 0.092]), 0.05);
+      d = smin(d, ellipsoid(p, [0, 0.018, 0.058], [0.043, 0.033, 0.038]), 0.04);
+      for (const s of [-1, 1]) { d = smin(d, ellipsoid(p, [s * 0.052, 0.075, 0.068], [0.038, 0.032, 0.032]), 0.03); d = smin(d, ellipsoid(p, [s * 0.108, 0.105, -0.005], [0.017, 0.033, 0.024]), 0.012); d = ssub(d, sphere(p, [s * 0.041, 0.124, 0.112], 0.026), 0.018); }
+      d = smin(d, capsule(p, [0, 0.12, 0.104], [0, 0.088, 0.117], 0.009, 0.013), 0.02);
+      d = smin(d, sphere(p, [0, 0.082, 0.113], 0.016), 0.016);
+      d = smin(d, ellipsoid(p, [0, 0.043, 0.104], [0.026, 0.011, 0.012]), 0.012);
+      d = ssub(d, capsule(p, [-0.024, 0.039, 0.116], [0.024, 0.039, 0.116], 0.0035), 0.004);
+      return smin(d, capsule(p, [0, -0.04, -0.005], [0, 0.05, 0.005], 0.048), 0.04);
+    }, [[-0.14, -0.06, -0.14], [0.14, 0.3, 0.16]], 0.0038, () => S));
+    if (face) {
+      const white = new THREE.MeshPhysicalMaterial({ color: '#F7F4EF', roughness: 0.2, clearcoat: 1 });
+      const iris = new THREE.MeshStandardMaterial({ color: c.iris, roughness: 0.3 }), pupil = new THREE.MeshBasicMaterial({ color: '#0B0907' });
+      this.eyes = [];
+      for (const s of [-1, 1]) {
+        const e = new THREE.Group(); e.position.set(s * 0.041, 0.124, 0.091); this.head.add(e); this.eyes.push(e);
+        const ball = new THREE.Mesh(new THREE.SphereGeometry(0.022, 32, 24), white); e.add(ball);
+        const ir = new THREE.Mesh(new THREE.CircleGeometry(0.0108, 32), iris); ir.position.z = 0.0222; e.add(ir);
+        const pu = new THREE.Mesh(new THREE.CircleGeometry(0.0052, 24), pupil); pu.position.z = 0.0224; e.add(pu);
+        const hl = new THREE.Mesh(new THREE.CircleGeometry(0.0022, 12), new THREE.MeshBasicMaterial({ color: '#FFFFFF' })); hl.position.set(0.0035, 0.004, 0.0226); e.add(hl);
+        // eyelids (skin): upper lid covers the top of the eye; this.lids lets shots blink / squint / widen
+        const lidM = new THREE.MeshPhysicalMaterial({ color: c.skin, roughness: 0.55, sheen: 0.35, sheenColor: new THREE.Color('#ffd6c2') });
+        const lid = new THREE.Mesh(new THREE.SphereGeometry(0.0236, 32, 16, 0, Math.PI * 2, 0, Math.PI * 0.36), lidM); lid.position.set(s * 0.041, 0.124, 0.091); lid.rotation.x = 0.12; this.head.add(lid);
+        const low = new THREE.Mesh(new THREE.SphereGeometry(0.0234, 32, 16, 0, Math.PI * 2, Math.PI * 0.78, Math.PI * 0.22), lidM); low.rotation.x = -0.25; low.position.copy(lid.position); this.head.add(low);
+        (this.lids ||= []).push(lid);
+      }
+      const HA = rgb(c.hair);
+      add(this.head, sculpt('hair' + c.hair, (p) => {
+        let d = ellipsoid(p, [0, 0.168, -0.014], [0.118, 0.138, 0.13]);
+        const line = 0.05 + 0.16 * Math.min(1, Math.max(0, (p[2] + 0.04) / 0.14));                       // hairline: low at the back, high at the front
+        d = smax(d, -(p[1] - line), 0.02);
+        d = smin(d, ellipsoid(p, [0.02, 0.262, 0.05], [0.085, 0.045, 0.075]), 0.04);                      // quiff
+        d += 0.006 * noise3(p[0] * 45, p[1] * 25, p[2] * 45);
+        for (const s of [-1, 1]) d = Math.min(d, capsule(p, [s * 0.022, 0.158, 0.119], [s * 0.062, 0.162, 0.108], 0.0065, 0.005)); // brows
+        return d;
+      }, [[-0.15, 0.02, -0.16], [0.15, 0.33, 0.16]], 0.004, () => HA));
+    }
+    // arms
+    this.arm = {};
+    for (const s of [-1, 1]) {
+      const k = s < 0 ? 'L' : 'R', sh = G(this.spine, [s * 0.2, 0.43, -0.005]);
+      add(sh, sculpt('uarm' + K, (p) => smin(capsule(p, [0, 0, 0], [0, -0.27, 0], 0.048, 0.04), capsule(p, [0, 0.0, 0], [0, -0.13, 0], 0.062, 0.056), 0.02),
+        [[-0.08, -0.33, -0.08], [0.08, 0.07, 0.08]], 0.005, (p) => mixc(S, SH, sstep(-0.142, -0.128, p[1]))));
+      const el = G(sh, [0, -0.27, 0]);
+      add(el, sculpt('farm' + s + c.skin, (p) => {
+        let d = capsule(p, [0, 0, 0], [0, -0.23, 0.005], 0.039, 0.031);
+        d = smin(d, ellipsoid(p, [0, -0.29, 0.008], [0.041, 0.055, 0.021]), 0.03);
+        d = smin(d, capsule(p, [0, -0.31, 0.008], [0, -0.365, 0.018], 0.022, 0.017), 0.02);
+        for (const fx of [-0.011, 0.011]) d = ssub(d, capsule(p, [fx, -0.335, 0.035], [fx, -0.4, 0.04], 0.0025), 0.003);
+        d = smin(d, capsule(p, [-s * 0.028, -0.26, 0.018], [-s * 0.04, -0.31, 0.036], 0.012, 0.01), 0.012);
+        return d;
+      }, [[-0.08, -0.41, -0.06], [0.08, 0.06, 0.08]], 0.005, () => S));
+      this.arm[k] = { sh, el };
+    }
+    // legs
+    this.leg = {};
+    for (const s of [-1, 1]) {
+      const k = s < 0 ? 'L' : 'R', hip = G(this.hips, [s * 0.088, -0.03, 0]);
+      add(hip, sculpt('thigh' + c.pants, (p) => capsule(p, [0, 0, 0], [0, -0.42, 0.005], 0.082, 0.06), [[-0.1, -0.5, -0.1], [0.1, 0.1, 0.1]], 0.007, () => PA));
+      const kn = G(hip, [0, -0.42, 0.005]);
+      add(kn, sculpt('shin' + c.pants + c.shoes, (p) => {
+        let d = capsule(p, [0, 0, 0], [0, -0.38, -0.005], 0.058, 0.045);
+        d = smin(d, ellipsoid(p, [0, -0.43, 0.045], [0.056, 0.05, 0.12]), 0.04);
+        return smax(d, -(p[1] + 0.475), 0.01);
+      }, [[-0.09, -0.5, -0.1], [0.09, 0.07, 0.19]], 0.006, (p) => (p[1] > -0.36 ? PA : SO)));
+      this.leg[k] = { hip, kn };
+    }
+    this.pose({});
+  }
+  /** pose in degrees: spine/chest/head [x, y, z]; shL/shR [x (forward +), y, z (out +)]; elL/elR bend; hipL/hipR [x (forward +), y, z]; knL/knR bend */
+  pose(q) {
+    const r3 = (g, a = [0, 0, 0]) => g.rotation.set(D(a[0]), D(a[1]), D(a[2]));
+    r3(this.spine, q.spine); r3(this.head, q.head);
+    r3(this.arm.L.sh, [-(q.shL?.[0] ?? 0), q.shL?.[1] ?? 0, -(q.shL?.[2] ?? 6)]); this.arm.L.el.rotation.set(-D(q.elL ?? 10), 0, 0);
+    r3(this.arm.R.sh, [-(q.shR?.[0] ?? 0), q.shR?.[1] ?? 0, q.shR?.[2] ?? 6]); this.arm.R.el.rotation.set(-D(q.elR ?? 10), 0, 0);
+    r3(this.leg.L.hip, [-(q.hipL?.[0] ?? 0), q.hipL?.[1] ?? 0, -(q.hipL?.[2] ?? 2)]); this.leg.L.kn.rotation.set(D(q.knL ?? 2), 0, 0);
+    r3(this.leg.R.hip, [-(q.hipR?.[0] ?? 0), q.hipR?.[1] ?? 0, q.hipR?.[2] ?? 2]); this.leg.R.kn.rotation.set(D(q.knR ?? 2), 0, 0);
+    if (this.lids) this.lids.forEach((l) => (l.rotation.x = 0.12 + (q.lid ?? 0) * 1.25));   // lid: -0.4 wide open … 0 normal … 1 closed
+    if (q.look && this.eyes) this.eyes.forEach((e) => e.rotation.set(D(q.look[1] || 0), D(q.look[0] || 0), 0));
+    this.group.updateMatrixWorld(true);
+  }
+  /** walking pose at phase ph (radians) */
+  walk(ph, amt = 1) { const s = Math.sin(ph) * amt; this.pose({ hipL: [s * 26, 0, 2], hipR: [-s * 26, 0, 2], knL: Math.max(0, -Math.sin(ph + 0.6)) * 40 * amt + 4, knR: Math.max(0, Math.sin(ph + 0.6)) * 40 * amt + 4, shL: [-s * 20, 0, 6], shR: [s * 20, 0, 6], elL: 18, elR: 18, spine: [3, s * 4, 0] }); this.hips.position.y = 0.93 - Math.abs(Math.cos(ph)) * 0.012 * amt; }
+  /** swap the body (not the head) to another material, e.g. x-ray glass; null restores */
+  setBodyMaterial(m) { this.parts.forEach((p) => { if (p.parent !== this.head) p.material = m || this.mat; p.castShadow = !m; }); }
+  /** every part to one material (Night File silhouettes) */
+  setAllMaterial(m) { this.parts.forEach((p) => (p.material = m)); }
+}

package/plugins/faceless-shorts/styles/deep-dive/example/src/core/lib.js

@@ -0,0 +1,44 @@
+// Inside Out engine: canvas, palette, math and drawing primitives.
+// Every drawing function in the kit uses the shared `ctx` exported here (set once by main.js).
+export const W = 1080, H = 1920, FPS = 30;
+export let ctx = null;
+export function setCtx(c) { ctx = c; }
+
+// The style sheet palette. Only these (plus the derived shades) appear on screen.
+export const C = {
+  skin: '#E8B89A', pink: '#E57A8A', red: '#D62839', cyan: '#4FD1E8', yellow: '#FFD43B', bg: '#F4F1EA',
+  // derived shades (darker / lighter tones of the palette, used for flat shading)
+  pinkLight: '#F29AA7', pinkDark: '#C9566E', skinShade: '#D49C7E', navy: '#0E1A2B', xnavy: '#0B2238',
+  hair: '#3B2A20', hairHi: '#5A4030', shirt: '#3A7BD5', shirtShade: '#2F67BE', pants: '#1F2A44', pantsShade: '#18213A',
+  ink: '#1A1A1E', mouth: '#6B2A2A', gum: '#F7F4EE', gumEdge: '#C9C2B5', white: '#FFFFFF',
+  stomachBg: '#B83A55', stomachBgDark: '#A3304A', stomachFold: '#D4637C', floor: '#E4DCCB', sky: '#BFE3F2',
+  leaf: '#5BAE6A', pot: '#C8734A', watch: '#1E2A44',
+};
+
+// ---------- math ----------
+export const clamp = (v, a = 0, b = 1) => Math.max(a, Math.min(b, v));
+export const lerp = (a, b, t) => a + (b - a) * t;
+export const seg = (t, a, b) => clamp((t - a) / ((b - a) || 1e-6));
+export const eo = (t) => 1 - Math.pow(1 - t, 3);
+export const eio = (t) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2);
+export const eob = (t) => { const c1 = 1.70158, c3 = c1 + 1; return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2); };
+export const rnd = (i) => { const x = Math.sin(i * 127.1 + 311.7) * 43758.5453; return x - Math.floor(x); };
+export const TAU = Math.PI * 2;
+
+// ---------- primitives ----------
+export function rr(x, y, w, h, r) { ctx.beginPath(); ctx.roundRect(x, y, w, h, r); }
+export function circle(x, y, r, fill) { ctx.beginPath(); ctx.arc(x, y, r, 0, TAU); ctx.fillStyle = fill; ctx.fill(); }
+export function ell(x, y, rx, ry, fill, rot = 0) { ctx.beginPath(); ctx.ellipse(x, y, rx, ry, rot, 0, TAU); ctx.fillStyle = fill; ctx.fill(); }
+export function line(pts, color, w) {
+  ctx.beginPath(); ctx.moveTo(pts[0][0], pts[0][1]);
+  for (let i = 1; i < pts.length; i++) ctx.lineTo(pts[i][0], pts[i][1]);
+  ctx.strokeStyle = color; ctx.lineWidth = w; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.stroke();
+}
+export function fillAll(color) { ctx.fillStyle = color; ctx.fillRect(-300, -300, W + 600, H + 600); }
+/** outlined bold text (the caption look), centred at x, y */
+export function bigText(text, x, y, size, fill = C.white, rot = 0, sc = 1) {
+  ctx.save(); ctx.translate(x, y); ctx.rotate(rot); ctx.scale(sc, sc);
+  ctx.font = `900 ${size}px Inter`; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.lineJoin = 'round';
+  ctx.lineWidth = size * 0.2; ctx.strokeStyle = C.ink; ctx.strokeText(text, 0, 0); ctx.fillStyle = fill; ctx.fillText(text, 0, 0);
+  ctx.restore();
+}

package/plugins/faceless-shorts/styles/deep-dive/example/src/core/look2d.js

@@ -0,0 +1,33 @@
+// Deep Dive 2D layer (drawn over the 3D frame): captions, labels.
+import { ctx } from './lib.js';
+export const CAPLOOK = { size: 112, y: 1560, maxW: 940, fg: '#FFFFFF', hi: '#FFD43B', stroke: '#111111' };
+/** caption: sentence case, white, thick dark outline, one yellow word. words = [{ txt, hi }] */
+export function caption(words, x, y, sc = 1, look = CAPLOOK) {
+  ctx.save(); ctx.translate(x, y); ctx.scale(sc, sc); ctx.font = `900 ${look.size}px Inter`; ctx.textBaseline = 'middle'; ctx.textAlign = 'left'; ctx.lineJoin = 'round';
+  const sp = look.size * 0.26, ws = words.map((w) => ctx.measureText(w.txt).width), tw = ws.reduce((a, b) => a + b, 0) + sp * (words.length - 1);
+  let cx = -tw / 2;
+  words.forEach((w, i) => { ctx.lineWidth = look.size * 0.17; ctx.strokeStyle = look.stroke; ctx.strokeText(w.txt, cx, 0); ctx.fillStyle = w.hi ? look.hi : look.fg; ctx.fillText(w.txt, cx, 0); cx += ws[i] + sp; });
+  ctx.restore();
+}
+/** small floating label with a leader line (used sparingly: names of organs, numbers) */
+export function label(text, x, y, tx, ty, sc = 1) {
+  if (sc <= 0) return; ctx.save(); ctx.globalAlpha = Math.min(1, sc);
+  ctx.strokeStyle = '#FFFFFF'; ctx.lineWidth = 5; ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(tx, ty); ctx.stroke(); ctx.beginPath(); ctx.arc(tx, ty, 9, 0, 7); ctx.fillStyle = '#FFFFFF'; ctx.fill();
+  ctx.translate(x, y); ctx.scale(sc, sc); ctx.font = '800 54px Inter'; const w = ctx.measureText(text).width + 50;
+  ctx.fillStyle = 'rgba(15,18,24,0.82)'; ctx.beginPath(); ctx.roundRect(-w / 2, -44, w, 88, 44); ctx.fill(); ctx.fillStyle = '#FFFFFF'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(text, 0, 3);
+  ctx.restore();
+}
+/** rounded info pill (counters, short facts). col = accent colour of the text */
+export function pill(text, x, y, sc = 1, col = '#FFFFFF', bg = 'rgba(12,14,20,0.8)', size = 60) {
+  if (sc <= 0) return; ctx.save(); ctx.translate(x, y); ctx.scale(sc, sc); ctx.font = `900 ${size}px Inter`;
+  const w = ctx.measureText(text).width + size * 1.2; ctx.fillStyle = bg; ctx.beginPath(); ctx.roundRect(-w / 2, -size * 0.85, w, size * 1.7, size * 0.85); ctx.fill();
+  ctx.fillStyle = col; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(text, 0, size * 0.06); ctx.restore();
+}
+/** red warning triangle with "!" */
+export function warning(x, y, s) {
+  if (s <= 0) return; ctx.save(); ctx.translate(x, y); ctx.scale(s, s); ctx.shadowColor = 'rgba(0,0,0,0.5)'; ctx.shadowBlur = 30;
+  ctx.beginPath(); ctx.moveTo(0, -130); ctx.lineTo(140, 110); ctx.lineTo(-140, 110); ctx.closePath(); ctx.lineJoin = 'round'; ctx.lineWidth = 40; ctx.strokeStyle = '#D62839'; ctx.stroke(); ctx.fillStyle = '#D62839'; ctx.fill();
+  ctx.shadowBlur = 0; ctx.fillStyle = '#FFFFFF'; ctx.beginPath(); ctx.roundRect(-14, -60, 28, 110, 14); ctx.fill(); ctx.beginPath(); ctx.arc(0, 82, 17, 0, 7); ctx.fill(); ctx.restore();
+}
+/** darken toward the edges (passing out); k 0..1 */
+export function blackout(k) { if (k <= 0) return; const g = ctx.createRadialGradient(540, 860, 200 * (1 - k), 540, 960, 1300 * (1 - k * 0.6)); g.addColorStop(0, 'rgba(0,0,0,0)'); g.addColorStop(1, `rgba(0,0,0,${Math.min(1, k * 1.4)})`); ctx.fillStyle = g; ctx.fillRect(0, 0, 1080, 1920); if (k > 0.75) { ctx.fillStyle = `rgba(0,0,0,${(k - 0.75) * 4})`; ctx.fillRect(0, 0, 1080, 1920); } }

package/plugins/faceless-shorts/styles/deep-dive/example/src/core/sdf.js

@@ -0,0 +1,79 @@
+// Signed-distance sculpting: build smooth, clay-like 3D shapes from simple primitives, then mesh them (surface nets).
+// Everything stylized-3D in this style (people, organs, props) is sculpted here, so shapes blend smoothly with no seams.
+import * as THREE from 'three';
+
+// ---------- primitives (p = [x, y, z]) ----------
+export const len = (x, y, z) => Math.sqrt(x * x + y * y + z * z);
+export const sphere = (p, c, r) => len(p[0] - c[0], p[1] - c[1], p[2] - c[2]) - r;
+/** ellipsoid (approximate, good for sculpting) */
+export function ellipsoid(p, c, r) {
+  const x = (p[0] - c[0]) / r[0], y = (p[1] - c[1]) / r[1], z = (p[2] - c[2]) / r[2];
+  const k0 = len(x, y, z), k1 = len(x / r[0], y / r[1], z / r[2]);
+  return k0 * (k0 - 1) / (k1 || 1e-9);
+}
+/** capsule from a to b with radius ra at a and rb at b (a round cone) */
+export function capsule(p, a, b, ra, rb = ra) {
+  const bax = b[0] - a[0], bay = b[1] - a[1], baz = b[2] - a[2], pax = p[0] - a[0], pay = p[1] - a[1], paz = p[2] - a[2];
+  const h = Math.max(0, Math.min(1, (pax * bax + pay * bay + paz * baz) / (bax * bax + bay * bay + baz * baz)));
+  return len(pax - bax * h, pay - bay * h, paz - baz * h) - (ra + (rb - ra) * h);
+}
+/** rounded box centred at c with half-size s and corner radius r */
+export function rbox(p, c, s, r) {
+  const qx = Math.abs(p[0] - c[0]) - s[0] + r, qy = Math.abs(p[1] - c[1]) - s[1] + r, qz = Math.abs(p[2] - c[2]) - s[2] + r;
+  return len(Math.max(qx, 0), Math.max(qy, 0), Math.max(qz, 0)) + Math.min(Math.max(qx, qy, qz), 0) - r;
+}
+export function torus(p, c, R, r) { const x = p[0] - c[0], y = p[1] - c[1], z = p[2] - c[2]; const q = Math.sqrt(x * x + z * z) - R; return Math.sqrt(q * q + y * y) - r; }
+/** smooth union / subtraction / intersection (k = blend size in metres) */
+export function smin(a, b, k) { const h = Math.max(k - Math.abs(a - b), 0) / k; return Math.min(a, b) - h * h * k * 0.25; }
+export function smax(a, b, k) { return -smin(-a, -b, k); }
+export const ssub = (a, b, k) => smax(a, -b, k);
+/** cheap smooth 3D value noise in [-1, 1] (for hair clumps, organic surfaces) */
+export function noise3(x, y, z) {
+  const h = (i, j, k) => { const s = Math.sin(i * 127.1 + j * 311.7 + k * 74.7) * 43758.5453; return (s - Math.floor(s)) * 2 - 1; };
+  const xi = Math.floor(x), yi = Math.floor(y), zi = Math.floor(z), xf = x - xi, yf = y - yi, zf = z - zi;
+  const u = xf * xf * (3 - 2 * xf), v = yf * yf * (3 - 2 * yf), w = zf * zf * (3 - 2 * zf), L = (a, b, t) => a + (b - a) * t;
+  return L(L(L(h(xi, yi, zi), h(xi + 1, yi, zi), u), L(h(xi, yi + 1, zi), h(xi + 1, yi + 1, zi), u), v), L(L(h(xi, yi, zi + 1), h(xi + 1, yi, zi + 1), u), L(h(xi, yi + 1, zi + 1), h(xi + 1, yi + 1, zi + 1), u), v), w);
+}
+
+/**
+ * Mesh an SDF with naive surface nets. f(p) -> distance, bounds = [[x0,y0,z0],[x1,y1,z1]], step = cell size (m),
+ * color(p) -> [r, g, b] 0..1 (optional, becomes vertex colours). Normals come from the SDF gradient, so it's smooth.
+ */
+export function mesh(f, bounds, step, color = null) {
+  const [mn, mx] = bounds, nx = Math.ceil((mx[0] - mn[0]) / step) + 1, ny = Math.ceil((mx[1] - mn[1]) / step) + 1, nz = Math.ceil((mx[2] - mn[2]) / step) + 1;
+  const V = new Float32Array(nx * ny * nz), id = (i, j, k) => i + nx * (j + ny * k), p = [0, 0, 0];
+  for (let k = 0; k < nz; k++) for (let j = 0; j < ny; j++) for (let i = 0; i < nx; i++) { p[0] = mn[0] + i * step; p[1] = mn[1] + j * step; p[2] = mn[2] + k * step; V[id(i, j, k)] = f(p); }
+  const cell = new Int32Array((nx - 1) * (ny - 1) * (nz - 1)).fill(-1), cid = (i, j, k) => i + (nx - 1) * (j + (ny - 1) * k);
+  const pos = [], EDGES = [[0, 1], [2, 3], [4, 5], [6, 7], [0, 2], [1, 3], [4, 6], [5, 7], [0, 4], [1, 5], [2, 6], [3, 7]];
+  const cv = new Float32Array(8);
+  for (let k = 0; k < nz - 1; k++) for (let j = 0; j < ny - 1; j++) for (let i = 0; i < nx - 1; i++) {
+    let mask = 0; for (let c = 0; c < 8; c++) { cv[c] = V[id(i + (c & 1), j + ((c >> 1) & 1), k + ((c >> 2) & 1))]; if (cv[c] < 0) mask |= 1 << c; }
+    if (mask === 0 || mask === 255) continue;
+    let sx = 0, sy = 0, sz = 0, n = 0;
+    for (const [a, b] of EDGES) {
+      if ((cv[a] < 0) === (cv[b] < 0)) continue;
+      const t = cv[a] / (cv[a] - cv[b]);
+      sx += (a & 1) + t * ((b & 1) - (a & 1)); sy += ((a >> 1) & 1) + t * (((b >> 1) & 1) - ((a >> 1) & 1)); sz += ((a >> 2) & 1) + t * (((b >> 2) & 1) - ((a >> 2) & 1)); n++;
+    }
+    cell[cid(i, j, k)] = pos.length / 3;
+    pos.push(mn[0] + (i + sx / n) * step, mn[1] + (j + sy / n) * step, mn[2] + (k + sz / n) * step);
+  }
+  const idx = [];
+  const quad = (a, b, c, d, flip) => { if (a < 0 || b < 0 || c < 0 || d < 0) return; flip ? idx.push(a, c, b, a, d, c) : idx.push(a, b, c, a, c, d); };
+  for (let k = 1; k < nz - 1; k++) for (let j = 1; j < ny - 1; j++) for (let i = 0; i < nx - 1; i++) { const s0 = V[id(i, j, k)] < 0; if (s0 === (V[id(i + 1, j, k)] < 0)) continue; quad(cell[cid(i, j - 1, k - 1)], cell[cid(i, j, k - 1)], cell[cid(i, j, k)], cell[cid(i, j - 1, k)], !s0); }
+  for (let k = 1; k < nz - 1; k++) for (let j = 0; j < ny - 1; j++) for (let i = 1; i < nx - 1; i++) { const s0 = V[id(i, j, k)] < 0; if (s0 === (V[id(i, j + 1, k)] < 0)) continue; quad(cell[cid(i - 1, j, k - 1)], cell[cid(i - 1, j, k)], cell[cid(i, j, k)], cell[cid(i, j, k - 1)], !s0); }
+  for (let k = 0; k < nz - 1; k++) for (let j = 1; j < ny - 1; j++) for (let i = 1; i < nx - 1; i++) { const s0 = V[id(i, j, k)] < 0; if (s0 === (V[id(i, j, k + 1)] < 0)) continue; quad(cell[cid(i - 1, j - 1, k)], cell[cid(i, j - 1, k)], cell[cid(i, j, k)], cell[cid(i - 1, j, k)], !s0); }
+  const nrm = new Float32Array(pos.length), col = color ? new Float32Array(pos.length) : null, e = step * 0.5, q = [0, 0, 0];
+  for (let v = 0; v < pos.length; v += 3) {
+    const x = pos[v], y = pos[v + 1], z = pos[v + 2], g = (dx, dy, dz) => { q[0] = x + dx; q[1] = y + dy; q[2] = z + dz; return f(q); };
+    let gx = g(e, 0, 0) - g(-e, 0, 0), gy = g(0, e, 0) - g(0, -e, 0), gz = g(0, 0, e) - g(0, 0, -e); const l = Math.hypot(gx, gy, gz) || 1;
+    nrm[v] = gx / l; nrm[v + 1] = gy / l; nrm[v + 2] = gz / l;
+    if (col) { q[0] = x; q[1] = y; q[2] = z; const c = color(q); col[v] = c[0]; col[v + 1] = c[1]; col[v + 2] = c[2]; }
+  }
+  const geo = new THREE.BufferGeometry();
+  geo.setAttribute('position', new THREE.Float32BufferAttribute(pos, 3)); geo.setAttribute('normal', new THREE.BufferAttribute(nrm, 3));
+  if (col) geo.setAttribute('color', new THREE.BufferAttribute(col, 3));
+  geo.setIndex(idx); return geo;
+}
+/** hex '#rrggbb' -> linear [r, g, b] for vertex colours */
+export function rgb(hex) { const c = new THREE.Color(hex); return [c.r, c.g, c.b]; }