@amg555/frameforge-mcp 2.7.3 → 2.7.7

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

@@ -0,0 +1,107 @@
+// Deep Dive sets: each returns { scene, update(t) } built around the origin; people stand on y = 0, facing +z.
+import * as THREE from 'three';
+import { rbox, ellipsoid, capsule, smin, sphere, mesh, rgb, noise3 } from './sdf.js';
+import { lightRig } from './engine.js';
+
+const std = (color, rough = 0.7, extra = {}) => new THREE.MeshStandardMaterial({ color, roughness: rough, ...extra });
+function canvasTex(w, h, draw, rep = [1, 1]) { const c = document.createElement('canvas'); c.width = w; c.height = h; draw(c.getContext('2d'), w, h); const t = new THREE.CanvasTexture(c); t.colorSpace = THREE.SRGBColorSpace; t.wrapS = t.wrapT = THREE.RepeatWrapping; t.repeat.set(...rep); t.anisotropy = 8; return t; }
+const shadowed = (m) => { m.castShadow = true; m.receiveShadow = true; return m; };
+function sdfMesh(f, b, step, mat) { return shadowed(new THREE.Mesh(mesh(f, b, step), mat)); }
+
+// ═════════════════════════ KITCHEN (warm low sun through a window) ═════════════════════════
+export function kitchen(E) {
+  const scene = new THREE.Scene(); scene.environment = E.envMap; scene.environmentIntensity = 0.3;
+  scene.background = new THREE.Color('#E8DCCB'); scene.fog = new THREE.Fog('#E8DCCB', 8, 20);
+  const planks = canvasTex(1024, 1024, (g, w, h) => { for (let i = 0; i < 8; i++) { const l = 150 + (i * 37) % 30; g.fillStyle = `rgb(${l + 20},${l - 18},${l - 60})`; g.fillRect(0, i * h / 8, w, h / 8); g.fillStyle = 'rgba(60,35,15,0.35)'; g.fillRect(0, i * h / 8, w, 3); for (let k = 0; k < 40; k++) { g.fillStyle = 'rgba(80,50,25,0.08)'; g.fillRect(Math.random() * w, i * h / 8 + Math.random() * h / 8, 120 + Math.random() * 200, 2); } } }, [6, 6]);
+  const floor = new THREE.Mesh(new THREE.PlaneGeometry(14, 14), std('#ffffff', 0.55, { map: planks })); floor.rotation.x = -Math.PI / 2; floor.receiveShadow = true; scene.add(floor);
+  const wallM = std('#EFE3D0', 0.9), back = shadowed(new THREE.Mesh(new THREE.BoxGeometry(14, 4, 0.2), wallM)); back.position.set(0, 2, -2.2); scene.add(back);
+  const side = shadowed(new THREE.Mesh(new THREE.BoxGeometry(0.2, 4, 8), wallM)); side.position.set(-3, 2, 1.5); scene.add(side);
+  // window in the back wall: bright sky panel + frame
+  const sky = new THREE.Mesh(new THREE.PlaneGeometry(1.6, 1.3), new THREE.MeshBasicMaterial({ color: new THREE.Color('#DDEEFF').multiplyScalar(1.6) })); sky.position.set(1.3, 2.05, -2.09); scene.add(sky);
+  const frM = std('#FFFFFF', 0.4); for (const [w, h, x, y] of [[1.75, 0.08, 1.3, 2.74], [1.75, 0.08, 1.3, 1.36], [0.08, 1.4, 0.42, 2.05], [0.08, 1.4, 2.18, 2.05], [0.05, 1.3, 1.3, 2.05]]) { const b = shadowed(new THREE.Mesh(new THREE.BoxGeometry(w, h, 0.12), frM)); b.position.set(x, y, -2.05); scene.add(b); }
+  // counter run with rounded doors, worktop, sink, kettle, plant
+  const cab = std('#5F8F7E', 0.55), top = new THREE.MeshPhysicalMaterial({ color: '#F2EEE6', roughness: 0.25, clearcoat: 0.6 });
+  const run = sdfMesh((p) => rbox(p, [0, 0.45, 0], [1.6, 0.45, 0.32], 0.03), [[-1.7, -0.02, -0.4], [1.7, 0.94, 0.4]], 0.02, cab); run.position.set(0.2, 0, -1.75); scene.add(run);
+  for (let i = 0; i < 5; i++) { const d = shadowed(new THREE.Mesh(new THREE.BoxGeometry(0.58, 0.7, 0.02), std('#6FA08E', 0.5))); d.position.set(-1.05 + i * 0.63, 0.47, -1.42); scene.add(d); const k = new THREE.Mesh(new THREE.SphereGeometry(0.018, 12, 8), std('#E2C27A', 0.3, { metalness: 0.8 })); k.position.set(-0.83 + i * 0.63, 0.72, -1.4); scene.add(k); }
+  const wt = shadowed(new THREE.Mesh(new THREE.BoxGeometry(3.4, 0.05, 0.72), top)); wt.position.set(0.2, 0.93, -1.75); scene.add(wt);
+  const kettle = sdfMesh((p) => smin(ellipsoid(p, [0, 0.12, 0], [0.11, 0.12, 0.11]), capsule(p, [0.09, 0.12, 0], [0.17, 0.2, 0], 0.018), 0.03), [[-0.15, -0.02, -0.15], [0.22, 0.28, 0.15]], 0.008, new THREE.MeshPhysicalMaterial({ color: '#D9534F', roughness: 0.3, clearcoat: 1 })); kettle.position.set(-0.9, 0.95, -1.7); scene.add(kettle);
+  const pot = sdfMesh((p) => capsule(p, [0, 0, 0], [0, 0.16, 0], 0.09, 0.11), [[-0.13, -0.1, -0.13], [0.13, 0.28, 0.13]], 0.01, std('#C8734A', 0.6)); pot.position.set(1.5, 1.04, -1.7); scene.add(pot);
+  for (let i = 0; i < 9; i++) { const l = shadowed(new THREE.Mesh(new THREE.SphereGeometry(0.07, 16, 12), std('#5E9A50', 0.6))); l.scale.set(0.6, 1.6, 0.4); l.position.set(1.5 + Math.sin(i * 2.4) * 0.08, 1.33 + (i % 3) * 0.04, -1.7 + Math.cos(i * 2.4) * 0.08); l.rotation.z = Math.sin(i * 2.4) * 0.7; scene.add(l); }
+  const L = lightRig(scene, { key: '#FFD9AE', keyI: 4.2, keyPos: [2.6, 3.2, -4], target: [0.3, 0.8, 0], rimCol: '#CFE0FF', rimI: 1.2, hemiI: 0.75, shadowBox: 3.2 });
+  const fill = new THREE.DirectionalLight('#FFF1E2', 1.1); fill.position.set(-1, 2.5, 4); scene.add(fill);
+  return { scene, lights: L, update() {} };
+}
+
+// ═════════════════════════ X-RAY STAGE ═════════════════════════
+/** glass x-ray body material: cyan fresnel edges, transparent middle */
+export function xrayMaterial(color = '#4FD1E8', strength = 1) {
+  return new THREE.ShaderMaterial({
+    uniforms: { uCol: { value: new THREE.Color(color) }, uS: { value: strength } }, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending,
+    vertexShader: 'varying vec3 vN; varying vec3 vV; void main(){ vec4 mv = modelViewMatrix * vec4(position, 1.0); vN = normalize(normalMatrix * normal); vV = normalize(-mv.xyz); gl_Position = projectionMatrix * mv; }',
+    fragmentShader: 'uniform vec3 uCol; uniform float uS; varying vec3 vN; varying vec3 vV; void main(){ float f = pow(1.0 - abs(dot(normalize(vN), normalize(vV))), 2.2); gl_FragColor = vec4(uCol * (0.06 + f * 1.6) * uS, 1.0); }',
+  });
+}
+export function xrayStage(E) {
+  const scene = new THREE.Scene();
+  scene.background = canvasTex(64, 512, (g, w, h) => { const gr = g.createLinearGradient(0, 0, 0, h); gr.addColorStop(0, '#0B1A30'); gr.addColorStop(1, '#03070F'); g.fillStyle = gr; g.fillRect(0, 0, w, h); });
+  scene.add(new THREE.HemisphereLight('#9FD9FF', '#05080F', 0.6));
+  const k = new THREE.DirectionalLight('#DDF4FF', 2.2); k.position.set(2, 3, 3); scene.add(k);
+  const grid = new THREE.GridHelper(20, 40, '#1F6F88', '#123A4A'); grid.material.transparent = true; grid.material.opacity = 0.35; scene.add(grid);
+  return { scene, update() {} };
+}
+/** bones + organs to put inside a Human's torso (add to human.spine). Returns { group, stomach, heart } */
+export function insides() {
+  const g = new THREE.Group();
+  const bone = new THREE.MeshStandardMaterial({ color: '#E6F7FF', emissive: '#7FDDF2', emissiveIntensity: 0.28, roughness: 0.4 });
+  const spineGeo = new THREE.CylinderGeometry(0.018, 0.02, 0.03, 16);
+  for (let i = 0; i < 17; i++) { const v = new THREE.Mesh(spineGeo, bone); v.position.set(0, -0.05 + i * 0.034, -0.085 + Math.sin(i / 16 * Math.PI) * 0.015); g.add(v); }
+  for (let i = 0; i < 9; i++) { const r = 0.12 + Math.sin(Math.min(1, i / 4) * 1.4) * 0.05 - (i > 5 ? (i - 5) * 0.012 : 0); const rib = new THREE.Mesh(new THREE.TorusGeometry(r, 0.0085, 8, 48, Math.PI * 1.55), bone); rib.rotation.set(Math.PI / 2 + 0.3, 0, Math.PI * 0.725); rib.scale.set(1.2, 0.85, 1); rib.position.set(0, 0.47 - i * 0.04, -0.02); g.add(rib); }
+  const sternum = new THREE.Mesh(new THREE.CapsuleGeometry(0.014, 0.18, 6, 12), bone); sternum.position.set(0, 0.33, 0.1); g.add(sternum);
+  for (const s of [-1, 1]) { const cl = new THREE.Mesh(new THREE.CapsuleGeometry(0.011, 0.14, 6, 12), bone); cl.rotation.z = Math.PI / 2 + s * 0.15; cl.position.set(s * 0.09, 0.47, 0.06); g.add(cl); }
+  const pelvis = new THREE.Mesh(new THREE.TorusGeometry(0.11, 0.02, 10, 40, Math.PI), bone); pelvis.rotation.x = Math.PI / 2 + 0.6; pelvis.position.set(0, -0.06, 0); g.add(pelvis);
+  const organ = (col) => new THREE.MeshPhysicalMaterial({ color: col, roughness: 0.35, clearcoat: 0.8, clearcoatRoughness: 0.3, emissive: col, emissiveIntensity: 0.18 });
+  const stomach = new THREE.Mesh(mesh((p) => { let d = capsule(p, [-0.02, 0.1, 0], [-0.07, 0.02, 0.01], 0.045, 0.06); d = smin(d, capsule(p, [-0.07, 0.02, 0.01], [0.03, -0.03, 0.02], 0.06, 0.045), 0.04); d = smin(d, capsule(p, [0.03, -0.03, 0.02], [0.07, 0.02, 0.02], 0.045, 0.028), 0.03); return smin(d, capsule(p, [-0.02, 0.1, 0], [-0.01, 0.2, -0.02], 0.016), 0.02); }, [[-0.15, -0.11, -0.09], [0.13, 0.24, 0.1]], 0.005), organ('#E87A8C'));
+  stomach.position.set(0.03, 0.14, 0.02); g.add(stomach);
+  const heart = new THREE.Mesh(mesh((p) => smin(smin(sphere(p, [-0.018, 0.02, 0], 0.035), sphere(p, [0.018, 0.02, 0], 0.035), 0.02), ellipsoid(p, [0, -0.02, 0], [0.04, 0.05, 0.035]), 0.03), [[-0.07, -0.08, -0.06], [0.07, 0.07, 0.06]], 0.004), organ('#D62839'));
+  heart.position.set(0.025, 0.36, 0.03); heart.rotation.z = -0.4; g.add(heart);
+  const lungs = [];
+  for (const s of [-1, 1]) { const lung = new THREE.Mesh(mesh((p) => ellipsoid(p, [0, 0, 0], [0.06, 0.11, 0.07]), [[-0.08, -0.13, -0.09], [0.08, 0.13, 0.09]], 0.008), new THREE.MeshPhysicalMaterial({ color: '#F2A3AE', roughness: 0.6, transparent: true, opacity: 0.45, emissive: '#F2A3AE', emissiveIntensity: 0.1 })); lung.position.set(s * 0.085, 0.36, 0); g.add(lung); lungs.push(lung); }
+  g.position.y = 0.04; return { group: g, stomach, heart, lungs };
+}
+
+// ═════════════════════════ BLOOD VESSEL (macro) ═════════════════════════
+export function vessel(E) {
+  const scene = new THREE.Scene(); scene.background = new THREE.Color('#2A0508'); scene.fog = new THREE.FogExp2('#3A070C', 0.11);
+  const tubeGeo = new THREE.CylinderGeometry(1.6, 1.6, 40, 96, 200, true); const pos = tubeGeo.attributes.position;
+  for (let i = 0; i < pos.count; i++) { const x = pos.getX(i), y = pos.getY(i), z = pos.getZ(i), a = Math.atan2(z, x), n = 1 + 0.08 * noise3(Math.cos(a) * 3, y * 0.6, Math.sin(a) * 3) + 0.03 * Math.sin(y * 3 + a * 5); pos.setXYZ(i, x * n, y, z * n); }
+  tubeGeo.computeVertexNormals();
+  const wall = new THREE.Mesh(tubeGeo, new THREE.MeshPhysicalMaterial({ color: '#B8283A', roughness: 0.35, clearcoat: 1, side: THREE.BackSide, emissive: '#5A0A14', emissiveIntensity: 0.5 }));
+  wall.rotation.x = Math.PI / 2; scene.add(wall);
+  const prof = []; for (let i = 0; i <= 24; i++) { const r = i / 24 * 0.32; const t = r / 0.32; prof.push(new THREE.Vector2(r, 0.05 * (0.35 + 0.65 * Math.sqrt(1 - t * t)) * (0.6 + 0.8 * t * t))); }
+  const half = new THREE.LatheGeometry(prof, 48), cellGeo = half.clone(); { const p2 = half.clone(); p2.scale(1, -1, 1); }
+  const rbc = new THREE.MeshPhysicalMaterial({ color: '#D8243A', roughness: 0.3, clearcoat: 1, clearcoatRoughness: 0.2, emissive: '#5C0610', emissiveIntensity: 0.4, side: THREE.DoubleSide, sheen: 0.6, sheenColor: new THREE.Color('#ff8090') });
+  const N = 46, inst = new THREE.InstancedMesh(cellGeo, rbc, N * 2), seeds = [];
+  for (let i = 0; i < N; i++) seeds.push([Math.random() * Math.PI * 2, 0.55 + Math.random() * 0.75, Math.random() * 26, Math.random() * 6, Math.random() * 6]);
+  scene.add(inst);
+  const NB = 60, bub = new THREE.InstancedMesh(new THREE.SphereGeometry(0.07, 20, 14), new THREE.MeshPhysicalMaterial({ color: '#CFE3EA', roughness: 0.1, transparent: true, opacity: 0.55, emissive: '#7FA6B4', emissiveIntensity: 0.35 }), NB); bub.count = 0; scene.add(bub);
+  const bseeds = []; for (let i = 0; i < NB; i++) bseeds.push([Math.random() * Math.PI * 2, 0.3 + Math.random() * 1.0, Math.random() * 24, 0.4 + Math.random() * 1.2]);
+  const RED = new THREE.Color('#D8243A'), DARK = new THREE.Color('#5E0E1C');
+  const l1 = new THREE.PointLight('#FFB0A0', 60, 14, 1.4); scene.add(l1); scene.add(new THREE.HemisphereLight('#FF6B6B', '#300308', 0.9));
+  const m = new THREE.Matrix4(), q = new THREE.Quaternion(), e = new THREE.Euler(), v = new THREE.Vector3(), sc = new THREE.Vector3(0.5, 0.5, 0.5);
+  return {
+    scene, light: l1,
+    /** co2 0..1 fills the vessel with grey CO2 bubbles; dark 0..1 turns the cells from bright to dark red (less oxygen) */
+    update(t, camZ = 0, co2 = 0, dark = 0) {
+      rbc.color.copy(RED).lerp(DARK, dark);
+      bub.count = Math.floor(NB * co2);
+      for (let i = 0; i < bub.count; i++) { const [a, r, z0, sz] = bseeds[i]; v.set(Math.cos(a + t * 0.2) * r, Math.sin(a + t * 0.2) * r + Math.sin(t * 2 + i) * 0.05, camZ - 1.5 - ((z0 + t * 1.8) % 24)); q.identity(); sc.setScalar(sz); m.compose(v, q, sc); bub.setMatrixAt(i, m); }
+      bub.instanceMatrix.needsUpdate = true; sc.setScalar(0.5);
+      l1.position.set(0.2, 0.3, camZ - 3.5);
+      seeds.forEach(([a, r, z0, rx, ry], i) => {
+        const z = camZ - 2.2 - ((z0 + t * 2.2) % 26); e.set(rx + t * 0.6, ry + t * 0.4, 0); q.setFromEuler(e); v.set(Math.cos(a + t * 0.1) * r, Math.sin(a + t * 0.1) * r, z);
+        m.compose(v, q, sc); inst.setMatrixAt(i * 2, m); e.set(rx + t * 0.6 + Math.PI, ry + t * 0.4, 0); q.setFromEuler(e); m.compose(v, q, sc); inst.setMatrixAt(i * 2 + 1, m);
+      });
+      inst.instanceMatrix.needsUpdate = true;
+    },
+  };
+}

