@amg555/frameforge-mcp 2.3.8 → 2.4.0

package/CHANGELOG.md

@@ -4,6 +4,40 @@ All notable changes to FrameForge are documented here.
 
 ---
 
+## [2.4.0] — 2026-11-09
+
+### Added
+- **MCP Tool `generate_scene_code` (`src/mcp-server/server.js`, `cloudflare-mcp/src/index.js`)**:
+  - Synthesizes pure-function-of-time canvas drawing code for `window.seek(t)` matching the Claude Opus 5.5 / `ClaudeAnimationBase` contract.
+  - LLM-assisted scene code synthesis with automatic procedural fallback (supporting celestial orbits, candlestick graphs, neural nets, 3D wireframe polyhedra).
+  - Automatically wraps generated code with `wrapCodeInHarnessHtml` for headless Chromium execution.
+- **MCP Tool `preview_scene` (`src/mcp-server/server.js`, `cloudflare-mcp/src/index.js`)**:
+  - Renders still frame previews (PNGs) of any scene at specified timestamps (defaults to `[0.1, duration/2, duration - 0.1]`).
+  - Implements the Layer 3 inspection / feedback loop, letting IDE agents (Claude Code, Cursor, Windsurf) visually inspect keyframes before encoding.
+- **Automatic Scene Code Synthesis (`src/workflows/assets.js`)**:
+  - Automatically invokes `generateSceneCodeWithLLM` when scenes lack pre-rendered media, ensuring all agent-generated videos are true code animations rather than static slideshows.
+
+### Enhanced
+- **Full-Canvas Layout & Dynamic Scaling (`src/video-renderer/scene-animator.js`)**:
+  - Eliminated bottom glassmorphic rectangle card that caused PowerPoint-style slideshow appearances.
+  - Replaced with floating cinematic kinetic typography (subtle top title, bottom caption at `0.92H`, minimal progress line).
+  - Centered visual animations at `0.50H` with 1.4×–1.5× scale expansion.
+- **Playwright Dependencies for Production (`package.json`)**:
+  - Moved `playwright` and `playwright-core` from `devDependencies` to production `dependencies` so `npx` and standard npm installs run headless Chromium out of the box without falling back to FFmpeg image loops.
+  - Expanded `findChromePath` in `src/harness/lib/browser.mjs` and `scripts/render.mjs` to auto-detect Microsoft Edge (`msedge.exe`), Brave, and system Chromium on Windows, macOS, and Linux.
+
+---
+
+## [2.3.9] — 2026-11-09
+
+### Enhanced
+- **Code-Driven Animation Primitives (`src/video-renderer/scene-animator.js`)**:
+  - Expanded `wrapCodeInHarnessHtml` runtime environment with standard animation and easing helpers: `clamp`, `lerp`, `easeIn`, `easeOut`, `easeInOut`, and `boilSeed` (12fps hand-drawn wobble).
+  - Explicitly registered `html`, `code`, and `animation_code` in `src/schema/scene.schema.json` for first-class schema validation and tool discovery.
+  - Verified pure-function-of-time canvas code execution pipeline: scene code → Playwright virtual clock headless capture → FFmpeg BT.709 H.264/AAC MP4 encode.
+
+---
+
 ## [2.3.8] — 2026-11-09
 
 ### Fixed & Enhanced

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@amg555/frameforge-mcp",
-  "version": "2.3.8",
-  "description": "FrameForge — AI video production engine for agentic IDEs. npx @amg555/frameforge-mcp. FFmpeg + TTS run on your machine. 19 MCP tools.",
+  "version": "2.4.0",
+  "description": "FrameForge — AI video production engine for agentic IDEs. npx @amg555/frameforge-mcp. FFmpeg + TTS run on your machine. 21 MCP tools.",
   "publishConfig": {
     "access": "public"
   },
@@ -40,8 +40,9 @@
   "engines": {
     "node": ">=18.0.0"
   },
