@anvpx/motion 0.0.0-stage → 0.1.1

package/templates/vista/blueprints/tour.json

@@ -0,0 +1,84 @@
+{
+  "discover": {
+    "audience": ["customers", "learners", "stakeholders"],
+    "aspects": ["16:9"],
+    "goodFor": "Two or three 3D stops with captions and one closing takeaway.",
+    "lengths": { "max": 60, "min": 30 },
+    "notFor": "Single highlights (spotlight), data or procedures (datastory, guide).",
+    "tags": ["product", "event", "promo", "announce", "marketing"],
+    "tone": ["cinematic", "calm"],
+    "useCases": [
+      "Walk through two or three stops of a space, release or idea in order.",
+      "Pair each 3D view with a short caption the narrator can read.",
+      "Close a short tour with one takeaway and a next step."
+    ]
+  },
+  "example": {
+    "caption1": "Boats rest under morning light",
+    "caption2": "The beam turns once each minute",
+    "cta": "Plan a visit",
+    "stop1": "North pier",
+    "stop2": "Old lighthouse",
+    "takeaway": "Small harbors share one calm rhythm",
+    "title": "Three quiet harbors"
+  },
+  "id": "tour",
+  "meta": { "lang": "en", "title": { "$slot": "title" } },
+  "purpose": "Tour two or three stops in 30-60s: title, 3D stops with captions, takeaway, close.",
+  "scenes": [
+    {
+      "id": "intro",
+      "props": { "kicker": "Tour", "title": { "$slot": "title" } },
+      "type": "title"
+    },
+    {
+      "id": "stop1",
+      "props": { "caption": { "$slot": "caption1" }, "title": { "$slot": "stop1" } },
+      "type": "scene3d"
+    },
+    {
+      "id": "cap1",
+      "layer": "overlay",
+      "over": "stop1",
+      "props": { "text": { "$slot": "caption1" } },
+      "type": "caption"
+    },
+    {
+      "id": "stop2",
+      "props": { "caption": { "$slot": "caption2" }, "title": { "$slot": "stop2" } },
+      "type": "scene3d"
+    },
+    {
+      "id": "cap2",
+      "layer": "overlay",
+      "over": "stop2",
+      "props": { "text": { "$slot": "caption2" } },
+      "type": "caption"
+    },
+    {
+      "id": "stop3",
+      "props": { "caption": { "$slot": "caption3" }, "title": { "$slot": "stop3" } },
+      "type": "scene3d",
+      "when": "stop3"
+    },
+    {
+      "id": "point",
+      "props": { "kind": "statement", "label": "Takeaway", "text": { "$slot": "takeaway" } },
+      "type": "callout"
+    },
+    { "id": "end", "props": { "title": { "$slot": "cta" } }, "type": "outro" }
+  ],
+  "slots": {
+    "caption1": { "max": 140, "required": true, "type": "text" },
+    "caption2": { "max": 140, "required": true, "type": "text" },
+    "caption3": { "max": 140, "optional": true, "type": "text" },
+    "cta": { "max": 40, "required": true, "type": "text" },
+    "length": { "default": "standard", "type": "enum", "values": ["short", "standard", "long"] },
+    "stop1": { "max": 60, "required": true, "type": "text" },
+    "stop2": { "max": 60, "required": true, "type": "text" },
+    "stop3": { "max": 60, "optional": true, "type": "text" },
+    "style": { "default": "cinematic", "type": "enum", "values": ["cinematic", "bright"] },
+    "takeaway": { "max": 120, "required": true, "type": "text" },
+    "title": { "max": 60, "required": true, "type": "text" }
+  }
+}

package/templates/vista/copy.md

@@ -0,0 +1,18 @@
+# Vista copy guide
+
+Tone: cinematic, calm, concrete. Show the place, then name it.
+
+Do
+- Title: the stop or subject in at most 8 words.
+- 3D scene: one named view; caption is one clause, at most 12 words.
+- Caption line: plain words that a narrator could read aloud.
+- Takeaway: one line, at most 15 words, no new facts.
+- Close with a next step of 2-5 words.
+
+Don't
+- No more than 3 stops, 25 words per scene, one idea per caption.
+- No superlatives you cannot prove (best, stunning, ultimate).
+- No invented numbers, dates or quotes; say only what the view shows.
+- No exclamation marks, emoji, or "simply", "just", "easy".
+
+Vocabulary: "view" not "render", "stop" not "slide", "visit" not "leverage".

package/templates/vista/pacing.json

@@ -0,0 +1,14 @@
+{
+  "lengths": {
+    "long": { "scenes": [4, 8], "totalSec": [30, 75] },
+    "short": { "scenes": [3, 6], "totalSec": [10, 40] },
+    "standard": { "scenes": [3, 7], "totalSec": [15, 60] }
+  },
+  "sceneSeconds": {
+    "callout": { "long": 5, "short": 3, "standard": 4 },
+    "outro": { "long": 5, "short": 3, "standard": 4 },
+    "scene3d": { "long": 11, "short": 6, "standard": 8 },
+    "title": { "long": 5, "short": 3, "standard": 4 }
+  },
+  "wordsPerSecond": 2.5
+}

