mulmocast 2.4.8 → 2.5.0
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.
- package/assets/html/js/animation_runtime.js +371 -0
- package/assets/html/js/auto_render.js +64 -0
- package/assets/html/js/data_attribute_registration.js +178 -0
- package/assets/html/tailwind_animated.html +37 -256
- package/lib/actions/image_references.js +1 -1
- package/lib/methods/mulmo_beat.d.ts +2 -0
- package/lib/methods/mulmo_beat.js +5 -0
- package/lib/types/schema.d.ts +42 -0
- package/lib/types/schema.js +2 -0
- package/lib/utils/browser_pool.d.ts +5 -0
- package/lib/utils/browser_pool.js +39 -0
- package/lib/utils/context.d.ts +14 -0
- package/lib/utils/file.d.ts +1 -0
- package/lib/utils/file.js +4 -0
- package/lib/utils/html_render.d.ts +6 -0
- package/lib/utils/html_render.js +33 -0
- package/lib/utils/image_plugins/html_tailwind.js +22 -13
- package/package.json +10 -9
- package/scripts/test/images/qa_landscape.jpg +0 -0
- package/scripts/test/images/qa_portrait.png +0 -0
- package/scripts/test/test_animated.json +592 -0
- package/scripts/test/test_data_animation.json +149 -0
- package/scripts/test/test_html_cover_pan_zoom_landscape_canvas.json +245 -0
- package/scripts/test/test_html_cover_pan_zoom_portrait_canvas.json +207 -0
- package/scripts/test/test_reference_canvas_size.json +83 -0
|
@@ -0,0 +1,592 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$mulmocast": {
|
|
3
|
+
"version": "1.1"
|
|
4
|
+
},
|
|
5
|
+
"lang": "en",
|
|
6
|
+
"title": "Animated Patterns Test",
|
|
7
|
+
"references": [
|
|
8
|
+
{
|
|
9
|
+
"url": "https://www.mulmocast.com",
|
|
10
|
+
"title": "Mulmocast",
|
|
11
|
+
"type": "article"
|
|
12
|
+
}
|
|
13
|
+
],
|
|
14
|
+
"imageParams": {
|
|
15
|
+
"images": {
|
|
16
|
+
"qaLandscape": {
|
|
17
|
+
"type": "image",
|
|
18
|
+
"source": {
|
|
19
|
+
"kind": "path",
|
|
20
|
+
"path": "images/qa_landscape.jpg"
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
"qaPortrait": {
|
|
24
|
+
"type": "image",
|
|
25
|
+
"source": {
|
|
26
|
+
"kind": "path",
|
|
27
|
+
"path": "images/qa_portrait.png"
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
"localImage": {
|
|
31
|
+
"type": "image",
|
|
32
|
+
"source": {
|
|
33
|
+
"kind": "path",
|
|
34
|
+
"path": "../../assets/images/mulmocast_credit.png"
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
"remoteImage": {
|
|
38
|
+
"type": "image",
|
|
39
|
+
"source": {
|
|
40
|
+
"kind": "url",
|
|
41
|
+
"url": "https://raw.githubusercontent.com/receptron/mulmocast-cli/refs/heads/main/assets/images/mulmocast_credit.png"
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
"speechParams": {
|
|
47
|
+
"speakers": {
|
|
48
|
+
"Presenter": {
|
|
49
|
+
"voiceId": "shimmer",
|
|
50
|
+
"displayName": {
|
|
51
|
+
"en": "Presenter"
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
"beats": [
|
|
57
|
+
{
|
|
58
|
+
"id": "animate_opacity_translate",
|
|
59
|
+
"speaker": "Presenter",
|
|
60
|
+
"text": "",
|
|
61
|
+
"duration": 2,
|
|
62
|
+
"image": {
|
|
63
|
+
"type": "html_tailwind",
|
|
64
|
+
"html": [
|
|
65
|
+
"<div class='h-full flex items-center justify-center bg-slate-900'>",
|
|
66
|
+
" <h1 id='title' class='text-5xl font-bold text-white' style='opacity:0'>animate: opacity + translateY</h1>",
|
|
67
|
+
"</div>"
|
|
68
|
+
],
|
|
69
|
+
"script": [
|
|
70
|
+
"const animation = new MulmoAnimation();",
|
|
71
|
+
"animation.animate('#title', { opacity: [0, 1], translateY: [40, 0] }, { start: 0, end: 1, easing: 'easeOut' });"
|
|
72
|
+
],
|
|
73
|
+
"animation": { "fps": 15 }
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"id": "animate_scale_rotate",
|
|
78
|
+
"speaker": "Presenter",
|
|
79
|
+
"text": "",
|
|
80
|
+
"duration": 2,
|
|
81
|
+
"image": {
|
|
82
|
+
"type": "html_tailwind",
|
|
83
|
+
"html": [
|
|
84
|
+
"<div class='h-full flex items-center justify-center bg-gray-900'>",
|
|
85
|
+
" <div id='box' class='w-32 h-32 bg-cyan-500 rounded-xl' style='opacity:0'></div>",
|
|
86
|
+
"</div>"
|
|
87
|
+
],
|
|
88
|
+
"script": [
|
|
89
|
+
"const animation = new MulmoAnimation();",
|
|
90
|
+
"animation.animate('#box', { opacity: [0, 1], scale: [0.3, 1], rotate: [0, 360] }, { start: 0, end: 1.5, easing: 'easeOut' });"
|
|
91
|
+
],
|
|
92
|
+
"animation": { "fps": 15 }
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
"id": "image_rotate",
|
|
97
|
+
"speaker": "Presenter",
|
|
98
|
+
"text": "",
|
|
99
|
+
"duration": 2,
|
|
100
|
+
"image": {
|
|
101
|
+
"type": "html_tailwind",
|
|
102
|
+
"html": [
|
|
103
|
+
"<div class='h-full flex items-center justify-center bg-gray-900'>",
|
|
104
|
+
" <div id='wrap' style='width:300px;height:300px'>",
|
|
105
|
+
" <img src='image:qaLandscape' style='width:100%;height:100%;object-fit:cover;border-radius:16px' />",
|
|
106
|
+
" </div>",
|
|
107
|
+
"</div>"
|
|
108
|
+
],
|
|
109
|
+
"script": [
|
|
110
|
+
"const animation = new MulmoAnimation();",
|
|
111
|
+
"animation.animate('#wrap', { opacity: [0, 1], scale: [0.5, 1], rotate: [0, 360] }, { start: 0, end: 1.5, easing: 'easeOut' });"
|
|
112
|
+
],
|
|
113
|
+
"animation": { "fps": 15 }
|
|
114
|
+
}
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"id": "animate_width_percent",
|
|
118
|
+
"speaker": "Presenter",
|
|
119
|
+
"text": "",
|
|
120
|
+
"duration": 2,
|
|
121
|
+
"image": {
|
|
122
|
+
"type": "html_tailwind",
|
|
123
|
+
"html": [
|
|
124
|
+
"<div class='h-full flex flex-col justify-center bg-white px-12'>",
|
|
125
|
+
" <div id='bar' class='h-8 bg-blue-500 rounded-r' style='width:0'></div>",
|
|
126
|
+
"</div>"
|
|
127
|
+
],
|
|
128
|
+
"script": [
|
|
129
|
+
"const animation = new MulmoAnimation();",
|
|
130
|
+
"animation.animate('#bar', { width: [0, 80, '%'] }, { start: 0, end: 1.5, easing: 'easeInOut' });"
|
|
131
|
+
],
|
|
132
|
+
"animation": { "fps": 15 }
|
|
133
|
+
}
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
"id": "animate_3d_rotateX",
|
|
137
|
+
"speaker": "Presenter",
|
|
138
|
+
"text": "",
|
|
139
|
+
"duration": 2,
|
|
140
|
+
"image": {
|
|
141
|
+
"type": "html_tailwind",
|
|
142
|
+
"html": [
|
|
143
|
+
"<div class='h-full flex items-center justify-center bg-black' style='perspective:800px'>",
|
|
144
|
+
" <h1 id='title' class='text-5xl font-bold text-white' style='opacity:0'>3D rotateX</h1>",
|
|
145
|
+
"</div>"
|
|
146
|
+
],
|
|
147
|
+
"script": [
|
|
148
|
+
"const animation = new MulmoAnimation();",
|
|
149
|
+
"animation.animate('#title', { opacity: [0, 1], rotateX: [90, 0] }, { start: 0, end: 1, easing: 'easeOut' });"
|
|
150
|
+
],
|
|
151
|
+
"animation": { "fps": 15 }
|
|
152
|
+
}
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
"id": "image_3d_rotateX",
|
|
156
|
+
"speaker": "Presenter",
|
|
157
|
+
"text": "",
|
|
158
|
+
"duration": 2,
|
|
159
|
+
"image": {
|
|
160
|
+
"type": "html_tailwind",
|
|
161
|
+
"html": [
|
|
162
|
+
"<div class='h-full flex items-center justify-center bg-black' style='perspective:800px'>",
|
|
163
|
+
" <div id='wrap' style='width:400px;height:250px'>",
|
|
164
|
+
" <img src='image:qaLandscape' style='width:100%;height:100%;object-fit:cover;border-radius:12px' />",
|
|
165
|
+
" </div>",
|
|
166
|
+
"</div>"
|
|
167
|
+
],
|
|
168
|
+
"script": [
|
|
169
|
+
"const animation = new MulmoAnimation();",
|
|
170
|
+
"animation.animate('#wrap', { opacity: [0, 1], rotateX: [90, 0] }, { start: 0, end: 1, easing: 'easeOut' });"
|
|
171
|
+
],
|
|
172
|
+
"animation": { "fps": 15 }
|
|
173
|
+
}
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
"id": "animate_3d_rotateY",
|
|
177
|
+
"speaker": "Presenter",
|
|
178
|
+
"text": "",
|
|
179
|
+
"duration": 2,
|
|
180
|
+
"image": {
|
|
181
|
+
"type": "html_tailwind",
|
|
182
|
+
"html": [
|
|
183
|
+
"<div class='h-full flex items-center justify-center bg-indigo-950' style='perspective:1000px'>",
|
|
184
|
+
" <div id='card' class='w-64 h-40 rounded-xl flex items-center justify-center' style='background:linear-gradient(135deg,#3b82f6,#06b6d4);transform-style:preserve-3d'>",
|
|
185
|
+
" <p class='text-white text-2xl font-bold'>rotateY flip</p>",
|
|
186
|
+
" </div>",
|
|
187
|
+
"</div>"
|
|
188
|
+
],
|
|
189
|
+
"script": [
|
|
190
|
+
"const animation = new MulmoAnimation();",
|
|
191
|
+
"animation.animate('#card', { rotateY: [0, 180] }, { start: 0.2, end: 1.8, easing: 'easeInOut' });"
|
|
192
|
+
],
|
|
193
|
+
"animation": { "fps": 15 }
|
|
194
|
+
}
|
|
195
|
+
},
|
|
196
|
+
{
|
|
197
|
+
"id": "image_3d_rotateY",
|
|
198
|
+
"speaker": "Presenter",
|
|
199
|
+
"text": "",
|
|
200
|
+
"duration": 2,
|
|
201
|
+
"image": {
|
|
202
|
+
"type": "html_tailwind",
|
|
203
|
+
"html": [
|
|
204
|
+
"<div class='h-full flex items-center justify-center bg-indigo-950' style='perspective:1000px'>",
|
|
205
|
+
" <div id='wrap' style='width:400px;height:250px'>",
|
|
206
|
+
" <img src='image:qaPortrait' style='width:100%;height:100%;object-fit:cover;border-radius:12px' />",
|
|
207
|
+
" </div>",
|
|
208
|
+
"</div>"
|
|
209
|
+
],
|
|
210
|
+
"script": [
|
|
211
|
+
"const animation = new MulmoAnimation();",
|
|
212
|
+
"animation.animate('#wrap', { rotateY: [0, 180] }, { start: 0.2, end: 1.8, easing: 'easeInOut' });"
|
|
213
|
+
],
|
|
214
|
+
"animation": { "fps": 15 }
|
|
215
|
+
}
|
|
216
|
+
},
|
|
217
|
+
{
|
|
218
|
+
"id": "stagger_items",
|
|
219
|
+
"speaker": "Presenter",
|
|
220
|
+
"text": "",
|
|
221
|
+
"duration": 2,
|
|
222
|
+
"image": {
|
|
223
|
+
"type": "html_tailwind",
|
|
224
|
+
"html": [
|
|
225
|
+
"<div class='h-full flex flex-col items-center justify-center bg-white gap-4 px-12'>",
|
|
226
|
+
" <div id='item0' class='w-full max-w-md p-3 bg-blue-100 rounded-lg' style='opacity:0'><p class='text-blue-800'>Item 0</p></div>",
|
|
227
|
+
" <div id='item1' class='w-full max-w-md p-3 bg-green-100 rounded-lg' style='opacity:0'><p class='text-green-800'>Item 1</p></div>",
|
|
228
|
+
" <div id='item2' class='w-full max-w-md p-3 bg-purple-100 rounded-lg' style='opacity:0'><p class='text-purple-800'>Item 2</p></div>",
|
|
229
|
+
" <div id='item3' class='w-full max-w-md p-3 bg-orange-100 rounded-lg' style='opacity:0'><p class='text-orange-800'>Item 3</p></div>",
|
|
230
|
+
"</div>"
|
|
231
|
+
],
|
|
232
|
+
"script": [
|
|
233
|
+
"const animation = new MulmoAnimation();",
|
|
234
|
+
"animation.stagger('#item{i}', 4, { opacity: [0, 1], translateX: [-30, 0] }, { start: 0, stagger: 0.2, duration: 0.3, easing: 'easeOut' });"
|
|
235
|
+
],
|
|
236
|
+
"animation": { "fps": 15 }
|
|
237
|
+
}
|
|
238
|
+
},
|
|
239
|
+
{
|
|
240
|
+
"id": "counter_basic",
|
|
241
|
+
"speaker": "Presenter",
|
|
242
|
+
"text": "",
|
|
243
|
+
"duration": 2,
|
|
244
|
+
"image": {
|
|
245
|
+
"type": "html_tailwind",
|
|
246
|
+
"html": [
|
|
247
|
+
"<div class='h-full flex flex-col items-center justify-center bg-slate-900'>",
|
|
248
|
+
" <p id='counter' class='text-7xl font-bold text-white'>0</p>",
|
|
249
|
+
" <p class='text-slate-400 mt-2'>counter basic</p>",
|
|
250
|
+
"</div>"
|
|
251
|
+
],
|
|
252
|
+
"script": ["const animation = new MulmoAnimation();", "animation.counter('#counter', [0, 1000], { start: 0, end: 1.5, easing: 'easeOut' });"],
|
|
253
|
+
"animation": { "fps": 15 }
|
|
254
|
+
}
|
|
255
|
+
},
|
|
256
|
+
{
|
|
257
|
+
"id": "counter_prefix_suffix_decimals",
|
|
258
|
+
"speaker": "Presenter",
|
|
259
|
+
"text": "",
|
|
260
|
+
"duration": 2,
|
|
261
|
+
"image": {
|
|
262
|
+
"type": "html_tailwind",
|
|
263
|
+
"html": [
|
|
264
|
+
"<div class='h-full flex flex-col items-center justify-center bg-gray-900'>",
|
|
265
|
+
" <p id='price' class='text-5xl font-bold text-green-400'>$0.00</p>",
|
|
266
|
+
" <p class='text-gray-400 mt-2'>counter with prefix, suffix, decimals</p>",
|
|
267
|
+
"</div>"
|
|
268
|
+
],
|
|
269
|
+
"script": [
|
|
270
|
+
"const animation = new MulmoAnimation();",
|
|
271
|
+
"animation.counter('#price', [0, 99.99], { start: 0, end: 1.5, prefix: '$', suffix: ' USD', decimals: 2, easing: 'easeOut' });"
|
|
272
|
+
],
|
|
273
|
+
"animation": { "fps": 15 }
|
|
274
|
+
}
|
|
275
|
+
},
|
|
276
|
+
{
|
|
277
|
+
"id": "typewriter_text",
|
|
278
|
+
"speaker": "Presenter",
|
|
279
|
+
"text": "",
|
|
280
|
+
"duration": 2,
|
|
281
|
+
"image": {
|
|
282
|
+
"type": "html_tailwind",
|
|
283
|
+
"html": [
|
|
284
|
+
"<div class='h-full flex items-center justify-center bg-gray-900 px-16'>",
|
|
285
|
+
" <p id='tw' class='text-2xl font-mono text-green-400'></p>",
|
|
286
|
+
"</div>"
|
|
287
|
+
],
|
|
288
|
+
"script": ["const animation = new MulmoAnimation();", "animation.typewriter('#tw', 'Typewriter animation test.', { start: 0, end: 1.5 });"],
|
|
289
|
+
"animation": { "fps": 15 }
|
|
290
|
+
}
|
|
291
|
+
},
|
|
292
|
+
{
|
|
293
|
+
"id": "codereveal_lines",
|
|
294
|
+
"speaker": "Presenter",
|
|
295
|
+
"text": "",
|
|
296
|
+
"duration": 2,
|
|
297
|
+
"image": {
|
|
298
|
+
"type": "html_tailwind",
|
|
299
|
+
"html": [
|
|
300
|
+
"<div class='h-full flex items-center justify-center bg-slate-900 px-16'>",
|
|
301
|
+
" <pre id='code' class='text-lg font-mono text-green-400'></pre>",
|
|
302
|
+
"</div>"
|
|
303
|
+
],
|
|
304
|
+
"script": [
|
|
305
|
+
"const animation = new MulmoAnimation();",
|
|
306
|
+
"animation.codeReveal('#code', ['const x = 1;', 'const y = 2;', 'return x + y;'], { start: 0, end: 1.5 });"
|
|
307
|
+
],
|
|
308
|
+
"animation": { "fps": 15 }
|
|
309
|
+
}
|
|
310
|
+
},
|
|
311
|
+
{
|
|
312
|
+
"id": "blink_cursor",
|
|
313
|
+
"speaker": "Presenter",
|
|
314
|
+
"text": "",
|
|
315
|
+
"duration": 2,
|
|
316
|
+
"image": {
|
|
317
|
+
"type": "html_tailwind",
|
|
318
|
+
"html": [
|
|
319
|
+
"<div class='h-full flex items-center justify-center bg-gray-900'>",
|
|
320
|
+
" <span class='text-2xl font-mono text-green-400'>$ command</span>",
|
|
321
|
+
" <span id='cursor' class='text-2xl font-mono text-green-400'>|</span>",
|
|
322
|
+
"</div>"
|
|
323
|
+
],
|
|
324
|
+
"script": ["const animation = new MulmoAnimation();", "animation.blink('#cursor', { interval: 0.3 });"],
|
|
325
|
+
"animation": { "fps": 15 }
|
|
326
|
+
}
|
|
327
|
+
},
|
|
328
|
+
{
|
|
329
|
+
"id": "raw_render_interpolate",
|
|
330
|
+
"speaker": "Presenter",
|
|
331
|
+
"text": "",
|
|
332
|
+
"duration": 2,
|
|
333
|
+
"image": {
|
|
334
|
+
"type": "html_tailwind",
|
|
335
|
+
"html": [
|
|
336
|
+
"<div class='h-full flex items-center justify-center bg-slate-800'>",
|
|
337
|
+
" <div id='ball' class='w-12 h-12 bg-cyan-400 rounded-full' style='opacity:0'></div>",
|
|
338
|
+
"</div>"
|
|
339
|
+
],
|
|
340
|
+
"script": [
|
|
341
|
+
"function render(frame, totalFrames, fps) {",
|
|
342
|
+
" const ball = document.getElementById('ball');",
|
|
343
|
+
" ball.style.opacity = interpolate(frame, { input: { inMin: 0, inMax: fps * 0.5 }, output: { outMin: 0, outMax: 1 } });",
|
|
344
|
+
" ball.style.transform = 'translateX(' + interpolate(frame, { input: { inMin: 0, inMax: totalFrames }, output: { outMin: -200, outMax: 200 } }) + 'px)';",
|
|
345
|
+
"}"
|
|
346
|
+
],
|
|
347
|
+
"animation": { "fps": 15 }
|
|
348
|
+
}
|
|
349
|
+
},
|
|
350
|
+
{
|
|
351
|
+
"id": "raw_render_easing",
|
|
352
|
+
"speaker": "Presenter",
|
|
353
|
+
"text": "",
|
|
354
|
+
"duration": 2,
|
|
355
|
+
"image": {
|
|
356
|
+
"type": "html_tailwind",
|
|
357
|
+
"html": [
|
|
358
|
+
"<div class='h-full flex flex-col justify-center bg-slate-900 gap-4 px-12'>",
|
|
359
|
+
" <div class='flex items-center gap-4'><span class='text-white w-20 text-sm'>linear</span><div id='e0' class='w-8 h-8 bg-cyan-400 rounded-full'></div></div>",
|
|
360
|
+
" <div class='flex items-center gap-4'><span class='text-white w-20 text-sm'>easeIn</span><div id='e1' class='w-8 h-8 bg-green-400 rounded-full'></div></div>",
|
|
361
|
+
" <div class='flex items-center gap-4'><span class='text-white w-20 text-sm'>easeOut</span><div id='e2' class='w-8 h-8 bg-yellow-400 rounded-full'></div></div>",
|
|
362
|
+
" <div class='flex items-center gap-4'><span class='text-white w-20 text-sm'>easeInOut</span><div id='e3' class='w-8 h-8 bg-rose-400 rounded-full'></div></div>",
|
|
363
|
+
"</div>"
|
|
364
|
+
],
|
|
365
|
+
"script": [
|
|
366
|
+
"function render(frame, totalFrames, fps) {",
|
|
367
|
+
" const max = 500;",
|
|
368
|
+
" document.getElementById('e0').style.transform = 'translateX(' + interpolate(frame, { input: { inMin: 0, inMax: totalFrames }, output: { outMin: 0, outMax: max }, easing: Easing.linear }) + 'px)';",
|
|
369
|
+
" document.getElementById('e1').style.transform = 'translateX(' + interpolate(frame, { input: { inMin: 0, inMax: totalFrames }, output: { outMin: 0, outMax: max }, easing: Easing.easeIn }) + 'px)';",
|
|
370
|
+
" document.getElementById('e2').style.transform = 'translateX(' + interpolate(frame, { input: { inMin: 0, inMax: totalFrames }, output: { outMin: 0, outMax: max }, easing: Easing.easeOut }) + 'px)';",
|
|
371
|
+
" document.getElementById('e3').style.transform = 'translateX(' + interpolate(frame, { input: { inMin: 0, inMax: totalFrames }, output: { outMin: 0, outMax: max }, easing: Easing.easeInOut }) + 'px)';",
|
|
372
|
+
"}"
|
|
373
|
+
],
|
|
374
|
+
"animation": { "fps": 15 }
|
|
375
|
+
}
|
|
376
|
+
},
|
|
377
|
+
{
|
|
378
|
+
"id": "svg_animation",
|
|
379
|
+
"speaker": "Presenter",
|
|
380
|
+
"text": "",
|
|
381
|
+
"duration": 2,
|
|
382
|
+
"image": {
|
|
383
|
+
"type": "html_tailwind",
|
|
384
|
+
"html": [
|
|
385
|
+
"<div class='h-full flex items-center justify-center bg-slate-900'>",
|
|
386
|
+
" <svg viewBox='0 0 200 200' class='w-64 h-64'>",
|
|
387
|
+
" <circle id='c1' cx='100' cy='100' r='0' fill='none' stroke='#06b6d4' stroke-width='3' />",
|
|
388
|
+
" <circle id='c2' cx='100' cy='100' r='0' fill='none' stroke='#8b5cf6' stroke-width='3' />",
|
|
389
|
+
" </svg>",
|
|
390
|
+
"</div>"
|
|
391
|
+
],
|
|
392
|
+
"script": [
|
|
393
|
+
"function render(frame, totalFrames, fps) {",
|
|
394
|
+
" document.getElementById('c1').setAttribute('r', interpolate(frame, { input: { inMin: 0, inMax: totalFrames * 0.7 }, output: { outMin: 0, outMax: 80 } }));",
|
|
395
|
+
" document.getElementById('c2').setAttribute('r', interpolate(frame, { input: { inMin: fps * 0.3, inMax: totalFrames * 0.8 }, output: { outMin: 0, outMax: 60 } }));",
|
|
396
|
+
"}"
|
|
397
|
+
],
|
|
398
|
+
"animation": { "fps": 15 }
|
|
399
|
+
}
|
|
400
|
+
},
|
|
401
|
+
{
|
|
402
|
+
"id": "combined_dsl",
|
|
403
|
+
"speaker": "Presenter",
|
|
404
|
+
"text": "",
|
|
405
|
+
"duration": 2,
|
|
406
|
+
"image": {
|
|
407
|
+
"type": "html_tailwind",
|
|
408
|
+
"html": [
|
|
409
|
+
"<div class='h-full flex flex-col items-center justify-center bg-slate-900 px-12'>",
|
|
410
|
+
" <h2 id='heading' class='text-3xl font-bold text-white mb-4' style='opacity:0'>Combined DSL</h2>",
|
|
411
|
+
" <p id='counter' class='text-5xl font-bold text-cyan-400 mb-4'>0</p>",
|
|
412
|
+
" <div id='r0' class='w-full max-w-sm p-2 bg-blue-900 rounded mb-2' style='opacity:0'><p class='text-white text-sm'>Row A</p></div>",
|
|
413
|
+
" <div id='r1' class='w-full max-w-sm p-2 bg-blue-900 rounded mb-2' style='opacity:0'><p class='text-white text-sm'>Row B</p></div>",
|
|
414
|
+
" <div id='r2' class='w-full max-w-sm p-2 bg-blue-900 rounded' style='opacity:0'><p class='text-white text-sm'>Row C</p></div>",
|
|
415
|
+
"</div>"
|
|
416
|
+
],
|
|
417
|
+
"script": [
|
|
418
|
+
"const animation = new MulmoAnimation();",
|
|
419
|
+
"animation.animate('#heading', { opacity: [0, 1], translateY: [20, 0] }, { start: 0, end: 0.4, easing: 'easeOut' });",
|
|
420
|
+
"animation.counter('#counter', [0, 500], { start: 0.2, end: 1.5, easing: 'easeOut' });",
|
|
421
|
+
"animation.stagger('#r{i}', 3, { opacity: [0, 1], translateX: [-20, 0] }, { start: 0.5, stagger: 0.2, duration: 0.3, easing: 'easeOut' });"
|
|
422
|
+
],
|
|
423
|
+
"animation": { "fps": 15 }
|
|
424
|
+
}
|
|
425
|
+
},
|
|
426
|
+
{
|
|
427
|
+
"id": "fps_30",
|
|
428
|
+
"speaker": "Presenter",
|
|
429
|
+
"text": "",
|
|
430
|
+
"duration": 1,
|
|
431
|
+
"image": {
|
|
432
|
+
"type": "html_tailwind",
|
|
433
|
+
"html": [
|
|
434
|
+
"<div class='h-full flex items-center justify-center bg-gray-900'>",
|
|
435
|
+
" <div id='dot' class='w-10 h-10 bg-yellow-400 rounded-full' style='opacity:0'></div>",
|
|
436
|
+
"</div>"
|
|
437
|
+
],
|
|
438
|
+
"script": [
|
|
439
|
+
"const animation = new MulmoAnimation();",
|
|
440
|
+
"animation.animate('#dot', { opacity: [0, 1], translateX: [-100, 100] }, { start: 0, end: 0.8, easing: 'easeInOut' });"
|
|
441
|
+
],
|
|
442
|
+
"animation": { "fps": 15 }
|
|
443
|
+
}
|
|
444
|
+
},
|
|
445
|
+
{
|
|
446
|
+
"id": "cover_zoom",
|
|
447
|
+
"speaker": "Presenter",
|
|
448
|
+
"text": "",
|
|
449
|
+
"duration": 2,
|
|
450
|
+
"image": {
|
|
451
|
+
"type": "html_tailwind",
|
|
452
|
+
"html": [
|
|
453
|
+
"<div class='h-full w-full overflow-hidden relative bg-black'>",
|
|
454
|
+
" <img id='photo_img' src='image:qaLandscape' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
|
|
455
|
+
"</div>"
|
|
456
|
+
],
|
|
457
|
+
"script": [
|
|
458
|
+
"const animation = new MulmoAnimation();",
|
|
459
|
+
"animation.coverZoom('#photo_img', { zoomFrom: 1.0, zoomTo: 1.3, start: 0, end: 'auto', easing: 'easeInOut' });"
|
|
460
|
+
],
|
|
461
|
+
"animation": { "fps": 15 }
|
|
462
|
+
}
|
|
463
|
+
},
|
|
464
|
+
{
|
|
465
|
+
"id": "cover_pan",
|
|
466
|
+
"speaker": "Presenter",
|
|
467
|
+
"text": "",
|
|
468
|
+
"duration": 2,
|
|
469
|
+
"image": {
|
|
470
|
+
"type": "html_tailwind",
|
|
471
|
+
"html": [
|
|
472
|
+
"<div class='h-full w-full overflow-hidden relative bg-black'>",
|
|
473
|
+
" <img id='photo_img' src='image:qaPortrait' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
|
|
474
|
+
"</div>"
|
|
475
|
+
],
|
|
476
|
+
"script": [
|
|
477
|
+
"const animation = new MulmoAnimation();",
|
|
478
|
+
"animation.coverPan('#photo_img', { direction: 'vertical', from: 0, to: 100, zoom: 1.2, start: 0, end: 'auto', easing: 'easeInOut' });"
|
|
479
|
+
],
|
|
480
|
+
"animation": { "fps": 15 }
|
|
481
|
+
}
|
|
482
|
+
},
|
|
483
|
+
{
|
|
484
|
+
"id": "flip_card",
|
|
485
|
+
"speaker": "Presenter",
|
|
486
|
+
"text": "",
|
|
487
|
+
"duration": 2,
|
|
488
|
+
"image": {
|
|
489
|
+
"type": "html_tailwind",
|
|
490
|
+
"html": [
|
|
491
|
+
"<div class='h-full flex items-center justify-center bg-gradient-to-br from-slate-900 to-indigo-950'>",
|
|
492
|
+
" <div style='perspective:1000px'>",
|
|
493
|
+
" <div id='flip' class='relative' style='width:300px;height:180px;transform-style:preserve-3d'>",
|
|
494
|
+
" <div class='absolute inset-0 rounded-2xl flex items-center justify-center' style='backface-visibility:hidden;background:linear-gradient(135deg,#3b82f6,#06b6d4)'>",
|
|
495
|
+
" <p class='text-white text-3xl font-bold'>FRONT</p>",
|
|
496
|
+
" </div>",
|
|
497
|
+
" <div class='absolute inset-0 rounded-2xl flex items-center justify-center' style='backface-visibility:hidden;transform:rotateY(180deg);background:linear-gradient(135deg,#8b5cf6,#ec4899)'>",
|
|
498
|
+
" <p class='text-white text-3xl font-bold'>BACK</p>",
|
|
499
|
+
" </div>",
|
|
500
|
+
" </div>",
|
|
501
|
+
" </div>",
|
|
502
|
+
"</div>"
|
|
503
|
+
],
|
|
504
|
+
"script": [
|
|
505
|
+
"const animation = new MulmoAnimation();",
|
|
506
|
+
"animation.animate('#flip', { rotateY: [0, 180] }, { start: 0.3, end: 1.7, easing: 'easeInOut' });"
|
|
507
|
+
],
|
|
508
|
+
"animation": { "fps": 15 }
|
|
509
|
+
}
|
|
510
|
+
},
|
|
511
|
+
{
|
|
512
|
+
"id": "image_flip",
|
|
513
|
+
"speaker": "Presenter",
|
|
514
|
+
"text": "",
|
|
515
|
+
"duration": 2,
|
|
516
|
+
"image": {
|
|
517
|
+
"type": "html_tailwind",
|
|
518
|
+
"html": [
|
|
519
|
+
"<div class='h-full flex items-center justify-center bg-gradient-to-br from-slate-900 to-indigo-950'>",
|
|
520
|
+
" <div style='perspective:1000px'>",
|
|
521
|
+
" <div id='flip' class='relative' style='width:400px;height:250px;transform-style:preserve-3d'>",
|
|
522
|
+
" <div class='absolute inset-0 rounded-xl overflow-hidden' style='backface-visibility:hidden'>",
|
|
523
|
+
" <img src='image:qaLandscape' style='width:100%;height:100%;object-fit:cover' />",
|
|
524
|
+
" </div>",
|
|
525
|
+
" <div class='absolute inset-0 rounded-xl overflow-hidden' style='backface-visibility:hidden;transform:rotateY(180deg)'>",
|
|
526
|
+
" <img src='image:qaPortrait' style='width:100%;height:100%;object-fit:cover' />",
|
|
527
|
+
" </div>",
|
|
528
|
+
" </div>",
|
|
529
|
+
" </div>",
|
|
530
|
+
"</div>"
|
|
531
|
+
],
|
|
532
|
+
"script": [
|
|
533
|
+
"const animation = new MulmoAnimation();",
|
|
534
|
+
"animation.animate('#flip', { rotateY: [0, 180] }, { start: 0.3, end: 1.7, easing: 'easeInOut' });"
|
|
535
|
+
],
|
|
536
|
+
"animation": { "fps": 15 }
|
|
537
|
+
}
|
|
538
|
+
},
|
|
539
|
+
{
|
|
540
|
+
"id": "local_image",
|
|
541
|
+
"speaker": "Presenter",
|
|
542
|
+
"text": "",
|
|
543
|
+
"duration": 2,
|
|
544
|
+
"image": {
|
|
545
|
+
"type": "html_tailwind",
|
|
546
|
+
"html": [
|
|
547
|
+
"<div class='h-full w-full overflow-hidden relative bg-black'>",
|
|
548
|
+
" <img id='photo_img' src='image:localImage' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
|
|
549
|
+
"</div>"
|
|
550
|
+
],
|
|
551
|
+
"script": [
|
|
552
|
+
"const animation = new MulmoAnimation();",
|
|
553
|
+
"animation.coverZoom('#photo_img', { zoomFrom: 1.0, zoomTo: 1.2, start: 0, end: 'auto', easing: 'easeInOut' });"
|
|
554
|
+
],
|
|
555
|
+
"animation": { "fps": 15 }
|
|
556
|
+
}
|
|
557
|
+
},
|
|
558
|
+
{
|
|
559
|
+
"id": "remote_image",
|
|
560
|
+
"speaker": "Presenter",
|
|
561
|
+
"text": "",
|
|
562
|
+
"duration": 2,
|
|
563
|
+
"image": {
|
|
564
|
+
"type": "html_tailwind",
|
|
565
|
+
"html": [
|
|
566
|
+
"<div class='h-full w-full overflow-hidden relative bg-black'>",
|
|
567
|
+
" <img id='photo_img' src='image:remoteImage' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
|
|
568
|
+
"</div>"
|
|
569
|
+
],
|
|
570
|
+
"script": [
|
|
571
|
+
"const animation = new MulmoAnimation();",
|
|
572
|
+
"animation.coverPan('#photo_img', { direction: 'horizontal', from: 0, to: 100, zoom: 1.1, start: 0, end: 'auto', easing: 'easeInOut' });"
|
|
573
|
+
],
|
|
574
|
+
"animation": { "fps": 15 }
|
|
575
|
+
}
|
|
576
|
+
},
|
|
577
|
+
{
|
|
578
|
+
"id": "static_no_animation",
|
|
579
|
+
"speaker": "Presenter",
|
|
580
|
+
"text": "",
|
|
581
|
+
"duration": 1,
|
|
582
|
+
"image": {
|
|
583
|
+
"type": "html_tailwind",
|
|
584
|
+
"html": [
|
|
585
|
+
"<div class='h-full flex items-center justify-center bg-slate-50'>",
|
|
586
|
+
" <p class='text-2xl text-gray-700'>Static html_tailwind (no animation)</p>",
|
|
587
|
+
"</div>"
|
|
588
|
+
]
|
|
589
|
+
}
|
|
590
|
+
}
|
|
591
|
+
]
|
|
592
|
+
}
|