package/plugins/faceless-shorts/styles/deep-dive/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']+/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/faceless-shorts/styles/deep-dive/example/src/main.js

@@ -0,0 +1,56 @@
+// Boot: fonts → script + timing → 3D engine + sets → captions → shots. draw(t) renders film time t (pure function of t):
+// the shot renders its 3D frame into the hidden WebGL canvas, which is copied onto the 2D canvas, then the 2D layer
+// (labels, counters) and the captions go on top. window.OP is the API tools/capture.mjs drives.
+import { W, H, setCtx, ctx, clamp } from './core/lib.js';
+import { T, loadTiming } from './core/timing.js';
+import { buildCaptions, drawCaption, captionList } from './core/captions.js';
+import { makeEngine, RES, AA } from './core/engine.js';
+import { buildShots } from './shots.js';
+
+const cv = document.getElementById('cv'), GL = document.getElementById('gl');
+setCtx(cv.getContext('2d'));
+const OP = (window.OP = { ready: false });
+
+function draw(t) {
+  t = clamp(t, 0, T.dur - 1e-4);
+  ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.globalAlpha = 1; ctx.letterSpacing = '0px';
+  const S = OP._shots; let i = S.length - 1; while (i > 0 && S[i].at > t) i--;
+  const sh = S[i], end = i < S.length - 1 ? S[i + 1].at : T.dur, d = end - sh.at, lt = t - sh.at;
+  const blit = () => ctx.drawImage(GL, 0, 0, W, H);
+  ctx.save(); sh.draw(lt, d, t, blit); ctx.restore();
+  ctx.globalAlpha = 1; ctx.letterSpacing = '0px';
+  const fade = Math.min(clamp(t / 0.25), clamp((T.dur - t) / 0.4));
+  if (fade < 1) { ctx.fillStyle = '#000'; ctx.globalAlpha = 1 - fade; ctx.fillRect(0, 0, W, H); ctx.globalAlpha = 1; }
+  drawCaption(t);
+}
+
+(async () => {
+  try {
+    await document.fonts.load('900 100px Inter'); await document.fonts.load('800 100px Inter');
+    const script = await (await fetch('script.json', { cache: 'no-store' })).json();
+    await loadTiming();
+    buildCaptions(script);
+    GL.width = Math.round(1080 * RES); GL.height = Math.round(1920 * RES);
+    const E = makeEngine(GL, { w: GL.width, h: GL.height, samples: AA });
+    const { shots, cues } = buildShots(E);
+    shots.sort((a, b) => a.at - b.at);
+    OP._shots = shots; OP.script = script;
+    OP.duration = () => T.dur;
+    OP.draw = draw;
+    OP.frame = (t, q = 0.92) => { draw(t); return cv.toDataURL('image/jpeg', q); };
+    OP.shots = () => shots.map((s, i) => ({ id: s.id, at: +s.at.toFixed(3), end: +(i < shots.length - 1 ? shots[i + 1].at : T.dur).toFixed(3), note: s.note || '' }));
+    OP.captions = () => captionList().map((c) => ({ s: +c.s.toFixed(3), e: +c.e.toFixed(3), text: c.words.map((w) => (w.hi ? '*' : '') + w.txt).join(' ') }));
+    OP.cues = () => cues.slice().sort((a, b) => a.t - b.t);
+    OP.ready = true;
+    const q = new URLSearchParams(location.search);
+    if (!q.has('capture')) {
+      if (q.has('t')) draw(+q.get('t'));
+      else {
+        const audio = new Audio('data/mix.wav'); let t0 = null; const btn = document.getElementById('play'); btn.hidden = false;
+        btn.onclick = () => { btn.hidden = true; t0 = performance.now(); audio.currentTime = 0; audio.play().catch(() => {}); };
+        const loop = (now) => { const t = t0 == null ? 0 : (now - t0) / 1000; draw(t); if (t0 != null && t > T.dur) { t0 = null; btn.hidden = false; } requestAnimationFrame(loop); };
+        requestAnimationFrame(loop);
+      }
+    }
+  } catch (e) { OP.bootError = String(e && e.stack || e); console.error(e); }
+})();

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

