@anvpx/motion 0.0.0-stage → 0.1.1

package/templates/explain/copy.md

@@ -0,0 +1,19 @@
+# Explainer copy guide
+
+Tone: calm, direct, plain English. Explain, do not sell.
+
+Do
+- One idea per scene. Lead with the subject, then the verb.
+- Title: a topic or a question, at most 8 words.
+- Points and steps: parallel phrases of 3-8 words; no full stops.
+- Numbers: round them and say what they mean; one unit per number.
+- Diagram labels: nouns, 1-3 words ("API gateway", "Order service").
+- Branching diagrams: add `edges` as `from>to|label` items ("Gateway>Database|query"); without `edges` the nodes chain in order.
+- Close with the outcome or the next step, not a recap.
+
+Don't
+- No jargon without a short gloss; spell out acronyms once.
+- No more than 5 points, 8 nodes, 40 words per scene.
+- No exclamation marks, emoji, or marketing adjectives (seamless, powerful).
+
+Vocabulary: "service" not "microservice", "request" not "payload", "step" not "stage".

package/templates/explain/pacing.json

@@ -0,0 +1,19 @@
+{
+  "wordsPerSecond": 2.5,
+  "sceneSeconds": {
+    "title": { "short": 3, "standard": 4, "long": 5 },
+    "bullets": { "short": 6, "standard": 8, "long": 11 },
+    "stat": { "short": 4, "standard": 5, "long": 6 },
+    "flow": { "short": 4, "standard": 5, "long": 11 },
+    "callout": { "short": 4, "standard": 6, "long": 8 },
+    "steps": { "short": 6, "standard": 11, "long": 14 },
+    "icon-grid": { "short": 5, "standard": 7, "long": 10 },
+    "kpi-grid": { "short": 4, "standard": 6, "long": 8 },
+    "outro": { "short": 3, "standard": 4, "long": 5 }
+  },
+  "lengths": {
+    "short": { "scenes": [3, 6], "totalSec": [10, 40] },
+    "standard": { "scenes": [3, 8], "totalSec": [18, 60] },
+    "long": { "scenes": [4, 10], "totalSec": [30, 90] }
+  }
+}

package/templates/explain/styles/calm.json

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

package/templates/explain/styles/crisp.json

@@ -0,0 +1,6 @@
+{
+  "id": "crisp",
+  "theme": "tech-dark",
+  "frame": { "width": 1920, "height": 1080, "fps": 30 },
+  "direction": { "shot": "close", "move": "static", "ease": "spring-snappy", "transition": "cut" }
+}

package/templates/explain/template.json

@@ -0,0 +1,64 @@
+{
+  "templateVersion": 1,
+  "id": "explain",
+  "version": "2.1.0",
+  "title": "Explainer",
+  "summary": "Concepts, architectures, how-tos and stakeholder overviews. 16:9, calm, diagram-led.",
+  "domains": ["tech", "architecture", "tutorial", "internal-comms"],
+  "discover": {
+    "useCases": [
+      "Explain a concept or technology to people outside the team.",
+      "Show how the components of a system connect.",
+      "Teach a short how-to in numbered steps.",
+      "Give leadership a one-minute overview of a system or programme."
+    ],
+    "audience": ["engineers", "stakeholders", "new-hires", "customers", "students"],
+    "goodFor": "One concept, system or process with 3-5 points and one diagram.",
+    "notFor": "Heavy numeric analysis (datastory), persuasion (pitch).",
+    "tags": [
+      "explain",
+      "concept",
+      "architecture",
+      "howto",
+      "tutorial",
+      "onboarding",
+      "diagram",
+      "internal"
+    ],
+    "tone": ["calm", "technical"],
+    "aspects": ["16:9"]
+  },
+  "requires": {
+    "storyboard": 1,
+    "scenes": [
+      "title",
+      "bullets",
+      "flow",
+      "stat",
+      "outro",
+      "callout",
+      "steps",
+      "icon-grid",
+      "kpi-grid"
+    ]
+  },
+  "themes": [
+    { "id": "calm-light", "file": "@shared/calm-light.json", "mode": "light", "pair": "calm-dark" },
+    { "id": "calm-dark", "file": "@shared/calm-dark.json", "mode": "dark", "pair": "calm-light" },
+    { "id": "tech-light", "file": "@shared/tech-light.json", "mode": "light", "pair": "tech-dark" },
+    { "id": "tech-dark", "file": "@shared/tech-dark.json", "mode": "dark", "pair": "tech-light" }
+  ],
+  "styles": [
+    { "id": "calm", "file": "styles/calm.json" },
+    { "id": "crisp", "file": "styles/crisp.json" }
+  ],
+  "blueprints": [
+    { "id": "concept", "file": "blueprints/concept.json" },
+    { "id": "architecture", "file": "blueprints/architecture.json" },
+    { "id": "howto", "file": "blueprints/howto.json" },
+    { "id": "overview", "file": "blueprints/overview.json" }
+  ],
+  "pacing": "pacing.json",
+  "copy": "copy.md",
+  "license": "Apache-2.0"
+}

