sketchmark 2.1.0 → 2.1.2

package/examples/ui-demo-explainer.visual.json

@@ -1,2597 +0,0 @@
-{
-  "version": 1,
-  "canvas": {
-    "width": 1280,
-    "height": 720,
-    "background": "#07111f",
-    "duration": 24,
-    "fps": 30
-  },
-  "elements": [
-    {
-      "id": "intro-title",
-      "type": "text",
-      "x": 640,
-      "y": 92,
-      "text": "Explaining a UI demo with cursor + zoom",
-      "align": "center",
-      "valign": "middle",
-      "fontSize": 42,
-      "fontFamily": "Roboto, Arial, sans-serif",
-      "weight": 700,
-      "fill": "#f8fafc",
-      "opacity": 0,
-      "timeline": {
-        "tracks": {
-          "opacity": {
-            "keyframes": [
-              {
-                "time": 0,
-                "value": 0,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0.25,
-                  "y1": 0.1,
-                  "x2": 0.25,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 0.8,
-                "value": 1
-              },
-              {
-                "time": 2.8,
-                "value": 1,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0.25,
-                  "y1": 0.1,
-                  "x2": 0.25,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 3.4,
-                "value": 0
-              }
-            ]
-          },
-          "y": {
-            "keyframes": [
-              {
-                "time": 0,
-                "value": 108,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0,
-                  "y1": 0,
-                  "x2": 0.2,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 0.8,
-                "value": 92
-              }
-            ]
-          }
-        }
-      }
-    },
-    {
-      "id": "intro-subtitle",
-      "type": "text",
-      "x": 640,
-      "y": 138,
-      "text": "One clean screen. One action at a time.",
-      "align": "center",
-      "valign": "middle",
-      "fontSize": 18,
-      "fontFamily": "Roboto, Arial, sans-serif",
-      "weight": 400,
-      "fill": "#93a9c7",
-      "opacity": 0,
-      "timeline": {
-        "tracks": {
-          "opacity": {
-            "keyframes": [
-              {
-                "time": 0.2,
-                "value": 0,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0.25,
-                  "y1": 0.1,
-                  "x2": 0.25,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 1,
-                "value": 1
-              },
-              {
-                "time": 2.8,
-                "value": 1,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0.25,
-                  "y1": 0.1,
-                  "x2": 0.25,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 3.4,
-                "value": 0
-              }
-            ]
-          }
-        }
-      }
-    },
-    {
-      "id": "caption_overview",
-      "type": "group",
-      "x": 330,
-      "y": 584,
-      "opacity": 0,
-      "children": [
-        {
-          "id": "caption_overview-bg",
-          "type": "path",
-          "d": "M 22 0 L 598 0 Q 620 0 620 22 L 620 70 Q 620 92 598 92 L 22 92 Q 0 92 0 70 L 0 22 Q 0 0 22 0 Z",
-          "fill": "#09192e",
-          "stroke": "#173054",
-          "strokeWidth": 1.5
-        },
-        {
-          "id": "caption_overview-chip",
-          "type": "group",
-          "x": 20,
-          "y": 18,
-          "children": [
-            {
-              "id": "caption_overview-chip-bg",
-              "type": "path",
-              "d": "M 14 0 L 82 0 Q 96 0 96 14 L 96 14 Q 96 28 82 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z",
-              "fill": "#0b2648",
-              "stroke": "#1d4c7f",
-              "strokeWidth": 1
-            },
-            {
-              "id": "caption_overview-chip-text",
-              "type": "text",
-              "x": 48,
-              "y": 14,
-              "text": "Overview",
-              "align": "center",
-              "valign": "middle",
-              "fontSize": 12,
-              "fontFamily": "Roboto, Arial, sans-serif",
-              "weight": 700,
-              "fill": "#7dd3fc"
-            }
-          ]
-        },
-        {
-          "id": "caption_overview-body",
-          "type": "text",
-          "x": 20,
-          "y": 56,
-          "text": "Start wide, show the whole product, and establish where the user is.",
-          "align": "left",
-          "valign": "top",
-          "fontSize": 15,
-          "fontFamily": "Roboto, Arial, sans-serif",
-          "weight": 400,
-          "fill": "#e2e8f0",
-          "maxWidth": 580
-        }
-      ],
-      "timeline": {
-        "tracks": {
-          "opacity": {
-            "keyframes": [
-              {
-                "time": 2.1,
-                "value": 0,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0,
-                  "y1": 0,
-                  "x2": 0.2,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 2.4,
-                "value": 1
-              },
-              {
-                "time": 7.4,
-                "value": 1,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0,
-                  "y1": 0,
-                  "x2": 0.2,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 7.75,
-                "value": 0
-              }
-            ]
-          },
-          "y": {
-            "keyframes": [
-              {
-                "time": 2.1,
-                "value": 604,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0,
-                  "y1": 0,
-                  "x2": 0.2,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 2.4,
-                "value": 584
-              }
-            ]
-          }
-        }
-      }
-    },
-    {
-      "id": "caption_notifications",
-      "type": "group",
-      "x": 330,
-      "y": 584,
-      "opacity": 0,
-      "children": [
-        {
-          "id": "caption_notifications-bg",
-          "type": "path",
-          "d": "M 22 0 L 598 0 Q 620 0 620 22 L 620 70 Q 620 92 598 92 L 22 92 Q 0 92 0 70 L 0 22 Q 0 0 22 0 Z",
-          "fill": "#09192e",
-          "stroke": "#173054",
-          "strokeWidth": 1.5
-        },
-        {
-          "id": "caption_notifications-chip",
-          "type": "group",
-          "x": 20,
-          "y": 18,
-          "children": [
-            {
-              "id": "caption_notifications-chip-bg",
-              "type": "path",
-              "d": "M 14 0 L 82 0 Q 96 0 96 14 L 96 14 Q 96 28 82 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z",
-              "fill": "#0b2648",
-              "stroke": "#1d4c7f",
-              "strokeWidth": 1
-            },
-            {
-              "id": "caption_notifications-chip-text",
-              "type": "text",
-              "x": 48,
-              "y": 14,
-              "text": "Interaction",
-              "align": "center",
-              "valign": "middle",
-              "fontSize": 12,
-              "fontFamily": "Roboto, Arial, sans-serif",
-              "weight": 700,
-              "fill": "#7dd3fc"
-            }
-          ]
-        },
-        {
-          "id": "caption_notifications-body",
-          "type": "text",
-          "x": 20,
-          "y": 56,
-          "text": "Zoom into the control, move the cursor with intent, and make a single change.",
-          "align": "left",
-          "valign": "top",
-          "fontSize": 15,
-          "fontFamily": "Roboto, Arial, sans-serif",
-          "weight": 400,
-          "fill": "#e2e8f0",
-          "maxWidth": 580
-        }
-      ],
-      "timeline": {
-        "tracks": {
-          "opacity": {
-            "keyframes": [
-              {
-                "time": 6.9,
-                "value": 0,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0,
-                  "y1": 0,
-                  "x2": 0.2,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 7.2,
-                "value": 1
-              },
-              {
-                "time": 13,
-                "value": 1,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0,
-                  "y1": 0,
-                  "x2": 0.2,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 13.35,
-                "value": 0
-              }
-            ]
-          },
-          "y": {
-            "keyframes": [
-              {
-                "time": 6.9,
-                "value": 604,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0,
-                  "y1": 0,
-                  "x2": 0.2,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 7.2,
-                "value": 584
-              }
-            ]
-          }
-        }
-      }
-    },
-    {
-      "id": "caption_billing",
-      "type": "group",
-      "x": 330,
-      "y": 584,
-      "opacity": 0,
-      "children": [
-        {
-          "id": "caption_billing-bg",
-          "type": "path",
-          "d": "M 22 0 L 598 0 Q 620 0 620 22 L 620 70 Q 620 92 598 92 L 22 92 Q 0 92 0 70 L 0 22 Q 0 0 22 0 Z",
-          "fill": "#09192e",
-          "stroke": "#173054",
-          "strokeWidth": 1.5
-        },
-        {
-          "id": "caption_billing-chip",
-          "type": "group",
-          "x": 20,
-          "y": 18,
-          "children": [
-            {
-              "id": "caption_billing-chip-bg",
-              "type": "path",
-              "d": "M 14 0 L 82 0 Q 96 0 96 14 L 96 14 Q 96 28 82 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z",
-              "fill": "#0b2648",
-              "stroke": "#1d4c7f",
-              "strokeWidth": 1
-            },
-            {
-              "id": "caption_billing-chip-text",
-              "type": "text",
-              "x": 48,
-              "y": 14,
-              "text": "Plan change",
-              "align": "center",
-              "valign": "middle",
-              "fontSize": 12,
-              "fontFamily": "Roboto, Arial, sans-serif",
-              "weight": 700,
-              "fill": "#7dd3fc"
-            }
-          ]
-        },
-        {
-          "id": "caption_billing-body",
-          "type": "text",
-          "x": 20,
-          "y": 56,
-          "text": "Use camera zoom to spotlight one setting instead of crowding the screen.",
-          "align": "left",
-          "valign": "top",
-          "fontSize": 15,
-          "fontFamily": "Roboto, Arial, sans-serif",
-          "weight": 400,
-          "fill": "#e2e8f0",
-          "maxWidth": 580
-        }
-      ],
-      "timeline": {
-        "tracks": {
-          "opacity": {
-            "keyframes": [
-              {
-                "time": 12.5,
-                "value": 0,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0,
-                  "y1": 0,
-                  "x2": 0.2,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 12.8,
-                "value": 1
-              },
-              {
-                "time": 18.2,
-                "value": 1,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0,
-                  "y1": 0,
-                  "x2": 0.2,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 18.55,
-                "value": 0
-              }
-            ]
-          },
-          "y": {
-            "keyframes": [
-              {
-                "time": 12.5,
-                "value": 604,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0,
-                  "y1": 0,
-                  "x2": 0.2,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 12.8,
-                "value": 584
-              }
-            ]
-          }
-        }
-      }
-    },
-    {
-      "id": "caption_save",
-      "type": "group",
-      "x": 330,
-      "y": 584,
-      "opacity": 0,
-      "children": [
-        {
-          "id": "caption_save-bg",
-          "type": "path",
-          "d": "M 22 0 L 598 0 Q 620 0 620 22 L 620 70 Q 620 92 598 92 L 22 92 Q 0 92 0 70 L 0 22 Q 0 0 22 0 Z",
-          "fill": "#09192e",
-          "stroke": "#173054",
-          "strokeWidth": 1.5
-        },
-        {
-          "id": "caption_save-chip",
-          "type": "group",
-          "x": 20,
-          "y": 18,
-          "children": [
-            {
-              "id": "caption_save-chip-bg",
-              "type": "path",
-              "d": "M 14 0 L 82 0 Q 96 0 96 14 L 96 14 Q 96 28 82 28 L 14 28 Q 0 28 0 14 L 0 14 Q 0 0 14 0 Z",
-              "fill": "#0b2648",
-              "stroke": "#1d4c7f",
-              "strokeWidth": 1
-            },
-            {
-              "id": "caption_save-chip-text",
-              "type": "text",
-              "x": 48,
-              "y": 14,
-              "text": "Confirmation",
-              "align": "center",
-              "valign": "middle",
-              "fontSize": 12,
-              "fontFamily": "Roboto, Arial, sans-serif",
-              "weight": 700,
-              "fill": "#7dd3fc"
-            }
-          ]
-        },
-        {
-          "id": "caption_save-body",
-          "type": "text",
-          "x": 20,
-          "y": 56,
-          "text": "End on the save action and a visible success state so the flow feels complete.",
-          "align": "left",
-          "valign": "top",
-          "fontSize": 15,
-          "fontFamily": "Roboto, Arial, sans-serif",
-          "weight": 400,
-          "fill": "#e2e8f0",
-          "maxWidth": 580
-        }
-      ],
-      "timeline": {
-        "tracks": {
-          "opacity": {
-            "keyframes": [
-              {
-                "time": 17.7,
-                "value": 0,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0,
-                  "y1": 0,
-                  "x2": 0.2,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 18,
-                "value": 1
-              },
-              {
-                "time": 23.4,
-                "value": 1,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0,
-                  "y1": 0,
-                  "x2": 0.2,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 23.75,
-                "value": 0
-              }
-            ]
-          },
-          "y": {
-            "keyframes": [
-              {
-                "time": 17.7,
-                "value": 604,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0,
-                  "y1": 0,
-                  "x2": 0.2,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 18,
-                "value": 584
-              }
-            ]
-          }
-        }
-      }
-    },
-    {
-      "id": "app-camera",
-      "type": "group",
-      "x": 124.79999999999995,
-      "y": 92,
-      "scale": 0.92,
-      "origin": [
-        0,
-        0
-      ],
-      "opacity": 0,
-      "children": [
-        {
-          "id": "shell",
-          "type": "group",
-          "x": 0,
-          "y": 0,
-          "children": [
-            {
-              "id": "shell-bg",
-              "type": "path",
-              "d": "M 24 0 L 1096 0 Q 1120 0 1120 24 L 1120 556 Q 1120 580 1096 580 L 24 580 Q 0 580 0 556 L 0 24 Q 0 0 24 0 Z",
-              "fill": "#f8fafc",
-              "stroke": "#dbe4f0",
-              "strokeWidth": 1.5
-            },
-            {
-              "id": "shell-top",
-              "type": "path",
-              "d": "M 24 0 L 1096 0 Q 1120 0 1120 24 L 1120 34 Q 1120 58 1096 58 L 24 58 Q 0 58 0 34 L 0 24 Q 0 0 24 0 Z",
-              "fill": "#ffffff",
-              "stroke": "#dbe4f0",
-              "strokeWidth": 1
-            },
-            {
-              "id": "shell-sidebar",
-              "type": "path",
-              "d": "M 24 0 L 184 0 Q 208 0 208 24 L 208 556 Q 208 580 184 580 L 24 580 Q 0 580 0 556 L 0 24 Q 0 0 24 0 Z",
-              "fill": "#0f172a",
-              "stroke": "none"
-            },
-            {
-              "id": "shell-content-bg",
-              "type": "path",
-              "d": "M 208 58 L 1120 58 Q 1120 58 1120 58 L 1120 580 Q 1120 580 1120 580 L 208 580 Q 208 580 208 580 L 208 58 Q 208 58 208 58 Z",
-              "fill": "#eff4fb",
-              "stroke": "none"
-            }
-          ]
-        },
-        {
-          "id": "sidebar",
-          "type": "group",
-          "x": 0,
-          "y": 0,
-          "children": [
-            {
-              "id": "brand-mark",
-              "type": "text",
-              "x": 32,
-              "y": 24,
-              "text": "sketchmark",
-              "align": "left",
-              "valign": "top",
-              "fontSize": 19,
-              "fontFamily": "Roboto, Arial, sans-serif",
-              "weight": 700,
-              "fill": "#f8fafc"
-            },
-            {
-              "id": "brand-sub",
-              "type": "text",
-              "x": 32,
-              "y": 46,
-              "text": "workspace demo",
-              "align": "left",
-              "valign": "top",
-              "fontSize": 11,
-              "fontFamily": "Roboto, Arial, sans-serif",
-              "weight": 500,
-              "fill": "#9fb3cf"
-            },
-            {
-              "id": "nav-home",
-              "type": "group",
-              "x": 20,
-              "y": 108,
-              "children": [
-                {
-                  "id": "nav-home-bg",
-                  "type": "path",
-                  "d": "M 12 0 L 152 0 Q 164 0 164 12 L 164 24 Q 164 36 152 36 L 12 36 Q 0 36 0 24 L 0 12 Q 0 0 12 0 Z",
-                  "fill": "none",
-                  "stroke": "none",
-                  "strokeWidth": 1
-                },
-                {
-                  "id": "nav-home-text",
-                  "type": "text",
-                  "x": 16,
-                  "y": 10,
-                  "text": "Overview",
-                  "align": "left",
-                  "valign": "top",
-                  "fontSize": 13,
-                  "fontFamily": "Roboto, Arial, sans-serif",
-                  "weight": 500,
-                  "fill": "#dbe5f2"
-                }
-              ]
-            },
-            {
-              "id": "nav-projects",
-              "type": "group",
-              "x": 20,
-              "y": 154,
-              "children": [
-                {
-                  "id": "nav-projects-bg",
-                  "type": "path",
-                  "d": "M 12 0 L 152 0 Q 164 0 164 12 L 164 24 Q 164 36 152 36 L 12 36 Q 0 36 0 24 L 0 12 Q 0 0 12 0 Z",
-                  "fill": "none",
-                  "stroke": "none",
-                  "strokeWidth": 1
-                },
-                {
-                  "id": "nav-projects-text",
-                  "type": "text",
-                  "x": 16,
-                  "y": 10,
-                  "text": "Projects",
-                  "align": "left",
-                  "valign": "top",
-                  "fontSize": 13,
-                  "fontFamily": "Roboto, Arial, sans-serif",
-                  "weight": 500,
-                  "fill": "#dbe5f2"
-                }
-              ]
-            },
-            {
-              "id": "nav-settings",
-              "type": "group",
-              "x": 20,
-              "y": 200,
-              "children": [
-                {
-                  "id": "nav-settings-bg",
-                  "type": "path",
-                  "d": "M 12 0 L 152 0 Q 164 0 164 12 L 164 24 Q 164 36 152 36 L 12 36 Q 0 36 0 24 L 0 12 Q 0 0 12 0 Z",
-                  "fill": "#eff6ff",
-                  "stroke": "#bfdbfe",
-                  "strokeWidth": 1
-                },
-                {
-                  "id": "nav-settings-text",
-                  "type": "text",
-                  "x": 16,
-                  "y": 10,
-                  "text": "Team Settings",
-                  "align": "left",
-                  "valign": "top",
-                  "fontSize": 13,
-                  "fontFamily": "Roboto, Arial, sans-serif",
-                  "weight": 700,
-                  "fill": "#2563eb"
-                }
-              ]
-            },
-            {
-              "id": "nav-billing",
-              "type": "group",
-              "x": 20,
-              "y": 246,
-              "children": [
-                {
-                  "id": "nav-billing-bg",
-                  "type": "path",
-                  "d": "M 12 0 L 152 0 Q 164 0 164 12 L 164 24 Q 164 36 152 36 L 12 36 Q 0 36 0 24 L 0 12 Q 0 0 12 0 Z",
-                  "fill": "none",
-                  "stroke": "none",
-                  "strokeWidth": 1
-                },
-                {
-                  "id": "nav-billing-text",
-                  "type": "text",
-                  "x": 16,
-                  "y": 10,
-                  "text": "Billing",
-                  "align": "left",
-                  "valign": "top",
-                  "fontSize": 13,
-                  "fontFamily": "Roboto, Arial, sans-serif",
-                  "weight": 500,
-                  "fill": "#dbe5f2"
-                }
-              ]
-            },
-            {
-              "id": "nav-audit",
-              "type": "group",
-              "x": 20,
-              "y": 292,
-              "children": [
-                {
-                  "id": "nav-audit-bg",
-                  "type": "path",
-                  "d": "M 12 0 L 152 0 Q 164 0 164 12 L 164 24 Q 164 36 152 36 L 12 36 Q 0 36 0 24 L 0 12 Q 0 0 12 0 Z",
-                  "fill": "none",
-                  "stroke": "none",
-                  "strokeWidth": 1
-                },
-                {
-                  "id": "nav-audit-text",
-                  "type": "text",
-                  "x": 16,
-                  "y": 10,
-                  "text": "Audit Log",
-                  "align": "left",
-                  "valign": "top",
-                  "fontSize": 13,
-                  "fontFamily": "Roboto, Arial, sans-serif",
-                  "weight": 500,
-                  "fill": "#dbe5f2"
-                }
-              ]
-            },
-            {
-              "id": "sidebar-footer-chip",
-              "type": "group",
-              "x": 28,
-              "y": 488,
-              "children": [
-                {
-                  "id": "sidebar-chip-bg",
-                  "type": "path",
-                  "d": "M 12 0 L 140 0 Q 152 0 152 12 L 152 28 Q 152 40 140 40 L 12 40 Q 0 40 0 28 L 0 12 Q 0 0 12 0 Z",
-                  "fill": "#112544",
-                  "stroke": "#20406f",
-                  "strokeWidth": 1
-                },
-                {
-                  "id": "sidebar-chip-text",
-                  "type": "text",
-                  "x": 16,
-                  "y": 12,
-                  "text": "4 teammates online",
-                  "align": "left",
-                  "valign": "top",
-                  "fontSize": 12,
-                  "fontFamily": "Roboto, Arial, sans-serif",
-                  "weight": 500,
-                  "fill": "#bfdbfe"
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "id": "topbar",
-          "type": "group",
-          "x": 232,
-          "y": 12,
-          "children": [
-            {
-              "id": "search-bg",
-              "type": "path",
-              "d": "M 10 0 L 290 0 Q 300 0 300 10 L 300 24 Q 300 34 290 34 L 10 34 Q 0 34 0 24 L 0 10 Q 0 0 10 0 Z",
-              "fill": "#f8fafc",
-              "stroke": "#d7e2f0",
-              "strokeWidth": 1
-            },
-            {
-              "id": "search-text",
-              "type": "text",
-              "x": 16,
-              "y": 10,
-              "text": "Search settings, billing, teammates",
-              "align": "left",
-              "valign": "top",
-              "fontSize": 12,
-              "fontFamily": "Roboto, Arial, sans-serif",
-              "weight": 400,
-              "fill": "#94a3b8"
-            },
-            {
-              "id": "top-chip",
-              "type": "group",
-              "x": 724,
-              "y": 2,
-              "children": [
-                {
-                  "id": "top-chip-bg",
-                  "type": "path",
-                  "d": "M 15 0 L 113 0 Q 128 0 128 15 L 128 15 Q 128 30 113 30 L 15 30 Q 0 30 0 15 L 0 15 Q 0 0 15 0 Z",
-                  "fill": "#102444",
-                  "stroke": "#264b87",
-                  "strokeWidth": 1
-                },
-                {
-                  "id": "top-chip-text",
-                  "type": "text",
-                  "x": 64,
-                  "y": 15,
-                  "text": "Preview mode",
-                  "align": "center",
-                  "valign": "middle",
-                  "fontSize": 12,
-                  "fontFamily": "Roboto, Arial, sans-serif",
-                  "weight": 600,
-                  "fill": "#93c5fd"
-                }
-              ]
-            },
-            {
-              "id": "top-avatar",
-              "type": "group",
-              "x": 974,
-              "y": 0,
-              "children": [
-                {
-                  "id": "top-avatar-circle",
-                  "type": "path",
-                  "d": "M 0 17 a 17 17 0 1 0 34 0 a 17 17 0 1 0 -34 0",
-                  "fill": "#c7d2fe",
-                  "stroke": "none"
-                },
-                {
-                  "id": "top-avatar-label",
-                  "type": "text",
-                  "x": 17,
-                  "y": 17,
-                  "text": "JD",
-                  "align": "center",
-                  "valign": "middle",
-                  "fontSize": 11,
-                  "fontFamily": "Roboto, Arial, sans-serif",
-                  "weight": 700,
-                  "fill": "#1e3a8a"
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "id": "page-header",
-          "type": "group",
-          "x": 236,
-          "y": 92,
-          "children": [
-            {
-              "id": "page-eyebrow",
-              "type": "text",
-              "x": 0,
-              "y": 0,
-              "text": "Team workspace",
-              "align": "left",
-              "valign": "top",
-              "fontSize": 12,
-              "fontFamily": "Roboto, Arial, sans-serif",
-              "weight": 600,
-              "fill": "#2563eb"
-            },
-            {
-              "id": "page-title",
-              "type": "text",
-              "x": 0,
-              "y": 22,
-              "text": "Settings that stay easy to explain",
-              "align": "left",
-              "valign": "top",
-              "fontSize": 30,
-              "fontFamily": "Roboto, Arial, sans-serif",
-              "weight": 700,
-              "fill": "#0f172a"
-            },
-            {
-              "id": "page-body",
-              "type": "text",
-              "x": 0,
-              "y": 64,
-              "text": "A demo flow works best when the camera and cursor both guide attention.",
-              "align": "left",
-              "valign": "top",
-              "fontSize": 15,
-              "fontFamily": "Roboto, Arial, sans-serif",
-              "weight": 400,
-              "fill": "#475569"
-            }
-          ]
-        },
-        {
-          "id": "profile-card",
-          "type": "group",
-          "x": 236,
-          "y": 96,
-          "children": [
-            {
-              "id": "profile-card-bg",
-              "type": "path",
-              "d": "M 20 0 L 338 0 Q 358 0 358 20 L 358 178 Q 358 198 338 198 L 20 198 Q 0 198 0 178 L 0 20 Q 0 0 20 0 Z",
-              "fill": "#ffffff",
-              "stroke": "#dbe4f0",
-              "strokeWidth": 1
-            },
-            {
-              "id": "profile-title",
-              "type": "text",
-              "x": 24,
-              "y": 20,
-              "text": "Workspace profile",
-              "align": "left",
-              "valign": "top",
-              "fontSize": 17,
-              "fontFamily": "Roboto, Arial, sans-serif",
-              "weight": 600,
-              "fill": "#0f172a"
-            },
-            {
-              "id": "profile-body",
-              "type": "text",
-              "x": 24,
-              "y": 44,
-              "text": "Show identity details before you zoom into smaller controls.",
-              "align": "left",
-              "valign": "top",
-              "fontSize": 13,
-              "fontFamily": "Roboto, Arial, sans-serif",
-              "weight": 400,
-              "fill": "#475569"
-            },
-            {
-              "id": "profile-avatar",
-              "type": "group",
-              "x": 24,
-              "y": 88,
-              "children": [
-                {
-                  "id": "profile-avatar-circle",
-                  "type": "path",
-                  "d": "M 0 24 a 24 24 0 1 0 48 0 a 24 24 0 1 0 -48 0",
-                  "fill": "#bfdbfe",
-                  "stroke": "none"
-                },
-                {
-                  "id": "profile-avatar-label",
-                  "type": "text",
-                  "x": 24,
-                  "y": 24,
-                  "text": "NS",
-                  "align": "center",
-                  "valign": "middle",
-                  "fontSize": 15,
-                  "fontFamily": "Roboto, Arial, sans-serif",
-                  "weight": 700,
-                  "fill": "#1e3a8a"
-                }
-              ]
-            },
-            {
-              "id": "profile-name",
-              "type": "text",
-              "x": 86,
-              "y": 90,
-              "text": "Northstar Studio",
-              "align": "left",
-              "valign": "top",
-              "fontSize": 18,
-              "fontFamily": "Roboto, Arial, sans-serif",
-              "weight": 600,
-              "fill": "#0f172a"
-            },
-            {
-              "id": "profile-meta",
-              "type": "text",
-              "x": 86,
-              "y": 116,
-              "text": "8 members  •  EU region",
-              "align": "left",
-              "valign": "top",
-              "fontSize": 12,
-              "fontFamily": "Roboto, Arial, sans-serif",
-              "weight": 500,
-              "fill": "#64748b"
-            },
-            {
-              "id": "profile-field-1",
-              "type": "group",
-              "x": 24,
-              "y": 152,
-              "children": [
-                {
-                  "id": "profile-field-1-label",
-                  "type": "text",
-                  "x": 0,
-                  "y": 0,
-                  "text": "Workspace name",
-                  "align": "left",
-                  "valign": "top",
-                  "fontSize": 11,
-                  "fontFamily": "Roboto, Arial, sans-serif",
-                  "weight": 600,
-                  "fill": "#64748b"
-                },
-                {
-                  "id": "profile-field-1-line",
-                  "type": "path",
-                  "d": "M 0 24 L 150 24",
-                  "stroke": "#e5edf6",
-                  "strokeWidth": 2,
-                  "fill": "none"
-                }
-              ]
-            },
-            {
-              "id": "profile-field-2",
-              "type": "group",
-              "x": 186,
-              "y": 152,
-              "children": [
-                {
-                  "id": "profile-field-2-label",
-                  "type": "text",
-                  "x": 0,
-                  "y": 0,
-                  "text": "Support email",
-                  "align": "left",
-                  "valign": "top",
-                  "fontSize": 11,
-                  "fontFamily": "Roboto, Arial, sans-serif",
-                  "weight": 600,
-                  "fill": "#64748b"
-                },
-                {
-                  "id": "profile-field-2-line",
-                  "type": "path",
-                  "d": "M 0 24 L 148 24",
-                  "stroke": "#e5edf6",
-                  "strokeWidth": 2,
-                  "fill": "none"
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "id": "notifications-card",
-          "type": "group",
-          "x": 618,
-          "y": 96,
-          "children": [
-            {
-              "id": "notifications-card-bg",
-              "type": "path",
-              "d": "M 20 0 L 410 0 Q 430 0 430 20 L 430 178 Q 430 198 410 198 L 20 198 Q 0 198 0 178 L 0 20 Q 0 0 20 0 Z",
-              "fill": "#ffffff",
-              "stroke": "#dbe4f0",
-              "strokeWidth": 1
-            },
-            {
-              "id": "notif-title",
-              "type": "text",
-              "x": 24,
-              "y": 20,
-              "text": "Notifications",
-              "align": "left",
-              "valign": "top",
-              "fontSize": 17,
-              "fontFamily": "Roboto, Arial, sans-serif",
-              "weight": 600,
-              "fill": "#0f172a"
-            },
-            {
-              "id": "notif-body",
-              "type": "text",
-              "x": 24,
-              "y": 44,
-              "text": "Zooming here turns a tiny toggle into a clear, narrated moment.",
-              "align": "left",
-              "valign": "top",
-              "fontSize": 13,
-              "fontFamily": "Roboto, Arial, sans-serif",
-              "weight": 400,
-              "fill": "#475569"
-            },
-            {
-              "id": "notif-weekly",
-              "type": "group",
-              "x": 24,
-              "y": 82,
-              "children": [
-                {
-                  "id": "notif-weekly-label",
-                  "type": "text",
-                  "x": 0,
-                  "y": 0,
-                  "text": "Weekly summary",
-                  "align": "left",
-                  "valign": "top",
-                  "fontSize": 15,
-                  "fontFamily": "Roboto, Arial, sans-serif",
-                  "weight": 600,
-                  "fill": "#0f172a"
-                },
-                {
-                  "id": "notif-weekly-body",
-                  "type": "text",
-                  "x": 0,
-                  "y": 22,
-                  "text": "Send one digest every Monday morning.",
-                  "align": "left",
-                  "valign": "top",
-                  "fontSize": 12,
-                  "fontFamily": "Roboto, Arial, sans-serif",
-                  "weight": 400,
-                  "fill": "#475569"
-                },
-                {
-                  "id": "notif-weekly-toggle-bg",
-                  "type": "path",
-                  "d": "M 315 8 L 341 8 Q 356 8 356 23 L 356 23 Q 356 38 341 38 L 315 38 Q 300 38 300 23 L 300 23 Q 300 8 315 8 Z",
-                  "fill": "#dbe3ee",
-                  "stroke": "none",
-                  "timeline": {
-                    "tracks": {
-                      "fill": {
-                        "keyframes": [
-                          {
-                            "time": 0,
-                            "value": "#dbe3ee"
-                          },
-                          {
-                            "time": 8.95,
-                            "value": "#dbe3ee",
-                            "out": {
-                              "type": "cubicBezier",
-                              "x1": 0.2,
-                              "y1": 1,
-                              "x2": 0.2,
-                              "y2": 1
-                            }
-                          },
-                          {
-                            "time": 9.15,
-                            "value": "#2563eb"
-                          }
-                        ]
-                      }
-                    }
-                  }
-                },
-                {
-                  "id": "notif-weekly-toggle-knob",
-                  "type": "path",
-                  "d": "M 297 23 a 11 11 0 1 0 22 0 a 11 11 0 1 0 -22 0",
-                  "fill": "#ffffff",
-                  "stroke": "none",
-                  "timeline": {
-                    "tracks": {
-                      "x": {
-                        "keyframes": [
-                          {
-                            "time": 0,
-                            "value": 0
-                          },
-                          {
-                            "time": 8.95,
-                            "value": 0,
-                            "out": {
-                              "type": "cubicBezier",
-                              "x1": 0.2,
-                              "y1": 1,
-                              "x2": 0.2,
-                              "y2": 1
-                            }
-                          },
-                          {
-                            "time": 9.15,
-                            "value": 26
-                          }
-                        ]
-                      }
-                    }
-                  }
-                }
-              ]
-            },
-            {
-              "id": "notif-divider-1",
-              "type": "path",
-              "d": "M 24 128 L 406 128",
-              "stroke": "#e5edf6",
-              "strokeWidth": 1,
-              "fill": "none"
-            },
-            {
-              "id": "notif-incidents",
-              "type": "group",
-              "x": 24,
-              "y": 140,
-              "children": [
-                {
-                  "id": "notif-incidents-label",
-                  "type": "text",
-                  "x": 0,
-                  "y": 0,
-                  "text": "Critical incidents",
-                  "align": "left",
-                  "valign": "top",
-                  "fontSize": 15,
-                  "fontFamily": "Roboto, Arial, sans-serif",
-                  "weight": 600,
-                  "fill": "#0f172a"
-                },
-                {
-                  "id": "notif-incidents-body",
-                  "type": "text",
-                  "x": 0,
-                  "y": 22,
-                  "text": "Always enabled for admins and owners.",
-                  "align": "left",
-                  "valign": "top",
-                  "fontSize": 12,
-                  "fontFamily": "Roboto, Arial, sans-serif",
-                  "weight": 400,
-                  "fill": "#475569"
-                },
-                {
-                  "id": "notif-incidents-toggle-bg",
-                  "type": "path",
-                  "d": "M 315 8 L 341 8 Q 356 8 356 23 L 356 23 Q 356 38 341 38 L 315 38 Q 300 38 300 23 L 300 23 Q 300 8 315 8 Z",
-                  "fill": "#2563eb",
-                  "stroke": "none"
-                },
-                {
-                  "id": "notif-incidents-toggle-knob",
-                  "type": "path",
-                  "d": "M 323 23 a 11 11 0 1 0 22 0 a 11 11 0 1 0 -22 0",
-                  "fill": "#ffffff",
-                  "stroke": "none"
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "id": "billing-card",
-          "type": "group",
-          "x": 236,
-          "y": 316,
-          "children": [
-            {
-              "id": "billing-card-bg",
-              "type": "path",
-              "d": "M 20 0 L 380 0 Q 400 0 400 20 L 400 168 Q 400 188 380 188 L 20 188 Q 0 188 0 168 L 0 20 Q 0 0 20 0 Z",
-              "fill": "#ffffff",
-              "stroke": "#dbe4f0",
-              "strokeWidth": 1
-            },
-            {
-              "id": "billing-title",
-              "type": "text",
-              "x": 24,
-              "y": 20,
-              "text": "Billing",
-              "align": "left",
-              "valign": "top",
-              "fontSize": 17,
-              "fontFamily": "Roboto, Arial, sans-serif",
-              "weight": 600,
-              "fill": "#0f172a"
-            },
-            {
-              "id": "billing-body",
-              "type": "text",
-              "x": 24,
-              "y": 44,
-              "text": "Use a small motion change to make plan selection feel deliberate.",
-              "align": "left",
-              "valign": "top",
-              "fontSize": 13,
-              "fontFamily": "Roboto, Arial, sans-serif",
-              "weight": 400,
-              "fill": "#475569"
-            },
-            {
-              "id": "billing-segment-bg",
-              "type": "path",
-              "d": "M 38 82 L 196 82 Q 210 82 210 96 L 210 110 Q 210 124 196 124 L 38 124 Q 24 124 24 110 L 24 96 Q 24 82 38 82 Z",
-              "fill": "#edf3fb",
-              "stroke": "#d8e4f2",
-              "strokeWidth": 1
-            },
-            {
-              "id": "billing-segment-highlight",
-              "type": "path",
-              "d": "M 42 88 L 100 88 Q 112 88 112 100 L 112 106 Q 112 118 100 118 L 42 118 Q 30 118 30 106 L 30 100 Q 30 88 42 88 Z",
-              "x": 0,
-              "y": 0,
-              "fill": "#dbeafe",
-              "stroke": "#93c5fd",
-              "strokeWidth": 1,
-              "timeline": {
-                "tracks": {
-                  "x": {
-                    "keyframes": [
-                      {
-                        "time": 0,
-                        "value": 0
-                      },
-                      {
-                        "time": 14.05,
-                        "value": 0,
-                        "out": {
-                          "type": "cubicBezier",
-                          "x1": 0.2,
-                          "y1": 1,
-                          "x2": 0.2,
-                          "y2": 1
-                        }
-                      },
-                      {
-                        "time": 14.25,
-                        "value": 89
-                      }
-                    ]
-                  }
-                }
-              }
-            },
-            {
-              "id": "billing-monthly-label",
-              "type": "text",
-              "x": 71,
-              "y": 103,
-              "text": "Monthly",
-              "align": "center",
-              "valign": "middle",
-              "fontSize": 13,
-              "fontFamily": "Roboto, Arial, sans-serif",
-              "weight": 600,
-              "fill": "#2563eb",
-              "timeline": {
-                "tracks": {
-                  "fill": {
-                    "keyframes": [
-                      {
-                        "time": 0,
-                        "value": "#2563eb"
-                      },
-                      {
-                        "time": 14.2,
-                        "value": "#64748b"
-                      }
-                    ]
-                  }
-                }
-              }
-            },
-            {
-              "id": "billing-annual-label",
-              "type": "text",
-              "x": 160,
-              "y": 103,
-              "text": "Annual",
-              "align": "center",
-              "valign": "middle",
-              "fontSize": 13,
-              "fontFamily": "Roboto, Arial, sans-serif",
-              "weight": 600,
-              "fill": "#64748b",
-              "timeline": {
-                "tracks": {
-                  "fill": {
-                    "keyframes": [
-                      {
-                        "time": 0,
-                        "value": "#64748b"
-                      },
-                      {
-                        "time": 14.2,
-                        "value": "#2563eb"
-                      }
-                    ]
-                  }
-                }
-              }
-            },
-            {
-              "id": "billing-price",
-              "type": "text",
-              "x": 24,
-              "y": 140,
-              "text": "$49 / seat / month",
-              "align": "left",
-              "valign": "top",
-              "fontSize": 28,
-              "fontFamily": "Roboto, Arial, sans-serif",
-              "weight": 700,
-              "fill": "#0f172a",
-              "timeline": {
-                "tracks": {
-                  "text": {
-                    "keyframes": [
-                      {
-                        "time": 0,
-                        "value": "$49 / seat / month"
-                      },
-                      {
-                        "time": 14.2,
-                        "value": "$39 / seat / month"
-                      }
-                    ]
-                  }
-                }
-              }
-            },
-            {
-              "id": "billing-price-note",
-              "type": "text",
-              "x": 24,
-              "y": 170,
-              "text": "Annual billing unlocks a 20% savings and a cleaner renewal cycle.",
-              "align": "left",
-              "valign": "top",
-              "fontSize": 12,
-              "fontFamily": "Roboto, Arial, sans-serif",
-              "weight": 500,
-              "fill": "#10b981"
-            }
-          ]
-        },
-        {
-          "id": "review-card",
-          "type": "group",
-          "x": 658,
-          "y": 332,
-          "children": [
-            {
-              "id": "review-card-bg",
-              "type": "path",
-              "d": "M 20 0 L 370 0 Q 390 0 390 20 L 390 152 Q 390 172 370 172 L 20 172 Q 0 172 0 152 L 0 20 Q 0 0 20 0 Z",
-              "fill": "#ffffff",
-              "stroke": "#dbe4f0",
-              "strokeWidth": 1
-            },
-            {
-              "id": "review-title",
-              "type": "text",
-              "x": 24,
-              "y": 20,
-              "text": "Review changes",
-              "align": "left",
-              "valign": "top",
-              "fontSize": 17,
-              "fontFamily": "Roboto, Arial, sans-serif",
-              "weight": 600,
-              "fill": "#0f172a"
-            },
-            {
-              "id": "review-body",
-              "type": "text",
-              "x": 24,
-              "y": 44,
-              "text": "End the sequence on a single confident action: save and show success.",
-              "align": "left",
-              "valign": "top",
-              "fontSize": 13,
-              "fontFamily": "Roboto, Arial, sans-serif",
-              "weight": 400,
-              "fill": "#475569"
-            },
-            {
-              "id": "review-pill-1",
-              "type": "group",
-              "x": 24,
-              "y": 78,
-              "children": [
-                {
-                  "id": "review-pill-1-bg",
-                  "type": "path",
-                  "d": "M 15 0 L 95 0 Q 110 0 110 15 L 110 15 Q 110 30 95 30 L 15 30 Q 0 30 0 15 L 0 15 Q 0 0 15 0 Z",
-                  "fill": "#eff6ff",
-                  "stroke": "#bfdbfe",
-                  "strokeWidth": 1
-                },
-                {
-                  "id": "review-pill-1-text",
-                  "type": "text",
-                  "x": 55,
-                  "y": 15,
-                  "text": "Weekly summary",
-                  "align": "center",
-                  "valign": "middle",
-                  "fontSize": 12,
-                  "fontFamily": "Roboto, Arial, sans-serif",
-                  "weight": 600,
-                  "fill": "#2563eb"
-                }
-              ]
-            },
-            {
-              "id": "review-pill-2",
-              "type": "group",
-              "x": 144,
-              "y": 78,
-              "children": [
-                {
-                  "id": "review-pill-2-bg",
-                  "type": "path",
-                  "d": "M 15 0 L 73 0 Q 88 0 88 15 L 88 15 Q 88 30 73 30 L 15 30 Q 0 30 0 15 L 0 15 Q 0 0 15 0 Z",
-                  "fill": "#ecfdf5",
-                  "stroke": "#a7f3d0",
-                  "strokeWidth": 1
-                },
-                {
-                  "id": "review-pill-2-text",
-                  "type": "text",
-                  "x": 44,
-                  "y": 15,
-                  "text": "Annual",
-                  "align": "center",
-                  "valign": "middle",
-                  "fontSize": 12,
-                  "fontFamily": "Roboto, Arial, sans-serif",
-                  "weight": 600,
-                  "fill": "#10b981"
-                }
-              ]
-            },
-            {
-              "id": "save-button",
-              "type": "group",
-              "x": 24,
-              "y": 106,
-              "origin": [
-                70,
-                22
-              ],
-              "children": [
-                {
-                  "id": "save-button-bg",
-                  "type": "path",
-                  "d": "M 14 0 L 126 0 Q 140 0 140 14 L 140 30 Q 140 44 126 44 L 14 44 Q 0 44 0 30 L 0 14 Q 0 0 14 0 Z",
-                  "fill": "#2563eb",
-                  "stroke": "none"
-                },
-                {
-                  "id": "save-button-label",
-                  "type": "text",
-                  "x": 70,
-                  "y": 22,
-                  "text": "Save changes",
-                  "align": "center",
-                  "valign": "middle",
-                  "fontSize": 14,
-                  "fontFamily": "Roboto, Arial, sans-serif",
-                  "weight": 600,
-                  "fill": "#ffffff",
-                  "timeline": {
-                    "tracks": {
-                      "text": {
-                        "keyframes": [
-                          {
-                            "time": 0,
-                            "value": "Save changes"
-                          },
-                          {
-                            "time": 19.9,
-                            "value": "Saved"
-                          }
-                        ]
-                      }
-                    }
-                  }
-                }
-              ],
-              "timeline": {
-                "tracks": {
-                  "scale": {
-                    "keyframes": [
-                      {
-                        "time": 19.5,
-                        "value": 1,
-                        "out": {
-                          "type": "cubicBezier",
-                          "x1": 0.2,
-                          "y1": 1,
-                          "x2": 0.2,
-                          "y2": 1
-                        }
-                      },
-                      {
-                        "time": 19.7,
-                        "value": 0.95
-                      },
-                      {
-                        "time": 19.95,
-                        "value": 1
-                      }
-                    ]
-                  }
-                }
-              }
-            },
-            {
-              "id": "ghost-button",
-              "type": "group",
-              "x": 176,
-              "y": 106,
-              "children": [
-                {
-                  "id": "ghost-button-bg",
-                  "type": "path",
-                  "d": "M 14 0 L 96 0 Q 110 0 110 14 L 110 30 Q 110 44 96 44 L 14 44 Q 0 44 0 30 L 0 14 Q 0 0 14 0 Z",
-                  "fill": "#ffffff",
-                  "stroke": "#d4e0ee",
-                  "strokeWidth": 1
-                },
-                {
-                  "id": "ghost-button-label",
-                  "type": "text",
-                  "x": 55,
-                  "y": 22,
-                  "text": "Cancel",
-                  "align": "center",
-                  "valign": "middle",
-                  "fontSize": 14,
-                  "fontFamily": "Roboto, Arial, sans-serif",
-                  "weight": 500,
-                  "fill": "#64748b"
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "id": "toast",
-          "type": "group",
-          "x": 760,
-          "y": 20,
-          "opacity": 0,
-          "children": [
-            {
-              "id": "toast-bg",
-              "type": "path",
-              "d": "M 16 0 L 276 0 Q 292 0 292 16 L 292 46 Q 292 62 276 62 L 16 62 Q 0 62 0 46 L 0 16 Q 0 0 16 0 Z",
-              "fill": "#ffffff",
-              "stroke": "#bfe9d8",
-              "strokeWidth": 1.5
-            },
-            {
-              "id": "toast-dot",
-              "type": "path",
-              "d": "M 15 31 a 9 9 0 1 0 18 0 a 9 9 0 1 0 -18 0",
-              "fill": "#d1fae5",
-              "stroke": "none"
-            },
-            {
-              "id": "toast-title",
-              "type": "text",
-              "x": 42,
-              "y": 16,
-              "text": "Changes saved",
-              "align": "left",
-              "valign": "top",
-              "fontSize": 14,
-              "fontFamily": "Roboto, Arial, sans-serif",
-              "weight": 700,
-              "fill": "#0f172a"
-            },
-            {
-              "id": "toast-body",
-              "type": "text",
-              "x": 42,
-              "y": 34,
-              "text": "Notifications and billing have been updated.",
-              "align": "left",
-              "valign": "top",
-              "fontSize": 12,
-              "fontFamily": "Roboto, Arial, sans-serif",
-              "weight": 400,
-              "fill": "#475569"
-            }
-          ],
-          "timeline": {
-            "tracks": {
-              "opacity": {
-                "keyframes": [
-                  {
-                    "time": 19.9,
-                    "value": 0,
-                    "out": {
-                      "type": "cubicBezier",
-                      "x1": 0,
-                      "y1": 0,
-                      "x2": 0.2,
-                      "y2": 1
-                    }
-                  },
-                  {
-                    "time": 20.3,
-                    "value": 1
-                  },
-                  {
-                    "time": 23.1,
-                    "value": 1,
-                    "out": {
-                      "type": "cubicBezier",
-                      "x1": 0,
-                      "y1": 0,
-                      "x2": 0.2,
-                      "y2": 1
-                    }
-                  },
-                  {
-                    "time": 23.7,
-                    "value": 0
-                  }
-                ]
-              },
-              "y": {
-                "keyframes": [
-                  {
-                    "time": 19.9,
-                    "value": 8,
-                    "out": {
-                      "type": "cubicBezier",
-                      "x1": 0,
-                      "y1": 0,
-                      "x2": 0.2,
-                      "y2": 1
-                    }
-                  },
-                  {
-                    "time": 20.3,
-                    "value": 20
-                  }
-                ]
-              }
-            }
-          }
-        },
-        {
-          "id": "focus_notifications",
-          "type": "path",
-          "d": "M 634 88 L 1032 88 Q 1056 88 1056 112 L 1056 278 Q 1056 302 1032 302 L 634 302 Q 610 302 610 278 L 610 112 Q 610 88 634 88 Z",
-          "fill": "none",
-          "stroke": "#22d3ee",
-          "strokeWidth": 2,
-          "dashArray": [
-            8,
-            6
-          ],
-          "opacity": 0,
-          "timeline": {
-            "tracks": {
-              "opacity": {
-                "keyframes": [
-                  {
-                    "time": 7,
-                    "value": 0,
-                    "out": {
-                      "type": "cubicBezier",
-                      "x1": 0.25,
-                      "y1": 0.1,
-                      "x2": 0.25,
-                      "y2": 1
-                    }
-                  },
-                  {
-                    "time": 7.2,
-                    "value": 0.85
-                  },
-                  {
-                    "time": 12.9,
-                    "value": 0.85,
-                    "out": {
-                      "type": "cubicBezier",
-                      "x1": 0.25,
-                      "y1": 0.1,
-                      "x2": 0.25,
-                      "y2": 1
-                    }
-                  },
-                  {
-                    "time": 13.200000000000001,
-                    "value": 0
-                  }
-                ]
-              }
-            }
-          }
-        },
-        {
-          "id": "focus_billing",
-          "type": "path",
-          "d": "M 252 308 L 620 308 Q 644 308 644 332 L 644 488 Q 644 512 620 512 L 252 512 Q 228 512 228 488 L 228 332 Q 228 308 252 308 Z",
-          "fill": "none",
-          "stroke": "#22d3ee",
-          "strokeWidth": 2,
-          "dashArray": [
-            8,
-            6
-          ],
-          "opacity": 0,
-          "timeline": {
-            "tracks": {
-              "opacity": {
-                "keyframes": [
-                  {
-                    "time": 12.600000000000001,
-                    "value": 0,
-                    "out": {
-                      "type": "cubicBezier",
-                      "x1": 0.25,
-                      "y1": 0.1,
-                      "x2": 0.25,
-                      "y2": 1
-                    }
-                  },
-                  {
-                    "time": 12.8,
-                    "value": 0.85
-                  },
-                  {
-                    "time": 18.1,
-                    "value": 0.85,
-                    "out": {
-                      "type": "cubicBezier",
-                      "x1": 0.25,
-                      "y1": 0.1,
-                      "x2": 0.25,
-                      "y2": 1
-                    }
-                  },
-                  {
-                    "time": 18.400000000000002,
-                    "value": 0
-                  }
-                ]
-              }
-            }
-          }
-        },
-        {
-          "id": "focus_review",
-          "type": "path",
-          "d": "M 674 324 L 1032 324 Q 1056 324 1056 348 L 1056 488 Q 1056 512 1032 512 L 674 512 Q 650 512 650 488 L 650 348 Q 650 324 674 324 Z",
-          "fill": "none",
-          "stroke": "#22d3ee",
-          "strokeWidth": 2,
-          "dashArray": [
-            8,
-            6
-          ],
-          "opacity": 0,
-          "timeline": {
-            "tracks": {
-              "opacity": {
-                "keyframes": [
-                  {
-                    "time": 17.8,
-                    "value": 0,
-                    "out": {
-                      "type": "cubicBezier",
-                      "x1": 0.25,
-                      "y1": 0.1,
-                      "x2": 0.25,
-                      "y2": 1
-                    }
-                  },
-                  {
-                    "time": 18,
-                    "value": 0.85
-                  },
-                  {
-                    "time": 22.4,
-                    "value": 0.85,
-                    "out": {
-                      "type": "cubicBezier",
-                      "x1": 0.25,
-                      "y1": 0.1,
-                      "x2": 0.25,
-                      "y2": 1
-                    }
-                  },
-                  {
-                    "time": 22.7,
-                    "value": 0
-                  }
-                ]
-              }
-            }
-          }
-        },
-        {
-          "id": "click_weekly",
-          "type": "path",
-          "d": "M 954 201 a 16 16 0 1 0 32 0 a 16 16 0 1 0 -32 0",
-          "fill": "none",
-          "stroke": "#38bdf8",
-          "strokeWidth": 2,
-          "opacity": 0,
-          "origin": [
-            970,
-            201
-          ],
-          "timeline": {
-            "tracks": {
-              "opacity": {
-                "keyframes": [
-                  {
-                    "time": 8.9,
-                    "value": 0
-                  },
-                  {
-                    "time": 9,
-                    "value": 0.7
-                  },
-                  {
-                    "time": 9.450000000000001,
-                    "value": 0
-                  }
-                ]
-              },
-              "scale": {
-                "keyframes": [
-                  {
-                    "time": 8.9,
-                    "value": 0.4,
-                    "out": {
-                      "type": "cubicBezier",
-                      "x1": 0,
-                      "y1": 0,
-                      "x2": 0.2,
-                      "y2": 1
-                    }
-                  },
-                  {
-                    "time": 9.450000000000001,
-                    "value": 1.5
-                  }
-                ]
-              }
-            }
-          }
-        },
-        {
-          "id": "click_annual",
-          "type": "path",
-          "d": "M 380 419 a 16 16 0 1 0 32 0 a 16 16 0 1 0 -32 0",
-          "fill": "none",
-          "stroke": "#38bdf8",
-          "strokeWidth": 2,
-          "opacity": 0,
-          "origin": [
-            396,
-            419
-          ],
-          "timeline": {
-            "tracks": {
-              "opacity": {
-                "keyframes": [
-                  {
-                    "time": 14.1,
-                    "value": 0
-                  },
-                  {
-                    "time": 14.2,
-                    "value": 0.7
-                  },
-                  {
-                    "time": 14.65,
-                    "value": 0
-                  }
-                ]
-              },
-              "scale": {
-                "keyframes": [
-                  {
-                    "time": 14.1,
-                    "value": 0.4,
-                    "out": {
-                      "type": "cubicBezier",
-                      "x1": 0,
-                      "y1": 0,
-                      "x2": 0.2,
-                      "y2": 1
-                    }
-                  },
-                  {
-                    "time": 14.65,
-                    "value": 1.5
-                  }
-                ]
-              }
-            }
-          }
-        },
-        {
-          "id": "click_save",
-          "type": "path",
-          "d": "M 736 460 a 16 16 0 1 0 32 0 a 16 16 0 1 0 -32 0",
-          "fill": "none",
-          "stroke": "#38bdf8",
-          "strokeWidth": 2,
-          "opacity": 0,
-          "origin": [
-            752,
-            460
-          ],
-          "timeline": {
-            "tracks": {
-              "opacity": {
-                "keyframes": [
-                  {
-                    "time": 19.6,
-                    "value": 0
-                  },
-                  {
-                    "time": 19.700000000000003,
-                    "value": 0.7
-                  },
-                  {
-                    "time": 20.150000000000002,
-                    "value": 0
-                  }
-                ]
-              },
-              "scale": {
-                "keyframes": [
-                  {
-                    "time": 19.6,
-                    "value": 0.4,
-                    "out": {
-                      "type": "cubicBezier",
-                      "x1": 0,
-                      "y1": 0,
-                      "x2": 0.2,
-                      "y2": 1
-                    }
-                  },
-                  {
-                    "time": 20.150000000000002,
-                    "value": 1.5
-                  }
-                ]
-              }
-            }
-          }
-        },
-        {
-          "id": "cursor",
-          "type": "group",
-          "x": -80,
-          "y": -80,
-          "children": [
-            {
-              "id": "cursor-arrow",
-              "type": "path",
-              "d": "M 0 0 L 0 22 L 6 18 L 10 28 L 15 26 L 11 16 L 20 16 Z",
-              "fill": "#0f172a",
-              "stroke": "#ffffff",
-              "strokeWidth": 1.6
-            }
-          ],
-          "timeline": {
-            "tracks": {
-              "x": {
-                "keyframes": [
-                  {
-                    "time": 0,
-                    "value": -80
-                  },
-                  {
-                    "time": 6.7,
-                    "value": -80,
-                    "out": {
-                      "type": "cubicBezier",
-                      "x1": 0,
-                      "y1": 0,
-                      "x2": 0.2,
-                      "y2": 1
-                    }
-                  },
-                  {
-                    "time": 7.8,
-                    "value": 970
-                  },
-                  {
-                    "time": 9.3,
-                    "value": 970
-                  },
-                  {
-                    "time": 12.7,
-                    "value": 970,
-                    "out": {
-                      "type": "cubicBezier",
-                      "x1": 0,
-                      "y1": 0,
-                      "x2": 0.2,
-                      "y2": 1
-                    }
-                  },
-                  {
-                    "time": 13.9,
-                    "value": 396
-                  },
-                  {
-                    "time": 14.5,
-                    "value": 396
-                  },
-                  {
-                    "time": 17.8,
-                    "value": 396,
-                    "out": {
-                      "type": "cubicBezier",
-                      "x1": 0,
-                      "y1": 0,
-                      "x2": 0.2,
-                      "y2": 1
-                    }
-                  },
-                  {
-                    "time": 19.1,
-                    "value": 752
-                  },
-                  {
-                    "time": 20.1,
-                    "value": 752
-                  },
-                  {
-                    "time": 22.2,
-                    "value": 752,
-                    "out": {
-                      "type": "cubicBezier",
-                      "x1": 0,
-                      "y1": 0,
-                      "x2": 0.2,
-                      "y2": 1
-                    }
-                  },
-                  {
-                    "time": 23.1,
-                    "value": 1300
-                  }
-                ]
-              },
-              "y": {
-                "keyframes": [
-                  {
-                    "time": 0,
-                    "value": -80
-                  },
-                  {
-                    "time": 6.7,
-                    "value": -80,
-                    "out": {
-                      "type": "cubicBezier",
-                      "x1": 0,
-                      "y1": 0,
-                      "x2": 0.2,
-                      "y2": 1
-                    }
-                  },
-                  {
-                    "time": 7.8,
-                    "value": 201
-                  },
-                  {
-                    "time": 9.3,
-                    "value": 201
-                  },
-                  {
-                    "time": 12.7,
-                    "value": 201,
-                    "out": {
-                      "type": "cubicBezier",
-                      "x1": 0,
-                      "y1": 0,
-                      "x2": 0.2,
-                      "y2": 1
-                    }
-                  },
-                  {
-                    "time": 13.9,
-                    "value": 419
-                  },
-                  {
-                    "time": 14.5,
-                    "value": 419
-                  },
-                  {
-                    "time": 17.8,
-                    "value": 419,
-                    "out": {
-                      "type": "cubicBezier",
-                      "x1": 0,
-                      "y1": 0,
-                      "x2": 0.2,
-                      "y2": 1
-                    }
-                  },
-                  {
-                    "time": 19.1,
-                    "value": 460
-                  },
-                  {
-                    "time": 20.1,
-                    "value": 460
-                  },
-                  {
-                    "time": 22.2,
-                    "value": 460,
-                    "out": {
-                      "type": "cubicBezier",
-                      "x1": 0,
-                      "y1": 0,
-                      "x2": 0.2,
-                      "y2": 1
-                    }
-                  },
-                  {
-                    "time": 23.1,
-                    "value": 720
-                  }
-                ]
-              }
-            }
-          }
-        }
-      ],
-      "timeline": {
-        "tracks": {
-          "opacity": {
-            "keyframes": [
-              {
-                "time": 1.8,
-                "value": 0,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0.25,
-                  "y1": 0.1,
-                  "x2": 0.25,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 2.6,
-                "value": 1
-              }
-            ]
-          },
-          "x": {
-            "keyframes": [
-              {
-                "time": 2.2,
-                "value": 124.79999999999995,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0.25,
-                  "y1": 0.1,
-                  "x2": 0.25,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 3,
-                "value": 124.79999999999995
-              },
-              {
-                "time": 7.1,
-                "value": 124.79999999999995,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0,
-                  "y1": 0,
-                  "x2": 0.2,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 8,
-                "value": -384.5899999999999
-              },
-              {
-                "time": 12.6,
-                "value": -384.5899999999999,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0,
-                  "y1": 0,
-                  "x2": 0.2,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 13.4,
-                "value": 90.63999999999999
-              },
-              {
-                "time": 17.8,
-                "value": 90.63999999999999,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0,
-                  "y1": 0,
-                  "x2": 0.2,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 18.6,
-                "value": -503.02
-              },
-              {
-                "time": 21.4,
-                "value": -503.02,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0,
-                  "y1": 0,
-                  "x2": 0.2,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 22.2,
-                "value": 124.79999999999995
-              }
-            ]
-          },
-          "y": {
-            "keyframes": [
-              {
-                "time": 2.2,
-                "value": 92,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0.25,
-                  "y1": 0.1,
-                  "x2": 0.25,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 3,
-                "value": 92
-              },
-              {
-                "time": 7.1,
-                "value": 92,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0,
-                  "y1": 0,
-                  "x2": 0.2,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 8,
-                "value": 120.15
-              },
-              {
-                "time": 12.6,
-                "value": 120.15,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0,
-                  "y1": 0,
-                  "x2": 0.2,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 13.4,
-                "value": -156.60000000000002
-              },
-              {
-                "time": 17.8,
-                "value": -156.60000000000002,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0,
-                  "y1": 0,
-                  "x2": 0.2,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 18.6,
-                "value": -200.12
-              },
-              {
-                "time": 21.4,
-                "value": -200.12,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0,
-                  "y1": 0,
-                  "x2": 0.2,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 22.2,
-                "value": 92
-              }
-            ]
-          },
-          "scale": {
-            "keyframes": [
-              {
-                "time": 2.2,
-                "value": 0.88,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0.25,
-                  "y1": 0.1,
-                  "x2": 0.25,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 3,
-                "value": 0.92
-              },
-              {
-                "time": 7.1,
-                "value": 0.92,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0,
-                  "y1": 0,
-                  "x2": 0.2,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 8,
-                "value": 1.23
-              },
-              {
-                "time": 12.6,
-                "value": 1.23,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0,
-                  "y1": 0,
-                  "x2": 0.2,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 13.4,
-                "value": 1.26
-              },
-              {
-                "time": 17.8,
-                "value": 1.26,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0,
-                  "y1": 0,
-                  "x2": 0.2,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 18.6,
-                "value": 1.34
-              },
-              {
-                "time": 21.4,
-                "value": 1.34,
-                "out": {
-                  "type": "cubicBezier",
-                  "x1": 0,
-                  "y1": 0,
-                  "x2": 0.2,
-                  "y2": 1
-                }
-              },
-              {
-                "time": 22.2,
-                "value": 0.92
-              }
-            ]
-          }
-        }
-      }
-    }
-  ]
-}