motionrender 0.0.0-stage → 0.2.1

package/templates/product-wide/template.json

@@ -0,0 +1,14 @@
+{
+  "name": "Product showcase (16:9)",
+  "description": "A 16:9 app or product showcase: a phone with your screenshot, three feature icons, a split picture-and-message scene and a call to action. Takes pictures and a theme.",
+  "tags": [
+    "product",
+    "16:9",
+    "app",
+    "pictures",
+    "themed"
+  ],
+  "order": 24,
+  "previewFrame": 157,
+  "brief": "A landscape app or product showcase with a screenshot, three benefits, one story scene and a call to action."
+}

package/templates/quote-card/composition.json

@@ -0,0 +1,123 @@
+{
+  "$schema": "./composition.schema.json",
+  "version": "1.0",
+  "id": "quote-card",
+  "name": "Quote card",
+  "width": 1080,
+  "height": 1080,
+  "fps": 30,
+  "durationFrames": 270,
+  "background": {
+    "type": "linear",
+    "from": [0, 0],
+    "to": [1080, 1080],
+    "stops": [
+      { "offset": 0, "color": "#0c1a17" },
+      { "offset": 1, "color": "#132821" }
+    ]
+  },
+  "variables": {
+    "quote": { "type": "string", "default": "The best videos are not written in a single take. They are built one honest frame at a time." },
+    "author": { "type": "string", "default": "Mira Chen" },
+    "role": { "type": "string", "default": "Creative director, Northlight" },
+    "accent": { "type": "color", "default": "#f4d58d", "description": "Quotation mark, rule and role colour" }
+  },
+  "scenes": [
+    {
+      "id": "quote",
+      "name": "Quote",
+      "startFrame": 0,
+      "durationFrames": 270,
+      "transitionIn": { "type": "fade", "durationFrames": 12 },
+      "transitionOut": { "type": "fade", "durationFrames": 12 },
+      "layers": [
+        {
+          "id": "glow",
+          "type": "circle",
+          "x": 660,
+          "y": -260,
+          "width": 820,
+          "fill": "{{accent}}",
+          "opacity": 0.1,
+          "blur": 90,
+          "animations": [
+            { "property": "x", "keyframes": [{ "frame": 0, "value": 700 }, { "frame": 270, "value": 540, "easing": "drift" }] }
+          ]
+        },
+        {
+          "id": "mark",
+          "type": "text",
+          "content": "“",
+          "x": 92,
+          "y": 52,
+          "fontSize": 300,
+          "fontWeight": 800,
+          "lineHeight": 1,
+          "color": "{{accent}}",
+          "animations": [
+            { "property": "opacity", "keyframes": [{ "frame": 0, "value": 0 }, { "frame": 20, "value": 0.95 }] },
+            { "property": "scale", "keyframes": [{ "frame": 0, "value": 0.8 }, { "frame": 26, "value": 1, "easing": "easeOutBack" }] }
+          ]
+        },
+        {
+          "id": "quote",
+          "type": "text",
+          "content": "{{quote}}",
+          "x": 96,
+          "y": 330,
+          "fontSize": 66,
+          "fontWeight": 600,
+          "lineHeight": 1.32,
+          "letterSpacing": -1,
+          "maxWidth": 888,
+          "maxLines": 6,
+          "minFontSize": 44,
+          "color": "#f4f7f2",
+          "split": { "by": "lines", "preset": "rise", "stagger": 7, "duration": 26 }
+        },
+        {
+          "id": "rule",
+          "type": "rect",
+          "x": 96,
+          "y": 840,
+          "width": 120,
+          "height": 6,
+          "radius": 3,
+          "fill": "{{accent}}",
+          "animations": [
+            { "property": "width", "keyframes": [{ "frame": 26, "value": 0 }, { "frame": 52, "value": 120, "easing": "land" }] }
+          ]
+        },
+        {
+          "id": "author",
+          "type": "text",
+          "content": "{{author}}",
+          "x": 96,
+          "y": 892,
+          "fontSize": 38,
+          "fontWeight": 700,
+          "maxWidth": 760,
+          "maxLines": 1,
+          "color": "#f4f7f2",
+          "animations": [
+            { "property": "opacity", "keyframes": [{ "frame": 34, "value": 0 }, { "frame": 54, "value": 1 }] }
+          ]
+        },
+        {
+          "id": "role",
+          "type": "text",
+          "content": "{{role}}",
+          "x": 96,
+          "y": 948,
+          "fontSize": 28,
+          "maxWidth": 820,
+          "maxLines": 1,
+          "color": "{{accent}}",
+          "animations": [
+            { "property": "opacity", "keyframes": [{ "frame": 42, "value": 0 }, { "frame": 60, "value": 1 }] }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/templates/quote-card/template.json

@@ -0,0 +1,8 @@
+{
+  "name": "Quote card",
+  "description": "A square quote card with a large quotation mark, the quote, and the speaker's name and role. Calm and typographic.",
+  "tags": ["quote", "1:1", "social", "testimonial"],
+  "order": 4,
+  "previewFrame": 135,
+  "brief": "A 9-second square quote card: a large quotation mark, a short memorable quote, and the author's name and role, in warm cream and ink on deep green."
+}

package/templates/sale-promo/composition.json

@@ -0,0 +1,290 @@
+{
+  "$schema": "./composition.schema.json",
+  "version": "1.0",
+  "id": "sale-promo",
+  "name": "Sale promo",
+  "width": 1080,
+  "height": 1350,
+  "fps": 30,
+  "durationFrames": 450,
+  "background": {
+    "type": "linear",
+    "from": [0, 0],
+    "to": [1080, 1350],
+    "stops": [
+      { "offset": 0, "color": "#160709" },
+      { "offset": 0.55, "color": "#1f0a0d" },
+      { "offset": 1, "color": "#0d0507" }
+    ]
+  },
+  "variables": {
+    "kicker": { "type": "string", "default": "FLASH SALE", "description": "Small label above the discount" },
+    "discount": { "type": "string", "default": "30% OFF", "description": "The headline number" },
+    "title": { "type": "string", "default": "Everything\\nmust go", "description": "Promise under the discount; a line break starts a new line" },
+    "detail": { "type": "string", "default": "This weekend only. Add the code at checkout and the discount is yours." },
+    "code": { "type": "string", "default": "TAKE30", "description": "Code shown in the dashed box" },
+    "cta": { "type": "string", "default": "Shop now" },
+    "accent": { "type": "color", "default": "#fb7185", "description": "Glow, rule and button colour" }
+  },
+  "scenes": [
+    {
+      "id": "offer",
+      "name": "The offer",
+      "startFrame": 0,
+      "durationFrames": 210,
+      "transitionIn": { "type": "fade", "durationFrames": 10 },
+      "transitionOut": { "type": "fade", "durationFrames": 10 },
+      "layers": [
+        {
+          "id": "glow",
+          "type": "circle",
+          "x": 120,
+          "y": -280,
+          "width": 1100,
+          "fill": "{{accent}}",
+          "opacity": 0.2,
+          "blur": 90,
+          "animations": [
+            { "property": "x", "keyframes": [{ "frame": 0, "value": 160 }, { "frame": 210, "value": 40, "easing": "drift" }] }
+          ]
+        },
+        {
+          "id": "kicker",
+          "type": "text",
+          "content": "{{kicker}}",
+          "x": 96,
+          "y": 170,
+          "fontSize": 30,
+          "fontWeight": 700,
+          "letterSpacing": 9,
+          "color": "{{accent}}",
+          "animations": [
+            { "property": "opacity", "keyframes": [{ "frame": 0, "value": 0 }, { "frame": 16, "value": 1 }] }
+          ]
+        },
+        {
+          "id": "discount",
+          "type": "text",
+          "content": "{{discount}}",
+          "x": 90,
+          "y": 300,
+          "fontSize": 190,
+          "fontWeight": 800,
+          "letterSpacing": -8,
+          "maxWidth": 900,
+          "maxLines": 2,
+          "minFontSize": 100,
+          "color": "#fff1f2",
+          "split": { "by": "words", "preset": "pop", "stagger": 4, "duration": 26 }
+        },
+        {
+          "id": "rule",
+          "type": "rect",
+          "x": 96,
+          "y": 640,
+          "width": 240,
+          "height": 10,
+          "radius": 5,
+          "fill": "{{accent}}",
+          "animations": [
+            { "property": "width", "keyframes": [{ "frame": 18, "value": 0 }, { "frame": 46, "value": 240, "easing": "land" }] }
+          ]
+        },
+        {
+          "id": "title",
+          "type": "text",
+          "content": "{{title}}",
+          "x": 92,
+          "y": 740,
+          "fontSize": 132,
+          "fontWeight": 800,
+          "lineHeight": 0.98,
+          "letterSpacing": -5,
+          "maxWidth": 900,
+          "maxLines": 3,
+          "minFontSize": 78,
+          "color": "#ffe4e6",
+          "animations": [
+            { "property": "opacity", "keyframes": [{ "frame": 20, "value": 0 }, { "frame": 42, "value": 1 }] },
+            { "property": "y", "keyframes": [{ "frame": 20, "value": 772 }, { "frame": 48, "value": 740, "easing": "land" }] }
+          ]
+        },
+        {
+          "id": "detail",
+          "type": "text",
+          "content": "{{detail}}",
+          "x": 94,
+          "y": 1040,
+          "fontSize": 36,
+          "lineHeight": 1.45,
+          "maxWidth": 800,
+          "maxLines": 4,
+          "color": "#d8aab2",
+          "animations": [
+            { "property": "opacity", "keyframes": [{ "frame": 32, "value": 0 }, { "frame": 54, "value": 1 }] }
+          ]
+        },
+        {
+          "id": "corner",
+          "type": "path",
+          "d": "M0 0 L140 0 M0 0 L0 140",
+          "x": 900,
+          "y": 1160,
+          "stroke": "{{accent}}",
+          "strokeWidth": 4,
+          "opacity": 0.6
+        }
+      ]
+    },
+    {
+      "id": "code",
+      "name": "The code",
+      "startFrame": 210,
+      "durationFrames": 150,
+      "transitionIn": { "type": "slide", "direction": "bottom", "durationFrames": 16 },
+      "transitionOut": { "type": "fade", "durationFrames": 10 },
+      "layers": [
+        {
+          "id": "code-glow",
+          "type": "circle",
+          "x": 140,
+          "y": 760,
+          "width": 860,
+          "fill": "{{accent}}",
+          "opacity": 0.16,
+          "blur": 80
+        },
+        {
+          "id": "code-label",
+          "type": "text",
+          "content": "USE THE CODE",
+          "x": 540,
+          "y": 360,
+          "fontSize": 30,
+          "fontWeight": 700,
+          "letterSpacing": 8,
+          "textAlign": "center",
+          "color": "#d8aab2"
+        },
+        {
+          "id": "code-box",
+          "type": "rect",
+          "x": 170,
+          "y": 470,
+          "width": 740,
+          "height": 240,
+          "radius": 24,
+          "fill": "#1a0a0d",
+          "stroke": "{{accent}}",
+          "strokeWidth": 4,
+          "strokeDash": [26, 18],
+          "animations": [
+            { "property": "scale", "keyframes": [{ "frame": 12, "value": 0.92 }, { "frame": 34, "value": 1, "easing": "easeOutBack" }] }
+          ]
+        },
+        {
+          "id": "code",
+          "type": "text",
+          "content": "{{code}}",
+          "x": 540,
+          "y": 542,
+          "fontSize": 116,
+          "fontWeight": 800,
+          "letterSpacing": 10,
+          "textAlign": "center",
+          "maxWidth": 700,
+          "maxLines": 1,
+          "minFontSize": 56,
+          "color": "#fff1f2",
+          "animations": [
+            { "property": "opacity", "keyframes": [{ "frame": 20, "value": 0 }, { "frame": 38, "value": 1 }] }
+          ]
+        },
+        {
+          "id": "code-detail",
+          "type": "text",
+          "content": "{{detail}}",
+          "x": 540,
+          "y": 810,
+          "fontSize": 34,
+          "lineHeight": 1.5,
+          "textAlign": "center",
+          "maxWidth": 760,
+          "maxLines": 4,
+          "color": "#d8aab2"
+        }
+      ]
+    },
+    {
+      "id": "cta",
+      "name": "Call to action",
+      "startFrame": 360,
+      "durationFrames": 90,
+      "transitionIn": { "type": "fade", "durationFrames": 12 },
+      "transitionOut": { "type": "fade", "durationFrames": 10 },
+      "layers": [
+        {
+          "id": "cta-glow",
+          "type": "circle",
+          "x": 190,
+          "y": 700,
+          "width": 700,
+          "fill": "{{accent}}",
+          "opacity": 0.22,
+          "blur": 80
+        },
+        {
+          "id": "cta-title",
+          "type": "text",
+          "content": "{{title}}",
+          "x": 540,
+          "y": 430,
+          "fontSize": 96,
+          "fontWeight": 800,
+          "lineHeight": 1,
+          "letterSpacing": -3,
+          "textAlign": "center",
+          "maxWidth": 880,
+          "maxLines": 2,
+          "minFontSize": 56,
+          "color": "#fff1f2"
+        },
+        {
+          "id": "cta-button",
+          "type": "rect",
+          "x": 290,
+          "y": 740,
+          "width": 500,
+          "height": 132,
+          "radius": 66,
+          "fill": "{{accent}}",
+          "animations": [
+            { "property": "scale", "keyframes": [{ "frame": 10, "value": 0.9 }, { "frame": 30, "value": 1, "easing": "easeOutBack" }] }
+          ]
+        },
+        {
+          "id": "cta-text",
+          "type": "text",
+          "content": "{{cta}}",
+          "x": 540,
+          "y": 782,
+          "fontSize": 44,
+          "fontWeight": 700,
+          "textAlign": "center",
+          "color": "#2b080d"
+        },
+        {
+          "id": "cta-code",
+          "type": "text",
+          "content": "Code {{code}}",
+          "x": 540,
+          "y": 950,
+          "fontSize": 30,
+          "textAlign": "center",
+          "letterSpacing": 2,
+          "color": "#d8aab2"
+        }
+      ]
+    }
+  ]
+}

package/templates/sale-promo/template.json

@@ -0,0 +1,8 @@
+{
+  "name": "Sale promo",
+  "description": "A 4:5 flash-sale promo: a bold discount, the product promise, a promo code and a call to action.",
+  "tags": ["sale", "promo", "4:5", "ecommerce"],
+  "order": 3,
+  "previewFrame": 90,
+  "brief": "A 15-second 4:5 flash-sale promo: a bold 30% OFF, the promise that everything must go, a promo code box and a shop-now call to action, in warm reds on a near-black background."
+}