motionrender 0.0.0-stage → 0.2.0

package/blocks/fx-extruded-title.json

@@ -0,0 +1,309 @@
+{
+  "id": "fx-extruded-title",
+  "name": "Extruded title",
+  "category": "effect",
+  "kind": "overlay",
+  "durationFrames": 150,
+  "description": "A big title with a solid 3D-looking depth made of stacked copies, that turns into place. In front of the picture, not behind the subject.",
+  "params": {
+    "title": {
+      "type": "string",
+      "default": "BUILD. COMPOSE. RENDER."
+    }
+  },
+  "layers": [
+    {
+      "id": "extrusion",
+      "type": "group",
+      "x": 0,
+      "y": "{{round(canvas.height * 0.58)}}",
+      "width": "{{canvas.width}}",
+      "height": "{{round(min(canvas.width, canvas.height) * 0.4)}}",
+      "originX": "center",
+      "originY": "center",
+      "animations": [
+        {
+          "property": "rotation",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": -6,
+              "easing": "land"
+            },
+            {
+              "frame": 26,
+              "value": 0
+            }
+          ]
+        },
+        {
+          "property": "scale",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0.6,
+              "easing": "pop"
+            },
+            {
+              "frame": 22,
+              "value": 1
+            }
+          ]
+        },
+        {
+          "property": "opacity",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0
+            },
+            {
+              "frame": 8,
+              "value": 1
+            }
+          ]
+        }
+      ],
+      "children": [
+        {
+          "id": "depth-14",
+          "type": "text",
+          "content": "{{title}}",
+          "fontSize": "{{round(min(canvas.width, canvas.height) * 0.1)}}",
+          "color": "#0f2a8a",
+          "x": "{{round(canvas.width * 0.5) + 14 * round(min(canvas.width, canvas.height) * 0.0035)}}",
+          "y": "{{14 * round(min(canvas.width, canvas.height) * 0.0035)}}",
+          "textAlign": "center",
+          "fontWeight": 900,
+          "maxWidth": "{{round(canvas.width * 0.9)}}",
+          "maxLines": 3,
+          "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.06)}}",
+          "lineHeight": 1
+        },
+        {
+          "id": "depth-13",
+          "type": "text",
+          "content": "{{title}}",
+          "fontSize": "{{round(min(canvas.width, canvas.height) * 0.1)}}",
+          "color": "#0f2a8a",
+          "x": "{{round(canvas.width * 0.5) + 13 * round(min(canvas.width, canvas.height) * 0.0035)}}",
+          "y": "{{13 * round(min(canvas.width, canvas.height) * 0.0035)}}",
+          "textAlign": "center",
+          "fontWeight": 900,
+          "maxWidth": "{{round(canvas.width * 0.9)}}",
+          "maxLines": 3,
+          "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.06)}}",
+          "lineHeight": 1
+        },
+        {
+          "id": "depth-12",
+          "type": "text",
+          "content": "{{title}}",
+          "fontSize": "{{round(min(canvas.width, canvas.height) * 0.1)}}",
+          "color": "#0f2a8a",
+          "x": "{{round(canvas.width * 0.5) + 12 * round(min(canvas.width, canvas.height) * 0.0035)}}",
+          "y": "{{12 * round(min(canvas.width, canvas.height) * 0.0035)}}",
+          "textAlign": "center",
+          "fontWeight": 900,
+          "maxWidth": "{{round(canvas.width * 0.9)}}",
+          "maxLines": 3,
+          "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.06)}}",
+          "lineHeight": 1
+        },
+        {
+          "id": "depth-11",
+          "type": "text",
+          "content": "{{title}}",
+          "fontSize": "{{round(min(canvas.width, canvas.height) * 0.1)}}",
+          "color": "#0f2a8a",
+          "x": "{{round(canvas.width * 0.5) + 11 * round(min(canvas.width, canvas.height) * 0.0035)}}",
+          "y": "{{11 * round(min(canvas.width, canvas.height) * 0.0035)}}",
+          "textAlign": "center",
+          "fontWeight": 900,
+          "maxWidth": "{{round(canvas.width * 0.9)}}",
+          "maxLines": 3,
+          "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.06)}}",
+          "lineHeight": 1
+        },
+        {
+          "id": "depth-10",
+          "type": "text",
+          "content": "{{title}}",
+          "fontSize": "{{round(min(canvas.width, canvas.height) * 0.1)}}",
+          "color": "#0f2a8a",
+          "x": "{{round(canvas.width * 0.5) + 10 * round(min(canvas.width, canvas.height) * 0.0035)}}",
+          "y": "{{10 * round(min(canvas.width, canvas.height) * 0.0035)}}",
+          "textAlign": "center",
+          "fontWeight": 900,
+          "maxWidth": "{{round(canvas.width * 0.9)}}",
+          "maxLines": 3,
+          "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.06)}}",
+          "lineHeight": 1
+        },
+        {
+          "id": "depth-9",
+          "type": "text",
+          "content": "{{title}}",
+          "fontSize": "{{round(min(canvas.width, canvas.height) * 0.1)}}",
+          "color": "#0f2a8a",
+          "x": "{{round(canvas.width * 0.5) + 9 * round(min(canvas.width, canvas.height) * 0.0035)}}",
+          "y": "{{9 * round(min(canvas.width, canvas.height) * 0.0035)}}",
+          "textAlign": "center",
+          "fontWeight": 900,
+          "maxWidth": "{{round(canvas.width * 0.9)}}",
+          "maxLines": 3,
+          "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.06)}}",
+          "lineHeight": 1
+        },
+        {
+          "id": "depth-8",
+          "type": "text",
+          "content": "{{title}}",
+          "fontSize": "{{round(min(canvas.width, canvas.height) * 0.1)}}",
+          "color": "#0f2a8a",
+          "x": "{{round(canvas.width * 0.5) + 8 * round(min(canvas.width, canvas.height) * 0.0035)}}",
+          "y": "{{8 * round(min(canvas.width, canvas.height) * 0.0035)}}",
+          "textAlign": "center",
+          "fontWeight": 900,
+          "maxWidth": "{{round(canvas.width * 0.9)}}",
+          "maxLines": 3,
+          "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.06)}}",
+          "lineHeight": 1
+        },
+        {
+          "id": "depth-7",
+          "type": "text",
+          "content": "{{title}}",
+          "fontSize": "{{round(min(canvas.width, canvas.height) * 0.1)}}",
+          "color": "#1740d6",
+          "x": "{{round(canvas.width * 0.5) + 7 * round(min(canvas.width, canvas.height) * 0.0035)}}",
+          "y": "{{7 * round(min(canvas.width, canvas.height) * 0.0035)}}",
+          "textAlign": "center",
+          "fontWeight": 900,
+          "maxWidth": "{{round(canvas.width * 0.9)}}",
+          "maxLines": 3,
+          "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.06)}}",
+          "lineHeight": 1
+        },
+        {
+          "id": "depth-6",
+          "type": "text",
+          "content": "{{title}}",
+          "fontSize": "{{round(min(canvas.width, canvas.height) * 0.1)}}",
+          "color": "#1740d6",
+          "x": "{{round(canvas.width * 0.5) + 6 * round(min(canvas.width, canvas.height) * 0.0035)}}",
+          "y": "{{6 * round(min(canvas.width, canvas.height) * 0.0035)}}",
+          "textAlign": "center",
+          "fontWeight": 900,
+          "maxWidth": "{{round(canvas.width * 0.9)}}",
+          "maxLines": 3,
+          "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.06)}}",
+          "lineHeight": 1
+        },
+        {
+          "id": "depth-5",
+          "type": "text",
+          "content": "{{title}}",
+          "fontSize": "{{round(min(canvas.width, canvas.height) * 0.1)}}",
+          "color": "#1740d6",
+          "x": "{{round(canvas.width * 0.5) + 5 * round(min(canvas.width, canvas.height) * 0.0035)}}",
+          "y": "{{5 * round(min(canvas.width, canvas.height) * 0.0035)}}",
+          "textAlign": "center",
+          "fontWeight": 900,
+          "maxWidth": "{{round(canvas.width * 0.9)}}",
+          "maxLines": 3,
+          "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.06)}}",
+          "lineHeight": 1
+        },
+        {
+          "id": "depth-4",
+          "type": "text",
+          "content": "{{title}}",
+          "fontSize": "{{round(min(canvas.width, canvas.height) * 0.1)}}",
+          "color": "#1740d6",
+          "x": "{{round(canvas.width * 0.5) + 4 * round(min(canvas.width, canvas.height) * 0.0035)}}",
+          "y": "{{4 * round(min(canvas.width, canvas.height) * 0.0035)}}",
+          "textAlign": "center",
+          "fontWeight": 900,
+          "maxWidth": "{{round(canvas.width * 0.9)}}",
+          "maxLines": 3,
+          "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.06)}}",
+          "lineHeight": 1
+        },
+        {
+          "id": "depth-3",
+          "type": "text",
+          "content": "{{title}}",
+          "fontSize": "{{round(min(canvas.width, canvas.height) * 0.1)}}",
+          "color": "#1740d6",
+          "x": "{{round(canvas.width * 0.5) + 3 * round(min(canvas.width, canvas.height) * 0.0035)}}",
+          "y": "{{3 * round(min(canvas.width, canvas.height) * 0.0035)}}",
+          "textAlign": "center",
+          "fontWeight": 900,
+          "maxWidth": "{{round(canvas.width * 0.9)}}",
+          "maxLines": 3,
+          "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.06)}}",
+          "lineHeight": 1
+        },
+        {
+          "id": "depth-2",
+          "type": "text",
+          "content": "{{title}}",
+          "fontSize": "{{round(min(canvas.width, canvas.height) * 0.1)}}",
+          "color": "#1740d6",
+          "x": "{{round(canvas.width * 0.5) + 2 * round(min(canvas.width, canvas.height) * 0.0035)}}",
+          "y": "{{2 * round(min(canvas.width, canvas.height) * 0.0035)}}",
+          "textAlign": "center",
+          "fontWeight": 900,
+          "maxWidth": "{{round(canvas.width * 0.9)}}",
+          "maxLines": 3,
+          "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.06)}}",
+          "lineHeight": 1
+        },
+        {
+          "id": "depth-1",
+          "type": "text",
+          "content": "{{title}}",
+          "fontSize": "{{round(min(canvas.width, canvas.height) * 0.1)}}",
+          "color": "#1740d6",
+          "x": "{{round(canvas.width * 0.5) + 1 * round(min(canvas.width, canvas.height) * 0.0035)}}",
+          "y": "{{1 * round(min(canvas.width, canvas.height) * 0.0035)}}",
+          "textAlign": "center",
+          "fontWeight": 900,
+          "maxWidth": "{{round(canvas.width * 0.9)}}",
+          "maxLines": 3,
+          "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.06)}}",
+          "lineHeight": 1
+        },
+        {
+          "id": "front",
+          "type": "text",
+          "content": "{{title}}",
+          "fontSize": "{{round(min(canvas.width, canvas.height) * 0.1)}}",
+          "color": "#ffffff",
+          "x": "{{round(canvas.width * 0.5)}}",
+          "y": 0,
+          "textAlign": "center",
+          "fontWeight": 900,
+          "maxWidth": "{{round(canvas.width * 0.9)}}",
+          "maxLines": 3,
+          "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.06)}}",
+          "lineHeight": 1,
+          "shadow": {
+            "color": "#00000099",
+            "blur": 24,
+            "offsetX": 0,
+            "offsetY": 18
+          }
+        }
+      ]
+    },
+    {
+      "id": "sfx-1",
+      "type": "audio",
+      "src": "sfx:thump",
+      "startFrame": 6,
+      "volume": 0.45
+    }
+  ]
+}

