motionrender 0.0.0-stage → 0.2.1

package/blocks/fx-punch-in.json

@@ -0,0 +1,81 @@
+{
+  "id": "fx-punch-in",
+  "name": "Punch-in",
+  "category": "effect",
+  "kind": "scene",
+  "durationFrames": 120,
+  "transition": {
+    "type": "fade",
+    "durationFrames": 12
+  },
+  "description": "Your footage with a quick camera punch-in to 1.12 times at about one second, a short hold and a return to the original framing. Retime it by editing the camera keyframes to the word you want to stress.",
+  "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:thump",
+      "startFrame": 30,
+      "volume": 0.4
+    }
+  ],
+  "scene": {
+    "camera": {
+      "animations": [
+        {
+          "property": "zoom",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 1
+            },
+            {
+              "frame": 30,
+              "value": 1
+            },
+            {
+              "frame": 36,
+              "value": 1.12,
+              "easing": "land"
+            },
+            {
+              "frame": 66,
+              "value": 1.12
+            },
+            {
+              "frame": 78,
+              "value": 1,
+              "easing": "glide"
+            }
+          ]
+        }
+      ]
+    }
+  }
+}

package/blocks/fx-rgb-flash.json

@@ -0,0 +1,166 @@
+{
+  "id": "fx-rgb-flash",
+  "name": "RGB flash transition",
+  "category": "effect",
+  "kind": "overlay",
+  "durationFrames": 24,
+  "description": "A quick chromatic flash for cutting between scenes: red, green and blue copies of a white flash split apart and fade.",
+  "params": {},
+  "layers": [
+    {
+      "id": "red",
+      "type": "rect",
+      "x": 0,
+      "y": 0,
+      "width": "{{canvas.width}}",
+      "height": "{{canvas.height}}",
+      "fill": "#ff2a2a",
+      "blendMode": "screen",
+      "opacity": 0,
+      "animations": [
+        {
+          "property": "opacity",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0
+            },
+            {
+              "frame": 6,
+              "value": 0.85
+            },
+            {
+              "frame": 20,
+              "value": 0
+            }
+          ]
+        },
+        {
+          "property": "x",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0
+            },
+            {
+              "frame": 6,
+              "value": "{{round(canvas.width * -0.014814814814814815)}}"
+            },
+            {
+              "frame": 20,
+              "value": "{{round(canvas.width * -0.044444444444444446)}}"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "green",
+      "type": "rect",
+      "x": 0,
+      "y": 0,
+      "width": "{{canvas.width}}",
+      "height": "{{canvas.height}}",
+      "fill": "#2aff5a",
+      "blendMode": "screen",
+      "opacity": 0,
+      "animations": [
+        {
+          "property": "opacity",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0
+            },
+            {
+              "frame": 6,
+              "value": 0.85
+            },
+            {
+              "frame": 20,
+              "value": 0
+            }
+          ]
+        },
+        {
+          "property": "x",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0
+            },
+            {
+              "frame": 6,
+              "value": "{{round(canvas.width * 0)}}"
+            },
+            {
+              "frame": 20,
+              "value": "{{round(canvas.width * 0)}}"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "blue",
+      "type": "rect",
+      "x": 0,
+      "y": 0,
+      "width": "{{canvas.width}}",
+      "height": "{{canvas.height}}",
+      "fill": "#2a5aff",
+      "blendMode": "screen",
+      "opacity": 0,
+      "animations": [
+        {
+          "property": "opacity",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0
+            },
+            {
+              "frame": 6,
+              "value": 0.85
+            },
+            {
+              "frame": 20,
+              "value": 0
+            }
+          ]
+        },
+        {
+          "property": "x",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0
+            },
+            {
+              "frame": 6,
+              "value": "{{round(canvas.width * 0.014814814814814815)}}"
+            },
+            {
+              "frame": 20,
+              "value": "{{round(canvas.width * 0.044444444444444446)}}"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "sfx-1",
+      "type": "audio",
+      "src": "sfx:click",
+      "startFrame": 0,
+      "volume": 0.35
+    },
+    {
+      "id": "sfx-2",
+      "type": "audio",
+      "src": "sfx:whoosh",
+      "startFrame": 2,
+      "volume": 0.3
+    }
+  ]
+}