package/templates/vista/styles/bright.json

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

package/templates/vista/styles/cinematic.json

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

package/templates/vista/template.json

@@ -0,0 +1,42 @@
+{
+  "blueprints": [
+    { "file": "blueprints/spotlight.json", "id": "spotlight" },
+    { "file": "blueprints/tour.json", "id": "tour" }
+  ],
+  "copy": "copy.md",
+  "discover": {
+    "audience": ["customers", "prospects", "learners", "stakeholders"],
+    "goodFor": "A visual tour with one to three 3D scenes and short captions under a minute.",
+    "notFor": "Dense data or long procedures (datastory, guide); persuasion (pitch).",
+    "tags": ["product", "announce", "promo", "marketing", "event", "explain"],
+    "tone": ["cinematic", "calm"],
+    "aspects": ["16:9", "1:1"],
+    "useCases": [
+      "Show a place, object or idea as a cinematic 3D diorama with a caption.",
+      "Walk through two or three highlights of a release, space or concept in order.",
+      "Add short voice-ready captions to a visual tour without recording audio first."
+    ]
+  },
+  "domains": ["demo", "product", "showcase"],
+  "id": "vista",
+  "license": "Apache-2.0",
+  "pacing": "pacing.json",
+  "requires": { "scenes": ["title", "scene3d", "caption", "callout", "outro"], "storyboard": 1 },
+  "styles": [
+    { "file": "styles/cinematic.json", "id": "cinematic" },
+    { "file": "styles/bright.json", "id": "bright" }
+  ],
+  "summary": "Cinematic 3D dioramas with captions for demos and tours. Depth, voice-ready, captioned.",
+  "templateVersion": 1,
+  "themes": [
+    {
+      "file": "@shared/fjord-light.json",
+      "id": "fjord-light",
+      "mode": "light",
+      "pair": "fjord-dark"
+    },
+    { "file": "@shared/fjord-dark.json", "id": "fjord-dark", "mode": "dark", "pair": "fjord-light" }
+  ],
+  "title": "Vista",
+  "version": "1.0.0"
+}

package/templates/walkthrough/blueprints/product-tour.json

@@ -0,0 +1,107 @@
+{
+  "discover": {
+    "aspects": ["16:9"],
+    "audience": ["new-hires", "customers", "learners"],
+    "goodFor": "Two or three screens, each with a caption, plus tips.",
+    "lengths": { "max": 90, "min": 30 },
+    "notFor": "3D showcases (vista/spotlight), numbered procedures (guide/tutorial).",
+    "tags": ["tutorial", "onboarding", "steps", "product", "howto"],
+    "tone": ["calm", "friendly"],
+    "useCases": [
+      "Walk a new user through two or three screens of a product in order.",
+      "Pair each screen with a caption that says what to do there.",
+      "End a tour with two or three tips and a next step."
+    ]
+  },
+  "example": {
+    "caption1": "See every day of the trip on one board",
+    "caption2": "Open a stay to check dates and the address",
+    "cta": "Start planning",
+    "opener": "The trip board",
+    "openerCaption": "Every plan starts on one calm board",
+    "screen1": "Board overview",
+    "screen2": "Stay details",
+    "tips": ["Add travel dates first", "Invite one companion", "Save stays before booking"],
+    "title": "Plan a weekend trip"
+  },
+  "id": "product-tour",
+  "meta": { "lang": "en", "title": { "$slot": "title" } },
+  "purpose": "Tour two or three screens in 30-90s: title, screens with captions, tips, close.",
+  "scenes": [
+    {
+      "id": "intro",
+      "props": { "kicker": "Walkthrough", "title": { "$slot": "title" } },
+      "type": "title"
+    },
+    {
+      "id": "establishing",
+      "props": { "caption": { "$slot": "openerCaption" }, "title": { "$slot": "opener" } },
+      "type": "scene3d",
+      "when": "opener"
+    },
+    {
+      "id": "screen1",
+      "props": {
+        "caption": { "$slot": "caption1" },
+        "device": "browser",
+        "image": { "$slot": "screen1" }
+      },
+      "type": "media-frame"
+    },
+    {
+      "id": "cap1",
+      "layer": "overlay",
+      "over": "screen1",
+      "props": { "text": { "$slot": "caption1" } },
+      "type": "caption"
+    },
+    {
+      "id": "screen2",
+      "props": {
+        "caption": { "$slot": "caption2" },
+        "device": "browser",
+        "image": { "$slot": "screen2" }
+      },
+      "type": "media-frame"
+    },
+    {
+      "id": "cap2",
+      "layer": "overlay",
+      "over": "screen2",
+      "props": { "text": { "$slot": "caption2" } },
+      "type": "caption"
+    },
+    {
+      "id": "screen3",
+      "props": {
+        "caption": { "$slot": "caption3" },
+        "device": "browser",
+        "image": { "$slot": "screen3" }
+      },
+      "type": "media-frame",
+      "when": "screen3"
+    },
+    {
+      "id": "tips",
+      "props": { "items": { "$slot": "tips" }, "marker": "check", "title": "Tips" },
+      "type": "bullets",
+      "when": "tips"
+    },
+    { "id": "end", "props": { "title": { "$slot": "cta" } }, "type": "outro" }
+  ],
+  "slots": {
+    "caption1": { "max": 140, "required": true, "type": "text" },
+    "caption2": { "max": 140, "required": true, "type": "text" },
+    "caption3": { "max": 140, "optional": true, "type": "text" },
+    "cta": { "max": 40, "required": true, "type": "text" },
+    "length": { "default": "standard", "type": "enum", "values": ["short", "standard", "long"] },
+    "opener": { "max": 60, "optional": true, "type": "text" },
+    "openerCaption": { "max": 140, "optional": true, "type": "text" },
+    "screen1": { "max": 120, "required": true, "type": "text" },
+    "screen2": { "max": 120, "required": true, "type": "text" },
+    "screen3": { "max": 120, "optional": true, "type": "text" },
+    "style": { "default": "calm", "type": "enum", "values": ["calm", "deep"] },
+    "tips": { "itemMax": 45, "max": 4, "min": 2, "optional": true, "type": "text[]" },
+    "title": { "max": 60, "required": true, "type": "text" }
+  }
+}