package/templates/guide/blueprints/lesson.json

@@ -0,0 +1,173 @@
+{
+  "id": "lesson",
+  "purpose": "Teach one idea: objectives, a bold definition or rule, an optional code example, and a checked recap.",
+  "discover": {
+    "useCases": [
+      "Teach a lesson in four beats: objectives, concept, example and recap.",
+      "Make one definition, rule or formula memorable with a short worked example.",
+      "Close a course unit with a checklist of what learners can now do."
+    ],
+    "audience": ["learners", "students", "developers", "new-hires"],
+    "goodFor": "One concept with 2-4 objectives, a one-line definition and a recap.",
+    "notFor": "Ordered procedures (tutorial), product tours (onboarding), data stories (datastory).",
+    "tags": ["lesson", "education", "concept", "explain", "code", "tutorial"],
+    "tone": ["calm", "friendly"],
+    "aspects": ["16:9"],
+    "lengths": {
+      "min": 35,
+      "max": 90
+    }
+  },
+  "slots": {
+    "topic": {
+      "type": "text",
+      "max": 60,
+      "required": true
+    },
+    "objectives": {
+      "type": "text[]",
+      "min": 2,
+      "max": 4,
+      "itemMax": 45,
+      "required": true
+    },
+    "concept": {
+      "type": "text",
+      "max": 110,
+      "required": true
+    },
+    "label": {
+      "type": "text",
+      "max": 30,
+      "default": "Key idea"
+    },
+    "code": {
+      "type": "text[]",
+      "min": 1,
+      "max": 14,
+      "itemMax": 60,
+      "optional": true
+    },
+    "lang": {
+      "type": "enum",
+      "values": ["js", "ts", "json", "py", "sh", "plain"],
+      "default": "js"
+    },
+    "file": {
+      "type": "text",
+      "max": 40,
+      "optional": true
+    },
+    "recap": {
+      "type": "text[]",
+      "min": 2,
+      "max": 4,
+      "itemMax": 45,
+      "required": true
+    },
+    "next": {
+      "type": "text",
+      "max": 60,
+      "default": "Next lesson: put it to work"
+    },
+    "length": {
+      "type": "enum",
+      "values": ["short", "standard", "long"],
+      "default": "standard"
+    },
+    "style": {
+      "type": "enum",
+      "values": ["calm", "techdark", "friendly"],
+      "default": "calm"
+    }
+  },
+  "example": {
+    "topic": "What is a function",
+    "objectives": ["Name the parts of a function", "Call one with inputs", "Use the result"],
+    "concept": "A [function] takes [inputs], does one job and returns an [output].",
+    "label": "Key idea",
+    "code": ["function add(a, b) {", "  return a + b", "}", "add(2, 3)  // 5"],
+    "lang": "js",
+    "file": "example.js",
+    "recap": ["A function has a name", "Inputs go in brackets", "It returns one result"],
+    "next": "Next lesson: put it to work"
+  },
+  "meta": {
+    "title": {
+      "$slot": "topic"
+    },
+    "lang": "en"
+  },
+  "scenes": [
+    {
+      "id": "intro",
+      "type": "title",
+      "props": {
+        "kicker": "Lesson",
+        "title": {
+          "$slot": "topic"
+        }
+      }
+    },
+    {
+      "id": "goals",
+      "type": "bullets",
+      "props": {
+        "title": "You will learn to",
+        "items": {
+          "$slot": "objectives"
+        },
+        "marker": "dot"
+      }
+    },
+    {
+      "id": "idea",
+      "type": "callout",
+      "props": {
+        "text": {
+          "$slot": "concept"
+        },
+        "kind": "definition",
+        "label": {
+          "$slot": "label"
+        }
+      }
+    },
+    {
+      "when": "code",
+      "id": "example",
+      "type": "code",
+      "props": {
+        "lines": {
+          "$slot": "code"
+        },
+        "lang": {
+          "$slot": "lang"
+        },
+        "file": {
+          "$slot": "file"
+        }
+      }
+    },
+    {
+      "id": "recap",
+      "type": "bullets",
+      "props": {
+        "title": "Recap",
+        "items": {
+          "$slot": "recap"
+        },
+        "marker": "check"
+      }
+    },
+    {
+      "id": "end",
+      "type": "outro",
+      "props": {
+        "title": {
+          "$slot": "next"
+        }
+      }
+    }
+  ]
+}