@@ -0,0 +1,79 @@
+// The Deep Dive style sheet: every picture is a real render from the style's 3D engine.
+import * as THREE from 'three';
+import { ctx } from './core/lib.js';
+import { startBoard, panel, frame, small, swatches, rules } from './core/board.js';
+import { makeEngine, camera, lightRig } from './core/engine.js';
+import { Human } from './core/human.js';
+import * as SETS from './core/sets.js';
+import { caption, label } from './core/look2d.js';
+
+await document.fonts.load('900 40px Inter'); await document.fonts.load('800 40px Inter');
+const E = makeEngine(document.getElementById('gl')), E2 = makeEngine(document.getElementById('gl2'), { w: 1280, h: 860 });
+const GL = document.getElementById('gl'), GL2 = document.getElementById('gl2');
+const cam = camera(30);
+const B = startBoard(document.getElementById('cv'), { title: 'DEEP DIVE 3D: VIDEO STYLE SHEET', bg: '#14161B', line: '#3B4150', head: '#F4F1EA', accent: '#FFD43B' });
+const shot = (x, y, w, renderFn, over) => frame(x, y, w, () => { renderFn(); ctx.drawImage(GL, 0, 0); if (over) over(); });
+const wide = (box, renderFn, over) => { renderFn(); B.save(); B.beginPath(); B.roundRect(box.x, box.y, box.w, box.h, 12); B.clip(); B.drawImage(GL2, box.x, box.y, box.w, box.h); B.restore(); if (over) over(); };
+
+// sets reused across panels
+const K = SETS.kitchen(E), hero = new Human({}); K.scene.add(hero.group);
+
+// 1 · hero frame
+let b = panel(20, 80, 560, 520, 1, 'HERO FRAME');
+shot(b.x + 6, b.y, 240, () => {
+  hero.group.position.set(0.1, 0, -0.6); hero.pose({ head: [10, 14, -4], spine: [6, 8, 0], shR: [28, 0, -6], elR: 78, shL: [20, 0, -4], elL: 60, look: [-10, 8], lid: -0.4 });
+  cam.position.set(0.95, 1.42, 1.9); cam.lookAt(0.1, 1.22, -0.6); E.render(K.scene, cam, { focus: 2.35, aperture: 0.004, maxblur: 0.01, bloom: 0.2 });
+}, () => { caption([{ txt: 'What' }, { txt: 'if' }, { txt: 'you' }], 540, 1500); caption([{ txt: 'swallowed' }, { txt: 'gum?', hi: 1 }], 540, 1640); });
+small('STYLIZED 3D PEOPLE\nIN SUNLIT SETS', b.x + 270, b.y + 40, 'left', 17);
+small('X-RAY CUTAWAYS\nINTO THE BODY', b.x + 270, b.y + 130, 'left', 17);
+small('MACRO JOURNEYS\nTHROUGH CELLS', b.x + 270, b.y + 220, 'left', 17);
+small('SHALLOW FOCUS,\nWARM LOW SUN', b.x + 270, b.y + 310, 'left', 17);
+
+// 2 · palette + cast
+b = panel(590, 80, 660, 520, 2, 'PALETTE & CAST');
+const yy = swatches(b, [['SUN', '#FFD9AE'], ['SKIN', '#E3A988'], ['SHIRT', '#3E7CC9'], ['CREAM', '#E8DCCB'], ['X-RAY', '#4FD1E8'], ['ORGAN', '#E87A8C'], ['BLOOD', '#B8283A'], ['NIGHT', '#0B1A30']]);
+const castScene = new THREE.Scene(); castScene.background = new THREE.Color('#E8DCCB'); castScene.environment = E2.envMap; castScene.environmentIntensity = 0.3;
+{ const f = new THREE.Mesh(new THREE.PlaneGeometry(30, 30), new THREE.MeshStandardMaterial({ color: '#DCCDB8', roughness: 0.9 })); f.rotation.x = -Math.PI / 2; f.receiveShadow = true; castScene.add(f); lightRig(castScene, { keyPos: [2, 4, 4], shadowBox: 3 }); }
+[[{}, -0.75, { head: [0, 15, 0], shR: [10, 0, 30], elR: 40 }], [{ skin: '#B97A56', shirt: '#E07A3F', pants: '#4A4F5C', hair: '#16100C', iris: '#2A1C12' }, 0, { head: [5, -5, 0], shL: [80, 0, 20], elL: 70 }], [{ skin: '#F0C3A2', shirt: '#6DAA6A', pants: '#3D3A5C', hair: '#C98C3E', iris: '#4E7A94' }, 0.75, { head: [-4, -18, 0], shR: [0, 0, 18] }]]
+  .forEach(([look, x, pose]) => { const h = new Human(look); h.group.position.x = x; h.group.rotation.y = -x * 0.35; h.pose(pose); castScene.add(h.group); });
+const c2 = new THREE.PerspectiveCamera(26, 1280 / 860, 0.05, 100); c2.position.set(0, 1.25, 4.6); c2.lookAt(0, 0.95, 0);
+wide({ x: b.x, y: yy + 6, w: b.w, h: 262 }, () => E2.render(castScene, c2, { aperture: 0, bloom: 0.15 }));
+small('ONE BODY, MANY LOOKS: SKIN, HAIR, CLOTHES SWAP PER VIDEO', b.x + b.w / 2, yy + 300, 'center', 14, '#C9CDD6');
+
+// 3 · components
+b = panel(1260, 80, 640, 520, 3, 'COMPONENTS');
+{
+  const s = new THREE.Scene(); s.background = new THREE.Color('#0B1A30'); s.add(new THREE.HemisphereLight('#CFEFFF', '#0A1020', 1.2)); const k = new THREE.DirectionalLight('#FFFFFF', 2.5); k.position.set(2, 3, 4); s.add(k); s.environment = E2.envMap; s.environmentIntensity = 0.5;
+  const I = SETS.insides(); const st = I.stomach.clone(); st.position.set(-0.1, 0.02, 0); st.scale.setScalar(1.5); st.rotation.set(0.2, -0.4, 0); s.add(st);
+  const ht = I.heart.clone(); ht.position.set(0.2, 0.02, 0); ht.scale.setScalar(1.9); s.add(ht);
+  const V = SETS.vessel(E2); const cell = V.scene.children.find((o) => o.isInstancedMesh);
+  const rb = new THREE.Mesh(cell.geometry, cell.material); rb.position.set(0.46, 0.02, 0); rb.rotation.set(1.1, 0.3, 0); rb.scale.setScalar(0.27); s.add(rb); const rb2 = rb.clone(); rb2.rotation.x += Math.PI; s.add(rb2);
+  const xr = new Human({}); xr.setBodyMaterial(SETS.xrayMaterial()); const ins = SETS.insides(); xr.spine.add(ins.group); xr.group.scale.setScalar(0.48); xr.group.position.set(-0.42, -0.62, 0); xr.pose({}); s.add(xr.group);
+  const cc = new THREE.PerspectiveCamera(30, 1280 / 860, 0.05, 50); cc.position.set(0, 0.0, 1.55); cc.lookAt(0, 0.0, 0);
+  wide({ x: b.x, y: b.y, w: b.w, h: b.h - 8 }, () => E2.render(s, cc, { aperture: 0, bloom: 0.5, bloomThreshold: 0.4 }), () => {
+    [['X-RAY BODY', 0.15], ['STOMACH', 0.41], ['HEART', 0.64], ['BLOOD CELL', 0.87]].forEach(([t, fx]) => small(t, b.x + b.w * fx, b.y + b.h - 30, 'center', 15, '#CFEFFF'));
+  });
+}
+
+// 4 · scenes
+b = panel(20, 610, 760, 456, 4, 'SCENES');
+const sw = 200, sx = (i) => b.x + 20 + i * (sw + 45);
+shot(sx(0), b.y, sw, () => { hero.group.position.set(0.1, 0, -0.4); hero.group.rotation.y = 0.5; hero.walk(0.9); cam.position.set(1.2, 1.35, 3.3); cam.lookAt(0.3, 1.0, -0.9); E.render(K.scene, cam, { focus: 3.6, aperture: 0.002, bloom: 0.2 }); });
+const X = SETS.xrayStage(E), xh = new Human({}); X.scene.add(xh.group); xh.setBodyMaterial(SETS.xrayMaterial()); xh.spine.add(SETS.insides().group); xh.pose({ head: [4, -10, 0], look: [8, 0] });
+shot(sx(1), b.y, sw, () => { cam.position.set(0.3, 1.25, 2.4); cam.lookAt(0, 1.15, 0); E.render(X.scene, cam, { focus: 2.4, aperture: 0.0015, bloom: 0.55, bloomThreshold: 0.4 }); }, () => label('STOMACH', 300, 880, 520, 1060));
+const VS = SETS.vessel(E); shot(sx(2), b.y, sw, () => { VS.update(1.3, 0); cam.position.set(0, 0, 0); cam.lookAt(0.15, -0.1, -5); E.render(VS.scene, cam, { focus: 3.2, aperture: 0.005, maxblur: 0.012, bloom: 0.6, bloomThreshold: 0.5 }); });
+['(A) THE REAL WORLD', '(B) THE X-RAY', '(C) INSIDE THE BODY'].forEach((t, i) => small(t, sx(i) + sw / 2, b.y + sw * 16 / 9 + 26, 'center', 15));
+
+// 5 · captions
+b = panel(790, 610, 520, 456, 5, 'CAPTIONS');
+wide({ x: b.x, y: b.y, w: b.w, h: b.h - 10 }, () => { hero.group.position.set(0.1, 0, -0.6); hero.pose({ head: [0, 10, 0] }); const c3 = new THREE.PerspectiveCamera(30, 1280 / 860, 0.05, 100); c3.position.set(1.2, 1.4, 2.2); c3.lookAt(0.6, 1.1, -1.4); E2.render(K.scene, c3, { focus: 0.6, aperture: 0.02, maxblur: 0.02, bloom: 0.2 }); }, () => {
+  const sc = 0.42, mid = b.x + b.w / 2;
+  [[[{ txt: 'Your' }, { txt: 'stomach', hi: 1 }], 70], [[{ txt: 'can\'t' }, { txt: 'digest', hi: 1 }, { txt: 'it' }], 170], [[{ txt: 'In' }, { txt: '3', hi: 1 }, { txt: 'days...' }], 270]]
+    .forEach(([w, y]) => { B.save(); B.translate(mid, b.y + y); B.scale(sc, sc); caption(w, 0, 0); B.restore(); });
+  small('SENTENCE CASE · 1-3 WORDS · ONE YELLOW WORD', mid, b.y + b.h - 30, 'center', 14, '#FFFFFF');
+});
+
+// 6 · rules
+b = panel(1320, 610, 580, 456, 6, 'RULES');
+rules(b, ['OPEN ON THE MOST DRAMATIC MOMENT.', 'CAMERA ALWAYS MOVING; CUT EVERY 1-2 S.', 'REAL WORLD → X-RAY → INSIDE, AND BACK.', 'WARM SUN OUTSIDE, CYAN INSIDE THE BODY.', 'SHALLOW FOCUS: SOFT BACKGROUND ALWAYS.', 'NO GORE: INJURY SHOWN AS X-RAY OR GLOW.', 'MOOD: CURIOUS, SHOCKING, SATISFYING.'], b.y + 26, 17, 52);
+window.SHEET_READY = true;

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

