@anvpx/motion 0.0.0-stage → 0.1.1

package/templates/datastory/template.json

@@ -0,0 +1,57 @@
+{
+  "templateVersion": 1,
+  "id": "datastory",
+  "version": "1.0.1",
+  "title": "Data story",
+  "summary": "One insight told with a hook number, a chart and a takeaway; or a shareable infographic. 16:9 and 9:16.",
+  "domains": ["data", "media", "communication"],
+  "discover": {
+    "useCases": [
+      "Tell one insight with a hook number, a chart and a single takeaway sentence.",
+      "Turn a handful of statistics into a shareable infographic with a share-of-whole chart.",
+      "Show how a measure changed over time and what the change implies.",
+      "Compare a few items by value and highlight the one that matters."
+    ],
+    "audience": ["general-public", "readers", "customers", "stakeholders"],
+    "goodFor": "One finding or 2-3 statistics with a chart of 2-8 values and a clear implication.",
+    "notFor": "Periodic status or KPI reviews (report), step-by-step teaching (guide).",
+    "tags": ["data", "chart", "infographic", "ranking", "news", "recap", "kpi", "social"],
+    "tone": ["clear", "confident"],
+    "aspects": ["16:9", "9:16"]
+  },
+  "requires": {
+    "storyboard": 1,
+    "scenes": ["title", "stat", "chart", "callout", "kpi-grid", "icon-grid", "outro"]
+  },
+  "themes": [
+    { "id": "data-light", "file": "@shared/data-light.json", "mode": "light", "pair": "data-dark" },
+    { "id": "data-dark", "file": "@shared/data-dark.json", "mode": "dark", "pair": "data-light" },
+    {
+      "id": "editorial-light",
+      "file": "@shared/editorial-light.json",
+      "mode": "light",
+      "pair": "editorial-dark"
+    },
+    {
+      "id": "editorial-dark",
+      "file": "@shared/editorial-dark.json",
+      "mode": "dark",
+      "pair": "editorial-light"
+    },
+    { "id": "pop-light", "file": "@shared/pop-light.json", "mode": "light", "pair": "pop-dark" },
+    { "id": "pop-dark", "file": "@shared/pop-dark.json", "mode": "dark", "pair": "pop-light" }
+  ],
+  "styles": [
+    { "id": "clear", "file": "styles/clear.json" },
+    { "id": "editorial", "file": "styles/editorial.json" },
+    { "id": "pop", "file": "styles/pop.json" }
+  ],
+  "blueprints": [
+    { "id": "data-story", "file": "blueprints/data-story.json" },
+    { "id": "trend", "file": "blueprints/trend.json" },
+    { "id": "infographic", "file": "blueprints/infographic.json" }
+  ],
+  "pacing": "pacing.json",
+  "copy": "copy.md",
+  "license": "Apache-2.0"
+}

package/templates/event/blueprints/promo.json

@@ -0,0 +1,71 @@
+{
+  "discover": {
+    "aspects": ["16:9", "1:1"],
+    "audience": ["attendees", "community", "customers"],
+    "goodFor": "One event hook, its highlights and where to go next.",
+    "lengths": { "max": 35, "min": 15 },
+    "notFor": "Timed agendas, look-backs (recap).",
+    "tags": ["event", "announce", "promo", "marketing", "launch"],
+    "tone": ["punchy", "friendly"],
+    "useCases": [
+      "Announce an event with a hook and two to four highlights.",
+      "Tell guests the date and place, then where to sign up.",
+      "Tease a launch with one promise and a call to action."
+    ]
+  },
+  "example": {
+    "cta": "Get tickets",
+    "date": "Saturday, May 16",
+    "event": "Spring community fair",
+    "highlights": [
+      { "detail": "Stalls from nearby growers", "icon": "users", "label": "Market" },
+      { "detail": "Sets all afternoon", "icon": "mic", "label": "Live stage" },
+      { "detail": "Draw at five", "icon": "sparkles", "label": "Raffle" }
+    ],
+    "hook": ["Fresh", "Local", "Together"],
+    "place": "Riverside park"
+  },
+  "id": "promo",
+  "meta": { "lang": "en", "title": { "$slot": "event" } },
+  "purpose": "Hype an event in 15-35s: a hook, highlights and the call to action.",
+  "scenes": [
+    {
+      "id": "intro",
+      "props": {
+        "kicker": { "$slot": "date" },
+        "subtitle": { "$slot": "place" },
+        "title": { "$slot": "event" }
+      },
+      "type": "title"
+    },
+    {
+      "id": "hook",
+      "props": { "mode": "slam", "words": { "$slot": "hook" } },
+      "type": "kinetic",
+      "when": "hook"
+    },
+    {
+      "id": "highlights",
+      "props": { "items": { "$slot": "highlights" }, "title": "What to expect" },
+      "type": "icon-grid"
+    },
+    { "id": "end", "props": { "title": { "$slot": "cta" } }, "type": "outro" }
+  ],
+  "slots": {
+    "cta": { "max": 36, "required": true, "type": "text" },
+    "date": { "max": 40, "required": true, "type": "text" },
+    "event": { "max": 40, "required": true, "type": "text" },
+    "highlights": {
+      "fields": { "detail": "text", "icon": "text", "label": "text" },
+      "list": true,
+      "max": 4,
+      "min": 2,
+      "required": true,
+      "type": "object"
+    },
+    "hook": { "itemMax": 14, "max": 4, "min": 1, "optional": true, "type": "text[]" },
+    "length": { "default": "standard", "type": "enum", "values": ["short", "standard", "long"] },
+    "place": { "max": 60, "optional": true, "type": "text" },
+    "style": { "default": "pop", "type": "enum", "values": ["pop", "bright"] }
+  }
+}