package/templates/guide/blueprints/onboarding.json

@@ -0,0 +1,80 @@
+{
+  "id": "onboarding",
+  "purpose": "Welcome a new user: what they get, 3-5 first steps in order, and a checklist to finish setup.",
+  "discover": {
+    "useCases": [
+      "Walk a new user through the first steps of a tool and a setup checklist.",
+      "Welcome new teammates with what they get, what to do first and what to finish.",
+      "Show three to six benefits as icon cards before a short ordered path."
+    ],
+    "audience": ["new-hires", "customers", "learners"],
+    "goodFor": "A first-day tour: 3-6 perks, 3-5 first steps and a short checklist.",
+    "notFor": "Deep tutorials (tutorial), concept teaching (lesson), persuasion (pitch).",
+    "tags": ["onboarding", "tutorial", "steps", "product", "howto", "education"],
+    "tone": ["friendly", "calm"],
+    "aspects": ["16:9"],
+    "lengths": { "min": 35, "max": 80 }
+  },
+  "slots": {
+    "product": { "type": "text", "max": 40, "required": true },
+    "perks": {
+      "type": "object",
+      "fields": { "icon": "text", "label": "text", "detail": "text" },
+      "list": true,
+      "min": 3,
+      "max": 6,
+      "required": true
+    },
+    "steps": {
+      "type": "object",
+      "fields": { "label": "text", "detail": "text" },
+      "list": true,
+      "min": 3,
+      "max": 5,
+      "required": true
+    },
+    "checklist": { "type": "text[]", "min": 2, "max": 5, "itemMax": 45, "required": true },
+    "closing": { "type": "text", "max": 60, "default": "Welcome aboard" },
+    "length": { "type": "enum", "values": ["short", "standard", "long"], "default": "standard" },
+    "style": { "type": "enum", "values": ["calm", "techdark", "friendly"], "default": "friendly" }
+  },
+  "example": {
+    "product": "Welcome to Briar Notes",
+    "perks": [
+      { "icon": "users", "label": "Shared spaces", "detail": "Work together" },
+      { "icon": "bell", "label": "Smart alerts", "detail": "Never miss news" },
+      { "icon": "sparkles", "label": "Quick start", "detail": "Ready in minutes" }
+    ],
+    "steps": [
+      { "label": "Sign in", "detail": "Use your work email" },
+      { "label": "Join", "detail": "Pick your team" },
+      { "label": "Explore", "detail": "Open the dashboard" }
+    ],
+    "checklist": ["Add a profile photo", "Invite a teammate", "Turn on alerts"],
+    "closing": "Welcome aboard"
+  },
+  "meta": { "title": { "$slot": "product" }, "lang": "en" },
+  "scenes": [
+    {
+      "id": "intro",
+      "type": "title",
+      "props": { "kicker": "Getting started", "title": { "$slot": "product" } }
+    },
+    {
+      "id": "perks",
+      "type": "icon-grid",
+      "props": { "title": "What you get", "items": { "$slot": "perks" } }
+    },
+    {
+      "id": "first-steps",
+      "type": "steps",
+      "props": { "title": "Your first steps", "layout": "path", "steps": { "$slot": "steps" } }
+    },
+    {
+      "id": "setup",
+      "type": "bullets",
+      "props": { "title": "Finish setup", "items": { "$slot": "checklist" }, "marker": "check" }
+    },
+    { "id": "end", "type": "outro", "props": { "title": { "$slot": "closing" } } }
+  ]
+}

