motionrender 0.0.0-stage → 0.2.1

package/blocks/fx-map-journey.json

@@ -0,0 +1,443 @@
+{
+  "id": "fx-map-journey",
+  "name": "Map pin journey",
+  "category": "effect",
+  "kind": "scene",
+  "durationFrames": 180,
+  "transition": {
+    "type": "fade",
+    "durationFrames": 12
+  },
+  "description": "A stylised map (grid and soft land shapes, not real geography) with a route drawing itself from one place to another and two pins dropping in. Give the places and where they sit on the map.",
+  "params": {
+    "from": {
+      "type": "string",
+      "default": "San Francisco"
+    },
+    "to": {
+      "type": "string",
+      "default": "Tokyo"
+    },
+    "fromX": {
+      "type": "number",
+      "default": 0.2,
+      "description": "Left to right, 0 to 1"
+    },
+    "fromY": {
+      "type": "number",
+      "default": 0.55,
+      "description": "Top to bottom, 0 to 1"
+    },
+    "toX": {
+      "type": "number",
+      "default": 0.8
+    },
+    "toY": {
+      "type": "number",
+      "default": 0.4
+    }
+  },
+  "layers": [
+    {
+      "id": "bg",
+      "type": "rect",
+      "x": 0,
+      "y": 0,
+      "width": "{{canvas.width}}",
+      "height": "{{canvas.height}}",
+      "fill": "{{bg}}"
+    },
+    {
+      "id": "grid-v0",
+      "type": "rect",
+      "x": "{{round(canvas.width * 0.1) + 0 * round(canvas.width * 0.1)}}",
+      "y": 0,
+      "width": 2,
+      "height": "{{canvas.height}}",
+      "fill": "rgba(255,255,255,0.07)"
+    },
+    {
+      "id": "grid-v1",
+      "type": "rect",
+      "x": "{{round(canvas.width * 0.1) + 1 * round(canvas.width * 0.1)}}",
+      "y": 0,
+      "width": 2,
+      "height": "{{canvas.height}}",
+      "fill": "rgba(255,255,255,0.07)"
+    },
+    {
+      "id": "grid-v2",
+      "type": "rect",
+      "x": "{{round(canvas.width * 0.1) + 2 * round(canvas.width * 0.1)}}",
+      "y": 0,
+      "width": 2,
+      "height": "{{canvas.height}}",
+      "fill": "rgba(255,255,255,0.07)"
+    },
+    {
+      "id": "grid-v3",
+      "type": "rect",
+      "x": "{{round(canvas.width * 0.1) + 3 * round(canvas.width * 0.1)}}",
+      "y": 0,
+      "width": 2,
+      "height": "{{canvas.height}}",
+      "fill": "rgba(255,255,255,0.07)"
+    },
+    {
+      "id": "grid-v4",
+      "type": "rect",
+      "x": "{{round(canvas.width * 0.1) + 4 * round(canvas.width * 0.1)}}",
+      "y": 0,
+      "width": 2,
+      "height": "{{canvas.height}}",
+      "fill": "rgba(255,255,255,0.07)"
+    },
+    {
+      "id": "grid-v5",
+      "type": "rect",
+      "x": "{{round(canvas.width * 0.1) + 5 * round(canvas.width * 0.1)}}",
+      "y": 0,
+      "width": 2,
+      "height": "{{canvas.height}}",
+      "fill": "rgba(255,255,255,0.07)"
+    },
+    {
+      "id": "grid-v6",
+      "type": "rect",
+      "x": "{{round(canvas.width * 0.1) + 6 * round(canvas.width * 0.1)}}",
+      "y": 0,
+      "width": 2,
+      "height": "{{canvas.height}}",
+      "fill": "rgba(255,255,255,0.07)"
+    },
+    {
+      "id": "grid-v7",
+      "type": "rect",
+      "x": "{{round(canvas.width * 0.1) + 7 * round(canvas.width * 0.1)}}",
+      "y": 0,
+      "width": 2,
+      "height": "{{canvas.height}}",
+      "fill": "rgba(255,255,255,0.07)"
+    },
+    {
+      "id": "grid-v8",
+      "type": "rect",
+      "x": "{{round(canvas.width * 0.1) + 8 * round(canvas.width * 0.1)}}",
+      "y": 0,
+      "width": 2,
+      "height": "{{canvas.height}}",
+      "fill": "rgba(255,255,255,0.07)"
+    },
+    {
+      "id": "grid-h0",
+      "type": "rect",
+      "x": 0,
+      "y": "{{round(canvas.height * 0.1) + 0 * round(canvas.height * 0.1)}}",
+      "width": "{{canvas.width}}",
+      "height": 2,
+      "fill": "rgba(255,255,255,0.07)"
+    },
+    {
+      "id": "grid-h1",
+      "type": "rect",
+      "x": 0,
+      "y": "{{round(canvas.height * 0.1) + 1 * round(canvas.height * 0.1)}}",
+      "width": "{{canvas.width}}",
+      "height": 2,
+      "fill": "rgba(255,255,255,0.07)"
+    },
+    {
+      "id": "grid-h2",
+      "type": "rect",
+      "x": 0,
+      "y": "{{round(canvas.height * 0.1) + 2 * round(canvas.height * 0.1)}}",
+      "width": "{{canvas.width}}",
+      "height": 2,
+      "fill": "rgba(255,255,255,0.07)"
+    },
+    {
+      "id": "grid-h3",
+      "type": "rect",
+      "x": 0,
+      "y": "{{round(canvas.height * 0.1) + 3 * round(canvas.height * 0.1)}}",
+      "width": "{{canvas.width}}",
+      "height": 2,
+      "fill": "rgba(255,255,255,0.07)"
+    },
+    {
+      "id": "grid-h4",
+      "type": "rect",
+      "x": 0,
+      "y": "{{round(canvas.height * 0.1) + 4 * round(canvas.height * 0.1)}}",
+      "width": "{{canvas.width}}",
+      "height": 2,
+      "fill": "rgba(255,255,255,0.07)"
+    },
+    {
+      "id": "grid-h5",
+      "type": "rect",
+      "x": 0,
+      "y": "{{round(canvas.height * 0.1) + 5 * round(canvas.height * 0.1)}}",
+      "width": "{{canvas.width}}",
+      "height": 2,
+      "fill": "rgba(255,255,255,0.07)"
+    },
+    {
+      "id": "grid-h6",
+      "type": "rect",
+      "x": 0,
+      "y": "{{round(canvas.height * 0.1) + 6 * round(canvas.height * 0.1)}}",
+      "width": "{{canvas.width}}",
+      "height": 2,
+      "fill": "rgba(255,255,255,0.07)"
+    },
+    {
+      "id": "grid-h7",
+      "type": "rect",
+      "x": 0,
+      "y": "{{round(canvas.height * 0.1) + 7 * round(canvas.height * 0.1)}}",
+      "width": "{{canvas.width}}",
+      "height": 2,
+      "fill": "rgba(255,255,255,0.07)"
+    },
+    {
+      "id": "grid-h8",
+      "type": "rect",
+      "x": 0,
+      "y": "{{round(canvas.height * 0.1) + 8 * round(canvas.height * 0.1)}}",
+      "width": "{{canvas.width}}",
+      "height": 2,
+      "fill": "rgba(255,255,255,0.07)"
+    },
+    {
+      "id": "land-0",
+      "type": "circle",
+      "x": "{{round(canvas.width * 0.12)}}",
+      "y": "{{round(canvas.height * 0.5)}}",
+      "width": "{{round(min(canvas.width, canvas.height) * 0.41600000000000004)}}",
+      "fill": "rgba(255,255,255,0.06)",
+      "blur": 6
+    },
+    {
+      "id": "land-1",
+      "type": "circle",
+      "x": "{{round(canvas.width * 0.6)}}",
+      "y": "{{round(canvas.height * 0.38)}}",
+      "width": "{{round(min(canvas.width, canvas.height) * 0.544)}}",
+      "fill": "rgba(255,255,255,0.06)",
+      "blur": 6
+    },
+    {
+      "id": "land-2",
+      "type": "circle",
+      "x": "{{round(canvas.width * 0.4)}}",
+      "y": "{{round(canvas.height * 0.72)}}",
+      "width": "{{round(min(canvas.width, canvas.height) * 0.256)}}",
+      "fill": "rgba(255,255,255,0.06)",
+      "blur": 6
+    },
+    {
+      "id": "route",
+      "type": "path",
+      "d": "{{\"M \" + string(round(canvas.width * fromX)) + \" \" + string(round(canvas.height * fromY)) + \" Q \" + string(round(canvas.width * (fromX + toX) / 2)) + \" \" + string(round(canvas.height * (min(fromY, toY) - 0.18))) + \" \" + string(round(canvas.width * toX)) + \" \" + string(round(canvas.height * toY))}}",
+      "x": 0,
+      "y": 0,
+      "width": "{{canvas.width}}",
+      "height": "{{canvas.height}}",
+      "stroke": "{{accent}}",
+      "strokeWidth": 6,
+      "lineCap": "round",
+      "fill": "transparent",
+      "shadow": {
+        "color": "#2457FF",
+        "blur": 16,
+        "offsetX": 0,
+        "offsetY": 0
+      },
+      "startFrame": 30,
+      "animations": [
+        {
+          "property": "trimEnd",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0
+            },
+            {
+              "frame": 90,
+              "value": 1,
+              "easing": "glide"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "pin-from",
+      "type": "group",
+      "x": "{{round(canvas.width * fromX)}}",
+      "y": "{{round(canvas.height * fromY)}}",
+      "startFrame": 14,
+      "animations": [
+        {
+          "property": "opacity",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0
+            },
+            {
+              "frame": 8,
+              "value": 1
+            }
+          ]
+        },
+        {
+          "property": "scale",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0.2,
+              "easing": "pop"
+            },
+            {
+              "frame": 16,
+              "value": 1
+            }
+          ]
+        }
+      ],
+      "originX": 0,
+      "originY": 0,
+      "children": [
+        {
+          "id": "halo",
+          "type": "circle",
+          "x": 0,
+          "y": 0,
+          "width": "{{round(min(canvas.width, canvas.height) * 0.09)}}",
+          "fill": "{{accent}}",
+          "opacity": 0.3
+        },
+        {
+          "id": "dot",
+          "type": "circle",
+          "x": 0,
+          "y": 0,
+          "width": "{{round(min(canvas.width, canvas.height) * 0.035)}}",
+          "fill": "#ffffff",
+          "stroke": "{{accent}}",
+          "strokeWidth": 6
+        },
+        {
+          "id": "name",
+          "type": "text",
+          "content": "{{from}}",
+          "fontSize": "{{round(min(canvas.width, canvas.height) * 0.032)}}",
+          "color": "#ffffff",
+          "x": 0,
+          "y": "{{round(min(canvas.width, canvas.height) * 0.055)}}",
+          "textAlign": "center",
+          "fontWeight": 800,
+          "maxWidth": "{{round(canvas.width * 0.4)}}",
+          "maxLines": 1,
+          "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.02)}}"
+        }
+      ]
+    },
+    {
+      "id": "pin-to",
+      "type": "group",
+      "x": "{{round(canvas.width * toX)}}",
+      "y": "{{round(canvas.height * toY)}}",
+      "startFrame": 120,
+      "animations": [
+        {
+          "property": "opacity",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0
+            },
+            {
+              "frame": 8,
+              "value": 1
+            }
+          ]
+        },
+        {
+          "property": "scale",
+          "keyframes": [
+            {
+              "frame": 0,
+              "value": 0.2,
+              "easing": "pop"
+            },
+            {
+              "frame": 16,
+              "value": 1
+            }
+          ]
+        }
+      ],
+      "originX": 0,
+      "originY": 0,
+      "children": [
+        {
+          "id": "halo",
+          "type": "circle",
+          "x": 0,
+          "y": 0,
+          "width": "{{round(min(canvas.width, canvas.height) * 0.09)}}",
+          "fill": "{{accent}}",
+          "opacity": 0.3
+        },
+        {
+          "id": "dot",
+          "type": "circle",
+          "x": 0,
+          "y": 0,
+          "width": "{{round(min(canvas.width, canvas.height) * 0.035)}}",
+          "fill": "#ffffff",
+          "stroke": "{{accent}}",
+          "strokeWidth": 6
+        },
+        {
+          "id": "name",
+          "type": "text",
+          "content": "{{to}}",
+          "fontSize": "{{round(min(canvas.width, canvas.height) * 0.032)}}",
+          "color": "#ffffff",
+          "x": 0,
+          "y": "{{round(min(canvas.width, canvas.height) * 0.055)}}",
+          "textAlign": "center",
+          "fontWeight": 800,
+          "maxWidth": "{{round(canvas.width * 0.4)}}",
+          "maxLines": 1,
+          "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.02)}}"
+        }
+      ]
+    },
+    {
+      "id": "sfx-1",
+      "type": "audio",
+      "src": "sfx:pop",
+      "startFrame": 14,
+      "volume": 0.35
+    },
+    {
+      "id": "sfx-2",
+      "type": "audio",
+      "src": "sfx:whoosh",
+      "startFrame": 30,
+      "volume": 0.3
+    },
+    {
+      "id": "sfx-3",
+      "type": "audio",
+      "src": "sfx:ding",
+      "startFrame": 120,
+      "volume": 0.35
+    }
+  ]
+}