package/templates/event/blueprints/save-the-date.json

@@ -0,0 +1,61 @@
+{
+  "discover": {
+    "aspects": ["16:9", "1:1"],
+    "audience": ["attendees", "community", "customers"],
+    "goodFor": "An event date with a 2-5 item timed agenda.",
+    "lengths": { "max": 40, "min": 20 },
+    "notFor": "Hype without details (promo), look-backs (recap).",
+    "tags": ["event", "announce", "timeline", "countdown"],
+    "tone": ["punchy", "friendly"],
+    "useCases": [
+      "Share an event date with a short timed agenda.",
+      "Tell guests when to arrive and what happens first.",
+      "Send a save-the-date that ends with a call to action."
+    ]
+  },
+  "example": {
+    "agenda": [
+      { "detail": "Food stalls and crafts", "label": "Gates open", "when": "10:00" },
+      { "detail": "Local bands play", "label": "Main stage", "when": "12:00" },
+      { "detail": "Prizes from neighbors", "label": "Raffle draw", "when": "15:00" }
+    ],
+    "cta": "See you there",
+    "date": "Saturday, May 16",
+    "event": "Spring community fair"
+  },
+  "id": "save-the-date",
+  "meta": { "lang": "en", "title": { "$slot": "event" } },
+  "purpose": "Share the essentials in 20-40s: the event, its date and a short agenda.",
+  "scenes": [
+    {
+      "id": "intro",
+      "props": {
+        "kicker": "Save the date",
+        "subtitle": { "$slot": "date" },
+        "title": { "$slot": "event" }
+      },
+      "type": "title"
+    },
+    {
+      "id": "agenda",
+      "props": { "items": { "$slot": "agenda" }, "title": "Agenda" },
+      "type": "timeline"
+    },
+    { "id": "end", "props": { "title": { "$slot": "cta" } }, "type": "outro" }
+  ],
+  "slots": {
+    "agenda": {
+      "fields": { "detail": "text", "label": "text", "when": "text" },
+      "list": true,
+      "max": 5,
+      "min": 2,
+      "required": true,
+      "type": "object"
+    },
+    "cta": { "max": 40, "required": true, "type": "text" },
+    "date": { "max": 40, "required": true, "type": "text" },
+    "event": { "max": 40, "required": true, "type": "text" },
+    "length": { "default": "standard", "type": "enum", "values": ["short", "standard", "long"] },
+    "style": { "default": "pop", "type": "enum", "values": ["pop", "bright"] }
+  }
+}

package/templates/event/copy.md

@@ -0,0 +1,16 @@
+# Event copy guide
+
+Tone: punchy, friendly, concrete. Name the date and the place, then the hook.
+
+Do
+- Title: the event name in at most 8 words; date and place stay exact.
+- Hook: one promise per beat, each beat at most 3 words.
+- Highlights: each highlight is a label plus one short detail.
+- Close with a call to action of 2-5 words.
+
+Don't
+- No more than 5 agenda items, one idea per highlight, no new facts at the close.
+- No superlatives you cannot prove; no invented dates, venues or prices.
+- No exclamation marks, emoji, or "simply", "just", "easy".
+
+Vocabulary: "guests" not "users", "agenda" not "rundown", "join" not "leverage".

