@amg555/frameforge-mcp 2.7.3 → 2.7.7

package/plugins/aiinsight-shorts/styles/tall-tale/example/data/words.txt

@@ -0,0 +1,151 @@
+   0.30    0.40  L0  In
+   0.44    1.32  L0  1914,
+   2.16    2.30  L0  a
+   2.34    2.50  L0  couple
+   2.54    2.76  L0  in
+   2.80    3.26  L0  Idaho
+   3.30    3.66  L0  mailed
+   3.70    3.94  L0  their
+   3.98    4.28  L0  five
+   4.32    4.48  L0  year
+   4.52    4.68  L0  old
+   4.72    5.00  L0  daughter
+   5.19    5.30  L1  to
+   5.34    5.44  L1  her
+   5.48    6.04  L1  grandma's
+   6.08    6.40  L1  house.
+   6.76    6.82  L2  With
+   6.86    6.98  L2  the
+   7.02    7.26  L2  stamps
+   7.30    7.54  L2  stuck
+   7.58    7.86  L2  right
+   7.90    8.04  L2  on
+   8.08    8.18  L2  her
+   8.22    8.48  L2  coat.
+   8.94    8.94  L3  See,
+   9.16    9.22  L3  the
+   9.26    9.46  L3  post
+   9.50    9.86  L3  office
+   9.90   10.06  L3  had
+  10.10   10.24  L3  just
+  10.28   10.64  L3  started
+  10.68   11.14  L3  delivering
+  11.18   11.80  L3  packages,
+  12.37   12.52  L4  and
+  12.56   12.82  L4  May's
+  12.86   13.12  L4  parents
+  13.16   13.46  L4  wanted
+  13.50   13.62  L4  her
+  13.66   13.76  L4  to
+  13.80   13.98  L4  visit
+  14.02   14.58  L4  grandma,
+  15.08   15.52  L5  seventy-three
+  15.62   16.20  L5  miles
+  16.24   16.66  L5  away.
+  16.97   17.06  L6  But
+  17.10   17.16  L6  a
+  17.20   17.48  L6  train
+  17.52   17.82  L6  ticket
+  17.86   18.22  L6  wasn't
+  18.26   18.60  L6  cheap.
+  18.90   19.04  L7  So
+  19.08   19.24  L7  her
+  19.28   19.54  L7  dad
+  19.58   19.86  L7  walked
+  19.90   20.06  L7  her
+  20.10   20.18  L7  into
+  20.22   20.34  L7  the
+  20.38   20.62  L7  post
+  20.66   21.00  L7  office
+  21.73   21.73  L8  and
+  21.73   21.94  L8  asked
+  21.98   22.24  L8  how
+  22.28   22.44  L8  much
+  22.48   22.62  L8  it
+  22.66   22.90  L8  costs
+  22.94   23.18  L8  to
+  23.22   23.36  L8  mail
+  23.40   23.58  L8  a
+  23.62   23.82  L8  kid.
+  24.14   24.24  L9  The
+  24.28   24.44  L9  clerk
+  24.48   24.76  L9  checked
+  24.80   24.96  L9  the
+  25.00   25.38  L9  rules,
+  25.80   25.90  L10 and
+  25.94   26.20  L10 nothing
+  26.24   26.50  L10 said
+  26.54   26.68  L10 he
+  26.72   27.02  L10 couldn't.
+  27.20   27.34  L11 May
+  27.38   27.62  L11 weighed
+  27.62   28.25  L11 forty-eight
+  28.32   28.44  L11 and
+  28.48   28.54  L11 a
+  28.58   28.80  L11 half
+  28.84   29.26  L11 pounds,
+  29.74   29.94  L12 just
+  29.98   30.18  L12 under
+  30.22   30.34  L12 the
+  30.34   30.72  L12 fifty
+  30.76   30.96  L12 pound
+  31.00   31.34  L12 limit.
+  31.68   31.74  L13 So
+  31.78   32.02  L13 on
+  32.06   32.28  L13 went
+  32.28   32.87  L13 fifty-three
+  32.94   33.24  L13 cents
+  33.28   33.52  L13 in
+  33.56   33.86  L13 stamps,
+  34.32   34.54  L14 and
+  34.58   34.68  L14 she
+  34.72   34.90  L14 rode
+  34.94   35.10  L14 the
+  35.14   35.38  L14 train
+  35.42   35.58  L14 in
+  35.62   35.68  L14 the
+  35.72   35.90  L14 mail
+  35.94   36.34  L14 car,
+  36.78   36.88  L15 with
+  36.92   37.02  L15 her
+  37.06   37.52  L15 mom's
+  37.56   37.86  L15 cousin,
+  38.14   38.28  L15 who
+  38.32   38.48  L15 happened
+  38.52   38.74  L15 to
+  38.78   38.84  L15 be
+  38.88   38.96  L15 the
+  39.00   39.24  L15 mail
+  39.28   39.58  L15 clerk.
+  40.02   40.06  L16 He
+  40.10   40.26  L16 walked
+  40.30   40.46  L16 her
+  40.50   40.74  L16 right
+  40.78   40.90  L16 up
+  40.94   41.10  L16 to
+  41.14   41.74  L16 grandma's
+  41.78   41.94  L16 front
+  41.98   42.38  L16 door.
+  42.72   42.78  L17 Soon
+  42.82   43.18  L17 after,
+  43.44   43.48  L17 the
+  43.52   43.70  L17 post
+  43.74   43.96  L17 office
+  44.00   44.46  L17 banned
+  44.50   44.84  L17 mailing
+  44.88   45.36  L17 people.
+  45.62   45.70  L18 Which
+  45.74   45.88  L18 is
+  45.92   46.16  L18 why
+  46.20   46.58  L18 today,
+  47.12   47.12  L18 you
+  47.14   47.26  L18 can
+  47.30   47.50  L18 still
+  47.54   47.82  L18 mail
+  47.86   48.24  L18 baby
+  48.28   48.62  L18 chicks,
+  49.04   49.12  L19 but
+  49.16   49.32  L19 not
+  49.36   49.48  L19 your
+  49.52   49.70  L19 little
+  49.74   49.98  L19 sister.

