@amg555/frameforge-mcp 2.7.3 → 2.7.7

package/plugins/faceless-shorts/styles/stick-story/example/data/words.txt

@@ -0,0 +1,110 @@
+   0.35    0.55  L0  What
+   0.57    0.80  L0  would
+   0.82    0.99  L0  you
+   1.01    1.15  L0  do
+   1.16    1.30  L0  if
+   1.31    1.49  L0  the
+   1.50    1.73  L0  power
+   1.75    1.96  L0  went
+   1.97    2.15  L0  out
+   2.16    2.33  L0  for
+   2.35    2.58  L0  three
+   2.60    2.83  L0  whole
+   2.85    3.06  L0  days?
+   3.33    3.54  L1  It's
+   3.56    3.81  L1  nine
+   3.83    4.00  L1  at
+   4.01    4.30  L1  night,
+   4.43    4.64  L1  and
+   4.65    5.05  L1  suddenly
+   5.09    5.56  L1  everything
+   5.60    5.85  L1  goes
+   5.87    6.12  L1  dark.
+   6.40    6.64  L2  Step
+   6.66    6.86  L2  one:
+   6.88    7.11  L2  don't
+   7.13    7.40  L2  touch
+   7.43    7.63  L2  the
+   7.64    7.95  L2  fridge.
+   8.24    8.41  L3  If
+   8.43    8.63  L3  you
+   8.65    8.90  L3  keep
+   8.92    9.09  L3  it
+   9.11    9.43  L3  closed,
+   9.56    9.80  L3  your
+   9.83   10.07  L3  food
+  10.09   10.38  L3  stays
+  10.40   10.65  L3  cold
+  10.67   10.88  L3  for
+  10.90   11.18  L3  about
+  11.21   11.45  L3  four
+  11.47   11.76  L3  hours,
+  11.88   12.09  L3  and
+  12.11   12.24  L3  a
+  12.26   12.50  L3  full
+  12.52   12.88  L3  freezer
+  12.91   13.20  L3  lasts
+  13.22   13.43  L3  two
+  13.45   13.70  L3  days.
+  13.98   14.20  L4  Step
+  14.21   14.40  L4  two:
+  14.41   14.63  L4  grab
+  14.65   14.77  L4  a
+  14.78   15.19  L4  flashlight,
+  15.32   15.50  L4  not
+  15.52   15.63  L4  a
+  15.64   15.93  L4  candle.
+  16.21   16.59  L5  Candles
+  16.62   16.84  L5  and
+  16.86   17.11  L5  dark
+  17.13   17.43  L5  rooms
+  17.46   17.67  L5  are
+  17.69   17.83  L5  a
+  17.84   18.10  L5  real
+  18.12   18.38  L5  fire
+  18.40   18.66  L5  risk.
+  18.94   19.18  L6  Step
+  19.20   19.47  L6  three:
+  19.49   19.73  L6  fill
+  19.75   19.99  L6  some
+  20.01   20.35  L6  bottles
+  20.38   20.62  L6  with
+  20.64   20.91  L6  water,
+  21.18   21.45  L7  about
+  21.48   21.60  L7  a
+  21.61   21.92  L7  gallon
+  21.95   22.15  L7  per
+  22.17   22.48  L7  person,
+  22.61   22.88  L7  every
+  22.90   23.10  L7  day.
+  23.38   23.65  L8  Step
+  23.67   23.94  L8  four:
+  23.96   24.31  L8  unplug
+  24.34   24.60  L8  your
+  24.63   25.18  L8  electronics,
+  25.34   25.68  L9  because
+  25.71   25.95  L9  when
+  25.97   26.16  L9  the
+  26.18   26.45  L9  power
+  26.48   26.75  L9  comes
+  26.77   27.01  L9  back,
+  27.13   27.25  L9  a
+  27.27   27.54  L9  surge
+  27.56   27.76  L9  can
+  27.78   27.98  L9  fry
+  27.99   28.23  L9  them.
+  28.51   28.70  L10 Day
+  28.71   28.97  L10 three:
+  28.99   29.18  L10 the
+  29.20   29.49  L10 lights
+  29.52   29.84  L10 flicker
+  29.87   30.09  L10 back
+  30.11   30.27  L10 on.
+  30.54   30.71  L11 And
+  30.73   31.02  L11 because
+  31.04   31.21  L11 you
+  31.23   31.43  L11 were
+  31.45   31.68  L11 ready,
+  31.78   32.02  L11 you're
+  32.03   32.33  L11 totally
+  32.35   32.56  L11 fine.

