@amg555/frameforge-mcp 2.4.1 → 2.4.3

package/CHANGELOG.md

@@ -4,6 +4,46 @@ All notable changes to FrameForge are documented here.
 
 ---
 
+## [2.4.3] — 2026-11-09
+
+### Enhanced
+- **Sentence-Synchronized Subtitles (`src/video-renderer/scene-animator.js`)**:
+  - Replaced static slide titles, topic banners, and category tags (`// CHRONICLE`, `// HERITAGE`, top headlines) with sentence-synchronized broadcast subtitles centered at bottom with subtle frosted glass backing pills.
+  - Automatically slices narration scripts into sentence beats keyed to duration (`DURATION / sentenceCount`) with smooth spring entrance transitions (`spring(localT, 0.04, 210, 16)`).
+  - Word wrapping for long sentences to prevent clipping.
+
+- **3-Beat Progressive Choreography & Dynamic Camera (`src/video-renderer/scene-animator.js`)**:
+  - Added multi-beat progression across all 9 doodle themes:
+    - `doodle_dressing`: Beat 1 browsing wardrobe $\to$ Beat 2 trying on shirt $\to$ Beat 3 smiling & waving in glowing amber mirror.
+    - `doodle_shiver_cold`: Beat 1 shivering alone $\to$ Beat 2 "NOT FOR COLD" stamp $\to$ Beat 3 "NOT FOR PROTECTION" stamp with character contemplating.
+    - `doodle_hunter_savannah`: Character walking with spear across savannah grass swatting mosquitoes under sun.
+    - `doodle_sewing_needle`: Campfire $\to$ loupe zoom into bone needle stitching animal hide $\to$ archaeological timeline badge.
+    - `doodle_shame_reflection`: Looking down $\to$ water reflection ripples clear $\to$ blush & Theory of Mind halo.
+    - `doodle_tribe_meeting`: Two clans approach $\to$ peace greeting $\to$ social language connection arc.
+    - `doodle_thinking_future`: Campfire thinker $\to$ thought cloud $\to$ planning for tomorrow tools & sunrise.
+    - `doodle_microscope_lice`: Character scratching itching pelt $\to$ microscope slide $\to$ head vs body lice divergence badge.
+  - Added subtle cinematic camera drift and breathing (`camZoom`, `camPanX`, `camPanY`) via progress $p = t / DURATION$.
+
+### Fixed
+- **Regex Parsing Bug in Template Literal (`src/video-renderer/scene-animator.js`)**:
+  - Fixed syntax error caused by unescaped newline in regex literal inside template literal string.
+- **Theme Detection Priority (`src/video-renderer/scene-animator.js`)**:
+  - Prioritized specific narrative themes (`doodle_microscope_lice`, `doodle_shiver_cold`, `doodle_hunter_savannah`, `doodle_tribe_meeting`, `doodle_thinking_future`, `doodle_sewing_needle`, `doodle_shame_reflection`) ahead of general wardrobe dressing to guarantee every scene gets its exact script-matched visual doodle.
+
+---
+
+## [2.4.2] — 2026-11-09
+
+### Added
+- **Procedural Doodled Character Animation Engine (`src/video-renderer/scene-animator.js`)**:
+  - Pure-function-of-time character generator (`drawDoodleCharacter`) supporting expressive facial animations (talking, shivering, smiling, surprised), multiple hairstyles (wild, modern, feather), clothing types (none, pelt, shirt, cloak), and animated poses (hold_spear, shiver, sewing, dress_shirt, peace_gesture, thinker, natural).
+  - 12fps hand-drawn boiling wobble (`wb(seed, mag)`) and organic sketchy vector primitives (`sLine`, `sCircle`, `sRect`) conforming to the pure-$t$ rendering contract.
+  - 9 narrative-matched character scene themes: `doodle_dressing`, `doodle_shiver_cold`, `doodle_sewing_needle`, `doodle_hunter_savannah`, `doodle_shame_reflection`, `doodle_tribe_meeting`, `doodle_thinking_future`, `doodle_microscope_lice`, and `doodle_general_human`.
+  - Action-grounded theme detection in `detectComponentTheme`: Human narrative, evolution, psychology, and daily action scripts automatically map to physical character animations rather than abstract geometry.
+  - Enhanced LLM prompt in `generateSceneCodeWithLLM` directing AI models to animate expressive human figures actively performing narrated actions.
+
+---
+
 ## [2.4.1] — 2026-11-09
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amg555/frameforge-mcp",
-  "version": "2.4.1",
+  "version": "2.4.3",
   "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"

package/scripts/deep-validate.js

@@ -20,7 +20,7 @@ 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.4.1',   code.includes("version: '2.4.1'"));
+check('SERVER_INFO version 2.4.3',   code.includes("version: '2.4.3'"));
 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'));
@@ -299,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.4.1',        cfWorker.includes("'2.4.1'"));
+check('cf-worker version 2.4.3',        cfWorker.includes("'2.4.3'"));
 check('wrangler.toml has kv_namespaces',fs.readFileSync('./cloudflare-mcp/wrangler.toml','utf8').includes('kv_namespaces'));
 
 // ── plugins/skills present ────────────────────────────────────────────────

package/src/mcp-server/server.js

