sketchmark 2.1.0 → 2.1.1

package/examples/typography-test.visual.json

@@ -1,757 +0,0 @@
-{
-  "version": 1,
-  "canvas": {
-    "width": 1000,
-    "height": 920,
-    "background": "#ffffff",
-    "duration": 8,
-    "fps": 30
-  },
-  "elements": [
-    {
-      "id": "headline",
-      "type": "text",
-      "x": 500,
-      "y": 56,
-      "text": "Typography Stress Test",
-      "align": "center",
-      "valign": "top",
-      "fontSize": 40,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 700,
-      "fill": "#0f172a",
-      "timeline": {
-        "tracks": {
-          "fontSize": {
-            "keyframes": [
-              {
-                "time": 0,
-                "value": 40,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0.25,
-                  "y1": 0.1,
-                  "x2": 0.25,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 1.6,
-                "value": 46,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0.25,
-                  "y1": 0.1,
-                  "x2": 0.25,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 3.3,
-                "value": 36,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0.25,
-                  "y1": 0.1,
-                  "x2": 0.25,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 4.8,
-                "value": 44,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0.25,
-                  "y1": 0.1,
-                  "x2": 0.25,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 6.5,
-                "value": 40
-              }
-            ]
-          },
-          "letterSpacing": {
-            "keyframes": [
-              {
-                "time": 0,
-                "value": 0,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0.25,
-                  "y1": 0.1,
-                  "x2": 0.25,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 1.6,
-                "value": 1.5,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0.25,
-                  "y1": 0.1,
-                  "x2": 0.25,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 3.3,
-                "value": 4,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0.25,
-                  "y1": 0.1,
-                  "x2": 0.25,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 4.8,
-                "value": 0.8,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0.25,
-                  "y1": 0.1,
-                  "x2": 0.25,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 6.5,
-                "value": 0
-              }
-            ]
-          },
-          "weight": {
-            "keyframes": [
-              {
-                "time": 0,
-                "value": 700
-              },
-              {
-                "time": 2.2,
-                "value": 300
-              },
-              {
-                "time": 4.4,
-                "value": 700
-              },
-              {
-                "time": 6.5,
-                "value": 700
-              }
-            ]
-          }
-        }
-      }
-    },
-    {
-      "id": "subtitle",
-      "type": "text",
-      "x": 500,
-      "y": 112,
-      "text": "Demonstrating multiple alignment modes, text styles, and layout patterns\nin a single cohesive document without visual overlap.",
-      "align": "center",
-      "valign": "top",
-      "fontSize": 16,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 400,
-      "lineHeight": 1.55,
-      "fill": "#475569",
-      "maxWidth": 856,
-      "timeline": {
-        "tracks": {
-          "lineHeight": {
-            "keyframes": [
-              {
-                "time": 0,
-                "value": 1.55,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0.25,
-                  "y1": 0.1,
-                  "x2": 0.25,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 2,
-                "value": 1.9,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0.25,
-                  "y1": 0.1,
-                  "x2": 0.25,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 4.2,
-                "value": 1.3,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0.25,
-                  "y1": 0.1,
-                  "x2": 0.25,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 6.4,
-                "value": 1.55
-              }
-            ]
-          }
-        }
-      }
-    },
-    {
-      "id": "divider-1",
-      "type": "path",
-      "d": "M 72 176 L 928 176",
-      "stroke": "#e2e8f0",
-      "strokeWidth": 1,
-      "fill": "none"
-    },
-    {
-      "id": "para-heading",
-      "type": "text",
-      "x": 72,
-      "y": 216,
-      "text": "Overview",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 20,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 700,
-      "fill": "#0f172a"
-    },
-    {
-      "id": "para-body",
-      "type": "text",
-      "x": 72,
-      "y": 248,
-      "text": "This document tests the render kernel's ability to handle diverse typographic\nscenarios. Each section exercises a different combination of alignment, weight,\nsize, and line height. The goal is to verify that spacing remains predictable\nand that no elements collide regardless of content length or style variation.",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 14,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 400,
-      "lineHeight": 1.7,
-      "fill": "#334155",
-      "maxWidth": 856,
-      "timeline": {
-        "tracks": {
-          "letterSpacing": {
-            "keyframes": [
-              {
-                "time": 0,
-                "value": 0,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0.25,
-                  "y1": 0.1,
-                  "x2": 0.25,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 2.6,
-                "value": 0.6,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0.25,
-                  "y1": 0.1,
-                  "x2": 0.25,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 5.1,
-                "value": 0.15,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0.25,
-                  "y1": 0.1,
-                  "x2": 0.25,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 7,
-                "value": 0
-              }
-            ]
-          }
-        }
-      }
-    },
-    {
-      "id": "list-heading",
-      "type": "text",
-      "x": 72,
-      "y": 358,
-      "text": "Validation Checklist",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 20,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 700,
-      "fill": "#0f172a"
-    },
-    {
-      "id": "list-num-0",
-      "type": "text",
-      "x": 72,
-      "y": 390,
-      "text": "1.",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 14,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 600,
-      "fill": "#2563eb"
-    },
-    {
-      "id": "list-item-0",
-      "type": "text",
-      "x": 96,
-      "y": 390,
-      "text": "Confirm that centered text remains horizontally balanced at all font sizes.",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 14,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 400,
-      "fill": "#334155",
-      "maxWidth": 832
-    },
-    {
-      "id": "list-num-1",
-      "type": "text",
-      "x": 72,
-      "y": 418,
-      "text": "2.",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 14,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 600,
-      "fill": "#2563eb"
-    },
-    {
-      "id": "list-item-1",
-      "type": "text",
-      "x": 96,
-      "y": 418,
-      "text": "Verify left-aligned blocks maintain consistent left edge across line breaks.",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 14,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 400,
-      "fill": "#334155",
-      "maxWidth": 832
-    },
-    {
-      "id": "list-num-2",
-      "type": "text",
-      "x": 72,
-      "y": 446,
-      "text": "3.",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 14,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 600,
-      "fill": "#2563eb"
-    },
-    {
-      "id": "list-item-2",
-      "type": "text",
-      "x": 96,
-      "y": 446,
-      "text": "Check that right-aligned notes anchor correctly without drifting.",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 14,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 400,
-      "fill": "#334155",
-      "maxWidth": 832
-    },
-    {
-      "id": "list-num-3",
-      "type": "text",
-      "x": 72,
-      "y": 474,
-      "text": "4.",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 14,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 600,
-      "fill": "#2563eb"
-    },
-    {
-      "id": "list-item-3",
-      "type": "text",
-      "x": 96,
-      "y": 474,
-      "text": "Ensure code blocks preserve whitespace and monospace character width.",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 14,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 400,
-      "fill": "#334155",
-      "maxWidth": 832
-    },
-    {
-      "id": "list-num-4",
-      "type": "text",
-      "x": 72,
-      "y": 502,
-      "text": "5.",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 14,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 600,
-      "fill": "#2563eb"
-    },
-    {
-      "id": "list-item-4",
-      "type": "text",
-      "x": 96,
-      "y": 502,
-      "text": "Validate that pill components center their labels within fixed bounds.",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 14,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 400,
-      "fill": "#334155",
-      "maxWidth": 832
-    },
-    {
-      "id": "code-bg",
-      "type": "path",
-      "d": "M 80 562 L 920 562 Q 928 562 928 570 L 928 754 Q 928 762 920 762 L 80 762 Q 72 762 72 754 L 72 570 Q 72 562 80 562 Z",
-      "fill": "#1e293b",
-      "stroke": "none",
-      "timeline": {
-        "tracks": {
-          "position": {
-            "keyframes": [
-              {
-                "time": 0,
-                "value": [
-                  -5,
-                  -23
-                ],
-                "out": {
-                  "type": "graph",
-                  "points": [
-                    [
-                      0,
-                      0
-                    ],
-                    [
-                      1,
-                      1
-                    ]
-                  ]
-                }
-              }
-            ]
-          }
-        }
-      }
-    },
-    {
-      "id": "code-text",
-      "type": "text",
-      "x": 92,
-      "y": 582,
-      "text": "function validateLayout(elements) {\n  const bounds = elements.map(el => getBounds(el));\n  for (let i = 0; i < bounds.length; i++) {\n    for (let j = i + 1; j < bounds.length; j++) {\n      if (intersects(bounds[i], bounds[j])) {\n        return { valid: false, collision: [i, j] };\n      }\n    }\n  }\n  return { valid: true };\n}",
-      "align": "left",
-      "valign": "top",
-      "fontSize": 12,
-      "fontFamily": "JetBrains Mono, Fira Code, monospace",
-      "weight": 400,
-      "lineHeight": 1.55,
-      "fill": "#e2e8f0",
-      "maxWidth": 816,
-      "timeline": {
-        "tracks": {
-          "fontFamily": {
-            "keyframes": [
-              {
-                "time": 0,
-                "value": "JetBrains Mono, Fira Code, monospace"
-              },
-              {
-                "time": 5.2,
-                "value": "JetBrains Mono, Fira Code, monospace"
-              }
-            ]
-          },
-          "position": {
-            "keyframes": [
-              {
-                "time": 0,
-                "value": [
-                  77,
-                  552
-                ],
-                "out": {
-                  "type": "graph",
-                  "points": [
-                    [
-                      0,
-                      0
-                    ],
-                    [
-                      1,
-                      1
-                    ]
-                  ]
-                }
-              }
-            ]
-          }
-        }
-      }
-    },
-    {
-      "id": "note-text",
-      "type": "text",
-      "x": 928,
-      "y": 790,
-      "text": "Note: All measurements are in logical pixels.\nActual rendering may vary by display density.",
-      "align": "right",
-      "valign": "top",
-      "fontSize": 12,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 400,
-      "lineHeight": 1.5,
-      "fill": "#94a3b8",
-      "maxWidth": 320,
-      "timeline": {
-        "tracks": {
-          "fontSize": {
-            "keyframes": [
-              {
-                "time": 0,
-                "value": 12,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0.25,
-                  "y1": 0.1,
-                  "x2": 0.25,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 2.5,
-                "value": 14,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0.25,
-                  "y1": 0.1,
-                  "x2": 0.25,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 5.3,
-                "value": 12
-              }
-            ]
-          },
-          "letterSpacing": {
-            "keyframes": [
-              {
-                "time": 0,
-                "value": 0,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0.25,
-                  "y1": 0.1,
-                  "x2": 0.25,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 2.5,
-                "value": 1.2,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0.25,
-                  "y1": 0.1,
-                  "x2": 0.25,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 5.3,
-                "value": 0.2,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0.25,
-                  "y1": 0.1,
-                  "x2": 0.25,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 7.1,
-                "value": 0
-              }
-            ]
-          }
-        }
-      }
-    },
-    {
-      "id": "pill-bg-0",
-      "type": "path",
-      "d": "M 358 842 L 426 842 Q 440 842 440 856 L 440 856 Q 440 870 426 870 L 358 870 Q 344 870 344 856 L 344 856 Q 344 842 358 842 Z",
-      "fill": "#f1f5f9",
-      "stroke": "#cbd5e1",
-      "strokeWidth": 1
-    },
-    {
-      "id": "pill-text-0",
-      "type": "text",
-      "x": 392,
-      "y": 856,
-      "text": "Centered",
-      "align": "center",
-      "valign": "middle",
-      "fontSize": 12,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 500,
-      "fill": "#475569",
-      "timeline": {
-        "tracks": {
-          "weight": {
-            "keyframes": [
-              {
-                "time": 0,
-                "value": 500
-              },
-              {
-                "time": 1.8,
-                "value": 700
-              },
-              {
-                "time": 4.1,
-                "value": 300
-              },
-              {
-                "time": 6.2,
-                "value": 500
-              }
-            ]
-          }
-        }
-      }
-    },
-    {
-      "id": "pill-bg-1",
-      "type": "path",
-      "d": "M 466 842 L 534 842 Q 548 842 548 856 L 548 856 Q 548 870 534 870 L 466 870 Q 452 870 452 856 L 452 856 Q 452 842 466 842 Z",
-      "fill": "#f1f5f9",
-      "stroke": "#cbd5e1",
-      "strokeWidth": 1
-    },
-    {
-      "id": "pill-text-1",
-      "type": "text",
-      "x": 500,
-      "y": 856,
-      "text": "Balanced",
-      "align": "center",
-      "valign": "middle",
-      "fontSize": 12,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 500,
-      "fill": "#475569",
-      "timeline": {
-        "tracks": {
-          "weight": {
-            "keyframes": [
-              {
-                "time": 0,
-                "value": 500
-              },
-              {
-                "time": 1.98,
-                "value": 700
-              },
-              {
-                "time": 4.279999999999999,
-                "value": 300
-              },
-              {
-                "time": 6.38,
-                "value": 500
-              }
-            ]
-          }
-        }
-      }
-    },
-    {
-      "id": "pill-bg-2",
-      "type": "path",
-      "d": "M 574 842 L 642 842 Q 656 842 656 856 L 656 856 Q 656 870 642 870 L 574 870 Q 560 870 560 856 L 560 856 Q 560 842 574 842 Z",
-      "fill": "#f1f5f9",
-      "stroke": "#cbd5e1",
-      "strokeWidth": 1
-    },
-    {
-      "id": "pill-text-2",
-      "type": "text",
-      "x": 608,
-      "y": 856,
-      "text": "Verified",
-      "align": "center",
-      "valign": "middle",
-      "fontSize": 12,
-      "fontFamily": "Inter, system-ui, sans-serif",
-      "weight": 500,
-      "fill": "#475569",
-      "timeline": {
-        "tracks": {
-          "weight": {
-            "keyframes": [
-              {
-                "time": 0,
-                "value": 500
-              },
-              {
-                "time": 2.16,
-                "value": 700
-              },
-              {
-                "time": 4.46,
-                "value": 300
-              },
-              {
-                "time": 6.5600000000000005,
-                "value": 500
-              }
-            ]
-          }
-        }
-      }
-    }
-  ]
-}