motionrender 0.0.0-stage → 0.2.0

package/blocks/feature-list.json

@@ -0,0 +1,286 @@
+{
+  "id": "feature-list",
+  "name": "Feature list",
+  "category": "list",
+  "kind": "scene",
+  "durationFrames": 180,
+  "transition": {
+    "type": "push",
+    "durationFrames": 16,
+    "direction": "left",
+    "easing": "glide"
+  },
+  "description": "A title and up to six bullet points that appear one after another.",
+  "params": {
+    "title": {
+      "type": "string",
+      "default": "What you get"
+    },
+    "items": {
+      "type": "list",
+      "items": {
+        "text": {
+          "type": "string",
+          "default": ""
+        }
+      },
+      "default": [
+        {
+          "text": "Frame-exact, repeatable renders"
+        },
+        {
+          "text": "Text that fits and reflows"
+        },
+        {
+          "text": "Sound, captions and music in one file"
+        },
+        {
+          "text": "Edit it all as plain JSON"
+        }
+      ]
+    }
+  },
+  "layers": [
+    {
+      "id": "bg",
+      "type": "rect",
+      "x": 0,
+      "y": 0,
+      "width": "{{canvas.width}}",
+      "height": "{{canvas.height}}",
+      "fill": "{{bg}}"
+    },
+    {
+      "id": "glow",
+      "type": "circle",
+      "x": "{{round(canvas.width * 0.7)}}",
+      "y": "{{round(canvas.height * 0.6)}}",
+      "width": "{{round(min(canvas.width, canvas.height) * 1.1)}}",
+      "fill": "{{accent}}",
+      "opacity": 0.1,
+      "blur": 120,
+      "animations": [
+        {
+          "property": "scale",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0.9
+            },
+            {
+              "frame": 150,
+              "value": 1.1,
+              "easing": "drift"
+            }
+          ]
+        },
+        {
+          "property": "x",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": "{{round(canvas.width * 0.7)}}"
+            },
+            {
+              "frame": 180,
+              "value": "{{round(canvas.width * 0.6)}}",
+              "easing": "drift"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "glow2",
+      "type": "circle",
+      "x": "{{round(canvas.width * 0.30000000000000004)}}",
+      "y": "{{round(canvas.height * 0.4)}}",
+      "width": "{{round(min(canvas.width, canvas.height) * 0.8)}}",
+      "fill": "{{accent2}}",
+      "opacity": 0.06,
+      "blur": 140,
+      "animations": [
+        {
+          "property": "y",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": "{{round(canvas.height * 0.4)}}"
+            },
+            {
+              "frame": 180,
+              "value": "{{round(canvas.height * 0.30000000000000004)}}",
+              "easing": "drift"
+            }
+          ]
+        },
+        {
+          "property": "scale",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 1.1
+            },
+            {
+              "frame": 150,
+              "value": 0.9,
+              "easing": "drift"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "stack",
+      "type": "group",
+      "x": "{{round(canvas.width * 0.08)}}",
+      "y": 0,
+      "width": "{{round(canvas.width * 0.84)}}",
+      "height": "{{canvas.height}}",
+      "layout": {
+        "direction": "column",
+        "gap": "{{round(min(canvas.width, canvas.height) * 0.03)}}",
+        "align": "start",
+        "justify": "center"
+      },
+      "children": [
+        {
+          "id": "title",
+          "type": "text",
+          "content": "{{title}}",
+          "fontSize": "{{round(min(canvas.width, canvas.height) * 0.075)}}",
+          "color": "{{text}}",
+          "fontWeight": "{{headWeight}}",
+          "maxWidth": "{{round(canvas.width * 0.84)}}",
+          "maxLines": 2,
+          "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.05)}}",
+          "startFrame": 0,
+          "animations": [
+            {
+              "property": "opacity",
+              "keyframes": [
+                {
+                  "frame": 0,
+                  "value": 0
+                },
+                {
+                  "frame": 14,
+                  "value": 1,
+                  "easing": "glide"
+                }
+              ]
+            },
+            {
+              "property": "y",
+              "keyframes": [
+                {
+                  "frame": 0,
+                  "value": 24,
+                  "easing": "land"
+                },
+                {
+                  "frame": 18,
+                  "value": 0
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "id": "items",
+          "type": "group",
+          "width": "{{round(canvas.width * 0.84)}}",
+          "layout": {
+            "direction": "column",
+            "gap": "{{round(min(canvas.width, canvas.height) * 0.032)}}",
+            "align": "start"
+          },
+          "children": [
+            {
+              "repeat": "{{items}}",
+              "as": "it",
+              "each": [
+                {
+                  "id": "item-{{index}}",
+                  "type": "group",
+                  "startFrame": "{{16 + index * 12}}",
+                  "layout": {
+                    "direction": "row",
+                    "gap": "{{round(min(canvas.width, canvas.height) * 0.026)}}",
+                    "align": "center"
+                  },
+                  "animations": [
+                    {
+                      "property": "opacity",
+                      "keyframes": [
+                        {
+                          "frame": 0,
+                          "value": 0
+                        },
+                        {
+                          "frame": 12,
+                          "value": 1
+                        }
+                      ]
+                    }
+                  ],
+                  "children": [
+                    {
+                      "id": "dot-{{index}}",
+                      "type": "circle",
+                      "width": "{{round(min(canvas.width, canvas.height) * 0.026)}}",
+                      "fill": "{{accent}}"
+                    },
+                    {
+                      "id": "line-{{index}}",
+                      "type": "text",
+                      "content": "{{it.text}}",
+                      "fontSize": "{{round(min(canvas.width, canvas.height) * 0.05)}}",
+                      "color": "{{text}}",
+                      "maxWidth": "{{round(canvas.width * 0.78)}}",
+                      "maxLines": 2,
+                      "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.032)}}"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "repeat": "{{items}}",
+      "as": "x",
+      "each": [
+        {
+          "id": "sfx-item-{{index}}",
+          "type": "audio",
+          "src": "sfx:tick",
+          "startFrame": "{{16 + index * 12}}",
+          "volume": 0.35
+        }
+      ]
+    }
+  ],
+  "scene": {
+    "camera": {
+      "animations": [
+        {
+          "property": "zoom",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 1
+            },
+            {
+              "frame": 180,
+              "value": 1.04,
+              "easing": "drift"
+            }
+          ]
+        }
+      ]
+    }
+  }
+}

package/blocks/footage.json

@@ -0,0 +1,43 @@
+{
+  "id": "footage",
+  "name": "Footage",
+  "category": "base",
+  "kind": "scene",
+  "durationFrames": 300,
+  "description": "Your video filling the frame (cover fit), the base the fx-* effects sit on. Give it the clip with --set src=clip.mp4 and its length with --frames.",
+  "params": {
+    "src": {
+      "type": "string",
+      "default": "",
+      "description": "A video (asset id or relative path); the theme background shows without one"
+    },
+    "trim": {
+      "type": "number",
+      "default": 0,
+      "description": "Frames of the clip to skip"
+    }
+  },
+  "layers": [
+    {
+      "id": "bg",
+      "type": "rect",
+      "x": 0,
+      "y": 0,
+      "width": "{{canvas.width}}",
+      "height": "{{canvas.height}}",
+      "fill": "{{bg}}"
+    },
+    {
+      "if": "{{src}}",
+      "id": "clip",
+      "type": "video",
+      "src": "{{src}}",
+      "objectFit": "cover",
+      "trimStart": "{{trim}}",
+      "x": 0,
+      "y": 0,
+      "width": "{{canvas.width}}",
+      "height": "{{canvas.height}}"
+    }
+  ]
+}

package/blocks/fx-background-swap.json

@@ -0,0 +1,170 @@
+{
+  "id": "fx-background-swap",
+  "name": "Background swap",
+  "category": "effect",
+  "kind": "scene",
+  "durationFrames": 150,
+  "transition": {
+    "type": "fade",
+    "durationFrames": 12
+  },
+  "description": "Replaces the background behind the speaker with a brand gradient (or a picture you give) and drifting light. Needs a matte of the speaker.",
+  "params": {
+    "footage": {
+      "type": "string",
+      "default": "",
+      "description": "Your video (asset id or relative path)"
+    },
+    "matte": {
+      "type": "string",
+      "default": "",
+      "description": "A matte video or picture of the speaker: white where the speaker is. Make it with rembg, Robust Video Matting or an editor."
+    },
+    "backdrop": {
+      "type": "string",
+      "default": "",
+      "description": "A picture for the new background (asset id or path); a brand gradient is used without one"
+    }
+  },
+  "layers": [
+    {
+      "id": "bg",
+      "type": "rect",
+      "x": 0,
+      "y": 0,
+      "width": "{{canvas.width}}",
+      "height": "{{canvas.height}}",
+      "fill": "{{bg}}"
+    },
+    {
+      "id": "gradient",
+      "type": "rect",
+      "x": 0,
+      "y": 0,
+      "width": "{{canvas.width}}",
+      "height": "{{canvas.height}}",
+      "fill": {
+        "type": "linear",
+        "from": [
+          0,
+          0
+        ],
+        "to": [
+          "{{canvas.width}}",
+          "{{canvas.height}}"
+        ],
+        "stops": [
+          {
+            "offset": 0,
+            "color": "{{accent}}"
+          },
+          {
+            "offset": 1,
+            "color": "{{bg}}"
+          }
+        ]
+      }
+    },
+    {
+      "id": "light-1",
+      "type": "circle",
+      "x": "{{round(canvas.width * 0.2)}}",
+      "y": "{{round(canvas.height * 0.3)}}",
+      "width": "{{round(min(canvas.width, canvas.height) * 0.9)}}",
+      "fill": "{{accent2}}",
+      "opacity": 0.35,
+      "blur": 140,
+      "animations": [
+        {
+          "property": "x",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": "{{round(canvas.width * 0.2)}}"
+            },
+            {
+              "frame": 150,
+              "value": "{{round(canvas.width * 0.55)}}",
+              "easing": "drift"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "light-2",
+      "type": "circle",
+      "x": "{{round(canvas.width * 0.85)}}",
+      "y": "{{round(canvas.height * 0.75)}}",
+      "width": "{{round(min(canvas.width, canvas.height) * 0.8)}}",
+      "fill": "{{accent}}",
+      "opacity": 0.4,
+      "blur": 140,
+      "animations": [
+        {
+          "property": "y",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": "{{round(canvas.height * 0.75)}}"
+            },
+            {
+              "frame": 150,
+              "value": "{{round(canvas.height * 0.5)}}",
+              "easing": "drift"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "if": "{{backdrop}}",
+      "id": "backdrop-picture",
+      "type": "image",
+      "src": "{{backdrop}}",
+      "objectFit": "cover",
+      "x": 0,
+      "y": 0,
+      "width": "{{canvas.width}}",
+      "height": "{{canvas.height}}"
+    },
+    {
+      "if": "{{footage && matte}}",
+      "id": "subject",
+      "type": "video",
+      "src": "{{footage}}",
+      "objectFit": "cover",
+      "x": 0,
+      "y": 0,
+      "width": "{{canvas.width}}",
+      "height": "{{canvas.height}}",
+      "filter": "contrast(1.05) saturate(1.08)",
+      "matte": {
+        "src": "{{matte}}",
+        "mode": "luma"
+      },
+      "animations": [
+        {
+          "property": "opacity",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0
+            },
+            {
+              "frame": 14,
+              "value": 1
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "sfx-1",
+      "type": "audio",
+      "src": "sfx:whoosh",
+      "startFrame": 0,
+      "volume": 0.3
+    }
+  ]
+}

package/blocks/fx-before-after.json

@@ -0,0 +1,212 @@
+{
+  "id": "fx-before-after",
+  "name": "Before and after",
+  "category": "effect",
+  "kind": "scene",
+  "durationFrames": 180,
+  "transition": {
+    "type": "fade",
+    "durationFrames": 12
+  },
+  "description": "A slider sweeps across your footage: the left side is plain and desaturated, the right side the graded version, with a glowing handle and labels.",
+  "params": {
+    "footage": {
+      "type": "string",
+      "default": "",
+      "description": "The video to put the effect on (asset id or relative path); the theme background shows without one"
+    },
+    "before": {
+      "type": "string",
+      "default": "BEFORE"
+    },
+    "after": {
+      "type": "string",
+      "default": "AFTER"
+    }
+  },
+  "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}}",
+      "filter": "grayscale(0.85) brightness(0.9)"
+    },
+    {
+      "id": "revealed",
+      "type": "group",
+      "x": "{{round(canvas.width * 1)}}",
+      "y": 0,
+      "width": "{{canvas.width}}",
+      "height": "{{canvas.height}}",
+      "clip": {
+        "x": 0,
+        "y": 0,
+        "width": "{{canvas.width}}",
+        "height": "{{canvas.height}}"
+      },
+      "animations": [
+        {
+          "property": "x",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": "{{round(canvas.width * 1)}}"
+            },
+            {
+              "frame": 20,
+              "value": "{{round(canvas.width * 1)}}"
+            },
+            {
+              "frame": 110,
+              "value": "{{round(canvas.width * 0.12)}}",
+              "easing": "glide"
+            },
+            {
+              "frame": 150,
+              "value": "{{round(canvas.width * 0.12)}}"
+            },
+            {
+              "frame": 176,
+              "value": "{{round(canvas.width * 0.5)}}",
+              "easing": "glide"
+            }
+          ]
+        }
+      ],
+      "children": [
+        {
+          "id": "bg",
+          "type": "rect",
+          "x": 0,
+          "y": 0,
+          "width": "{{canvas.width}}",
+          "height": "{{canvas.height}}",
+          "fill": "{{bg}}"
+        },
+        {
+          "if": "{{footage}}",
+          "id": "after-footage",
+          "type": "video",
+          "src": "{{footage}}",
+          "objectFit": "cover",
+          "x": 0,
+          "y": 0,
+          "width": "{{canvas.width}}",
+          "height": "{{canvas.height}}",
+          "filter": "saturate(1.3) contrast(1.1) brightness(1.05)",
+          "animations": [
+            {
+              "property": "x",
+              "keyframes": [
+                {
+                  "frame": 0,
+                  "value": "{{-round(canvas.width * 1)}}"
+                },
+                {
+                  "frame": 20,
+                  "value": "{{-round(canvas.width * 1)}}"
+                },
+                {
+                  "frame": 110,
+                  "value": "{{-round(canvas.width * 0.12)}}",
+                  "easing": "glide"
+                },
+                {
+                  "frame": 150,
+                  "value": "{{-round(canvas.width * 0.12)}}"
+                },
+                {
+                  "frame": 176,
+                  "value": "{{-round(canvas.width * 0.5)}}",
+                  "easing": "glide"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "id": "handle",
+          "type": "rect",
+          "x": 0,
+          "y": 0,
+          "width": 6,
+          "height": "{{canvas.height}}",
+          "fill": "#ffffff",
+          "shadow": {
+            "color": "#ffffff",
+            "blur": 20,
+            "offsetX": 0,
+            "offsetY": 0
+          }
+        },
+        {
+          "id": "knob",
+          "type": "circle",
+          "x": 3,
+          "y": "{{round(canvas.height * 0.5)}}",
+          "width": "{{round(min(canvas.width, canvas.height) * 0.09)}}",
+          "fill": "{{accent}}",
+          "stroke": "#ffffff",
+          "strokeWidth": 4
+        }
+      ]
+    },
+    {
+      "id": "before",
+      "type": "text",
+      "content": "{{before}}",
+      "fontSize": "{{round(min(canvas.width, canvas.height) * 0.035)}}",
+      "color": "#ffffff",
+      "x": "{{round(canvas.width * 0.05)}}",
+      "y": "{{round(canvas.height * 0.06)}}",
+      "fontWeight": 800,
+      "letterSpacing": "{{round(min(canvas.width, canvas.height) * 0.004)}}",
+      "shadow": {
+        "color": "#000000aa",
+        "blur": 10,
+        "offsetX": 0,
+        "offsetY": 3
+      }
+    },
+    {
+      "id": "after",
+      "type": "text",
+      "content": "{{after}}",
+      "fontSize": "{{round(min(canvas.width, canvas.height) * 0.035)}}",
+      "color": "#ffffff",
+      "x": "{{round(canvas.width * 0.95)}}",
+      "y": "{{round(canvas.height * 0.06)}}",
+      "textAlign": "right",
+      "fontWeight": 800,
+      "letterSpacing": "{{round(min(canvas.width, canvas.height) * 0.004)}}",
+      "shadow": {
+        "color": "#000000aa",
+        "blur": 10,
+        "offsetX": 0,
+        "offsetY": 3
+      }
+    },
+    {
+      "id": "sfx-1",
+      "type": "audio",
+      "src": "sfx:whoosh",
+      "startFrame": 20,
+      "volume": 0.35
+    }
+  ]
+}