mulmocast 2.4.3 → 2.4.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,1371 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$mulmocast": {
|
|
3
|
+
"version": "1.1"
|
|
4
|
+
},
|
|
5
|
+
"lang": "en",
|
|
6
|
+
"canvasSize": {
|
|
7
|
+
"width": 1280,
|
|
8
|
+
"height": 720
|
|
9
|
+
},
|
|
10
|
+
"title": "Cinematic Animation Patterns Showcase",
|
|
11
|
+
"description": "A showcase of all 14 cinematic animation themes available in MulmoCast",
|
|
12
|
+
"speechParams": {
|
|
13
|
+
"speakers": {
|
|
14
|
+
"Presenter": {
|
|
15
|
+
"voiceId": "shimmer"
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
"audioParams": {
|
|
20
|
+
"bgm": {
|
|
21
|
+
"kind": "url",
|
|
22
|
+
"url": "https://github.com/receptron/mulmocast-media/raw/refs/heads/main/bgms/story002.mp3"
|
|
23
|
+
},
|
|
24
|
+
"bgmVolume": 0.12
|
|
25
|
+
},
|
|
26
|
+
"slideParams": {
|
|
27
|
+
"theme": {
|
|
28
|
+
"colors": {
|
|
29
|
+
"accent": "8B5CF6",
|
|
30
|
+
"bg": "0F172A",
|
|
31
|
+
"bgCard": "1E293B",
|
|
32
|
+
"bgCardAlt": "334155",
|
|
33
|
+
"danger": "EF4444",
|
|
34
|
+
"highlight": "EC4899",
|
|
35
|
+
"info": "14B8A6",
|
|
36
|
+
"primary": "3B82F6",
|
|
37
|
+
"success": "22C55E",
|
|
38
|
+
"text": "F8FAFC",
|
|
39
|
+
"textDim": "64748B",
|
|
40
|
+
"textMuted": "CBD5E1",
|
|
41
|
+
"warning": "F59E0B"
|
|
42
|
+
},
|
|
43
|
+
"fonts": {
|
|
44
|
+
"body": "Calibri",
|
|
45
|
+
"mono": "Consolas",
|
|
46
|
+
"title": "Georgia"
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
"beats": [
|
|
51
|
+
{
|
|
52
|
+
"text": "Welcome to the Cinematic Animation Patterns Showcase. Fourteen unique visual themes, each inspired by iconic film and anime aesthetics.",
|
|
53
|
+
"speaker": "Presenter",
|
|
54
|
+
"duration": 5,
|
|
55
|
+
"image": {
|
|
56
|
+
"type": "html_tailwind",
|
|
57
|
+
"html": [
|
|
58
|
+
"<div class='h-full w-full bg-black flex flex-col items-center justify-center'>",
|
|
59
|
+
" <div id='title' class='text-5xl font-bold tracking-wider text-center' style='font-family:\"Helvetica Neue\",Arial,sans-serif;color:#4fc3f7;opacity:0;text-shadow:0 0 30px rgba(79,195,247,0.3)'>CINEMATIC PATTERNS</div>",
|
|
60
|
+
" <div id='sub' class='text-xl mt-4 tracking-[0.3em]' style='font-family:monospace;color:#81d4fa;opacity:0'>14 THEMES SHOWCASE</div>",
|
|
61
|
+
" <div id='line' class='mt-6 h-px' style='background:linear-gradient(90deg,transparent,#4fc3f7,transparent);opacity:0;width:0'></div>",
|
|
62
|
+
"</div>"
|
|
63
|
+
],
|
|
64
|
+
"script": [
|
|
65
|
+
"const animation = new MulmoAnimation();",
|
|
66
|
+
"animation.animate('#title', { opacity: [0, 1], scale: [1.2, 1] }, { start: 0.3, end: 1.5, easing: 'easeOut' });",
|
|
67
|
+
"animation.animate('#sub', { opacity: [0, 1] }, { start: 1.5, end: 2.2 });",
|
|
68
|
+
"animation.animate('#line', { opacity: [0, 0.6], width: [0, 500, 'px'] }, { start: 2.0, end: 3.0, easing: 'easeOut' });"
|
|
69
|
+
],
|
|
70
|
+
"animation": true
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"text": "Theme one. Space Opera — inspired by Star Wars.",
|
|
75
|
+
"speaker": "Presenter",
|
|
76
|
+
"duration": 3,
|
|
77
|
+
"image": {
|
|
78
|
+
"type": "html_tailwind",
|
|
79
|
+
"html": [
|
|
80
|
+
"<div class='h-full w-full bg-black flex items-center justify-center'>",
|
|
81
|
+
" <div id='t' class='text-7xl font-bold tracking-wider' style='font-family:Impact,\"Arial Black\",sans-serif;color:#facc15;opacity:0;text-shadow:0 0 40px rgba(250,204,21,0.4)'>SPACE OPERA</div>",
|
|
82
|
+
"</div>"
|
|
83
|
+
],
|
|
84
|
+
"script": [
|
|
85
|
+
"const animation = new MulmoAnimation();",
|
|
86
|
+
"animation.animate('#t', { opacity: [0, 1], scale: [2.0, 1] }, { start: 0.3, end: 1.5, easing: 'easeOut' });"
|
|
87
|
+
],
|
|
88
|
+
"animation": true
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"text": "A long time ago in a galaxy far, far away. The classic opening crawl, fading in from the darkness.",
|
|
93
|
+
"speaker": "Presenter",
|
|
94
|
+
"duration": 6,
|
|
95
|
+
"image": {
|
|
96
|
+
"type": "html_tailwind",
|
|
97
|
+
"html": [
|
|
98
|
+
"<div class='h-full w-full bg-black flex items-center justify-center'>",
|
|
99
|
+
" <div id='text' class='text-2xl tracking-wider text-center leading-relaxed' style='font-family:\"Times New Roman\",Georgia,serif;color:#60a5fa;opacity:0'>A long time ago in a galaxy<br>far, far away....</div>",
|
|
100
|
+
"</div>"
|
|
101
|
+
],
|
|
102
|
+
"script": [
|
|
103
|
+
"const animation = new MulmoAnimation();",
|
|
104
|
+
"animation.animate('#text', { opacity: [0, 1] }, { start: 0.5, end: 1.8 });",
|
|
105
|
+
"animation.animate('#text', { opacity: [1, 0] }, { start: 4.0, end: 5.2 });"
|
|
106
|
+
],
|
|
107
|
+
"animation": true
|
|
108
|
+
}
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
"text": "The opening crawl. Text flows upward through a three-D perspective transform, disappearing into the stars.",
|
|
112
|
+
"speaker": "Presenter",
|
|
113
|
+
"duration": 8,
|
|
114
|
+
"image": {
|
|
115
|
+
"type": "html_tailwind",
|
|
116
|
+
"html": [
|
|
117
|
+
"<div id='starfield' class='h-full w-full bg-black relative overflow-hidden'>",
|
|
118
|
+
" <div class='absolute inset-0 flex justify-center' style='perspective:300px;perspective-origin:50% 0%'>",
|
|
119
|
+
" <div id='crawl' class='absolute text-yellow-400 text-center' style='font-family:\"Times New Roman\",Georgia,serif;width:560px;font-size:21px;line-height:2.2;transform:rotateX(25deg) translateY(720px)'>",
|
|
120
|
+
" <p class='text-2xl font-bold tracking-[0.3em] mb-4'>EPISODE I</p>",
|
|
121
|
+
" <p class='text-2xl font-bold mb-10'>THE CINEMATIC SHOWCASE</p>",
|
|
122
|
+
" <p>In a universe of visual storytelling, fourteen cinematic themes have emerged to transform ordinary presentations into extraordinary experiences.</p>",
|
|
123
|
+
" <p class='mt-8'>Each theme carries the essence of an iconic film genre, bringing its signature colors, typography, and motion to the canvas.</p>",
|
|
124
|
+
" <p class='mt-8'>The journey begins here, in a galaxy of animation possibilities far beyond ordinary slides...</p>",
|
|
125
|
+
" </div>",
|
|
126
|
+
" </div>",
|
|
127
|
+
" <div class='absolute top-0 left-0 right-0 h-40 z-10' style='background:linear-gradient(to bottom, black 20%, transparent 100%)'></div>",
|
|
128
|
+
" <div class='absolute bottom-0 left-0 right-0 h-24 z-10' style='background:linear-gradient(to top, black 0%, transparent 100%)'></div>",
|
|
129
|
+
"</div>"
|
|
130
|
+
],
|
|
131
|
+
"script": [
|
|
132
|
+
"var sf = document.getElementById('starfield');",
|
|
133
|
+
"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); }",
|
|
134
|
+
"const animation = new MulmoAnimation();",
|
|
135
|
+
"animation.animate('#crawl', { rotateX: [25, 25], translateY: [720, -1100] }, { start: 0, end: 'auto' });"
|
|
136
|
+
],
|
|
137
|
+
"animation": true
|
|
138
|
+
}
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
"text": "Lightsaber-style reveal for feature content. A glowing bar expands, followed by data appearing line by line.",
|
|
142
|
+
"speaker": "Presenter",
|
|
143
|
+
"duration": 5,
|
|
144
|
+
"image": {
|
|
145
|
+
"type": "html_tailwind",
|
|
146
|
+
"html": [
|
|
147
|
+
"<div class='h-full w-full bg-black flex flex-col justify-center px-20'>",
|
|
148
|
+
" <div class='flex items-center gap-3 mb-2'>",
|
|
149
|
+
" <div id='saber' class='h-1 rounded-full' style='background:linear-gradient(90deg,#60a5fa,#93c5fd);width:0;opacity:0'></div>",
|
|
150
|
+
" <div id='label' class='text-blue-400 text-xs tracking-[0.3em]' style='font-family:monospace;opacity:0'>FEATURE</div>",
|
|
151
|
+
" </div>",
|
|
152
|
+
" <div id='heading' class='text-yellow-400 text-5xl font-bold mb-8' style='font-family:Impact,sans-serif;opacity:0'>Star Wars Style</div>",
|
|
153
|
+
" <div class='p-6 rounded border' style='border-color:#1e3a5f;background:rgba(0,0,30,0.5)'>",
|
|
154
|
+
" <pre id='code' class='text-blue-300 text-base leading-relaxed' style='font-family:\"Courier New\",Monaco,monospace'></pre>",
|
|
155
|
+
" <span id='cursor' class='text-blue-300' style='font-family:monospace'>|</span>",
|
|
156
|
+
" </div>",
|
|
157
|
+
"</div>"
|
|
158
|
+
],
|
|
159
|
+
"script": [
|
|
160
|
+
"var codeLines = ['Opening crawl with rotateX perspective', 'Procedural starfield (120 stars)', 'Lightsaber glow reveal animation', 'Yellow/gold text on pure black'];",
|
|
161
|
+
"const animation = new MulmoAnimation();",
|
|
162
|
+
"animation.animate('#saber', { opacity: [0, 1], width: [0, 60, 'px'] }, { start: 0, end: 0.5, easing: 'easeOut' });",
|
|
163
|
+
"animation.animate('#label', { opacity: [0, 1] }, { start: 0.3, end: 0.6 });",
|
|
164
|
+
"animation.animate('#heading', { opacity: [0, 1], translateX: [-20, 0] }, { start: 0.5, end: 1.0, easing: 'easeOut' });",
|
|
165
|
+
"animation.codeReveal('#code', codeLines, { start: 1.2, end: 4.0 });",
|
|
166
|
+
"animation.blink('#cursor', { interval: 0.35 });"
|
|
167
|
+
],
|
|
168
|
+
"animation": true
|
|
169
|
+
}
|
|
170
|
+
},
|
|
171
|
+
{
|
|
172
|
+
"text": "Theme two. Cyberpunk Terminal — inspired by Ghost in the Shell.",
|
|
173
|
+
"speaker": "Presenter",
|
|
174
|
+
"duration": 3,
|
|
175
|
+
"image": {
|
|
176
|
+
"type": "html_tailwind",
|
|
177
|
+
"html": [
|
|
178
|
+
"<div class='h-full w-full relative' style='background:#0a0e17'>",
|
|
179
|
+
" <div class='absolute inset-0 pointer-events-none' style='background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,65,0.03) 2px,rgba(0,255,65,0.03) 4px)'></div>",
|
|
180
|
+
" <div class='h-full flex items-center justify-center relative'>",
|
|
181
|
+
" <div id='t' class='text-7xl font-bold tracking-wider' style='font-family:\"Courier New\",Monaco,monospace;color:#00FFFF;opacity:0'>CYBERPUNK</div>",
|
|
182
|
+
" </div>",
|
|
183
|
+
"</div>"
|
|
184
|
+
],
|
|
185
|
+
"script": [
|
|
186
|
+
"const animation = new MulmoAnimation();",
|
|
187
|
+
"animation.animate('#t', { opacity: [0, 1], scale: [1.05, 1] }, { start: 0.3, end: 1.0, easing: 'easeOut' });"
|
|
188
|
+
],
|
|
189
|
+
"animation": true
|
|
190
|
+
}
|
|
191
|
+
},
|
|
192
|
+
{
|
|
193
|
+
"text": "Terminal boot sequence. System lines appear one by one with a green scanline sweeping across the screen.",
|
|
194
|
+
"speaker": "Presenter",
|
|
195
|
+
"duration": 3,
|
|
196
|
+
"image": {
|
|
197
|
+
"type": "html_tailwind",
|
|
198
|
+
"html": [
|
|
199
|
+
"<style>body{font-family:'Courier New','Monaco',monospace}</style>",
|
|
200
|
+
"<div class='h-full w-full relative' style='background:#0a0e17'>",
|
|
201
|
+
" <div id='scanline' class='absolute left-0 w-full h-0.5' style='background:#00FF41;opacity:0.6;top:0'></div>",
|
|
202
|
+
" <div class='absolute inset-0 pointer-events-none' style='background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,65,0.03) 2px,rgba(0,255,65,0.03) 4px)'></div>",
|
|
203
|
+
" <div class='h-full flex flex-col justify-center px-20'>",
|
|
204
|
+
" <div id='l0' class='text-sm mb-2' style='color:#00FF41;opacity:0'>[SYS] Initializing neural network...</div>",
|
|
205
|
+
" <div id='l1' class='text-sm mb-2' style='color:#00FF41;opacity:0'>[SYS] Loading kernel v2.4...</div>",
|
|
206
|
+
" <div id='l2' class='text-sm mb-2' style='color:#00FF41;opacity:0'>[SYS] AI providers: 4 nodes detected</div>",
|
|
207
|
+
" <div id='l3' class='text-sm mb-2' style='color:#00FF41;opacity:0'>[SYS] Establishing secure channels...</div>",
|
|
208
|
+
" <div id='done' class='text-lg font-bold mt-4' style='color:#00FFFF;opacity:0'>CONNECTION ESTABLISHED</div>",
|
|
209
|
+
" </div>",
|
|
210
|
+
"</div>"
|
|
211
|
+
],
|
|
212
|
+
"script": [
|
|
213
|
+
"const animation = new MulmoAnimation();",
|
|
214
|
+
"animation.animate('#scanline', { translateY: [0, 720] }, { start: 0, end: 2.0 });",
|
|
215
|
+
"animation.stagger('#l{i}', 4, { opacity: [0, 1] }, { start: 0.3, stagger: 0.35, duration: 0.15 });",
|
|
216
|
+
"animation.animate('#done', { opacity: [0, 1] }, { start: 2.0, end: 2.3 });"
|
|
217
|
+
],
|
|
218
|
+
"animation": true
|
|
219
|
+
}
|
|
220
|
+
},
|
|
221
|
+
{
|
|
222
|
+
"text": "Glitch title with chromatic aberration. Triple-layered text creates the iconic digital artifact effect.",
|
|
223
|
+
"speaker": "Presenter",
|
|
224
|
+
"duration": 4,
|
|
225
|
+
"image": {
|
|
226
|
+
"type": "html_tailwind",
|
|
227
|
+
"html": [
|
|
228
|
+
"<style>body{font-family:'Courier New','Monaco',monospace}</style>",
|
|
229
|
+
"<div class='h-full w-full relative' style='background:#0a0e17'>",
|
|
230
|
+
" <div class='absolute inset-0 pointer-events-none' style='background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,255,65,0.03) 2px,rgba(0,255,65,0.03) 4px)'></div>",
|
|
231
|
+
" <div class='h-full flex flex-col items-center justify-center'>",
|
|
232
|
+
" <div class='relative'>",
|
|
233
|
+
" <div id='g1' class='absolute text-8xl font-bold tracking-wider' style='color:#00FF41;opacity:0;left:-3px;top:-2px'>GHOST</div>",
|
|
234
|
+
" <div id='g2' class='absolute text-8xl font-bold tracking-wider' style='color:#00FFFF;opacity:0;left:3px;top:2px'>GHOST</div>",
|
|
235
|
+
" <div id='title' class='text-8xl font-bold tracking-wider text-white' style='opacity:0'>GHOST</div>",
|
|
236
|
+
" </div>",
|
|
237
|
+
" <div id='line' class='mt-4 h-px' style='background:#00FFFF;opacity:0;width:0'></div>",
|
|
238
|
+
" <div id='sub' class='mt-6 text-lg tracking-[0.3em]' style='color:#00FF41;opacity:0'>IN THE SHELL</div>",
|
|
239
|
+
" </div>",
|
|
240
|
+
"</div>"
|
|
241
|
+
],
|
|
242
|
+
"script": [
|
|
243
|
+
"const animation = new MulmoAnimation();",
|
|
244
|
+
"animation.animate('#g1', { opacity: [0, 0.4] }, { start: 0.2, end: 0.5 });",
|
|
245
|
+
"animation.animate('#g2', { opacity: [0, 0.3] }, { start: 0.3, end: 0.6 });",
|
|
246
|
+
"animation.animate('#title', { opacity: [0, 1], scale: [1.05, 1] }, { start: 0.3, end: 0.8, easing: 'easeOut' });",
|
|
247
|
+
"animation.animate('#line', { opacity: [0, 1], width: [0, 500, 'px'] }, { start: 1.0, end: 1.8, easing: 'easeOut' });",
|
|
248
|
+
"animation.animate('#sub', { opacity: [0, 1] }, { start: 1.5, end: 2.0 });"
|
|
249
|
+
],
|
|
250
|
+
"animation": true
|
|
251
|
+
}
|
|
252
|
+
},
|
|
253
|
+
{
|
|
254
|
+
"text": "Theme three. Mecha Anime — inspired by Evangelion.",
|
|
255
|
+
"speaker": "Presenter",
|
|
256
|
+
"duration": 3,
|
|
257
|
+
"image": {
|
|
258
|
+
"type": "html_tailwind",
|
|
259
|
+
"html": [
|
|
260
|
+
"<style>body{font-family:'Hiragino Mincho ProN','Yu Mincho',serif}</style>",
|
|
261
|
+
"<div class='h-full w-full bg-black flex flex-col'>",
|
|
262
|
+
" <div id='topLine' class='w-full h-1 bg-red-600' style='opacity:0'></div>",
|
|
263
|
+
" <div class='flex-1 flex items-center justify-center'>",
|
|
264
|
+
" <div id='t' class='font-sans text-red-600 text-7xl font-bold tracking-[0.3em]' style='opacity:0'>MECHA ANIME</div>",
|
|
265
|
+
" </div>",
|
|
266
|
+
" <div id='bottomLine' class='w-full h-1 bg-red-600' style='opacity:0'></div>",
|
|
267
|
+
"</div>"
|
|
268
|
+
],
|
|
269
|
+
"script": [
|
|
270
|
+
"const animation = new MulmoAnimation();",
|
|
271
|
+
"animation.animate('#topLine', { opacity: [0, 1] }, { start: 0, end: 0.15 });",
|
|
272
|
+
"animation.animate('#bottomLine', { opacity: [0, 1] }, { start: 0, end: 0.15 });",
|
|
273
|
+
"animation.animate('#t', { opacity: [0, 1] }, { start: 0.2, end: 0.8 });"
|
|
274
|
+
],
|
|
275
|
+
"animation": true
|
|
276
|
+
}
|
|
277
|
+
},
|
|
278
|
+
{
|
|
279
|
+
"text": "Red warning screen with Japanese text. The classic Evangelion alert aesthetic, blinking indicators framed by red bars.",
|
|
280
|
+
"speaker": "Presenter",
|
|
281
|
+
"duration": 3,
|
|
282
|
+
"image": {
|
|
283
|
+
"type": "html_tailwind",
|
|
284
|
+
"html": [
|
|
285
|
+
"<style>body{font-family:'Hiragino Mincho ProN','Yu Mincho',serif}</style>",
|
|
286
|
+
"<div class='h-full w-full bg-black flex flex-col'>",
|
|
287
|
+
" <div id='topLine' class='w-full h-1 bg-red-600' style='opacity:0'></div>",
|
|
288
|
+
" <div class='flex-1 flex flex-col items-center justify-center'>",
|
|
289
|
+
" <div id='warning' class='font-sans text-red-600 text-8xl font-bold tracking-[0.3em]' style='opacity:0'>WARNING</div>",
|
|
290
|
+
" <div id='jp' class='text-red-500 text-3xl mt-6 tracking-[0.5em]' style='opacity:0'>警 告</div>",
|
|
291
|
+
" <div id='ind' class='mt-8 w-3 h-3 rounded-full bg-red-600'></div>",
|
|
292
|
+
" </div>",
|
|
293
|
+
" <div id='bottomLine' class='w-full h-1 bg-red-600' style='opacity:0'></div>",
|
|
294
|
+
"</div>"
|
|
295
|
+
],
|
|
296
|
+
"script": [
|
|
297
|
+
"const animation = new MulmoAnimation();",
|
|
298
|
+
"animation.animate('#topLine', { opacity: [0, 1] }, { start: 0, end: 0.15 });",
|
|
299
|
+
"animation.animate('#bottomLine', { opacity: [0, 1] }, { start: 0, end: 0.15 });",
|
|
300
|
+
"animation.animate('#warning', { opacity: [0, 1] }, { start: 0.2, end: 0.5 });",
|
|
301
|
+
"animation.animate('#jp', { opacity: [0, 1] }, { start: 0.6, end: 0.9 });",
|
|
302
|
+
"animation.blink('#ind', { interval: 0.3 });"
|
|
303
|
+
],
|
|
304
|
+
"animation": true
|
|
305
|
+
}
|
|
306
|
+
},
|
|
307
|
+
{
|
|
308
|
+
"text": "Dramatic typewriter with expanding red underline. Text appears character by character, building tension.",
|
|
309
|
+
"speaker": "Presenter",
|
|
310
|
+
"duration": 4,
|
|
311
|
+
"image": {
|
|
312
|
+
"type": "html_tailwind",
|
|
313
|
+
"html": [
|
|
314
|
+
"<style>body{font-family:'Hiragino Mincho ProN','Yu Mincho',serif}</style>",
|
|
315
|
+
"<div class='h-full w-full bg-black flex flex-col items-center justify-center'>",
|
|
316
|
+
" <div id='text' class='text-white text-6xl font-bold tracking-wider'></div>",
|
|
317
|
+
" <div id='underline' class='mt-8 h-1 bg-red-600' style='opacity:0;width:0'></div>",
|
|
318
|
+
"</div>"
|
|
319
|
+
],
|
|
320
|
+
"script": [
|
|
321
|
+
"const animation = new MulmoAnimation();",
|
|
322
|
+
"animation.typewriter('#text', '逃げちゃダメだ。', { start: 0.3, end: 2.5 });",
|
|
323
|
+
"animation.animate('#underline', { opacity: [0, 1], width: [0, 500, 'px'] }, { start: 2.5, end: 3.3, easing: 'easeOut' });"
|
|
324
|
+
],
|
|
325
|
+
"animation": true
|
|
326
|
+
}
|
|
327
|
+
},
|
|
328
|
+
{
|
|
329
|
+
"text": "Theme four. Film Noir — the classic detective genre.",
|
|
330
|
+
"speaker": "Presenter",
|
|
331
|
+
"duration": 3,
|
|
332
|
+
"image": {
|
|
333
|
+
"type": "html_tailwind",
|
|
334
|
+
"html": [
|
|
335
|
+
"<div class='h-full w-full relative' style='background:#0c0c0c'>",
|
|
336
|
+
" <div class='absolute inset-0 pointer-events-none' style='background:repeating-linear-gradient(180deg,transparent,transparent 28px,rgba(212,168,87,0.04) 28px,rgba(212,168,87,0.04) 30px);transform:rotate(-5deg) scale(1.2)'></div>",
|
|
337
|
+
" <div class='h-full flex items-center justify-center relative'>",
|
|
338
|
+
" <div id='t' class='text-7xl font-bold tracking-wider' style='font-family:Georgia,serif;color:#d4a857;opacity:0'>FILM NOIR</div>",
|
|
339
|
+
" </div>",
|
|
340
|
+
"</div>"
|
|
341
|
+
],
|
|
342
|
+
"script": [
|
|
343
|
+
"const animation = new MulmoAnimation();",
|
|
344
|
+
"animation.animate('#t', { opacity: [0, 1] }, { start: 0.5, end: 1.5 });"
|
|
345
|
+
],
|
|
346
|
+
"animation": true
|
|
347
|
+
}
|
|
348
|
+
},
|
|
349
|
+
{
|
|
350
|
+
"text": "Venetian blind shadows cast across the frame. Gold ornamental lines frame the title card, evoking 1940s detective films.",
|
|
351
|
+
"speaker": "Presenter",
|
|
352
|
+
"duration": 5,
|
|
353
|
+
"image": {
|
|
354
|
+
"type": "html_tailwind",
|
|
355
|
+
"html": [
|
|
356
|
+
"<div class='h-full w-full relative' style='background:#0c0c0c'>",
|
|
357
|
+
" <div class='absolute inset-0 pointer-events-none' style='background:repeating-linear-gradient(180deg,transparent,transparent 28px,rgba(212,168,87,0.04) 28px,rgba(212,168,87,0.04) 30px);transform:rotate(-5deg) scale(1.2)'></div>",
|
|
358
|
+
" <div class='h-full flex flex-col items-center justify-center relative'>",
|
|
359
|
+
" <div id='line' class='h-px mb-8' style='background:linear-gradient(90deg,transparent,#d4a857,transparent);opacity:0;width:0'></div>",
|
|
360
|
+
" <div id='title' class='text-7xl font-bold tracking-wider text-center' style='font-family:Georgia,serif;color:#d4a857;opacity:0'>THE CASE</div>",
|
|
361
|
+
" <div id='sub' class='text-xl tracking-[0.3em] mt-6 text-center' style='font-family:Georgia,serif;color:#8b8b8b;opacity:0'>A Story of Shadows and Light</div>",
|
|
362
|
+
" <div id='line2' class='h-px mt-8' style='background:linear-gradient(90deg,transparent,#d4a857,transparent);opacity:0;width:0'></div>",
|
|
363
|
+
" </div>",
|
|
364
|
+
"</div>"
|
|
365
|
+
],
|
|
366
|
+
"script": [
|
|
367
|
+
"const animation = new MulmoAnimation();",
|
|
368
|
+
"animation.animate('#line', { opacity: [0, 0.6], width: [0, 400, 'px'] }, { start: 0.5, end: 1.5, easing: 'easeOut' });",
|
|
369
|
+
"animation.animate('#title', { opacity: [0, 1] }, { start: 1.0, end: 2.0 });",
|
|
370
|
+
"animation.animate('#sub', { opacity: [0, 0.7] }, { start: 2.0, end: 3.0 });",
|
|
371
|
+
"animation.animate('#line2', { opacity: [0, 0.6], width: [0, 400, 'px'] }, { start: 2.5, end: 3.5, easing: 'easeOut' });"
|
|
372
|
+
],
|
|
373
|
+
"animation": true
|
|
374
|
+
}
|
|
375
|
+
},
|
|
376
|
+
{
|
|
377
|
+
"text": "An italic closing quote, fading in with the elegant restraint of classic cinema.",
|
|
378
|
+
"speaker": "Presenter",
|
|
379
|
+
"duration": 5,
|
|
380
|
+
"image": {
|
|
381
|
+
"type": "html_tailwind",
|
|
382
|
+
"html": [
|
|
383
|
+
"<div class='h-full w-full relative' style='background:#0c0c0c'>",
|
|
384
|
+
" <div class='absolute inset-0 pointer-events-none' style='background:repeating-linear-gradient(180deg,transparent,transparent 28px,rgba(212,168,87,0.04) 28px,rgba(212,168,87,0.04) 30px);transform:rotate(-5deg) scale(1.2)'></div>",
|
|
385
|
+
" <div class='h-full flex flex-col items-center justify-center relative px-24'>",
|
|
386
|
+
" <div id='quote' class='text-3xl italic leading-relaxed text-center' style='font-family:Georgia,serif;color:#e8d5a3;opacity:0'>\"In this city, every shadow tells a story.\"</div>",
|
|
387
|
+
" <div id='author' class='text-lg mt-6 tracking-wider' style='font-family:\"Courier New\",monospace;color:#d4a857;opacity:0'>— The Narrator</div>",
|
|
388
|
+
" </div>",
|
|
389
|
+
"</div>"
|
|
390
|
+
],
|
|
391
|
+
"script": [
|
|
392
|
+
"const animation = new MulmoAnimation();",
|
|
393
|
+
"animation.animate('#quote', { opacity: [0, 1] }, { start: 0.5, end: 2.0 });",
|
|
394
|
+
"animation.animate('#author', { opacity: [0, 0.7] }, { start: 2.5, end: 3.5 });"
|
|
395
|
+
],
|
|
396
|
+
"animation": true
|
|
397
|
+
}
|
|
398
|
+
},
|
|
399
|
+
{
|
|
400
|
+
"text": "Theme five. Retro Synthwave — the neon-soaked 1980s.",
|
|
401
|
+
"speaker": "Presenter",
|
|
402
|
+
"duration": 3,
|
|
403
|
+
"image": {
|
|
404
|
+
"type": "html_tailwind",
|
|
405
|
+
"html": [
|
|
406
|
+
"<div class='h-full w-full relative' style='background:linear-gradient(180deg,#0a001a 0%,#1a0033 50%,#330044 100%)'>",
|
|
407
|
+
" <div class='h-full flex items-center justify-center relative'>",
|
|
408
|
+
" <div id='t' class='text-7xl font-bold tracking-wider text-center' style='font-family:\"Arial Black\",Impact,sans-serif;color:#ff00ff;opacity:0;text-shadow:0 0 20px #ff00ff,0 0 40px #ff00ff'>SYNTHWAVE</div>",
|
|
409
|
+
" </div>",
|
|
410
|
+
"</div>"
|
|
411
|
+
],
|
|
412
|
+
"script": [
|
|
413
|
+
"const animation = new MulmoAnimation();",
|
|
414
|
+
"animation.animate('#t', { opacity: [0, 1], scale: [1.5, 1] }, { start: 0.3, end: 1.2, easing: 'easeOut' });"
|
|
415
|
+
],
|
|
416
|
+
"animation": true
|
|
417
|
+
}
|
|
418
|
+
},
|
|
419
|
+
{
|
|
420
|
+
"text": "Neon title over the classic outrun grid. Hot pink and cyan glow against the purple gradient.",
|
|
421
|
+
"speaker": "Presenter",
|
|
422
|
+
"duration": 4,
|
|
423
|
+
"image": {
|
|
424
|
+
"type": "html_tailwind",
|
|
425
|
+
"html": [
|
|
426
|
+
"<div class='h-full w-full relative' style='background:linear-gradient(180deg,#0a001a 0%,#1a0033 50%,#330044 100%)'>",
|
|
427
|
+
" <div class='absolute bottom-0 left-0 right-0' style='height:40%;border-top:2px solid rgba(255,0,255,0.5)'>",
|
|
428
|
+
" <div style='width:100%;height:100%;background:repeating-linear-gradient(90deg,transparent,transparent 78px,rgba(255,0,255,0.15) 78px,rgba(255,0,255,0.15) 80px),repeating-linear-gradient(180deg,transparent,transparent 18px,rgba(255,0,255,0.1) 18px,rgba(255,0,255,0.1) 20px)'></div>",
|
|
429
|
+
" </div>",
|
|
430
|
+
" <div class='h-full flex flex-col items-center justify-center relative'>",
|
|
431
|
+
" <div id='title' class='text-8xl font-bold tracking-wider text-center' style='font-family:\"Arial Black\",Impact,sans-serif;color:#ff00ff;opacity:0;text-shadow:0 0 20px #ff00ff,0 0 40px #ff00ff'>OUTRUN</div>",
|
|
432
|
+
" <div id='sub' class='text-xl tracking-[0.4em] mt-6' style='font-family:\"Courier New\",monospace;color:#00ffff;opacity:0;text-shadow:0 0 10px #00ffff'>DRIVE INTO THE SUNSET</div>",
|
|
433
|
+
" </div>",
|
|
434
|
+
"</div>"
|
|
435
|
+
],
|
|
436
|
+
"script": [
|
|
437
|
+
"const animation = new MulmoAnimation();",
|
|
438
|
+
"animation.animate('#title', { opacity: [0, 1], scale: [1.5, 1] }, { start: 0.3, end: 1.5, easing: 'easeOut' });",
|
|
439
|
+
"animation.animate('#sub', { opacity: [0, 1] }, { start: 1.5, end: 2.2 });"
|
|
440
|
+
],
|
|
441
|
+
"animation": true
|
|
442
|
+
}
|
|
443
|
+
},
|
|
444
|
+
{
|
|
445
|
+
"text": "Neon stat cards with animated counters on the retro grid background.",
|
|
446
|
+
"speaker": "Presenter",
|
|
447
|
+
"duration": 4,
|
|
448
|
+
"image": {
|
|
449
|
+
"type": "html_tailwind",
|
|
450
|
+
"html": [
|
|
451
|
+
"<div class='h-full w-full relative' style='background:linear-gradient(180deg,#0a001a 0%,#1a0033 100%)'>",
|
|
452
|
+
" <div class='h-full flex flex-col items-center justify-center relative'>",
|
|
453
|
+
" <div id='label' class='text-sm tracking-[0.5em] mb-8' style='font-family:\"Courier New\",monospace;color:#00ffff;opacity:0'>STATISTICS</div>",
|
|
454
|
+
" <div class='flex gap-6'>",
|
|
455
|
+
" <div id='c0' class='p-6 text-center' style='border:2px solid #ff00ff;background:rgba(255,0,255,0.05);opacity:0;min-width:180px'>",
|
|
456
|
+
" <div class='text-xs tracking-widest mb-2' style='color:#ff00ff;font-family:monospace'>THEMES</div>",
|
|
457
|
+
" <div id='n0' class='text-5xl font-bold' style='color:white;font-family:\"Arial Black\",sans-serif'></div>",
|
|
458
|
+
" </div>",
|
|
459
|
+
" <div id='c1' class='p-6 text-center' style='border:2px solid #00ffff;background:rgba(0,255,255,0.05);opacity:0;min-width:180px'>",
|
|
460
|
+
" <div class='text-xs tracking-widest mb-2' style='color:#00ffff;font-family:monospace'>PATTERNS</div>",
|
|
461
|
+
" <div id='n1' class='text-5xl font-bold' style='color:white;font-family:\"Arial Black\",sans-serif'></div>",
|
|
462
|
+
" </div>",
|
|
463
|
+
" <div id='c2' class='p-6 text-center' style='border:2px solid #ff6600;background:rgba(255,102,0,0.05);opacity:0;min-width:180px'>",
|
|
464
|
+
" <div class='text-xs tracking-widest mb-2' style='color:#ff6600;font-family:monospace'>BGMs</div>",
|
|
465
|
+
" <div id='n2' class='text-5xl font-bold' style='color:white;font-family:\"Arial Black\",sans-serif'></div>",
|
|
466
|
+
" </div>",
|
|
467
|
+
" </div>",
|
|
468
|
+
" </div>",
|
|
469
|
+
"</div>"
|
|
470
|
+
],
|
|
471
|
+
"script": [
|
|
472
|
+
"const animation = new MulmoAnimation();",
|
|
473
|
+
"animation.animate('#label', { opacity: [0, 1] }, { start: 0, end: 0.3 });",
|
|
474
|
+
"animation.stagger('#c{i}', 3, { opacity: [0, 1], translateY: [20, 0] }, { start: 0.3, stagger: 0.3, duration: 0.3, easing: 'easeOut' });",
|
|
475
|
+
"animation.counter('#n0', [0, 14], { start: 0.5, end: 2.5, decimals: 0 });",
|
|
476
|
+
"animation.counter('#n1', [0, 42], { start: 0.8, end: 2.5, decimals: 0 });",
|
|
477
|
+
"animation.counter('#n2', [0, 60], { start: 1.1, end: 2.5, decimals: 0 });"
|
|
478
|
+
],
|
|
479
|
+
"animation": true
|
|
480
|
+
}
|
|
481
|
+
},
|
|
482
|
+
{
|
|
483
|
+
"text": "Theme six. Matrix — digital rain and the choice between reality and illusion.",
|
|
484
|
+
"speaker": "Presenter",
|
|
485
|
+
"duration": 3,
|
|
486
|
+
"image": {
|
|
487
|
+
"type": "html_tailwind",
|
|
488
|
+
"html": [
|
|
489
|
+
"<div class='h-full w-full bg-black flex items-center justify-center'>",
|
|
490
|
+
" <div id='t' class='text-7xl font-bold' style='font-family:\"Courier New\",Monaco,monospace;color:#00ff00;opacity:0'>THE MATRIX</div>",
|
|
491
|
+
"</div>"
|
|
492
|
+
],
|
|
493
|
+
"script": [
|
|
494
|
+
"const animation = new MulmoAnimation();",
|
|
495
|
+
"animation.animate('#t', { opacity: [0, 1] }, { start: 0.3, end: 1.0 });"
|
|
496
|
+
],
|
|
497
|
+
"animation": true
|
|
498
|
+
}
|
|
499
|
+
},
|
|
500
|
+
{
|
|
501
|
+
"text": "Digital rain. Katakana characters and digits cascade down the screen in the iconic green-on-black.",
|
|
502
|
+
"speaker": "Presenter",
|
|
503
|
+
"duration": 5,
|
|
504
|
+
"image": {
|
|
505
|
+
"type": "html_tailwind",
|
|
506
|
+
"html": [
|
|
507
|
+
"<div class='h-full w-full bg-black relative overflow-hidden'>",
|
|
508
|
+
" <div id='rain' class='absolute inset-0'></div>",
|
|
509
|
+
" <div class='h-full flex flex-col items-center justify-center relative'>",
|
|
510
|
+
" <div id='prompt' class='text-xl' style='font-family:\"Courier New\",monospace;color:#00ff00;opacity:0'>Wake up, Neo...</div>",
|
|
511
|
+
" <div id='title' class='text-7xl font-bold mt-8' style='font-family:\"Courier New\",monospace;color:white;opacity:0'>THE MATRIX</div>",
|
|
512
|
+
" </div>",
|
|
513
|
+
"</div>"
|
|
514
|
+
],
|
|
515
|
+
"script": [
|
|
516
|
+
"var rain = document.getElementById('rain');",
|
|
517
|
+
"var chars = 'アイウエオカキクケコサシスセソ0123456789';",
|
|
518
|
+
"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)] + '<br>'; } col.innerHTML = t; col.id = 'col'+i; rain.appendChild(col); }",
|
|
519
|
+
"const animation = new MulmoAnimation();",
|
|
520
|
+
"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' }); }",
|
|
521
|
+
"animation.animate('#prompt', { opacity: [0, 1] }, { start: 0.5, end: 1.0 });",
|
|
522
|
+
"animation.animate('#title', { opacity: [0, 1] }, { start: 1.5, end: 2.5 });"
|
|
523
|
+
],
|
|
524
|
+
"animation": true
|
|
525
|
+
}
|
|
526
|
+
},
|
|
527
|
+
{
|
|
528
|
+
"text": "Red pill or blue pill. Two panels present a choice, each tinted with its signature color.",
|
|
529
|
+
"speaker": "Presenter",
|
|
530
|
+
"duration": 5,
|
|
531
|
+
"image": {
|
|
532
|
+
"type": "html_tailwind",
|
|
533
|
+
"html": [
|
|
534
|
+
"<div class='h-full w-full bg-black flex items-center justify-center gap-8 px-16'>",
|
|
535
|
+
" <div id='left' class='flex-1 p-8 text-center' style='border:1px solid #ff0000;background:rgba(255,0,0,0.05);opacity:0'>",
|
|
536
|
+
" <div class='text-xs tracking-[0.3em] mb-4' style='font-family:monospace;color:#ff4444'>RED PILL</div>",
|
|
537
|
+
" <div class='text-3xl font-bold mb-4' style='font-family:monospace;color:#ff6666'>The Truth</div>",
|
|
538
|
+
" <div class='text-sm' style='font-family:monospace;color:#883333'>See how deep the rabbit hole goes</div>",
|
|
539
|
+
" </div>",
|
|
540
|
+
" <div id='vs' class='text-2xl font-bold' style='font-family:monospace;color:#00ff00;opacity:0'>OR</div>",
|
|
541
|
+
" <div id='right' class='flex-1 p-8 text-center' style='border:1px solid #0066ff;background:rgba(0,102,255,0.05);opacity:0'>",
|
|
542
|
+
" <div class='text-xs tracking-[0.3em] mb-4' style='font-family:monospace;color:#4488ff'>BLUE PILL</div>",
|
|
543
|
+
" <div class='text-3xl font-bold mb-4' style='font-family:monospace;color:#6699ff'>The Illusion</div>",
|
|
544
|
+
" <div class='text-sm' style='font-family:monospace;color:#335588'>Wake up believing whatever you want</div>",
|
|
545
|
+
" </div>",
|
|
546
|
+
"</div>"
|
|
547
|
+
],
|
|
548
|
+
"script": [
|
|
549
|
+
"const animation = new MulmoAnimation();",
|
|
550
|
+
"animation.animate('#left', { opacity: [0, 1], translateX: [-30, 0] }, { start: 0.3, end: 1.0, easing: 'easeOut' });",
|
|
551
|
+
"animation.animate('#vs', { opacity: [0, 1] }, { start: 1.2, end: 1.5 });",
|
|
552
|
+
"animation.animate('#right', { opacity: [0, 1], translateX: [30, 0] }, { start: 1.5, end: 2.2, easing: 'easeOut' });"
|
|
553
|
+
],
|
|
554
|
+
"animation": true
|
|
555
|
+
}
|
|
556
|
+
},
|
|
557
|
+
{
|
|
558
|
+
"text": "Theme seven. Documentary — elegant, educational, contemplative.",
|
|
559
|
+
"speaker": "Presenter",
|
|
560
|
+
"duration": 3,
|
|
561
|
+
"image": {
|
|
562
|
+
"type": "html_tailwind",
|
|
563
|
+
"html": [
|
|
564
|
+
"<div class='h-full w-full flex items-center justify-center' style='background:#f5f0e8'>",
|
|
565
|
+
" <div id='t' class='text-7xl font-bold tracking-wide' style='font-family:Georgia,serif;color:#2c3e50;opacity:0'>DOCUMENTARY</div>",
|
|
566
|
+
"</div>"
|
|
567
|
+
],
|
|
568
|
+
"script": [
|
|
569
|
+
"const animation = new MulmoAnimation();",
|
|
570
|
+
"animation.animate('#t', { opacity: [0, 1] }, { start: 0.5, end: 1.5 });"
|
|
571
|
+
],
|
|
572
|
+
"animation": true
|
|
573
|
+
}
|
|
574
|
+
},
|
|
575
|
+
{
|
|
576
|
+
"text": "Minimal chapter opening with thin serif typography on warm parchment.",
|
|
577
|
+
"speaker": "Presenter",
|
|
578
|
+
"duration": 4,
|
|
579
|
+
"image": {
|
|
580
|
+
"type": "html_tailwind",
|
|
581
|
+
"html": [
|
|
582
|
+
"<div class='h-full w-full flex flex-col items-center justify-center' style='background:#f5f0e8'>",
|
|
583
|
+
" <div id='ch' class='text-sm tracking-[0.5em] mb-4' style='font-family:\"Courier New\",monospace;color:#7f8c8d;opacity:0'>CHAPTER ONE</div>",
|
|
584
|
+
" <div id='line1' class='h-px mb-6' style='background:#2c3e50;opacity:0;width:0'></div>",
|
|
585
|
+
" <div id='title' class='text-5xl font-bold tracking-wide text-center' style='font-family:Georgia,serif;color:#2c3e50;opacity:0'>The Beginning</div>",
|
|
586
|
+
" <div id='line2' class='h-px mt-6' style='background:#2c3e50;opacity:0;width:0'></div>",
|
|
587
|
+
"</div>"
|
|
588
|
+
],
|
|
589
|
+
"script": [
|
|
590
|
+
"const animation = new MulmoAnimation();",
|
|
591
|
+
"animation.animate('#ch', { opacity: [0, 1] }, { start: 0.3, end: 0.8 });",
|
|
592
|
+
"animation.animate('#line1', { opacity: [0, 0.5], width: [0, 300, 'px'] }, { start: 0.5, end: 1.3, easing: 'easeOut' });",
|
|
593
|
+
"animation.animate('#title', { opacity: [0, 1] }, { start: 1.0, end: 1.8 });",
|
|
594
|
+
"animation.animate('#line2', { opacity: [0, 0.5], width: [0, 300, 'px'] }, { start: 1.5, end: 2.3, easing: 'easeOut' });"
|
|
595
|
+
],
|
|
596
|
+
"animation": true
|
|
597
|
+
}
|
|
598
|
+
},
|
|
599
|
+
{
|
|
600
|
+
"text": "A large counter reveals a key statistic, clean and impactful against the light background.",
|
|
601
|
+
"speaker": "Presenter",
|
|
602
|
+
"duration": 4,
|
|
603
|
+
"image": {
|
|
604
|
+
"type": "html_tailwind",
|
|
605
|
+
"html": [
|
|
606
|
+
"<div class='h-full w-full flex items-center px-24' style='background:#f5f0e8'>",
|
|
607
|
+
" <div class='flex-1'>",
|
|
608
|
+
" <div id='label' class='text-xs tracking-[0.3em] mb-4' style='font-family:\"Courier New\",monospace;color:#7f8c8d;opacity:0'>KEY FINDING</div>",
|
|
609
|
+
" <div class='flex items-end gap-3'>",
|
|
610
|
+
" <div id='number' class='text-8xl font-bold' style='font-family:Georgia,serif;color:#c0392b'></div>",
|
|
611
|
+
" <div id='unit' class='text-2xl mb-3' style='font-family:Georgia,serif;color:#7f8c8d;opacity:0'>percent</div>",
|
|
612
|
+
" </div>",
|
|
613
|
+
" <div id='divider' class='h-px mt-6 mb-6' style='background:#2c3e50;opacity:0;width:0'></div>",
|
|
614
|
+
" <div id='desc' class='text-xl leading-relaxed' style='font-family:\"Helvetica Neue\",Arial,sans-serif;color:#2c3e50;opacity:0'>Of presentations become more engaging with cinematic animation.</div>",
|
|
615
|
+
" </div>",
|
|
616
|
+
"</div>"
|
|
617
|
+
],
|
|
618
|
+
"script": [
|
|
619
|
+
"const animation = new MulmoAnimation();",
|
|
620
|
+
"animation.animate('#label', { opacity: [0, 1] }, { start: 0, end: 0.4 });",
|
|
621
|
+
"animation.counter('#number', [0, 73], { start: 0.3, end: 2.0, decimals: 0 });",
|
|
622
|
+
"animation.animate('#unit', { opacity: [0, 1] }, { start: 1.5, end: 2.0 });",
|
|
623
|
+
"animation.animate('#divider', { opacity: [0, 0.3], width: [0, 500, 'px'] }, { start: 1.5, end: 2.5, easing: 'easeOut' });",
|
|
624
|
+
"animation.animate('#desc', { opacity: [0, 1] }, { start: 2.0, end: 2.8 });"
|
|
625
|
+
],
|
|
626
|
+
"animation": true
|
|
627
|
+
}
|
|
628
|
+
},
|
|
629
|
+
{
|
|
630
|
+
"text": "Theme eight. Anime Opening — bold, dynamic, energetic.",
|
|
631
|
+
"speaker": "Presenter",
|
|
632
|
+
"duration": 3,
|
|
633
|
+
"image": {
|
|
634
|
+
"type": "html_tailwind",
|
|
635
|
+
"html": [
|
|
636
|
+
"<div class='h-full w-full bg-white relative overflow-hidden'>",
|
|
637
|
+
" <div class='absolute inset-0 pointer-events-none'>",
|
|
638
|
+
" <div style='position:absolute;top:50%;left:50%;width:200%;height:200%;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 0deg,transparent 0deg,transparent 8deg,rgba(230,57,70,0.06) 8deg,rgba(230,57,70,0.06) 9deg)'></div>",
|
|
639
|
+
" </div>",
|
|
640
|
+
" <div class='h-full flex items-center justify-center relative'>",
|
|
641
|
+
" <div id='t' class='text-7xl font-bold tracking-wider' style='font-family:Impact,sans-serif;color:#e63946;opacity:0'>ANIME OPENING</div>",
|
|
642
|
+
" </div>",
|
|
643
|
+
"</div>"
|
|
644
|
+
],
|
|
645
|
+
"script": [
|
|
646
|
+
"const animation = new MulmoAnimation();",
|
|
647
|
+
"animation.animate('#t', { opacity: [0, 1], scale: [1.3, 1] }, { start: 0.2, end: 0.8, easing: 'easeOut' });"
|
|
648
|
+
],
|
|
649
|
+
"animation": true
|
|
650
|
+
}
|
|
651
|
+
},
|
|
652
|
+
{
|
|
653
|
+
"text": "Episode title card with speed lines radiating from the center. Red accent bar expands beneath the title.",
|
|
654
|
+
"speaker": "Presenter",
|
|
655
|
+
"duration": 3,
|
|
656
|
+
"image": {
|
|
657
|
+
"type": "html_tailwind",
|
|
658
|
+
"html": [
|
|
659
|
+
"<div class='h-full w-full bg-white relative overflow-hidden'>",
|
|
660
|
+
" <div class='absolute inset-0 pointer-events-none'>",
|
|
661
|
+
" <div style='position:absolute;top:50%;left:50%;width:200%;height:200%;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 0deg,transparent 0deg,transparent 8deg,rgba(230,57,70,0.06) 8deg,rgba(230,57,70,0.06) 9deg)'></div>",
|
|
662
|
+
" </div>",
|
|
663
|
+
" <div class='h-full flex flex-col items-center justify-center relative'>",
|
|
664
|
+
" <div id='ep' class='text-sm tracking-[0.5em] mb-4' style='font-family:Impact,sans-serif;color:#e63946;opacity:0'>EPISODE 01</div>",
|
|
665
|
+
" <div id='title' class='text-7xl font-bold tracking-wider' style='font-family:\"Hiragino Kaku Gothic ProN\",\"Noto Sans JP\",sans-serif;color:#1d3557;opacity:0'>始まりの章</div>",
|
|
666
|
+
" <div id='bar' class='mt-6 h-1' style='background:#e63946;opacity:0;width:0'></div>",
|
|
667
|
+
" </div>",
|
|
668
|
+
"</div>"
|
|
669
|
+
],
|
|
670
|
+
"script": [
|
|
671
|
+
"const animation = new MulmoAnimation();",
|
|
672
|
+
"animation.animate('#ep', { opacity: [0, 1] }, { start: 0, end: 0.3 });",
|
|
673
|
+
"animation.animate('#title', { opacity: [0, 1], scale: [1.3, 1] }, { start: 0.2, end: 0.8, easing: 'easeOut' });",
|
|
674
|
+
"animation.animate('#bar', { opacity: [0, 1], width: [0, 400, 'px'] }, { start: 0.8, end: 1.3, easing: 'easeOut' });"
|
|
675
|
+
],
|
|
676
|
+
"animation": true
|
|
677
|
+
}
|
|
678
|
+
},
|
|
679
|
+
{
|
|
680
|
+
"text": "Character reveal with sidebar accent and sliding tag label.",
|
|
681
|
+
"speaker": "Presenter",
|
|
682
|
+
"duration": 4,
|
|
683
|
+
"image": {
|
|
684
|
+
"type": "html_tailwind",
|
|
685
|
+
"html": [
|
|
686
|
+
"<div class='h-full w-full bg-white flex'>",
|
|
687
|
+
" <div id='sidebar' class='w-2 h-full' style='background:#e63946;opacity:0'></div>",
|
|
688
|
+
" <div class='flex-1 flex flex-col justify-center px-20'>",
|
|
689
|
+
" <div id='tag' class='text-xs tracking-[0.5em] px-3 py-1 inline-block mb-4' style='background:#e63946;color:white;font-family:Impact,sans-serif;opacity:0;width:fit-content'>CHARACTER</div>",
|
|
690
|
+
" <div id='name' class='text-5xl font-bold mb-4' style='font-family:\"Hiragino Kaku Gothic ProN\",sans-serif;color:#1d3557;opacity:0'>MulmoCast</div>",
|
|
691
|
+
" <div id='desc' class='text-xl leading-relaxed' style='font-family:\"Helvetica Neue\",sans-serif;color:#555;opacity:0'>AI-native multi-modal presentation platform that transforms content into cinematic experiences.</div>",
|
|
692
|
+
" </div>",
|
|
693
|
+
"</div>"
|
|
694
|
+
],
|
|
695
|
+
"script": [
|
|
696
|
+
"const animation = new MulmoAnimation();",
|
|
697
|
+
"animation.animate('#sidebar', { opacity: [0, 1] }, { start: 0, end: 0.15 });",
|
|
698
|
+
"animation.animate('#tag', { opacity: [0, 1], translateX: [-20, 0] }, { start: 0.2, end: 0.5, easing: 'easeOut' });",
|
|
699
|
+
"animation.animate('#name', { opacity: [0, 1], translateX: [-15, 0] }, { start: 0.4, end: 0.8, easing: 'easeOut' });",
|
|
700
|
+
"animation.animate('#desc', { opacity: [0, 1] }, { start: 0.8, end: 1.3 });"
|
|
701
|
+
],
|
|
702
|
+
"animation": true
|
|
703
|
+
}
|
|
704
|
+
},
|
|
705
|
+
{
|
|
706
|
+
"text": "Theme nine. Horror — dark, unsettling, creeping dread.",
|
|
707
|
+
"speaker": "Presenter",
|
|
708
|
+
"duration": 3,
|
|
709
|
+
"image": {
|
|
710
|
+
"type": "html_tailwind",
|
|
711
|
+
"html": [
|
|
712
|
+
"<div class='h-full w-full bg-black relative'>",
|
|
713
|
+
" <div class='absolute inset-0 pointer-events-none' style='background:radial-gradient(ellipse at center,transparent 50%,rgba(10,0,0,0.8) 100%)'></div>",
|
|
714
|
+
" <div class='h-full flex items-center justify-center relative'>",
|
|
715
|
+
" <div id='t' class='text-7xl font-bold tracking-wider' style='font-family:Georgia,serif;color:#8b0000;opacity:0'>HORROR</div>",
|
|
716
|
+
" </div>",
|
|
717
|
+
"</div>"
|
|
718
|
+
],
|
|
719
|
+
"script": [
|
|
720
|
+
"const animation = new MulmoAnimation();",
|
|
721
|
+
"animation.animate('#t', { opacity: [0, 1] }, { start: 1.0, end: 2.5 });"
|
|
722
|
+
],
|
|
723
|
+
"animation": true
|
|
724
|
+
}
|
|
725
|
+
},
|
|
726
|
+
{
|
|
727
|
+
"text": "Ominous countdown with blood-red numbers ticking downward. A blinking warning appears as time runs out.",
|
|
728
|
+
"speaker": "Presenter",
|
|
729
|
+
"duration": 5,
|
|
730
|
+
"image": {
|
|
731
|
+
"type": "html_tailwind",
|
|
732
|
+
"html": [
|
|
733
|
+
"<div class='h-full w-full bg-black relative'>",
|
|
734
|
+
" <div class='absolute inset-0 pointer-events-none' style='background:radial-gradient(ellipse at center,transparent 50%,rgba(10,0,0,0.8) 100%)'></div>",
|
|
735
|
+
" <div class='h-full flex flex-col items-center justify-center relative'>",
|
|
736
|
+
" <div id='label' class='text-xs tracking-[0.5em] mb-8' style='font-family:\"Courier New\",monospace;color:#666;opacity:0'>TIME REMAINING</div>",
|
|
737
|
+
" <div id='timer' class='font-bold' style='font-family:\"Courier New\",monospace;color:#8b0000;font-size:120px'></div>",
|
|
738
|
+
" <div id='warn' class='text-lg mt-8 tracking-wider' style='font-family:\"Courier New\",monospace;color:#ff0000;opacity:0'>POINT OF NO RETURN</div>",
|
|
739
|
+
" </div>",
|
|
740
|
+
"</div>"
|
|
741
|
+
],
|
|
742
|
+
"script": [
|
|
743
|
+
"const animation = new MulmoAnimation();",
|
|
744
|
+
"animation.animate('#label', { opacity: [0, 1] }, { start: 0, end: 0.5 });",
|
|
745
|
+
"animation.counter('#timer', [60, 0], { start: 0.3, end: 4.0, decimals: 0 });",
|
|
746
|
+
"animation.animate('#warn', { opacity: [0, 1] }, { start: 3.5, end: 4.0 });",
|
|
747
|
+
"animation.blink('#warn', { interval: 0.3 });"
|
|
748
|
+
],
|
|
749
|
+
"animation": true
|
|
750
|
+
}
|
|
751
|
+
},
|
|
752
|
+
{
|
|
753
|
+
"text": "Slow typewriter reveals hidden text, as if uncovering a terrible secret letter by letter.",
|
|
754
|
+
"speaker": "Presenter",
|
|
755
|
+
"duration": 5,
|
|
756
|
+
"image": {
|
|
757
|
+
"type": "html_tailwind",
|
|
758
|
+
"html": [
|
|
759
|
+
"<div class='h-full w-full bg-black relative'>",
|
|
760
|
+
" <div class='absolute inset-0 pointer-events-none' style='background:radial-gradient(ellipse at center,transparent 50%,rgba(10,0,0,0.8) 100%)'></div>",
|
|
761
|
+
" <div class='h-full flex flex-col items-center justify-center relative px-24'>",
|
|
762
|
+
" <div id='text' class='text-4xl leading-relaxed text-center' style='font-family:Georgia,serif;color:#666'></div>",
|
|
763
|
+
" </div>",
|
|
764
|
+
"</div>"
|
|
765
|
+
],
|
|
766
|
+
"script": [
|
|
767
|
+
"const animation = new MulmoAnimation();",
|
|
768
|
+
"animation.typewriter('#text', 'The truth was hiding in plain sight all along.', { start: 0.5, end: 4.0 });"
|
|
769
|
+
],
|
|
770
|
+
"animation": true
|
|
771
|
+
}
|
|
772
|
+
},
|
|
773
|
+
{
|
|
774
|
+
"text": "Theme ten. Terminator T-800 Vision — the machine's-eye view.",
|
|
775
|
+
"speaker": "Presenter",
|
|
776
|
+
"duration": 3,
|
|
777
|
+
"image": {
|
|
778
|
+
"type": "html_tailwind",
|
|
779
|
+
"html": [
|
|
780
|
+
"<div class='h-full w-full relative overflow-hidden' style='background:linear-gradient(180deg,#1a0000,#0d0000 60%,#1a0505)'>",
|
|
781
|
+
" <div id='city' class='absolute bottom-0 left-0 right-0' style='height:70%'></div>",
|
|
782
|
+
" <div class='absolute inset-0' style='background:rgba(255,0,0,0.04)'></div>",
|
|
783
|
+
" <div class='absolute inset-0' style='background:repeating-linear-gradient(0deg,transparent,transparent 38px,rgba(255,0,0,0.04) 38px,rgba(255,0,0,0.04) 40px),repeating-linear-gradient(90deg,transparent,transparent 38px,rgba(255,0,0,0.04) 38px,rgba(255,0,0,0.04) 40px)'></div>",
|
|
784
|
+
" <div class='h-full flex items-center justify-center relative'>",
|
|
785
|
+
" <div id='title' class='text-6xl font-bold tracking-wider' style='font-family:monospace;color:#ff0000;opacity:0;text-shadow:0 0 30px rgba(255,0,0,0.3)'>TERMINATOR T-800</div>",
|
|
786
|
+
" </div>",
|
|
787
|
+
"</div>"
|
|
788
|
+
],
|
|
789
|
+
"script": [
|
|
790
|
+
"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);}});",
|
|
791
|
+
"const animation = new MulmoAnimation();",
|
|
792
|
+
"animation.animate('#title', { opacity: [0, 1] }, { start: 0.5, end: 1.5 });"
|
|
793
|
+
],
|
|
794
|
+
"animation": true
|
|
795
|
+
}
|
|
796
|
+
},
|
|
797
|
+
{
|
|
798
|
+
"text": "Target acquired. The reticle expands, distance counter ticks down, threat level rises.",
|
|
799
|
+
"speaker": "Presenter",
|
|
800
|
+
"duration": 5,
|
|
801
|
+
"image": {
|
|
802
|
+
"type": "html_tailwind",
|
|
803
|
+
"html": [
|
|
804
|
+
"<div class='h-full w-full relative overflow-hidden' style='background:linear-gradient(180deg,#1a0000,#0d0000 60%,#1a0505)'>",
|
|
805
|
+
" <div id='city' class='absolute bottom-0 left-0 right-0' style='height:70%'></div>",
|
|
806
|
+
" <div class='absolute inset-0' style='background:rgba(255,0,0,0.04)'></div>",
|
|
807
|
+
" <div class='absolute inset-0' style='background:repeating-linear-gradient(0deg,transparent,transparent 38px,rgba(255,0,0,0.04) 38px,rgba(255,0,0,0.04) 40px),repeating-linear-gradient(90deg,transparent,transparent 38px,rgba(255,0,0,0.04) 38px,rgba(255,0,0,0.04) 40px)'></div>",
|
|
808
|
+
" <div id='scanline' class='absolute left-0 right-0' style='height:2px;background:rgba(255,0,0,0.2);top:0;opacity:0'></div>",
|
|
809
|
+
" <div id='bracket' class='absolute' style='top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0;opacity:0'>",
|
|
810
|
+
" <div style='position:absolute;top:0;left:0;width:20px;height:20px;border-top:2px solid #ff0000;border-left:2px solid #ff0000'></div>",
|
|
811
|
+
" <div style='position:absolute;top:0;right:0;width:20px;height:20px;border-top:2px solid #ff0000;border-right:2px solid #ff0000'></div>",
|
|
812
|
+
" <div style='position:absolute;bottom:0;left:0;width:20px;height:20px;border-bottom:2px solid #ff0000;border-left:2px solid #ff0000'></div>",
|
|
813
|
+
" <div style='position:absolute;bottom:0;right:0;width:20px;height:20px;border-bottom:2px solid #ff0000;border-right:2px solid #ff0000'></div>",
|
|
814
|
+
" </div>",
|
|
815
|
+
" <div class='absolute top-6 left-8'>",
|
|
816
|
+
" <div id='sys' class='text-xs tracking-[0.3em]' style='font-family:monospace;color:#ff3333;opacity:0'>CYBERDYNE SYSTEMS MODEL 101</div>",
|
|
817
|
+
" <div id='mode' class='text-xs mt-1' style='font-family:monospace;color:#660000;opacity:0'>SCAN MODE: ACTIVE</div>",
|
|
818
|
+
" </div>",
|
|
819
|
+
" <div class='absolute bottom-6 left-8'>",
|
|
820
|
+
" <div id='dist' class='text-xs' style='font-family:monospace;color:#ff6666;opacity:0'>DIST: <span id='distVal'></span>m</div>",
|
|
821
|
+
" </div>",
|
|
822
|
+
" <div class='absolute bottom-6 right-8 text-right'>",
|
|
823
|
+
" <div id='threat' class='text-xs' style='font-family:monospace;color:#ff0000;opacity:0'>THREAT: <span id='threatVal'></span>%</div>",
|
|
824
|
+
" </div>",
|
|
825
|
+
" <div class='h-full flex flex-col items-center justify-center relative'>",
|
|
826
|
+
" <div id='target' class='text-5xl font-bold tracking-wider' style='font-family:monospace;color:#ff0000;opacity:0'>TARGET ACQUIRED</div>",
|
|
827
|
+
" <div id='id' class='text-lg mt-4 tracking-[0.5em]' style='font-family:monospace;color:#ff3333;opacity:0'>MATCH: <span id='matchVal'></span>%</div>",
|
|
828
|
+
" </div>",
|
|
829
|
+
"</div>"
|
|
830
|
+
],
|
|
831
|
+
"script": [
|
|
832
|
+
"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);}});",
|
|
833
|
+
"const animation = new MulmoAnimation();",
|
|
834
|
+
"animation.animate('#scanline', { opacity: [0, 0.2], translateY: [0, 720] }, { start: 0, end: 2.0 });",
|
|
835
|
+
"animation.animate('#bracket', { opacity: [0, 1], width: [320, 160, 'px'], height: [260, 130, 'px'] }, { start: 0.5, end: 1.8, easing: 'easeOut' });",
|
|
836
|
+
"animation.animate('#sys', { opacity: [0, 1] }, { start: 0.2, end: 0.4 });",
|
|
837
|
+
"animation.animate('#mode', { opacity: [0, 1] }, { start: 0.5, end: 0.7 });",
|
|
838
|
+
"animation.blink('#mode', { interval: 0.8 });",
|
|
839
|
+
"animation.animate('#dist', { opacity: [0, 1] }, { start: 1.0, end: 1.2 });",
|
|
840
|
+
"animation.counter('#distVal', [250, 12], { start: 1.0, end: 3.5, decimals: 1 });",
|
|
841
|
+
"animation.animate('#threat', { opacity: [0, 1] }, { start: 1.2, end: 1.4 });",
|
|
842
|
+
"animation.counter('#threatVal', [0, 97], { start: 1.2, end: 3.0, decimals: 0 });",
|
|
843
|
+
"animation.animate('#target', { opacity: [0, 1] }, { start: 2.0, end: 2.3 });",
|
|
844
|
+
"animation.animate('#id', { opacity: [0, 1] }, { start: 2.5, end: 2.8 });",
|
|
845
|
+
"animation.counter('#matchVal', [0, 99.7], { start: 2.5, end: 3.5, decimals: 1 });"
|
|
846
|
+
],
|
|
847
|
+
"animation": true
|
|
848
|
+
}
|
|
849
|
+
},
|
|
850
|
+
{
|
|
851
|
+
"text": "Tactical analysis H-U-D. Progress bars fill while status lines cascade in from the side.",
|
|
852
|
+
"speaker": "Presenter",
|
|
853
|
+
"duration": 5,
|
|
854
|
+
"image": {
|
|
855
|
+
"type": "html_tailwind",
|
|
856
|
+
"html": [
|
|
857
|
+
"<div class='h-full w-full relative overflow-hidden' style='background:linear-gradient(180deg,#1a0000,#0d0000 60%,#1a0505)'>",
|
|
858
|
+
" <div id='city' class='absolute bottom-0 left-0 right-0' style='height:70%'></div>",
|
|
859
|
+
" <div class='absolute inset-0' style='background:rgba(255,0,0,0.04)'></div>",
|
|
860
|
+
" <div class='absolute inset-0' style='background:repeating-linear-gradient(0deg,transparent,transparent 38px,rgba(255,0,0,0.04) 38px,rgba(255,0,0,0.04) 40px),repeating-linear-gradient(90deg,transparent,transparent 38px,rgba(255,0,0,0.04) 38px,rgba(255,0,0,0.04) 40px)'></div>",
|
|
861
|
+
" <div id='silhouette' class='absolute' style='top:12%;left:30%;width:25%;height:78%;opacity:0'>",
|
|
862
|
+
" <div style='position:absolute;top:0;left:25%;width:50%;height:18%;border:1px solid rgba(255,0,0,0.25);border-radius:50%'></div>",
|
|
863
|
+
" <div style='position:absolute;top:16%;left:15%;width:70%;height:30%;border:1px solid rgba(255,0,0,0.15);border-radius:30% 30% 5% 5%'></div>",
|
|
864
|
+
" <div style='position:absolute;top:44%;left:5%;width:35%;height:56%;border:1px solid rgba(255,0,0,0.1);border-radius:5%'></div>",
|
|
865
|
+
" <div style='position:absolute;top:44%;right:5%;width:35%;height:56%;border:1px solid rgba(255,0,0,0.1);border-radius:5%'></div>",
|
|
866
|
+
" <div id='faceGrid' class='absolute' style='top:1%;left:28%;width:44%;height:15%'></div>",
|
|
867
|
+
" </div>",
|
|
868
|
+
" <div class='absolute top-6 left-8'>",
|
|
869
|
+
" <div id='header' class='text-xs tracking-[0.5em]' style='font-family:monospace;color:#ff3333;opacity:0'>SUBJECT ANALYSIS</div>",
|
|
870
|
+
" </div>",
|
|
871
|
+
" <div class='absolute top-16 right-8 w-72'>",
|
|
872
|
+
" <div id='r0' class='mb-4' style='opacity:0'>",
|
|
873
|
+
" <div class='flex justify-between text-xs mb-1' style='font-family:monospace;color:#ff6666'><span>WEAPON SCAN</span><span style='color:#ff0000'>HANDGUN</span></div>",
|
|
874
|
+
" <div style='background:#330000;height:4px;border-radius:2px'><div id='bar0' style='background:#ff0000;height:100%;border-radius:2px;width:0'></div></div>",
|
|
875
|
+
" </div>",
|
|
876
|
+
" <div id='r1' class='mb-4' style='opacity:0'>",
|
|
877
|
+
" <div class='flex justify-between text-xs mb-1' style='font-family:monospace;color:#ff6666'><span>BEHAVIOR</span><span style='color:#ff3333'>HOSTILE</span></div>",
|
|
878
|
+
" <div style='background:#330000;height:4px;border-radius:2px'><div id='bar1' style='background:#ff3333;height:100%;border-radius:2px;width:0'></div></div>",
|
|
879
|
+
" </div>",
|
|
880
|
+
" <div id='action' class='text-sm font-bold mt-6' style='font-family:monospace;color:#ff0000;opacity:0'>▸ ACTION: TERMINATE</div>",
|
|
881
|
+
" </div>",
|
|
882
|
+
"</div>"
|
|
883
|
+
],
|
|
884
|
+
"script": [
|
|
885
|
+
"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);}});",
|
|
886
|
+
"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);}",
|
|
887
|
+
"const animation = new MulmoAnimation();",
|
|
888
|
+
"animation.animate('#silhouette', { opacity: [0, 1] }, { start: 0, end: 0.5 });",
|
|
889
|
+
"animation.stagger('#dot{i}', 15, { opacity: [0, 0.8] }, { start: 0.3, stagger: 0.06, duration: 0.1 });",
|
|
890
|
+
"animation.animate('#header', { opacity: [0, 1] }, { start: 0, end: 0.3 });",
|
|
891
|
+
"animation.stagger('#r{i}', 2, { opacity: [0, 1] }, { start: 0.8, stagger: 0.4, duration: 0.25 });",
|
|
892
|
+
"animation.animate('#bar0', { width: [0, 92, '%'] }, { start: 1.0, end: 2.5, easing: 'easeOut' });",
|
|
893
|
+
"animation.animate('#bar1', { width: [0, 88, '%'] }, { start: 1.4, end: 2.5, easing: 'easeOut' });",
|
|
894
|
+
"animation.animate('#action', { opacity: [0, 1] }, { start: 3.5, end: 3.8 });",
|
|
895
|
+
"animation.blink('#action', { interval: 0.4 });"
|
|
896
|
+
],
|
|
897
|
+
"animation": true
|
|
898
|
+
}
|
|
899
|
+
},
|
|
900
|
+
{
|
|
901
|
+
"text": "Theme eleven. Dragon Ball Scouter — power levels rising!",
|
|
902
|
+
"speaker": "Presenter",
|
|
903
|
+
"duration": 3,
|
|
904
|
+
"image": {
|
|
905
|
+
"type": "html_tailwind",
|
|
906
|
+
"html": [
|
|
907
|
+
"<div class='h-full w-full relative overflow-hidden' style='background:radial-gradient(circle at center,#002200,#001a00 40%,#000d00)'>",
|
|
908
|
+
" <div id='warrior' class='absolute' style='top:15%;left:32%;width:36%;height:75%;opacity:0.3'>",
|
|
909
|
+
" <div style='width:100%;height:100%;background:linear-gradient(180deg,rgba(0,255,102,0.1),rgba(0,255,102,0.02));clip-path:polygon(40% 0%,60% 0%,65% 10%,60% 25%,75% 35%,80% 50%,70% 65%,60% 100%,40% 100%,30% 65%,20% 50%,25% 35%,40% 25%,35% 10%)'></div>",
|
|
910
|
+
" </div>",
|
|
911
|
+
" <div class='h-full flex items-center justify-center relative'>",
|
|
912
|
+
" <div id='title' class='text-6xl font-bold tracking-wider' style='font-family:Impact,\"Arial Black\",sans-serif;color:#00ff66;opacity:0;text-shadow:0 0 30px rgba(0,255,102,0.3)'>DRAGON BALL SCOUTER</div>",
|
|
913
|
+
" </div>",
|
|
914
|
+
"</div>"
|
|
915
|
+
],
|
|
916
|
+
"script": [
|
|
917
|
+
"const animation = new MulmoAnimation();",
|
|
918
|
+
"animation.animate('#title', { opacity: [0, 1] }, { start: 0.5, end: 1.5 });"
|
|
919
|
+
],
|
|
920
|
+
"animation": true
|
|
921
|
+
}
|
|
922
|
+
},
|
|
923
|
+
{
|
|
924
|
+
"text": "Power level scan. The scouter rings expand as the counter races past nine thousand.",
|
|
925
|
+
"speaker": "Presenter",
|
|
926
|
+
"duration": 5,
|
|
927
|
+
"image": {
|
|
928
|
+
"type": "html_tailwind",
|
|
929
|
+
"html": [
|
|
930
|
+
"<div class='h-full w-full relative overflow-hidden' style='background:radial-gradient(circle at center,#002200,#001a00 40%,#000d00)'>",
|
|
931
|
+
" <div id='warrior' class='absolute' style='top:15%;left:32%;width:36%;height:75%;opacity:0'>",
|
|
932
|
+
" <div style='width:100%;height:100%;background:linear-gradient(180deg,rgba(0,255,102,0.12),rgba(0,255,102,0.03));clip-path:polygon(40% 0%,60% 0%,65% 10%,60% 25%,75% 35%,80% 50%,70% 65%,60% 100%,40% 100%,30% 65%,20% 50%,25% 35%,40% 25%,35% 10%)'></div>",
|
|
933
|
+
" </div>",
|
|
934
|
+
" <div id='lens' class='absolute' style='top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0;border:3px solid rgba(0,255,102,0.3);border-radius:50%;opacity:0'>",
|
|
935
|
+
" <div style='position:absolute;top:-8px;left:50%;width:2px;height:15px;background:rgba(0,255,102,0.4);transform:translateX(-50%)'></div>",
|
|
936
|
+
" <div style='position:absolute;bottom:-8px;left:50%;width:2px;height:15px;background:rgba(0,255,102,0.4);transform:translateX(-50%)'></div>",
|
|
937
|
+
" <div style='position:absolute;left:-8px;top:50%;width:15px;height:2px;background:rgba(0,255,102,0.4);transform:translateY(-50%)'></div>",
|
|
938
|
+
" <div style='position:absolute;right:-8px;top:50%;width:15px;height:2px;background:rgba(0,255,102,0.4);transform:translateY(-50%)'></div>",
|
|
939
|
+
" </div>",
|
|
940
|
+
" <div id='ring2' class='absolute' style='top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0;border:1px solid rgba(0,255,102,0.12);border-radius:50%;opacity:0'></div>",
|
|
941
|
+
" <div class='absolute top-6 left-8'>",
|
|
942
|
+
" <div id='scouter' class='text-xs tracking-[0.3em]' style='font-family:monospace;color:#00cc44;opacity:0'>SCOUTER v3.0 — ACTIVE</div>",
|
|
943
|
+
" </div>",
|
|
944
|
+
" <div class='absolute top-6 right-8 text-right'>",
|
|
945
|
+
" <div id='scanLabel' class='text-xs' style='font-family:monospace;color:#004d1a;opacity:0'>SCANNING...</div>",
|
|
946
|
+
" </div>",
|
|
947
|
+
" <div class='h-full flex flex-col items-center justify-center relative' style='padding-top:20%'>",
|
|
948
|
+
" <div id='label' class='text-sm tracking-[0.5em] mb-4' style='font-family:monospace;color:#00cc44;opacity:0'>戦 闘 力</div>",
|
|
949
|
+
" <div id='power' class='font-bold' style='font-family:Impact,\"Arial Black\",sans-serif;color:#00ff66;font-size:120px'></div>",
|
|
950
|
+
" <div id='alert' class='text-xl mt-6 font-bold tracking-wider' style='font-family:monospace;color:#ff3300;opacity:0'>!!! OVER 9000 !!!</div>",
|
|
951
|
+
" </div>",
|
|
952
|
+
"</div>"
|
|
953
|
+
],
|
|
954
|
+
"script": [
|
|
955
|
+
"const animation = new MulmoAnimation();",
|
|
956
|
+
"animation.animate('#warrior', { opacity: [0, 1] }, { start: 0, end: 0.8 });",
|
|
957
|
+
"animation.animate('#lens', { opacity: [0, 0.6], width: [0, 550, 'px'], height: [0, 550, 'px'] }, { start: 0.2, end: 1.5, easing: 'easeOut' });",
|
|
958
|
+
"animation.animate('#ring2', { opacity: [0, 0.2], width: [0, 400, 'px'], height: [0, 400, 'px'] }, { start: 0.5, end: 1.5, easing: 'easeOut' });",
|
|
959
|
+
"animation.animate('#scouter', { opacity: [0, 1] }, { start: 0.2, end: 0.4 });",
|
|
960
|
+
"animation.animate('#scanLabel', { opacity: [0, 1] }, { start: 0.3, end: 0.5 });",
|
|
961
|
+
"animation.blink('#scanLabel', { interval: 0.3 });",
|
|
962
|
+
"animation.animate('#label', { opacity: [0, 1] }, { start: 0.8, end: 1.1 });",
|
|
963
|
+
"animation.counter('#power', [0, 9001], { start: 1.0, end: 3.5, decimals: 0 });",
|
|
964
|
+
"animation.animate('#alert', { opacity: [0, 1] }, { start: 3.5, end: 3.8 });",
|
|
965
|
+
"animation.blink('#alert', { interval: 0.25 });"
|
|
966
|
+
],
|
|
967
|
+
"animation": true
|
|
968
|
+
}
|
|
969
|
+
},
|
|
970
|
+
{
|
|
971
|
+
"text": "Multi-target grid. Three targets scanned simultaneously, with the third triggering a danger alert.",
|
|
972
|
+
"speaker": "Presenter",
|
|
973
|
+
"duration": 5,
|
|
974
|
+
"image": {
|
|
975
|
+
"type": "html_tailwind",
|
|
976
|
+
"html": [
|
|
977
|
+
"<div class='h-full w-full relative overflow-hidden' style='background:radial-gradient(circle at center,#002200,#001a00 40%,#000d00)'>",
|
|
978
|
+
" <div class='absolute' style='top:20%;left:8%;width:18%;height:60%;opacity:0.5'>",
|
|
979
|
+
" <div style='width:100%;height:100%;background:rgba(0,255,102,0.06);clip-path:polygon(40% 0%,60% 0%,65% 15%,75% 35%,70% 65%,60% 100%,40% 100%,30% 65%,25% 35%,35% 15%)'></div>",
|
|
980
|
+
" </div>",
|
|
981
|
+
" <div class='absolute' style='top:10%;left:38%;width:22%;height:72%;opacity:0.5'>",
|
|
982
|
+
" <div style='width:100%;height:100%;background:rgba(0,255,102,0.08);clip-path:polygon(40% 0%,60% 0%,65% 15%,75% 35%,70% 65%,60% 100%,40% 100%,30% 65%,25% 35%,35% 15%)'></div>",
|
|
983
|
+
" </div>",
|
|
984
|
+
" <div class='absolute' style='top:25%;left:70%;width:16%;height:55%;opacity:0.5'>",
|
|
985
|
+
" <div style='width:100%;height:100%;background:rgba(255,51,0,0.08);clip-path:polygon(40% 0%,60% 0%,65% 15%,75% 35%,70% 65%,60% 100%,40% 100%,30% 65%,25% 35%,35% 15%)'></div>",
|
|
986
|
+
" </div>",
|
|
987
|
+
" <div id='header' class='absolute top-6 left-8 text-xs tracking-[0.5em]' style='font-family:monospace;color:#00cc44;opacity:0'>MULTI-TARGET SCAN</div>",
|
|
988
|
+
" <div id='t0' class='absolute p-3' style='top:15%;left:5%;border:1px solid rgba(0,255,102,0.3);background:rgba(0,20,0,0.7);opacity:0'>",
|
|
989
|
+
" <div class='text-xs tracking-widest mb-1' style='font-family:monospace;color:#00cc44'>TARGET A</div>",
|
|
990
|
+
" <div id='p0' class='text-3xl font-bold' style='font-family:Impact,sans-serif;color:#00ff66'></div>",
|
|
991
|
+
" </div>",
|
|
992
|
+
" <div id='t1' class='absolute p-3' style='top:5%;left:36%;border:1px solid rgba(0,255,102,0.3);background:rgba(0,20,0,0.7);opacity:0'>",
|
|
993
|
+
" <div class='text-xs tracking-widest mb-1' style='font-family:monospace;color:#00cc44'>TARGET B</div>",
|
|
994
|
+
" <div id='p1' class='text-3xl font-bold' style='font-family:Impact,sans-serif;color:#00ff66'></div>",
|
|
995
|
+
" </div>",
|
|
996
|
+
" <div id='t2' class='absolute p-3' style='top:20%;left:68%;border:1px solid rgba(255,51,0,0.4);background:rgba(20,0,0,0.7);opacity:0'>",
|
|
997
|
+
" <div class='text-xs tracking-widest mb-1' style='font-family:monospace;color:#ff3300'>TARGET C</div>",
|
|
998
|
+
" <div id='p2' class='text-3xl font-bold' style='font-family:Impact,sans-serif;color:#ff3300'></div>",
|
|
999
|
+
" <div id='danger' class='text-xs mt-1 font-bold' style='font-family:monospace;color:#ff3300'>⚠ DANGER</div>",
|
|
1000
|
+
" </div>",
|
|
1001
|
+
"</div>"
|
|
1002
|
+
],
|
|
1003
|
+
"script": [
|
|
1004
|
+
"const animation = new MulmoAnimation();",
|
|
1005
|
+
"animation.animate('#header', { opacity: [0, 1] }, { start: 0, end: 0.3 });",
|
|
1006
|
+
"animation.stagger('#t{i}', 3, { opacity: [0, 1], translateY: [10, 0] }, { start: 0.3, stagger: 0.4, duration: 0.3, easing: 'easeOut' });",
|
|
1007
|
+
"animation.counter('#p0', [0, 1200], { start: 0.5, end: 2.5, decimals: 0 });",
|
|
1008
|
+
"animation.counter('#p1', [0, 4500], { start: 0.9, end: 2.5, decimals: 0 });",
|
|
1009
|
+
"animation.counter('#p2', [0, 53000], { start: 1.3, end: 3.0, decimals: 0 });",
|
|
1010
|
+
"animation.blink('#danger', { interval: 0.3 });"
|
|
1011
|
+
],
|
|
1012
|
+
"animation": true
|
|
1013
|
+
}
|
|
1014
|
+
},
|
|
1015
|
+
{
|
|
1016
|
+
"text": "Theme twelve. Blade Runner — rain-soaked neon melancholy.",
|
|
1017
|
+
"speaker": "Presenter",
|
|
1018
|
+
"duration": 4,
|
|
1019
|
+
"image": {
|
|
1020
|
+
"type": "html_tailwind",
|
|
1021
|
+
"html": [
|
|
1022
|
+
"<div class='h-full w-full relative overflow-hidden' style='background:linear-gradient(180deg,#0a0a14,#0f0f1e 40%,#141428)'>",
|
|
1023
|
+
" <div id='bg-layer' class='absolute bottom-0 left-0 right-0' style='height:75%'></div>",
|
|
1024
|
+
" <div id='mid-layer' class='absolute bottom-0 left-0 right-0' style='height:85%'></div>",
|
|
1025
|
+
" <div class='absolute bottom-0 left-0 right-0 h-32' style='background:linear-gradient(0deg,rgba(255,106,0,0.06),transparent)'></div>",
|
|
1026
|
+
" <div class='absolute bottom-0 left-0 right-0 h-24' style='background:linear-gradient(0deg,rgba(10,10,20,0.6),transparent)'></div>",
|
|
1027
|
+
" <div id='rain' class='absolute inset-0'></div>",
|
|
1028
|
+
" <div class='h-full flex items-center justify-center relative'>",
|
|
1029
|
+
" <div id='title' class='text-6xl font-bold tracking-wider' style='font-family:Georgia,serif;color:#ff6a00;opacity:0;text-shadow:0 0 40px rgba(255,106,0,0.4)'>BLADE RUNNER</div>",
|
|
1030
|
+
" </div>",
|
|
1031
|
+
"</div>"
|
|
1032
|
+
],
|
|
1033
|
+
"script": [
|
|
1034
|
+
"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);});",
|
|
1035
|
+
"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);}});",
|
|
1036
|
+
"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);}",
|
|
1037
|
+
"const animation = new MulmoAnimation();",
|
|
1038
|
+
"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'});}",
|
|
1039
|
+
"animation.animate('#title', { opacity: [0, 1] }, { start: 0.5, end: 2.0 });"
|
|
1040
|
+
],
|
|
1041
|
+
"animation": true
|
|
1042
|
+
}
|
|
1043
|
+
},
|
|
1044
|
+
{
|
|
1045
|
+
"text": "Neon rain falls through the dark cityscape. Orange and teal streaks against deep blue-black.",
|
|
1046
|
+
"speaker": "Presenter",
|
|
1047
|
+
"duration": 6,
|
|
1048
|
+
"image": {
|
|
1049
|
+
"type": "html_tailwind",
|
|
1050
|
+
"html": [
|
|
1051
|
+
"<div class='h-full w-full relative overflow-hidden' style='background:linear-gradient(180deg,#0a0a14,#0f0f1e 40%,#141428)'>",
|
|
1052
|
+
" <div id='bg-layer' class='absolute bottom-0 left-0 right-0' style='height:75%'></div>",
|
|
1053
|
+
" <div id='mid-layer' class='absolute bottom-0 left-0 right-0' style='height:85%'></div>",
|
|
1054
|
+
" <div class='absolute bottom-0 left-0 right-0 h-32' style='background:linear-gradient(0deg,rgba(255,106,0,0.06),transparent)'></div>",
|
|
1055
|
+
" <div class='absolute bottom-0 left-0 right-0 h-24' style='background:linear-gradient(0deg,rgba(10,10,20,0.6),transparent)'></div>",
|
|
1056
|
+
" <div id='rain' class='absolute inset-0'></div>",
|
|
1057
|
+
" <div class='h-full flex flex-col items-center justify-center relative'>",
|
|
1058
|
+
" <div id='title' class='text-7xl font-bold tracking-wider text-center' style='font-family:Georgia,serif;color:#ff6a00;opacity:0;text-shadow:0 0 40px rgba(255,106,0,0.4),0 0 80px rgba(255,106,0,0.1)'>NEON RAIN</div>",
|
|
1059
|
+
" <div id='subtitle' class='text-xl mt-6 tracking-[0.3em]' style='font-family:\"Courier New\",monospace;color:#00b4d8;opacity:0'>Like tears in rain</div>",
|
|
1060
|
+
" </div>",
|
|
1061
|
+
"</div>"
|
|
1062
|
+
],
|
|
1063
|
+
"script": [
|
|
1064
|
+
"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);});",
|
|
1065
|
+
"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);}});",
|
|
1066
|
+
"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);}",
|
|
1067
|
+
"const animation = new MulmoAnimation();",
|
|
1068
|
+
"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'});}",
|
|
1069
|
+
"animation.animate('#title', { opacity: [0, 1] }, { start: 1.0, end: 2.5 });",
|
|
1070
|
+
"animation.animate('#subtitle', { opacity: [0, 0.7] }, { start: 3.0, end: 4.5 });"
|
|
1071
|
+
],
|
|
1072
|
+
"animation": true
|
|
1073
|
+
}
|
|
1074
|
+
},
|
|
1075
|
+
{
|
|
1076
|
+
"text": "Voight-Kampff analysis terminal. A question types out, empathy metrics respond.",
|
|
1077
|
+
"speaker": "Presenter",
|
|
1078
|
+
"duration": 5,
|
|
1079
|
+
"image": {
|
|
1080
|
+
"type": "html_tailwind",
|
|
1081
|
+
"html": [
|
|
1082
|
+
"<div class='h-full w-full relative overflow-hidden' style='background:linear-gradient(180deg,#0a0a14,#0f0f1e 40%,#141428)'>",
|
|
1083
|
+
" <div id='bg-layer' class='absolute bottom-0 left-0 right-0' style='height:75%'></div>",
|
|
1084
|
+
" <div class='absolute inset-0' style='background:rgba(10,10,20,0.7)'></div>",
|
|
1085
|
+
" <div id='rain' class='absolute inset-0'></div>",
|
|
1086
|
+
" <div class='h-full flex flex-col justify-center px-20 relative'>",
|
|
1087
|
+
" <div id='label' class='text-xs tracking-[0.5em] mb-6' style='font-family:monospace;color:#ff6a00;opacity:0'>VOIGHT-KAMPFF ANALYSIS v6.2</div>",
|
|
1088
|
+
" <div class='p-6 rounded' style='border:1px solid #1a1a2e;background:rgba(10,10,20,0.85)'>",
|
|
1089
|
+
" <div id='q' class='text-lg mb-4' style='font-family:Georgia,serif;color:#00b4d8'></div>",
|
|
1090
|
+
" <div id='cur' style='font-family:monospace;color:#00b4d8'>█</div>",
|
|
1091
|
+
" <div class='mt-6 pt-4' style='border-top:1px solid #1a1a2e'>",
|
|
1092
|
+
" <div id='r0' class='flex justify-between text-sm mb-2' style='font-family:monospace;opacity:0'><span style='color:#555570'>EMPATHY RESPONSE</span><span id='e0' style='color:#ff6a00'></span></div>",
|
|
1093
|
+
" <div id='r1' class='flex justify-between text-sm mb-2' style='font-family:monospace;opacity:0'><span style='color:#555570'>PUPIL DILATION</span><span id='e1' style='color:#ff6a00'></span></div>",
|
|
1094
|
+
" <div id='r2' class='flex justify-between text-sm' style='font-family:monospace;opacity:0'><span style='color:#555570'>BLUSH RESPONSE</span><span id='e2' style='color:#ff6a00'></span></div>",
|
|
1095
|
+
" </div>",
|
|
1096
|
+
" <div id='result' class='mt-6 text-lg font-bold tracking-wider text-center' style='font-family:monospace;color:#e76f51;opacity:0'>RESULT: INCONCLUSIVE</div>",
|
|
1097
|
+
" </div>",
|
|
1098
|
+
" </div>",
|
|
1099
|
+
"</div>"
|
|
1100
|
+
],
|
|
1101
|
+
"script": [
|
|
1102
|
+
"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);});",
|
|
1103
|
+
"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);}",
|
|
1104
|
+
"const animation = new MulmoAnimation();",
|
|
1105
|
+
"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'});}",
|
|
1106
|
+
"animation.animate('#label', { opacity: [0, 1] }, { start: 0, end: 0.3 });",
|
|
1107
|
+
"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 });",
|
|
1108
|
+
"animation.blink('#cur', { interval: 0.35 });",
|
|
1109
|
+
"animation.stagger('#r{i}', 3, { opacity: [0, 1] }, { start: 2.8, stagger: 0.3, duration: 0.2 });",
|
|
1110
|
+
"animation.counter('#e0', [0, 0.73], { start: 3.0, end: 3.8, decimals: 2 });",
|
|
1111
|
+
"animation.counter('#e1', [0, 2.4], { start: 3.3, end: 4.0, decimals: 1, suffix: 'mm' });",
|
|
1112
|
+
"animation.counter('#e2', [0, 0.12], { start: 3.6, end: 4.2, decimals: 2 });",
|
|
1113
|
+
"animation.animate('#result', { opacity: [0, 1] }, { start: 4.3, end: 4.6 });"
|
|
1114
|
+
],
|
|
1115
|
+
"animation": true
|
|
1116
|
+
}
|
|
1117
|
+
},
|
|
1118
|
+
{
|
|
1119
|
+
"text": "Theme thirteen. Total Recall — is it real, or is it Rekall?",
|
|
1120
|
+
"speaker": "Presenter",
|
|
1121
|
+
"duration": 3,
|
|
1122
|
+
"image": {
|
|
1123
|
+
"type": "html_tailwind",
|
|
1124
|
+
"html": [
|
|
1125
|
+
"<div class='h-full w-full relative overflow-hidden' style='background:linear-gradient(180deg,#1a0800,#331000 40%,#442200 70%,#331005)'>",
|
|
1126
|
+
" <div id='mars' class='absolute bottom-0 left-0 right-0' style='height:30%'></div>",
|
|
1127
|
+
" <div class='h-full flex items-center justify-center relative'>",
|
|
1128
|
+
" <div id='title' class='text-6xl font-bold tracking-wider' style='font-family:\"Arial Black\",Impact,sans-serif;color:#ff4444;opacity:0;text-shadow:0 0 30px rgba(255,68,68,0.3)'>TOTAL RECALL</div>",
|
|
1129
|
+
" </div>",
|
|
1130
|
+
"</div>"
|
|
1131
|
+
],
|
|
1132
|
+
"script": [
|
|
1133
|
+
"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);});",
|
|
1134
|
+
"const animation = new MulmoAnimation();",
|
|
1135
|
+
"animation.animate('#title', { opacity: [0, 1] }, { start: 0.5, end: 1.5 });"
|
|
1136
|
+
],
|
|
1137
|
+
"animation": true
|
|
1138
|
+
}
|
|
1139
|
+
},
|
|
1140
|
+
{
|
|
1141
|
+
"text": "Rekall memory implant initializing. The progress bar fills as memories are uploaded, with glitch bands flickering across the screen.",
|
|
1142
|
+
"speaker": "Presenter",
|
|
1143
|
+
"duration": 5,
|
|
1144
|
+
"image": {
|
|
1145
|
+
"type": "html_tailwind",
|
|
1146
|
+
"html": [
|
|
1147
|
+
"<div class='h-full w-full relative overflow-hidden' style='background:linear-gradient(180deg,#1a0800,#331000 40%,#442200 70%,#331005)'>",
|
|
1148
|
+
" <div id='mars' class='absolute bottom-0 left-0 right-0' style='height:30%'></div>",
|
|
1149
|
+
" <div id='brain' class='absolute' style='top:10%;left:30%;width:40%;height:45%;opacity:0'>",
|
|
1150
|
+
" <div style='width:100%;height:100%;border:1px solid rgba(0,204,170,0.15);border-radius:45% 45% 40% 40%'></div>",
|
|
1151
|
+
" <div style='position:absolute;top:15%;left:10%;width:80%;height:60%;border:1px dashed rgba(0,204,170,0.08);border-radius:40%'></div>",
|
|
1152
|
+
" <div id='neurons'></div>",
|
|
1153
|
+
" </div>",
|
|
1154
|
+
" <div id='scanBeam' class='absolute' style='top:10%;left:30%;width:40%;height:1px;background:linear-gradient(90deg,transparent,#00ccaa,transparent);opacity:0'></div>",
|
|
1155
|
+
" <div id='g1' class='absolute' style='top:25%;left:-5px;right:0;height:3px;background:#ff4444;opacity:0'></div>",
|
|
1156
|
+
" <div class='h-full flex flex-col items-center justify-center relative' style='padding-top:40%'>",
|
|
1157
|
+
" <div id='logo' class='text-sm tracking-[0.5em] mb-6' style='font-family:monospace;color:#ff4444;opacity:0'>R E K A L L I N C.</div>",
|
|
1158
|
+
" <div id='title' class='text-5xl font-bold tracking-wider' style='font-family:\"Arial Black\",Impact,sans-serif;color:#ff4444;opacity:0'>MEMORY IMPLANT</div>",
|
|
1159
|
+
" <div class='mt-8 w-80'>",
|
|
1160
|
+
" <div class='flex justify-between text-xs mb-2' style='font-family:monospace'><span id='status' style='color:#553333;opacity:0'>INITIALIZING...</span><span id='pct' style='color:#ff4444'></span></div>",
|
|
1161
|
+
" <div style='background:#330000;height:8px;border-radius:4px'><div id='bar' style='background:linear-gradient(90deg,#ff4444,#00ccaa);height:100%;border-radius:4px;width:0'></div></div>",
|
|
1162
|
+
" </div>",
|
|
1163
|
+
" </div>",
|
|
1164
|
+
"</div>"
|
|
1165
|
+
],
|
|
1166
|
+
"script": [
|
|
1167
|
+
"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);});",
|
|
1168
|
+
"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);}",
|
|
1169
|
+
"const animation = new MulmoAnimation();",
|
|
1170
|
+
"animation.animate('#brain', { opacity: [0, 1] }, { start: 0, end: 0.8 });",
|
|
1171
|
+
"animation.stagger('#n{i}', 25, { opacity: [0, 0.6] }, { start: 0.3, stagger: 0.05, duration: 0.1 });",
|
|
1172
|
+
"animation.animate('#scanBeam', { opacity: [0, 0.4], translateY: [0, 320] }, { start: 0.2, end: 1.5 });",
|
|
1173
|
+
"animation.animate('#logo', { opacity: [0, 1] }, { start: 0.8, end: 1.1 });",
|
|
1174
|
+
"animation.animate('#title', { opacity: [0, 1], scale: [1.05, 1] }, { start: 1.0, end: 1.5, easing: 'easeOut' });",
|
|
1175
|
+
"animation.animate('#status', { opacity: [0, 1] }, { start: 1.5, end: 1.7 });",
|
|
1176
|
+
"animation.counter('#pct', [0, 100], { start: 1.5, end: 3.8, suffix: '%', decimals: 0 });",
|
|
1177
|
+
"animation.animate('#bar', { width: [0, 100, '%'] }, { start: 1.5, end: 3.8, easing: 'easeInOut' });",
|
|
1178
|
+
"animation.animate('#g1', { opacity: [0, 0.6] }, { start: 2.5, end: 2.6 });",
|
|
1179
|
+
"animation.animate('#g1', { opacity: [0.6, 0] }, { start: 2.6, end: 2.8 });"
|
|
1180
|
+
],
|
|
1181
|
+
"animation": true
|
|
1182
|
+
}
|
|
1183
|
+
},
|
|
1184
|
+
{
|
|
1185
|
+
"text": "Split reality. Real memories on the left, implanted memories on the right. A question mark hangs between them.",
|
|
1186
|
+
"speaker": "Presenter",
|
|
1187
|
+
"duration": 5,
|
|
1188
|
+
"image": {
|
|
1189
|
+
"type": "html_tailwind",
|
|
1190
|
+
"html": [
|
|
1191
|
+
"<div class='h-full w-full relative overflow-hidden' style='background:linear-gradient(180deg,#1a0800,#331000 40%,#442200 70%,#331005)'>",
|
|
1192
|
+
" <div id='mars' class='absolute bottom-0 left-0 right-0' style='height:30%'></div>",
|
|
1193
|
+
" <div class='absolute inset-0' style='background:rgba(13,0,0,0.5)'></div>",
|
|
1194
|
+
" <div class='h-full flex relative'>",
|
|
1195
|
+
" <div id='left' class='flex-1 flex flex-col justify-center px-12' style='border-right:2px solid #553333;opacity:0'>",
|
|
1196
|
+
" <div class='text-xs tracking-[0.3em] mb-4' style='font-family:monospace;color:#00ccaa'>MEMORY — REAL</div>",
|
|
1197
|
+
" <div class='text-3xl font-bold mb-4' style='font-family:\"Arial Black\",sans-serif;color:#00ccaa'>Earth</div>",
|
|
1198
|
+
" <div class='text-sm leading-relaxed' style='font-family:monospace;color:#558888'>Original memories verified.</div>",
|
|
1199
|
+
" </div>",
|
|
1200
|
+
" <div id='right' class='flex-1 flex flex-col justify-center px-12' style='opacity:0'>",
|
|
1201
|
+
" <div class='text-xs tracking-[0.3em] mb-4' style='font-family:monospace;color:#ff4444'>MEMORY — IMPLANTED</div>",
|
|
1202
|
+
" <div class='text-3xl font-bold mb-4' style='font-family:\"Arial Black\",sans-serif;color:#ff4444'>Mars</div>",
|
|
1203
|
+
" <div class='text-sm leading-relaxed' style='font-family:monospace;color:#885555'>Synthetic memory detected. Rekall Inc.</div>",
|
|
1204
|
+
" </div>",
|
|
1205
|
+
" </div>",
|
|
1206
|
+
" <div id='divider' class='absolute' style='top:50%;left:50%;transform:translate(-50%,-50%);font-family:monospace;color:white;font-size:28px;opacity:0;text-shadow:0 0 20px rgba(255,255,255,0.5)'>?</div>",
|
|
1207
|
+
" <div id='g1' class='absolute' style='top:40%;left:0;right:0;height:3px;background:#ffffff;opacity:0'></div>",
|
|
1208
|
+
"</div>"
|
|
1209
|
+
],
|
|
1210
|
+
"script": [
|
|
1211
|
+
"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);});",
|
|
1212
|
+
"const animation = new MulmoAnimation();",
|
|
1213
|
+
"animation.animate('#left', { opacity: [0, 1], translateX: [-20, 0] }, { start: 0.3, end: 1.0, easing: 'easeOut' });",
|
|
1214
|
+
"animation.animate('#right', { opacity: [0, 1], translateX: [20, 0] }, { start: 0.8, end: 1.5, easing: 'easeOut' });",
|
|
1215
|
+
"animation.animate('#divider', { opacity: [0, 1], scale: [2, 1] }, { start: 1.5, end: 2.0, easing: 'easeOut' });",
|
|
1216
|
+
"animation.animate('#g1', { opacity: [0, 0.5] }, { start: 2.5, end: 2.6 });",
|
|
1217
|
+
"animation.animate('#g1', { opacity: [0.5, 0] }, { start: 2.6, end: 2.8 });"
|
|
1218
|
+
],
|
|
1219
|
+
"animation": true
|
|
1220
|
+
}
|
|
1221
|
+
},
|
|
1222
|
+
{
|
|
1223
|
+
"text": "Theme fourteen. Iron Man JARVIS — sleek holographic intelligence.",
|
|
1224
|
+
"speaker": "Presenter",
|
|
1225
|
+
"duration": 3,
|
|
1226
|
+
"image": {
|
|
1227
|
+
"type": "html_tailwind",
|
|
1228
|
+
"html": [
|
|
1229
|
+
"<div class='h-full w-full relative overflow-hidden' style='background:#0a0e1a'>",
|
|
1230
|
+
" <div id='hex-grid' class='absolute inset-0'></div>",
|
|
1231
|
+
" <div class='absolute inset-0 flex items-center justify-center'>",
|
|
1232
|
+
" <div style='width:300px;height:300px;border:1px solid rgba(79,195,247,0.08);border-radius:50%'></div>",
|
|
1233
|
+
" </div>",
|
|
1234
|
+
" <div class='h-full flex items-center justify-center relative'>",
|
|
1235
|
+
" <div id='title' class='text-6xl font-bold tracking-wider' style='font-family:\"Helvetica Neue\",Arial,sans-serif;color:#4fc3f7;opacity:0;text-shadow:0 0 30px rgba(79,195,247,0.3)'>IRON MAN JARVIS</div>",
|
|
1236
|
+
" </div>",
|
|
1237
|
+
"</div>"
|
|
1238
|
+
],
|
|
1239
|
+
"script": [
|
|
1240
|
+
"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);}}",
|
|
1241
|
+
"const animation = new MulmoAnimation();",
|
|
1242
|
+
"animation.animate('#title', { opacity: [0, 1] }, { start: 0.5, end: 1.5 });"
|
|
1243
|
+
],
|
|
1244
|
+
"animation": true
|
|
1245
|
+
}
|
|
1246
|
+
},
|
|
1247
|
+
{
|
|
1248
|
+
"text": "Arc reactor activation. The core ignites, rings expand outward, and JARVIS comes online.",
|
|
1249
|
+
"speaker": "Presenter",
|
|
1250
|
+
"duration": 5,
|
|
1251
|
+
"image": {
|
|
1252
|
+
"type": "html_tailwind",
|
|
1253
|
+
"html": [
|
|
1254
|
+
"<div class='h-full w-full relative overflow-hidden' style='background:#0a0e1a'>",
|
|
1255
|
+
" <div id='hex-grid' class='absolute inset-0'></div>",
|
|
1256
|
+
" <div class='absolute inset-0 flex items-center justify-center'>",
|
|
1257
|
+
" <div id='glow' style='width:0;height:0;border-radius:50%;background:radial-gradient(circle,rgba(79,195,247,0.15),transparent);opacity:0'></div>",
|
|
1258
|
+
" </div>",
|
|
1259
|
+
" <div class='absolute inset-0 flex items-center justify-center'>",
|
|
1260
|
+
" <div id='ring1' style='width:0;height:0;border:1px solid rgba(79,195,247,0.15);border-radius:50%;opacity:0'></div>",
|
|
1261
|
+
" </div>",
|
|
1262
|
+
" <div class='absolute inset-0 flex items-center justify-center'>",
|
|
1263
|
+
" <div id='core' style='width:0;height:0;background:#4fc3f7;border-radius:50%;box-shadow:0 0 20px #4fc3f7,0 0 40px rgba(79,195,247,0.3);opacity:0'></div>",
|
|
1264
|
+
" </div>",
|
|
1265
|
+
" <div style='perspective:1200px;transform-style:preserve-3d;position:absolute;inset:0'>",
|
|
1266
|
+
" <div id='panelL' class='absolute' style='top:10%;left:3%;width:28%;height:35%;background:rgba(79,195,247,0.04);border:1px solid rgba(79,195,247,0.12);transform:rotateY(12deg) rotateX(-3deg);padding:15px;opacity:0'>",
|
|
1267
|
+
" <div class='text-xs tracking-widest mb-3' style='font-family:monospace;color:#81d4fa'>SYSTEM STATUS</div>",
|
|
1268
|
+
" <div id='s0' class='text-xs mb-2' style='font-family:monospace;color:#4fc3f7;opacity:0'>▸ JARVIS v7.2 — Online</div>",
|
|
1269
|
+
" <div id='s1' class='text-xs mb-2' style='font-family:monospace;color:#1a3a5c;opacity:0'>▸ Arc Reactor: 100%</div>",
|
|
1270
|
+
" <div id='s2' class='text-xs' style='font-family:monospace;color:#1a3a5c;opacity:0'>▸ All systems nominal</div>",
|
|
1271
|
+
" </div>",
|
|
1272
|
+
" <div id='panelR' class='absolute' style='top:12%;right:3%;width:26%;height:30%;background:rgba(79,195,247,0.04);border:1px solid rgba(79,195,247,0.12);transform:rotateY(-10deg) rotateX(2deg);padding:15px;opacity:0'>",
|
|
1273
|
+
" <div class='text-xs tracking-widest mb-3' style='font-family:monospace;color:#81d4fa'>DIAGNOSTICS</div>",
|
|
1274
|
+
" <div id='d0' class='text-xs mb-2' style='font-family:monospace;color:#4fc3f7;opacity:0'>▸ Thrusters: 98%</div>",
|
|
1275
|
+
" <div id='d1' class='text-xs mb-2' style='font-family:monospace;color:#ff9800;opacity:0'>▸ Weapons: 85%</div>",
|
|
1276
|
+
" <div id='d2' class='text-xs' style='font-family:monospace;color:#4fc3f7;opacity:0'>▸ Shields: Online</div>",
|
|
1277
|
+
" </div>",
|
|
1278
|
+
" </div>",
|
|
1279
|
+
" <div class='h-full flex flex-col items-center justify-center relative'>",
|
|
1280
|
+
" <div id='greeting' class='text-2xl tracking-wider' style='font-family:\"Helvetica Neue\",Arial,sans-serif;color:#81d4fa;opacity:0'>Good evening, sir.</div>",
|
|
1281
|
+
" <div id='mainTitle' class='text-5xl font-bold mt-4 tracking-wider' style='font-family:\"Helvetica Neue\",Arial,sans-serif;color:#4fc3f7;opacity:0;text-shadow:0 0 30px rgba(79,195,247,0.3)'>JARVIS ONLINE</div>",
|
|
1282
|
+
" </div>",
|
|
1283
|
+
"</div>"
|
|
1284
|
+
],
|
|
1285
|
+
"script": [
|
|
1286
|
+
"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);}}",
|
|
1287
|
+
"const animation = new MulmoAnimation();",
|
|
1288
|
+
"animation.animate('#glow', { opacity: [0, 0.4], width: [0, 500, 'px'], height: [0, 500, 'px'] }, { start: 0, end: 1.5, easing: 'easeOut' });",
|
|
1289
|
+
"animation.animate('#core', { opacity: [0, 1], width: [0, 12, 'px'], height: [0, 12, 'px'] }, { start: 0, end: 0.5, easing: 'easeOut' });",
|
|
1290
|
+
"animation.animate('#ring1', { opacity: [0, 0.2], width: [0, 400, 'px'], height: [0, 400, 'px'] }, { start: 0.4, end: 1.5, easing: 'easeOut' });",
|
|
1291
|
+
"animation.animate('#panelL', { opacity: [0, 1], translateX: [-30, 0] }, { start: 0.8, end: 1.3, easing: 'easeOut' });",
|
|
1292
|
+
"animation.animate('#panelR', { opacity: [0, 1], translateX: [30, 0] }, { start: 1.0, end: 1.5, easing: 'easeOut' });",
|
|
1293
|
+
"animation.stagger('#s{i}', 3, { opacity: [0, 1] }, { start: 1.2, stagger: 0.2, duration: 0.15 });",
|
|
1294
|
+
"animation.stagger('#d{i}', 3, { opacity: [0, 1] }, { start: 1.5, stagger: 0.2, duration: 0.15 });",
|
|
1295
|
+
"animation.animate('#greeting', { opacity: [0, 1] }, { start: 1.8, end: 2.3 });",
|
|
1296
|
+
"animation.animate('#mainTitle', { opacity: [0, 1], scale: [1.1, 1] }, { start: 2.3, end: 3.0, easing: 'easeOut' });"
|
|
1297
|
+
],
|
|
1298
|
+
"animation": true
|
|
1299
|
+
}
|
|
1300
|
+
},
|
|
1301
|
+
{
|
|
1302
|
+
"text": "Holographic dashboard. Three system panels rise into view with counters and progress bars filling in blue.",
|
|
1303
|
+
"speaker": "Presenter",
|
|
1304
|
+
"duration": 5,
|
|
1305
|
+
"image": {
|
|
1306
|
+
"type": "html_tailwind",
|
|
1307
|
+
"html": [
|
|
1308
|
+
"<div class='h-full w-full relative overflow-hidden' style='background:#0a0e1a'>",
|
|
1309
|
+
" <div id='hex-grid' class='absolute inset-0'></div>",
|
|
1310
|
+
" <div class='absolute inset-0 flex items-center justify-center'>",
|
|
1311
|
+
" <div style='width:500px;height:500px;border:1px solid rgba(79,195,247,0.04);border-radius:50%'></div>",
|
|
1312
|
+
" </div>",
|
|
1313
|
+
" <div style='perspective:1200px;transform-style:preserve-3d;position:absolute;inset:0'>",
|
|
1314
|
+
" <div id='p0' class='absolute' style='top:8%;left:2%;width:30%;height:38%;background:rgba(79,195,247,0.04);border:1px solid rgba(79,195,247,0.15);transform:rotateY(10deg);padding:18px;opacity:0'>",
|
|
1315
|
+
" <div class='text-xs tracking-widest mb-3' style='font-family:monospace;color:#81d4fa'>ARC REACTOR</div>",
|
|
1316
|
+
" <div id='n0' class='text-4xl font-bold' style='font-family:\"Helvetica Neue\",sans-serif;color:white'></div>",
|
|
1317
|
+
" <div style='background:rgba(79,195,247,0.1);height:4px;border-radius:2px;margin-top:10px'><div id='b0' style='background:#4fc3f7;height:100%;border-radius:2px;width:0'></div></div>",
|
|
1318
|
+
" </div>",
|
|
1319
|
+
" <div id='p1' class='absolute' style='top:10%;left:35%;width:28%;height:33%;background:rgba(79,195,247,0.04);border:1px solid rgba(79,195,247,0.15);transform:rotateX(-3deg);padding:18px;opacity:0'>",
|
|
1320
|
+
" <div class='text-xs tracking-widest mb-3' style='font-family:monospace;color:#81d4fa'>THRUSTERS</div>",
|
|
1321
|
+
" <div id='n1' class='text-4xl font-bold' style='font-family:\"Helvetica Neue\",sans-serif;color:white'></div>",
|
|
1322
|
+
" <div style='background:rgba(79,195,247,0.1);height:4px;border-radius:2px;margin-top:10px'><div id='b1' style='background:#4fc3f7;height:100%;border-radius:2px;width:0'></div></div>",
|
|
1323
|
+
" </div>",
|
|
1324
|
+
" <div id='p2' class='absolute' style='top:8%;right:2%;width:28%;height:36%;background:rgba(255,152,0,0.04);border:1px solid rgba(255,152,0,0.2);transform:rotateY(-10deg);padding:18px;opacity:0'>",
|
|
1325
|
+
" <div class='text-xs tracking-widest mb-3' style='font-family:monospace;color:#ff9800'>WEAPONS</div>",
|
|
1326
|
+
" <div id='n2' class='text-4xl font-bold' style='font-family:\"Helvetica Neue\",sans-serif;color:#ff9800'></div>",
|
|
1327
|
+
" <div style='background:rgba(255,152,0,0.1);height:4px;border-radius:2px;margin-top:10px'><div id='b2' style='background:#ff9800;height:100%;border-radius:2px;width:0'></div></div>",
|
|
1328
|
+
" </div>",
|
|
1329
|
+
" </div>",
|
|
1330
|
+
" <div id='ai' class='absolute bottom-6 left-0 right-0 text-center text-sm' style='font-family:monospace;color:#81d4fa;opacity:0'>\"All systems functioning within normal parameters, sir.\"</div>",
|
|
1331
|
+
"</div>"
|
|
1332
|
+
],
|
|
1333
|
+
"script": [
|
|
1334
|
+
"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);}}",
|
|
1335
|
+
"const animation = new MulmoAnimation();",
|
|
1336
|
+
"animation.stagger('#p{i}', 3, { opacity: [0, 1], translateY: [15, 0] }, { start: 0.2, stagger: 0.3, duration: 0.3, easing: 'easeOut' });",
|
|
1337
|
+
"animation.counter('#n0', [0, 100], { start: 0.4, end: 2.5, suffix: '%', decimals: 0 });",
|
|
1338
|
+
"animation.animate('#b0', { width: [0, 100, '%'] }, { start: 0.4, end: 2.5, easing: 'easeOut' });",
|
|
1339
|
+
"animation.counter('#n1', [0, 98], { start: 0.7, end: 2.5, suffix: '%', decimals: 0 });",
|
|
1340
|
+
"animation.animate('#b1', { width: [0, 98, '%'] }, { start: 0.7, end: 2.5, easing: 'easeOut' });",
|
|
1341
|
+
"animation.counter('#n2', [0, 85], { start: 1.0, end: 2.5, suffix: '%', decimals: 0 });",
|
|
1342
|
+
"animation.animate('#b2', { width: [0, 85, '%'] }, { start: 1.0, end: 2.5, easing: 'easeOut' });",
|
|
1343
|
+
"animation.animate('#ai', { opacity: [0, 1] }, { start: 3.5, end: 4.0 });"
|
|
1344
|
+
],
|
|
1345
|
+
"animation": true
|
|
1346
|
+
}
|
|
1347
|
+
},
|
|
1348
|
+
{
|
|
1349
|
+
"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.",
|
|
1350
|
+
"speaker": "Presenter",
|
|
1351
|
+
"duration": 5,
|
|
1352
|
+
"image": {
|
|
1353
|
+
"type": "html_tailwind",
|
|
1354
|
+
"html": [
|
|
1355
|
+
"<div class='h-full w-full bg-black flex flex-col items-center justify-center'>",
|
|
1356
|
+
" <div id='title' class='text-5xl font-bold tracking-wider text-center' style='font-family:\"Helvetica Neue\",Arial,sans-serif;color:#4fc3f7;opacity:0;text-shadow:0 0 30px rgba(79,195,247,0.3)'>14 THEMES</div>",
|
|
1357
|
+
" <div id='sub' class='text-xl mt-4 tracking-[0.3em]' style='font-family:monospace;color:#81d4fa;opacity:0'>GO MAKE SOMETHING CINEMATIC</div>",
|
|
1358
|
+
" <div id='line' class='mt-6 h-px' style='background:linear-gradient(90deg,transparent,#4fc3f7,transparent);opacity:0;width:0'></div>",
|
|
1359
|
+
"</div>"
|
|
1360
|
+
],
|
|
1361
|
+
"script": [
|
|
1362
|
+
"const animation = new MulmoAnimation();",
|
|
1363
|
+
"animation.animate('#title', { opacity: [0, 1], scale: [1.2, 1] }, { start: 0.3, end: 1.5, easing: 'easeOut' });",
|
|
1364
|
+
"animation.animate('#sub', { opacity: [0, 1] }, { start: 1.5, end: 2.2 });",
|
|
1365
|
+
"animation.animate('#line', { opacity: [0, 0.6], width: [0, 500, 'px'] }, { start: 2.0, end: 3.0, easing: 'easeOut' });"
|
|
1366
|
+
],
|
|
1367
|
+
"animation": true
|
|
1368
|
+
}
|
|
1369
|
+
}
|
|
1370
|
+
]
|
|
1371
|
+
}
|