motionrender 0.0.0-stage → 0.2.1

package/templates/product-wide/composition.json

@@ -0,0 +1,1609 @@
+{
+  "$schema": "./composition.schema.json",
+  "version": "1.0",
+  "id": "product-wide",
+  "name": "Product showcase (16:9)",
+  "width": 1920,
+  "height": 1080,
+  "fps": 30,
+  "durationFrames": "auto",
+  "motionBlur": {
+    "samples": 4,
+    "shutter": 180
+  },
+  "variables": {
+    "bg": {
+      "type": "color",
+      "default": "#f6f1e8",
+      "description": "Theme: bg"
+    },
+    "surface": {
+      "type": "color",
+      "default": "#e9e1d2",
+      "description": "Theme: surface"
+    },
+    "text": {
+      "type": "color",
+      "default": "#1d1a16",
+      "description": "Theme: text"
+    },
+    "muted": {
+      "type": "color",
+      "default": "#6e665a",
+      "description": "Theme: muted"
+    },
+    "accent": {
+      "type": "color",
+      "default": "#d9482b",
+      "description": "Theme: accent"
+    },
+    "accent2": {
+      "type": "color",
+      "default": "#1f6f5c",
+      "description": "Theme: accent2"
+    },
+    "radius": {
+      "type": "number",
+      "default": 8,
+      "description": "Theme: radius"
+    },
+    "headWeight": {
+      "type": "number",
+      "default": 800,
+      "description": "Theme: headWeight"
+    },
+    "title": {
+      "type": "string",
+      "default": "Everything in one place",
+      "description": "The big line next to the phone (about 4 words)"
+    },
+    "subtitle": {
+      "type": "string",
+      "default": "See your whole day at a glance.",
+      "description": "One supporting sentence"
+    },
+    "image": {
+      "type": "string",
+      "default": "",
+      "description": "Picture id for the phone screen, or empty"
+    },
+    "benefitsTitle": {
+      "type": "string",
+      "default": "Why people switch",
+      "description": "Heading of the three benefits"
+    },
+    "benefits": {
+      "type": "list",
+      "items": {
+        "icon": {
+          "type": "string",
+          "default": "check"
+        },
+        "label": {
+          "type": "string",
+          "default": ""
+        },
+        "detail": {
+          "type": "string",
+          "default": ""
+        }
+      },
+      "default": [
+        {
+          "icon": "bolt",
+          "label": "Fast",
+          "detail": "Ready in minutes, not days."
+        },
+        {
+          "icon": "heart",
+          "label": "Loved",
+          "detail": "Rated 4.9 by our customers."
+        },
+        {
+          "icon": "clock",
+          "label": "Always on time",
+          "detail": "Delivered when you expect it."
+        }
+      ],
+      "description": "Exactly three: icon is one of check, bolt, star, heart, clock; a short label; one line of detail"
+    },
+    "image2": {
+      "type": "string",
+      "default": "",
+      "description": "Picture id for the story scene, or empty"
+    },
+    "storyKicker": {
+      "type": "string",
+      "default": "OUR STORY",
+      "description": "Small label"
+    },
+    "storyHeadline": {
+      "type": "string",
+      "default": "Built by people who care",
+      "description": "Headline of the story scene"
+    },
+    "storyBody": {
+      "type": "string",
+      "default": "Every detail is tested with real customers before it ships.",
+      "description": "Two sentences at most"
+    },
+    "ctaHeadline": {
+      "type": "string",
+      "default": "Try it today",
+      "description": "Closing line"
+    },
+    "ctaButton": {
+      "type": "string",
+      "default": "Get started",
+      "description": "Button text"
+    },
+    "url": {
+      "type": "string",
+      "default": "example.com",
+      "description": "Web address"
+    }
+  },
+  "scenes": [
+    {
+      "id": "phone-mockup",
+      "name": "Phone mockup",
+      "durationFrames": 150,
+      "camera": {
+        "animations": [
+          {
+            "property": "zoom",
+            "keyframes": [
+              {
+                "frame": 0,
+                "value": 1
+              },
+              {
+                "frame": 150,
+                "value": 1.04,
+                "easing": "drift"
+              }
+            ]
+          }
+        ]
+      },
+      "layers": [
+        {
+          "use": "phone_mockup",
+          "id": "phone-mockup-block",
+          "with": {
+            "headline": "{{title}}",
+            "subtitle": "{{subtitle}}",
+            "image": "{{image}}"
+          }
+        }
+      ]
+    },
+    {
+      "id": "icon-row",
+      "name": "Icon row",
+      "durationFrames": 150,
+      "camera": {
+        "animations": [
+          {
+            "property": "zoom",
+            "keyframes": [
+              {
+                "frame": 0,
+                "value": 1
+              },
+              {
+                "frame": 150,
+                "value": 1.04,
+                "easing": "drift"
+              }
+            ]
+          }
+        ]
+      },
+      "layers": [
+        {
+          "use": "icon_row",
+          "id": "icon-row-block",
+          "with": {
+            "title": "{{benefitsTitle}}",
+            "items": "{{benefits}}"
+          }
+        }
+      ],
+      "transitionIn": {
+        "type": "push",
+        "durationFrames": 16,
+        "direction": "left",
+        "easing": "glide"
+      }
+    },
+    {
+      "id": "split-screen",
+      "name": "Split screen",
+      "durationFrames": 150,
+      "camera": {
+        "animations": [
+          {
+            "property": "zoom",
+            "keyframes": [
+              {
+                "frame": 0,
+                "value": 1.02
+              },
+              {
+                "frame": 150,
+                "value": 1.07,
+                "easing": "drift"
+              }
+            ]
+          }
+        ]
+      },
+      "layers": [
+        {
+          "use": "split_screen",
+          "id": "split-screen-block",
+          "with": {
+            "image": "{{image2}}",
+            "kicker": "{{storyKicker}}",
+            "headline": "{{storyHeadline}}",
+            "body": "{{storyBody}}"
+          }
+        }
+      ],
+      "transitionIn": {
+        "type": "push",
+        "durationFrames": 16,
+        "direction": "left",
+        "easing": "glide"
+      }
+    },
+    {
+      "id": "cta-end",
+      "name": "Call to action",
+      "durationFrames": 120,
+      "camera": {
+        "animations": [
+          {
+            "property": "zoom",
+            "keyframes": [
+              {
+                "frame": 0,
+                "value": 1
+              },
+              {
+                "frame": 120,
+                "value": 1.06,
+                "easing": "drift"
+              }
+            ]
+          }
+        ]
+      },
+      "layers": [
+        {
+          "use": "cta_end",
+          "id": "cta-end-block",
+          "with": {
+            "headline": "{{ctaHeadline}}",
+            "button": "{{ctaButton}}",
+            "url": "{{url}}"
+          }
+        }
+      ],
+      "transitionIn": {
+        "type": "push",
+        "durationFrames": 16,
+        "direction": "left",
+        "easing": "glide"
+      }
+    }
+  ],
+  "components": {
+    "phone_mockup": {
+      "description": "A phone showing your screenshot (or a stand-in app) beside a headline. Side by side on wide video, stacked on tall.",
+      "params": {
+        "headline": {
+          "type": "string",
+          "default": "Everything in one place"
+        },
+        "subtitle": {
+          "type": "string",
+          "default": "See your whole day at a glance."
+        },
+        "image": {
+          "type": "string",
+          "default": "",
+          "description": "A screenshot (asset id or relative path); leave empty for a stand-in app"
+        }
+      },
+      "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.15)}}",
+          "y": "{{round(canvas.height * 0.2)}}",
+          "width": "{{round(min(canvas.width, canvas.height) * 1.1)}}",
+          "fill": "{{accent}}",
+          "opacity": 0.14,
+          "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.15)}}"
+                },
+                {
+                  "frame": 180,
+                  "value": "{{round(canvas.width * 0.04999999999999999)}}",
+                  "easing": "drift"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "id": "glow2",
+          "type": "circle",
+          "x": "{{round(canvas.width * 0.85)}}",
+          "y": "{{round(canvas.height * 0.8)}}",
+          "width": "{{round(min(canvas.width, canvas.height) * 0.8)}}",
+          "fill": "{{accent2}}",
+          "opacity": 0.084,
+          "blur": 140,
+          "animations": [
+            {
+              "property": "y",
+              "keyframes": [
+                {
+                  "frame": 0,
+                  "value": "{{round(canvas.height * 0.8)}}"
+                },
+                {
+                  "frame": 180,
+                  "value": "{{round(canvas.height * 0.7)}}",
+                  "easing": "drift"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "id": "row",
+          "type": "group",
+          "x": 0,
+          "y": 0,
+          "width": "{{canvas.width}}",
+          "height": "{{canvas.height}}",
+          "layout": {
+            "direction": "{{canvas.width > canvas.height ? 'row' : 'column'}}",
+            "gap": "{{round(min(canvas.width, canvas.height) * 0.07)}}",
+            "align": "center",
+            "justify": "center"
+          },
+          "children": [
+            {
+              "id": "copy",
+              "type": "group",
+              "width": "{{canvas.width > canvas.height ? round(canvas.width * 0.38) : round(canvas.width * 0.84)}}",
+              "layout": {
+                "direction": "column",
+                "gap": "{{round(min(canvas.width, canvas.height) * 0.025)}}",
+                "align": "{{canvas.width > canvas.height ? 'start' : 'center'}}"
+              },
+              "children": [
+                {
+                  "id": "headline",
+                  "type": "text",
+                  "content": "{{headline}}",
+                  "fontSize": "{{round(min(canvas.width, canvas.height) * 0.075)}}",
+                  "color": "{{text}}",
+                  "fontWeight": "{{headWeight}}",
+                  "textAlign": "{{canvas.width > canvas.height ? 'left' : 'center'}}",
+                  "maxWidth": "{{canvas.width > canvas.height ? round(canvas.width * 0.38) : round(canvas.width * 0.84)}}",
+                  "maxLines": 4,
+                  "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.05)}}",
+                  "lineHeight": 1.08,
+                  "startFrame": 0,
+                  "animations": [
+                    {
+                      "property": "opacity",
+                      "keyframes": [
+                        {
+                          "frame": 0,
+                          "value": 0
+                        },
+                        {
+                          "frame": 14,
+                          "value": 1,
+                          "easing": "glide"
+                        }
+                      ]
+                    },
+                    {
+                      "property": "y",
+                      "keyframes": [
+                        {
+                          "frame": 0,
+                          "value": 30,
+                          "easing": "land"
+                        },
+                        {
+                          "frame": 18,
+                          "value": 0
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "id": "rule",
+                  "type": "rect",
+                  "width": "{{round(min(canvas.width, canvas.height) * 0.12)}}",
+                  "height": "{{round(min(canvas.width, canvas.height) * 0.008)}}",
+                  "radius": "{{round(min(canvas.width, canvas.height) * 0.004)}}",
+                  "fill": "{{accent}}",
+                  "startFrame": 18,
+                  "animations": [
+                    {
+                      "property": "width",
+                      "keyframes": [
+                        {
+                          "frame": 0,
+                          "value": 1
+                        },
+                        {
+                          "frame": 20,
+                          "value": "{{round(min(canvas.width, canvas.height) * 0.12)}}",
+                          "easing": "land"
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "id": "subtitle",
+                  "type": "text",
+                  "content": "{{subtitle}}",
+                  "fontSize": "{{round(min(canvas.width, canvas.height) * 0.04)}}",
+                  "color": "{{muted}}",
+                  "textAlign": "{{canvas.width > canvas.height ? 'left' : 'center'}}",
+                  "maxWidth": "{{canvas.width > canvas.height ? round(canvas.width * 0.36) : round(canvas.width * 0.8)}}",
+                  "maxLines": 3,
+                  "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.032)}}",
+                  "startFrame": 24,
+                  "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": "phone",
+              "type": "group",
+              "width": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49)}}",
+              "height": "{{round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4)}}",
+              "animations": [
+                {
+                  "property": "y",
+                  "keyframes": [
+                    {
+                      "frame": 0,
+                      "value": "{{round(canvas.height * 0.1)}}",
+                      "easing": "land"
+                    },
+                    {
+                      "frame": 26,
+                      "value": 0
+                    },
+                    {
+                      "frame": 100,
+                      "value": "{{round(-canvas.height * 0.012)}}",
+                      "easing": "drift"
+                    },
+                    {
+                      "frame": 150,
+                      "value": 0,
+                      "easing": "drift"
+                    }
+                  ]
+                },
+                {
+                  "property": "opacity",
+                  "keyframes": [
+                    {
+                      "frame": 0,
+                      "value": 0
+                    },
+                    {
+                      "frame": 12,
+                      "value": 1
+                    }
+                  ]
+                }
+              ],
+              "children": [
+                {
+                  "id": "shadow",
+                  "type": "rect",
+                  "x": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.04)}}",
+                  "y": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.06)}}",
+                  "width": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49)}}",
+                  "height": "{{round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4)}}",
+                  "radius": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.14)}}",
+                  "fill": "#000000",
+                  "opacity": 0.35,
+                  "blur": 30
+                },
+                {
+                  "id": "body",
+                  "type": "rect",
+                  "x": 0,
+                  "y": 0,
+                  "width": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49)}}",
+                  "height": "{{round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4)}}",
+                  "radius": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.14)}}",
+                  "fill": "{{surface}}",
+                  "stroke": "{{muted}}",
+                  "strokeWidth": 2
+                },
+                {
+                  "id": "screen",
+                  "type": "rect",
+                  "x": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.045)}}",
+                  "y": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.045)}}",
+                  "width": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) - 2 * round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.045)}}",
+                  "height": "{{round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) - 2 * round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.045)}}",
+                  "radius": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.1)}}",
+                  "fill": "{{bg}}"
+                },
+                {
+                  "if": "{{image}}",
+                  "id": "shot",
+                  "type": "image",
+                  "src": "{{image}}",
+                  "objectFit": "cover",
+                  "x": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.045)}}",
+                  "y": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.045)}}",
+                  "width": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) - 2 * round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.045)}}",
+                  "height": "{{round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) - 2 * round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.045)}}",
+                  "radius": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.1)}}"
+                },
+                {
+                  "if": "{{!image}}",
+                  "id": "app",
+                  "type": "group",
+                  "x": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.045)}}",
+                  "y": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.045)}}",
+                  "children": [
+                    {
+                      "id": "head",
+                      "type": "rect",
+                      "x": 0,
+                      "y": 0,
+                      "width": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) - 2 * round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.045)}}",
+                      "height": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.16)}}",
+                      "radius": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.1)}}",
+                      "fill": "{{accent}}"
+                    },
+                    {
+                      "id": "row1",
+                      "type": "rect",
+                      "x": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.06)}}",
+                      "y": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.22)}}",
+                      "width": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.62)}}",
+                      "height": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.022)}}",
+                      "radius": 8,
+                      "fill": "{{muted}}",
+                      "opacity": 0.8
+                    },
+                    {
+                      "id": "row2",
+                      "type": "rect",
+                      "x": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.06)}}",
+                      "y": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.27)}}",
+                      "width": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.45)}}",
+                      "height": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.018)}}",
+                      "radius": 8,
+                      "fill": "{{muted}}",
+                      "opacity": 0.5
+                    },
+                    {
+                      "id": "card1",
+                      "type": "rect",
+                      "x": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.06)}}",
+                      "y": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.34)}}",
+                      "width": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.82)}}",
+                      "height": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.2)}}",
+                      "radius": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.05)}}",
+                      "fill": "{{surface}}"
+                    },
+                    {
+                      "id": "card2",
+                      "type": "rect",
+                      "x": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.06)}}",
+                      "y": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.58)}}",
+                      "width": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.82)}}",
+                      "height": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.2)}}",
+                      "radius": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.05)}}",
+                      "fill": "{{surface}}"
+                    },
+                    {
+                      "id": "dot",
+                      "type": "circle",
+                      "x": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.2)}}",
+                      "y": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.44)}}",
+                      "width": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.1)}}",
+                      "fill": "{{accent2}}"
+                    },
+                    {
+                      "id": "dot2",
+                      "type": "circle",
+                      "x": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.2)}}",
+                      "y": "{{round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.68)}}",
+                      "width": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.1)}}",
+                      "fill": "{{accent}}"
+                    }
+                  ]
+                },
+                {
+                  "id": "notch",
+                  "type": "rect",
+                  "x": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.36)}}",
+                  "y": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.065)}}",
+                  "width": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.28)}}",
+                  "height": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.055)}}",
+                  "radius": "{{round(round(round(canvas.width > canvas.height ? canvas.height * 0.74 : canvas.height * 0.4) * 0.49) * 0.03)}}",
+                  "fill": "{{surface}}"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "id": "sfx-in",
+          "type": "audio",
+          "src": "sfx:whoosh",
+          "startFrame": 2,
+          "volume": 0.4
+        },
+        {
+          "id": "sfx-land",
+          "type": "audio",
+          "src": "sfx:thump",
+          "startFrame": 24,
+          "volume": 0.3
+        }
+      ]
+    },
+    "icon_row": {
+      "description": "A title and three features, each with an icon (check, bolt, star, heart or clock), a label and a line of detail.",
+      "params": {
+        "title": {
+          "type": "string",
+          "default": "Why people switch"
+        },
+        "items": {
+          "type": "list",
+          "items": {
+            "icon": {
+              "type": "string",
+              "default": "check"
+            },
+            "label": {
+              "type": "string",
+              "default": ""
+            },
+            "detail": {
+              "type": "string",
+              "default": ""
+            }
+          },
+          "default": [
+            {
+              "icon": "bolt",
+              "label": "Fast",
+              "detail": "Ready in minutes, not days."
+            },
+            {
+              "icon": "heart",
+              "label": "Loved",
+              "detail": "Rated 4.9 by our customers."
+            },
+            {
+              "icon": "clock",
+              "label": "Always on time",
+              "detail": "Delivered when you expect it."
+            }
+          ]
+        }
+      },
+      "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.7)}}",
+          "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.30000000000000004)}}",
+          "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.30000000000000004)}}"
+                },
+                {
+                  "frame": 180,
+                  "value": "{{round(canvas.height * 0.20000000000000007)}}",
+                  "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.07)}}",
+            "align": "start",
+            "justify": "center"
+          },
+          "children": [
+            {
+              "id": "title",
+              "type": "text",
+              "content": "{{title}}",
+              "fontSize": "{{round(min(canvas.width, canvas.height) * 0.06)}}",
+              "color": "{{text}}",
+              "fontWeight": "{{headWeight}}",
+              "maxWidth": "{{round(canvas.width * 0.84)}}",
+              "maxLines": 2,
+              "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.04)}}",
+              "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": "cells",
+              "type": "group",
+              "width": "{{round(canvas.width * 0.84)}}",
+              "layout": {
+                "direction": "{{canvas.width > canvas.height ? 'row' : 'column'}}",
+                "gap": "{{round(min(canvas.width, canvas.height) * 0.05)}}",
+                "align": "start",
+                "justify": "{{canvas.width > canvas.height ? 'space-between' : 'start'}}"
+              },
+              "children": [
+                {
+                  "repeat": "{{items}}",
+                  "as": "it",
+                  "each": [
+                    {
+                      "id": "cell-{{index}}",
+                      "type": "group",
+                      "startFrame": "{{14 + index * 12}}",
+                      "layout": {
+                        "direction": "{{canvas.width > canvas.height ? 'column' : 'row'}}",
+                        "gap": "{{round(min(canvas.width, canvas.height) * 0.025)}}",
+                        "align": "start"
+                      },
+                      "animations": [
+                        {
+                          "property": "opacity",
+                          "keyframes": [
+                            {
+                              "frame": 0,
+                              "value": 0
+                            },
+                            {
+                              "frame": 12,
+                              "value": 1
+                            }
+                          ]
+                        },
+                        {
+                          "property": "y",
+                          "keyframes": [
+                            {
+                              "frame": 0,
+                              "value": 30,
+                              "easing": "land"
+                            },
+                            {
+                              "frame": 18,
+                              "value": 0
+                            }
+                          ]
+                        }
+                      ],
+                      "children": [
+                        {
+                          "id": "icon-{{index}}",
+                          "type": "group",
+                          "width": "{{round(min(canvas.width, canvas.height) * 0.11)}}",
+                          "height": "{{round(min(canvas.width, canvas.height) * 0.11)}}",
+                          "children": [
+                            {
+                              "id": "disc",
+                              "type": "circle",
+                              "x": "{{round(min(canvas.width, canvas.height) * 0.055)}}",
+                              "y": "{{round(min(canvas.width, canvas.height) * 0.055)}}",
+                              "width": "{{round(min(canvas.width, canvas.height) * 0.11)}}",
+                              "fill": "{{accent}}"
+                            },
+                            {
+                              "if": "{{it.icon == 'check'}}",
+                              "id": "glyph-check",
+                              "type": "path",
+                              "d": "M5 12.5 L10 17.5 L19 7",
+                              "x": "{{round(min(canvas.width, canvas.height) * 0.055 - min(canvas.width, canvas.height) * 0.0275)}}",
+                              "y": "{{round(min(canvas.width, canvas.height) * 0.055 - min(canvas.width, canvas.height) * 0.0275)}}",
+                              "width": 24,
+                              "height": 24,
+                              "scale": "{{min(canvas.width, canvas.height) * 0.055 / 24}}",
+                              "stroke": "{{bg}}",
+                              "strokeWidth": 2,
+                              "lineCap": "round",
+                              "lineJoin": "round"
+                            },
+                            {
+                              "if": "{{it.icon == 'bolt'}}",
+                              "id": "glyph-bolt",
+                              "type": "path",
+                              "d": "M13 2 L4 14 H11 L10 22 L20 9 H13 Z",
+                              "x": "{{round(min(canvas.width, canvas.height) * 0.055 - min(canvas.width, canvas.height) * 0.0275)}}",
+                              "y": "{{round(min(canvas.width, canvas.height) * 0.055 - min(canvas.width, canvas.height) * 0.0275)}}",
+                              "width": 24,
+                              "height": 24,
+                              "scale": "{{min(canvas.width, canvas.height) * 0.055 / 24}}",
+                              "stroke": "{{bg}}",
+                              "strokeWidth": 2,
+                              "lineCap": "round",
+                              "lineJoin": "round"
+                            },
+                            {
+                              "if": "{{it.icon == 'star'}}",
+                              "id": "glyph-star",
+                              "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",
+                              "x": "{{round(min(canvas.width, canvas.height) * 0.055 - min(canvas.width, canvas.height) * 0.0275)}}",
+                              "y": "{{round(min(canvas.width, canvas.height) * 0.055 - min(canvas.width, canvas.height) * 0.0275)}}",
+                              "width": 24,
+                              "height": 24,
+                              "scale": "{{min(canvas.width, canvas.height) * 0.055 / 24}}",
+                              "stroke": "{{bg}}",
+                              "strokeWidth": 2,
+                              "lineCap": "round",
+                              "lineJoin": "round"
+                            },
+                            {
+                              "if": "{{it.icon == 'heart'}}",
+                              "id": "glyph-heart",
+                              "type": "path",
+                              "d": "M12 21 C5 15.5 2.5 12 2.5 8.5 C2.5 5.7 4.7 3.5 7.5 3.5 C9.4 3.5 11 4.5 12 6 C13 4.5 14.6 3.5 16.5 3.5 C19.3 3.5 21.5 5.7 21.5 8.5 C21.5 12 19 15.5 12 21 Z",
+                              "x": "{{round(min(canvas.width, canvas.height) * 0.055 - min(canvas.width, canvas.height) * 0.0275)}}",
+                              "y": "{{round(min(canvas.width, canvas.height) * 0.055 - min(canvas.width, canvas.height) * 0.0275)}}",
+                              "width": 24,
+                              "height": 24,
+                              "scale": "{{min(canvas.width, canvas.height) * 0.055 / 24}}",
+                              "stroke": "{{bg}}",
+                              "strokeWidth": 2,
+                              "lineCap": "round",
+                              "lineJoin": "round"
+                            },
+                            {
+                              "if": "{{it.icon == 'clock'}}",
+                              "id": "glyph-clock",
+                              "type": "path",
+                              "d": "M12 3 A9 9 0 1 0 12 21 A9 9 0 1 0 12 3 Z M12 7 V12 L15.5 14",
+                              "x": "{{round(min(canvas.width, canvas.height) * 0.055 - min(canvas.width, canvas.height) * 0.0275)}}",
+                              "y": "{{round(min(canvas.width, canvas.height) * 0.055 - min(canvas.width, canvas.height) * 0.0275)}}",
+                              "width": 24,
+                              "height": 24,
+                              "scale": "{{min(canvas.width, canvas.height) * 0.055 / 24}}",
+                              "stroke": "{{bg}}",
+                              "strokeWidth": 2,
+                              "lineCap": "round",
+                              "lineJoin": "round"
+                            }
+                          ]
+                        },
+                        {
+                          "id": "copy-{{index}}",
+                          "type": "group",
+                          "layout": {
+                            "direction": "column",
+                            "gap": "{{round(min(canvas.width, canvas.height) * 0.01)}}"
+                          },
+                          "children": [
+                            {
+                              "id": "label-{{index}}",
+                              "type": "text",
+                              "content": "{{it.label}}",
+                              "fontSize": "{{round(min(canvas.width, canvas.height) * 0.046)}}",
+                              "color": "{{text}}",
+                              "fontWeight": 700,
+                              "maxWidth": "{{canvas.width > canvas.height ? round(canvas.width * 0.24) : round(canvas.width * 0.6)}}",
+                              "maxLines": 2,
+                              "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.034)}}"
+                            },
+                            {
+                              "id": "detail-{{index}}",
+                              "type": "text",
+                              "content": "{{it.detail}}",
+                              "fontSize": "{{round(min(canvas.width, canvas.height) * 0.034)}}",
+                              "color": "{{muted}}",
+                              "maxWidth": "{{canvas.width > canvas.height ? round(canvas.width * 0.24) : round(canvas.width * 0.6)}}",
+                              "maxLines": 3,
+                              "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.028)}}"
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "repeat": "{{items}}",
+          "as": "x",
+          "each": [
+            {
+              "id": "sfx-icon-{{index}}",
+              "type": "audio",
+              "src": "sfx:pop",
+              "startFrame": "{{14 + index * 12}}",
+              "volume": 0.35
+            }
+          ]
+        }
+      ]
+    },
+    "split_screen": {
+      "description": "A picture on one half and the message on the other (left and right on wide video, top and bottom on tall).",
+      "params": {
+        "image": {
+          "type": "string",
+          "default": "",
+          "description": "A picture (asset id or relative path); a colour panel appears without one"
+        },
+        "kicker": {
+          "type": "string",
+          "default": "FROM THE ROASTERY"
+        },
+        "headline": {
+          "type": "string",
+          "default": "Small batches, big flavour"
+        },
+        "body": {
+          "type": "string",
+          "default": "Every bag is roasted to order and shipped within two days."
+        }
+      },
+      "layers": [
+        {
+          "id": "bg",
+          "type": "rect",
+          "x": 0,
+          "y": 0,
+          "width": "{{canvas.width}}",
+          "height": "{{canvas.height}}",
+          "fill": "{{bg}}"
+        },
+        {
+          "id": "panel",
+          "type": "rect",
+          "x": 0,
+          "y": 0,
+          "width": "{{canvas.width > canvas.height ? round(canvas.width * 0.5) : canvas.width}}",
+          "height": "{{canvas.width > canvas.height ? canvas.height : round(canvas.height * 0.5)}}",
+          "fill": "{{accent}}",
+          "opacity": 0.9
+        },
+        {
+          "id": "orb",
+          "type": "circle",
+          "x": "{{canvas.width > canvas.height ? round(canvas.width * 0.25) : round(canvas.width * 0.5)}}",
+          "y": "{{canvas.width > canvas.height ? round(canvas.height * 0.5) : round(canvas.height * 0.25)}}",
+          "width": "{{round(min(canvas.width, canvas.height) * 0.5)}}",
+          "fill": "{{accent2}}",
+          "opacity": 0.6,
+          "blur": 60,
+          "animations": [
+            {
+              "property": "scale",
+              "keyframes": [
+                {
+                  "frame": 0,
+                  "value": 0.8
+                },
+                {
+                  "frame": 150,
+                  "value": 1.2,
+                  "easing": "drift"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "if": "{{image}}",
+          "id": "photo",
+          "type": "image",
+          "src": "{{image}}",
+          "objectFit": "cover",
+          "x": 0,
+          "y": 0,
+          "width": "{{canvas.width > canvas.height ? round(canvas.width * 0.5) : canvas.width}}",
+          "height": "{{canvas.width > canvas.height ? canvas.height : round(canvas.height * 0.5)}}"
+        },
+        {
+          "id": "copy",
+          "type": "group",
+          "x": "{{canvas.width > canvas.height ? round(canvas.width * 0.54) : round(canvas.width * 0.08)}}",
+          "y": "{{canvas.width > canvas.height ? 0 : round(canvas.height * 0.5)}}",
+          "width": "{{canvas.width > canvas.height ? round(canvas.width * 0.4) : round(canvas.width * 0.84)}}",
+          "height": "{{canvas.width > canvas.height ? canvas.height : round(canvas.height * 0.5)}}",
+          "layout": {
+            "direction": "column",
+            "gap": "{{round(min(canvas.width, canvas.height) * 0.025)}}",
+            "align": "start",
+            "justify": "center"
+          },
+          "children": [
+            {
+              "id": "kicker",
+              "type": "text",
+              "content": "{{kicker}}",
+              "fontSize": "{{round(min(canvas.width, canvas.height) * 0.03)}}",
+              "color": "{{accent}}",
+              "fontWeight": 700,
+              "letterSpacing": "{{round(min(canvas.width, canvas.height) * 0.006)}}",
+              "startFrame": 0,
+              "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": "headline",
+              "type": "text",
+              "content": "{{headline}}",
+              "fontSize": "{{round(min(canvas.width, canvas.height) * 0.075)}}",
+              "color": "{{text}}",
+              "fontWeight": "{{headWeight}}",
+              "lineHeight": 1.06,
+              "maxWidth": "{{canvas.width > canvas.height ? round(canvas.width * 0.4) : round(canvas.width * 0.84)}}",
+              "maxLines": 3,
+              "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.05)}}",
+              "startFrame": 8,
+              "animations": [
+                {
+                  "property": "opacity",
+                  "keyframes": [
+                    {
+                      "frame": 0,
+                      "value": 0
+                    },
+                    {
+                      "frame": 14,
+                      "value": 1,
+                      "easing": "glide"
+                    }
+                  ]
+                },
+                {
+                  "property": "y",
+                  "keyframes": [
+                    {
+                      "frame": 0,
+                      "value": 28,
+                      "easing": "land"
+                    },
+                    {
+                      "frame": 18,
+                      "value": 0
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "id": "rule",
+              "type": "rect",
+              "width": "{{round(min(canvas.width, canvas.height) * 0.12)}}",
+              "height": "{{round(min(canvas.width, canvas.height) * 0.008)}}",
+              "radius": "{{round(min(canvas.width, canvas.height) * 0.004)}}",
+              "fill": "{{accent}}",
+              "startFrame": 24,
+              "animations": [
+                {
+                  "property": "width",
+                  "keyframes": [
+                    {
+                      "frame": 0,
+                      "value": 1
+                    },
+                    {
+                      "frame": 20,
+                      "value": "{{round(min(canvas.width, canvas.height) * 0.12)}}",
+                      "easing": "land"
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              "id": "body",
+              "type": "text",
+              "content": "{{body}}",
+              "fontSize": "{{round(min(canvas.width, canvas.height) * 0.04)}}",
+              "color": "{{muted}}",
+              "maxWidth": "{{canvas.width > canvas.height ? round(canvas.width * 0.38) : round(canvas.width * 0.8)}}",
+              "maxLines": 4,
+              "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.03)}}",
+              "startFrame": 30,
+              "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": "sfx-in",
+          "type": "audio",
+          "src": "sfx:whoosh",
+          "startFrame": 3,
+          "volume": 0.4
+        }
+      ]
+    },
+    "cta_end": {
+      "description": "Closing scene: a headline, a button and a web address.",
+      "params": {
+        "headline": {
+          "type": "string",
+          "default": "Ready to start?"
+        },
+        "button": {
+          "type": "string",
+          "default": "Get started"
+        },
+        "url": {
+          "type": "string",
+          "default": "example.com"
+        }
+      },
+      "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.5)}}",
+          "y": "{{round(canvas.height * 0.4)}}",
+          "width": "{{round(min(canvas.width, canvas.height) * 1.1)}}",
+          "fill": "{{accent}}",
+          "opacity": 0.16,
+          "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.5)}}"
+                },
+                {
+                  "frame": 180,
+                  "value": "{{round(canvas.width * 0.4)}}",
+                  "easing": "drift"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "id": "glow2",
+          "type": "circle",
+          "x": "{{round(canvas.width * 0.5)}}",
+          "y": "{{round(canvas.height * 0.6)}}",
+          "width": "{{round(min(canvas.width, canvas.height) * 0.8)}}",
+          "fill": "{{accent2}}",
+          "opacity": 0.096,
+          "blur": 140,
+          "animations": [
+            {
+              "property": "y",
+              "keyframes": [
+                {
+                  "frame": 0,
+                  "value": "{{round(canvas.height * 0.6)}}"
+                },
+                {
+                  "frame": 180,
+                  "value": "{{round(canvas.height * 0.5)}}",
+                  "easing": "drift"
+                }
+              ]
+            },
+            {
+              "property": "scale",
+              "keyframes": [
+                {
+                  "frame": 0,
+                  "value": 1.1
+                },
+                {
+                  "frame": 150,
+                  "value": 0.9,
+                  "easing": "drift"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "id": "stack",
+          "type": "group",
+          "x": 0,
+          "y": 0,
+          "width": "{{canvas.width}}",
+          "height": "{{canvas.height}}",
+          "layout": {
+            "direction": "column",
+            "gap": "{{round(min(canvas.width, canvas.height) * 0.05)}}",
+            "align": "center",
+            "justify": "center"
+          },
+          "children": [
+            {
+              "id": "headline",
+              "type": "text",
+              "content": "{{headline}}",
+              "fontSize": "{{round(min(canvas.width, canvas.height) * 0.1)}}",
+              "color": "{{text}}",
+              "fontWeight": "{{headWeight}}",
+              "textAlign": "center",
+              "maxWidth": "{{round(canvas.width * 0.84)}}",
+              "maxLines": 3,
+              "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.06)}}",
+              "lineHeight": 1.05,
+              "split": {
+                "by": "words",
+                "stagger": 4,
+                "preset": "rise",
+                "duration": 18
+              }
+            },
+            {
+              "id": "btn",
+              "type": "group",
+              "width": "{{round(canvas.width * 0.42)}}",
+              "height": "{{round(min(canvas.width, canvas.height) * 0.13)}}",
+              "startFrame": 24,
+              "animations": [
+                {
+                  "property": "scale",
+                  "keyframes": [
+                    {
+                      "frame": 0,
+                      "value": 0.85,
+                      "easing": "pop"
+                    },
+                    {
+                      "frame": 16,
+                      "value": 1
+                    }
+                  ]
+                },
+                {
+                  "property": "opacity",
+                  "keyframes": [
+                    {
+                      "frame": 0,
+                      "value": 0
+                    },
+                    {
+                      "frame": 8,
+                      "value": 1
+                    }
+                  ]
+                }
+              ],
+              "children": [
+                {
+                  "id": "pill",
+                  "type": "rect",
+                  "x": 0,
+                  "y": 0,
+                  "width": "{{round(canvas.width * 0.42)}}",
+                  "height": "{{round(min(canvas.width, canvas.height) * 0.13)}}",
+                  "radius": "{{round(min(canvas.width, canvas.height) * 0.065)}}",
+                  "fill": "{{accent}}"
+                },
+                {
+                  "id": "label",
+                  "type": "text",
+                  "content": "{{button}}",
+                  "x": "{{round(canvas.width * 0.21)}}",
+                  "y": "{{round(min(canvas.width, canvas.height) * 0.065 - min(canvas.width, canvas.height) * 0.03)}}",
+                  "fontSize": "{{round(min(canvas.width, canvas.height) * 0.05)}}",
+                  "fontWeight": 800,
+                  "color": "{{bg}}",
+                  "textAlign": "center",
+                  "maxWidth": "{{round(canvas.width * 0.38)}}",
+                  "maxLines": 1,
+                  "minFontSize": "{{round(min(canvas.width, canvas.height) * 0.032)}}"
+                }
+              ]
+            },
+            {
+              "id": "url",
+              "type": "text",
+              "content": "{{url}}",
+              "fontSize": "{{round(min(canvas.width, canvas.height) * 0.04)}}",
+              "color": "{{muted}}",
+              "textAlign": "center",
+              "maxWidth": "{{round(canvas.width * 0.8)}}",
+              "startFrame": 34,
+              "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": "sfx-btn",
+          "type": "audio",
+          "src": "sfx:ding",
+          "startFrame": 24,
+          "volume": 0.45
+        }
+      ]
+    }
+  }
+}