package/blocks/fx-gallery.json

@@ -0,0 +1,239 @@
+{
+  "id": "fx-gallery",
+  "name": "Effects gallery",
+  "category": "effect",
+  "kind": "scene",
+  "durationFrames": 180,
+  "transition": {
+    "type": "fade",
+    "durationFrames": 12
+  },
+  "description": "A numbered 4 by 3 grid of twelve labelled tiles that appear one after another; the tiles are placeholders for previews.",
+  "params": {
+    "title": {
+      "type": "string",
+      "default": "THE EFFECT LIBRARY"
+    },
+    "tiles": {
+      "type": "list",
+      "items": {
+        "label": {
+          "type": "string",
+          "default": ""
+        }
+      },
+      "default": [
+        {
+          "label": "Glass cards"
+        },
+        {
+          "label": "Duo title"
+        },
+        {
+          "label": "Icon orbit"
+        },
+        {
+          "label": "Stats split"
+        },
+        {
+          "label": "Spotlight"
+        },
+        {
+          "label": "Checklist"
+        },
+        {
+          "label": "Timeline"
+        },
+        {
+          "label": "Command bridge"
+        },
+        {
+          "label": "Captions"
+        },
+        {
+          "label": "Highlighter"
+        },
+        {
+          "label": "Glitch title"
+        },
+        {
+          "label": "Light leak"
+        }
+      ]
+    }
+  },
+  "layers": [
+    {
+      "id": "bg",
+      "type": "rect",
+      "x": 0,
+      "y": 0,
+      "width": "{{canvas.width}}",
+      "height": "{{canvas.height}}",
+      "fill": "{{bg}}"
+    },
+    {
+      "id": "glow-0",
+      "type": "circle",
+      "x": "{{round(canvas.width * 0.2)}}",
+      "y": "{{round(canvas.height * 0.5)}}",
+      "width": "{{round(min(canvas.width, canvas.height) * 1.1)}}",
+      "fill": "{{accent}}",
+      "opacity": 0.12,
+      "blur": 140
+    },
+    {
+      "id": "glow-1",
+      "type": "circle",
+      "x": "{{round(canvas.width * 0.8)}}",
+      "y": "{{round(canvas.height * 0.5)}}",
+      "width": "{{round(min(canvas.width, canvas.height) * 1.1)}}",
+      "fill": "{{accent2}}",
+      "opacity": 0.12,
+      "blur": 140
+    },
+    {
+      "id": "title",
+      "type": "text",
+      "content": "{{title}}",
+      "fontSize": "{{round(min(canvas.width, canvas.height) * 0.055)}}",
+      "color": "#ffffff",
+      "x": "{{round(canvas.width * 0.5)}}",
+      "y": "{{round(canvas.height * 0.05)}}",
+      "textAlign": "center",
+      "fontWeight": 900,
+      "maxWidth": "{{round(canvas.width * 0.9)}}",
+      "maxLines": 1,
+      "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.03)}}",
+      "startFrame": 0,
+      "animations": [
+        {
+          "property": "opacity",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0
+            },
+            {
+              "frame": 14,
+              "value": 1,
+              "easing": "glide"
+            }
+          ]
+        },
+        {
+          "property": "y",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": "{{round(canvas.height * 0.05) + 20}}",
+              "easing": "land"
+            },
+            {
+              "frame": 18,
+              "value": "{{round(canvas.height * 0.05)}}"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "repeat": "{{tiles}}",
+      "as": "t",
+      "each": [
+        {
+          "id": "tile-{{index}}",
+          "type": "group",
+          "x": "{{round(canvas.width * 0.06) + (index % 4) * round(canvas.width * 0.2275)}}",
+          "y": "{{round(canvas.height * 0.16) + floor(index / 4) * round(canvas.height * 0.265)}}",
+          "width": "{{round(canvas.width * 0.2)}}",
+          "height": "{{round(canvas.height * 0.235)}}",
+          "startFrame": "{{10 + index * 6}}",
+          "originX": "center",
+          "originY": "center",
+          "animations": [
+            {
+              "property": "opacity",
+              "keyframes": [
+                {
+                  "frame": 0,
+                  "value": 0
+                },
+                {
+                  "frame": 10,
+                  "value": 1
+                }
+              ]
+            },
+            {
+              "property": "scale",
+              "keyframes": [
+                {
+                  "frame": 0,
+                  "value": 0.8,
+                  "easing": "pop"
+                },
+                {
+                  "frame": 16,
+                  "value": 1
+                }
+              ]
+            }
+          ],
+          "children": [
+            {
+              "id": "tile-bg",
+              "type": "rect",
+              "x": 0,
+              "y": 0,
+              "width": "{{round(canvas.width * 0.2)}}",
+              "height": "{{round(canvas.height * 0.235)}}",
+              "radius": "{{round(min(canvas.width, canvas.height) * 0.02)}}",
+              "fill": "rgba(255,255,255,0.1)",
+              "stroke": "rgba(255,255,255,0.3)",
+              "strokeWidth": 2
+            },
+            {
+              "id": "num",
+              "type": "text",
+              "content": "{{string(index + 1)}}",
+              "fontSize": "{{round(min(canvas.width, canvas.height) * 0.06)}}",
+              "color": "{{accent2}}",
+              "x": "{{round(canvas.width * 0.1)}}",
+              "y": "{{round(canvas.height * 0.235) * 0.2}}",
+              "textAlign": "center",
+              "fontWeight": 900
+            },
+            {
+              "id": "lab",
+              "type": "text",
+              "content": "{{t.label}}",
+              "fontSize": "{{round(min(canvas.width, canvas.height) * 0.022)}}",
+              "color": "#ffffff",
+              "x": "{{round(canvas.width * 0.1)}}",
+              "y": "{{round(canvas.height * 0.235) * 0.64}}",
+              "textAlign": "center",
+              "fontWeight": 700,
+              "maxWidth": "{{round(canvas.width * 0.18)}}",
+              "maxLines": 2,
+              "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.014)}}"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "repeat": "{{tiles}}",
+      "as": "u",
+      "each": [
+        {
+          "id": "sfx-{{index}}",
+          "type": "audio",
+          "src": "sfx:tick",
+          "startFrame": "{{10 + index * 6}}",
+          "volume": 0.2
+        }
+      ]
+    }
+  ]
+}