sketchmark 2.0.0 → 2.1.0

package/examples/make-ui-demo-explainer.cjs

@@ -0,0 +1,1094 @@
+const fs = require("node:fs");
+const path = require("node:path");
+
+const width = 1280;
+const height = 720;
+const duration = 24;
+const fps = 30;
+const bg = "#07111f";
+const font = "Roboto, Arial, sans-serif";
+
+const colors = {
+  bg,
+  shell: "#f8fafc",
+  shellBorder: "#dbe4f0",
+  topBar: "#ffffff",
+  sidebar: "#0f172a",
+  sidebarMuted: "#94a3b8",
+  sidebarActive: "#eff6ff",
+  sidebarActiveText: "#2563eb",
+  pageTitle: "#0f172a",
+  body: "#475569",
+  muted: "#64748b",
+  card: "#ffffff",
+  cardBorder: "#dbe4f0",
+  accent: "#2563eb",
+  accentSoft: "#dbeafe",
+  success: "#10b981",
+  successSoft: "#d1fae5",
+  warning: "#f59e0b",
+  warningSoft: "#fef3c7",
+  toggleOff: "#dbe3ee",
+  toggleKnob: "#ffffff",
+  divider: "#e5edf6",
+  chipBg: "#102444",
+  chipStroke: "#264b87",
+  chipText: "#93c5fd",
+  captionBg: "#09192e",
+  captionBorder: "#173054",
+  captionText: "#e2e8f0",
+  captionMuted: "#94a3b8",
+  cursor: "#0f172a",
+  cursorRing: "#38bdf8",
+  focus: "#22d3ee",
+  ghost: "#cbd5e1"
+};
+
+const curves = {
+  ease: { type: "cubicBezier", x1: 0.25, y1: 0.1, x2: 0.25, y2: 1 },
+  easeOut: { type: "cubicBezier", x1: 0, y1: 0, x2: 0.2, y2: 1 },
+  snap: { type: "cubicBezier", x1: 0.2, y1: 1, x2: 0.2, y2: 1 }
+};
+
+const screen = { x: 0, y: 0, w: 1120, h: 580 };
+const contentX = 236;
+
+const notificationsCard = { x: 618, y: 96, w: 430, h: 198 };
+const billingCard = { x: 236, y: 316, w: 400, h: 188 };
+const reviewCard = { x: 658, y: 332, w: 390, h: 172 };
+
+const weeklyToggleCenter = { x: notificationsCard.x + 352, y: notificationsCard.y + 105 };
+const annualPillCenter = { x: billingCard.x + 160, y: billingCard.y + 103 };
+const saveButtonCenter = { x: reviewCard.x + 94, y: reviewCard.y + 128 };
+
+const overviewPose = {
+  x: (width - screen.w * 0.92) / 2,
+  y: 92,
+  scale: 0.92
+};
+const notifPose = cameraPose(notificationsCard.x + notificationsCard.w / 2, notificationsCard.y + notificationsCard.h / 2, 1.23);
+const billingPose = cameraPose(billingCard.x + billingCard.w / 2, billingCard.y + billingCard.h / 2, 1.26);
+const reviewPose = cameraPose(reviewCard.x + reviewCard.w / 2, reviewCard.y + reviewCard.h / 2, 1.34);
+
+const elements = [];
+
+elements.push({
+  id: "intro-title",
+  type: "text",
+  x: width / 2,
+  y: 92,
+  text: "Explaining a UI demo with cursor + zoom",
+  align: "center",
+  valign: "middle",
+  fontSize: 42,
+  fontFamily: font,
+  weight: 700,
+  fill: "#f8fafc",
+  opacity: 0,
+  timeline: {
+    tracks: {
+      opacity: {
+        keyframes: [
+          { time: 0, value: 0, out: curves.ease },
+          { time: 0.8, value: 1 },
+          { time: 2.8, value: 1, out: curves.ease },
+          { time: 3.4, value: 0 }
+        ]
+      },
+      y: {
+        keyframes: [
+          { time: 0, value: 108, out: curves.easeOut },
+          { time: 0.8, value: 92 }
+        ]
+      }
+    }
+  }
+});
+
+elements.push({
+  id: "intro-subtitle",
+  type: "text",
+  x: width / 2,
+  y: 138,
+  text: "One clean screen. One action at a time.",
+  align: "center",
+  valign: "middle",
+  fontSize: 18,
+  fontFamily: font,
+  weight: 400,
+  fill: "#93a9c7",
+  opacity: 0,
+  timeline: {
+    tracks: {
+      opacity: {
+        keyframes: [
+          { time: 0.2, value: 0, out: curves.ease },
+          { time: 1, value: 1 },
+          { time: 2.8, value: 1, out: curves.ease },
+          { time: 3.4, value: 0 }
+        ]
+      }
+    }
+  }
+});
+
+elements.push(captionCard(
+  "caption_overview",
+  2.4,
+  7.4,
+  "Overview",
+  "Start wide, show the whole product, and establish where the user is."
+));
+elements.push(captionCard(
+  "caption_notifications",
+  7.2,
+  13,
+  "Interaction",
+  "Zoom into the control, move the cursor with intent, and make a single change."
+));
+elements.push(captionCard(
+  "caption_billing",
+  12.8,
+  18.2,
+  "Plan change",
+  "Use camera zoom to spotlight one setting instead of crowding the screen."
+));
+elements.push(captionCard(
+  "caption_save",
+  18,
+  23.4,
+  "Confirmation",
+  "End on the save action and a visible success state so the flow feels complete."
+));
+
+elements.push(buildAppCamera());
+
+const doc = {
+  version: 1,
+  canvas: { width, height, background: bg, duration, fps },
+  elements
+};
+
+const outPath = path.join(__dirname, "ui-demo-explainer.visual.json");
+fs.writeFileSync(outPath, JSON.stringify(doc, null, 2));
+console.log("Written:", outPath);
+
+function buildAppCamera() {
+  return {
+    id: "app-camera",
+    type: "group",
+    x: overviewPose.x,
+    y: overviewPose.y,
+    scale: overviewPose.scale,
+    origin: [0, 0],
+    opacity: 0,
+    children: [
+      buildAppShell(),
+      buildSidebar(),
+      buildTopBar(),
+      buildPageHeader(),
+      buildProfileCard(),
+      buildNotificationsCard(),
+      buildBillingCard(),
+      buildReviewCard(),
+      buildToast(),
+      buildFocusOutline("focus_notifications", notificationsCard, 7.2, 12.9),
+      buildFocusOutline("focus_billing", billingCard, 12.8, 18.1),
+      buildFocusOutline("focus_review", reviewCard, 18, 22.4),
+      buildClickRing("click_weekly", weeklyToggleCenter, 8.9),
+      buildClickRing("click_annual", annualPillCenter, 14.1),
+      buildClickRing("click_save", saveButtonCenter, 19.6),
+      buildCursor()
+    ],
+    timeline: {
+      tracks: {
+        opacity: {
+          keyframes: [
+            { time: 1.8, value: 0, out: curves.ease },
+            { time: 2.6, value: 1 }
+          ]
+        },
+        x: {
+          keyframes: [
+            { time: 2.2, value: overviewPose.x, out: curves.ease },
+            { time: 3, value: overviewPose.x },
+            { time: 7.1, value: overviewPose.x, out: curves.easeOut },
+            { time: 8, value: notifPose.x },
+            { time: 12.6, value: notifPose.x, out: curves.easeOut },
+            { time: 13.4, value: billingPose.x },
+            { time: 17.8, value: billingPose.x, out: curves.easeOut },
+            { time: 18.6, value: reviewPose.x },
+            { time: 21.4, value: reviewPose.x, out: curves.easeOut },
+            { time: 22.2, value: overviewPose.x }
+          ]
+        },
+        y: {
+          keyframes: [
+            { time: 2.2, value: overviewPose.y, out: curves.ease },
+            { time: 3, value: overviewPose.y },
+            { time: 7.1, value: overviewPose.y, out: curves.easeOut },
+            { time: 8, value: notifPose.y },
+            { time: 12.6, value: notifPose.y, out: curves.easeOut },
+            { time: 13.4, value: billingPose.y },
+            { time: 17.8, value: billingPose.y, out: curves.easeOut },
+            { time: 18.6, value: reviewPose.y },
+            { time: 21.4, value: reviewPose.y, out: curves.easeOut },
+            { time: 22.2, value: overviewPose.y }
+          ]
+        },
+        scale: {
+          keyframes: [
+            { time: 2.2, value: 0.88, out: curves.ease },
+            { time: 3, value: overviewPose.scale },
+            { time: 7.1, value: overviewPose.scale, out: curves.easeOut },
+            { time: 8, value: notifPose.scale },
+            { time: 12.6, value: notifPose.scale, out: curves.easeOut },
+            { time: 13.4, value: billingPose.scale },
+            { time: 17.8, value: billingPose.scale, out: curves.easeOut },
+            { time: 18.6, value: reviewPose.scale },
+            { time: 21.4, value: reviewPose.scale, out: curves.easeOut },
+            { time: 22.2, value: overviewPose.scale }
+          ]
+        }
+      }
+    }
+  };
+}
+
+function buildAppShell() {
+  return {
+    id: "shell",
+    type: "group",
+    x: screen.x,
+    y: screen.y,
+    children: [
+      {
+        id: "shell-bg",
+        type: "path",
+        d: roundedRect(0, 0, screen.w, screen.h, 24),
+        fill: colors.shell,
+        stroke: colors.shellBorder,
+        strokeWidth: 1.5
+      },
+      {
+        id: "shell-top",
+        type: "path",
+        d: roundedRect(0, 0, screen.w, 58, 24),
+        fill: colors.topBar,
+        stroke: colors.shellBorder,
+        strokeWidth: 1
+      },
+      {
+        id: "shell-sidebar",
+        type: "path",
+        d: roundedRect(0, 0, 208, screen.h, 24),
+        fill: colors.sidebar,
+        stroke: "none"
+      },
+      {
+        id: "shell-content-bg",
+        type: "path",
+        d: roundedRect(208, 58, screen.w - 208, screen.h - 58, 0),
+        fill: "#eff4fb",
+        stroke: "none"
+      }
+    ]
+  };
+}
+
+function buildSidebar() {
+  return {
+    id: "sidebar",
+    type: "group",
+    x: 0,
+    y: 0,
+    children: [
+      text("brand-mark", 32, 24, "sketchmark", {
+        fontSize: 19,
+        weight: 700,
+        fill: "#f8fafc"
+      }),
+      text("brand-sub", 32, 46, "workspace demo", {
+        fontSize: 11,
+        weight: 500,
+        fill: "#9fb3cf"
+      }),
+      navItem("nav-home", 20, 108, "Overview", false),
+      navItem("nav-projects", 20, 154, "Projects", false),
+      navItem("nav-settings", 20, 200, "Team Settings", true),
+      navItem("nav-billing", 20, 246, "Billing", false),
+      navItem("nav-audit", 20, 292, "Audit Log", false),
+      {
+        id: "sidebar-footer-chip",
+        type: "group",
+        x: 28,
+        y: screen.h - 92,
+        children: [
+          {
+            id: "sidebar-chip-bg",
+            type: "path",
+            d: roundedRect(0, 0, 152, 40, 12),
+            fill: "#112544",
+            stroke: "#20406f",
+            strokeWidth: 1
+          },
+          text("sidebar-chip-text", 16, 12, "4 teammates online", {
+            fontSize: 12,
+            weight: 500,
+            fill: "#bfdbfe"
+          })
+        ]
+      }
+    ]
+  };
+}
+
+function buildTopBar() {
+  return {
+    id: "topbar",
+    type: "group",
+    x: 232,
+    y: 12,
+    children: [
+      {
+        id: "search-bg",
+        type: "path",
+        d: roundedRect(0, 0, 300, 34, 10),
+        fill: "#f8fafc",
+        stroke: "#d7e2f0",
+        strokeWidth: 1
+      },
+      text("search-text", 16, 10, "Search settings, billing, teammates", {
+        fontSize: 12,
+        weight: 400,
+        fill: "#94a3b8"
+      }),
+      pillGroup("top-chip", 724, 2, 128, 30, "Preview mode", colors.chipBg, colors.chipStroke, colors.chipText),
+      avatarGroup("top-avatar", 974, 0, 34, "#c7d2fe", "JD")
+    ]
+  };
+}
+
+function buildPageHeader() {
+  return {
+    id: "page-header",
+    type: "group",
+    x: contentX,
+    y: 92,
+    children: [
+      text("page-eyebrow", 0, 0, "Team workspace", {
+        fontSize: 12,
+        weight: 600,
+        fill: "#2563eb"
+      }),
+      text("page-title", 0, 22, "Settings that stay easy to explain", {
+        fontSize: 30,
+        weight: 700,
+        fill: colors.pageTitle
+      }),
+      text("page-body", 0, 64, "A demo flow works best when the camera and cursor both guide attention.", {
+        fontSize: 15,
+        weight: 400,
+        fill: colors.body
+      })
+    ]
+  };
+}
+
+function buildProfileCard() {
+  return cardGroup("profile-card", 236, 96, 358, 198, [
+    text("profile-title", 24, 20, "Workspace profile", {
+      fontSize: 17,
+      weight: 600,
+      fill: colors.pageTitle
+    }),
+    text("profile-body", 24, 44, "Show identity details before you zoom into smaller controls.", {
+      fontSize: 13,
+      weight: 400,
+      fill: colors.body
+    }),
+    avatarGroup("profile-avatar", 24, 88, 48, "#bfdbfe", "NS"),
+    text("profile-name", 86, 90, "Northstar Studio", {
+      fontSize: 18,
+      weight: 600,
+      fill: colors.pageTitle
+    }),
+    text("profile-meta", 86, 116, "8 members  •  EU region", {
+      fontSize: 12,
+      weight: 500,
+      fill: colors.muted
+    }),
+    fieldLine("profile-field-1", 24, 152, 150, "Workspace name"),
+    fieldLine("profile-field-2", 186, 152, 148, "Support email")
+  ]);
+}
+
+function buildNotificationsCard() {
+  return cardGroup("notifications-card", notificationsCard.x, notificationsCard.y, notificationsCard.w, notificationsCard.h, [
+    text("notif-title", 24, 20, "Notifications", {
+      fontSize: 17,
+      weight: 600,
+      fill: colors.pageTitle
+    }),
+    text("notif-body", 24, 44, "Zooming here turns a tiny toggle into a clear, narrated moment.", {
+      fontSize: 13,
+      weight: 400,
+      fill: colors.body
+    }),
+    toggleRow("notif-weekly", 24, 82, "Weekly summary", "Send one digest every Monday morning.", false, true),
+    divider("notif-divider-1", 24, 128, notificationsCard.w - 48),
+    toggleRow("notif-incidents", 24, 140, "Critical incidents", "Always enabled for admins and owners.", true, false)
+  ]);
+}
+
+function buildBillingCard() {
+  return cardGroup("billing-card", billingCard.x, billingCard.y, billingCard.w, billingCard.h, [
+    text("billing-title", 24, 20, "Billing", {
+      fontSize: 17,
+      weight: 600,
+      fill: colors.pageTitle
+    }),
+    text("billing-body", 24, 44, "Use a small motion change to make plan selection feel deliberate.", {
+      fontSize: 13,
+      weight: 400,
+      fill: colors.body
+    }),
+    {
+      id: "billing-segment-bg",
+      type: "path",
+      d: roundedRect(24, 82, 186, 42, 14),
+      fill: "#edf3fb",
+      stroke: "#d8e4f2",
+      strokeWidth: 1
+    },
+    {
+      id: "billing-segment-highlight",
+      type: "path",
+      d: roundedRect(30, 88, 82, 30, 12),
+      x: 0,
+      y: 0,
+      fill: colors.accentSoft,
+      stroke: "#93c5fd",
+      strokeWidth: 1,
+      timeline: {
+        tracks: {
+          x: {
+            keyframes: [
+              { time: 0, value: 0 },
+              { time: 14.05, value: 0, out: curves.snap },
+              { time: 14.25, value: 89 }
+            ]
+          }
+        }
+      }
+    },
+    text("billing-monthly-label", 71, 103, "Monthly", {
+      align: "center",
+      valign: "middle",
+      fontSize: 13,
+      weight: 600,
+      fill: colors.accent,
+      timeline: {
+        tracks: {
+          fill: {
+            keyframes: [
+              { time: 0, value: colors.accent },
+              { time: 14.2, value: colors.muted }
+            ]
+          }
+        }
+      }
+    }),
+    text("billing-annual-label", 160, 103, "Annual", {
+      align: "center",
+      valign: "middle",
+      fontSize: 13,
+      weight: 600,
+      fill: colors.muted,
+      timeline: {
+        tracks: {
+          fill: {
+            keyframes: [
+              { time: 0, value: colors.muted },
+              { time: 14.2, value: colors.accent }
+            ]
+          }
+        }
+      }
+    }),
+    text("billing-price", 24, 140, "$49 / seat / month", {
+      fontSize: 28,
+      weight: 700,
+      fill: colors.pageTitle,
+      timeline: {
+        tracks: {
+          text: {
+            keyframes: [
+              { time: 0, value: "$49 / seat / month" },
+              { time: 14.2, value: "$39 / seat / month" }
+            ]
+          }
+        }
+      }
+    }),
+    text("billing-price-note", 24, 170, "Annual billing unlocks a 20% savings and a cleaner renewal cycle.", {
+      fontSize: 12,
+      weight: 500,
+      fill: colors.success
+    })
+  ]);
+}
+
+function buildReviewCard() {
+  return cardGroup("review-card", reviewCard.x, reviewCard.y, reviewCard.w, reviewCard.h, [
+    text("review-title", 24, 20, "Review changes", {
+      fontSize: 17,
+      weight: 600,
+      fill: colors.pageTitle
+    }),
+    text("review-body", 24, 44, "End the sequence on a single confident action: save and show success.", {
+      fontSize: 13,
+      weight: 400,
+      fill: colors.body
+    }),
+    pillGroup("review-pill-1", 24, 78, 110, 30, "Weekly summary", "#eff6ff", "#bfdbfe", colors.accent),
+    pillGroup("review-pill-2", 144, 78, 88, 30, "Annual", "#ecfdf5", "#a7f3d0", colors.success),
+    {
+      id: "save-button",
+      type: "group",
+      x: 24,
+      y: 106,
+      origin: [70, 22],
+      children: [
+        {
+          id: "save-button-bg",
+          type: "path",
+          d: roundedRect(0, 0, 140, 44, 14),
+          fill: colors.accent,
+          stroke: "none"
+        },
+        text("save-button-label", 70, 22, "Save changes", {
+          align: "center",
+          valign: "middle",
+          fontSize: 14,
+          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: curves.snap },
+              { 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: roundedRect(0, 0, 110, 44, 14),
+          fill: "#ffffff",
+          stroke: "#d4e0ee",
+          strokeWidth: 1
+        },
+        text("ghost-button-label", 55, 22, "Cancel", {
+          align: "center",
+          valign: "middle",
+          fontSize: 14,
+          weight: 500,
+          fill: colors.muted
+        })
+      ]
+    }
+  ]);
+}
+
+function buildToast() {
+  return {
+    id: "toast",
+    type: "group",
+    x: 760,
+    y: 20,
+    opacity: 0,
+    children: [
+      {
+        id: "toast-bg",
+        type: "path",
+        d: roundedRect(0, 0, 292, 62, 16),
+        fill: colors.card,
+        stroke: "#bfe9d8",
+        strokeWidth: 1.5
+      },
+      {
+        id: "toast-dot",
+        type: "path",
+        d: circlePath(24, 31, 9),
+        fill: colors.successSoft,
+        stroke: "none"
+      },
+      text("toast-title", 42, 16, "Changes saved", {
+        fontSize: 14,
+        weight: 700,
+        fill: colors.pageTitle
+      }),
+      text("toast-body", 42, 34, "Notifications and billing have been updated.", {
+        fontSize: 12,
+        weight: 400,
+        fill: colors.body
+      })
+    ],
+    timeline: {
+      tracks: {
+        opacity: {
+          keyframes: [
+            { time: 19.9, value: 0, out: curves.easeOut },
+            { time: 20.3, value: 1 },
+            { time: 23.1, value: 1, out: curves.easeOut },
+            { time: 23.7, value: 0 }
+          ]
+        },
+        y: {
+          keyframes: [
+            { time: 19.9, value: 8, out: curves.easeOut },
+            { time: 20.3, value: 20 }
+          ]
+        }
+      }
+    }
+  };
+}
+
+function buildFocusOutline(id, box, start, end) {
+  return {
+    id,
+    type: "path",
+    d: roundedRect(box.x - 8, box.y - 8, box.w + 16, box.h + 16, 24),
+    fill: "none",
+    stroke: colors.focus,
+    strokeWidth: 2,
+    dashArray: [8, 6],
+    opacity: 0,
+    timeline: {
+      tracks: {
+        opacity: {
+          keyframes: [
+            { time: start - 0.2, value: 0, out: curves.ease },
+            { time: start, value: 0.85 },
+            { time: end, value: 0.85, out: curves.ease },
+            { time: end + 0.3, value: 0 }
+          ]
+        }
+      }
+    }
+  };
+}
+
+function buildClickRing(id, center, start) {
+  return {
+    id,
+    type: "path",
+    d: circlePath(center.x, center.y, 16),
+    fill: "none",
+    stroke: colors.cursorRing,
+    strokeWidth: 2,
+    opacity: 0,
+    origin: [center.x, center.y],
+    timeline: {
+      tracks: {
+        opacity: {
+          keyframes: [
+            { time: start, value: 0 },
+            { time: start + 0.1, value: 0.7 },
+            { time: start + 0.55, value: 0 }
+          ]
+        },
+        scale: {
+          keyframes: [
+            { time: start, value: 0.4, out: curves.easeOut },
+            { time: start + 0.55, value: 1.5 }
+          ]
+        }
+      }
+    }
+  };
+}
+
+function buildCursor() {
+  return {
+    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: colors.cursor,
+        stroke: "#ffffff",
+        strokeWidth: 1.6
+      }
+    ],
+    timeline: {
+      tracks: {
+        x: {
+          keyframes: [
+            { time: 0, value: -80 },
+            { time: 6.7, value: -80, out: curves.easeOut },
+            { time: 7.8, value: weeklyToggleCenter.x },
+            { time: 9.3, value: weeklyToggleCenter.x },
+            { time: 12.7, value: weeklyToggleCenter.x, out: curves.easeOut },
+            { time: 13.9, value: annualPillCenter.x },
+            { time: 14.5, value: annualPillCenter.x },
+            { time: 17.8, value: annualPillCenter.x, out: curves.easeOut },
+            { time: 19.1, value: saveButtonCenter.x },
+            { time: 20.1, value: saveButtonCenter.x },
+            { time: 22.2, value: saveButtonCenter.x, out: curves.easeOut },
+            { time: 23.1, value: screen.w + 180 }
+          ]
+        },
+        y: {
+          keyframes: [
+            { time: 0, value: -80 },
+            { time: 6.7, value: -80, out: curves.easeOut },
+            { time: 7.8, value: weeklyToggleCenter.y },
+            { time: 9.3, value: weeklyToggleCenter.y },
+            { time: 12.7, value: weeklyToggleCenter.y, out: curves.easeOut },
+            { time: 13.9, value: annualPillCenter.y },
+            { time: 14.5, value: annualPillCenter.y },
+            { time: 17.8, value: annualPillCenter.y, out: curves.easeOut },
+            { time: 19.1, value: saveButtonCenter.y },
+            { time: 20.1, value: saveButtonCenter.y },
+            { time: 22.2, value: saveButtonCenter.y, out: curves.easeOut },
+            { time: 23.1, value: screen.h + 140 }
+          ]
+        }
+      }
+    }
+  };
+}
+
+function cardGroup(id, x, y, w, h, children) {
+  return {
+    id,
+    type: "group",
+    x,
+    y,
+    children: [
+      {
+        id: `${id}-bg`,
+        type: "path",
+        d: roundedRect(0, 0, w, h, 20),
+        fill: colors.card,
+        stroke: colors.cardBorder,
+        strokeWidth: 1
+      },
+      ...children
+    ]
+  };
+}
+
+function pillGroup(id, x, y, w, h, label, fill, stroke, textFill) {
+  return {
+    id,
+    type: "group",
+    x,
+    y,
+    children: [
+      {
+        id: `${id}-bg`,
+        type: "path",
+        d: roundedRect(0, 0, w, h, h / 2),
+        fill,
+        stroke,
+        strokeWidth: 1
+      },
+      text(`${id}-text`, w / 2, h / 2, label, {
+        align: "center",
+        valign: "middle",
+        fontSize: 12,
+        weight: 600,
+        fill: textFill
+      })
+    ]
+  };
+}
+
+function avatarGroup(id, x, y, size, fill, label) {
+  return {
+    id,
+    type: "group",
+    x,
+    y,
+    children: [
+      {
+        id: `${id}-circle`,
+        type: "path",
+        d: circlePath(size / 2, size / 2, size / 2),
+        fill,
+        stroke: "none"
+      },
+      text(`${id}-label`, size / 2, size / 2, label, {
+        align: "center",
+        valign: "middle",
+        fontSize: Math.max(11, Math.round(size * 0.32)),
+        weight: 700,
+        fill: "#1e3a8a"
+      })
+    ]
+  };
+}
+
+function navItem(id, x, y, label, active) {
+  return {
+    id,
+    type: "group",
+    x,
+    y,
+    children: [
+      {
+        id: `${id}-bg`,
+        type: "path",
+        d: roundedRect(0, 0, 164, 36, 12),
+        fill: active ? colors.sidebarActive : "none",
+        stroke: active ? "#bfdbfe" : "none",
+        strokeWidth: 1
+      },
+      text(`${id}-text`, 16, 10, label, {
+        fontSize: 13,
+        weight: active ? 700 : 500,
+        fill: active ? colors.sidebarActiveText : "#dbe5f2"
+      })
+    ]
+  };
+}
+
+function fieldLine(id, x, y, w, label) {
+  return {
+    id,
+    type: "group",
+    x,
+    y,
+    children: [
+      text(`${id}-label`, 0, 0, label, {
+        fontSize: 11,
+        weight: 600,
+        fill: colors.muted
+      }),
+      {
+        id: `${id}-line`,
+        type: "path",
+        d: `M 0 24 L ${w} 24`,
+        stroke: colors.divider,
+        strokeWidth: 2,
+        fill: "none"
+      }
+    ]
+  };
+}
+
+function toggleRow(id, x, y, label, description, on, animatesOn) {
+  const knobStart = on ? 334 : 308;
+  const bgStart = on ? colors.accent : colors.toggleOff;
+  return {
+    id,
+    type: "group",
+    x,
+    y,
+    children: [
+      text(`${id}-label`, 0, 0, label, {
+        fontSize: 15,
+        weight: 600,
+        fill: colors.pageTitle
+      }),
+      text(`${id}-body`, 0, 22, description, {
+        fontSize: 12,
+        weight: 400,
+        fill: colors.body
+      }),
+      {
+        id: `${id}-toggle-bg`,
+        type: "path",
+        d: roundedRect(300, 8, 56, 30, 15),
+        fill: bgStart,
+        stroke: "none",
+        timeline: animatesOn ? {
+          tracks: {
+            fill: {
+              keyframes: [
+                { time: 0, value: colors.toggleOff },
+                { time: 8.95, value: colors.toggleOff, out: curves.snap },
+                { time: 9.15, value: colors.accent }
+              ]
+            }
+          }
+        } : undefined
+      },
+      {
+        id: `${id}-toggle-knob`,
+        type: "path",
+        d: circlePath(knobStart, 23, 11),
+        fill: colors.toggleKnob,
+        stroke: "none",
+        timeline: animatesOn ? {
+          tracks: {
+            x: {
+              keyframes: [
+                { time: 0, value: 0 },
+                { time: 8.95, value: 0, out: curves.snap },
+                { time: 9.15, value: 26 }
+              ]
+            }
+          }
+        } : undefined
+      }
+    ]
+  };
+}
+
+function divider(id, x, y, w) {
+  return {
+    id,
+    type: "path",
+    d: `M ${x} ${y} L ${x + w} ${y}`,
+    stroke: colors.divider,
+    strokeWidth: 1,
+    fill: "none"
+  };
+}
+
+function captionCard(id, start, end, label, body) {
+  const boxW = 620;
+  const boxH = 92;
+  const chipW = 96;
+  const x = (width - boxW) / 2;
+  const y = 584;
+  return {
+    id,
+    type: "group",
+    x,
+    y,
+    opacity: 0,
+    children: [
+      {
+        id: `${id}-bg`,
+        type: "path",
+        d: roundedRect(0, 0, boxW, boxH, 22),
+        fill: colors.captionBg,
+        stroke: colors.captionBorder,
+        strokeWidth: 1.5
+      },
+      {
+        id: `${id}-chip`,
+        type: "group",
+        x: 20,
+        y: 18,
+        children: [
+          {
+            id: `${id}-chip-bg`,
+            type: "path",
+            d: roundedRect(0, 0, chipW, 28, 14),
+            fill: "#0b2648",
+            stroke: "#1d4c7f",
+            strokeWidth: 1
+          },
+          text(`${id}-chip-text`, chipW / 2, 14, label, {
+            align: "center",
+            valign: "middle",
+            fontSize: 12,
+            weight: 700,
+            fill: "#7dd3fc"
+          })
+        ]
+      },
+      text(`${id}-body`, 20, 56, body, {
+        fontSize: 15,
+        weight: 400,
+        fill: colors.captionText,
+        maxWidth: boxW - 40
+      })
+    ],
+    timeline: {
+      tracks: {
+        opacity: {
+          keyframes: [
+            { time: start - 0.3, value: 0, out: curves.easeOut },
+            { time: start, value: 1 },
+            { time: end, value: 1, out: curves.easeOut },
+            { time: end + 0.35, value: 0 }
+          ]
+        },
+        y: {
+          keyframes: [
+            { time: start - 0.3, value: y + 20, out: curves.easeOut },
+            { time: start, value: y }
+          ]
+        }
+      }
+    }
+  };
+}
+
+function text(id, x, y, value, extra) {
+  return {
+    id,
+    type: "text",
+    x,
+    y,
+    text: value,
+    align: "left",
+    valign: "top",
+    fontSize: 14,
+    fontFamily: font,
+    weight: 400,
+    fill: colors.pageTitle,
+    ...extra
+  };
+}
+
+function cameraPose(targetX, targetY, scale) {
+  return {
+    x: width / 2 - targetX * scale,
+    y: height / 2 - targetY * scale,
+    scale
+  };
+}
+
+function circlePath(cx, cy, r) {
+  return `M ${cx - r} ${cy} a ${r} ${r} 0 1 0 ${r * 2} 0 a ${r} ${r} 0 1 0 ${-r * 2} 0`;
+}
+
+function roundedRect(x, y, w, h, r) {
+  return [
+    `M ${x + r} ${y}`,
+    `L ${x + w - r} ${y}`,
+    `Q ${x + w} ${y} ${x + w} ${y + r}`,
+    `L ${x + w} ${y + h - r}`,
+    `Q ${x + w} ${y + h} ${x + w - r} ${y + h}`,
+    `L ${x + r} ${y + h}`,
+    `Q ${x} ${y + h} ${x} ${y + h - r}`,
+    `L ${x} ${y + r}`,
+    `Q ${x} ${y} ${x + r} ${y}`,
+    "Z"
+  ].join(" ");
+}