npm - sketchmark - Versions diffs - 2.0.0 → 2.1.0 - Mend

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

package/ANIMATABLE_MATRIX.md +177 -0
package/KERNEL_SPEC.md +412 -0
package/PACKS.md +81 -0
package/PRESETS.md +182 -0
package/README.md +274 -188
package/bin/editor-ui.cjs +2285 -0
package/bin/preview-ui.cjs +74 -0
package/bin/sketchmark.cjs +648 -2008
package/dist/src/animatable.d.ts +21 -0
package/dist/src/animatable.js +439 -0
package/dist/src/builders/index.d.ts +1 -11
package/dist/src/builders/index.js +1 -19
package/dist/src/diagnostics.js +1 -64
package/dist/src/edit.d.ts +27 -0
package/dist/src/edit.js +162 -0
package/dist/src/index.d.ts +4 -13
package/dist/src/index.js +4 -13
package/dist/src/keyframes.d.ts +48 -0
package/dist/src/keyframes.js +182 -0
package/dist/src/motion.d.ts +4 -0
package/dist/src/motion.js +262 -0
package/dist/src/normalize.js +120 -151
package/dist/src/presets/characters.d.ts +15 -0
package/dist/src/presets/characters.js +113 -0
package/dist/src/presets/compose.d.ts +5 -0
package/dist/src/presets/compose.js +80 -0
package/dist/src/presets/effects.d.ts +40 -0
package/dist/src/presets/effects.js +79 -0
package/dist/src/presets/helpers.d.ts +33 -0
package/dist/src/presets/helpers.js +165 -0
package/dist/src/presets/index.d.ts +9 -0
package/dist/src/presets/index.js +48 -0
package/dist/src/presets/motions.d.ts +33 -0
package/dist/src/presets/motions.js +75 -0
package/dist/src/presets/scenes.d.ts +35 -0
package/dist/src/presets/scenes.js +134 -0
package/dist/src/presets/shapes.d.ts +71 -0
package/dist/src/presets/shapes.js +96 -0
package/dist/src/presets/transitions.d.ts +29 -0
package/dist/src/presets/transitions.js +113 -0
package/dist/src/presets/types.d.ts +34 -0
package/dist/src/presets/types.js +2 -0
package/dist/src/render/html.js +1 -4
package/dist/src/render/svg.d.ts +2 -2
package/dist/src/render/svg.js +86 -82
package/dist/src/render/three-html.js +67 -113
package/dist/src/scenes.js +1 -0
package/dist/src/schema.js +218 -280
package/dist/src/shapes/builtins.js +11 -47
package/dist/src/shapes/common.js +12 -11
package/dist/src/shapes/registry.d.ts +0 -1
package/dist/src/shapes/registry.js +0 -4
package/dist/src/shapes/types.d.ts +1 -3
package/dist/src/types.d.ts +57 -288
package/dist/src/utils.d.ts +2 -11
package/dist/src/utils.js +13 -70
package/dist/src/validate.js +321 -275
package/dist/tests/run.js +576 -510
package/examples/1730642890464.jpg +0 -0
package/examples/app-screen.svg +1 -0
package/examples/app-screen.visual.json +503 -0
package/examples/dashboard-table.svg +1 -0
package/examples/dashboard-table.visual.json +708 -0
package/examples/dev-docs.svg +1 -0
package/examples/dev-docs.visual.json +248 -0
package/examples/explainer.mp4 +0 -0
package/examples/explainer.visual.json +1713 -0
package/examples/group-origin-effects-lab-check.svg +1 -0
package/examples/group-origin-effects-lab.visual.json +1880 -0
package/examples/image-clip-radius.visual.json +271 -0
package/examples/make-app-screen.cjs +368 -0
package/examples/make-dashboard-table.cjs +277 -0
package/examples/make-dev-docs.cjs +233 -0
package/examples/make-explainer.cjs +438 -0
package/examples/make-group-origin-effects-lab.cjs +370 -0
package/examples/make-image-clip-radius.cjs +169 -0
package/examples/make-modal-dialog.cjs +355 -0
package/examples/make-origin-effects-lab.cjs +311 -0
package/examples/make-preset-character-motion.cjs +32 -0
package/examples/make-presets-demo.cjs +30 -0
package/examples/make-pricing.cjs +286 -0
package/examples/make-product-demo.cjs +468 -0
package/examples/make-product-hero.cjs +223 -0
package/examples/make-release-notes.cjs +333 -0
package/examples/make-settings-panel.cjs +435 -0
package/examples/make-split-preview.cjs +248 -0
package/examples/make-storyboard.cjs +215 -0
package/examples/make-transcript.cjs +234 -0
package/examples/make-typography-test.cjs +397 -0
package/examples/make-ui-demo-explainer.cjs +1094 -0
package/examples/make-ui-flow.cjs +762 -0
package/examples/make-walkthrough.cjs +815 -0
package/examples/modal-dialog.svg +1 -0
package/examples/modal-dialog.visual.json +239 -0
package/examples/origin-effects-lab-check.svg +1 -0
package/examples/origin-effects-lab.visual.json +1412 -0
package/examples/preset-character-motion.visual.json +949 -0
package/examples/presets-demo.visual.json +787 -0
package/examples/pricing.svg +1 -0
package/examples/pricing.visual.json +652 -0
package/examples/product-demo.mp4 +0 -0
package/examples/product-demo.visual.json +866 -0
package/examples/product-hero.svg +1 -0
package/examples/product-hero.visual.json +242 -0
package/examples/release-notes.svg +1 -0
package/examples/release-notes.visual.json +467 -0
package/examples/settings-panel.svg +1 -0
package/examples/settings-panel.visual.json +501 -0
package/examples/split-preview.svg +1 -0
package/examples/split-preview.visual.json +124 -0
package/examples/storyboard.svg +1 -0
package/examples/storyboard.visual.json +312 -0
package/examples/transcript.svg +1 -0
package/examples/transcript.visual.json +407 -0
package/examples/typography-indent-check.svg +1 -0
package/examples/typography-lineheight-0.svg +1 -0
package/examples/typography-lineheight-2.svg +1 -0
package/examples/typography-test-check.svg +1 -0
package/examples/typography-test.svg +1 -0
package/examples/typography-test.visual.json +757 -0
package/examples/ui-demo-explainer-billing.svg +1 -0
package/examples/ui-demo-explainer-check.svg +1 -0
package/examples/ui-demo-explainer-save.svg +1 -0
package/examples/ui-demo-explainer-toggle.svg +1 -0
package/examples/ui-demo-explainer.mp4 +0 -0
package/examples/ui-demo-explainer.visual.json +2597 -0
package/examples/ui-flow.mp4 +0 -0
package/examples/ui-flow.visual.json +1211 -0
package/examples/walkthrough.mp4 +0 -0
package/examples/walkthrough.visual.json +1372 -0
package/package.json +52 -52
package/schema/visual.schema.json +1086 -930