package/plugins/aiinsight-shorts/styles/tall-tale/example/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html><head><meta charset="utf-8"><title>Tall Tale 3D</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'); }
+@font-face { font-family: 'Caladea'; font-weight: 700; src: url('fonts/Caladea-Bold.ttf'); }
+@font-face { font-family: 'Caladea'; font-weight: 100 900; src: local('Nirmala UI Bold'), local('NirmalaUI-Bold'), local('Nirmala UI'), local('Noto Sans Malayalam Bold'), local('NotoSansMalayalam-Bold'), local('Noto Sans Malayalam'), local('Malayalam Sangam MN Bold'), local('Malayalam Sangam MN'), local('FreeSans Bold'), local('FreeSansBold'), local('FreeSans'); unicode-range: U+0D00-0D7F, U+200C-200D, U+25CC; } /* Malayalam (AI Insight Shorts) */
+@font-face { font-family: 'Inter'; font-weight: 100 900; src: local('Nirmala UI Bold'), local('NirmalaUI-Bold'), local('Nirmala UI'), local('Noto Sans Malayalam Bold'), local('NotoSansMalayalam-Bold'), local('Noto Sans Malayalam'), local('Malayalam Sangam MN Bold'), local('Malayalam Sangam MN'), local('FreeSans Bold'), local('FreeSansBold'), local('FreeSans'); unicode-range: U+0D00-0D7F, U+200C-200D, U+25CC; } /* Malayalam (AI Insight Shorts) */
+html, body { margin: 0; background: #111; height: 100%; } body { display: flex; align-items: center; justify-content: center; }
+#cv { display: block; height: 100vh; width: auto; } body.capture #cv { height: auto; } #gl { display: none; }
+#play { position: fixed; font: 900 28px Inter, sans-serif; padding: 18px 36px; border: 0; border-radius: 40px; background: #FFD43B; cursor: pointer; }
+</style></head>
+<body>
+<canvas id="cv" width="1080" height="1920"></canvas><canvas id="gl" width="1080" height="1920"></canvas>
+<button id="play" hidden>▶ PLAY</button>
+<script>if (location.search.includes('capture')) document.body.className = 'capture';</script>
+<script type="importmap">{"imports":{"three":"./vendor/three.module.js","three/addons/":"./vendor/addons/"}}</script>
+<script type="module" src="src/main.js"></script>
+</body></html>

package/plugins/aiinsight-shorts/styles/tall-tale/example/script.json

@@ -0,0 +1,37 @@
+{
+  "title": "The Girl Who Was Mailed To Grandma",
+  "voice": "am_michael",
+  "speed": 1.05,
+  "lead": 0.3,
+  "outro": 1.2,
+  "gap": 0.18,
+  "music": "bounce",
+  "sources": [
+    "History.com, 'When Americans Mailed Their Children' (parcel post began January 1, 1913; in February 1914 May Pierstorff, nearly six, was mailed 73 miles from Grangeville to her grandparents in Lewiston, Idaho, for 53 cents in stamps attached to her coat; a relative who was a postal worker took her on a Railway Mail train; the Postmaster General then banned accepting people as mail)",
+    "Wikipedia, 'Charlotte May Pierstorff' (48.5 pounds; rode in the mail car with Leonard Mochel, her mother's cousin, a railway postal clerk, who delivered her to her grandmother; the case led to rules against mailing people; day-old poultry stayed mailable)",
+    "USPS Publication 52 / DMM 526: day-old poultry (live baby chicks) can still be mailed today",
+    "Parcel post weight limit was raised to 50 pounds for the first and second zones on January 1, 1914"
+  ],
+  "lines": [
+    { "text": "In 1914, a couple in Idaho mailed their five year old daughter", "caps": "In 1914, | a couple | in Idaho | mailed | their | five year old | daughter" },
+    { "text": "to her grandma's house." },
+    { "text": "With the stamps stuck right on her coat." },
+    { "text": "See, the post office had just started delivering packages," },
+    { "text": "and May's parents wanted her to visit grandma," },
+    { "text": "seventy-three miles away.", "caps": "73 miles | away." },
+    { "text": "But a train ticket wasn't cheap." },
+    { "text": "So her dad walked her into the post office" },
+    { "text": "and asked how much it costs to mail a kid." },
+    { "text": "The clerk checked the rules," },
+    { "text": "and nothing said he couldn't." },
+    { "text": "May weighed forty-eight and a half pounds,", "caps": "May | weighed | 48 and a half | pounds," },
+    { "text": "just under the fifty pound limit.", "caps": "just | under | the 50 pound | limit." },
+    { "text": "So on went fifty-three cents in stamps,", "caps": "So on | went | 53 cents | in stamps," },
+    { "text": "and she rode the train in the mail car," },
+    { "text": "with her mom's cousin, who happened to be the mail clerk." },
+    { "text": "He walked her right up to grandma's front door." },
+    { "text": "Soon after, the post office banned mailing people." },
+    { "text": "Which is why today, you can still mail baby chicks," },
+    { "text": "but not your little sister.", "gap": 0.3 }
+  ]
+}

package/plugins/aiinsight-shorts/styles/tall-tale/example/sheet.html

@@ -0,0 +1,13 @@
+<!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'); }
+@font-face { font-family: 'Caladea'; font-weight: 700; src: url('fonts/Caladea-Bold.ttf'); }
+@font-face { font-family: 'Caladea'; font-weight: 100 900; src: local('Nirmala UI Bold'), local('NirmalaUI-Bold'), local('Nirmala UI'), local('Noto Sans Malayalam Bold'), local('NotoSansMalayalam-Bold'), local('Noto Sans Malayalam'), local('Malayalam Sangam MN Bold'), local('Malayalam Sangam MN'), local('FreeSans Bold'), local('FreeSansBold'), local('FreeSans'); unicode-range: U+0D00-0D7F, U+200C-200D, U+25CC; } /* Malayalam (AI Insight Shorts) */
+@font-face { font-family: 'Inter'; font-weight: 100 900; src: local('Nirmala UI Bold'), local('NirmalaUI-Bold'), local('Nirmala UI'), local('Noto Sans Malayalam Bold'), local('NotoSansMalayalam-Bold'), local('Noto Sans Malayalam'), local('Malayalam Sangam MN Bold'), local('Malayalam Sangam MN'), local('FreeSans Bold'), local('FreeSansBold'), local('FreeSans'); unicode-range: U+0D00-0D7F, U+200C-200D, U+25CC; } /* Malayalam (AI Insight Shorts) */
+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/aiinsight-shorts/styles/tall-tale/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/aiinsight-shorts/styles/tall-tale/example/src/core/captions.js

@@ -0,0 +1,56 @@
+// Captions: ONE word at a time (short words ride along with the next: "a single", "the whole"), white heavy sans with
+// a black outline and a soft drop shadow, centre of the screen. No colour highlight. Words keep their punctuation.
+// A script line may set "caps": "He bet | his life | savings" to choose the chunks; otherwise they're made automatically.
+import { ctx, clamp, lerp, seg, eob } from './lib.js';
+import { T, lineWords } from './timing.js';
+
+export const CAP = { y: 1340, size: 88, maxW: 960 };
+let caps = [];
+const SHORT = /^(a|an|the|to|of|in|on|at|by|and|but|or|so|is|it|he|she|we|i|his|her|my|no|up|for|was)$/i;
+
+function autoChunks(ws) {
+  const out = [];
+  for (let i = 0; i < ws.length; i++) {
+    const w = ws[i], n = ws[i + 1], bare = w.replace(/[^A-Za-z']/g, '');
+    if (n && SHORT.test(bare) && !/[,.!?;:]$/.test(w) && (w + n).length <= 11) { out.push([i, i + 1]); i++; } else out.push([i, i]);
+  }
+  return out;
+}
+
+export function buildCaptions(script) {
+  caps = [];
+  script.lines.forEach((ln, i) => {
+    const ws = lineWords(i); if (!ws.length) return;
+    const textWords = ln.text.split(/\s+/).filter(Boolean);
+    const spoken = ws.length === textWords.length ? textWords : ws.map((w) => w.w);
+    if (ln.caps) {
+      const nm = (w) => String(w).toLowerCase().replace(/[^a-z0-9'\u0D00-\u0D7F]+/g, '');
+      let from = 0;
+      ln.caps.split('|').map((c) => c.trim()).filter(Boolean).forEach((c, j) => {
+        const first = nm(c.split(/\s+/)[0]);
+        let idx = j === 0 ? 0 : ws.findIndex((w, k) => k > from && nm(w.w) === first);
+        if (idx < 0) idx = Math.min(ws.length - 1, from + 1);
+        from = idx; caps.push({ line: i, s: ws[idx].s - 0.03, text: c.replace(/\*/g, '') });
+      });
+    } else autoChunks(spoken).forEach(([a, b]) => caps.push({ line: i, s: ws[a].s - 0.03, text: spoken.slice(a, b + 1).join(' ') }));
+  });
+  caps.forEach((c, k) => { const next = caps[k + 1], lineEnd = T.lines[c.line].end; c.e = next ? (next.s - lineEnd > 0.6 && next.line !== c.line ? lineEnd + 0.25 : next.s) : T.dur; });
+  return caps;
+}
+export const captionList = () => caps.map((c) => ({ ...c, words: [{ txt: c.text }] }));
+
+/** draw one caption text at x, y (also used by the style sheet) */
+export function captionText(text, x = 540, y = CAP.y, sc = 1) {
+  const size = CAP.size;
+  ctx.save(); ctx.font = `900 ${size}px Inter`; ctx.letterSpacing = '0px';
+  const fit = Math.min(1, CAP.maxW / ctx.measureText(text).width);
+  ctx.translate(x, y); ctx.scale(sc * fit, sc * fit); ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.lineJoin = 'round';
+  ctx.fillStyle = 'rgba(0,0,0,0.45)'; ctx.fillText(text, 3, 9);
+  ctx.lineWidth = 15; ctx.strokeStyle = '#0B0B10'; ctx.strokeText(text, 0, 0);
+  ctx.fillStyle = '#FFFFFF'; ctx.fillText(text, 0, 0);
+  ctx.restore();
+}
+export function drawCaption(t) {
+  const c = caps.find((c) => t >= c.s && t < c.e); if (!c) return;
+  const lt = t - c.s; captionText(c.text, 540, CAP.y, lt < 0.1 ? lerp(0.86, 1, eob(seg(lt, 0, 0.1))) : 1);
+}

package/plugins/aiinsight-shorts/styles/tall-tale/example/src/core/engine.js

@@ -0,0 +1,65 @@
+// Renderer + cartoon-film look: neutral tone curve (keeps colours saturated), 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 }, uSat: { value: 1.12 } },
+  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, uSat; 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; float l = dot(c.rgb, vec3(0.299, 0.587, 0.114)); c.rgb = mix(vec3(l), c.rgb, uSat); 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.NeutralToneMapping; 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.18; grade.uniforms.uGrain.value = look.grain ?? 0.008; grade.uniforms.uSat.value = look.sat ?? 1.12; grade.uniforms.uWarm.value = look.warm ?? 0.02; 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, 800); }

package/plugins/aiinsight-shorts/styles/tall-tale/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();
+}