package/blocks/fx-shake-hit.json

@@ -0,0 +1,120 @@
+{
+  "id": "fx-shake-hit",
+  "name": "Shake hit",
+  "category": "effect",
+  "kind": "scene",
+  "durationFrames": 60,
+  "transition": {
+    "type": "fade",
+    "durationFrames": 12
+  },
+  "description": "Your footage with an impact: the camera shakes and pushes in for half a second with a white flash and a thump, then settles.",
+  "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": "flash",
+      "type": "rect",
+      "x": 0,
+      "y": 0,
+      "width": "{{canvas.width}}",
+      "height": "{{canvas.height}}",
+      "fill": "#ffffff",
+      "opacity": 0,
+      "blendMode": "screen",
+      "animations": [
+        {
+          "property": "opacity",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0
+            },
+            {
+              "frame": 4,
+              "value": 0.7
+            },
+            {
+              "frame": 16,
+              "value": 0
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "sfx-1",
+      "type": "audio",
+      "src": "sfx:thump",
+      "startFrame": 6,
+      "volume": 0.55
+    }
+  ],
+  "scene": {
+    "camera": {
+      "animations": [
+        {
+          "property": "shake",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0
+            },
+            {
+              "frame": 8,
+              "value": 14
+            },
+            {
+              "frame": 30,
+              "value": 0,
+              "easing": "land"
+            }
+          ]
+        },
+        {
+          "property": "zoom",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 1
+            },
+            {
+              "frame": 8,
+              "value": 1.06
+            },
+            {
+              "frame": 30,
+              "value": 1,
+              "easing": "land"
+            }
+          ]
+        }
+      ]
+    }
+  }
+}

package/blocks/fx-split-reveal.json

@@ -0,0 +1,110 @@
+{
+  "id": "fx-split-reveal",
+  "name": "Split reveal",
+  "category": "effect",
+  "kind": "overlay",
+  "durationFrames": 44,
+  "description": "Two panels in the theme colour cover the frame and slide apart (up and down) to reveal what is under them, with an accent line down the middle.",
+  "params": {},
+  "layers": [
+    {
+      "id": "top-half",
+      "type": "rect",
+      "x": 0,
+      "y": 0,
+      "width": "{{canvas.width}}",
+      "height": "{{round(canvas.height * 0.5)}}",
+      "fill": "{{bg}}",
+      "animations": [
+        {
+          "property": "y",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0
+            },
+            {
+              "frame": 8,
+              "value": 0
+            },
+            {
+              "frame": 34,
+              "value": "{{-round(canvas.height * 0.5)}}",
+              "easing": "land"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "bottom-half",
+      "type": "rect",
+      "x": 0,
+      "y": "{{round(canvas.height * 0.5)}}",
+      "width": "{{canvas.width}}",
+      "height": "{{round(canvas.height * 0.5)}}",
+      "fill": "{{bg}}",
+      "animations": [
+        {
+          "property": "y",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": "{{round(canvas.height * 0.5)}}"
+            },
+            {
+              "frame": 8,
+              "value": "{{round(canvas.height * 0.5)}}"
+            },
+            {
+              "frame": 34,
+              "value": "{{round(canvas.height * 1)}}",
+              "easing": "land"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "seam",
+      "type": "rect",
+      "x": 0,
+      "y": "{{round(canvas.height * 0.5) - 3}}",
+      "width": "{{canvas.width}}",
+      "height": 6,
+      "fill": "{{accent}}",
+      "shadow": {
+        "color": "#2457FF",
+        "blur": 20,
+        "offsetX": 0,
+        "offsetY": 0
+      },
+      "animations": [
+        {
+          "property": "opacity",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 1
+            },
+            {
+              "frame": 8,
+              "value": 1
+            },
+            {
+              "frame": 30,
+              "value": 0
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "sfx-1",
+      "type": "audio",
+      "src": "sfx:whoosh",
+      "startFrame": 6,
+      "volume": 0.4
+    }
+  ]
+}