@appinternalleads/ui 0.4.0 → 0.4.1

package/src/motion/templates/word-motion.ts

@@ -0,0 +1,1166 @@
+/* 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 wordMotion: MotionTemplate = {
+  "id": "word-motion",
+  "version": "1.0.0",
+  "title": "Word motion — editorial word sequence",
+  "description": "An editorial word-by-word sequence (9:16 or 16:9): each scene is a word or two on a light or dark card — a grainy blur that resolves, a slide in from the left, a liquid warp, or a hard cut — over an accelerating rhythm, with an optional rising dot field and a wordmark. You supply the list of words; the motion is fixed.",
+  "template": "<div class=\"wmo\" data-template=\"word-motion\"><svg class=\"wmo-filters\" aria-hidden=\"true\" width=\"0\" height=\"0\"><defs><filter id=\"wmo-grain-1\" x=\"-20%\" y=\"-40%\" width=\"140%\" height=\"180%\" color-interpolation-filters=\"sRGB\"><feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"7\" result=\"b\"></feGaussianBlur><feTurbulence type=\"fractalNoise\" baseFrequency=\"1.1\" numOctaves=\"1\" seed=\"3\" result=\"n\"></feTurbulence><feColorMatrix in=\"n\" type=\"matrix\" values=\"0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1 0 0 0 0\" result=\"na\"></feColorMatrix><feComposite in=\"b\" in2=\"na\" operator=\"arithmetic\" k1=\"0\" k2=\"5.6\" k3=\"-7\" k4=\"0.5\" result=\"mask\"></feComposite><feComposite in=\"b\" in2=\"mask\" operator=\"in\"></feComposite></filter><filter id=\"wmo-grain-2\" x=\"-20%\" y=\"-40%\" width=\"140%\" height=\"180%\" color-interpolation-filters=\"sRGB\"><feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"4.5\" result=\"b\"></feGaussianBlur><feTurbulence type=\"fractalNoise\" baseFrequency=\"1.1\" numOctaves=\"1\" seed=\"5\" result=\"n\"></feTurbulence><feColorMatrix in=\"n\" type=\"matrix\" values=\"0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1 0 0 0 0\" result=\"na\"></feColorMatrix><feComposite in=\"b\" in2=\"na\" operator=\"arithmetic\" k1=\"0\" k2=\"5.88\" k3=\"-7\" k4=\"0.5\" result=\"mask\"></feComposite><feComposite in=\"b\" in2=\"mask\" operator=\"in\"></feComposite></filter><filter id=\"wmo-grain-3\" x=\"-20%\" y=\"-40%\" width=\"140%\" height=\"180%\" color-interpolation-filters=\"sRGB\"><feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"2\" result=\"b\"></feGaussianBlur><feTurbulence type=\"fractalNoise\" baseFrequency=\"1.1\" numOctaves=\"1\" seed=\"7\" result=\"n\"></feTurbulence><feColorMatrix in=\"n\" type=\"matrix\" values=\"0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1 0 0 0 0\" result=\"na\"></feColorMatrix><feComposite in=\"b\" in2=\"na\" operator=\"arithmetic\" k1=\"0\" k2=\"6.02\" k3=\"-7\" k4=\"0.5\" result=\"mask\"></feComposite><feComposite in=\"b\" in2=\"mask\" operator=\"in\"></feComposite></filter><filter id=\"wmo-grain-4\" x=\"-20%\" y=\"-40%\" width=\"140%\" height=\"180%\" color-interpolation-filters=\"sRGB\"><feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"0.9\" result=\"b\"></feGaussianBlur><feTurbulence type=\"fractalNoise\" baseFrequency=\"1.1\" numOctaves=\"1\" seed=\"9\" result=\"n\"></feTurbulence><feColorMatrix in=\"n\" type=\"matrix\" values=\"0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1 0 0 0 0\" result=\"na\"></feColorMatrix><feComposite in=\"b\" in2=\"na\" operator=\"arithmetic\" k1=\"0\" k2=\"6.3\" k3=\"-7\" k4=\"0.5\" result=\"mask\"></feComposite><feComposite in=\"b\" in2=\"mask\" operator=\"in\"></feComposite></filter><filter id=\"wmo-smear\" x=\"-60%\" y=\"-10%\" width=\"220%\" height=\"120%\"><feGaussianBlur stdDeviation=\"14 0\"></feGaussianBlur></filter><filter id=\"wmo-smear-soft\" x=\"-40%\" y=\"-10%\" width=\"180%\" height=\"120%\"><feGaussianBlur stdDeviation=\"5 0\"></feGaussianBlur></filter><filter id=\"wmo-warp-1\" x=\"-30%\" y=\"-80%\" width=\"160%\" height=\"260%\"><feTurbulence type=\"fractalNoise\" baseFrequency=\"0.0035 0.022\" numOctaves=\"1\" seed=\"7\" result=\"n\"></feTurbulence><feDisplacementMap in=\"SourceGraphic\" in2=\"n\" scale=\"190\" xChannelSelector=\"R\" yChannelSelector=\"G\"></feDisplacementMap></filter><filter id=\"wmo-warp-2\" x=\"-30%\" y=\"-80%\" width=\"160%\" height=\"260%\"><feTurbulence type=\"fractalNoise\" baseFrequency=\"0.035 0.008\" numOctaves=\"1\" seed=\"11\" result=\"n\"></feTurbulence><feDisplacementMap in=\"SourceGraphic\" in2=\"n\" scale=\"120\" xChannelSelector=\"R\" yChannelSelector=\"G\"></feDisplacementMap></filter><filter id=\"wmo-warp-3\" x=\"-30%\" y=\"-80%\" width=\"160%\" height=\"260%\"><feTurbulence type=\"fractalNoise\" baseFrequency=\"0.07 0.05\" numOctaves=\"1\" seed=\"13\" result=\"n\"></feTurbulence><feDisplacementMap in=\"SourceGraphic\" in2=\"n\" scale=\"46\" xChannelSelector=\"R\" yChannelSelector=\"G\"></feDisplacementMap></filter><filter id=\"wmo-warp-4\" x=\"-30%\" y=\"-80%\" width=\"160%\" height=\"260%\"><feTurbulence type=\"turbulence\" baseFrequency=\"0.02 0.25\" numOctaves=\"1\" seed=\"17\" result=\"n\"></feTurbulence><feDisplacementMap in=\"SourceGraphic\" in2=\"n\" scale=\"12\" xChannelSelector=\"R\" yChannelSelector=\"G\"></feDisplacementMap></filter></defs></svg><section data-scene=\"scenes.$\" class=\"wmo-scene\"><div class=\"wmo-bg\"></div><div class=\"wmo-dots\"><div data-target=\"dots-far\" class=\"wmo-dots-layer wmo-dots-far\"></div><div data-target=\"dots-mid\" class=\"wmo-dots-layer wmo-dots-mid\"></div><div data-target=\"dots-near\" class=\"wmo-dots-layer wmo-dots-near\"></div></div><div data-target=\"word\" class=\"wmo-word\"><div data-target=\"shrink\" class=\"wmo-shrink\"><div data-target=\"grow\" class=\"wmo-grow\"><div data-when=\"layout=word\" class=\"wmo-text wmo-text--word\"><div class=\"wmo-line wmo-line1\"><span data-content=\"scenes.$.text\" data-fit=\"600\" data-fit-landscape=\"1040\"></span></div></div><div data-when=\"layout=display\" class=\"wmo-text wmo-text--display\"><div class=\"wmo-line wmo-line1\"><span data-content=\"scenes.$.text\" data-fit=\"600\" data-fit-landscape=\"1000\"></span></div></div><div data-when=\"layout=display-large\" class=\"wmo-text wmo-text--display-large\"><div class=\"wmo-line wmo-line1\"><span data-content=\"scenes.$.text\" data-fit=\"640\" data-fit-landscape=\"1100\"></span></div></div><div data-when=\"layout=stack\" class=\"wmo-text wmo-text--stack\"><div class=\"wmo-line wmo-line1\"><span data-content=\"scenes.$.text\" data-fit=\"560\" data-fit-landscape=\"900\"></span></div><div class=\"wmo-line wmo-line2\" data-if=\"scenes.$.line2\"><span data-content=\"scenes.$.line2\" data-fit=\"620\" data-fit-landscape=\"1040\"></span></div></div><div data-when=\"layout=stack-left\" class=\"wmo-text wmo-text--stack-left\"><div class=\"wmo-line wmo-line1\"><span data-content=\"scenes.$.text\" data-fit=\"580\" data-fit-landscape=\"900\"></span></div><div class=\"wmo-line wmo-line2\" data-if=\"scenes.$.line2\"><span data-content=\"scenes.$.line2\" data-fit=\"620\" data-fit-landscape=\"1000\"></span></div></div></div></div></div></section><div class=\"wmo-logo\" data-if=\"logo\"><div class=\"wmo-logo-line\"><svg class=\"wmo-spark wmo-spark-a\" viewBox=\"0 0 10 10\" aria-hidden=\"true\"><path d=\"M5 0 C5.6 3.6 6.4 4.4 10 5 C6.4 5.6 5.6 6.4 5 10 C4.4 6.4 3.6 5.6 0 5 C3.6 4.4 4.4 3.6 5 0 Z\"></path></svg><span data-content=\"logo.line1\"></span><svg class=\"wmo-spark wmo-spark-b\" viewBox=\"0 0 10 10\" aria-hidden=\"true\"><path d=\"M5 0 C5.6 3.6 6.4 4.4 10 5 C6.4 5.6 5.6 6.4 5 10 C4.4 6.4 3.6 5.6 0 5 C3.6 4.4 4.4 3.6 5 0 Z\"></path></svg></div><div class=\"wmo-logo-line\" data-if=\"logo.line2\"><span data-content=\"logo.line2\"></span></div></div></div>",
+  "styles": "/*\n * word-motion — the fixed design. Canvas, type, colour and layout per format.\n * Content never reaches this file. The motion contract only sets transform, opacity and filter on\n * [data-target] elements; the item's choices arrive as data-layout / data-theme / data-particles.\n */\n.wmo {\n  /* Theme tokens: the only colours a person or agent may change (content `theme`). */\n  --cp-light: #fbfbfc;\n  --cp-lightInk: #010101;\n  --cp-dark: #100651;\n  --cp-darkInk: #fbfbfc;\n  --cp-accent: #2b2378;\n  --cp-logo: #010101;\n  position: relative;\n  width: 720px;\n  height: 1280px;\n  overflow: hidden;\n  background: var(--cp-light);\n  font-family: 'Outfit', 'Helvetica Neue', Arial, sans-serif;\n  font-weight: 600;\n  line-height: 1;\n  white-space: nowrap;\n  -webkit-font-smoothing: antialiased;\n}\n.wmo[data-format=\"landscape\"] { width: 1280px; height: 720px; }\n.wmo * { box-sizing: border-box; }\n.wmo [data-fit] { font-size: calc(var(--fit, 1) * 1em); }\n.wmo-filters { position: absolute; width: 0; height: 0; overflow: hidden; }\n\n/* Scenes and themes */\n.wmo-scene { position: absolute; inset: 0; overflow: hidden; background: var(--cp-light); color: var(--cp-lightInk); }\n.wmo-scene[data-theme=\"dark\"] { background: var(--cp-dark); color: var(--cp-darkInk); }\n\n/* The dark theme's soft shapes: a darker cap at the top, a tall glowing arch rising from the\n   bottom left, a faint band down the right. Static, measured from the reference. */\n.wmo-bg { position: absolute; inset: 0; display: none; }\n.wmo-scene[data-theme=\"dark\"] .wmo-bg {\n  display: block;\n  background:\n    radial-gradient(56% 30% at 34% 104%, color-mix(in srgb, var(--cp-accent) 80%, transparent), transparent 100%),\n    radial-gradient(40% 34% at 32% 100%, color-mix(in srgb, var(--cp-accent) 45%, transparent), transparent 100%),\n    radial-gradient(22% 30% at 100% 88%, color-mix(in srgb, var(--cp-accent) 22%, transparent), transparent 100%),\n    radial-gradient(85% 13% at 50% 0%, color-mix(in srgb, var(--cp-dark) 88%, var(--cp-lightInk)), transparent 100%);\n}\n.wmo[data-format=\"landscape\"] .wmo-scene[data-theme=\"dark\"] .wmo-bg {\n  background:\n    radial-gradient(32% 46% at 30% 108%, color-mix(in srgb, var(--cp-accent) 80%, transparent), transparent 100%),\n    radial-gradient(22% 52% at 29% 100%, color-mix(in srgb, var(--cp-accent) 45%, transparent), transparent 100%),\n    radial-gradient(14% 50% at 100% 90%, color-mix(in srgb, var(--cp-accent) 22%, transparent), transparent 100%),\n    radial-gradient(60% 22% at 50% 0%, color-mix(in srgb, var(--cp-dark) 88%, var(--cp-lightInk)), transparent 100%);\n}\n\n/* Dots: each layer is one 2px element; the field is its box-shadows (generated, per format). */\n.wmo-dots { position: absolute; inset: 0; display: none; }\n.wmo-scene[data-particles=\"on\"] .wmo-dots { display: block; }\n.wmo-dots-layer { position: absolute; left: 0; top: 0; }\n.wmo-dots-layer::before { content: ''; position: absolute; left: -1px; top: -1px; width: 2px; height: 2px; border-radius: 50%; }\n\n/* Words. `word` takes the transition, `shrink`/`grow` the drift; one of the two drifts is\n   neutralised per layout (display faces grow, cards shrink, the left stack holds still). */\n.wmo-word, .wmo-shrink, .wmo-grow { position: absolute; inset: 0; }\n.wmo-scene:is([data-layout=\"display\"], [data-layout=\"display-large\"], [data-layout=\"stack-left\"]) .wmo-shrink { transform: none !important; }\n.wmo-scene:not([data-layout=\"display\"], [data-layout=\"display-large\"]) .wmo-grow { transform: none !important; }\n.wmo-text { position: absolute; left: 0; right: 0; }\n.wmo-line { display: block; }\n.wmo-text--word, .wmo-text--display, .wmo-text--display-large, .wmo-text--stack { text-align: center; }\n\n/* Portrait (720×1280). `top` places each line box; sizes match the reference's measured glyphs. */\n.wmo-word, .wmo-shrink, .wmo-grow { transform-origin: 50% 624px; }\n.wmo-text--word { top: 536px; font-size: 154px; letter-spacing: -1px; }\n.wmo-text--display { top: 492px; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 160px; letter-spacing: -3px; }\n.wmo-text--display-large { top: 454px; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 302px; letter-spacing: -6px; }\n.wmo-text--stack { top: 470px; }\n.wmo-text--stack .wmo-line1 { font-size: 164px; letter-spacing: -1px; }\n.wmo-text--stack .wmo-line2 { font-size: 212px; letter-spacing: -2px; margin-top: -81px; }\n.wmo-text--stack-left { top: 412px; left: 86px; }\n.wmo-text--stack-left .wmo-line1 { font-size: 128px; letter-spacing: -1px; }\n.wmo-text--stack-left .wmo-line2 { font-size: 272px; letter-spacing: -4px; margin-top: -42px; }\n\n/* Landscape (1280×720): the same composition re-set for a wide canvas — the words stay the hero\n   at a slightly smaller size, the stack moves to the left third, and the negative space is kept. */\n.wmo[data-format=\"landscape\"] .wmo-word,\n.wmo[data-format=\"landscape\"] .wmo-shrink,\n.wmo[data-format=\"landscape\"] .wmo-grow { transform-origin: 50% 372px; }\n.wmo[data-format=\"landscape\"] .wmo-text--word { top: 296px; font-size: 140px; }\n.wmo[data-format=\"landscape\"] .wmo-text--display { top: 280px; font-size: 150px; }\n.wmo[data-format=\"landscape\"] .wmo-text--display-large { top: 222px; font-size: 280px; }\n.wmo[data-format=\"landscape\"] .wmo-text--stack { top: 250px; }\n.wmo[data-format=\"landscape\"] .wmo-text--stack .wmo-line1 { font-size: 104px; }\n.wmo[data-format=\"landscape\"] .wmo-text--stack .wmo-line2 { font-size: 168px; margin-top: -64px; }\n.wmo[data-format=\"landscape\"] .wmo-text--stack-left { top: 170px; left: 200px; }\n.wmo[data-format=\"landscape\"] .wmo-text--stack-left .wmo-line1 { font-size: 100px; }\n.wmo[data-format=\"landscape\"] .wmo-text--stack-left .wmo-line2 { font-size: 206px; margin-top: -42px; }\n\n/* The wordmark: top centre on every scene, in its own colour (dark even on dark scenes, as in the reference). */\n.wmo-logo { position: absolute; left: 0; right: 0; top: 13px; z-index: 2; display: flex; flex-direction: column; align-items: center; color: var(--cp-logo); font-size: 23px; letter-spacing: -0.3px; line-height: 0.92; pointer-events: none; }\n.wmo-logo-line { position: relative; display: flex; align-items: center; }\n.wmo-logo-line:first-child { margin-right: 22px; }\n.wmo-spark { fill: currentColor; }\n.wmo-spark-a { position: absolute; left: -3px; top: -5px; width: 6px; height: 6px; }\n.wmo-spark-b { width: 8px; height: 8px; margin-left: 3px; margin-top: 8px; }\n.wmo[data-format=\"landscape\"] .wmo-logo { top: 14px; }\n\n/* The dot field, generated from a fixed seed (particles.ts). */\n.wmo[data-format=\"portrait\"] .wmo-dots-near::before { box-shadow: 442px 1740.9px 0 3.3px currentColor, 49.4px 353.4px 0 3.2px currentColor, 555.2px 1678px 0 3.2px currentColor, 163.9px 873.2px 0 2.8px currentColor, 358.2px 1362.3px 0 2.7px currentColor; }\n.wmo[data-format=\"portrait\"] .wmo-dots-mid::before { box-shadow: 575.3px 1002.2px 0 1.8px color-mix(in srgb, currentColor 95%, transparent), 594.6px 1006.4px 0 1.6px color-mix(in srgb, currentColor 95%, transparent), 670px 1200.3px 0 1px color-mix(in srgb, currentColor 95%, transparent), 398.9px 1476.1px 0 1.4px color-mix(in srgb, currentColor 95%, transparent), 501.6px 382.6px 0 1.2px color-mix(in srgb, currentColor 95%, transparent), 443.5px 130.4px 0 1px color-mix(in srgb, currentColor 95%, transparent), 557.1px 1002.3px 0 1.1px color-mix(in srgb, currentColor 95%, transparent), 457.7px 192.4px 0 1.2px color-mix(in srgb, currentColor 95%, transparent), 143.4px 321.3px 0 1.4px color-mix(in srgb, currentColor 95%, transparent), 527.1px 1517.4px 0 1.2px color-mix(in srgb, currentColor 95%, transparent), 587.3px 776.1px 0 1.8px color-mix(in srgb, currentColor 95%, transparent), 199.8px 851.5px 0 1.6px color-mix(in srgb, currentColor 95%, transparent), 213.4px 437.8px 0 1.5px color-mix(in srgb, currentColor 95%, transparent), 24.1px 217px 0 1.5px color-mix(in srgb, currentColor 95%, transparent), 552.3px 1214.2px 0 1.9px color-mix(in srgb, currentColor 95%, transparent), 453.3px 1108.3px 0 1.7px color-mix(in srgb, currentColor 95%, transparent); }\n.wmo[data-format=\"portrait\"] .wmo-dots-far::before { box-shadow: 479px 644.3px 0 0.5px color-mix(in srgb, currentColor 65%, transparent), 272.9px 1138.9px 0 0.1px color-mix(in srgb, currentColor 65%, transparent), 585.3px 1004.8px 0 0.4px color-mix(in srgb, currentColor 65%, transparent), 72.1px 270.2px 0 0.4px color-mix(in srgb, currentColor 65%, transparent), 85.1px 986.2px 0 0.1px color-mix(in srgb, currentColor 65%, transparent), 251px 1222.3px 0 0.5px color-mix(in srgb, currentColor 65%, transparent), 50.4px 1391px 0 0.3px color-mix(in srgb, currentColor 65%, transparent), 215.2px 339.8px 0 0.4px color-mix(in srgb, currentColor 65%, transparent), 577.1px 1092.8px 0 0.4px color-mix(in srgb, currentColor 65%, transparent), 230px 299.8px 0 0.4px color-mix(in srgb, currentColor 65%, transparent), 294.6px 970.4px 0 0.3px color-mix(in srgb, currentColor 65%, transparent), 357.9px 878.2px 0 0.2px color-mix(in srgb, currentColor 65%, transparent), 585.8px 1132.9px 0 0.3px color-mix(in srgb, currentColor 65%, transparent), 208px 1341.4px 0 0.4px color-mix(in srgb, currentColor 65%, transparent), 422.3px 397.9px 0 0.5px color-mix(in srgb, currentColor 65%, transparent), 584.8px 408.2px 0 0px color-mix(in srgb, currentColor 65%, transparent), 297.2px 479.6px 0 0.1px color-mix(in srgb, currentColor 65%, transparent), 243.8px 1373.4px 0 0.2px color-mix(in srgb, currentColor 65%, transparent), 532.4px 1178.8px 0 0.2px color-mix(in srgb, currentColor 65%, transparent), 51.3px 653.5px 0 0px color-mix(in srgb, currentColor 65%, transparent), 439.2px 611.5px 0 0.3px color-mix(in srgb, currentColor 65%, transparent), 615.1px 357.7px 0 0.6px color-mix(in srgb, currentColor 65%, transparent), 360.8px 195.1px 0 0.4px color-mix(in srgb, currentColor 65%, transparent), 432.4px 538.1px 0 0.5px color-mix(in srgb, currentColor 65%, transparent), 395.7px 327.9px 0 0.1px color-mix(in srgb, currentColor 65%, transparent), 149.9px 87px 0 0px color-mix(in srgb, currentColor 65%, transparent); }\n.wmo[data-format=\"landscape\"] .wmo-dots-near::before { box-shadow: 929.6px 272.1px 0 2.8px currentColor, 718.3px 393.2px 0 2.8px currentColor, 976.2px 309.7px 0 3.2px currentColor, 120.8px 1201.5px 0 2.5px currentColor, 311.9px 501.7px 0 2.4px currentColor; }\n.wmo[data-format=\"landscape\"] .wmo-dots-mid::before { box-shadow: 440.9px 192px 0 1px color-mix(in srgb, currentColor 95%, transparent), 273.4px 566.2px 0 1.4px color-mix(in srgb, currentColor 95%, transparent), 547.9px 509px 0 1.7px color-mix(in srgb, currentColor 95%, transparent), 1195.3px 99.2px 0 1.9px color-mix(in srgb, currentColor 95%, transparent), 722.5px 526.5px 0 1.8px color-mix(in srgb, currentColor 95%, transparent), 23.9px 298.9px 0 1.8px color-mix(in srgb, currentColor 95%, transparent), 305.6px 457.7px 0 1.6px color-mix(in srgb, currentColor 95%, transparent), 1031.9px 143px 0 1.7px color-mix(in srgb, currentColor 95%, transparent), 904.9px 531.8px 0 1.6px color-mix(in srgb, currentColor 95%, transparent), 292.8px 293px 0 1.5px color-mix(in srgb, currentColor 95%, transparent), 772px 300.4px 0 1.6px color-mix(in srgb, currentColor 95%, transparent), 307.3px 280.7px 0 1.8px color-mix(in srgb, currentColor 95%, transparent), 579.1px 413.1px 0 1.2px color-mix(in srgb, currentColor 95%, transparent), 1144.3px 127.3px 0 1.1px color-mix(in srgb, currentColor 95%, transparent), 1064.9px 469px 0 1px color-mix(in srgb, currentColor 95%, transparent), 953.4px 537.7px 0 1.1px color-mix(in srgb, currentColor 95%, transparent); }\n.wmo[data-format=\"landscape\"] .wmo-dots-far::before { box-shadow: 1075.5px 740.3px 0 0.3px color-mix(in srgb, currentColor 65%, transparent), 867.1px 120.2px 0 0.2px color-mix(in srgb, currentColor 65%, transparent), 552.2px 87.3px 0 0.3px color-mix(in srgb, currentColor 65%, transparent), 684.9px 767px 0 0.4px color-mix(in srgb, currentColor 65%, transparent), 1205.4px 138.5px 0 0.2px color-mix(in srgb, currentColor 65%, transparent), 1056.3px 93.1px 0 0.5px color-mix(in srgb, currentColor 65%, transparent), 624.5px 244.2px 0 0.2px color-mix(in srgb, currentColor 65%, transparent), 665.2px 236px 0 0.5px color-mix(in srgb, currentColor 65%, transparent), 159.2px 646.3px 0 0.1px color-mix(in srgb, currentColor 65%, transparent), 52.3px 188.7px 0 0.2px color-mix(in srgb, currentColor 65%, transparent), 133.7px 381.1px 0 0px color-mix(in srgb, currentColor 65%, transparent), 173.6px 492.1px 0 0.1px color-mix(in srgb, currentColor 65%, transparent), 970.8px 135.9px 0 0px color-mix(in srgb, currentColor 65%, transparent), 1225.6px 244.7px 0 0.3px color-mix(in srgb, currentColor 65%, transparent), 213px 558.4px 0 0.5px color-mix(in srgb, currentColor 65%, transparent), 1176.6px 635.4px 0 0.4px color-mix(in srgb, currentColor 65%, transparent), 159.7px 511px 0 0.6px color-mix(in srgb, currentColor 65%, transparent), 944.7px 657.4px 0 0.4px color-mix(in srgb, currentColor 65%, transparent), 111.9px 295.7px 0 0.1px color-mix(in srgb, currentColor 65%, transparent), 1070.3px 296.9px 0 0.3px color-mix(in srgb, currentColor 65%, transparent), 993.5px 475.4px 0 0.2px color-mix(in srgb, currentColor 65%, transparent), 772.8px 856.6px 0 0.4px color-mix(in srgb, currentColor 65%, transparent), 1013px 451.4px 0 0px color-mix(in srgb, currentColor 65%, transparent), 467px 766.8px 0 0.2px color-mix(in srgb, currentColor 65%, transparent), 1092.5px 410.6px 0 0.4px color-mix(in srgb, currentColor 65%, transparent), 531.5px 672.7px 0 0.1px color-mix(in srgb, currentColor 65%, transparent); }\n",
+  "fonts": [
+    {
+      "family": "Outfit",
+      "weights": [
+        "600"
+      ],
+      "css": "https://fonts.googleapis.com/css2?family=Outfit:wght@600&display=block"
+    },
+    {
+      "family": "Archivo",
+      "weights": [
+        "800"
+      ],
+      "css": "https://fonts.googleapis.com/css2?family=Archivo:wght@800&display=block"
+    }
+  ],
+  "motion": {
+    "template": "word-motion",
+    "version": "1.0.0",
+    "fps": 30,
+    "width": 720,
+    "height": 1280,
+    "durationInFrames": 273,
+    "formats": [
+      {
+        "id": "portrait",
+        "aspectRatio": "9:16",
+        "width": 720,
+        "height": 1280
+      },
+      {
+        "id": "landscape",
+        "aspectRatio": "16:9",
+        "width": 1280,
+        "height": 720
+      }
+    ],
+    "sequence": {
+      "path": "scenes",
+      "minItems": 1,
+      "maxItems": 40,
+      "motionField": "transition",
+      "options": {
+        "layout": [
+          "word",
+          "display",
+          "display-large",
+          "stack",
+          "stack-left"
+        ],
+        "theme": [
+          "light",
+          "dark"
+        ],
+        "transition": [
+          "cut",
+          "resolve",
+          "slide",
+          "warp"
+        ],
+        "particles": [
+          "off",
+          "on"
+        ]
+      },
+      "rhythm": [
+        24,
+        22,
+        16,
+        16,
+        15,
+        15,
+        14,
+        14,
+        11,
+        12,
+        11,
+        11,
+        11,
+        10,
+        9,
+        9,
+        10,
+        9,
+        8,
+        9,
+        8,
+        9
+      ]
+    },
+    "scenes": [
+      {
+        "id": "cut",
+        "from": 0,
+        "durationInFrames": 6,
+        "tracks": [
+          {
+            "target": "shrink",
+            "property": "scale",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 1
+              },
+              {
+                "f": 60,
+                "v": 0.49
+              }
+            ]
+          },
+          {
+            "target": "grow",
+            "property": "scale",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 1
+              },
+              {
+                "f": 60,
+                "v": 1.27
+              }
+            ]
+          },
+          {
+            "target": "dots-near",
+            "property": "y",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 60,
+                "v": -1440
+              }
+            ]
+          },
+          {
+            "target": "dots-mid",
+            "property": "y",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 60,
+                "v": -780
+              }
+            ]
+          },
+          {
+            "target": "dots-mid",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0.35
+              },
+              {
+                "f": 5,
+                "v": 1,
+                "e": "ease-out"
+              }
+            ]
+          },
+          {
+            "target": "dots-far",
+            "property": "y",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 60,
+                "v": -480
+              }
+            ]
+          },
+          {
+            "target": "dots-far",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 8,
+                "v": 1,
+                "e": "ease-out"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "id": "resolve",
+        "from": 0,
+        "durationInFrames": 12,
+        "tracks": [
+          {
+            "target": "word",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0.78
+              },
+              {
+                "f": 5,
+                "v": 0.85
+              },
+              {
+                "f": 6,
+                "v": 1,
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "word",
+            "property": "scale",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0.95
+              },
+              {
+                "f": 6,
+                "v": 1,
+                "e": "ease-out"
+              }
+            ]
+          },
+          {
+            "target": "word",
+            "property": "fx",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": "wmo-grain-1"
+              },
+              {
+                "f": 2,
+                "v": "wmo-grain-2",
+                "e": "hold"
+              },
+              {
+                "f": 4,
+                "v": "wmo-grain-3",
+                "e": "hold"
+              },
+              {
+                "f": 5,
+                "v": "wmo-grain-4",
+                "e": "hold"
+              },
+              {
+                "f": 6,
+                "v": "none",
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "dots-near",
+            "property": "y",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 60,
+                "v": -1440
+              }
+            ]
+          },
+          {
+            "target": "dots-mid",
+            "property": "y",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 60,
+                "v": -780
+              }
+            ]
+          },
+          {
+            "target": "dots-mid",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0.35
+              },
+              {
+                "f": 5,
+                "v": 1,
+                "e": "ease-out"
+              }
+            ]
+          },
+          {
+            "target": "dots-far",
+            "property": "y",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 60,
+                "v": -480
+              }
+            ]
+          },
+          {
+            "target": "dots-far",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 8,
+                "v": 1,
+                "e": "ease-out"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "id": "slide",
+        "from": 0,
+        "durationInFrames": 16,
+        "tracks": [
+          {
+            "target": "word",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 2,
+                "v": 1,
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "word",
+            "property": "x",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": -380
+              },
+              {
+                "f": 2,
+                "v": -267
+              },
+              {
+                "f": 3,
+                "v": -191
+              },
+              {
+                "f": 4,
+                "v": -140
+              },
+              {
+                "f": 5,
+                "v": -103
+              },
+              {
+                "f": 6,
+                "v": -77
+              },
+              {
+                "f": 7,
+                "v": -56
+              },
+              {
+                "f": 8,
+                "v": -40
+              },
+              {
+                "f": 9,
+                "v": -27
+              },
+              {
+                "f": 10,
+                "v": -18
+              },
+              {
+                "f": 11,
+                "v": -11
+              },
+              {
+                "f": 12,
+                "v": -6
+              },
+              {
+                "f": 13,
+                "v": -3
+              },
+              {
+                "f": 14,
+                "v": -1
+              },
+              {
+                "f": 15,
+                "v": 0
+              }
+            ]
+          },
+          {
+            "target": "word",
+            "property": "fx",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": "wmo-smear"
+              },
+              {
+                "f": 4,
+                "v": "wmo-smear-soft",
+                "e": "hold"
+              },
+              {
+                "f": 6,
+                "v": "none",
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "dots-near",
+            "property": "y",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 60,
+                "v": -1440
+              }
+            ]
+          },
+          {
+            "target": "dots-mid",
+            "property": "y",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 60,
+                "v": -780
+              }
+            ]
+          },
+          {
+            "target": "dots-mid",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0.35
+              },
+              {
+                "f": 5,
+                "v": 1,
+                "e": "ease-out"
+              }
+            ]
+          },
+          {
+            "target": "dots-far",
+            "property": "y",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 60,
+                "v": -480
+              }
+            ]
+          },
+          {
+            "target": "dots-far",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 8,
+                "v": 1,
+                "e": "ease-out"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "id": "warp",
+        "from": 0,
+        "durationInFrames": 12,
+        "tracks": [
+          {
+            "target": "word",
+            "property": "fx",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": "wmo-warp-1"
+              },
+              {
+                "f": 3,
+                "v": "wmo-warp-2",
+                "e": "hold"
+              },
+              {
+                "f": 5,
+                "v": "wmo-warp-3",
+                "e": "hold"
+              },
+              {
+                "f": 7,
+                "v": "wmo-warp-4",
+                "e": "hold"
+              },
+              {
+                "f": 8,
+                "v": "none",
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "word",
+            "property": "scaleX",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 1.38
+              },
+              {
+                "f": 3,
+                "v": 1.1,
+                "e": "hold"
+              },
+              {
+                "f": 5,
+                "v": 1,
+                "e": "hold"
+              }
+            ]
+          },
+          {
+            "target": "shrink",
+            "property": "scale",
+            "keyframes": [
+              {
+                "f": 8,
+                "v": 1
+              },
+              {
+                "f": 68,
+                "v": 0.49
+              }
+            ]
+          },
+          {
+            "target": "grow",
+            "property": "scale",
+            "keyframes": [
+              {
+                "f": 8,
+                "v": 1
+              },
+              {
+                "f": 68,
+                "v": 1.27
+              }
+            ]
+          },
+          {
+            "target": "dots-near",
+            "property": "y",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 60,
+                "v": -1440
+              }
+            ]
+          },
+          {
+            "target": "dots-mid",
+            "property": "y",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 60,
+                "v": -780
+              }
+            ]
+          },
+          {
+            "target": "dots-mid",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0.35
+              },
+              {
+                "f": 5,
+                "v": 1,
+                "e": "ease-out"
+              }
+            ]
+          },
+          {
+            "target": "dots-far",
+            "property": "y",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 60,
+                "v": -480
+              }
+            ]
+          },
+          {
+            "target": "dots-far",
+            "property": "opacity",
+            "keyframes": [
+              {
+                "f": 0,
+                "v": 0
+              },
+              {
+                "f": 8,
+                "v": 1,
+                "e": "ease-out"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "schema": {
+    "$schema": "https://json-schema.org/draft/2020-12/schema",
+    "$id": "word-motion/content.schema.json",
+    "title": "word-motion content",
+    "description": "What a person or agent may set: the list of scenes (words, each with fixed choices of layout, theme, transition and particles), the wordmark, colours and the aspect ratio. Timing, motion, layout geometry and type are fixed by the template.",
+    "type": "object",
+    "additionalProperties": false,
+    "required": [
+      "scenes"
+    ],
+    "properties": {
+      "aspectRatio": {
+        "type": "string",
+        "enum": [
+          "9:16",
+          "16:9"
+        ],
+        "default": "9:16",
+        "description": "The canvas: 9:16 is 720×1280, 16:9 is 1280×720. The animation is the same; only the composition adapts."
+      },
+      "scenes": {
+        "type": "array",
+        "minItems": 1,
+        "maxItems": 40,
+        "description": "The scenes, in order. Each is one beat of the fixed rhythm.",
+        "items": {
+          "type": "object",
+          "additionalProperties": false,
+          "required": [
+            "text"
+          ],
+          "properties": {
+            "text": {
+              "type": "string",
+              "description": "The scene's word (a stack layout's first, smaller line).",
+              "minLength": 1,
+              "maxLength": 14,
+              "maxWords": 2,
+              "pattern": "^\\s*\\S+(\\s+\\S+){0,1}\\s*$"
+            },
+            "line2": {
+              "type": "string",
+              "description": "Second, bigger line under the word. Stack layouts only.",
+              "minLength": 1,
+              "maxLength": 12,
+              "maxWords": 2,
+              "pattern": "^\\s*\\S+(\\s+\\S+){0,1}\\s*$",
+              "onlyWith": {
+                "layout": [
+                  "stack",
+                  "stack-left"
+                ]
+              }
+            },
+            "layout": {
+              "type": "string",
+              "enum": [
+                "word",
+                "display",
+                "display-large",
+                "stack",
+                "stack-left"
+              ],
+              "default": "word",
+              "description": "How the words sit on the canvas. word: One word, centred, in the round sans (\"Open\", \"Learning\", \"ready.\"). display: The wide display face, medium (\"we\" at the very start). display-large: The wide display face, large (\"we\" before \"Open\"). stack: Two centred lines, the second bigger and tucked under the first (\"we / don’t\"). stack-left: Two left-aligned lines, the second much bigger (\"just / train\"); with one line, just the small word."
+            },
+            "theme": {
+              "type": "string",
+              "enum": [
+                "light",
+                "dark"
+              ],
+              "default": "light",
+              "description": "The scene’s look. light: Near-white canvas, near-black type. dark: Deep indigo canvas with soft light shapes, white type."
+            },
+            "transition": {
+              "type": "string",
+              "enum": [
+                "cut",
+                "resolve",
+                "slide",
+                "warp"
+              ],
+              "default": "cut",
+              "description": "How the scene arrives. The motion of each is fixed. cut: Hard cut; the word then drifts (cards shrink, display words grow). resolve: Grainy blur sharpening into the word (the opening). slide: In from off the left edge with a smear, decelerating hard. warp: A liquid scrawl that settles into the word."
+            },
+            "particles": {
+              "type": "string",
+              "enum": [
+                "off",
+                "on"
+              ],
+              "default": "off",
+              "description": "A field of small rising dots behind the word. off: No dots. on: Dots in the type colour, rising at three depths."
+            }
+          },
+          "allOf": [
+            {
+              "if": {
+                "properties": {
+                  "layout": {
+                    "not": {
+                      "enum": [
+                        "stack",
+                        "stack-left"
+                      ]
+                    }
+                  }
+                }
+              },
+              "then": {
+                "not": {
+                  "required": [
+                    "line2"
+                  ]
+                }
+              }
+            }
+          ]
+        }
+      },
+      "logo": {
+        "type": "object",
+        "additionalProperties": false,
+        "required": [
+          "line1"
+        ],
+        "description": "The wordmark at the top (text; the sparkle marks are the template’s). Leave it out or set it to null to hide it.",
+        "properties": {
+          "line1": {
+            "type": "string",
+            "description": "Wordmark, first line (optional logo).",
+            "minLength": 1,
+            "maxLength": 16,
+            "maxWords": 2,
+            "pattern": "^\\s*\\S+(\\s+\\S+){0,1}\\s*$"
+          },
+          "line2": {
+            "type": "string",
+            "description": "Wordmark, second line.",
+            "minLength": 1,
+            "maxLength": 16,
+            "maxWords": 2,
+            "pattern": "^\\s*\\S+(\\s+\\S+){0,1}\\s*$"
+          }
+        }
+      },
+      "theme": {
+        "type": "object",
+        "additionalProperties": false,
+        "description": "Optional colour tokens; any left out keep the template default.",
+        "properties": {
+          "light": {
+            "type": "string",
+            "format": "hex-color",
+            "pattern": "^#[0-9a-fA-F]{6}$",
+            "default": "#fbfbfc",
+            "description": "Background of light scenes."
+          },
+          "lightInk": {
+            "type": "string",
+            "format": "hex-color",
+            "pattern": "^#[0-9a-fA-F]{6}$",
+            "default": "#010101",
+            "description": "Text and dots on light scenes."
+          },
+          "dark": {
+            "type": "string",
+            "format": "hex-color",
+            "pattern": "^#[0-9a-fA-F]{6}$",
+            "default": "#100651",
+            "description": "Background of dark scenes."
+          },
+          "darkInk": {
+            "type": "string",
+            "format": "hex-color",
+            "pattern": "^#[0-9a-fA-F]{6}$",
+            "default": "#fbfbfc",
+            "description": "Text and dots on dark scenes."
+          },
+          "accent": {
+            "type": "string",
+            "format": "hex-color",
+            "pattern": "^#[0-9a-fA-F]{6}$",
+            "default": "#2b2378",
+            "description": "The soft light shapes on dark scenes."
+          },
+          "logo": {
+            "type": "string",
+            "format": "hex-color",
+            "pattern": "^#[0-9a-fA-F]{6}$",
+            "default": "#010101",
+            "description": "The wordmark (the reference keeps it dark on every scene)."
+          }
+        }
+      }
+    }
+  },
+  "slots": [
+    {
+      "path": "scenes[].text",
+      "maxWords": 2,
+      "maxChars": 14,
+      "fitWidth": 600,
+      "fitWidths": {
+        "landscape": 1040
+      },
+      "description": "The scene's word (a stack layout's first, smaller line)."
+    },
+    {
+      "path": "scenes[].line2",
+      "maxWords": 2,
+      "maxChars": 12,
+      "fitWidth": 600,
+      "fitWidths": {
+        "landscape": 1000
+      },
+      "optional": true,
+      "onlyWith": {
+        "layout": [
+          "stack",
+          "stack-left"
+        ]
+      },
+      "description": "Second, bigger line under the word. Stack layouts only."
+    },
+    {
+      "path": "logo.line1",
+      "maxWords": 2,
+      "maxChars": 16,
+      "fitWidth": 140,
+      "description": "Wordmark, first line (optional logo)."
+    },
+    {
+      "path": "logo.line2",
+      "maxWords": 2,
+      "maxChars": 16,
+      "fitWidth": 140,
+      "optional": true,
+      "description": "Wordmark, second line."
+    }
+  ],
+  "theme": [
+    {
+      "token": "light",
+      "default": "#fbfbfc",
+      "description": "Background of light scenes."
+    },
+    {
+      "token": "lightInk",
+      "default": "#010101",
+      "description": "Text and dots on light scenes."
+    },
+    {
+      "token": "dark",
+      "default": "#100651",
+      "description": "Background of dark scenes."
+    },
+    {
+      "token": "darkInk",
+      "default": "#fbfbfc",
+      "description": "Text and dots on dark scenes."
+    },
+    {
+      "token": "accent",
+      "default": "#2b2378",
+      "description": "The soft light shapes on dark scenes."
+    },
+    {
+      "token": "logo",
+      "default": "#010101",
+      "description": "The wordmark (the reference keeps it dark on every scene)."
+    }
+  ],
+  "optionalScenes": [
+    "logo"
+  ],
+  "choices": [
+    {
+      "field": "layout",
+      "default": "word",
+      "description": "How the words sit on the canvas.",
+      "values": [
+        {
+          "value": "word",
+          "description": "One word, centred, in the round sans (\"Open\", \"Learning\", \"ready.\")."
+        },
+        {
+          "value": "display",
+          "description": "The wide display face, medium (\"we\" at the very start)."
+        },
+        {
+          "value": "display-large",
+          "description": "The wide display face, large (\"we\" before \"Open\")."
+        },
+        {
+          "value": "stack",
+          "description": "Two centred lines, the second bigger and tucked under the first (\"we / don’t\")."
+        },
+        {
+          "value": "stack-left",
+          "description": "Two left-aligned lines, the second much bigger (\"just / train\"); with one line, just the small word."
+        }
+      ]
+    },
+    {
+      "field": "theme",
+      "default": "light",
+      "description": "The scene’s look.",
+      "values": [
+        {
+          "value": "light",
+          "description": "Near-white canvas, near-black type."
+        },
+        {
+          "value": "dark",
+          "description": "Deep indigo canvas with soft light shapes, white type."
+        }
+      ]
+    },
+    {
+      "field": "transition",
+      "default": "cut",
+      "description": "How the scene arrives. The motion of each is fixed.",
+      "values": [
+        {
+          "value": "cut",
+          "description": "Hard cut; the word then drifts (cards shrink, display words grow)."
+        },
+        {
+          "value": "resolve",
+          "description": "Grainy blur sharpening into the word (the opening)."
+        },
+        {
+          "value": "slide",
+          "description": "In from off the left edge with a smear, decelerating hard."
+        },
+        {
+          "value": "warp",
+          "description": "A liquid scrawl that settles into the word."
+        }
+      ]
+    },
+    {
+      "field": "particles",
+      "default": "off",
+      "description": "A field of small rising dots behind the word.",
+      "values": [
+        {
+          "value": "off",
+          "description": "No dots."
+        },
+        {
+          "value": "on",
+          "description": "Dots in the type colour, rising at three depths."
+        }
+      ]
+    }
+  ],
+  "exampleContent": {
+    "aspectRatio": "9:16",
+    "scenes": [
+      {
+        "text": "we",
+        "theme": "light",
+        "layout": "display",
+        "transition": "resolve"
+      },
+      {
+        "text": "we",
+        "theme": "dark",
+        "layout": "stack",
+        "line2": "don’t"
+      },
+      {
+        "text": "just",
+        "theme": "light",
+        "layout": "stack-left",
+        "transition": "slide"
+      },
+      {
+        "text": "just",
+        "theme": "dark",
+        "layout": "stack-left",
+        "line2": "train"
+      },
+      {
+        "text": "we",
+        "theme": "light",
+        "layout": "display-large"
+      },
+      {
+        "text": "Open",
+        "theme": "dark",
+        "transition": "warp"
+      },
+      {
+        "text": "New",
+        "theme": "light"
+      },
+      {
+        "text": "Doors",
+        "theme": "dark",
+        "particles": "on"
+      },
+      {
+        "text": "Skills",
+        "theme": "light",
+        "particles": "on"
+      },
+      {
+        "text": "Trust",
+        "theme": "dark",
+        "particles": "on"
+      },
+      {
+        "text": "Care",
+        "theme": "light",
+        "particles": "on"
+      },
+      {
+        "text": "Growth",
+        "theme": "dark",
+        "particles": "on"
+      },
+      {
+        "text": "Support",
+        "theme": "light",
+        "particles": "on"
+      },
+      {
+        "text": "Learning",
+        "theme": "dark",
+        "particles": "on"
+      },
+      {
+        "text": "Career",
+        "theme": "light",
+        "particles": "on"
+      },
+      {
+        "text": "Steps",
+        "theme": "dark",
+        "particles": "on"
+      },
+      {
+        "text": "Futures",
+        "theme": "light",
+        "particles": "on"
+      },
+      {
+        "text": "Confidence",
+        "theme": "dark",
+        "particles": "on"
+      },
+      {
+        "text": "re",
+        "theme": "light"
+      },
+      {
+        "text": "rea.",
+        "theme": "dark"
+      },
+      {
+        "text": "ready.",
+        "theme": "light"
+      },
+      {
+        "text": "ready.",
+        "theme": "dark"
+      }
+    ]
+  }
+};