package/templates/event/pacing.json

@@ -0,0 +1,15 @@
+{
+  "lengths": {
+    "long": { "scenes": [4, 7], "totalSec": [25, 80] },
+    "short": { "scenes": [3, 5], "totalSec": [10, 35] },
+    "standard": { "scenes": [3, 6], "totalSec": [15, 55] }
+  },
+  "sceneSeconds": {
+    "icon-grid": { "long": 10, "short": 5, "standard": 7 },
+    "kinetic": { "long": 5, "short": 3, "standard": 4 },
+    "outro": { "long": 5, "short": 3, "standard": 4 },
+    "timeline": { "long": 14, "short": 7, "standard": 10 },
+    "title": { "long": 5, "short": 3, "standard": 4 }
+  },
+  "wordsPerSecond": 2.5
+}

package/templates/event/styles/bright.json

@@ -0,0 +1,6 @@
+{
+  "direction": { "ease": "out", "move": "push-in", "shot": "medium", "transition": "crossfade" },
+  "frame": { "fps": 30, "height": 1080, "width": 1920 },
+  "id": "bright",
+  "theme": "pop-light"
+}

package/templates/event/styles/pop.json

@@ -0,0 +1,6 @@
+{
+  "direction": { "ease": "out", "move": "push-in", "shot": "medium", "transition": "cut" },
+  "frame": { "fps": 30, "height": 1080, "width": 1920 },
+  "id": "pop",
+  "theme": "pop-dark"
+}

package/templates/event/template.json

@@ -0,0 +1,37 @@
+{
+  "blueprints": [
+    { "file": "blueprints/promo.json", "id": "promo" },
+    { "file": "blueprints/save-the-date.json", "id": "save-the-date" }
+  ],
+  "copy": "copy.md",
+  "discover": {
+    "aspects": ["16:9", "1:1"],
+    "audience": ["attendees", "community", "customers"],
+    "goodFor": "An event with a date, a hook and a short agenda.",
+    "notFor": "Recaps of past events (recap), status reports (update).",
+    "tags": ["event", "announce", "promo", "marketing", "countdown"],
+    "tone": ["punchy", "friendly"],
+    "useCases": [
+      "Announce an event with its date, place and one hook.",
+      "Count down to a launch or a date worth waiting for.",
+      "Share a short agenda so guests know what to expect."
+    ]
+  },
+  "domains": ["event", "marketing", "announce"],
+  "id": "event",
+  "license": "Apache-2.0",
+  "pacing": "pacing.json",
+  "requires": { "scenes": ["title", "kinetic", "icon-grid", "timeline", "outro"], "storyboard": 1 },
+  "styles": [
+    { "file": "styles/pop.json", "id": "pop" },
+    { "file": "styles/bright.json", "id": "bright" }
+  ],
+  "summary": "Event announcements: hooks, agendas and countdowns with a clear call to action.",
+  "templateVersion": 1,
+  "themes": [
+    { "file": "@shared/pop-dark.json", "id": "pop-dark", "mode": "dark", "pair": "pop-light" },
+    { "file": "@shared/pop-light.json", "id": "pop-light", "mode": "light", "pair": "pop-dark" }
+  ],
+  "title": "Event",
+  "version": "1.0.0"
+}

package/templates/explain/blueprints/architecture.json