-  "devDependencies": {
-    "playwright": "^1.64.1"
+  "dependencies": {
+    "playwright": "^1.64.1",
+    "playwright-core": "^1.64.1"
   },
   "keywords": [
     "frameforge",

package/plugins/video-pipeline/skills/video-pipeline/SKILL.md

@@ -26,7 +26,8 @@ IDE Agent (IBM Bob / Codex / opencode / Cursor / Windsurf / Claude Code)
     │
     ▼  Cloudflare Remote MCP (recommended) ─────────────────────────────
     │  https://video-mcp.YOUR_SUBDOMAIN.workers.dev/mcp
-    │  19 tools: create_video_from_script · edit_video · render_from_scenes
+    │  21 tools: create_video_from_script · edit_video · render_from_scenes
+    │            generate_scene_code · preview_scene
     │            ingest_media · edit_scenes · render_tts · multi_voice_tts
     │            generate_scene_image · assemble_video · publish_video
     │            research_topic · write_script · external_platform_call
@@ -145,7 +146,8 @@ FrameForge renders full-canvas, broadcast-quality motion graphics (24fps pure fu
 
 - **Option A — Natural Description:** Provide `visual_description` (e.g. "Earth rotating with 4 satellite orbits and microwave beams intersecting"). FrameForge automatically synthesizes a full-canvas procedural 3D/2D animation entity (orbital mechanics, 3D DNA helix, candlestick charts, neural mesh, 3D wireframe polyhedra).
 - **Option B — Direct Agent Code:** Provide `html` (complete page with `window.DURATION` & `window.seek(t)`) or `code` (canvas drawing instructions for `t`). FrameForge executes your program directly via headless Chromium.
-- **Option C — Multilingual & Regional Scripts:** Pass `language: "ml"` (Malayalam), `"hi"` (Hindi), etc. Native DirectWrite/HarfBuzz font stacks (`Nirmala UI`, `Noto Sans Malayalam`) render conjuncts without broken glyphs.
+- **Option C — Generate & Inspect (Layer 3 Loop):** Call `generate_scene_code({ visual_description, style })` to synthesize canvas drawing code. Then call `preview_scene({ html, timestamps: [0.1, 1.5, 2.9] })` to render PNG stills to disk, visually verify the scene in the IDE, tweak if needed, and pass into `create_video_from_script`.
+- **Option D — Multilingual & Regional Scripts:** Pass `language: "ml"` (Malayalam), `"hi"` (Hindi), etc. Native DirectWrite/HarfBuzz font stacks (`Nirmala UI`, `Noto Sans Malayalam`) render conjuncts without broken glyphs.
 
 ```js
 create_video_from_script({
@@ -317,10 +319,11 @@ marks that production FAILED and moves to the next topic.
 | LLM   | openai      | `OPENAI_API_KEY`          | GPT-4o / o1                    |
 | LLM   | ollama      | _(none)_                  | Local, OLLAMA_BASE_URL         |
 | TTS   | edge-tts    | _(none)_                  | Free, offline, 300+ voices     |
+| TTS   | voxforge    | `VOXFORGE_URL` + `_KEY`   | Local neural TTS & cloning (Rust) |
 | TTS   | elevenlabs  | `ELEVENLABS_API_KEY`      | Voice cloning                  |
 | TTS   | azure       | `AZURE_SPEECH_KEY`        | Enterprise                     |
 | TTS   | openai      | `OPENAI_API_KEY`          | High quality                   |
-| Visual| code-driven | _(none)_                  | Default — kinetic cards & typography |
+| Visual| code-driven | _(none)_                  | Default — pure-t canvas animation & kinetic text |
 | Visual| user-media  | _(none)_                  | Caller `image_path` / `video_path`   |
 
 ---
@@ -346,9 +349,9 @@ marks that production FAILED and moves to the next topic.
 ## Key files
 
 ```
-src/mcp-server/server.js          MCP HTTP server (17 tools, port 3210)
-src/mcp-server/stdio.js           MCP stdio server (17 tools)
-cloudflare-mcp/src/index.js       Cloudflare Workers Remote MCP proxy
+src/mcp-server/server.js          MCP HTTP server (21 tools, port 3210)
+src/mcp-server/stdio.js           MCP stdio server (21 tools)
+cloudflare-mcp/src/index.js       Cloudflare Workers Remote MCP proxy (21 tools)
 src/pipeline/providers.js         LLM / TTS / Image abstraction (env-var-switchable providers)
 src/pipeline/state-machine.js     File + PostgreSQL production state
 src/pipeline/retry-policy.js      Exponential backoff, stage timeouts

package/scripts/deep-validate.js

@@ -20,12 +20,16 @@ check('batch handling',              code.includes('Array.isArray(body)'));
 check('ping handler',                code.includes("method === 'ping'"));
 check('notifications/init',          code.includes("notifications/initialized"));
 check('body size limit',             code.includes('MAX_BODY_BYTES'));
-check('SERVER_INFO version 2.3.8',   code.includes("version: '2.3.8'"));
+check('SERVER_INFO version 2.4.0',   code.includes("version: '2.4.0'"));
 check('18 tools defined (incl get_job_status)', code.includes('get_job_status'));
 check('export_to_editor tool defined', code.includes('export_to_editor'));
 check('edit_video tool defined', code.includes('edit_video'));
+check('generate_scene_code tool defined', code.includes('generate_scene_code'));
+check('preview_scene tool defined', code.includes('preview_scene'));
 check('video-editor exists', fs.existsSync('./src/video-editor/editor.js'));
 check('voxforge TTS provider', code.includes('voxforge'));
+const pkg = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
+check('playwright in dependencies', Boolean(pkg.dependencies && pkg.dependencies.playwright));
 
 // ── No execSync with shell strings in renderer or extractor ───────────────
 console.log('\n=== Shell injection check ===');
@@ -295,7 +299,7 @@ check('cf-worker has checkRateLimit',   cfWorker.includes('checkRateLimit'));
 check('cf-worker hashes token (SHA-256)', cfWorker.includes('SHA-256'));
 check('cf-worker uses RATE_LIMITS KV',  cfWorker.includes('env.RATE_LIMITS'));
 check('cf-worker returns 429 on limit', cfWorker.includes('429'));
-check('cf-worker version 2.3.8',        cfWorker.includes("'2.3.8'"));
+check('cf-worker version 2.4.0',        cfWorker.includes("'2.4.0'"));
 check('wrangler.toml has kv_namespaces',fs.readFileSync('./cloudflare-mcp/wrangler.toml','utf8').includes('kv_namespaces'));
 
 // ── plugins/skills present ────────────────────────────────────────────────

package/src/harness/lib/browser.mjs

@@ -14,10 +14,23 @@ export function findChromePath(customPath = null) {
     process.env.CHROME_PATH,
     'C:/Program Files/Google/Chrome/Application/chrome.exe',
     'C:/Program Files (x86)/Google/Chrome/Application/chrome.exe',
+    'C:/Program Files (x86)/Microsoft/Edge/Application/msedge.exe',
+    'C:/Program Files/Microsoft/Edge/Application/msedge.exe',
+    'C:/Program Files/BraveSoftware/Brave-Browser/Application/brave.exe',
+    'C:/Program Files (x86)/BraveSoftware/Brave-Browser/Application/brave.exe',
     process.env.LOCALAPPDATA ? path.join(process.env.LOCALAPPDATA, 'Google/Chrome/Application/chrome.exe') : null,
+    process.env.LOCALAPPDATA ? path.join(process.env.LOCALAPPDATA, 'Microsoft/Edge/Application/msedge.exe') : null,
+    process.env.LOCALAPPDATA ? path.join(process.env.LOCALAPPDATA, 'BraveSoftware/Brave-Browser/Application/brave.exe') : null,
     '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+    '/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge',
+    '/Applications/Brave Browser.app/Contents/MacOS/Brave Browser',
+    '/Applications/Chromium.app/Contents/MacOS/Chromium',
     '/usr/bin/google-chrome',
     '/usr/bin/google-chrome-stable',
+    '/usr/bin/microsoft-edge',
+    '/usr/bin/microsoft-edge-stable',
+    '/usr/bin/brave-browser',
+    '/usr/bin/brave',
     '/usr/bin/chromium',
     '/usr/bin/chromium-browser',
     '/snap/bin/chromium',
@@ -78,7 +91,11 @@ export async function launchHarnessBrowser(opts = {}) {
   try {
     ({ chromium } = await import('playwright'));
   } catch (err) {
-    throw new Error('Playwright is required. Run: npm install playwright && npx playwright install chromium');
+    try {
+      ({ chromium } = await import('playwright-core'));
+    } catch (errCore) {
+      throw new Error('Playwright is required. Run: npm install playwright && npx playwright install chromium');
+    }
   }
 
   const execPath = findChromePath(opts.chromePath);

package/src/mcp-server/server.js

@@ -1518,13 +1518,122 @@ Features:
     },
   },
 
+  // ── Tool 20: Generate Scene Code ──────────────────────────────────────────
+  // Writes pure-function-of-t Canvas drawing code using LLM or procedural synthesis
+  generate_scene_code: {
+    description: `Generate pure-function-of-t JavaScript HTML5 Canvas drawing code for a scene.
+Matches the Claude Opus 5.5 / ClaudeAnimationBase contract where every frame is a pure mathematical function of time t.
+Returns the raw code and complete wrapped HTML ready for headless browser execution.`,
+    inputSchema: {
+      type: 'object',
+      required: ['visual_description'],
+      properties: {
+        visual_description: { type: 'string', description: 'Visual direction and motion description of the scene' },
+        caption:            { type: 'string', description: 'Headline / key concept' },
+        narration:          { type: 'string', description: 'Voiceover narration text' },
+        topic:              { type: 'string', description: 'Overall video topic' },
+        style:              { type: 'string', description: 'Aesthetic / genre (cosmic_space, cyber_tech, cinematic_documentary, finance_executive, retro_synthwave, nature_organic, hype_sports, minimal_luxury, breaking_news, warm_creative)' },
+        language:           { type: 'string', default: 'en', description: 'Language code (e.g. en, ml, hi, ta)' },
+        duration:           { type: 'number', default: 3, description: 'Duration in seconds' },
+        width:              { type: 'number', default: 1920 },
+        height:             { type: 'number', default: 1080 },
+      },
+    },
+    handler: async ({ visual_description, caption = '', narration = '', topic = '', style = '', language = 'en', duration = 3, width = 1920, height = 1080 }) => {
+      const { generateSceneCodeWithLLM, wrapCodeInHarnessHtml, generateSceneHtml } = require('../video-renderer/scene-animator');
+      let code = await generateSceneCodeWithLLM({ visualDescription: visual_description, caption, narration, topic, style, language, duration, width, height });
+      let html;
+      if (code) {
+        html = wrapCodeInHarnessHtml({ code, duration, width, height, language, style, topic });
+      } else {
+        html = generateSceneHtml({ visualDescription: visual_description, caption, narration, topic, style, language, duration, width, height });
+      }
+      return { code: code || '// Procedural animation used', html, duration, width, height, success: true };
+    },
+  },
+
+  // ── Tool 21: Preview Scene ───────────────────────────────────────────────
+  // Renders still preview frames at specified timestamps so the agent can inspect them
+  preview_scene: {
+    description: `Render still frame previews (PNGs) of an animated scene at specified timestamps (default: 0.1s, duration/2, duration - 0.1s).
+Allows the agent in Claude Code, Cursor, or any IDE to inspect the visual output, verify fonts, colors, and compositions, and patch the code before encoding. Satisfies Layer 3 verification loop.`,
+    inputSchema: {
+      type: 'object',
+      properties: {
+        code:               { type: 'string', description: 'Raw JavaScript canvas drawing code for window.seek(t)' },
+        html:               { type: 'string', description: 'Complete self-contained HTML page conforming to window.seek(t)' },
+        visual_description: { type: 'string', description: 'Visual description (used to generate scene if code/html omitted)' },
+        caption:            { type: 'string' },
+        narration:          { type: 'string' },
+        topic:              { type: 'string' },
+        style:              { type: 'string' },
+        language:           { type: 'string', default: 'en' },
+        duration:           { type: 'number', default: 3 },
+        timestamps:         { type: 'array', items: { type: 'number' }, description: 'Timestamps in seconds to capture (default: [0.1, duration/2, duration - 0.1])' },
+        width:              { type: 'number', default: 1920 },
+        height:             { type: 'number', default: 1080 },
+      },
+    },
+    handler: async ({ code, html, visual_description = '', caption = '', narration = '', topic = '', style = '', language = 'en', duration = 3, timestamps, width = 1920, height = 1080 }) => {
+      const { wrapCodeInHarnessHtml, generateSceneHtml } = require('../video-renderer/scene-animator');
+      const { launchHarnessBrowser } = require('../harness/lib/browser.mjs');
+      const { openPageWithVirtualClock } = require('../harness/lib/capture.mjs');
+      const syncFs = require('fs');
+      const pathMod = require('path');
+
+      let htmlContent = html;
+      if (!htmlContent) {
+        if (code) {
+          htmlContent = wrapCodeInHarnessHtml({ code, duration, width, height, language, style, topic });
+        } else {
+          htmlContent = generateSceneHtml({ visualDescription: visual_description, caption, narration, topic, style, language, duration, width, height });
+        }
+      }
+
+      const previewDir = pathMod.join(FILES_DIR, 'previews');
+      syncFs.mkdirSync(previewDir, { recursive: true });
+      const tempHtmlPath = pathMod.join(previewDir, `preview_${Date.now()}_${Math.random().toString(36).slice(2, 6)}.html`);
+      syncFs.writeFileSync(tempHtmlPath, htmlContent, 'utf8');
+
+      const tsList = Array.isArray(timestamps) && timestamps.length > 0
+        ? timestamps
+        : [0.1, Number((duration / 2).toFixed(2)), Number((duration - 0.1).toFixed(2))];
+
+      const { browser } = await launchHarnessBrowser();
+      const captures = [];
+
+      try {
+        const page = await openPageWithVirtualClock(browser, tempHtmlPath, { width, height });
+        const { captureFrame } = require('../harness/lib/capture.mjs');
+        for (const t of tsList) {
+          const buf = await captureFrame(page, t, { type: 'image/png' });
+          const outPng = pathMod.join(previewDir, `still_t${t.toString().replace('.', '_')}_${Date.now()}.png`);
+          syncFs.writeFileSync(outPng, buf);
+          captures.push({ timestamp: t, path: outPng, sizeBytes: buf.length });
+        }
+      } finally {
+        await browser.close();
+        try { syncFs.unlinkSync(tempHtmlPath); } catch (_) {}
+      }
+
+      return {
+        previews: captures,
+        count: captures.length,
+        width,
+        height,
+        duration,
+        message: 'Preview stills captured. You can read the image files from disk to inspect the visual composition.'
+      };
+    },
+  },
+
 };
 
 // ── MCP protocol handler (MCP 2024-11-05 spec) ───────────────────────────
 
 const SERVER_INFO = {
   name:    'video-pipeline',
-  version: '2.3.8',
+  version: '2.4.0',
 };
 
 const CAPABILITIES = {

package/src/schema/scene.schema.json

@@ -12,6 +12,9 @@
     "video_path": { "type": "string", "description": "Optional path to user-supplied video clip or B-roll" },
     "image_path": { "type": "string", "description": "Optional path to user-supplied static image" },
     "audio_path": { "type": "string", "description": "Optional path to user-supplied pre-recorded voiceover" },
+    "html": { "type": "string", "description": "Optional self-contained HTML animation page conforming to window.seek(t)" },
+    "code": { "type": "string", "description": "Optional canvas drawing JavaScript code executed for time t in window.seek" },
+    "animation_code": { "type": "string", "description": "Alias for code" },
     "visual_description": { "type": "string", "minLength": 1 },
     "character": {
       "type": "object",

package/src/video-renderer/scene-animator.js

@@ -406,6 +406,21 @@ function sfc32(a, b, c, d) {
 }
 const hash = (i) => sfc32(i * 19 + 42, i * 29 + 1337, i * 13 + 7, 99)();
 
+// Animation Primitives & Easing
+function clamp(val, min = 0, max = 1) { return Math.max(min, Math.min(max, val)); }
+function lerp(t, a, b, t0 = 0, t1 = 1) {
+  if (t <= t0) return a;
+  if (t >= t1) return b;
+  return a + (b - a) * ((t - t0) / (t1 - t0));
+}
+function easeIn(t) { return clamp(t, 0, 1) ** 2; }
+function easeOut(t) { const c = clamp(t, 0, 1); return 1 - (1 - c) ** 2; }
+function easeInOut(t) { const c = clamp(t, 0, 1); return c < 0.5 ? 2 * c * c : 1 - (-2 * c + 2) ** 2 / 2; }
+function boilSeed(t, seed = 0) {
+  const frame12 = Math.floor(t * 12);
+  return hash(seed * 1000 + frame12);
+}
+
 // Spring dynamics
 function spring(t, delay = 0, tension = 180, friction = 14) {
   const dt = t - delay;
@@ -670,18 +685,18 @@ function drawBackground(t) {
 // ── Full-Canvas Cinematic Visual Directors ─────────────────────────────────────
 function drawMainScene(t) {
   ctx.save();
-  const enterSpring = spring(t, 0.05);
-  const sceneScale = Math.min(1.02, Math.max(0.9, enterSpring));
-  ctx.translate(W / 2, H * 0.40);
+  const enterSpring = spring(t, 0.05, 170, 13);
+  const sceneScale = Math.min(1.04, Math.max(0.88, enterSpring));
+  ctx.translate(W / 2, H * 0.50);
   ctx.scale(sceneScale, sceneScale);
-  ctx.translate(-W / 2, -H * 0.40);
+  ctx.translate(-W / 2, -H * 0.50);
 
   const cx = W / 2;
-  const cy = H * 0.40;
+  const cy = H * 0.50;
 
   if (COMP_THEME === 'celestial_orbit') {
     // 3D Celestial Body (Earth) with orbiting satellites & signal pulses
-    const earthR = Math.min(W, H) * 0.15;
+    const earthR = Math.min(W, H) * 0.22;
 
     // Atmospheric halo
     const haloGrad = ctx.createRadialGradient(cx, cy, earthR * 0.9, cx, cy, earthR * 1.45);
@@ -1153,69 +1168,60 @@ function drawMainScene(t) {
   ctx.restore();
 }
 
-// ── Cinematic Broadcast Lower-Third Overlay ────────────────────────────────────
+// ── Kinetic Typography & Broadcast Subtitle Overlay ─────────────────────────
 function drawCinematicOverlay(t) {
   ctx.save();
-  const textSpring = spring(t, 0.18);
-  const bannerY = H * 0.74 + (1 - textSpring) * 45;
-  const bannerH = H * 0.18;
-  const bannerW = W * 0.88;
-  const bannerX = (W - bannerW) / 2;
-
-  ctx.globalAlpha = Math.min(1, Math.max(0, textSpring));
-
-  // Glassmorphic Lower-Third Banner
-  ctx.fillStyle = 'rgba(8, 12, 22, 0.82)';
-  ctx.strokeStyle = CARD_BORDER;
-  ctx.lineWidth = 1.5;
-  ctx.beginPath();
-  ctx.roundRect(bannerX, bannerY, bannerW, bannerH, 16);
-  ctx.fill();
-  ctx.stroke();
-
-  // Accent Left Bar
-  ctx.fillStyle = ACCENT;
-  ctx.beginPath();
-  ctx.roundRect(bannerX + 16, bannerY + 16, 6, bannerH - 32, 3);
-  ctx.fill();
-
-  // Tag Pill
-  ctx.font = 'bold 13px monospace';
-  ctx.fillStyle = ACCENT;
-  ctx.textAlign = 'left';
-  ctx.fillText(TAG, bannerX + 38, bannerY + 36);
+  const textSpring = spring(t, 0.12, 190, 15);
+  const headlineAlpha = Math.min(1, Math.max(0, textSpring));
+  ctx.globalAlpha = headlineAlpha;
+
+  // Kinetic Headline at top
+  const capY = H * 0.12 + (1 - textSpring) * -20;
+
+  // Tag Pill - minimal floating badge
+  if (TAG) {
+    ctx.font = 'bold 16px monospace';
+    ctx.fillStyle = ACCENT;
+    ctx.shadowColor = 'rgba(0, 0, 0, 0.85)';
+    ctx.shadowBlur = 10;
+    ctx.textAlign = 'left';
+    ctx.fillText('// ' + TAG, 80, capY - 22);
+  }
 
-  // Primary Caption Headline
-  ctx.font = FONT_WEIGHT + ' 44px ' + FONT_DISPLAY;
+  // Primary Caption Headline - crisp, heroic typography without opaque cards
+  ctx.font = FONT_WEIGHT + ' 50px ' + FONT_DISPLAY;
   ctx.fillStyle = '#ffffff';
-  ctx.shadowColor = 'rgba(0, 0, 0, 0.9)';
-  ctx.shadowBlur = 16;
+  ctx.shadowColor = 'rgba(0, 0, 0, 0.95)';
+  ctx.shadowBlur = 24;
   ctx.shadowOffsetY = 4;
   ctx.textAlign = 'left';
-  const cleanCap = CAPTION.length > 55 ? CAPTION.slice(0, 55) + '...' : CAPTION;
-  ctx.fillText(cleanCap, bannerX + 38, bannerY + 84);
+  const cleanCap = CAPTION.length > 60 ? CAPTION.slice(0, 60) + '...' : CAPTION;
+  ctx.fillText(cleanCap, 80, capY + 30);
 
-  // Subtitle / Narration preview
+  // Subtitle / Spoken Narration - bottom center clean broadcast subtitles
   if (NARRATION) {
-    ctx.font = '400 23px ' + FONT_BODY;
-    ctx.fillStyle = 'rgba(226, 232, 240, 0.88)';
-    ctx.shadowBlur = 8;
-    const cleanNarr = NARRATION.length > 95 ? NARRATION.slice(0, 95) + '...' : NARRATION;
-    ctx.fillText(cleanNarr, bannerX + 38, bannerY + 120);
+    const subSpring = spring(t, 0.22, 180, 16);
+    ctx.globalAlpha = Math.min(1, Math.max(0, subSpring));
+    ctx.font = '500 28px ' + FONT_BODY;
+    ctx.fillStyle = '#f8fafc';
+    ctx.shadowColor = 'rgba(0, 0, 0, 0.95)';
+    ctx.shadowBlur = 18;
+    ctx.shadowOffsetY = 3;
+    ctx.textAlign = 'center';
+    const cleanNarr = NARRATION.length > 115 ? NARRATION.slice(0, 115) + '...' : NARRATION;
+    ctx.fillText(cleanNarr, W / 2, H * 0.92);
   }
   ctx.restore();
 
-  // Bottom Progress Scrubber
+  // Bottom Progress Indicator (minimal line)
   ctx.save();
   const progress = Math.min(1, Math.max(0, t / window.DURATION));
-  ctx.fillStyle = 'rgba(255, 255, 255, 0.08)';
-  ctx.fillRect(0, H - 6, W, 6);
-
+  ctx.globalAlpha = 0.85;
   const progGrad = ctx.createLinearGradient(0, 0, W, 0);
   progGrad.addColorStop(0, ACCENT);
   progGrad.addColorStop(1, ACCENT2);
   ctx.fillStyle = progGrad;
-  ctx.fillRect(0, H - 6, W * progress, 6);
+  ctx.fillRect(0, H - 4, W * progress, 4);
   ctx.restore();
 }
 
@@ -1230,9 +1236,68 @@ window.seek = async (t) => {
 </html>`;
 }
 
+// ── LLM Creative Code Generator ──────────────────────────────────────────────
+/**
+ * Asks an LLM (Claude, Groq, Gemini, OpenAI, etc.) to write raw pure-function-of-t
+ * HTML5 Canvas animation code for a given scene brief.
+ * Returns raw JavaScript for window.seek = async (t) => { ... }, or null if unavailable.
+ */
+async function generateSceneCodeWithLLM({
+  visualDescription = '',
+  caption = '',
+  narration = '',
+  topic = '',
+  style = '',
+  language = '',
+  duration = 3,
+  width = 1920,
+  height = 1080,
+} = {}) {
+  try {
+    const { LLMProvider } = require('../pipeline/providers');
+    const llm = new LLMProvider();
+    const system = `You are an elite creative motion graphics developer writing high-end JavaScript Canvas animation code for video production.
+You write code where EVERY PIXEL IS A PURE FUNCTION OF TIME t (seconds).
+AVAILABLE VARIABLES:
+- canvas, ctx, W (${width}), H (${height}), DURATION (${duration}), FONT_DISPLAY, FONT_BODY
+AVAILABLE HELPERS:
+- spring(t, delay, tension, friction), lerp(t, a, b, t0, t1), clamp(val, min, max)
+- easeIn(t), easeOut(t), easeInOut(t), boilSeed(t, seed), hash(i)
+RULES:
+1. Every element must animate smoothly over time t [0..DURATION].
+2. Fill the canvas with rich visual geometry, vectors, animated nodes, characters, particles, or cinematic diagrams matching the prompt.
+3. NEVER use Math.random(), setTimeout, setInterval, Date.now(), performance.now().
+4. Output ONLY raw executable JavaScript code for the body of window.seek = async (t) => { ... }.
+5. NO markdown backticks, NO explanations. Start directly with JavaScript.`;
+
+    const user = `TOPIC: ${topic || 'Visual Explainer'}
+VISUAL DIRECTION: ${visualDescription || caption || 'Dynamic motion graphics'}
+KEY PHRASE: ${caption}
+NARRATION: ${narration}
+STYLE: ${style || 'cinematic'}
+DURATION: ${duration}s
+
+Write the canvas drawing code for time t.`;
+
+    const raw = await llm.chat({ system, user, temperature: 0.7, maxTokens: 4000 });
+    if (!raw) return null;
+    let cleanCode = raw.trim();
+    if (cleanCode.startsWith('```')) {
+      cleanCode = cleanCode.replace(/^```[a-z]*\n?/i, '').replace(/\n?```$/i, '').trim();
+    }
+    if (cleanCode.length > 20 && (cleanCode.includes('ctx.') || cleanCode.includes('fillRect'))) {
+      return cleanCode;
+    }
+    return null;
+  } catch (_) {
+    return null;
+  }
+}
+
 module.exports = {
   generateSceneHtml,
   wrapCodeInHarnessHtml,
+  generateSceneCodeWithLLM,
   detectAesthetic,
   detectComponentTheme,
   getScriptFontStack,

package/src/worker/server-render-free.js

@@ -182,6 +182,14 @@ async function dispatchJob(job) {
       const editor = new VideoEditor({ filesDir: FILES_DIR });
       return editor.editAndAssemble(payload);
     }
+    case 'generate_scene_code': {
+      const { TOOLS } = require('../mcp-server/server');
+      return TOOLS.generate_scene_code.handler(payload);
+    }
+    case 'preview_scene': {
+      const { TOOLS } = require('../mcp-server/server');
+      return TOOLS.preview_scene.handler(payload);
+    }
     case 'full_pipeline': return runFullPipeline(payload, job.id);
     default: throw new Error(`Unknown job type: ${type}`);
   }

package/src/worker/server.js

@@ -102,6 +102,16 @@ async function executeJob(job) {
         result = await editor.editAndAssemble(job.payload);
         break;
       }
+      case 'generate_scene_code': {
+        const { TOOLS } = require('../mcp-server/server');
+        result = await TOOLS.generate_scene_code.handler(job.payload);
+        break;
+      }
+      case 'preview_scene': {
+        const { TOOLS } = require('../mcp-server/server');
+        result = await TOOLS.preview_scene.handler(job.payload);
+        break;
+      }
       default: throw new Error(`Unknown job type: ${job.type}`);
     }
     job.status      = 'SUCCEEDED';

package/src/workflows/assets.js

@@ -73,6 +73,22 @@ async function runAssets({
         visualType = 'user_image';
       }
 
+      // Automatically synthesize custom programmatic Canvas animation code with LLM if available
+      let sceneCode = scene.code || scene.animation_code || null;
+      if (!scene.video_path && !scene.image_path && !scene.html && !sceneCode) {
+        try {
+          const { generateSceneCodeWithLLM } = require('../video-renderer/scene-animator');
+          sceneCode = await generateSceneCodeWithLLM({
+            visualDescription: scene.visual_description || scene.narration,
+            caption:           scene.caption,
+            narration:         scene.narration,
+            topic:             scene.topic || topic,
+            style:             scene.style || style,
+            language:          scene.language || language,
+          });
+        } catch (_) {}
+      }
+
       // ── TTS / User Audio ───────────────────────────────────────────────
       // Priority: audio_path (pre-recorded) > TTS synthesis.
       // --no-tts / skipTts: skip synthesis (scene must have audio_path or silence is used).
@@ -108,7 +124,7 @@ async function runAssets({
         musicMood: scene.music_mood || 'neutral',
         language:  scene.language || language || '',
         html:      scene.html || null,
-        code:      scene.code || scene.animation_code || null,
+        code:      sceneCode,
         startTime: scene.start_time != null ? scene.start_time : scene.trim_start,
         endTime:   scene.end_time != null ? scene.end_time : scene.trim_end,
         speed:     scene.speed != null ? scene.speed : 1.0,