@anvpx/motion-templates 0.0.0-stage → 0.1.1

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"
+  }
+}

package/templates/guide/template.json

@@ -0,0 +1,95 @@
+{
+  "templateVersion": 1,
+  "id": "guide",
+  "version": "1.0.1",
+  "title": "Guide",
+  "summary": "Tutorials, lessons and onboarding. 16:9, steps and code, calm to friendly.",
+  "domains": ["tutorial", "tech", "education"],
+  "discover": {
+    "useCases": [
+      "Teach a procedure with numbered steps and a code or screen example.",
+      "Teach a lesson in four beats: objectives, concept, example, recap.",
+      "Walk a new user through the first steps of a tool and a checklist.",
+      "Give learners a short recap they can check off after watching."
+    ],
+    "audience": ["learners", "new-hires", "customers", "developers"],
+    "goodFor": "A skill or tool taught in 3-6 ordered steps with a clear outcome.",
+    "notFor": "Persuasion (pitch), status reporting (update), data analysis (datastory).",
+    "tags": ["tutorial", "howto", "lesson", "onboarding", "steps", "education", "code", "explain"],
+    "tone": ["calm", "friendly"],
+    "aspects": ["16:9"]
+  },
+  "requires": {
+    "storyboard": 1,
+    "scenes": ["title", "steps", "code", "media-frame", "bullets", "callout", "icon-grid", "outro"]
+  },
+  "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"
+    },
+    {
+      "id": "playful-light",
+      "file": "@shared/playful-light.json",
+      "mode": "light",
+      "pair": "playful-dark"
+    },
+    {
+      "id": "playful-dark",
+      "file": "@shared/playful-dark.json",
+      "mode": "dark",
+      "pair": "playful-light"
+    }
+  ],
+  "styles": [
+    {
+      "id": "calm",
+      "file": "styles/calm.json"
+    },
+    {
+      "id": "techdark",
+      "file": "styles/techdark.json"
+    },
+    {
+      "id": "friendly",
+      "file": "styles/friendly.json"
+    }
+  ],
+  "blueprints": [
+    {
+      "id": "tutorial",
+      "file": "blueprints/tutorial.json"
+    },
+    {
+      "id": "lesson",
+      "file": "blueprints/lesson.json"
+    },
+    {
+      "id": "onboarding",
+      "file": "blueprints/onboarding.json"
+    }
+  ],
+  "pacing": "pacing.json",
+  "copy": "copy.md",
+  "license": "Apache-2.0"
+}

package/templates/pitch/blueprints/feature.json

@@ -0,0 +1,134 @@
+{
+  "id": "feature",
+  "purpose": "Tell one feature as problem then solution in 15-40s: title, optional hook, before/after wipe, call to action.",
+  "discover": {
+    "useCases": [
+      "Explain one feature as a problem followed by its solution.",
+      "Show a before and after of a single improvement in under a minute.",
+      "Announce a small update to existing users with a clear next step."
+    ],
+    "audience": ["customers", "prospects", "sponsors"],
+    "goodFor": "One feature with a clear problem, two or three solution points and a call to action.",
+    "notFor": "A whole-product launch (launch), step-by-step teaching (explain/howto).",
+    "tags": ["pitch", "product", "before-after", "marketing", "launch", "sales"],
+    "tone": ["bold", "energetic"],
+    "aspects": ["16:9", "9:16"],
+    "lengths": {
+      "min": 15,
+      "max": 40
+    }
+  },
+  "slots": {
+    "feature": {
+      "type": "text",
+      "max": 50,
+      "required": true
+    },
+    "problem": {
+      "type": "text",
+      "max": 60,
+      "required": true
+    },
+    "solution": {
+      "type": "text[]",
+      "min": 2,
+      "max": 3,
+      "itemMax": 50,
+      "required": true
+    },
+    "hook": {
+      "type": "text[]",
+      "min": 1,
+      "max": 4,
+      "itemMax": 14,
+      "optional": true
+    },
+    "cta": {
+      "type": "text",
+      "max": 40,
+      "required": true
+    },
+    "length": {
+      "type": "enum",
+      "values": ["short", "standard", "long"],
+      "default": "standard"
+    },
+    "style": {
+      "type": "enum",
+      "values": ["punchy", "polished", "teaser"],
+      "default": "punchy"
+    }
+  },
+  "example": {
+    "feature": "Quick Capture",
+    "problem": "Ideas get lost between apps",
+    "solution": ["One shortcut", "Any notebook", "Works offline"],
+    "hook": ["Less", "Clicking", "More", "Doing"],
+    "cta": "Try it today"
+  },
+  "meta": {
+    "title": {
+      "$slot": "feature"
+    },
+    "lang": "en"
+  },
+  "scenes": [
+    {
+      "id": "intro",
+      "type": "title",
+      "props": {
+        "kicker": "New",
+        "title": {
+          "$slot": "feature"
+        }
+      }
+    },
+    {
+      "when": "hook",
+      "id": "hook",
+      "type": "kinetic",
+      "props": {
+        "words": {
+          "$slot": "hook"
+        },
+        "mode": "slam"
+      }
+    },
+    {
+      "id": "shift",
+      "type": "compare",
+      "props": {
+        "mode": "wipe",
+        "left": {
+          "label": "Before",
+          "points": [
+            {
+              "$slot": "problem"
+            }
+          ]
+        },
+        "right": {
+          "label": "After",
+          "points": {
+            "$slot": "solution"
+          }
+        },
+        "winner": "right"
+      }
+    },
+    {
+      "id": "end",
+      "type": "outro",
+      "props": {
+        "title": {
+          "$slot": "cta"
+        },
+        "lines": [
+          {
+            "$slot": "feature"
+          }
+        ]
+      }
+    }
+  ]
+}