motionrender 0.0.0-stage → 0.2.1

package/blocks/fx-stats-split.json

@@ -0,0 +1,500 @@
+{
+  "id": "fx-stats-split",
+  "name": "Stats split",
+  "category": "effect",
+  "kind": "scene",
+  "durationFrames": 180,
+  "transition": {
+    "type": "fade",
+    "durationFrames": 12
+  },
+  "description": "A split screen: an animated dashboard (heading, line chart, bar chart and a counter) fills the top half, your footage the bottom half, with a glowing divider. Statistics are illustrative: say DEMO DATA.",
+  "params": {
+    "footage": {
+      "type": "string",
+      "default": "",
+      "description": "The video to put the effect on (asset id or relative path); the theme background shows without one"
+    },
+    "heading": {
+      "type": "string",
+      "default": "MOTION GRAPHICS"
+    },
+    "sub": {
+      "type": "string",
+      "default": "Powered by Open Video Engine"
+    },
+    "value": {
+      "type": "number",
+      "default": 128
+    },
+    "note": {
+      "type": "string",
+      "default": "DEMO DATA"
+    }
+  },
+  "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": "{{round(canvas.height * 0.5)}}",
+      "width": "{{canvas.width}}",
+      "height": "{{round(canvas.height * 0.5)}}"
+    },
+    {
+      "id": "panel",
+      "type": "rect",
+      "x": 0,
+      "y": 0,
+      "width": "{{canvas.width}}",
+      "height": "{{round(canvas.height * 0.5)}}",
+      "fill": {
+        "type": "linear",
+        "from": [
+          0,
+          0
+        ],
+        "to": [
+          0,
+          "{{round(canvas.height * 0.5)}}"
+        ],
+        "stops": [
+          {
+            "offset": 0,
+            "color": "#0d1530"
+          },
+          {
+            "offset": 1,
+            "color": "#101a3c"
+          }
+        ]
+      }
+    },
+    {
+      "id": "heading",
+      "type": "text",
+      "content": "{{heading}}",
+      "fontSize": "{{round(min(canvas.width, canvas.height) * 0.052)}}",
+      "color": "#ffffff",
+      "x": "{{round(canvas.width * 0.06)}}",
+      "y": "{{round(canvas.height * 0.035)}}",
+      "fontWeight": 900,
+      "maxWidth": "{{round(canvas.width * 0.88)}}",
+      "maxLines": 1,
+      "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.03)}}",
+      "startFrame": 4,
+      "animations": [
+        {
+          "property": "opacity",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0
+            },
+            {
+              "frame": 14,
+              "value": 1,
+              "easing": "glide"
+            }
+          ]
+        },
+        {
+          "property": "y",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 20,
+              "easing": "land"
+            },
+            {
+              "frame": 18,
+              "value": 0
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "sub",
+      "type": "text",
+      "content": "{{sub}}",
+      "fontSize": "{{round(min(canvas.width, canvas.height) * 0.026)}}",
+      "color": "{{accent2}}",
+      "x": "{{round(canvas.width * 0.06)}}",
+      "y": "{{round(canvas.height * 0.035) + round(min(canvas.width, canvas.height) * 0.07)}}",
+      "fontWeight": 600,
+      "maxWidth": "{{round(canvas.width * 0.88)}}",
+      "maxLines": 1,
+      "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.018)}}",
+      "startFrame": 10,
+      "animations": [
+        {
+          "property": "opacity",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0
+            },
+            {
+              "frame": 14,
+              "value": 1,
+              "easing": "glide"
+            }
+          ]
+        },
+        {
+          "property": "y",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 16,
+              "easing": "land"
+            },
+            {
+              "frame": 18,
+              "value": 0
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "count",
+      "type": "html",
+      "width": "{{round(canvas.width * 0.4)}}",
+      "height": "{{round(min(canvas.width, canvas.height) * 0.11)}}",
+      "startFrame": 14,
+      "html": "<div class='n'></div>",
+      "css": ".n{font:800 {{round(min(canvas.width, canvas.height) * 0.09)}}px Inter;color:#ffffff;line-height:1}.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.06)}}",
+      "y": "{{round(canvas.height * 0.035) + round(min(canvas.width, canvas.height) * 0.12)}}"
+    },
+    {
+      "id": "note",
+      "type": "text",
+      "content": "{{note}}",
+      "fontSize": "{{round(min(canvas.width, canvas.height) * 0.02)}}",
+      "color": "{{muted}}",
+      "x": "{{round(canvas.width * 0.06)}}",
+      "y": "{{round(canvas.height * 0.035) + round(min(canvas.width, canvas.height) * 0.235)}}",
+      "fontWeight": 700,
+      "letterSpacing": "{{round(min(canvas.width, canvas.height) * 0.003)}}"
+    },
+    {
+      "id": "line",
+      "type": "path",
+      "d": "{{'M 0 ' + string(round(min(canvas.width, canvas.height) * 0.18)) + ' L ' + string(round(canvas.width * 0.1)) + ' ' + string(round(min(canvas.width, canvas.height) * 0.12)) + ' L ' + string(round(canvas.width * 0.2)) + ' ' + string(round(min(canvas.width, canvas.height) * 0.15)) + ' L ' + string(round(canvas.width * 0.3)) + ' ' + string(round(min(canvas.width, canvas.height) * 0.07)) + ' L ' + string(round(canvas.width * 0.4)) + ' ' + string(round(min(canvas.width, canvas.height) * 0.1)) + ' L ' + string(round(canvas.width * 0.5)) + ' ' + string(round(min(canvas.width, canvas.height) * 0.01))}}",
+      "x": "{{round(canvas.width * 0.46)}}",
+      "y": "{{round(canvas.height * 0.035) + round(min(canvas.width, canvas.height) * 0.08)}}",
+      "width": "{{round(canvas.width * 0.5)}}",
+      "height": "{{round(min(canvas.width, canvas.height) * 0.2)}}",
+      "stroke": "{{accent}}",
+      "strokeWidth": 5,
+      "lineCap": "round",
+      "lineJoin": "round",
+      "fill": "transparent",
+      "shadow": {
+        "color": "#2457FF",
+        "blur": 18,
+        "offsetX": 0,
+        "offsetY": 0
+      },
+      "animations": [
+        {
+          "property": "trimEnd",
+          "keyframes": [
+            {
+              "frame": 10,
+              "value": 0
+            },
+            {
+              "frame": 90,
+              "value": 1,
+              "easing": "land"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "mini-0",
+      "type": "rect",
+      "x": "{{round(canvas.width * 0.06) + 0 * round(canvas.width * 0.075)}}",
+      "y": "{{round(canvas.height * 0.5) - round(min(canvas.width, canvas.height) * 0.04)}}",
+      "width": "{{round(canvas.width * 0.05)}}",
+      "height": 1,
+      "radius": 4,
+      "fill": "{{accent2}}",
+      "opacity": 0.8,
+      "animations": [
+        {
+          "property": "height",
+          "keyframes": [
+            {
+              "frame": 20,
+              "value": 1
+            },
+            {
+              "frame": 60,
+              "value": "{{round(round(min(canvas.width, canvas.height) * 0.12) * 0.5)}}",
+              "easing": "land"
+            }
+          ]
+        },
+        {
+          "property": "y",
+          "keyframes": [
+            {
+              "frame": 20,
+              "value": "{{round(canvas.height * 0.5) - round(min(canvas.width, canvas.height) * 0.04)}}"
+            },
+            {
+              "frame": 60,
+              "value": "{{round(canvas.height * 0.5) - round(min(canvas.width, canvas.height) * 0.04) - round(round(min(canvas.width, canvas.height) * 0.12) * 0.5)}}",
+              "easing": "land"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "mini-1",
+      "type": "rect",
+      "x": "{{round(canvas.width * 0.06) + 1 * round(canvas.width * 0.075)}}",
+      "y": "{{round(canvas.height * 0.5) - round(min(canvas.width, canvas.height) * 0.04)}}",
+      "width": "{{round(canvas.width * 0.05)}}",
+      "height": 1,
+      "radius": 4,
+      "fill": "{{accent2}}",
+      "opacity": 0.8,
+      "animations": [
+        {
+          "property": "height",
+          "keyframes": [
+            {
+              "frame": 25,
+              "value": 1
+            },
+            {
+              "frame": 65,
+              "value": "{{round(round(min(canvas.width, canvas.height) * 0.12) * 0.8)}}",
+              "easing": "land"
+            }
+          ]
+        },
+        {
+          "property": "y",
+          "keyframes": [
+            {
+              "frame": 25,
+              "value": "{{round(canvas.height * 0.5) - round(min(canvas.width, canvas.height) * 0.04)}}"
+            },
+            {
+              "frame": 65,
+              "value": "{{round(canvas.height * 0.5) - round(min(canvas.width, canvas.height) * 0.04) - round(round(min(canvas.width, canvas.height) * 0.12) * 0.8)}}",
+              "easing": "land"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "mini-2",
+      "type": "rect",
+      "x": "{{round(canvas.width * 0.06) + 2 * round(canvas.width * 0.075)}}",
+      "y": "{{round(canvas.height * 0.5) - round(min(canvas.width, canvas.height) * 0.04)}}",
+      "width": "{{round(canvas.width * 0.05)}}",
+      "height": 1,
+      "radius": 4,
+      "fill": "{{accent2}}",
+      "opacity": 0.8,
+      "animations": [
+        {
+          "property": "height",
+          "keyframes": [
+            {
+              "frame": 30,
+              "value": 1
+            },
+            {
+              "frame": 70,
+              "value": "{{round(round(min(canvas.width, canvas.height) * 0.12) * 0.6)}}",
+              "easing": "land"
+            }
+          ]
+        },
+        {
+          "property": "y",
+          "keyframes": [
+            {
+              "frame": 30,
+              "value": "{{round(canvas.height * 0.5) - round(min(canvas.width, canvas.height) * 0.04)}}"
+            },
+            {
+              "frame": 70,
+              "value": "{{round(canvas.height * 0.5) - round(min(canvas.width, canvas.height) * 0.04) - round(round(min(canvas.width, canvas.height) * 0.12) * 0.6)}}",
+              "easing": "land"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "mini-3",
+      "type": "rect",
+      "x": "{{round(canvas.width * 0.06) + 3 * round(canvas.width * 0.075)}}",
+      "y": "{{round(canvas.height * 0.5) - round(min(canvas.width, canvas.height) * 0.04)}}",
+      "width": "{{round(canvas.width * 0.05)}}",
+      "height": 1,
+      "radius": 4,
+      "fill": "{{accent2}}",
+      "opacity": 0.8,
+      "animations": [
+        {
+          "property": "height",
+          "keyframes": [
+            {
+              "frame": 35,
+              "value": 1
+            },
+            {
+              "frame": 75,
+              "value": "{{round(round(min(canvas.width, canvas.height) * 0.12) * 1)}}",
+              "easing": "land"
+            }
+          ]
+        },
+        {
+          "property": "y",
+          "keyframes": [
+            {
+              "frame": 35,
+              "value": "{{round(canvas.height * 0.5) - round(min(canvas.width, canvas.height) * 0.04)}}"
+            },
+            {
+              "frame": 75,
+              "value": "{{round(canvas.height * 0.5) - round(min(canvas.width, canvas.height) * 0.04) - round(round(min(canvas.width, canvas.height) * 0.12) * 1)}}",
+              "easing": "land"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "mini-4",
+      "type": "rect",
+      "x": "{{round(canvas.width * 0.06) + 4 * round(canvas.width * 0.075)}}",
+      "y": "{{round(canvas.height * 0.5) - round(min(canvas.width, canvas.height) * 0.04)}}",
+      "width": "{{round(canvas.width * 0.05)}}",
+      "height": 1,
+      "radius": 4,
+      "fill": "{{accent2}}",
+      "opacity": 0.8,
+      "animations": [
+        {
+          "property": "height",
+          "keyframes": [
+            {
+              "frame": 40,
+              "value": 1
+            },
+            {
+              "frame": 80,
+              "value": "{{round(round(min(canvas.width, canvas.height) * 0.12) * 0.75)}}",
+              "easing": "land"
+            }
+          ]
+        },
+        {
+          "property": "y",
+          "keyframes": [
+            {
+              "frame": 40,
+              "value": "{{round(canvas.height * 0.5) - round(min(canvas.width, canvas.height) * 0.04)}}"
+            },
+            {
+              "frame": 80,
+              "value": "{{round(canvas.height * 0.5) - round(min(canvas.width, canvas.height) * 0.04) - round(round(min(canvas.width, canvas.height) * 0.12) * 0.75)}}",
+              "easing": "land"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "divider",
+      "type": "rect",
+      "x": 0,
+      "y": "{{round(canvas.height * 0.5) - 3}}",
+      "width": "{{canvas.width}}",
+      "height": 6,
+      "fill": "{{accent}}",
+      "shadow": {
+        "color": "#2457FF",
+        "blur": 24,
+        "offsetX": 0,
+        "offsetY": 0
+      },
+      "animations": [
+        {
+          "property": "opacity",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0
+            },
+            {
+              "frame": 20,
+              "value": 1
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "sfx-1",
+      "type": "audio",
+      "src": "sfx:whoosh",
+      "startFrame": 4,
+      "volume": 0.3
+    },
+    {
+      "id": "sfx-2",
+      "type": "audio",
+      "src": "sfx:pop",
+      "startFrame": 20,
+      "volume": 0.3
+    }
+  ]
+}