motionrender 0.0.0-stage → 0.2.1

package/templates/showcase-tall/template.json

@@ -0,0 +1,14 @@
+{
+  "name": "Showcase (9:16)",
+  "description": "A vertical showcase for social: a full-frame picture with caption, a phone with your screenshot, three feature icons and a call to action. Takes pictures and a theme.",
+  "tags": [
+    "showcase",
+    "9:16",
+    "social",
+    "pictures",
+    "themed"
+  ],
+  "order": 25,
+  "previewFrame": 148,
+  "brief": "A vertical social showcase: one hero picture with a caption, an app screen, three benefits and a call to action."
+}

package/templates/slideshow/composition.json

@@ -0,0 +1,167 @@
+{
+  "$schema": "./composition.schema.json",
+  "version": "1.0",
+  "id": "slideshow",
+  "name": "Slideshow",
+  "width": 1920,
+  "height": 1080,
+  "fps": 30,
+  "durationFrames": "auto",
+  "background": {
+    "type": "linear",
+    "from": [0, 0],
+    "to": [1920, 1080],
+    "stops": [
+      { "offset": 0, "color": "#070d18" },
+      { "offset": 0.6, "color": "#0b1526" },
+      { "offset": 1, "color": "#060a12" }
+    ]
+  },
+  "variables": {
+    "slides": {
+      "type": "list",
+      "description": "One scene per item; add or remove items to change the length",
+      "items": {
+        "title": { "type": "string", "default": "Untitled" },
+        "body": { "type": "string", "default": "" }
+      },
+      "default": [
+        { "title": "One source of truth", "body": "A composition is a JSON file. Every render reads the same file the same way." },
+        { "title": "Frames, not guesses", "body": "Text, shapes and pictures are drawn at exact frames, so a second render matches the first." },
+        { "title": "Built to be edited", "body": "Change a value, re-render, and only what you changed moves. Everything else stays put." }
+      ]
+    },
+    "kicker": { "type": "string", "default": "HOW IT WORKS" },
+    "footer": { "type": "string", "default": "Open Video Engine" },
+    "accent": { "type": "color", "default": "#38bdf8", "description": "Number, rule and glow colour" }
+  },
+  "scenes": [
+    {
+      "repeat": "{{slides}}",
+      "as": "slide",
+      "each": [
+        {
+          "id": "slide-{{index + 1}}",
+          "name": "{{slide.title}}",
+          "durationFrames": 120,
+          "transitionIn": { "type": "fade", "durationFrames": 12 },
+          "transitionOut": { "type": "fade", "durationFrames": 12 },
+          "layers": [
+            {
+              "id": "glow",
+              "type": "circle",
+              "x": 1240,
+              "y": -260,
+              "width": 1000,
+              "fill": "{{accent}}",
+              "opacity": 0.13,
+              "blur": 90,
+              "animations": [
+                { "property": "x", "keyframes": [{ "frame": 0, "value": 1280 }, { "frame": 120, "value": 1160, "easing": "drift" }] }
+              ]
+            },
+            {
+              "id": "kicker",
+              "type": "text",
+              "content": "{{kicker}}",
+              "x": 160,
+              "y": 150,
+              "fontSize": 26,
+              "fontWeight": 700,
+              "letterSpacing": 8,
+              "color": "{{accent}}",
+              "animations": [
+                { "property": "opacity", "keyframes": [{ "frame": 0, "value": 0 }, { "frame": 14, "value": 1 }] }
+              ]
+            },
+            {
+              "id": "number",
+              "type": "text",
+              "content": "0{{index + 1}}",
+              "x": 1600,
+              "y": 120,
+              "fontSize": 210,
+              "fontWeight": 800,
+              "letterSpacing": -8,
+              "textAlign": "right",
+              "color": "#122033",
+              "animations": [
+                { "property": "opacity", "keyframes": [{ "frame": 0, "value": 0 }, { "frame": 20, "value": 1 }] }
+              ]
+            },
+            {
+              "id": "title",
+              "type": "text",
+              "content": "{{slide.title}}",
+              "x": 156,
+              "y": 430,
+              "fontSize": 104,
+              "fontWeight": 800,
+              "lineHeight": 1.02,
+              "letterSpacing": -4,
+              "maxWidth": 1300,
+              "maxLines": 3,
+              "minFontSize": 64,
+              "color": "#f1f5f9",
+              "split": { "by": "words", "preset": "rise", "stagger": 5, "duration": 24 }
+            },
+            {
+              "id": "rule",
+              "type": "rect",
+              "x": 160,
+              "y": 730,
+              "width": 180,
+              "height": 8,
+              "radius": 4,
+              "fill": "{{accent}}",
+              "animations": [
+                { "property": "width", "keyframes": [{ "frame": 16, "value": 0 }, { "frame": 40, "value": 180, "easing": "land" }] }
+              ]
+            },
+            {
+              "id": "body",
+              "type": "text",
+              "content": "{{slide.body}}",
+              "x": 160,
+              "y": 790,
+              "fontSize": 40,
+              "lineHeight": 1.45,
+              "maxWidth": 1180,
+              "maxLines": 3,
+              "color": "#9fb3c8",
+              "animations": [
+                { "property": "opacity", "keyframes": [{ "frame": 24, "value": 0 }, { "frame": 46, "value": 1 }] }
+              ]
+            },
+            {
+              "id": "footer",
+              "type": "text",
+              "content": "{{footer}}",
+              "x": 160,
+              "y": 970,
+              "fontSize": 24,
+              "letterSpacing": 3,
+              "color": "#64748b"
+            },
+            {
+              "id": "dots",
+              "type": "group",
+              "x": 1600,
+              "y": 966,
+              "children": [
+                {
+                  "id": "dot-on",
+                  "type": "circle",
+                  "x": 0,
+                  "y": 0,
+                  "width": 12,
+                  "fill": "{{accent}}"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/templates/slideshow/template.json

@@ -0,0 +1,8 @@
+{
+  "name": "Slideshow",
+  "description": "A 16:9 slideshow with one scene per item in a list. Give it any number of title and body pairs; the video grows to fit them.",
+  "tags": ["slideshow", "16:9", "list", "presentation"],
+  "order": 6,
+  "previewFrame": 60,
+  "brief": "A 16:9 slideshow with three short slides: a title and a sentence each, a big slide number and an accent rule, in cool blue on deep navy."
+}

package/templates/social-reel/composition.json

@@ -0,0 +1,252 @@
+{
+  "$schema": "./composition.schema.json",
+  "version": "1.0",
+  "id": "social-reel",
+  "name": "Social reel",
+  "width": 1080,
+  "height": 1920,
+  "fps": 30,
+  "durationFrames": 600,
+  "background": {
+    "type": "linear",
+    "from": [0, 0],
+    "to": [1080, 1920],
+    "stops": [
+      { "offset": 0, "color": "#071018" },
+      { "offset": 0.55, "color": "#0a1a20" },
+      { "offset": 1, "color": "#06121a" }
+    ]
+  },
+  "variables": {
+    "stepsTitle": { "type": "string", "default": "HOW IT WORKS", "description": "Label above the three steps" },
+    "steps": { "type": "string", "default": "01  BRIEF\n02  VALIDATE\n03  RENDER", "description": "Three short steps, one per line, numbered like the example" },
+    "footer": { "type": "string", "default": "Generated from a brief. Rendered deterministically.", "description": "Small line at the bottom" },
+    "kicker": { "type": "string", "default": "MAKE IT MOVE", "description": "Small label above the headline" },
+    "title": { "type": "string", "default": "One brief.\nOne video.", "description": "Headline; a line break starts a new line" },
+    "detail": { "type": "string", "default": "Describe the video. OVE writes a composition, checks it against the same schema as a hand-written one, and renders every frame the same way, every time." },
+    "cta": { "type": "string", "default": "Try OVE" },
+    "accent": { "type": "color", "default": "#2dd4bf", "description": "Glow, rule and button colour" }
+  },
+  "scenes": [
+    {
+      "id": "hook",
+      "name": "Hook",
+      "startFrame": 0,
+      "durationFrames": 180,
+      "transitionIn": { "type": "fade", "durationFrames": 12 },
+      "transitionOut": { "type": "fade", "durationFrames": 12 },
+      "layers": [
+        {
+          "id": "glow",
+          "type": "circle",
+          "x": 600,
+          "y": -240,
+          "width": 980,
+          "fill": "{{accent}}",
+          "opacity": 0.16,
+          "blur": 70,
+          "animations": [
+            { "property": "x", "keyframes": [{ "frame": 0, "value": 640 }, { "frame": 180, "value": 500, "easing": "drift" }] }
+          ]
+        },
+        {
+          "id": "kicker",
+          "type": "text",
+          "content": "{{kicker}}",
+          "x": 90,
+          "y": 150,
+          "fontSize": 30,
+          "fontWeight": 700,
+          "letterSpacing": 8,
+          "color": "{{accent}}",
+          "animations": [
+            { "property": "opacity", "keyframes": [{ "frame": 0, "value": 0 }, { "frame": 18, "value": 1 }] }
+          ]
+        },
+        {
+          "id": "title",
+          "type": "text",
+          "content": "{{title}}",
+          "x": 88,
+          "y": 560,
+          "fontSize": 148,
+          "fontWeight": 800,
+          "lineHeight": 0.98,
+          "letterSpacing": -5,
+          "maxWidth": 900,
+          "maxLines": 3,
+          "minFontSize": 88,
+          "color": "#f8fafc",
+          "split": { "by": "words", "preset": "rise", "stagger": 5, "duration": 24 }
+        },
+        {
+          "id": "rule",
+          "type": "rect",
+          "x": 90,
+          "y": 1180,
+          "width": 220,
+          "height": 8,
+          "radius": 4,
+          "fill": "{{accent}}",
+          "animations": [
+            { "property": "width", "keyframes": [{ "frame": 18, "value": 0 }, { "frame": 48, "value": 220, "easing": "land" }] }
+          ]
+        },
+        {
+          "id": "detail",
+          "type": "text",
+          "content": "{{detail}}",
+          "x": 90,
+          "y": 1260,
+          "fontSize": 40,
+          "lineHeight": 1.45,
+          "maxWidth": 790,
+          "maxLines": 6,
+          "color": "#9fb0c6",
+          "animations": [
+            { "property": "opacity", "keyframes": [{ "frame": 30, "value": 0 }, { "frame": 55, "value": 1 }] }
+          ]
+        },
+        {
+          "id": "dot",
+          "type": "circle",
+          "x": 880,
+          "y": 1650,
+          "width": 120,
+          "fill": "{{accent}}",
+          "originX": "center",
+          "originY": "center",
+          "animations": [
+            { "property": "scale", "keyframes": [{ "frame": 36, "value": 0 }, { "frame": 62, "value": 1, "easing": "easeOutBack" }] }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "steps",
+      "name": "Three steps",
+      "startFrame": 180,
+      "durationFrames": 240,
+      "transitionIn": { "type": "slide", "direction": "left", "durationFrames": 18 },
+      "transitionOut": { "type": "fade", "durationFrames": 12 },
+      "layers": [
+        {
+          "id": "steps-glow",
+          "type": "circle",
+          "x": -260,
+          "y": 1180,
+          "width": 860,
+          "fill": "{{accent}}",
+          "opacity": 0.12,
+          "blur": 60
+        },
+        {
+          "id": "steps-kicker",
+          "type": "text",
+          "content": "{{stepsTitle}}",
+          "x": 90,
+          "y": 190,
+          "fontSize": 28,
+          "fontWeight": 700,
+          "letterSpacing": 7,
+          "color": "{{accent}}"
+        },
+        {
+          "id": "steps-list",
+          "type": "text",
+          "content": "{{steps}}",
+          "x": 90,
+          "y": 400,
+          "fontSize": 104,
+          "fontWeight": 800,
+          "lineHeight": 1.4,
+          "letterSpacing": -2,
+          "maxWidth": 900,
+          "maxLines": 3,
+          "color": "#f8fafc"
+        },
+        {
+          "id": "steps-detail",
+          "type": "text",
+          "content": "{{detail}}",
+          "x": 90,
+          "y": 1080,
+          "fontSize": 36,
+          "lineHeight": 1.5,
+          "maxWidth": 820,
+          "maxLines": 6,
+          "color": "#9fb0c6"
+        },
+        {
+          "id": "steps-rule",
+          "type": "rect",
+          "x": 90,
+          "y": 1000,
+          "width": 120,
+          "height": 6,
+          "radius": 3,
+          "fill": "{{accent}}"
+        }
+      ]
+    },
+    {
+      "id": "cta",
+      "name": "Call to action",
+      "startFrame": 420,
+      "durationFrames": 180,
+      "transitionIn": { "type": "fade", "durationFrames": 14 },
+      "transitionOut": { "type": "fade", "durationFrames": 12 },
+      "layers": [
+        {
+          "id": "cta-glow",
+          "type": "circle",
+          "x": 190,
+          "y": 1200,
+          "width": 700,
+          "fill": "{{accent}}",
+          "opacity": 0.2,
+          "blur": 80
+        },
+        {
+          "id": "cta-title",
+          "type": "text",
+          "content": "{{cta}}",
+          "x": 540,
+          "y": 720,
+          "fontSize": 132,
+          "fontWeight": 800,
+          "letterSpacing": -4,
+          "textAlign": "center",
+          "maxWidth": 880,
+          "maxLines": 2,
+          "minFontSize": 72,
+          "color": "#f8fafc"
+        },
+        {
+          "id": "cta-rule",
+          "type": "rect",
+          "x": 430,
+          "y": 900,
+          "width": 220,
+          "height": 8,
+          "radius": 4,
+          "fill": "{{accent}}",
+          "animations": [
+            { "property": "width", "keyframes": [{ "frame": 16, "value": 0 }, { "frame": 44, "value": 220, "easing": "land" }] }
+          ]
+        },
+        {
+          "id": "cta-note",
+          "type": "text",
+          "content": "{{footer}}",
+          "x": 540,
+          "y": 1040,
+          "fontSize": 32,
+          "textAlign": "center",
+          "maxWidth": 760,
+          "color": "#9fb0c6"
+        }
+      ]
+    }
+  ]
+}

package/templates/social-reel/template.json

@@ -0,0 +1,8 @@
+{
+  "name": "Social reel",
+  "description": "A 20-second vertical reel: a hook, three steps, and a call to action. Good for launches and social posts.",
+  "tags": ["reel", "social", "9:16", "launch"],
+  "order": 1,
+  "previewFrame": 70,
+  "brief": "A 20-second vertical social reel for a product launch: a bold hook, three quick steps (brief, validate, render) and a clear call to action, in a dark teal palette."
+}

package/templates/starter/assets/logo.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160">
+  <rect x="8" y="8" width="144" height="144" rx="36" fill="#6366f1"/>
+  <path d="M62 50 L114 80 L62 110 Z" fill="#ffffff"/>
+</svg>

package/templates/starter/composition.json

@@ -0,0 +1,84 @@
+{
+  "$schema": "./composition.schema.json",
+  "version": "1.0",
+  "id": "starter",
+  "name": "Starter",
+  "width": 1920,
+  "height": 1080,
+  "fps": 30,
+  "durationFrames": 150,
+  "background": { "type": "linear", "from": [0, 0], "to": [1920, 1080], "stops": [{ "offset": 0, "color": "#080b18" }, { "offset": 1, "color": "#111634" }] },
+  "variables": {
+    "title": { "type": "string", "default": "Hello,\nOpen Video Engine", "description": "Headline; a line break in the value starts a new line" },
+    "tagline": { "type": "string", "default": "Edit composition.json to begin" },
+    "accent": { "type": "color", "default": "#6366f1", "description": "Colour of the glow and the line beside the tagline" }
+  },
+  "assets": [
+    { "id": "logo", "type": "image", "src": "./assets/logo.svg" }
+  ],
+  "scenes": [
+    {
+      "id": "intro",
+      "name": "Intro",
+      "startFrame": 0,
+      "durationFrames": 150,
+      "transitionIn": { "type": "fade", "durationFrames": 15 },
+      "transitionOut": { "type": "fade", "durationFrames": 15 },
+      "layers": [
+        {
+          "id": "glow",
+          "type": "circle",
+          "x": 1500,
+          "y": 260,
+          "width": 1300,
+          "fill": { "type": "radial", "center": [0, 0], "radius": 650, "stops": [{ "offset": 0, "color": "{{accent}}66" }, { "offset": 1, "color": "{{accent}}00" }] },
+          "animations": [
+            { "property": "x", "keyframes": [{ "frame": 0, "value": 1560 }, { "frame": 150, "value": 1440, "easing": "easeInOut" }] }
+          ]
+        },
+        {
+          "id": "logo",
+          "type": "image",
+          "src": "logo",
+          "x": 160,
+          "y": 250,
+          "width": 120,
+          "height": 120,
+          "objectFit": "contain",
+          "animations": [
+            { "property": "opacity", "keyframes": [{ "frame": 0, "value": 0 }, { "frame": 16, "value": 1 }] },
+            { "property": "scale", "keyframes": [{ "frame": 0, "value": 0.8 }, { "frame": 24, "value": 1, "easing": "easeOutBack" }] }
+          ]
+        },
+        {
+          "id": "title",
+          "type": "group",
+          "x": 160,
+          "y": 430,
+          "animations": [
+            { "property": "opacity", "keyframes": [{ "frame": 8, "value": 0 }, { "frame": 26, "value": 1 }] },
+            { "property": "y", "keyframes": [{ "frame": 8, "value": 462 }, { "frame": 36, "value": 430, "easing": "land" }] }
+          ],
+          "children": [
+            { "id": "title-text", "type": "text", "content": "{{title}}", "textAlign": "left", "fontSize": 124, "fontWeight": 700, "letterSpacing": -4, "lineHeight": 1.05, "maxWidth": 1300, "maxLines": 2, "minFontSize": 64, "color": "#f5f7fb" }
+          ]
+        },
+        {
+          "id": "tagline",
+          "type": "group",
+          "x": 160,
+          "y": 760,
+          "startFrame": 30,
+          "animations": [
+            { "property": "opacity", "keyframes": [{ "frame": 0, "value": 0 }, { "frame": 18, "value": 1 }] },
+            { "property": "x", "keyframes": [{ "frame": 0, "value": 184 }, { "frame": 24, "value": 160, "easing": "land" }] }
+          ],
+          "children": [
+            { "id": "tagline-line", "type": "rect", "y": 6, "width": 4, "height": 34, "radius": 2, "fill": "{{accent}}" },
+            { "id": "tagline-text", "type": "text", "content": "{{tagline}}", "x": 32, "textAlign": "left", "fontSize": 36, "letterSpacing": -0.4, "maxWidth": 1200, "maxLines": 1, "minFontSize": 22, "color": "#97a0b6" }
+          ]
+        }
+      ]
+    }
+  ]
+}