sketchmark 2.0.0 → 2.1.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 (132) hide show
  1. package/ANIMATABLE_MATRIX.md +177 -0
  2. package/KERNEL_SPEC.md +412 -0
  3. package/PACKS.md +81 -0
  4. package/PRESETS.md +182 -0
  5. package/README.md +274 -188
  6. package/bin/editor-ui.cjs +2285 -0
  7. package/bin/preview-ui.cjs +74 -0
  8. package/bin/sketchmark.cjs +648 -2008
  9. package/dist/src/animatable.d.ts +21 -0
  10. package/dist/src/animatable.js +439 -0
  11. package/dist/src/builders/index.d.ts +1 -11
  12. package/dist/src/builders/index.js +1 -19
  13. package/dist/src/diagnostics.js +1 -64
  14. package/dist/src/edit.d.ts +27 -0
  15. package/dist/src/edit.js +162 -0
  16. package/dist/src/index.d.ts +4 -13
  17. package/dist/src/index.js +4 -13
  18. package/dist/src/keyframes.d.ts +48 -0
  19. package/dist/src/keyframes.js +182 -0
  20. package/dist/src/motion.d.ts +4 -0
  21. package/dist/src/motion.js +262 -0
  22. package/dist/src/normalize.js +120 -151
  23. package/dist/src/presets/characters.d.ts +15 -0
  24. package/dist/src/presets/characters.js +113 -0
  25. package/dist/src/presets/compose.d.ts +5 -0
  26. package/dist/src/presets/compose.js +80 -0
  27. package/dist/src/presets/effects.d.ts +40 -0
  28. package/dist/src/presets/effects.js +79 -0
  29. package/dist/src/presets/helpers.d.ts +33 -0
  30. package/dist/src/presets/helpers.js +165 -0
  31. package/dist/src/presets/index.d.ts +9 -0
  32. package/dist/src/presets/index.js +48 -0
  33. package/dist/src/presets/motions.d.ts +33 -0
  34. package/dist/src/presets/motions.js +75 -0
  35. package/dist/src/presets/scenes.d.ts +35 -0
  36. package/dist/src/presets/scenes.js +134 -0
  37. package/dist/src/presets/shapes.d.ts +71 -0
  38. package/dist/src/presets/shapes.js +96 -0
  39. package/dist/src/presets/transitions.d.ts +29 -0
  40. package/dist/src/presets/transitions.js +113 -0
  41. package/dist/src/presets/types.d.ts +34 -0
  42. package/dist/src/presets/types.js +2 -0
  43. package/dist/src/render/html.js +1 -4
  44. package/dist/src/render/svg.d.ts +2 -2
  45. package/dist/src/render/svg.js +86 -82
  46. package/dist/src/render/three-html.js +67 -113
  47. package/dist/src/scenes.js +1 -0
  48. package/dist/src/schema.js +218 -280
  49. package/dist/src/shapes/builtins.js +11 -47
  50. package/dist/src/shapes/common.js +12 -11
  51. package/dist/src/shapes/registry.d.ts +0 -1
  52. package/dist/src/shapes/registry.js +0 -4
  53. package/dist/src/shapes/types.d.ts +1 -3
  54. package/dist/src/types.d.ts +57 -288
  55. package/dist/src/utils.d.ts +2 -11
  56. package/dist/src/utils.js +13 -70
  57. package/dist/src/validate.js +321 -275
  58. package/dist/tests/run.js +576 -510
  59. package/examples/1730642890464.jpg +0 -0
  60. package/examples/app-screen.svg +1 -0
  61. package/examples/app-screen.visual.json +503 -0
  62. package/examples/dashboard-table.svg +1 -0
  63. package/examples/dashboard-table.visual.json +708 -0
  64. package/examples/dev-docs.svg +1 -0
  65. package/examples/dev-docs.visual.json +248 -0
  66. package/examples/explainer.mp4 +0 -0
  67. package/examples/explainer.visual.json +1713 -0
  68. package/examples/group-origin-effects-lab-check.svg +1 -0
  69. package/examples/group-origin-effects-lab.visual.json +1880 -0
  70. package/examples/image-clip-radius.visual.json +271 -0
  71. package/examples/make-app-screen.cjs +368 -0
  72. package/examples/make-dashboard-table.cjs +277 -0
  73. package/examples/make-dev-docs.cjs +233 -0
  74. package/examples/make-explainer.cjs +438 -0
  75. package/examples/make-group-origin-effects-lab.cjs +370 -0
  76. package/examples/make-image-clip-radius.cjs +169 -0
  77. package/examples/make-modal-dialog.cjs +355 -0
  78. package/examples/make-origin-effects-lab.cjs +311 -0
  79. package/examples/make-preset-character-motion.cjs +32 -0
  80. package/examples/make-presets-demo.cjs +30 -0
  81. package/examples/make-pricing.cjs +286 -0
  82. package/examples/make-product-demo.cjs +468 -0
  83. package/examples/make-product-hero.cjs +223 -0
  84. package/examples/make-release-notes.cjs +333 -0
  85. package/examples/make-settings-panel.cjs +435 -0
  86. package/examples/make-split-preview.cjs +248 -0
  87. package/examples/make-storyboard.cjs +215 -0
  88. package/examples/make-transcript.cjs +234 -0
  89. package/examples/make-typography-test.cjs +397 -0
  90. package/examples/make-ui-demo-explainer.cjs +1094 -0
  91. package/examples/make-ui-flow.cjs +762 -0
  92. package/examples/make-walkthrough.cjs +815 -0
  93. package/examples/modal-dialog.svg +1 -0
  94. package/examples/modal-dialog.visual.json +239 -0
  95. package/examples/origin-effects-lab-check.svg +1 -0
  96. package/examples/origin-effects-lab.visual.json +1412 -0
  97. package/examples/preset-character-motion.visual.json +949 -0
  98. package/examples/presets-demo.visual.json +787 -0
  99. package/examples/pricing.svg +1 -0
  100. package/examples/pricing.visual.json +652 -0
  101. package/examples/product-demo.mp4 +0 -0
  102. package/examples/product-demo.visual.json +866 -0
  103. package/examples/product-hero.svg +1 -0
  104. package/examples/product-hero.visual.json +242 -0
  105. package/examples/release-notes.svg +1 -0
  106. package/examples/release-notes.visual.json +467 -0
  107. package/examples/settings-panel.svg +1 -0
  108. package/examples/settings-panel.visual.json +501 -0
  109. package/examples/split-preview.svg +1 -0
  110. package/examples/split-preview.visual.json +124 -0
  111. package/examples/storyboard.svg +1 -0
  112. package/examples/storyboard.visual.json +312 -0
  113. package/examples/transcript.svg +1 -0
  114. package/examples/transcript.visual.json +407 -0
  115. package/examples/typography-indent-check.svg +1 -0
  116. package/examples/typography-lineheight-0.svg +1 -0
  117. package/examples/typography-lineheight-2.svg +1 -0
  118. package/examples/typography-test-check.svg +1 -0
  119. package/examples/typography-test.svg +1 -0
  120. package/examples/typography-test.visual.json +757 -0
  121. package/examples/ui-demo-explainer-billing.svg +1 -0
  122. package/examples/ui-demo-explainer-check.svg +1 -0
  123. package/examples/ui-demo-explainer-save.svg +1 -0
  124. package/examples/ui-demo-explainer-toggle.svg +1 -0
  125. package/examples/ui-demo-explainer.mp4 +0 -0
  126. package/examples/ui-demo-explainer.visual.json +2597 -0
  127. package/examples/ui-flow.mp4 +0 -0
  128. package/examples/ui-flow.visual.json +1211 -0
  129. package/examples/walkthrough.mp4 +0 -0
  130. package/examples/walkthrough.visual.json +1372 -0
  131. package/package.json +52 -52
  132. package/schema/visual.schema.json +1086 -930