package/templates/walkthrough/copy.md

@@ -0,0 +1,16 @@
+# Walkthrough copy guide
+
+Tone: calm, friendly, plain. Say what to do on each screen.
+
+Do
+- Title: the product area or task in at most 8 words.
+- Screen: one screen per stop; the caption states the action in at most 12 words.
+- Tips: each tip is one concrete action, at most 12 words.
+- Close with a next step of 2-5 words.
+
+Don't
+- No more than 3 screens, one idea per caption, no new facts in the tips.
+- No superlatives you cannot prove; no invented data, dates or quotes.
+- No exclamation marks, emoji, or "simply", "just", "easy".
+
+Vocabulary: "screen" not "page", "tour" not "demo", "next step" not "leverage".

package/templates/walkthrough/pacing.json

@@ -0,0 +1,16 @@
+{
+  "lengths": {
+    "long": { "scenes": [5, 9], "totalSec": [35, 115] },
+    "short": { "scenes": [3, 6], "totalSec": [12, 45] },
+    "standard": { "scenes": [4, 8], "totalSec": [20, 80] }
+  },
+  "sceneSeconds": {
+    "bullets": { "long": 10, "short": 5, "standard": 7 },
+    "caption": { "long": 5, "short": 3, "standard": 4 },
+    "media-frame": { "long": 8, "short": 4, "standard": 6 },
+    "outro": { "long": 5, "short": 3, "standard": 4 },
+    "scene3d": { "long": 11, "short": 6, "standard": 8 },
+    "title": { "long": 5, "short": 3, "standard": 4 }
+  },
+  "wordsPerSecond": 2.5
+}

package/templates/walkthrough/styles/calm.json

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

package/templates/walkthrough/styles/deep.json

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

package/templates/walkthrough/template.json

@@ -0,0 +1,37 @@
+{
+  "blueprints": [{ "file": "blueprints/product-tour.json", "id": "product-tour" }],
+  "copy": "copy.md",
+  "discover": {
+    "aspects": ["16:9"],
+    "audience": ["new-hires", "customers", "learners"],
+    "goodFor": "A product tour of 2-3 screens with captions, tips and a next step.",
+    "notFor": "Cinematic 3D showcases (vista), full procedures (guide/tutorial).",
+    "tags": ["tutorial", "onboarding", "steps", "product", "howto", "education"],
+    "tone": ["calm", "friendly"],
+    "useCases": [
+      "Walk a new user through the key screens of a product in order.",
+      "Show what to do on two or three screens, each with a caption.",
+      "Close a tour with short tips and one clear next step."
+    ]
+  },
+  "domains": ["tutorial", "product", "education"],
+  "id": "walkthrough",
+  "license": "Apache-2.0",
+  "pacing": "pacing.json",
+  "requires": {
+    "scenes": ["title", "scene3d", "caption", "media-frame", "bullets", "outro"],
+    "storyboard": 1
+  },
+  "styles": [
+    { "file": "styles/calm.json", "id": "calm" },
+    { "file": "styles/deep.json", "id": "deep" }
+  ],
+  "summary": "Guided product tours: key screens with captions, tips and a next step.",
+  "templateVersion": 1,
+  "themes": [
+    { "file": "@shared/calm-light.json", "id": "calm-light", "mode": "light", "pair": "calm-dark" },
+    { "file": "@shared/calm-dark.json", "id": "calm-dark", "mode": "dark", "pair": "calm-light" }
+  ],
+  "title": "Walkthrough",
+  "version": "1.0.0"
+}