@amg555/frameforge-mcp 2.3.9 → 2.4.1

package/CHANGELOG.md

@@ -4,6 +4,43 @@ All notable changes to FrameForge are documented here.
 
 ---
 
+## [2.4.1] — 2026-11-09
+
+### Fixed
+- **CLI & npx Invocation Handling (`src/mcp-server/stdio.js`, `package.json`)**:
+  - Registered `frameforge-make` binary alias in `package.json` so `npx --package=@amg555/frameforge-mcp frameforge-make` works immediately.
+  - Added CLI dispatch interception in `stdio.js` when flags or subcommands (`make`, `--topic`, `doctor`, `setup`, `harness`) are passed, preventing npx CLI invocations from hanging on stdio JSON-RPC stdin.
+- **Language & Orientation Forwarding in CLI (`src/cli/make.js`)**:
+  - Added `--orientation <landscape|portrait>` and `--portrait` flags.
+  - Forwarded `language` and auto-selected `voice` (`ml-IN-MidhunNeural`, `hi-IN-MadhurNeural`, etc.) to `runAssets` and `runRender`.
+  - Forwarded `renderWidth` and `renderHeight` to `runRender` so canvas dimensions match requested orientation.
+
+---
+
+## [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

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@amg555/frameforge-mcp",
-  "version": "2.3.9",
-  "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.1",
+  "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"
   },
   "main": "src/mcp-server/server.js",
   "bin": {
     "frameforge": "src/cli/make.js",
+    "frameforge-make": "src/cli/make.js",
     "frameforge-mcp": "src/mcp-server/stdio.js",
     "frameforge-setup": "src/cli/setup-keys.js",
     "frameforge-doctor": "src/cli/doctor.js",
@@ -40,8 +41,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.9',   code.includes("version: '2.3.9'"));
+check('SERVER_INFO version 2.4.1',   code.includes("version: '2.4.1'"));
 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.9',        cfWorker.includes("'2.3.9'"));
+check('cf-worker version 2.4.1',        cfWorker.includes("'2.4.1'"));
 check('wrangler.toml has kv_namespaces',fs.readFileSync('./cloudflare-mcp/wrangler.toml','utf8').includes('kv_namespaces'));
 
 // ── plugins/skills present ────────────────────────────────────────────────

package/src/cli/make.js

@@ -98,6 +98,7 @@ function parseArgs(argv) {
     mode: 'full-auto',
     topic: '', topicsFile: '', language: 'en',
     style: 'educational comedy', channels: ['file'],
+    orientation: 'landscape',
     scenesFile: '', scriptFile: '', mediaDir: '',
     shorts: true, dryRun: false,
     noResearch: false, noScript: false, noImages: false, noTts: false, noPublish: false,
@@ -112,6 +113,8 @@ function parseArgs(argv) {
       case '--script-file':   args.scriptFile  = argv[++i] || '';  break;
       case '--media-dir':     args.mediaDir    = argv[++i] || '';  break;
       case '--language':      args.language    = (argv[++i] || 'en').toLowerCase(); break;
+      case '--orientation':   args.orientation = (argv[++i] || 'landscape').toLowerCase(); break;
+      case '--portrait':      args.orientation = 'portrait'; break;
       case '--style':         args.style       = argv[++i] || args.style; break;
       case '--channels':      args.channels    = (argv[++i] || 'file').split(',').map(s => s.trim()); break;
       case '--no-research':   args.noResearch  = true; break;
@@ -399,10 +402,13 @@ async function runSingleVideo(args, topic, outDir, workflows) {
   // Pass stage-skip flags into scenes so runAssets can honour them
   const preparedScenes = scenes.map(s => ({
     ...s,
+    language:      s.language || args.language,
     _skipImageGen: skipImages,
     _skipTts:      args.noTts,
   }));
 
+  const resolvedVoice = LANGUAGE_VOICES[args.language] || null;
+
   const assetsResult = await runAssets({
     productionId,
     scenes:       preparedScenes,
@@ -413,17 +419,25 @@ async function runSingleVideo(args, topic, outDir, workflows) {
     topic,
     title,
     style: args.style || '',
+    language: args.language,
+    voice: resolvedVoice,
   });
   log('Assets', `✅  ${assetsResult.sceneCount} scenes prepared`);
 
   // ── Stage D: Render ────────────────────────────────────────────────────────
   logSection('Stage D: Video Render (FFmpeg)');
+  const renderWidth  = args.orientation === 'portrait' ? 1080 : 1920;
+  const renderHeight = args.orientation === 'portrait' ? 1920 : 1080;
+
   const renderResult = await runRender({
     productionId,
     sceneAssets: assetsResult.sceneAssets,
     topic,
     title,
     style: args.style || '',
+    language: args.language,
+    renderWidth,
+    renderHeight,
   });
   if (!renderResult.passed) {
     throw new Error(`Quality gate FAILED: ${JSON.stringify(renderResult.qcReport?.checks?.filter(c => !c.passed).map(c => c.name))}`);

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.9',
+  version: '2.4.1',
 };
 
 const CAPABILITIES = {

package/src/mcp-server/stdio.js

@@ -34,6 +34,34 @@
 // Load config BEFORE requiring server.js so env vars are set when providers initialise
 require('../config/load-config').loadConfig();
 
+// ── CLI Dispatch Fallback ──────────────────────────────────────────────────
+// When run via `npx @amg555/frameforge-mcp` with CLI arguments (e.g. `make`, `--topic`,
+// `doctor`, `setup`, `harness`, or `--help`), dispatch to the CLI tool instead of
+// hanging on stdin JSON-RPC.
+const firstArg = process.argv[2];
+if (firstArg && (firstArg === 'make' || firstArg.startsWith('-') || firstArg === 'doctor' || firstArg === 'setup' || firstArg === 'harness')) {
+  if (firstArg === 'doctor') {
+    require('../cli/doctor');
+    return;
+  }
+  if (firstArg === 'setup') {
+    require('../cli/setup-keys');
+    return;
+  }
+  if (firstArg === 'harness') {
+    const harnessBin = require('path').resolve(__dirname, '../harness/bin/harness.mjs');
+    const { spawnSync } = require('child_process');
+    const res = spawnSync(process.execPath, [harnessBin, ...process.argv.slice(3)], { stdio: 'inherit' });
+    process.exit(res.status ?? 0);
+  }
+  // Otherwise dispatch to make.js (stripping 'make' if present)
+  if (firstArg === 'make') {
+    process.argv.splice(2, 1);
+  }
+  require('../cli/make');
+  return;
+}
+
 const readline = require('readline');
 const { handleMCPRequest } = require('./server');
 

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

@@ -685,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);
@@ -1168,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();
 }
 
@@ -1245,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,