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.
Files changed (25) hide show
  1. package/assets/html/js/animation_runtime.js +371 -0
  2. package/assets/html/js/auto_render.js +64 -0
  3. package/assets/html/js/data_attribute_registration.js +178 -0
  4. package/assets/html/tailwind_animated.html +37 -256
  5. package/lib/actions/image_references.js +1 -1
  6. package/lib/methods/mulmo_beat.d.ts +2 -0
  7. package/lib/methods/mulmo_beat.js +5 -0
  8. package/lib/types/schema.d.ts +42 -0
  9. package/lib/types/schema.js +2 -0
  10. package/lib/utils/browser_pool.d.ts +5 -0
  11. package/lib/utils/browser_pool.js +39 -0
  12. package/lib/utils/context.d.ts +14 -0
  13. package/lib/utils/file.d.ts +1 -0
  14. package/lib/utils/file.js +4 -0
  15. package/lib/utils/html_render.d.ts +6 -0
  16. package/lib/utils/html_render.js +33 -0
  17. package/lib/utils/image_plugins/html_tailwind.js +22 -13
  18. package/package.json +10 -9
  19. package/scripts/test/images/qa_landscape.jpg +0 -0
  20. package/scripts/test/images/qa_portrait.png +0 -0
  21. package/scripts/test/test_animated.json +592 -0
  22. package/scripts/test/test_data_animation.json +149 -0
  23. package/scripts/test/test_html_cover_pan_zoom_landscape_canvas.json +245 -0
  24. package/scripts/test/test_html_cover_pan_zoom_portrait_canvas.json +207 -0
  25. package/scripts/test/test_reference_canvas_size.json +83 -0
