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/product-demo.visual.json ADDED
@@ -0,0 +1,866 @@
1
+ {
2
+ "version": 1,
3
+ "canvas": {
4
+ "width": 1280,
5
+ "height": 720,
6
+ "background": "#0f172a",
7
+ "duration": 12,
8
+ "fps": 30
9
+ },
10
+ "elements": [
11
+ {
12
+ "id": "logo",
13
+ "type": "text",
14
+ "x": 640,
15
+ "y": 320,
16
+ "text": "Sketchmark",
17
+ "align": "center",
18
+ "valign": "middle",
19
+ "fontSize": 72,
20
+ "fontFamily": "Inter, system-ui, sans-serif",
21
+ "weight": 800,
22
+ "fill": "#ffffff",
23
+ "timeline": {
24
+ "tracks": {
25
+ "opacity": {
26
+ "keyframes": [
27
+ {
28
+ "time": 0,
29
+ "value": 0,
30
+ "out": {
31
+ "type": "cubicBezier",
32
+ "x1": 0.16,
33
+ "y1": 1,
34
+ "x2": 0.3,
35
+ "y2": 1
36
+ }
37
+ },
38
+ {
39
+ "time": 0.6,
40
+ "value": 1
41
+ },
42
+ {
43
+ "time": 2.4,
44
+ "value": 1,
45
+ "out": {
46
+ "type": "cubicBezier",
47
+ "x1": 0.16,
48
+ "y1": 1,
49
+ "x2": 0.3,
50
+ "y2": 1
51
+ }
52
+ },
53
+ {
54
+ "time": 3,
55
+ "value": 0
56
+ }
57
+ ]
58
+ },
59
+ "y": {
60
+ "keyframes": [
61
+ {
62
+ "time": 0,
63
+ "value": 340,
64
+ "out": {
65
+ "type": "cubicBezier",
66
+ "x1": 0.16,
67
+ "y1": 1,
68
+ "x2": 0.3,
69
+ "y2": 1
70
+ }
71
+ },
72
+ {
73
+ "time": 0.6,
74
+ "value": 320
75
+ }
76
+ ]
77
+ }
78
+ }
79
+ }
80
+ },
81
+ {
82
+ "id": "tagline",
83
+ "type": "text",
84
+ "x": 640,
85
+ "y": 390,
86
+ "text": "Visual documents as JSON",
87
+ "align": "center",
88
+ "valign": "middle",
89
+ "fontSize": 24,
90
+ "fontFamily": "Inter, system-ui, sans-serif",
91
+ "weight": 400,
92
+ "fill": "#94a3b8",
93
+ "timeline": {
94
+ "tracks": {
95
+ "opacity": {
96
+ "keyframes": [
97
+ {
98
+ "time": 0.3,
99
+ "value": 0,
100
+ "out": {
101
+ "type": "cubicBezier",
102
+ "x1": 0.16,
103
+ "y1": 1,
104
+ "x2": 0.3,
105
+ "y2": 1
106
+ }
107
+ },
108
+ {
109
+ "time": 0.9,
110
+ "value": 1
111
+ },
112
+ {
113
+ "time": 2.4,
114
+ "value": 1,
115
+ "out": {
116
+ "type": "cubicBezier",
117
+ "x1": 0.16,
118
+ "y1": 1,
119
+ "x2": 0.3,
120
+ "y2": 1
121
+ }
122
+ },
123
+ {
124
+ "time": 3,
125
+ "value": 0
126
+ }
127
+ ]
128
+ }
129
+ }
130
+ }
131
+ },
132
+ {
133
+ "id": "pill-0",
134
+ "type": "group",
135
+ "x": 406,
136
+ "y": 336,
137
+ "children": [
138
+ {
139
+ "id": "pill-0-bg",
140
+ "type": "path",
141
+ "d": "M 24 0 L 116 0 Q 140 0 140 24 L 140 24 Q 140 48 116 48 L 24 48 Q 0 48 0 24 L 0 24 Q 0 0 24 0 Z",
142
+ "fill": "#3b82f6",
143
+ "stroke": "none"
144
+ },
145
+ {
146
+ "id": "pill-0-text",
147
+ "type": "text",
148
+ "x": 70,
149
+ "y": 24,
150
+ "text": "Render",
151
+ "align": "center",
152
+ "valign": "middle",
153
+ "fontSize": 18,
154
+ "fontFamily": "Inter, system-ui, sans-serif",
155
+ "weight": 600,
156
+ "fill": "#ffffff"
157
+ }
158
+ ],
159
+ "opacity": 0,
160
+ "timeline": {
161
+ "tracks": {
162
+ "opacity": {
163
+ "keyframes": [
164
+ {
165
+ "time": 3,
166
+ "value": 0,
167
+ "out": {
168
+ "type": "cubicBezier",
169
+ "x1": 0.16,
170
+ "y1": 1,
171
+ "x2": 0.3,
172
+ "y2": 1
173
+ }
174
+ },
175
+ {
176
+ "time": 3.4,
177
+ "value": 1
178
+ },
179
+ {
180
+ "time": 5.4,
181
+ "value": 1,
182
+ "out": {
183
+ "type": "cubicBezier",
184
+ "x1": 0.16,
185
+ "y1": 1,
186
+ "x2": 0.3,
187
+ "y2": 1
188
+ }
189
+ },
190
+ {
191
+ "time": 6,
192
+ "value": 0
193
+ }
194
+ ]
195
+ },
196
+ "y": {
197
+ "keyframes": [
198
+ {
199
+ "time": 3,
200
+ "value": 356,
201
+ "out": {
202
+ "type": "cubicBezier",
203
+ "x1": 0.16,
204
+ "y1": 1,
205
+ "x2": 0.3,
206
+ "y2": 1
207
+ }
208
+ },
209
+ {
210
+ "time": 3.4,
211
+ "value": 336
212
+ }
213
+ ]
214
+ }
215
+ }
216
+ }
217
+ },
218
+ {
219
+ "id": "pill-1",
220
+ "type": "group",
221
+ "x": 570,
222
+ "y": 336,
223
+ "children": [
224
+ {
225
+ "id": "pill-1-bg",
226
+ "type": "path",
227
+ "d": "M 24 0 L 116 0 Q 140 0 140 24 L 140 24 Q 140 48 116 48 L 24 48 Q 0 48 0 24 L 0 24 Q 0 0 24 0 Z",
228
+ "fill": "#3b82f6",
229
+ "stroke": "none"
230
+ },
231
+ {
232
+ "id": "pill-1-text",
233
+ "type": "text",
234
+ "x": 70,
235
+ "y": 24,
236
+ "text": "Animate",
237
+ "align": "center",
238
+ "valign": "middle",
239
+ "fontSize": 18,
240
+ "fontFamily": "Inter, system-ui, sans-serif",
241
+ "weight": 600,
242
+ "fill": "#ffffff"
243
+ }
244
+ ],
245
+ "opacity": 0,
246
+ "timeline": {
247
+ "tracks": {
248
+ "opacity": {
249
+ "keyframes": [
250
+ {
251
+ "time": 3.15,
252
+ "value": 0,
253
+ "out": {
254
+ "type": "cubicBezier",
255
+ "x1": 0.16,
256
+ "y1": 1,
257
+ "x2": 0.3,
258
+ "y2": 1
259
+ }
260
+ },
261
+ {
262
+ "time": 3.55,
263
+ "value": 1
264
+ },
265
+ {
266
+ "time": 5.4,
267
+ "value": 1,
268
+ "out": {
269
+ "type": "cubicBezier",
270
+ "x1": 0.16,
271
+ "y1": 1,
272
+ "x2": 0.3,
273
+ "y2": 1
274
+ }
275
+ },
276
+ {
277
+ "time": 6,
278
+ "value": 0
279
+ }
280
+ ]
281
+ },
282
+ "y": {
283
+ "keyframes": [
284
+ {
285
+ "time": 3.15,
286
+ "value": 356,
287
+ "out": {
288
+ "type": "cubicBezier",
289
+ "x1": 0.16,
290
+ "y1": 1,
291
+ "x2": 0.3,
292
+ "y2": 1
293
+ }
294
+ },
295
+ {
296
+ "time": 3.55,
297
+ "value": 336
298
+ }
299
+ ]
300
+ }
301
+ }
302
+ }
303
+ },
304
+ {
305
+ "id": "pill-2",
306
+ "type": "group",
307
+ "x": 734,
308
+ "y": 336,
309
+ "children": [
310
+ {
311
+ "id": "pill-2-bg",
312
+ "type": "path",
313
+ "d": "M 24 0 L 116 0 Q 140 0 140 24 L 140 24 Q 140 48 116 48 L 24 48 Q 0 48 0 24 L 0 24 Q 0 0 24 0 Z",
314
+ "fill": "#3b82f6",
315
+ "stroke": "none"
316
+ },
317
+ {
318
+ "id": "pill-2-text",
319
+ "type": "text",
320
+ "x": 70,
321
+ "y": 24,
322
+ "text": "Export",
323
+ "align": "center",
324
+ "valign": "middle",
325
+ "fontSize": 18,
326
+ "fontFamily": "Inter, system-ui, sans-serif",
327
+ "weight": 600,
328
+ "fill": "#ffffff"
329
+ }
330
+ ],
331
+ "opacity": 0,
332
+ "timeline": {
333
+ "tracks": {
334
+ "opacity": {
335
+ "keyframes": [
336
+ {
337
+ "time": 3.3,
338
+ "value": 0,
339
+ "out": {
340
+ "type": "cubicBezier",
341
+ "x1": 0.16,
342
+ "y1": 1,
343
+ "x2": 0.3,
344
+ "y2": 1
345
+ }
346
+ },
347
+ {
348
+ "time": 3.6999999999999997,
349
+ "value": 1
350
+ },
351
+ {
352
+ "time": 5.4,
353
+ "value": 1,
354
+ "out": {
355
+ "type": "cubicBezier",
356
+ "x1": 0.16,
357
+ "y1": 1,
358
+ "x2": 0.3,
359
+ "y2": 1
360
+ }
361
+ },
362
+ {
363
+ "time": 6,
364
+ "value": 0
365
+ }
366
+ ]
367
+ },
368
+ "y": {
369
+ "keyframes": [
370
+ {
371
+ "time": 3.3,
372
+ "value": 356,
373
+ "out": {
374
+ "type": "cubicBezier",
375
+ "x1": 0.16,
376
+ "y1": 1,
377
+ "x2": 0.3,
378
+ "y2": 1
379
+ }
380
+ },
381
+ {
382
+ "time": 3.6999999999999997,
383
+ "value": 336
384
+ }
385
+ ]
386
+ }
387
+ }
388
+ }
389
+ },
390
+ {
391
+ "id": "scene2-headline",
392
+ "type": "text",
393
+ "x": 640,
394
+ "y": 280,
395
+ "text": "Three simple commands",
396
+ "align": "center",
397
+ "valign": "middle",
398
+ "fontSize": 20,
399
+ "fontFamily": "Inter, system-ui, sans-serif",
400
+ "weight": 500,
401
+ "fill": "#94a3b8",
402
+ "opacity": 0,
403
+ "timeline": {
404
+ "tracks": {
405
+ "opacity": {
406
+ "keyframes": [
407
+ {
408
+ "time": 3,
409
+ "value": 0,
410
+ "out": {
411
+ "type": "cubicBezier",
412
+ "x1": 0.16,
413
+ "y1": 1,
414
+ "x2": 0.3,
415
+ "y2": 1
416
+ }
417
+ },
418
+ {
419
+ "time": 3.4,
420
+ "value": 1
421
+ },
422
+ {
423
+ "time": 5.4,
424
+ "value": 1,
425
+ "out": {
426
+ "type": "cubicBezier",
427
+ "x1": 0.16,
428
+ "y1": 1,
429
+ "x2": 0.3,
430
+ "y2": 1
431
+ }
432
+ },
433
+ {
434
+ "time": 6,
435
+ "value": 0
436
+ }
437
+ ]
438
+ }
439
+ }
440
+ }
441
+ },
442
+ {
443
+ "id": "panel-bg",
444
+ "type": "path",
445
+ "d": "M 352 220 L 928 220 Q 940 220 940 232 L 940 528 Q 940 540 928 540 L 352 540 Q 340 540 340 528 L 340 232 Q 340 220 352 220 Z",
446
+ "fill": "#1e293b",
447
+ "stroke": "#334155",
448
+ "strokeWidth": 1,
449
+ "opacity": 0,
450
+ "timeline": {
451
+ "tracks": {
452
+ "opacity": {
453
+ "keyframes": [
454
+ {
455
+ "time": 6,
456
+ "value": 0,
457
+ "out": {
458
+ "type": "cubicBezier",
459
+ "x1": 0.16,
460
+ "y1": 1,
461
+ "x2": 0.3,
462
+ "y2": 1
463
+ }
464
+ },
465
+ {
466
+ "time": 6.5,
467
+ "value": 1
468
+ },
469
+ {
470
+ "time": 9.5,
471
+ "value": 1,
472
+ "out": {
473
+ "type": "cubicBezier",
474
+ "x1": 0.16,
475
+ "y1": 1,
476
+ "x2": 0.3,
477
+ "y2": 1
478
+ }
479
+ },
480
+ {
481
+ "time": 10,
482
+ "value": 0
483
+ }
484
+ ]
485
+ },
486
+ "scale": {
487
+ "keyframes": [
488
+ {
489
+ "time": 6,
490
+ "value": 0.95,
491
+ "out": {
492
+ "type": "cubicBezier",
493
+ "x1": 0.16,
494
+ "y1": 1,
495
+ "x2": 0.3,
496
+ "y2": 1
497
+ }
498
+ },
499
+ {
500
+ "time": 6.5,
501
+ "value": 1
502
+ }
503
+ ]
504
+ }
505
+ }
506
+ }
507
+ },
508
+ {
509
+ "id": "panel-title",
510
+ "type": "text",
511
+ "x": 360,
512
+ "y": 240,
513
+ "text": "scene.visual.json",
514
+ "align": "left",
515
+ "valign": "top",
516
+ "fontSize": 12,
517
+ "fontFamily": "JetBrains Mono, Fira Code, monospace",
518
+ "weight": 500,
519
+ "fill": "#64748b",
520
+ "opacity": 0,
521
+ "timeline": {
522
+ "tracks": {
523
+ "opacity": {
524
+ "keyframes": [
525
+ {
526
+ "time": 6.3,
527
+ "value": 0,
528
+ "out": {
529
+ "type": "cubicBezier",
530
+ "x1": 0.16,
531
+ "y1": 1,
532
+ "x2": 0.3,
533
+ "y2": 1
534
+ }
535
+ },
536
+ {
537
+ "time": 6.7,
538
+ "value": 1
539
+ },
540
+ {
541
+ "time": 9.5,
542
+ "value": 1,
543
+ "out": {
544
+ "type": "cubicBezier",
545
+ "x1": 0.16,
546
+ "y1": 1,
547
+ "x2": 0.3,
548
+ "y2": 1
549
+ }
550
+ },
551
+ {
552
+ "time": 10,
553
+ "value": 0
554
+ }
555
+ ]
556
+ }
557
+ }
558
+ }
559
+ },
560
+ {
561
+ "id": "panel-code",
562
+ "type": "text",
563
+ "x": 360,
564
+ "y": 268,
565
+ "text": "{\n \"version\": 1,\n \"canvas\": { \"width\": 1280, \"height\": 720 },\n \"elements\": [\n {\n \"id\": \"title\",\n \"type\": \"text\",\n \"text\": \"Hello World\",\n \"x\": 640, \"y\": 360,\n \"fontSize\": 48\n }\n ]\n}",
566
+ "align": "left",
567
+ "valign": "top",
568
+ "fontSize": 13,
569
+ "fontFamily": "JetBrains Mono, Fira Code, monospace",
570
+ "weight": 400,
571
+ "lineHeight": 1.45,
572
+ "fill": "#e2e8f0",
573
+ "opacity": 0,
574
+ "maxWidth": 560,
575
+ "timeline": {
576
+ "tracks": {
577
+ "opacity": {
578
+ "keyframes": [
579
+ {
580
+ "time": 6.5,
581
+ "value": 0,
582
+ "out": {
583
+ "type": "cubicBezier",
584
+ "x1": 0.16,
585
+ "y1": 1,
586
+ "x2": 0.3,
587
+ "y2": 1
588
+ }
589
+ },
590
+ {
591
+ "time": 7,
592
+ "value": 1
593
+ },
594
+ {
595
+ "time": 9.5,
596
+ "value": 1,
597
+ "out": {
598
+ "type": "cubicBezier",
599
+ "x1": 0.16,
600
+ "y1": 1,
601
+ "x2": 0.3,
602
+ "y2": 1
603
+ }
604
+ },
605
+ {
606
+ "time": 10,
607
+ "value": 0
608
+ }
609
+ ]
610
+ }
611
+ }
612
+ }
613
+ },
614
+ {
615
+ "id": "scene3-headline",
616
+ "type": "text",
617
+ "x": 640,
618
+ "y": 170,
619
+ "text": "Define visuals in JSON",
620
+ "align": "center",
621
+ "valign": "middle",
622
+ "fontSize": 28,
623
+ "fontFamily": "Inter, system-ui, sans-serif",
624
+ "weight": 700,
625
+ "fill": "#ffffff",
626
+ "opacity": 0,
627
+ "timeline": {
628
+ "tracks": {
629
+ "opacity": {
630
+ "keyframes": [
631
+ {
632
+ "time": 6,
633
+ "value": 0,
634
+ "out": {
635
+ "type": "cubicBezier",
636
+ "x1": 0.16,
637
+ "y1": 1,
638
+ "x2": 0.3,
639
+ "y2": 1
640
+ }
641
+ },
642
+ {
643
+ "time": 6.5,
644
+ "value": 1
645
+ },
646
+ {
647
+ "time": 9.5,
648
+ "value": 1,
649
+ "out": {
650
+ "type": "cubicBezier",
651
+ "x1": 0.16,
652
+ "y1": 1,
653
+ "x2": 0.3,
654
+ "y2": 1
655
+ }
656
+ },
657
+ {
658
+ "time": 10,
659
+ "value": 0
660
+ }
661
+ ]
662
+ }
663
+ }
664
+ }
665
+ },
666
+ {
667
+ "id": "cta-headline",
668
+ "type": "text",
669
+ "x": 640,
670
+ "y": 300,
671
+ "text": "Start building",
672
+ "align": "center",
673
+ "valign": "middle",
674
+ "fontSize": 52,
675
+ "fontFamily": "Inter, system-ui, sans-serif",
676
+ "weight": 800,
677
+ "fill": "#ffffff",
678
+ "opacity": 0,
679
+ "timeline": {
680
+ "tracks": {
681
+ "opacity": {
682
+ "keyframes": [
683
+ {
684
+ "time": 10,
685
+ "value": 0,
686
+ "out": {
687
+ "type": "cubicBezier",
688
+ "x1": 0.16,
689
+ "y1": 1,
690
+ "x2": 0.3,
691
+ "y2": 1
692
+ }
693
+ },
694
+ {
695
+ "time": 10.5,
696
+ "value": 1
697
+ }
698
+ ]
699
+ },
700
+ "y": {
701
+ "keyframes": [
702
+ {
703
+ "time": 10,
704
+ "value": 320,
705
+ "out": {
706
+ "type": "cubicBezier",
707
+ "x1": 0.16,
708
+ "y1": 1,
709
+ "x2": 0.3,
710
+ "y2": 1
711
+ }
712
+ },
713
+ {
714
+ "time": 10.5,
715
+ "value": 300
716
+ }
717
+ ]
718
+ }
719
+ }
720
+ }
721
+ },
722
+ {
723
+ "id": "cta-btn-bg",
724
+ "type": "path",
725
+ "d": "M 548 370 L 732 370 Q 740 370 740 378 L 740 414 Q 740 422 732 422 L 548 422 Q 540 422 540 414 L 540 378 Q 540 370 548 370 Z",
726
+ "fill": "#ffffff",
727
+ "stroke": "none",
728
+ "opacity": 0,
729
+ "timeline": {
730
+ "tracks": {
731
+ "opacity": {
732
+ "keyframes": [
733
+ {
734
+ "time": 10.3,
735
+ "value": 0,
736
+ "out": {
737
+ "type": "cubicBezier",
738
+ "x1": 0.16,
739
+ "y1": 1,
740
+ "x2": 0.3,
741
+ "y2": 1
742
+ }
743
+ },
744
+ {
745
+ "time": 10.7,
746
+ "value": 1
747
+ }
748
+ ]
749
+ },
750
+ "y": {
751
+ "keyframes": [
752
+ {
753
+ "time": 10.3,
754
+ "value": 390,
755
+ "out": {
756
+ "type": "cubicBezier",
757
+ "x1": 0.16,
758
+ "y1": 1,
759
+ "x2": 0.3,
760
+ "y2": 1
761
+ }
762
+ },
763
+ {
764
+ "time": 10.7,
765
+ "value": 370
766
+ }
767
+ ]
768
+ }
769
+ }
770
+ }
771
+ },
772
+ {
773
+ "id": "cta-btn-text",
774
+ "type": "text",
775
+ "x": 640,
776
+ "y": 396,
777
+ "text": "Get Started",
778
+ "align": "center",
779
+ "valign": "middle",
780
+ "fontSize": 16,
781
+ "fontFamily": "Inter, system-ui, sans-serif",
782
+ "weight": 600,
783
+ "fill": "#0f172a",
784
+ "opacity": 0,
785
+ "timeline": {
786
+ "tracks": {
787
+ "opacity": {
788
+ "keyframes": [
789
+ {
790
+ "time": 10.3,
791
+ "value": 0,
792
+ "out": {
793
+ "type": "cubicBezier",
794
+ "x1": 0.16,
795
+ "y1": 1,
796
+ "x2": 0.3,
797
+ "y2": 1
798
+ }
799
+ },
800
+ {
801
+ "time": 10.7,
802
+ "value": 1
803
+ }
804
+ ]
805
+ },
806
+ "y": {
807
+ "keyframes": [
808
+ {
809
+ "time": 10.3,
810
+ "value": 416,
811
+ "out": {
812
+ "type": "cubicBezier",
813
+ "x1": 0.16,
814
+ "y1": 1,
815
+ "x2": 0.3,
816
+ "y2": 1
817
+ }
818
+ },
819
+ {
820
+ "time": 10.7,
821
+ "value": 396
822
+ }
823
+ ]
824
+ }
825
+ }
826
+ }
827
+ },
828
+ {
829
+ "id": "footer-label",
830
+ "type": "text",
831
+ "x": 640,
832
+ "y": 680,
833
+ "text": "sketchmark.dev",
834
+ "align": "center",
835
+ "valign": "middle",
836
+ "fontSize": 14,
837
+ "fontFamily": "Inter, system-ui, sans-serif",
838
+ "weight": 500,
839
+ "fill": "#94a3b8",
840
+ "opacity": 0,
841
+ "timeline": {
842
+ "tracks": {
843
+ "opacity": {
844
+ "keyframes": [
845
+ {
846
+ "time": 10.5,
847
+ "value": 0,
848
+ "out": {
849
+ "type": "cubicBezier",
850
+ "x1": 0.16,
851
+ "y1": 1,
852
+ "x2": 0.3,
853
+ "y2": 1
854
+ }
855
+ },
856
+ {
857
+ "time": 11,
858
+ "value": 0.7
859
+ }
860
+ ]
861
+ }
862
+ }
863
+ }
864
+ }
865
+ ]
866
+ }