@amg555/frameforge-mcp 2.7.3 → 2.7.7

package/plugins/faceless-shorts/styles/paper-atlas/example/script.json

@@ -0,0 +1,26 @@
+{
+  "title": "How One Bakery Burned Down London",
+  "voice": "bm_george",
+  "speed": 1.0,
+  "lead": 0.4,
+  "outro": 1.1,
+  "gap": 0.3,
+  "music": "tension",
+  "sources": [
+    "London Museum, 'The Great Fire of London' (began 2 September 1666 in Thomas Farriner's bakery on Pudding Lane; burned for four days; about 13,200 houses, 87 parish churches and St Paul's Cathedral destroyed)",
+    "Royal Museums Greenwich, 'The Great Fire of London' (wooden houses, strong east wind, the Lord Mayor's dismissive response, houses blown up to create firebreaks)",
+    "Rebuilding Act 1667: new buildings in brick and stone"
+  ],
+  "lines": [
+    { "text": "In sixteen sixty-six, a tiny bakery fire burned down most of London.", "caps": "In *1666, | a tiny *bakery fire | burned down *London." },
+    { "text": "It started just after midnight, in Thomas Farriner's bakery on Pudding Lane.", "caps": "Just after *midnight, | in Farriner's *bakery | on Pudding *Lane." },
+    { "text": "London was packed with wooden houses, and a strong wind was blowing,", "caps": "Packed with *wooden houses, | a strong *wind" },
+    { "text": "so the flames jumped from roof to roof.", "caps": "Flames *jumped | roof to *roof." },
+    { "text": "The Lord Mayor was woken up, but he shrugged it off.", "caps": "The Lord *Mayor | shrugged it *off." },
+    { "text": "For four days, the city burned.", "caps": "For four *days, | the city *burned." },
+    { "text": "Thirteen thousand houses, eighty-seven churches, and St Paul's Cathedral were gone.", "caps": "*13,000 houses, | *87 churches, | and St Paul's | were *gone." },
+    { "text": "In the end, they blew up whole streets to stop it spreading.", "caps": "They *blew up | whole *streets | to *stop it." },
+    { "text": "And when London was rebuilt, it was built in brick and stone.", "caps": "London was *rebuilt | in *brick | and *stone." },
+    { "text": "All because of one small bakery.", "caps": "All *because of | one small *bakery.", "gap": 0.2 }
+  ]
+}

package/plugins/faceless-shorts/styles/paper-atlas/example/sheet.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html><head><meta charset="utf-8"><title>Style sheet</title>
+<style>
+@font-face { font-family: 'Inter'; font-weight: 900; src: url('fonts/Inter-Black.otf'); }
+@font-face { font-family: 'Inter'; font-weight: 800; src: url('fonts/Inter-Black.otf'); }
+@font-face { font-family: 'Caladea'; font-weight: 700; src: url('fonts/Caladea-Bold.ttf'); }
+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/paper-atlas/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/paper-atlas/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 { captionStrip, 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;
+  captionStrip(c.words, 540, CAPLOOK.y, sc);
+}

package/plugins/faceless-shorts/styles/paper-atlas/example/src/core/kit.js

