@amg555/frameforge-mcp 2.4.7 → 2.4.9

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

@@ -326,7 +326,7 @@ function detectComponentTheme({ visualDescription = '', visual_description = '',
   }
 
   // 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)
+  if (/(?:^|[^\w])(shame|blush|embarrass|mirror|reflection|water pool|theory of mind|how others see|self-aware|identity|looking at me|shame psychology|mind-shift)(?:[^\w]|$)/i.test(text)
       || /കണ്ണാടി|പ്രതിഫലനം|മറ്റുള്ളവർ എന്നെ|തിയറി ഓഫ് മൈൻഡ്|സ്വന്തം ശരീരം മറച്ചു|വ്യക്തിത്വം|ശ്രദ്ധിക്കുന്നുണ്ട്|യഥാർത്ഥ രഹസ്യം|നാണം മറയ്ക്കാൻ/.test(text)) {
     return 'doodle_shame_reflection';
   }
@@ -343,7 +343,25 @@ function detectComponentTheme({ visualDescription = '', visual_description = '',
     return 'doodle_dressing';
   }
 
-  // 10. General Human Character
+  // 10. Map / Migration / Ancient World / Out of Africa (Scene 10)
+  if (/(?:^|[^\w])(migration|migrating|migrate|map with africa|africa highlighted|colder regions|climate illustrations|out of africa|geographic migration|migration arrows|continent map|world map)(?:[^\w]|$)/i.test(text)
+      || /കുടിയേറുന്നതിന്|കുടിയേറ്റം|ആഫ്രിക്ക|ഭൂപടത്തിൽ ആഫ്രിക്ക|മൈഗ്രേഷൻ|തണുപ്പുള്ള പ്രദേശങ്ങളിലേക്ക് കുടിയേറാൻ|ഭൂപടം|ഭൂഖണ്ഡം/.test(text)) {
+    return 'doodle_map_migration';
+  }
+
+  // 11. Royal Robes / Social Status / Ornaments / Crown / Wealth & Authority (Scene 16)
+  if (/(?:^|[^\w])(royal robe|royal robes|crown|sceptre|ornaments|status and power|hierarchy|wealth authority|noble clothing|decorated garments)(?:[^\w]|$)/i.test(text)
+      || /സമ്പത്തിന്റെയും അധികാരത്തിന്റെയും|രാജകീയ|കിരീടം|സാമൂഹിക സ്ഥാനം|അധികാരത്തിന്റെ അടയാളം/.test(text)) {
+    return 'doodle_royal_status';
+  }
+
+  // 12. Outro / Subscribe / Notification Bell / Channel Engagement (Scene 25)
+  if (/(?:^|[^\w])(subscribe|notification bell|youtube outro|channel subscribe|outro|subscribe button|like and subscribe)(?:[^\w]|$)/i.test(text)
+      || /സബ്സ്ക്രൈബ്|ചാനൽ സബ്സ്ക്രൈബ്|സബ്സ്ക്രൈബ് ചെയ്യൂ|ബെൽ ഐക്കൺ|നന്ദി/.test(text)) {
+    return 'doodle_outro_subscribe';
+  }
+
+  // 13. 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';
@@ -374,7 +392,7 @@ function detectComponentTheme({ visualDescription = '', visual_description = '',
   }
 
   // High Velocity Speed Action
-  if (/(?:^|[^\w])(sports|workout|gym|athlete|speed|streaks|race|championship|extreme|versus|vs|hype|adrenaline|power|velocity|fast)(?:[^\w]|$)/.test(text)
+  if (/(?:^|[^\w])(sports|workout|gym|athlete|speed|streaks|race|championship|extreme|hype|adrenaline|velocity|sprint|fast motion)(?:[^\w]|$)/.test(text)
       || /കായിക|മത്സര|വേഗത|വ്യായാമം|खेल|दौड़/.test(text)) {
     return 'speed_action';
   }
@@ -403,9 +421,9 @@ function detectComponentTheme({ visualDescription = '', visual_description = '',
     return 'chart';
   }
 
-  // Neural Network Nodes
-  if (/(?:^|[^\w])(network|node|nodes|ai|model|neural|pipeline|architecture|server|system|mesh|connect|synapse|deep learning)(?:[^\w]|$)/.test(text)
-      || /നെറ്റ്‌വർക്ക്|സിനാപ്സ്|ശൃംഖല|नेटवर्क/.test(text)) {
+  // Neural Network Nodes / AI Topology
+  if (/(?:^|[^\w])(network|nodes|neural network|neural net|distributed system|server mesh|deep learning)(?:[^\w]|$)/.test(text)
+      || /നെറ്റ്‌വർക്ക്|ശൃംഖല|नेटवर्क/.test(text)) {
     return 'nodes';
   }
 
@@ -415,16 +433,59 @@ function detectComponentTheme({ visualDescription = '', visual_description = '',
     return 'isometric_geometry';
   }
 
-  // Fallbacks matched to aesthetic
+  // ── Universal Semantic Visual Archetypes (General Content & Education) ──
+  // 1. Versus / Comparison / Split Screen
+  if (/(?:^|[^\w])(versus|vs|comparison|compare|pros and cons|pros vs cons|difference between|dichotomy|contrast|side-by-side|before and after|before vs after)(?:[^\w]|$)/i.test(text)
+      || /വ്യത്യാസം|താരതമ്യം|എതിര്|പോരാട്ടം|തമ്മിൽ|തുലനം|താരതമ്യപ്പെടുത്തൽ/.test(text)) {
+    return 'versus_comparison';
+  }
+
+  // 2. Mechanism / Physics / Machinery / Engine / Aerodynamics
+  if (/(?:^|[^\w])(engine|gear|gears|motor|physics|aerodynamics|thrust|turbine|propulsion|piston|hydraulic|kinetic|machine|machinery|circuit|mechanics|thermodynamics|levers|pulley|internal combustion|mechanical|cutaway|airflow|lift|rotor|dynamo)(?:[^\w]|$)/i.test(text)
+      || /യന്ത്രം|എഞ്ചിൻ|ഭൗതികശാസ്ത്രം|പ്രവർത്തനം|ചലനം|മെക്കാനിസം|ഭൗതികം/.test(text)) {
+    return 'mechanism_physics';
+  }
+
+  // 3. Process / Pipeline / Workflow / Stages / Assembly / Lifecycle
+  if (/(?:^|[^\w])(pipeline|workflow|step by step|steps|stages|phase|phases|production line|assembly|manufacturing|lifecycle|funnel|conveyor|sequence|how it works|how it is made|procedure)(?:[^\w]|$)/i.test(text)
+      || /ഘട്ടങ്ങൾ|പ്രക്രിയ|ഘട്ടം|ഉൽപ്പാദനം|വഴികൾ|പ്രവർത്തനരീതി/.test(text)) {
+    return 'process_pipeline';
+  }
+
+  // 4. Cognitive Insight / Psychology / Brain / Eureka / Revelation / Mind
+  if (/(?:^|[^\w])(mind|psychology|cognitive|brain|insight|revelation|eureka|intuition|subconscious|thinking|thought|contemplation|intelligence|mental|awareness|neuroscience|concept|idea|epiphany)(?:[^\w]|$)/i.test(text)
+      || /മനസ്സ്|ബുദ്ധി|ചിന്ത|മനഃശാസ്ത്രം|ജ്ഞാനം|മസ്തിഷ്കം|ബോധം/.test(text)) {
+    return 'cognitive_insight';
+  }
+
+  // 5. Magnification / Loupe / Macro Zoom / Scrutiny / Detailed Inspection
+  if (/(?:^|[^\w])(magnify|magnification|zoom|microscopic|macro|close up|closeup|inspection|loupe|examine|scrutiny|detail|focal point|focus in|specimen)(?:[^\w]|$)/i.test(text)
+      || /സൂക്ഷ്മ|പരിശോധന|വലുതാക്കി കാണുക|സൂക്ഷ്മമായി|നിരീക്ഷണം/.test(text)) {
+    return 'magnification_focus';
+  }
+
+  // 6. Explainer / Presentation / Tutorial / Masterclass Whiteboard / Breakdown
+  if (/(?:^|[^\w])(explain|explainer|presentation|lecture|teach|tutorial|whiteboard|blackboard|breakdown|guide|overview|theory|principles|fundamentals|introduction|summary|lesson|masterclass)(?:[^\w]|$)/i.test(text)
+      || /വിവരണം|പഠിപ്പിക്കുക|ക്ലാസ്|പാഠം|തത്വം|വിവരിക്കുക/.test(text)) {
+    return 'explainer_presentation';
+  }
+
+  // 7. Waveform / Audio / Sound / Acoustics / Equalizer
+  if (/(?:^|[^\w])(waveform|audio|sound|equalizer|frequency|acoustics|hz|decibel|music spectrum|voice waveform)(?:[^\w]|$)/i.test(text)
+      || /ശബ്ദതരംഗം|തരംഗം|സംഗീതം|ധ്വനി/.test(text)) {
+    return 'waveform';
+  }
+
+  // Fallbacks matched to aesthetic (rich semantic defaults, never sterile)
   if (aesthetic === 'cosmic_space') return 'celestial_orbit';
   if (aesthetic === 'cinematic_documentary') return 'doodle_general_human';
   if (aesthetic === 'finance_executive') return 'chart';
   if (aesthetic === 'nature_organic') return 'dna_helix';
   if (aesthetic === 'breaking_news') return 'radar_globe';
   if (aesthetic === 'cyber_tech') return 'nodes';
-  if (aesthetic === 'minimal_luxury') return 'isometric_geometry';
+  if (aesthetic === 'minimal_luxury') return 'explainer_presentation';
   if (aesthetic === 'hype_sports') return 'speed_action';
-  return 'waveform';
+  return 'explainer_presentation';
 }
 
 // ── Harness HTML Wrapper for User / Agent Code ────────────────────────────────
@@ -575,6 +636,7 @@ function generateSceneHtml({
   const aesthetic = AESTHETICS[aestheticKey] || AESTHETICS.cyber_tech;
   const compTheme = detectComponentTheme({
     visualDescription,
+    prompt,
     caption,
     narration,
     topic,
@@ -693,6 +755,8 @@ const IS_LIGHT = ${Boolean(pal.isLight)};
 const STROKE_COLOR = ${JSON.stringify(pal.isLight ? (pal.stroke || '#1c1917') : '#f8fafc')};
 const STROKE_ALT = ${JSON.stringify(pal.isLight ? (pal.strokeAlt || '#44403c') : 'rgba(255, 255, 255, 0.7)')};
 const AMBIENT_LINE = ${JSON.stringify(pal.isLight ? 'rgba(28, 25, 23, 0.22)' : 'rgba(255, 255, 255, 0.25)')};
+const TEXT_MAIN = ${JSON.stringify(pal.isLight ? '#1c1917' : '#f8fafc')};
+const TEXT_MUTED = ${JSON.stringify(pal.isLight ? '#78716c' : '#94a3b8')};
 
 let cachedImage = null;
 if (IMAGE_SRC) {
@@ -2510,6 +2574,338 @@ function drawMainScene(t) {
       showShadow: true,
       seed: 110,
     });
+  } else if (COMP_THEME === 'doodle_map_migration') {
+    // Scene 10: Hand-Drawn Migration Map / Out of Africa / Ancient World Routes
+    const mapSpring = spring(t, 0.05, 170, 14);
+    const arrowSpring = spring(t, window.DURATION * 0.35, 180, 15);
+    const walkProg = Math.min(1, Math.max(0, (t - window.DURATION * 0.2) / (window.DURATION * 0.75)));
+
+    // Antique parchment background wash
+    ctx.save();
+    ctx.fillStyle = IS_LIGHT ? '#faf5ec' : '#1c1917';
+    ctx.fillRect(0, 0, W, H);
+
+    // Decorative map grid lines (latitude/longitude in subtle ink)
+    ctx.strokeStyle = IS_LIGHT ? 'rgba(180, 83, 9, 0.12)' : 'rgba(255, 255, 255, 0.1)';
+    ctx.lineWidth = 1.5;
+    ctx.setLineDash([6, 6]);
+    for (let gx = 100; gx < W; gx += 200) {
+      ctx.beginPath(); ctx.moveTo(gx, 0); ctx.lineTo(gx, H); ctx.stroke();
+    }
+    for (let gy = 80; gy < H; gy += 160) {
+      ctx.beginPath(); ctx.moveTo(0, gy); ctx.lineTo(W, gy); ctx.stroke();
+    }
+    ctx.setLineDash([]);
+
+    // Hand-drawn stylized continent outlines (Africa, Europe, Asia)
+    const mapCenter = cx - 40;
+    const mapY = cy - 20;
+
+    // 1. Africa Outline (Highlighted in warm terracotta wash)
+    ctx.save();
+    ctx.fillStyle = 'rgba(217, 119, 6, 0.20)';
+    ctx.beginPath();
+    ctx.moveTo(mapCenter - 140, mapY - 60); // West bulge
+    ctx.bezierCurveTo(mapCenter - 160, mapY + 20, mapCenter - 80, mapY + 140, mapCenter - 40, mapY + 220); // South tip (Good Hope)
+    ctx.bezierCurveTo(mapCenter + 10, mapY + 160, mapCenter + 40, mapY + 60, mapCenter + 60, mapY - 20); // Horn of Africa
+    ctx.bezierCurveTo(mapCenter + 30, mapY - 60, mapCenter - 20, mapY - 80, mapCenter - 140, mapY - 60); // North Coast
+    ctx.closePath();
+    ctx.fill();
+
+    // Outline stroke with ink wobble
+    sLine(mapCenter - 140, mapY - 60, mapCenter - 160, mapY + 20, 710, '#c2410c', 3);
+    sLine(mapCenter - 160, mapY + 20, mapCenter - 40, mapY + 220, 711, '#c2410c', 3);
+    sLine(mapCenter - 40, mapY + 220, mapCenter + 60, mapY - 20, 712, '#c2410c', 3);
+    sLine(mapCenter + 60, mapY - 20, mapCenter - 140, mapY - 60, 713, '#c2410c', 3);
+
+    // Africa label badge
+    ctx.fillStyle = '#b45309';
+    ctx.font = '700 22px ' + FONT_DISPLAY;
+    ctx.textAlign = 'center';
+    ctx.fillText('AFRICA', mapCenter - 40, mapY + 60);
+
+    // Sun icon over Africa
+    sCircle(mapCenter - 90, mapY + 40, 18, 714, '#d97706', 2.5, '#fef08a');
+    for (let r = 0; r < 6; r++) {
+      const ra = (r / 6) * Math.PI * 2 + t * 0.5;
+      const rx1 = mapCenter - 90 + Math.cos(ra) * 22;
+      const ry1 = mapY + 40 + Math.sin(ra) * 22;
+      const rx2 = mapCenter - 90 + Math.cos(ra) * 32;
+      const ry2 = mapY + 40 + Math.sin(ra) * 32;
+      sLine(rx1, ry1, rx2, ry2, 715 + r, '#d97706', 2);
+    }
+
+    // 2. Eurasia / Northern Territory Outline (Colder destination)
+    ctx.fillStyle = 'rgba(56, 189, 248, 0.12)';
+    ctx.beginPath();
+    ctx.moveTo(mapCenter - 130, mapY - 90);
+    ctx.bezierCurveTo(mapCenter - 120, mapY - 200, mapCenter + 60, mapY - 220, mapCenter + 220, mapY - 170); // Northern Eurasia
+    ctx.bezierCurveTo(mapCenter + 320, mapY - 130, mapCenter + 360, mapY - 40, mapCenter + 260, mapY + 10); // East Asia
+    ctx.bezierCurveTo(mapCenter + 140, mapY - 30, mapCenter + 40, mapY - 70, mapCenter - 130, mapY - 90);
+    ctx.closePath();
+    ctx.fill();
+
+    sLine(mapCenter - 130, mapY - 90, mapCenter + 60, mapY - 210, 725, '#0284c7', 3);
+    sLine(mapCenter + 60, mapY - 210, mapCenter + 280, mapY - 160, 726, '#0284c7', 3);
+    sLine(mapCenter + 280, mapY - 160, mapCenter + 240, mapY + 10, 727, '#0284c7', 3);
+
+    // Snowflake climate icons over Eurasia
+    for (let sf = 0; sf < 3; sf++) {
+      const sfx = mapCenter + 60 + sf * 110;
+      const sfy = mapY - 160 + (sf % 2) * 35;
+      sLine(sfx - 14, sfy, sfx + 14, sfy, 730 + sf, '#0284c7', 2);
+      sLine(sfx, sfy - 14, sfx, sfy + 14, 733 + sf, '#0284c7', 2);
+      sLine(sfx - 10, sfy - 10, sfx + 10, sfy + 10, 736 + sf, '#0284c7', 2);
+      sLine(sfx - 10, sfy + 10, sfx + 10, sfy - 10, 739 + sf, '#0284c7', 2);
+    }
+    ctx.restore();
+
+    // 3. Dynamic Migration Route Curves with Pulsing Arrowheads
+    if (arrowSpring > 0.05) {
+      ctx.save();
+      ctx.strokeStyle = '#c2410c';
+      ctx.lineWidth = 4;
+      ctx.setLineDash([10, 8]);
+
+      // Route 1: Out of Africa -> Europe
+      ctx.beginPath();
+      ctx.moveTo(mapCenter + 20, mapY - 40);
+      ctx.quadraticCurveTo(mapCenter - 20, mapY - 120, mapCenter - 60, mapY - 160);
+      ctx.stroke();
+
+      // Route 2: Out of Africa -> Asia
+      ctx.beginPath();
+      ctx.moveTo(mapCenter + 40, mapY - 35);
+      ctx.quadraticCurveTo(mapCenter + 120, mapY - 80, mapCenter + 220, mapY - 120);
+      ctx.stroke();
+      ctx.setLineDash([]);
+
+      // Pulsing migration markers
+      const pulseR = 6 + Math.sin(t * 6) * 3;
+      sCircle(mapCenter + 30, mapY - 40, pulseR, 750, '#ea580c', 2, '#fbbf24');
+      sCircle(mapCenter - 60, mapY - 160, pulseR, 751, '#0284c7', 2, '#38bdf8');
+      sCircle(mapCenter + 220, mapY - 120, pulseR, 752, '#0284c7', 2, '#38bdf8');
+      ctx.restore();
+    }
+
+    // 4. Walking Doodle Explorer on the Migration Trail
+    const trailStartX = mapCenter + 10;
+    const trailStartY = mapY + 20;
+    const trailEndX = mapCenter + 190;
+    const trailEndY = mapY - 100;
+    const curNomadX = trailStartX + (trailEndX - trailStartX) * walkProg;
+    const curNomadY = trailStartY + (trailEndY - trailStartY) * walkProg;
+
+    drawDoodleCharacter({
+      x: curNomadX,
+      y: curNomadY + 120,
+      scale: 1.15,
+      hairStyle: 'wild',
+      expression: 'focused',
+      clothing: walkProg > 0.5 ? 'pelt' : 'none',
+      armPose: 'hold_spear',
+      showShadow: true,
+      seed: 760,
+    });
+
+  } else if (COMP_THEME === 'doodle_royal_status') {
+    // Scene 16: Evolution of Clothing into Royal Mantles, Crowns & Social Status
+    const crownSpring = spring(t, window.DURATION * 0.32, 190, 15);
+    const arrowRise = spring(t, window.DURATION * 0.55, 170, 14);
+
+    // Warm dais platform
+    ctx.fillStyle = IS_LIGHT ? '#faf7f2' : '#1c1917';
+    ctx.fillRect(0, 0, W, H);
+
+    ctx.fillStyle = '#451a03';
+    ctx.fillRect(0, cy + 140, W, H - (cy + 140));
+    sLine(0, cy + 140, W, cy + 140, 770, '#d97706', 3.5);
+
+    // Prehistoric Human on Left (Simple pelt, admiring transformation)
+    drawDoodleCharacter({
+      x: cx - 260,
+      y: cy + 140,
+      scale: 1.3,
+      hairStyle: 'wild',
+      expression: 'curious',
+      clothing: 'pelt',
+      armPose: 'thinker',
+      showShadow: true,
+      seed: 771,
+    });
+
+    // Royal Monarch on Right (Majestic regal cape / robe)
+    const kingX = cx + 220;
+    drawDoodleCharacter({
+      x: kingX,
+      y: cy + 140,
+      scale: 1.35,
+      hairStyle: 'modern',
+      expression: 'smiling',
+      clothing: 'cloak',
+      armPose: 'peace_gesture',
+      showShadow: true,
+      seed: 772,
+    });
+
+    // Ornate Golden Crown with Ruby jewels appearing above Monarch
+    if (crownSpring > 0.05) {
+      ctx.save();
+      ctx.translate(kingX, cy - 20);
+      ctx.scale(crownSpring, crownSpring);
+
+      // Golden crown base & peaks
+      ctx.fillStyle = '#f59e0b';
+      ctx.beginPath();
+      ctx.moveTo(-36, 0);
+      ctx.lineTo(-40, -32);
+      ctx.lineTo(-20, -18);
+      ctx.lineTo(0, -42);
+      ctx.lineTo(20, -18);
+      ctx.lineTo(40, -32);
+      ctx.lineTo(36, 0);
+      ctx.closePath();
+      ctx.fill();
+      ctx.strokeStyle = '#b45309';
+      ctx.lineWidth = 2.5;
+      ctx.stroke();
+
+      // Jewels on crown peaks
+      sCircle(-40, -32, 4, 780, '#b91c1c', 1.5, '#ef4444');
+      sCircle(0, -42, 5, 781, '#b91c1c', 1.5, '#ef4444');
+      sCircle(40, -32, 4, 782, '#b91c1c', 1.5, '#ef4444');
+
+      // Golden Sceptre in hand
+      sLine(42, 20, 52, 130, 785, '#d97706', 4.5);
+      sCircle(42, 16, 10, 786, '#d97706', 2, '#fbbf24');
+      ctx.restore();
+    }
+
+    // Status & Power indicator arrows rising centrally
+    if (arrowRise > 0.05) {
+      ctx.save();
+      ctx.globalAlpha = Math.min(1, arrowRise);
+      for (let arr = 0; arr < 3; arr++) {
+        const arrX = cx - 30 + arr * 40;
+        const arrY = cy + 40 - arr * 35 - Math.sin(t * 4 + arr) * 10;
+        sLine(arrX, arrY + 40, arrX, arrY, 790 + arr, '#d97706', 3.5);
+        sLine(arrX - 12, arrY + 14, arrX, arrY, 793 + arr, '#d97706', 3.5);
+        sLine(arrX + 12, arrY + 14, arrX, arrY, 796 + arr, '#d97706', 3.5);
+      }
+
+      ctx.fillStyle = '#b45309';
+      ctx.font = '700 20px ' + FONT_DISPLAY;
+      ctx.textAlign = 'center';
+      ctx.fillText('STATUS & POWER', cx + 10, cy - 90);
+      ctx.restore();
+    }
+
+  } else if (COMP_THEME === 'doodle_outro_subscribe') {
+    // Scene 25: YouTube Outro / Animated Question Mark / Subscribe & Bell Card
+    const qSpring = spring(t, 0.05, 180, 14);
+    const subSpring = spring(t, window.DURATION * 0.28, 200, 14);
+    const bellSpring = spring(t, window.DURATION * 0.50, 190, 12);
+
+    ctx.fillStyle = IS_LIGHT ? '#faf7f2' : '#1c1917';
+    ctx.fillRect(0, 0, W, H);
+
+    // Warm terrain ground
+    ctx.fillStyle = '#451a03';
+    ctx.fillRect(0, cy + 140, W, H - (cy + 140));
+    sLine(0, cy + 140, W, cy + 140, 810, '#d97706', 3.5);
+
+    // Prehistoric character on left drawing with a reed/quill
+    drawDoodleCharacter({
+      x: cx - 280,
+      y: cy + 140,
+      scale: 1.35,
+      hairStyle: 'wild',
+      expression: 'smiling',
+      clothing: 'pelt',
+      armPose: 'peace_gesture',
+      showShadow: true,
+      seed: 811,
+    });
+
+    // Big bold animated question mark drawn in ink
+    if (qSpring > 0.05) {
+      ctx.save();
+      const qX = cx - 80;
+      const qY = cy - 20;
+      ctx.translate(qX, qY);
+      ctx.scale(qSpring, qSpring);
+
+      ctx.strokeStyle = '#c2410c';
+      ctx.lineWidth = 9;
+      ctx.lineCap = 'round';
+      ctx.beginPath();
+      ctx.arc(0, -60, 44, Math.PI, 0, false);
+      ctx.bezierCurveTo(44, -15, 0, 5, 0, 35);
+      ctx.stroke();
+
+      sCircle(0, 72, 8, 815, '#c2410c', 3, '#c2410c');
+      ctx.restore();
+    }
+
+    // Interactive YouTube Subscribe Pill Button & Swinging Notification Bell
+    if (subSpring > 0.05) {
+      ctx.save();
+      const btnX = cx + 220;
+      const btnY = cy - 20;
+      ctx.translate(btnX, btnY);
+      ctx.scale(subSpring, subSpring);
+
+      // Red Subscribe Pill
+      ctx.fillStyle = '#dc2626';
+      ctx.beginPath();
+      ctx.roundRect(-140, -32, 280, 64, 32);
+      ctx.fill();
+      ctx.strokeStyle = '#991b1b';
+      ctx.lineWidth = 3;
+      ctx.stroke();
+
+      // White Subscribe text
+      ctx.fillStyle = '#ffffff';
+      ctx.font = '700 24px ' + FONT_DISPLAY;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText('SUBSCRIBE', -15, 0);
+
+      // Play icon triangle
+      ctx.beginPath();
+      ctx.moveTo(-90, -12);
+      ctx.lineTo(-72, 0);
+      ctx.lineTo(-90, 12);
+      ctx.closePath();
+      ctx.fill();
+
+      // Notification Bell swinging on spring
+      if (bellSpring > 0.05) {
+        ctx.save();
+        const bellSwing = Math.sin(t * 9) * 0.25 * Math.exp(-(t % 2.5));
+        ctx.translate(180, 0);
+        ctx.rotate(bellSwing);
+
+        // Golden bell body
+        ctx.fillStyle = '#f59e0b';
+        ctx.beginPath();
+        ctx.arc(0, -12, 14, Math.PI, 0);
+        ctx.quadraticCurveTo(18, 12, 22, 16);
+        ctx.lineTo(-22, 16);
+        ctx.quadraticCurveTo(-18, 12, 0, -12);
+        ctx.closePath();
+        ctx.fill();
+        ctx.strokeStyle = '#b45309';
+        ctx.lineWidth = 2.5;
+        ctx.stroke();
+
+        // Bell clapper
+        sCircle(0, 20, 5, 820, '#b45309', 2, '#d97706');
+        ctx.restore();
+      }
+      ctx.restore();
+    }
+
   } else if (COMP_THEME === 'celestial_orbit') {
     // 3D Celestial Body (Earth) with orbiting satellites & signal pulses
     const earthR = Math.min(W, H) * 0.22;
@@ -2530,7 +2926,7 @@ function drawMainScene(t) {
     ctx.beginPath(); ctx.arc(cx, cy, earthR, 0, Math.PI * 2); ctx.fill();
 
     // Rotating longitude meridians
-    ctx.strokeStyle = 'rgba(255, 255, 255, 0.22)';
+    ctx.strokeStyle = IS_LIGHT ? 'rgba(28, 25, 23, 0.35)' : 'rgba(255, 255, 255, 0.22)';
     ctx.lineWidth = 1.5;
     for (let m = 0; m < 4; m++) {
       const mAngle = t * 0.5 + (m * Math.PI) / 4;
@@ -2561,7 +2957,7 @@ function drawMainScene(t) {
       ctx.save();
       ctx.translate(cx, cy);
       ctx.rotate(tilt);
-      ctx.strokeStyle = 'rgba(255, 255, 255, 0.14)';
+      ctx.strokeStyle = IS_LIGHT ? 'rgba(28, 25, 23, 0.25)' : 'rgba(255, 255, 255, 0.14)';
       ctx.lineWidth = 1.5;
       ctx.beginPath(); ctx.ellipse(0, 0, a, b, 0, 0, Math.PI * 2); ctx.stroke();
 
@@ -2790,7 +3186,7 @@ function drawMainScene(t) {
   } else if (COMP_THEME === 'radar_globe') {
     // 3D Tactical Wireframe Rotating Radar Globe
     const globeR = 150;
-    ctx.strokeStyle = 'rgba(255, 255, 255, 0.15)';
+    ctx.strokeStyle = IS_LIGHT ? 'rgba(28, 25, 23, 0.35)' : 'rgba(255, 255, 255, 0.15)';
     ctx.lineWidth = 1.5;
 
     // Outer degree ring
@@ -2962,7 +3358,679 @@ function drawMainScene(t) {
     ctx.drawImage(cachedImage, cx - imgW / 2, cy - imgH / 2, imgW, imgH);
     ctx.restore();
 
-  } else {
+  } else if (COMP_THEME === 'versus_comparison') {
+    // Universal Archetype: Split-Screen Versus / Comparison
+    const splitSpring = spring(t, 0.05, 180, 14);
+    const cardLeftSpring = spring(t, 0.15, 190, 15);
+    const cardRightSpring = spring(t, 0.28, 190, 15);
+    const badgeSpring = spring(t, 0.42, 220, 13);
+
+    // Center divider beam
+    const divAlpha = Math.min(1, Math.max(0, splitSpring));
+    ctx.save();
+    ctx.globalAlpha = divAlpha;
+    const seamGrad = ctx.createLinearGradient(0, cy - H * 0.42, 0, cy + H * 0.42);
+    seamGrad.addColorStop(0, 'rgba(255,255,255,0)');
+    seamGrad.addColorStop(0.5, ACCENT);
+    seamGrad.addColorStop(1, 'rgba(255,255,255,0)');
+    ctx.strokeStyle = seamGrad;
+    ctx.lineWidth = 3;
+    ctx.beginPath();
+    ctx.moveTo(cx, cy - H * 0.42);
+    ctx.lineTo(cx, cy + H * 0.42);
+    ctx.stroke();
+
+    // Seam energy sparks
+    for (let sp = 0; sp < 8; sp++) {
+      const spY = cy - H * 0.35 + ((sp * 95 + t * 240) % (H * 0.7));
+      const spR = 3 + Math.sin(t * 8 + sp) * 2;
+      ctx.fillStyle = ACCENT;
+      ctx.beginPath();
+      ctx.arc(cx, spY, spR, 0, Math.PI * 2);
+      ctx.fill();
+    }
+    ctx.restore();
+
+    // Left Card (Side A)
+    const cardW = Math.min(W * 0.38, 520);
+    const cardH = Math.min(H * 0.62, 540);
+    const leftX = cx - cardW - 35;
+    const cardY = cy - cardH / 2;
+
+    ctx.save();
+    ctx.globalAlpha = Math.min(1, Math.max(0, cardLeftSpring));
+    ctx.translate(leftX + (1 - cardLeftSpring) * -60, cardY);
+    ctx.fillStyle = CARD_BG;
+    ctx.strokeStyle = CARD_BORDER;
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.roundRect(0, 0, cardW, cardH, 20);
+    ctx.fill();
+    ctx.stroke();
+
+    // Left Card Header & Accent Pill
+    ctx.fillStyle = 'rgba(56, 189, 248, 0.15)';
+    ctx.beginPath();
+    ctx.roundRect(24, 24, 110, 32, 16);
+    ctx.fill();
+    ctx.fillStyle = '#38bdf8';
+    ctx.font = 'bold 16px ' + FONT_DISPLAY;
+    ctx.fillText('OPTION A', 42, 45);
+
+    // Left Metrics / Feature Bars
+    for (let b = 0; b < 4; b++) {
+      const barY = 90 + b * 75;
+      const bProgress = Math.min(1, Math.max(0, spring(t, 0.3 + b * 0.1, 160, 14)));
+      ctx.fillStyle = IS_LIGHT ? 'rgba(0,0,0,0.06)' : 'rgba(255,255,255,0.06)';
+      ctx.beginPath();
+      ctx.roundRect(24, barY + 22, cardW - 48, 14, 7);
+      ctx.fill();
+
+      ctx.fillStyle = '#38bdf8';
+      ctx.beginPath();
+      const fillW = (cardW - 48) * (0.45 + 0.15 * Math.sin(b * 1.5 + 2)) * bProgress;
+      ctx.roundRect(24, barY + 22, fillW, 14, 7);
+      ctx.fill();
+
+      // Feature icon / indicator
+      sCircle(36, barY + 8, 6, 100 + b, '#38bdf8', 2, '#38bdf8');
+      ctx.fillStyle = TEXT_MAIN;
+      ctx.font = '600 18px ' + FONT_DISPLAY;
+      ctx.fillText('ATTRIBUTE 0' + (b + 1), 54, barY + 14);
+    }
+    ctx.restore();
+
+    // Right Card (Side B)
+    const rightX = cx + 35;
+    ctx.save();
+    ctx.globalAlpha = Math.min(1, Math.max(0, cardRightSpring));
+    ctx.translate(rightX + (1 - cardRightSpring) * 60, cardY);
+    ctx.fillStyle = CARD_BG;
+    ctx.strokeStyle = CARD_BORDER;
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.roundRect(0, 0, cardW, cardH, 20);
+    ctx.fill();
+    ctx.stroke();
+
+    // Right Card Header & Accent Pill
+    ctx.fillStyle = 'rgba(244, 63, 94, 0.15)';
+    ctx.beginPath();
+    ctx.roundRect(24, 24, 110, 32, 16);
+    ctx.fill();
+    ctx.fillStyle = '#f43f5e';
+    ctx.font = 'bold 16px ' + FONT_DISPLAY;
+    ctx.fillText('OPTION B', 42, 45);
+
+    // Right Metrics / Feature Bars
+    for (let b = 0; b < 4; b++) {
+      const barY = 90 + b * 75;
+      const bProgress = Math.min(1, Math.max(0, spring(t, 0.35 + b * 0.1, 160, 14)));
+      ctx.fillStyle = IS_LIGHT ? 'rgba(0,0,0,0.06)' : 'rgba(255,255,255,0.06)';
+      ctx.beginPath();
+      ctx.roundRect(24, barY + 22, cardW - 48, 14, 7);
+      ctx.fill();
+
+      ctx.fillStyle = '#f43f5e';
+      ctx.beginPath();
+      const fillW = (cardW - 48) * (0.55 + 0.12 * Math.cos(b * 1.8 + 1)) * bProgress;
+      ctx.roundRect(24, barY + 22, fillW, 14, 7);
+      ctx.fill();
+
+      sCircle(36, barY + 8, 6, 200 + b, '#f43f5e', 2, '#f43f5e');
+      ctx.fillStyle = TEXT_MAIN;
+      ctx.font = '600 18px ' + FONT_DISPLAY;
+      ctx.fillText('ATTRIBUTE 0' + (b + 1), 54, barY + 14);
+    }
+    ctx.restore();
+
+    // Center VS Emblem Badge
+    ctx.save();
+    ctx.translate(cx, cy);
+    const bScale = Math.max(0, badgeSpring);
+    ctx.scale(bScale, bScale);
+    ctx.fillStyle = IS_LIGHT ? '#ffffff' : '#0f172a';
+    ctx.strokeStyle = ACCENT;
+    ctx.lineWidth = 4;
+    ctx.beginPath();
+    ctx.arc(0, 0, 48, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.stroke();
+
+    ctx.strokeStyle = 'rgba(255, 255, 255, 0.4)';
+    ctx.lineWidth = 1.5;
+    ctx.beginPath();
+    ctx.arc(0, 0, 42, 0, Math.PI * 2);
+    ctx.stroke();
+
+    ctx.font = '900 28px ' + FONT_DISPLAY;
+    ctx.fillStyle = ACCENT;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText('VS', 0, 2);
+    ctx.restore();
+
+  } else if (COMP_THEME === 'mechanism_physics') {
+    // Universal Archetype: Mechanical Engineering, Cutaway Gears, Forces & Kinematics
+    const engSpring = spring(t, 0.05, 170, 14);
+    const vectorSpring = spring(t, 0.45, 180, 15);
+
+    // Background schematic blueprint grid lines
+    ctx.save();
+    ctx.strokeStyle = IS_LIGHT ? 'rgba(0,0,0,0.07)' : 'rgba(56, 189, 248, 0.12)';
+    ctx.lineWidth = 1;
+    for (let gx = cx - 450; gx <= cx + 450; gx += 60) {
+      ctx.beginPath(); ctx.moveTo(gx, cy - 320); ctx.lineTo(gx, cy + 320); ctx.stroke();
+    }
+    for (let gy = cy - 300; gy <= cy + 300; gy += 60) {
+      ctx.beginPath(); ctx.moveTo(cx - 480, gy); ctx.lineTo(cx + 480, gy); ctx.stroke();
+    }
+    ctx.strokeStyle = IS_LIGHT ? 'rgba(0,0,0,0.1)' : 'rgba(56, 189, 248, 0.2)';
+    ctx.lineWidth = 1.5;
+    ctx.beginPath(); ctx.arc(cx, cy, 340, 0, Math.PI * 2); ctx.stroke();
+    ctx.restore();
+
+    // Helper: Draw precision technical gear with teeth
+    function drawGear(gx, gy, radius, teeth, rotAngle, color, axleColor) {
+      ctx.save();
+      ctx.translate(gx, gy);
+      ctx.rotate(rotAngle);
+      ctx.fillStyle = color;
+      ctx.strokeStyle = STROKE_COLOR;
+      ctx.lineWidth = 2.5;
+
+      ctx.beginPath();
+      const toothDepth = radius * 0.14;
+      for (let i = 0; i < teeth; i++) {
+        const a0 = (i * 2 * Math.PI) / teeth;
+        const a1 = a0 + (Math.PI / teeth) * 0.35;
+        const a2 = a0 + (Math.PI / teeth) * 0.65;
+        const a3 = a0 + (Math.PI / teeth);
+
+        const rIn = radius - toothDepth;
+        const rOut = radius + toothDepth;
+
+        if (i === 0) ctx.moveTo(rIn * Math.cos(a0), rIn * Math.sin(a0));
+        else ctx.lineTo(rIn * Math.cos(a0), rIn * Math.sin(a0));
+        ctx.lineTo(rOut * Math.cos(a1), rOut * Math.sin(a1));
+        ctx.lineTo(rOut * Math.cos(a2), rOut * Math.sin(a2));
+        ctx.lineTo(rIn * Math.cos(a3), rIn * Math.sin(a3));
+      }
+      ctx.closePath();
+      ctx.fill();
+      ctx.stroke();
+
+      // Hollow interior & spokes
+      ctx.beginPath();
+      ctx.arc(0, 0, radius * 0.62, 0, Math.PI * 2);
+      ctx.fillStyle = IS_LIGHT ? '#ffffff' : '#080d1a';
+      ctx.fill();
+      ctx.stroke();
+
+      // 4 Precision Spokes
+      for (let sp = 0; sp < 4; sp++) {
+        ctx.save();
+        ctx.rotate((sp * Math.PI) / 2);
+        ctx.fillStyle = color;
+        ctx.fillRect(-6, -radius * 0.58, 12, radius * 0.58 * 2);
+        ctx.restore();
+      }
+
+      // Center Axle Hub
+      ctx.beginPath();
+      ctx.arc(0, 0, radius * 0.25, 0, Math.PI * 2);
+      ctx.fillStyle = axleColor;
+      ctx.fill();
+      ctx.stroke();
+      sCircle(0, 0, radius * 0.1, 50, '#ffffff', 2, '#ffffff');
+
+      ctx.restore();
+    }
+
+    ctx.save();
+    const gScale = Math.min(1, Math.max(0, engSpring));
+    ctx.translate(cx, cy);
+    ctx.scale(gScale, gScale);
+    ctx.translate(-cx, -cy);
+
+    // Primary Gear Train (Interlocking 3 gears)
+    const gearSpeed = t * 1.4;
+    drawGear(cx - 150, cy, 140, 24, gearSpeed, IS_LIGHT ? '#e2e8f0' : '#1e293b', ACCENT);
+    drawGear(cx + 90, cy - 80, 105, 18, -gearSpeed * (24 / 18) + 0.17, IS_LIGHT ? '#cbd5e1' : '#334155', ACCENT2);
+    drawGear(cx + 175, cy + 95, 70, 12, gearSpeed * (24 / 12) + 0.25, IS_LIGHT ? '#94a3b8' : '#475569', '#10b981');
+
+    // Dynamic Kinematic Linkage / Piston
+    const pistonCycle = t * 3.5;
+    const crankR = 60;
+    const crankX = cx - 150 + Math.cos(gearSpeed) * crankR;
+    const crankY = cy + Math.sin(gearSpeed) * crankR;
+    const pistonY = cy + 180 + Math.sin(pistonCycle) * 35;
+    const pistonX = cx - 150;
+
+    sLine(crankX, crankY, pistonX, pistonY, 301, ACCENT, 5);
+    sCircle(crankX, crankY, 8, 302, '#ffffff', 2, ACCENT);
+    sCircle(pistonX, pistonY, 8, 303, '#ffffff', 2, ACCENT);
+
+    // Piston Head in Cylinder
+    ctx.fillStyle = IS_LIGHT ? '#64748b' : '#38bdf8';
+    ctx.fillRect(pistonX - 35, pistonY - 15, 70, 30);
+    ctx.strokeStyle = STROKE_COLOR;
+    ctx.lineWidth = 2.5;
+    ctx.strokeRect(pistonX - 35, pistonY - 15, 70, 30);
+
+    // Dynamic Force Vectors & Aerodynamic Flow Arrows
+    if (vectorSpring > 0.05) {
+      ctx.save();
+      ctx.globalAlpha = Math.min(1, Math.max(0, vectorSpring));
+
+      const vX = cx + 290;
+      const vY = cy - 140;
+      sLine(vX, vY, vX + 110, vY, 401, '#10b981', 4);
+      ctx.fillStyle = '#10b981';
+      ctx.beginPath();
+      ctx.moveTo(vX + 125, vY);
+      ctx.lineTo(vX + 105, vY - 8);
+      ctx.lineTo(vX + 105, vY + 8);
+      ctx.closePath();
+      ctx.fill();
+      ctx.font = 'bold 15px ' + FONT_DISPLAY;
+      ctx.fillText('F_THRUST = 4.8 kN', vX, vY - 16);
+
+      ctx.strokeStyle = '#f59e0b';
+      ctx.lineWidth = 3;
+      ctx.beginPath();
+      ctx.arc(cx - 150, cy, 185, -0.6, 0.6);
+      ctx.stroke();
+      ctx.fillStyle = '#f59e0b';
+      ctx.font = 'bold 15px ' + FONT_DISPLAY;
+      ctx.fillText('TORQUE = 320 Nm', cx - 210, cy - 195);
+      ctx.restore();
+    }
+
+    ctx.restore();
+
+  } else if (COMP_THEME === 'process_pipeline') {
+    // Universal Archetype: Multi-Stage Process / Pipeline / Supply Chain / Lifecycle
+    const pipeSpring = spring(t, 0.05, 170, 14);
+    const stages = [
+      { name: 'INGEST', label: '01 / SOURCE', desc: 'Raw Signals' },
+      { name: 'SYNTHESIS', label: '02 / TRANSFORM', desc: 'Active Process' },
+      { name: 'VALIDATION', label: '03 / VERIFY', desc: 'Quality Gate' },
+      { name: 'DEPLOYMENT', label: '04 / OUTPUT', desc: 'Master Release' },
+    ];
+
+    const pipeY = cy;
+    const startX = cx - 450;
+    const totalW = 900;
+    const segW = totalW / (stages.length - 1);
+
+    ctx.save();
+    const pScale = Math.min(1, Math.max(0, pipeSpring));
+    ctx.translate(cx, cy);
+    ctx.scale(pScale, pScale);
+    ctx.translate(-cx, -cy);
+
+    // Main Conduit Pipeline Track
+    const conduitG = ctx.createLinearGradient(startX, 0, startX + totalW, 0);
+    conduitG.addColorStop(0, ACCENT);
+    conduitG.addColorStop(0.5, '#38bdf8');
+    conduitG.addColorStop(1, '#10b981');
+
+    ctx.strokeStyle = IS_LIGHT ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.15)';
+    ctx.lineWidth = 14;
+    ctx.lineCap = 'round';
+    ctx.beginPath();
+    ctx.moveTo(startX, pipeY);
+    ctx.lineTo(startX + totalW, pipeY);
+    ctx.stroke();
+
+    ctx.strokeStyle = conduitG;
+    ctx.lineWidth = 6;
+    ctx.stroke();
+
+    // Flowing Data Packet Orbs along the conduit
+    for (let pk = 0; pk < 5; pk++) {
+      const pkProgress = ((t * 0.45 + pk * 0.22) % 1.0);
+      const pkX = startX + pkProgress * totalW;
+      ctx.fillStyle = '#ffffff';
+      ctx.beginPath();
+      ctx.arc(pkX, pipeY, 6, 0, Math.PI * 2);
+      ctx.fill();
+
+      ctx.fillStyle = ACCENT;
+      ctx.globalAlpha = 0.4;
+      ctx.beginPath();
+      ctx.arc(pkX, pipeY, 14, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.globalAlpha = 1.0;
+    }
+
+    // Stage Nodes & Info Cards
+    for (let s = 0; s < stages.length; s++) {
+      const st = stages[s];
+      const nodeX = startX + s * segW;
+      const nodeSpring = spring(t, 0.15 + s * 0.16, 180, 14);
+      const nodeAlpha = Math.min(1, Math.max(0, nodeSpring));
+
+      const activeStage = Math.min(stages.length - 1, Math.floor((t / window.DURATION) * stages.length));
+      const isActive = s === activeStage;
+
+      ctx.save();
+      ctx.globalAlpha = nodeAlpha;
+      ctx.translate(nodeX, pipeY);
+
+      const isTop = s % 2 === 0;
+      const cardOffsetY = isTop ? -180 : 70;
+      const cardW = 190;
+      const cardH = 95;
+
+      sLine(0, 0, 0, isTop ? -50 : 50, 500 + s, isActive ? ACCENT : STROKE_ALT, 2.5);
+
+      ctx.fillStyle = CARD_BG;
+      ctx.strokeStyle = isActive ? ACCENT : CARD_BORDER;
+      ctx.lineWidth = isActive ? 3 : 1.5;
+      ctx.beginPath();
+      ctx.roundRect(-cardW / 2, cardOffsetY, cardW, cardH, 14);
+      ctx.fill();
+      ctx.stroke();
+
+      if (isActive) {
+        ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.roundRect(-cardW / 2 + 4, cardOffsetY + 4, cardW - 8, cardH - 8, 10);
+        ctx.stroke();
+      }
+
+      ctx.textAlign = 'center';
+      ctx.font = 'bold 12px ' + FONT_DISPLAY;
+      ctx.fillStyle = isActive ? ACCENT : '#94a3b8';
+      ctx.fillText(st.label, 0, cardOffsetY + 26);
+
+      ctx.font = '800 16px ' + FONT_DISPLAY;
+      ctx.fillStyle = TEXT_MAIN;
+      ctx.fillText(st.name, 0, cardOffsetY + 52);
+
+      ctx.font = '500 13px ' + FONT_BODY;
+      ctx.fillStyle = TEXT_MUTED;
+      ctx.fillText(st.desc, 0, cardOffsetY + 76);
+
+      const nodeR = isActive ? 22 : 16;
+      ctx.fillStyle = IS_LIGHT ? '#ffffff' : '#0f172a';
+      ctx.beginPath();
+      ctx.arc(0, 0, nodeR, 0, Math.PI * 2);
+      ctx.fill();
+
+      ctx.strokeStyle = isActive ? ACCENT : '#64748b';
+      ctx.lineWidth = isActive ? 4 : 3;
+      ctx.beginPath();
+      ctx.arc(0, 0, nodeR, 0, Math.PI * 2);
+      ctx.stroke();
+
+      sCircle(0, 0, isActive ? 8 : 5, 520 + s, isActive ? '#ffffff' : '#94a3b8', 2, isActive ? ACCENT : '#64748b');
+
+      ctx.restore();
+    }
+
+    ctx.restore();
+
+  } else if (COMP_THEME === 'cognitive_insight') {
+    // Universal Archetype: Cognitive Psychology, Neural Eureka, Theory of Mind & Idea Spark
+    const brainSpring = spring(t, 0.05, 170, 14);
+    const eurekaSpring = spring(t, window.DURATION * 0.35, 160, 12);
+    const orbitSpring = spring(t, 0.40, 180, 15);
+
+    ctx.save();
+    const cScale = Math.min(1, Math.max(0, brainSpring));
+    ctx.translate(cx, cy);
+    ctx.scale(cScale, cScale);
+
+    // Concentric Thought Wave Ripples
+    for (let r = 0; r < 4; r++) {
+      const ripPhase = (t * 0.8 + r * 0.25) % 1.0;
+      const ripR = 90 + ripPhase * 240;
+      ctx.strokeStyle = ACCENT;
+      ctx.globalAlpha = Math.max(0, (1 - ripPhase) * 0.35);
+      ctx.lineWidth = 2.5;
+      ctx.beginPath();
+      ctx.arc(0, 0, ripR, 0, Math.PI * 2);
+      ctx.stroke();
+    }
+    ctx.globalAlpha = 1.0;
+
+    // Cerebral Neural Core / Brain Silhouette
+    const brainR = 120;
+    const coreGrad = ctx.createRadialGradient(0, -20, 20, 0, 0, brainR * 1.5);
+    coreGrad.addColorStop(0, '#fef08a');
+    coreGrad.addColorStop(0.3, ACCENT);
+    coreGrad.addColorStop(0.8, '#6366f1');
+    coreGrad.addColorStop(1, 'rgba(15, 23, 42, 0)');
+
+    ctx.fillStyle = coreGrad;
+    ctx.beginPath();
+    ctx.arc(0, 0, brainR * 1.4, 0, Math.PI * 2);
+    ctx.fill();
+
+    // Neural Synapses
+    const synNodes = [
+      { x: -50, y: -60 }, { x: 0, y: -80 }, { x: 50, y: -60 },
+      { x: -80, y: -20 }, { x: -30, y: -20 }, { x: 30, y: -20 }, { x: 80, y: -20 },
+      { x: -60, y: 30 }, { x: 0, y: 25 }, { x: 60, y: 30 },
+      { x: -25, y: 70 }, { x: 25, y: 70 },
+    ];
+
+    ctx.strokeStyle = 'rgba(255, 255, 255, 0.35)';
+    ctx.lineWidth = 2;
+    for (let i = 0; i < synNodes.length; i++) {
+      for (let j = i + 1; j < synNodes.length; j++) {
+        const dx = synNodes[i].x - synNodes[j].x;
+        const dy = synNodes[i].y - synNodes[j].y;
+        const dist = Math.hypot(dx, dy);
+        if (dist < 75) {
+          ctx.beginPath();
+          ctx.moveTo(synNodes[i].x, synNodes[i].y);
+          ctx.lineTo(synNodes[j].x, synNodes[j].y);
+          ctx.stroke();
+
+          const pulse = (t * 2.5 + i * 0.3 + j * 0.2) % 1.0;
+          const px = synNodes[i].x + (synNodes[j].x - synNodes[i].x) * pulse;
+          const py = synNodes[i].y + (synNodes[j].y - synNodes[i].y) * pulse;
+          ctx.fillStyle = '#ffffff';
+          ctx.beginPath();
+          ctx.arc(px, py, 2.5, 0, Math.PI * 2);
+          ctx.fill();
+        }
+      }
+    }
+
+    for (let n = 0; n < synNodes.length; n++) {
+      const sn = synNodes[n];
+      const fire = Math.sin(t * 8 + n * 1.3);
+      const dotR = 5 + (fire > 0.5 ? 2.5 : 0);
+      sCircle(sn.x, sn.y, dotR, 600 + n, '#ffffff', 2, fire > 0.3 ? '#fef08a' : ACCENT);
+    }
+
+    // Eureka Idea Spark Burst
+    if (eurekaSpring > 0.05) {
+      const eProgress = Math.min(1, Math.max(0, eurekaSpring));
+      ctx.save();
+      ctx.scale(eProgress, eProgress);
+
+      const rays = 12;
+      for (let ry = 0; ry < rays; ry++) {
+        const ang = (ry * Math.PI * 2) / rays + t * 0.4;
+        const len = 140 + Math.sin(t * 6 + ry) * 25;
+        ctx.strokeStyle = ry % 2 === 0 ? '#fef08a' : '#ffffff';
+        ctx.lineWidth = ry % 2 === 0 ? 3 : 1.5;
+        ctx.beginPath();
+        ctx.moveTo(Math.cos(ang) * 50, Math.sin(ang) * 50);
+        ctx.lineTo(Math.cos(ang) * len, Math.sin(ang) * len);
+        ctx.stroke();
+      }
+
+      sCircle(0, 0, 18, 650, '#ffffff', 3, '#f59e0b');
+      sCircle(0, 0, 8, 651, '#ffffff', 2, '#ffffff');
+      ctx.restore();
+    }
+
+    // Orbiting Insight Badges
+    if (orbitSpring > 0.05) {
+      const badges = ['PERCEPTION', 'COGNITION', 'INTUITION', 'INSIGHT'];
+      ctx.save();
+      ctx.globalAlpha = Math.min(1, Math.max(0, orbitSpring));
+
+      for (let bg = 0; bg < badges.length; bg++) {
+        const bgAngle = (bg * Math.PI * 2) / badges.length + t * 0.35;
+        const bgX = Math.cos(bgAngle) * 310;
+        const bgY = Math.sin(bgAngle) * 190;
+
+        ctx.fillStyle = CARD_BG;
+        ctx.strokeStyle = CARD_BORDER;
+        ctx.lineWidth = 1.5;
+        ctx.beginPath();
+        ctx.roundRect(bgX - 65, bgY - 18, 130, 36, 18);
+        ctx.fill();
+        ctx.stroke();
+
+        ctx.font = 'bold 13px ' + FONT_DISPLAY;
+        ctx.fillStyle = TEXT_MAIN;
+        ctx.textAlign = 'center';
+        ctx.fillText(badges[bg], bgX, bgY + 5);
+
+        ctx.strokeStyle = 'rgba(255, 255, 255, 0.12)';
+        ctx.beginPath();
+        ctx.moveTo(0, 0);
+        ctx.lineTo(bgX, bgY);
+        ctx.stroke();
+      }
+      ctx.restore();
+    }
+
+    ctx.restore();
+
+  } else if (COMP_THEME === 'magnification_focus') {
+    // Universal Archetype: Optical Loupe, Precision Macro Zoom & Scrutiny Reticle
+    const focusSpring = spring(t, 0.05, 170, 14);
+    const loupeSpring = spring(t, 0.25, 180, 14);
+
+    // Deep research background grid & underlying specimen traces
+    ctx.save();
+    ctx.strokeStyle = IS_LIGHT ? 'rgba(0,0,0,0.06)' : 'rgba(255,255,255,0.08)';
+    ctx.lineWidth = 1;
+    for (let gx = 0; gx < W; gx += 40) {
+      ctx.beginPath(); ctx.moveTo(gx, 0); ctx.lineTo(gx, H); ctx.stroke();
+    }
+    for (let gy = 0; gy < H; gy += 40) {
+      ctx.beginPath(); ctx.moveTo(0, gy); ctx.lineTo(W, gy); ctx.stroke();
+    }
+
+    for (let tr = 0; tr < 16; tr++) {
+      const trX = cx - 350 + tr * 48;
+      const trY = cy - 200 + ((tr * 73) % 400);
+      sLine(trX, trY, trX + 80, trY + 40, 700 + tr, IS_LIGHT ? 'rgba(0,0,0,0.15)' : 'rgba(56, 189, 248, 0.2)', 2);
+    }
+    ctx.restore();
+
+    // Floating Optical Loupe (Lissajous gentle inspection movement)
+    const loupeR = Math.min(W, H) * 0.26;
+    const lissX = cx + Math.sin(t * 1.1) * 70;
+    const lissY = cy + Math.cos(t * 0.85) * 45;
+
+    ctx.save();
+    const lScale = Math.min(1, Math.max(0, loupeSpring));
+    ctx.translate(lissX, lissY);
+    ctx.scale(lScale, lScale);
+
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.45)';
+    ctx.beginPath();
+    ctx.arc(15, 20, loupeR, 0, Math.PI * 2);
+    ctx.fill();
+
+    // Inside Magnified Specimen (Clipped Circle)
+    ctx.save();
+    ctx.beginPath();
+    ctx.arc(0, 0, loupeR - 8, 0, Math.PI * 2);
+    ctx.clip();
+
+    ctx.fillStyle = IS_LIGHT ? '#ffffff' : '#070f1e';
+    ctx.fillRect(-loupeR, -loupeR, loupeR * 2, loupeR * 2);
+
+    ctx.save();
+    ctx.scale(2.4, 2.4);
+    for (let m = -8; m <= 8; m++) {
+      sLine(m * 22, -loupeR, m * 22, loupeR, 720 + m, 'rgba(56, 189, 248, 0.3)', 1.5);
+      sLine(-loupeR, m * 22, loupeR, m * 22, 740 + m, 'rgba(56, 189, 248, 0.3)', 1.5);
+    }
+    sCircle(0, 0, 36, 760, '#f59e0b', 3, 'rgba(245, 158, 11, 0.2)');
+    sCircle(0, 0, 16, 761, '#ef4444', 2.5, '#ef4444');
+    for (let br = 0; br < 6; br++) {
+      const brA = (br * Math.PI * 2) / 6 + t * 0.5;
+      sLine(0, 0, Math.cos(brA) * 55, Math.sin(brA) * 55, 770 + br, ACCENT, 2.5);
+      sCircle(Math.cos(brA) * 55, Math.sin(brA) * 55, 5, 780 + br, '#ffffff', 1.5, ACCENT);
+    }
+    ctx.restore();
+
+    // Precision Crosshairs & Calibrated Reticle
+    ctx.strokeStyle = '#38bdf8';
+    ctx.lineWidth = 1.5;
+    ctx.beginPath();
+    ctx.moveTo(-loupeR + 15, 0); ctx.lineTo(-25, 0);
+    ctx.moveTo(25, 0); ctx.lineTo(loupeR - 15, 0);
+    ctx.moveTo(0, -loupeR + 15); ctx.lineTo(0, -25);
+    ctx.moveTo(0, 25); ctx.lineTo(0, loupeR - 15);
+    ctx.stroke();
+
+    for (let deg = 0; deg < 36; deg++) {
+      const dRad = (deg * Math.PI * 2) / 36;
+      const isMajor = deg % 9 === 0;
+      const tLen = isMajor ? 16 : 8;
+      const rOut = loupeR - 12;
+      const rIn = rOut - tLen;
+      ctx.strokeStyle = isMajor ? ACCENT : 'rgba(255,255,255,0.4)';
+      ctx.lineWidth = isMajor ? 2 : 1;
+      ctx.beginPath();
+      ctx.moveTo(Math.cos(dRad) * rIn, Math.sin(dRad) * rIn);
+      ctx.lineTo(Math.cos(dRad) * rOut, Math.sin(dRad) * rOut);
+      ctx.stroke();
+    }
+    ctx.restore(); // End clipping
+
+    // Bezel
+    ctx.strokeStyle = '#d4af37';
+    ctx.lineWidth = 14;
+    ctx.beginPath();
+    ctx.arc(0, 0, loupeR, 0, Math.PI * 2);
+    ctx.stroke();
+
+    ctx.strokeStyle = '#fef08a';
+    ctx.lineWidth = 2.5;
+    ctx.beginPath();
+    ctx.arc(0, 0, loupeR - 6, 0, Math.PI * 2);
+    ctx.stroke();
+
+    ctx.strokeStyle = 'rgba(255, 255, 255, 0.4)';
+    ctx.lineWidth = 4;
+    ctx.beginPath();
+    ctx.arc(0, 0, loupeR - 24, -1.8, -0.6);
+    ctx.stroke();
+
+    ctx.fillStyle = CARD_BG;
+    ctx.strokeStyle = ACCENT;
+    ctx.lineWidth = 1.5;
+    ctx.beginPath();
+    ctx.roundRect(loupeR - 40, -loupeR - 10, 160, 48, 10);
+    ctx.fill();
+    ctx.stroke();
+
+    ctx.font = 'bold 12px monospace';
+    ctx.fillStyle = ACCENT;
+    ctx.fillText('MAGNIFY: 250%', loupeR - 26, -loupeR + 12);
+    ctx.fillStyle = TEXT_MAIN;
+    ctx.fillText('POS: ' + Math.round(lissX) + ', ' + Math.round(lissY), loupeR - 26, -loupeR + 28);
+
+    ctx.restore();
+
+  } else if (COMP_THEME === 'waveform') {
     // Kinetic Frequency Equalizer Waveform
     const bars = 36;
     const barW = (W * 0.7) / bars;
@@ -2979,6 +4047,153 @@ function drawMainScene(t) {
       ctx.fillStyle = barGrad;
       ctx.beginPath(); ctx.roundRect(bx, by, barW - 6, hVal, 4); ctx.fill();
     }
+
+  } else {
+    // Universal Semantic Default & Explainer Presentation (Whiteboard Masterclass & Concept Pillars)
+    const boardSpring = spring(t, 0.05, 170, 14);
+    const p1Spring = spring(t, 0.18, 190, 15);
+    const p2Spring = spring(t, 0.32, 190, 15);
+    const p3Spring = spring(t, 0.46, 190, 15);
+
+    const boardW = Math.min(W * 0.88, 1100);
+    const boardH = Math.min(H * 0.68, 620);
+    const boardX = cx - boardW / 2;
+    const boardY = cy - boardH / 2;
+
+    ctx.save();
+    const bScale = Math.min(1, Math.max(0, boardSpring));
+    ctx.translate(cx, cy);
+    ctx.scale(bScale, bScale);
+    ctx.translate(-cx, -cy);
+
+    // Architectural Frosted Glass Presentation Board
+    ctx.fillStyle = CARD_BG;
+    ctx.strokeStyle = CARD_BORDER;
+    ctx.lineWidth = 2.5;
+    ctx.beginPath();
+    ctx.roundRect(boardX, boardY, boardW, boardH, 24);
+    ctx.fill();
+    ctx.stroke();
+
+    // Board Header Accent Bar
+    ctx.fillStyle = ACCENT;
+    ctx.beginPath();
+    ctx.roundRect(boardX + 32, boardY + 28, 6, 32, 3);
+    ctx.fill();
+
+    ctx.font = '800 22px ' + FONT_DISPLAY;
+    ctx.fillStyle = TEXT_MAIN;
+    ctx.textAlign = 'left';
+    ctx.fillText('CORE PRINCIPLES & ARCHITECTURE', boardX + 48, boardY + 50);
+
+    // Live Status Badge
+    ctx.fillStyle = 'rgba(16, 185, 129, 0.15)';
+    ctx.beginPath();
+    ctx.roundRect(boardX + boardW - 160, boardY + 28, 128, 30, 15);
+    ctx.fill();
+    ctx.fillStyle = '#10b981';
+    ctx.font = 'bold 13px ' + FONT_DISPLAY;
+    ctx.fillText('● SYSTEM ACTIVE', boardX + boardW - 146, boardY + 48);
+
+    // 3 Structured Concept Pillars
+    const pillarData = [
+      { num: '01', title: 'FOUNDATION', desc: 'Core axioms & structure', icon: 'diamond', spr: p1Spring },
+      { num: '02', title: 'DYNAMICS', desc: 'Kinetic transformation', icon: 'gear', spr: p2Spring },
+      { num: '03', title: 'IMPACT', desc: 'Synthesized outcome', icon: 'star', spr: p3Spring },
+    ];
+
+    const pillarW = (boardW - 128) / 3;
+    const pillarH = boardH - 140;
+    const pillarY = boardY + 95;
+
+    for (let p = 0; p < 3; p++) {
+      const pd = pillarData[p];
+      const pilX = boardX + 32 + p * (pillarW + 32);
+      const pAlpha = Math.min(1, Math.max(0, pd.spr));
+
+      ctx.save();
+      ctx.globalAlpha = pAlpha;
+      ctx.translate(pilX, pillarY + (1 - pd.spr) * 40);
+
+      // Pillar Card
+      ctx.fillStyle = IS_LIGHT ? 'rgba(255,255,255,0.7)' : 'rgba(255,255,255,0.04)';
+      ctx.strokeStyle = p === 1 ? ACCENT : 'rgba(255,255,255,0.1)';
+      ctx.lineWidth = p === 1 ? 2.5 : 1.5;
+      ctx.beginPath();
+      ctx.roundRect(0, 0, pillarW, pillarH, 16);
+      ctx.fill();
+      ctx.stroke();
+
+      // Number Tag
+      ctx.font = '900 48px ' + FONT_DISPLAY;
+      ctx.fillStyle = p === 1 ? ACCENT : (IS_LIGHT ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.12)');
+      ctx.fillText(pd.num, 24, 60);
+
+      // Pillar Title
+      ctx.font = '700 20px ' + FONT_DISPLAY;
+      ctx.fillStyle = TEXT_MAIN;
+      ctx.fillText(pd.title, 24, 110);
+
+      // Pillar Description
+      ctx.font = '500 15px ' + FONT_BODY;
+      ctx.fillStyle = TEXT_MUTED;
+      ctx.fillText(pd.desc, 24, 138);
+
+      // Dynamic Animated Diagram Graphic inside Pillar
+      const gfxY = pillarH * 0.65;
+      const gfxX = pillarW / 2;
+
+      if (pd.icon === 'diamond') {
+        ctx.save();
+        ctx.translate(gfxX, gfxY);
+        ctx.rotate(t * 1.2);
+        ctx.strokeStyle = ACCENT;
+        ctx.lineWidth = 3;
+        ctx.strokeRect(-28, -28, 56, 56);
+        sCircle(0, 0, 10, 800, '#ffffff', 2, ACCENT);
+        ctx.restore();
+      } else if (pd.icon === 'gear') {
+        sCircle(gfxX, gfxY, 36, 810, ACCENT, 3);
+        const pulseR = 20 + Math.sin(t * 5) * 8;
+        sCircle(gfxX, gfxY, pulseR, 811, '#ffffff', 2, '#38bdf8');
+      } else {
+        for (let st = 0; st < 4; st++) {
+          const ang = (st * Math.PI) / 2 + t * 0.8;
+          sLine(gfxX, gfxY, gfxX + Math.cos(ang) * 36, gfxY + Math.sin(ang) * 36, 820 + st, '#f59e0b', 3);
+        }
+        sCircle(gfxX, gfxY, 8, 825, '#ffffff', 2, '#f59e0b');
+      }
+
+      // Feature Check items
+      for (let ch = 0; ch < 3; ch++) {
+        const itemY = pillarH - 85 + ch * 24;
+        sCircle(28, itemY, 4, 830 + ch, ACCENT, 2, ACCENT);
+        ctx.fillStyle = TEXT_MAIN;
+        ctx.font = '500 13px ' + FONT_BODY;
+        ctx.fillText('Verification Key 0' + (ch + 1), 42, itemY + 4);
+      }
+
+      ctx.restore();
+    }
+
+    // Inter-Pillar Energy Connectors
+    ctx.strokeStyle = ACCENT;
+    ctx.lineWidth = 2.5;
+    for (let c = 0; c < 2; c++) {
+      const connX1 = boardX + 32 + (c + 1) * pillarW + c * 32 - 16;
+      const connX2 = connX1 + 32;
+      const connY = pillarY + 80;
+      sLine(connX1, connY, connX2, connY, 850 + c, ACCENT, 3);
+      ctx.fillStyle = ACCENT;
+      ctx.beginPath();
+      ctx.moveTo(connX2 + 4, connY);
+      ctx.lineTo(connX2 - 4, connY - 5);
+      ctx.lineTo(connX2 - 4, connY + 5);
+      ctx.closePath();
+      ctx.fill();
+    }
+
+    ctx.restore();
   }
 
   ctx.restore();