motionrender 0.0.0-stage → 0.2.0

package/blocks/fx-notifications.json

@@ -0,0 +1,456 @@
+{
+  "id": "fx-notifications",
+  "name": "Notification stack",
+  "category": "effect",
+  "kind": "overlay",
+  "durationFrames": 180,
+  "description": "Three notification cards drop in from the top of the frame one after another, each pushing the earlier ones down into a stack.",
+  "params": {
+    "title1": {
+      "type": "string",
+      "default": "Composition created"
+    },
+    "body1": {
+      "type": "string",
+      "default": "Four scenes, 30 seconds"
+    },
+    "title2": {
+      "type": "string",
+      "default": "Schema validated"
+    },
+    "body2": {
+      "type": "string",
+      "default": "No errors found"
+    },
+    "title3": {
+      "type": "string",
+      "default": "Video exported"
+    },
+    "body3": {
+      "type": "string",
+      "default": "out.mp4 is ready"
+    }
+  },
+  "layers": [
+    {
+      "id": "note-1",
+      "type": "group",
+      "x": "{{round(canvas.width * 0.06)}}",
+      "y": "{{round(canvas.height * 0.05)}}",
+      "width": "{{round(canvas.width * 0.62)}}",
+      "height": "{{round(min(canvas.width, canvas.height) * 0.135)}}",
+      "animations": [
+        {
+          "property": "y",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": "{{-round(min(canvas.width, canvas.height) * 0.2)}}"
+            },
+            {
+              "frame": 2,
+              "value": "{{-round(min(canvas.width, canvas.height) * 0.2)}}",
+              "easing": "land"
+            },
+            {
+              "frame": 16,
+              "value": "{{round(canvas.height * 0.05) + 0 * round(min(canvas.width, canvas.height) * 0.155)}}",
+              "easing": "land"
+            },
+            {
+              "frame": 55,
+              "value": "{{round(canvas.height * 0.05) + 0 * round(min(canvas.width, canvas.height) * 0.155)}}",
+              "easing": "land"
+            },
+            {
+              "frame": 68,
+              "value": "{{round(canvas.height * 0.05) + 1 * round(min(canvas.width, canvas.height) * 0.155)}}",
+              "easing": "land"
+            },
+            {
+              "frame": 95,
+              "value": "{{round(canvas.height * 0.05) + 1 * round(min(canvas.width, canvas.height) * 0.155)}}",
+              "easing": "land"
+            },
+            {
+              "frame": 108,
+              "value": "{{round(canvas.height * 0.05) + 2 * round(min(canvas.width, canvas.height) * 0.155)}}",
+              "easing": "land"
+            }
+          ]
+        },
+        {
+          "property": "opacity",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0
+            },
+            {
+              "frame": 2,
+              "value": 0
+            },
+            {
+              "frame": 12,
+              "value": 1
+            }
+          ]
+        }
+      ],
+      "children": [
+        {
+          "id": "note-1-bg",
+          "type": "rect",
+          "x": 0,
+          "y": 0,
+          "width": "{{round(canvas.width * 0.62)}}",
+          "height": "{{round(min(canvas.width, canvas.height) * 0.135)}}",
+          "radius": "{{round(min(canvas.width, canvas.height) * 0.03)}}",
+          "fill": "rgba(255,255,255,0.13)",
+          "stroke": "rgba(255,255,255,0.38)",
+          "strokeWidth": 2,
+          "shadow": {
+            "color": "#00000066",
+            "blur": 28,
+            "offsetX": 0,
+            "offsetY": 10
+          }
+        },
+        {
+          "id": "note-1-shine",
+          "type": "rect",
+          "x": "{{round(min(canvas.width, canvas.height) * 0.014)}}",
+          "y": 3,
+          "width": "{{round(canvas.width * 0.62) - round(min(canvas.width, canvas.height) * 0.028)}}",
+          "height": 3,
+          "radius": 2,
+          "fill": "rgba(255,255,255,0.45)"
+        },
+        {
+          "id": "icon-disc",
+          "type": "circle",
+          "x": "{{round(min(canvas.width, canvas.height) * 0.055)}}",
+          "y": "{{round(min(canvas.width, canvas.height) * 0.0675)}}",
+          "width": "{{round(min(canvas.width, canvas.height) * 0.07)}}",
+          "fill": "{{accent}}"
+        },
+        {
+          "id": "icon",
+          "type": "path",
+          "d": "M5 12.5 L10 17.5 L19 7",
+          "width": 24,
+          "height": 24,
+          "scale": "{{min(canvas.width, canvas.height) * 0.034 / 24}}",
+          "stroke": "#ffffff",
+          "strokeWidth": 3,
+          "lineCap": "round",
+          "lineJoin": "round",
+          "x": "{{round(min(canvas.width, canvas.height) * 0.038)}}",
+          "y": "{{round(min(canvas.width, canvas.height) * 0.0505)}}"
+        },
+        {
+          "id": "t",
+          "type": "text",
+          "content": "{{title1}}",
+          "fontSize": "{{round(min(canvas.width, canvas.height) * 0.03)}}",
+          "color": "#ffffff",
+          "x": "{{round(min(canvas.width, canvas.height) * 0.105)}}",
+          "y": "{{round(min(canvas.width, canvas.height) * 0.028)}}",
+          "fontWeight": 700,
+          "maxWidth": "{{round(canvas.width * 0.46)}}",
+          "maxLines": 1,
+          "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.02)}}"
+        },
+        {
+          "id": "b",
+          "type": "text",
+          "content": "{{body1}}",
+          "fontSize": "{{round(min(canvas.width, canvas.height) * 0.026)}}",
+          "color": "{{muted}}",
+          "x": "{{round(min(canvas.width, canvas.height) * 0.105)}}",
+          "y": "{{round(min(canvas.width, canvas.height) * 0.07)}}",
+          "maxWidth": "{{round(canvas.width * 0.46)}}",
+          "maxLines": 1,
+          "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.018)}}"
+        }
+      ]
+    },
+    {
+      "id": "note-2",
+      "type": "group",
+      "x": "{{round(canvas.width * 0.06)}}",
+      "y": "{{round(canvas.height * 0.05)}}",
+      "width": "{{round(canvas.width * 0.62)}}",
+      "height": "{{round(min(canvas.width, canvas.height) * 0.135)}}",
+      "animations": [
+        {
+          "property": "y",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": "{{-round(min(canvas.width, canvas.height) * 0.2)}}"
+            },
+            {
+              "frame": 42,
+              "value": "{{-round(min(canvas.width, canvas.height) * 0.2)}}",
+              "easing": "land"
+            },
+            {
+              "frame": 56,
+              "value": "{{round(canvas.height * 0.05) + 0 * round(min(canvas.width, canvas.height) * 0.155)}}",
+              "easing": "land"
+            },
+            {
+              "frame": 95,
+              "value": "{{round(canvas.height * 0.05) + 0 * round(min(canvas.width, canvas.height) * 0.155)}}",
+              "easing": "land"
+            },
+            {
+              "frame": 108,
+              "value": "{{round(canvas.height * 0.05) + 1 * round(min(canvas.width, canvas.height) * 0.155)}}",
+              "easing": "land"
+            }
+          ]
+        },
+        {
+          "property": "opacity",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0
+            },
+            {
+              "frame": 42,
+              "value": 0
+            },
+            {
+              "frame": 52,
+              "value": 1
+            }
+          ]
+        }
+      ],
+      "children": [
+        {
+          "id": "note-2-bg",
+          "type": "rect",
+          "x": 0,
+          "y": 0,
+          "width": "{{round(canvas.width * 0.62)}}",
+          "height": "{{round(min(canvas.width, canvas.height) * 0.135)}}",
+          "radius": "{{round(min(canvas.width, canvas.height) * 0.03)}}",
+          "fill": "rgba(255,255,255,0.13)",
+          "stroke": "rgba(255,255,255,0.38)",
+          "strokeWidth": 2,
+          "shadow": {
+            "color": "#00000066",
+            "blur": 28,
+            "offsetX": 0,
+            "offsetY": 10
+          }
+        },
+        {
+          "id": "note-2-shine",
+          "type": "rect",
+          "x": "{{round(min(canvas.width, canvas.height) * 0.014)}}",
+          "y": 3,
+          "width": "{{round(canvas.width * 0.62) - round(min(canvas.width, canvas.height) * 0.028)}}",
+          "height": 3,
+          "radius": 2,
+          "fill": "rgba(255,255,255,0.45)"
+        },
+        {
+          "id": "icon-disc",
+          "type": "circle",
+          "x": "{{round(min(canvas.width, canvas.height) * 0.055)}}",
+          "y": "{{round(min(canvas.width, canvas.height) * 0.0675)}}",
+          "width": "{{round(min(canvas.width, canvas.height) * 0.07)}}",
+          "fill": "{{accent}}"
+        },
+        {
+          "id": "icon",
+          "type": "path",
+          "d": "M5 12.5 L10 17.5 L19 7",
+          "width": 24,
+          "height": 24,
+          "scale": "{{min(canvas.width, canvas.height) * 0.034 / 24}}",
+          "stroke": "#ffffff",
+          "strokeWidth": 3,
+          "lineCap": "round",
+          "lineJoin": "round",
+          "x": "{{round(min(canvas.width, canvas.height) * 0.038)}}",
+          "y": "{{round(min(canvas.width, canvas.height) * 0.0505)}}"
+        },
+        {
+          "id": "t",
+          "type": "text",
+          "content": "{{title2}}",
+          "fontSize": "{{round(min(canvas.width, canvas.height) * 0.03)}}",
+          "color": "#ffffff",
+          "x": "{{round(min(canvas.width, canvas.height) * 0.105)}}",
+          "y": "{{round(min(canvas.width, canvas.height) * 0.028)}}",
+          "fontWeight": 700,
+          "maxWidth": "{{round(canvas.width * 0.46)}}",
+          "maxLines": 1,
+          "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.02)}}"
+        },
+        {
+          "id": "b",
+          "type": "text",
+          "content": "{{body2}}",
+          "fontSize": "{{round(min(canvas.width, canvas.height) * 0.026)}}",
+          "color": "{{muted}}",
+          "x": "{{round(min(canvas.width, canvas.height) * 0.105)}}",
+          "y": "{{round(min(canvas.width, canvas.height) * 0.07)}}",
+          "maxWidth": "{{round(canvas.width * 0.46)}}",
+          "maxLines": 1,
+          "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.018)}}"
+        }
+      ]
+    },
+    {
+      "id": "note-3",
+      "type": "group",
+      "x": "{{round(canvas.width * 0.06)}}",
+      "y": "{{round(canvas.height * 0.05)}}",
+      "width": "{{round(canvas.width * 0.62)}}",
+      "height": "{{round(min(canvas.width, canvas.height) * 0.135)}}",
+      "animations": [
+        {
+          "property": "y",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": "{{-round(min(canvas.width, canvas.height) * 0.2)}}"
+            },
+            {
+              "frame": 82,
+              "value": "{{-round(min(canvas.width, canvas.height) * 0.2)}}",
+              "easing": "land"
+            },
+            {
+              "frame": 96,
+              "value": "{{round(canvas.height * 0.05) + 0 * round(min(canvas.width, canvas.height) * 0.155)}}",
+              "easing": "land"
+            }
+          ]
+        },
+        {
+          "property": "opacity",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0
+            },
+            {
+              "frame": 82,
+              "value": 0
+            },
+            {
+              "frame": 92,
+              "value": 1
+            }
+          ]
+        }
+      ],
+      "children": [
+        {
+          "id": "note-3-bg",
+          "type": "rect",
+          "x": 0,
+          "y": 0,
+          "width": "{{round(canvas.width * 0.62)}}",
+          "height": "{{round(min(canvas.width, canvas.height) * 0.135)}}",
+          "radius": "{{round(min(canvas.width, canvas.height) * 0.03)}}",
+          "fill": "rgba(255,255,255,0.13)",
+          "stroke": "rgba(255,255,255,0.38)",
+          "strokeWidth": 2,
+          "shadow": {
+            "color": "#00000066",
+            "blur": 28,
+            "offsetX": 0,
+            "offsetY": 10
+          }
+        },
+        {
+          "id": "note-3-shine",
+          "type": "rect",
+          "x": "{{round(min(canvas.width, canvas.height) * 0.014)}}",
+          "y": 3,
+          "width": "{{round(canvas.width * 0.62) - round(min(canvas.width, canvas.height) * 0.028)}}",
+          "height": 3,
+          "radius": 2,
+          "fill": "rgba(255,255,255,0.45)"
+        },
+        {
+          "id": "icon-disc",
+          "type": "circle",
+          "x": "{{round(min(canvas.width, canvas.height) * 0.055)}}",
+          "y": "{{round(min(canvas.width, canvas.height) * 0.0675)}}",
+          "width": "{{round(min(canvas.width, canvas.height) * 0.07)}}",
+          "fill": "{{accent}}"
+        },
+        {
+          "id": "icon",
+          "type": "path",
+          "d": "M5 12.5 L10 17.5 L19 7",
+          "width": 24,
+          "height": 24,
+          "scale": "{{min(canvas.width, canvas.height) * 0.034 / 24}}",
+          "stroke": "#ffffff",
+          "strokeWidth": 3,
+          "lineCap": "round",
+          "lineJoin": "round",
+          "x": "{{round(min(canvas.width, canvas.height) * 0.038)}}",
+          "y": "{{round(min(canvas.width, canvas.height) * 0.0505)}}"
+        },
+        {
+          "id": "t",
+          "type": "text",
+          "content": "{{title3}}",
+          "fontSize": "{{round(min(canvas.width, canvas.height) * 0.03)}}",
+          "color": "#ffffff",
+          "x": "{{round(min(canvas.width, canvas.height) * 0.105)}}",
+          "y": "{{round(min(canvas.width, canvas.height) * 0.028)}}",
+          "fontWeight": 700,
+          "maxWidth": "{{round(canvas.width * 0.46)}}",
+          "maxLines": 1,
+          "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.02)}}"
+        },
+        {
+          "id": "b",
+          "type": "text",
+          "content": "{{body3}}",
+          "fontSize": "{{round(min(canvas.width, canvas.height) * 0.026)}}",
+          "color": "{{muted}}",
+          "x": "{{round(min(canvas.width, canvas.height) * 0.105)}}",
+          "y": "{{round(min(canvas.width, canvas.height) * 0.07)}}",
+          "maxWidth": "{{round(canvas.width * 0.46)}}",
+          "maxLines": 1,
+          "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.018)}}"
+        }
+      ]
+    },
+    {
+      "id": "sfx-1",
+      "type": "audio",
+      "src": "sfx:pop",
+      "startFrame": 16,
+      "volume": 0.35
+    },
+    {
+      "id": "sfx-2",
+      "type": "audio",
+      "src": "sfx:pop",
+      "startFrame": 56,
+      "volume": 0.35
+    },
+    {
+      "id": "sfx-3",
+      "type": "audio",
+      "src": "sfx:pop",
+      "startFrame": 96,
+      "volume": 0.35
+    }
+  ]
+}