@@ -1633,7 +1633,7 @@ Allows the agent in Claude Code, Cursor, or any IDE to inspect the visual output
 
 const SERVER_INFO = {
   name:    'video-pipeline',
-  version: '2.4.1',
+  version: '2.4.3',
 };
 
 const CAPABILITIES = {

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

@@ -267,6 +267,61 @@ function detectComponentTheme({ visualDescription = '', caption = '', narration
   if (imagePath) return 'image';
   const text = `${visualDescription} ${caption} ${narration} ${topic}`.toLowerCase();
 
+  // ── Doodled Character Actions (Human Stories, History, Evolution, Daily Life) ──
+  // 1. Microscope / Lice Theory / Parasite / Genetics (Scene 7)
+  if (/(?:^|[^\w])(lice|louse|microscope|fiber|weave|parasite|lice evolution|genetic biology proof)(?:[^\w]|$)/i.test(text)
+      || /പേൻ|പേൻ തിയറി|തലയിലെ പേൻ|ശരീരത്തിലെ പേൻ|ലൈസ് തിയറി|മൈക്രോസ്കോപ്പ്/.test(text)) {
+    return 'doodle_microscope_lice';
+  }
+
+  // 2. Shivering / Cold / Protection Flaw / Winter / Freezing (Scene 2, 6)
+  if (/(?:^|[^\w])(shiver|shivering|cold|freeze|freezing|ice|winter|teeth|chatter|protection flaw)(?:[^\w]|$)/i.test(text)
+      || /സാധാരണ ധാരണകൾ|തണുപ്പും സംരക്ഷണവും|തള്ളിക്കളയുന്നു|ശരീരത്തെ സംരക്ഷിക്കാൻ|ശരീര സംരക്ഷണം|വിറയ്ക്കുക|തണുപ്പിൽ നിന്ന് രക്ഷ നേടാൻ|തണുപ്പ് എന്ന കാരണം|തണുപ്പുള്ള സ്ഥലങ്ങളിലേക്ക്/.test(text)) {
+    return 'doodle_shiver_cold';
+  }
+
+  // 3. Hunter in Savannah / Wild / Blazing Sun / Spear / Mosquitoes (Scene 5)
+  if (/(?:^|[^\w])(savannah|savanna|spear|hunter|hunting|africa savannah|foraging|wild jungle|mosquito|mosquitoes|thorns)(?:[^\w]|$)/i.test(text)
+      || /കാട്ടിൽ നഗ്നരായി|നഗ്നരായിട്ടാണ്|കൊടുംചൂട്|കൊതുകുകടി|മുള്ളുകൾ|കുന്തം|കാട്ടിലെ ലക്ഷക്കണക്കിന്/.test(text)) {
+    return 'doodle_hunter_savannah';
+  }
+
+  // 4. Meeting Tribes / Social Language / Status / Community / Strangers (Scene 10)
+  if (/(?:^|[^\w])(tribe|tribal|clan|stranger|meeting strangers|social language|status in society|hierarchy|friend or enemy)(?:[^\w]|$)/i.test(text)
+      || /കൂട്ടമായി|സമൂഹം|അപരിചിത|ഗോത്രം|ശത്രു|സുഹൃത്ത്|സാമൂഹിക ഭാഷ|സാമൂഹിക|സ്ഥാനം തിരിച്ചറിഞ്ഞിരുന്നത്/.test(text)) {
+    return 'doodle_tribe_meeting';
+  }
+
+  // 5. Future Planning / Cognitive Revolution / Tomorrow / Foresight / Campfire thinking (Scene 8)
+  if (/(?:^|[^\w])(planning for tomorrow|future planning|cognitive revolution|thinking future|contemplate|foresight|ian gilligan)(?:[^\w]|$)/i.test(text)
+      || /നാളത്തേക്ക്|പ്ലാൻ|ഭാവി|ഭാവിയെ കുറിച്ച്|ബുദ്ധി ഉപയോഗിച്ച്|ചിന്തയിലെ മാറ്റം|ഇയാൻ ഗില്ലിഗൻ|ചിന്തിക്കാൻ തുടങ്ങി/.test(text)) {
+    return 'doodle_thinking_future';
+  }
+
+  // 6. Bone Needle / Sewing / Stitching / Animal Pelt / Prehistoric Tools (Scene 4)
+  if (/(?:^|[^\w])(needle|bone needle|needles|sew|sewing|stitch|stitching|thread|animal hide|leather hide|hide sewing|fur pelt|tailor|sewing tools)(?:[^\w]|$)/i.test(text)
+      || /സൂചി|സൂചിയും|തുന്ന|തുന്നാൻ|തോൽ തുന്നാൻ|തുന്നൽ|തോൽ തുന്നാനുള്ള/.test(text)) {
+    return 'doodle_sewing_needle';
+  }
+
+  // 7. Shame / Mirror / Reflection / Water / Self Awareness / Theory of Mind (Scene 3, 9)
+  if (/(?:^|[^\w])(shame|blush|embarrass|mirror|reflection|water pool|theory of mind|how others see|self-aware|identity|looking at me|psychology|mind-shift)(?:[^\w]|$)/i.test(text)
+      || /കണ്ണാടി|പ്രതിഫലനം|മറ്റുള്ളവർ എന്നെ|തിയറി ഓഫ് മൈൻഡ്|സ്വന്തം ശരീരം മറച്ചു|വ്യക്തിത്വം|ശ്രദ്ധിക്കുന്നുണ്ട്|യഥാർത്ഥ രഹസ്യം|നാണം മറയ്ക്കാൻ/.test(text)) {
+    return 'doodle_shame_reflection';
+  }
+
+  // 8. Dressing / Wardrobe / Wearing Clothes / Outfit / Morning Routine (Scene 1, 11)
+  if (/(?:^|[^\w])(dress|dressing|wearing clothes|shirt|wardrobe|closet|hanger|outfit|choose clothes|wear|garment|wedding dress|interview|daily habit|why we wear clothes)(?:[^\w]|$)/i.test(text)
+      || /വസ്ത്രധാരണം|ധരിച്ചിട്ടുണ്ടാ|ഷർട്ട്|തിരഞ്ഞെടുത്തത്|തുണി എടുത്തിടുകയല്ല|കല്യാണത്തിന്|ഇന്റർവ്യൂ|ആമുഖം: വസ്ത്രധാരണം|വസ്ത്രം തിരഞ്ഞെടുക്കുമ്പോൾ|വസ്ത്രം തിരഞ്ഞെടുക്കും/.test(text)) {
+    return 'doodle_dressing';
+  }
+
+  // 9. General Human Character
+  if (/(?:^|[^\w])(human|person|man|woman|people|child|guy|doodle|character|actor)(?:[^\w]|$)/i.test(text)
+      || /മനുഷ്യൻ|ആളുകൾ|വ്യക്തി/.test(text)) {
+    return 'doodle_general_human';
+  }
+
   // Celestial / Orbiting satellites (e.g. GPS, orbital mechanics, planetary science)
   if (/(?:^|[^\w])(orbit|satellite|satellites|gps|planet|earth|mars|moon|galaxy|universe|solar|astronomy|gravity|space|telescope|interstellar)(?:[^\w]|$)/.test(text)
       || /ബഹിരാകാശ|ഗ്രഹം|ഉപഗ്രഹ|ഭൂമി|നക്ഷത്ര|പ്രപഞ്ച|अंतरिक्ष|ग्रह|तारा|விண்வெளி/.test(text)) {
@@ -685,16 +740,873 @@ function drawBackground(t) {
 // ── Full-Canvas Cinematic Visual Directors ─────────────────────────────────────
 function drawMainScene(t) {
   ctx.save();
+  const p = Math.min(1, Math.max(0, t / window.DURATION));
   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);
+  const camZoom = 1.0 + Math.sin(t * 0.45) * 0.02 + p * 0.04;
+  const camPanX = Math.sin(t * 0.35) * 12;
+  const camPanY = Math.cos(t * 0.28) * 6;
+  ctx.translate(W / 2 + camPanX, H * 0.50 + camPanY);
+  ctx.scale(Math.min(1.04, Math.max(0.88, enterSpring)) * camZoom, Math.min(1.04, Math.max(0.88, enterSpring)) * camZoom);
   ctx.translate(-W / 2, -H * 0.50);
 
   const cx = W / 2;
   const cy = H * 0.50;
 
-  if (COMP_THEME === 'celestial_orbit') {
+  // ── Hand-Drawn Boil Wobble & Sketch Helpers (12fps Hand-Drawn Animation) ──
+  function wb(seed, mag = 2.4) {
+    const step = Math.floor(t * 12);
+    return Math.sin(seed * 19.37 + step * 2.41) * mag;
+  }
+
+  function sLine(x1, y1, x2, y2, seed, color = '#f8fafc', width = 3.5) {
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = width;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    const mx = (x1 + x2) / 2 + wb(seed, 3.5);
+    const my = (y1 + y2) / 2 + wb(seed + 1, 3.5);
+    ctx.beginPath();
+    ctx.moveTo(x1 + wb(seed + 2, 1.5), y1 + wb(seed + 3, 1.5));
+    ctx.quadraticCurveTo(mx, my, x2 + wb(seed + 4, 1.5), y2 + wb(seed + 5, 1.5));
+    ctx.stroke();
+    ctx.restore();
+  }
+
+  function sCircle(x, y, r, seed, color = '#f8fafc', width = 3, fillColor = null) {
+    ctx.save();
+    if (fillColor) {
+      ctx.fillStyle = fillColor;
+      ctx.beginPath();
+      ctx.arc(x, y, r, 0, Math.PI * 2);
+      ctx.fill();
+    }
+    ctx.strokeStyle = color;
+    ctx.lineWidth = width;
+    ctx.beginPath();
+    const segs = 10;
+    for (let s = 0; s <= segs; s++) {
+      const a = (s / segs) * Math.PI * 2;
+      const curR = r + wb(seed + s, 2.5);
+      const px = x + Math.cos(a) * curR;
+      const py = y + Math.sin(a) * curR;
+      if (s === 0) ctx.moveTo(px, py);
+      else ctx.lineTo(px, py);
+    }
+    ctx.closePath();
+    ctx.stroke();
+    ctx.restore();
+  }
+
+  function sRect(x, y, w, h, seed, color = '#f8fafc', width = 3, fillColor = null) {
+    ctx.save();
+    if (fillColor) {
+      ctx.fillStyle = fillColor;
+      ctx.fillRect(x, y, w, h);
+    }
+    sLine(x, y, x + w, y, seed, color, width);
+    sLine(x + w, y, x + w, y + h, seed + 1, color, width);
+    sLine(x + w, y + h, x, y + h, seed + 2, color, width);
+    sLine(x, y + h, x, y, seed + 3, color, width);
+    ctx.restore();
+  }
+
+  function drawDoodleCharacter({
+    x = cx,
+    y = cy,
+    scale = 1.0,
+    headRadius = 38,
+    torsoHeight = 90,
+    legLength = 95,
+    hairStyle = 'wild',
+    expression = 'talking',
+    clothing = 'none',
+    armPose = 'natural',
+    seed = 100,
+  } = {}) {
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.scale(scale, scale);
+
+    const blink = (t % 3.2 < 0.14) ? 0.15 : 1.0;
+    const mouthTalk = Math.abs(Math.sin(t * 14)) * 4;
+    const torsoTopY = -torsoHeight;
+    const torsoBottomY = 0;
+
+    // Torso Clothing Fills
+    if (clothing === 'pelt') {
+      ctx.fillStyle = '#b45309';
+      ctx.beginPath();
+      ctx.moveTo(-24 + wb(seed, 2), torsoTopY);
+      ctx.lineTo(24 + wb(seed + 1, 2), torsoTopY);
+      ctx.lineTo(32 + wb(seed + 2, 2), torsoBottomY + 28);
+      ctx.lineTo(-28 + wb(seed + 3, 2), torsoBottomY + 28);
+      ctx.closePath();
+      ctx.fill();
+      sLine(-28, torsoBottomY + 2, 32, torsoBottomY + 2, seed + 4, '#78350f', 4);
+    } else if (clothing === 'shirt') {
+      ctx.fillStyle = ACCENT;
+      ctx.beginPath();
+      ctx.moveTo(-26 + wb(seed, 2), torsoTopY);
+      ctx.lineTo(26 + wb(seed + 1, 2), torsoTopY);
+      ctx.lineTo(28 + wb(seed + 2, 2), torsoBottomY + 12);
+      ctx.lineTo(-28 + wb(seed + 3, 2), torsoBottomY + 12);
+      ctx.closePath();
+      ctx.fill();
+      sLine(-14, torsoTopY, 0, torsoTopY + 18, seed + 4, '#ffffff', 3);
+      sLine(14, torsoTopY, 0, torsoTopY + 18, seed + 5, '#ffffff', 3);
+      sLine(0, torsoTopY + 18, 0, torsoBottomY + 10, seed + 6, '#ffffff', 2.5);
+    } else if (clothing === 'cloak') {
+      ctx.fillStyle = '#0f766e';
+      ctx.beginPath();
+      ctx.moveTo(-32, torsoTopY - 6);
+      ctx.lineTo(32, torsoTopY - 6);
+      ctx.lineTo(44, torsoBottomY + 32);
+      ctx.lineTo(-44, torsoBottomY + 32);
+      ctx.closePath();
+      ctx.fill();
+    } else {
+      sLine(0, torsoTopY, 0, torsoBottomY, seed + 7, '#fcd34d', 4);
+      sLine(-15, torsoTopY + 30, -2, torsoTopY + 40, seed + 8, 'rgba(255,255,255,0.3)', 2);
+      sLine(15, torsoTopY + 30, 2, torsoTopY + 40, seed + 9, 'rgba(255,255,255,0.3)', 2);
+    }
+    sLine(0, torsoTopY, 0, torsoBottomY, seed + 10, '#f8fafc', 4);
+
+    // Head
+    const headCenterY = torsoTopY - headRadius - 6 + wb(seed + 11, 1.5);
+    sCircle(0, headCenterY, headRadius, seed + 12, '#f8fafc', 3.5, '#fef3c7');
+
+    // Hair
+    if (hairStyle === 'wild') {
+      for (let h = 0; h < 6; h++) {
+        const hairAng = -Math.PI * 0.85 + (h / 5) * Math.PI * 0.7;
+        const hx1 = Math.cos(hairAng) * headRadius;
+        const hy1 = headCenterY + Math.sin(hairAng) * headRadius;
+        const hx2 = Math.cos(hairAng) * (headRadius + 22 + wb(seed + 13 + h, 4));
+        const hy2 = headCenterY + Math.sin(hairAng) * (headRadius + 22 + wb(seed + 14 + h, 4));
+        sLine(hx1, hy1, hx2, hy2, seed + 15 + h, '#78350f', 3.5);
+      }
+    } else if (hairStyle === 'modern') {
+      ctx.fillStyle = '#1e293b';
+      ctx.beginPath();
+      ctx.arc(0, headCenterY - 12, headRadius * 0.96, Math.PI, Math.PI * 2);
+      ctx.closePath();
+      ctx.fill();
+      sLine(-headRadius * 0.9, headCenterY - 12, headRadius * 0.9, headCenterY - 12, seed + 20, '#1e293b', 4);
+    } else if (hairStyle === 'feather') {
+      sLine(8, headCenterY - headRadius, 28, headCenterY - headRadius - 35, seed + 21, '#38bdf8', 4);
+      sLine(28, headCenterY - headRadius - 35, 18, headCenterY - headRadius - 20, seed + 22, '#f43f5e', 3);
+    }
+
+    // Eyes
+    const eyeY = headCenterY + 4;
+    const eyeR = 4 * blink;
+    sCircle(-12, eyeY, Math.max(1, eyeR), seed + 23, '#0f172a', 2, '#0f172a');
+    sCircle(12, eyeY, Math.max(1, eyeR), seed + 24, '#0f172a', 2, '#0f172a');
+
+    // Eyebrows
+    if (expression === 'shivering') {
+      sLine(-18, eyeY - 12 + wb(seed, 2), -6, eyeY - 7 + wb(seed, 2), seed + 25, '#0f172a', 2.5);
+      sLine(6, eyeY - 7 + wb(seed, 2), 18, eyeY - 12 + wb(seed, 2), seed + 26, '#0f172a', 2.5);
+    } else if (expression === 'surprised' || expression === 'curious') {
+      sLine(-18, eyeY - 15, -6, eyeY - 13, seed + 27, '#0f172a', 2.5);
+      sLine(6, eyeY - 13, 18, eyeY - 15, seed + 28, '#0f172a', 2.5);
+    } else {
+      sLine(-17, eyeY - 9, -7, eyeY - 10, seed + 29, '#0f172a', 2.5);
+      sLine(7, eyeY - 10, 17, eyeY - 9, seed + 30, '#0f172a', 2.5);
+    }
+
+    // Mouth
+    const mouthY = headCenterY + 22;
+    if (expression === 'shivering') {
+      const mChatter = Math.sin(t * 32) * 2.5;
+      sLine(-10, mouthY + mChatter, -4, mouthY - 3 + mChatter, seed + 31, '#0f172a', 2.5);
+      sLine(-4, mouthY - 3 + mChatter, 3, mouthY + 3 + mChatter, seed + 32, '#0f172a', 2.5);
+      sLine(3, mouthY + 3 + mChatter, 10, mouthY + mChatter, seed + 33, '#0f172a', 2.5);
+    } else if (expression === 'talking') {
+      ctx.fillStyle = '#0f172a';
+      ctx.beginPath();
+      ctx.ellipse(0, mouthY, 7, Math.max(2, mouthTalk), 0, 0, Math.PI * 2);
+      ctx.fill();
+    } else if (expression === 'smiling') {
+      ctx.beginPath();
+      ctx.arc(0, mouthY - 4, 10, 0.2 * Math.PI, 0.8 * Math.PI);
+      ctx.strokeStyle = '#0f172a';
+      ctx.lineWidth = 2.5;
+      ctx.stroke();
+    } else {
+      sLine(-8, mouthY, 8, mouthY, seed + 34, '#0f172a', 2.5);
+    }
+
+    // Legs
+    const hipY = torsoBottomY;
+    if (armPose === 'sewing' || armPose === 'thinker') {
+      sLine(-10, hipY, -45, hipY + 45, seed + 35, '#f8fafc', 4);
+      sLine(-45, hipY + 45, 10, hipY + 50, seed + 36, '#f8fafc', 4);
+      sLine(10, hipY, 45, hipY + 45, seed + 37, '#f8fafc', 4);
+      sLine(45, hipY + 45, -10, hipY + 50, seed + 38, '#f8fafc', 4);
+    } else if (armPose === 'hold_spear') {
+      const legSwing = Math.sin(t * 5.5);
+      const l1KneeX = -15 + legSwing * 22;
+      const l1KneeY = hipY + legLength * 0.55;
+      const l1FootX = -15 + legSwing * 38;
+      const l1FootY = hipY + legLength;
+      sLine(-10, hipY, l1KneeX, l1KneeY, seed + 39, '#f8fafc', 4);
+      sLine(l1KneeX, l1KneeY, l1FootX, l1FootY, seed + 40, '#f8fafc', 4);
+
+      const l2KneeX = 15 - legSwing * 22;
+      const l2KneeY = hipY + legLength * 0.55;
+      const l2FootX = 15 - legSwing * 38;
+      const l2FootY = hipY + legLength;
+      sLine(10, hipY, l2KneeX, l2KneeY, seed + 41, '#f8fafc', 4);
+      sLine(l2KneeX, l2KneeY, l2FootX, l2FootY, seed + 42, '#f8fafc', 4);
+    } else {
+      sLine(-12, hipY, -14, hipY + legLength, seed + 43, '#f8fafc', 4);
+      sLine(12, hipY, 14, hipY + legLength, seed + 44, '#f8fafc', 4);
+      sLine(-14, hipY + legLength, -24, hipY + legLength, seed + 45, '#f8fafc', 3.5);
+      sLine(14, hipY + legLength, 24, hipY + legLength, seed + 46, '#f8fafc', 3.5);
+    }
+
+    // Arms & Hands
+    const shoulderY = torsoTopY + 12;
+    if (armPose === 'shiver') {
+      const shivA = Math.sin(t * 34) * 3;
+      sLine(-20, shoulderY, 16 + shivA, shoulderY + 35, seed + 47, '#f8fafc', 4);
+      sLine(20, shoulderY, -16 + shivA, shoulderY + 35, seed + 48, '#f8fafc', 4);
+    } else if (armPose === 'hold_spear') {
+      const spearX = -45;
+      sLine(-18, shoulderY, -35, shoulderY + 30, seed + 49, '#f8fafc', 4);
+      sLine(-35, shoulderY + 30, spearX, shoulderY + 5, seed + 50, '#f8fafc', 4);
+      sLine(spearX, -torsoHeight - 130, spearX, hipY + legLength + 10, seed + 51, '#92400e', 5);
+      ctx.fillStyle = '#64748b';
+      ctx.beginPath();
+      ctx.moveTo(spearX, -torsoHeight - 165);
+      ctx.lineTo(spearX - 10, -torsoHeight - 128);
+      ctx.lineTo(spearX + 10, -torsoHeight - 128);
+      ctx.closePath();
+      ctx.fill();
+      sLine(18, shoulderY, 35, shoulderY + 25 + Math.sin(t * 5.5) * 20, seed + 52, '#f8fafc', 4);
+      sLine(35, shoulderY + 25 + Math.sin(t * 5.5) * 20, 48, shoulderY + 45, seed + 53, '#f8fafc', 4);
+    } else if (armPose === 'sewing') {
+      sLine(-18, shoulderY, -35, shoulderY + 40, seed + 54, '#f8fafc', 4);
+      sLine(-35, shoulderY + 40, -18, shoulderY + 55, seed + 55, '#f8fafc', 4);
+      const sewCycle = Math.sin(t * 4);
+      const handX = 20 + sewCycle * 25;
+      const handY = shoulderY + 45 - Math.cos(t * 4) * 15;
+      sLine(18, shoulderY, 38, shoulderY + 25, seed + 56, '#f8fafc', 4);
+      sLine(38, shoulderY + 25, handX, handY, seed + 57, '#f8fafc', 4);
+      sLine(handX - 5, handY - 10, handX + 18, handY + 12, seed + 58, '#fef08a', 3.5);
+      ctx.strokeStyle = '#ffffff';
+      ctx.lineWidth = 1.5;
+      ctx.beginPath();
+      ctx.moveTo(handX - 5, handY - 10);
+      ctx.quadraticCurveTo(handX - 25, handY - 25, 0, hipY + 10);
+      ctx.stroke();
+    } else if (armPose === 'cover_body') {
+      sLine(-18, shoulderY, -12, hipY - 10, seed + 59, '#f8fafc', 4);
+      sLine(18, shoulderY, 12, hipY - 10, seed + 60, '#f8fafc', 4);
+    } else if (armPose === 'dress_shirt') {
+      sLine(-18, shoulderY, -38, shoulderY + 30, seed + 61, '#f8fafc', 4);
+      sLine(-38, shoulderY + 30, -22, hipY - 5, seed + 62, '#f8fafc', 4);
+      const adjustY = shoulderY + 8 + Math.sin(t * 3) * 6;
+      sLine(18, shoulderY, 35, shoulderY + 15, seed + 63, '#f8fafc', 4);
+      sLine(35, shoulderY + 15, 10, adjustY, seed + 64, '#f8fafc', 4);
+    } else if (armPose === 'peace_gesture') {
+      sLine(-18, shoulderY, -26, shoulderY + 40, seed + 65, '#f8fafc', 4);
+      sLine(18, shoulderY, 40, shoulderY - 10 + Math.sin(t * 2) * 5, seed + 66, '#f8fafc', 4);
+      sLine(40, shoulderY - 10 + Math.sin(t * 2) * 5, 45, shoulderY - 35, seed + 67, '#f8fafc', 4);
+    } else if (armPose === 'thinker') {
+      sLine(18, shoulderY, 36, hipY + 15, seed + 68, '#f8fafc', 4);
+      sLine(36, hipY + 15, 8, headCenterY + 18, seed + 69, '#f8fafc', 4);
+      sLine(-18, shoulderY, -30, hipY + 25, seed + 70, '#f8fafc', 4);
+    } else {
+      const gArm = Math.sin(t * 2.5) * 12;
+      sLine(-18, shoulderY, -35, shoulderY + 35, seed + 71, '#f8fafc', 4);
+      sLine(-35, shoulderY + 35, -42, shoulderY + 60, seed + 72, '#f8fafc', 4);
+      sLine(18, shoulderY, 35, shoulderY + 20 - gArm, seed + 73, '#f8fafc', 4);
+      sLine(35, shoulderY + 20 - gArm, 45, shoulderY + 5 - gArm, seed + 74, '#f8fafc', 4);
+    }
+
+    ctx.restore();
+  }
+
+  // ── Doodled Character Narrative Themes (3-Beat Progressive Choreography) ─
+  if (COMP_THEME === 'doodle_dressing') {
+    // Beat 1: Browsing wardrobe -> Beat 2: Trying shirt -> Beat 3: Looking in mirror reflection
+    const beat2 = spring(t, window.DURATION * 0.35, 180, 16);
+    const beat3 = spring(t, window.DURATION * 0.70, 190, 16);
+
+    sLine(cx - W * 0.45, cy + 220, cx + W * 0.45, cy + 220, 10, 'rgba(255,255,255,0.25)', 2.5);
+
+    // Clothes rack on left (sways in beat 1)
+    sLine(cx - 360, cy + 220, cx - 360, cy - 140, 11, '#94a3b8', 5);
+    sLine(cx - 410, cy + 220, cx - 310, cy + 220, 12, '#94a3b8', 5);
+    sLine(cx - 420, cy - 140, cx - 180, cy - 140, 13, '#cbd5e1', 5);
+
+    // 3 shirts on hangers
+    const shirtColors = ['#38bdf8', '#f43f5e', '#fbbf24'];
+    for (let c = 0; c < 3; c++) {
+      const hx = cx - 380 + c * 80;
+      const sway = Math.sin(t * 2.5 + c * 1.5) * 5;
+      sLine(hx, cy - 140, hx + sway, cy - 110, 20 + c, '#e2e8f0', 2.5);
+      ctx.fillStyle = shirtColors[c];
+      ctx.beginPath();
+      ctx.moveTo(hx + sway - 22, cy - 110);
+      ctx.lineTo(hx + sway + 22, cy - 110);
+      ctx.lineTo(hx + sway + 28, cy - 10);
+      ctx.lineTo(hx + sway - 28, cy - 10);
+      ctx.closePath();
+      ctx.fill();
+    }
+
+    // Mirror on right - emerges and glows in Beat 2 & 3
+    const mirrorX = cx + 320;
+    const mirrorY = cy + 20;
+    ctx.fillStyle = 'rgba(56, 189, 248, ' + (0.05 + beat2 * 0.08) + ')';
+    ctx.beginPath();
+    ctx.roundRect(mirrorX - 85, mirrorY - 210, 170, 390, 24);
+    ctx.fill();
+    ctx.strokeStyle = beat3 > 0.5 ? '#f59e0b' : '#94a3b8';
+    ctx.lineWidth = 4;
+    ctx.stroke();
+
+    // Reflected character in mirror (smiling and thumbs up in beat 3)
+    if (beat2 > 0.1) {
+      ctx.save();
+      ctx.globalAlpha = Math.min(0.65, beat2 * 0.65);
+      drawDoodleCharacter({
+        x: mirrorX,
+        y: cy + 120,
+        scale: 1.05,
+        hairStyle: 'modern',
+        expression: beat3 > 0.5 ? 'smiling' : 'curious',
+        clothing: 'shirt',
+        armPose: beat3 > 0.5 ? 'peace_gesture' : 'dress_shirt',
+        seed: 88,
+      });
+      ctx.restore();
+    }
+
+    // Main character moves progressively from rack -> center -> mirror
+    const charX = cx - 220 + beat2 * 170 + beat3 * 60;
+    drawDoodleCharacter({
+      x: charX,
+      y: cy + 140,
+      scale: 1.35,
+      hairStyle: 'modern',
+      expression: beat3 > 0.5 ? 'smiling' : 'talking',
+      clothing: 'shirt',
+      armPose: beat2 > 0.5 ? 'dress_shirt' : 'natural',
+      seed: 101,
+    });
+
+  } else if (COMP_THEME === 'doodle_shiver_cold') {
+    // Beat 1: Shivering in cold -> Beat 2: NOT FOR COLD stamp -> Beat 3: NOT FOR PROTECTION stamp
+    const stamp1 = spring(t, window.DURATION * 0.38, 220, 15);
+    const stamp2 = spring(t, window.DURATION * 0.72, 220, 15);
+
+    sLine(cx - W * 0.45, cy + 220, cx + W * 0.45, cy + 220, 10, 'rgba(255,255,255,0.2)', 2);
+
+    // Freezing wind streaks rushing across
+    for (let w = 0; w < 14; w++) {
+      const windX = ((t * 750 + w * 210) % (W + 600)) - 300;
+      const windY = cy - 250 + (w * 42) + Math.sin(t * 3.5 + w) * 15;
+      sLine(windX, windY, windX + 170, windY + 5, 200 + w, 'rgba(255,255,255,0.3)', 2);
+    }
+
+    // Drifting snow particles
+    for (let sp = 0; sp < 25; sp++) {
+      const px = ((sp * 85 + t * 450) % W);
+      const py = (sp * 45 + t * 90) % H;
+      sCircle(px, py, 2.5, 300 + sp, '#e0f2fe', 1, '#ffffff');
+    }
+
+    // Shivering breath vapor cloud (calms in Beat 3)
+    if (stamp2 < 0.8) {
+      const breathPhase = (t * 2.2) % 1;
+      const bCloudX = cx - 50 + breathPhase * 60;
+      const bCloudY = cy - 90 - breathPhase * 25;
+      ctx.fillStyle = 'rgba(224, 242, 254, ' + ((1 - breathPhase) * 0.5) + ')';
+      ctx.beginPath();
+      ctx.arc(bCloudX, bCloudY, 15 + breathPhase * 25, 0, Math.PI * 2);
+      ctx.fill();
+    }
+
+    // Main character: shivers in Beat 1 & 2, then realizes / curious in Beat 3
+    const isShivering = stamp2 < 0.7;
+    const vibX = isShivering ? Math.sin(t * 38) * 4.5 : 0;
+    const vibY = isShivering ? Math.cos(t * 32) * 2 : 0;
+    drawDoodleCharacter({
+      x: cx - 120 + vibX,
+      y: cy + 140 + vibY,
+      scale: 1.35,
+      hairStyle: 'wild',
+      expression: isShivering ? 'shivering' : 'curious',
+      clothing: 'none',
+      armPose: isShivering ? 'shiver' : 'thinker',
+      seed: 102,
+    });
+
+    // Stamp 1: NOT FOR COLD (slams down in Beat 2)
+    if (stamp1 > 0.05) {
+      ctx.save();
+      const s1X = cx + 240;
+      const s1Y = cy - 100;
+      ctx.translate(s1X, s1Y);
+      ctx.scale(stamp1, stamp1);
+      sCircle(0, 0, 50, 400, 'rgba(239,68,68,0.9)', 4);
+      sLine(-36, -36, 36, 36, 401, 'rgba(239,68,68,0.95)', 4.5);
+      ctx.font = 'bold 20px monospace';
+      ctx.fillStyle = '#ef4444';
+      ctx.textAlign = 'center';
+      ctx.fillText('NOT FOR COLD', 0, 75);
+      ctx.restore();
+    }
+
+    // Stamp 2: NOT FOR PROTECTION (slams down in Beat 3)
+    if (stamp2 > 0.05) {
+      ctx.save();
+      const s2X = cx + 240;
+      const s2Y = cy + 90;
+      ctx.translate(s2X, s2Y);
+      ctx.scale(stamp2, stamp2);
+      sCircle(0, 0, 50, 410, 'rgba(239,68,68,0.9)', 4);
+      sLine(-36, -36, 36, 36, 411, 'rgba(239,68,68,0.95)', 4.5);
+      ctx.font = 'bold 20px monospace';
+      ctx.fillStyle = '#ef4444';
+      ctx.textAlign = 'center';
+      ctx.fillText('NOT FOR PROTECTION', 0, 75);
+      ctx.restore();
+    }
+
+  } else if (COMP_THEME === 'doodle_hunter_savannah') {
+    // Beat 1: Walking with spear -> Beat 2: Swatting mosquitoes -> Beat 3: Pausing alert
+    const walkProg = Math.min(1, Math.max(0, t / window.DURATION));
+    const swatting = (t % 2.4 > 1.2);
+
+    // Blazing midday sun with undulating rays
+    const sunR = 75 + Math.sin(t * 2) * 6;
+    ctx.fillStyle = '#f59e0b';
+    ctx.beginPath();
+    ctx.arc(cx - 380, cy - 180, sunR, 0, Math.PI * 2);
+    ctx.fill();
+    for (let r = 0; r < 8; r++) {
+      const rayA = (r / 8) * Math.PI * 2 + t * 0.4;
+      const rx1 = cx - 380 + Math.cos(rayA) * (sunR + 10);
+      const ry1 = cy - 180 + Math.sin(rayA) * (sunR + 10);
+      const rx2 = cx - 380 + Math.cos(rayA) * (sunR + 32);
+      const ry2 = cy - 180 + Math.sin(rayA) * (sunR + 32);
+      sLine(rx1, ry1, rx2, ry2, 450 + r, '#fbbf24', 3);
+    }
+
+    // Ground and tall swaying savannah grass
+    sLine(cx - W * 0.45, cy + 220, cx + W * 0.45, cy + 220, 10, '#78350f', 3);
+    for (let g = 0; g < 32; g++) {
+      const gx = cx - 550 + g * 36;
+      const sway = Math.sin(t * 3.2 + g * 0.4) * 16;
+      sLine(gx, cy + 220, gx + sway, cy + 140, 500 + g, '#d97706', 2.5);
+    }
+
+    // Buzzing mosquitoes orbiting hunter
+    const charX = cx - 180 + walkProg * 240;
+    for (let m = 0; m < 4; m++) {
+      const mx = charX + 50 + Math.sin(t * 8 + m * 2) * 65;
+      const my = cy - 60 + Math.cos(t * 7 + m * 2) * 45;
+      sCircle(mx, my, 2.5, 550 + m, '#0f172a', 1.5, '#ef4444');
+    }
+
+    // Walking early hunter with spear
+    drawDoodleCharacter({
+      x: charX,
+      y: cy + 140,
+      scale: 1.35,
+      hairStyle: 'wild',
+      expression: swatting ? 'shivering' : 'talking',
+      clothing: 'none',
+      armPose: 'hold_spear',
+      seed: 103,
+    });
+
+  } else if (COMP_THEME === 'doodle_sewing_needle') {
+    // Beat 1: Seated by campfire -> Beat 2: Zoom loupe with bone needle -> Beat 3: Timeline badges
+    const loupeSpring = spring(t, window.DURATION * 0.32, 180, 15);
+    const badgeSpring = spring(t, window.DURATION * 0.68, 200, 15);
+
+    // Campfire with animated flames and sparks
+    const fireX = cx - 380;
+    const fireY = cy + 180;
+    for (let f = 0; f < 5; f++) {
+      const flH = 50 + Math.sin(t * 12 + f) * 22;
+      ctx.fillStyle = f % 2 === 0 ? '#ef4444' : '#f59e0b';
+      ctx.beginPath();
+      ctx.moveTo(fireX - 30 + f * 12, fireY);
+      ctx.quadraticCurveTo(fireX + (f - 2) * 8, fireY - flH, fireX - 10 + f * 12, fireY);
+      ctx.fill();
+    }
+    for (let sp = 0; sp < 8; sp++) {
+      const sx = fireX + Math.sin(t * 4 + sp) * 35;
+      const sy = fireY - 30 - ((t * 80 + sp * 35) % 140);
+      sCircle(sx, sy, 2, 600 + sp, '#fbbf24', 1, '#fbbf24');
+    }
+
+    // Seated human stitching hide with bone needle
+    drawDoodleCharacter({
+      x: cx - 120,
+      y: cy + 140,
+      scale: 1.35,
+      hairStyle: 'wild',
+      expression: 'talking',
+      clothing: 'pelt',
+      armPose: 'sewing',
+      seed: 104,
+    });
+
+    // Zoomed loupe expands open in Beat 2
+    if (loupeSpring > 0.05) {
+      ctx.save();
+      const lensX = cx + 270;
+      const lensY = cy - 20;
+      ctx.translate(lensX, lensY);
+      ctx.scale(loupeSpring, loupeSpring);
+
+      const lensR = 140;
+      ctx.fillStyle = 'rgba(15, 23, 42, 0.92)';
+      ctx.beginPath();
+      ctx.arc(0, 0, lensR, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.strokeStyle = '#d4af37';
+      ctx.lineWidth = 5;
+      ctx.stroke();
+
+      // Two thick leather pelt pieces being stitched
+      sLine(-85, -20, 85, -20, 650, '#92400e', 8);
+      sLine(-85, 20, 85, 20, 651, '#78350f', 8);
+
+      // Drilled bone needle piercing through with animated wiggle
+      const nWiggle = Math.sin(t * 4.5) * 18;
+      sLine(-45 + nWiggle, -65, 25 + nWiggle, 55, 652, '#fef08a', 6);
+      sCircle(-40 + nWiggle, -58, 4, 653, '#0f172a', 1.5, '#0f172a');
+
+      // Stitches across pelts
+      for (let st = 0; st < 6; st++) {
+        const stX = -70 + st * 28;
+        sLine(stX, -22, stX + 8, 22, 660 + st, '#ffffff', 3.5);
+      }
+      ctx.restore();
+    }
+
+    // Timeline badge in Beat 3
+    if (badgeSpring > 0.05) {
+      ctx.save();
+      ctx.globalAlpha = Math.min(1, badgeSpring);
+      sRect(cx + 120, cy + 140, 300, 42, 670, '#d4af37', 2.5, 'rgba(15, 23, 42, 0.85)');
+      ctx.font = 'bold 16px monospace';
+      ctx.fillStyle = '#fef08a';
+      ctx.textAlign = 'center';
+      ctx.fillText('BONE NEEDLE • 120,000 YEARS', cx + 270, cy + 167);
+      ctx.restore();
+    }
+
+  } else if (COMP_THEME === 'doodle_shame_reflection') {
+    // Beat 1: Looking down -> Beat 2: Water reflection & blushing -> Beat 3: Theory of Mind halo
+    const refSpring = spring(t, window.DURATION * 0.30, 180, 15);
+    const haloSpring = spring(t, window.DURATION * 0.65, 190, 15);
+
+    const poolX = cx;
+    const poolY = cy + 180;
+    ctx.fillStyle = 'rgba(14, 165, 233, 0.15)';
+    ctx.beginPath();
+    ctx.ellipse(poolX, poolY, 260, 60, 0, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.strokeStyle = 'rgba(56, 189, 248, 0.4)';
+    ctx.lineWidth = 2.5;
+    ctx.stroke();
+
+    // Ripples in pool
+    for (let rip = 1; rip <= 3; rip++) {
+      const ripR = (rip * 65 + t * 45) % 250;
+      const ripAlpha = (1 - ripR / 250) * 0.4;
+      ctx.strokeStyle = 'rgba(56, 189, 248, ' + ripAlpha + ')';
+      ctx.beginPath();
+      ctx.ellipse(poolX, poolY, ripR, ripR * 0.23, 0, 0, Math.PI * 2);
+      ctx.stroke();
+    }
+
+    // Inverted rippling reflection of character in water (clarifies in Beat 2)
+    if (refSpring > 0.1) {
+      ctx.save();
+      ctx.globalAlpha = Math.min(0.45, refSpring * 0.45);
+      ctx.translate(cx, poolY + 20);
+      ctx.scale(1.2, -0.75);
+      drawDoodleCharacter({
+        x: 0,
+        y: 0,
+        scale: 1.0,
+        hairStyle: 'wild',
+        expression: 'surprised',
+        clothing: 'none',
+        armPose: 'cover_body',
+        seed: 700,
+      });
+      ctx.restore();
+    }
+
+    // Standing character looking down and covering body
+    drawDoodleCharacter({
+      x: cx,
+      y: cy + 120,
+      scale: 1.35,
+      hairStyle: 'wild',
+      expression: refSpring > 0.4 ? 'surprised' : 'talking',
+      clothing: 'none',
+      armPose: refSpring > 0.4 ? 'cover_body' : 'natural',
+      seed: 105,
+    });
+
+    // Blushing cheeks appear in Beat 2
+    if (refSpring > 0.3) {
+      const blushA = Math.min(0.7, refSpring * 0.7);
+      sCircle(cx - 18, cy - 8, 7, 750, 'rgba(244,63,94,' + blushA + ')', 1, 'rgba(244,63,94,' + blushA + ')');
+      sCircle(cx + 18, cy - 8, 7, 751, 'rgba(244,63,94,' + blushA + ')', 1, 'rgba(244,63,94,' + blushA + ')');
+    }
+
+    // Theory of Mind Thought Halo in Beat 3
+    if (haloSpring > 0.05) {
+      ctx.save();
+      const haloX = cx + 180;
+      const haloY = cy - 120;
+      ctx.translate(haloX, haloY);
+      ctx.scale(haloSpring, haloSpring);
+      sCircle(0, 0, 48, 760, '#38bdf8', 3);
+      sCircle(0, 0, 18, 761, '#ffffff', 2.5);
+      sCircle(0, 0, 8, 762, '#38bdf8', 1, '#38bdf8');
+      ctx.font = 'bold 16px monospace';
+      ctx.fillStyle = '#38bdf8';
+      ctx.textAlign = 'center';
+      ctx.fillText('THEORY OF MIND', 0, 72);
+      ctx.restore();
+    }
+
+  } else if (COMP_THEME === 'doodle_tribe_meeting') {
+    // Beat 1: Walking toward center -> Beat 2: Greet & check patterns -> Beat 3: Social language arc
+    const approach = spring(t, 0.05, 140, 16);
+    const greet = spring(t, window.DURATION * 0.38, 190, 15);
+    const arcSpring = spring(t, window.DURATION * 0.68, 200, 15);
+
+    sLine(cx - W * 0.45, cy + 220, cx + W * 0.45, cy + 220, 10, 'rgba(255,255,255,0.2)', 2);
+
+    // Left Clan Member walks toward center
+    const leftX = cx - 380 + Math.min(1, approach) * 160;
+    drawDoodleCharacter({
+      x: leftX,
+      y: cy + 140,
+      scale: 1.3,
+      hairStyle: 'wild',
+      expression: 'talking',
+      clothing: 'pelt',
+      armPose: greet > 0.5 ? 'peace_gesture' : 'natural',
+      seed: 106,
+    });
+
+    // Right Clan Member walks toward center
+    const rightX = cx + 380 - Math.min(1, approach) * 160;
+    drawDoodleCharacter({
+      x: rightX,
+      y: cy + 140,
+      scale: 1.3,
+      hairStyle: 'feather',
+      expression: 'curious',
+      clothing: 'cloak',
+      armPose: greet > 0.5 ? 'peace_gesture' : 'natural',
+      seed: 107,
+    });
+
+    // Glowing connection arc and symbols in Beat 3
+    if (arcSpring > 0.05) {
+      ctx.save();
+      ctx.globalAlpha = Math.min(1, arcSpring);
+      ctx.strokeStyle = ACCENT;
+      ctx.lineWidth = 3;
+      ctx.setLineDash([8, 8]);
+      ctx.beginPath();
+      ctx.moveTo(leftX + 40, cy);
+      ctx.quadraticCurveTo(cx, cy - 100, rightX - 40, cy);
+      ctx.stroke();
+      ctx.setLineDash([]);
+
+      sCircle(cx, cy - 65, 34, 800, ACCENT, 3, 'rgba(15, 23, 42, 0.85)');
+      ctx.font = 'bold 22px monospace';
+      ctx.fillStyle = ACCENT;
+      ctx.textAlign = 'center';
+      ctx.fillText('🤝', cx, cy - 56);
+      ctx.font = 'bold 16px monospace';
+      ctx.fillText('CLOTHING AS SOCIAL LANGUAGE', cx, cy + 15);
+      ctx.restore();
+    }
+
+  } else if (COMP_THEME === 'doodle_thinking_future') {
+    // Beat 1: Seated thinker by fire -> Beat 2: Thought cloud floats up -> Beat 3: Tomorrow's rack & tools
+    const cloudSpring = spring(t, window.DURATION * 0.32, 170, 14);
+    const ideaSpring = spring(t, window.DURATION * 0.65, 190, 15);
+
+    // Starlit night and crescent moon
+    ctx.fillStyle = '#fef08a';
+    ctx.beginPath();
+    ctx.arc(cx - 360, cy - 190, 50, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.fillStyle = BG2;
+    ctx.beginPath();
+    ctx.arc(cx - 345, cy - 200, 48, 0, Math.PI * 2);
+    ctx.fill();
+
+    // Large rock boulder for thinker
+    ctx.fillStyle = '#334155';
+    ctx.beginPath();
+    ctx.ellipse(cx - 140, cy + 175, 85, 55, 0, 0, Math.PI * 2);
+    ctx.fill();
+
+    // Thinker seated on rock
+    drawDoodleCharacter({
+      x: cx - 140,
+      y: cy + 130,
+      scale: 1.35,
+      hairStyle: 'wild',
+      expression: 'talking',
+      clothing: 'pelt',
+      armPose: 'thinker',
+      seed: 108,
+    });
+
+    // Expanding thought cloud overhead in Beat 2
+    if (cloudSpring > 0.05) {
+      const cloudX = cx + 180;
+      const cloudY = cy - 80;
+      ctx.save();
+      ctx.translate(cloudX, cloudY);
+      ctx.scale(cloudSpring, cloudSpring);
+
+      sCircle(-180, 160, 12, 850, '#ffffff', 2, '#ffffff');
+      sCircle(-140, 120, 18, 851, '#ffffff', 2, '#ffffff');
+      sCircle(-90, 70, 24, 852, '#ffffff', 2, '#ffffff');
+
+      ctx.fillStyle = 'rgba(255, 255, 255, 0.95)';
+      ctx.beginPath();
+      ctx.arc(-70, 0, 55, 0, Math.PI * 2);
+      ctx.arc(0, -25, 65, 0, Math.PI * 2);
+      ctx.arc(70, 0, 55, 0, Math.PI * 2);
+      ctx.arc(0, 30, 60, 0, Math.PI * 2);
+      ctx.fill();
+
+      // Inside thought cloud: Tomorrow's sunrise & stretched hide on rack in Beat 3
+      if (ideaSpring > 0.1) {
+        ctx.fillStyle = '#f59e0b';
+        ctx.beginPath();
+        ctx.arc(0, 15, 30, Math.PI, Math.PI * 2);
+        ctx.fill();
+
+        sLine(-35, 15, -35, -25, 860, '#78350f', 3);
+        sLine(35, 15, 35, -25, 861, '#78350f', 3);
+        sLine(-40, -25, 40, -25, 862, '#78350f', 3);
+
+        ctx.fillStyle = '#b45309';
+        ctx.fillRect(-28, -20, 56, 32);
+
+        ctx.font = 'bold 15px monospace';
+        ctx.fillStyle = '#d97706';
+        ctx.textAlign = 'center';
+        ctx.fillText('💡 PLANNING FOR TOMORROW', 0, 52);
+      }
+      ctx.restore();
+    }
+
+  } else if (COMP_THEME === 'doodle_microscope_lice') {
+    // Beat 1: Scratching pelt -> Beat 2: Giant microscope slides in -> Beat 3: Divergence tree
+    const scopeSpring = spring(t, window.DURATION * 0.30, 180, 15);
+    const treeSpring = spring(t, window.DURATION * 0.65, 200, 15);
+
+    sLine(cx - W * 0.45, cy + 220, cx + W * 0.45, cy + 220, 10, 'rgba(255,255,255,0.2)', 2);
+
+    // Early human scratching pelt with itch lines
+    drawDoodleCharacter({
+      x: cx - 240,
+      y: cy + 140,
+      scale: 1.35,
+      hairStyle: 'wild',
+      expression: 'shivering',
+      clothing: 'pelt',
+      armPose: 'shiver',
+      seed: 109,
+    });
+
+    for (let it = 0; it < 3; it++) {
+      const itX = cx - 290 - it * 12;
+      const itY = cy + 50 + it * 20;
+      sLine(itX, itY, itX + 18, itY - 14, 900 + it, '#f59e0b', 2.5);
+    }
+
+    // Microscope slides in in Beat 2
+    if (scopeSpring > 0.05) {
+      const lensX = cx + 180;
+      const lensY = cy;
+      const lensR = 150;
+
+      ctx.save();
+      ctx.translate(lensX, lensY);
+      ctx.scale(scopeSpring, scopeSpring);
+
+      ctx.fillStyle = 'rgba(15, 23, 42, 0.95)';
+      ctx.beginPath();
+      ctx.arc(0, 0, lensR, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.strokeStyle = '#d4af37';
+      ctx.lineWidth = 6;
+      ctx.stroke();
+
+      // Fabric weave grid lines inside lens
+      for (let g = -4; g <= 4; g++) {
+        sLine(g * 24, -lensR * 0.8, g * 24, lensR * 0.8, 920 + g, 'rgba(56, 189, 248, 0.15)', 2);
+        sLine(-lensR * 0.8, g * 24, lensR * 0.8, g * 24, 930 + g, 'rgba(56, 189, 248, 0.15)', 2);
+      }
+
+      // Divergence tree in Beat 3
+      if (treeSpring > 0.1) {
+        sLine(-100, 0, -20, 0, 940, '#f8fafc', 4);
+        sCircle(-20, 0, 7, 941, '#d4af37', 2, '#d4af37');
+
+        sLine(-20, 0, 60, -45, 942, '#38bdf8', 4);
+        ctx.font = 'bold 14px monospace';
+        ctx.fillStyle = '#38bdf8';
+        ctx.textAlign = 'left';
+        ctx.fillText('HEAD LICE (HAIR)', 70, -42);
+
+        sLine(-20, 0, 60, 45, 943, '#f43f5e', 4);
+        ctx.fillStyle = '#f43f5e';
+        ctx.fillText('BODY LICE (CLOTHES)', 70, 48);
+
+        sRect(-90, 80, 180, 32, 950, '#d4af37', 2, 'rgba(212, 175, 55, 0.25)');
+        ctx.font = 'bold 14px monospace';
+        ctx.fillStyle = '#fef08a';
+        ctx.textAlign = 'center';
+        ctx.fillText('170,000 YEARS AGO', 0, 101);
+      }
+      ctx.restore();
+    }
+
+  } else if (COMP_THEME === 'doodle_general_human') {
+    // General Expressive Doodled Human Narrator
+    sLine(cx - W * 0.4, cy + 220, cx + W * 0.4, cy + 220, 10, 'rgba(255,255,255,0.2)', 2);
+    drawDoodleCharacter({
+      x: cx,
+      y: cy + 140,
+      scale: 1.4,
+      hairStyle: 'wild',
+      expression: 'talking',
+      clothing: 'pelt',
+      armPose: 'natural',
+      seed: 110,
+    });
+
+  } else if (COMP_THEME === 'celestial_orbit') {
     // 3D Celestial Body (Earth) with orbiting satellites & signal pulses
     const earthR = Math.min(W, H) * 0.22;
 
@@ -1168,49 +2080,70 @@ function drawMainScene(t) {
   ctx.restore();
 }
 
-// ── Kinetic Typography & Broadcast Subtitle Overlay ─────────────────────────
+// ── Sentence-Synchronized Broadcast Subtitles Overlay ───────────────────────
 function drawCinematicOverlay(t) {
   ctx.save();
-  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;
+  // Subtitles / Spoken Narration - dynamic sentence progression across time
+  if (NARRATION && NARRATION.trim().length > 0) {
+    // Split narration into natural spoken sentence chunks
+    const sentences = NARRATION.split(/[.!?;|]+/).map(s => s.trim()).filter(Boolean);
 
-  // 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);
-  }
+    const count = Math.max(1, sentences.length);
+    const sentDur = window.DURATION / count;
+    const currIdx = Math.min(count - 1, Math.floor(t / sentDur));
+    const activeText = sentences[currIdx] || NARRATION;
+
+    // Sentence local spring transition (smooth entrance per sentence)
+    const localT = t - currIdx * sentDur;
+    const sentSpring = spring(localT, 0.04, 210, 16);
+    const sentAlpha = Math.min(1, Math.max(0, sentSpring));
+    const sentSlideY = (1 - sentSpring) * 10;
 
-  // 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.95)';
-  ctx.shadowBlur = 24;
-  ctx.shadowOffsetY = 4;
-  ctx.textAlign = 'left';
-  const cleanCap = CAPTION.length > 60 ? CAPTION.slice(0, 60) + '...' : CAPTION;
-  ctx.fillText(cleanCap, 80, capY + 30);
-
-  // Subtitle / Spoken Narration - bottom center clean broadcast subtitles
-  if (NARRATION) {
-    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.save();
+    ctx.globalAlpha = sentAlpha;
+    ctx.font = '500 32px ' + FONT_BODY;
     ctx.textAlign = 'center';
-    const cleanNarr = NARRATION.length > 115 ? NARRATION.slice(0, 115) + '...' : NARRATION;
-    ctx.fillText(cleanNarr, W / 2, H * 0.92);
+
+    // Word wrap if sentence is long (> 58 chars)
+    const maxChars = 56;
+    const words = activeText.split(' ');
+    const lines = [];
+    let currentLine = '';
+    for (let w = 0; w < words.length; w++) {
+      const testLine = currentLine ? currentLine + ' ' + words[w] : words[w];
+      if (testLine.length > maxChars && currentLine.length > 0) {
+        lines.push(currentLine);
+        currentLine = words[w];
+      } else {
+        currentLine = testLine;
+      }
+    }
+    if (currentLine) lines.push(currentLine);
+
+    const subBaseY = H * 0.90 + sentSlideY;
+    const lineSpacing = 44;
+    const startY = subBaseY - ((lines.length - 1) * lineSpacing) / 2;
+
+    for (let l = 0; l < lines.length; l++) {
+      const ly = startY + l * lineSpacing;
+      // Soft translucent background backing for broadcast legibility
+      const textMetrics = ctx.measureText(lines[l]);
+      const pillW = textMetrics.width + 40;
+      ctx.fillStyle = 'rgba(6, 9, 14, 0.72)';
+      ctx.beginPath();
+      ctx.roundRect((W - pillW) / 2, ly - 28, pillW, 38, 8);
+      ctx.fill();
+
+      // Subtitle text with subtle glow
+      ctx.fillStyle = '#ffffff';
+      ctx.shadowColor = 'rgba(0, 0, 0, 0.95)';
+      ctx.shadowBlur = 12;
+      ctx.fillText(lines[l], W / 2, ly);
+    }
+    ctx.restore();
   }
+
   ctx.restore();
 
   // Bottom Progress Indicator (minimal line)
@@ -1265,10 +2198,11 @@ AVAILABLE HELPERS:
 - 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.`;
+2. If narration, key phrase, or visual direction involves human actions, history, emotions, characters, or daily life (e.g. choosing clothes, shivering in cold, sewing hides, meeting another tribe, mirror reflection, thinking by fire), ALWAYS animate expressive hand-drawn doodled human figures actively performing those actions (limbs, head, gestures, facial expressions, setting props) rather than sterile abstract diagrams.
+3. Fill the canvas with rich visual geometry, fluid strokes, animated characters, particles, or cinematic diagrams matching the prompt.
+4. NEVER use Math.random(), setTimeout, setInterval, Date.now(), performance.now(). All motion must be a pure mathematical function of time t.
+5. Output ONLY raw executable JavaScript code for the body of window.seek = async (t) => { ... }.
+6. NO markdown backticks, NO explanations. Start directly with JavaScript.`;
 
     const user = `TOPIC: ${topic || 'Visual Explainer'}
 VISUAL DIRECTION: ${visualDescription || caption || 'Dynamic motion graphics'}