@@ -0,0 +1,76 @@
+{
+  "id": "architecture",
+  "purpose": "Show how a system fits together: a node-and-arrow diagram, up to four notes, one optional number, a close.",
+  "discover": {
+    "useCases": [
+      "Show how a system works: its components and how data flows between them.",
+      "Walk a new teammate through an architecture in under a minute.",
+      "Give a reviewer a quick map of the parts and their links before a design talk."
+    ],
+    "audience": ["engineers", "stakeholders", "new-hires"],
+    "goodFor": "A system of 2-8 parts with arrows between them and a few notes.",
+    "notFor": "Procedures (howto), persuasion (pitch), numeric analysis (datastory).",
+    "tags": ["explain", "architecture", "diagram", "dev", "process"],
+    "tone": ["technical", "calm"],
+    "aspects": ["16:9"],
+    "lengths": { "min": 40, "max": 90 }
+  },
+  "slots": {
+    "title": { "type": "text", "max": 60, "required": true },
+    "nodes": { "type": "text[]", "min": 2, "max": 8, "itemMax": 24, "required": true },
+    "edges": { "type": "text[]", "max": 12, "itemMax": 60, "optional": true },
+    "notes": { "type": "text[]", "max": 4, "itemMax": 70, "optional": true },
+    "stat": {
+      "type": "object",
+      "fields": { "value": "number", "unit": "text", "label": "text" },
+      "optional": true
+    },
+    "takeaway": { "type": "text", "max": 80, "optional": true },
+    "length": { "type": "enum", "values": ["short", "standard", "long"], "default": "standard" },
+    "style": { "type": "enum", "values": ["calm", "crisp"], "default": "calm" }
+  },
+  "example": {
+    "title": "How a request reaches the data",
+    "nodes": ["Client", "API gateway", "Auth service", "Database"],
+    "edges": [
+      "Client>API gateway|request",
+      "API gateway>Auth service|check token",
+      "API gateway>Database|query"
+    ],
+    "notes": ["The gateway is the only public entry", "Every request is authenticated first"],
+    "stat": { "value": 120, "unit": "ms", "label": "median response time" },
+    "takeaway": "One public door, checked every time"
+  },
+  "meta": { "title": { "$slot": "title" }, "lang": "en" },
+  "scenes": [
+    {
+      "id": "intro",
+      "type": "title",
+      "props": { "kicker": "Architecture", "title": { "$slot": "title" } }
+    },
+    {
+      "id": "diagram",
+      "type": "flow",
+      "props": {
+        "nodes": { "$slot": "nodes", "as": "flow-nodes" },
+        "edges": {
+          "$slot": "edges",
+          "as": "flow-edges",
+          "orElse": { "$slot": "nodes", "as": "flow-chain" }
+        }
+      }
+    },
+    {
+      "when": "notes",
+      "id": "notes",
+      "type": "bullets",
+      "props": { "title": "Design rules", "items": { "$slot": "notes" } }
+    },
+    { "when": "stat", "id": "number", "type": "stat", "props": { "$spread": "stat" } },
+    {
+      "id": "end",
+      "type": "outro",
+      "props": { "title": { "$slot": "takeaway", "orElse": { "$slot": "title" } } }
+    }
+  ]
+}

package/templates/explain/blueprints/concept.json

@@ -0,0 +1,89 @@
+{
+  "id": "concept",
+  "purpose": "Explain one concept in 30-60s: hook, one-line definition, 3-5 points, one number, one diagram, close.",
+  "discover": {
+    "useCases": [
+      "Explain one idea to people who did not build it.",
+      "Introduce a term or technology with one number and one diagram.",
+      "Give newcomers a short lesson with a single takeaway."
+    ],
+    "audience": ["stakeholders", "new-hires", "customers", "students"],
+    "goodFor": "A single concept with a hook, 3-5 points and an optional number.",
+    "notFor": "Step-by-step procedures (howto), numeric deep dives (datastory).",
+    "tags": ["explain", "concept", "lesson", "onboarding", "education"],
+    "tone": ["calm"],
+    "aspects": ["16:9"],
+    "lengths": { "min": 30, "max": 60 }
+  },
+  "slots": {
+    "title": { "type": "text", "max": 60, "required": true },
+    "hook": { "type": "text", "max": 90 },
+    "definition": { "type": "text", "max": 110, "optional": true },
+    "points": { "type": "text[]", "min": 3, "max": 5, "itemMax": 70 },
+    "stat": {
+      "type": "object",
+      "fields": { "value": "number", "unit": "text", "label": "text" },
+      "optional": true
+    },
+    "nodes": { "type": "text[]", "min": 2, "max": 6, "itemMax": 24, "optional": true },
+    "edges": { "type": "text[]", "max": 8, "itemMax": 60, "optional": true },
+    "takeaway": { "type": "text", "max": 80, "optional": true },
+    "length": { "type": "enum", "values": ["short", "standard", "long"], "default": "standard" },
+    "style": { "type": "enum", "values": ["calm", "crisp"], "default": "calm" }
+  },
+  "example": {
+    "title": "How caching works",
+    "hook": "Fast answers by remembering recent work",
+    "definition": "A [cache] keeps a copy of recent answers so repeat requests skip the slow path",
+    "points": [
+      "A miss fetches from the origin",
+      "The cache keeps a copy",
+      "A hit answers instantly"
+    ],
+    "stat": { "value": 90, "unit": "%", "label": "requests served from cache" },
+    "nodes": ["Client", "Cache", "Origin"],
+    "takeaway": "Remember work to skip work"
+  },
+  "meta": { "title": { "$slot": "title" }, "lang": "en" },
+  "scenes": [
+    {
+      "id": "intro",
+      "type": "title",
+      "props": {
+        "kicker": "Concept",
+        "title": { "$slot": "title" },
+        "subtitle": { "$slot": "hook" }
+      }
+    },
+    {
+      "when": "definition",
+      "id": "definition",
+      "type": "callout",
+      "props": { "kind": "definition", "label": "In short", "text": { "$slot": "definition" } }
+    },
+    {
+      "id": "points",
+      "type": "bullets",
+      "props": { "title": "How it works", "items": { "$slot": "points" } }
+    },
+    { "when": "stat", "id": "number", "type": "stat", "props": { "$spread": "stat" } },
+    {
+      "when": "nodes",
+      "id": "diagram",
+      "type": "flow",
+      "props": {
+        "nodes": { "$slot": "nodes", "as": "flow-nodes" },
+        "edges": {
+          "$slot": "edges",
+          "as": "flow-edges",
+          "orElse": { "$slot": "nodes", "as": "flow-chain" }
+        }
+      }
+    },
+    {
+      "id": "end",
+      "type": "outro",
+      "props": { "title": { "$slot": "takeaway", "orElse": { "$slot": "title" } } }
+    }
+  ]
+}