package/templates/guide/blueprints/tutorial.json

@@ -0,0 +1,102 @@
+{
+  "id": "tutorial",
+  "purpose": "Teach a procedure: title, 3-6 numbered steps, an optional code or screen example, and a checked recap.",
+  "discover": {
+    "useCases": [
+      "Teach a procedure with numbered steps and a code or command example.",
+      "Show a screen or screenshot with the step that matters, then recap it.",
+      "Give learners a short checklist of what they can now do."
+    ],
+    "audience": ["learners", "developers", "new-hires", "customers"],
+    "goodFor": "A procedure with 3-6 ordered steps and one example to show.",
+    "notFor": "Concept lessons (lesson), first-day product tours (onboarding), persuasion (pitch).",
+    "tags": ["tutorial", "howto", "steps", "code", "education", "dev"],
+    "tone": ["calm", "friendly"],
+    "aspects": ["16:9"],
+    "lengths": { "min": 30, "max": 90 }
+  },
+  "slots": {
+    "title": { "type": "text", "max": 60, "required": true },
+    "steps": {
+      "type": "object",
+      "fields": { "label": "text", "detail": "text" },
+      "list": true,
+      "min": 3,
+      "max": 6,
+      "required": true
+    },
+    "code": { "type": "text[]", "min": 1, "max": 14, "itemMax": 60, "optional": true },
+    "lang": {
+      "type": "enum",
+      "values": ["js", "ts", "json", "py", "sh", "plain"],
+      "default": "sh"
+    },
+    "file": { "type": "text", "max": 40, "optional": true },
+    "screenshot": { "type": "text", "max": 120, "optional": true },
+    "caption": { "type": "text", "max": 100, "optional": true },
+    "recap": { "type": "text[]", "min": 2, "max": 4, "itemMax": 45, "optional": true },
+    "next": { "type": "text", "max": 60, "default": "Next: try it on your own" },
+    "length": { "type": "enum", "values": ["short", "standard", "long"], "default": "standard" },
+    "style": { "type": "enum", "values": ["calm", "techdark", "friendly"], "default": "calm" }
+  },
+  "example": {
+    "title": "Start a new project",
+    "steps": [
+      { "label": "Install", "detail": "Get the tool" },
+      { "label": "Create", "detail": "Make a project" },
+      { "label": "Run", "detail": "Start the server" },
+      { "label": "Open", "detail": "Visit the page" }
+    ],
+    "code": [
+      "$ briar install",
+      "$ briar create my-app",
+      "$ cd my-app",
+      "$ briar run",
+      "Ready on port 3000"
+    ],
+    "lang": "sh",
+    "file": "terminal",
+    "recap": ["Install the tool", "Create a project", "Run it locally"],
+    "next": "Next: try it on your own"
+  },
+  "meta": { "title": { "$slot": "title" }, "lang": "en" },
+  "scenes": [
+    {
+      "id": "intro",
+      "type": "title",
+      "props": { "kicker": "Tutorial", "title": { "$slot": "title" } }
+    },
+    {
+      "id": "steps",
+      "type": "steps",
+      "props": { "title": "Follow along", "layout": "path", "steps": { "$slot": "steps" } }
+    },
+    {
+      "when": "code",
+      "id": "example",
+      "type": "code",
+      "props": {
+        "lines": { "$slot": "code" },
+        "lang": { "$slot": "lang" },
+        "file": { "$slot": "file" }
+      }
+    },
+    {
+      "when": "screenshot",
+      "id": "screen",
+      "type": "media-frame",
+      "props": {
+        "image": { "$slot": "screenshot" },
+        "device": "browser",
+        "caption": { "$slot": "caption" }
+      }
+    },
+    {
+      "when": "recap",
+      "id": "recap",
+      "type": "bullets",
+      "props": { "title": "You can now", "items": { "$slot": "recap" }, "marker": "check" }
+    },
+    { "id": "end", "type": "outro", "props": { "title": { "$slot": "next" } } }
+  ]
+}

