@appinternalleads/ui 0.4.0 → 0.4.1

package/src/motion/templates/hey-template.ts

@@ -0,0 +1,1553 @@
+/* eslint-disable */
+// GENERATED by remotion-prototype/tools/export-component.tsx (npm run export:component there).
+// Do not edit: change the Remotion source and re-export.
+import type { MotionTemplate } from '../types';
+
+export const heyTemplate: MotionTemplate = {
+  "id": "hey-template",
+  "version": "1.0.0",
+  "title": "Hey — kinetic type promo",
+  "description": "A 9-second 9:16 kinetic-type promo: a word filled in by a bouncing square, a word that stacks up the screen, a six-line phrase, three hard-cut words whose full stop splits in two, a call to action and an optional dark end card.",
+  "template": "<div class=\"video-template\" data-template=\"hey-template\"><section data-scene=\"scene1\" class=\"scene\"><div class=\"s1-row\"><div class=\"s1-word\"><span data-content=\"scene1.text\" data-fit=\"640\" class=\"s1-outline\"></span><div data-target=\"s1-fill\" class=\"s1-fill\"><span data-content=\"scene1.text\" data-fit=\"640\"></span></div><div data-target=\"s1-square\" class=\"s1-square\"></div></div></div></section><section data-scene=\"scene2\" class=\"scene\"><div data-target=\"s2-line-0\" class=\"s2-line s2-line-0\"><span data-content=\"scene2.text\" data-fit=\"660\"></span></div><div data-target=\"s2-line-1\" class=\"s2-line s2-line-1\"><span data-content=\"scene2.text\" data-fit=\"660\"></span></div><div data-target=\"s2-line-2\" class=\"s2-line s2-line-2\"><span data-content=\"scene2.text\" data-fit=\"660\"></span></div><div data-target=\"s2-line-3\" class=\"s2-line s2-line-3\"><span data-content=\"scene2.text\" data-fit=\"660\"></span></div><div data-target=\"s2-line-4\" class=\"s2-line s2-line-4\"><span data-content=\"scene2.text\" data-fit=\"660\"></span></div></section><section data-scene=\"scene3\" class=\"scene\"><div data-target=\"s3-line1\" class=\"s3-line s3-line1\"><span data-content=\"scene3.line1\" data-fit=\"640\"></span></div><div data-target=\"s3-line2\" class=\"s3-line s3-line2\"><span data-content=\"scene3.line2\" data-fit=\"660\"></span></div><div data-target=\"s3-line3\" class=\"s3-line s3-line3\"><span data-content=\"scene3.line3\" data-fit=\"660\"></span></div><div data-target=\"s3-line4\" class=\"s3-line s3-line4\"><span data-content=\"scene3.line4\" data-fit=\"660\"></span></div><div data-target=\"s3-line5\" class=\"s3-line s3-line5\"><span data-content=\"scene3.line5\" data-fit=\"660\"></span></div><div data-target=\"s3-line6\" class=\"s3-line s3-line6\"><span data-content=\"scene3.line6\" data-fit=\"680\"></span></div></section><section data-scene=\"scene4\" class=\"scene\"><div data-target=\"s4-word1\" class=\"s4-word\"><span data-content=\"scene4.word1\" data-fit=\"640\"></span></div><div data-target=\"s4-word2\" class=\"s4-word\"><span data-content=\"scene4.word2\" data-fit=\"640\"></span></div><div data-target=\"s4-word3box\" class=\"s4-word\"><div class=\"s4-stopbox\"><div data-target=\"s4-word3\" class=\"s4-word3\"><span data-content=\"scene4.word3\" data-fit=\"580\"></span></div><div data-target=\"s4-dots\" class=\"s4-dots\"><div data-target=\"s4-dot-a\" class=\"s4-dot\"></div><div data-target=\"s4-dot-b\" class=\"s4-dot\"></div></div></div></div></section><section data-scene=\"scene5\" class=\"scene\"><div data-target=\"s5-text\" class=\"s5-text\"><span data-content=\"scene5.text\" data-fit=\"660\"></span></div></section><section data-scene=\"scene6\" class=\"scene scene--dark\"><div class=\"s6-glow\"></div><div class=\"s6-logo\"><div data-target=\"s6-strip-0\" class=\"s6-strip s6-strip-0\"><svg class=\"s6-emblem\" viewBox=\"0 0 120 120\" aria-hidden=\"true\"><circle class=\"s6-emblem-ring\" cx=\"60\" cy=\"60\" r=\"52\" stroke-width=\"8\"></circle><circle class=\"s6-emblem-core\" cx=\"60\" cy=\"60\" r=\"30\"></circle><rect class=\"s6-emblem-mark\" x=\"52\" y=\"52\" width=\"16\" height=\"16\" transform=\"rotate(45 60 60)\"></rect></svg><span data-content=\"scene6.brand\" data-fit=\"560\" class=\"s6-brand\"></span></div><div data-target=\"s6-strip-1\" class=\"s6-strip s6-strip-1\"><svg class=\"s6-emblem\" viewBox=\"0 0 120 120\" aria-hidden=\"true\"><circle class=\"s6-emblem-ring\" cx=\"60\" cy=\"60\" r=\"52\" stroke-width=\"8\"></circle><circle class=\"s6-emblem-core\" cx=\"60\" cy=\"60\" r=\"30\"></circle><rect class=\"s6-emblem-mark\" x=\"52\" y=\"52\" width=\"16\" height=\"16\" transform=\"rotate(45 60 60)\"></rect></svg><span data-content=\"scene6.brand\" data-fit=\"560\" class=\"s6-brand\"></span></div><div data-target=\"s6-strip-2\" class=\"s6-strip s6-strip-2\"><svg class=\"s6-emblem\" viewBox=\"0 0 120 120\" aria-hidden=\"true\"><circle class=\"s6-emblem-ring\" cx=\"60\" cy=\"60\" r=\"52\" stroke-width=\"8\"></circle><circle class=\"s6-emblem-core\" cx=\"60\" cy=\"60\" r=\"30\"></circle><rect class=\"s6-emblem-mark\" x=\"52\" y=\"52\" width=\"16\" height=\"16\" transform=\"rotate(45 60 60)\"></rect></svg><span data-content=\"scene6.brand\" data-fit=\"560\" class=\"s6-brand\"></span></div><div data-target=\"s6-strip-3\" class=\"s6-strip s6-strip-3\"><svg class=\"s6-emblem\" viewBox=\"0 0 120 120\" aria-hidden=\"true\"><circle class=\"s6-emblem-ring\" cx=\"60\" cy=\"60\" r=\"52\" stroke-width=\"8\"></circle><circle class=\"s6-emblem-core\" cx=\"60\" cy=\"60\" r=\"30\"></circle><rect class=\"s6-emblem-mark\" x=\"52\" y=\"52\" width=\"16\" height=\"16\" transform=\"rotate(45 60 60)\"></rect></svg><span data-content=\"scene6.brand\" data-fit=\"560\" class=\"s6-brand\"></span></div><div data-target=\"s6-strip-4\" class=\"s6-strip s6-strip-4\"><svg class=\"s6-emblem\" viewBox=\"0 0 120 120\" aria-hidden=\"true\"><circle class=\"s6-emblem-ring\" cx=\"60\" cy=\"60\" r=\"52\" stroke-width=\"8\"></circle><circle class=\"s6-emblem-core\" cx=\"60\" cy=\"60\" r=\"30\"></circle><rect class=\"s6-emblem-mark\" x=\"52\" y=\"52\" width=\"16\" height=\"16\" transform=\"rotate(45 60 60)\"></rect></svg><span data-content=\"scene6.brand\" data-fit=\"560\" class=\"s6-brand\"></span></div><div data-target=\"s6-strip-5\" class=\"s6-strip s6-strip-5\"><svg class=\"s6-emblem\" viewBox=\"0 0 120 120\" aria-hidden=\"true\"><circle class=\"s6-emblem-ring\" cx=\"60\" cy=\"60\" r=\"52\" stroke-width=\"8\"></circle><circle class=\"s6-emblem-core\" cx=\"60\" cy=\"60\" r=\"30\"></circle><rect class=\"s6-emblem-mark\" x=\"52\" y=\"52\" width=\"16\" height=\"16\" transform=\"rotate(45 60 60)\"></rect></svg><span data-content=\"scene6.brand\" data-fit=\"560\" class=\"s6-brand\"></span></div></div><div data-target=\"s6-line\" class=\"s6-line\"></div><div data-target=\"s6-url\" class=\"s6-url\"><span data-content=\"scene6.url\" data-fit=\"560\"></span></div></section></div>",
+  "styles": "/*\n * hey-template — the fixed design. Everything visual that is not motion lives here: canvas, type,\n * colour, layout. Content never reaches this file; the motion contract only sets transform, left,\n * top, opacity, filter, clip-path and color on [data-target] elements.\n */\n.video-template {\n  /* Theme tokens: the only colours a person or agent may change (content `theme`). */\n  --cp-background: #ffffff;\n  --cp-ink: #0a0a0a;\n  --cp-muted: #5f5f5f;\n  --cp-outline: #cfcfcf;\n  --cp-accent: #a22033;\n  --cp-endBackground: #05070b;\n  --cp-endInk: #f2f2f2;\n  position: relative;\n  width: 720px;\n  height: 1280px;\n  overflow: hidden;\n  background: var(--cp-background);\n  color: var(--cp-ink);\n  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;\n  font-weight: 700;\n  line-height: 1;\n  white-space: nowrap;\n  -webkit-font-smoothing: antialiased;\n}\n.video-template * { box-sizing: border-box; }\n/* Auto-fit: the runtime sets --fit below 1 on text wider than the slot's data-fit width. */\n.video-template [data-fit] { font-size: calc(var(--fit, 1) * 1em); }\n.scene { position: absolute; inset: 0; overflow: hidden; background: var(--cp-background); }\n.scene--dark { background: var(--cp-endBackground); }\n\n/* Scene 1 */\n.s1-row { position: absolute; left: 0; right: 0; top: 541px; text-align: center; }\n.s1-word { position: relative; display: inline-block; font-size: 163px; letter-spacing: -3px; }\n.s1-outline { color: transparent; -webkit-text-stroke: 3px var(--cp-outline); }\n.s1-fill { position: absolute; inset: 0; color: var(--cp-ink); }\n.s1-square { position: absolute; width: 80px; height: 80px; margin-left: -40px; background: var(--cp-ink); }\n\n/* Scene 2 */\n.s2-line { position: absolute; left: 0; right: 0; text-align: center; font-size: 149px; font-weight: 900; letter-spacing: -7px; }\n.s2-line-0 { top: 560px; }\n.s2-line-1 { top: 413px; }\n.s2-line-2 { top: 273px; }\n.s2-line-3 { top: 133px; }\n.s2-line-4 { top: -7px; }\n\n/* Scene 3 */\n.s3-line { position: absolute; left: 0; right: 0; text-align: center; letter-spacing: -1px; }\n.s3-line1 { top: 290px; font-size: 37px; }\n.s3-line2 { top: 340px; font-size: 61px; }\n.s3-line3 { top: 404px; font-size: 102px; letter-spacing: -2px; }\n.s3-line4 { top: 502px; font-size: 126px; letter-spacing: -2px; }\n.s3-line5 { top: 632px; font-size: 150px; font-weight: 900; letter-spacing: -3px; }\n.s3-line6 { top: 776px; font-size: 180px; letter-spacing: -5px; color: var(--cp-muted); }\n\n/* Scene 4 */\n.s4-word { position: absolute; left: 0; right: 0; top: 572px; text-align: center; font-size: 150px; font-weight: 900; letter-spacing: -3px; }\n.s4-stopbox { position: relative; display: inline-block; padding-right: 40px; }\n.s4-word3 { display: inline-block; }\n.s4-dots { position: absolute; inset: 0; }\n.s4-dot { position: absolute; left: 100%; bottom: 30px; width: 32px; height: 32px; margin-left: -32px; border-radius: 50%; background: var(--cp-ink); }\n\n/* Scene 5 */\n.s5-text { position: absolute; left: 0; right: 0; top: 610px; text-align: center; font-size: 76px; letter-spacing: -1px; }\n\n/* Scene 6 */\n.s6-glow { position: absolute; right: -220px; bottom: -220px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--cp-accent) 35%, transparent), transparent); }\n.s6-logo { position: absolute; left: 0; right: 0; top: 362px; height: 360px; }\n.s6-strip { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 22px; }\n.s6-strip-0 { clip-path: inset(0% 0% 83.33% 0%); }\n.s6-strip-1 { clip-path: inset(16.66% 0% 66.66% 0%); }\n.s6-strip-2 { clip-path: inset(33.33% 0% 50% 0%); }\n.s6-strip-3 { clip-path: inset(50% 0% 33.33% 0%); }\n.s6-strip-4 { clip-path: inset(66.66% 0% 16.66% 0%); }\n.s6-strip-5 { clip-path: inset(83.33% 0% 0% 0%); }\n.s6-emblem { width: 230px; height: 230px; }\n.s6-emblem-ring { fill: none; stroke: var(--cp-accent); }\n.s6-emblem-core { fill: var(--cp-endInk); }\n.s6-emblem-mark { fill: var(--cp-endBackground); }\n.s6-brand { color: var(--cp-endInk); font-size: 64px; font-weight: 900; letter-spacing: -2px; }\n.s6-line { position: absolute; left: 184px; width: 354px; top: 815px; height: 5px; background: var(--cp-accent); }\n.s6-url { position: absolute; left: 0; right: 0; top: 832px; text-align: center; font-size: 22px; font-weight: 500; color: color-mix(in srgb, var(--cp-endInk) 88%, var(--cp-endBackground)); }\n",
+  "fonts": [
+    {
+      "family": "Montserrat",
+      "weights": [
+        "500",
+        "700",
+        "900"
+      ],
+      "css": "https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700;900&display=block"
+    }
+  ],
+  "motion": {
+    "template": "hey-template",
+    "version": "1.0.0",
+    "fps": 30,
+    "width": 720,
+    "height": 1280,
+    "durationInFrames": 271,
+    "scenes": [
+      {
+        "id": "scene1",
+        "from": 0,
+        "durationInFrames": 49,
+        "tracks": [
+          {
+            "target": "s1-square",
+            "property": "left",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 19
+              },
+              {
+                "f": 6,
+                "v": 19
+              },
+              {
+                "f": 14,
+                "v": 54,
+                "e": "ease-in-out"
+              },
+              {
+                "f": 23,
+                "v": 90,
+                "e": "ease-in-out"
+              },
+              {
+                "f": 27,
+                "v": 123,
+                "e": "ease-out"
+              },
+              {
+                "f": 28,
+                "v": 136
+              },
+              {
+                "f": 32,
+                "v": 142
+              }
+            ]
+          },
+          {
+            "target": "s1-square",
+            "property": "top",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": -1400
+              },
+              {
+                "f": 3,
+                "v": -85,
+                "e": "ease-in"
+              },
+              {
+                "f": 5,
+                "v": -20
+              },
+              {
+                "f": 6,
+                "v": -33
+              },
+              {
+                "f": 10,
+                "v": -84,
+                "e": "ease-out"
+              },
+              {
+                "f": 14,
+                "v": -4,
+                "e": "ease-in"
+              },
+              {
+                "f": 19,
+                "v": -115,
+                "e": "ease-out"
+              },
+              {
+                "f": 23,
+                "v": 1,
+                "e": "ease-in"
+              },
+              {
+                "f": 27,
+                "v": -127,
+                "e": "ease-out"
+              },
+              {
+                "f": 28,
+                "v": -40,
+                "e": "ease-in"
+              },
+              {
+                "f": 32,
+                "v": 900,
+                "e": "ease-in"
+              }
+            ]
+          },
+          {
+            "target": "s1-square",
+            "property": "rotate",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 6,
+                "v": 0
+              },
+              {
+                "f": 10,
+                "v": 35,
+                "e": "ease-out"
+              },
+              {
+                "f": 14,
+                "v": 90,
+                "e": "ease-in"
+              },
+              {
+                "f": 19,
+                "v": 130,
+                "e": "ease-out"
+              },
+              {
+                "f": 23,
+                "v": 180,
+                "e": "ease-in"
+              },
+              {
+                "f": 27,
+                "v": 250,
+                "e": "ease-out"
+              },
+              {
+                "f": 28,
+                "v": 270
+              }
+            ]
+          },
+          {
+            "target": "s1-square",
+            "property": "scaleY",
+            "keyframes": [
+              {
+                "f": 27,
+                "v": 1
+              },
+              {
+                "f": 28,
+                "v": 1.4
+              },
+              {
+                "f": 32,
+                "v": 1.7
+              }
+            ]
+          },
+          {
+            "target": "s1-square",
+            "property": "blur",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 7
+              },
+              {
+                "f": 4,
+                "v": 5
+              },
+              {
+                "f": 5,
+                "v": 0,
+                "e": "hold"
+              },
+              {
+                "f": 27,
+                "v": 0
+              },
+              {
+                "f": 28,
+                "v": 6,
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s1-fill",
+            "property": "clipRight",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 100
+              },
+              {
+                "f": 6,
+                "v": 67,
+                "e": "hold"
+              },
+              {
+                "f": 14,
+                "v": 36,
+                "e": "hold"
+              },
+              {
+                "f": 23,
+                "v": 0,
+                "e": "hold"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "id": "scene2",
+        "from": 49,
+        "durationInFrames": 24,
+        "tracks": [
+          {
+            "target": "s2-line-0",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 0,
+                "v": 1,
+                "e": "hold"
+              },
+              {
+                "f": 14,
+                "v": 0,
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s2-line-1",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 3,
+                "v": 1,
+                "e": "hold"
+              },
+              {
+                "f": 16,
+                "v": 0,
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s2-line-2",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 6,
+                "v": 1,
+                "e": "hold"
+              },
+              {
+                "f": 18,
+                "v": 0,
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s2-line-3",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 9,
+                "v": 1,
+                "e": "hold"
+              },
+              {
+                "f": 19,
+                "v": 0,
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s2-line-4",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 13,
+                "v": 1,
+                "e": "hold"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "id": "scene3",
+        "from": 73,
+        "durationInFrames": 55,
+        "tracks": [
+          {
+            "target": "s3-line1",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 5,
+                "v": 1,
+                "e": "hold"
+              },
+              {
+                "f": 43,
+                "v": 0,
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s3-line1",
+            "property": "scale",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0.9
+              },
+              {
+                "f": 5,
+                "v": 0.9
+              },
+              {
+                "f": 7,
+                "v": 1,
+                "e": "ease-out"
+              }
+            ]
+          },
+          {
+            "target": "s3-line1",
+            "property": "color",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": "ink"
+              },
+              {
+                "f": 26,
+                "v": "muted",
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s3-line2",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 13,
+                "v": 1,
+                "e": "hold"
+              },
+              {
+                "f": 43,
+                "v": 0,
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s3-line2",
+            "property": "scale",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0.9
+              },
+              {
+                "f": 13,
+                "v": 0.9
+              },
+              {
+                "f": 15,
+                "v": 1,
+                "e": "ease-out"
+              }
+            ]
+          },
+          {
+            "target": "s3-line2",
+            "property": "color",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": "ink"
+              },
+              {
+                "f": 26,
+                "v": "muted",
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s3-line3",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 15,
+                "v": 1,
+                "e": "hold"
+              },
+              {
+                "f": 49,
+                "v": 0,
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s3-line3",
+            "property": "scale",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0.9
+              },
+              {
+                "f": 15,
+                "v": 0.9
+              },
+              {
+                "f": 17,
+                "v": 1,
+                "e": "ease-out"
+              }
+            ]
+          },
+          {
+            "target": "s3-line3",
+            "property": "color",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": "ink"
+              },
+              {
+                "f": 26,
+                "v": "muted",
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s3-line4",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 17,
+                "v": 1,
+                "e": "hold"
+              },
+              {
+                "f": 49,
+                "v": 0,
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s3-line4",
+            "property": "scale",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0.9
+              },
+              {
+                "f": 17,
+                "v": 0.9
+              },
+              {
+                "f": 19,
+                "v": 1,
+                "e": "ease-out"
+              }
+            ]
+          },
+          {
+            "target": "s3-line4",
+            "property": "color",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": "ink"
+              },
+              {
+                "f": 26,
+                "v": "muted",
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s3-line5",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 26,
+                "v": 1,
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s3-line5",
+            "property": "scale",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0.9
+              },
+              {
+                "f": 26,
+                "v": 0.9
+              },
+              {
+                "f": 28,
+                "v": 1,
+                "e": "ease-out"
+              }
+            ]
+          },
+          {
+            "target": "s3-line6",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 35,
+                "v": 1,
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s3-line6",
+            "property": "scale",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0.9
+              },
+              {
+                "f": 35,
+                "v": 0.9
+              },
+              {
+                "f": 37,
+                "v": 1,
+                "e": "ease-out"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "id": "scene4",
+        "from": 128,
+        "durationInFrames": 67,
+        "tracks": [
+          {
+            "target": "s4-word1",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 0,
+                "v": 1,
+                "e": "hold"
+              },
+              {
+                "f": 7,
+                "v": 0,
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s4-word1",
+            "property": "color",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": "muted"
+              },
+              {
+                "f": 1,
+                "v": "ink",
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s4-word2",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 7,
+                "v": 1,
+                "e": "hold"
+              },
+              {
+                "f": 16,
+                "v": 0,
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s4-word3box",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 16,
+                "v": 1,
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s4-word3",
+            "property": "color",
+            "keyframes": [
+              {
+                "f": 37,
+                "v": "ink"
+              },
+              {
+                "f": 44,
+                "v": "outline"
+              }
+            ]
+          },
+          {
+            "target": "s4-word3",
+            "property": "clipRight",
+            "keyframes": [
+              {
+                "f": 37,
+                "v": 0
+              },
+              {
+                "f": 43,
+                "v": 62,
+                "e": "ease-in"
+              }
+            ]
+          },
+          {
+            "target": "s4-word3",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 43,
+                "v": 1
+              },
+              {
+                "f": 49,
+                "v": 0
+              }
+            ]
+          },
+          {
+            "target": "s4-word3",
+            "property": "x",
+            "keyframes": [
+              {
+                "f": 43,
+                "v": 0
+              },
+              {
+                "f": 49,
+                "v": 40,
+                "e": "ease-out"
+              }
+            ]
+          },
+          {
+            "target": "s4-dot-b",
+            "property": "left",
+            "keyframes": [
+              {
+                "f": 40,
+                "v": 100
+              },
+              {
+                "f": 47,
+                "v": 90.4,
+                "e": "ease-in-out"
+              }
+            ]
+          },
+          {
+            "target": "s4-dot-a",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 42,
+                "v": 1,
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s4-dot-a",
+            "property": "left",
+            "keyframes": [
+              {
+                "f": 42,
+                "v": 34
+              },
+              {
+                "f": 51,
+                "v": -4.6,
+                "e": "expo-out"
+              }
+            ]
+          },
+          {
+            "target": "s4-dots",
+            "property": "y",
+            "keyframes": [
+              {
+                "f": 47,
+                "v": 0
+              },
+              {
+                "f": 53,
+                "v": -38,
+                "e": "ease-in-out"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "id": "scene5",
+        "from": 195,
+        "durationInFrames": 20,
+        "tracks": [
+          {
+            "target": "s5-text",
+            "property": "y",
+            "keyframes": [
+              {
+                "f": 3,
+                "v": 0
+              },
+              {
+                "f": 6,
+                "v": -16,
+                "e": "ease-in-out"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "id": "scene6",
+        "from": 215,
+        "durationInFrames": 56,
+        "optional": true,
+        "tracks": [
+          {
+            "target": "s6-line",
+            "property": "scaleX",
+            "keyframes": [
+              {
+                "f": 3,
+                "v": 0
+              },
+              {
+                "f": 6,
+                "v": 1,
+                "e": "expo-out"
+              }
+            ]
+          },
+          {
+            "target": "s6-url",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 9,
+                "v": 0
+              },
+              {
+                "f": 13,
+                "v": 1,
+                "e": "ease-out"
+              }
+            ]
+          },
+          {
+            "target": "s6-strip-0",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 9,
+                "v": 1,
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s6-strip-0",
+            "property": "x",
+            "keyframes": [
+              {
+                "f": 9,
+                "v": -48
+              },
+              {
+                "f": 11,
+                "v": 24,
+                "e": "hold"
+              },
+              {
+                "f": 13,
+                "v": -12,
+                "e": "hold"
+              },
+              {
+                "f": 19,
+                "v": 0,
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s6-strip-1",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 8,
+                "v": 1,
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s6-strip-1",
+            "property": "x",
+            "keyframes": [
+              {
+                "f": 8,
+                "v": 36
+              },
+              {
+                "f": 10,
+                "v": -18,
+                "e": "hold"
+              },
+              {
+                "f": 12,
+                "v": 9,
+                "e": "hold"
+              },
+              {
+                "f": 19,
+                "v": 0,
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s6-strip-2",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 11,
+                "v": 1,
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s6-strip-2",
+            "property": "x",
+            "keyframes": [
+              {
+                "f": 11,
+                "v": -22
+              },
+              {
+                "f": 13,
+                "v": 11,
+                "e": "hold"
+              },
+              {
+                "f": 15,
+                "v": -5.5,
+                "e": "hold"
+              },
+              {
+                "f": 19,
+                "v": 0,
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s6-strip-3",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 10,
+                "v": 1,
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s6-strip-3",
+            "property": "x",
+            "keyframes": [
+              {
+                "f": 10,
+                "v": 58
+              },
+              {
+                "f": 12,
+                "v": -29,
+                "e": "hold"
+              },
+              {
+                "f": 14,
+                "v": 14.5,
+                "e": "hold"
+              },
+              {
+                "f": 19,
+                "v": 0,
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s6-strip-4",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 13,
+                "v": 1,
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s6-strip-4",
+            "property": "x",
+            "keyframes": [
+              {
+                "f": 13,
+                "v": -34
+              },
+              {
+                "f": 15,
+                "v": 17,
+                "e": "hold"
+              },
+              {
+                "f": 17,
+                "v": -8.5,
+                "e": "hold"
+              },
+              {
+                "f": 19,
+                "v": 0,
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s6-strip-5",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 12,
+                "v": 1,
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "s6-strip-5",
+            "property": "x",
+            "keyframes": [
+              {
+                "f": 12,
+                "v": 18
+              },
+              {
+                "f": 14,
+                "v": -9,
+                "e": "hold"
+              },
+              {
+                "f": 16,
+                "v": 4.5,
+                "e": "hold"
+              },
+              {
+                "f": 19,
+                "v": 0,
+                "e": "hold"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "schema": {
+    "$schema": "https://json-schema.org/draft/2020-12/schema",
+    "$id": "hey-template/content.schema.json",
+    "title": "hey-template content",
+    "description": "What a person or agent may set: text for each slot, optional theme colours, optional end card (scene6). Timing, motion, layout and type are fixed by the template.",
+    "type": "object",
+    "additionalProperties": false,
+    "required": [
+      "scene1",
+      "scene2",
+      "scene3",
+      "scene4",
+      "scene5"
+    ],
+    "properties": {
+      "scene1": {
+        "type": "object",
+        "additionalProperties": false,
+        "required": [
+          "text"
+        ],
+        "properties": {
+          "text": {
+            "type": "string",
+            "description": "Opening word(s); a square bounces across and fills them in.",
+            "minLength": 1,
+            "maxLength": 12,
+            "maxWords": 2,
+            "pattern": "^\\s*\\S+(\\s+\\S+){0,1}\\s*$"
+          }
+        }
+      },
+      "scene2": {
+        "type": "object",
+        "additionalProperties": false,
+        "required": [
+          "text"
+        ],
+        "properties": {
+          "text": {
+            "type": "string",
+            "description": "Stacks up the screen five times, then peels away.",
+            "minLength": 1,
+            "maxLength": 14,
+            "maxWords": 2,
+            "pattern": "^\\s*\\S+(\\s+\\S+){0,1}\\s*$"
+          }
+        }
+      },
+      "scene3": {
+        "type": "object",
+        "additionalProperties": false,
+        "required": [
+          "line1",
+          "line2",
+          "line3",
+          "line4",
+          "line5",
+          "line6"
+        ],
+        "properties": {
+          "line1": {
+            "type": "string",
+            "description": "Phrase line 1 (smallest type).",
+            "minLength": 1,
+            "maxLength": 28,
+            "maxWords": 3,
+            "pattern": "^\\s*\\S+(\\s+\\S+){0,2}\\s*$"
+          },
+          "line2": {
+            "type": "string",
+            "description": "Phrase line 2.",
+            "minLength": 1,
+            "maxLength": 20,
+            "maxWords": 2,
+            "pattern": "^\\s*\\S+(\\s+\\S+){0,1}\\s*$"
+          },
+          "line3": {
+            "type": "string",
+            "description": "Phrase line 3.",
+            "minLength": 1,
+            "maxLength": 16,
+            "maxWords": 2,
+            "pattern": "^\\s*\\S+(\\s+\\S+){0,1}\\s*$"
+          },
+          "line4": {
+            "type": "string",
+            "description": "Phrase line 4.",
+            "minLength": 1,
+            "maxLength": 14,
+            "maxWords": 2,
+            "pattern": "^\\s*\\S+(\\s+\\S+){0,1}\\s*$"
+          },
+          "line5": {
+            "type": "string",
+            "description": "Phrase line 5, the emphasised word (caps look best).",
+            "minLength": 1,
+            "maxLength": 12,
+            "maxWords": 2,
+            "pattern": "^\\s*\\S+(\\s+\\S+){0,1}\\s*$"
+          },
+          "line6": {
+            "type": "string",
+            "description": "Phrase line 6, the largest, in the muted colour.",
+            "minLength": 1,
+            "maxLength": 12,
+            "maxWords": 2,
+            "pattern": "^\\s*\\S+(\\s+\\S+){0,1}\\s*$"
+          }
+        }
+      },
+      "scene4": {
+        "type": "object",
+        "additionalProperties": false,
+        "required": [
+          "word1",
+          "word2",
+          "word3"
+        ],
+        "properties": {
+          "word1": {
+            "type": "string",
+            "description": "First hard-cut word.",
+            "minLength": 1,
+            "maxLength": 10,
+            "maxWords": 2,
+            "pattern": "^\\s*\\S+(\\s+\\S+){0,1}\\s*$"
+          },
+          "word2": {
+            "type": "string",
+            "description": "Second hard-cut word.",
+            "minLength": 1,
+            "maxLength": 10,
+            "maxWords": 2,
+            "pattern": "^\\s*\\S+(\\s+\\S+){0,1}\\s*$"
+          },
+          "word3": {
+            "type": "string",
+            "description": "Third word; the template adds its full stop, which splits into two dots.",
+            "minLength": 1,
+            "maxLength": 10,
+            "maxWords": 2,
+            "pattern": "^\\s*\\S+(\\s+\\S+){0,1}\\s*$"
+          }
+        }
+      },
+      "scene5": {
+        "type": "object",
+        "additionalProperties": false,
+        "required": [
+          "text"
+        ],
+        "properties": {
+          "text": {
+            "type": "string",
+            "description": "Call to action.",
+            "minLength": 1,
+            "maxLength": 32,
+            "maxWords": 5,
+            "pattern": "^\\s*\\S+(\\s+\\S+){0,4}\\s*$"
+          }
+        }
+      },
+      "scene6": {
+        "type": "object",
+        "additionalProperties": false,
+        "required": [
+          "brand",
+          "url"
+        ],
+        "properties": {
+          "brand": {
+            "type": "string",
+            "description": "Brand name on the end card (optional scene).",
+            "minLength": 1,
+            "maxLength": 24,
+            "maxWords": 3,
+            "pattern": "^\\s*\\S+(\\s+\\S+){0,2}\\s*$"
+          },
+          "url": {
+            "type": "string",
+            "description": "Website under the end-card rule (optional scene).",
+            "minLength": 1,
+            "maxLength": 40,
+            "maxWords": 1,
+            "pattern": "^\\s*\\S+(\\s+\\S+){0,0}\\s*$"
+          }
+        }
+      },
+      "theme": {
+        "type": "object",
+        "additionalProperties": false,
+        "description": "Optional colour tokens; any left out keep the template default.",
+        "properties": {
+          "background": {
+            "type": "string",
+            "format": "hex-color",
+            "pattern": "^#[0-9a-fA-F]{6}$",
+            "default": "#ffffff",
+            "description": "Canvas background of scenes 1–5."
+          },
+          "ink": {
+            "type": "string",
+            "format": "hex-color",
+            "pattern": "^#[0-9a-fA-F]{6}$",
+            "default": "#0a0a0a",
+            "description": "Main text, the bouncing square and the dots."
+          },
+          "muted": {
+            "type": "string",
+            "format": "hex-color",
+            "pattern": "^#[0-9a-fA-F]{6}$",
+            "default": "#5f5f5f",
+            "description": "Faded phrase lines and the last phrase word."
+          },
+          "outline": {
+            "type": "string",
+            "format": "hex-color",
+            "pattern": "^#[0-9a-fA-F]{6}$",
+            "default": "#cfcfcf",
+            "description": "Outline of the opening word before it fills."
+          },
+          "accent": {
+            "type": "string",
+            "format": "hex-color",
+            "pattern": "^#[0-9a-fA-F]{6}$",
+            "default": "#a22033",
+            "description": "End-card rule, emblem ring and corner glow."
+          },
+          "endBackground": {
+            "type": "string",
+            "format": "hex-color",
+            "pattern": "^#[0-9a-fA-F]{6}$",
+            "default": "#05070b",
+            "description": "End-card background."
+          },
+          "endInk": {
+            "type": "string",
+            "format": "hex-color",
+            "pattern": "^#[0-9a-fA-F]{6}$",
+            "default": "#f2f2f2",
+            "description": "End-card brand and url text."
+          }
+        }
+      }
+    }
+  },
+  "slots": [
+    {
+      "path": "scene1.text",
+      "maxWords": 2,
+      "maxChars": 12,
+      "fitWidth": 640,
+      "description": "Opening word(s); a square bounces across and fills them in."
+    },
+    {
+      "path": "scene2.text",
+      "maxWords": 2,
+      "maxChars": 14,
+      "fitWidth": 660,
+      "description": "Stacks up the screen five times, then peels away."
+    },
+    {
+      "path": "scene3.line1",
+      "maxWords": 3,
+      "maxChars": 28,
+      "fitWidth": 640,
+      "description": "Phrase line 1 (smallest type)."
+    },
+    {
+      "path": "scene3.line2",
+      "maxWords": 2,
+      "maxChars": 20,
+      "fitWidth": 660,
+      "description": "Phrase line 2."
+    },
+    {
+      "path": "scene3.line3",
+      "maxWords": 2,
+      "maxChars": 16,
+      "fitWidth": 660,
+      "description": "Phrase line 3."
+    },
+    {
+      "path": "scene3.line4",
+      "maxWords": 2,
+      "maxChars": 14,
+      "fitWidth": 660,
+      "description": "Phrase line 4."
+    },
+    {
+      "path": "scene3.line5",
+      "maxWords": 2,
+      "maxChars": 12,
+      "fitWidth": 660,
+      "description": "Phrase line 5, the emphasised word (caps look best)."
+    },
+    {
+      "path": "scene3.line6",
+      "maxWords": 2,
+      "maxChars": 12,
+      "fitWidth": 680,
+      "description": "Phrase line 6, the largest, in the muted colour."
+    },
+    {
+      "path": "scene4.word1",
+      "maxWords": 2,
+      "maxChars": 10,
+      "fitWidth": 640,
+      "description": "First hard-cut word."
+    },
+    {
+      "path": "scene4.word2",
+      "maxWords": 2,
+      "maxChars": 10,
+      "fitWidth": 640,
+      "description": "Second hard-cut word."
+    },
+    {
+      "path": "scene4.word3",
+      "maxWords": 2,
+      "maxChars": 10,
+      "fitWidth": 580,
+      "description": "Third word; the template adds its full stop, which splits into two dots."
+    },
+    {
+      "path": "scene5.text",
+      "maxWords": 5,
+      "maxChars": 32,
+      "fitWidth": 660,
+      "description": "Call to action."
+    },
+    {
+      "path": "scene6.brand",
+      "maxWords": 3,
+      "maxChars": 24,
+      "fitWidth": 560,
+      "description": "Brand name on the end card (optional scene)."
+    },
+    {
+      "path": "scene6.url",
+      "maxWords": 1,
+      "maxChars": 40,
+      "fitWidth": 560,
+      "description": "Website under the end-card rule (optional scene)."
+    }
+  ],
+  "theme": [
+    {
+      "token": "background",
+      "default": "#ffffff",
+      "description": "Canvas background of scenes 1–5."
+    },
+    {
+      "token": "ink",
+      "default": "#0a0a0a",
+      "description": "Main text, the bouncing square and the dots."
+    },
+    {
+      "token": "muted",
+      "default": "#5f5f5f",
+      "description": "Faded phrase lines and the last phrase word."
+    },
+    {
+      "token": "outline",
+      "default": "#cfcfcf",
+      "description": "Outline of the opening word before it fills."
+    },
+    {
+      "token": "accent",
+      "default": "#a22033",
+      "description": "End-card rule, emblem ring and corner glow."
+    },
+    {
+      "token": "endBackground",
+      "default": "#05070b",
+      "description": "End-card background."
+    },
+    {
+      "token": "endInk",
+      "default": "#f2f2f2",
+      "description": "End-card brand and url text."
+    }
+  ],
+  "optionalScenes": [
+    "scene6"
+  ],
+  "exampleContent": {
+    "scene1": {
+      "text": "Hey"
+    },
+    "scene2": {
+      "text": "Scroller"
+    },
+    "scene3": {
+      "line1": "Scrolling",
+      "line2": "Won't",
+      "line3": "Get",
+      "line4": "Your",
+      "line5": "BRAND",
+      "line6": "Noticed"
+    },
+    "scene4": {
+      "word1": "BUT",
+      "word2": "WE",
+      "word3": "WILL"
+    },
+    "scene5": {
+      "text": "contact us today"
+    },
+    "scene6": {
+      "brand": "CompPack",
+      "url": "comppack.vercel.app"
+    }
+  }
+};