motionrender 0.0.0-stage → 0.2.1

package/studio/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta name="color-scheme" content="dark light" />
+    <script>try{var t=localStorage.getItem('ove-theme')||'dark';if(t==='system')t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.dataset.theme=t}catch(e){document.documentElement.dataset.theme='dark'}</script>
+    <title>OVE AI studio</title>
+    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 22 21H2z' fill='%23ededed'/%3E%3C/svg%3E" />
+    <script type="module" crossorigin src="/assets/index-J_fvKgng.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CzOvWv9w.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/templates/case-study/composition.json

@@ -0,0 +1,358 @@
+{
+  "$schema": "./composition.schema.json",
+  "version": "1.0",
+  "id": "case-study",
+  "name": "Case study",
+  "width": 1920,
+  "height": 1080,
+  "fps": 30,
+  "durationFrames": 600,
+  "background": {
+    "type": "linear",
+    "from": [0, 0],
+    "to": [1920, 1080],
+    "stops": [
+      { "offset": 0, "color": "#07110f" },
+      { "offset": 0.55, "color": "#0b1a17" },
+      { "offset": 1, "color": "#060d0b" }
+    ]
+  },
+  "variables": {
+    "kicker": { "type": "string", "default": "CASE STUDY" },
+    "client": { "type": "string", "default": "Northlight" },
+    "headline": { "type": "string", "default": "A launch film in a\\nsingle afternoon", "description": "Promise; a line break starts a new line" },
+    "stat1": { "type": "string", "default": "12×" },
+    "stat1Label": { "type": "string", "default": "faster to a first cut" },
+    "stat2": { "type": "string", "default": "68%" },
+    "stat2Label": { "type": "string", "default": "less re-rendering" },
+    "stat3": { "type": "string", "default": "1" },
+    "stat3Label": { "type": "string", "default": "source file for every cut" },
+    "quote": { "type": "string", "default": "We stopped rebuilding the same video for every format. One file, three ratios, done before lunch." },
+    "quoteBy": { "type": "string", "default": "Mira Chen, Creative director" },
+    "cta": { "type": "string", "default": "Read the story" },
+    "accent": { "type": "color", "default": "#34d399", "description": "Numbers, rules and the button colour" }
+  },
+  "scenes": [
+    {
+      "id": "intro",
+      "name": "Client and promise",
+      "startFrame": 0,
+      "durationFrames": 180,
+      "transitionIn": { "type": "fade", "durationFrames": 12 },
+      "transitionOut": { "type": "fade", "durationFrames": 12 },
+      "layers": [
+        {
+          "id": "glow",
+          "type": "circle",
+          "x": 1180,
+          "y": -300,
+          "width": 1100,
+          "fill": "{{accent}}",
+          "opacity": 0.14,
+          "blur": 100,
+          "animations": [
+            { "property": "x", "keyframes": [{ "frame": 0, "value": 1220 }, { "frame": 180, "value": 1100, "easing": "drift" }] }
+          ]
+        },
+        {
+          "id": "kicker",
+          "type": "text",
+          "content": "{{kicker}}",
+          "x": 150,
+          "y": 190,
+          "fontSize": 26,
+          "fontWeight": 700,
+          "letterSpacing": 8,
+          "color": "{{accent}}",
+          "animations": [
+            { "property": "opacity", "keyframes": [{ "frame": 0, "value": 0 }, { "frame": 16, "value": 1 }] }
+          ]
+        },
+        {
+          "id": "client",
+          "type": "text",
+          "content": "{{client}}",
+          "x": 146,
+          "y": 290,
+          "fontSize": 96,
+          "fontWeight": 800,
+          "letterSpacing": -3,
+          "maxWidth": 1200,
+          "maxLines": 1,
+          "minFontSize": 56,
+          "color": "#f0fdf9",
+          "animations": [
+            { "property": "y", "keyframes": [{ "frame": 0, "value": 320 }, { "frame": 30, "value": 290, "easing": "land" }] },
+            { "property": "opacity", "keyframes": [{ "frame": 0, "value": 0 }, { "frame": 26, "value": 1 }] }
+          ]
+        },
+        {
+          "id": "rule",
+          "type": "rect",
+          "x": 150,
+          "y": 430,
+          "width": 220,
+          "height": 8,
+          "radius": 4,
+          "fill": "{{accent}}",
+          "animations": [
+            { "property": "width", "keyframes": [{ "frame": 18, "value": 0 }, { "frame": 46, "value": 220, "easing": "land" }] }
+          ]
+        },
+        {
+          "id": "headline",
+          "type": "text",
+          "content": "{{headline}}",
+          "x": 146,
+          "y": 520,
+          "fontSize": 126,
+          "fontWeight": 800,
+          "lineHeight": 0.98,
+          "letterSpacing": -5,
+          "maxWidth": 1500,
+          "maxLines": 3,
+          "minFontSize": 74,
+          "color": "#ecfdf5",
+          "split": { "by": "words", "preset": "rise", "stagger": 4, "duration": 26 }
+        },
+        {
+          "id": "mark",
+          "type": "path",
+          "d": "M0 0 L120 0 M0 0 L0 120",
+          "x": 1650,
+          "y": 840,
+          "stroke": "{{accent}}",
+          "strokeWidth": 4,
+          "opacity": 0.7
+        }
+      ]
+    },
+    {
+      "id": "stats",
+      "name": "Results",
+      "startFrame": 180,
+      "durationFrames": 240,
+      "transitionIn": { "type": "slide", "direction": "left", "durationFrames": 18 },
+      "transitionOut": { "type": "fade", "durationFrames": 12 },
+      "layers": [
+        {
+          "id": "stats-glow",
+          "type": "circle",
+          "x": -260,
+          "y": 640,
+          "width": 900,
+          "fill": "{{accent}}",
+          "opacity": 0.1,
+          "blur": 90
+        },
+        {
+          "id": "stats-kicker",
+          "type": "text",
+          "content": "THE RESULT",
+          "x": 150,
+          "y": 160,
+          "fontSize": 26,
+          "fontWeight": 700,
+          "letterSpacing": 8,
+          "color": "{{accent}}"
+        },
+        {
+          "id": "stat-1",
+          "type": "text",
+          "content": "{{stat1}}",
+          "x": 150,
+          "y": 330,
+          "fontSize": 150,
+          "fontWeight": 800,
+          "letterSpacing": -6,
+          "maxWidth": 520,
+          "maxLines": 1,
+          "minFontSize": 86,
+          "color": "#ecfdf5",
+          "animations": [
+            { "property": "opacity", "keyframes": [{ "frame": 14, "value": 0 }, { "frame": 34, "value": 1 }] },
+            { "property": "y", "keyframes": [{ "frame": 14, "value": 360 }, { "frame": 42, "value": 330, "easing": "land" }] }
+          ]
+        },
+        {
+          "id": "stat-1-label",
+          "type": "text",
+          "content": "{{stat1Label}}",
+          "x": 154,
+          "y": 520,
+          "fontSize": 32,
+          "lineHeight": 1.35,
+          "maxWidth": 460,
+          "maxLines": 2,
+          "color": "#8fb3a7",
+          "animations": [
+            { "property": "opacity", "keyframes": [{ "frame": 24, "value": 0 }, { "frame": 44, "value": 1 }] }
+          ]
+        },
+        {
+          "id": "stat-2",
+          "type": "text",
+          "content": "{{stat2}}",
+          "x": 730,
+          "y": 330,
+          "fontSize": 150,
+          "fontWeight": 800,
+          "letterSpacing": -6,
+          "maxWidth": 520,
+          "maxLines": 1,
+          "minFontSize": 86,
+          "color": "#ecfdf5",
+          "animations": [
+            { "property": "opacity", "keyframes": [{ "frame": 28, "value": 0 }, { "frame": 48, "value": 1 }] },
+            { "property": "y", "keyframes": [{ "frame": 28, "value": 360 }, { "frame": 56, "value": 330, "easing": "land" }] }
+          ]
+        },
+        {
+          "id": "stat-2-label",
+          "type": "text",
+          "content": "{{stat2Label}}",
+          "x": 734,
+          "y": 520,
+          "fontSize": 32,
+          "lineHeight": 1.35,
+          "maxWidth": 460,
+          "maxLines": 2,
+          "color": "#8fb3a7",
+          "animations": [
+            { "property": "opacity", "keyframes": [{ "frame": 38, "value": 0 }, { "frame": 58, "value": 1 }] }
+          ]
+        },
+        {
+          "id": "stat-3",
+          "type": "text",
+          "content": "{{stat3}}",
+          "x": 1310,
+          "y": 330,
+          "fontSize": 150,
+          "fontWeight": 800,
+          "letterSpacing": -6,
+          "maxWidth": 520,
+          "maxLines": 1,
+          "minFontSize": 86,
+          "color": "#ecfdf5",
+          "animations": [
+            { "property": "opacity", "keyframes": [{ "frame": 42, "value": 0 }, { "frame": 62, "value": 1 }] },
+            { "property": "y", "keyframes": [{ "frame": 42, "value": 360 }, { "frame": 70, "value": 330, "easing": "land" }] }
+          ]
+        },
+        {
+          "id": "stat-3-label",
+          "type": "text",
+          "content": "{{stat3Label}}",
+          "x": 1314,
+          "y": 520,
+          "fontSize": 32,
+          "lineHeight": 1.35,
+          "maxWidth": 460,
+          "maxLines": 2,
+          "color": "#8fb3a7",
+          "animations": [
+            { "property": "opacity", "keyframes": [{ "frame": 52, "value": 0 }, { "frame": 72, "value": 1 }] }
+          ]
+        },
+        {
+          "id": "stats-rule",
+          "type": "rect",
+          "x": 150,
+          "y": 760,
+          "width": 1620,
+          "height": 2,
+          "fill": "#1d3a33"
+        }
+      ]
+    },
+    {
+      "id": "quote",
+      "name": "Quote",
+      "startFrame": 420,
+      "durationFrames": 180,
+      "transitionIn": { "type": "fade", "durationFrames": 14 },
+      "transitionOut": { "type": "fade", "durationFrames": 12 },
+      "layers": [
+        {
+          "id": "quote-glow",
+          "type": "circle",
+          "x": 240,
+          "y": 760,
+          "width": 820,
+          "fill": "{{accent}}",
+          "opacity": 0.16,
+          "blur": 100
+        },
+        {
+          "id": "quote-mark",
+          "type": "text",
+          "content": "“",
+          "x": 140,
+          "y": 120,
+          "fontSize": 260,
+          "fontWeight": 800,
+          "lineHeight": 1,
+          "color": "{{accent}}",
+          "animations": [
+            { "property": "opacity", "keyframes": [{ "frame": 0, "value": 0 }, { "frame": 24, "value": 0.9 }] }
+          ]
+        },
+        {
+          "id": "quote",
+          "type": "text",
+          "content": "{{quote}}",
+          "x": 150,
+          "y": 400,
+          "fontSize": 68,
+          "fontWeight": 600,
+          "lineHeight": 1.3,
+          "letterSpacing": -1,
+          "maxWidth": 1520,
+          "maxLines": 4,
+          "minFontSize": 44,
+          "color": "#ecfdf5",
+          "split": { "by": "lines", "preset": "rise", "stagger": 6, "duration": 24 }
+        },
+        {
+          "id": "quote-by",
+          "type": "text",
+          "content": "{{quoteBy}}",
+          "x": 150,
+          "y": 760,
+          "fontSize": 34,
+          "fontWeight": 600,
+          "maxWidth": 900,
+          "maxLines": 1,
+          "color": "{{accent}}",
+          "animations": [
+            { "property": "opacity", "keyframes": [{ "frame": 30, "value": 0 }, { "frame": 50, "value": 1 }] }
+          ]
+        },
+        {
+          "id": "cta",
+          "type": "text",
+          "content": "{{cta}} →",
+          "x": 150,
+          "y": 860,
+          "fontSize": 38,
+          "fontWeight": 700,
+          "color": "#d1fae5",
+          "animations": [
+            { "property": "opacity", "keyframes": [{ "frame": 46, "value": 0 }, { "frame": 66, "value": 1 }] }
+          ]
+        },
+        {
+          "id": "mark",
+          "type": "path",
+          "d": "M0 0 L120 0 M0 0 L0 120",
+          "x": 1650,
+          "y": 840,
+          "stroke": "{{accent}}",
+          "strokeWidth": 4,
+          "opacity": 0.7
+        }
+      ]
+    }
+  ]
+}