package/blocks/fx-progress-ring.json

@@ -0,0 +1,143 @@
+{
+  "id": "fx-progress-ring",
+  "name": "Progress ring",
+  "category": "effect",
+  "kind": "overlay",
+  "durationFrames": 120,
+  "description": "A glowing ring that draws itself round to a percentage, with the number counting up in the middle and a label under it.",
+  "params": {
+    "value": {
+      "type": "number",
+      "default": 87
+    },
+    "label": {
+      "type": "string",
+      "default": "RENDER COMPLETE"
+    }
+  },
+  "layers": [
+    {
+      "id": "ring-track",
+      "type": "circle",
+      "x": "{{round(canvas.width * 0.5)}}",
+      "y": "{{round(canvas.height * 0.15)}}",
+      "width": "{{round(min(canvas.width, canvas.height) * 0.34)}}",
+      "fill": "transparent",
+      "stroke": "rgba(255,255,255,0.18)",
+      "strokeWidth": "{{round(min(canvas.width, canvas.height) * 0.014)}}"
+    },
+    {
+      "id": "ring",
+      "type": "path",
+      "d": "{{'M 0 ' + string(round(min(canvas.width, canvas.height) * 0.17)) + ' a ' + string(round(min(canvas.width, canvas.height) * 0.17)) + ' ' + string(round(min(canvas.width, canvas.height) * 0.17)) + ' 0 1 1 ' + string(round(min(canvas.width, canvas.height) * 0.34)) + ' 0 a ' + string(round(min(canvas.width, canvas.height) * 0.17)) + ' ' + string(round(min(canvas.width, canvas.height) * 0.17)) + ' 0 1 1 -' + string(round(min(canvas.width, canvas.height) * 0.34)) + ' 0'}}",
+      "x": "{{round(canvas.width * 0.5) - round(min(canvas.width, canvas.height) * 0.17)}}",
+      "y": "{{round(canvas.height * 0.15) - round(min(canvas.width, canvas.height) * 0.17)}}",
+      "width": "{{round(min(canvas.width, canvas.height) * 0.34)}}",
+      "height": "{{round(min(canvas.width, canvas.height) * 0.34)}}",
+      "fill": "transparent",
+      "stroke": "{{accent}}",
+      "strokeWidth": "{{round(min(canvas.width, canvas.height) * 0.014)}}",
+      "lineCap": "round",
+      "rotation": -90,
+      "originX": "center",
+      "originY": "center",
+      "shadow": {
+        "color": "#2457FF",
+        "blur": 22,
+        "offsetX": 0,
+        "offsetY": 0
+      },
+      "animations": [
+        {
+          "property": "trimEnd",
+          "keyframes": [
+            {
+              "frame": 8,
+              "value": 0
+            },
+            {
+              "frame": 78,
+              "value": "{{value / 100}}",
+              "easing": "land"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "pct",
+      "type": "html",
+      "width": "{{round(min(canvas.width, canvas.height) * 0.34)}}",
+      "height": "{{round(min(canvas.width, canvas.height) * 0.1)}}",
+      "startFrame": 8,
+      "html": "<div class='n'></div>",
+      "css": ".n{font:800 {{round(min(canvas.width, canvas.height) * 0.09)}}px Inter;color:#fff;line-height:1;text-align:center}.n::before{counter-reset:n round(var(--n));content:counter(n) '%'}",
+      "vars": {
+        "--n": 0
+      },
+      "animations": [
+        {
+          "property": "--n",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0
+            },
+            {
+              "frame": 70,
+              "value": "{{value}}",
+              "easing": "land"
+            }
+          ]
+        }
+      ],
+      "x": "{{round(canvas.width * 0.5) - round(min(canvas.width, canvas.height) * 0.17)}}",
+      "y": "{{round(canvas.height * 0.15) - round(min(canvas.width, canvas.height) * 0.05)}}"
+    },
+    {
+      "id": "label",
+      "type": "text",
+      "content": "{{label}}",
+      "fontSize": "{{round(min(canvas.width, canvas.height) * 0.028)}}",
+      "color": "{{accent2}}",
+      "x": "{{round(canvas.width * 0.5)}}",
+      "y": "{{round(canvas.height * 0.15) + round(min(canvas.width, canvas.height) * 0.2)}}",
+      "textAlign": "center",
+      "fontWeight": 800,
+      "letterSpacing": "{{round(min(canvas.width, canvas.height) * 0.005)}}",
+      "maxWidth": "{{round(canvas.width * 0.8)}}",
+      "maxLines": 1,
+      "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.018)}}",
+      "startFrame": 20,
+      "animations": [
+        {
+          "property": "opacity",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0
+            },
+            {
+              "frame": 14,
+              "value": 1
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "sfx-1",
+      "type": "audio",
+      "src": "sfx:riser",
+      "startFrame": 4,
+      "volume": 0.3
+    },
+    {
+      "id": "sfx-2",
+      "type": "audio",
+      "src": "sfx:ding",
+      "startFrame": 80,
+      "volume": 0.3
+    }
+  ]
+}

package/blocks/fx-pull-out.json

@@ -0,0 +1,68 @@
+{
+  "id": "fx-pull-out",
+  "name": "Pull-out reveal",
+  "category": "effect",
+  "kind": "scene",
+  "durationFrames": 120,
+  "transition": {
+    "type": "fade",
+    "durationFrames": 12
+  },
+  "description": "Starts on a close crop (1.35 times) of your footage and pulls out to the full frame in about 1.2 seconds.",
+  "params": {
+    "footage": {
+      "type": "string",
+      "default": "",
+      "description": "The video to put the effect on (asset id or relative path); the theme background shows without one"
+    }
+  },
+  "layers": [
+    {
+      "id": "bg",
+      "type": "rect",
+      "x": 0,
+      "y": 0,
+      "width": "{{canvas.width}}",
+      "height": "{{canvas.height}}",
+      "fill": "{{bg}}"
+    },
+    {
+      "if": "{{footage}}",
+      "id": "footage",
+      "type": "video",
+      "src": "{{footage}}",
+      "objectFit": "cover",
+      "x": 0,
+      "y": 0,
+      "width": "{{canvas.width}}",
+      "height": "{{canvas.height}}"
+    },
+    {
+      "id": "sfx-1",
+      "type": "audio",
+      "src": "sfx:whoosh",
+      "startFrame": 0,
+      "volume": 0.35
+    }
+  ],
+  "scene": {
+    "camera": {
+      "animations": [
+        {
+          "property": "zoom",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 1.35
+            },
+            {
+              "frame": 36,
+              "value": 1,
+              "easing": "land"
+            }
+          ]
+        }
+      ]
+    }
+  }
+}