package/examples/explainer.visual.json ADDED
@@ -0,0 +1,1713 @@
1
+ {
2
+ "version": 1,
3
+ "canvas": {
4
+ "width": 1280,
5
+ "height": 720,
6
+ "background": "#fafafa",
7
+ "duration": 20,
8
+ "fps": 30
9
+ },
10
+ "elements": [
11
+ {
12
+ "id": "s1-headline",
13
+ "type": "text",
14
+ "x": 640,
15
+ "y": 200,
16
+ "text": "What is Sketchmark?",
17
+ "align": "center",
18
+ "valign": "middle",
19
+ "fontSize": 44,
20
+ "fontFamily": "Inter, system-ui, sans-serif",
21
+ "weight": 700,
22
+ "fill": "#0f172a",
23
+ "opacity": 0,
24
+ "timeline": {
25
+ "tracks": {
26
+ "opacity": {
27
+ "keyframes": [
28
+ {
29
+ "time": 0,
30
+ "value": 0,
31
+ "out": {
32
+ "type": "cubicBezier",
33
+ "x1": 0.25,
34
+ "y1": 0.1,
35
+ "x2": 0.25,
36
+ "y2": 1
37
+ }
38
+ },
39
+ {
40
+ "time": 0.6,
41
+ "value": 1
42
+ },
43
+ {
44
+ "time": 4,
45
+ "value": 1,
46
+ "out": {
47
+ "type": "cubicBezier",
48
+ "x1": 0.25,
49
+ "y1": 0.1,
50
+ "x2": 0.25,
51
+ "y2": 1
52
+ }
53
+ },
54
+ {
55
+ "time": 4.6,
56
+ "value": 0
57
+ }
58
+ ]
59
+ },
60
+ "y": {
61
+ "keyframes": [
62
+ {
63
+ "time": 0,
64
+ "value": 220,
65
+ "out": {
66
+ "type": "cubicBezier",
67
+ "x1": 0.25,
68
+ "y1": 0.1,
69
+ "x2": 0.25,
70
+ "y2": 1
71
+ }
72
+ },
73
+ {
74
+ "time": 0.6,
75
+ "value": 200
76
+ }
77
+ ]
78
+ }
79
+ }
80
+ }
81
+ },
82
+ {
83
+ "id": "s1-body",
84
+ "type": "text",
85
+ "x": 640,
86
+ "y": 280,
87
+ "text": "A minimal render kernel that turns JSON documents\ninto SVG, HTML, or video frames.",
88
+ "align": "center",
89
+ "valign": "top",
90
+ "fontSize": 20,
91
+ "fontFamily": "Inter, system-ui, sans-serif",
92
+ "weight": 400,
93
+ "lineHeight": 1.6,
94
+ "fill": "#475569",
95
+ "maxWidth": 700,
96
+ "opacity": 0,
97
+ "timeline": {
98
+ "tracks": {
99
+ "opacity": {
100
+ "keyframes": [
101
+ {
102
+ "time": 0.4,
103
+ "value": 0,
104
+ "out": {
105
+ "type": "cubicBezier",
106
+ "x1": 0.25,
107
+ "y1": 0.1,
108
+ "x2": 0.25,
109
+ "y2": 1
110
+ }
111
+ },
112
+ {
113
+ "time": 1,
114
+ "value": 1
115
+ },
116
+ {
117
+ "time": 4,
118
+ "value": 1,
119
+ "out": {
120
+ "type": "cubicBezier",
121
+ "x1": 0.25,
122
+ "y1": 0.1,
123
+ "x2": 0.25,
124
+ "y2": 1
125
+ }
126
+ },
127
+ {
128
+ "time": 4.6,
129
+ "value": 0
130
+ }
131
+ ]
132
+ },
133
+ "y": {
134
+ "keyframes": [
135
+ {
136
+ "time": 0.4,
137
+ "value": 295,
138
+ "out": {
139
+ "type": "cubicBezier",
140
+ "x1": 0.25,
141
+ "y1": 0.1,
142
+ "x2": 0.25,
143
+ "y2": 1
144
+ }
145
+ },
146
+ {
147
+ "time": 1,
148
+ "value": 280
149
+ }
150
+ ]
151
+ }
152
+ }
153
+ }
154
+ },
155
+ {
156
+ "id": "s1-chip-0",
157
+ "type": "group",
158
+ "x": 532,
159
+ "y": 380,
160
+ "children": [
161
+ {
162
+ "id": "s1-chip-0-bg",
163
+ "type": "path",
164
+ "d": "M 14 0 L 70 0 Q 84 0 84 14 L 84 14 Q 84 28 70 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z",
165
+ "fill": "#dbeafe",
166
+ "stroke": "none"
167
+ },
168
+ {
169
+ "id": "s1-chip-0-text",
170
+ "type": "text",
171
+ "x": 42,
172
+ "y": 14,
173
+ "text": "JSON In",
174
+ "align": "center",
175
+ "valign": "middle",
176
+ "fontSize": 12,
177
+ "fontFamily": "Inter, system-ui, sans-serif",
178
+ "weight": 600,
179
+ "fill": "#1d4ed8"
180
+ }
181
+ ],
182
+ "opacity": 0,
183
+ "timeline": {
184
+ "tracks": {
185
+ "opacity": {
186
+ "keyframes": [
187
+ {
188
+ "time": 0.8,
189
+ "value": 0,
190
+ "out": {
191
+ "type": "cubicBezier",
192
+ "x1": 0.25,
193
+ "y1": 0.1,
194
+ "x2": 0.25,
195
+ "y2": 1
196
+ }
197
+ },
198
+ {
199
+ "time": 1.3,
200
+ "value": 1
201
+ },
202
+ {
203
+ "time": 4,
204
+ "value": 1,
205
+ "out": {
206
+ "type": "cubicBezier",
207
+ "x1": 0.25,
208
+ "y1": 0.1,
209
+ "x2": 0.25,
210
+ "y2": 1
211
+ }
212
+ },
213
+ {
214
+ "time": 4.6,
215
+ "value": 0
216
+ }
217
+ ]
218
+ },
219
+ "y": {
220
+ "keyframes": [
221
+ {
222
+ "time": 0.8,
223
+ "value": 390,
224
+ "out": {
225
+ "type": "cubicBezier",
226
+ "x1": 0.25,
227
+ "y1": 0.1,
228
+ "x2": 0.25,
229
+ "y2": 1
230
+ }
231
+ },
232
+ {
233
+ "time": 1.3,
234
+ "value": 380
235
+ }
236
+ ]
237
+ }
238
+ }
239
+ }
240
+ },
241
+ {
242
+ "id": "s1-chip-1",
243
+ "type": "group",
244
+ "x": 632,
245
+ "y": 380,
246
+ "children": [
247
+ {
248
+ "id": "s1-chip-1-bg",
249
+ "type": "path",
250
+ "d": "M 14 0 L 102 0 Q 116 0 116 14 L 116 14 Q 116 28 102 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z",
251
+ "fill": "#dcfce7",
252
+ "stroke": "none"
253
+ },
254
+ {
255
+ "id": "s1-chip-1-text",
256
+ "type": "text",
257
+ "x": 58,
258
+ "y": 14,
259
+ "text": "Visuals Out",
260
+ "align": "center",
261
+ "valign": "middle",
262
+ "fontSize": 12,
263
+ "fontFamily": "Inter, system-ui, sans-serif",
264
+ "weight": 600,
265
+ "fill": "#166534"
266
+ }
267
+ ],
268
+ "opacity": 0,
269
+ "timeline": {
270
+ "tracks": {
271
+ "opacity": {
272
+ "keyframes": [
273
+ {
274
+ "time": 0.9500000000000001,
275
+ "value": 0,
276
+ "out": {
277
+ "type": "cubicBezier",
278
+ "x1": 0.25,
279
+ "y1": 0.1,
280
+ "x2": 0.25,
281
+ "y2": 1
282
+ }
283
+ },
284
+ {
285
+ "time": 1.45,
286
+ "value": 1
287
+ },
288
+ {
289
+ "time": 4,
290
+ "value": 1,
291
+ "out": {
292
+ "type": "cubicBezier",
293
+ "x1": 0.25,
294
+ "y1": 0.1,
295
+ "x2": 0.25,
296
+ "y2": 1
297
+ }
298
+ },
299
+ {
300
+ "time": 4.6,
301
+ "value": 0
302
+ }
303
+ ]
304
+ },
305
+ "y": {
306
+ "keyframes": [
307
+ {
308
+ "time": 0.9500000000000001,
309
+ "value": 390,
310
+ "out": {
311
+ "type": "cubicBezier",
312
+ "x1": 0.25,
313
+ "y1": 0.1,
314
+ "x2": 0.25,
315
+ "y2": 1
316
+ }
317
+ },
318
+ {
319
+ "time": 1.45,
320
+ "value": 380
321
+ }
322
+ ]
323
+ }
324
+ }
325
+ }
326
+ },
327
+ {
328
+ "id": "s2-headline",
329
+ "type": "text",
330
+ "x": 180,
331
+ "y": 140,
332
+ "text": "Define your document",
333
+ "align": "left",
334
+ "valign": "top",
335
+ "fontSize": 32,
336
+ "fontFamily": "Inter, system-ui, sans-serif",
337
+ "weight": 700,
338
+ "fill": "#0f172a",
339
+ "opacity": 0,
340
+ "timeline": {
341
+ "tracks": {
342
+ "opacity": {
343
+ "keyframes": [
344
+ {
345
+ "time": 5,
346
+ "value": 0,
347
+ "out": {
348
+ "type": "cubicBezier",
349
+ "x1": 0.25,
350
+ "y1": 0.1,
351
+ "x2": 0.25,
352
+ "y2": 1
353
+ }
354
+ },
355
+ {
356
+ "time": 5.5,
357
+ "value": 1
358
+ },
359
+ {
360
+ "time": 9,
361
+ "value": 1,
362
+ "out": {
363
+ "type": "cubicBezier",
364
+ "x1": 0.25,
365
+ "y1": 0.1,
366
+ "x2": 0.25,
367
+ "y2": 1
368
+ }
369
+ },
370
+ {
371
+ "time": 9.5,
372
+ "value": 0
373
+ }
374
+ ]
375
+ },
376
+ "y": {
377
+ "keyframes": [
378
+ {
379
+ "time": 5,
380
+ "value": 155,
381
+ "out": {
382
+ "type": "cubicBezier",
383
+ "x1": 0.25,
384
+ "y1": 0.1,
385
+ "x2": 0.25,
386
+ "y2": 1
387
+ }
388
+ },
389
+ {
390
+ "time": 5.5,
391
+ "value": 140
392
+ }
393
+ ]
394
+ }
395
+ }
396
+ }
397
+ },
398
+ {
399
+ "id": "s2-body",
400
+ "type": "text",
401
+ "x": 180,
402
+ "y": 190,
403
+ "text": "Declare canvas size, background, and elements.\nEach element has an ID, type, and properties.",
404
+ "align": "left",
405
+ "valign": "top",
406
+ "fontSize": 16,
407
+ "fontFamily": "Inter, system-ui, sans-serif",
408
+ "weight": 400,
409
+ "lineHeight": 1.6,
410
+ "fill": "#475569",
411
+ "maxWidth": 400,
412
+ "opacity": 0,
413
+ "timeline": {
414
+ "tracks": {
415
+ "opacity": {
416
+ "keyframes": [
417
+ {
418
+ "time": 5.3,
419
+ "value": 0,
420
+ "out": {
421
+ "type": "cubicBezier",
422
+ "x1": 0.25,
423
+ "y1": 0.1,
424
+ "x2": 0.25,
425
+ "y2": 1
426
+ }
427
+ },
428
+ {
429
+ "time": 5.8,
430
+ "value": 1
431
+ },
432
+ {
433
+ "time": 9,
434
+ "value": 1,
435
+ "out": {
436
+ "type": "cubicBezier",
437
+ "x1": 0.25,
438
+ "y1": 0.1,
439
+ "x2": 0.25,
440
+ "y2": 1
441
+ }
442
+ },
443
+ {
444
+ "time": 9.5,
445
+ "value": 0
446
+ }
447
+ ]
448
+ },
449
+ "y": {
450
+ "keyframes": [
451
+ {
452
+ "time": 5.3,
453
+ "value": 200,
454
+ "out": {
455
+ "type": "cubicBezier",
456
+ "x1": 0.25,
457
+ "y1": 0.1,
458
+ "x2": 0.25,
459
+ "y2": 1
460
+ }
461
+ },
462
+ {
463
+ "time": 5.8,
464
+ "value": 190
465
+ }
466
+ ]
467
+ }
468
+ }
469
+ }
470
+ },
471
+ {
472
+ "id": "s2-panel",
473
+ "type": "group",
474
+ "x": 180,
475
+ "y": 280,
476
+ "children": [
477
+ {
478
+ "id": "s2-panel-bg",
479
+ "type": "path",
480
+ "d": "M 10 0 L 490 0 Q 500 0 500 10 L 500 270 Q 500 280 490 280 L 10 280 Q 0 280 0 270 L 0 10 Q 0 0 10 0 Z",
481
+ "fill": "#1e293b",
482
+ "stroke": "none"
483
+ },
484
+ {
485
+ "id": "s2-panel-label",
486
+ "type": "text",
487
+ "x": 16,
488
+ "y": 16,
489
+ "text": "canvas.visual.json",
490
+ "align": "left",
491
+ "valign": "top",
492
+ "fontSize": 11,
493
+ "fontFamily": "JetBrains Mono, Fira Code, monospace",
494
+ "weight": 500,
495
+ "fill": "#94a3b8"
496
+ },
497
+ {
498
+ "id": "s2-panel-code",
499
+ "type": "text",
500
+ "x": 16,
501
+ "y": 44,
502
+ "text": "{\n \"version\": 1,\n \"canvas\": {\n \"width\": 800,\n \"height\": 600,\n \"background\": \"#ffffff\"\n },\n \"elements\": [\n { \"id\": \"title\", \"type\": \"text\", ... },\n { \"id\": \"shape\", \"type\": \"path\", ... }\n ]\n}",
503
+ "align": "left",
504
+ "valign": "top",
505
+ "fontSize": 13,
506
+ "fontFamily": "JetBrains Mono, Fira Code, monospace",
507
+ "weight": 400,
508
+ "lineHeight": 1.45,
509
+ "fill": "#e2e8f0",
510
+ "maxWidth": 468
511
+ }
512
+ ],
513
+ "opacity": 0,
514
+ "timeline": {
515
+ "tracks": {
516
+ "opacity": {
517
+ "keyframes": [
518
+ {
519
+ "time": 5.5,
520
+ "value": 0,
521
+ "out": {
522
+ "type": "cubicBezier",
523
+ "x1": 0.25,
524
+ "y1": 0.1,
525
+ "x2": 0.25,
526
+ "y2": 1
527
+ }
528
+ },
529
+ {
530
+ "time": 6.2,
531
+ "value": 1
532
+ },
533
+ {
534
+ "time": 9,
535
+ "value": 1,
536
+ "out": {
537
+ "type": "cubicBezier",
538
+ "x1": 0.25,
539
+ "y1": 0.1,
540
+ "x2": 0.25,
541
+ "y2": 1
542
+ }
543
+ },
544
+ {
545
+ "time": 9.5,
546
+ "value": 0
547
+ }
548
+ ]
549
+ },
550
+ "y": {
551
+ "keyframes": [
552
+ {
553
+ "time": 5.5,
554
+ "value": 300,
555
+ "out": {
556
+ "type": "cubicBezier",
557
+ "x1": 0.25,
558
+ "y1": 0.1,
559
+ "x2": 0.25,
560
+ "y2": 1
561
+ }
562
+ },
563
+ {
564
+ "time": 6.2,
565
+ "value": 280
566
+ }
567
+ ]
568
+ }
569
+ }
570
+ }
571
+ },
572
+ {
573
+ "id": "s2-chip",
574
+ "type": "group",
575
+ "x": 720,
576
+ "y": 320,
577
+ "children": [
578
+ {
579
+ "id": "s2-chip-bg",
580
+ "type": "path",
581
+ "d": "M 14 0 L 142 0 Q 156 0 156 14 L 156 14 Q 156 28 142 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z",
582
+ "fill": "#dcfce7",
583
+ "stroke": "none"
584
+ },
585
+ {
586
+ "id": "s2-chip-text",
587
+ "type": "text",
588
+ "x": 78,
589
+ "y": 14,
590
+ "text": "Schema validated",
591
+ "align": "center",
592
+ "valign": "middle",
593
+ "fontSize": 12,
594
+ "fontFamily": "Inter, system-ui, sans-serif",
595
+ "weight": 600,
596
+ "fill": "#166534"
597
+ }
598
+ ],
599
+ "opacity": 0,
600
+ "timeline": {
601
+ "tracks": {
602
+ "opacity": {
603
+ "keyframes": [
604
+ {
605
+ "time": 6.5,
606
+ "value": 0,
607
+ "out": {
608
+ "type": "cubicBezier",
609
+ "x1": 0.25,
610
+ "y1": 0.1,
611
+ "x2": 0.25,
612
+ "y2": 1
613
+ }
614
+ },
615
+ {
616
+ "time": 7,
617
+ "value": 1
618
+ },
619
+ {
620
+ "time": 9,
621
+ "value": 1,
622
+ "out": {
623
+ "type": "cubicBezier",
624
+ "x1": 0.25,
625
+ "y1": 0.1,
626
+ "x2": 0.25,
627
+ "y2": 1
628
+ }
629
+ },
630
+ {
631
+ "time": 9.5,
632
+ "value": 0
633
+ }
634
+ ]
635
+ },
636
+ "y": {
637
+ "keyframes": [
638
+ {
639
+ "time": 6.5,
640
+ "value": 330,
641
+ "out": {
642
+ "type": "cubicBezier",
643
+ "x1": 0.25,
644
+ "y1": 0.1,
645
+ "x2": 0.25,
646
+ "y2": 1
647
+ }
648
+ },
649
+ {
650
+ "time": 7,
651
+ "value": 320
652
+ }
653
+ ]
654
+ }
655
+ }
656
+ }
657
+ },
658
+ {
659
+ "id": "s3-headline",
660
+ "type": "text",
661
+ "x": 640,
662
+ "y": 120,
663
+ "text": "Add motion with timelines",
664
+ "align": "center",
665
+ "valign": "middle",
666
+ "fontSize": 32,
667
+ "fontFamily": "Inter, system-ui, sans-serif",
668
+ "weight": 700,
669
+ "fill": "#0f172a",
670
+ "opacity": 0,
671
+ "timeline": {
672
+ "tracks": {
673
+ "opacity": {
674
+ "keyframes": [
675
+ {
676
+ "time": 10,
677
+ "value": 0,
678
+ "out": {
679
+ "type": "cubicBezier",
680
+ "x1": 0.25,
681
+ "y1": 0.1,
682
+ "x2": 0.25,
683
+ "y2": 1
684
+ }
685
+ },
686
+ {
687
+ "time": 10.5,
688
+ "value": 1
689
+ },
690
+ {
691
+ "time": 14,
692
+ "value": 1,
693
+ "out": {
694
+ "type": "cubicBezier",
695
+ "x1": 0.25,
696
+ "y1": 0.1,
697
+ "x2": 0.25,
698
+ "y2": 1
699
+ }
700
+ },
701
+ {
702
+ "time": 14.5,
703
+ "value": 0
704
+ }
705
+ ]
706
+ },
707
+ "y": {
708
+ "keyframes": [
709
+ {
710
+ "time": 10,
711
+ "value": 135,
712
+ "out": {
713
+ "type": "cubicBezier",
714
+ "x1": 0.25,
715
+ "y1": 0.1,
716
+ "x2": 0.25,
717
+ "y2": 1
718
+ }
719
+ },
720
+ {
721
+ "time": 10.5,
722
+ "value": 120
723
+ }
724
+ ]
725
+ }
726
+ }
727
+ }
728
+ },
729
+ {
730
+ "id": "s3-body",
731
+ "type": "text",
732
+ "x": 640,
733
+ "y": 170,
734
+ "text": "Each element can have its own timeline with keyframes.\nThe kernel interpolates smoothly between values.",
735
+ "align": "center",
736
+ "valign": "top",
737
+ "fontSize": 16,
738
+ "fontFamily": "Inter, system-ui, sans-serif",
739
+ "weight": 400,
740
+ "lineHeight": 1.6,
741
+ "fill": "#475569",
742
+ "maxWidth": 600,
743
+ "opacity": 0,
744
+ "timeline": {
745
+ "tracks": {
746
+ "opacity": {
747
+ "keyframes": [
748
+ {
749
+ "time": 10.3,
750
+ "value": 0,
751
+ "out": {
752
+ "type": "cubicBezier",
753
+ "x1": 0.25,
754
+ "y1": 0.1,
755
+ "x2": 0.25,
756
+ "y2": 1
757
+ }
758
+ },
759
+ {
760
+ "time": 10.8,
761
+ "value": 1
762
+ },
763
+ {
764
+ "time": 14,
765
+ "value": 1,
766
+ "out": {
767
+ "type": "cubicBezier",
768
+ "x1": 0.25,
769
+ "y1": 0.1,
770
+ "x2": 0.25,
771
+ "y2": 1
772
+ }
773
+ },
774
+ {
775
+ "time": 14.5,
776
+ "value": 0
777
+ }
778
+ ]
779
+ },
780
+ "y": {
781
+ "keyframes": [
782
+ {
783
+ "time": 10.3,
784
+ "value": 180,
785
+ "out": {
786
+ "type": "cubicBezier",
787
+ "x1": 0.25,
788
+ "y1": 0.1,
789
+ "x2": 0.25,
790
+ "y2": 1
791
+ }
792
+ },
793
+ {
794
+ "time": 10.8,
795
+ "value": 170
796
+ }
797
+ ]
798
+ }
799
+ }
800
+ }
801
+ },
802
+ {
803
+ "id": "s3-demo-box",
804
+ "type": "path",
805
+ "d": "M 12 0 L 68 0 Q 80 0 80 12 L 80 68 Q 80 80 68 80 L 12 80 Q 0 80 0 68 L 0 12 Q 0 0 12 0 Z",
806
+ "x": 300,
807
+ "y": 340,
808
+ "fill": "#2563eb",
809
+ "stroke": "none",
810
+ "opacity": 0,
811
+ "timeline": {
812
+ "tracks": {
813
+ "opacity": {
814
+ "keyframes": [
815
+ {
816
+ "time": 10.5,
817
+ "value": 0,
818
+ "out": {
819
+ "type": "cubicBezier",
820
+ "x1": 0.25,
821
+ "y1": 0.1,
822
+ "x2": 0.25,
823
+ "y2": 1
824
+ }
825
+ },
826
+ {
827
+ "time": 11,
828
+ "value": 1
829
+ },
830
+ {
831
+ "time": 14,
832
+ "value": 1,
833
+ "out": {
834
+ "type": "cubicBezier",
835
+ "x1": 0.25,
836
+ "y1": 0.1,
837
+ "x2": 0.25,
838
+ "y2": 1
839
+ }
840
+ },
841
+ {
842
+ "time": 14.5,
843
+ "value": 0
844
+ }
845
+ ]
846
+ },
847
+ "x": {
848
+ "keyframes": [
849
+ {
850
+ "time": 11,
851
+ "value": 300,
852
+ "out": {
853
+ "type": "cubicBezier",
854
+ "x1": 0.25,
855
+ "y1": 0.1,
856
+ "x2": 0.25,
857
+ "y2": 1
858
+ }
859
+ },
860
+ {
861
+ "time": 12.5,
862
+ "value": 900,
863
+ "out": {
864
+ "type": "cubicBezier",
865
+ "x1": 0.25,
866
+ "y1": 0.1,
867
+ "x2": 0.25,
868
+ "y2": 1
869
+ }
870
+ },
871
+ {
872
+ "time": 14,
873
+ "value": 300
874
+ }
875
+ ]
876
+ },
877
+ "rotation": {
878
+ "keyframes": [
879
+ {
880
+ "time": 11,
881
+ "value": 0,
882
+ "out": {
883
+ "type": "cubicBezier",
884
+ "x1": 0.25,
885
+ "y1": 0.1,
886
+ "x2": 0.25,
887
+ "y2": 1
888
+ }
889
+ },
890
+ {
891
+ "time": 12.5,
892
+ "value": 180,
893
+ "out": {
894
+ "type": "cubicBezier",
895
+ "x1": 0.25,
896
+ "y1": 0.1,
897
+ "x2": 0.25,
898
+ "y2": 1
899
+ }
900
+ },
901
+ {
902
+ "time": 14,
903
+ "value": 360
904
+ }
905
+ ]
906
+ }
907
+ }
908
+ },
909
+ "origin": [
910
+ 40,
911
+ 40
912
+ ]
913
+ },
914
+ {
915
+ "id": "s3-label-0",
916
+ "type": "group",
917
+ "x": 400,
918
+ "y": 480,
919
+ "children": [
920
+ {
921
+ "id": "s3-label-0-bg",
922
+ "type": "path",
923
+ "d": "M 14 0 L 78 0 Q 92 0 92 14 L 92 14 Q 92 28 78 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z",
924
+ "fill": "#dbeafe",
925
+ "stroke": "none"
926
+ },
927
+ {
928
+ "id": "s3-label-0-text",
929
+ "type": "text",
930
+ "x": 46,
931
+ "y": 14,
932
+ "text": "position",
933
+ "align": "center",
934
+ "valign": "middle",
935
+ "fontSize": 12,
936
+ "fontFamily": "Inter, system-ui, sans-serif",
937
+ "weight": 600,
938
+ "fill": "#1d4ed8"
939
+ }
940
+ ],
941
+ "opacity": 0,
942
+ "timeline": {
943
+ "tracks": {
944
+ "opacity": {
945
+ "keyframes": [
946
+ {
947
+ "time": 11.5,
948
+ "value": 0,
949
+ "out": {
950
+ "type": "cubicBezier",
951
+ "x1": 0.25,
952
+ "y1": 0.1,
953
+ "x2": 0.25,
954
+ "y2": 1
955
+ }
956
+ },
957
+ {
958
+ "time": 12,
959
+ "value": 1
960
+ },
961
+ {
962
+ "time": 14,
963
+ "value": 1,
964
+ "out": {
965
+ "type": "cubicBezier",
966
+ "x1": 0.25,
967
+ "y1": 0.1,
968
+ "x2": 0.25,
969
+ "y2": 1
970
+ }
971
+ },
972
+ {
973
+ "time": 14.5,
974
+ "value": 0
975
+ }
976
+ ]
977
+ },
978
+ "y": {
979
+ "keyframes": [
980
+ {
981
+ "time": 11.5,
982
+ "value": 488,
983
+ "out": {
984
+ "type": "cubicBezier",
985
+ "x1": 0.25,
986
+ "y1": 0.1,
987
+ "x2": 0.25,
988
+ "y2": 1
989
+ }
990
+ },
991
+ {
992
+ "time": 12,
993
+ "value": 480
994
+ }
995
+ ]
996
+ }
997
+ }
998
+ }
999
+ },
1000
+ {
1001
+ "id": "s3-label-1",
1002
+ "type": "group",
1003
+ "x": 540,
1004
+ "y": 480,
1005
+ "children": [
1006
+ {
1007
+ "id": "s3-label-1-bg",
1008
+ "type": "path",
1009
+ "d": "M 14 0 L 78 0 Q 92 0 92 14 L 92 14 Q 92 28 78 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z",
1010
+ "fill": "#dbeafe",
1011
+ "stroke": "none"
1012
+ },
1013
+ {
1014
+ "id": "s3-label-1-text",
1015
+ "type": "text",
1016
+ "x": 46,
1017
+ "y": 14,
1018
+ "text": "rotation",
1019
+ "align": "center",
1020
+ "valign": "middle",
1021
+ "fontSize": 12,
1022
+ "fontFamily": "Inter, system-ui, sans-serif",
1023
+ "weight": 600,
1024
+ "fill": "#1d4ed8"
1025
+ }
1026
+ ],
1027
+ "opacity": 0,
1028
+ "timeline": {
1029
+ "tracks": {
1030
+ "opacity": {
1031
+ "keyframes": [
1032
+ {
1033
+ "time": 11.7,
1034
+ "value": 0,
1035
+ "out": {
1036
+ "type": "cubicBezier",
1037
+ "x1": 0.25,
1038
+ "y1": 0.1,
1039
+ "x2": 0.25,
1040
+ "y2": 1
1041
+ }
1042
+ },
1043
+ {
1044
+ "time": 12.2,
1045
+ "value": 1
1046
+ },
1047
+ {
1048
+ "time": 14,
1049
+ "value": 1,
1050
+ "out": {
1051
+ "type": "cubicBezier",
1052
+ "x1": 0.25,
1053
+ "y1": 0.1,
1054
+ "x2": 0.25,
1055
+ "y2": 1
1056
+ }
1057
+ },
1058
+ {
1059
+ "time": 14.5,
1060
+ "value": 0
1061
+ }
1062
+ ]
1063
+ },
1064
+ "y": {
1065
+ "keyframes": [
1066
+ {
1067
+ "time": 11.7,
1068
+ "value": 488,
1069
+ "out": {
1070
+ "type": "cubicBezier",
1071
+ "x1": 0.25,
1072
+ "y1": 0.1,
1073
+ "x2": 0.25,
1074
+ "y2": 1
1075
+ }
1076
+ },
1077
+ {
1078
+ "time": 12.2,
1079
+ "value": 480
1080
+ }
1081
+ ]
1082
+ }
1083
+ }
1084
+ }
1085
+ },
1086
+ {
1087
+ "id": "s3-label-2",
1088
+ "type": "group",
1089
+ "x": 680,
1090
+ "y": 480,
1091
+ "children": [
1092
+ {
1093
+ "id": "s3-label-2-bg",
1094
+ "type": "path",
1095
+ "d": "M 14 0 L 70 0 Q 84 0 84 14 L 84 14 Q 84 28 70 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z",
1096
+ "fill": "#dbeafe",
1097
+ "stroke": "none"
1098
+ },
1099
+ {
1100
+ "id": "s3-label-2-text",
1101
+ "type": "text",
1102
+ "x": 42,
1103
+ "y": 14,
1104
+ "text": "opacity",
1105
+ "align": "center",
1106
+ "valign": "middle",
1107
+ "fontSize": 12,
1108
+ "fontFamily": "Inter, system-ui, sans-serif",
1109
+ "weight": 600,
1110
+ "fill": "#1d4ed8"
1111
+ }
1112
+ ],
1113
+ "opacity": 0,
1114
+ "timeline": {
1115
+ "tracks": {
1116
+ "opacity": {
1117
+ "keyframes": [
1118
+ {
1119
+ "time": 11.9,
1120
+ "value": 0,
1121
+ "out": {
1122
+ "type": "cubicBezier",
1123
+ "x1": 0.25,
1124
+ "y1": 0.1,
1125
+ "x2": 0.25,
1126
+ "y2": 1
1127
+ }
1128
+ },
1129
+ {
1130
+ "time": 12.4,
1131
+ "value": 1
1132
+ },
1133
+ {
1134
+ "time": 14,
1135
+ "value": 1,
1136
+ "out": {
1137
+ "type": "cubicBezier",
1138
+ "x1": 0.25,
1139
+ "y1": 0.1,
1140
+ "x2": 0.25,
1141
+ "y2": 1
1142
+ }
1143
+ },
1144
+ {
1145
+ "time": 14.5,
1146
+ "value": 0
1147
+ }
1148
+ ]
1149
+ },
1150
+ "y": {
1151
+ "keyframes": [
1152
+ {
1153
+ "time": 11.9,
1154
+ "value": 488,
1155
+ "out": {
1156
+ "type": "cubicBezier",
1157
+ "x1": 0.25,
1158
+ "y1": 0.1,
1159
+ "x2": 0.25,
1160
+ "y2": 1
1161
+ }
1162
+ },
1163
+ {
1164
+ "time": 12.4,
1165
+ "value": 480
1166
+ }
1167
+ ]
1168
+ }
1169
+ }
1170
+ }
1171
+ },
1172
+ {
1173
+ "id": "s4-headline",
1174
+ "type": "text",
1175
+ "x": 640,
1176
+ "y": 180,
1177
+ "text": "Export anywhere",
1178
+ "align": "center",
1179
+ "valign": "middle",
1180
+ "fontSize": 44,
1181
+ "fontFamily": "Inter, system-ui, sans-serif",
1182
+ "weight": 700,
1183
+ "fill": "#0f172a",
1184
+ "opacity": 0,
1185
+ "timeline": {
1186
+ "tracks": {
1187
+ "opacity": {
1188
+ "keyframes": [
1189
+ {
1190
+ "time": 15,
1191
+ "value": 0,
1192
+ "out": {
1193
+ "type": "cubicBezier",
1194
+ "x1": 0.25,
1195
+ "y1": 0.1,
1196
+ "x2": 0.25,
1197
+ "y2": 1
1198
+ }
1199
+ },
1200
+ {
1201
+ "time": 15.6,
1202
+ "value": 1
1203
+ },
1204
+ {
1205
+ "time": 19,
1206
+ "value": 1,
1207
+ "out": {
1208
+ "type": "cubicBezier",
1209
+ "x1": 0.25,
1210
+ "y1": 0.1,
1211
+ "x2": 0.25,
1212
+ "y2": 1
1213
+ }
1214
+ },
1215
+ {
1216
+ "time": 19.5,
1217
+ "value": 0
1218
+ }
1219
+ ]
1220
+ },
1221
+ "y": {
1222
+ "keyframes": [
1223
+ {
1224
+ "time": 15,
1225
+ "value": 200,
1226
+ "out": {
1227
+ "type": "cubicBezier",
1228
+ "x1": 0.25,
1229
+ "y1": 0.1,
1230
+ "x2": 0.25,
1231
+ "y2": 1
1232
+ }
1233
+ },
1234
+ {
1235
+ "time": 15.6,
1236
+ "value": 180
1237
+ }
1238
+ ]
1239
+ }
1240
+ }
1241
+ }
1242
+ },
1243
+ {
1244
+ "id": "s4-body",
1245
+ "type": "text",
1246
+ "x": 640,
1247
+ "y": 260,
1248
+ "text": "Render to SVG for the web, PNG for assets,\nor MP4 for video content. One source, many outputs.",
1249
+ "align": "center",
1250
+ "valign": "top",
1251
+ "fontSize": 18,
1252
+ "fontFamily": "Inter, system-ui, sans-serif",
1253
+ "weight": 400,
1254
+ "lineHeight": 1.6,
1255
+ "fill": "#475569",
1256
+ "maxWidth": 600,
1257
+ "opacity": 0,
1258
+ "timeline": {
1259
+ "tracks": {
1260
+ "opacity": {
1261
+ "keyframes": [
1262
+ {
1263
+ "time": 15.4,
1264
+ "value": 0,
1265
+ "out": {
1266
+ "type": "cubicBezier",
1267
+ "x1": 0.25,
1268
+ "y1": 0.1,
1269
+ "x2": 0.25,
1270
+ "y2": 1
1271
+ }
1272
+ },
1273
+ {
1274
+ "time": 16,
1275
+ "value": 1
1276
+ },
1277
+ {
1278
+ "time": 19,
1279
+ "value": 1,
1280
+ "out": {
1281
+ "type": "cubicBezier",
1282
+ "x1": 0.25,
1283
+ "y1": 0.1,
1284
+ "x2": 0.25,
1285
+ "y2": 1
1286
+ }
1287
+ },
1288
+ {
1289
+ "time": 19.5,
1290
+ "value": 0
1291
+ }
1292
+ ]
1293
+ },
1294
+ "y": {
1295
+ "keyframes": [
1296
+ {
1297
+ "time": 15.4,
1298
+ "value": 275,
1299
+ "out": {
1300
+ "type": "cubicBezier",
1301
+ "x1": 0.25,
1302
+ "y1": 0.1,
1303
+ "x2": 0.25,
1304
+ "y2": 1
1305
+ }
1306
+ },
1307
+ {
1308
+ "time": 16,
1309
+ "value": 260
1310
+ }
1311
+ ]
1312
+ }
1313
+ }
1314
+ }
1315
+ },
1316
+ {
1317
+ "id": "s4-chip-0",
1318
+ "type": "group",
1319
+ "x": 511,
1320
+ "y": 360,
1321
+ "children": [
1322
+ {
1323
+ "id": "s4-chip-0-bg",
1324
+ "type": "path",
1325
+ "d": "M 14 0 L 38 0 Q 52 0 52 14 L 52 14 Q 52 28 38 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z",
1326
+ "fill": "#dbeafe",
1327
+ "stroke": "none"
1328
+ },
1329
+ {
1330
+ "id": "s4-chip-0-text",
1331
+ "type": "text",
1332
+ "x": 26,
1333
+ "y": 14,
1334
+ "text": "SVG",
1335
+ "align": "center",
1336
+ "valign": "middle",
1337
+ "fontSize": 12,
1338
+ "fontFamily": "Inter, system-ui, sans-serif",
1339
+ "weight": 600,
1340
+ "fill": "#1d4ed8"
1341
+ }
1342
+ ],
1343
+ "opacity": 0,
1344
+ "timeline": {
1345
+ "tracks": {
1346
+ "opacity": {
1347
+ "keyframes": [
1348
+ {
1349
+ "time": 16,
1350
+ "value": 0,
1351
+ "out": {
1352
+ "type": "cubicBezier",
1353
+ "x1": 0.25,
1354
+ "y1": 0.1,
1355
+ "x2": 0.25,
1356
+ "y2": 1
1357
+ }
1358
+ },
1359
+ {
1360
+ "time": 16.5,
1361
+ "value": 1
1362
+ },
1363
+ {
1364
+ "time": 19,
1365
+ "value": 1,
1366
+ "out": {
1367
+ "type": "cubicBezier",
1368
+ "x1": 0.25,
1369
+ "y1": 0.1,
1370
+ "x2": 0.25,
1371
+ "y2": 1
1372
+ }
1373
+ },
1374
+ {
1375
+ "time": 19.5,
1376
+ "value": 0
1377
+ }
1378
+ ]
1379
+ },
1380
+ "y": {
1381
+ "keyframes": [
1382
+ {
1383
+ "time": 16,
1384
+ "value": 370,
1385
+ "out": {
1386
+ "type": "cubicBezier",
1387
+ "x1": 0.25,
1388
+ "y1": 0.1,
1389
+ "x2": 0.25,
1390
+ "y2": 1
1391
+ }
1392
+ },
1393
+ {
1394
+ "time": 16.5,
1395
+ "value": 360
1396
+ }
1397
+ ]
1398
+ }
1399
+ }
1400
+ }
1401
+ },
1402
+ {
1403
+ "id": "s4-chip-1",
1404
+ "type": "group",
1405
+ "x": 577,
1406
+ "y": 360,
1407
+ "children": [
1408
+ {
1409
+ "id": "s4-chip-1-bg",
1410
+ "type": "path",
1411
+ "d": "M 14 0 L 38 0 Q 52 0 52 14 L 52 14 Q 52 28 38 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z",
1412
+ "fill": "#dbeafe",
1413
+ "stroke": "none"
1414
+ },
1415
+ {
1416
+ "id": "s4-chip-1-text",
1417
+ "type": "text",
1418
+ "x": 26,
1419
+ "y": 14,
1420
+ "text": "PNG",
1421
+ "align": "center",
1422
+ "valign": "middle",
1423
+ "fontSize": 12,
1424
+ "fontFamily": "Inter, system-ui, sans-serif",
1425
+ "weight": 600,
1426
+ "fill": "#1d4ed8"
1427
+ }
1428
+ ],
1429
+ "opacity": 0,
1430
+ "timeline": {
1431
+ "tracks": {
1432
+ "opacity": {
1433
+ "keyframes": [
1434
+ {
1435
+ "time": 16.15,
1436
+ "value": 0,
1437
+ "out": {
1438
+ "type": "cubicBezier",
1439
+ "x1": 0.25,
1440
+ "y1": 0.1,
1441
+ "x2": 0.25,
1442
+ "y2": 1
1443
+ }
1444
+ },
1445
+ {
1446
+ "time": 16.65,
1447
+ "value": 1
1448
+ },
1449
+ {
1450
+ "time": 19,
1451
+ "value": 1,
1452
+ "out": {
1453
+ "type": "cubicBezier",
1454
+ "x1": 0.25,
1455
+ "y1": 0.1,
1456
+ "x2": 0.25,
1457
+ "y2": 1
1458
+ }
1459
+ },
1460
+ {
1461
+ "time": 19.5,
1462
+ "value": 0
1463
+ }
1464
+ ]
1465
+ },
1466
+ "y": {
1467
+ "keyframes": [
1468
+ {
1469
+ "time": 16.15,
1470
+ "value": 370,
1471
+ "out": {
1472
+ "type": "cubicBezier",
1473
+ "x1": 0.25,
1474
+ "y1": 0.1,
1475
+ "x2": 0.25,
1476
+ "y2": 1
1477
+ }
1478
+ },
1479
+ {
1480
+ "time": 16.65,
1481
+ "value": 360
1482
+ }
1483
+ ]
1484
+ }
1485
+ }
1486
+ }
1487
+ },
1488
+ {
1489
+ "id": "s4-chip-2",
1490
+ "type": "group",
1491
+ "x": 643,
1492
+ "y": 360,
1493
+ "children": [
1494
+ {
1495
+ "id": "s4-chip-2-bg",
1496
+ "type": "path",
1497
+ "d": "M 14 0 L 38 0 Q 52 0 52 14 L 52 14 Q 52 28 38 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z",
1498
+ "fill": "#dcfce7",
1499
+ "stroke": "none"
1500
+ },
1501
+ {
1502
+ "id": "s4-chip-2-text",
1503
+ "type": "text",
1504
+ "x": 26,
1505
+ "y": 14,
1506
+ "text": "MP4",
1507
+ "align": "center",
1508
+ "valign": "middle",
1509
+ "fontSize": 12,
1510
+ "fontFamily": "Inter, system-ui, sans-serif",
1511
+ "weight": 600,
1512
+ "fill": "#166534"
1513
+ }
1514
+ ],
1515
+ "opacity": 0,
1516
+ "timeline": {
1517
+ "tracks": {
1518
+ "opacity": {
1519
+ "keyframes": [
1520
+ {
1521
+ "time": 16.3,
1522
+ "value": 0,
1523
+ "out": {
1524
+ "type": "cubicBezier",
1525
+ "x1": 0.25,
1526
+ "y1": 0.1,
1527
+ "x2": 0.25,
1528
+ "y2": 1
1529
+ }
1530
+ },
1531
+ {
1532
+ "time": 16.8,
1533
+ "value": 1
1534
+ },
1535
+ {
1536
+ "time": 19,
1537
+ "value": 1,
1538
+ "out": {
1539
+ "type": "cubicBezier",
1540
+ "x1": 0.25,
1541
+ "y1": 0.1,
1542
+ "x2": 0.25,
1543
+ "y2": 1
1544
+ }
1545
+ },
1546
+ {
1547
+ "time": 19.5,
1548
+ "value": 0
1549
+ }
1550
+ ]
1551
+ },
1552
+ "y": {
1553
+ "keyframes": [
1554
+ {
1555
+ "time": 16.3,
1556
+ "value": 370,
1557
+ "out": {
1558
+ "type": "cubicBezier",
1559
+ "x1": 0.25,
1560
+ "y1": 0.1,
1561
+ "x2": 0.25,
1562
+ "y2": 1
1563
+ }
1564
+ },
1565
+ {
1566
+ "time": 16.8,
1567
+ "value": 360
1568
+ }
1569
+ ]
1570
+ }
1571
+ }
1572
+ }
1573
+ },
1574
+ {
1575
+ "id": "s4-chip-3",
1576
+ "type": "group",
1577
+ "x": 709,
1578
+ "y": 360,
1579
+ "children": [
1580
+ {
1581
+ "id": "s4-chip-3-bg",
1582
+ "type": "path",
1583
+ "d": "M 14 0 L 46 0 Q 60 0 60 14 L 60 14 Q 60 28 46 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z",
1584
+ "fill": "#dbeafe",
1585
+ "stroke": "none"
1586
+ },
1587
+ {
1588
+ "id": "s4-chip-3-text",
1589
+ "type": "text",
1590
+ "x": 30,
1591
+ "y": 14,
1592
+ "text": "WebM",
1593
+ "align": "center",
1594
+ "valign": "middle",
1595
+ "fontSize": 12,
1596
+ "fontFamily": "Inter, system-ui, sans-serif",
1597
+ "weight": 600,
1598
+ "fill": "#1d4ed8"
1599
+ }
1600
+ ],
1601
+ "opacity": 0,
1602
+ "timeline": {
1603
+ "tracks": {
1604
+ "opacity": {
1605
+ "keyframes": [
1606
+ {
1607
+ "time": 16.45,
1608
+ "value": 0,
1609
+ "out": {
1610
+ "type": "cubicBezier",
1611
+ "x1": 0.25,
1612
+ "y1": 0.1,
1613
+ "x2": 0.25,
1614
+ "y2": 1
1615
+ }
1616
+ },
1617
+ {
1618
+ "time": 16.95,
1619
+ "value": 1
1620
+ },
1621
+ {
1622
+ "time": 19,
1623
+ "value": 1,
1624
+ "out": {
1625
+ "type": "cubicBezier",
1626
+ "x1": 0.25,
1627
+ "y1": 0.1,
1628
+ "x2": 0.25,
1629
+ "y2": 1
1630
+ }
1631
+ },
1632
+ {
1633
+ "time": 19.5,
1634
+ "value": 0
1635
+ }
1636
+ ]
1637
+ },
1638
+ "y": {
1639
+ "keyframes": [
1640
+ {
1641
+ "time": 16.45,
1642
+ "value": 370,
1643
+ "out": {
1644
+ "type": "cubicBezier",
1645
+ "x1": 0.25,
1646
+ "y1": 0.1,
1647
+ "x2": 0.25,
1648
+ "y2": 1
1649
+ }
1650
+ },
1651
+ {
1652
+ "time": 16.95,
1653
+ "value": 360
1654
+ }
1655
+ ]
1656
+ }
1657
+ }
1658
+ }
1659
+ },
1660
+ {
1661
+ "id": "s4-footer",
1662
+ "type": "text",
1663
+ "x": 640,
1664
+ "y": 500,
1665
+ "text": "sketchmark.dev",
1666
+ "align": "center",
1667
+ "valign": "middle",
1668
+ "fontSize": 16,
1669
+ "fontFamily": "Inter, system-ui, sans-serif",
1670
+ "weight": 500,
1671
+ "fill": "#94a3b8",
1672
+ "opacity": 0,
1673
+ "timeline": {
1674
+ "tracks": {
1675
+ "opacity": {
1676
+ "keyframes": [
1677
+ {
1678
+ "time": 17,
1679
+ "value": 0,
1680
+ "out": {
1681
+ "type": "cubicBezier",
1682
+ "x1": 0.25,
1683
+ "y1": 0.1,
1684
+ "x2": 0.25,
1685
+ "y2": 1
1686
+ }
1687
+ },
1688
+ {
1689
+ "time": 17.5,
1690
+ "value": 1
1691
+ },
1692
+ {
1693
+ "time": 19.5,
1694
+ "value": 1,
1695
+ "out": {
1696
+ "type": "cubicBezier",
1697
+ "x1": 0.25,
1698
+ "y1": 0.1,
1699
+ "x2": 0.25,
1700
+ "y2": 1
1701
+ }
1702
+ },
1703
+ {
1704
+ "time": 20,
1705
+ "value": 0
1706
+ }
1707
+ ]
1708
+ }
1709
+ }
1710
+ }
1711
+ }
1712
+ ]
1713
+ }