@@ -0,0 +1,136 @@
+// WHAT HAPPENS IF YOU HOLD YOUR BREATH? : the shot list (Deep Dive 3D example).
+// A shot: { id, at, note, draw(lt, d, t, blit) } : render the 3D frame with E.render(...), call blit() to put it on the
+// 2D canvas, then draw 2D overlays (labels, pills). The camera moves in EVERY shot. Times come from the voice:
+// cut(i) = just before line i, Wd('word', i) = when that word is said.
+import * as THREE from 'three';
+import { ctx, W, H, clamp, lerp, seg, eo, eio, eob } from './core/lib.js';
+import { L, Wd, T } from './core/timing.js';
+import { camera } from './core/engine.js';
+import { Human } from './core/human.js';
+import * as SETS from './core/sets.js';
+import { label, pill, warning, blackout } from './core/look2d.js';
+
+const V3 = (x, y, z) => new THREE.Vector3(x, y, z);
+const lerpV = (a, b, k) => a.clone().lerp(b, k);
+function screen(p, cam) { const v = p.clone().project(cam); return [(v.x + 1) / 2 * W, (1 - v.y) / 2 * H]; }
+
+export function buildShots(E) {
+  const S = [], CUES = [], add = (o) => (S.push(o), o), cue = (t, type, o = {}) => CUES.push({ t: +t.toFixed(3), type, ...o });
+  const cut = (i) => (i === 0 ? 0 : L(i) - 0.08);
+  const cam = camera(30);
+  const KLOOK = { aperture: 0.003, maxblur: 0.01, bloom: 0.2 }, XLOOK = { aperture: 0.0015, bloom: 0.55, bloomThreshold: 0.4, vignette: 0.45 }, VLOOK = { aperture: 0.005, maxblur: 0.012, bloom: 0.6, bloomThreshold: 0.5, focus: 3.2 };
+
+  // ── the world ──────────────────────────────────────────────────────────
+  const K = SETS.kitchen(E), hero = new Human({}); hero.group.position.set(0.1, 0, -0.6); K.scene.add(hero.group);
+  const X = SETS.xrayStage(E), xh = new Human({}), xmat = SETS.xrayMaterial(); xh.setBodyMaterial(xmat); const I = SETS.insides(); xh.spine.add(I.group); X.scene.add(xh.group);
+  const VS = SETS.vessel(E);
+  const CYAN = new THREE.Color('#4FD1E8'), RED = new THREE.Color('#FF3B3B');
+  const chest = (h, k) => h.parts[0].scale.set(1 + 0.03 * k, 1 + 0.012 * k, 1 + 0.08 * k);          // inhale 0..1
+  const lungs = (k) => I.lungs.forEach((l) => l.scale.set(1 + 0.12 * k, 1 + 0.1 * k, 1 + 0.12 * k));
+  const reset = () => { hero.pose({}); chest(hero, 0); xh.pose({}); chest(xh, 0); lungs(0); I.heart.scale.setScalar(1); xmat.uniforms.uCol.value.copy(CYAN); };
+  const kitchenRender = (focus, extra = {}) => E.render(K.scene, cam, { ...KLOOK, focus, ...extra });
+  const FACE = V3(0.1, 1.68, -0.6);
+
+  // 1 · HOOK: deep breath in, then hold (face close-up, camera pushing in)
+  { const st = cut(0);
+    add({ id: 'S01', at: st, note: 'face close-up: big inhale, then hold, wide eyes', draw(lt, d, t, blit) {
+      reset(); const k = eo(seg(lt, 0.1, 1.1));
+      hero.pose({ head: [-8 * k + 6 * seg(lt, 1.1, 1.6), 4, 0], spine: [-3 * k, 0, 0], lid: lerp(0, -0.35, k), look: [0, -4 * k], shL: [5, 0, 6 + 4 * k], shR: [5, 0, 6 + 4 * k] }); chest(hero, k);
+      cam.position.copy(lerpV(V3(0.42, 1.72, 0.45), V3(0.3, 1.7, 0.12), eio(lt / d))); cam.lookAt(FACE); kitchenRender(cam.position.distanceTo(FACE)); blit();
+    } });
+    cue(st + 0.12, 'inhale', { dur: 1.0 }); }
+
+  // 2 · the first 30 seconds: nothing much (medium shot, orbit, a timer counts up)
+  { const st = cut(1);
+    add({ id: 'S02', at: st, note: 'medium shot orbit, timer 0:00 to 0:30', draw(lt, d, t, blit) {
+      reset(); hero.pose({ head: [2, -6 + Math.sin(lt * 2) * 3, 0], lid: -0.15, look: [6, 0] }); chest(hero, 1); hero.group.position.y = Math.sin(lt * 3) * 0.003;
+      const a = lerp(0.55, 0.2, eio(lt / d)); cam.position.set(0.1 + Math.sin(a) * 2.1, 1.45, -0.6 + Math.cos(a) * 2.1); cam.lookAt(0.1, 1.25, -0.6); kitchenRender(2.1); blit();
+      const s = Math.round(30 * clamp(lt / (d * 0.85))); pill(`0:${String(s).padStart(2, '0')}`, 540, 1180, eob(seg(lt, 0, 0.25)), '#FFD43B', 'rgba(12,14,20,0.8)', 74);
+    } });
+    cue(st, 'whoosh'); cue(st + 0.05, 'pop', { gain: 0.6 }); }
+
+  // 3 · lungs are full (x-ray) …
+  const blood = Wd('blood', 2) - 0.08;
+  { const st = cut(2);
+    add({ id: 'S03', at: st, note: 'x-ray chest, lungs full', draw(lt, d, t, blit) {
+      reset(); lungs(1 + Math.sin(lt * 3) * 0.05); chest(xh, 1); xh.pose({ head: [4, -6, 0] });
+      cam.position.copy(lerpV(V3(0.55, 1.5, 1.6), V3(0.3, 1.42, 1.1), eio(lt / d))); cam.lookAt(0, 1.33, 0); E.render(X.scene, cam, { ...XLOOK, focus: cam.position.distanceTo(V3(0, 1.33, 0)) }); blit();
+      const [lx, ly] = screen(V3(0.1, 1.42, 0.05), cam); label('LUNGS: FULL', 760, 520, lx, ly, eob(seg(lt, 0.2, 0.45)));
+    } });
+    cue(st, 'whoosh'); cue(st + 0.25, 'pop', { gain: 0.5 }); }
+  // … and your blood is still full of oxygen (macro, bright red cells)
+  add({ id: 'S04', at: blood, note: 'blood vessel, bright red cells, OXYGEN pill', draw(lt, d, t, blit) {
+    VS.update(t, -lt * 1.6, 0, 0); cam.position.set(0, 0, -lt * 1.6); cam.lookAt(0.15, -0.08, -lt * 1.6 - 5); E.render(VS.scene, cam, VLOOK); blit();
+    pill('OXYGEN ✓', 540, 330, eob(seg(lt, 0.15, 0.4)), '#7CF29A');
+  } });
+  cue(blood, 'whoosh'); cue(blood, 'slide', { dur: cut(3) - blood, gain: 0.5 });
+
+  // 5 · carbon dioxide builds up (bubbles fill the vessel, cells darken)
+  { const st = cut(3);
+    add({ id: 'S05', at: st, note: 'CO2 bubbles fill the vessel, cells darken', draw(lt, d, t, blit) {
+      const k = eio(clamp(lt / d)); VS.update(t, -lt * 1.2, 0.15 + 0.85 * k, 0.45 * k);
+      cam.position.set(Math.sin(lt) * 0.1, 0, -lt * 1.2); cam.lookAt(0.1, -0.05, -lt * 1.2 - 5); E.render(VS.scene, cam, VLOOK); blit();
+      pill('CO₂ ↑', 540, 330, eob(seg(lt, 0.1, 0.35)) * (1 + 0.06 * Math.sin(lt * 8)), '#C9D6DD');
+    } });
+    cue(st, 'whoosh'); cue(st + 0.1, 'bubbles', { dur: cut(4) - st }); }
+
+  // 6 · that's what makes you desperate (x-ray turns red, alarm)
+  { const st = cut(4);
+    add({ id: 'S06', at: st, note: 'x-ray body pulses red: CO2 alarm', draw(lt, d, t, blit) {
+      reset(); chest(xh, 1); lungs(1); const p = 0.5 + 0.5 * Math.sin(lt * 7); xmat.uniforms.uCol.value.copy(CYAN).lerp(RED, clamp(lt / 0.8) * (0.55 + 0.45 * p));
+      xh.pose({ head: [-4, 10 * Math.sin(lt * 1.3), 0], spine: [0, 0, Math.sin(lt * 9) * 1.2], lid: -0.4 });
+      cam.position.copy(lerpV(V3(-0.4, 1.6, 1.9), V3(-0.15, 1.6, 1.25), eio(lt / d))); cam.lookAt(0, 1.45, 0); E.render(X.scene, cam, { ...XLOOK, bloom: 0.75, focus: cam.position.distanceTo(V3(0, 1.45, 0)) }); blit();
+      pill('CO₂ ALARM', 540, 1200, eob(seg(lt, 0.2, 0.45)), '#FF5A5A');
+    } });
+    cue(st, 'whoosh'); cue(st + 0.2, 'alarm', { dur: cut(5) - st - 0.2 }); }
+
+  // 7 · diaphragm twitches (3/4 x-ray, lungs jerk)
+  { const st = cut(5), P = 0.62, twitch = (lt) => { const c = (lt - 0.25) % P; return lt < 0.25 ? 0 : Math.exp(-c * 14) * (c >= 0 ? 1 : 0); };
+    add({ id: 'S07', at: st, note: 'diaphragm spasms: lungs jerk, body jolts', draw(lt, d, t, blit) {
+      reset(); const j = twitch(lt); chest(xh, 1 + j * 0.8); lungs(1 + j * 1.2); xmat.uniforms.uCol.value.copy(CYAN).lerp(RED, 0.25);
+      xh.pose({ spine: [6 * j, 0, 0], head: [4 * j, -15, 0], lid: -0.3 });
+      cam.position.copy(lerpV(V3(1.25, 1.35, 1.05), V3(0.95, 1.3, 0.8), eio(lt / d))); cam.lookAt(0, 1.25, 0); E.render(X.scene, cam, { ...XLOOK, focus: cam.position.distanceTo(V3(0, 1.25, 0)) }); blit();
+      const [lx, ly] = screen(V3(0.02, 1.2, 0.08), cam); label('DIAPHRAGM', 330, 1150, lx, ly, eob(seg(lt, 0.3, 0.55)));
+    } });
+    cue(st, 'whoosh'); for (let k = 0; st + 0.25 + k * P < cut(6); k++) cue(st + 0.25 + k * P, 'thud', { gain: 0.45 }); }
+
+  // 8 · the heart slows (heart close-up, beats spreading out)
+  { const st = cut(6), end = cut(7), beats = []; let bt = 0.15, gap = 0.5; while (st + bt < end) { beats.push(bt); bt += gap; gap = Math.min(1.05, gap * 1.18); }
+    const pulse = (lt) => beats.reduce((a, b) => Math.max(a, lt >= b ? Math.exp(-(lt - b) * 9) : 0), 0);
+    add({ id: 'S08', at: st, note: 'heart close-up, beats slow down', draw(lt, d, t, blit) {
+      reset(); chest(xh, 1); lungs(1); const p = pulse(lt); I.heart.scale.setScalar(1 + p * 0.16); I.heart.material.emissiveIntensity = 0.18 + p * 0.8;
+      const H0 = V3(0.025, 1.41, 0.07); cam.position.copy(lerpV(V3(0.25, 1.48, 0.62), V3(0.12, 1.44, 0.42), eio(lt / d))); cam.lookAt(H0); E.render(X.scene, cam, { ...XLOOK, bloom: 0.6, focus: cam.position.distanceTo(H0), aperture: 0.004 }); blit();
+      pill('HEART RATE ↓', 540, 330, eob(seg(lt, 0.2, 0.45)), '#FF8A8A');
+    } });
+    cue(st, 'whoosh'); beats.forEach((b) => cue(st + b, 'heartbeat')); }
+
+  // 9 · the brain switches you off (face, eyes close, fade to black)
+  { const st = cut(7), off = Wd('switches', 7) - st;
+    add({ id: 'S09', at: st, note: 'face: eyes close, head drops, blackout', draw(lt, d, t, blit) {
+      reset(); const k = eio(seg(lt, off - 0.4, d)); chest(hero, 1 - k * 0.5);
+      hero.pose({ head: [12 * k, -4, 6 * k], spine: [5 * k, 0, 2 * k], lid: lerp(-0.1, 1.05, k), look: [0, 6 * k] });
+      cam.position.copy(lerpV(V3(-0.25, 1.7, 0.2), V3(-0.18, 1.62, 0.0), eio(lt / d))); cam.up.set(Math.sin(k * 0.12), 1, 0); cam.lookAt(V3(0.1, 1.64 - 0.05 * k, -0.6)); kitchenRender(0.75, { aperture: 0.004 }); cam.up.set(0, 1, 0); blit();
+      blackout(seg(lt, off, d));
+    } });
+    cue(st + off, 'slide', { dur: 1.2, gain: 0.5 }); }
+
+  // 10 · you pass out, and breathing restarts on its own (dark → x-ray lungs inflate)
+  { const st = cut(8), br = Wd('breathing', 8) - st;
+    add({ id: 'S10', at: st, note: 'from black: lungs inflate by themselves', draw(lt, d, t, blit) {
+      reset(); const on = seg(lt, 0.3, br), cyc = lt > br ? 0.5 - 0.5 * Math.cos((lt - br) * 3.2) : 0; lungs(0.2 + cyc * 1.1); chest(xh, cyc); xh.pose({ head: [10, 0, 4], lid: 1 });
+      cam.position.copy(lerpV(V3(0, 1.4, 1.4), V3(0.05, 1.38, 1.05), eio(lt / d))); cam.lookAt(0, 1.33, 0); E.render(X.scene, cam, { ...XLOOK, exposure: 0.15 + 0.85 * on, focus: cam.position.distanceTo(V3(0, 1.33, 0)) }); blit();
+      label('AUTOMATIC', 780, 560, ...screen(V3(0.1, 1.4, 0.05), cam), lt > br ? eob(seg(lt, br, br + 0.3)) : 0);
+    } });
+    cue(st + br, 'inhale', { dur: 1.0 }); cue(st + br + 1.6, 'inhale', { dur: 1.0, gain: 0.7 }); }
+
+  // 11 · never underwater (back in the kitchen, he looks at us; warning)
+  { const st = cut(9);
+    add({ id: 'S11', at: st, note: 'hero looks at camera, warning sign', draw(lt, d, t, blit) {
+      reset(); hero.pose({ head: [-2, 0, 0], lid: 0.05, look: [0, 0] }); chest(hero, 0.3);
+      cam.position.copy(lerpV(V3(0.0, 1.62, 0.9), V3(0.05, 1.64, 0.55), eio(lt / d))); cam.lookAt(0.1, 1.6, -0.6); kitchenRender(cam.position.distanceTo(FACE)); blit();
+      warning(540, 1150, eob(seg(lt, 0.25, 0.55)) * 0.95);
+    } });
+    cue(st, 'whoosh'); cue(st + 0.25, 'slam', { gain: 0.7 }); }
+
+  return { shots: S, cues: CUES };
+}