package/plugins/faceless-shorts/styles/stick-story/example/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html><head><meta charset="utf-8"><title>Stick Story</title>
+<style>
+@font-face { font-family: 'Inter'; font-weight: 900; src: url('fonts/Inter-Black.otf'); }
+@font-face { font-family: 'Inter'; font-weight: 800; src: url('fonts/Inter-ExtraBold.otf'); }
+html, body { margin: 0; background: #111; height: 100%; } body { display: flex; align-items: center; justify-content: center; }
+canvas { display: block; height: 100vh; width: auto; } body.capture canvas { height: auto; }
+#play { position: fixed; font: 900 28px Inter, sans-serif; padding: 18px 36px; border: 0; border-radius: 40px; background: #F2B23E; cursor: pointer; }
+</style></head>
+<body><canvas id="cv" width="1080" height="1920"></canvas><button id="play" hidden>▶ PLAY</button>
+<script>if (location.search.includes('capture')) document.body.className = 'capture';</script>
+<script type="module" src="src/main.js"></script></body></html>

package/plugins/faceless-shorts/styles/stick-story/example/script.json

@@ -0,0 +1,27 @@
+{
+  "title": "What If The Power Went Out For 3 Days?",
+  "voice": "am_puck",
+  "speed": 1.0,
+  "lead": 0.35,
+  "outro": 1.0,
+  "gap": 0.26,
+  "music": "bed",
+  "sources": [
+    "American Red Cross, Power Outage Safety (fridge keeps food cold ~4 hours if unopened; a full freezer ~48 hours; use flashlights, not candles; disconnect electronics to avoid surge damage)",
+    "Ready.gov, Water (store at least one gallon of water per person per day)"
+  ],
+  "lines": [
+    { "text": "What would you do if the power went out for three whole days?", "caps": "What would *you | do if the *power | went *out?" },
+    { "text": "It's nine at night, and suddenly everything goes dark.", "caps": "Nine at *night | everything goes *dark." },
+    { "text": "Step one: don't touch the fridge.", "caps": "Step *one: | don't touch the *fridge." },
+    { "text": "If you keep it closed, your food stays cold for about four hours, and a full freezer lasts two days.", "caps": "Keep it *closed | food stays *cold | about four *hours | a full *freezer | lasts two *days." },
+    { "text": "Step two: grab a flashlight, not a candle.", "caps": "Step *two: | grab a *flashlight | not a *candle." },
+    { "text": "Candles and dark rooms are a real fire risk.", "caps": "*Candles? | real *fire risk." },
+    { "text": "Step three: fill some bottles with water,", "caps": "Step *three: | fill some *bottles | with *water," },
+    { "text": "about a gallon per person, every day.", "caps": "a *gallon | per *person, | every *day." },
+    { "text": "Step four: unplug your electronics,", "caps": "Step *four: | unplug your *electronics," },
+    { "text": "because when the power comes back, a surge can fry them.", "caps": "power comes *back | a *surge | can *fry them." },
+    { "text": "Day three: the lights flicker back on.", "caps": "Day *three: | the *lights | flicker back *on." },
+    { "text": "And because you were ready, you're totally fine.", "caps": "You were *ready, | so you're *fine." }
+  ]
+}

package/plugins/faceless-shorts/styles/stick-story/example/sheet.html

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

package/plugins/faceless-shorts/styles/stick-story/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/stick-story/example/src/core/captions.js

@@ -0,0 +1,47 @@
+// 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 { captionBar, 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;
+  const lt = t - c.s, sc = lt < 0.18 ? lerp(0.7, 1, eob(seg(lt, 0, 0.18))) : 1;
+  captionBar(c.words, 540, CAPLOOK.y, sc);
+}

package/plugins/faceless-shorts/styles/stick-story/example/src/core/kit.js

