motionrender 0.0.0-stage → 0.2.1

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 (203) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +61 -2
  3. package/blocks/badge.json +68 -0
  4. package/blocks/big-stat.json +240 -0
  5. package/blocks/cta-end.json +283 -0
  6. package/blocks/feature-list.json +286 -0
  7. package/blocks/footage.json +43 -0
  8. package/blocks/fx-background-swap.json +170 -0
  9. package/blocks/fx-before-after.json +212 -0
  10. package/blocks/fx-captions.json +34 -0
  11. package/blocks/fx-chat.json +368 -0
  12. package/blocks/fx-checklist.json +609 -0
  13. package/blocks/fx-clone-wall.json +181 -0
  14. package/blocks/fx-color-pop.json +92 -0
  15. package/blocks/fx-command-bridge.json +358 -0
  16. package/blocks/fx-counter-hero.json +206 -0
  17. package/blocks/fx-cta-card.json +337 -0
  18. package/blocks/fx-day-to-night.json +174 -0
  19. package/blocks/fx-duo-title.json +245 -0
  20. package/blocks/fx-duotone.json +95 -0
  21. package/blocks/fx-extruded-title.json +309 -0
  22. package/blocks/fx-gallery.json +239 -0
  23. package/blocks/fx-glass-cards.json +921 -0
  24. package/blocks/fx-glitch-title.json +373 -0
  25. package/blocks/fx-grade-look.json +91 -0
  26. package/blocks/fx-highlighter.json +53 -0
  27. package/blocks/fx-icon-orbit.json +2694 -0
  28. package/blocks/fx-lens-flare.json +325 -0
  29. package/blocks/fx-letterbox.json +105 -0
  30. package/blocks/fx-light-leak.json +140 -0
  31. package/blocks/fx-map-journey.json +443 -0
  32. package/blocks/fx-neon-outline.json +743 -0
  33. package/blocks/fx-notifications.json +456 -0
  34. package/blocks/fx-progress-ring.json +143 -0
  35. package/blocks/fx-pull-out.json +68 -0
  36. package/blocks/fx-punch-in.json +81 -0
  37. package/blocks/fx-rgb-flash.json +166 -0
  38. package/blocks/fx-shake-hit.json +120 -0
  39. package/blocks/fx-split-reveal.json +110 -0
  40. package/blocks/fx-spotlight.json +1383 -0
  41. package/blocks/fx-stats-split.json +500 -0
  42. package/blocks/fx-step-tracker.json +528 -0
  43. package/blocks/fx-sticker-freeze.json +584 -0
  44. package/blocks/fx-strike-rewrite.json +79 -0
  45. package/blocks/fx-ticker.json +179 -0
  46. package/blocks/fx-timeline.json +1287 -0
  47. package/blocks/fx-tracked-label.json +167 -0
  48. package/blocks/fx-typewriter-quote.json +164 -0
  49. package/blocks/handle.json +43 -0
  50. package/blocks/icon-row.json +404 -0
  51. package/blocks/image-caption.json +248 -0
  52. package/blocks/lower-third.json +106 -0
  53. package/blocks/phone-mockup.json +459 -0
  54. package/blocks/progress-bar.json +51 -0
  55. package/blocks/quote.json +347 -0
  56. package/blocks/section-title.json +240 -0
  57. package/blocks/split-screen.json +283 -0
  58. package/blocks/stat-grid.json +315 -0
  59. package/blocks/steps.json +266 -0
  60. package/blocks/title-hero.json +287 -0
  61. package/dist/builder.d.ts +1 -0
  62. package/dist/builder.js +169 -0
  63. package/dist/cli.js +9301 -0
  64. package/dist/fonts/LICENSE-Inter.txt +93 -0
  65. package/dist/fonts/inter-cyrillic-ext-opsz-italic.woff2 +0 -0
  66. package/dist/fonts/inter-cyrillic-ext-opsz-normal.woff2 +0 -0
  67. package/dist/fonts/inter-cyrillic-opsz-italic.woff2 +0 -0
  68. package/dist/fonts/inter-cyrillic-opsz-normal.woff2 +0 -0
  69. package/dist/fonts/inter-greek-ext-opsz-italic.woff2 +0 -0
  70. package/dist/fonts/inter-greek-ext-opsz-normal.woff2 +0 -0
  71. package/dist/fonts/inter-greek-opsz-italic.woff2 +0 -0
  72. package/dist/fonts/inter-greek-opsz-normal.woff2 +0 -0
  73. package/dist/fonts/inter-latin-ext-opsz-italic.woff2 +0 -0
  74. package/dist/fonts/inter-latin-ext-opsz-normal.woff2 +0 -0
  75. package/dist/fonts/inter-latin-opsz-italic.woff2 +0 -0
  76. package/dist/fonts/inter-latin-opsz-normal.woff2 +0 -0
  77. package/dist/fonts/inter-vietnamese-opsz-italic.woff2 +0 -0
  78. package/dist/fonts/inter-vietnamese-opsz-normal.woff2 +0 -0
  79. package/dist/index.d.ts +2 -0
  80. package/dist/index.js +2330 -0
  81. package/dist/player.d.ts +1 -0
  82. package/dist/player.js +80 -0
  83. package/dist/react.d.ts +1 -0
  84. package/dist/react.js +140 -0
  85. package/dist/runtime/canvas-runtime.js +261 -0
  86. package/dist/runtime/lottie_light_canvas.min.js +1 -0
  87. package/dist/runtime/text-layout.js +50 -0
  88. package/dist/sfx/click.wav +0 -0
  89. package/dist/sfx/ding.wav +0 -0
  90. package/dist/sfx/pop.wav +0 -0
  91. package/dist/sfx/riser.wav +0 -0
  92. package/dist/sfx/thump.wav +0 -0
  93. package/dist/sfx/tick.wav +0 -0
  94. package/dist/sfx/whoosh.wav +0 -0
  95. package/dist/types/packages/ai/src/assets.d.ts +26 -0
  96. package/dist/types/packages/ai/src/batch.d.ts +19 -0
  97. package/dist/types/packages/ai/src/compose.d.ts +34 -0
  98. package/dist/types/packages/ai/src/history.d.ts +37 -0
  99. package/dist/types/packages/ai/src/image.d.ts +19 -0
  100. package/dist/types/packages/ai/src/index.d.ts +13 -0
  101. package/dist/types/packages/ai/src/json.d.ts +2 -0
  102. package/dist/types/packages/ai/src/narrate.d.ts +63 -0
  103. package/dist/types/packages/ai/src/patch.d.ts +15 -0
  104. package/dist/types/packages/ai/src/project.d.ts +27 -0
  105. package/dist/types/packages/ai/src/prompt.d.ts +30 -0
  106. package/dist/types/packages/ai/src/providers.d.ts +109 -0
  107. package/dist/types/packages/ai/src/template.d.ts +80 -0
  108. package/dist/types/packages/ai/src/voiceover.d.ts +49 -0
  109. package/dist/types/packages/animation/src/index.d.ts +27 -0
  110. package/dist/types/packages/assets/src/cache.d.ts +26 -0
  111. package/dist/types/packages/assets/src/index.d.ts +8 -0
  112. package/dist/types/packages/builder/src/index.d.ts +270 -0
  113. package/dist/types/packages/cli/src/ai-studio-page.d.ts +1 -0
  114. package/dist/types/packages/cli/src/ai-studio.d.ts +35 -0
  115. package/dist/types/packages/cli/src/ai.d.ts +3 -0
  116. package/dist/types/packages/cli/src/args.d.ts +9 -0
  117. package/dist/types/packages/cli/src/blocks-cli.d.ts +3 -0
  118. package/dist/types/packages/cli/src/blocks.d.ts +50 -0
  119. package/dist/types/packages/cli/src/build.d.ts +1 -0
  120. package/dist/types/packages/cli/src/dev-page.d.ts +1 -0
  121. package/dist/types/packages/cli/src/dev.d.ts +13 -0
  122. package/dist/types/packages/cli/src/index.d.ts +2 -0
  123. package/dist/types/packages/cli/src/init.d.ts +10 -0
  124. package/dist/types/packages/cli/src/serve.d.ts +2 -0
  125. package/dist/types/packages/cli/src/studio.d.ts +36 -0
  126. package/dist/types/packages/cli/src/templates.d.ts +63 -0
  127. package/dist/types/packages/cli/src/thumbnail.d.ts +20 -0
  128. package/dist/types/packages/cli/src/track.d.ts +35 -0
  129. package/dist/types/packages/cli/src/worker.d.ts +13 -0
  130. package/dist/types/packages/contracts/src/index.d.ts +377 -0
  131. package/dist/types/packages/core/src/audio.d.ts +14 -0
  132. package/dist/types/packages/core/src/distributed.d.ts +50 -0
  133. package/dist/types/packages/core/src/index.d.ts +63 -0
  134. package/dist/types/packages/core/src/media.d.ts +11 -0
  135. package/dist/types/packages/core/src/review.d.ts +29 -0
  136. package/dist/types/packages/ffmpeg/src/index.d.ts +68 -0
  137. package/dist/types/packages/graphics/src/fonts.d.ts +3 -0
  138. package/dist/types/packages/graphics/src/index.d.ts +121 -0
  139. package/dist/types/packages/graphics/src/runtime.d.ts +10 -0
  140. package/dist/types/packages/jobs/src/env.d.ts +78 -0
  141. package/dist/types/packages/jobs/src/handlers.d.ts +17 -0
  142. package/dist/types/packages/jobs/src/index.d.ts +5 -0
  143. package/dist/types/packages/jobs/src/input.d.ts +18 -0
  144. package/dist/types/packages/jobs/src/queue.d.ts +70 -0
  145. package/dist/types/packages/jobs/src/redis.d.ts +42 -0
  146. package/dist/types/packages/player/src/bundle.d.ts +4 -0
  147. package/dist/types/packages/player/src/canvas-runtime.d.ts +11 -0
  148. package/dist/types/packages/player/src/index.d.ts +29 -0
  149. package/dist/types/packages/react/src/index.d.ts +76 -0
  150. package/dist/types/packages/renderer/src/index.d.ts +35 -0
  151. package/dist/types/packages/renderer/src/pool.d.ts +7 -0
  152. package/dist/types/packages/renderer/src/video.d.ts +9 -0
  153. package/dist/types/packages/schema/src/captions.d.ts +24 -0
  154. package/dist/types/packages/schema/src/expression.d.ts +1 -0
  155. package/dist/types/packages/schema/src/index.d.ts +1213 -0
  156. package/dist/types/packages/schema/src/variables.d.ts +115 -0
  157. package/dist/types/packages/storage/src/index.d.ts +78 -0
  158. package/dist/types/packages/timeline/src/index.d.ts +104 -0
  159. package/package.json +78 -4
  160. package/skills/ove/SKILL.md +356 -0
  161. package/skills/ove-ai-compose/SKILL.md +36 -0
  162. package/skills/ove-batch-videos/SKILL.md +23 -0
  163. package/skills/ove-code-video/SKILL.md +68 -0
  164. package/skills/ove-effects/SKILL.md +65 -0
  165. package/skills/ove-make-reel/SKILL.md +30 -0
  166. package/skills/ove-voiceover-captions/SKILL.md +31 -0
  167. package/studio/assets/index-CzOvWv9w.css +1 -0
  168. package/studio/assets/index-J_fvKgng.js +11 -0
  169. package/studio/index.html +16 -0
  170. package/templates/case-study/composition.json +358 -0
  171. package/templates/case-study/template.json +8 -0
  172. package/templates/event-invite/composition.json +245 -0
  173. package/templates/event-invite/template.json +8 -0
  174. package/templates/explainer-square/composition.json +1335 -0
  175. package/templates/explainer-square/template.json +13 -0
  176. package/templates/keynote-wide/composition.json +1458 -0
  177. package/templates/keynote-wide/template.json +13 -0
  178. package/templates/launch-wide/composition.json +1306 -0
  179. package/templates/launch-wide/template.json +13 -0
  180. package/templates/product-card/composition.json +196 -0
  181. package/templates/product-card/data.example.json +5 -0
  182. package/templates/product-card/template.json +8 -0
  183. package/templates/product-wide/composition.json +1609 -0
  184. package/templates/product-wide/template.json +14 -0
  185. package/templates/quote-card/composition.json +123 -0
  186. package/templates/quote-card/template.json +8 -0
  187. package/templates/sale-promo/composition.json +290 -0
  188. package/templates/sale-promo/template.json +8 -0
  189. package/templates/showcase-tall/composition.json +1646 -0
  190. package/templates/showcase-tall/template.json +14 -0
  191. package/templates/slideshow/composition.json +167 -0
  192. package/templates/slideshow/template.json +8 -0
  193. package/templates/social-reel/composition.json +252 -0
  194. package/templates/social-reel/template.json +8 -0
  195. package/templates/starter/assets/logo.svg +4 -0
  196. package/templates/starter/composition.json +84 -0
  197. package/templates/story-tall/composition.json +1379 -0
  198. package/templates/story-tall/template.json +13 -0
  199. package/themes/espresso.json +15 -0
  200. package/themes/midnight.json +15 -0
  201. package/themes/neon.json +15 -0
  202. package/themes/paper.json +15 -0
  203. package/themes/signal.json +15 -0