package/templates/explain/blueprints/howto.json

@@ -0,0 +1,56 @@
+{
+  "id": "howto",
+  "purpose": "Teach a procedure: an animated path of 3-6 steps with a detail under each, then the outcome.",
+  "discover": {
+    "useCases": [
+      "Teach a procedure in 3-6 numbered steps.",
+      "Give a quick how-to with a stated outcome.",
+      "Show newcomers the order in which a routine task is done."
+    ],
+    "audience": ["new-hires", "customers", "students"],
+    "goodFor": "A procedure with 3-6 ordered steps and a clear outcome.",
+    "notFor": "Concept explanations (concept), system diagrams (architecture).",
+    "tags": ["howto", "tutorial", "steps", "explain", "onboarding", "process"],
+    "tone": ["calm"],
+    "aspects": ["16:9"],
+    "lengths": { "min": 15, "max": 50 }
+  },
+  "slots": {
+    "title": { "type": "text", "max": 60, "required": true },
+    "steps": {
+      "type": "object",
+      "fields": { "label": "text", "detail": "text" },
+      "list": true,
+      "min": 3,
+      "max": 6,
+      "required": true
+    },
+    "outcome": { "type": "text", "max": 90, "required": true },
+    "length": { "type": "enum", "values": ["short", "standard", "long"], "default": "standard" },
+    "style": { "type": "enum", "values": ["calm", "crisp"], "default": "calm" }
+  },
+  "example": {
+    "title": "Ship a change safely",
+    "steps": [
+      { "label": "Branch", "detail": "Start from main" },
+      { "label": "Test", "detail": "Write a failing test" },
+      { "label": "Review", "detail": "One teammate reads it" },
+      { "label": "Merge", "detail": "Squash and clean up" }
+    ],
+    "outcome": "A small change merged with confidence"
+  },
+  "meta": { "title": { "$slot": "title" }, "lang": "en" },
+  "scenes": [
+    {
+      "id": "intro",
+      "type": "title",
+      "props": { "kicker": "How to", "title": { "$slot": "title" } }
+    },
+    {
+      "id": "procedure",
+      "type": "steps",
+      "props": { "title": { "$slot": "title" }, "layout": "path", "steps": { "$slot": "steps" } }
+    },
+    { "id": "end", "type": "outro", "props": { "title": { "$slot": "outcome" } } }
+  ]
+}

package/templates/explain/blueprints/overview.json