@@ -0,0 +1,152 @@
+// Paper Atlas: the COMPONENT ZOO. History told with paper cut-outs on aged parchment: every shape is cut paper
+// (light edge + soft drop shadow), maps are stylized, routes are crimson, dates ride on gold ribbons.
+import { ctx, W, H, TAU, lerp, clamp, rnd, rr, circle, ell, line } from './lib.js';
+
+export const P = {
+  parch: '#E9DCBC', parchDark: '#D6C39B', ink: '#3E2C1E', sepia: '#8A6A48', crimson: '#A8322D', gold: '#C8952F',
+  sea: '#9DB4B0', seaDark: '#86A09B', land: '#DCC9A0', forest: '#7E8B5A', skin: '#E3B98F', edge: '#F7EFDC',
+  royal: '#3D5A80', green: '#4F6D4A', wine: '#7A2E3A', stone: '#B9A98C', stoneDark: '#9C8C70', sky: '#E7D7AE',
+};
+const SERIF = 'Caladea';
+
+// ═════════════════════════ CUT PAPER ═════════════════════════
+/** draw a path as a piece of cut paper: soft shadow, light paper edge, then the fill. path() builds the path. */
+export function cut(path, fill, { shadow = 1, edge = 6 } = {}) {
+  ctx.save();
+  if (shadow) { ctx.shadowColor = 'rgba(70,45,20,0.35)'; ctx.shadowBlur = 14 * shadow; ctx.shadowOffsetX = 6 * shadow; ctx.shadowOffsetY = 9 * shadow; path(); ctx.fillStyle = fill; ctx.fill(); }
+  ctx.restore();
+  if (edge) { path(); ctx.strokeStyle = P.edge; ctx.lineWidth = edge; ctx.lineJoin = 'round'; ctx.stroke(); }
+  path(); ctx.fillStyle = fill; ctx.fill();
+}
+export const P_rr = (x, y, w, h, r) => () => { ctx.beginPath(); ctx.roundRect(x, y, w, h, r); };
+export const P_circ = (x, y, r) => () => { ctx.beginPath(); ctx.arc(x, y, r, 0, TAU); };
+export const P_poly = (pts) => () => { ctx.beginPath(); pts.forEach((p, i) => (i ? ctx.lineTo(p[0], p[1]) : ctx.moveTo(p[0], p[1]))); ctx.closePath(); };
+
+/** aged parchment page: base, blotches, fibres, darker edges */
+export function parchment(seed = 0) {
+  ctx.fillStyle = P.parch; ctx.fillRect(-300, -300, W + 600, H + 600);
+  for (let i = 0; i < 14; i++) { const g = ctx.createRadialGradient(0, 0, 0, 0, 0, 1); ctx.save(); ctx.translate(rnd(i + seed) * W, rnd(i + 30 + seed) * H); ctx.scale(160 + rnd(i + 5) * 260, 120 + rnd(i + 9) * 200); g.addColorStop(0, 'rgba(160,120,70,0.13)'); g.addColorStop(1, 'rgba(160,120,70,0)'); ctx.fillStyle = g; ctx.beginPath(); ctx.arc(0, 0, 1, 0, TAU); ctx.fill(); ctx.restore(); }
+  ctx.strokeStyle = 'rgba(120,90,50,0.08)'; ctx.lineWidth = 2; for (let i = 0; i < 160; i++) { const x = rnd(i * 2 + seed) * W, y = rnd(i * 3 + seed) * H; ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + 30 + rnd(i) * 60, y + (rnd(i + 1) - 0.5) * 10); ctx.stroke(); }
+  const g = ctx.createRadialGradient(540, 960, 500, 540, 960, 1250); g.addColorStop(0, 'rgba(90,60,30,0)'); g.addColorStop(1, 'rgba(90,60,30,0.38)'); ctx.fillStyle = g; ctx.fillRect(-300, -300, W + 600, H + 600);
+}
+
+// ═════════════════════════ MAPS ═════════════════════════
+/** an invented coastline polygon around (cx, cy) */
+export function landPts(cx, cy, rx, ry, seed, n = 90) { const pts = []; for (let i = 0; i < n; i++) { const a = i / n * TAU, k = 1 + 0.18 * Math.sin(3 * a + seed) + 0.1 * Math.sin(7 * a + seed * 2) + 0.05 * Math.sin(13 * a + seed * 3); pts.push([cx + Math.cos(a) * rx * k, cy + Math.sin(a) * ry * k]); } return pts; }
+/** a sea-and-land map page. o = { highlight: index of land to fill crimson-edged gold (0..2), route: 0..1, labels } */
+export function map(o = {}) {
+  parchment(o.seed || 3);
+  ctx.save(); ctx.globalAlpha = 0.85; ctx.fillStyle = P.sea; ctx.fillRect(60, 160, 960, 1300); ctx.restore();
+  ctx.strokeStyle = 'rgba(62,44,30,0.18)'; ctx.lineWidth = 2; for (let x = 60; x <= 1020; x += 120) { ctx.beginPath(); ctx.moveTo(x, 160); ctx.lineTo(x, 1460); ctx.stroke(); } for (let y = 160; y <= 1460; y += 130) { ctx.beginPath(); ctx.moveTo(60, y); ctx.lineTo(1020, y); ctx.stroke(); }
+  const lands = [landPts(330, 520, 260, 300, 1.3), landPts(770, 1090, 230, 260, 4.1), landPts(820, 400, 120, 110, 2.2)];
+  lands.forEach((pts, i) => cut(P_poly(pts), i === o.highlight ? P.gold : P.land, { shadow: 0.8, edge: 5 }));
+  if (o.highlight != null) { P_poly(lands[o.highlight])(); ctx.strokeStyle = P.crimson; ctx.lineWidth = 8; ctx.stroke(); }
+  ctx.strokeStyle = P.ink; ctx.lineWidth = 4; ctx.strokeRect(60, 160, 960, 1300);
+  compass(900, 1340, 0.55);
+  const route = [[420, 640], [560, 820], [640, 960], [720, 1040]];
+  if (o.route) dashedRoute(route, o.route);
+  const L = o.labels || [['OLD PORT', 420, 640], ['NEW HARBOR', 720, 1040]];
+  L.forEach(([t, x, y]) => { circle(x, y, 12, P.ink); label(t, x, y - 40, 34); });
+  return { route };
+}
+/** crimson dashed route through pts; p 0..1 draws it on; returns the head point [x, y, angle] */
+export function dashedRoute(pts, p = 1) {
+  const seglen = []; let tot = 0; for (let i = 1; i < pts.length; i++) { const l = Math.hypot(pts[i][0] - pts[i - 1][0], pts[i][1] - pts[i - 1][1]); seglen.push(l); tot += l; }
+  let left = tot * clamp(p); ctx.beginPath(); ctx.moveTo(pts[0][0], pts[0][1]); let head = [...pts[0], 0];
+  for (let i = 1; i < pts.length && left > 0; i++) { const k = Math.min(1, left / seglen[i - 1]); const x = lerp(pts[i - 1][0], pts[i][0], k), y = lerp(pts[i - 1][1], pts[i][1], k); ctx.lineTo(x, y); head = [x, y, Math.atan2(pts[i][1] - pts[i - 1][1], pts[i][0] - pts[i - 1][0])]; left -= seglen[i - 1]; }
+  ctx.setLineDash([22, 16]); ctx.strokeStyle = P.crimson; ctx.lineWidth = 9; ctx.lineCap = 'round'; ctx.stroke(); ctx.setLineDash([]);
+  return head;
+}
+export function compass(x, y, s) { ctx.save(); ctx.translate(x, y); ctx.scale(s, s); circle(0, 0, 110, 'rgba(233,220,188,0.9)'); ctx.strokeStyle = P.ink; ctx.lineWidth = 4; ctx.beginPath(); ctx.arc(0, 0, 110, 0, TAU); ctx.stroke(); for (let i = 0; i < 4; i++) { ctx.save(); ctx.rotate(i * Math.PI / 2); ctx.beginPath(); ctx.moveTo(0, -100); ctx.lineTo(18, 0); ctx.lineTo(-18, 0); ctx.closePath(); ctx.fillStyle = i ? P.ink : P.crimson; ctx.fill(); ctx.restore(); } ctx.font = `700 40px ${SERIF}`; ctx.fillStyle = P.ink; ctx.textAlign = 'center'; ctx.fillText('N', 0, -120); ctx.restore(); }
+/** ink map label (small caps serif) */
+export function label(text, x, y, size = 36, color = P.ink) { ctx.font = `700 ${size}px ${SERIF}`; ctx.letterSpacing = '4px'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillStyle = color; ctx.fillText(text, x, y); ctx.letterSpacing = '0px'; }
+
+// ═════════════════════════ PEOPLE: paper cut-outs ═════════════════════════
+/** a paper figure standing on (x, y). o = { h (default 640), dir, role: 'king'|'queen'|'sailor'|'scholar'|'guard'|'merchant'|'worker', walk, arm (deg raise of front arm) } */
+export function figure(o) {
+  const h = o.h || 640, d = o.dir || 1, s = h / 640, wk = o.walk != null ? Math.sin(o.walk) : 0;
+  const R = { king: [P.wine, P.gold], queen: [P.royal, P.gold], sailor: [P.royal, P.ink], scholar: [P.green, P.ink], guard: [P.sepia, P.stoneDark], merchant: [P.wine, P.ink], worker: [P.sepia, P.ink] }[o.role || 'merchant'];
+  ctx.save(); ctx.translate(o.x, o.y); ctx.scale(s * d, s);
+  const robe = o.role === 'king' || o.role === 'queen' || o.role === 'scholar';
+  // legs
+  if (!robe) for (const k of [-1, 1]) cut(P_poly([[k * 22 - 18, -250], [k * 22 + 18, -250], [k * 22 + 16 + k * wk * 30, 0], [k * 22 - 16 + k * wk * 30, 0]]), P.ink, { shadow: 0.6, edge: 4 });
+  // back arm
+  cut(() => { ctx.beginPath(); ctx.save(); ctx.translate(-30, -440); ctx.rotate(rad(10 - wk * 18)); ctx.roundRect(-20, 0, 40, 220, 20); ctx.restore(); }, R[0], { shadow: 0.5, edge: 4 });
+  // body
+  if (robe) cut(P_poly([[-70, -470], [70, -470], [120, 0], [-120, 0]]), R[0]);
+  else cut(P_rr(-75, -470, 150, 240, 40), R[0]);
+  rr(-75, -260, 150, 22, 6); ctx.fillStyle = R[1]; ctx.fill();                               // belt / trim
+  // head
+  cut(P_circ(0, -540, 66), P.skin);
+  hat(o.role || 'merchant');
+  // front arm (raise with o.arm)
+  cut(() => { ctx.beginPath(); ctx.save(); ctx.translate(30, -440); ctx.rotate(rad(-(o.arm || 0) - 10 + wk * 18)); ctx.roundRect(-20, 0, 40, 220, 20); ctx.restore(); }, R[0], { shadow: 0.5, edge: 4 });
+  ctx.restore();
+}
+const rad = (dd) => dd * Math.PI / 180;
+function hat(role) {
+  if (role === 'king' || role === 'queen') cut(P_poly([[-60, -585], [-70, -665], [-35, -620], [0, -680], [35, -620], [70, -665], [60, -585]]), P.gold, { shadow: 0.5, edge: 4 });
+  if (role === 'sailor') cut(P_poly([[-95, -590], [0, -660], [95, -590], [0, -605]]), P.ink, { shadow: 0.5, edge: 4 });
+  if (role === 'guard') cut(() => { ctx.beginPath(); ctx.arc(0, -560, 76, Math.PI, TAU); ctx.lineTo(90, -555); ctx.lineTo(-90, -555); ctx.closePath(); }, P.stoneDark, { shadow: 0.5, edge: 4 });
+  if (role === 'merchant') { cut(P_rr(-48, -680, 96, 90, 8), P.ink, { shadow: 0.5, edge: 4 }); cut(P_rr(-82, -598, 164, 18, 9), P.ink, { shadow: 0, edge: 4 }); }
+  if (role === 'scholar') cut(P_rr(-70, -625, 140, 40, 12), P.ink, { shadow: 0.5, edge: 4 });
+  if (role === 'worker') cut(() => { ctx.beginPath(); ctx.arc(0, -575, 70, Math.PI, TAU); ctx.closePath(); }, P.sepia, { shadow: 0.5, edge: 4 });
+}
+
+// ═════════════════════════ PLACES ═════════════════════════
+/** stone hall with arches, crimson banners and a throne */
+export function hall() {
+  parchment(7); const fl = 1380;
+  cut(P_rr(-40, 200, 1160, fl - 160, 0), P.stone, { shadow: 0, edge: 0 });
+  for (const x of [120, 540, 960]) cut(() => { ctx.beginPath(); ctx.moveTo(x - 150, fl); ctx.lineTo(x - 150, 620); ctx.arc(x, 620, 150, Math.PI, TAU); ctx.lineTo(x + 150, fl); ctx.closePath(); }, P.stoneDark, { shadow: 0, edge: 0 });
+  for (const x of [330, 750]) cut(P_poly([[x - 70, 260], [x + 70, 260], [x + 70, 820], [x, 760], [x - 70, 820]]), P.crimson);
+  cut(P_rr(-40, fl, 1160, 600, 0), P.sepia, { shadow: 0, edge: 0 }); cut(P_rr(330, fl, 420, 600, 0), P.wine, { shadow: 0, edge: 0 });
+  cut(P_rr(440, 900, 200, 420, 20), P.wine); cut(P_rr(420, 1180, 240, 60, 14), P.gold); cut(P_poly([[470, 900], [540, 820], [610, 900]]), P.gold);
+}
+/** harbor: layered paper waves, a ship, a pier */
+export function harbor(t = 0, shipX = 600) {
+  parchment(11); ctx.fillStyle = P.sky; ctx.fillRect(-300, -300, W + 600, 1300);
+  cut(P_circ(820, 420, 90), '#EFC66A', { shadow: 0.4, edge: 5 });
+  for (let i = 0; i < 4; i++) { const y = 1000 + i * 150; cut(() => { ctx.beginPath(); ctx.moveTo(-300, H + 300); ctx.lineTo(-300, y); for (let x = -300; x <= W + 300; x += 40) ctx.lineTo(x, y + Math.sin(x * 0.012 + t * 1.5 + i) * 24); ctx.lineTo(W + 300, H + 300); ctx.closePath(); }, i % 2 ? P.seaDark : P.sea, { shadow: 0.7, edge: 5 }); if (i === 1) ship(shipX, 1080 + Math.sin(t * 2) * 10, 1, Math.sin(t * 1.6) * 0.04); }
+  cut(P_rr(-40, 1250, 300, 40, 6), P.sepia); for (const x of [0, 120, 230]) cut(P_rr(x, 1250, 26, 300, 4), P.sepia);
+}
+export function ship(x, y, s = 1, rot = 0) {
+  ctx.save(); ctx.translate(x, y); ctx.rotate(rot); ctx.scale(s, s);
+  cut(P_poly([[-260, -60], [260, -60], [200, 50], [-200, 50]]), P.sepia);
+  cut(P_rr(-10, -480, 20, 430, 6), P.ink, { shadow: 0.5, edge: 3 });
+  cut(P_poly([[-200, -420], [180, -420], [150, -110], [-170, -110]]), P.edge);
+  cut(P_poly([[10, -500], [110, -470], [10, -440]]), P.crimson, { shadow: 0.3, edge: 3 });
+  ctx.restore();
+}
+
+// ═════════════════════════ GRAPHICS ═════════════════════════
+/** gold date ribbon. sc = pop scale */
+export function ribbon(text, x, y, sc = 1, size = 110) {
+  if (sc <= 0) return; ctx.save(); ctx.translate(x, y); ctx.scale(sc, sc); ctx.font = `700 ${size}px ${SERIF}`;
+  const w = ctx.measureText(text).width + size * 1.2, h = size * 1.35;
+  for (const s of [-1, 1]) cut(P_poly([[s * w / 2, -h / 2 + 30], [s * (w / 2 + 110), -h / 2 + 30], [s * (w / 2 + 70), 30], [s * (w / 2 + 110), h / 2 + 30], [s * w / 2, h / 2 + 30]]), '#A87A22', { shadow: 0.6, edge: 4 });
+  cut(P_rr(-w / 2, -h / 2, w, h, 6), P.gold); ctx.fillStyle = P.ink; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(text, 0, 6);
+  ctx.restore();
+}
+/** red wax seal with an initial */
+export function seal(x, y, s = 1, letter = 'R') { ctx.save(); ctx.translate(x, y); ctx.scale(s, s); cut(() => { ctx.beginPath(); for (let i = 0; i <= 40; i++) { const a = i / 40 * TAU, r = 90 + Math.sin(a * 9) * 7; ctx.lineTo(Math.cos(a) * r, Math.sin(a) * r); } ctx.closePath(); }, P.crimson, { shadow: 0.7, edge: 0 }); ctx.beginPath(); ctx.arc(0, 0, 62, 0, TAU); ctx.strokeStyle = '#7E2420'; ctx.lineWidth = 6; ctx.stroke(); ctx.font = `700 80px ${SERIF}`; ctx.fillStyle = '#7E2420'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(letter, 0, 6); ctx.restore(); }
+/** horizontal timeline with years; p 0..1 moves the marker; active = index of the highlighted year */
+export function timeline(years, x, y, w, p = 0, active = -1) {
+  line([[x, y], [x + w, y]], P.ink, 8);
+  years.forEach((yr, i) => { const tx = x + w * i / (years.length - 1); circle(tx, y, i === active ? 22 : 14, i === active ? P.crimson : P.ink); label(String(yr), tx, y + 60, 40, i === active ? P.crimson : P.ink); });
+  const mx = x + w * clamp(p); cut(P_poly([[mx, y - 26], [mx - 26, y - 70], [mx + 26, y - 70]]), P.crimson, { shadow: 0.5, edge: 4 });
+}
+/** a pinned paper slip with a few words (for names, places, numbers) */
+export function slip(text, x, y, sc = 1, rot = -0.03, size = 54) { if (sc <= 0) return; ctx.save(); ctx.translate(x, y); ctx.rotate(rot); ctx.scale(sc, sc); ctx.font = `700 ${size}px ${SERIF}`; const w = ctx.measureText(text).width + 70; cut(P_rr(-w / 2, -size * 0.8, w, size * 1.6, 4), P.edge); ctx.fillStyle = P.ink; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(text, 0, 4); circle(0, -size * 0.8 + 6, 10, P.crimson); ctx.restore(); }
+
+// ═════════════════════════ CAPTION LOOK ═════════════════════════
+export const CAPLOOK = { font: `700 88px ${SERIF}`, y: 1640, maxW: 940, fg: P.ink, hi: P.crimson };
+/** caption on a torn paper strip */
+export function captionStrip(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 = 24, ws = words.map((w) => ctx.measureText(w.txt).width), tw = ws.reduce((a, b) => a + b, 0) + sp * (words.length - 1), hw = tw / 2 + 50;
+  const fit = Math.min(1, (look.maxW || 960) / (tw + 100)); ctx.scale(fit, fit);
+  cut(() => { ctx.beginPath(); ctx.moveTo(-hw, -70); for (let x = -hw; x <= hw; x += 24) ctx.lineTo(x, -70 + (rnd(x) - 0.5) * 12); for (let x = hw; x >= -hw; x -= 24) ctx.lineTo(x, 70 + (rnd(x + 7) - 0.5) * 12); ctx.closePath(); }, '#F3E9D2', { shadow: 0.8, edge: 0 });
+  let cx = -tw / 2; words.forEach((w, i) => { ctx.fillStyle = w.hi ? look.hi : look.fg; ctx.fillText(w.txt, cx, 6); cx += ws[i] + sp; });
+  ctx.restore();
+}

