motionrender 0.0.0-stage → 0.2.1

package/blocks/fx-step-tracker.json

@@ -0,0 +1,528 @@
+{
+  "id": "fx-step-tracker",
+  "name": "Step tracker",
+  "category": "effect",
+  "kind": "overlay",
+  "durationFrames": 180,
+  "description": "Five connected workflow steps along the lower part of the frame, lighting up one after another with an icon and a label.",
+  "params": {
+    "step1": {
+      "type": "string",
+      "default": "Brief"
+    },
+    "step2": {
+      "type": "string",
+      "default": "Compose"
+    },
+    "step3": {
+      "type": "string",
+      "default": "Validate"
+    },
+    "step4": {
+      "type": "string",
+      "default": "Render"
+    },
+    "step5": {
+      "type": "string",
+      "default": "Publish"
+    }
+  },
+  "layers": [
+    {
+      "id": "rail",
+      "type": "rect",
+      "x": "{{round(canvas.width * 0.1)}}",
+      "y": "{{round(canvas.height * 0.8) + round(min(canvas.width, canvas.height) * 0.04) - 3}}",
+      "width": "{{round(canvas.width * 0.8)}}",
+      "height": 6,
+      "radius": 3,
+      "fill": "rgba(255,255,255,0.22)"
+    },
+    {
+      "id": "rail-fill",
+      "type": "rect",
+      "x": "{{round(canvas.width * 0.1)}}",
+      "y": "{{round(canvas.height * 0.8) + round(min(canvas.width, canvas.height) * 0.04) - 3}}",
+      "width": 1,
+      "height": 6,
+      "radius": 3,
+      "fill": "{{accent}}",
+      "animations": [
+        {
+          "property": "width",
+          "keyframes": [
+            {
+              "frame": 10,
+              "value": 1
+            },
+            {
+              "frame": 138,
+              "value": "{{round(canvas.width * 0.8)}}",
+              "easing": "land"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "disc-0",
+      "type": "circle",
+      "x": "{{round(canvas.width * 0.1) + 0 * round(canvas.width * 0.2)}}",
+      "y": "{{round(canvas.height * 0.8) + round(min(canvas.width, canvas.height) * 0.04)}}",
+      "width": "{{round(min(canvas.width, canvas.height) * 0.082)}}",
+      "fill": "#1a2342",
+      "stroke": "rgba(255,255,255,0.3)",
+      "strokeWidth": 2
+    },
+    {
+      "id": "lit-0",
+      "type": "circle",
+      "x": "{{round(canvas.width * 0.1) + 0 * round(canvas.width * 0.2)}}",
+      "y": "{{round(canvas.height * 0.8) + round(min(canvas.width, canvas.height) * 0.04)}}",
+      "width": "{{round(min(canvas.width, canvas.height) * 0.082)}}",
+      "fill": "{{accent}}",
+      "startFrame": 14,
+      "shadow": {
+        "color": "#2457FF",
+        "blur": 26,
+        "offsetX": 0,
+        "offsetY": 0
+      },
+      "animations": [
+        {
+          "property": "scale",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0.4,
+              "easing": "pop"
+            },
+            {
+              "frame": 10,
+              "value": 1
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "glyph-0",
+      "type": "path",
+      "d": "M12 22 C6 14 5 11 5 9 A7 7 0 0 1 19 9 C19 11 18 14 12 22 Z M12 6 A3 3 0 1 0 12.01 6",
+      "width": 24,
+      "height": 24,
+      "scale": "{{min(canvas.width, canvas.height) * 0.04 / 24}}",
+      "stroke": "#ffffff",
+      "strokeWidth": 2,
+      "lineCap": "round",
+      "lineJoin": "round",
+      "x": "{{round(canvas.width * 0.1) + 0 * round(canvas.width * 0.2) - round(min(canvas.width, canvas.height) * 0.02)}}",
+      "y": "{{round(canvas.height * 0.8) + round(min(canvas.width, canvas.height) * 0.02)}}"
+    },
+    {
+      "id": "name-0",
+      "type": "text",
+      "content": "{{step1}}",
+      "fontSize": "{{round(min(canvas.width, canvas.height) * 0.026)}}",
+      "color": "#ffffff",
+      "x": "{{round(canvas.width * 0.1) + 0 * round(canvas.width * 0.2)}}",
+      "y": "{{round(canvas.height * 0.8) + round(min(canvas.width, canvas.height) * 0.1)}}",
+      "textAlign": "center",
+      "fontWeight": 700,
+      "maxWidth": "{{round(canvas.width * 0.19)}}",
+      "maxLines": 1,
+      "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.016)}}",
+      "startFrame": 14,
+      "animations": [
+        {
+          "property": "opacity",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0.35
+            },
+            {
+              "frame": 10,
+              "value": 1
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "sfx-0",
+      "type": "audio",
+      "src": "sfx:tick",
+      "startFrame": 14,
+      "volume": 0.3
+    },
+    {
+      "id": "disc-1",
+      "type": "circle",
+      "x": "{{round(canvas.width * 0.1) + 1 * round(canvas.width * 0.2)}}",
+      "y": "{{round(canvas.height * 0.8) + round(min(canvas.width, canvas.height) * 0.04)}}",
+      "width": "{{round(min(canvas.width, canvas.height) * 0.082)}}",
+      "fill": "#1a2342",
+      "stroke": "rgba(255,255,255,0.3)",
+      "strokeWidth": 2
+    },
+    {
+      "id": "lit-1",
+      "type": "circle",
+      "x": "{{round(canvas.width * 0.1) + 1 * round(canvas.width * 0.2)}}",
+      "y": "{{round(canvas.height * 0.8) + round(min(canvas.width, canvas.height) * 0.04)}}",
+      "width": "{{round(min(canvas.width, canvas.height) * 0.082)}}",
+      "fill": "{{accent}}",
+      "startFrame": 42,
+      "shadow": {
+        "color": "#2457FF",
+        "blur": 26,
+        "offsetX": 0,
+        "offsetY": 0
+      },
+      "animations": [
+        {
+          "property": "scale",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0.4,
+              "easing": "pop"
+            },
+            {
+              "frame": 10,
+              "value": 1
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "glyph-1",
+      "type": "path",
+      "d": "M12 2 L13.8 8.2 L20 10 L13.8 11.8 L12 18 L10.2 11.8 L4 10 L10.2 8.2 Z M19 16 L19.8 18.2 L22 19 L19.8 19.8 L19 22 L18.2 19.8 L16 19 L18.2 18.2 Z",
+      "width": 24,
+      "height": 24,
+      "scale": "{{min(canvas.width, canvas.height) * 0.04 / 24}}",
+      "stroke": "#ffffff",
+      "strokeWidth": 2,
+      "lineCap": "round",
+      "lineJoin": "round",
+      "x": "{{round(canvas.width * 0.1) + 1 * round(canvas.width * 0.2) - round(min(canvas.width, canvas.height) * 0.02)}}",
+      "y": "{{round(canvas.height * 0.8) + round(min(canvas.width, canvas.height) * 0.02)}}"
+    },
+    {
+      "id": "name-1",
+      "type": "text",
+      "content": "{{step2}}",
+      "fontSize": "{{round(min(canvas.width, canvas.height) * 0.026)}}",
+      "color": "#ffffff",
+      "x": "{{round(canvas.width * 0.1) + 1 * round(canvas.width * 0.2)}}",
+      "y": "{{round(canvas.height * 0.8) + round(min(canvas.width, canvas.height) * 0.1)}}",
+      "textAlign": "center",
+      "fontWeight": 700,
+      "maxWidth": "{{round(canvas.width * 0.19)}}",
+      "maxLines": 1,
+      "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.016)}}",
+      "startFrame": 42,
+      "animations": [
+        {
+          "property": "opacity",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0.35
+            },
+            {
+              "frame": 10,
+              "value": 1
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "sfx-1",
+      "type": "audio",
+      "src": "sfx:tick",
+      "startFrame": 42,
+      "volume": 0.3
+    },
+    {
+      "id": "disc-2",
+      "type": "circle",
+      "x": "{{round(canvas.width * 0.1) + 2 * round(canvas.width * 0.2)}}",
+      "y": "{{round(canvas.height * 0.8) + round(min(canvas.width, canvas.height) * 0.04)}}",
+      "width": "{{round(min(canvas.width, canvas.height) * 0.082)}}",
+      "fill": "#1a2342",
+      "stroke": "rgba(255,255,255,0.3)",
+      "strokeWidth": 2
+    },
+    {
+      "id": "lit-2",
+      "type": "circle",
+      "x": "{{round(canvas.width * 0.1) + 2 * round(canvas.width * 0.2)}}",
+      "y": "{{round(canvas.height * 0.8) + round(min(canvas.width, canvas.height) * 0.04)}}",
+      "width": "{{round(min(canvas.width, canvas.height) * 0.082)}}",
+      "fill": "{{accent}}",
+      "startFrame": 70,
+      "shadow": {
+        "color": "#2457FF",
+        "blur": 26,
+        "offsetX": 0,
+        "offsetY": 0
+      },
+      "animations": [
+        {
+          "property": "scale",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0.4,
+              "easing": "pop"
+            },
+            {
+              "frame": 10,
+              "value": 1
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "glyph-2",
+      "type": "path",
+      "d": "M5 12.5 L10 17.5 L19 7",
+      "width": 24,
+      "height": 24,
+      "scale": "{{min(canvas.width, canvas.height) * 0.04 / 24}}",
+      "stroke": "#ffffff",
+      "strokeWidth": 2,
+      "lineCap": "round",
+      "lineJoin": "round",
+      "x": "{{round(canvas.width * 0.1) + 2 * round(canvas.width * 0.2) - round(min(canvas.width, canvas.height) * 0.02)}}",
+      "y": "{{round(canvas.height * 0.8) + round(min(canvas.width, canvas.height) * 0.02)}}"
+    },
+    {
+      "id": "name-2",
+      "type": "text",
+      "content": "{{step3}}",
+      "fontSize": "{{round(min(canvas.width, canvas.height) * 0.026)}}",
+      "color": "#ffffff",
+      "x": "{{round(canvas.width * 0.1) + 2 * round(canvas.width * 0.2)}}",
+      "y": "{{round(canvas.height * 0.8) + round(min(canvas.width, canvas.height) * 0.1)}}",
+      "textAlign": "center",
+      "fontWeight": 700,
+      "maxWidth": "{{round(canvas.width * 0.19)}}",
+      "maxLines": 1,
+      "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.016)}}",
+      "startFrame": 70,
+      "animations": [
+        {
+          "property": "opacity",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0.35
+            },
+            {
+              "frame": 10,
+              "value": 1
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "sfx-2",
+      "type": "audio",
+      "src": "sfx:tick",
+      "startFrame": 70,
+      "volume": 0.3
+    },
+    {
+      "id": "disc-3",
+      "type": "circle",
+      "x": "{{round(canvas.width * 0.1) + 3 * round(canvas.width * 0.2)}}",
+      "y": "{{round(canvas.height * 0.8) + round(min(canvas.width, canvas.height) * 0.04)}}",
+      "width": "{{round(min(canvas.width, canvas.height) * 0.082)}}",
+      "fill": "#1a2342",
+      "stroke": "rgba(255,255,255,0.3)",
+      "strokeWidth": 2
+    },
+    {
+      "id": "lit-3",
+      "type": "circle",
+      "x": "{{round(canvas.width * 0.1) + 3 * round(canvas.width * 0.2)}}",
+      "y": "{{round(canvas.height * 0.8) + round(min(canvas.width, canvas.height) * 0.04)}}",
+      "width": "{{round(min(canvas.width, canvas.height) * 0.082)}}",
+      "fill": "{{accent}}",
+      "startFrame": 98,
+      "shadow": {
+        "color": "#2457FF",
+        "blur": 26,
+        "offsetX": 0,
+        "offsetY": 0
+      },
+      "animations": [
+        {
+          "property": "scale",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0.4,
+              "easing": "pop"
+            },
+            {
+              "frame": 10,
+              "value": 1
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "glyph-3",
+      "type": "path",
+      "d": "M3 6 H15 V18 H3 Z M15 10 L21 7 V17 L15 14",
+      "width": 24,
+      "height": 24,
+      "scale": "{{min(canvas.width, canvas.height) * 0.04 / 24}}",
+      "stroke": "#ffffff",
+      "strokeWidth": 2,
+      "lineCap": "round",
+      "lineJoin": "round",
+      "x": "{{round(canvas.width * 0.1) + 3 * round(canvas.width * 0.2) - round(min(canvas.width, canvas.height) * 0.02)}}",
+      "y": "{{round(canvas.height * 0.8) + round(min(canvas.width, canvas.height) * 0.02)}}"
+    },
+    {
+      "id": "name-3",
+      "type": "text",
+      "content": "{{step4}}",
+      "fontSize": "{{round(min(canvas.width, canvas.height) * 0.026)}}",
+      "color": "#ffffff",
+      "x": "{{round(canvas.width * 0.1) + 3 * round(canvas.width * 0.2)}}",
+      "y": "{{round(canvas.height * 0.8) + round(min(canvas.width, canvas.height) * 0.1)}}",
+      "textAlign": "center",
+      "fontWeight": 700,
+      "maxWidth": "{{round(canvas.width * 0.19)}}",
+      "maxLines": 1,
+      "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.016)}}",
+      "startFrame": 98,
+      "animations": [
+        {
+          "property": "opacity",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0.35
+            },
+            {
+              "frame": 10,
+              "value": 1
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "sfx-3",
+      "type": "audio",
+      "src": "sfx:tick",
+      "startFrame": 98,
+      "volume": 0.3
+    },
+    {
+      "id": "disc-4",
+      "type": "circle",
+      "x": "{{round(canvas.width * 0.1) + 4 * round(canvas.width * 0.2)}}",
+      "y": "{{round(canvas.height * 0.8) + round(min(canvas.width, canvas.height) * 0.04)}}",
+      "width": "{{round(min(canvas.width, canvas.height) * 0.082)}}",
+      "fill": "#1a2342",
+      "stroke": "rgba(255,255,255,0.3)",
+      "strokeWidth": 2
+    },
+    {
+      "id": "lit-4",
+      "type": "circle",
+      "x": "{{round(canvas.width * 0.1) + 4 * round(canvas.width * 0.2)}}",
+      "y": "{{round(canvas.height * 0.8) + round(min(canvas.width, canvas.height) * 0.04)}}",
+      "width": "{{round(min(canvas.width, canvas.height) * 0.082)}}",
+      "fill": "{{accent}}",
+      "startFrame": 126,
+      "shadow": {
+        "color": "#2457FF",
+        "blur": 26,
+        "offsetX": 0,
+        "offsetY": 0
+      },
+      "animations": [
+        {
+          "property": "scale",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0.4,
+              "easing": "pop"
+            },
+            {
+              "frame": 10,
+              "value": 1
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "glyph-4",
+      "type": "path",
+      "d": "M12 2.5 L14.9 8.9 L22 9.7 L16.8 14.5 L18.2 21.5 L12 18 L5.8 21.5 L7.2 14.5 L2 9.7 L9.1 8.9 Z",
+      "width": 24,
+      "height": 24,
+      "scale": "{{min(canvas.width, canvas.height) * 0.04 / 24}}",
+      "stroke": "#ffffff",
+      "strokeWidth": 2,
+      "lineCap": "round",
+      "lineJoin": "round",
+      "x": "{{round(canvas.width * 0.1) + 4 * round(canvas.width * 0.2) - round(min(canvas.width, canvas.height) * 0.02)}}",
+      "y": "{{round(canvas.height * 0.8) + round(min(canvas.width, canvas.height) * 0.02)}}"
+    },
+    {
+      "id": "name-4",
+      "type": "text",
+      "content": "{{step5}}",
+      "fontSize": "{{round(min(canvas.width, canvas.height) * 0.026)}}",
+      "color": "#ffffff",
+      "x": "{{round(canvas.width * 0.1) + 4 * round(canvas.width * 0.2)}}",
+      "y": "{{round(canvas.height * 0.8) + round(min(canvas.width, canvas.height) * 0.1)}}",
+      "textAlign": "center",
+      "fontWeight": 700,
+      "maxWidth": "{{round(canvas.width * 0.19)}}",
+      "maxLines": 1,
+      "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.016)}}",
+      "startFrame": 126,
+      "animations": [
+        {
+          "property": "opacity",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0.35
+            },
+            {
+              "frame": 10,
+              "value": 1
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "sfx-4",
+      "type": "audio",
+      "src": "sfx:tick",
+      "startFrame": 126,
+      "volume": 0.3
+    }
+  ]
+}