package/templates/guide/copy.md

@@ -0,0 +1,17 @@
+# Guide copy guide
+
+Tone: patient, encouraging, concrete. Teach one thing at a time.
+
+Do
+- Title: the outcome ("Deploy your first app"), at most 8 words.
+- Steps: label is a verb ("Install", "Run"), 1-2 words; detail one short clause, no full stop.
+- Code: real, minimal lines of 60 characters or fewer; show the command, then the result.
+- Objectives start with a verb; recap repeats them as done ("You can now...").
+- Close with the next thing to learn or try.
+
+Don't
+- No more than 6 steps, 14 code lines or 25 words per scene.
+- No jargon without a gloss; spell out acronyms once.
+- No exclamation marks, emoji, or "simply", "just", "easy".
+
+Vocabulary: "step" not "stage", "run" not "execute", "you" not "the user".

package/templates/guide/pacing.json

@@ -0,0 +1,59 @@
+{
+  "wordsPerSecond": 2.5,
+  "sceneSeconds": {
+    "title": {
+      "short": 3,
+      "standard": 4,
+      "long": 5
+    },
+    "icon-grid": {
+      "short": 6,
+      "standard": 9,
+      "long": 12
+    },
+    "media-frame": {
+      "short": 4,
+      "standard": 6,
+      "long": 8
+    },
+    "code": {
+      "short": 4,
+      "standard": 5,
+      "long": 8
+    },
+    "bullets": {
+      "short": 5,
+      "standard": 7,
+      "long": 10
+    },
+    "callout": {
+      "short": 4,
+      "standard": 6,
+      "long": 8
+    },
+    "outro": {
+      "short": 3,
+      "standard": 4,
+      "long": 5
+    },
+    "steps": {
+      "short": 6,
+      "standard": 9,
+      "long": 13
+    }
+  },
+  "lengths": {
+    "short": {
+      "scenes": [3, 6],
+      "totalSec": [10, 50]
+    },
+    "standard": {
+      "scenes": [4, 7],
+      "totalSec": [18, 80]
+    },
+    "long": {
+      "scenes": [5, 8],
+      "totalSec": [30, 120]
+    }
+  }
+}

package/templates/guide/styles/calm.json

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

package/templates/guide/styles/friendly.json

@@ -0,0 +1,15 @@
+{
+  "id": "friendly",
+  "theme": "playful-light",
+  "frame": {
+    "width": 1920,
+    "height": 1080,
+    "fps": 30
+  },
+  "direction": {
+    "shot": "medium",
+    "move": "static",
+    "ease": "spring-soft",
+    "transition": "crossfade"
+  }
+}

package/templates/guide/styles/techdark.json

@@ -0,0 +1,15 @@
+{
+  "id": "techdark",
+  "theme": "tech-dark",
+  "frame": {
+    "width": 1920,
+    "height": 1080,
+    "fps": 30
+  },
+  "direction": {
+    "shot": "close",
+    "move": "static",
+    "ease": "spring-snappy",
+    "transition": "cut"
+  }
+}