@amg555/frameforge-mcp 2.7.3 → 2.7.7

package/plugins/faceless-shorts/styles/night-file/example/sheet.html

@@ -0,0 +1,11 @@
+<!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-Black.otf'); }
+@font-face { font-family: 'FreeMono'; font-weight: 700; src: url('fonts/FreeMonoBold.ttf'); }
+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/night-file/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/night-file/example/src/core/captions.js

@@ -0,0 +1,49 @@
+// 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';
+import { captionMono, CAPLOOK } from './kit.js';
+
+export const CAP = { y: 1400, size: 150, maxW: 900 };
+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;
+  // typewriter: the caption types on, letter by letter
+  const lt = t - c.s, total = c.words.reduce((a, w) => a + w.txt.length + 1, 0), n = Math.floor(clamp(lt / 0.35) * total);
+  let left = n; const shown = c.words.map((w) => { const k = Math.max(0, Math.min(w.txt.length, left)); left -= w.txt.length + 1; return { ...w, txt: w.txt.slice(0, k) }; }).filter((w) => w.txt.length);
+  if (shown.length) captionMono(shown, 540, CAPLOOK.y, 1);
+}

package/plugins/faceless-shorts/styles/night-file/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/night-file/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/night-file/example/src/core/kit.js

@@ -0,0 +1,151 @@
+// Night File: the COMPONENT ZOO. Unsolved mysteries and creepy facts: dark rooms with ONE light source, faceless
+// silhouettes rim-lit in red (the person the story is about glows solid red), case files, typewriter dates, film grain.
+import { ctx, W, H, TAU, lerp, clamp, rnd, rr, circle, ell, line } from './lib.js';
+
+export const P = {
+  void: '#0A0C11', room: '#151A24', mid: '#1F2633', light: '#2B3343', beam: '#F1D9A6', red: '#E4322B', redDeep: '#8E1D1A',
+  cream: '#EAE3D2', tape: '#E9C46A', steel: '#5B6577', paper: '#D8CFBA', manila: '#B8955A', cork: '#4A3426', ink: '#06070A',
+};
+const MONO = 'FreeMono';
+
+// ═════════════════════════ PEOPLE: faceless silhouettes ═════════════════════════
+const rad = (d) => d * Math.PI / 180;
+function body(o, col, grow) {
+  const h = o.h || 700, d = o.dir || 1, wk = o.walk, sw = wk != null ? Math.sin(wk) : 0, lw = h * 0.075 + grow;
+  const hip = [o.x, o.y - h * 0.47], sh = [o.x, o.y - h * 0.8];
+  const leg = (a, k) => { const kn = [hip[0] + Math.sin(rad(a)) * h * 0.24 * d, hip[1] + Math.cos(rad(a)) * h * 0.24]; line([hip, kn, [kn[0] + Math.sin(rad(a - k)) * h * 0.23 * d, kn[1] + Math.cos(rad(a - k)) * h * 0.23]], col, lw); };
+  const arm = (a, e) => { const el = [sh[0] + Math.sin(rad(a)) * h * 0.18 * d, sh[1] + h * 0.03 + Math.cos(rad(a)) * h * 0.18]; line([[sh[0], sh[1] + h * 0.03], el, [el[0] + Math.sin(rad(a + e)) * h * 0.17 * d, el[1] + Math.cos(rad(a + e)) * h * 0.17]], col, lw * 0.85); };
+  const A = o.arms || { L: [wk != null ? -sw * 18 : -6, 8], R: [wk != null ? sw * 18 : 6, 10] };
+  const L = o.legs || { L: [wk != null ? sw * 22 : 4, wk != null ? Math.max(0, -sw) * 24 : 2], R: [wk != null ? -sw * 22 : -4, wk != null ? Math.max(0, sw) * 24 : 2] };
+  leg(L.L[0], L.L[1]); arm(A.L[0], A.L[1]); leg(L.R[0], L.R[1]);
+  ctx.beginPath(); ctx.moveTo(sh[0] - h * 0.11 - grow / 2, sh[1]); ctx.lineTo(sh[0] + h * 0.11 + grow / 2, sh[1]); ctx.lineTo(hip[0] + h * 0.08 + grow / 2, hip[1] + h * 0.02); ctx.lineTo(hip[0] - h * 0.08 - grow / 2, hip[1] + h * 0.02); ctx.closePath();
+  ctx.fillStyle = col; ctx.fill(); ctx.lineJoin = 'round'; ctx.lineWidth = h * 0.05 + grow; ctx.strokeStyle = col; ctx.stroke();
+  line([[sh[0], sh[1] - h * 0.02], [sh[0], sh[1] - h * 0.06]], col, h * 0.06 + grow);
+  ell(sh[0] + d * h * 0.01, sh[1] - h * 0.12, h * 0.068 + grow / 2, h * 0.083 + grow / 2, col);
+  arm(A.R[0], A.R[1]);
+}
+/**
+ * A faceless figure standing on (x, y). o = { h (default 700), dir, walk (phase), arms, legs (like Stick Story),
+ * glow: true = THE subject (solid glowing red), else a dark silhouette with a thin red rim light; dim 0..1 fades it }
+ */
+export function figure(o) {
+  ctx.save(); ctx.globalAlpha = 1 - (o.dim || 0);
+  if (o.glow) { ctx.shadowColor = P.red; ctx.shadowBlur = 50; body(o, P.red, 0); ctx.shadowBlur = 18; body(o, P.red, 0); ctx.shadowBlur = 0; body(o, '#F04A3E', -6); }
+  else { ctx.shadowColor = P.red; ctx.shadowBlur = 22; body(o, P.redDeep, 5); ctx.shadowBlur = 0; body(o, P.ink, 0); }
+  ctx.restore();
+}
+
+// ═════════════════════════ ROOMS & PLACES (full 1080x1920) ═════════════════════════
+/** soft light cone from (x, y) down to the floor width at fy; a = strength */
+export function beam(x, y, topW, botW, fy, a = 0.22) {
+  const g = ctx.createLinearGradient(0, y, 0, fy); g.addColorStop(0, `rgba(241,217,166,${a})`); g.addColorStop(1, 'rgba(241,217,166,0)');
+  ctx.beginPath(); ctx.moveTo(x - topW / 2, y); ctx.lineTo(x + topW / 2, y); ctx.lineTo(x + botW / 2, fy); ctx.lineTo(x - botW / 2, fy); ctx.closePath(); ctx.fillStyle = g; ctx.fill();
+  ell(x, fy, botW * 0.45, 40, `rgba(241,217,166,${a * 0.6})`);
+}
+/** one-point-perspective corridor with doors and one ceiling light. o = { light: 0..1 flicker, doorOpen: 0..1 (last door) } */
+export function corridor(o = {}) {
+  const L = o.light ?? 1, vx = 540, vy = 760, bw = 300, bh = 420;
+  ctx.fillStyle = P.void; ctx.fillRect(-300, -300, W + 600, H + 600);
+  const poly = (pts, c) => { ctx.beginPath(); pts.forEach((p, i) => (i ? ctx.lineTo(...p) : ctx.moveTo(...p))); ctx.closePath(); ctx.fillStyle = c; ctx.fill(); };
+  poly([[-300, -300], [vx - bw / 2, vy - bh / 2], [vx - bw / 2, vy + bh / 2], [-300, H + 300]], P.room);
+  poly([[W + 300, -300], [vx + bw / 2, vy - bh / 2], [vx + bw / 2, vy + bh / 2], [W + 300, H + 300]], P.room);
+  poly([[-300, H + 300], [vx - bw / 2, vy + bh / 2], [vx + bw / 2, vy + bh / 2], [W + 300, H + 300]], P.mid);
+  poly([[-300, -300], [vx - bw / 2, vy - bh / 2], [vx + bw / 2, vy - bh / 2], [W + 300, -300]], '#10141C');
+  ctx.fillStyle = P.light; ctx.fillRect(vx - bw / 2, vy - bh / 2, bw, bh);
+  rr(vx - 60, vy - 80, 120, 280, 6); ctx.fillStyle = o.doorOpen ? '#000' : '#232A38'; ctx.fill();
+  if (o.doorOpen) { ctx.save(); ctx.globalAlpha = o.doorOpen; rr(vx - 60, vy - 80, 120, 280, 6); ctx.fillStyle = P.redDeep; ctx.fill(); ctx.restore(); }
+  for (const [s, k] of [[-1, 0.25], [-1, 0.6], [1, 0.4]]) {                       // side doors
+    const x1 = lerp(s < 0 ? -300 : W + 300, vx + s * bw / 2, k), x2 = lerp(s < 0 ? -300 : W + 300, vx + s * bw / 2, k + 0.12);
+    const yT = (x) => lerp(-300, vy - bh / 2, Math.abs(x - (s < 0 ? -300 : W + 300)) / Math.abs(vx + s * bw / 2 - (s < 0 ? -300 : W + 300)));
+    const yB = (x) => lerp(H + 300, vy + bh / 2, Math.abs(x - (s < 0 ? -300 : W + 300)) / Math.abs(vx + s * bw / 2 - (s < 0 ? -300 : W + 300)));
+    const t1 = lerp(yT(x1), yB(x1), 0.25), b1 = yB(x1) - 4, t2 = lerp(yT(x2), yB(x2), 0.25), b2 = yB(x2) - 4;
+    poly([[x1, t1], [x2, t2], [x2, b2], [x1, b1]], '#0E121A');
+  }
+  if (L > 0) { beam(vx, 260, 70, 760, 1500, 0.2 * L); rr(vx - 70, 250, 140, 18, 8); ctx.fillStyle = `rgba(241,217,166,${0.9 * L})`; ctx.fill(); }
+}
+/** a house at night with ONE lit window, a streetlight, trees. o = { lit: 0..1 window, moon } */
+export function houseNight(o = {}) {
+  const g = ctx.createLinearGradient(0, 0, 0, H); g.addColorStop(0, '#0B0F1A'); g.addColorStop(1, '#151B28'); ctx.fillStyle = g; ctx.fillRect(-300, -300, W + 600, H + 600);
+  circle(820, 330, 70, '#D9D4C4'); circle(845, 315, 64, '#0D111C');
+  for (let i = 0; i < 6; i++) { const x = rnd(i) * W; ctx.beginPath(); ctx.moveTo(x - 90, 1250); ctx.lineTo(x, 900 - rnd(i + 3) * 200); ctx.lineTo(x + 90, 1250); ctx.fillStyle = '#0A0D14'; ctx.fill(); }
+  ctx.fillStyle = '#0E121B'; ctx.fillRect(-300, 1250, W + 600, H); ctx.beginPath(); ctx.moveTo(180, 820); ctx.lineTo(540, 560); ctx.lineTo(900, 820); ctx.closePath(); ctx.fillStyle = '#1A2030'; ctx.fill();
+  ctx.fillStyle = '#161B27'; ctx.fillRect(220, 820, 640, 440);
+  for (const [x, y, lit] of [[300, 900, 0], [640, 900, o.lit ?? 1], [300, 1080, 0]]) { rr(x, y, 140, 120, 4); ctx.fillStyle = lit ? `rgba(241,200,120,${0.25 + 0.75 * lit})` : '#0C1018'; ctx.fill(); if (lit) { ctx.save(); ctx.shadowColor = '#F1C878'; ctx.shadowBlur = 60 * lit; ctx.fill(); ctx.restore(); ctx.fillStyle = '#161B27'; ctx.fillRect(x + 66, y, 8, 120); } }
+  rr(500, 1100, 110, 160, 4); ctx.fillStyle = '#0C1018'; ctx.fill();
+  line([[960, 1300], [960, 700], [880, 680]], '#2A3140', 14); beam(880, 690, 40, 420, 1300, 0.18);
+}
+/** corkboard case wall: pinned photos and red string. o = { strings: 0..1 drawn } */
+export function caseWall(o = {}) {
+  ctx.fillStyle = P.cork; ctx.fillRect(-300, -300, W + 600, H + 600);
+  for (let i = 0; i < 400; i++) { ctx.fillStyle = `rgba(0,0,0,${0.12 + rnd(i) * 0.15})`; ctx.fillRect(rnd(i + 1) * W, rnd(i + 2) * H, 4, 4); }
+  const pins = [[260, 420], [780, 360], [540, 820], [230, 1120], [830, 1080]];
+  const k = o.strings ?? 1; ctx.strokeStyle = P.red; ctx.lineWidth = 6;
+  [[0, 2], [1, 2], [2, 3], [2, 4], [0, 1]].forEach(([a, b], i) => { const p = clamp(k * 5 - i); if (p <= 0) return; ctx.beginPath(); ctx.moveTo(...pins[a]); ctx.lineTo(lerp(pins[a][0], pins[b][0], p), lerp(pins[a][1], pins[b][1], p)); ctx.stroke(); });
+  pins.forEach(([x, y], i) => { polaroid(x, y + 120, 0.9, (rnd(i) - 0.5) * 0.2, i === 2 ? 'glow' : 'dark'); circle(x, y, 14, P.red); });
+}
+
+// ═════════════════════════ PROPS & GRAPHICS ═════════════════════════
+/** polaroid photo with a tiny silhouette inside ('dark' | 'glow' | 'house' | 'empty') */
+export function polaroid(x, y, s = 1, rot = 0, kind = 'dark') {
+  ctx.save(); ctx.translate(x, y); ctx.rotate(rot); ctx.scale(s, s);
+  rr(-120, -140, 240, 280, 4); ctx.fillStyle = P.paper; ctx.fill(); ctx.fillStyle = '#1B212D'; ctx.fillRect(-100, -120, 200, 190);
+  if (kind === 'dark' || kind === 'glow') { ctx.save(); ctx.beginPath(); ctx.rect(-100, -120, 200, 190); ctx.clip(); figure({ x: 0, y: 140, h: 240, glow: kind === 'glow' }); ctx.restore(); }
+  if (kind === 'house') { ctx.beginPath(); ctx.moveTo(-60, 0); ctx.lineTo(0, -60); ctx.lineTo(60, 0); ctx.fillStyle = '#2B3343'; ctx.fill(); ctx.fillStyle = '#2B3343'; ctx.fillRect(-50, 0, 100, 60); ctx.fillStyle = '#F1C878'; ctx.fillRect(10, 15, 24, 20); }
+  ctx.restore();
+}
+/** manila case folder with a typed label and an UNSOLVED stamp (stamp 0..1) */
+export function caseFile(x, y, s = 1, label = 'CASE NO. 94-1187', stamp = 1, rot = -0.05) {
+  ctx.save(); ctx.translate(x, y); ctx.rotate(rot); ctx.scale(s, s);
+  rr(-300, -230, 220, 60, 10); ctx.fillStyle = '#A58548'; ctx.fill();
+  rr(-320, -200, 640, 420, 12); ctx.fillStyle = P.manila; ctx.fill();
+  rr(-260, -150, 360, 70, 4); ctx.fillStyle = P.paper; ctx.fill();
+  ctx.font = `700 36px ${MONO}`; ctx.fillStyle = P.ink; ctx.textAlign = 'left'; ctx.textBaseline = 'middle'; ctx.fillText(label, -245, -113);
+  for (let i = 0; i < 3; i++) { ctx.fillStyle = 'rgba(0,0,0,0.25)'; ctx.fillRect(-260, -30 + i * 50, 420 - i * 90, 16); }
+  if (stamp > 0) { ctx.save(); ctx.translate(110, 120); ctx.rotate(-0.2); ctx.scale(lerp(1.8, 1, clamp(stamp)), lerp(1.8, 1, clamp(stamp))); ctx.globalAlpha = clamp(stamp * 2) * 0.9; rr(-170, -48, 340, 96, 8); ctx.strokeStyle = P.red; ctx.lineWidth = 9; ctx.stroke(); ctx.font = `700 64px ${MONO}`; ctx.fillStyle = P.red; ctx.textAlign = 'center'; ctx.fillText('UNSOLVED', 0, 4); ctx.restore(); }
+  ctx.restore();
+}
+/** wall clock showing h:m */
+export function clock(x, y, s, hh, mm) {
+  ctx.save(); ctx.translate(x, y); ctx.scale(s, s); circle(0, 0, 150, '#2A303D'); circle(0, 0, 130, P.paper);
+  for (let i = 0; i < 12; i++) { ctx.save(); ctx.rotate(i * Math.PI / 6); ctx.fillStyle = P.ink; ctx.fillRect(-4, -122, 8, i % 3 ? 14 : 26); ctx.restore(); }
+  ctx.save(); ctx.rotate((hh % 12 + mm / 60) * Math.PI / 6); ctx.fillStyle = P.ink; ctx.fillRect(-7, -70, 14, 80); ctx.restore();
+  ctx.save(); ctx.rotate(mm * Math.PI / 30); ctx.fillStyle = P.ink; ctx.fillRect(-5, -108, 10, 118); ctx.restore(); circle(0, 0, 10, P.red); ctx.restore();
+}
+export function cassette(x, y, s = 1, spin = 0) {
+  ctx.save(); ctx.translate(x, y); ctx.scale(s, s); rr(-180, -110, 360, 220, 14); ctx.fillStyle = '#2A2F3A'; ctx.fill(); rr(-150, -85, 300, 80, 8); ctx.fillStyle = P.paper; ctx.fill();
+  ctx.font = `700 30px ${MONO}`; ctx.fillStyle = P.red; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('TAPE 3', 0, -45);
+  for (const sx of [-70, 70]) { circle(sx, 40, 34, P.ink); ctx.save(); ctx.translate(sx, 40); ctx.rotate(spin); for (let i = 0; i < 6; i++) { ctx.rotate(Math.PI / 3); ctx.fillStyle = P.paper; ctx.fillRect(-4, -24, 8, 14); } ctx.restore(); }
+  ctx.restore();
+}
+/** yellow evidence marker tent with a number */
+export function marker(x, y, s, n) { ctx.save(); ctx.translate(x, y); ctx.scale(s, s); ctx.beginPath(); ctx.moveTo(-60, 0); ctx.lineTo(-40, -110); ctx.lineTo(40, -110); ctx.lineTo(60, 0); ctx.closePath(); ctx.fillStyle = P.tape; ctx.fill(); ctx.font = '900 70px Inter'; ctx.fillStyle = P.ink; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(String(n), 0, -52); ctx.restore(); }
+/** hand-drawn red circle around (x, y); p 0..1 draws it on */
+export function redCircle(x, y, rx, ry, p = 1) { if (p <= 0) return; ctx.beginPath(); for (let i = 0; i <= 60 * p; i++) { const a = -1.9 + i / 60 * (TAU + 0.5), k = 1 + 0.05 * Math.sin(i * 0.7); const px = x + Math.cos(a) * rx * k, py = y + Math.sin(a) * ry * k; i ? ctx.lineTo(px, py) : ctx.moveTo(px, py); } ctx.strokeStyle = P.red; ctx.lineWidth = 10; ctx.lineCap = 'round'; ctx.stroke(); }
+/** typewriter date stamp, lower-left; p 0..1 types it on (with a cursor) */
+export function dateStamp(line1, line2, p = 1, x = 90, y = 1240) {
+  const n1 = Math.floor(line1.length * clamp(p * 1.6)), n2 = Math.floor(line2.length * clamp(p * 1.6 - 0.6));
+  ctx.textAlign = 'left'; ctx.textBaseline = 'alphabetic'; ctx.shadowColor = 'rgba(0,0,0,0.8)'; ctx.shadowBlur = 12;
+  ctx.font = `700 92px ${MONO}`; ctx.fillStyle = P.cream; ctx.fillText(line1.slice(0, n1), x, y);
+  ctx.font = `700 56px ${MONO}`; ctx.fillStyle = P.red; ctx.fillText(line2.slice(0, n2), x, y + 76);
+  ctx.shadowBlur = 0; if (p < 1 && Math.floor(p * 20) % 2 === 0) { ctx.fillStyle = P.cream; ctx.fillRect(x + (n2 ? ctx.measureText(line2.slice(0, n2)).width : (ctx.font = `700 92px ${MONO}`, ctx.measureText(line1.slice(0, n1)).width)) + 6, y + (n2 ? 18 : -56), 26, n2 ? 46 : 64); }
+}
+/** black redaction bars over text lines (for "the file says…") */
+export function redacted(x, y, widths, p = 1) { widths.forEach((w, i) => { ctx.fillStyle = P.ink; ctx.fillRect(x, y + i * 60, w * clamp(p * 2 - i * 0.3), 36); }); }
+
+// ═════════════════════════ FILM LOOK (call last, before captions) ═════════════════════════
+export function filmLook(t, vign = 0.75) {
+  const g = ctx.createRadialGradient(540, 900, 300, 540, 960, 1250); g.addColorStop(0, 'rgba(0,0,0,0)'); g.addColorStop(1, `rgba(0,0,0,${vign})`);
+  ctx.fillStyle = g; ctx.fillRect(-300, -300, W + 600, H + 600);
+  const f = Math.floor(t * 24); for (let i = 0; i < 900; i++) { ctx.fillStyle = rnd(i + f * 13) > 0.5 ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.12)'; ctx.fillRect(rnd(i * 3 + f) * W, rnd(i * 7 + f * 2) * H, 3, 3); }
+}
+
+// ═════════════════════════ CAPTION LOOK ═════════════════════════
+export const CAPLOOK = { font: `700 86px ${MONO}`, y: 1560, maxW: 940, fg: P.cream, hi: P.red };
+export function captionMono(words, x, y, sc = 1, look = CAPLOOK) {
+  ctx.save(); ctx.translate(x, y); ctx.scale(sc, sc); ctx.font = look.font; ctx.textBaseline = 'middle'; ctx.textAlign = 'left';
+  const sp = 30, ws = words.map((w) => ctx.measureText(w.txt).width), tw = ws.reduce((a, b) => a + b, 0) + sp * (words.length - 1);
+  const fit = Math.min(1, (look.maxW || 960) / tw); ctx.scale(fit, fit);
+  ctx.shadowColor = 'rgba(0,0,0,0.95)'; ctx.shadowBlur = 18; let cx = -tw / 2;
+  words.forEach((w, i) => { ctx.fillStyle = w.hi ? look.hi : look.fg; ctx.fillText(w.txt, cx, 0); cx += ws[i] + sp; });
+  ctx.restore();
+}

package/plugins/faceless-shorts/styles/night-file/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/night-file/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]; }