package/plugins/faceless-shorts/styles/deep-dive/example/tools/capture.mjs

@@ -0,0 +1,122 @@
+// Frame-exact capture through headless Chrome. No npm packages (Node 22+). Run from the project folder.
+//   node tools/capture.mjs check                         boot, list shots + captions, report errors
+//   node tools/capture.mjs cues                          write data/cues.json (the sound cues, for tools/mix.py)
+//   node tools/capture.mjs sheet review/all.jpg [step=0.5] [cols=9]   contact sheet, a frame every `step` s, time-stamped
+//   node tools/capture.mjs frames review/full "1.2,8.4"  full-size JPEGs of those times
+//   node tools/capture.mjs video renders/out.mp4 [start end] [--draft]   the film (30 fps) with data/mix.wav if it exists
+//   node tools/capture.mjs preview                       serve the project and print a URL to watch it in a browser
+// CHROME=/path/to/chrome overrides the browser.
+import { spawn, spawnSync } from 'node:child_process';
+import http from 'node:http';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const FPS = +(process.env.FPS || 30);
+const CHROME = [process.env.CHROME, '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome', '/Applications/Chromium.app/Contents/MacOS/Chromium',
+  '/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge', '/usr/bin/google-chrome', '/usr/bin/google-chrome-stable', '/usr/bin/chromium',
+  '/usr/bin/chromium-browser', '/snap/bin/chromium', 'C:/Program Files/Google/Chrome/Application/chrome.exe',
+  'C:/Program Files (x86)/Google/Chrome/Application/chrome.exe'].find((p) => p && fs.existsSync(p));
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+const args = process.argv.slice(2), flags = new Set(args.filter((a) => a.startsWith('--')));
+const [mode, ...rest] = args.filter((a) => !a.startsWith('--'));
+
+const MIME = { '.html': 'text/html', '.js': 'text/javascript', '.mjs': 'text/javascript', '.json': 'application/json', '.otf': 'font/otf',
+  '.ttf': 'font/ttf', '.woff2': 'font/woff2', '.wav': 'audio/wav', '.mp3': 'audio/mpeg', '.png': 'image/png', '.jpg': 'image/jpeg' };
+function serve(port = 0) {
+  return new Promise((res) => {
+    const srv = http.createServer((req, r) => {
+      const u = decodeURIComponent(req.url.split('?')[0]), f = path.join(ROOT, u === '/' ? 'index.html' : u);
+      if (!f.startsWith(ROOT) || !fs.existsSync(f) || fs.statSync(f).isDirectory()) { r.writeHead(404); r.end(); return; }
+      r.writeHead(200, { 'Content-Type': MIME[path.extname(f)] || 'application/octet-stream', 'Cache-Control': 'no-store' });
+      fs.createReadStream(f).pipe(r);
+    });
+    srv.listen(port, '127.0.0.1', () => res(srv));
+  });
+}
+
+async function openPage(port) {
+  if (!CHROME) throw new Error('Chrome not found: install Google Chrome or set CHROME=/path/to/chrome');
+  const prof = fs.mkdtempSync(path.join(os.tmpdir(), 'fs-chrome-'));
+  const chrome = spawn(CHROME, ['--headless=new', '--remote-debugging-port=0', `--user-data-dir=${prof}`, '--no-first-run', '--no-default-browser-check',
+    '--hide-scrollbars', '--window-size=1080,1920', '--ignore-gpu-blocklist', '--enable-unsafe-swiftshader', ...(process.env.SOFTWARE_GL ? ['--use-angle=swiftshader'] : []), ...(process.getuid?.() === 0 ? ['--no-sandbox'] : []), '--disable-background-timer-throttling', '--disable-renderer-backgrounding', 'about:blank'], { stdio: 'ignore' });
+  let dbg;
+  for (let i = 0; i < 200 && !dbg; i++) { try { dbg = fs.readFileSync(path.join(prof, 'DevToolsActivePort'), 'utf8').split('\n')[0].trim(); } catch { await sleep(100); } }
+  if (!dbg) throw new Error('Chrome did not start');
+  const r = await fetch(`http://127.0.0.1:${dbg}/json/new?${encodeURIComponent(`http://127.0.0.1:${port}/index.html?capture=1${process.env.QS || ''}`)}`, { method: 'PUT' });
+  const target = await r.json();
+  const ws = new WebSocket(target.webSocketDebuggerUrl);
+  await new Promise((res, rej) => { ws.onopen = res; ws.onerror = rej; });
+  let id = 0; const pend = new Map(), logs = [];
+  ws.onmessage = (e) => {
+    const m = JSON.parse(e.data);
+    if (m.id && pend.has(m.id)) { const p = pend.get(m.id); pend.delete(m.id); m.error ? p.rej(new Error(m.error.message)) : p.res(m.result); }
+    else if (m.method === 'Runtime.exceptionThrown') logs.push('EXCEPTION ' + (m.params.exceptionDetails.exception?.description || m.params.exceptionDetails.text));
+    else if (m.method === 'Runtime.consoleAPICalled' && m.params.type === 'error') logs.push('ERROR ' + m.params.args.map((a) => a.value ?? a.description).join(' '));
+  };
+  const send = (method, params = {}) => new Promise((res, rej) => { const i = ++id; pend.set(i, { res, rej }); ws.send(JSON.stringify({ id: i, method, params })); });
+  const ev = async (expr) => { const x = await send('Runtime.evaluate', { expression: expr, returnByValue: true, awaitPromise: true }); if (x.exceptionDetails) throw new Error(x.exceptionDetails.exception?.description || x.exceptionDetails.text); return x.result.value; };
+  await send('Runtime.enable');
+  for (let i = 0; ; i++) {
+    const st = await ev('window.OP ? (OP.bootError ? "ERR:" + OP.bootError : OP.ready) : false').catch(() => false);
+    if (st === true) break;
+    if (typeof st === 'string') throw new Error('boot failed: ' + st + '\n' + logs.join('\n'));
+    if (i > 1200) throw new Error('boot timeout\n' + logs.join('\n'));
+    await sleep(100);
+  }
+  const close = () => { try { ws.close(); } catch {} chrome.kill('SIGKILL'); setTimeout(() => { try { fs.rmSync(prof, { recursive: true, force: true }); } catch {} }, 300); };
+  return { ev, logs, close };
+}
+const jpg = (d) => Buffer.from(d.slice(d.indexOf(',') + 1), 'base64');
+const FRAME = (t, q, label) => `(() => { const d = OP.frame(${t}, ${q}); ${label ? `const cv = document.getElementById('cv'), c = cv.getContext('2d'); c.setTransform(1,0,0,1,0,0); c.fillStyle = '#000'; c.fillRect(0, 0, 250, 86); c.fillStyle = '#fff'; c.font = '700 60px sans-serif'; c.textAlign = 'left'; c.textBaseline = 'alphabetic'; c.fillText('${(+t).toFixed(2)}', 14, 64); return cv.toDataURL('image/jpeg', ${q});` : 'return d;'} })()`;
+
+const srv = await serve(mode === 'preview' ? 8765 : 0), port = srv.address().port;
+if (mode === 'preview') { console.log(`open http://127.0.0.1:${port}/  (Ctrl+C to stop)`); }
+else {
+  const P = await openPage(port);
+  try {
+    const dur = await P.ev('OP.duration()');
+    if (mode === 'check') {
+      console.log(`duration ${dur.toFixed(2)} s`);
+      for (const s of await P.ev('OP.shots()')) console.log(`${s.id.padEnd(5)} ${s.at.toFixed(2).padStart(6)} → ${s.end.toFixed(2).padStart(6)}  (${(s.end - s.at).toFixed(2)} s)  ${s.note}`);
+      console.log('captions:'); for (const c of await P.ev('OP.captions()')) console.log(`  ${c.s.toFixed(2).padStart(6)}–${c.e.toFixed(2).padEnd(6)} ${c.text}`);
+      let bad = 0; for (let t = 0; t < dur; t += 0.25) { try { await P.ev(`OP.draw(${t})`); } catch (e) { bad++; console.log(`ERROR at ${t.toFixed(2)}: ${e.message.split('\n')[0]}`); } }
+      if (P.logs.length) console.log(P.logs.join('\n'));
+      console.log(bad || P.logs.length ? 'CHECK FAILED' : 'CHECK OK');
+    } else if (mode === 'cues') {
+      const cues = await P.ev('OP.cues()');
+      fs.mkdirSync(path.join(ROOT, 'data'), { recursive: true });
+      fs.writeFileSync(path.join(ROOT, 'data/cues.json'), JSON.stringify({ duration: dur, cues }, null, 1));
+      console.log(`data/cues.json: ${cues.length} cues, ${dur.toFixed(2)} s`);
+    } else if (mode === 'frames') {
+      const dir = path.resolve(ROOT, rest[0] || 'review/frames'); fs.mkdirSync(dir, { recursive: true });
+      for (const t of (rest[1] || '0').split(',').map(Number)) { fs.writeFileSync(path.join(dir, `t${t.toFixed(2)}.jpg`), jpg(await P.ev(FRAME(t, 0.92)))); }
+      console.log(dir);
+    } else if (mode === 'sheet') {
+      const out = path.resolve(ROOT, rest[0] || 'review/all.jpg'), step = +(rest[1] || 0.5), cols = +(rest[2] || 9);
+      const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'fs-sheet-')); let n = 0;
+      for (let t = step / 2; t < dur; t += step) fs.writeFileSync(path.join(tmp, `f${String(n++).padStart(4, '0')}.jpg`), jpg(await P.ev(FRAME(t, 0.8, true))));
+      const rows = Math.ceil(n / cols); fs.mkdirSync(path.dirname(out), { recursive: true });
+      const r = spawnSync('ffmpeg', ['-v', 'error', '-y', '-framerate', '1', '-i', path.join(tmp, 'f%04d.jpg'), '-vf', `scale=216:384,tile=${cols}x${rows}:padding=4:color=black`, '-frames:v', '1', '-q:v', '3', out]);
+      fs.rmSync(tmp, { recursive: true, force: true });
+      if (r.status) throw new Error('ffmpeg: ' + r.stderr); console.log(`${out} (${n} frames, every ${step} s)`);
+    } else if (mode === 'video') {
+      const out = path.resolve(ROOT, rest[0] || 'renders/video.mp4'); fs.mkdirSync(path.dirname(out), { recursive: true });
+      const mix = path.join(ROOT, 'data/mix.wav'), hasMix = fs.existsSync(mix), a0 = rest[1] ? +rest[1] : 0, a1 = rest[2] ? Math.min(+rest[2], dur) : dur, n = Math.round((a1 - a0) * FPS);
+      const ff = spawn('ffmpeg', ['-v', 'error', '-y', '-f', 'image2pipe', '-framerate', String(FPS), '-i', '-',
+        ...(hasMix ? ['-ss', String(a0), '-t', String(a1 - a0), '-i', mix] : ['-f', 'lavfi', '-i', 'anullsrc=r=48000:cl=stereo']), '-map', '0:v', '-map', '1:a',
+        '-c:v', 'libx264', '-preset', flags.has('--draft') ? 'ultrafast' : 'veryfast', '-crf', flags.has('--draft') ? '28' : '18', '-pix_fmt', 'yuv420p',
+        '-c:a', 'aac', '-b:a', '192k', '-shortest', '-movflags', '+faststart', out], { stdio: ['pipe', 'inherit', 'inherit'] });
+      const t0 = Date.now();
+      for (let i = 0; i < n; i++) {
+        const b = jpg(await P.ev(FRAME(a0 + i / FPS, flags.has('--draft') ? 0.8 : 0.93)));
+        if (!ff.stdin.write(b)) await new Promise((r) => ff.stdin.once('drain', r));
+        if (i % 150 === 0) process.stdout.write(`\r${i}/${n} frames`);
+      }
+      ff.stdin.end(); await new Promise((r) => ff.on('close', r));
+      console.log(`\r${out} (${n} frames, ${hasMix ? 'with data/mix.wav' : 'SILENT: no data/mix.wav'}, ${((Date.now() - t0) / 1000).toFixed(0)} s)`);
+    } else console.log('modes: check · cues · sheet · frames · video · preview');
+  } finally { P.close(); srv.close(); }
+}