package/plugins/faceless-shorts/styles/paper-atlas/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/paper-atlas/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/paper-atlas/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'); await document.fonts.load('700 100px Caladea');
+    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); }
+})();

package/plugins/faceless-shorts/styles/paper-atlas/example/src/sheet.js

@@ -0,0 +1,61 @@
+// The Paper Atlas style sheet, drawn with the style's own kit.
+import { ctx } from './core/lib.js';
+import { startBoard, panel, frame, cell, small, swatches, rules } from './core/board.js';
+import * as K from './core/kit.js';
+const { P } = K;
+
+const cv = document.getElementById('cv');
+await document.fonts.load('900 40px Inter'); await document.fonts.load('700 40px Caladea');
+startBoard(cv, { title: 'PAPER ATLAS: VIDEO STYLE SHEET', bg: '#1D1712', line: '#4D3E2F', head: '#F1E6CC', accent: P.gold });
+
+// 1 · hero frame
+let b = panel(20, 80, 560, 520, 1, 'HERO FRAME');
+frame(b.x + 6, b.y, 240, () => {
+  const m = K.map({ highlight: 0, route: 1 });
+  K.ship(600, 870, 0.32);
+  K.ribbon('1911', 540, 290, 1);
+  K.captionStrip([{ txt: 'The' }, { txt: 'ship' }, { txt: 'vanished.', hi: 1 }], 540, K.CAPLOOK.y, 0.95);
+});
+small('EVERYTHING IS\nCUT PAPER', b.x + 270, b.y + 40, 'left', 17);
+small('AGED PARCHMENT\nMAPS', b.x + 270, b.y + 130, 'left', 17);
+small('CRIMSON ROUTES,\nGOLD DATES', b.x + 270, b.y + 220, 'left', 17);
+small('SLOW PANS\nACROSS THE PAGE', b.x + 270, b.y + 310, 'left', 17);
+
+// 2 · palette
+b = panel(590, 80, 660, 520, 2, 'PALETTE');
+const yy = swatches(b, [['PAPER', P.parch], ['INK', P.ink], ['CRIMSON', P.crimson], ['GOLD', P.gold], ['SEA', P.sea], ['LAND', P.land], ['ROYAL', P.royal], ['FOREST', P.forest]]);
+['CRIMSON ONLY FOR ROUTES, TARGETS AND THE KEY WORD.', 'GOLD ONLY FOR DATES, CROWNS AND SEALS.', 'EVERY SHAPE HAS A PAPER EDGE AND A SOFT SHADOW.']
+  .forEach((t, i) => small(t, b.x + 4, yy + 20 + i * 40, 'left', 16, '#EFE6D2'));
+ctx.save(); ctx.beginPath(); ctx.roundRect(b.x, yy + 140, b.w, 150, 14); ctx.clip(); ctx.translate(b.x, yy + 140); ctx.scale(b.w / 1080, 150 / 300); K.parchment(2); ctx.restore();
+['king', 'queen', 'sailor', 'scholar', 'guard', 'merchant'].forEach((r, i) => cell(b.x + 55 + i * 104, yy + 262, 0.15, () => K.figure({ x: 0, y: 0, role: r }), r.toUpperCase(), 22, '#3E2C1E'));
+
+// 3 · components
+b = panel(1260, 80, 640, 520, 3, 'COMPONENTS');
+ctx.save(); ctx.beginPath(); ctx.roundRect(b.x, b.y, b.w, b.h, 14); ctx.clip(); ctx.translate(b.x, b.y); ctx.scale(b.w / 1080, b.h / 900); K.parchment(5); ctx.restore();
+const gx = (i) => b.x + 80 + i * 158, gy = (r) => b.y + 110 + r * 205, L = '#3E2C1E';
+cell(gx(0) + 40, gy(0) - 10, 0.3, () => K.ribbon('1666', 0, 0), 'DATE RIBBON', 90, L);
+cell(gx(2), gy(0) - 10, 0.5, () => K.seal(0, 0), 'WAX SEAL', 90, L);
+cell(gx(3), gy(0) - 10, 0.5, () => K.compass(0, 0, 0.9), 'COMPASS', 90, L);
+cell(gx(0) + 70, gy(1) - 20, 0.26, () => K.timeline([1492, 1588, 1666, 1776], -420, 0, 840, 0.66, 2), 'TIMELINE', 80, L);
+cell(gx(2), gy(1) - 10, 0.22, () => K.ship(0, 120), 'SHIP', 80, L);
+cell(gx(3) - 22, gy(1) - 10, 0.4, () => K.slip('LISBON', 0, 0), 'PINNED SLIP', 80, L);
+
+// 4 · scenes
+b = panel(20, 610, 760, 456, 4, 'SCENES');
+const sw = 200, sx = (i) => b.x + 20 + i * (sw + 45);
+frame(sx(0), b.y, sw, () => { K.map({ highlight: 1, route: 0.6 }); });
+frame(sx(1), b.y, sw, () => { K.hall(); K.figure({ x: 540, y: 1330, h: 620, role: 'king' }); K.figure({ x: 240, y: 1500, h: 700, role: 'guard', dir: 1 }); K.figure({ x: 860, y: 1520, h: 700, role: 'scholar', dir: -1, arm: 60 }); });
+frame(sx(2), b.y, sw, () => { K.harbor(0.5, 560); K.figure({ x: 160, y: 1250, h: 420, role: 'sailor', arm: 120 }); });
+['(A) THE MAP', '(B) THE COURT', '(C) THE HARBOR'].forEach((t, i) => small(t, sx(i) + sw / 2, b.y + sw * 16 / 9 + 26, 'center', 15, '#E6DCC6'));
+
+// 5 · captions
+b = panel(790, 610, 520, 456, 5, 'CAPTIONS');
+ctx.save(); ctx.beginPath(); ctx.rect(b.x, b.y, b.w, b.h - 10); ctx.clip(); ctx.translate(b.x, b.y); ctx.scale(b.w / 1080, (b.h - 10) / 800); K.parchment(9); ctx.restore();
+[[[{ txt: 'In' }, { txt: '1666,', hi: 1 }], 70], [[{ txt: 'London' }, { txt: 'burned.', hi: 1 }], 175], [[{ txt: 'The' }, { txt: 'king' }, { txt: 'fled.', hi: 1 }], 280]]
+  .forEach(([w, y]) => cell(b.x + b.w / 2, b.y + y, 0.48, () => K.captionStrip(w, 0, 0), null));
+small('SERIF ON TORN PAPER · 2-4 WORDS · ONE CRIMSON WORD', b.x + b.w / 2, b.y + b.h - 26, 'center', 13, '#5A4632');
+
+// 6 · rules
+b = panel(1320, 610, 580, 456, 6, 'RULES');
+rules(b, ['EVERY SHAPE IS CUT PAPER WITH A SHADOW.', 'A DATE RIBBON OPENS EVERY NEW ERA.', 'MAPS FIRST: WHERE, THEN WHO, THEN WHAT.', 'CAMERA PANS AND PUSHES, 2-4 S SHOTS.', 'NO BATTLES SHOWN: TELL IT WITH OBJECTS.', 'SOUND: PAPER RUSTLE, QUILL, SOFT STRINGS.', 'MOOD: STORYBOOK, CURIOUS, GRAND.'], b.y + 26, 17, 52);
+window.SHEET_READY = true;