@@ -0,0 +1,166 @@
+// Stick Story: the COMPONENT ZOO. Black stick people with eyes that act, flat illustrated rooms, gold step cards.
+import { ctx, W, H, TAU, lerp, clamp, rnd, rr, circle, ell, line } from './lib.js';
+
+export const P = {
+  wall: '#EFE6D6', wallShade: '#E2D5BE', floor: '#C99F7A', floorDark: '#B48A66', base: '#F7F1E6',
+  ink: '#1C1C22', gold: '#F2B23E', goldDark: '#C98A1C', navy: '#22304A', red: '#E2574C', green: '#6DB36A',
+  sky: '#A9D3E8', white: '#FFFFFF', wood: '#9C6B48', sofa: '#5E7FA3', sofaDark: '#4C6A8C', rug: '#D9826B', plant: '#6E9E5B',
+  // night versions
+  nWall: '#2C3348', nWallShade: '#252B3D', nFloor: '#3B3446', nFloorDark: '#322C3C', nSky: '#16213A', lamp: '#FFD98A',
+};
+export const FLOOR = 1350;                         // where the wall meets the floor in every room
+export const GROUND = 1560;                        // where people stand
+
+// ═════════════════════════ STICK PERSON ═════════════════════════
+const rad = (d) => d * Math.PI / 180;
+function limb(x, y, len1, a1, len2, a2, dir, w) {     // angles in degrees from straight down, + = toward facing dir
+  const k = [x + Math.sin(rad(a1)) * len1 * dir, y + Math.cos(rad(a1)) * len1];
+  const e = [k[0] + Math.sin(rad(a1 + a2)) * len2 * dir, k[1] + Math.cos(rad(a1 + a2)) * len2];
+  line([[x, y], k, e], P.ink, w); return e;
+}
+/**
+ * A stick person standing on (x, y). o = { h (height px, default 520), dir (1 faces right, -1 left), walk (phase, rad: animates
+ * legs + arms), arms: { L: [shoulder, elbow], R: [...] } (deg, 0 = down, + = forward), legs: { L: [hip, knee], R: [...] },
+ * look: [x, y] pupils -1..1, mood: 'calm' | 'happy' | 'worried' | 'scared' | 'determined' | 'sleepy', lean (deg),
+ * hold: (x, y) => draw a prop at the FRONT hand, blink: 0..1, cap: colour of a cap (optional) }
+ */
+export function person(o) {
+  const h = o.h || 520, d = o.dir || 1, w = h * 0.034, wk = o.walk;
+  const hipY = o.y - h * 0.46, shY = o.y - h * 0.77, r = h * 0.105;
+  ctx.save(); if (o.glow) ctx.filter = `drop-shadow(0px 0px ${Math.round(h * 0.014)}px rgba(255,226,170,0.95))`; ctx.translate(o.x, hipY); ctx.rotate(rad((o.lean || 0) * d)); ctx.translate(-o.x, -hipY);
+  const sw = wk != null ? Math.sin(wk) : 0;
+  const legs = o.legs || { L: [wk != null ? sw * 26 : 6, wk != null ? Math.max(0, -sw) * 30 + 6 : 4], R: [wk != null ? -sw * 26 : -6, wk != null ? Math.max(0, sw) * 30 + 6 : 4] };
+  const arms = o.arms || { L: [wk != null ? -sw * 24 : -8, 12], R: [wk != null ? sw * 24 : 10, 16] };
+  // back limbs first
+  limb(o.x, hipY, h * 0.25, legs.L[0], h * 0.23, -legs.L[1] * 1.0, d, w);
+  limb(o.x, shY + h * 0.02, h * 0.17, arms.L[0], h * 0.16, arms.L[1], d, w);
+  line([[o.x, hipY], [o.x, shY]], P.ink, w * 1.15);                                       // spine
+  const footR = limb(o.x, hipY, h * 0.25, legs.R[0], h * 0.23, -legs.R[1], d, w);
+  const hand = limb(o.x, shY + h * 0.02, h * 0.17, arms.R[0], h * 0.16, arms.R[1], d, w);
+  circle(hand[0], hand[1], w * 0.9, P.ink);
+  if (o.hold) o.hold(hand[0], hand[1]);
+  // head
+  const hx = o.x + d * r * 0.08, hy = shY - r * 1.12;
+  if (o.cap) { ctx.beginPath(); ctx.arc(hx, hy - r * 0.15, r * 1.04, Math.PI, TAU); ctx.fillStyle = o.cap; ctx.fill(); }
+  circle(hx, hy, r, P.ink);
+  if (o.cap) { ctx.beginPath(); ctx.arc(hx, hy - r * 0.1, r * 1.03, Math.PI * 1.05, Math.PI * 1.95); ctx.lineWidth = r * 0.32; ctx.strokeStyle = o.cap; ctx.stroke(); rr(hx + d * r * 0.3 - (d < 0 ? r * 0.9 : 0), hy - r * 0.62, r * 0.9, r * 0.2, r * 0.1); ctx.fillStyle = o.cap; ctx.fill(); }
+  ctx.filter = 'none'; face(hx + d * r * 0.22, hy, r, d, o);
+  ctx.restore();
+}
+function face(fx, fy, r, d, o) {
+  const m = o.mood || 'calm', lk = o.look || [d * 0.3, 0], blink = o.blink || 0;
+  const big = m === 'scared' ? 1.22 : 1, ex = r * 0.3, ey = -r * 0.05;
+  for (const s of [-1, 1]) {
+    const cx = fx + s * ex, cy = fy + ey;
+    if (m === 'happy') { ctx.beginPath(); ctx.arc(cx, cy + r * 0.06, r * 0.17, Math.PI * 1.1, Math.PI * 1.9); ctx.strokeStyle = P.white; ctx.lineWidth = r * 0.09; ctx.lineCap = 'round'; ctx.stroke(); continue; }
+    const ry = r * 0.3 * big * (1 - blink * 0.92) * (m === 'sleepy' ? 0.45 : 1);
+    ell(cx, cy, r * 0.22 * big, Math.max(1, ry), P.white);
+    if (blink < 0.6) circle(cx + lk[0] * r * 0.08, cy + lk[1] * r * 0.1 + (m === 'sleepy' ? r * 0.04 : 0), r * (m === 'scared' ? 0.08 : 0.12), P.ink);
+  }
+  ctx.strokeStyle = P.white; ctx.lineWidth = r * 0.08; ctx.lineCap = 'round';
+  if (m === 'worried' || m === 'scared') for (const s of [-1, 1]) { ctx.beginPath(); ctx.moveTo(fx + s * ex - r * 0.2, fy - r * 0.42 + (s > 0 ? -r * 0.08 : 0)); ctx.lineTo(fx + s * ex + r * 0.2, fy - r * 0.42 + (s > 0 ? 0 : -r * 0.08)); ctx.stroke(); }
+  if (m === 'determined') for (const s of [-1, 1]) { ctx.beginPath(); ctx.moveTo(fx + s * ex - r * 0.2 * s, fy - r * 0.5); ctx.lineTo(fx + s * ex + r * 0.2 * s, fy - r * 0.38); ctx.stroke(); }
+  // mouth
+  ctx.beginPath();
+  if (m === 'happy') ctx.arc(fx, fy + r * 0.38, r * 0.2, 0.15 * Math.PI, 0.85 * Math.PI);
+  else if (m === 'scared') { ell(fx, fy + r * 0.5, r * 0.1, r * 0.13, P.white); return; }
+  else if (m === 'worried') { ctx.moveTo(fx - r * 0.14, fy + r * 0.52); ctx.quadraticCurveTo(fx, fy + r * 0.42, fx + r * 0.14, fy + r * 0.52); }
+  else { ctx.moveTo(fx - r * 0.12, fy + r * 0.47); ctx.lineTo(fx + r * 0.12, fy + r * 0.47); }
+  ctx.stroke();
+}
+/** a big face close-up (head fills the frame): same face, huge */
+export function bigHead(x, y, r, o = {}) { circle(x, y, r, P.ink); face(x + (o.dir || 1) * r * 0.1, y, r, o.dir || 1, o); }
+
+// ═════════════════════════ ROOMS (full 1080x1920 frames) ═════════════════════════
+const pal = (night) => night ? { wall: P.nWall, shade: P.nWallShade, floor: P.nFloor, floorD: P.nFloorDark, sky: P.nSky } : { wall: P.wall, shade: P.wallShade, floor: P.floor, floorD: P.floorDark, sky: P.sky };
+function shell(night) {
+  const c = pal(night);
+  ctx.fillStyle = c.wall; ctx.fillRect(-300, -300, W + 600, FLOOR + 300);
+  ctx.fillStyle = c.shade; ctx.fillRect(-300, FLOOR - 70, W + 600, 70);
+  ctx.fillStyle = night ? '#4A4254' : P.base; ctx.fillRect(-300, FLOOR - 20, W + 600, 20);
+  ctx.fillStyle = c.floor; ctx.fillRect(-300, FLOOR, W + 600, H - FLOOR + 300);
+  ctx.strokeStyle = c.floorD; ctx.lineWidth = 6; for (let y = FLOOR + 90; y < H + 300; y += 110) { ctx.beginPath(); ctx.moveTo(-300, y); ctx.lineTo(W + 300, y); ctx.stroke(); }
+  return c;
+}
+export function windowPane(x, y, w, h, night) {
+  rr(x - 16, y - 16, w + 32, h + 32, 14); ctx.fillStyle = night ? '#4A4254' : P.white; ctx.fill();
+  rr(x, y, w, h, 8); ctx.fillStyle = pal(night).sky; ctx.fill();
+  if (night) { circle(x + w * 0.7, y + h * 0.3, 40, '#F4EBC8'); for (let i = 0; i < 8; i++) circle(x + rnd(i) * w, y + rnd(i + 4) * h * 0.7, 3, '#F4EBC8'); }
+  else { ell(x + w * 0.3, y + h * 0.3, 60, 24, P.white); ell(x + w * 0.38, y + h * 0.26, 40, 26, P.white); }
+  ctx.fillStyle = night ? '#4A4254' : P.white; ctx.fillRect(x + w / 2 - 7, y, 14, h); ctx.fillRect(x, y + h / 2 - 7, w, 14);
+}
+export function couch(x, y, s = 1, night) {
+  ctx.save(); ctx.translate(x, y); ctx.scale(s, s);
+  rr(-300, -230, 600, 160, 40); ctx.fillStyle = night ? '#3E5070' : P.sofaDark; ctx.fill();
+  rr(-330, -120, 660, 120, 30); ctx.fillStyle = night ? '#4A5E82' : P.sofa; ctx.fill();
+  rr(-360, -180, 90, 180, 30); ctx.fillStyle = night ? '#3E5070' : P.sofaDark; ctx.fill(); rr(270, -180, 90, 180, 30); ctx.fill();
+  ctx.fillStyle = P.ink; ctx.fillRect(-300, 0, 20, 30); ctx.fillRect(280, 0, 20, 30);
+  ctx.restore();
+}
+export function lamp(x, y, on = true, night) {
+  if (on && night) { ctx.save(); ctx.globalAlpha = 0.18; ctx.beginPath(); ctx.moveTo(x - 60, y - 400); ctx.lineTo(x + 60, y - 400); ctx.lineTo(x + 260, y); ctx.lineTo(x - 260, y); ctx.closePath(); ctx.fillStyle = P.lamp; ctx.fill(); ctx.restore(); }
+  line([[x, y], [x, y - 400]], P.ink, 10); ell(x, y, 60, 12, P.ink);
+  ctx.beginPath(); ctx.moveTo(x - 50, y - 400); ctx.lineTo(x + 50, y - 400); ctx.lineTo(x + 80, y - 500); ctx.lineTo(x - 80, y - 500); ctx.closePath(); ctx.fillStyle = on ? P.lamp : '#C9BFA9'; ctx.fill();
+}
+export function frameArt(x, y, w, h, night) { rr(x, y, w, h, 6); ctx.fillStyle = P.ink; ctx.fill(); rr(x + 12, y + 12, w - 24, h - 24, 3); ctx.fillStyle = night ? '#5A5470' : '#F3C97A'; ctx.fill(); ctx.beginPath(); ctx.moveTo(x + 12, y + h - 12); ctx.lineTo(x + w * 0.4, y + h * 0.45); ctx.lineTo(x + w * 0.6, y + h * 0.65); ctx.lineTo(x + w * 0.75, y + h * 0.5); ctx.lineTo(x + w - 12, y + h - 12); ctx.fillStyle = night ? '#3F3A55' : P.rug; ctx.fill(); }
+export function plant(x, y) { for (const [dx, dy, r] of [[-30, -90, -0.5], [0, -120, 0], [30, -90, 0.5], [-15, -150, -0.2], [20, -155, 0.25]]) ell(x + dx, y + dy, 28, 70, P.plant, r); rr(x - 60, y - 40, 120, 130, 16); ctx.fillStyle = P.wood; ctx.fill(); }
+export function door(x, y, label, open = 0, night) {
+  rr(x - 150, y - 560, 300, 560, [16, 16, 0, 0]); ctx.fillStyle = night ? '#1A1F2C' : '#7A5236'; ctx.fill();
+  ctx.save(); ctx.translate(x - 130, 0); ctx.scale(1 - open * 0.75, 1); rr(0, y - 540, 260, 540, [10, 10, 0, 0]); ctx.fillStyle = night ? '#5B4A3E' : '#A8754E'; ctx.fill();
+  rr(30, y - 500, 200, 200, 8); ctx.strokeStyle = night ? '#4A3C33' : '#8E6142'; ctx.lineWidth = 8; ctx.stroke(); rr(30, y - 260, 200, 200, 8); ctx.stroke();
+  circle(225, y - 270, 14, P.gold); ctx.restore();
+  if (label) { rr(x - 50, y - 640, 100, 56, 10); ctx.fillStyle = P.ink; ctx.fill(); ctx.font = '900 34px Inter'; ctx.fillStyle = P.white; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(label, x, y - 611); }
+}
+export function fridge(x, y) { rr(x - 140, y - 620, 280, 620, 24); ctx.fillStyle = '#E9EEF2'; ctx.fill(); ctx.fillStyle = '#C9D2DA'; ctx.fillRect(x - 140, y - 400, 280, 10); rr(x + 90, y - 560, 16, 120, 8); ctx.fillStyle = '#9AA6B2'; ctx.fill(); rr(x + 90, y - 360, 16, 160, 8); ctx.fill(); }
+export function counter(x, y, w) { ctx.fillStyle = '#7E5A41'; ctx.fillRect(x, y - 300, w, 300); ctx.fillStyle = '#D9CDBA'; ctx.fillRect(x - 20, y - 330, w + 40, 34); for (let i = 0; i < Math.floor(w / 160); i++) { rr(x + 20 + i * 160, y - 270, 130, 230, 10); ctx.strokeStyle = '#6A4A34'; ctx.lineWidth = 8; ctx.stroke(); circle(x + 85 + i * 160, y - 150, 9, P.gold); } }
+
+/** living room. o = { night, lampOn } */
+export function livingRoom(o = {}) { const n = !!o.night; shell(n); windowPane(600, 360, 360, 420, n); frameArt(110, 420, 260, 190, n); lamp(140, FLOOR + 40, o.lampOn ?? true, n); couch(560, FLOOR + 120, 0.95, n); plant(960, FLOOR + 40); rr(170, FLOOR + 230, 760, 70, 35); ctx.fillStyle = n ? '#5B3F4A' : P.rug; ctx.fill(); }
+export function kitchen(o = {}) { const n = !!o.night; shell(n); windowPane(470, 380, 300, 320, n); fridge(170, FLOOR + 60); counter(330, FLOOR + 60, 700); }
+export function hallway(o = {}) { const n = !!o.night; shell(n); door(270, FLOOR + 40, o.a || '4A', o.openA || 0, n); door(810, FLOOR + 40, o.b || '4B', o.openB || 0, n); ell(540, 120, 120, 26, n ? '#3A3550' : '#D8CDB6'); }
+
+// ═════════════════════════ PROPS ═════════════════════════
+export function phone(x, y, s = 1, msg = null) { ctx.save(); ctx.translate(x, y); ctx.scale(s, s); rr(-60, -110, 120, 220, 22); ctx.fillStyle = P.ink; ctx.fill(); rr(-50, -96, 100, 180, 12); ctx.fillStyle = msg ? '#DDEBF7' : '#3B4A63'; ctx.fill(); if (msg) { rr(-42, -70, 84, 40, 12); ctx.fillStyle = P.white; ctx.fill(); rr(-30, -18, 72, 40, 12); ctx.fillStyle = '#4A90E2'; ctx.fill(); } ctx.restore(); }
+export function bottle(x, y, s = 1) { ctx.save(); ctx.translate(x, y); ctx.scale(s, s); rr(-26, -110, 52, 120, 16); ctx.fillStyle = '#9FD3EC'; ctx.fill(); rr(-14, -132, 28, 26, 6); ctx.fillStyle = '#3F7FB5'; ctx.fill(); ctx.fillStyle = '#3F7FB5'; ctx.fillRect(-26, -70, 52, 30); ctx.restore(); }
+export function can(x, y, s = 1) { ctx.save(); ctx.translate(x, y); ctx.scale(s, s); rr(-36, -90, 72, 100, 10); ctx.fillStyle = '#B8BEC6'; ctx.fill(); ctx.fillStyle = P.red; ctx.fillRect(-36, -70, 72, 56); ctx.fillStyle = P.white; ctx.fillRect(-20, -50, 40, 14); ctx.restore(); }
+export function flashlight(x, y, s = 1, on = true, ang = 0) {
+  ctx.save(); ctx.translate(x, y); ctx.rotate(ang); ctx.scale(s, s);
+  if (on) { ctx.save(); ctx.globalAlpha = 0.28; ctx.beginPath(); ctx.moveTo(60, -20); ctx.lineTo(600, -160); ctx.lineTo(600, 160); ctx.lineTo(60, 20); ctx.closePath(); ctx.fillStyle = P.lamp; ctx.fill(); ctx.restore(); }
+  rr(-60, -18, 110, 36, 10); ctx.fillStyle = '#3B4152'; ctx.fill(); rr(40, -26, 30, 52, 6); ctx.fillStyle = '#596075'; ctx.fill(); ctx.restore();
+}
+export function backpack(x, y, s = 1) { ctx.save(); ctx.translate(x, y); ctx.scale(s, s); rr(-80, -180, 160, 190, 40); ctx.fillStyle = '#D9824A'; ctx.fill(); rr(-60, -80, 120, 70, 16); ctx.fillStyle = '#B9683A'; ctx.fill(); ctx.beginPath(); ctx.arc(0, -180, 40, Math.PI, TAU); ctx.lineWidth = 12; ctx.strokeStyle = '#B9683A'; ctx.stroke(); ctx.restore(); }
+
+// ═════════════════════════ GRAPHICS ═════════════════════════
+/** gold step card: number disc + label. sc = pop scale */
+export function stepCard(n, label, x, y, sc = 1) {
+  if (sc <= 0) return; ctx.save(); ctx.translate(x, y); ctx.scale(sc, sc);
+  ctx.font = '900 64px Inter'; const tw = ctx.measureText(label).width, w = tw + 230;
+  rr(-w / 2 + 8, -82, w, 180, 34); ctx.fillStyle = 'rgba(0,0,0,0.25)'; ctx.fill();
+  rr(-w / 2, -90, w, 180, 34); ctx.fillStyle = P.gold; ctx.fill();
+  circle(-w / 2 + 95, 0, 62, P.navy); ctx.fillStyle = P.gold; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.font = '900 80px Inter'; ctx.fillText(String(n), -w / 2 + 95, 4);
+  ctx.fillStyle = P.navy; ctx.font = '900 64px Inter'; ctx.textAlign = 'left'; ctx.fillText(label, -w / 2 + 180, 4);
+  ctx.restore();
+}
+export function check(x, y, s = 1) { ctx.save(); ctx.translate(x, y); ctx.scale(s, s); circle(0, 0, 70, P.green); ctx.beginPath(); ctx.moveTo(-32, 2); ctx.lineTo(-8, 28); ctx.lineTo(36, -24); ctx.strokeStyle = P.white; ctx.lineWidth = 18; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.stroke(); ctx.restore(); }
+export function cross(x, y, s = 1) { ctx.save(); ctx.translate(x, y); ctx.scale(s, s); circle(0, 0, 70, P.red); ctx.beginPath(); ctx.moveTo(-28, -28); ctx.lineTo(28, 28); ctx.moveTo(28, -28); ctx.lineTo(-28, 28); ctx.strokeStyle = P.white; ctx.lineWidth = 18; ctx.lineCap = 'round'; ctx.stroke(); ctx.restore(); }
+export function counterPill(text, x, y, sc = 1) { if (sc <= 0) return; ctx.save(); ctx.translate(x, y); ctx.scale(sc, sc); ctx.font = '900 54px Inter'; const w = ctx.measureText(text).width + 70; rr(-w / 2, -45, w, 90, 45); ctx.fillStyle = P.navy; ctx.fill(); ctx.fillStyle = P.gold; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(text, 0, 3); ctx.restore(); }
+/** thought bubble at (x, y) with an icon drawn inside by inner(x, y) */
+export function thought(x, y, s, inner, tx, ty) {
+  ctx.save(); circle(tx, ty, 14 * s, P.white); circle(lerp(tx, x, 0.45), lerp(ty, y, 0.45) + 20 * s, 22 * s, P.white);
+  ctx.translate(x, y); ctx.scale(s, s); for (const [dx, dy, r] of [[-90, 10, 80], [0, -30, 100], [95, 5, 85], [0, 45, 90]]) circle(dx, dy, r, P.white);
+  ctx.restore(); if (inner) inner(x, y);
+}
+/** cinema bars for dramatic beats (a 0..1) */
+export function cinemaBars(a) { if (a <= 0) return; const h = 170 * a; ctx.fillStyle = P.ink; ctx.fillRect(-300, -300, W + 600, h + 300); ctx.fillRect(-300, H - h, W + 600, h + 300); }
+
+// ═════════════════════════ CAPTION LOOK (used by captions.js and the sheet) ═════════════════════════
+export const CAPLOOK = { font: '800 92px Inter', y: 1690, maxW: 920, fg: P.white, hi: P.gold, box: 'rgba(28,28,34,0.86)' };
+/** draw one caption: words [{txt, hi}] centred at (x, y) on a dark rounded bar */
+export function captionBar(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 = 26, 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 + 80)); ctx.scale(fit, fit);
+  rr(-tw / 2 - 40, -72, tw + 80, 144, 30); ctx.fillStyle = look.box; ctx.fill();
+  let cx = -tw / 2; words.forEach((w, i) => { ctx.fillStyle = w.hi ? look.hi : look.fg; ctx.fillText(w.txt, cx, 4); cx += ws[i] + sp; });
+  ctx.restore();
+}