package/examples/origin-effects-lab.visual.json ADDED Viewed

@@ -0,0 +1,1412 @@
+{
+  "version": 1,
+  "canvas": {
+    "width": 1280,
+    "height": 760,
+    "background": "#07111f",
+    "duration": 6,
+    "fps": 30
+  },
+  "elements": [
+    {
+      "id": "lab_title",
+      "type": "text",
+      "x": 70,
+      "y": 52,
+      "text": "Origin Transform Lab",
+      "fontSize": 38,
+      "fontFamily": "Roboto, Arial, sans-serif",
+      "weight": 700,
+      "fill": "#f8fafc"
+    },
+    {
+      "id": "lab_body",
+      "type": "text",
+      "x": 70,
+      "y": 96,
+      "text": "Same rounded rectangle, animated as a group. Only the origin changes.",
+      "fontSize": 16,
+      "fontFamily": "Roboto, Arial, sans-serif",
+      "weight": 400,
+      "fill": "#94a3b8"
+    },
+    {
+      "id": "scale_row_label",
+      "type": "text",
+      "x": 70,
+      "y": 112,
+      "text": "Scale tests",
+      "fontSize": 18,
+      "fontFamily": "Roboto, Arial, sans-serif",
+      "weight": 700,
+      "fill": "#7dd3fc",
+      "timeline": {
+        "tracks": {
+          "position": {
+            "keyframes": [
+              {
+                "time": 0,
+                "value": [
+                  70,
+                  122
+                ],
+                "out": {
+                  "type": "graph",
+                  "points": [
+                    [
+                      0,
+                      0
+                    ],
+                    [
+                      1,
+                      1
+                    ]
+                  ]
+                }
+              }
+            ]
+          }
+        }
+      }
+    },
+    {
+      "id": "rotate_row_label",
+      "type": "text",
+      "x": 70,
+      "y": 397,
+      "text": "Rotation tests",
+      "fontSize": 18,
+      "fontFamily": "Roboto, Arial, sans-serif",
+      "weight": 700,
+      "fill": "#7dd3fc"
+    },
+    {
+      "id": "scale_top_left_panel",
+      "type": "path",
+      "d": "M 92 150 L 318 150 Q 340 150 340 172 L 340 368 Q 340 390 318 390 L 92 390 Q 70 390 70 368 L 70 172 Q 70 150 92 150 Z",
+      "fill": "#0d1a2e",
+      "stroke": "#193252",
+      "strokeWidth": 1.5
+    },
+    {
+      "id": "scale_top_left_title",
+      "type": "text",
+      "x": 90,
+      "y": 168,
+      "text": "Top-left origin",
+      "fontSize": 16,
+      "fontFamily": "Roboto, Arial, sans-serif",
+      "weight": 700,
+      "fill": "#f8fafc"
+    },
+    {
+      "id": "scale_top_left_note",
+      "type": "text",
+      "x": 90,
+      "y": 192,
+      "text": "[0, 0]",
+      "fontSize": 12,
+      "fontFamily": "Roboto, Arial, sans-serif",
+      "weight": 500,
+      "fill": "#94a3b8"
+    },
+    {
+      "id": "scale_top_left_guide_h",
+      "type": "path",
+      "d": "M 90 298 L 320 298",
+      "fill": "none",
+      "stroke": "#173054",
+      "strokeWidth": 1,
+      "dashArray": [
+        6,
+        6
+      ]
+    },
+    {
+      "id": "scale_top_left_guide_v",
+      "type": "path",
+      "d": "M 208 218 L 208 370",
+      "fill": "none",
+      "stroke": "#173054",
+      "strokeWidth": 1,
+      "dashArray": [
+        6,
+        6
+      ]
+    },
+    {
+      "id": "scale_top_left_origin",
+      "type": "group",
+      "x": 112,
+      "y": 232,
+      "children": [
+        {
+          "id": "scale_top_left_origin_cross_h",
+          "type": "path",
+          "d": "M 0 16 L 32 16",
+          "fill": "none",
+          "stroke": "#fde047",
+          "strokeWidth": 2,
+          "strokeCap": "round"
+        },
+        {
+          "id": "scale_top_left_origin_cross_v",
+          "type": "path",
+          "d": "M 16 0 L 16 32",
+          "fill": "none",
+          "stroke": "#fde047",
+          "strokeWidth": 2,
+          "strokeCap": "round"
+        },
+        {
+          "id": "scale_top_left_origin_dot",
+          "type": "path",
+          "d": "M 10 16 a 6 6 0 1 0 12 0 a 6 6 0 1 0 -12 0",
+          "fill": "#fde047",
+          "stroke": "#0f172a",
+          "strokeWidth": 1.5
+        }
+      ]
+    },
+    {
+      "id": "scale_top_left_group",
+      "type": "group",
+      "x": 128,
+      "y": 248,
+      "width": 160,
+      "height": 100,
+      "origin": [
+        128,
+        248
+      ],
+      "children": [
+        {
+          "id": "scale_top_left_rect",
+          "type": "path",
+          "d": "M 18 0 L 142 0 Q 160 0 160 18 L 160 82 Q 160 100 142 100 L 18 100 Q 0 100 0 82 L 0 18 Q 0 0 18 0 Z",
+          "fill": "#818cf8",
+          "stroke": "#dbeafe",
+          "strokeWidth": 2
+        }
+      ],
+      "timeline": {
+        "tracks": {
+          "scale": {
+            "keyframes": [
+              {
+                "time": 0,
+                "value": 1,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0,
+                  "y1": 0,
+                  "x2": 0.2,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 1.3,
+                "value": 1.45,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0.25,
+                  "y1": 0.1,
+                  "x2": 0.25,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 2.6,
+                "value": 0.72,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0.25,
+                  "y1": 0.1,
+                  "x2": 0.25,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 4,
+                "value": 1.18,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0.25,
+                  "y1": 0.1,
+                  "x2": 0.25,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 5.4,
+                "value": 1
+              }
+            ]
+          }
+        }
+      }
+    },
+    {
+      "id": "rotate_top_left_panel",
+      "type": "path",
+      "d": "M 92 435 L 318 435 Q 340 435 340 457 L 340 653 Q 340 675 318 675 L 92 675 Q 70 675 70 653 L 70 457 Q 70 435 92 435 Z",
+      "fill": "#0d1a2e",
+      "stroke": "#193252",
+      "strokeWidth": 1.5
+    },
+    {
+      "id": "rotate_top_left_title",
+      "type": "text",
+      "x": 90,
+      "y": 453,
+      "text": "Top-left origin",
+      "fontSize": 16,
+      "fontFamily": "Roboto, Arial, sans-serif",
+      "weight": 700,
+      "fill": "#f8fafc"
+    },
+    {
+      "id": "rotate_top_left_note",
+      "type": "text",
+      "x": 90,
+      "y": 477,
+      "text": "[0, 0]",
+      "fontSize": 12,
+      "fontFamily": "Roboto, Arial, sans-serif",
+      "weight": 500,
+      "fill": "#94a3b8"
+    },
+    {
+      "id": "rotate_top_left_guide_h",
+      "type": "path",
+      "d": "M 90 583 L 320 583",
+      "fill": "none",
+      "stroke": "#173054",
+      "strokeWidth": 1,
+      "dashArray": [
+        6,
+        6
+      ]
+    },
+    {
+      "id": "rotate_top_left_guide_v",
+      "type": "path",
+      "d": "M 208 503 L 208 655",
+      "fill": "none",
+      "stroke": "#173054",
+      "strokeWidth": 1,
+      "dashArray": [
+        6,
+        6
+      ]
+    },
+    {
+      "id": "rotate_top_left_origin",
+      "type": "group",
+      "x": 112,
+      "y": 517,
+      "children": [
+        {
+          "id": "rotate_top_left_origin_cross_h",
+          "type": "path",
+          "d": "M 0 16 L 32 16",
+          "fill": "none",
+          "stroke": "#fde047",
+          "strokeWidth": 2,
+          "strokeCap": "round"
+        },
+        {
+          "id": "rotate_top_left_origin_cross_v",
+          "type": "path",
+          "d": "M 16 0 L 16 32",
+          "fill": "none",
+          "stroke": "#fde047",
+          "strokeWidth": 2,
+          "strokeCap": "round"
+        },
+        {
+          "id": "rotate_top_left_origin_dot",
+          "type": "path",
+          "d": "M 10 16 a 6 6 0 1 0 12 0 a 6 6 0 1 0 -12 0",
+          "fill": "#fde047",
+          "stroke": "#0f172a",
+          "strokeWidth": 1.5
+        }
+      ]
+    },
+    {
+      "id": "rotate_top_left_group",
+      "type": "group",
+      "x": 128,
+      "y": 533,
+      "width": 160,
+      "height": 100,
+      "origin": [
+        128,
+        533
+      ],
+      "children": [
+        {
+          "id": "rotate_top_left_rect",
+          "type": "path",
+          "d": "M 18 0 L 142 0 Q 160 0 160 18 L 160 82 Q 160 100 142 100 L 18 100 Q 0 100 0 82 L 0 18 Q 0 0 18 0 Z",
+          "fill": "#818cf8",
+          "stroke": "#dbeafe",
+          "strokeWidth": 2
+        }
+      ],
+      "timeline": {
+        "tracks": {
+          "rotation": {
+            "keyframes": [
+              {
+                "time": 0,
+                "value": 0,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0,
+                  "y1": 0,
+                  "x2": 0.2,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 1.5,
+                "value": 42,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0.25,
+                  "y1": 0.1,
+                  "x2": 0.25,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 3,
+                "value": -28,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0.25,
+                  "y1": 0.1,
+                  "x2": 0.25,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 4.5,
+                "value": 18,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0.25,
+                  "y1": 0.1,
+                  "x2": 0.25,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 5.8,
+                "value": 0
+              }
+            ]
+          }
+        }
+      }
+    },
+    {
+      "id": "scale_center_panel",
+      "type": "path",
+      "d": "M 387 150 L 613 150 Q 635 150 635 172 L 635 368 Q 635 390 613 390 L 387 390 Q 365 390 365 368 L 365 172 Q 365 150 387 150 Z",
+      "fill": "#0d1a2e",
+      "stroke": "#193252",
+      "strokeWidth": 1.5
+    },
+    {
+      "id": "scale_center_title",
+      "type": "text",
+      "x": 385,
+      "y": 168,
+      "text": "Center origin",
+      "fontSize": 16,
+      "fontFamily": "Roboto, Arial, sans-serif",
+      "weight": 700,
+      "fill": "#f8fafc"
+    },
+    {
+      "id": "scale_center_note",
+      "type": "text",
+      "x": 385,
+      "y": 192,
+      "text": "[80, 50]",
+      "fontSize": 12,
+      "fontFamily": "Roboto, Arial, sans-serif",
+      "weight": 500,
+      "fill": "#94a3b8"
+    },
+    {
+      "id": "scale_center_guide_h",
+      "type": "path",
+      "d": "M 385 298 L 615 298",
+      "fill": "none",
+      "stroke": "#173054",
+      "strokeWidth": 1,
+      "dashArray": [
+        6,
+        6
+      ]
+    },
+    {
+      "id": "scale_center_guide_v",
+      "type": "path",
+      "d": "M 503 218 L 503 370",
+      "fill": "none",
+      "stroke": "#173054",
+      "strokeWidth": 1,
+      "dashArray": [
+        6,
+        6
+      ]
+    },
+    {
+      "id": "scale_center_origin",
+      "type": "group",
+      "x": 487,
+      "y": 282,
+      "children": [
+        {
+          "id": "scale_center_origin_cross_h",
+          "type": "path",
+          "d": "M 0 16 L 32 16",
+          "fill": "none",
+          "stroke": "#fde047",
+          "strokeWidth": 2,
+          "strokeCap": "round"
+        },
+        {
+          "id": "scale_center_origin_cross_v",
+          "type": "path",
+          "d": "M 16 0 L 16 32",
+          "fill": "none",
+          "stroke": "#fde047",
+          "strokeWidth": 2,
+          "strokeCap": "round"
+        },
+        {
+          "id": "scale_center_origin_dot",
+          "type": "path",
+          "d": "M 10 16 a 6 6 0 1 0 12 0 a 6 6 0 1 0 -12 0",
+          "fill": "#fde047",
+          "stroke": "#0f172a",
+          "strokeWidth": 1.5
+        }
+      ]
+    },
+    {
+      "id": "scale_center_group",
+      "type": "group",
+      "x": 423,
+      "y": 248,
+      "width": 160,
+      "height": 100,
+      "origin": [
+        503,
+        298
+      ],
+      "children": [
+        {
+          "id": "scale_center_rect",
+          "type": "path",
+          "d": "M 18 0 L 142 0 Q 160 0 160 18 L 160 82 Q 160 100 142 100 L 18 100 Q 0 100 0 82 L 0 18 Q 0 0 18 0 Z",
+          "fill": "#38bdf8",
+          "stroke": "#dbeafe",
+          "strokeWidth": 2
+        }
+      ],
+      "timeline": {
+        "tracks": {
+          "scale": {
+            "keyframes": [
+              {
+                "time": 0,
+                "value": 1,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0,
+                  "y1": 0,
+                  "x2": 0.2,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 1.3,
+                "value": 1.45,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0.25,
+                  "y1": 0.1,
+                  "x2": 0.25,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 2.6,
+                "value": 0.72,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0.25,
+                  "y1": 0.1,
+                  "x2": 0.25,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 4,
+                "value": 1.18,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0.25,
+                  "y1": 0.1,
+                  "x2": 0.25,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 5.4,
+                "value": 1
+              }
+            ]
+          }
+        }
+      }
+    },
+    {
+      "id": "rotate_center_panel",
+      "type": "path",
+      "d": "M 387 435 L 613 435 Q 635 435 635 457 L 635 653 Q 635 675 613 675 L 387 675 Q 365 675 365 653 L 365 457 Q 365 435 387 435 Z",
+      "fill": "#0d1a2e",
+      "stroke": "#193252",
+      "strokeWidth": 1.5
+    },
+    {
+      "id": "rotate_center_title",
+      "type": "text",
+      "x": 385,
+      "y": 453,
+      "text": "Center origin",
+      "fontSize": 16,
+      "fontFamily": "Roboto, Arial, sans-serif",
+      "weight": 700,
+      "fill": "#f8fafc"
+    },
+    {
+      "id": "rotate_center_note",
+      "type": "text",
+      "x": 385,
+      "y": 477,
+      "text": "[80, 50]",
+      "fontSize": 12,
+      "fontFamily": "Roboto, Arial, sans-serif",
+      "weight": 500,
+      "fill": "#94a3b8"
+    },
+    {
+      "id": "rotate_center_guide_h",
+      "type": "path",
+      "d": "M 385 583 L 615 583",
+      "fill": "none",
+      "stroke": "#173054",
+      "strokeWidth": 1,
+      "dashArray": [
+        6,
+        6
+      ]
+    },
+    {
+      "id": "rotate_center_guide_v",
+      "type": "path",
+      "d": "M 503 503 L 503 655",
+      "fill": "none",
+      "stroke": "#173054",
+      "strokeWidth": 1,
+      "dashArray": [
+        6,
+        6
+      ]
+    },
+    {
+      "id": "rotate_center_origin",
+      "type": "group",
+      "x": 487,
+      "y": 567,
+      "children": [
+        {
+          "id": "rotate_center_origin_cross_h",
+          "type": "path",
+          "d": "M 0 16 L 32 16",
+          "fill": "none",
+          "stroke": "#fde047",
+          "strokeWidth": 2,
+          "strokeCap": "round"
+        },
+        {
+          "id": "rotate_center_origin_cross_v",
+          "type": "path",
+          "d": "M 16 0 L 16 32",
+          "fill": "none",
+          "stroke": "#fde047",
+          "strokeWidth": 2,
+          "strokeCap": "round"
+        },
+        {
+          "id": "rotate_center_origin_dot",
+          "type": "path",
+          "d": "M 10 16 a 6 6 0 1 0 12 0 a 6 6 0 1 0 -12 0",
+          "fill": "#fde047",
+          "stroke": "#0f172a",
+          "strokeWidth": 1.5
+        }
+      ]
+    },
+    {
+      "id": "rotate_center_group",
+      "type": "group",
+      "x": 423,
+      "y": 533,
+      "width": 160,
+      "height": 100,
+      "origin": [
+        503,
+        583
+      ],
+      "children": [
+        {
+          "id": "rotate_center_rect",
+          "type": "path",
+          "d": "M 18 0 L 142 0 Q 160 0 160 18 L 160 82 Q 160 100 142 100 L 18 100 Q 0 100 0 82 L 0 18 Q 0 0 18 0 Z",
+          "fill": "#38bdf8",
+          "stroke": "#dbeafe",
+          "strokeWidth": 2
+        }
+      ],
+      "timeline": {
+        "tracks": {
+          "rotation": {
+            "keyframes": [
+              {
+                "time": 0,
+                "value": 0,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0,
+                  "y1": 0,
+                  "x2": 0.2,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 1.5,
+                "value": 42,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0.25,
+                  "y1": 0.1,
+                  "x2": 0.25,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 3,
+                "value": -28,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0.25,
+                  "y1": 0.1,
+                  "x2": 0.25,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 4.5,
+                "value": 18,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0.25,
+                  "y1": 0.1,
+                  "x2": 0.25,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 5.8,
+                "value": 0
+              }
+            ]
+          }
+        }
+      }
+    },
+    {
+      "id": "scale_bottom_right_panel",
+      "type": "path",
+      "d": "M 682 150 L 908 150 Q 930 150 930 172 L 930 368 Q 930 390 908 390 L 682 390 Q 660 390 660 368 L 660 172 Q 660 150 682 150 Z",
+      "fill": "#0d1a2e",
+      "stroke": "#193252",
+      "strokeWidth": 1.5
+    },
+    {
+      "id": "scale_bottom_right_title",
+      "type": "text",
+      "x": 680,
+      "y": 168,
+      "text": "Bottom-right origin",
+      "fontSize": 16,
+      "fontFamily": "Roboto, Arial, sans-serif",
+      "weight": 700,
+      "fill": "#f8fafc"
+    },
+    {
+      "id": "scale_bottom_right_note",
+      "type": "text",
+      "x": 680,
+      "y": 192,
+      "text": "[160, 100]",
+      "fontSize": 12,
+      "fontFamily": "Roboto, Arial, sans-serif",
+      "weight": 500,
+      "fill": "#94a3b8"
+    },
+    {
+      "id": "scale_bottom_right_guide_h",
+      "type": "path",
+      "d": "M 680 298 L 910 298",
+      "fill": "none",
+      "stroke": "#173054",
+      "strokeWidth": 1,
+      "dashArray": [
+        6,
+        6
+      ]
+    },
+    {
+      "id": "scale_bottom_right_guide_v",
+      "type": "path",
+      "d": "M 798 218 L 798 370",
+      "fill": "none",
+      "stroke": "#173054",
+      "strokeWidth": 1,
+      "dashArray": [
+        6,
+        6
+      ]
+    },
+    {
+      "id": "scale_bottom_right_origin",
+      "type": "group",
+      "x": 862,
+      "y": 332,
+      "children": [
+        {
+          "id": "scale_bottom_right_origin_cross_h",
+          "type": "path",
+          "d": "M 0 16 L 32 16",
+          "fill": "none",
+          "stroke": "#fde047",
+          "strokeWidth": 2,
+          "strokeCap": "round"
+        },
+        {
+          "id": "scale_bottom_right_origin_cross_v",
+          "type": "path",
+          "d": "M 16 0 L 16 32",
+          "fill": "none",
+          "stroke": "#fde047",
+          "strokeWidth": 2,
+          "strokeCap": "round"
+        },
+        {
+          "id": "scale_bottom_right_origin_dot",
+          "type": "path",
+          "d": "M 10 16 a 6 6 0 1 0 12 0 a 6 6 0 1 0 -12 0",
+          "fill": "#fde047",
+          "stroke": "#0f172a",
+          "strokeWidth": 1.5
+        }
+      ]
+    },
+    {
+      "id": "scale_bottom_right_group",
+      "type": "group",
+      "x": 718,
+      "y": 248,
+      "width": 160,
+      "height": 100,
+      "origin": [
+        878,
+        348
+      ],
+      "children": [
+        {
+          "id": "scale_bottom_right_rect",
+          "type": "path",
+          "d": "M 18 0 L 142 0 Q 160 0 160 18 L 160 82 Q 160 100 142 100 L 18 100 Q 0 100 0 82 L 0 18 Q 0 0 18 0 Z",
+          "fill": "#22c55e",
+          "stroke": "#dbeafe",
+          "strokeWidth": 2
+        }
+      ],
+      "timeline": {
+        "tracks": {
+          "scale": {
+            "keyframes": [
+              {
+                "time": 0,
+                "value": 1,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0,
+                  "y1": 0,
+                  "x2": 0.2,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 1.3,
+                "value": 1.45,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0.25,
+                  "y1": 0.1,
+                  "x2": 0.25,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 2.6,
+                "value": 0.72,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0.25,
+                  "y1": 0.1,
+                  "x2": 0.25,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 4,
+                "value": 1.18,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0.25,
+                  "y1": 0.1,
+                  "x2": 0.25,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 5.4,
+                "value": 1
+              }
+            ]
+          }
+        }
+      }
+    },
+    {
+      "id": "rotate_bottom_right_panel",
+      "type": "path",
+      "d": "M 682 435 L 908 435 Q 930 435 930 457 L 930 653 Q 930 675 908 675 L 682 675 Q 660 675 660 653 L 660 457 Q 660 435 682 435 Z",
+      "fill": "#0d1a2e",
+      "stroke": "#193252",
+      "strokeWidth": 1.5
+    },
+    {
+      "id": "rotate_bottom_right_title",
+      "type": "text",
+      "x": 680,
+      "y": 453,
+      "text": "Bottom-right origin",
+      "fontSize": 16,
+      "fontFamily": "Roboto, Arial, sans-serif",
+      "weight": 700,
+      "fill": "#f8fafc"
+    },
+    {
+      "id": "rotate_bottom_right_note",
+      "type": "text",
+      "x": 680,
+      "y": 477,
+      "text": "[160, 100]",
+      "fontSize": 12,
+      "fontFamily": "Roboto, Arial, sans-serif",
+      "weight": 500,
+      "fill": "#94a3b8"
+    },
+    {
+      "id": "rotate_bottom_right_guide_h",
+      "type": "path",
+      "d": "M 680 583 L 910 583",
+      "fill": "none",
+      "stroke": "#173054",
+      "strokeWidth": 1,
+      "dashArray": [
+        6,
+        6
+      ]
+    },
+    {
+      "id": "rotate_bottom_right_guide_v",
+      "type": "path",
+      "d": "M 798 503 L 798 655",
+      "fill": "none",
+      "stroke": "#173054",
+      "strokeWidth": 1,
+      "dashArray": [
+        6,
+        6
+      ]
+    },
+    {
+      "id": "rotate_bottom_right_origin",
+      "type": "group",
+      "x": 862,
+      "y": 617,
+      "children": [
+        {
+          "id": "rotate_bottom_right_origin_cross_h",
+          "type": "path",
+          "d": "M 0 16 L 32 16",
+          "fill": "none",
+          "stroke": "#fde047",
+          "strokeWidth": 2,
+          "strokeCap": "round"
+        },
+        {
+          "id": "rotate_bottom_right_origin_cross_v",
+          "type": "path",
+          "d": "M 16 0 L 16 32",
+          "fill": "none",
+          "stroke": "#fde047",
+          "strokeWidth": 2,
+          "strokeCap": "round"
+        },
+        {
+          "id": "rotate_bottom_right_origin_dot",
+          "type": "path",
+          "d": "M 10 16 a 6 6 0 1 0 12 0 a 6 6 0 1 0 -12 0",
+          "fill": "#fde047",
+          "stroke": "#0f172a",
+          "strokeWidth": 1.5
+        }
+      ]
+    },
+    {
+      "id": "rotate_bottom_right_group",
+      "type": "group",
+      "x": 718,
+      "y": 533,
+      "width": 160,
+      "height": 100,
+      "origin": [
+        878,
+        633
+      ],
+      "children": [
+        {
+          "id": "rotate_bottom_right_rect",
+          "type": "path",
+          "d": "M 18 0 L 142 0 Q 160 0 160 18 L 160 82 Q 160 100 142 100 L 18 100 Q 0 100 0 82 L 0 18 Q 0 0 18 0 Z",
+          "fill": "#22c55e",
+          "stroke": "#dbeafe",
+          "strokeWidth": 2
+        }
+      ],
+      "timeline": {
+        "tracks": {
+          "rotation": {
+            "keyframes": [
+              {
+                "time": 0,
+                "value": 0,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0,
+                  "y1": 0,
+                  "x2": 0.2,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 1.5,
+                "value": 42,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0.25,
+                  "y1": 0.1,
+                  "x2": 0.25,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 3,
+                "value": -28,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0.25,
+                  "y1": 0.1,
+                  "x2": 0.25,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 4.5,
+                "value": 18,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0.25,
+                  "y1": 0.1,
+                  "x2": 0.25,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 5.8,
+                "value": 0
+              }
+            ]
+          }
+        }
+      }
+    },
+    {
+      "id": "scale_outside_right_panel",
+      "type": "path",
+      "d": "M 977 150 L 1203 150 Q 1225 150 1225 172 L 1225 368 Q 1225 390 1203 390 L 977 390 Q 955 390 955 368 L 955 172 Q 955 150 977 150 Z",
+      "fill": "#0d1a2e",
+      "stroke": "#193252",
+      "strokeWidth": 1.5
+    },
+    {
+      "id": "scale_outside_right_title",
+      "type": "text",
+      "x": 975,
+      "y": 168,
+      "text": "Outside-right origin",
+      "fontSize": 16,
+      "fontFamily": "Roboto, Arial, sans-serif",
+      "weight": 700,
+      "fill": "#f8fafc"
+    },
+    {
+      "id": "scale_outside_right_note",
+      "type": "text",
+      "x": 975,
+      "y": 192,
+      "text": "[200, 50]",
+      "fontSize": 12,
+      "fontFamily": "Roboto, Arial, sans-serif",
+      "weight": 500,
+      "fill": "#94a3b8"
+    },
+    {
+      "id": "scale_outside_right_guide_h",
+      "type": "path",
+      "d": "M 975 298 L 1205 298",
+      "fill": "none",
+      "stroke": "#173054",
+      "strokeWidth": 1,
+      "dashArray": [
+        6,
+        6
+      ]
+    },
+    {
+      "id": "scale_outside_right_guide_v",
+      "type": "path",
+      "d": "M 1093 218 L 1093 370",
+      "fill": "none",
+      "stroke": "#173054",
+      "strokeWidth": 1,
+      "dashArray": [
+        6,
+        6
+      ]
+    },
+    {
+      "id": "scale_outside_right_origin",
+      "type": "group",
+      "x": 1197,
+      "y": 282,
+      "children": [
+        {
+          "id": "scale_outside_right_origin_cross_h",
+          "type": "path",
+          "d": "M 0 16 L 32 16",
+          "fill": "none",
+          "stroke": "#fde047",
+          "strokeWidth": 2,
+          "strokeCap": "round"
+        },
+        {
+          "id": "scale_outside_right_origin_cross_v",
+          "type": "path",
+          "d": "M 16 0 L 16 32",
+          "fill": "none",
+          "stroke": "#fde047",
+          "strokeWidth": 2,
+          "strokeCap": "round"
+        },
+        {
+          "id": "scale_outside_right_origin_dot",
+          "type": "path",
+          "d": "M 10 16 a 6 6 0 1 0 12 0 a 6 6 0 1 0 -12 0",
+          "fill": "#fde047",
+          "stroke": "#0f172a",
+          "strokeWidth": 1.5
+        }
+      ]
+    },
+    {
+      "id": "scale_outside_right_group",
+      "type": "group",
+      "x": 1013,
+      "y": 248,
+      "width": 160,
+      "height": 100,
+      "origin": [
+        1213,
+        298
+      ],
+      "children": [
+        {
+          "id": "scale_outside_right_rect",
+          "type": "path",
+          "d": "M 18 0 L 142 0 Q 160 0 160 18 L 160 82 Q 160 100 142 100 L 18 100 Q 0 100 0 82 L 0 18 Q 0 0 18 0 Z",
+          "fill": "#f59e0b",
+          "stroke": "#dbeafe",
+          "strokeWidth": 2
+        }
+      ],
+      "timeline": {
+        "tracks": {
+          "scale": {
+            "keyframes": [
+              {
+                "time": 0,
+                "value": 1,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0,
+                  "y1": 0,
+                  "x2": 0.2,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 1.3,
+                "value": 1.45,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0.25,
+                  "y1": 0.1,
+                  "x2": 0.25,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 2.6,
+                "value": 0.72,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0.25,
+                  "y1": 0.1,
+                  "x2": 0.25,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 4,
+                "value": 1.18,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0.25,
+                  "y1": 0.1,
+                  "x2": 0.25,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 5.4,
+                "value": 1
+              }
+            ]
+          }
+        }
+      }
+    },
+    {
+      "id": "rotate_outside_right_panel",
+      "type": "path",
+      "d": "M 977 435 L 1203 435 Q 1225 435 1225 457 L 1225 653 Q 1225 675 1203 675 L 977 675 Q 955 675 955 653 L 955 457 Q 955 435 977 435 Z",
+      "fill": "#0d1a2e",
+      "stroke": "#193252",
+      "strokeWidth": 1.5
+    },
+    {
+      "id": "rotate_outside_right_title",
+      "type": "text",
+      "x": 975,
+      "y": 453,
+      "text": "Outside-right origin",
+      "fontSize": 16,
+      "fontFamily": "Roboto, Arial, sans-serif",
+      "weight": 700,
+      "fill": "#f8fafc"
+    },
+    {
+      "id": "rotate_outside_right_note",
+      "type": "text",
+      "x": 975,
+      "y": 477,
+      "text": "[200, 50]",
+      "fontSize": 12,
+      "fontFamily": "Roboto, Arial, sans-serif",
+      "weight": 500,
+      "fill": "#94a3b8"
+    },
+    {
+      "id": "rotate_outside_right_guide_h",
+      "type": "path",
+      "d": "M 975 583 L 1205 583",
+      "fill": "none",
+      "stroke": "#173054",
+      "strokeWidth": 1,
+      "dashArray": [
+        6,
+        6
+      ]
+    },
+    {
+      "id": "rotate_outside_right_guide_v",
+      "type": "path",
+      "d": "M 1093 503 L 1093 655",
+      "fill": "none",
+      "stroke": "#173054",
+      "strokeWidth": 1,
+      "dashArray": [
+        6,
+        6
+      ]
+    },
+    {
+      "id": "rotate_outside_right_origin",
+      "type": "group",
+      "x": 1197,
+      "y": 567,
+      "children": [
+        {
+          "id": "rotate_outside_right_origin_cross_h",
+          "type": "path",
+          "d": "M 0 16 L 32 16",
+          "fill": "none",
+          "stroke": "#fde047",
+          "strokeWidth": 2,
+          "strokeCap": "round"
+        },
+        {
+          "id": "rotate_outside_right_origin_cross_v",
+          "type": "path",
+          "d": "M 16 0 L 16 32",
+          "fill": "none",
+          "stroke": "#fde047",
+          "strokeWidth": 2,
+          "strokeCap": "round"
+        },
+        {
+          "id": "rotate_outside_right_origin_dot",
+          "type": "path",
+          "d": "M 10 16 a 6 6 0 1 0 12 0 a 6 6 0 1 0 -12 0",
+          "fill": "#fde047",
+          "stroke": "#0f172a",
+          "strokeWidth": 1.5
+        }
+      ]
+    },
+    {
+      "id": "rotate_outside_right_group",
+      "type": "group",
+      "x": 1013,
+      "y": 533,
+      "width": 160,
+      "height": 100,
+      "origin": [
+        1213,
+        583
+      ],
+      "children": [
+        {
+          "id": "rotate_outside_right_rect",
+          "type": "path",
+          "d": "M 18 0 L 142 0 Q 160 0 160 18 L 160 82 Q 160 100 142 100 L 18 100 Q 0 100 0 82 L 0 18 Q 0 0 18 0 Z",
+          "fill": "#f59e0b",
+          "stroke": "#dbeafe",
+          "strokeWidth": 2
+        }
+      ],
+      "timeline": {
+        "tracks": {
+          "rotation": {
+            "keyframes": [
+              {
+                "time": 0,
+                "value": 0,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0,
+                  "y1": 0,
+                  "x2": 0.2,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 1.5,
+                "value": 42,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0.25,
+                  "y1": 0.1,
+                  "x2": 0.25,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 3,
+                "value": -28,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0.25,
+                  "y1": 0.1,
+                  "x2": 0.25,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 4.5,
+                "value": 18,
+                "out": {
+                  "type": "cubicBezier",
+                  "x1": 0.25,
+                  "y1": 0.1,
+                  "x2": 0.25,
+                  "y2": 1
+                }
+              },
+              {
+                "time": 5.8,
+                "value": 0
+              }
+            ]
+          }
+        }
+      }
+    }
+  ]
+}