sketchmark 2.0.0 → 2.1.0

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

@@ -0,0 +1,2597 @@
+{
+  "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
+              }
+            ]
+          }
+        }
+      }
+    }
+  ]
+}