@@ -0,0 +1,126 @@
+{
+  "id": "overview",
+  "purpose": "Stakeholder overview of a system: goal, what it is made of, how it works in 3 steps, key numbers, architecture flow, close.",
+  "discover": {
+    "useCases": [
+      "Give leadership a one-minute overview of a system or programme.",
+      "Introduce a platform to new stakeholders: goal, parts, process and headline numbers.",
+      "Brief a partner team on what something does and how it fits together."
+    ],
+    "audience": ["stakeholders", "new-hires", "customers"],
+    "goodFor": "A whole system or programme: a goal, 3-4 pillars, a 3-step flow and a few numbers.",
+    "notFor": "One narrow idea (concept), a procedure (howto), persuasion (pitch).",
+    "tags": ["explain", "architecture", "onboarding", "kpi", "diagram", "internal", "process"],
+    "tone": ["calm", "technical"],
+    "aspects": ["16:9"],
+    "lengths": { "min": 45, "max": 90 }
+  },
+  "slots": {
+    "title": { "type": "text", "max": 60, "required": true },
+    "goal": { "type": "text", "max": 110, "required": true },
+    "pillars": {
+      "type": "object",
+      "fields": { "icon": "text", "label": "text", "detail": "text" },
+      "list": true,
+      "min": 3,
+      "max": 4,
+      "required": true
+    },
+    "steps": {
+      "type": "object",
+      "fields": { "label": "text", "detail": "text" },
+      "list": true,
+      "min": 3,
+      "max": 3,
+      "required": true
+    },
+    "numbers": {
+      "type": "object",
+      "fields": { "value": "text", "label": "text" },
+      "list": true,
+      "min": 2,
+      "max": 4,
+      "optional": true
+    },
+    "nodes": { "type": "text[]", "min": 3, "max": 6, "itemMax": 24, "optional": true },
+    "edges": { "type": "text[]", "max": 8, "itemMax": 60, "optional": true },
+    "ask": { "type": "text", "max": 90, "optional": true },
+    "length": { "type": "enum", "values": ["short", "standard", "long"], "default": "standard" },
+    "style": { "type": "enum", "values": ["calm", "crisp"], "default": "calm" }
+  },
+  "example": {
+    "title": "Booking platform overview",
+    "goal": "Let customers book a slot in [under a minute] and let staff see it [instantly]",
+    "pillars": [
+      { "icon": "calendar", "label": "Scheduling", "detail": "Live availability" },
+      { "icon": "users", "label": "Accounts", "detail": "One profile each" },
+      { "icon": "shield", "label": "Security", "detail": "Encrypted data" },
+      { "icon": "chart-line", "label": "Reporting", "detail": "Daily usage" }
+    ],
+    "steps": [
+      { "label": "Choose", "detail": "Pick a service and time" },
+      { "label": "Confirm", "detail": "Pay and get a receipt" },
+      { "label": "Attend", "detail": "Staff see it on arrival" }
+    ],
+    "numbers": [
+      { "value": "40k", "label": "bookings a month" },
+      { "value": "99.9%", "label": "uptime" },
+      { "value": "52 s", "label": "median booking time" }
+    ],
+    "nodes": ["Web app", "API gateway", "Booking service", "Payments", "Database"],
+    "edges": [
+      "Web app>API gateway",
+      "API gateway>Booking service",
+      "API gateway>Payments",
+      "Booking service>Database"
+    ],
+    "ask": "Next step: pilot with two more sites"
+  },
+  "meta": { "title": { "$slot": "title" }, "lang": "en" },
+  "scenes": [
+    {
+      "id": "intro",
+      "type": "title",
+      "props": { "kicker": "Overview", "title": { "$slot": "title" } }
+    },
+    {
+      "id": "goal",
+      "type": "callout",
+      "props": { "kind": "statement", "label": "Goal", "text": { "$slot": "goal" } }
+    },
+    {
+      "id": "pillars",
+      "type": "icon-grid",
+      "props": { "title": "What it is made of", "items": { "$slot": "pillars" } }
+    },
+    {
+      "id": "how",
+      "type": "steps",
+      "props": { "title": "How it works", "layout": "path", "steps": { "$slot": "steps" } }
+    },
+    {
+      "when": "numbers",
+      "id": "numbers",
+      "type": "kpi-grid",
+      "props": { "title": "In numbers", "items": { "$slot": "numbers" } }
+    },
+    {
+      "when": "nodes",
+      "id": "diagram",
+      "type": "flow",
+      "props": {
+        "nodes": { "$slot": "nodes", "as": "flow-nodes" },
+        "edges": {
+          "$slot": "edges",
+          "as": "flow-edges",
+          "orElse": { "$slot": "nodes", "as": "flow-chain" }
+        }
+      }
+    },
+    {
+      "id": "end",
+      "type": "outro",
+      "props": { "title": { "$slot": "ask", "orElse": { "$slot": "title" } } }
+    }
+  ]
+}