{ "$mulmocast": { "version": "1.1" }, "lang": "en", "canvasSize": { "width": 1280, "height": 720 }, "title": "Cinematic Animation Patterns Showcase", "description": "A showcase of all 14 cinematic animation themes available in MulmoCast", "speechParams": { "speakers": { "Presenter": { "voiceId": "shimmer" } } }, "audioParams": { "bgm": { "kind": "url", "url": "https://github.com/receptron/mulmocast-media/raw/refs/heads/main/bgms/story002.mp3" }, "bgmVolume": 0.12 }, "slideParams": { "theme": { "colors": { "accent": "8B5CF6", "bg": "0F172A", "bgCard": "1E293B", "bgCardAlt": "334155", "danger": "EF4444", "highlight": "EC4899", "info": "14B8A6", "primary": "3B82F6", "success": "22C55E", "text": "F8FAFC", "textDim": "64748B", "textMuted": "CBD5E1", "warning": "F59E0B" }, "fonts": { "body": "Calibri", "mono": "Consolas", "title": "Georgia" } } }, "beats": [ { "text": "Welcome to the Cinematic Animation Patterns Showcase. Fourteen unique visual themes, each inspired by iconic film and anime aesthetics.", "speaker": "Presenter", "duration": 5, "image": { "type": "html_tailwind", "html": [ "
", "
CINEMATIC PATTERNS
", "
14 THEMES SHOWCASE
", "
", "
" ], "script": [ "const animation = new MulmoAnimation();", "animation.animate('#title', { opacity: [0, 1], scale: [1.2, 1] }, { start: 0.3, end: 1.5, easing: 'easeOut' });", "animation.animate('#sub', { opacity: [0, 1] }, { start: 1.5, end: 2.2 });", "animation.animate('#line', { opacity: [0, 0.6], width: [0, 500, 'px'] }, { start: 2.0, end: 3.0, easing: 'easeOut' });" ], "animation": true } }, { "text": "Theme one. Space Opera — inspired by Star Wars.", "speaker": "Presenter", "duration": 3, "image": { "type": "html_tailwind", "html": [ "
", "
SPACE OPERA
", "
" ], "script": [ "const animation = new MulmoAnimation();", "animation.animate('#t', { opacity: [0, 1], scale: [2.0, 1] }, { start: 0.3, end: 1.5, easing: 'easeOut' });" ], "animation": true } }, { "text": "A long time ago in a galaxy far, far away. The classic opening crawl, fading in from the darkness.", "speaker": "Presenter", "duration": 6, "image": { "type": "html_tailwind", "html": [ "
", "
A long time ago in a galaxy
far, far away....
", "
" ], "script": [ "const animation = new MulmoAnimation();", "animation.animate('#text', { opacity: [0, 1] }, { start: 0.5, end: 1.8 });", "animation.animate('#text', { opacity: [1, 0] }, { start: 4.0, end: 5.2 });" ], "animation": true } }, { "text": "The opening crawl. Text flows upward through a three-D perspective transform, disappearing into the stars.", "speaker": "Presenter", "duration": 8, "image": { "type": "html_tailwind", "html": [ "
", "
", "
", "

EPISODE I

", "

THE CINEMATIC SHOWCASE

", "

In a universe of visual storytelling, fourteen cinematic themes have emerged to transform ordinary presentations into extraordinary experiences.

", "

Each theme carries the essence of an iconic film genre, bringing its signature colors, typography, and motion to the canvas.

", "

The journey begins here, in a galaxy of animation possibilities far beyond ordinary slides...

", "
", "
", "
", "
", "
" ], "script": [ "var sf = document.getElementById('starfield');", "for (var i = 0; i < 120; i++) { var d = document.createElement('div'); var sz = (Math.sin(i*127.1)*0.5+0.5)*2+0.5; var tx = (Math.sin(i*311.7)*0.5+0.5)*100; var ty = (Math.sin(i*73.3)*0.5+0.5)*100; var op = (Math.sin(i*43.1)*0.5+0.5)*0.5+0.1; d.style.cssText='position:absolute;border-radius:50%;background:white;width:'+sz+'px;height:'+sz+'px;top:'+ty+'%;left:'+tx+'%;opacity:'+op; sf.insertBefore(d,sf.firstChild); }", "const animation = new MulmoAnimation();", "animation.animate('#crawl', { rotateX: [25, 25], translateY: [720, -1100] }, { start: 0, end: 'auto' });" ], "animation": true } }, { "text": "Lightsaber-style reveal for feature content. A glowing bar expands, followed by data appearing line by line.", "speaker": "Presenter", "duration": 5, "image": { "type": "html_tailwind", "html": [ "
", "
", "
", "
FEATURE
", "
", "
Star Wars Style
", "
", " 
",
          "    |",
          "  
",
          "
"
        ],
        "script": [
          "var codeLines = ['Opening crawl with rotateX perspective', 'Procedural starfield (120 stars)', 'Lightsaber glow reveal animation', 'Yellow/gold text on pure black'];",
          "const animation = new MulmoAnimation();",
          "animation.animate('#saber', { opacity: [0, 1], width: [0, 60, 'px'] }, { start: 0, end: 0.5, easing: 'easeOut' });",
          "animation.animate('#label', { opacity: [0, 1] }, { start: 0.3, end: 0.6 });",
          "animation.animate('#heading', { opacity: [0, 1], translateX: [-20, 0] }, { start: 0.5, end: 1.0, easing: 'easeOut' });",
          "animation.codeReveal('#code', codeLines, { start: 1.2, end: 4.0 });",
          "animation.blink('#cursor', { interval: 0.35 });"
        ],
        "animation": true
      }
    },
    {
      "text": "Theme two. Cyberpunk Terminal — inspired by Ghost in the Shell.",
      "speaker": "Presenter",
      "duration": 3,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "  
",
          "    
CYBERPUNK
",
          "  
",
          "
"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.animate('#t', { opacity: [0, 1], scale: [1.05, 1] }, { start: 0.3, end: 1.0, easing: 'easeOut' });"
        ],
        "animation": true
      }
    },
    {
      "text": "Terminal boot sequence. System lines appear one by one with a green scanline sweeping across the screen.",
      "speaker": "Presenter",
      "duration": 3,
      "image": {
        "type": "html_tailwind",
        "html": [
          "",
          "
",
          "  
",
          "  
",
          "  
",
          "    
[SYS] Initializing neural network...
",
          "    
[SYS] Loading kernel v2.4...
",
          "    
[SYS] AI providers: 4 nodes detected
",
          "    
[SYS] Establishing secure channels...
",
          "    
CONNECTION ESTABLISHED
",
          "  
",
          "
"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.animate('#scanline', { translateY: [0, 720] }, { start: 0, end: 2.0 });",
          "animation.stagger('#l{i}', 4, { opacity: [0, 1] }, { start: 0.3, stagger: 0.35, duration: 0.15 });",
          "animation.animate('#done', { opacity: [0, 1] }, { start: 2.0, end: 2.3 });"
        ],
        "animation": true
      }
    },
    {
      "text": "Glitch title with chromatic aberration. Triple-layered text creates the iconic digital artifact effect.",
      "speaker": "Presenter",
      "duration": 4,
      "image": {
        "type": "html_tailwind",
        "html": [
          "",
          "
",
          "  
",
          "  
",
          "    
",
          "      
GHOST
",
          "      
GHOST
",
          "      
GHOST
",
          "    
",
          "    
",
          "    
IN THE SHELL
",
          "  
",
          "
"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.animate('#g1', { opacity: [0, 0.4] }, { start: 0.2, end: 0.5 });",
          "animation.animate('#g2', { opacity: [0, 0.3] }, { start: 0.3, end: 0.6 });",
          "animation.animate('#title', { opacity: [0, 1], scale: [1.05, 1] }, { start: 0.3, end: 0.8, easing: 'easeOut' });",
          "animation.animate('#line', { opacity: [0, 1], width: [0, 500, 'px'] }, { start: 1.0, end: 1.8, easing: 'easeOut' });",
          "animation.animate('#sub', { opacity: [0, 1] }, { start: 1.5, end: 2.0 });"
        ],
        "animation": true
      }
    },
    {
      "text": "Theme three. Mecha Anime — inspired by Evangelion.",
      "speaker": "Presenter",
      "duration": 3,
      "image": {
        "type": "html_tailwind",
        "html": [
          "",
          "
",
          "  
",
          "  
",
          "    
MECHA ANIME
",
          "  
",
          "  
",
          "
"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.animate('#topLine', { opacity: [0, 1] }, { start: 0, end: 0.15 });",
          "animation.animate('#bottomLine', { opacity: [0, 1] }, { start: 0, end: 0.15 });",
          "animation.animate('#t', { opacity: [0, 1] }, { start: 0.2, end: 0.8 });"
        ],
        "animation": true
      }
    },
    {
      "text": "Red warning screen with Japanese text. The classic Evangelion alert aesthetic, blinking indicators framed by red bars.",
      "speaker": "Presenter",
      "duration": 3,
      "image": {
        "type": "html_tailwind",
        "html": [
          "",
          "
",
          "  
",
          "  
",
          "    
WARNING
",
          "    
警 告
",
          "    
",
          "  
",
          "  
",
          "
"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.animate('#topLine', { opacity: [0, 1] }, { start: 0, end: 0.15 });",
          "animation.animate('#bottomLine', { opacity: [0, 1] }, { start: 0, end: 0.15 });",
          "animation.animate('#warning', { opacity: [0, 1] }, { start: 0.2, end: 0.5 });",
          "animation.animate('#jp', { opacity: [0, 1] }, { start: 0.6, end: 0.9 });",
          "animation.blink('#ind', { interval: 0.3 });"
        ],
        "animation": true
      }
    },
    {
      "text": "Dramatic typewriter with expanding red underline. Text appears character by character, building tension.",
      "speaker": "Presenter",
      "duration": 4,
      "image": {
        "type": "html_tailwind",
        "html": [
          "",
          "
",
          "  
",
          "  
",
          "
"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.typewriter('#text', '逃げちゃダメだ。', { start: 0.3, end: 2.5 });",
          "animation.animate('#underline', { opacity: [0, 1], width: [0, 500, 'px'] }, { start: 2.5, end: 3.3, easing: 'easeOut' });"
        ],
        "animation": true
      }
    },
    {
      "text": "Theme four. Film Noir — the classic detective genre.",
      "speaker": "Presenter",
      "duration": 3,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "  
",
          "    
FILM NOIR
",
          "  
",
          "
"
        ],
        "script": ["const animation = new MulmoAnimation();", "animation.animate('#t', { opacity: [0, 1] }, { start: 0.5, end: 1.5 });"],
        "animation": true
      }
    },
    {
      "text": "Venetian blind shadows cast across the frame. Gold ornamental lines frame the title card, evoking 1940s detective films.",
      "speaker": "Presenter",
      "duration": 5,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "  
",
          "    
",
          "    
THE CASE
",
          "    
A Story of Shadows and Light
",
          "    
",
          "  
",
          "
"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.animate('#line', { opacity: [0, 0.6], width: [0, 400, 'px'] }, { start: 0.5, end: 1.5, easing: 'easeOut' });",
          "animation.animate('#title', { opacity: [0, 1] }, { start: 1.0, end: 2.0 });",
          "animation.animate('#sub', { opacity: [0, 0.7] }, { start: 2.0, end: 3.0 });",
          "animation.animate('#line2', { opacity: [0, 0.6], width: [0, 400, 'px'] }, { start: 2.5, end: 3.5, easing: 'easeOut' });"
        ],
        "animation": true
      }
    },
    {
      "text": "An italic closing quote, fading in with the elegant restraint of classic cinema.",
      "speaker": "Presenter",
      "duration": 5,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "  
",
          "    
\"In this city, every shadow tells a story.\"
",
          "    
— The Narrator
",
          "  
",
          "
"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.animate('#quote', { opacity: [0, 1] }, { start: 0.5, end: 2.0 });",
          "animation.animate('#author', { opacity: [0, 0.7] }, { start: 2.5, end: 3.5 });"
        ],
        "animation": true
      }
    },
    {
      "text": "Theme five. Retro Synthwave — the neon-soaked 1980s.",
      "speaker": "Presenter",
      "duration": 3,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "    
SYNTHWAVE
",
          "  
",
          "
"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.animate('#t', { opacity: [0, 1], scale: [1.5, 1] }, { start: 0.3, end: 1.2, easing: 'easeOut' });"
        ],
        "animation": true
      }
    },
    {
      "text": "Neon title over the classic outrun grid. Hot pink and cyan glow against the purple gradient.",
      "speaker": "Presenter",
      "duration": 4,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "    
",
          "  
",
          "  
",
          "    
OUTRUN
",
          "    
DRIVE INTO THE SUNSET
",
          "  
",
          "
"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.animate('#title', { opacity: [0, 1], scale: [1.5, 1] }, { start: 0.3, end: 1.5, easing: 'easeOut' });",
          "animation.animate('#sub', { opacity: [0, 1] }, { start: 1.5, end: 2.2 });"
        ],
        "animation": true
      }
    },
    {
      "text": "Neon stat cards with animated counters on the retro grid background.",
      "speaker": "Presenter",
      "duration": 4,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "    
STATISTICS
",
          "    
",
          "      
",
          "        
THEMES
",
          "        
",
          "      
",
          "      
",
          "        
PATTERNS
",
          "        
",
          "      
",
          "      
",
          "        
BGMs
",
          "        
",
          "      
",
          "    
",
          "  
",
          "
"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.animate('#label', { opacity: [0, 1] }, { start: 0, end: 0.3 });",
          "animation.stagger('#c{i}', 3, { opacity: [0, 1], translateY: [20, 0] }, { start: 0.3, stagger: 0.3, duration: 0.3, easing: 'easeOut' });",
          "animation.counter('#n0', [0, 14], { start: 0.5, end: 2.5, decimals: 0 });",
          "animation.counter('#n1', [0, 42], { start: 0.8, end: 2.5, decimals: 0 });",
          "animation.counter('#n2', [0, 60], { start: 1.1, end: 2.5, decimals: 0 });"
        ],
        "animation": true
      }
    },
    {
      "text": "Theme six. Matrix — digital rain and the choice between reality and illusion.",
      "speaker": "Presenter",
      "duration": 3,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
THE MATRIX
",
          "
"
        ],
        "script": ["const animation = new MulmoAnimation();", "animation.animate('#t', { opacity: [0, 1] }, { start: 0.3, end: 1.0 });"],
        "animation": true
      }
    },
    {
      "text": "Digital rain. Katakana characters and digits cascade down the screen in the iconic green-on-black.",
      "speaker": "Presenter",
      "duration": 5,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "  
",
          "    
Wake up, Neo...
",
          "    
THE MATRIX
",
          "  
",
          "
"
        ],
        "script": [
          "var rain = document.getElementById('rain');",
          "var chars = 'アイウエオカキクケコサシスセソ0123456789';",
          "for (var i = 0; i < 40; i++) { var col = document.createElement('div'); col.style.cssText = 'position:absolute;top:-100%;left:'+(i*2.5)+'%;font-size:14px;line-height:1.4;color:#00ff00;opacity:'+(Math.sin(i*71.3)*0.3+0.3); var t = ''; for (var j = 0; j < 30; j++) { t += chars[Math.floor(Math.abs(Math.sin(i*127+j*311))*chars.length)] + '
'; } col.innerHTML = t; col.id = 'col'+i; rain.appendChild(col); }",
          "const animation = new MulmoAnimation();",
          "for (var k = 0; k < 40; k++) { var spd = (Math.sin(k*43.7)*0.5+0.5)*0.8+0.3; animation.animate('#col'+k, { translateY: [0, 1500] }, { start: spd*0.5, end: 'auto' }); }",
          "animation.animate('#prompt', { opacity: [0, 1] }, { start: 0.5, end: 1.0 });",
          "animation.animate('#title', { opacity: [0, 1] }, { start: 1.5, end: 2.5 });"
        ],
        "animation": true
      }
    },
    {
      "text": "Red pill or blue pill. Two panels present a choice, each tinted with its signature color.",
      "speaker": "Presenter",
      "duration": 5,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "    
RED PILL
",
          "    
The Truth
",
          "    
See how deep the rabbit hole goes
",
          "  
",
          "  
OR
",
          "  
",
          "    
BLUE PILL
",
          "    
The Illusion
",
          "    
Wake up believing whatever you want
",
          "  
",
          "
"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.animate('#left', { opacity: [0, 1], translateX: [-30, 0] }, { start: 0.3, end: 1.0, easing: 'easeOut' });",
          "animation.animate('#vs', { opacity: [0, 1] }, { start: 1.2, end: 1.5 });",
          "animation.animate('#right', { opacity: [0, 1], translateX: [30, 0] }, { start: 1.5, end: 2.2, easing: 'easeOut' });"
        ],
        "animation": true
      }
    },
    {
      "text": "Theme seven. Documentary — elegant, educational, contemplative.",
      "speaker": "Presenter",
      "duration": 3,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
DOCUMENTARY
",
          "
"
        ],
        "script": ["const animation = new MulmoAnimation();", "animation.animate('#t', { opacity: [0, 1] }, { start: 0.5, end: 1.5 });"],
        "animation": true
      }
    },
    {
      "text": "Minimal chapter opening with thin serif typography on warm parchment.",
      "speaker": "Presenter",
      "duration": 4,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
CHAPTER ONE
",
          "  
",
          "  
The Beginning
",
          "  
",
          "
"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.animate('#ch', { opacity: [0, 1] }, { start: 0.3, end: 0.8 });",
          "animation.animate('#line1', { opacity: [0, 0.5], width: [0, 300, 'px'] }, { start: 0.5, end: 1.3, easing: 'easeOut' });",
          "animation.animate('#title', { opacity: [0, 1] }, { start: 1.0, end: 1.8 });",
          "animation.animate('#line2', { opacity: [0, 0.5], width: [0, 300, 'px'] }, { start: 1.5, end: 2.3, easing: 'easeOut' });"
        ],
        "animation": true
      }
    },
    {
      "text": "A large counter reveals a key statistic, clean and impactful against the light background.",
      "speaker": "Presenter",
      "duration": 4,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "    
KEY FINDING
",
          "    
",
          "      
",
          "      
percent
",
          "    
",
          "    
",
          "    
Of presentations become more engaging with cinematic animation.
",
          "  
",
          "
"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.animate('#label', { opacity: [0, 1] }, { start: 0, end: 0.4 });",
          "animation.counter('#number', [0, 73], { start: 0.3, end: 2.0, decimals: 0 });",
          "animation.animate('#unit', { opacity: [0, 1] }, { start: 1.5, end: 2.0 });",
          "animation.animate('#divider', { opacity: [0, 0.3], width: [0, 500, 'px'] }, { start: 1.5, end: 2.5, easing: 'easeOut' });",
          "animation.animate('#desc', { opacity: [0, 1] }, { start: 2.0, end: 2.8 });"
        ],
        "animation": true
      }
    },
    {
      "text": "Theme eight. Anime Opening — bold, dynamic, energetic.",
      "speaker": "Presenter",
      "duration": 3,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "    
",
          "  
",
          "  
",
          "    
ANIME OPENING
",
          "  
",
          "
"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.animate('#t', { opacity: [0, 1], scale: [1.3, 1] }, { start: 0.2, end: 0.8, easing: 'easeOut' });"
        ],
        "animation": true
      }
    },
    {
      "text": "Episode title card with speed lines radiating from the center. Red accent bar expands beneath the title.",
      "speaker": "Presenter",
      "duration": 3,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "    
",
          "  
",
          "  
",
          "    
EPISODE 01
",
          "    
始まりの章
",
          "    
",
          "  
",
          "
"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.animate('#ep', { opacity: [0, 1] }, { start: 0, end: 0.3 });",
          "animation.animate('#title', { opacity: [0, 1], scale: [1.3, 1] }, { start: 0.2, end: 0.8, easing: 'easeOut' });",
          "animation.animate('#bar', { opacity: [0, 1], width: [0, 400, 'px'] }, { start: 0.8, end: 1.3, easing: 'easeOut' });"
        ],
        "animation": true
      }
    },
    {
      "text": "Character reveal with sidebar accent and sliding tag label.",
      "speaker": "Presenter",
      "duration": 4,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  ",
          "  
",
          "    
CHARACTER
",
          "    
MulmoCast
",
          "    
AI-native multi-modal presentation platform that transforms content into cinematic experiences.
",
          "  
",
          "
"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.animate('#sidebar', { opacity: [0, 1] }, { start: 0, end: 0.15 });",
          "animation.animate('#tag', { opacity: [0, 1], translateX: [-20, 0] }, { start: 0.2, end: 0.5, easing: 'easeOut' });",
          "animation.animate('#name', { opacity: [0, 1], translateX: [-15, 0] }, { start: 0.4, end: 0.8, easing: 'easeOut' });",
          "animation.animate('#desc', { opacity: [0, 1] }, { start: 0.8, end: 1.3 });"
        ],
        "animation": true
      }
    },
    {
      "text": "Theme nine. Horror — dark, unsettling, creeping dread.",
      "speaker": "Presenter",
      "duration": 3,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "  
",
          "    
HORROR
",
          "  
",
          "
"
        ],
        "script": ["const animation = new MulmoAnimation();", "animation.animate('#t', { opacity: [0, 1] }, { start: 1.0, end: 2.5 });"],
        "animation": true
      }
    },
    {
      "text": "Ominous countdown with blood-red numbers ticking downward. A blinking warning appears as time runs out.",
      "speaker": "Presenter",
      "duration": 5,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "  
",
          "    
TIME REMAINING
",
          "    
",
          "    
POINT OF NO RETURN
",
          "  
",
          "
"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.animate('#label', { opacity: [0, 1] }, { start: 0, end: 0.5 });",
          "animation.counter('#timer', [60, 0], { start: 0.3, end: 4.0, decimals: 0 });",
          "animation.animate('#warn', { opacity: [0, 1] }, { start: 3.5, end: 4.0 });",
          "animation.blink('#warn', { interval: 0.3 });"
        ],
        "animation": true
      }
    },
    {
      "text": "Slow typewriter reveals hidden text, as if uncovering a terrible secret letter by letter.",
      "speaker": "Presenter",
      "duration": 5,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "  
",
          "    
",
          "  
",
          "
"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.typewriter('#text', 'The truth was hiding in plain sight all along.', { start: 0.5, end: 4.0 });"
        ],
        "animation": true
      }
    },
    {
      "text": "Theme ten. Terminator T-800 Vision — the machine's-eye view.",
      "speaker": "Presenter",
      "duration": 3,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "  
",
          "  
",
          "  
",
          "    
TERMINATOR T-800
",
          "  
",
          "
"
        ],
        "script": [
          "var city=document.getElementById('city');[[3,6,55],[9,4,80],[14,8,45],[23,5,92],[29,10,35],[40,6,72],[48,4,55],[53,7,88],[62,5,48],[69,8,65],[79,4,78],[85,6,40],[92,5,70]].forEach(function(b,i){var d=document.createElement('div');d.style.cssText='position:absolute;bottom:0;left:'+b[0]+'%;width:'+b[1]+'%;height:'+b[2]+'%;background:#'+(i%2?'0a':'0d')+'0000;border-top:1px solid rgba(255,0,0,0.08)';city.appendChild(d);for(var w=0;w<4;w++){var l=document.createElement('div');l.style.cssText='position:absolute;bottom:'+((0.1+Math.abs(Math.sin((i*7+w*13)*17.3))*0.6)*b[2])+'%;left:'+(b[0]+Math.abs(Math.sin((i*11+w*23)*31.7))*b[1]*0.6+b[1]*0.2)+'%;width:3px;height:2px;background:rgba(255,50,50,'+(0.12+Math.abs(Math.sin(i+w))*0.15)+')';city.appendChild(l);}});",
          "const animation = new MulmoAnimation();",
          "animation.animate('#title', { opacity: [0, 1] }, { start: 0.5, end: 1.5 });"
        ],
        "animation": true
      }
    },
    {
      "text": "Target acquired. The reticle expands, distance counter ticks down, threat level rises.",
      "speaker": "Presenter",
      "duration": 5,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "  
",
          "  
",
          "  
",
          "  
",
          "    
",
          "    
",
          "    
",
          "    
",
          "  
",
          "  
",
          "    
CYBERDYNE SYSTEMS MODEL 101
",
          "    
SCAN MODE: ACTIVE
",
          "  
",
          "  
",
          "    
DIST: m
",
          "  
",
          "  
",
          "    
THREAT: %
",
          "  
",
          "  
",
          "    
TARGET ACQUIRED
",
          "    
MATCH: %
",
          "  
",
          "
"
        ],
        "script": [
          "var city=document.getElementById('city');[[3,6,55],[9,4,80],[14,8,45],[23,5,92],[29,10,35],[40,6,72],[48,4,55],[53,7,88],[62,5,48],[69,8,65],[79,4,78],[85,6,40],[92,5,70]].forEach(function(b,i){var d=document.createElement('div');d.style.cssText='position:absolute;bottom:0;left:'+b[0]+'%;width:'+b[1]+'%;height:'+b[2]+'%;background:#'+(i%2?'0a':'0d')+'0000;border-top:1px solid rgba(255,0,0,0.08)';city.appendChild(d);for(var w=0;w<4;w++){var l=document.createElement('div');l.style.cssText='position:absolute;bottom:'+((0.1+Math.abs(Math.sin((i*7+w*13)*17.3))*0.6)*b[2])+'%;left:'+(b[0]+Math.abs(Math.sin((i*11+w*23)*31.7))*b[1]*0.6+b[1]*0.2)+'%;width:3px;height:2px;background:rgba(255,50,50,'+(0.12+Math.abs(Math.sin(i+w))*0.15)+')';city.appendChild(l);}});",
          "const animation = new MulmoAnimation();",
          "animation.animate('#scanline', { opacity: [0, 0.2], translateY: [0, 720] }, { start: 0, end: 2.0 });",
          "animation.animate('#bracket', { opacity: [0, 1], width: [320, 160, 'px'], height: [260, 130, 'px'] }, { start: 0.5, end: 1.8, easing: 'easeOut' });",
          "animation.animate('#sys', { opacity: [0, 1] }, { start: 0.2, end: 0.4 });",
          "animation.animate('#mode', { opacity: [0, 1] }, { start: 0.5, end: 0.7 });",
          "animation.blink('#mode', { interval: 0.8 });",
          "animation.animate('#dist', { opacity: [0, 1] }, { start: 1.0, end: 1.2 });",
          "animation.counter('#distVal', [250, 12], { start: 1.0, end: 3.5, decimals: 1 });",
          "animation.animate('#threat', { opacity: [0, 1] }, { start: 1.2, end: 1.4 });",
          "animation.counter('#threatVal', [0, 97], { start: 1.2, end: 3.0, decimals: 0 });",
          "animation.animate('#target', { opacity: [0, 1] }, { start: 2.0, end: 2.3 });",
          "animation.animate('#id', { opacity: [0, 1] }, { start: 2.5, end: 2.8 });",
          "animation.counter('#matchVal', [0, 99.7], { start: 2.5, end: 3.5, decimals: 1 });"
        ],
        "animation": true
      }
    },
    {
      "text": "Tactical analysis H-U-D. Progress bars fill while status lines cascade in from the side.",
      "speaker": "Presenter",
      "duration": 5,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "  
",
          "  
",
          "  
",
          "    
",
          "    
",
          "    
",
          "    
",
          "    
",
          "  
",
          "  
",
          "    
SUBJECT ANALYSIS
",
          "  
",
          "  
",
          "    
",
          "      
WEAPON SCANHANDGUN
",
          "      
",
          "    
",
          "    
",
          "      
BEHAVIORHOSTILE
",
          "      
",
          "    
",
          "    
▸ ACTION: TERMINATE
",
          "  
",
          "
"
        ],
        "script": [
          "var city=document.getElementById('city');[[3,6,55],[9,4,80],[14,8,45],[23,5,92],[29,10,35],[40,6,72],[48,4,55],[53,7,88],[62,5,48],[69,8,65],[79,4,78],[85,6,40],[92,5,70]].forEach(function(b,i){var d=document.createElement('div');d.style.cssText='position:absolute;bottom:0;left:'+b[0]+'%;width:'+b[1]+'%;height:'+b[2]+'%;background:#'+(i%2?'0a':'0d')+'0000;border-top:1px solid rgba(255,0,0,0.08)';city.appendChild(d);for(var w=0;w<4;w++){var l=document.createElement('div');l.style.cssText='position:absolute;bottom:'+((0.1+Math.abs(Math.sin((i*7+w*13)*17.3))*0.6)*b[2])+'%;left:'+(b[0]+Math.abs(Math.sin((i*11+w*23)*31.7))*b[1]*0.6+b[1]*0.2)+'%;width:3px;height:2px;background:rgba(255,50,50,'+(0.12+Math.abs(Math.sin(i+w))*0.15)+')';city.appendChild(l);}});",
          "var fg=document.getElementById('faceGrid');for(var i=0;i<15;i++){var dot=document.createElement('div');dot.style.cssText='position:absolute;width:3px;height:3px;border-radius:50%;background:#ff0000;opacity:0;left:'+(Math.abs(Math.sin(i*37.7))*80+10)+'%;top:'+(Math.abs(Math.sin(i*53.1))*80+10)+'%';dot.id='dot'+i;fg.appendChild(dot);}",
          "const animation = new MulmoAnimation();",
          "animation.animate('#silhouette', { opacity: [0, 1] }, { start: 0, end: 0.5 });",
          "animation.stagger('#dot{i}', 15, { opacity: [0, 0.8] }, { start: 0.3, stagger: 0.06, duration: 0.1 });",
          "animation.animate('#header', { opacity: [0, 1] }, { start: 0, end: 0.3 });",
          "animation.stagger('#r{i}', 2, { opacity: [0, 1] }, { start: 0.8, stagger: 0.4, duration: 0.25 });",
          "animation.animate('#bar0', { width: [0, 92, '%'] }, { start: 1.0, end: 2.5, easing: 'easeOut' });",
          "animation.animate('#bar1', { width: [0, 88, '%'] }, { start: 1.4, end: 2.5, easing: 'easeOut' });",
          "animation.animate('#action', { opacity: [0, 1] }, { start: 3.5, end: 3.8 });",
          "animation.blink('#action', { interval: 0.4 });"
        ],
        "animation": true
      }
    },
    {
      "text": "Theme eleven. Dragon Ball Scouter — power levels rising!",
      "speaker": "Presenter",
      "duration": 3,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "    
",
          "  
",
          "  
",
          "    
DRAGON BALL SCOUTER
",
          "  
",
          "
"
        ],
        "script": ["const animation = new MulmoAnimation();", "animation.animate('#title', { opacity: [0, 1] }, { start: 0.5, end: 1.5 });"],
        "animation": true
      }
    },
    {
      "text": "Power level scan. The scouter rings expand as the counter races past nine thousand.",
      "speaker": "Presenter",
      "duration": 5,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "    
",
          "  
",
          "  
",
          "    
",
          "    
",
          "    
",
          "    
",
          "  
",
          "  
",
          "  
",
          "    
SCOUTER v3.0 — ACTIVE
",
          "  
",
          "  
",
          "    
SCANNING...
",
          "  
",
          "  
",
          "    
戦 闘 力
",
          "    
",
          "    
!!! OVER 9000 !!!
",
          "  
",
          "
"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.animate('#warrior', { opacity: [0, 1] }, { start: 0, end: 0.8 });",
          "animation.animate('#lens', { opacity: [0, 0.6], width: [0, 550, 'px'], height: [0, 550, 'px'] }, { start: 0.2, end: 1.5, easing: 'easeOut' });",
          "animation.animate('#ring2', { opacity: [0, 0.2], width: [0, 400, 'px'], height: [0, 400, 'px'] }, { start: 0.5, end: 1.5, easing: 'easeOut' });",
          "animation.animate('#scouter', { opacity: [0, 1] }, { start: 0.2, end: 0.4 });",
          "animation.animate('#scanLabel', { opacity: [0, 1] }, { start: 0.3, end: 0.5 });",
          "animation.blink('#scanLabel', { interval: 0.3 });",
          "animation.animate('#label', { opacity: [0, 1] }, { start: 0.8, end: 1.1 });",
          "animation.counter('#power', [0, 9001], { start: 1.0, end: 3.5, decimals: 0 });",
          "animation.animate('#alert', { opacity: [0, 1] }, { start: 3.5, end: 3.8 });",
          "animation.blink('#alert', { interval: 0.25 });"
        ],
        "animation": true
      }
    },
    {
      "text": "Multi-target grid. Three targets scanned simultaneously, with the third triggering a danger alert.",
      "speaker": "Presenter",
      "duration": 5,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "    
",
          "  
",
          "  
",
          "    
",
          "  
",
          "  
",
          "    
",
          "  
",
          "  
MULTI-TARGET SCAN
",
          "  
",
          "    
TARGET A
",
          "    
",
          "  
",
          "  
",
          "    
TARGET B
",
          "    
",
          "  
",
          "  
",
          "    
TARGET C
",
          "    
",
          "    
⚠ DANGER
",
          "  
",
          "
"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.animate('#header', { opacity: [0, 1] }, { start: 0, end: 0.3 });",
          "animation.stagger('#t{i}', 3, { opacity: [0, 1], translateY: [10, 0] }, { start: 0.3, stagger: 0.4, duration: 0.3, easing: 'easeOut' });",
          "animation.counter('#p0', [0, 1200], { start: 0.5, end: 2.5, decimals: 0 });",
          "animation.counter('#p1', [0, 4500], { start: 0.9, end: 2.5, decimals: 0 });",
          "animation.counter('#p2', [0, 53000], { start: 1.3, end: 3.0, decimals: 0 });",
          "animation.blink('#danger', { interval: 0.3 });"
        ],
        "animation": true
      }
    },
    {
      "text": "Theme twelve. Blade Runner — rain-soaked neon melancholy.",
      "speaker": "Presenter",
      "duration": 4,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "  
",
          "  
",
          "  
",
          "  
",
          "  
",
          "    
BLADE RUNNER
",
          "  
",
          "
"
        ],
        "script": [
          "var bg=document.getElementById('bg-layer');[[0,15,30],[18,12,50],[35,10,25],[50,14,55],[68,10,35],[82,15,45],[95,5,30]].forEach(function(b,i){var d=document.createElement('div');d.style.cssText='position:absolute;bottom:0;left:'+b[0]+'%;width:'+b[1]+'%;height:'+b[2]+'%;background:rgba(15,15,30,0.7)';bg.appendChild(d);});",
          "var mid=document.getElementById('mid-layer');var nC=['#ff6a00','#00b4d8','#e76f51','#00b4d8','#ff6a00','#e76f51','#00b4d8'];[[5,8,60],[18,6,75],[30,10,50],[44,7,85],[58,8,65],[72,6,55],[84,8,70],[93,5,45]].forEach(function(b,i){var d=document.createElement('div');d.style.cssText='position:absolute;bottom:0;left:'+b[0]+'%;width:'+b[1]+'%;height:'+b[2]+'%;background:#0a0a14;border-top:1px solid rgba(0,180,216,0.05)';mid.appendChild(d);if(i%2===0){var s=document.createElement('div');var nc=nC[i%7];s.style.cssText='position:absolute;bottom:'+(b[2]*0.35)+'%;left:'+(b[0]+b[1]*0.1)+'%;width:'+(b[1]*0.8)+'%;height:6px;background:'+nc+';box-shadow:0 0 8px '+nc+',0 0 20px '+nc+';opacity:0.35';mid.appendChild(s);}for(var w=0;w<5;w++){var l=document.createElement('div');l.style.cssText='position:absolute;bottom:'+(b[2]*(0.1+Math.abs(Math.sin(i*13+w*7))*0.7))+'%;left:'+(b[0]+b[1]*(0.1+Math.abs(Math.sin(i*17+w*11))*0.7))+'%;width:4px;height:3px;background:rgba(255,200,100,'+(0.06+Math.abs(Math.sin(i*w))*0.08)+')';mid.appendChild(l);}});",
          "var rain=document.getElementById('rain');for(var i=0;i<80;i++){var d=document.createElement('div');var x=(Math.sin(i*311.7)*0.5+0.5)*100;var h=(Math.sin(i*127.1)*0.5+0.5)*35+10;var op=(Math.sin(i*43.1)*0.5+0.5)*0.2+0.05;var colors=['#00b4d8','#ff6a00','#e76f51'];var c=colors[Math.floor(Math.abs(Math.sin(i*73.3))*3)];d.style.cssText='position:absolute;top:-'+h+'px;left:'+x+'%;width:1px;height:'+h+'px;background:linear-gradient(180deg,transparent,'+c+');opacity:'+op;d.id='drop'+i;rain.appendChild(d);}",
          "const animation = new MulmoAnimation();",
          "for(var k=0;k<80;k++){var spd=(Math.sin(k*43.7)*0.5+0.5)*1.5+0.5;animation.animate('#drop'+k,{translateY:[0,800]},{start:spd*0.3,end:'auto'});}",
          "animation.animate('#title', { opacity: [0, 1] }, { start: 0.5, end: 2.0 });"
        ],
        "animation": true
      }
    },
    {
      "text": "Neon rain falls through the dark cityscape. Orange and teal streaks against deep blue-black.",
      "speaker": "Presenter",
      "duration": 6,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "  
",
          "  
",
          "  
",
          "  
",
          "  
",
          "    
NEON RAIN
",
          "    
Like tears in rain
",
          "  
",
          "
"
        ],
        "script": [
          "var bg=document.getElementById('bg-layer');[[0,15,30],[18,12,50],[35,10,25],[50,14,55],[68,10,35],[82,15,45],[95,5,30]].forEach(function(b,i){var d=document.createElement('div');d.style.cssText='position:absolute;bottom:0;left:'+b[0]+'%;width:'+b[1]+'%;height:'+b[2]+'%;background:rgba(15,15,30,0.7)';bg.appendChild(d);});",
          "var mid=document.getElementById('mid-layer');var nC=['#ff6a00','#00b4d8','#e76f51','#00b4d8','#ff6a00','#e76f51','#00b4d8'];[[5,8,60],[18,6,75],[30,10,50],[44,7,85],[58,8,65],[72,6,55],[84,8,70],[93,5,45]].forEach(function(b,i){var d=document.createElement('div');d.style.cssText='position:absolute;bottom:0;left:'+b[0]+'%;width:'+b[1]+'%;height:'+b[2]+'%;background:#0a0a14;border-top:1px solid rgba(0,180,216,0.05)';mid.appendChild(d);if(i%2===0){var s=document.createElement('div');var nc=nC[i%7];s.style.cssText='position:absolute;bottom:'+(b[2]*0.35)+'%;left:'+(b[0]+b[1]*0.1)+'%;width:'+(b[1]*0.8)+'%;height:6px;background:'+nc+';box-shadow:0 0 8px '+nc+',0 0 20px '+nc+';opacity:0.35';mid.appendChild(s);}for(var w=0;w<5;w++){var l=document.createElement('div');l.style.cssText='position:absolute;bottom:'+(b[2]*(0.1+Math.abs(Math.sin(i*13+w*7))*0.7))+'%;left:'+(b[0]+b[1]*(0.1+Math.abs(Math.sin(i*17+w*11))*0.7))+'%;width:4px;height:3px;background:rgba(255,200,100,'+(0.06+Math.abs(Math.sin(i*w))*0.08)+')';mid.appendChild(l);}});",
          "var rain=document.getElementById('rain');for(var i=0;i<80;i++){var d=document.createElement('div');var x=(Math.sin(i*311.7)*0.5+0.5)*100;var h=(Math.sin(i*127.1)*0.5+0.5)*35+10;var op=(Math.sin(i*43.1)*0.5+0.5)*0.2+0.05;var colors=['#00b4d8','#ff6a00','#e76f51'];var c=colors[Math.floor(Math.abs(Math.sin(i*73.3))*3)];d.style.cssText='position:absolute;top:-'+h+'px;left:'+x+'%;width:1px;height:'+h+'px;background:linear-gradient(180deg,transparent,'+c+');opacity:'+op;d.id='drop'+i;rain.appendChild(d);}",
          "const animation = new MulmoAnimation();",
          "for(var k=0;k<80;k++){var spd=(Math.sin(k*43.7)*0.5+0.5)*1.5+0.5;animation.animate('#drop'+k,{translateY:[0,800]},{start:spd*0.3,end:'auto'});}",
          "animation.animate('#title', { opacity: [0, 1] }, { start: 1.0, end: 2.5 });",
          "animation.animate('#subtitle', { opacity: [0, 0.7] }, { start: 3.0, end: 4.5 });"
        ],
        "animation": true
      }
    },
    {
      "text": "Voight-Kampff analysis terminal. A question types out, empathy metrics respond.",
      "speaker": "Presenter",
      "duration": 5,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "  
",
          "  
",
          "  
",
          "    
VOIGHT-KAMPFF ANALYSIS v6.2
",
          "    
",
          "      
",
          "      
█
",
          "      
",
          "        
EMPATHY RESPONSE
",
          "        
PUPIL DILATION
",
          "        
BLUSH RESPONSE
",
          "      
",
          "      
RESULT: INCONCLUSIVE
",
          "    
",
          "  
",
          "
"
        ],
        "script": [
          "var bg=document.getElementById('bg-layer');[[0,15,30],[18,12,50],[35,10,25],[50,14,55],[68,10,35],[82,15,45]].forEach(function(b,i){var d=document.createElement('div');d.style.cssText='position:absolute;bottom:0;left:'+b[0]+'%;width:'+b[1]+'%;height:'+b[2]+'%;background:rgba(15,15,30,0.5)';bg.appendChild(d);});",
          "var rain=document.getElementById('rain');for(var i=0;i<30;i++){var d=document.createElement('div');d.style.cssText='position:absolute;top:-'+(Math.abs(Math.sin(i*127))*10+15)+'px;left:'+(Math.sin(i*311.7)*50+50)+'%;width:1px;height:'+(Math.abs(Math.sin(i*127))*10+15)+'px;background:linear-gradient(180deg,transparent,#00b4d8);opacity:'+(Math.abs(Math.sin(i*43))*0.08+0.05);d.id='drop'+i;rain.appendChild(d);}",
          "const animation = new MulmoAnimation();",
          "for(var k=0;k<30;k++){animation.animate('#drop'+k,{translateY:[0,800]},{start:(Math.sin(k*43.7)*0.5+0.5)*1.5,end:'auto'});}",
          "animation.animate('#label', { opacity: [0, 1] }, { start: 0, end: 0.3 });",
          "animation.typewriter('#q', 'Describe in single words only the good things that come into your mind about your mother.', { start: 0.3, end: 2.5 });",
          "animation.blink('#cur', { interval: 0.35 });",
          "animation.stagger('#r{i}', 3, { opacity: [0, 1] }, { start: 2.8, stagger: 0.3, duration: 0.2 });",
          "animation.counter('#e0', [0, 0.73], { start: 3.0, end: 3.8, decimals: 2 });",
          "animation.counter('#e1', [0, 2.4], { start: 3.3, end: 4.0, decimals: 1, suffix: 'mm' });",
          "animation.counter('#e2', [0, 0.12], { start: 3.6, end: 4.2, decimals: 2 });",
          "animation.animate('#result', { opacity: [0, 1] }, { start: 4.3, end: 4.6 });"
        ],
        "animation": true
      }
    },
    {
      "text": "Theme thirteen. Total Recall — is it real, or is it Rekall?",
      "speaker": "Presenter",
      "duration": 3,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "  
",
          "    
TOTAL RECALL
",
          "  
",
          "
"
        ],
        "script": [
          "var mars=document.getElementById('mars');[[8,12],[22,8],[40,15],[65,10],[80,6]].forEach(function(d,i){var dome=document.createElement('div');dome.style.cssText='position:absolute;bottom:0;left:'+d[0]+'%;width:'+d[1]+'%;height:'+(d[1]*0.6)+'%;background:rgba(50,20,10,0.5);border-radius:50% 50% 0 0;border-top:1px solid rgba(255,68,68,0.1)';mars.appendChild(dome);});",
          "const animation = new MulmoAnimation();",
          "animation.animate('#title', { opacity: [0, 1] }, { start: 0.5, end: 1.5 });"
        ],
        "animation": true
      }
    },
    {
      "text": "Rekall memory implant initializing. The progress bar fills as memories are uploaded, with glitch bands flickering across the screen.",
      "speaker": "Presenter",
      "duration": 5,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "  
",
          "    
",
          "    
",
          "    
",
          "  
",
          "  
",
          "  
",
          "  
",
          "    ",
          "    
MEMORY IMPLANT
",
          "    
",
          "      
INITIALIZING...
",
          "      
",
          "    
",
          "  
",
          "
"
        ],
        "script": [
          "var mars=document.getElementById('mars');[[8,12],[22,8],[40,15],[65,10],[80,6]].forEach(function(d,i){var dome=document.createElement('div');dome.style.cssText='position:absolute;bottom:0;left:'+d[0]+'%;width:'+d[1]+'%;height:'+(d[1]*0.6)+'%;background:rgba(50,20,10,0.5);border-radius:50% 50% 0 0;border-top:1px solid rgba(255,68,68,0.1)';mars.appendChild(dome);});",
          "var neurons=document.getElementById('neurons');for(var i=0;i<25;i++){var n=document.createElement('div');n.style.cssText='position:absolute;width:4px;height:4px;border-radius:50%;background:#00ccaa;opacity:0;left:'+(Math.abs(Math.sin(i*41.7))*80+10)+'%;top:'+(Math.abs(Math.sin(i*67.3))*80+10)+'%';n.id='n'+i;neurons.appendChild(n);}",
          "const animation = new MulmoAnimation();",
          "animation.animate('#brain', { opacity: [0, 1] }, { start: 0, end: 0.8 });",
          "animation.stagger('#n{i}', 25, { opacity: [0, 0.6] }, { start: 0.3, stagger: 0.05, duration: 0.1 });",
          "animation.animate('#scanBeam', { opacity: [0, 0.4], translateY: [0, 320] }, { start: 0.2, end: 1.5 });",
          "animation.animate('#logo', { opacity: [0, 1] }, { start: 0.8, end: 1.1 });",
          "animation.animate('#title', { opacity: [0, 1], scale: [1.05, 1] }, { start: 1.0, end: 1.5, easing: 'easeOut' });",
          "animation.animate('#status', { opacity: [0, 1] }, { start: 1.5, end: 1.7 });",
          "animation.counter('#pct', [0, 100], { start: 1.5, end: 3.8, suffix: '%', decimals: 0 });",
          "animation.animate('#bar', { width: [0, 100, '%'] }, { start: 1.5, end: 3.8, easing: 'easeInOut' });",
          "animation.animate('#g1', { opacity: [0, 0.6] }, { start: 2.5, end: 2.6 });",
          "animation.animate('#g1', { opacity: [0.6, 0] }, { start: 2.6, end: 2.8 });"
        ],
        "animation": true
      }
    },
    {
      "text": "Split reality. Real memories on the left, implanted memories on the right. A question mark hangs between them.",
      "speaker": "Presenter",
      "duration": 5,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "  
",
          "  
",
          "    
",
          "      
MEMORY — REAL
",
          "      
Earth
",
          "      
Original memories verified.
",
          "    
",
          "    ",
          "  
",
          "  
?
",
          "  
",
          "
"
        ],
        "script": [
          "var mars=document.getElementById('mars');[[8,12],[22,8],[40,15],[65,10],[80,6]].forEach(function(d,i){var dome=document.createElement('div');dome.style.cssText='position:absolute;bottom:0;left:'+d[0]+'%;width:'+d[1]+'%;height:'+(d[1]*0.6)+'%;background:rgba(50,20,10,0.5);border-radius:50% 50% 0 0;border-top:1px solid rgba(255,68,68,0.1)';mars.appendChild(dome);});",
          "const animation = new MulmoAnimation();",
          "animation.animate('#left', { opacity: [0, 1], translateX: [-20, 0] }, { start: 0.3, end: 1.0, easing: 'easeOut' });",
          "animation.animate('#right', { opacity: [0, 1], translateX: [20, 0] }, { start: 0.8, end: 1.5, easing: 'easeOut' });",
          "animation.animate('#divider', { opacity: [0, 1], scale: [2, 1] }, { start: 1.5, end: 2.0, easing: 'easeOut' });",
          "animation.animate('#g1', { opacity: [0, 0.5] }, { start: 2.5, end: 2.6 });",
          "animation.animate('#g1', { opacity: [0.5, 0] }, { start: 2.6, end: 2.8 });"
        ],
        "animation": true
      }
    },
    {
      "text": "Theme fourteen. Iron Man JARVIS — sleek holographic intelligence.",
      "speaker": "Presenter",
      "duration": 3,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "  
",
          "    
",
          "  
",
          "  
",
          "    
IRON MAN JARVIS
",
          "  
",
          "
"
        ],
        "script": [
          "var grid=document.getElementById('hex-grid');for(var r=0;r<8;r++){for(var c=0;c<14;c++){var h=document.createElement('div');var x=c*100+(r%2)*50-50;var y=r*87-50;h.style.cssText='position:absolute;left:'+x+'px;top:'+y+'px;width:55px;height:55px;border:1px solid rgba(79,195,247,0.04);clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%)';grid.appendChild(h);}}",
          "const animation = new MulmoAnimation();",
          "animation.animate('#title', { opacity: [0, 1] }, { start: 0.5, end: 1.5 });"
        ],
        "animation": true
      }
    },
    {
      "text": "Arc reactor activation. The core ignites, rings expand outward, and JARVIS comes online.",
      "speaker": "Presenter",
      "duration": 5,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "  
",
          "    
",
          "  
",
          "  
",
          "    
",
          "  
",
          "  
",
          "    
",
          "  
",
          "  
",
          "    
",
          "      
SYSTEM STATUS
",
          "      
▸ JARVIS v7.2 — Online
",
          "      
▸ Arc Reactor: 100%
",
          "      
▸ All systems nominal
",
          "    
",
          "    
",
          "      
DIAGNOSTICS
",
          "      
▸ Thrusters: 98%
",
          "      
▸ Weapons: 85%
",
          "      
▸ Shields: Online
",
          "    
",
          "  
",
          "  
",
          "    
Good evening, sir.
",
          "    
JARVIS ONLINE
",
          "  
",
          "
"
        ],
        "script": [
          "var grid=document.getElementById('hex-grid');for(var r=0;r<8;r++){for(var c=0;c<14;c++){var h=document.createElement('div');var x=c*100+(r%2)*50-50;var y=r*87-50;h.style.cssText='position:absolute;left:'+x+'px;top:'+y+'px;width:55px;height:55px;border:1px solid rgba(79,195,247,0.04);clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%)';grid.appendChild(h);}}",
          "const animation = new MulmoAnimation();",
          "animation.animate('#glow', { opacity: [0, 0.4], width: [0, 500, 'px'], height: [0, 500, 'px'] }, { start: 0, end: 1.5, easing: 'easeOut' });",
          "animation.animate('#core', { opacity: [0, 1], width: [0, 12, 'px'], height: [0, 12, 'px'] }, { start: 0, end: 0.5, easing: 'easeOut' });",
          "animation.animate('#ring1', { opacity: [0, 0.2], width: [0, 400, 'px'], height: [0, 400, 'px'] }, { start: 0.4, end: 1.5, easing: 'easeOut' });",
          "animation.animate('#panelL', { opacity: [0, 1], translateX: [-30, 0] }, { start: 0.8, end: 1.3, easing: 'easeOut' });",
          "animation.animate('#panelR', { opacity: [0, 1], translateX: [30, 0] }, { start: 1.0, end: 1.5, easing: 'easeOut' });",
          "animation.stagger('#s{i}', 3, { opacity: [0, 1] }, { start: 1.2, stagger: 0.2, duration: 0.15 });",
          "animation.stagger('#d{i}', 3, { opacity: [0, 1] }, { start: 1.5, stagger: 0.2, duration: 0.15 });",
          "animation.animate('#greeting', { opacity: [0, 1] }, { start: 1.8, end: 2.3 });",
          "animation.animate('#mainTitle', { opacity: [0, 1], scale: [1.1, 1] }, { start: 2.3, end: 3.0, easing: 'easeOut' });"
        ],
        "animation": true
      }
    },
    {
      "text": "Holographic dashboard. Three system panels rise into view with counters and progress bars filling in blue.",
      "speaker": "Presenter",
      "duration": 5,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
",
          "  
",
          "    
",
          "  
",
          "  
",
          "    
",
          "      
ARC REACTOR
",
          "      
",
          "      
",
          "    
",
          "    
",
          "      
THRUSTERS
",
          "      
",
          "      
",
          "    
",
          "    
",
          "      
WEAPONS
",
          "      
",
          "      
",
          "    
",
          "  
",
          "  
\"All systems functioning within normal parameters, sir.\"
",
          "
"
        ],
        "script": [
          "var grid=document.getElementById('hex-grid');for(var r=0;r<8;r++){for(var c=0;c<14;c++){var h=document.createElement('div');var x=c*100+(r%2)*50-50;var y=r*87-50;h.style.cssText='position:absolute;left:'+x+'px;top:'+y+'px;width:55px;height:55px;border:1px solid rgba(79,195,247,0.04);clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%)';grid.appendChild(h);}}",
          "const animation = new MulmoAnimation();",
          "animation.stagger('#p{i}', 3, { opacity: [0, 1], translateY: [15, 0] }, { start: 0.2, stagger: 0.3, duration: 0.3, easing: 'easeOut' });",
          "animation.counter('#n0', [0, 100], { start: 0.4, end: 2.5, suffix: '%', decimals: 0 });",
          "animation.animate('#b0', { width: [0, 100, '%'] }, { start: 0.4, end: 2.5, easing: 'easeOut' });",
          "animation.counter('#n1', [0, 98], { start: 0.7, end: 2.5, suffix: '%', decimals: 0 });",
          "animation.animate('#b1', { width: [0, 98, '%'] }, { start: 0.7, end: 2.5, easing: 'easeOut' });",
          "animation.counter('#n2', [0, 85], { start: 1.0, end: 2.5, suffix: '%', decimals: 0 });",
          "animation.animate('#b2', { width: [0, 85, '%'] }, { start: 1.0, end: 2.5, easing: 'easeOut' });",
          "animation.animate('#ai', { opacity: [0, 1] }, { start: 3.5, end: 4.0 });"
        ],
        "animation": true
      }
    },
    {
      "text": "That's all fourteen cinematic themes. From Star Wars to JARVIS, every pattern is available as a recipe in cinematic patterns dot M-D. Go make something cinematic.",
      "speaker": "Presenter",
      "duration": 5,
      "image": {
        "type": "html_tailwind",
        "html": [
          "
",
          "  
14 THEMES
",
          "  
GO MAKE SOMETHING CINEMATIC
",
          "  
",
          "
"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.animate('#title', { opacity: [0, 1], scale: [1.2, 1] }, { start: 0.3, end: 1.5, easing: 'easeOut' });",
          "animation.animate('#sub', { opacity: [0, 1] }, { start: 1.5, end: 2.2 });",
          "animation.animate('#line', { opacity: [0, 0.6], width: [0, 500, 'px'] }, { start: 2.0, end: 3.0, easing: 'easeOut' });"
        ],
        "animation": true
      }
    }
  ]
}