motionrender 0.0.0-stage → 0.2.1

package/blocks/fx-glitch-title.json

@@ -0,0 +1,373 @@
+{
+  "id": "fx-glitch-title",
+  "name": "Glitch title",
+  "category": "effect",
+  "kind": "overlay",
+  "durationFrames": 90,
+  "description": "A big title that tears in with red and blue copies jumping apart, slicing and flickering for a moment, then settles clean.",
+  "params": {
+    "title": {
+      "type": "string",
+      "default": "SYSTEM ONLINE"
+    }
+  },
+  "layers": [
+    {
+      "id": "red",
+      "type": "text",
+      "content": "{{title}}",
+      "x": "{{round(canvas.width * 0.5)}}",
+      "y": "{{round(canvas.height * 0.6)}}",
+      "color": "#ff2a4d",
+      "blendMode": "screen",
+      "fontSize": "{{round(min(canvas.width, canvas.height) * 0.12)}}",
+      "fontWeight": 900,
+      "maxWidth": "{{round(canvas.width * 0.9)}}",
+      "textAlign": "center",
+      "lineHeight": 1,
+      "animations": [
+        {
+          "property": "x",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": "{{round(canvas.width * 0.5) + -14}}"
+            },
+            {
+              "frame": 3,
+              "value": "{{round(canvas.width * 0.5) + 14}}"
+            },
+            {
+              "frame": 6,
+              "value": "{{round(canvas.width * 0.5) + -8}}"
+            },
+            {
+              "frame": 9,
+              "value": "{{round(canvas.width * 0.5) + 11}}"
+            },
+            {
+              "frame": 12,
+              "value": "{{round(canvas.width * 0.5) + -6}}"
+            },
+            {
+              "frame": 15,
+              "value": "{{round(canvas.width * 0.5) + 4}}"
+            },
+            {
+              "frame": 18,
+              "value": "{{round(canvas.width * 0.5) + 0}}"
+            }
+          ]
+        },
+        {
+          "property": "opacity",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0
+            },
+            {
+              "frame": 2,
+              "value": 1
+            },
+            {
+              "frame": 18,
+              "value": 1
+            },
+            {
+              "frame": 21,
+              "value": 0
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "blue",
+      "type": "text",
+      "content": "{{title}}",
+      "x": "{{round(canvas.width * 0.5)}}",
+      "y": "{{round(canvas.height * 0.6)}}",
+      "color": "#2a6bff",
+      "blendMode": "screen",
+      "fontSize": "{{round(min(canvas.width, canvas.height) * 0.12)}}",
+      "fontWeight": 900,
+      "maxWidth": "{{round(canvas.width * 0.9)}}",
+      "textAlign": "center",
+      "lineHeight": 1,
+      "animations": [
+        {
+          "property": "x",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": "{{round(canvas.width * 0.5) + 14}}"
+            },
+            {
+              "frame": 3,
+              "value": "{{round(canvas.width * 0.5) + -14}}"
+            },
+            {
+              "frame": 6,
+              "value": "{{round(canvas.width * 0.5) + 8}}"
+            },
+            {
+              "frame": 9,
+              "value": "{{round(canvas.width * 0.5) + -11}}"
+            },
+            {
+              "frame": 12,
+              "value": "{{round(canvas.width * 0.5) + 6}}"
+            },
+            {
+              "frame": 15,
+              "value": "{{round(canvas.width * 0.5) + -4}}"
+            },
+            {
+              "frame": 18,
+              "value": "{{round(canvas.width * 0.5) + 0}}"
+            }
+          ]
+        },
+        {
+          "property": "opacity",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0
+            },
+            {
+              "frame": 2,
+              "value": 1
+            },
+            {
+              "frame": 18,
+              "value": 1
+            },
+            {
+              "frame": 21,
+              "value": 0
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "main",
+      "type": "text",
+      "content": "{{title}}",
+      "x": "{{round(canvas.width * 0.5)}}",
+      "y": "{{round(canvas.height * 0.6)}}",
+      "color": "#ffffff",
+      "fontSize": "{{round(min(canvas.width, canvas.height) * 0.12)}}",
+      "fontWeight": 900,
+      "maxWidth": "{{round(canvas.width * 0.9)}}",
+      "textAlign": "center",
+      "lineHeight": 1,
+      "animations": [
+        {
+          "property": "x",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": "{{round(canvas.width * 0.5) + -5}}"
+            },
+            {
+              "frame": 3,
+              "value": "{{round(canvas.width * 0.5) + 5}}"
+            },
+            {
+              "frame": 6,
+              "value": "{{round(canvas.width * 0.5) + -3}}"
+            },
+            {
+              "frame": 9,
+              "value": "{{round(canvas.width * 0.5) + 4}}"
+            },
+            {
+              "frame": 12,
+              "value": "{{round(canvas.width * 0.5) + -2}}"
+            },
+            {
+              "frame": 15,
+              "value": "{{round(canvas.width * 0.5) + 2}}"
+            },
+            {
+              "frame": 18,
+              "value": "{{round(canvas.width * 0.5) + 0}}"
+            }
+          ]
+        },
+        {
+          "property": "opacity",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0
+            },
+            {
+              "frame": 2,
+              "value": 1
+            },
+            {
+              "frame": 4,
+              "value": 0.4
+            },
+            {
+              "frame": 6,
+              "value": 1
+            },
+            {
+              "frame": 9,
+              "value": 0.5
+            },
+            {
+              "frame": 11,
+              "value": 1
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "slice-0",
+      "type": "rect",
+      "x": 0,
+      "y": "{{round(canvas.height * 0.4) + 0}}",
+      "width": "{{canvas.width}}",
+      "height": 6,
+      "fill": "{{accent}}",
+      "opacity": 0,
+      "animations": [
+        {
+          "property": "opacity",
+          "keyframes": [
+            {
+              "frame": 2,
+              "value": 0
+            },
+            {
+              "frame": 3,
+              "value": 0.7
+            },
+            {
+              "frame": 5,
+              "value": 0
+            }
+          ]
+        },
+        {
+          "property": "x",
+          "keyframes": [
+            {
+              "frame": 2,
+              "value": "{{round(canvas.width * -0.08)}}"
+            },
+            {
+              "frame": 5,
+              "value": "{{round(canvas.width * 0.08)}}"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "slice-1",
+      "type": "rect",
+      "x": 0,
+      "y": "{{round(canvas.height * 0.4) + 40}}",
+      "width": "{{canvas.width}}",
+      "height": 9,
+      "fill": "{{accent}}",
+      "opacity": 0,
+      "animations": [
+        {
+          "property": "opacity",
+          "keyframes": [
+            {
+              "frame": 5,
+              "value": 0
+            },
+            {
+              "frame": 6,
+              "value": 0.7
+            },
+            {
+              "frame": 8,
+              "value": 0
+            }
+          ]
+        },
+        {
+          "property": "x",
+          "keyframes": [
+            {
+              "frame": 5,
+              "value": "{{round(canvas.width * -0.08)}}"
+            },
+            {
+              "frame": 8,
+              "value": "{{round(canvas.width * 0.08)}}"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "slice-2",
+      "type": "rect",
+      "x": 0,
+      "y": "{{round(canvas.height * 0.4) + 80}}",
+      "width": "{{canvas.width}}",
+      "height": 12,
+      "fill": "{{accent}}",
+      "opacity": 0,
+      "animations": [
+        {
+          "property": "opacity",
+          "keyframes": [
+            {
+              "frame": 8,
+              "value": 0
+            },
+            {
+              "frame": 9,
+              "value": 0.7
+            },
+            {
+              "frame": 11,
+              "value": 0
+            }
+          ]
+        },
+        {
+          "property": "x",
+          "keyframes": [
+            {
+              "frame": 8,
+              "value": "{{round(canvas.width * -0.08)}}"
+            },
+            {
+              "frame": 11,
+              "value": "{{round(canvas.width * 0.08)}}"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "sfx-1",
+      "type": "audio",
+      "src": "sfx:click",
+      "startFrame": 0,
+      "volume": 0.35
+    },
+    {
+      "id": "sfx-2",
+      "type": "audio",
+      "src": "sfx:thump",
+      "startFrame": 2,
+      "volume": 0.35
+    }
+  ]
+}

package/blocks/fx-grade-look.json

@@ -0,0 +1,91 @@
+{
+  "id": "fx-grade-look",
+  "name": "Colour grade",
+  "category": "effect",
+  "kind": "scene",
+  "durationFrames": 120,
+  "transition": {
+    "type": "fade",
+    "durationFrames": 12
+  },
+  "description": "Your footage with a colour look (warm, cool, cinematic, teal-orange, noir, vivid or faded) plus an optional vignette. The grade is the scene's grade property, so you can fine-tune exposure, contrast, saturation, temperature, tint, shadows, highlights and fade.",
+  "params": {
+    "footage": {
+      "type": "string",
+      "default": "",
+      "description": "The video to put the effect on (asset id or relative path); the theme background shows without one"
+    },
+    "look": {
+      "type": "string",
+      "default": "cinematic",
+      "description": "warm, cool, cinematic, teal-orange, noir, vivid or faded"
+    },
+    "vignette": {
+      "type": "number",
+      "default": 0.55,
+      "description": "0 for none, 1 for strong"
+    }
+  },
+  "layers": [
+    {
+      "id": "graded",
+      "type": "group",
+      "x": 0,
+      "y": 0,
+      "width": "{{canvas.width}}",
+      "height": "{{canvas.height}}",
+      "grade": {
+        "look": "{{look}}"
+      },
+      "children": [
+        {
+          "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": "vignette",
+      "type": "rect",
+      "x": 0,
+      "y": 0,
+      "width": "{{canvas.width}}",
+      "height": "{{canvas.height}}",
+      "fill": {
+        "type": "radial",
+        "center": [
+          "{{round(canvas.width * 0.5)}}",
+          "{{round(canvas.height * 0.45)}}"
+        ],
+        "radius": "{{round(canvas.height * 0.75)}}",
+        "stops": [
+          {
+            "offset": 0.55,
+            "color": "transparent"
+          },
+          {
+            "offset": 1,
+            "color": "#000000"
+          }
+        ]
+      },
+      "opacity": "{{vignette}}"
+    }
+  ]
+}

package/blocks/fx-highlighter.json

@@ -0,0 +1,53 @@
+{
+  "id": "fx-highlighter",
+  "name": "Highlighter sweep",
+  "category": "effect",
+  "kind": "overlay",
+  "durationFrames": 90,
+  "description": "A keyword in bold type with an accent highlight bar sweeping across behind it, left to right.",
+  "params": {
+    "word": {
+      "type": "string",
+      "default": "ENDLESS"
+    }
+  },
+  "layers": [
+    {
+      "id": "highlight",
+      "type": "html",
+      "html": "<div class='w'><span>{{word}}</span></div>",
+      "css": ".w{font:900 {{round(min(canvas.width, canvas.height) * 0.11)}}px Inter;color:#fff;letter-spacing:-0.02em;display:flex;justify-content:center}.w span{padding:0 .18em;background:linear-gradient(var(--accent),var(--accent)) no-repeat left center;background-size:calc(var(--p) * 100%) 86%}",
+      "vars": {
+        "--p": 0,
+        "--accent": "{{accent}}"
+      },
+      "animations": [
+        {
+          "property": "--p",
+          "keyframes": [
+            {
+              "frame": 8,
+              "value": 0
+            },
+            {
+              "frame": 34,
+              "value": 1,
+              "easing": "land"
+            }
+          ]
+        }
+      ],
+      "x": "{{round(canvas.width * 0.04)}}",
+      "y": "{{round(canvas.height * 0.6)}}",
+      "width": "{{round(canvas.width * 0.92)}}",
+      "height": "{{round(min(canvas.width, canvas.height) * 0.2)}}"
+    },
+    {
+      "id": "sfx-1",
+      "type": "audio",
+      "src": "sfx:whoosh",
+      "startFrame": 8,
+      "volume": 0.35
+    }
+  ]
+}