package/plugins/faceless-shorts/styles/stick-story/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/stick-story/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/stick-story/example/src/main.js

@@ -0,0 +1,62 @@
+// Boot: fonts → script + timing → captions → shots. Then draw(t) renders film time t (pure function of t).
+// window.OP is the API tools/capture.mjs drives: ready, bootError, duration(), draw(t), frame(t, q), cues(), shots().
+import { W, H, setCtx, ctx, clamp, eo, eio } from './core/lib.js';
+import { T, loadTiming } from './core/timing.js';
+import { buildCaptions, drawCaption, captionList } from './core/captions.js';
+import { buildShots } from './shots.js';
+
+const cv = document.getElementById('cv');
+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';
+  ctx.fillStyle = '#000'; ctx.fillRect(0, 0, W, H);
+  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;
+  // camera: punch-in on the cut + a slow push across the shot ("camera always moving")
+  const punch = 1 + 0.06 * (1 - eo(clamp(lt / 0.25)));
+  const drift = 1 + (sh.zoom ?? 0.06) * eio(clamp(lt / d));
+  const [cx, cy] = sh.cam || [540, 900];
+  ctx.save(); ctx.translate(cx, cy); ctx.scale(punch * drift, punch * drift); ctx.translate(-cx, -cy);
+  sh.draw(lt, d, t);
+  ctx.restore();
+  ctx.globalAlpha = 1; ctx.letterSpacing = '0px';
+
+  // fade from / to black on the first and last 0.25 s
+  const fade = Math.min(clamp(t / 0.25), clamp((T.dur - t) / 0.35));
+  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');
+    const script = await (await fetch('script.json', { cache: 'no-store' })).json();
+    await loadTiming();
+    buildCaptions(script);
+    const { shots, cues } = buildShots();
+    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;
+    // preview mode (not capture): play in real time, ?t=12.3 to hold a frame
+    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(t0 == null ? 0 : 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); }
+})();