@@ -0,0 +1,1646 @@
1
+ {
2
+ "$schema": "./composition.schema.json",
3
+ "version": "1.0",
4
+ "id": "showcase-tall",
5
+ "name": "Showcase (9:16)",
6
+ "width": 1080,
7
+ "height": 1920,
8
+ "fps": 30,
9
+ "durationFrames": "auto",
10
+ "motionBlur": {
11
+ "samples": 4,
12
+ "shutter": 180
13
+ },
14
+ "variables": {
15
+ "bg": {
16
+ "type": "color",
17
+ "default": "#0a0710",
18
+ "description": "Theme: bg"
19
+ },
20
+ "surface": {
21
+ "type": "color",
22
+ "default": "#1b1030",
23
+ "description": "Theme: surface"
24
+ },
25
+ "text": {
26
+ "type": "color",
27
+ "default": "#ffffff",
28
+ "description": "Theme: text"
29
+ },
30
+ "muted": {
31
+ "type": "color",
32
+ "default": "#b3a6d6",
33
+ "description": "Theme: muted"
34
+ },
35
+ "accent": {
36
+ "type": "color",
37
+ "default": "#ff3cac",
38
+ "description": "Theme: accent"
39
+ },
40
+ "accent2": {
41
+ "type": "color",
42
+ "default": "#c6ff3c",
43
+ "description": "Theme: accent2"
44
+ },
45
+ "radius": {
46
+ "type": "number",
47
+ "default": 28,
48
+ "description": "Theme: radius"
49
+ },
50
+ "headWeight": {
51
+ "type": "number",
52
+ "default": 900,
53
+ "description": "Theme: headWeight"
54
+ },
55
+ "image": {
56
+ "type": "string",
57
+ "default": "",
58
+ "description": "Picture id for the hero image, or empty"
59
+ },
60
+ "kicker": {
61
+ "type": "string",
62
+ "default": "THIS WEEK",
63
+ "description": "Small label"
64
+ },
65
+ "title": {
66
+ "type": "string",
67
+ "default": "Roasted Monday, at your door by Wednesday",
68
+ "description": "The headline over the picture"
69
+ },
70
+ "screenHeadline": {
71
+ "type": "string",
72
+ "default": "Everything in one place",
73
+ "description": "Line above the phone"
74
+ },
75
+ "screenSubtitle": {
76
+ "type": "string",
77
+ "default": "See it all at a glance.",
78
+ "description": "One supporting sentence"
79
+ },
80
+ "image2": {
81
+ "type": "string",
82
+ "default": "",
83
+ "description": "Picture id for the phone screen, or empty"
84
+ },
85
+ "benefitsTitle": {
86
+ "type": "string",
87
+ "default": "Why people switch",
88
+ "description": "Heading of the three benefits"
89
+ },
90
+ "benefits": {
91
+ "type": "list",
92
+ "items": {
93
+ "icon": {
94
+ "type": "string",
95
+ "default": "check"
96
+ },
97
+ "label": {
98
+ "type": "string",
99
+ "default": ""
100
+ },
101
+ "detail": {
102
+ "type": "string",
103
+ "default": ""
104
+ }
105
+ },
106
+ "default": [
107
+ {
108
+ "icon": "bolt",
109
+ "label": "Fast",
110
+ "detail": "Ready in minutes."
111
+ },
112
+ {
113
+ "icon": "heart",
114
+ "label": "Loved",
115
+ "detail": "Rated 4.9."
116
+ },
117
+ {
118
+ "icon": "clock",
119
+ "label": "On time",
120
+ "detail": "Every time."
121
+ }
122
+ ],
123
+ "description": "Exactly three: icon is one of check, bolt, star, heart, clock; a short label; one line of detail"
124
+ },
125
+ "ctaHeadline": {
126
+ "type": "string",
127
+ "default": "Try it today",
128
+ "description": "Closing line"
129
+ },
130
+ "ctaButton": {
131
+ "type": "string",
132
+ "default": "Get started",
133
+ "description": "Button text"
134
+ },
135
+ "url": {
136
+ "type": "string",
137
+ "default": "example.com",
138
+ "description": "Web address"
139
+ },
140
+ "badge": {
141
+ "type": "string",
142
+ "default": "NEW",
143
+ "description": "Corner label on the opening scene"
144
+ }
145
+ },
146
+ "scenes": [
147
+ {
148
+ "id": "image-caption",
149
+ "name": "Image with caption",
150
+ "durationFrames": 120,
151
+ "camera": {
152
+ "animations": [
153
+ {
154
+ "property": "zoom",
155
+ "keyframes": [
156
+ {
157
+ "frame": 0,
158
+ "value": 1
159
+ },
160
+ {
161
+ "frame": 120,
162
+ "value": 1.08,
163
+ "easing": "drift"
164
+ }
165
+ ]
166
+ }
167
+ ]
168
+ },
169
+ "layers": [
170
+ {
171
+ "use": "image_caption",
172
+ "id": "image-caption-block",
173
+ "with": {
174
+ "image": "{{image}}",
175
+ "kicker": "{{kicker}}",
176
+ "headline": "{{title}}"
177
+ }
178
+ },
179
+ {
180
+ "use": "badge",
181
+ "id": "badge",
182
+ "startFrame": 0,
183
+ "endFrame": 90,
184
+ "fixed": true,
185
+ "with": {
186
+ "label": "{{badge}}"
187
+ }
188
+ }
189
+ ]
190
+ },
191
+ {
192
+ "id": "phone-mockup",
193
+ "name": "Phone mockup",
194
+ "durationFrames": 150,
195
+ "camera": {
196
+ "animations": [
197
+ {
198
+ "property": "zoom",
199
+ "keyframes": [
200
+ {
201
+ "frame": 0,
202
+ "value": 1
203
+ },
204
+ {
205
+ "frame": 150,
206
+ "value": 1.04,
207
+ "easing": "drift"
208
+ }
209
+ ]
210
+ }
211
+ ]
212
+ },
213
+ "layers": [
214
+ {
215
+ "use": "phone_mockup",
216
+ "id": "phone-mockup-block",
217
+ "with": {
218
+ "headline": "{{screenHeadline}}",
219
+ "subtitle": "{{screenSubtitle}}",
220
+ "image": "{{image2}}"
221
+ }
222
+ }
223
+ ],
224
+ "transitionIn": {
225
+ "type": "push",
226
+ "durationFrames": 16,
227
+ "direction": "left",
228
+ "easing": "glide"
229
+ }
230
+ },
231
+ {
232
+ "id": "icon-row",
233
+ "name": "Icon row",
234
+ "durationFrames": 150,
235
+ "camera": {
236
+ "animations": [
237
+ {
238
+ "property": "zoom",
239
+ "keyframes": [
240
+ {
241
+ "frame": 0,
242
+ "value": 1
243
+ },
244
+ {
245
+ "frame": 150,
246
+ "value": 1.04,
247
+ "easing": "drift"
248
+ }
249
+ ]
250
+ }
251
+ ]
252
+ },
253
+ "layers": [
254
+ {
255
+ "use": "icon_row",
256
+ "id": "icon-row-block",
257
+ "with": {
258
+ "title": "{{benefitsTitle}}",
259
+ "items": "{{benefits}}"
260
+ }
261
+ }
262
+ ],
263
+ "transitionIn": {
264
+ "type": "push",
265
+ "durationFrames": 16,
266
+ "direction": "left",
267
+ "easing": "glide"
268
+ }
269
+ },
270
+ {
271
+ "id": "cta-end",
272
+ "name": "Call to action",
273
+ "durationFrames": 120,
274
+ "camera": {
275
+ "animations": [
276
+ {
277
+ "property": "zoom",
278
+ "keyframes": [
279
+ {
280
+ "frame": 0,
281
+ "value": 1
282
+ },
283
+ {
284
+ "frame": 120,
285
+ "value": 1.06,
286
+ "easing": "drift"
287
+ }
288
+ ]
289
+ }
290
+ ]
291
+ },
292
+ "layers": [
293
+ {
294
+ "use": "cta_end",
295
+ "id": "cta-end-block",
296
+ "with": {
297
+ "headline": "{{ctaHeadline}}",
298
+ "button": "{{ctaButton}}",
299
+ "url": "{{url}}"
300
+ }
301
+ }
302
+ ],
303
+ "transitionIn": {
304
+ "type": "push",
305
+ "durationFrames": 16,
306
+ "direction": "left",
307
+ "easing": "glide"
308
+ }
309
+ }
310
+ ],
311
+ "components": {
312
+ "image_caption": {
313
+ "description": "A full-frame picture with a caption over a soft shade at the bottom. Falls back to a colour wash without a picture.",
314
+ "params": {
315
+ "image": {
316
+ "type": "string",
317
+ "default": "",
318
+ "description": "A picture (asset id or relative path)"
319
+ },
320
+ "kicker": {
321
+ "type": "string",
322
+ "default": "THIS WEEK"
323
+ },
324
+ "headline": {
325
+ "type": "string",
326
+ "default": "Roasted Monday, at your door by Wednesday"
327
+ }
328
+ },
329
+ "layers": [
330
+ {
331
+ "id": "bg",
332
+ "type": "rect",
333
+ "x": 0,
334
+ "y": 0,
335
+ "width": "{{canvas.width}}",
336
+ "height": "{{canvas.height}}",
337
+ "fill": "{{bg}}"
338
+ },
339
+ {
340
+ "id": "glow",
341
+ "type": "circle",
342
+ "x": "{{round(canvas.width * 0.5)}}",
343
+ "y": "{{round(canvas.height * 0.3)}}",
344
+ "width": "{{round(min(canvas.width, canvas.height) * 1.1)}}",
345
+ "fill": "{{accent}}",
346
+ "opacity": 0.2,
347
+ "blur": 120,
348
+ "animations": [
349
+ {
350
+ "property": "scale",
351
+ "keyframes": [
352
+ {
353
+ "frame": 0,
354
+ "value": 0.9
355
+ },
356
+ {
357
+ "frame": 150,
358
+ "value": 1.1,
359
+ "easing": "drift"
360
+ }
361
+ ]
362
+ },
363
+ {
364
+ "property": "x",
365
+ "keyframes": [
366
+ {
367
+ "frame": 0,
368
+ "value": "{{round(canvas.width * 0.5)}}"
369
+ },
370
+ {
371
+ "frame": 180,
372
+ "value": "{{round(canvas.width * 0.4)}}",
373
+ "easing": "drift"
374
+ }
375
+ ]
376
+ }
377
+ ]
378
+ },
379
+ {
380
+ "id": "glow2",
381
+ "type": "circle",
382
+ "x": "{{round(canvas.width * 0.5)}}",
383
+ "y": "{{round(canvas.height * 0.7)}}",
384
+ "width": "{{round(min(canvas.width, canvas.height) * 0.8)}}",
385
+ "fill": "{{accent2}}",
386
+ "opacity": 0.12,
387
+ "blur": 140,
388
+ "animations": [
389
+ {
390
+ "property": "y",
391
+ "keyframes": [
392
+ {
393
+ "frame": 0,
394
+ "value": "{{round(canvas.height * 0.7)}}"
395
+ },
396
+ {
397
+ "frame": 180,
398
+ "value": "{{round(canvas.height * 0.6000000000000001)}}",
399
+ "easing": "drift"
400
+ }
401
+ ]
402
+ }
403
+ ]
404
+ },
405
+ {
406
+ "if": "{{image}}",
407
+ "id": "photo",
408
+ "type": "image",
409
+ "src": "{{image}}",
410
+ "objectFit": "cover",
411
+ "x": 0,
412
+ "y": 0,
413
+ "width": "{{canvas.width}}",
414
+ "height": "{{canvas.height}}"
415
+ },
416
+ {
417
+ "id": "shade",
418
+ "type": "rect",
419
+ "x": 0,
420
+ "y": "{{round(canvas.height * 0.35)}}",
421
+ "width": "{{canvas.width}}",
422
+ "height": "{{round(canvas.height * 0.65)}}",
423
+ "fill": {
424
+ "type": "linear",
425
+ "from": [
426
+ 0,
427
+ "{{round(canvas.height * 0.35)}}"
428
+ ],
429
+ "to": [
430
+ 0,
431
+ "{{canvas.height}}"
432
+ ],
433
+ "stops": [
434
+ {
435
+ "offset": 0,
436
+ "color": "transparent"
437
+ },
438
+ {
439
+ "offset": 1,
440
+ "color": "#000000d0"
441
+ }
442
+ ]
443
+ }
444
+ },
445
+ {
446
+ "id": "caption",
447
+ "type": "group",
448
+ "x": "{{round(canvas.width * 0.08)}}",
449
+ "y": "{{round(canvas.height * 0.35)}}",
450
+ "width": "{{round(canvas.width * 0.84)}}",
451
+ "height": "{{round(canvas.height * 0.57)}}",
452
+ "layout": {
453
+ "direction": "column",
454
+ "gap": "{{round(min(canvas.width, canvas.height) * 0.025)}}",
455
+ "align": "start",
456
+ "justify": "end"
457
+ },
458
+ "children": [
459
+ {
460
+ "id": "kicker",
461
+ "type": "text",
462
+ "content": "{{kicker}}",
463
+ "fontSize": "{{round(min(canvas.width, canvas.height) * 0.032)}}",
464
+ "color": "{{accent}}",
465
+ "fontWeight": 700,
466
+ "letterSpacing": "{{round(min(canvas.width, canvas.height) * 0.006)}}",
467
+ "startFrame": 0,
468
+ "animations": [
469
+ {
470
+ "property": "opacity",
471
+ "keyframes": [
472
+ {
473
+ "frame": 0,
474
+ "value": 0
475
+ },
476
+ {
477
+ "frame": 14,
478
+ "value": 1,
479
+ "easing": "glide"
480
+ }
481
+ ]
482
+ },
483
+ {
484
+ "property": "y",
485
+ "keyframes": [
486
+ {
487
+ "frame": 0,
488
+ "value": 20,
489
+ "easing": "land"
490
+ },
491
+ {
492
+ "frame": 18,
493
+ "value": 0
494
+ }
495
+ ]
496
+ }
497
+ ]
498
+ },
499
+ {
500
+ "id": "headline",
501
+ "type": "text",
502
+ "content": "{{headline}}",
503
+ "fontSize": "{{round(min(canvas.width, canvas.height) * 0.075)}}",
504
+ "color": "#ffffff",
505
+ "fontWeight": "{{headWeight}}",
506
+ "lineHeight": 1.08,
507
+ "maxWidth": "{{round(canvas.width * 0.84)}}",
508
+ "maxLines": 3,
509
+ "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.05)}}",
510
+ "split": {
511
+ "by": "words",
512
+ "stagger": 4,
513
+ "preset": "rise",
514
+ "duration": 18
515
+ },
516
+ "startFrame": 8
517
+ }
518
+ ]
519
+ },
520
+ {
521
+ "id": "sfx-in",
522
+ "type": "audio",
523
+ "src": "sfx:whoosh",
524
+ "startFrame": 4,
525
+ "volume": 0.35
526
+ }
527
+ ]
528
+ },
529
+ "phone_mockup": {
530
+ "description": "A phone showing your screenshot (or a stand-in app) beside a headline. Side by side on wide video, stacked on tall.",
531
+ "params": {
532
+ "headline": {
533
+ "type": "string",
534
+ "default": "Everything in one place"
535
+ },
536
+ "subtitle": {
537
+ "type": "string",
538
+ "default": "See your whole day at a glance."
539
+ },
540
+ "image": {
541
+ "type": "string",
542
+ "default": "",
543
+ "description": "A screenshot (asset id or relative path); leave empty for a stand-in app"
544
+ }
545
+ },
546
+ "layers": [
547
+ {
548
+ "id": "bg",
549
+ "type": "rect",
550
+ "x": 0,
551
+ "y": 0,
552
+ "width": "{{canvas.width}}",
553
+ "height": "{{canvas.height}}",
554
+ "fill": "{{bg}}"
555
+ },
556
+ {
557
+ "id": "glow",
558
+ "type": "circle",
559
+ "x": "{{round(canvas.width * 0.15)}}",
560
+ "y": "{{round(canvas.height * 0.2)}}",
561
+ "width": "{{round(min(canvas.width, canvas.height) * 1.1)}}",
562
+ "fill": "{{accent}}",
563
+ "opacity": 0.14,
564
+ "blur": 120,
565
+ "animations": [
566
+ {
567
+ "property": "scale",
568
+ "keyframes": [
569
+ {
570
+ "frame": 0,
571
+ "value": 0.9
572
+ },
573
+ {
574
+ "frame": 150,
575
+ "value": 1.1,
576
+ "easing": "drift"
577
+ }
578
+ ]
579
+ },
580
+ {
581
+ "property": "x",
582
+ "keyframes": [
583
+ {
584
+ "frame": 0,
585
+ "value": "{{round(canvas.width * 0.15)}}"
586
+ },
587
+ {
588
+ "frame": 180,
589
+ "value": "{{round(canvas.width * 0.04999999999999999)}}",
590
+ "easing": "drift"
591
+ }
592
+ ]
593
+ }
594
+ ]
595
+ },
596
+ {
597
+ "id": "glow2",
598
+ "type": "circle",
599
+ "x": "{{round(canvas.width * 0.85)}}",
600
+ "y": "{{round(canvas.height * 0.8)}}",
601
+ "width": "{{round(min(canvas.width, canvas.height) * 0.8)}}",
602
+ "fill": "{{accent2}}",
603
+ "opacity": 0.084,
604
+ "blur": 140,
605
+ "animations": [
606
+ {
607
+ "property": "y",
608
+ "keyframes": [
609
+ {
610
+ "frame": 0,
611
+ "value": "{{round(canvas.height * 0.8)}}"
612
+ },
613
+ {
614
+ "frame": 180,
615
+ "value": "{{round(canvas.height * 0.7)}}",
616
+ "easing": "drift"
617
+ }
618
+ ]
619
+ }
620
+ ]
621
+ },
622
+ {
623
+ "id": "row",
624
+ "type": "group",
625
+ "x": 0,
626
+ "y": 0,
627
+ "width": "{{canvas.width}}",
628
+ "height": "{{canvas.height}}",
629
+ "layout": {
630
+ "direction": "{{canvas.width > canvas.height ? 'row' : 'column'}}",
631
+ "gap": "{{round(min(canvas.width, canvas.height) * 0.07)}}",
632
+ "align": "center",
633
+ "justify": "center"
634
+ },
635
+ "children": [
636
+ {
637
+ "id": "copy",
638
+ "type": "group",
639
+ "width": "{{canvas.width > canvas.height ? round(canvas.width * 0.38) : round(canvas.width * 0.84)}}",
640
+ "layout": {
641
+ "direction": "column",
642
+ "gap": "{{round(min(canvas.width, canvas.height) * 0.025)}}",
643
+ "align": "{{canvas.width > canvas.height ? 'start' : 'center'}}"
644
+ },
645
+ "children": [
646
+ {
647
+ "id": "headline",
648
+ "type": "text",
649
+ "content": "{{headline}}",
650
+ "fontSize": "{{round(min(canvas.width, canvas.height) * 0.075)}}",
651
+ "color": "{{text}}",
652
+ "fontWeight": "{{headWeight}}",
653
+ "textAlign": "{{canvas.width > canvas.height ? 'left' : 'center'}}",
654
+ "maxWidth": "{{canvas.width > canvas.height ? round(canvas.width * 0.38) : round(canvas.width * 0.84)}}",
655
+ "maxLines": 4,
656
+ "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.05)}}",
657
+ "lineHeight": 1.08,
658
+ "startFrame": 0,
659
+ "animations": [
660
+ {
661
+ "property": "opacity",
662
+ "keyframes": [
663
+ {
664
+ "frame": 0,
665
+ "value": 0
666
+ },
667
+ {
668
+ "frame": 14,
669
+ "value": 1,
670
+ "easing": "glide"
671
+ }
672
+ ]
673
+ },
674
+ {
675
+ "property": "y",
676
+ "keyframes": [
677
+ {
678
+ "frame": 0,
679
+ "value": 30,
680
+ "easing": "land"
681
+ },
682
+ {
683
+ "frame": 18,
684
+ "value": 0
685
+ }
686
+ ]
687
+ }
688
+ ]
689
+ },
690
+ {
691
+ "id": "rule",
692
+ "type": "rect",
693
+ "width": "{{round(min(canvas.width, canvas.height) * 0.12)}}",
694
+ "height": "{{round(min(canvas.width, canvas.height) * 0.008)}}",
695
+ "radius": "{{round(min(canvas.width, canvas.height) * 0.004)}}",
696
+ "fill": "{{accent}}",
697
+ "startFrame": 18,
698
+ "animations": [
699
+ {
700
+ "property": "width",
701
+ "keyframes": [
702
+ {
703
+ "frame": 0,
704
+ "value": 1
705
+ },
706
+ {
707
+ "frame": 20,
708
+ "value": "{{round(min(canvas.width, canvas.height) * 0.12)}}",
709
+ "easing": "land"
710
+ }
711
+ ]
712
+ }
713
+ ]
714
+ },
715
+ {
716
+ "id": "subtitle",
717
+ "type": "text",
718
+ "content": "{{subtitle}}",
719
+ "fontSize": "{{round(min(canvas.width, canvas.height) * 0.04)}}",
720
+ "color": "{{muted}}",
721
+ "textAlign": "{{canvas.width > canvas.height ? 'left' : 'center'}}",
722
+ "maxWidth": "{{canvas.width > canvas.height ? round(canvas.width * 0.36) : round(canvas.width * 0.8)}}",
723
+ "maxLines": 3,
724
+ "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.032)}}",
725
+ "startFrame": 24,
726
+ "animations": [
727
+ {
728
+ "property": "opacity",
729
+ "keyframes": [
730
+ {
731
+ "frame": 0,
732
+ "value": 0
733
+ },
734
+ {
735
+ "frame": 14,
736
+ "value": 1,
737
+ "easing": "glide"
738
+ }
739
+ ]
740
+ },
741
+ {
742
+ "property": "y",
743
+ "keyframes": [
744
+ {
745
+ "frame": 0,
746
+ "value": 20,
747
+ "easing": "land"
748
+ },
749
+ {
750
+ "frame": 18,
751
+ "value": 0
752
+ }
753
+ ]
754
+ }
755
+ ]
756
+ }
757
+ ]
758
+ },
759
+ {
760
+ "id": "phone",
761
+ "type": "group",
762
+ "width": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49)}}",
763
+ "height": "{{round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4)}}",
764
+ "animations": [
765
+ {
766
+ "property": "y",
767
+ "keyframes": [
768
+ {
769
+ "frame": 0,
770
+ "value": "{{round(canvas.height * 0.1)}}",
771
+ "easing": "land"
772
+ },
773
+ {
774
+ "frame": 26,
775
+ "value": 0
776
+ },
777
+ {
778
+ "frame": 100,
779
+ "value": "{{round(-canvas.height * 0.012)}}",
780
+ "easing": "drift"
781
+ },
782
+ {
783
+ "frame": 150,
784
+ "value": 0,
785
+ "easing": "drift"
786
+ }
787
+ ]
788
+ },
789
+ {
790
+ "property": "opacity",
791
+ "keyframes": [
792
+ {
793
+ "frame": 0,
794
+ "value": 0
795
+ },
796
+ {
797
+ "frame": 12,
798
+ "value": 1
799
+ }
800
+ ]
801
+ }
802
+ ],
803
+ "children": [
804
+ {
805
+ "id": "shadow",
806
+ "type": "rect",
807
+ "x": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.04)}}",
808
+ "y": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.06)}}",
809
+ "width": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49)}}",
810
+ "height": "{{round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4)}}",
811
+ "radius": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.14)}}",
812
+ "fill": "#000000",
813
+ "opacity": 0.35,
814
+ "blur": 30
815
+ },
816
+ {
817
+ "id": "body",
818
+ "type": "rect",
819
+ "x": 0,
820
+ "y": 0,
821
+ "width": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49)}}",
822
+ "height": "{{round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4)}}",
823
+ "radius": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.14)}}",
824
+ "fill": "{{surface}}",
825
+ "stroke": "{{muted}}",
826
+ "strokeWidth": 2
827
+ },
828
+ {
829
+ "id": "screen",
830
+ "type": "rect",
831
+ "x": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.045)}}",
832
+ "y": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.045)}}",
833
+ "width": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) - 2 * round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.045)}}",
834
+ "height": "{{round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) - 2 * round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.045)}}",
835
+ "radius": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.1)}}",
836
+ "fill": "{{bg}}"
837
+ },
838
+ {
839
+ "if": "{{image}}",
840
+ "id": "shot",
841
+ "type": "image",
842
+ "src": "{{image}}",
843
+ "objectFit": "cover",
844
+ "x": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.045)}}",
845
+ "y": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.045)}}",
846
+ "width": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) - 2 * round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.045)}}",
847
+ "height": "{{round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) - 2 * round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.045)}}",
848
+ "radius": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.1)}}"
849
+ },
850
+ {
851
+ "if": "{{!image}}",
852
+ "id": "app",
853
+ "type": "group",
854
+ "x": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.045)}}",
855
+ "y": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.045)}}",
856
+ "children": [
857
+ {
858
+ "id": "head",
859
+ "type": "rect",
860
+ "x": 0,
861
+ "y": 0,
862
+ "width": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) - 2 * round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.045)}}",
863
+ "height": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.16)}}",
864
+ "radius": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.1)}}",
865
+ "fill": "{{accent}}"
866
+ },
867
+ {
868
+ "id": "row1",
869
+ "type": "rect",
870
+ "x": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.06)}}",
871
+ "y": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.22)}}",
872
+ "width": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.62)}}",
873
+ "height": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.022)}}",
874
+ "radius": 8,
875
+ "fill": "{{muted}}",
876
+ "opacity": 0.8
877
+ },
878
+ {
879
+ "id": "row2",
880
+ "type": "rect",
881
+ "x": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.06)}}",
882
+ "y": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.27)}}",
883
+ "width": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.45)}}",
884
+ "height": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.018)}}",
885
+ "radius": 8,
886
+ "fill": "{{muted}}",
887
+ "opacity": 0.5
888
+ },
889
+ {
890
+ "id": "card1",
891
+ "type": "rect",
892
+ "x": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.06)}}",
893
+ "y": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.34)}}",
894
+ "width": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.82)}}",
895
+ "height": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.2)}}",
896
+ "radius": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.05)}}",
897
+ "fill": "{{surface}}"
898
+ },
899
+ {
900
+ "id": "card2",
901
+ "type": "rect",
902
+ "x": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.06)}}",
903
+ "y": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.58)}}",
904
+ "width": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.82)}}",
905
+ "height": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.2)}}",
906
+ "radius": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.05)}}",
907
+ "fill": "{{surface}}"
908
+ },
909
+ {
910
+ "id": "dot",
911
+ "type": "circle",
912
+ "x": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.2)}}",
913
+ "y": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.44)}}",
914
+ "width": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.1)}}",
915
+ "fill": "{{accent2}}"
916
+ },
917
+ {
918
+ "id": "dot2",
919
+ "type": "circle",
920
+ "x": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.2)}}",
921
+ "y": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.68)}}",
922
+ "width": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.1)}}",
923
+ "fill": "{{accent}}"
924
+ }
925
+ ]
926
+ },
927
+ {
928
+ "id": "notch",
929
+ "type": "rect",
930
+ "x": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.36)}}",
931
+ "y": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.065)}}",
932
+ "width": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.28)}}",
933
+ "height": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.055)}}",
934
+ "radius": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.03)}}",
935
+ "fill": "{{surface}}"
936
+ }
937
+ ]
938
+ }
939
+ ]
940
+ },
941
+ {
942
+ "id": "sfx-in",
943
+ "type": "audio",
944
+ "src": "sfx:whoosh",
945
+ "startFrame": 2,
946
+ "volume": 0.4
947
+ },
948
+ {
949
+ "id": "sfx-land",
950
+ "type": "audio",
951
+ "src": "sfx:thump",
952
+ "startFrame": 24,
953
+ "volume": 0.3
954
+ }
955
+ ]
956
+ },
957
+ "icon_row": {
958
+ "description": "A title and three features, each with an icon (check, bolt, star, heart or clock), a label and a line of detail.",
959
+ "params": {
960
+ "title": {
961
+ "type": "string",
962
+ "default": "Why people switch"
963
+ },
964
+ "items": {
965
+ "type": "list",
966
+ "items": {
967
+ "icon": {
968
+ "type": "string",
969
+ "default": "check"
970
+ },
971
+ "label": {
972
+ "type": "string",
973
+ "default": ""
974
+ },
975
+ "detail": {
976
+ "type": "string",
977
+ "default": ""
978
+ }
979
+ },
980
+ "default": [
981
+ {
982
+ "icon": "bolt",
983
+ "label": "Fast",
984
+ "detail": "Ready in minutes, not days."
985
+ },
986
+ {
987
+ "icon": "heart",
988
+ "label": "Loved",
989
+ "detail": "Rated 4.9 by our customers."
990
+ },
991
+ {
992
+ "icon": "clock",
993
+ "label": "Always on time",
994
+ "detail": "Delivered when you expect it."
995
+ }
996
+ ]
997
+ }
998
+ },
999
+ "layers": [
1000
+ {
1001
+ "id": "bg",
1002
+ "type": "rect",
1003
+ "x": 0,
1004
+ "y": 0,
1005
+ "width": "{{canvas.width}}",
1006
+ "height": "{{canvas.height}}",
1007
+ "fill": "{{bg}}"
1008
+ },
1009
+ {
1010
+ "id": "glow",
1011
+ "type": "circle",
1012
+ "x": "{{round(canvas.width * 0.7)}}",
1013
+ "y": "{{round(canvas.height * 0.7)}}",
1014
+ "width": "{{round(min(canvas.width, canvas.height) * 1.1)}}",
1015
+ "fill": "{{accent}}",
1016
+ "opacity": 0.1,
1017
+ "blur": 120,
1018
+ "animations": [
1019
+ {
1020
+ "property": "scale",
1021
+ "keyframes": [
1022
+ {
1023
+ "frame": 0,
1024
+ "value": 0.9
1025
+ },
1026
+ {
1027
+ "frame": 150,
1028
+ "value": 1.1,
1029
+ "easing": "drift"
1030
+ }
1031
+ ]
1032
+ },
1033
+ {
1034
+ "property": "x",
1035
+ "keyframes": [
1036
+ {
1037
+ "frame": 0,
1038
+ "value": "{{round(canvas.width * 0.7)}}"
1039
+ },
1040
+ {
1041
+ "frame": 180,
1042
+ "value": "{{round(canvas.width * 0.6)}}",
1043
+ "easing": "drift"
1044
+ }
1045
+ ]
1046
+ }
1047
+ ]
1048
+ },
1049
+ {
1050
+ "id": "glow2",
1051
+ "type": "circle",
1052
+ "x": "{{round(canvas.width * 0.30000000000000004)}}",
1053
+ "y": "{{round(canvas.height * 0.30000000000000004)}}",
1054
+ "width": "{{round(min(canvas.width, canvas.height) * 0.8)}}",
1055
+ "fill": "{{accent2}}",
1056
+ "opacity": 0.06,
1057
+ "blur": 140,
1058
+ "animations": [
1059
+ {
1060
+ "property": "y",
1061
+ "keyframes": [
1062
+ {
1063
+ "frame": 0,
1064
+ "value": "{{round(canvas.height * 0.30000000000000004)}}"
1065
+ },
1066
+ {
1067
+ "frame": 180,
1068
+ "value": "{{round(canvas.height * 0.20000000000000007)}}",
1069
+ "easing": "drift"
1070
+ }
1071
+ ]
1072
+ }
1073
+ ]
1074
+ },
1075
+ {
1076
+ "id": "stack",
1077
+ "type": "group",
1078
+ "x": "{{round(canvas.width * 0.08)}}",
1079
+ "y": 0,
1080
+ "width": "{{round(canvas.width * 0.84)}}",
1081
+ "height": "{{canvas.height}}",
1082
+ "layout": {
1083
+ "direction": "column",
1084
+ "gap": "{{round(min(canvas.width, canvas.height) * 0.07)}}",
1085
+ "align": "start",
1086
+ "justify": "center"
1087
+ },
1088
+ "children": [
1089
+ {
1090
+ "id": "title",
1091
+ "type": "text",
1092
+ "content": "{{title}}",
1093
+ "fontSize": "{{round(min(canvas.width, canvas.height) * 0.06)}}",
1094
+ "color": "{{text}}",
1095
+ "fontWeight": "{{headWeight}}",
1096
+ "maxWidth": "{{round(canvas.width * 0.84)}}",
1097
+ "maxLines": 2,
1098
+ "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.04)}}",
1099
+ "startFrame": 0,
1100
+ "animations": [
1101
+ {
1102
+ "property": "opacity",
1103
+ "keyframes": [
1104
+ {
1105
+ "frame": 0,
1106
+ "value": 0
1107
+ },
1108
+ {
1109
+ "frame": 14,
1110
+ "value": 1,
1111
+ "easing": "glide"
1112
+ }
1113
+ ]
1114
+ },
1115
+ {
1116
+ "property": "y",
1117
+ "keyframes": [
1118
+ {
1119
+ "frame": 0,
1120
+ "value": 24,
1121
+ "easing": "land"
1122
+ },
1123
+ {
1124
+ "frame": 18,
1125
+ "value": 0
1126
+ }
1127
+ ]
1128
+ }
1129
+ ]
1130
+ },
1131
+ {
1132
+ "id": "cells",
1133
+ "type": "group",
1134
+ "width": "{{round(canvas.width * 0.84)}}",
1135
+ "layout": {
1136
+ "direction": "{{canvas.width > canvas.height ? 'row' : 'column'}}",
1137
+ "gap": "{{round(min(canvas.width, canvas.height) * 0.05)}}",
1138
+ "align": "start",
1139
+ "justify": "{{canvas.width > canvas.height ? 'space-between' : 'start'}}"
1140
+ },
1141
+ "children": [
1142
+ {
1143
+ "repeat": "{{items}}",
1144
+ "as": "it",
1145
+ "each": [
1146
+ {
1147
+ "id": "cell-{{index}}",
1148
+ "type": "group",
1149
+ "startFrame": "{{14 + index * 12}}",
1150
+ "layout": {
1151
+ "direction": "{{canvas.width > canvas.height ? 'column' : 'row'}}",
1152
+ "gap": "{{round(min(canvas.width, canvas.height) * 0.025)}}",
1153
+ "align": "start"
1154
+ },
1155
+ "animations": [
1156
+ {
1157
+ "property": "opacity",
1158
+ "keyframes": [
1159
+ {
1160
+ "frame": 0,
1161
+ "value": 0
1162
+ },
1163
+ {
1164
+ "frame": 12,
1165
+ "value": 1
1166
+ }
1167
+ ]
1168
+ },
1169
+ {
1170
+ "property": "y",
1171
+ "keyframes": [
1172
+ {
1173
+ "frame": 0,
1174
+ "value": 30,
1175
+ "easing": "land"
1176
+ },
1177
+ {
1178
+ "frame": 18,
1179
+ "value": 0
1180
+ }
1181
+ ]
1182
+ }
1183
+ ],
1184
+ "children": [
1185
+ {
1186
+ "id": "icon-{{index}}",
1187
+ "type": "group",
1188
+ "width": "{{round(min(canvas.width, canvas.height) * 0.11)}}",
1189
+ "height": "{{round(min(canvas.width, canvas.height) * 0.11)}}",
1190
+ "children": [
1191
+ {
1192
+ "id": "disc",
1193
+ "type": "circle",
1194
+ "x": "{{round(min(canvas.width, canvas.height) * 0.055)}}",
1195
+ "y": "{{round(min(canvas.width, canvas.height) * 0.055)}}",
1196
+ "width": "{{round(min(canvas.width, canvas.height) * 0.11)}}",
1197
+ "fill": "{{accent}}"
1198
+ },
1199
+ {
1200
+ "if": "{{it.icon == 'check'}}",
1201
+ "id": "glyph-check",
1202
+ "type": "path",
1203
+ "d": "M5 12.5 L10 17.5 L19 7",
1204
+ "x": "{{round(min(canvas.width, canvas.height) * 0.055 - min(canvas.width, canvas.height) * 0.0275)}}",
1205
+ "y": "{{round(min(canvas.width, canvas.height) * 0.055 - min(canvas.width, canvas.height) * 0.0275)}}",
1206
+ "width": 24,
1207
+ "height": 24,
1208
+ "scale": "{{min(canvas.width, canvas.height) * 0.055 / 24}}",
1209
+ "stroke": "{{bg}}",
1210
+ "strokeWidth": 2,
1211
+ "lineCap": "round",
1212
+ "lineJoin": "round"
1213
+ },
1214
+ {
1215
+ "if": "{{it.icon == 'bolt'}}",
1216
+ "id": "glyph-bolt",
1217
+ "type": "path",
1218
+ "d": "M13 2 L4 14 H11 L10 22 L20 9 H13 Z",
1219
+ "x": "{{round(min(canvas.width, canvas.height) * 0.055 - min(canvas.width, canvas.height) * 0.0275)}}",
1220
+ "y": "{{round(min(canvas.width, canvas.height) * 0.055 - min(canvas.width, canvas.height) * 0.0275)}}",
1221
+ "width": 24,
1222
+ "height": 24,
1223
+ "scale": "{{min(canvas.width, canvas.height) * 0.055 / 24}}",
1224
+ "stroke": "{{bg}}",
1225
+ "strokeWidth": 2,
1226
+ "lineCap": "round",
1227
+ "lineJoin": "round"
1228
+ },
1229
+ {
1230
+ "if": "{{it.icon == 'star'}}",
1231
+ "id": "glyph-star",
1232
+ "type": "path",
1233
+ "d": "M12 2.5 L14.9 8.9 L22 9.7 L16.8 14.5 L18.2 21.5 L12 18 L5.8 21.5 L7.2 14.5 L2 9.7 L9.1 8.9 Z",
1234
+ "x": "{{round(min(canvas.width, canvas.height) * 0.055 - min(canvas.width, canvas.height) * 0.0275)}}",
1235
+ "y": "{{round(min(canvas.width, canvas.height) * 0.055 - min(canvas.width, canvas.height) * 0.0275)}}",
1236
+ "width": 24,
1237
+ "height": 24,
1238
+ "scale": "{{min(canvas.width, canvas.height) * 0.055 / 24}}",
1239
+ "stroke": "{{bg}}",
1240
+ "strokeWidth": 2,
1241
+ "lineCap": "round",
1242
+ "lineJoin": "round"
1243
+ },
1244
+ {
1245
+ "if": "{{it.icon == 'heart'}}",
1246
+ "id": "glyph-heart",
1247
+ "type": "path",
1248
+ "d": "M12 21 C5 15.5 2.5 12 2.5 8.5 C2.5 5.7 4.7 3.5 7.5 3.5 C9.4 3.5 11 4.5 12 6 C13 4.5 14.6 3.5 16.5 3.5 C19.3 3.5 21.5 5.7 21.5 8.5 C21.5 12 19 15.5 12 21 Z",
1249
+ "x": "{{round(min(canvas.width, canvas.height) * 0.055 - min(canvas.width, canvas.height) * 0.0275)}}",
1250
+ "y": "{{round(min(canvas.width, canvas.height) * 0.055 - min(canvas.width, canvas.height) * 0.0275)}}",
1251
+ "width": 24,
1252
+ "height": 24,
1253
+ "scale": "{{min(canvas.width, canvas.height) * 0.055 / 24}}",
1254
+ "stroke": "{{bg}}",
1255
+ "strokeWidth": 2,
1256
+ "lineCap": "round",
1257
+ "lineJoin": "round"
1258
+ },
1259
+ {
1260
+ "if": "{{it.icon == 'clock'}}",
1261
+ "id": "glyph-clock",
1262
+ "type": "path",
1263
+ "d": "M12 3 A9 9 0 1 0 12 21 A9 9 0 1 0 12 3 Z M12 7 V12 L15.5 14",
1264
+ "x": "{{round(min(canvas.width, canvas.height) * 0.055 - min(canvas.width, canvas.height) * 0.0275)}}",
1265
+ "y": "{{round(min(canvas.width, canvas.height) * 0.055 - min(canvas.width, canvas.height) * 0.0275)}}",
1266
+ "width": 24,
1267
+ "height": 24,
1268
+ "scale": "{{min(canvas.width, canvas.height) * 0.055 / 24}}",
1269
+ "stroke": "{{bg}}",
1270
+ "strokeWidth": 2,
1271
+ "lineCap": "round",
1272
+ "lineJoin": "round"
1273
+ }
1274
+ ]
1275
+ },
1276
+ {
1277
+ "id": "copy-{{index}}",
1278
+ "type": "group",
1279
+ "layout": {
1280
+ "direction": "column",
1281
+ "gap": "{{round(min(canvas.width, canvas.height) * 0.01)}}"
1282
+ },
1283
+ "children": [
1284
+ {
1285
+ "id": "label-{{index}}",
1286
+ "type": "text",
1287
+ "content": "{{it.label}}",
1288
+ "fontSize": "{{round(min(canvas.width, canvas.height) * 0.046)}}",
1289
+ "color": "{{text}}",
1290
+ "fontWeight": 700,
1291
+ "maxWidth": "{{canvas.width > canvas.height ? round(canvas.width * 0.24) : round(canvas.width * 0.6)}}",
1292
+ "maxLines": 2,
1293
+ "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.034)}}"
1294
+ },
1295
+ {
1296
+ "id": "detail-{{index}}",
1297
+ "type": "text",
1298
+ "content": "{{it.detail}}",
1299
+ "fontSize": "{{round(min(canvas.width, canvas.height) * 0.034)}}",
1300
+ "color": "{{muted}}",
1301
+ "maxWidth": "{{canvas.width > canvas.height ? round(canvas.width * 0.24) : round(canvas.width * 0.6)}}",
1302
+ "maxLines": 3,
1303
+ "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.028)}}"
1304
+ }
1305
+ ]
1306
+ }
1307
+ ]
1308
+ }
1309
+ ]
1310
+ }
1311
+ ]
1312
+ }
1313
+ ]
1314
+ },
1315
+ {
1316
+ "repeat": "{{items}}",
1317
+ "as": "x",
1318
+ "each": [
1319
+ {
1320
+ "id": "sfx-icon-{{index}}",
1321
+ "type": "audio",
1322
+ "src": "sfx:pop",
1323
+ "startFrame": "{{14 + index * 12}}",
1324
+ "volume": 0.35
1325
+ }
1326
+ ]
1327
+ }
1328
+ ]
1329
+ },
1330
+ "cta_end": {
1331
+ "description": "Closing scene: a headline, a button and a web address.",
1332
+ "params": {
1333
+ "headline": {
1334
+ "type": "string",
1335
+ "default": "Ready to start?"
1336
+ },
1337
+ "button": {
1338
+ "type": "string",
1339
+ "default": "Get started"
1340
+ },
1341
+ "url": {
1342
+ "type": "string",
1343
+ "default": "example.com"
1344
+ }
1345
+ },
1346
+ "layers": [
1347
+ {
1348
+ "id": "bg",
1349
+ "type": "rect",
1350
+ "x": 0,
1351
+ "y": 0,
1352
+ "width": "{{canvas.width}}",
1353
+ "height": "{{canvas.height}}",
1354
+ "fill": "{{bg}}"
1355
+ },
1356
+ {
1357
+ "id": "glow",
1358
+ "type": "circle",
1359
+ "x": "{{round(canvas.width * 0.5)}}",
1360
+ "y": "{{round(canvas.height * 0.4)}}",
1361
+ "width": "{{round(min(canvas.width, canvas.height) * 1.1)}}",
1362
+ "fill": "{{accent}}",
1363
+ "opacity": 0.16,
1364
+ "blur": 120,
1365
+ "animations": [
1366
+ {
1367
+ "property": "scale",
1368
+ "keyframes": [
1369
+ {
1370
+ "frame": 0,
1371
+ "value": 0.9
1372
+ },
1373
+ {
1374
+ "frame": 150,
1375
+ "value": 1.1,
1376
+ "easing": "drift"
1377
+ }
1378
+ ]
1379
+ },
1380
+ {
1381
+ "property": "x",
1382
+ "keyframes": [
1383
+ {
1384
+ "frame": 0,
1385
+ "value": "{{round(canvas.width * 0.5)}}"
1386
+ },
1387
+ {
1388
+ "frame": 180,
1389
+ "value": "{{round(canvas.width * 0.4)}}",
1390
+ "easing": "drift"
1391
+ }
1392
+ ]
1393
+ }
1394
+ ]
1395
+ },
1396
+ {
1397
+ "id": "glow2",
1398
+ "type": "circle",
1399
+ "x": "{{round(canvas.width * 0.5)}}",
1400
+ "y": "{{round(canvas.height * 0.6)}}",
1401
+ "width": "{{round(min(canvas.width, canvas.height) * 0.8)}}",
1402
+ "fill": "{{accent2}}",
1403
+ "opacity": 0.096,
1404
+ "blur": 140,
1405
+ "animations": [
1406
+ {
1407
+ "property": "y",
1408
+ "keyframes": [
1409
+ {
1410
+ "frame": 0,
1411
+ "value": "{{round(canvas.height * 0.6)}}"
1412
+ },
1413
+ {
1414
+ "frame": 180,
1415
+ "value": "{{round(canvas.height * 0.5)}}",
1416
+ "easing": "drift"
1417
+ }
1418
+ ]
1419
+ },
1420
+ {
1421
+ "property": "scale",
1422
+ "keyframes": [
1423
+ {
1424
+ "frame": 0,
1425
+ "value": 1.1
1426
+ },
1427
+ {
1428
+ "frame": 150,
1429
+ "value": 0.9,
1430
+ "easing": "drift"
1431
+ }
1432
+ ]
1433
+ }
1434
+ ]
1435
+ },
1436
+ {
1437
+ "id": "stack",
1438
+ "type": "group",
1439
+ "x": 0,
1440
+ "y": 0,
1441
+ "width": "{{canvas.width}}",
1442
+ "height": "{{canvas.height}}",
1443
+ "layout": {
1444
+ "direction": "column",
1445
+ "gap": "{{round(min(canvas.width, canvas.height) * 0.05)}}",
1446
+ "align": "center",
1447
+ "justify": "center"
1448
+ },
1449
+ "children": [
1450
+ {
1451
+ "id": "headline",
1452
+ "type": "text",
1453
+ "content": "{{headline}}",
1454
+ "fontSize": "{{round(min(canvas.width, canvas.height) * 0.1)}}",
1455
+ "color": "{{text}}",
1456
+ "fontWeight": "{{headWeight}}",
1457
+ "textAlign": "center",
1458
+ "maxWidth": "{{round(canvas.width * 0.84)}}",
1459
+ "maxLines": 3,
1460
+ "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.06)}}",
1461
+ "lineHeight": 1.05,
1462
+ "split": {
1463
+ "by": "words",
1464
+ "stagger": 4,
1465
+ "preset": "rise",
1466
+ "duration": 18
1467
+ }
1468
+ },
1469
+ {
1470
+ "id": "btn",
1471
+ "type": "group",
1472
+ "width": "{{round(canvas.width * 0.42)}}",
1473
+ "height": "{{round(min(canvas.width, canvas.height) * 0.13)}}",
1474
+ "startFrame": 24,
1475
+ "animations": [
1476
+ {
1477
+ "property": "scale",
1478
+ "keyframes": [
1479
+ {
1480
+ "frame": 0,
1481
+ "value": 0.85,
1482
+ "easing": "pop"
1483
+ },
1484
+ {
1485
+ "frame": 16,
1486
+ "value": 1
1487
+ }
1488
+ ]
1489
+ },
1490
+ {
1491
+ "property": "opacity",
1492
+ "keyframes": [
1493
+ {
1494
+ "frame": 0,
1495
+ "value": 0
1496
+ },
1497
+ {
1498
+ "frame": 8,
1499
+ "value": 1
1500
+ }
1501
+ ]
1502
+ }
1503
+ ],
1504
+ "children": [
1505
+ {
1506
+ "id": "pill",
1507
+ "type": "rect",
1508
+ "x": 0,
1509
+ "y": 0,
1510
+ "width": "{{round(canvas.width * 0.42)}}",
1511
+ "height": "{{round(min(canvas.width, canvas.height) * 0.13)}}",
1512
+ "radius": "{{round(min(canvas.width, canvas.height) * 0.065)}}",
1513
+ "fill": "{{accent}}"
1514
+ },
1515
+ {
1516
+ "id": "label",
1517
+ "type": "text",
1518
+ "content": "{{button}}",
1519
+ "x": "{{round(canvas.width * 0.21)}}",
1520
+ "y": "{{round(min(canvas.width, canvas.height) * 0.065 - min(canvas.width, canvas.height) * 0.03)}}",
1521
+ "fontSize": "{{round(min(canvas.width, canvas.height) * 0.05)}}",
1522
+ "fontWeight": 800,
1523
+ "color": "{{bg}}",
1524
+ "textAlign": "center",
1525
+ "maxWidth": "{{round(canvas.width * 0.38)}}",
1526
+ "maxLines": 1,
1527
+ "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.032)}}"
1528
+ }
1529
+ ]
1530
+ },
1531
+ {
1532
+ "id": "url",
1533
+ "type": "text",
1534
+ "content": "{{url}}",
1535
+ "fontSize": "{{round(min(canvas.width, canvas.height) * 0.04)}}",
1536
+ "color": "{{muted}}",
1537
+ "textAlign": "center",
1538
+ "maxWidth": "{{round(canvas.width * 0.8)}}",
1539
+ "startFrame": 34,
1540
+ "animations": [
1541
+ {
1542
+ "property": "opacity",
1543
+ "keyframes": [
1544
+ {
1545
+ "frame": 0,
1546
+ "value": 0
1547
+ },
1548
+ {
1549
+ "frame": 14,
1550
+ "value": 1,
1551
+ "easing": "glide"
1552
+ }
1553
+ ]
1554
+ },
1555
+ {
1556
+ "property": "y",
1557
+ "keyframes": [
1558
+ {
1559
+ "frame": 0,
1560
+ "value": 16,
1561
+ "easing": "land"
1562
+ },
1563
+ {
1564
+ "frame": 18,
1565
+ "value": 0
1566
+ }
1567
+ ]
1568
+ }
1569
+ ]
1570
+ }
1571
+ ]
1572
+ },
1573
+ {
1574
+ "id": "sfx-btn",
1575
+ "type": "audio",
1576
+ "src": "sfx:ding",
1577
+ "startFrame": 24,
1578
+ "volume": 0.45
1579
+ }
1580
+ ]
1581
+ },
1582
+ "badge": {
1583
+ "description": "A small highlighted label in the top left corner, such as NEW or LIVE.",
1584
+ "params": {
1585
+ "label": {
1586
+ "type": "string",
1587
+ "default": "NEW"
1588
+ }
1589
+ },
1590
+ "layers": [
1591
+ {
1592
+ "id": "tag",
1593
+ "type": "text",
1594
+ "spans": [
1595
+ {
1596
+ "text": " {{label}} ",
1597
+ "background": "{{accent}}",
1598
+ "color": "{{bg}}",
1599
+ "fontWeight": 800
1600
+ }
1601
+ ],
1602
+ "x": "{{round(canvas.width * 0.06)}}",
1603
+ "y": "{{round(canvas.height * 0.05)}}",
1604
+ "fontSize": "{{round(min(canvas.width, canvas.height) * 0.032)}}",
1605
+ "letterSpacing": "{{round(min(canvas.width, canvas.height) * 0.003)}}",
1606
+ "animations": [
1607
+ {
1608
+ "property": "opacity",
1609
+ "keyframes": [
1610
+ {
1611
+ "frame": 0,
1612
+ "value": 0
1613
+ },
1614
+ {
1615
+ "frame": 10,
1616
+ "value": 1
1617
+ }
1618
+ ]
1619
+ },
1620
+ {
1621
+ "property": "scale",
1622
+ "keyframes": [
1623
+ {
1624
+ "frame": 0,
1625
+ "value": 0.8,
1626
+ "easing": "pop"
1627
+ },
1628
+ {
1629
+ "frame": 14,
1630
+ "value": 1
1631
+ }
1632
+ ]
1633
+ }
1634
+ ]
1635
+ },
1636
+ {
1637
+ "id": "sfx-in",
1638
+ "type": "audio",
1639
+ "src": "sfx:pop",
1640
+ "startFrame": 0,
1641
+ "volume": 0.3
1642
+ }
1643
+ ]
1644
+ }
1645
+ }
1646
+ }