package/templates/case-study/template.json

@@ -0,0 +1,8 @@
+{
+  "name": "Case study",
+  "description": "A 16:9 case study in three scenes: who and what, three numbers, then a quote and a call to action.",
+  "tags": ["case study", "16:9", "business", "stats"],
+  "order": 7,
+  "previewFrame": 300,
+  "brief": "A 20-second 16:9 case study for Northlight: the client name and promise, three result numbers, then a short quote and a read-the-story call to action, in mint on deep slate."
+}

package/templates/event-invite/composition.json

@@ -0,0 +1,245 @@
+{
+  "$schema": "./composition.schema.json",
+  "version": "1.0",
+  "id": "event-invite",
+  "name": "Event invite",
+  "width": 1080,
+  "height": 1350,
+  "fps": 30,
+  "durationFrames": 360,
+  "background": {
+    "type": "linear",
+    "from": [0, 0],
+    "to": [1080, 1350],
+    "stops": [
+      { "offset": 0, "color": "#0b0a1a" },
+      { "offset": 0.6, "color": "#141233" },
+      { "offset": 1, "color": "#0a0916" }
+    ]
+  },
+  "variables": {
+    "kicker": { "type": "string", "default": "YOU'RE INVITED" },
+    "title": { "type": "string", "default": "Design\\nNight", "description": "Event name; a line break starts a new line" },
+    "date": { "type": "string", "default": "Thu 14 May · 19:00" },
+    "place": { "type": "string", "default": "The Studio, 12 Harbour Lane" },
+    "detail": { "type": "string", "default": "An evening of short talks on type, motion and the things we make. Drinks after." },
+    "cta": { "type": "string", "default": "Save your seat" },
+    "accent": { "type": "color", "default": "#a78bfa", "description": "Glow, rule and button colour" }
+  },
+  "scenes": [
+    {
+      "id": "invite",
+      "name": "Invitation",
+      "startFrame": 0,
+      "durationFrames": 240,
+      "transitionIn": { "type": "fade", "durationFrames": 12 },
+      "transitionOut": { "type": "fade", "durationFrames": 12 },
+      "layers": [
+        {
+          "id": "glow-top",
+          "type": "circle",
+          "x": 520,
+          "y": -320,
+          "width": 980,
+          "fill": "{{accent}}",
+          "opacity": 0.18,
+          "blur": 90
+        },
+        {
+          "id": "glow-bottom",
+          "type": "circle",
+          "x": -240,
+          "y": 1040,
+          "width": 720,
+          "fill": "#818cf8",
+          "opacity": 0.12,
+          "blur": 80
+        },
+        {
+          "id": "kicker",
+          "type": "text",
+          "content": "{{kicker}}",
+          "x": 92,
+          "y": 170,
+          "fontSize": 28,
+          "fontWeight": 700,
+          "letterSpacing": 9,
+          "color": "{{accent}}",
+          "animations": [
+            { "property": "opacity", "keyframes": [{ "frame": 0, "value": 0 }, { "frame": 18, "value": 1 }] }
+          ]
+        },
+        {
+          "id": "title",
+          "type": "text",
+          "content": "{{title}}",
+          "x": 88,
+          "y": 380,
+          "fontSize": 168,
+          "fontWeight": 800,
+          "lineHeight": 0.92,
+          "letterSpacing": -7,
+          "maxWidth": 920,
+          "maxLines": 3,
+          "minFontSize": 96,
+          "color": "#f5f3ff",
+          "split": { "by": "words", "preset": "rise", "stagger": 6, "duration": 28 }
+        },
+        {
+          "id": "rule",
+          "type": "rect",
+          "x": 92,
+          "y": 802,
+          "width": 240,
+          "height": 8,
+          "radius": 4,
+          "fill": "{{accent}}",
+          "animations": [
+            { "property": "width", "keyframes": [{ "frame": 20, "value": 0 }, { "frame": 50, "value": 240, "easing": "land" }] }
+          ]
+        },
+        {
+          "id": "date",
+          "type": "text",
+          "content": "{{date}}",
+          "x": 92,
+          "y": 862,
+          "fontSize": 54,
+          "fontWeight": 600,
+          "maxWidth": 880,
+          "maxLines": 1,
+          "minFontSize": 34,
+          "color": "#ede9fe",
+          "animations": [
+            { "property": "opacity", "keyframes": [{ "frame": 28, "value": 0 }, { "frame": 48, "value": 1 }] }
+          ]
+        },
+        {
+          "id": "place",
+          "type": "text",
+          "content": "{{place}}",
+          "x": 92,
+          "y": 936,
+          "fontSize": 34,
+          "maxWidth": 860,
+          "maxLines": 2,
+          "color": "#b9b1e8",
+          "animations": [
+            { "property": "opacity", "keyframes": [{ "frame": 36, "value": 0 }, { "frame": 56, "value": 1 }] }
+          ]
+        },
+        {
+          "id": "detail",
+          "type": "text",
+          "content": "{{detail}}",
+          "x": 92,
+          "y": 1050,
+          "fontSize": 32,
+          "lineHeight": 1.5,
+          "maxWidth": 820,
+          "maxLines": 4,
+          "color": "#a9a1d6",
+          "animations": [
+            { "property": "opacity", "keyframes": [{ "frame": 44, "value": 0 }, { "frame": 64, "value": 1 }] }
+          ]
+        },
+        {
+          "id": "dot",
+          "type": "circle",
+          "x": 930,
+          "y": 220,
+          "width": 54,
+          "fill": "{{accent}}",
+          "opacity": 0.9,
+          "animations": [
+            { "property": "scale", "keyframes": [{ "frame": 10, "value": 0 }, { "frame": 36, "value": 1, "easing": "easeOutBack" }] }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "cta",
+      "name": "Save your seat",
+      "startFrame": 240,
+      "durationFrames": 120,
+      "transitionIn": { "type": "zoom", "durationFrames": 16 },
+      "transitionOut": { "type": "fade", "durationFrames": 12 },
+      "layers": [
+        {
+          "id": "cta-glow",
+          "type": "circle",
+          "x": 160,
+          "y": 780,
+          "width": 760,
+          "fill": "{{accent}}",
+          "opacity": 0.2,
+          "blur": 90
+        },
+        {
+          "id": "cta-label",
+          "type": "text",
+          "content": "{{date}}",
+          "x": 540,
+          "y": 340,
+          "fontSize": 34,
+          "fontWeight": 600,
+          "textAlign": "center",
+          "letterSpacing": 2,
+          "color": "#b9b1e8"
+        },
+        {
+          "id": "cta-title",
+          "type": "text",
+          "content": "{{title}}",
+          "x": 540,
+          "y": 430,
+          "fontSize": 112,
+          "fontWeight": 800,
+          "lineHeight": 0.98,
+          "letterSpacing": -4,
+          "textAlign": "center",
+          "maxWidth": 900,
+          "maxLines": 2,
+          "minFontSize": 62,
+          "color": "#f5f3ff"
+        },
+        {
+          "id": "button",
+          "type": "rect",
+          "x": 280,
+          "y": 760,
+          "width": 520,
+          "height": 132,
+          "radius": 66,
+          "fill": "{{accent}}",
+          "animations": [
+            { "property": "scale", "keyframes": [{ "frame": 12, "value": 0.9 }, { "frame": 34, "value": 1, "easing": "easeOutBack" }] }
+          ]
+        },
+        {
+          "id": "button-text",
+          "type": "text",
+          "content": "{{cta}}",
+          "x": 540,
+          "y": 802,
+          "fontSize": 42,
+          "fontWeight": 700,
+          "textAlign": "center",
+          "color": "#160f33"
+        },
+        {
+          "id": "place-small",
+          "type": "text",
+          "content": "{{place}}",
+          "x": 540,
+          "y": 970,
+          "fontSize": 30,
+          "textAlign": "center",
+          "maxWidth": 820,
+          "maxLines": 2,
+          "color": "#b9b1e8"
+        }
+      ]
+    }
+  ]
+}

package/templates/event-invite/template.json

@@ -0,0 +1,8 @@
+{
+  "name": "Event invite",
+  "description": "A vertical invitation with the event name, date, place and a save-your-seat call to action. Two scenes, twelve seconds.",
+  "tags": ["event", "invite", "9:16", "announcement"],
+  "order": 5,
+  "previewFrame": 80,
+  "brief": "A 12-second vertical event invitation: YOU'RE INVITED, a big event title, the date and place, a short description and a save-your-seat button, in violet on deep indigo."
+}