package/scripts/test/test_data_animation.json ADDED
@@ -0,0 +1,149 @@
1
+ {
2
+ "$mulmocast": {
3
+ "version": "1.1"
4
+ },
5
+ "lang": "en",
6
+ "title": "Data-attribute Animation Test",
7
+ "canvasSize": {
8
+ "width": 1792,
9
+ "height": 1024
10
+ },
11
+ "audioParams": {
12
+ "padding": 0,
13
+ "introPadding": 0,
14
+ "closingPadding": 0,
15
+ "outroPadding": 0
16
+ },
17
+ "imageParams": {
18
+ "images": {
19
+ "bgLandscape": {
20
+ "type": "image",
21
+ "source": { "kind": "path", "path": "images/qa_landscape.jpg" }
22
+ },
23
+ "bgPortrait": {
24
+ "type": "image",
25
+ "source": { "kind": "path", "path": "images/qa_portrait.png" }
26
+ }
27
+ }
28
+ },
29
+ "beats": [
30
+ {
31
+ "id": "coverZoom_with_text",
32
+ "duration": 4,
33
+ "image": {
34
+ "type": "html_tailwind",
35
+ "html": [
36
+ "<div class='h-full w-full overflow-hidden relative bg-black'>",
37
+ " <div id='photo_outer' style='position:absolute;inset:0;overflow:hidden'>",
38
+ " <img id='photo_img' src='image:bgLandscape' data-animation='coverZoom' data-zoom-from='1.0' data-zoom-to='1.4' data-container='#photo_outer' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
39
+ " </div>",
40
+ " <div style='position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%)'></div>",
41
+ " <div id='title' data-animation='animate' data-opacity='0,1' data-translate-y='30,0' data-start='0.3' style='position:absolute;bottom:120px;left:60px;right:60px;color:white;font-size:72px;font-weight:900;text-shadow:0 4px 16px rgba(0,0,0,0.8)'>Breaking News: Major Event</div>",
42
+ " <div id='subtitle' data-animation='animate' data-opacity='0,1' data-start='0.8' style='position:absolute;bottom:60px;left:60px;color:#F59E0B;font-size:40px;font-weight:bold'>Details emerging now</div>",
43
+ "</div>"
44
+ ],
45
+ "animation": true
46
+ }
47
+ },
48
+ {
49
+ "id": "coverPan_with_counter",
50
+ "duration": 4,
51
+ "image": {
52
+ "type": "html_tailwind",
53
+ "html": [
54
+ "<div class='h-full w-full overflow-hidden relative bg-black'>",
55
+ " <div id='pan_outer' style='position:absolute;inset:0;overflow:hidden'>",
56
+ " <img id='pan_img' src='image:bgPortrait' data-animation='coverPan' data-axis='y' data-from='0' data-to='100' data-zoom='1.2' data-container='#pan_outer' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
57
+ " </div>",
58
+ " <div style='position:absolute;inset:0;background:rgba(0,0,0,0.4)'></div>",
59
+ " <div style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center'>",
60
+ " <div style='color:#F59E0B;font-size:48px;font-weight:900;margin-bottom:16px'>Impact</div>",
61
+ " <div style='display:inline-block;background:rgba(239,68,68,0.85);padding:20px 48px;border-radius:16px'>",
62
+ " <div id='counter' data-animation='counter' data-from='0' data-to='7500' data-end='auto' data-easing='easeOut' style='color:white;font-size:120px;font-weight:900;line-height:1'>0</div>",
63
+ " <div style='color:rgba(255,255,255,0.9);font-size:44px;font-weight:bold;margin-top:4px'>billion yen</div>",
64
+ " </div>",
65
+ " </div>",
66
+ "</div>"
67
+ ],
68
+ "animation": true
69
+ }
70
+ },
71
+ {
72
+ "id": "fade_in_elements",
73
+ "duration": 4,
74
+ "image": {
75
+ "type": "html_tailwind",
76
+ "html": [
77
+ "<div class='h-full w-full overflow-hidden relative bg-gradient-to-b from-gray-900 to-gray-800'>",
78
+ " <div style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;width:80%'>",
79
+ " <div id='headline' data-animation='animate' data-opacity='0,1' data-scale='0.8,1' data-start='0' data-end='1' data-easing='easeOut' style='color:white;font-size:80px;font-weight:900;margin-bottom:32px'>Top 3 Trends</div>",
80
+ " <div id='item0' data-animation='animate' data-opacity='0,1' data-translate-x='-50,0' data-start='0.5' data-end='1.5' style='color:#34D399;font-size:56px;font-weight:bold;margin:16px 0'>1. AI Revolution</div>",
81
+ " <div id='item1' data-animation='animate' data-opacity='0,1' data-translate-x='-50,0' data-start='1.0' data-end='2.0' style='color:#60A5FA;font-size:56px;font-weight:bold;margin:16px 0'>2. Green Energy</div>",
82
+ " <div id='item2' data-animation='animate' data-opacity='0,1' data-translate-x='-50,0' data-start='1.5' data-end='2.5' style='color:#FBBF24;font-size:56px;font-weight:bold;margin:16px 0'>3. Space Tech</div>",
83
+ " </div>",
84
+ "</div>"
85
+ ],
86
+ "animation": true
87
+ }
88
+ },
89
+ {
90
+ "id": "typewriter_effect",
91
+ "duration": 4,
92
+ "image": {
93
+ "type": "html_tailwind",
94
+ "html": [
95
+ "<div class='h-full w-full overflow-hidden relative bg-gray-900'>",
96
+ " <div style='position:absolute;top:50%;left:60px;right:60px;transform:translateY(-50%)'>",
97
+ " <div id='tw' data-animation='typewriter' data-text='Breaking: Major acquisition deal worth $7.5 billion announced today.' data-start='0' data-end='3' style='color:white;font-size:64px;font-weight:bold;line-height:1.4'></div>",
98
+ " <div id='cursor' data-animation='blink' data-interval='0.5' style='display:inline-block;width:4px;height:64px;background:white;vertical-align:bottom;margin-left:4px'></div>",
99
+ " </div>",
100
+ "</div>"
101
+ ],
102
+ "animation": true
103
+ }
104
+ },
105
+ {
106
+ "id": "mixed_no_script",
107
+ "duration": 4,
108
+ "image": {
109
+ "type": "html_tailwind",
110
+ "html": [
111
+ "<div class='h-full w-full overflow-hidden relative bg-black'>",
112
+ " <div id='zoom_outer' style='position:absolute;inset:0;overflow:hidden'>",
113
+ " <img id='zoom_img' src='image:bgLandscape' data-animation='coverZoom' data-zoom-from='1.2' data-zoom-to='1.0' data-easing='easeOut' data-container='#zoom_outer' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
114
+ " </div>",
115
+ " <div style='position:absolute;inset:0;background:linear-gradient(to right, rgba(0,0,0,0.8) 0%, transparent 60%)'></div>",
116
+ " <div style='position:absolute;top:50%;left:60px;transform:translateY(-50%);max-width:45%'>",
117
+ " <div id='badge' data-animation='animate' data-opacity='0,1' data-scale='0.5,1' data-start='0' data-end='0.5' data-easing='easeOut' style='display:inline-block;background:#EF4444;color:white;padding:8px 24px;border-radius:8px;font-size:32px;font-weight:bold;margin-bottom:16px'>LIVE</div>",
118
+ " <div id='mtitle' data-animation='animate' data-opacity='0,1' data-translate-y='20,0' data-start='0.3' data-end='1.0' style='color:white;font-size:64px;font-weight:900;line-height:1.2;margin-bottom:16px'>Market Impact Analysis</div>",
119
+ " <div id='mdesc' data-animation='animate' data-opacity='0,1' data-start='0.8' data-end='1.5' style='color:rgba(255,255,255,0.8);font-size:36px;line-height:1.4'>Key indicators show significant movement across sectors</div>",
120
+ " </div>",
121
+ "</div>"
122
+ ],
123
+ "animation": true
124
+ }
125
+ },
126
+ {
127
+ "id": "script_plus_data_attrs",
128
+ "duration": 4,
129
+ "image": {
130
+ "type": "html_tailwind",
131
+ "html": [
132
+ "<div class='h-full w-full overflow-hidden relative bg-black'>",
133
+ " <div id='bg_outer' style='position:absolute;inset:0;overflow:hidden'>",
134
+ " <img id='bg_img' src='image:bgLandscape' data-animation='coverZoom' data-zoom-from='1.0' data-zoom-to='1.3' data-container='#bg_outer' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
135
+ " </div>",
136
+ " <div style='position:absolute;inset:0;background:rgba(0,0,0,0.5)'></div>",
137
+ " <div id='script_title' style='position:absolute;top:50%;left:60px;right:60px;transform:translateY(-50%);color:white;font-size:72px;font-weight:900;text-align:center;opacity:0'>Script + Data Coexistence</div>",
138
+ " <div id='data_subtitle' data-animation='animate' data-opacity='0,1' data-translate-y='20,0' data-start='1.0' style='position:absolute;bottom:100px;left:60px;right:60px;text-align:center;color:#F59E0B;font-size:48px;font-weight:bold'>This text uses data-animation</div>",
139
+ "</div>"
140
+ ],
141
+ "script": [
142
+ "const animation = new MulmoAnimation();",
143
+ "animation.animate('#script_title', { opacity: [0, 1], translateY: [30, 0] }, { start: 0, end: 0.8, easing: 'easeOut' });"
144
+ ],
145
+ "animation": true
146
+ }
147
+ }
148
+ ]
149
+ }
package/scripts/test/test_html_cover_pan_zoom_landscape_canvas.json ADDED
@@ -0,0 +1,245 @@
1
+ {
2
+ "$mulmocast": {
3
+ "version": "1.1"
4
+ },
5
+ "lang": "en",
6
+ "title": "html_tailwind coverZoom/coverPan test",
7
+ "canvasSize": {
8
+ "width": 1792,
9
+ "height": 1024
10
+ },
11
+ "audioParams": {
12
+ "padding": 0,
13
+ "introPadding": 0,
14
+ "closingPadding": 0,
15
+ "outroPadding": 0
16
+ },
17
+ "imageParams": {
18
+ "images": {
19
+ "qaLandscape": {
20
+ "type": "image",
21
+ "source": {
22
+ "kind": "path",
23
+ "path": "images/qa_landscape.jpg"
24
+ }
25
+ },
26
+ "qaPortrait": {
27
+ "type": "image",
28
+ "source": {
29
+ "kind": "path",
30
+ "path": "images/qa_portrait.png"
31
+ }
32
+ }
33
+ }
34
+ },
35
+ "beats": [
36
+ {
37
+ "id": "landscape_zoom_in",
38
+ "duration": 5,
39
+ "image": {
40
+ "type": "html_tailwind",
41
+ "html": [
42
+ "<div class='h-full w-full overflow-hidden relative bg-black'>",
43
+ " <img id='photo_img' src='image:qaLandscape' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
44
+ "</div>"
45
+ ],
46
+ "script": [
47
+ "const animation = new MulmoAnimation();",
48
+ "animation.coverZoom('#photo_img', { zoomFrom: 1.0, zoomTo: 1.5, start: 0, end: 'auto', easing: 'linear' });"
49
+ ],
50
+ "animation": true
51
+ }
52
+ },
53
+ {
54
+ "id": "landscape_zoom_in_from_to_alias",
55
+ "duration": 5,
56
+ "image": {
57
+ "type": "html_tailwind",
58
+ "html": [
59
+ "<div class='h-full w-full overflow-hidden relative bg-black'>",
60
+ " <img id='photo_img' src='image:qaLandscape' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
61
+ "</div>"
62
+ ],
63
+ "script": [
64
+ "const animation = new MulmoAnimation();",
65
+ "animation.coverZoom('#photo_img', { from: 1.0, to: 1.5, start: 0, end: 'auto', easing: 'linear' });"
66
+ ],
67
+ "animation": true
68
+ }
69
+ },
70
+ {
71
+ "id": "landscape_zoom_in_container_selector",
72
+ "duration": 5,
73
+ "image": {
74
+ "type": "html_tailwind",
75
+ "html": [
76
+ "<div class='h-full w-full overflow-hidden relative bg-black'>",
77
+ " <div id='photo_outer' style='position:absolute;inset:0;overflow:hidden'>",
78
+ " <div id='photo_inner' style='position:absolute;inset:0'>",
79
+ " <img id='photo_img' src='image:qaLandscape' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
80
+ " </div>",
81
+ " </div>",
82
+ "</div>"
83
+ ],
84
+ "script": [
85
+ "const animation = new MulmoAnimation();",
86
+ "animation.coverZoom('#photo_img', { zoomFrom: 1.0, zoomTo: 1.5, start: 0, end: 'auto', easing: 'linear', containerSelector: '#photo_outer' });"
87
+ ],
88
+ "animation": true
89
+ }
90
+ },
91
+ {
92
+ "id": "landscape_zoom_out",
93
+ "duration": 5,
94
+ "image": {
95
+ "type": "html_tailwind",
96
+ "html": [
97
+ "<div class='h-full w-full overflow-hidden relative bg-black'>",
98
+ " <img id='photo_img' src='image:qaLandscape' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
99
+ "</div>"
100
+ ],
101
+ "script": [
102
+ "const animation = new MulmoAnimation();",
103
+ "animation.coverZoom('#photo_img', { zoomFrom: 1.5, zoomTo: 1.0, start: 0, end: 'auto', easing: 'linear' });"
104
+ ],
105
+ "animation": true
106
+ }
107
+ },
108
+ {
109
+ "id": "landscape_zoom_pan_bottom_to_top",
110
+ "duration": 5,
111
+ "image": {
112
+ "type": "html_tailwind",
113
+ "html": [
114
+ "<div class='h-full w-full overflow-hidden relative bg-black'>",
115
+ " <img id='photo_img' src='image:qaLandscape' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
116
+ "</div>"
117
+ ],
118
+ "script": [
119
+ "const animation = new MulmoAnimation();",
120
+ "animation.coverPan('#photo_img', { axis: 'y', direction: 1, distance: 100, zoom: 1.2, start: 0, end: 'auto', easing: 'linear' });"
121
+ ],
122
+ "animation": true
123
+ }
124
+ },
125
+ {
126
+ "id": "landscape_pan_left_to_right_direction",
127
+ "duration": 5,
128
+ "image": {
129
+ "type": "html_tailwind",
130
+ "html": [
131
+ "<div class='h-full w-full overflow-hidden relative bg-black'>",
132
+ " <img id='photo_img' src='image:qaLandscape' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
133
+ "</div>"
134
+ ],
135
+ "script": [
136
+ "const animation = new MulmoAnimation();",
137
+ "animation.coverPan('#photo_img', { axis: 'x', direction: -1, distance: 100, zoom: 1.2, start: 0, end: 'auto', easing: 'linear' });"
138
+ ],
139
+ "animation": true
140
+ }
141
+ },
142
+ {
143
+ "id": "landscape_pan_left_to_right_from_to_edge",
144
+ "duration": 5,
145
+ "image": {
146
+ "type": "html_tailwind",
147
+ "html": [
148
+ "<div class='h-full w-full overflow-hidden relative bg-black'>",
149
+ " <img id='photo_img' src='image:qaLandscape' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
150
+ "</div>"
151
+ ],
152
+ "script": [
153
+ "const animation = new MulmoAnimation();",
154
+ "animation.coverPan('#photo_img', { axis: 'x', from: 100, to: 0, zoom: 1.2, start: 0, end: 'auto', easing: 'linear' });"
155
+ ],
156
+ "animation": true
157
+ }
158
+ },
159
+ {
160
+ "id": "portrait_zoom_in",
161
+ "duration": 5,
162
+ "image": {
163
+ "type": "html_tailwind",
164
+ "html": [
165
+ "<div class='h-full w-full overflow-hidden relative bg-black'>",
166
+ " <img id='photo_img' src='image:qaPortrait' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
167
+ "</div>"
168
+ ],
169
+ "script": [
170
+ "const animation = new MulmoAnimation();",
171
+ "animation.coverZoom('#photo_img', { zoomFrom: 1.0, zoomTo: 1.5, start: 0, end: 'auto', easing: 'linear' });"
172
+ ],
173
+ "animation": true
174
+ }
175
+ },
176
+ {
177
+ "id": "portrait_zoom_out",
178
+ "duration": 5,
179
+ "image": {
180
+ "type": "html_tailwind",
181
+ "html": [
182
+ "<div class='h-full w-full overflow-hidden relative bg-black'>",
183
+ " <img id='photo_img' src='image:qaPortrait' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
184
+ "</div>"
185
+ ],
186
+ "script": [
187
+ "const animation = new MulmoAnimation();",
188
+ "animation.coverZoom('#photo_img', { zoomFrom: 1.5, zoomTo: 1.0, start: 0, end: 'auto', easing: 'linear' });"
189
+ ],
190
+ "animation": true
191
+ }
192
+ },
193
+ {
194
+ "id": "portrait_pan_bottom_to_top_direction",
195
+ "duration": 5,
196
+ "image": {
197
+ "type": "html_tailwind",
198
+ "html": [
199
+ "<div class='h-full w-full overflow-hidden relative bg-black'>",
200
+ " <img id='photo_img' src='image:qaPortrait' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
201
+ "</div>"
202
+ ],
203
+ "script": [
204
+ "const animation = new MulmoAnimation();",
205
+ "animation.coverPan('#photo_img', { axis: 'y', direction: 1, distance: 100, zoom: 1.2, start: 0, end: 'auto', easing: 'linear' });"
206
+ ],
207
+ "animation": true
208
+ }
209
+ },
210
+ {
211
+ "id": "portrait_pan_bottom_to_top_from_to_edge",
212
+ "duration": 5,
213
+ "image": {
214
+ "type": "html_tailwind",
215
+ "html": [
216
+ "<div class='h-full w-full overflow-hidden relative bg-black'>",
217
+ " <img id='photo_img' src='image:qaPortrait' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
218
+ "</div>"
219
+ ],
220
+ "script": [
221
+ "const animation = new MulmoAnimation();",
222
+ "animation.coverPan('#photo_img', { axis: 'y', from: 0, to: 100, zoom: 1.0, start: 0, end: 'auto', easing: 'linear' });"
223
+ ],
224
+ "animation": true
225
+ }
226
+ },
227
+ {
228
+ "id": "portrait_zoom_pan_left_to_right",
229
+ "duration": 5,
230
+ "image": {
231
+ "type": "html_tailwind",
232
+ "html": [
233
+ "<div class='h-full w-full overflow-hidden relative bg-black'>",
234
+ " <img id='photo_img' src='image:qaPortrait' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
235
+ "</div>"
236
+ ],
237
+ "script": [
238
+ "const animation = new MulmoAnimation();",
239
+ "animation.coverPan('#photo_img', { axis: 'x', direction: -1, distance: 100, zoom: 1.2, start: 0, end: 'auto', easing: 'linear' });"
240
+ ],
241
+ "animation": true
242
+ }
243
+ }
244
+ ]
245
+ }
package/scripts/test/test_html_cover_pan_zoom_portrait_canvas.json ADDED
@@ -0,0 +1,207 @@
1
+ {
2
+ "$mulmocast": {
3
+ "version": "1.1"
4
+ },
5
+ "lang": "en",
6
+ "title": "html_tailwind coverZoom/coverPan test (portrait canvas)",
7
+ "canvasSize": {
8
+ "width": 1024,
9
+ "height": 1792
10
+ },
11
+ "audioParams": {
12
+ "padding": 0,
13
+ "introPadding": 0,
14
+ "closingPadding": 0,
15
+ "outroPadding": 0
16
+ },
17
+ "imageParams": {
18
+ "images": {
19
+ "qaLandscape": {
20
+ "type": "image",
21
+ "source": {
22
+ "kind": "path",
23
+ "path": "images/qa_landscape.jpg"
24
+ }
25
+ },
26
+ "qaPortrait": {
27
+ "type": "image",
28
+ "source": {
29
+ "kind": "path",
30
+ "path": "images/qa_portrait.png"
31
+ }
32
+ }
33
+ }
34
+ },
35
+ "beats": [
36
+ {
37
+ "id": "landscape_zoom_in",
38
+ "duration": 5,
39
+ "image": {
40
+ "type": "html_tailwind",
41
+ "html": [
42
+ "<div class='h-full w-full overflow-hidden relative bg-black'>",
43
+ " <img id='photo_img' src='image:qaLandscape' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
44
+ "</div>"
45
+ ],
46
+ "script": [
47
+ "const animation = new MulmoAnimation();",
48
+ "animation.coverZoom('#photo_img', { zoomFrom: 1.0, zoomTo: 1.5, start: 0, end: 'auto', easing: 'linear' });"
49
+ ],
50
+ "animation": true
51
+ }
52
+ },
53
+ {
54
+ "id": "landscape_zoom_out",
55
+ "duration": 5,
56
+ "image": {
57
+ "type": "html_tailwind",
58
+ "html": [
59
+ "<div class='h-full w-full overflow-hidden relative bg-black'>",
60
+ " <img id='photo_img' src='image:qaLandscape' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
61
+ "</div>"
62
+ ],
63
+ "script": [
64
+ "const animation = new MulmoAnimation();",
65
+ "animation.coverZoom('#photo_img', { zoomFrom: 1.5, zoomTo: 1.0, start: 0, end: 'auto', easing: 'linear' });"
66
+ ],
67
+ "animation": true
68
+ }
69
+ },
70
+ {
71
+ "id": "landscape_zoom_pan_bottom_to_top",
72
+ "duration": 5,
73
+ "image": {
74
+ "type": "html_tailwind",
75
+ "html": [
76
+ "<div class='h-full w-full overflow-hidden relative bg-black'>",
77
+ " <img id='photo_img' src='image:qaLandscape' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
78
+ "</div>"
79
+ ],
80
+ "script": [
81
+ "const animation = new MulmoAnimation();",
82
+ "animation.coverPan('#photo_img', { axis: 'y', direction: 1, distance: 100, zoom: 1.2, start: 0, end: 'auto', easing: 'linear' });"
83
+ ],
84
+ "animation": true
85
+ }
86
+ },
87
+ {
88
+ "id": "landscape_pan_left_to_right_direction",
89
+ "duration": 5,
90
+ "image": {
91
+ "type": "html_tailwind",
92
+ "html": [
93
+ "<div class='h-full w-full overflow-hidden relative bg-black'>",
94
+ " <img id='photo_img' src='image:qaLandscape' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
95
+ "</div>"
96
+ ],
97
+ "script": [
98
+ "const animation = new MulmoAnimation();",
99
+ "animation.coverPan('#photo_img', { axis: 'x', direction: -1, distance: 100, zoom: 1.2, start: 0, end: 'auto', easing: 'linear' });"
100
+ ],
101
+ "animation": true
102
+ }
103
+ },
104
+ {
105
+ "id": "landscape_pan_left_to_right_from_to_edge",
106
+ "duration": 5,
107
+ "image": {
108
+ "type": "html_tailwind",
109
+ "html": [
110
+ "<div class='h-full w-full overflow-hidden relative bg-black'>",
111
+ " <img id='photo_img' src='image:qaLandscape' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
112
+ "</div>"
113
+ ],
114
+ "script": [
115
+ "const animation = new MulmoAnimation();",
116
+ "animation.coverPan('#photo_img', { axis: 'x', from: 100, to: 0, zoom: 1.0, start: 0, end: 'auto', easing: 'linear' });"
117
+ ],
118
+ "animation": true
119
+ }
120
+ },
121
+ {
122
+ "id": "portrait_zoom_in",
123
+ "duration": 5,
124
+ "image": {
125
+ "type": "html_tailwind",
126
+ "html": [
127
+ "<div class='h-full w-full overflow-hidden relative bg-black'>",
128
+ " <img id='photo_img' src='image:qaPortrait' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
129
+ "</div>"
130
+ ],
131
+ "script": [
132
+ "const animation = new MulmoAnimation();",
133
+ "animation.coverZoom('#photo_img', { zoomFrom: 1.0, zoomTo: 1.5, start: 0, end: 'auto', easing: 'linear' });"
134
+ ],
135
+ "animation": true
136
+ }
137
+ },
138
+ {
139
+ "id": "portrait_zoom_out",
140
+ "duration": 5,
141
+ "image": {
142
+ "type": "html_tailwind",
143
+ "html": [
144
+ "<div class='h-full w-full overflow-hidden relative bg-black'>",
145
+ " <img id='photo_img' src='image:qaPortrait' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
146
+ "</div>"
147
+ ],
148
+ "script": [
149
+ "const animation = new MulmoAnimation();",
150
+ "animation.coverZoom('#photo_img', { zoomFrom: 1.5, zoomTo: 1.0, start: 0, end: 'auto', easing: 'linear' });"
151
+ ],
152
+ "animation": true
153
+ }
154
+ },
155
+ {
156
+ "id": "portrait_pan_bottom_to_top_direction",
157
+ "duration": 5,
158
+ "image": {
159
+ "type": "html_tailwind",
160
+ "html": [
161
+ "<div class='h-full w-full overflow-hidden relative bg-black'>",
162
+ " <img id='photo_img' src='image:qaPortrait' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
163
+ "</div>"
164
+ ],
165
+ "script": [
166
+ "const animation = new MulmoAnimation();",
167
+ "animation.coverPan('#photo_img', { axis: 'y', direction: 1, distance: 100, zoom: 1.2, start: 0, end: 'auto', easing: 'linear' });"
168
+ ],
169
+ "animation": true
170
+ }
171
+ },
172
+ {
173
+ "id": "portrait_pan_bottom_to_top_from_to_edge",
174
+ "duration": 5,
175
+ "image": {
176
+ "type": "html_tailwind",
177
+ "html": [
178
+ "<div class='h-full w-full overflow-hidden relative bg-black'>",
179
+ " <img id='photo_img' src='image:qaPortrait' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
180
+ "</div>"
181
+ ],
182
+ "script": [
183
+ "const animation = new MulmoAnimation();",
184
+ "animation.coverPan('#photo_img', { axis: 'y', from: 0, to: 100, zoom: 1.2, start: 0, end: 'auto', easing: 'linear' });"
185
+ ],
186
+ "animation": true
187
+ }
188
+ },
189
+ {
190
+ "id": "portrait_zoom_pan_left_to_right",
191
+ "duration": 5,
192
+ "image": {
193
+ "type": "html_tailwind",
194
+ "html": [
195
+ "<div class='h-full w-full overflow-hidden relative bg-black'>",
196
+ " <img id='photo_img' src='image:qaPortrait' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
197
+ "</div>"
198
+ ],
199
+ "script": [
200
+ "const animation = new MulmoAnimation();",
201
+ "animation.coverPan('#photo_img', { axis: 'x', direction: -1, distance: 100, zoom: 1.2, start: 0, end: 'auto', easing: 'linear' });"
202
+ ],
203
+ "animation": true
204
+ }
205
+ }
206
+ ]
207
+ }