@pixerate/flair 0.28.0 → 0.30.0

package/dist/{chunk-4LKAPRFM.js → chunk-UIODYJ6B.js}

@@ -15,8 +15,8 @@ import {
 } from "./chunk-ORAFCHX3.js";
 
 // src/catalog/inputs.ts
-var EFFECT_INPUTS = ["image", "video", "svg", "text", "mask", "path"];
-var EFFECT_INTERACTIONS = ["hover", "press", "click", "trail", "pointer"];
+var EFFECT_INPUTS = ["image", "video", "svg", "text", "mask", "path", "audio"];
+var EFFECT_INTERACTIONS = ["hover", "press", "click", "trail", "pointer", "scroll"];
 function isTextImage(url) {
   if (!url.startsWith("data:image/svg+xml;charset=utf-8,")) return false;
   try {
@@ -28,17 +28,19 @@ function isTextImage(url) {
 var PATH_DATA = /^\s*[Mm]\s*[-+.\d]/;
 function textSlot(control) {
   const value = String(control.default);
-  const holds2 = control.name === "font" || /\bfont\b/i.test(control.label) ? "font" : PATH_DATA.test(value) ? "path" : control.name === "glyphs" ? "glyphs" : "copy";
-  return { name: control.name, label: control.label, holds: holds2, default: value };
+  const holds3 = control.name === "font" || /\bfont\b/i.test(control.label) ? "font" : PATH_DATA.test(value) ? "path" : control.name === "glyphs" ? "glyphs" : "copy";
+  return { name: control.name, label: control.label, holds: holds3, default: value };
 }
+var codeOf = (source) => source.replace(/\/\*[\s\S]*?\*\/|\/\/[^\n]*/g, "");
 function shaderInteractions(source) {
-  const code = source.replace(/\/\*[\s\S]*?\*\/|\/\/[^\n]*/g, "");
+  const code = codeOf(source);
   const found = /* @__PURE__ */ new Set();
   if (/\biClicks\b/.test(code)) found.add("click");
   if (/\biTrail\b/.test(code)) found.add("trail");
   if (/\biPointer\s*\.\s*z\b/.test(code)) found.add("hover");
   if (/\biPointer\s*\.\s*w\b/.test(code) || /\biMouse\s*\.\s*z\b/.test(code)) found.add("press");
   if (/\biPointer\s*\.\s*xy?\b/.test(code) || /\biMouse\s*\.\s*xy?\b/.test(code)) found.add("pointer");
+  if (/\biScroll\b/.test(code)) found.add("scroll");
   return EFFECT_INTERACTIONS.filter((i) => found.has(i));
 }
 function inputsOf(effect, controls) {
@@ -64,6 +66,7 @@ function inputsOf(effect, controls) {
       if (slot.holds === "path") accepts.add("path");
     }
   }
+  if (effect.kind === "shader" && /\bi(Audio|Spectrum|Beat)\b/.test(codeOf(effect.source))) accepts.add("audio");
   const interactions = effect.kind === "vector" ? effect.trigger ? [effect.trigger] : [] : shaderInteractions(effect.source);
   return {
     accepts: EFFECT_INPUTS.filter((i) => accepts.has(i)),
@@ -1882,7 +1885,7 @@ function capsule(p, q, width, flatEnd = false) {
   if (flatEnd) pts.push([q[0] + h * Math.cos(a - Math.PI / 2), q[1] + h * Math.sin(a - Math.PI / 2)], [q[0] + h * Math.cos(a + Math.PI / 2), q[1] + h * Math.sin(a + Math.PI / 2)]);
   else cap(q, a - Math.PI / 2);
   cap(p, a + Math.PI / 2);
-  return `M${pts.map((pt) => `${r2(pt[0])} ${r2(pt[1])}`).join(" L")} Z`;
+  return `M${pts.map((pt2) => `${r2(pt2[0])} ${r2(pt2[1])}`).join(" L")} Z`;
 }
 var menuMorphs = /* @__PURE__ */ new Map();
 function menuMorph(weight) {
@@ -1970,9 +1973,9 @@ var swapLabels = (outAt, back) => [
   { id: "label", step: 1, attrs: { opacity: [0, 1], transform: ["translate(0 10)", "translate(0 0)"] }, delay: back + 120, ms: 220, ease: "out" },
   snap("done", "transform", "translate(0 10)", back + 200)
 ];
-var checkFlash = (at3, back) => [
-  { id: "check", step: 1, attrs: { opacity: [0, 1] }, delay: at3, ms: 40 },
-  { id: "check", step: 1, draw: true, delay: at3, ms: 280, ease: "out" },
+var checkFlash = (at4, back) => [
+  { id: "check", step: 1, attrs: { opacity: [0, 1] }, delay: at4, ms: 40 },
+  { id: "check", step: 1, draw: true, delay: at4, ms: 280, ease: "out" },
   { id: "check", step: 1, attrs: { opacity: [1, 0] }, delay: back, ms: 160 },
   { id: "check", step: 1, draw: [0, 0], delay: back + 200, ms: 0 }
 ];
@@ -2305,10 +2308,10 @@ var sliderScrub = {
     return { size, length };
   },
   motion: (() => {
-    const move = (from, to, delay, ms, withCursor) => [
-      { id: "knob", step: 1, attrs: { transform: [knobAt(from), knobAt(to)] }, delay, ms, ease: "in-out" },
-      { id: "fill", step: 1, attrs: { width: [r1(from - SLIDER.x), r1(to - SLIDER.x)] }, delay, ms, ease: "in-out" },
-      ...withCursor ? [{ id: "cursor", step: 1, attrs: { transform: [cursorAt(from + 2), cursorAt(to + 2)] }, delay, ms, ease: "in-out" }] : []
+    const move = (from, to, delay, ms2, withCursor) => [
+      { id: "knob", step: 1, attrs: { transform: [knobAt(from), knobAt(to)] }, delay, ms: ms2, ease: "in-out" },
+      { id: "fill", step: 1, attrs: { width: [r1(from - SLIDER.x), r1(to - SLIDER.x)] }, delay, ms: ms2, ease: "in-out" },
+      ...withCursor ? [{ id: "cursor", step: 1, attrs: { transform: [cursorAt(from + 2), cursorAt(to + 2)] }, delay, ms: ms2, ease: "in-out" }] : []
     ];
     return {
       svg: `<svg viewBox="0 0 360 160"><!-- {{label: text default='Number of results' label='Label'}} {{from: int min=0 max=99999 default=50 label='From value'}} {{to: int min=0 max=99999 default=306 label='To value'}} {{background: color default=#0B0F17 label='Background'}} {{accent: color default=#8B5CF6 label='Accent'}} {{track: color default=#272D3A label='Track'}} {{ink: color default=#F3F4F6 label='Text colour'}} --><rect width="360" height="160" fill="{{background}}"/><text x="${SLIDER.x}" y="58" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="${SANS}" font-size="{{size}}" font-weight="600" fill="{{ink}}">{{label}}</text><text id="value" x="${SLIDER.x + SLIDER.w}" y="58" text-anchor="end" font-family="${SANS}" font-size="16" font-weight="700" fill="{{accent}}">{{from}}</text><rect x="${SLIDER.x}" y="${SLIDER.y - 3}" width="${SLIDER.w}" height="6" rx="3" fill="{{track}}"/><rect id="fill" x="${SLIDER.x}" y="${SLIDER.y - 3}" width="${r1(KNOB_FROM - SLIDER.x)}" height="6" rx="3" fill="{{accent}}"/><g id="knob" transform="${knobAt(KNOB_FROM)}"><circle id="halo" r="11" fill="{{accent}}" opacity="0"/><circle cy="1.5" r="11" fill="#000000" opacity="0.2"/><circle id="dot" r="10" fill="#FFFFFF" stroke="{{accent}}" stroke-width="3"/></g><g id="cursor" transform="${CURSOR_REST}"><path d="M0 0 L0 17 L4.6 12.8 L7.8 19.6 L10.6 18.3 L7.5 11.7 L13.4 11.4 Z" fill="#FFFFFF" stroke="#111827" stroke-width="1.3" stroke-linejoin="round"/></g></svg>`,
@@ -2449,10 +2452,10 @@ var splatStamp = {
       { id: "splat", attrs: { d: ["{{b}}", "{{c}}"] }, delay: 520, ms: 380, ease: "in-out" },
       { id: "gloss", attrs: { opacity: [0, n2("gloss")] }, delay: 600, ms: 400, ease: "out" },
       ...Array.from({ length: DROPS }, (_, i) => {
-        const at3 = POP + i * 35;
+        const at4 = POP + i * 35;
         return [
-          { id: `drop${i}`, attrs: { cx: [CX, n2(`xm${i}`)], cy: [CY, n2(`ym${i}`)], r: [0, n2(`ro${i}`)] }, delay: at3, ms: 150, ease: "out" },
-          { id: `drop${i}`, attrs: { cx: [n2(`xm${i}`), n2(`x${i}`)], cy: [n2(`ym${i}`), n2(`y${i}`)], r: [n2(`ro${i}`), n2(`r${i}`)] }, delay: at3 + 150, ms: 260, ease: "out" },
+          { id: `drop${i}`, attrs: { cx: [CX, n2(`xm${i}`)], cy: [CY, n2(`ym${i}`)], r: [0, n2(`ro${i}`)] }, delay: at4, ms: 150, ease: "out" },
+          { id: `drop${i}`, attrs: { cx: [n2(`xm${i}`), n2(`x${i}`)], cy: [n2(`ym${i}`), n2(`y${i}`)], r: [n2(`ro${i}`), n2(`r${i}`)] }, delay: at4 + 150, ms: 260, ease: "out" },
           { id: `drop${i}`, attrs: { cx: [n2(`x${i}`), CX], cy: [n2(`y${i}`), CY], r: [n2(`r${i}`), 0] }, delay: SETTLE + 2e3, ms: 360, ease: "in-out" }
         ];
       }).flat(),
@@ -2531,10 +2534,10 @@ var chatBubble = {
       ...Object.fromEntries(
         Array.from({ length: BOUNCES * DOTS }, (_, i) => {
           const [k, j] = [Math.floor(i / DOTS), i % DOTS];
-          const at3 = reply + 450 + k * BOUNCE_MS + j * 150;
+          const at4 = reply + 450 + k * BOUNCE_MS + j * 150;
           return [
-            [`rise${k}_${j}`, at3],
-            [`fall${k}_${j}`, at3 + 180]
+            [`rise${k}_${j}`, at4],
+            [`fall${k}_${j}`, at4 + 180]
           ];
         }).flat()
       )
@@ -2603,22 +2606,22 @@ var bubblePopLoader = {
       svg: `<svg viewBox="0 0 240 80"><!-- {{color: color default=#6366F1 label='Bubbles'}} {{accent: color default=#38BDF8 label='Droplets'}} {{background: color default=#FFFFFF label='Background'}} {{width: float min=1 max=4 default=2 step=0.5 label='Outline'}} --><rect width="240" height="80" fill="{{background}}"/>${bubbles}</svg>`,
       animate: LOADER_X.flatMap((_, i) => {
         const t0 = i * LOADER_STAGGER;
-        const pop = t0 + POP_AT;
+        const pop2 = t0 + POP_AT;
         const p = pose3(i);
         return [
           // Inflating with a wobble, then bursting.
           { id: `b${i}`, attrs: { transform: [p(0), p(1.1)] }, delay: t0, ms: 450, ease: "out" },
           { id: `b${i}`, attrs: { transform: [p(1.1), p(0.95)] }, delay: t0 + 450, ms: 150, ease: "in-out" },
           { id: `b${i}`, attrs: { transform: [p(0.95), p(1)] }, delay: t0 + 600, ms: 200, ease: "in-out" },
-          { id: `b${i}`, attrs: { transform: [p(1), p(1.35)], opacity: [1, 0] }, delay: pop, ms: 90, ease: "out" },
+          { id: `b${i}`, attrs: { transform: [p(1), p(1.35)], opacity: [1, 0] }, delay: pop2, ms: 90, ease: "out" },
           snap2(`ring${i}`, "stroke-width", 0, 0),
-          { id: `ring${i}`, attrs: { r: [LOADER_R, LOADER_R * 2], "stroke-width": [3, 0] }, delay: pop, ms: 320, ease: "out" },
+          { id: `ring${i}`, attrs: { r: [LOADER_R, LOADER_R * 2], "stroke-width": [3, 0] }, delay: pop2, ms: 320, ease: "out" },
           ...Array.from({ length: DROPS2 }, (_2, k) => {
             const [x0, y0] = drop(i, k, LOADER_R);
             const [x1, y1] = drop(i, k, LOADER_R * 2.1);
             return [
               snap2(`d${i}_${k}`, "r", 0, 0),
-              { id: `d${i}_${k}`, attrs: { cx: [x0, x1], cy: [y0, r12(y1 + 4)], r: [3, 0] }, delay: pop, ms: 420, ease: "out" },
+              { id: `d${i}_${k}`, attrs: { cx: [x0, x1], cy: [y0, r12(y1 + 4)], r: [3, 0] }, delay: pop2, ms: 420, ease: "out" },
               snap2(`d${i}_${k}`, "cx", x0, LOADER_END),
               snap2(`d${i}_${k}`, "cy", y0, LOADER_END)
             ];
@@ -2728,21 +2731,21 @@ var stickerSlap = {
   },
   motion: {
     svg: `<svg viewBox="0 0 240 240"><!-- {{label: text default='NEW!' label='Label'}} ${SHAPE_CONTROL} {{background: color default=#EDE8DF label='Background'}} {{sticker: color default=#FF5A36 label='Sticker'}} {{ink: color default=#FFFFFF label='Label colour'}} {{border: color default=#FFFFFF label='Border'}} ${FONT} --><defs><filter id="slapSoft" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur id="shadeBlur" stdDeviation="3"/></filter>${gloss("slapGloss")}</defs><rect width="240" height="240" fill="{{background}}"/><g id="shade" transform="${pose(120, 120, 1, -6, 7)}" opacity="0.32"><path d="{{d}}" fill="#000000" stroke="#000000" stroke-width="16" stroke-linejoin="round" filter="url(#slapSoft)"/></g><g id="sticker" transform="${pose(120, 120, 1, -6)}"><path d="{{d}}" fill="{{border}}" stroke="{{border}}" stroke-width="16" stroke-linejoin="round"/><path d="{{d}}" fill="{{sticker}}"/><text x="120" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="900" fill="{{ink}}">{{label}}</text><path d="{{d}}" fill="url(#slapGloss)" stroke="#FFFFFF" stroke-opacity="0.35" stroke-width="16" stroke-linejoin="round"/></g></svg>`,
-    animate: SLAP.slice(1).flatMap(([at3, s, r, dy, o, blur], i) => {
+    animate: SLAP.slice(1).flatMap(([at4, s, r, dy, o, blur], i) => {
       const [from, fs, fr, fdy, fo, fblur] = SLAP[i];
-      const ms = at3 - from;
-      if (ms === 0)
+      const ms2 = at4 - from;
+      if (ms2 === 0)
         return [
-          snap3("sticker", "transform", pose(120, 120, s, r), at3),
-          snap3("shade", "transform", pose(120, 120, s, r, dy), at3),
-          snap3("shade", "opacity", o, at3),
-          snap3("shadeBlur", "stdDeviation", blur, at3)
+          snap3("sticker", "transform", pose(120, 120, s, r), at4),
+          snap3("shade", "transform", pose(120, 120, s, r, dy), at4),
+          snap3("shade", "opacity", o, at4),
+          snap3("shadeBlur", "stdDeviation", blur, at4)
         ];
       const ease = i === 0 || i === 3 ? "out" : "in-out";
       return [
-        { id: "sticker", step: 1, attrs: { transform: [pose(120, 120, fs, fr), pose(120, 120, s, r)] }, delay: from, ms, ease },
-        { id: "shade", step: 1, attrs: { transform: [pose(120, 120, fs, fr, fdy), pose(120, 120, s, r, dy)], opacity: [fo, o] }, delay: from, ms, ease },
-        { id: "shadeBlur", step: 1, attrs: { stdDeviation: [fblur, blur] }, delay: from, ms, ease }
+        { id: "sticker", step: 1, attrs: { transform: [pose(120, 120, fs, fr), pose(120, 120, s, r)] }, delay: from, ms: ms2, ease },
+        { id: "shade", step: 1, attrs: { transform: [pose(120, 120, fs, fr, fdy), pose(120, 120, s, r, dy)], opacity: [fo, o] }, delay: from, ms: ms2, ease },
+        { id: "shadeBlur", step: 1, attrs: { stdDeviation: [fblur, blur] }, delay: from, ms: ms2, ease }
       ];
     }).concat([
       // Gone as it flicks up, back in as it comes down.
@@ -2810,7 +2813,7 @@ var holoSticker = {
     const { d, labelY, labelW } = stickerShape(v.shape, 120, 120, 80);
     const { size, length } = fit2(v.label, labelW, 40);
     const period = Math.round(Number(v.speed) * 1e3);
-    const glints = Object.fromEntries(GLINTS.flatMap(([, , , at3], k) => [[`g${k}`, Math.round(at3 * period)], [`h${k}`, Math.round(at3 * period) + Math.round(period * 0.08)]]));
+    const glints = Object.fromEntries(GLINTS.flatMap(([, , , at4], k) => [[`g${k}`, Math.round(at4 * period)], [`h${k}`, Math.round(at4 * period) + Math.round(period * 0.08)]]));
     return { d, size, length, base: r13(labelY + size * 0.36), period, sheen: Math.round(period * 0.35), grow: Math.round(period * 0.08), fade: Math.round(period * 0.11), ...glints };
   },
   motion: {
@@ -2880,12 +2883,12 @@ var stickerSheet = {
       ([kind, x, y, r], i) => `<g id="s${i}" transform="${pose(x, y, 0, r - 30)}" opacity="0">${sheetSticker(kind, x, y, SHEET_COLOURS[i])}</g>`
     ).join("")}</svg>`,
     animate: SHEET.flatMap(([, x, y, r], i) => {
-      const at3 = 150 + i * POP_GAP;
+      const at4 = 150 + i * POP_GAP;
       const out = SHEET_EXIT + i * 40;
       return [
-        { id: `s${i}`, attrs: { opacity: [0, 1] }, delay: at3, ms: 60 },
-        { id: `s${i}`, attrs: { transform: [pose(x, y, 0, r - 30), pose(x, y, 1.18, r + 4)] }, delay: at3, ms: 220, ease: "out" },
-        { id: `s${i}`, attrs: { transform: [pose(x, y, 1.18, r + 4), pose(x, y, 1, r)] }, delay: at3 + 220, ms: 180, ease: "in-out" },
+        { id: `s${i}`, attrs: { opacity: [0, 1] }, delay: at4, ms: 60 },
+        { id: `s${i}`, attrs: { transform: [pose(x, y, 0, r - 30), pose(x, y, 1.18, r + 4)] }, delay: at4, ms: 220, ease: "out" },
+        { id: `s${i}`, attrs: { transform: [pose(x, y, 1.18, r + 4), pose(x, y, 1, r)] }, delay: at4 + 220, ms: 180, ease: "in-out" },
         { id: `s${i}`, attrs: { transform: [pose(x, y, 1, r), pose(x, y, 0, r - 30)] }, delay: out, ms: 240, ease: "in-out" },
         { id: `s${i}`, attrs: { opacity: [1, 0] }, delay: out + 160, ms: 80 }
       ];
@@ -2946,9 +2949,9 @@ var TORN_LEFT = [3, 0, 5, 1, 4, 0, 6, 2, 3, 0, 4];
 var TORN_RIGHT = [1, 5, 0, 4, 2, 6, 1, 3, 0, 5, 2];
 var TAPE = (() => {
   const h = TAPE_W / 2;
-  const at3 = (k) => -h + k * TAPE_W / (TORN_LEFT.length - 1);
-  const right = TORN_RIGHT.map((dx, k) => [TAPE_L - dx, at3(k)]);
-  const left = TORN_LEFT.map((dx, k) => [dx, at3(k)]).reverse();
+  const at4 = (k) => -h + k * TAPE_W / (TORN_LEFT.length - 1);
+  const right = TORN_RIGHT.map((dx, k) => [TAPE_L - dx, at4(k)]);
+  const left = TORN_LEFT.map((dx, k) => [dx, at4(k)]).reverse();
   return outline([...right, ...left]);
 })();
 var UNROLL_MS = 1500;
@@ -3023,8 +3026,8 @@ var sealBadge = {
     const bottomMid = topMid + top.size / 2 + gap + bottom.size / 2;
     const beats = Object.fromEntries(
       SEAL_PULSES.flatMap((f, i) => {
-        const at3 = Math.round(period * f);
-        return [...SEAL_BEAT.map(([ms], j) => [`beat${i}_${j}`, at3 + ms]), [`glint${i}`, at3 + 60]];
+        const at4 = Math.round(period * f);
+        return [...SEAL_BEAT.map(([ms2], j) => [`beat${i}_${j}`, at4 + ms2]), [`glint${i}`, at4 + 60]];
       })
     );
     return {
@@ -3046,11 +3049,11 @@ var sealBadge = {
       ...["sealSpin", "sealClipShape"].map((id) => ({ id, attrs: { transform: ["rotate(0 120 120)", "rotate(360 120 120)"] }, ms: n4("period"), ease: "linear" })),
       // Now and then it pulses and a glint sweeps across.
       ...SEAL_PULSES.flatMap((_, i) => [
-        ...SEAL_BEAT.slice(1).map(([at3, scale], j) => ({
+        ...SEAL_BEAT.slice(1).map(([at4, scale], j) => ({
           id: "sealPulse",
           attrs: { transform: [pose(120, 120, SEAL_BEAT[j][1], 0), pose(120, 120, scale, 0)] },
           delay: n4(`beat${i}_${j}`),
-          ms: at3 - SEAL_BEAT[j][0],
+          ms: at4 - SEAL_BEAT[j][0],
           ease: j === 0 ? "out" : "in-out"
         })),
         { id: "sealGlint", attrs: { transform: ["translate(-14 0) skewX(-20)", "translate(300 0) skewX(-20)"] }, delay: n4(`glint${i}`), ms: SEAL_GLINT_MS, ease: "in-out" }
@@ -3302,14 +3305,14 @@ var snap5 = (id, attr, value, delay, step) => ({
   ms: 0
 });
 function keys(id, attr, frames, options = {}) {
-  return frames.slice(1).map(([at3, value], i) => {
+  return frames.slice(1).map(([at4, value], i) => {
     const [from, before] = frames[i];
     return {
       id,
       ...options.step === void 0 ? {} : { step: options.step },
       attrs: { [attr]: [before, value] },
       delay: from,
-      ms: at3 - from,
+      ms: at4 - from,
       ease: options.ease ?? "in-out"
     };
   });
@@ -3409,9 +3412,9 @@ var soundEffect = {
       { id: "sfxFlecks", attrs: { transform: [sfxPose(0.7, 0), sfxPose(1.25, 4)] }, delay: 140, ms: 420, ease: "out" },
       { id: "sfxFlecks", attrs: { opacity: [1, 0] }, delay: 300, ms: 320 },
       // Everything shakes from the hit.
-      ...SFX_SHAKE.slice(1).map(([at3, dx, dy], i) => {
+      ...SFX_SHAKE.slice(1).map(([at4, dx, dy], i) => {
         const [from, fx, fy] = SFX_SHAKE[i];
-        return { id: "sfxShake", attrs: { transform: [`translate(${fx} ${fy})`, `translate(${dx} ${dy})`] }, delay: from, ms: at3 - from, ease: "linear" };
+        return { id: "sfxShake", attrs: { transform: [`translate(${fx} ${fy})`, `translate(${dx} ${dy})`] }, delay: from, ms: at4 - from, ease: "linear" };
       })
     ]
   }
@@ -3497,20 +3500,20 @@ var speechBubble = {
       pop1: about4(tip[0], tip[1], 1)
     };
     trail.forEach((c, i) => Object.assign(out, { [`tx${i}`]: c.x, [`ty${i}`]: c.y, [`tr${i}`]: c.r }));
-    let at3 = 480;
+    let at4 = 480;
     for (let i = 0; i < SB_LINES; i++) {
       const line = lines[i] ?? "";
-      const ms = Math.max(1, Math.round(Array.from(line).length * pace));
+      const ms2 = Math.max(1, Math.round(Array.from(line).length * pace));
       Object.assign(out, {
         [`line${i}`]: line,
         [`x${i}`]: r15(SB_X - textWidthEm(line) * size / 2),
         [`y${i}`]: r15(top + lineH * (i + 0.78)),
-        [`at${i}`]: at3,
-        [`ms${i}`]: ms
+        [`at${i}`]: at4,
+        [`ms${i}`]: ms2
       });
-      at3 += line ? ms + 80 : 0;
+      at4 += line ? ms2 + 80 : 0;
     }
-    out.outAt = at3 + 1600;
+    out.outAt = at4 + 1600;
     return out;
   },
   motion: {
@@ -3609,20 +3612,20 @@ var fightCloud = {
         })
       ),
       // A fist, boot or star jabs out of the cloud and back, and an impact mark flashes at its tip.
-      ...FC_POKES.flatMap(([at3, deg], k) => {
+      ...FC_POKES.flatMap(([at4, deg], k) => {
         const hidden = fcPoke(deg, 0);
         const out = fcPoke(deg, fcReach(deg) + 14);
         const a = deg * Math.PI / 180;
         const d = fcReach(deg) + 54;
         const [x, y] = [FC_X + d * Math.cos(a), FC_Y + d * Math.sin(a)];
         return [
-          { id: `fcPoke${k}`, attrs: { transform: [hidden, out] }, delay: at3, ms: 110, ease: "out" },
-          { id: `fcPoke${k}`, attrs: { transform: [out, hidden] }, delay: at3 + 290, ms: 170, ease: "in-out" },
+          { id: `fcPoke${k}`, attrs: { transform: [hidden, out] }, delay: at4, ms: 110, ease: "out" },
+          { id: `fcPoke${k}`, attrs: { transform: [out, hidden] }, delay: at4 + 290, ms: 170, ease: "in-out" },
           snap5(`fcHit${k}`, "opacity", 0, 0),
-          snap5(`fcHit${k}`, "opacity", 1, at3 + 90),
-          { id: `fcHit${k}`, attrs: { transform: [about4(x, y, 0.3), about4(x, y, 1.2)] }, delay: at3 + 90, ms: 200, ease: "out" },
-          { id: `fcHit${k}`, attrs: { opacity: [1, 0] }, delay: at3 + 200, ms: 200 },
-          snap5(`fcHit${k}`, "transform", about4(x, y, 0.3), at3 + 400)
+          snap5(`fcHit${k}`, "opacity", 1, at4 + 90),
+          { id: `fcHit${k}`, attrs: { transform: [about4(x, y, 0.3), about4(x, y, 1.2)] }, delay: at4 + 90, ms: 200, ease: "out" },
+          { id: `fcHit${k}`, attrs: { opacity: [1, 0] }, delay: at4 + 200, ms: 200 },
+          snap5(`fcHit${k}`, "transform", about4(x, y, 0.3), at4 + 400)
         ];
       }),
       // The whole scrap jitters.
@@ -3755,12 +3758,12 @@ var animeEmotes = {
       ]),
       // Sparkles: each twinkles open with a turn and closes again, one after another.
       ...AE_SPARKS.flatMap(
-        ([x, y, s, at3], i) => keys(`aeSpark${i}`, "transform", [
-          [at3, aeSpark(x, y, 0, 0)],
-          [at3 + 260, aeSpark(x, y, s, 45)],
-          [at3 + 460, aeSpark(x, y, s * 0.85, 60)],
-          [at3 + 760, aeSpark(x, y, 0, 90)]
-        ], { ease: "out" }).concat(snap5(`aeSpark${i}`, "transform", aeSpark(x, y, 0, 0), at3 + 780))
+        ([x, y, s, at4], i) => keys(`aeSpark${i}`, "transform", [
+          [at4, aeSpark(x, y, 0, 0)],
+          [at4 + 260, aeSpark(x, y, s, 45)],
+          [at4 + 460, aeSpark(x, y, s * 0.85, 60)],
+          [at4 + 760, aeSpark(x, y, 0, 90)]
+        ], { ease: "out" }).concat(snap5(`aeSpark${i}`, "transform", aeSpark(x, y, 0, 0), at4 + 780))
       ),
       // Exclamation: pops up past its size with stress lines, holds, then ducks away.
       ...keys("aeBang", "transform", [
@@ -4021,12 +4024,12 @@ var RINGS = 3;
 var RING_FROM = 18;
 var RING_TO = 112;
 function ringAnimations(k) {
-  const at3 = (phase2) => ({ r: r16(RING_FROM + (RING_TO - RING_FROM) * phase2), o: Math.round((1 - phase2) * 100) / 100 });
+  const at4 = (phase2) => ({ r: r16(RING_FROM + (RING_TO - RING_FROM) * phase2), o: Math.round((1 - phase2) * 100) / 100 });
   const id = `glowRingPulseRing${k}`;
   const phase = k / RINGS;
-  const from = at3(phase);
-  const end = at3(1);
-  const start = at3(0);
+  const from = at4(phase);
+  const end = at4(1);
+  const start = at4(0);
   const out = [
     {
       id,
@@ -4173,7 +4176,7 @@ var explodedLayers = {
     const speed = Math.max(0.1, Number(v.speed));
     const lift = Number(v.lift);
     return {
-      ...Object.fromEntries(Object.entries(EL_TIMES).map(([name, ms]) => [`el_${name}`, Math.round(ms / speed)])),
+      ...Object.fromEntries(Object.entries(EL_TIMES).map(([name, ms2]) => [`el_${name}`, Math.round(ms2 / speed)])),
       up: r17(-lift),
       fall: r17(lift * 0.92),
       spread: r17(lift * 0.12)
@@ -4216,7 +4219,7 @@ var pull = (step) => [
   { id: "lampSwitchRig", step, attrs: { transform: [sway(2.5), sway(-1.4)] }, delay: 370, ms: 380, ease: "in-out" },
   { id: "lampSwitchRig", step, attrs: { transform: [sway(-1.4), sway(0)] }, delay: 750, ms: 420, ease: "in-out" }
 ];
-var fade = (step, from, to, delay, ms) => ["lampSwitchCone", "lampSwitchPool", "lampSwitchRoomLit"].map((id) => ({ id, step, attrs: { opacity: [from, to] }, delay, ms, ease: "out" }));
+var fade = (step, from, to, delay, ms2) => ["lampSwitchCone", "lampSwitchPool", "lampSwitchRoomLit"].map((id) => ({ id, step, attrs: { opacity: [from, to] }, delay, ms: ms2, ease: "out" }));
 var lampSwitch = {
   kind: "vector",
   id: "lamp-switch",
@@ -4279,8 +4282,8 @@ var zapIcon = {
   motion: (() => {
     const sparks = [-55, 25, 160, 215].map((deg, i) => {
       const a = deg * Math.PI / 180;
-      const at3 = (r) => [r18(60 + r * Math.cos(a)), r18(60 + r * Math.sin(a))];
-      return { id: `s${i}`, from: at3(30), mid: at3(46), to: at3(56) };
+      const at4 = (r) => [r18(60 + r * Math.cos(a)), r18(60 + r * Math.sin(a))];
+      return { id: `s${i}`, from: at4(30), mid: at4(46), to: at4(56) };
     });
     return {
       svg: `<svg viewBox="0 0 120 120"><!-- {{background: color default=#0B1020 label='Background'}} {{bolt: color default=#FACC15 label='Bolt'}} {{glow: color default=#FDE68A label='Glow'}} --><defs><filter id="zapGlow" x="-60%" y="-60%" width="220%" height="220%"><feGaussianBlur stdDeviation="7"/></filter></defs><rect width="120" height="120" fill="{{background}}"/><circle id="burst" cx="60" cy="60" r="20" fill="none" stroke="{{glow}}" stroke-width="6" opacity="0"/><path id="halo" d="${BOLT}" fill="{{glow}}" filter="url(#zapGlow)" opacity="0"/>${sparks.map(({ id, from }) => `<line id="${id}" x1="${from[0]}" y1="${from[1]}" x2="${from[0]}" y2="${from[1]}" stroke="{{glow}}" stroke-width="3" stroke-linecap="round" opacity="0"/>`).join("")}<g id="zap" transform="${about5(60, 60, 1)}"><path id="fill" d="${BOLT}" fill="{{bolt}}" fill-opacity="0"/><path id="outline" d="${BOLT}" fill="none" stroke="{{bolt}}" stroke-width="3.5" stroke-linejoin="round"/></g></svg>`,
@@ -4320,7 +4323,7 @@ var powerButton = {
   ],
   motion: (() => {
     const symbol = (id, stroke2) => `<path id="${id}Arc" d="${POWER_ARC}" fill="none" stroke="${stroke2}" stroke-width="7" stroke-linecap="round"/><path id="${id}Bar" d="${POWER_BAR}" fill="none" stroke="${stroke2}" stroke-width="7" stroke-linecap="round"/>`;
-    const press = (step, depth) => [
+    const press2 = (step, depth) => [
       { id: "press", step, attrs: { transform: [about5(80, 80, 1), about5(80, 80, depth)] }, ms: 90, ease: "out" },
       { id: "press", step, attrs: { transform: [about5(80, 80, depth), about5(80, 80, 1)] }, delay: 90, ms: 260, ease: "in-out" }
     ];
@@ -4329,7 +4332,7 @@ var powerButton = {
       svg: `<svg viewBox="0 0 160 160"><!-- {{background: color default=#0B0F19 label='Background'}} {{button: color default=#1A2030 label='Button'}} {{off: color default=#5B6475 label='Off'}} {{on: color default=#22D3EE label='On'}} --><defs><filter id="pbGlow" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="5"/></filter></defs><rect width="160" height="160" fill="{{background}}"/><circle id="halo" cx="80" cy="80" r="52" fill="none" stroke="{{on}}" stroke-width="8" opacity="0" filter="url(#pbGlow)"/><circle id="pulse" cx="80" cy="80" r="50" fill="none" stroke="{{on}}" stroke-width="3" opacity="0"/><g id="press" transform="${about5(80, 80, 1)}"><circle id="disc" cx="80" cy="80" r="48" fill="{{button}}" stroke="{{off}}" stroke-width="2.5"/><g id="symGlow" opacity="0" filter="url(#pbGlow)">${symbol("glow", "{{on}}")}</g>${symbol("sym", "{{off}}")}</g></svg>`,
       animate: [
         // Step 1, on: a press, the symbol and rim light up, the glow ring comes on and a pulse rings out.
-        ...press(1, 0.93),
+        ...press2(1, 0.93),
         ...colours(1, "{{off}}", "{{on}}", 60),
         { id: "disc", step: 1, attrs: { stroke: ["{{off}}", "{{on}}"] }, delay: 60, ms: 220 },
         { id: "symGlow", step: 1, attrs: { opacity: [0, 1] }, delay: 60, ms: 260 },
@@ -4338,7 +4341,7 @@ var powerButton = {
         { id: "pulse", step: 1, attrs: { r: [50, 76], opacity: [0.9, 0] }, delay: 80, ms: 560, ease: "out" },
         snap6("pulse", "r", 50, 700, 1),
         // Step 2, off: a press and everything dims back to the start.
-        ...press(2, 0.95),
+        ...press2(2, 0.95),
         ...colours(2, "{{on}}", "{{off}}", 40),
         { id: "disc", step: 2, attrs: { stroke: ["{{on}}", "{{off}}"] }, delay: 40, ms: 220 },
         { id: "symGlow", step: 2, attrs: { opacity: [1, 0] }, delay: 40, ms: 220 },
@@ -4495,16 +4498,16 @@ var BURN = 6e3;
 var TOP2 = 92;
 var BURNT = 150;
 var FLICKER = 150;
-var topAt = (ms) => TOP2 + (BURNT - TOP2) * Math.min(ms, BURN) / BURN;
+var topAt = (ms2) => TOP2 + (BURNT - TOP2) * Math.min(ms2, BURN) / BURN;
 var rand2 = (i, k) => {
   const x = Math.sin(i * 127.1 + k * 311.7) * 43758.5453;
   return x - Math.floor(x);
 };
-var flame = (i, ms) => {
+var flame = (i, ms2) => {
   const sx = i < 0 ? 1 : 0.9 + 0.16 * rand2(i, 1);
   const sy = i < 0 ? 1 : 0.82 + 0.34 * rand2(i, 2);
   const lean = i < 0 ? 0 : (rand2(i, 3) - 0.5) * 12;
-  return `translate(100 ${r28(topAt(ms) - 12)}) skewX(${r28(lean)}) scale(${r28(sx)} ${r28(sy)})`;
+  return `translate(100 ${r28(topAt(ms2) - 12)}) skewX(${r28(lean)}) scale(${r28(sx)} ${r28(sy)})`;
 };
 var FLICKERS = BURN / FLICKER;
 var DRIPS = [
@@ -4655,8 +4658,8 @@ function packGlyph(rows) {
   return `ivec2(${a}, ${b})`;
 }
 var vec3Hex = (hex) => {
-  const n11 = parseInt(hex.slice(1), 16);
-  const c = [n11 >> 16, n11 >> 8 & 255, n11 & 255].map((v) => +(v / 255).toFixed(3));
+  const n13 = parseInt(hex.slice(1), 16);
+  const c = [n13 >> 16, n13 >> 8 & 255, n13 & 255].map((v) => +(v / 255).toFixed(3));
   return `vec3(${c.map((v) => Number.isInteger(v) ? `${v}.0` : String(v)).join(", ")})`;
 };
 var paletteArray = (name, hexes) => `const vec3 ${name}[${hexes.length}] = vec3[${hexes.length}](
@@ -5589,8 +5592,8 @@ var spaceInvader = {
     const boltA = bitmapPath(BOLT_A, "#", 2);
     const boltB = bitmapPath(BOLT_B, "#", 2);
     const animate = [snap7("bolt", "opacity", 0, 0)];
-    MARCH.forEach((at3, k) => {
-      animate.push(snap7("invader", "transform", pose3(at3), k * MARCH_MS));
+    MARCH.forEach((at4, k) => {
+      animate.push(snap7("invader", "transform", pose3(at4), k * MARCH_MS));
       animate.push(snap7("body", "d", k % 2 ? frameB : frameA, k * MARCH_MS));
     });
     SHOTS.forEach((k) => {
@@ -5642,19 +5645,19 @@ var pixelHeartHealth = {
     for (let i = 0; i < HEARTS; i++) {
       animate.push(snap7(`f${i}`, "opacity", 1, 0), snap7(`x${i}`, "opacity", 0, 0));
     }
-    for (const [i, at3] of LOSSES) {
+    for (const [i, at4] of LOSSES) {
       [0, 1, 0, 1, 0].forEach((on, k) => {
-        animate.push(snap7(`x${i}`, "opacity", on ? 0 : 1, at3 + k * 90));
-        animate.push(snap7(`f${i}`, "opacity", on, at3 + k * 90));
+        animate.push(snap7(`x${i}`, "opacity", on ? 0 : 1, at4 + k * 90));
+        animate.push(snap7(`f${i}`, "opacity", on, at4 + k * 90));
       });
-      animate.push(snap7(`x${i}`, "opacity", 0, at3 + 450));
-      animate.push({ id: `h${i}`, attrs: { transform: [heartPose2(i, 1), heartPose2(i, 0.82)] }, delay: at3, ms: 90, ease: "out" });
-      animate.push({ id: `h${i}`, attrs: { transform: [heartPose2(i, 0.82), heartPose2(i, 1)] }, delay: at3 + 90, ms: 220, ease: "in-out" });
+      animate.push(snap7(`x${i}`, "opacity", 0, at4 + 450));
+      animate.push({ id: `h${i}`, attrs: { transform: [heartPose2(i, 1), heartPose2(i, 0.82)] }, delay: at4, ms: 90, ease: "out" });
+      animate.push({ id: `h${i}`, attrs: { transform: [heartPose2(i, 0.82), heartPose2(i, 1)] }, delay: at4 + 90, ms: 220, ease: "in-out" });
     }
-    for (const [i, at3] of REFILLS) {
-      animate.push(snap7(`f${i}`, "opacity", 1, at3));
-      animate.push({ id: `h${i}`, attrs: { transform: [heartPose2(i, 1), heartPose2(i, 1.3)] }, delay: at3, ms: 120, ease: "out" });
-      animate.push({ id: `h${i}`, attrs: { transform: [heartPose2(i, 1.3), heartPose2(i, 1)] }, delay: at3 + 120, ms: 200, ease: "in-out" });
+    for (const [i, at4] of REFILLS) {
+      animate.push(snap7(`f${i}`, "opacity", 1, at4));
+      animate.push({ id: `h${i}`, attrs: { transform: [heartPose2(i, 1), heartPose2(i, 1.3)] }, delay: at4, ms: 120, ease: "out" });
+      animate.push({ id: `h${i}`, attrs: { transform: [heartPose2(i, 1.3), heartPose2(i, 1)] }, delay: at4 + 120, ms: 200, ease: "in-out" });
     }
     const hearts = Array.from(
       { length: HEARTS },
@@ -5714,7 +5717,7 @@ var chompLoader = {
 var pixelEffects = [pixelText, coinSpin, spaceInvader, pixelHeartHealth, chompLoader];
 
 // src/catalog/pyro.ts
-var round = (n11) => Math.round(n11 * 10) / 10;
+var round = (n13) => Math.round(n13 * 10) / 10;
 var fireworkBurst = {
   kind: "vector",
   id: "firework-burst",
@@ -5733,19 +5736,19 @@ var fireworkBurst = {
       const a = (i + 0.5) / 10 * Math.PI * 2 - Math.PI / 2;
       return { id: `d${i}`, c: Math.cos(a), s: Math.sin(a), fill: ["{{b}}", "{{c}}", "{{a}}"][i % 3] };
     });
-    const at3 = (c, s, r) => [round(c * r), round(s * r)];
+    const at4 = (c, s, r) => [round(c * r), round(s * r)];
     return {
       svg: `<svg viewBox="0 0 200 200"><!-- {{a: color default=#F43F5E label='Colour A'}} {{b: color default=#FACC15 label='Colour B'}} {{c: color default=#38BDF8 label='Colour C'}} {{width: float min=1 max=8 default=4 step=0.5 label='Line width'}} --><g transform="translate(100 100) scale({{size: float min=0.5 max=1.4 default=1 step=0.05 label='Size'}})"><circle id="flash" cx="0" cy="0" r="0" fill="{{b}}" opacity="0"/>${streaks.map(({ id, c, s, stroke: stroke2 }) => {
-        const [x, y] = at3(c, s, 12);
+        const [x, y] = at4(c, s, 12);
         return `<line id="${id}" x1="${x}" y1="${y}" x2="${x}" y2="${y}" stroke="${stroke2}" stroke-width="{{width}}" stroke-linecap="round" opacity="0"/>`;
       }).join("")}${dots.map(({ id, c, s, fill }) => `<circle id="${id}" cx="${round(c * 14)}" cy="${round(s * 14)}" r="5" fill="${fill}" opacity="0"/>`).join("")}</g></svg>`,
       animate: [
         { id: "flash", attrs: { r: [0, 22], opacity: [0.9, 0] }, ms: 380, ease: "out" },
         ...streaks.flatMap(({ id, c, s }) => {
-          const [x0, y0] = at3(c, s, 12);
-          const [x1, y1] = at3(c, s, 40);
-          const [x2, y2] = at3(c, s, 62);
-          const [x3, y3] = at3(c, s, 74);
+          const [x0, y0] = at4(c, s, 12);
+          const [x1, y1] = at4(c, s, 40);
+          const [x2, y2] = at4(c, s, 62);
+          const [x3, y3] = at4(c, s, 74);
           return [
             { id, attrs: { opacity: [0, 1] }, ms: 40 },
             { id, attrs: { x1: [x0, x1], y1: [y0, y1], x2: [x0, x2], y2: [y0, y2] }, ms: 420, ease: "out" },
@@ -5769,7 +5772,7 @@ var fireworkBurst = {
 var pyroEffects = [fireworkBurst];
 
 // src/catalog/timewarp.ts
-var r19 = (n11) => Math.round(n11 * 10) / 10;
+var r19 = (n13) => Math.round(n13 * 10) / 10;
 var at2 = (degrees, radius) => {
   const a = degrees * Math.PI / 180;
   return [r19(100 + radius * Math.sin(a)), r19(100 - radius * Math.cos(a))];
@@ -5903,37 +5906,37 @@ function around(c, r, from, to, avoid) {
   if (((avoid - from) % 360 + 360) % 360 < delta) delta -= 360;
   return arc2(c[0], c[1], r, r, from, from + delta);
 }
-function crescent(c1, r111, c2, r2_) {
+function crescent(c1, r112, c2, r2_) {
   const [dx, dy] = [c2[0] - c1[0], c2[1] - c1[1]];
   const d = Math.hypot(dx, dy);
-  const a = (r111 * r111 - r2_ * r2_ + d * d) / (2 * d);
-  const h = Math.sqrt(Math.max(0, r111 * r111 - a * a));
-  const [px, py] = [c1[0] + a * dx / d, c1[1] + a * dy / d];
-  const i1 = [px - h * dy / d, py + h * dx / d];
-  const i2 = [px + h * dy / d, py - h * dx / d];
+  const a = (r112 * r112 - r2_ * r2_ + d * d) / (2 * d);
+  const h = Math.sqrt(Math.max(0, r112 * r112 - a * a));
+  const [px2, py2] = [c1[0] + a * dx / d, c1[1] + a * dy / d];
+  const i1 = [px2 - h * dy / d, py2 + h * dx / d];
+  const i2 = [px2 + h * dy / d, py2 - h * dx / d];
   const angle = (c, p) => Math.atan2(p[1] - c[1], p[0] - c[0]) / DEG2;
-  const outer = around(c1, r111, angle(c1, i1), angle(c1, i2), angle(c1, c2));
+  const outer = around(c1, r112, angle(c1, i1), angle(c1, i2), angle(c1, c2));
   const inner = around(c2, r2_, angle(c2, i2), angle(c2, i1), angle(c2, c1) + 180);
   return polyline3([...outer, ...inner.slice(1, -1)], true);
 }
 var HEART6 = "M12 20.5 C12 20.5 3 14.8 3 8.8 C3 6 5.2 3.8 8 3.8 C9.7 3.8 11.2 4.7 12 6.1 C12.8 4.7 14.3 3.8 16 3.8 C18.8 3.8 21 6 21 8.8 C21 14.8 12 20.5 12 20.5 Z";
 var placed = (d, cx, cy, s) => mapPath(d, (p) => [cx + (p[0] - 12) * s, cy + (p[1] - 12) * s]);
-function fitted(d, box, points) {
+function fitted(d, box2, points) {
   const outline4 = morphSequence([d], { points })[0];
   const pts = pointsOf(outline4);
   const xs = pts.map((p) => p[0]);
   const ys = pts.map((p) => p[1]);
   const [x0, y0] = [Math.min(...xs), Math.min(...ys)];
   const [w, h] = [Math.max(...xs) - x0, Math.max(...ys) - y0];
-  const s = Math.min(box[2] / Math.max(w, 1e-6), box[3] / Math.max(h, 1e-6));
-  const [ox, oy] = [box[0] + (box[2] - w * s) / 2, box[1] + (box[3] - h * s) / 2];
+  const s = Math.min(box2[2] / Math.max(w, 1e-6), box2[3] / Math.max(h, 1e-6));
+  const [ox, oy] = [box2[0] + (box2[2] - w * s) / 2, box2[1] + (box2[3] - h * s) / 2];
   return mapPath(outline4, (p) => [ox + (p[0] - x0) * s, oy + (p[1] - y0) * s]);
 }
-function fittedOr(d, fallback, box, points) {
+function fittedOr(d, fallback, box2, points) {
   try {
-    return fitted(String(d), box, points);
+    return fitted(String(d), box2, points);
   } catch {
-    return fitted(fallback, box, points);
+    return fitted(fallback, box2, points);
   }
 }
 var SHAPE_FROM = "M30 12 H70 A18 18 0 0 1 88 30 V70 A18 18 0 0 1 70 88 H30 A18 18 0 0 1 12 70 V30 A18 18 0 0 1 30 12 Z";
@@ -6004,12 +6007,12 @@ function iconMorph(pair2) {
   return iconMorphs.get(pair2);
 }
 var pose2 = (turn, scale) => `translate(60 60) rotate(${turn}) scale(${scale}) translate(-12 -12)`;
-var toggle = (at3, d, fill, turn) => [
-  { id: "glyph", attrs: { d }, delay: at3, ms: 420, ease: "in-out" },
-  { id: "icon", attrs: { transform: [pose2(0, 2.6), pose2(turn, 2.15)] }, delay: at3, ms: 170, ease: "out" },
-  { id: "icon", attrs: { transform: [pose2(turn, 2.15), pose2(-turn * 0.3, 2.85)] }, delay: at3 + 170, ms: 190, ease: "in-out" },
-  { id: "icon", attrs: { transform: [pose2(-turn * 0.3, 2.85), pose2(0, 2.6)] }, delay: at3 + 360, ms: 260, ease: "in-out" },
-  { id: "button", attrs: { fill }, delay: at3, ms: 320, ease: "in-out" }
+var toggle = (at4, d, fill, turn) => [
+  { id: "glyph", attrs: { d }, delay: at4, ms: 420, ease: "in-out" },
+  { id: "icon", attrs: { transform: [pose2(0, 2.6), pose2(turn, 2.15)] }, delay: at4, ms: 170, ease: "out" },
+  { id: "icon", attrs: { transform: [pose2(turn, 2.15), pose2(-turn * 0.3, 2.85)] }, delay: at4 + 170, ms: 190, ease: "in-out" },
+  { id: "icon", attrs: { transform: [pose2(-turn * 0.3, 2.85), pose2(0, 2.6)] }, delay: at4 + 360, ms: 260, ease: "in-out" },
+  { id: "button", attrs: { fill }, delay: at4, ms: 320, ease: "in-out" }
 ];
 var iconToggle = {
   kind: "vector",
@@ -6127,8 +6130,8 @@ var particleMorph = {
   ],
   // The dots sit on the morphed outlines: point k of one shape flies to point k of the other.
   derived: (v) => {
-    const box = [40, 40, 120, 120];
-    const [a, b] = morphPaths(fittedOr(v.from, PARTICLE_FROM, box, 96), fittedOr(v.to, PARTICLE_TO, box, 96), { points: DOTS4 });
+    const box2 = [40, 40, 120, 120];
+    const [a, b] = morphPaths(fittedOr(v.from, PARTICLE_FROM, box2, 96), fittedOr(v.to, PARTICLE_TO, box2, 96), { points: DOTS4 });
     const [pa, pb] = [pointsOf(a), pointsOf(b)];
     const out = { a, b };
     const scatter = Number(v.scatter);
@@ -6151,11 +6154,11 @@ var particleMorph = {
   motion: (() => {
     const back = 3e3;
     const spread = DOTS4 * DOT_STAGGER;
-    const leg = (i, at3, from, mid, to, colours) => [
-      { id: `p${i}`, attrs: { cx: [n9(`${from}x${i}`), n9(`${mid}x${i}`)], cy: [n9(`${from}y${i}`), n9(`${mid}y${i}`)] }, delay: at3 + i * DOT_STAGGER, ms: 450, ease: "out" },
-      { id: `p${i}`, attrs: { cx: [n9(`${mid}x${i}`), n9(`${to}x${i}`)], cy: [n9(`${mid}y${i}`), n9(`${to}y${i}`)], fill: colours }, delay: at3 + 450 + i * DOT_STAGGER, ms: 650, ease: "in-out" }
+    const leg = (i, at4, from, mid, to, colours) => [
+      { id: `p${i}`, attrs: { cx: [n9(`${from}x${i}`), n9(`${mid}x${i}`)], cy: [n9(`${from}y${i}`), n9(`${mid}y${i}`)] }, delay: at4 + i * DOT_STAGGER, ms: 450, ease: "out" },
+      { id: `p${i}`, attrs: { cx: [n9(`${mid}x${i}`), n9(`${to}x${i}`)], cy: [n9(`${mid}y${i}`), n9(`${to}y${i}`)], fill: colours }, delay: at4 + 450 + i * DOT_STAGGER, ms: 650, ease: "in-out" }
     ];
-    const fade2 = (id, at3, show) => ({ id, attrs: { opacity: show ? [0, n9("ghost")] : [n9("ghost"), 0] }, delay: at3, ms: 450, ease: "in-out" });
+    const fade2 = (id, at4, show) => ({ id, attrs: { opacity: show ? [0, n9("ghost")] : [n9("ghost"), 0] }, delay: at4, ms: 450, ease: "in-out" });
     return {
       svg: `<svg viewBox="0 0 200 200"><!-- {{from: text default='${PARTICLE_FROM}' label='From path'}} {{to: text default='${PARTICLE_TO}' label='To path'}} {{fromColor: color default=#F472B6 label='From colour'}} {{toColor: color default=#FBBF24 label='To colour'}} {{background: color default=#0C0A1D label='Background'}} {{size: float min=0.8 max=6 default=2.6 step=0.1 label='Dot size'}} {{scatter: float min=0 max=80 default=34 step=1 label='Scatter'}} {{ghost: float min=0 max=1 default=0.16 label='Shape fill'}} --><rect width="200" height="200" fill="{{background}}"/><path id="ghostA" d="{{a}}" fill="{{fromColor}}" fill-rule="evenodd" opacity="{{ghost}}"/><path id="ghostB" d="{{b}}" fill="{{toColor}}" fill-rule="evenodd" opacity="0"/>${Array.from(
         { length: DOTS4 },
@@ -6223,8 +6226,8 @@ var digitMorph = {
       out[`x${j}`] = r210(left + Math.max(0, place) * 22 * scale);
       const glyphs = values.map((x) => {
         const text = String(x);
-        const at3 = text.length - (used - place);
-        return place >= 0 && at3 >= 0 ? Number(text[at3]) : -1;
+        const at4 = text.length - (used - place);
+        return place >= 0 && at4 >= 0 ? Number(text[at4]) : -1;
       });
       const paths = morphSequence(glyphs.map((g) => g < 0 ? BLANK : DIGITS[g]), { points: 64 });
       for (let k = 0; k <= MAX_STEPS; k++) {
@@ -18439,26 +18442,26 @@ float coverage(vec2 p, float radius) {
   }
   return sum / 16.0;
 }`.trim();
-function goldenTaps(n11) {
-  const taps = Array.from({ length: n11 }, (_, i) => {
-    const r = Math.sqrt((i + 0.5) / n11);
+function goldenTaps(n13) {
+  const taps = Array.from({ length: n13 }, (_, i) => {
+    const r = Math.sqrt((i + 0.5) / n13);
     const a = i * 2.39996;
     return `vec2(${(r * Math.cos(a)).toFixed(5)}, ${(r * Math.sin(a)).toFixed(5)})`;
   });
-  return `const vec2 GOLDEN${n11}[${n11}] = vec2[${n11}](${taps.join(", ")});`;
+  return `const vec2 GOLDEN${n13}[${n13}] = vec2[${n13}](${taps.join(", ")});`;
 }
-function coverageTaps(name, n11, blur) {
+function coverageTaps(name, n13, blur) {
   return `
-${goldenTaps(n11)}
+${goldenTaps(n13)}
 float ${name}(vec2 p, float radius) {
   float sum = 0.0;
   if (gMaskPlace.w < 0.5) {
-    for (int i = 0; i < ${n11}; i++) sum += shapeAt(p + radius * GOLDEN${n11}[i], radius * ${blur.toFixed(2)});
+    for (int i = 0; i < ${n13}; i++) sum += shapeAt(p + radius * GOLDEN${n13}[i], radius * ${blur.toFixed(2)});
   } else {
     float lod = log2(max(radius * ${blur.toFixed(2)} * gMaskPlace.z, 1.0));
-    for (int i = 0; i < ${n11}; i++) sum += shapeLod(p + radius * GOLDEN${n11}[i], lod);
+    for (int i = 0; i < ${n13}; i++) sum += shapeLod(p + radius * GOLDEN${n13}[i], lod);
   }
-  return sum / ${n11}.0;
+  return sum / ${n13}.0;
 }`.trim();
 }
 var LITE_TAPS = 10;
@@ -20624,6 +20627,885 @@ var lightingShaders = [
   partyLights
 ];
 
+// src/catalog/shaders/audio.ts
+var SOUND = `
+bool soundDemo() { return uDemo && iBeat == 0.0 && dot(iAudio, iAudio) == 0.0; }
+// The demo: a kick every half second, a hat between, and a gently wandering pink-ish spectrum.
+float demoKick() { return exp(-mod(iTime, 0.5) * 7.0); }
+float demoHat() { return exp(-mod(iTime + 0.25, 0.5) * 16.0); }
+vec4 sound() {
+  if (!soundDemo()) return iAudio;
+  float k = demoKick();
+  float mid = 0.4 + 0.12 * sin(iTime * 1.7) + 0.1 * sin(iTime * 3.1);
+  return vec4(0.45 + 0.3 * k + 0.1 * mid, 0.3 + 0.65 * k, mid, 0.25 + 0.4 * demoHat() + 0.08 * sin(iTime * 5.3));
+}
+float beat() { return soundDemo() ? mod(iTime, 0.5) : iBeat; }
+float spectrum(float x) {
+  x = clamp(x, 0.0, 1.0);
+  if (soundDemo()) {
+    float tilt = 0.8 - 0.5 * x;
+    float wander = 0.6 + 0.25 * sin(iTime * 0.7 + x * 5.0) + 0.1 * sin(x * 23.0 + iTime * 2.3) + 0.07 * sin(x * 47.0 - iTime * 3.7);
+    return clamp(tilt * wander + 0.55 * demoKick() * exp(-x * 7.0) + 0.35 * demoHat() * smoothstep(0.55, 0.9, x), 0.0, 1.0);
+  }
+  float f = x * 63.0;
+  int i = int(f);
+  int j = min(i + 1, 63);
+  return mix(iSpectrum[i / 4][i % 4], iSpectrum[j / 4][j % 4], f - float(i));
+}`.trim();
+var GLOW8 = `
+vec4 glow(vec3 c) {
+  c = 1.0 - exp(-max(c, 0.0));
+  float a = max(c.r, max(c.g, c.b));
+  return vec4(c / max(a, 1e-4), a);
+}`.trim();
+var DEMO = `uniform bool uDemo;         // @control default=true label="Demo when silent"`;
+var spectrumBars = {
+  kind: "shader",
+  id: "spectrum-bars",
+  name: "Spectrum bars",
+  description: "Classic equaliser bars dancing to the music, with peak caps kicked up on each beat and an optional mirrored layout.",
+  category: "audio",
+  tags: ["audio", "music", "equalizer", "spectrum", "bars", "visualizer", "beat"],
+  source: glsl(
+    `// Spectrum bars: the spectrum as bars, low to high, coloured by height, with caps that jump on beats.
+uniform int uBars;           // @control min=8 max=64 default=32 label="Bars"
+uniform float uGap;          // @control min=0 max=0.8 default=0.3 label="Gap"
+uniform float uGain;         // @control min=0.3 max=2.5 default=1.1 label="Gain"
+uniform vec3 uColorLow;      // @control color default=#22D3EE label="Low colour"
+uniform vec3 uColorHigh;     // @control color default=#F43F5E label="High colour"
+uniform vec3 uBackground;    // @control color default=#070B16 label="Background"
+uniform bool uMirror;        // @control default=false label="Mirrored"
+uniform bool uPeaks;         // @control default=true label="Peak caps"
+uniform float uRound;        // @control min=0 max=1 default=0.5 label="Rounded"
+${DEMO}`,
+    SOUND,
+    `float box(vec2 p, vec2 hs, float r) {
+  vec2 q = abs(p) - hs + r;
+  return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - r;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  float px = 1.0 / iResolution.y;
+  float n = float(uBars);
+  // Margins round the bars, and a floor a little up from the bottom (the middle when mirrored).
+  float x = (uv.x - 0.06) / 0.88;
+  float base = uMirror ? 0.5 : 0.12;
+  float room = uMirror ? 0.4 : 0.78;
+  float cell = floor(x * n);
+  float within = fract(x * n);
+  vec3 col = uBackground * (1.0 + 0.25 * (1.0 - uv.y));
+  if (x >= 0.0 && x < 1.0) {
+    float v = clamp(spectrum((cell + 0.5) / n) * uGain, 0.0, 1.0);
+    float h = max(v * room, 2.0 * px);
+    // The bar, in pixels from its centre, so corners round alike at any size.
+    float barW = (1.0 - uGap) * 0.88 * iResolution.x / n;
+    vec2 p = vec2((within - 0.5) * 0.88 * iResolution.x / n, (uv.y - base) * iResolution.y);
+    float sideY = uMirror ? abs(p.y) : p.y;
+    float r = uRound * barW * 0.5;
+    float d = box(vec2(p.x, sideY - h * 0.5 * iResolution.y), vec2(barW * 0.5, h * 0.5 * iResolution.y), r);
+    float body = clamp(0.5 - d, 0.0, 1.0);
+    float along = clamp(sideY / (room * iResolution.y), 0.0, 1.0);
+    vec3 bar = mix(uColorLow, uColorHigh, along);
+    // A soft glow under each bar, brighter as it rises.
+    float halo = exp(-max(d, 0.0) / (barW * 0.6)) * 0.25 * v;
+    col += bar * halo;
+    col = mix(col, bar * (0.85 + 0.3 * v), body);
+    if (uPeaks) {
+      // The cap rides just above the bar, kicked up on each beat and falling back under gravity.
+      float b = beat();
+      float kick = b >= 0.0 ? max(0.0, 1.0 - b * 3.0) : 0.0;
+      float lift = 0.035 + 0.12 * v * kick * kick;
+      float capY = (h + lift * room) * iResolution.y;
+      float cap = box(vec2(p.x, sideY - capY), vec2(barW * 0.5, max(2.0, 0.008 * iResolution.y)), r * 0.4);
+      col = mix(col, mix(bar, vec3(1.0), 0.6), clamp(0.5 - cap, 0.0, 1.0));
+    }
+    // A faint reflection on the floor.
+    if (!uMirror && p.y < 0.0) {
+      float rd = box(vec2(p.x, -p.y - h * 0.5 * iResolution.y), vec2(barW * 0.5, h * 0.5 * iResolution.y), r);
+      col = mix(col, bar, clamp(0.5 - rd, 0.0, 1.0) * 0.18 * exp(p.y / (0.06 * iResolution.y)));
+    }
+  }
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Mirrored neon", values: { uMirror: true, uBars: 48, uGap: 0.4, uColorLow: [0.6, 0.2, 1], uColorHigh: [0.2, 1, 0.8] } },
+    { name: "Retro LED", values: { uBars: 16, uGap: 0.15, uRound: 0, uColorLow: [0.2, 1, 0.3], uColorHigh: [1, 0.2, 0.1], uBackground: [0, 0, 0] } },
+    { name: "Minimal", values: { uBars: 64, uGap: 0.5, uRound: 1, uPeaks: false, uColorLow: [1, 1, 1], uColorHigh: [1, 1, 1], uBackground: [0.06, 0.06, 0.07] } }
+  ]
+};
+var circularSpectrum = {
+  kind: "shader",
+  id: "circular-spectrum",
+  name: "Circular spectrum",
+  description: "A ring of spectrum bars radiating round a centre picture or colour, which swells on the bass.",
+  category: "audio",
+  video: "filter",
+  tags: ["audio", "music", "spectrum", "radial", "ring", "visualizer", "album art"],
+  source: glsl(
+    `// Circular spectrum: bars radiating from a ring, the spectrum mirrored round it, a picture in the middle.
+uniform sampler2D uImage;    // @control filter=mipmap wrap=clamp default=${SAMPLE_IMAGES.portrait} label="Centre picture"
+uniform bool uShowImage;     // @control default=true label="Show the picture"
+uniform vec3 uCenter;        // @control color default=#1E1B4B label="Centre colour"
+uniform float uRadius;       // @control min=0.1 max=0.4 default=0.22 label="Radius"
+uniform int uBars;           // @control min=24 max=180 default=96 label="Bars"
+uniform float uLength;       // @control min=0.05 max=0.4 default=0.2 label="Bar length"
+uniform vec3 uColorA;        // @control color default=#38BDF8 label="Colour 1"
+uniform vec3 uColorB;        // @control color default=#E879F9 label="Colour 2"
+uniform vec3 uBackground;    // @control color default=#05060F label="Background"
+uniform float uBackgroundAlpha; // @control min=0 max=1 default=1 label="Background opacity"
+uniform float uSpin;         // @control min=-1 max=1 default=0.1 label="Spin"
+${BACKDROP_CONTROLS}
+${DEMO}`,
+    PICTURE,
+    SOUND,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float px = 1.0 / iResolution.y;
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) * px;
+  vec4 s = sound();
+  float pulse = 1.0 + 0.12 * s.y * s.y;
+  float r0 = uRadius * pulse;
+  float r = length(p);
+  float a = atan(p.x, p.y) + iTime * uSpin;
+  // Bars round the ring: the spectrum low to high from the top down each side, so it is symmetric.
+  float n = float(uBars);
+  float t = fract(a / 6.28318);
+  float cell = floor(t * n);
+  float mirrored = abs((cell + 0.5) / n * 2.0 - 1.0);
+  float v = spectrum(1.0 - mirrored);
+  float len = uLength * (0.08 + v);
+  float within = abs(fract(t * n) - 0.5) * 6.28318 * r / n;
+  float width = 0.45 * 6.28318 * r0 / n;
+  float radial = max(r0 + 0.01 - r, r - (r0 + 0.01 + len));
+  float bar = clamp(0.5 - max(radial, within - width) / px, 0.0, 1.0);
+  vec3 tint = mix(uColorA, uColorB, mirrored);
+  vec4 acc = vec4(uBackground, uBackgroundAlpha);
+  // Glow round the ring with the level.
+  float halo = exp(-abs(r - r0 - 0.02) / (0.04 + 0.06 * s.x)) * (0.3 + 0.7 * s.x);
+  vec3 glowCol = tint * halo * 0.6;
+  acc.rgb += glowCol;
+  acc.a = max(acc.a, clamp(halo * 0.6, 0.0, 1.0));
+  acc = mix(acc, vec4(tint * (0.8 + 0.5 * v), 1.0), bar);
+  // The centre: the picture (or the colour) in a disc, with a thin ring.
+  float disc = clamp((r0 - r) / px, 0.0, 1.0);
+  if (disc > 0.0) {
+    vec2 uv = p / (2.0 * r0) + 0.5;
+    vec4 pic = uShowImage ? pictureRGBA(uImage, vec2(uv.x, uv.y)) : vec4(uCenter, 1.0);
+    vec3 c = mix(uCenter, pic.rgb, pic.a) * (0.9 + 0.2 * s.y);
+    acc = mix(acc, vec4(c, 1.0), disc);
+  }
+  float rim = clamp(1.0 - abs(r - r0) / (1.5 * px), 0.0, 1.0);
+  acc = mix(acc, vec4(mix(tint, vec3(1.0), 0.5), 1.0), rim * 0.8);
+  fragColor = acc;
+}`
+  ),
+  presets: [
+    { name: "Colour disc", values: { uShowImage: false, uCenter: [0.95, 0.3, 0.45], uColorA: [1, 0.8, 0.3], uColorB: [1, 0.3, 0.5] } },
+    { name: "Overlay", values: { uBackgroundAlpha: 0, uShowImage: false, uCenter: [0, 0, 0], uBars: 140, uLength: 0.3 } },
+    { name: "Dense", values: { uBars: 180, uLength: 0.32, uRadius: 0.18, uColorA: [0.3, 1, 0.7], uColorB: [0.2, 0.5, 1] } }
+  ]
+};
+var waveformLine = {
+  kind: "shader",
+  id: "waveform-line",
+  name: "Waveform line",
+  description: "A smooth glowing oscilloscope line drawn from the music's spectrum, with fainter echoes trailing it.",
+  category: "audio",
+  tags: ["audio", "music", "waveform", "oscilloscope", "line", "visualizer", "overlay"],
+  transparent: true,
+  source: glsl(
+    `// Waveform line: a line built from sines whose sizes are the spectrum's bands, glowing, with echoes.
+uniform vec3 uColor;         // @control color default=#5EEAD4 label="Colour"
+uniform vec3 uEcho;          // @control color default=#A78BFA label="Echo colour"
+uniform float uAmplitude;    // @control min=0.05 max=0.5 default=0.22 label="Height"
+uniform float uThickness;    // @control min=0.5 max=8 default=2.5 label="Thickness (px)"
+uniform float uGlow;         // @control min=0 max=2 default=1 label="Glow"
+uniform int uEchoes;         // @control min=0 max=3 default=2 label="Echoes"
+uniform float uSpeed;        // @control min=0 max=3 default=1 label="Speed"
+uniform vec3 uBackground;    // @control color default=#03050C label="Background"
+uniform float uBackgroundAlpha; // @control min=0 max=1 default=0 label="Background opacity"
+${DEMO}`,
+    SOUND,
+    GLOW8,
+    `// The line's height at x (0\u20131) and its slope, from 12 bands of the spectrum, fading out at the ends.
+vec2 wave(float x, float t) {
+  float y = 0.0;
+  float dy = 0.0;
+  for (int k = 0; k < 12; k++) {
+    float fk = float(k);
+    float amp = spectrum((fk + 0.5) / 12.0) / (1.0 + fk * 0.35);
+    float freq = 6.28318 * (1.5 + fk * 1.7);
+    float ph = t * (1.3 + fk * 0.6) * (mod(fk, 2.0) < 0.5 ? 1.0 : -1.0) + fk * 1.7;
+    y += amp * sin(freq * x + ph);
+    dy += amp * freq * cos(freq * x + ph);
+  }
+  float env = sin(3.14159 * clamp(x, 0.0, 1.0));
+  float denv = 3.14159 * cos(3.14159 * clamp(x, 0.0, 1.0));
+  return vec2(y * env, dy * env + y * denv) * 0.35;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  float aspect = iResolution.x / iResolution.y;
+  vec4 s = sound();
+  vec3 light = vec3(0.0);
+  for (int e = 3; e >= 0; e--) {
+    if (e > uEchoes) continue;
+    float lag = float(e) * 0.12;
+    vec2 w = wave(uv.x, iTime * uSpeed - lag) * uAmplitude * (1.0 + 0.6 * s.y) * (1.0 - 0.18 * float(e));
+    // Distance to the line in pixels, corrected for its slope.
+    float slope = w.y / aspect;
+    float d = abs(uv.y - 0.5 - w.x) * iResolution.y / sqrt(1.0 + slope * slope);
+    float core = clamp(uThickness * 0.5 + 0.5 - d, 0.0, 1.0);
+    float halo = exp(-d / (6.0 + 18.0 * s.x)) * uGlow * 0.5;
+    vec3 c = e == 0 ? uColor : uEcho;
+    float fade = e == 0 ? 1.0 : 0.45 / float(e);
+    light += c * (core * 1.6 + halo) * fade;
+  }
+  vec4 g = glow(light);
+  vec3 col = mix(uBackground, g.rgb, g.a);
+  float alpha = max(g.a, uBackgroundAlpha);
+  fragColor = vec4(mix(g.rgb, col, uBackgroundAlpha), alpha);
+}`
+  ),
+  presets: [
+    { name: "On black", values: { uBackgroundAlpha: 1 } },
+    { name: "Laser", values: { uColor: [1, 0.15, 0.25], uEcho: [1, 0.6, 0.2], uThickness: 1.5, uGlow: 1.8 } },
+    { name: "Clean", values: { uEchoes: 0, uGlow: 0.3, uColor: [1, 1, 1], uThickness: 3 } }
+  ]
+};
+var bassPulse = {
+  kind: "shader",
+  id: "bass-pulse",
+  name: "Bass pulse",
+  description: "A picture or logo thumping to the bass: it swells and glows on every kick, with a colour split on the beat.",
+  category: "audio",
+  video: "filter",
+  tags: ["audio", "music", "bass", "pulse", "logo", "beat", "glow"],
+  source: glsl(
+    `// Bass pulse: the picture scaled by the bass, a glow from its edges, a quick colour split on each beat.
+uniform sampler2D uImage;    // @control filter=mipmap wrap=clamp default=${SAMPLE_IMAGES.portrait} label="Picture or logo"
+uniform float uSize;         // @control min=0.2 max=1 default=0.55 label="Size"
+uniform float uPulse;        // @control min=0 max=0.5 default=0.14 label="Pulse"
+uniform vec3 uGlowColor;     // @control color default=#F472B6 label="Glow"
+uniform float uGlow;         // @control min=0 max=2 default=1 label="Glow strength"
+uniform float uSplit;        // @control min=0 max=0.03 default=0.012 label="Colour split on the beat"
+uniform float uCorner;       // @control min=0 max=0.5 default=0.08 label="Corner rounding"
+uniform vec3 uBackground;    // @control color default=#0B0614 label="Background"
+uniform float uBackgroundAlpha; // @control min=0 max=1 default=1 label="Background opacity"
+${BACKDROP_CONTROLS}
+${DEMO}`,
+    PICTURE,
+    SOUND,
+    `// The picture's coverage at p (centred, in heights), and its colour: inside a rounded box, through its own alpha.
+vec4 card(vec2 p, vec2 hs) {
+  float corner = uCorner * min(hs.x, hs.y);
+  vec2 q = abs(p) - hs + corner;
+  float d = length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - corner;
+  float inside = clamp(0.5 - d * iResolution.y, 0.0, 1.0);
+  if (inside <= 0.0) return vec4(0.0);
+  vec4 c = pictureRGBA(uImage, p / (2.0 * hs) + 0.5);
+  return vec4(c.rgb, c.a * inside);
+}
+
+// The glow reaching p: falling off from the picture's box, shaped by its alpha blurred (a coarse mip) nearby.
+float glowAt(vec2 p, vec2 hs, float spread) {
+  float corner = uCorner * min(hs.x, hs.y);
+  vec2 q = abs(p) - hs + corner;
+  float d = length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - corner;
+  float box = exp(-max(d, 0.0) / spread);
+  if (textureSize(uImage, 0).x <= 1 || uBackdropAlpha >= 1.0) return box;
+  // A logo on a clear backdrop: two coarse mips of its alpha, a soft halo round its own shape.
+  vec2 uv = p / (2.0 * hs) + 0.5;
+  float lod = log2(float(textureSize(uImage, 0).x));
+  float blurred = min(1.0, 0.6 * textureLod(uImage, uv, lod - 4.5).a + 0.8 * textureLod(uImage, uv, lod - 3.0).a);
+  float inside = step(abs(uv.x - 0.5), 0.5) * step(abs(uv.y - 0.5), 0.5);
+  return mix(blurred * inside, box, uBackdropAlpha);
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
+  vec4 s = sound();
+  float b = beat();
+  float hit = b >= 0.0 ? exp(-b * 6.0) : 0.0;
+  float bass = s.y * s.y;
+  float scale = 1.0 + uPulse * (bass * 0.7 + hit * 0.5);
+  // The picture's own shape: square for a 1 \xD7 1 placeholder, else its aspect.
+  vec2 size = vec2(textureSize(uImage, 0));
+  float aspect = size.x > 1.0 ? size.x / size.y : 16.0 / 9.0;
+  vec2 hs = 0.5 * uSize * scale * vec2(aspect, 1.0);
+  // Narrower than the frame, whatever the picture's shape.
+  hs *= min(1.0, 0.45 * iResolution.x / iResolution.y / hs.x);
+  // A colour split along x on the beat.
+  vec2 off = vec2(uSplit * hit, 0.0);
+  vec4 c = card(p, hs);
+  vec4 cr = card(p - off, hs);
+  vec4 cb = card(p + off, hs);
+  vec3 pic = vec3(cr.r, c.g, cb.b);
+  float cover = max(c.a, max(cr.a, cb.a));
+  // Glow round the picture, wider and brighter with the bass.
+  float spread = 0.02 + 0.05 * bass + 0.03 * hit;
+  float g = glowAt(p, hs, spread) * (0.45 + 0.9 * bass + 0.6 * hit) * uGlow;
+  vec3 col = uBackground + uGlowColor * g * (1.0 - cover);
+  float alpha = max(uBackgroundAlpha, clamp(g, 0.0, 1.0));
+  col = mix(col, pic * (1.0 + 0.25 * hit), cover);
+  fragColor = vec4(col, max(alpha, cover));
+}`
+  ),
+  presets: [
+    { name: "Logo", values: { uImage: SAMPLE_IMAGES.logo, uBackdropAlpha: 0, uCorner: 0, uSize: 0.6, uGlowColor: [0.5, 0.5, 1] } },
+    { name: "Heart beat", values: { uImage: SAMPLE_IMAGES.heart, uBackdropAlpha: 0, uCorner: 0, uPulse: 0.3, uGlowColor: [1, 0.3, 0.4] } },
+    { name: "Overlay", values: { uBackgroundAlpha: 0, uSplit: 0.02 } }
+  ]
+};
+var audioParticles = {
+  kind: "shader",
+  id: "audio-particles",
+  name: "Audio particles",
+  description: "Sparks bursting outward from the centre on every beat, trailing and fading, over a core that breathes with the level.",
+  category: "audio",
+  tags: ["audio", "music", "particles", "beat", "burst", "overlay", "visualizer"],
+  transparent: true,
+  source: glsl(
+    `// Audio particles: a burst of sparks on each beat, flying out and slowing, plus a core glowing with the level.
+uniform int uCount;          // @control min=8 max=64 default=40 label="Particles"
+uniform float uSpeed;        // @control min=0.2 max=2 default=0.9 label="Burst speed"
+uniform float uSize;         // @control min=0.002 max=0.02 default=0.007 label="Size"
+uniform float uLife;         // @control min=0.2 max=2 default=0.9 label="Lifetime"
+uniform vec3 uColorA;        // @control color default=#FDE047 label="Colour 1"
+uniform vec3 uColorB;        // @control color default=#FB7185 label="Colour 2"
+uniform vec3 uColorC;        // @control color default=#60A5FA label="Colour 3"
+uniform float uCore;         // @control min=0 max=1 default=0.6 label="Core glow"
+${DEMO}`,
+    HASH,
+    SOUND,
+    GLOW8,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
+  vec4 s = sound();
+  float b = beat();
+  vec3 light = vec3(0.0);
+  // The core breathes with the level.
+  float r = length(p);
+  light += mix(uColorA, uColorB, 0.5) * uCore * (0.2 + 0.8 * s.x) * exp(-r / (0.04 + 0.08 * s.y)) * 0.8;
+  if (b >= 0.0 && b < uLife) {
+    // Each burst is seeded by when it began (the beat's time on the iTime clock), so bursts differ.
+    float seed = floor((iTime - b) * 8.0);
+    float life = b / uLife;
+    float fade = (1.0 - life) * (1.0 - life);
+    float energy = 0.6 + 0.6 * s.y;
+    for (int i = 0; i < 64; i++) {
+      if (i >= uCount) break;
+      vec2 h = hash22(vec2(float(i) * 1.91 + 0.3, seed));
+      float ang = 6.28318 * (float(i) + h.x) / float(uCount);
+      float v = uSpeed * energy * (0.35 + 0.65 * h.y);
+      // Out fast, slowed by drag, the slow ones drooping a little.
+      float dist = v * (1.0 - exp(-b * 3.5)) / 3.5;
+      vec2 at = vec2(sin(ang), cos(ang)) * dist - vec2(0.0, 0.08 * b * b);
+      vec2 dir = normalize(vec2(sin(ang), cos(ang)) + 1e-4);
+      // A short streak behind each spark, along its direction.
+      vec2 d = p - at;
+      float along = clamp(dot(d, -dir), 0.0, 0.04 * exp(-b * 3.0) + 0.002);
+      float dd = length(d + dir * along);
+      float size = uSize * (1.0 - 0.5 * life);
+      float spark = exp(-dd * dd / (size * size)) + 0.25 * exp(-dd / (size * 4.0));
+      vec3 c = h.x < 0.33 ? uColorA : h.x < 0.66 ? uColorB : uColorC;
+      light += c * spark * fade * 1.4;
+    }
+  }
+  // Fine glitter that shimmers with the treble.
+  vec2 cell = floor(p * 40.0);
+  float g = hash12(cell + floor(iTime * 12.0));
+  float twinkle = step(0.985, g) * s.w * exp(-length(fract(p * 40.0) - 0.5) * 8.0);
+  light += uColorC * twinkle;
+  fragColor = glow(light);
+}`
+  ),
+  presets: [
+    { name: "Gold", values: { uColorA: [1, 0.85, 0.4], uColorB: [1, 0.6, 0.2], uColorC: [1, 1, 0.8], uCount: 56 } },
+    { name: "Ice", values: { uColorA: [0.6, 0.9, 1], uColorB: [0.3, 0.6, 1], uColorC: [1, 1, 1], uSpeed: 1.3, uLife: 1.2 } }
+  ]
+};
+var audioPlasma = {
+  kind: "shader",
+  id: "audio-plasma",
+  name: "Audio plasma",
+  description: "A flowing plasma whose swirl, scale and colours follow the bass, mids and highs, flaring on each beat.",
+  category: "audio",
+  tags: ["audio", "music", "plasma", "gradient", "psychedelic", "background", "visualizer"],
+  source: glsl(
+    `// Audio plasma: layered sines warped by noise; the bass pushes the flow, the mids tilt the palette, the highs add grain.
+uniform float uScale;        // @control min=0.5 max=6 default=2.4 label="Scale"
+uniform float uFlow;         // @control min=0 max=2 default=0.5 label="Flow"
+uniform float uReact;        // @control min=0 max=2 default=1 label="Reactivity"
+uniform vec3 uPhase;         // @control color default=#1A66B3 label="Palette phase"
+uniform float uContrast;     // @control min=0.5 max=2 default=1.1 label="Contrast"
+${DEMO}`,
+    HASH,
+    NOISE,
+    PALETTE,
+    SOUND,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
+  vec4 s = sound() * uReact;
+  float b = beat();
+  float hit = b >= 0.0 ? exp(-b * 5.0) * uReact : 0.0;
+  float t = iTime * uFlow;
+  // The bass pushes the pattern on (a nudge that settles back, not a jump in time).
+  float push = 0.8 * s.y + 0.5 * hit;
+  vec2 q = p * uScale * (1.0 - 0.1 * s.y);
+  vec2 w = vec2(vnoise(q * 0.7 + t * 0.3), vnoise(q * 0.7 - t * 0.27 + 5.0)) - 0.5;
+  q += w * (1.2 + 1.5 * s.z);
+  float v = sin(q.x + t + push);
+  v += sin(q.y * 1.3 - t * 0.8 + push * 0.7);
+  v += sin((q.x + q.y) * 0.8 + t * 0.6);
+  v += sin(length(q + vec2(sin(t * 0.4), cos(t * 0.3))) * 2.0 - t * 1.2 - push * 1.5);
+  v = v * 0.25 * uContrast;
+  // The mids turn the palette; the highs add a fine shimmer.
+  vec3 col = palette(v * 0.7 + 0.15 * s.z + 0.05 * t, vec3(0.45, 0.4, 0.5), vec3(0.4, 0.35, 0.4), vec3(0.8, 0.7, 0.6), uPhase + vec3(0.0, 0.1 * s.w, 0.2 * s.y));
+  col *= 0.75 + 0.35 * s.x + 0.4 * hit;
+  col += (hash12(fragCoord + floor(iTime * 30.0)) - 0.5) * 0.06 * s.w;
+  fragColor = vec4(clamp(col, 0.0, 1.0), 1.0);
+}`
+  ),
+  presets: [
+    { name: "Sunset", values: { uPhase: [0, 0.15, 0.3], uScale: 1.6 } },
+    { name: "Acid", values: { uPhase: [0.3, 0.6, 0.1], uScale: 4, uContrast: 1.6, uFlow: 1 } },
+    { name: "Calm", values: { uReact: 0.4, uFlow: 0.25, uScale: 1.2 } }
+  ]
+};
+var vinyl = {
+  kind: "shader",
+  id: "vinyl",
+  name: "Vinyl",
+  description: "A record spinning on a turntable, its label a picture, its grooves catching the light with the music, the tonearm riding the beat.",
+  category: "audio",
+  video: "stills",
+  tags: ["audio", "music", "vinyl", "record", "turntable", "retro", "album art"],
+  source: glsl(
+    `// Vinyl: a spinning record; each groove's sheen follows the spectrum at its radius, the label is a picture.
+uniform sampler2D uLabel;    // @control filter=mipmap wrap=clamp default=${SAMPLE_IMAGES.portrait} label="Label picture"
+uniform float uRpm;          // @control min=0 max=78 default=33.3 label="Speed (rpm)"
+uniform vec3 uRecord;        // @control color default=#101014 label="Record"
+uniform vec3 uSheen;         // @control color default=#C4B5FD label="Sheen"
+uniform float uShimmer;      // @control min=0 max=2 default=1 label="Shimmer"
+uniform vec3 uBackground;    // @control color default=#2A211C label="Platter"
+uniform float uBackgroundAlpha; // @control min=0 max=1 default=1 label="Platter opacity"
+uniform bool uArm;           // @control default=true label="Tonearm"
+${BACKDROP_CONTROLS}
+${DEMO}`,
+    PICTURE,
+    SOUND,
+    ROTATE,
+    `float segment(vec2 p, vec2 a, vec2 b) {
+  vec2 ab = b - a;
+  float t = clamp(dot(p - a, ab) / dot(ab, ab), 0.0, 1.0);
+  return length(p - a - ab * t);
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float px = 1.0 / iResolution.y;
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) * px;
+  vec2 c = p + vec2(0.12, 0.0);
+  vec4 s = sound();
+  float b = beat();
+  float hit = b >= 0.0 ? exp(-b * 8.0) : 0.0;
+  float R = 0.44;
+  float r = length(c);
+  float spin = iTime * uRpm / 60.0 * 6.28318;
+  vec2 q = rot(spin) * c;
+  float ang = atan(q.y, q.x);
+  // The platter, with a soft shadow under the record.
+  vec3 col = uBackground * (0.85 + 0.15 * smoothstep(0.9, 0.0, length(p)));
+  float shadow = 0.5 * exp(-max(r - R, 0.0) / 0.02) * step(R, r);
+  col *= 1.0 - shadow;
+  float alpha = max(uBackgroundAlpha, shadow);
+  float disc = clamp((R - r) / px, 0.0, 1.0);
+  if (disc > 0.0) {
+    // Grooves: fine rings; their sheen is the spectrum at that radius (bass outside, treble in), in two
+    // bright wedges opposite the light, as on a real record.
+    float band = clamp((R - r) / (R - 0.14), 0.0, 1.0);
+    float level = spectrum(band);
+    float grooves = 0.5 + 0.5 * sin(r * 900.0);
+    float wedge = pow(abs(cos(atan(c.y, c.x) - 0.8)), 24.0);
+    float sheen = wedge * (0.25 + uShimmer * level) * (0.6 + 0.4 * grooves);
+    vec3 rec = uRecord * (0.9 + 0.2 * grooves) + uSheen * sheen;
+    // A faint swirl that shows the spin.
+    rec += 0.03 * sin(ang * 2.0 + r * 40.0);
+    // Lead-in and run-out rings.
+    rec *= 1.0 - 0.4 * (smoothstep(0.004, 0.0, abs(r - R + 0.012)) + smoothstep(0.004, 0.0, abs(r - 0.15)));
+    col = mix(col, rec, disc);
+    // The label: the picture, turning with the record.
+    float label = clamp((0.13 - r) / px, 0.0, 1.0);
+    vec4 pic = pictureRGBA(uLabel, q / 0.26 + 0.5);
+    vec3 lab = mix(uRecord, pic.rgb, pic.a) * (0.95 + 0.1 * s.y);
+    col = mix(col, lab, label);
+    // The spindle.
+    col = mix(col, vec3(0.8), clamp((0.008 - r) / px, 0.0, 1.0));
+  }
+  if (uArm) {
+    // The tonearm: from a pivot at the top right to the stylus on the outer grooves, nudged by the beat.
+    vec2 pivot = vec2(0.42, 0.34);
+    float swing = 0.32 + 0.004 * hit;
+    vec2 head = pivot + vec2(-sin(swing + 0.9), -cos(swing + 0.9)) * 0.5;
+    float arm = segment(p, pivot, head);
+    float shade = clamp((0.009 - arm) / px, 0.0, 1.0);
+    col = mix(col * (1.0 - 0.35 * exp(-segment(p + vec2(-0.01, 0.015), pivot, head) / 0.015)), vec3(0.78, 0.78, 0.82), shade);
+    float cart = segment(p, head, head + vec2(-0.03, -0.012));
+    col = mix(col, vec3(0.15), clamp((0.016 - cart) / px, 0.0, 1.0));
+    float base = length(p - pivot);
+    float foot = clamp((0.035 - base) / px, 0.0, 1.0);
+    col = mix(col, vec3(0.6), foot);
+    col = mix(col, vec3(0.3), clamp((0.015 - base) / px, 0.0, 1.0));
+    alpha = max(alpha, max(shade, max(foot, clamp((0.016 - cart) / px, 0.0, 1.0))));
+  }
+  fragColor = vec4(col, max(alpha, disc));
+}`
+  ),
+  presets: [
+    { name: "Red vinyl", values: { uRecord: [0.45, 0.04, 0.06], uSheen: [1, 0.6, 0.6] } },
+    { name: "45 rpm", values: { uRpm: 45, uLabel: SAMPLE_IMAGES.logo, uBackdrop: [0.95, 0.9, 0.8] } }
+  ]
+};
+var audioShaders = [spectrumBars, circularSpectrum, waveformLine, bassPulse, audioParticles, audioPlasma, vinyl];
+
+// src/catalog/shaders/scroll.ts
+var SCROLL = `
+bool scrollDemo() { return uDemo && dot(iScroll, iScroll) == 0.0; }
+vec4 scroll() {
+  if (!scrollDemo()) return iScroll;
+  // Down and back up every 6 s, resting a moment at each end.
+  float ph = fract(iTime / 6.0);
+  float u = clamp(ph < 0.5 ? ph * 2.4 - 0.1 : (1.0 - ph) * 2.4 - 0.1, 0.0, 1.0);
+  float x = u * u * (3.0 - 2.0 * u);
+  float moving = u > 0.0 && u < 1.0 ? 1.0 : 0.0;
+  // dx/dt in viewport heights a second (progress 0 to 1 being about two viewport heights): u moves 2.4 per 6 s.
+  float v = moving * 6.0 * u * (1.0 - u) * (2.4 / 6.0) * 2.0 * (ph < 0.5 ? 1.0 : -1.0);
+  return vec4(x, x, v, moving);
+}`.trim();
+var DEMO2 = `uniform bool uDemo;         // @control default=true label="Demo when not scrolled"`;
+var scrollReveal = {
+  kind: "shader",
+  id: "scroll-reveal",
+  name: "Scroll reveal",
+  description: "A picture revealed by a soft wipe, dissolve, iris or blinds as it scrolls into view, settling from a slight zoom.",
+  category: "scroll",
+  video: "filter",
+  transparent: true,
+  tags: ["interactive", "scroll", "reveal", "wipe", "dissolve", "image", "landing page"],
+  source: glsl(
+    `// Scroll reveal: the picture's coverage follows how far the canvas has come into view.
+uniform sampler2D uImage;    // @control filter=mipmap wrap=clamp default=${SAMPLE_IMAGES.landscape} label="Image"
+uniform int uStyle;          // @control min=0 max=3 default=0 label="Style (wipe, dissolve, iris, blinds)"
+uniform float uStart;        // @control min=0 max=1 default=0.1 label="Starts at"
+uniform float uEnd;          // @control min=0 max=1 default=0.5 label="Done at"
+uniform float uSoftness;     // @control min=0 max=0.4 default=0.12 label="Edge softness"
+uniform float uZoom;         // @control min=0 max=0.3 default=0.08 label="Settle zoom"
+uniform vec3 uEdge;          // @control color default=#FFFFFF label="Edge glow"
+uniform float uEdgeGlow;     // @control min=0 max=1 default=0.35 label="Edge glow strength"
+${BACKDROP_CONTROLS}
+${DEMO2}`,
+    PICTURE,
+    HASH,
+    NOISE,
+    SCROLL,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec4 s = scroll();
+  float r = smoothstep(uStart, max(uEnd, uStart + 1e-3), s.x);
+  // The field the reveal sweeps across, 0\u20131, and how far it has swept.
+  float field;
+  if (uStyle == 0) field = 1.0 - uv.y + 0.04 * (vnoise(vec2(uv.x * 9.0, 0.0)) - 0.5);
+  else if (uStyle == 1) field = vnoise(fragCoord / iResolution.y * 18.0) * 0.6 + vnoise(fragCoord / iResolution.y * 60.0) * 0.4;
+  else if (uStyle == 2) field = length((uv - 0.5) * vec2(iResolution.x / iResolution.y, 1.0)) / 0.9;
+  else field = fract(uv.y * 8.0) * 0.9 + uv.y * 0.1;
+  float soft = max(uSoftness, 1e-3);
+  float edge = r * (1.0 + soft) - soft;
+  float shown = smoothstep(edge + soft, edge, field);
+  float rim = exp(-pow((field - edge - soft * 0.5) / (soft * 0.35 + 0.01), 2.0)) * (1.0 - step(0.999, r)) * step(0.001, r);
+  // The picture settles from a slight zoom as it is revealed.
+  vec2 at = (uv - 0.5) / (1.0 + uZoom * (1.0 - r)) + 0.5;
+  vec4 pic = pictureRGBA(uImage, at);
+  vec3 col = pic.rgb + uEdge * rim * uEdgeGlow;
+  float alpha = pic.a * shown;
+  fragColor = vec4(col, clamp(max(alpha, rim * uEdgeGlow * pic.a), 0.0, 1.0));
+}`
+  ),
+  presets: [
+    { name: "Dissolve", values: { uStyle: 1, uSoftness: 0.2 } },
+    { name: "Iris", values: { uStyle: 2, uSoftness: 0.05, uImage: SAMPLE_IMAGES.portrait } },
+    { name: "Blinds", values: { uStyle: 3, uSoftness: 0.05, uEdgeGlow: 0, uImage: SAMPLE_IMAGES.city } }
+  ]
+};
+var parallaxLayers = {
+  kind: "shader",
+  id: "parallax-layers",
+  name: "Parallax layers",
+  description: "Layered hills under a sky, the near ones sliding further than the far ones as the page scrolls, for depth.",
+  category: "scroll",
+  tags: ["interactive", "scroll", "parallax", "landscape", "hills", "depth", "hero", "background"],
+  source: glsl(
+    `// Parallax layers: five ridgelines, each shifted by the scroll in proportion to how near it is.
+uniform vec3 uSkyTop;        // @control color default=#1E3A8A label="Sky top"
+uniform vec3 uSkyBottom;     // @control color default=#FDBA74 label="Sky horizon"
+uniform vec3 uFar;           // @control color default=#A78BFA label="Far hills"
+uniform vec3 uNear;          // @control color default=#1E1B4B label="Near hills"
+uniform vec3 uSun;           // @control color default=#FFF7D6 label="Sun"
+uniform float uDepth;        // @control min=0 max=1.5 default=0.6 label="Parallax depth"
+uniform float uRough;        // @control min=0 max=1 default=0.5 label="Ruggedness"
+uniform float uDrift;        // @control min=0 max=0.2 default=0.02 label="Drift"
+${DEMO2}`,
+    HASH,
+    NOISE,
+    SCROLL,
+    `float ridge(float x, float seed) {
+  float h = vnoise(vec2(x * 1.3, seed)) * 0.6 + vnoise(vec2(x * 3.1, seed + 7.0)) * 0.3 * (0.5 + uRough) + vnoise(vec2(x * 8.0, seed + 3.0)) * 0.1 * uRough;
+  return h;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  float aspect = iResolution.x / iResolution.y;
+  vec4 s = scroll();
+  float shift = (s.x - 0.5) * uDepth;
+  // The sky (and sun) move least: further away.
+  float skyY = uv.y + shift * 0.15;
+  vec3 col = mix(uSkyBottom, uSkyTop, smoothstep(0.1, 1.0, skyY));
+  vec2 sun = vec2(0.68 * aspect, 0.62 - shift * 0.2);
+  float d = length(vec2(uv.x * aspect, uv.y) - sun);
+  col = mix(col, uSun, smoothstep(0.075, 0.07, d));
+  col += uSun * exp(-d * 6.0) * 0.25;
+  for (int i = 0; i < 5; i++) {
+    float k = float(i) / 4.0;
+    // Nearer layers sit lower, rise higher with the scroll, and drift faster.
+    float base = 0.55 - 0.1 * float(i) + shift * (0.15 + 0.85 * k * k) ;
+    float x = uv.x * aspect * (0.6 + 0.5 * k) + iTime * uDrift * (0.3 + k) + float(i) * 11.3;
+    float top = base + ridge(x, float(i) * 5.0) * (0.18 + 0.05 * k);
+    float layer = smoothstep(top + 1.5 / iResolution.y, top, uv.y);
+    vec3 tint = mix(mix(uFar, uSkyBottom, 0.35), uNear, k);
+    // Mist at each layer's foot.
+    tint = mix(tint, uSkyBottom, 0.25 * (1.0 - k) * smoothstep(top - 0.25, top, uv.y) * 0.5);
+    col = mix(col, tint, layer);
+  }
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Night", values: { uSkyTop: [0.02, 0.03, 0.1], uSkyBottom: [0.15, 0.2, 0.4], uFar: [0.2, 0.25, 0.45], uNear: [0.02, 0.02, 0.06], uSun: [0.9, 0.92, 1] } },
+    { name: "Forest", values: { uSkyTop: [0.55, 0.78, 0.95], uSkyBottom: [0.9, 0.95, 0.9], uFar: [0.45, 0.65, 0.55], uNear: [0.05, 0.2, 0.12], uRough: 0.9 } },
+    { name: "Desert", values: { uSkyTop: [0.95, 0.55, 0.3], uSkyBottom: [1, 0.85, 0.6], uFar: [0.85, 0.55, 0.4], uNear: [0.45, 0.2, 0.12], uRough: 0.2 } }
+  ]
+};
+var scrollProgressGlow = {
+  kind: "shader",
+  id: "scroll-progress-glow",
+  name: "Scroll progress glow",
+  description: "A reading-progress bar along the top of the page, filling as you scroll, its glowing head flaring while you move.",
+  category: "scroll",
+  transparent: true,
+  tags: ["interactive", "scroll", "progress", "reading", "bar", "overlay", "ui"],
+  source: glsl(
+    `// Scroll progress glow: a bar as long as the page's scroll, with a glow under it and a bright head.
+uniform vec3 uColorA;        // @control color default=#22D3EE label="Start colour"
+uniform vec3 uColorB;        // @control color default=#A855F7 label="End colour"
+uniform float uHeight;       // @control min=1 max=16 default=4 label="Thickness (px)"
+uniform float uGlow;         // @control min=0 max=2 default=1 label="Glow"
+uniform bool uBottom;        // @control default=false label="Along the bottom"
+uniform vec3 uTrack;         // @control color default=#FFFFFF label="Track"
+uniform float uTrackAlpha;   // @control min=0 max=1 default=0.08 label="Track opacity"
+${DEMO2}`,
+    SCROLL,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec4 s = scroll();
+  float progress = clamp(s.y, 0.0, 1.0);
+  float x = fragCoord.x;
+  // Pixels from the bar's edge, into the page.
+  float y = uBottom ? fragCoord.y : iResolution.y - fragCoord.y;
+  float end = progress * iResolution.x;
+  float inBar = clamp(uHeight - y + 0.5, 0.0, 1.0);
+  float filled = clamp(end - x + 0.5, 0.0, 1.0);
+  vec3 tint = mix(uColorA, uColorB, x / iResolution.x);
+  float lit = 0.35 + 0.65 * s.w;
+  // A glow spilling down from the filled part, and a flare round the head while scrolling.
+  float under = filled * exp(-max(y - uHeight, 0.0) / (6.0 + 10.0 * s.w)) * 0.5 * uGlow * lit;
+  float head = exp(-length(vec2(x - end, max(y - uHeight * 0.5, 0.0))) / (8.0 + 20.0 * s.w)) * uGlow * (0.4 + 0.9 * s.w) * step(0.001, progress);
+  vec3 light = tint * (under + head * 1.4);
+  vec4 bar = vec4(mix(uTrack, tint * (1.0 + 0.3 * s.w), filled), inBar * mix(uTrackAlpha, 1.0, filled));
+  // Light over the bar, as straight colour with alpha.
+  vec3 g = 1.0 - exp(-light);
+  float ga = max(g.r, max(g.g, g.b));
+  float alpha = bar.a + ga * (1.0 - bar.a);
+  vec3 col = (bar.rgb * bar.a + g * (1.0 - bar.a)) / max(alpha, 1e-4);
+  fragColor = vec4(col, alpha);
+}`
+  ),
+  presets: [
+    { name: "Fire", values: { uColorA: [1, 0.8, 0.2], uColorB: [1, 0.2, 0.1], uHeight: 3 } },
+    { name: "Thick, bottom", values: { uBottom: true, uHeight: 10, uGlow: 0.5, uTrackAlpha: 0.15 } }
+  ]
+};
+var scrollVelocityBlur = {
+  kind: "shader",
+  id: "scroll-velocity-blur",
+  name: "Scroll velocity blur",
+  description: "A picture smeared with motion blur and a colour split as fast as the page scrolls, sharp again when it stops.",
+  category: "scroll",
+  video: "filter",
+  tags: ["interactive", "scroll", "motion blur", "speed", "image", "chromatic"],
+  source: glsl(
+    `// Scroll velocity blur: samples along the scroll direction, as many viewport heights as it is moving per second.
+uniform sampler2D uImage;    // @control filter=mipmap wrap=clamp default=${SAMPLE_IMAGES.city} label="Image"
+uniform float uAmount;       // @control min=0 max=0.3 default=0.08 label="Blur per speed"
+uniform float uMax;          // @control min=0.01 max=0.4 default=0.15 label="Most blur"
+uniform float uSplit;        // @control min=0 max=1 default=0.4 label="Colour split"
+uniform float uStretch;      // @control min=0 max=0.2 default=0.04 label="Stretch"
+${BACKDROP_CONTROLS}
+${DEMO2}`,
+    PICTURE,
+    SCROLL,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec4 s = scroll();
+  float v = s.z;
+  float len = clamp(abs(v) * uAmount, 0.0, uMax) * sign(v);
+  // A slight stretch along the scroll while moving.
+  uv.y = (uv.y - 0.5) / (1.0 + uStretch * abs(len) / max(uMax, 1e-3)) + 0.5;
+  vec4 acc = vec4(0.0);
+  vec3 split = vec3(0.0);
+  for (int i = 0; i < 16; i++) {
+    float t = (float(i) + 0.5) / 16.0 - 0.5;
+    float w = 1.0 - abs(t) * 1.2;
+    vec4 c = pictureRGBA(uImage, uv + vec2(0.0, t * len));
+    acc += c * w;
+    // Red trails, blue leads: a colour split along the motion.
+    split += vec3(c.r * max(-t, 0.0), 0.0, c.b * max(t, 0.0)) * w;
+  }
+  acc /= 6.4;
+  split /= 6.4;
+  vec3 col = acc.rgb + (split * 2.0 - vec3(acc.r, 0.0, acc.b) * 0.5) * uSplit * clamp(abs(len) * 10.0, 0.0, 1.0);
+  fragColor = vec4(clamp(col, 0.0, 1.0), clamp(acc.a, 0.0, 1.0));
+}`
+  ),
+  presets: [
+    { name: "Subtle", values: { uAmount: 0.03, uSplit: 0.1, uStretch: 0 } },
+    { name: "Warp speed", values: { uAmount: 0.2, uMax: 0.35, uSplit: 1, uStretch: 0.15 } }
+  ]
+};
+var scrollZoom = {
+  kind: "shader",
+  id: "scroll-zoom",
+  name: "Scroll zoom",
+  description: "A picture zooming in (or out) and drifting as it passes through the viewport, with an optional turn and vignette.",
+  category: "scroll",
+  video: "filter",
+  tags: ["interactive", "scroll", "zoom", "ken burns", "image", "hero"],
+  source: glsl(
+    `// Scroll zoom: the picture's scale, pan and turn follow its progress through the viewport.
+uniform sampler2D uImage;    // @control filter=mipmap wrap=clamp default=${SAMPLE_IMAGES.landscape} label="Image"
+uniform float uFrom;         // @control min=0.5 max=3 default=1 label="Zoom entering"
+uniform float uTo;           // @control min=0.5 max=3 default=1.6 label="Zoom leaving"
+uniform vec2 uFocus;         // @control min=0 max=1 default=0.62,0.5 label="Zoom towards"
+uniform float uPan;          // @control min=-0.3 max=0.3 default=0.06 label="Vertical drift"
+uniform float uTurn;         // @control min=-30 max=30 default=0 label="Turn (degrees)"
+uniform float uVignette;     // @control min=0 max=1 default=0.3 label="Vignette"
+${BACKDROP_CONTROLS}
+${DEMO2}`,
+    PICTURE,
+    SCROLL,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec4 s = scroll();
+  float k = s.x * s.x * (3.0 - 2.0 * s.x);
+  float zoom = mix(uFrom, uTo, k);
+  float a = radians(uTurn) * (k - 0.5);
+  vec2 aspect = vec2(iResolution.x / iResolution.y, 1.0);
+  vec2 p = (uv - uFocus) * aspect;
+  p = mat2(cos(a), sin(a), -sin(a), cos(a)) * p / zoom;
+  vec2 at = p / aspect + uFocus + vec2(0.0, uPan * (k - 0.5));
+  vec4 pic = pictureRGBA(uImage, at);
+  float vig = 1.0 - uVignette * smoothstep(0.35, 0.95, length((uv - 0.5) * aspect) / length(aspect * 0.5));
+  fragColor = vec4(pic.rgb * vig, pic.a);
+}`
+  ),
+  presets: [
+    { name: "Zoom out", values: { uFrom: 1.8, uTo: 1 } },
+    { name: "Dramatic turn", values: { uTo: 2.2, uTurn: 18, uVignette: 0.6, uImage: SAMPLE_IMAGES.city } }
+  ]
+};
+var scrollShaders = [scrollReveal, parallaxLayers, scrollProgressGlow, scrollVelocityBlur, scrollZoom];
+
+// src/catalog/scroll.ts
+var n10 = (name) => `{{${name}}}`;
+var SANS7 = `system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`;
+var scrollDraw = {
+  kind: "vector",
+  id: "scroll-draw",
+  name: "Scroll draw",
+  description: "A line drawing itself along its path as the page scrolls, a dot riding its tip, and undrawing as you scroll back.",
+  category: "scroll",
+  trigger: "scroll",
+  tags: ["interactive", "scroll", "line", "path", "draw", "route", "storytelling"],
+  motion: {
+    svg: `<svg viewBox="0 0 400 200" fill="none"><!-- {{accent: color default=#6366F1 label='Line'}} {{track: color default=#CBD5E1 label='Track'}} {{width: float min=1 max=16 default=6 step=1 label='Width'}} --><path d="{{path: text default='M24 160 C84 20 150 24 196 100 S318 186 376 44' label='Path'}}" stroke="{{track}}" stroke-width="2" stroke-dasharray="2 8" stroke-linecap="round"/><path id="scrollDrawLine" d="{{path}}" stroke="{{accent}}" stroke-width="{{width}}" stroke-linecap="round" stroke-linejoin="round" pathLength="1" stroke-dasharray="1 1" stroke-dashoffset="1"/><circle id="scrollDrawDot" cx="0" cy="0" r="{{dot}}" fill="{{accent}}" stroke="#FFFFFF" stroke-width="3"/></svg>`,
+    animate: [
+      { id: "scrollDrawLine", draw: true, ms: 1e3, ease: "linear" },
+      { id: "scrollDrawDot", along: "scrollDrawLine", ms: 1e3, ease: "linear" }
+    ]
+  },
+  derived: (v) => ({ dot: Math.round((Number(v.width) * 0.9 + 4) * 10) / 10 }),
+  presets: [
+    { name: "Signature", values: { path: "M30 140 C60 60 90 60 100 120 C110 170 140 70 170 90 C200 110 190 150 220 130 C250 110 270 80 300 110 C320 130 350 120 370 90", width: 4, accent: [0.07, 0.09, 0.15] } },
+    { name: "Bold", values: { width: 12, accent: [0.93, 0.27, 0.27] } }
+  ]
+};
+var scrollCounter = {
+  kind: "vector",
+  id: "scroll-counter",
+  name: "Scroll counter",
+  description: "A big number counting up as it scrolls into view, with its label and a line growing under it.",
+  category: "scroll",
+  trigger: "scroll",
+  tags: ["interactive", "scroll", "counter", "number", "stat", "kpi", "landing page"],
+  motion: {
+    svg: `<svg viewBox="0 0 400 200" font-family="${SANS7}"><!-- {{accent: color default=#0EA5E9 label='Accent'}} {{ink: color default=#0F172A label='Number'}} {{muted: color default=#64748B label='Label colour'}} {{value: float min=0 max=1000000 default=2400 step=1 label='Number'}} {{decimals: int min=0 max=3 default=0 label='Decimals'}} --><text id="scrollCounterValue" x="200" y="112" text-anchor="middle" font-size="76" font-weight="800" fill="{{ink}}" style="font-variant-numeric: tabular-nums">0</text><rect id="scrollCounterLine" x="140" y="132" width="0" height="6" rx="3" fill="{{accent}}"/><text x="200" y="170" text-anchor="middle" font-size="20" font-weight="500" fill="{{muted}}">{{label: text default='happy customers' label='Label'}}</text></svg>`,
+    animate: [
+      { id: "scrollCounterValue", count: [0, n10("value")], format: "{{prefix: text default='' label='Before the number'}}{n}{{suffix: text default='+' label='After the number'}}", decimals: n10("decimals"), ms: 1e3, ease: "out" },
+      { id: "scrollCounterLine", attrs: { width: [0, 120] }, ms: 1e3, ease: "out" }
+    ]
+  },
+  presets: [
+    { name: "Revenue", values: { value: 12.5, decimals: 1, prefix: "$", suffix: "M", label: "raised so far" } },
+    { name: "Percent", values: { value: 98, suffix: "%", label: "uptime", accent: [0.13, 0.77, 0.37] } }
+  ]
+};
+var STEP_X = [60, 160, 260, 360];
+var scrollSteps = {
+  kind: "vector",
+  id: "scroll-steps",
+  name: "Scroll steps",
+  description: "Four step markers joined by a line that fills as you scroll, each marker lighting up as the line reaches it.",
+  category: "scroll",
+  trigger: "scroll",
+  tags: ["interactive", "scroll", "steps", "progress", "timeline", "onboarding", "ui"],
+  motion: {
+    svg: `<svg viewBox="0 0 420 160" font-family="${SANS7}"><!-- {{accent: color default=#8B5CF6 label='Accent'}} {{track: color default=#E2E8F0 label='Track'}} {{text: color default=#334155 label='Text'}} --><line x1="60" y1="64" x2="360" y2="64" stroke="{{track}}" stroke-width="6" stroke-linecap="round"/><line id="scrollStepsLine" x1="60" y1="64" x2="360" y2="64" stroke="{{accent}}" stroke-width="6" stroke-linecap="round" pathLength="1" stroke-dasharray="1 1" stroke-dashoffset="1"/>${STEP_X.map(
+      (x, i) => `<circle cx="${x}" cy="64" r="20" fill="#FFFFFF" stroke="{{track}}" stroke-width="4"/><circle id="scrollStepsDot${i}" cx="${x}" cy="64" r="0" fill="{{accent}}"/><text id="scrollStepsNum${i}" x="${x}" y="71" text-anchor="middle" font-size="19" font-weight="700" fill="#94A3B8">${i + 1}</text><text x="${x}" y="118" text-anchor="middle" font-size="15" font-weight="600" fill="{{text}}">{{step${i + 1}: text default='${["Sign up", "Connect", "Customise", "Launch"][i]}' label='Step ${i + 1}'}}</text>`
+    ).join("")}</svg>`,
+    animate: [
+      { id: "scrollStepsLine", draw: true, ms: 1e3, ease: "linear" },
+      ...STEP_X.flatMap((_, i) => [
+        { id: `scrollStepsDot${i}`, attrs: { r: [0, 22] }, delay: Math.round(i * 1e3 / 3) - (i ? 60 : 0), ms: 160, ease: "out" },
+        { id: `scrollStepsNum${i}`, attrs: { fill: ["#94A3B8", "#FFFFFF"] }, delay: Math.round(i * 1e3 / 3) - (i ? 60 : 0), ms: 160, ease: "out" }
+      ])
+    ]
+  },
+  presets: [
+    { name: "Checkout", values: { step1: "Cart", step2: "Details", step3: "Payment", step4: "Done", accent: [0.06, 0.73, 0.51] } }
+  ]
+};
+var scrollEffects = [scrollDraw, scrollCounter, scrollSteps];
+
 // src/catalog/types.ts
 var EFFECT_CATEGORIES = [
   "gradient",
@@ -20654,6 +21536,10 @@ var EFFECT_CATEGORIES = [
   "glow",
   "shadow",
   "distortion",
+  "audio",
+  "scroll",
+  "broadcast",
+  "annotation",
   "transition",
   "loader",
   "data",
@@ -20771,7 +21657,7 @@ function numberControl(name, value, min, max, label, step) {
 }
 
 // src/catalog/text.ts
-var r110 = (n11) => Math.round(n11 * 10) / 10;
+var r110 = (n13) => Math.round(n13 * 10) / 10;
 function fit5(text, width, max, ems = textWidthEm(text)) {
   const e = Math.max(0.6, ems);
   const size = Math.min(max, width / e);
@@ -20788,11 +21674,11 @@ var mixHex3 = (a, b, t) => {
   return rgbToHex([0, 1, 2].map((i) => x[i] + (y[i] - x[i]) * t));
 };
 var holds = (id, attr, keys2) => keys2.map(([delay, value]) => ({ id, attrs: { [attr]: [value, value] }, delay, ms: 0 }));
-var n10 = (name) => `{{${name}}}`;
+var n11 = (name) => `{{${name}}}`;
 var MONO = `ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace`;
 var MONO_EM = 0.6;
 var HEAVY2 = `'Arial Black', 'Helvetica Neue', Impact, system-ui, sans-serif`;
-var SANS7 = `system-ui, 'Helvetica Neue', Arial, sans-serif`;
+var SANS8 = `system-ui, 'Helvetica Neue', Arial, sans-serif`;
 var SCRIPT = `'Pacifico', 'Brush Script MT', 'Segoe Script', 'Snell Roundhand', cursive`;
 var CAP = 0.72;
 var typeface = (font, weight) => `{{font: text default="${font}" label='Font'}} {{weight: int min=100 max=900 default=${weight} step=100 label='Weight'}} {{inline: bool default=false label='Inline'}}`;
@@ -20836,9 +21722,9 @@ var typewriter = {
   motion: {
     svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='Hello, world.' label='Text'}} {{paper: color default=#111827 label='Background'}} {{ink: color default=#F9FAFB label='Text colour'}} {{pace: float min=30 max=300 default=90 step=5 label='Ms per letter'}} ${typeface(MONO, 400)} --><rect width="400" height="200" fill="{{paper}}" opacity="{{backdrop}}"/><text id="typed" x="{{left}}" y="{{base}}" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}" xml:space="preserve">{{text}}</text><text id="caret" x="{{end}}" y="{{base}}" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}" opacity="0">\u258C</text></svg>`,
     animate: [
-      { id: "typed", write: "{{text}}", caret: "\u258C", ms: n10("typing"), ease: "linear" },
+      { id: "typed", write: "{{text}}", caret: "\u258C", ms: n11("typing"), ease: "linear" },
       // Hidden while the writer shows its own caret, then blinking where it stopped.
-      ...holds("caret", "opacity", [[0, 0], ...Array.from({ length: BLINKS }, (_, k) => [n10(`blink${k}`), k % 2 ? 0 : 1])])
+      ...holds("caret", "opacity", [[0, 0], ...Array.from({ length: BLINKS }, (_, k) => [n11(`blink${k}`), k % 2 ? 0 : 1])])
     ]
   }
 };
@@ -20865,8 +21751,8 @@ var scrambleText = {
     svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='ACCESS GRANTED' label='Text'}} {{glyphs: text default='ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&@$*+' label='Scramble glyphs'}} {{background: color default=#05070D label='Background'}} {{ink: color default=#E2E8F0 label='Text colour'}} {{accent: color default=#22D3EE label='Accent'}} {{pace: float min=20 max=250 default=70 step=5 label='Ms per letter'}} {{glow: float min=0 max=6 default=2 step=0.5 label='Glow'}} ${typeface(MONO, 700)} --><defs><filter id="glow" x="-20%" y="-50%" width="140%" height="200%"><feGaussianBlur stdDeviation="{{glowWide}}" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><text id="word" x="200" y="{{base}}" text-anchor="middle" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}" filter="url(#glow)" xml:space="preserve">{{text}}</text><rect id="bar" x="{{barX}}" y="{{barY}}" width="0" height="3" fill="{{accent}}"/></svg>`,
     animate: [
       // Pure noise for a moment (the scramble runs before the change starts), then it decodes.
-      { id: "word", write: "{{text}}", scramble: "{{glyphs}}", delay: 500, ms: n10("decode"), ease: "linear" },
-      { id: "bar", attrs: { width: [0, n10("barW")] }, delay: 500, ms: n10("decode"), ease: "linear" }
+      { id: "word", write: "{{text}}", scramble: "{{glyphs}}", delay: 500, ms: n11("decode"), ease: "linear" },
+      { id: "bar", attrs: { width: [0, n11("barW")] }, delay: 500, ms: n11("decode"), ease: "linear" }
     ]
   }
 };
@@ -20923,13 +21809,13 @@ var kineticStagger = {
         {
           id: `l${i}`,
           attrs: { transform: [`translate({{x${i}}} {{drop}}) rotate(-28) scale(0.3)`, `translate({{x${i}}} {{rise}}) rotate(5) scale(1.12)`], opacity: [0, 1] },
-          delay: n10(`d${i}`),
+          delay: n11(`d${i}`),
           ms: 380,
           ease: "out"
         },
-        { id: `l${i}`, attrs: { transform: [`translate({{x${i}}} {{rise}}) rotate(5) scale(1.12)`, `translate({{x${i}}} {{base}}) rotate(0) scale(1)`] }, delay: n10(`e${i}`), ms: 260, ease: "in-out" }
+        { id: `l${i}`, attrs: { transform: [`translate({{x${i}}} {{rise}}) rotate(5) scale(1.12)`, `translate({{x${i}}} {{base}}) rotate(0) scale(1)`] }, delay: n11(`e${i}`), ms: 260, ease: "in-out" }
       ]).flat(),
-      { id: "line", attrs: { width: [0, n10("lineW")] }, delay: n10("lineAt"), ms: 500, ease: "in-out" }
+      { id: "line", attrs: { width: [0, n11("lineW")] }, delay: n11("lineAt"), ms: 500, ease: "in-out" }
     ]
   }
 };
@@ -21001,7 +21887,7 @@ var strokeDrawText = {
     svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='Draw' label='Text'}} {{background: color default=#FFFBF5 label='Background'}} {{outline: color default=#1E293B label='Outline'}} {{fill: color default=#F97316 label='Fill'}} {{width: float min=0.5 max=6 default=2 step=0.5 label='Outline width'}} {{fillOpacity: float min=0 max=1 default=1 label='Fill opacity'}} ${typeface(HEAVY2, 900)} --><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><text id="word" x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{fill}}" fill-opacity="0" stroke="{{outline}}" stroke-width="{{width}}" stroke-linejoin="round" stroke-dasharray="0 {{dash}}">{{text}}</text></svg>`,
     animate: [
       { id: "word", attrs: { "stroke-dasharray": ["0 {{dash}}", "{{dash}} 0"] }, ms: 2e3, ease: "in-out" },
-      { id: "word", attrs: { "fill-opacity": [0, n10("fillOpacity")] }, delay: 1500, ms: 700, ease: "out" }
+      { id: "word", attrs: { "fill-opacity": [0, n11("fillOpacity")] }, delay: 1500, ms: 700, ease: "out" }
     ]
   }
 };
@@ -21033,7 +21919,7 @@ var splitReveal = {
   motion: (() => {
     const word = `<text x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}">{{text}}</text>`;
     return {
-      svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='Chapter One' label='Text'}} {{caption: text default='The beginning' label='Caption'}} {{background: color default=#0F172A label='Background'}} {{ink: color default=#F8FAFC label='Text colour'}} {{line: color default=#38BDF8 label='Line'}} ${typeface(SANS7, 800)} --><defs><clipPath id="above"><rect x="-5000" y="-5000" width="10400" height="5100"/></clipPath><clipPath id="below"><rect x="-5000" y="100" width="10400" height="5100"/></clipPath></defs><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><g clip-path="url(#above)"><g id="top" transform="translate(0 {{shift}})">${word}</g></g><g clip-path="url(#below)"><g id="bottom" transform="translate(0 -{{shift}})">${word}</g></g><path id="line" d="M{{lineX1}} 100 H{{lineX2}}" stroke="{{line}}" stroke-width="2.5" stroke-linecap="round"/><text id="caption" x="200" y="{{captionY}}" text-anchor="middle" font-family="{{font}}" font-size="13" letter-spacing="3" fill="{{ink}}" opacity="0">{{caption}}</text></svg>`,
+      svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='Chapter One' label='Text'}} {{caption: text default='The beginning' label='Caption'}} {{background: color default=#0F172A label='Background'}} {{ink: color default=#F8FAFC label='Text colour'}} {{line: color default=#38BDF8 label='Line'}} ${typeface(SANS8, 800)} --><defs><clipPath id="above"><rect x="-5000" y="-5000" width="10400" height="5100"/></clipPath><clipPath id="below"><rect x="-5000" y="100" width="10400" height="5100"/></clipPath></defs><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><g clip-path="url(#above)"><g id="top" transform="translate(0 {{shift}})">${word}</g></g><g clip-path="url(#below)"><g id="bottom" transform="translate(0 -{{shift}})">${word}</g></g><path id="line" d="M{{lineX1}} 100 H{{lineX2}}" stroke="{{line}}" stroke-width="2.5" stroke-linecap="round"/><text id="caption" x="200" y="{{captionY}}" text-anchor="middle" font-family="{{font}}" font-size="13" letter-spacing="3" fill="{{ink}}" opacity="0">{{caption}}</text></svg>`,
       animate: [
         { id: "line", draw: true, ms: 600, ease: "in-out" },
         { id: "top", attrs: { transform: ["translate(0 {{shift}})", "translate(0 0)"] }, delay: 450, ms: 800, ease: "out" },
@@ -21076,7 +21962,7 @@ var highlighter = {
     };
   },
   motion: {
-    svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='Ship it faster' label='Phrase'}} {{background: color default=#FFFFFF label='Background'}} {{ink: color default=#111827 label='Text colour'}} {{marker: color default=#FDE047 label='Marker'}} ${typeface(SANS7, 700)} --><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><g transform="rotate(-1.2 200 100)" opacity="0.9"><path id="swipe" d="{{swipe}}" fill="none" stroke="{{marker}}" stroke-width="{{thick}}"/><path id="ragged" d="{{ragged}}" fill="none" stroke="{{marker}}" stroke-width="{{thin}}" stroke-linecap="round"/></g><text id="phrase" x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}" opacity="0">{{text}}</text></svg>`,
+    svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='Ship it faster' label='Phrase'}} {{background: color default=#FFFFFF label='Background'}} {{ink: color default=#111827 label='Text colour'}} {{marker: color default=#FDE047 label='Marker'}} ${typeface(SANS8, 700)} --><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><g transform="rotate(-1.2 200 100)" opacity="0.9"><path id="swipe" d="{{swipe}}" fill="none" stroke="{{marker}}" stroke-width="{{thick}}"/><path id="ragged" d="{{ragged}}" fill="none" stroke="{{marker}}" stroke-width="{{thin}}" stroke-linecap="round"/></g><text id="phrase" x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}" opacity="0">{{text}}</text></svg>`,
     animate: [
       { id: "phrase", attrs: { opacity: [0, 1] }, ms: 300, ease: "out" },
       { id: "swipe", draw: true, delay: 350, ms: 650, ease: "in-out" },
@@ -21134,15 +22020,15 @@ var wordCycle = {
     };
   },
   motion: {
-    svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{prefix: text default='We build' label='Lead-in'}} {{word1: text default=apps label='Word 1'}} {{word2: text default=brands label='Word 2'}} {{word3: text default=websites label='Word 3'}} {{word4: text default=games label='Word 4'}} {{background: color default=#FFFFFF label='Background'}} {{ink: color default=#0F172A label='Text colour'}} {{accent: color default=#6366F1 label='Accent'}} ${typeface(SANS7, 700)} --><defs><clipPath id="window"><rect x="{{clipX}}" y="{{clipY}}" width="{{clipW}}" height="{{clipH}}"/></clipPath></defs><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><text x="{{px}}" y="{{base}}" textLength="{{plen}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}">{{prefix}}</text><g clip-path="url(#window)"><g id="reel" transform="translate(0 -0)">${Array.from(
+    svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{prefix: text default='We build' label='Lead-in'}} {{word1: text default=apps label='Word 1'}} {{word2: text default=brands label='Word 2'}} {{word3: text default=websites label='Word 3'}} {{word4: text default=games label='Word 4'}} {{background: color default=#FFFFFF label='Background'}} {{ink: color default=#0F172A label='Text colour'}} {{accent: color default=#6366F1 label='Accent'}} ${typeface(SANS8, 700)} --><defs><clipPath id="window"><rect x="{{clipX}}" y="{{clipY}}" width="{{clipW}}" height="{{clipH}}"/></clipPath></defs><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><text x="{{px}}" y="{{base}}" textLength="{{plen}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}">{{prefix}}</text><g clip-path="url(#window)"><g id="reel" transform="translate(0 -0)">${Array.from(
       { length: CYCLE_WORDS + 1 },
       (_, k) => `<text x="{{wx}}" y="{{y${k}}}" textLength="{{len${k}}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{bold}}" fill="{{accent}}">{{w${k % CYCLE_WORDS}}}</text>`
     ).join("")}</g></g><rect id="under" x="{{wx}}" y="{{underY}}" width="{{len0}}" height="4" rx="2" fill="{{accent}}"/></svg>`,
     animate: Array.from({ length: CYCLE_WORDS }, (_, i) => {
-      const at3 = { delay: (i + 1) * SHOW_MS + i * ROLL_MS, ms: ROLL_MS, ease: "in-out" };
+      const at4 = { delay: (i + 1) * SHOW_MS + i * ROLL_MS, ms: ROLL_MS, ease: "in-out" };
       return [
-        { id: "reel", attrs: { transform: [`translate(0 -{{o${i}}})`, `translate(0 -{{o${i + 1}}})`] }, ...at3 },
-        { id: "under", attrs: { width: [n10(`len${i}`), n10(`len${i + 1}`)] }, ...at3 }
+        { id: "reel", attrs: { transform: [`translate(0 -{{o${i}}})`, `translate(0 -{{o${i + 1}}})`] }, ...at4 },
+        { id: "under", attrs: { width: [n11(`len${i}`), n11(`len${i + 1}`)] }, ...at4 }
       ];
     }).flat()
   }
@@ -21267,7 +22153,7 @@ var extrudedText = {
     const { size, length, left } = fit5(String(v.text), room(v, 320), 96);
     const d = 0.36 * Number(v.depth);
     const step = size * 0.03 * Number(v.depth);
-    const at3 = (deg, i) => {
+    const at4 = (deg, i) => {
       const a = deg * Math.PI / 180;
       return `translate(${r110(Math.cos(a) * step * i)} ${r110(Math.sin(a) * step * i)})`;
     };
@@ -21281,8 +22167,8 @@ var extrudedText = {
           const i = LAYERS - k;
           return [
             [`fill${i}`, mixHex3(v.side, v.shade, i / LAYERS)],
-            [`a${i}`, at3(EXTRUDE_FROM, i)],
-            [`b${i}`, at3(EXTRUDE_TO, i)]
+            [`a${i}`, at4(EXTRUDE_FROM, i)],
+            [`b${i}`, at4(EXTRUDE_TO, i)]
           ];
         }).flat()
       )
@@ -21315,6 +22201,1216 @@ var textEffects = [
   extrudedText
 ];
 
+// src/catalog/broadcast.ts
+var r211 = (v) => Math.round(v * 100) / 100;
+var r111 = (v) => Math.round(v * 10) / 10;
+var n12 = (name) => `{{${name}}}`;
+var SANS9 = `'Inter', 'Helvetica Neue', Arial, system-ui, sans-serif`;
+function fit6(text, width, max) {
+  const em = Math.max(0.6, textWidthEm(String(text ?? "")));
+  const size = Math.min(max, width / em);
+  return { size: r111(size), width: r111(em * size) };
+}
+var ms = (seconds) => Math.round(Math.max(0, Number(seconds) || 0) * 1e3);
+var holdControl = (seconds, label = "Hold (s)") => `{{hold: float min=0.5 max=20 default=${seconds} step=0.5 label='${label}'}}`;
+var after = (k) => n12(`out${k}`);
+function outTimes(motion, start) {
+  const out = {};
+  for (const [, k] of JSON.stringify(motion).matchAll(/\{\{out(\d+)\}\}/g)) out[`out${k}`] = Math.round(start + Number(k));
+  return out;
+}
+var holds2 = (id, attr, keys2) => keys2.map(([delay, value]) => ({ id, attrs: { [attr]: [value, value] }, delay, ms: 0 }));
+function pop(id, delay, over = 1.12, ms2 = 300) {
+  return [
+    { id, attrs: { transform: ["scale(0)", `scale(${over})`] }, delay, ms: ms2, ease: "out" },
+    { id, attrs: { transform: [`scale(${over})`, "scale(1)"] }, delay: delay + ms2, ms: 160, ease: "in-out" }
+  ];
+}
+var MARK = "M12 1.5 L21.5 7 V17 L12 22.5 L2.5 17 V7 Z M12 6.5 L7 9.4 V14.6 L12 17.5 L17 14.6 V9.4 Z";
+var NUMBER2 = /-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?/gi;
+function placeMark(d, box2, fallback = MARK) {
+  for (const path of [String(d ?? ""), fallback]) {
+    let nums;
+    try {
+      nums = (morphSequence([path], { points: 128 })[0].match(NUMBER2) ?? []).map(Number);
+    } catch {
+      continue;
+    }
+    const xs = nums.filter((_, i) => i % 2 === 0);
+    const ys = nums.filter((_, i) => i % 2 === 1);
+    const [x0, x1, y0, y1] = [Math.min(...xs), Math.max(...xs), Math.min(...ys), Math.max(...ys)];
+    const [w, h] = [x1 - x0, y1 - y0];
+    if (![x0, x1, y0, y1].every(Number.isFinite) || Math.max(w, h) < 1e-6) continue;
+    const s = Math.min(box2[2] / Math.max(w, 1e-6), box2[3] / Math.max(h, 1e-6));
+    const ox = box2[0] + (box2[2] - w * s) / 2;
+    const oy = box2[1] + (box2[3] - h * s) / 2;
+    return { d: path, transform: `translate(${r211(ox)} ${r211(oy)}) scale(${+s.toPrecision(4)}) translate(${r211(-x0)} ${r211(-y0)})`, scale: s };
+  }
+  return { d: fallback, transform: "", scale: 1 };
+}
+var markControl = (label = "Logo path") => `{{logo: text default='${MARK}' label='${label}'}}`;
+var lowerThirdMotion = {
+  svg: `<svg viewBox="0 0 1920 1080"><!-- {{name: text default='Ada Lovelace' label='Name'}} {{title: text default='Mathematician and writer' label='Title'}} {{plate: color default=#0F2742 label='Name bar'}} {{ink: color default=#FFFFFF label='Name colour'}} {{accent: color default=#3B82F6 label='Accent stripe'}} {{titlePlate: color default=#FFFFFF label='Title bar'}} {{titleInk: color default=#0F2742 label='Title colour'}} {{plateOpacity: float min=0 max=1 default=1 step=0.05 label='Bar opacity'}} {{skew: float min=-20 max=20 default=0 step=1 label='Slant'}} {{shadow: float min=0 max=1 default=0.35 step=0.05 label='Shadow'}} ${holdControl(3)} {{font: text default="${SANS9}" label='Font'}} --><defs><clipPath id="lowerThirdNameClip"><rect x="206" y="792" width="1600" height="96"/></clipPath><clipPath id="lowerThirdTitleClip"><rect x="206" y="888" width="1600" height="60"/></clipPath><filter id="lowerThirdShadow" x="-10%" y="-40%" width="120%" height="180%"><feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#000000" flood-opacity="{{shadow}}"/></filter></defs><g transform="translate(192 870) skewX({{skew}}) translate(-192 -870)" filter="url(#lowerThirdShadow)"><rect id="lowerThirdNameBar" x="206" y="792" width="0" height="96" fill="{{plate}}" fill-opacity="{{plateOpacity}}"/><rect id="lowerThirdTitleBar" x="206" y="888" width="0" height="60" fill="{{titlePlate}}" fill-opacity="{{plateOpacity}}"/><g clip-path="url(#lowerThirdNameClip)"><text id="lowerThirdName" x="238" y="{{nameBase}}" transform="translate({{nameHide}} 0)" font-family="{{font}}" font-size="{{nameSize}}" font-weight="700" textLength="{{nameW}}" lengthAdjust="spacingAndGlyphs" fill="{{ink}}">{{name}}</text></g><g clip-path="url(#lowerThirdTitleClip)"><text id="lowerThirdTitle" x="230" y="{{titleBase}}" transform="translate({{titleHide}} 0)" font-family="{{font}}" font-size="{{titleSize}}" font-weight="500" textLength="{{titleW}}" lengthAdjust="spacingAndGlyphs" fill="{{titleInk}}">{{title}}</text></g><rect id="lowerThirdStripe" x="192" y="870" width="14" height="0" fill="{{accent}}"/></g></svg>`,
+  animate: [
+    { id: "lowerThirdStripe", attrs: { y: [870, 792], height: [0, 156] }, ms: 350, ease: "out" },
+    { id: "lowerThirdNameBar", attrs: { width: [0, n12("nameBar")] }, delay: 150, ms: 500, ease: "out" },
+    { id: "lowerThirdName", attrs: { transform: ["translate({{nameHide}} 0)", "translate(0 0)"] }, delay: 300, ms: 550, ease: "out" },
+    { id: "lowerThirdTitleBar", attrs: { width: [0, n12("titleBar")] }, delay: 400, ms: 450, ease: "out" },
+    { id: "lowerThirdTitle", attrs: { transform: ["translate({{titleHide}} 0)", "translate(0 0)"] }, delay: 500, ms: 500, ease: "out" },
+    { id: "lowerThirdName", attrs: { transform: ["translate(0 0)", "translate({{nameHide}} 0)"] }, delay: after(0), ms: 400 },
+    { id: "lowerThirdTitle", attrs: { transform: ["translate(0 0)", "translate({{titleHide}} 0)"] }, delay: after(80), ms: 400 },
+    { id: "lowerThirdTitleBar", attrs: { width: [n12("titleBar"), 0] }, delay: after(250), ms: 400 },
+    { id: "lowerThirdNameBar", attrs: { width: [n12("nameBar"), 0] }, delay: after(300), ms: 400 },
+    { id: "lowerThirdStripe", attrs: { y: [792, 870], height: [156, 0] }, delay: after(650), ms: 300 }
+  ]
+};
+var lowerThird = {
+  kind: "vector",
+  id: "lower-third",
+  name: "Lower third",
+  description: "A name bar and a title bar sliding out from an accent stripe in the lower left, holding, then sliding back.",
+  category: "broadcast",
+  tags: ["broadcast", "lower-third", "name", "caption", "title", "news", "overlay"],
+  hold: 300,
+  presets: [
+    { name: "Corporate", values: { plate: [0.06, 0.15, 0.26], accent: [0.23, 0.51, 0.96], titlePlate: [1, 1, 1], titleInk: [0.06, 0.15, 0.26] } },
+    { name: "News", values: { plate: [0.73, 0.11, 0.11], accent: [0.98, 0.8, 0.08], titlePlate: [0.07, 0.09, 0.15], titleInk: [1, 1, 1] } },
+    { name: "Sport", values: { plate: [0.07, 0.07, 0.07], accent: [0.64, 0.9, 0.21], titlePlate: [0.64, 0.9, 0.21], titleInk: [0.07, 0.07, 0.07], skew: -12 } },
+    { name: "Minimal", values: { plateOpacity: 0, accent: [1, 1, 1], titleInk: [1, 1, 1], shadow: 0.7 } }
+  ],
+  derived: (v) => {
+    const name = fit6(v.name, 1380, 56);
+    const title = fit6(v.title, 1380, 32);
+    return {
+      ...outTimes(lowerThirdMotion, 1e3 + ms(v.hold)),
+      nameSize: name.size,
+      nameW: name.width,
+      nameBase: r111(840 + name.size * 0.35),
+      nameBar: r111(name.width + 64),
+      nameHide: -r111(name.width + 80),
+      titleSize: title.size,
+      titleW: title.width,
+      titleBase: r111(918 + title.size * 0.35),
+      titleBar: r111(title.width + 48),
+      titleHide: -r111(title.width + 60)
+    };
+  },
+  motion: lowerThirdMotion
+};
+var lowerThirdStackedMotion = {
+  svg: `<svg viewBox="0 0 1920 1080"><!-- {{name: text default='Grace Hopper' label='Name'}} {{title: text default='Rear Admiral \xB7 Computer scientist' label='Title'}} ${markControl()} {{plate: color default=#FFFFFF label='Panel'}} {{ink: color default=#111827 label='Name colour'}} {{titleInk: color default=#4B5563 label='Title colour'}} {{accent: color default=#7C3AED label='Logo tile'}} {{logoInk: color default=#FFFFFF label='Logo colour'}} {{corner: float min=0 max=40 default=10 step=1 label='Corner radius'}} {{shadow: float min=0 max=1 default=0.3 step=0.05 label='Shadow'}} ${holdControl(3)} {{font: text default="${SANS9}" label='Font'}} --><defs><clipPath id="lowerThirdStackedNameClip"><rect x="360" y="792" width="1400" height="76"/></clipPath><clipPath id="lowerThirdStackedTitleClip"><rect x="360" y="868" width="1400" height="68"/></clipPath><filter id="lowerThirdStackedShadow" x="-10%" y="-40%" width="120%" height="180%"><feDropShadow dx="0" dy="8" stdDeviation="12" flood-color="#000000" flood-opacity="{{shadow}}"/></filter></defs><g filter="url(#lowerThirdStackedShadow)"><rect id="lowerThirdStackedPanel" x="340" y="792" width="0" height="144" rx="{{corner}}" fill="{{plate}}"/><g clip-path="url(#lowerThirdStackedNameClip)"><text id="lowerThirdStackedName" x="396" y="{{nameBase}}" transform="translate(0 80)" font-family="{{font}}" font-size="{{nameSize}}" font-weight="700" textLength="{{nameW}}" lengthAdjust="spacingAndGlyphs" fill="{{ink}}">{{name}}</text></g><line id="lowerThirdStackedRule" x1="396" y1="868" x2="{{ruleEnd}}" y2="868" stroke="{{accent}}" stroke-width="3" stroke-opacity="0.6"/><g clip-path="url(#lowerThirdStackedTitleClip)"><text id="lowerThirdStackedTitle" x="396" y="{{titleBase}}" transform="translate(0 70)" font-family="{{font}}" font-size="{{titleSize}}" font-weight="500" textLength="{{titleW}}" lengthAdjust="spacingAndGlyphs" fill="{{titleInk}}">{{title}}</text></g><g transform="translate(276 864)"><g id="lowerThirdStackedTile" transform="scale(0)"><rect x="-84" y="-84" width="168" height="168" rx="{{corner}}" fill="{{accent}}"/><path d="{{markD}}" transform="{{markT}}" fill="{{logoInk}}" fill-rule="evenodd"/></g></g></g></svg>`,
+  animate: [
+    ...pop("lowerThirdStackedTile", 0, 1.12),
+    { id: "lowerThirdStackedPanel", attrs: { width: [0, n12("panel")] }, delay: 300, ms: 550, ease: "out" },
+    { id: "lowerThirdStackedName", attrs: { transform: ["translate(0 80)", "translate(0 0)"] }, delay: 550, ms: 450, ease: "out" },
+    { id: "lowerThirdStackedRule", draw: true, delay: 650, ms: 450, ease: "out" },
+    { id: "lowerThirdStackedTitle", attrs: { transform: ["translate(0 70)", "translate(0 0)"] }, delay: 700, ms: 450, ease: "out" },
+    { id: "lowerThirdStackedTitle", attrs: { transform: ["translate(0 0)", "translate(0 70)"] }, delay: after(0), ms: 350 },
+    { id: "lowerThirdStackedName", attrs: { transform: ["translate(0 0)", "translate(0 80)"] }, delay: after(80), ms: 350 },
+    { id: "lowerThirdStackedRule", draw: [1, 0], delay: after(100), ms: 300 },
+    { id: "lowerThirdStackedPanel", attrs: { width: [n12("panel"), 0] }, delay: after(300), ms: 450 },
+    { id: "lowerThirdStackedTile", attrs: { transform: ["scale(1)", "scale(0)"] }, delay: after(650), ms: 300 }
+  ]
+};
+var lowerThirdStacked = {
+  kind: "vector",
+  id: "lower-third-stacked",
+  name: "Stacked lower third",
+  description: "A logo tile popping in, then a panel sliding out from behind it with a name over a title, divided by a drawn rule.",
+  category: "broadcast",
+  tags: ["broadcast", "lower-third", "name", "logo", "caption", "overlay"],
+  hold: 300,
+  presets: [
+    { name: "Clean", values: { plate: [1, 1, 1], ink: [0.07, 0.09, 0.15], accent: [0.49, 0.23, 0.93] } },
+    { name: "Night", values: { plate: [0.07, 0.09, 0.15], ink: [1, 1, 1], titleInk: [0.62, 0.66, 0.75], accent: [0.13, 0.83, 0.93], logoInk: [0.07, 0.09, 0.15] } },
+    { name: "News", values: { plate: [1, 1, 1], ink: [0.07, 0.07, 0.07], accent: [0.8, 0.1, 0.12], corner: 0 } }
+  ],
+  derived: (v) => {
+    const name = fit6(v.name, 1300, 52);
+    const title = fit6(v.title, 1300, 30);
+    const mark = placeMark(v.logo, [-52, -52, 104, 104]);
+    const inner = Math.max(name.width, title.width, 160);
+    return {
+      ...outTimes(lowerThirdStackedMotion, 1150 + ms(v.hold)),
+      nameSize: name.size,
+      nameW: name.width,
+      nameBase: r111(834 + name.size * 0.35),
+      titleSize: title.size,
+      titleW: title.width,
+      titleBase: r111(902 + title.size * 0.35),
+      ruleEnd: r111(396 + inner),
+      panel: r111(inner + 92),
+      markD: mark.d,
+      markT: mark.transform
+    };
+  },
+  motion: lowerThirdStackedMotion
+};
+var titleCardMotion = {
+  svg: `<svg viewBox="0 0 1920 1080"><!-- {{title: text default='The Long Way Home' label='Title'}} {{subtitle: text default='A film about getting there' label='Subtitle'}} {{background: color default=#0B1020 label='Background'}} {{ink: color default=#F8FAFC label='Title colour'}} {{muted: color default=#94A3B8 label='Subtitle colour'}} {{accent: color default=#F59E0B label='Accent'}} {{wipe: bool default=true label='Wipe out (else fade)'}} ${holdControl(3)} {{font: text default="${SANS9}" label='Font'}} --><defs><radialGradient id="titleCardGlow" cx="0.5" cy="0.5" r="0.6"><stop offset="0" stop-color="{{accent}}" stop-opacity="0.18"/><stop offset="1" stop-color="{{accent}}" stop-opacity="0"/></radialGradient></defs><rect width="1920" height="1080" fill="{{background}}"/><rect width="1920" height="1080" fill="url(#titleCardGlow)"/><g id="titleCardAll" opacity="1"><g id="titleCardTitle" opacity="0" transform="translate(0 40)"><text x="960" y="{{titleBase}}" text-anchor="middle" font-family="{{font}}" font-size="{{titleSize}}" font-weight="800" textLength="{{titleW}}" lengthAdjust="spacingAndGlyphs" fill="{{ink}}">{{title}}</text></g><line id="titleCardLineL" x1="960" y1="{{lineY}}" x2="{{lineL}}" y2="{{lineY}}" stroke="{{accent}}" stroke-width="5" stroke-linecap="round"/><line id="titleCardLineR" x1="960" y1="{{lineY}}" x2="{{lineR}}" y2="{{lineY}}" stroke="{{accent}}" stroke-width="5" stroke-linecap="round"/><g id="titleCardSubtitle" opacity="0" transform="translate(0 30)"><text x="960" y="{{subBase}}" text-anchor="middle" font-family="{{font}}" font-size="{{subSize}}" font-weight="400" letter-spacing="1" textLength="{{subW}}" lengthAdjust="spacingAndGlyphs" fill="{{muted}}">{{subtitle}}</text></g></g><g id="titleCardWipe" transform="translate(-2000 0)"><rect x="0" y="0" width="1920" height="1080" fill="{{background}}"/><rect x="1920" y="0" width="80" height="1080" fill="{{accent}}"/></g></svg>`,
+  animate: [
+    { id: "titleCardTitle", attrs: { opacity: [0, 1], transform: ["translate(0 40)", "translate(0 0)"] }, ms: 800, ease: "out" },
+    { id: "titleCardLineL", draw: true, delay: 450, ms: 650, ease: "in-out" },
+    { id: "titleCardLineR", draw: true, delay: 450, ms: 650, ease: "in-out" },
+    { id: "titleCardSubtitle", attrs: { opacity: [0, 1], transform: ["translate(0 30)", "translate(0 0)"] }, delay: 750, ms: 700, ease: "out" },
+    { id: "titleCardWipe", attrs: { transform: ["translate(-2000 0)", "translate({{wipeTo}} 0)"] }, delay: after(0), ms: 700 },
+    { id: "titleCardAll", attrs: { opacity: [1, n12("fadeTo")] }, delay: after(0), ms: 700 }
+  ]
+};
+var titleCard = {
+  kind: "vector",
+  id: "title-card",
+  name: "Title card",
+  description: "A big centred title rising in, a line drawing out from the middle beneath it and a subtitle following, then a wipe or fade out.",
+  category: "broadcast",
+  tags: ["broadcast", "title", "card", "intro", "headline", "film"],
+  hold: 300,
+  presets: [
+    { name: "Cinema", values: { background: [0.02, 0.02, 0.03], ink: [0.96, 0.88, 0.7], accent: [0.85, 0.65, 0.25], muted: [0.6, 0.56, 0.5] } },
+    { name: "Clean", values: { background: [0.98, 0.98, 0.97], ink: [0.07, 0.09, 0.15], muted: [0.4, 0.45, 0.52], accent: [0.15, 0.39, 0.92], wipe: false } },
+    { name: "News", values: { background: [0.04, 0.09, 0.2], ink: [1, 1, 1], muted: [0.75, 0.8, 0.9], accent: [0.86, 0.15, 0.15] } },
+    { name: "Sport", values: { background: [0.05, 0.05, 0.05], ink: [1, 1, 1], muted: [0.64, 0.9, 0.21], accent: [0.64, 0.9, 0.21] } }
+  ],
+  derived: (v) => {
+    const title = fit6(v.title, 1440, 132);
+    const sub = fit6(v.subtitle, 1200, 46);
+    const titleBase = title.size * 0.72;
+    const lineY = titleBase + title.size * 0.25 + 36;
+    const subBase = lineY + 40 + sub.size * 0.75;
+    const shift = 540 - (subBase + sub.size * 0.25) / 2;
+    const half = Math.min(600, Math.max(140, Math.max(title.width, sub.width) * 0.3));
+    return {
+      ...outTimes(titleCardMotion, 1450 + ms(v.hold)),
+      titleSize: title.size,
+      titleW: title.width,
+      titleBase: r111(titleBase + shift),
+      subSize: sub.size,
+      subW: sub.width,
+      subBase: r111(subBase + shift),
+      lineY: r111(lineY + shift),
+      lineL: r111(960 - half),
+      lineR: r111(960 + half),
+      wipeTo: v.wipe ? 0 : -2e3,
+      fadeTo: v.wipe ? 1 : 0
+    };
+  },
+  motion: titleCardMotion
+};
+var lockupText = (id, extra = "") => `<text${id ? ` id="${id}"` : ""} x="{{wordX}}" y="{{wordBase}}" font-family="{{font}}" font-size="{{wordSize}}" font-weight="800" textLength="{{wordW}}" lengthAdjust="spacingAndGlyphs"${extra}>{{word}}</text>`;
+function lockup(v, mark, gap, maxWidth, maxSize) {
+  const word = fit6(v.word, maxWidth, maxSize);
+  const total = mark + gap + word.width;
+  const left = 960 - total / 2;
+  const placed2 = placeMark(v.logo, [left, 540 - mark / 2, mark, mark]);
+  return {
+    left: r111(left),
+    right: r111(left + total),
+    wordX: r111(left + mark + gap),
+    wordBase: r111(540 + word.size * 0.36),
+    wordSize: word.size,
+    wordW: word.width,
+    markD: placed2.d,
+    markT: placed2.transform,
+    scale: placed2.scale
+  };
+}
+var logoRevealMotion = {
+  svg: `<svg viewBox="0 0 1920 1080"><!-- {{word: text default='Northwind' label='Wordmark'}} {{tagline: text default='Built to move' label='Tagline'}} ${markControl()} {{background: color default=#0A0A0F label='Background'}} {{markColor: color default=#22D3EE label='Mark colour'}} {{ink: color default=#FFFFFF label='Wordmark colour'}} {{muted: color default=#94A3B8 label='Tagline colour'}} {{shine: float min=0 max=1 default=0.7 step=0.05 label='Shine'}} ${holdControl(2)} {{font: text default="${SANS9}" label='Font'}} --><defs><clipPath id="logoRevealWordClip"><rect id="logoRevealWordWipe" x="{{wipeX}}" y="300" width="0" height="480"/></clipPath><clipPath id="logoRevealShineClip"><path d="{{markD}}" transform="{{markT}}" fill-rule="evenodd"/>${lockupText("")}</clipPath><linearGradient id="logoRevealShineFill" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#FFFFFF" stop-opacity="0"/><stop offset="0.5" stop-color="#FFFFFF" stop-opacity="{{shine}}"/><stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/></linearGradient></defs><rect width="1920" height="1080" fill="{{background}}"/><g id="logoRevealLockup" transform="translate(960 540) scale(1) translate(-960 -540)" opacity="1"><path id="logoRevealMark" d="{{markD}}" transform="{{markT}}" fill="{{markColor}}" fill-opacity="0" fill-rule="evenodd" stroke="{{markColor}}" stroke-width="{{markStroke}}" stroke-linejoin="round"/><g clip-path="url(#logoRevealWordClip)"><g id="logoRevealWord" transform="translate(-60 0)">${lockupText("", ` fill="{{ink}}"`)}</g></g><g clip-path="url(#logoRevealShineClip)"><rect id="logoRevealShine" x="0" y="300" width="240" height="480" fill="url(#logoRevealShineFill)" transform="translate({{shineFrom}} 0) skewX(-20)"/></g><g id="logoRevealTagline" opacity="0" transform="translate(0 20)"><text x="960" y="{{tagBase}}" text-anchor="middle" font-family="{{font}}" font-size="{{tagSize}}" font-weight="500" letter-spacing="2" textLength="{{tagW}}" lengthAdjust="spacingAndGlyphs" fill="{{muted}}">{{tagline}}</text></g></g></svg>`,
+  animate: [
+    { id: "logoRevealMark", draw: true, ms: 1200, ease: "in-out" },
+    { id: "logoRevealMark", attrs: { "fill-opacity": [0, 1] }, delay: 900, ms: 500, ease: "out" },
+    { id: "logoRevealWordWipe", attrs: { width: [0, n12("wipeW")] }, delay: 1e3, ms: 700, ease: "in-out" },
+    { id: "logoRevealWord", attrs: { transform: ["translate(-60 0)", "translate(0 0)"] }, delay: 1e3, ms: 800, ease: "out" },
+    { id: "logoRevealTagline", attrs: { opacity: [0, 1], transform: ["translate(0 20)", "translate(0 0)"] }, delay: 1500, ms: 500, ease: "out" },
+    { id: "logoRevealShine", attrs: { transform: ["translate({{shineFrom}} 0) skewX(-20)", "translate({{shineTo}} 0) skewX(-20)"] }, delay: 1900, ms: 900, ease: "in-out" },
+    { id: "logoRevealLockup", attrs: { transform: ["translate(960 540) scale(1) translate(-960 -540)", "translate(960 540) scale(0.94) translate(-960 -540)"], opacity: [1, 0] }, delay: after(0), ms: 500 }
+  ]
+};
+var logoReveal = {
+  kind: "vector",
+  id: "logo-reveal",
+  name: "Logo reveal",
+  description: "A logo mark tracing its outline on and filling, the wordmark wiping in beside it, a tagline rising, then a shine sweeping across.",
+  category: "broadcast",
+  tags: ["broadcast", "logo", "reveal", "brand", "intro", "draw-on", "shine"],
+  hold: 300,
+  presets: [
+    { name: "Clean", values: { background: [0.98, 0.98, 0.98], markColor: [0.15, 0.39, 0.92], ink: [0.07, 0.09, 0.15], muted: [0.4, 0.45, 0.52], shine: 0.9 } },
+    { name: "Gold", values: { background: [0.03, 0.03, 0.03], markColor: [0.85, 0.65, 0.25], ink: [0.96, 0.88, 0.7] } },
+    { name: "Sport", values: { background: [0.05, 0.05, 0.05], markColor: [0.64, 0.9, 0.21], ink: [1, 1, 1], muted: [0.64, 0.9, 0.21] } }
+  ],
+  derived: (v) => {
+    const l = lockup(v, 200, 56, 1100, 160);
+    const tag = fit6(v.tagline, 1e3, 40);
+    return {
+      ...outTimes(logoRevealMotion, 2800 + ms(v.hold)),
+      ...l,
+      markStroke: r211(4 / l.scale),
+      wipeX: r111(l.wordX - 20),
+      wipeW: r111(l.wordW + 60),
+      shineFrom: r111(l.left - 420),
+      shineTo: r111(l.right + 200),
+      tagSize: tag.size,
+      tagW: tag.width,
+      tagBase: r111(540 + 100 + 60 + tag.size * 0.7)
+    };
+  },
+  motion: logoRevealMotion
+};
+var RAYS = 16;
+var ray = (k) => {
+  const a = (k + 0.5) / RAYS * Math.PI * 2;
+  const [inner, outer] = [210, k % 2 ? 470 : 600];
+  return { x0: r111(960 + Math.cos(a) * inner), y0: r111(540 + Math.sin(a) * inner * 0.8), x1: r111(960 + Math.cos(a) * outer), y1: r111(540 + Math.sin(a) * outer * 0.8) };
+};
+var logoStingMotion = {
+  svg: `<svg viewBox="0 0 1920 1080"><!-- {{word: text default='BOLT' label='Wordmark'}} ${markControl()} {{background: color default=#111111 label='Background'}} {{accent: color default=#FACC15 label='Burst'}} {{markColor: color default=#FACC15 label='Mark colour'}} {{ink: color default=#FFFFFF label='Wordmark colour'}} {{flash: float min=0 max=1 default=0.5 step=0.05 label='Flash'}} ${holdControl(1.5)} {{font: text default="${SANS9}" label='Font'}} --><rect width="1920" height="1080" fill="{{background}}"/><circle id="logoStingRing" cx="960" cy="540" r="40" fill="none" stroke="{{accent}}" stroke-width="30" opacity="0"/><g stroke="{{accent}}" stroke-width="10" stroke-linecap="butt">${Array.from({ length: RAYS }, (_, k) => {
+    const p = ray(k);
+    return `<line id="logoStingRay${k}" x1="${p.x0}" y1="${p.y0}" x2="${p.x0}" y2="${p.y0}"/>`;
+  }).join("")}</g><g transform="translate(960 540)"><g id="logoStingPop" transform="scale(0)"><g transform="translate(-960 -540)"><path d="{{markD}}" transform="{{markT}}" fill="{{markColor}}" fill-rule="evenodd"/>${lockupText("", ` fill="{{ink}}"`)}</g></g></g><rect id="logoStingFlash" width="1920" height="1080" fill="#FFFFFF" opacity="0"/></svg>`,
+  animate: [
+    ...pop("logoStingPop", 80, 1.18, 260),
+    { id: "logoStingFlash", attrs: { opacity: [0, n12("flash")] }, delay: 80, ms: 60, ease: "linear" },
+    { id: "logoStingFlash", attrs: { opacity: [n12("flash"), 0] }, delay: 140, ms: 320, ease: "out" },
+    { id: "logoStingRing", attrs: { r: [40, 620], "stroke-width": [30, 0], opacity: [0.9, 0] }, delay: 100, ms: 700, ease: "out" },
+    ...Array.from({ length: RAYS }, (_, k) => {
+      const p = ray(k);
+      const lag = k % 4 * 25;
+      return [
+        { id: `logoStingRay${k}`, attrs: { x2: [p.x0, p.x1], y2: [p.y0, p.y1] }, delay: 120 + lag, ms: 260, ease: "out" },
+        { id: `logoStingRay${k}`, attrs: { x1: [p.x0, p.x1], y1: [p.y0, p.y1] }, delay: 300 + lag, ms: 300, ease: "out" }
+      ];
+    }).flat(),
+    { id: "logoStingPop", attrs: { transform: ["scale(1)", "scale(1.06)"] }, delay: after(0), ms: 140, ease: "out" },
+    { id: "logoStingPop", attrs: { transform: ["scale(1.06)", "scale(0)"] }, delay: after(140), ms: 260 }
+  ]
+};
+var logoSting = {
+  kind: "vector",
+  id: "logo-sting",
+  name: "Logo sting",
+  description: "A quick, punchy logo hit: a flash, burst lines and a shock ring firing out as the logo pops in with an overshoot, then snaps away.",
+  category: "broadcast",
+  tags: ["broadcast", "logo", "sting", "brand", "intro", "burst", "punchy"],
+  hold: 200,
+  presets: [
+    { name: "Electric", values: { background: [0.02, 0.03, 0.08], accent: [0.13, 0.83, 0.93], markColor: [0.13, 0.83, 0.93] } },
+    { name: "Clean", values: { background: [1, 1, 1], accent: [0.93, 0.27, 0.27], markColor: [0.93, 0.27, 0.27], ink: [0.07, 0.07, 0.07], flash: 0 } },
+    { name: "Sport", values: { background: [0.05, 0.05, 0.05], accent: [0.64, 0.9, 0.21], markColor: [0.64, 0.9, 0.21] } }
+  ],
+  derived: (v) => ({ ...outTimes(logoStingMotion, 700 + ms(v.hold)), ...lockup(v, 150, 40, 900, 140) }),
+  motion: logoStingMotion
+};
+var tile = (key, cx) => `<g transform="translate(${cx} 500)"><g id="endCardTile${key}" transform="scale(0.85)" opacity="0"><rect x="-320" y="-180" width="640" height="360" rx="24" fill="{{tile}}" stroke="{{ink}}" stroke-opacity="0.25" stroke-width="3"/><circle r="52" fill="{{ink}}" fill-opacity="0.14"/><path d="M-16 -26 L28 0 L-16 26 Z" fill="{{ink}}" fill-opacity="0.85"/></g></g>`;
+var endCardMotion = {
+  svg: `<svg viewBox="0 0 1920 1080"><!-- {{title: text default='Thanks for watching' label='Title'}} {{videoA: text default='Watch next' label='Left video'}} {{videoB: text default='Latest video' label='Right video'}} {{button: text default='Subscribe' label='Button'}} {{background: color default=#0F0F12 label='Background'}} {{tile: color default=#1F2937 label='Video placeholders'}} {{ink: color default=#FFFFFF label='Text colour'}} {{accent: color default=#FF0033 label='Button'}} {{buttonInk: color default=#FFFFFF label='Button text'}} ${holdControl(4)} {{font: text default="${SANS9}" label='Font'}} --><defs><radialGradient id="endCardGlow" cx="0.5" cy="0.35" r="0.7"><stop offset="0" stop-color="{{accent}}" stop-opacity="0.12"/><stop offset="1" stop-color="{{accent}}" stop-opacity="0"/></radialGradient></defs><rect width="1920" height="1080" fill="{{background}}"/><rect width="1920" height="1080" fill="url(#endCardGlow)"/><g id="endCardAll" opacity="1"><g id="endCardTitle" opacity="0" transform="translate(0 -30)"><text x="960" y="{{titleBase}}" text-anchor="middle" font-family="{{font}}" font-size="{{titleSize}}" font-weight="800" textLength="{{titleW}}" lengthAdjust="spacingAndGlyphs" fill="{{ink}}">{{title}}</text></g>${tile("A", 600)}${tile("B", 1320)}<g id="endCardLabels" opacity="0"><text x="600" y="{{labelBase}}" text-anchor="middle" font-family="{{font}}" font-size="{{aSize}}" font-weight="600" textLength="{{aW}}" lengthAdjust="spacingAndGlyphs" fill="{{ink}}">{{videoA}}</text><text x="1320" y="{{labelBase}}" text-anchor="middle" font-family="{{font}}" font-size="{{bSize}}" font-weight="600" textLength="{{bW}}" lengthAdjust="spacingAndGlyphs" fill="{{ink}}">{{videoB}}</text></g><g transform="translate(960 868)"><g id="endCardButton" transform="scale(0)"><rect x="{{buttonX}}" y="-42" width="{{buttonW}}" height="84" rx="42" fill="{{accent}}"/><text y="{{buttonBase}}" text-anchor="middle" font-family="{{font}}" font-size="{{buttonSize}}" font-weight="700" textLength="{{buttonTextW}}" lengthAdjust="spacingAndGlyphs" fill="{{buttonInk}}">{{button}}</text></g></g></g></svg>`,
+  animate: [
+    { id: "endCardTitle", attrs: { opacity: [0, 1], transform: ["translate(0 -30)", "translate(0 0)"] }, ms: 600, ease: "out" },
+    { id: "endCardTileA", attrs: { opacity: [0, 1], transform: ["scale(0.85)", "scale(1)"] }, delay: 300, ms: 550, ease: "out" },
+    { id: "endCardTileB", attrs: { opacity: [0, 1], transform: ["scale(0.85)", "scale(1)"] }, delay: 450, ms: 550, ease: "out" },
+    { id: "endCardLabels", attrs: { opacity: [0, 1] }, delay: 800, ms: 400, ease: "out" },
+    ...pop("endCardButton", 1100, 1.14),
+    { id: "endCardAll", attrs: { opacity: [1, 0] }, delay: after(0), ms: 500 }
+  ]
+};
+var endCard = {
+  kind: "vector",
+  id: "end-card",
+  name: "End card",
+  description: "An outro screen: a thank-you title, two video placeholders scaling in for end-screen links, and a subscribe button that pops.",
+  category: "broadcast",
+  tags: ["broadcast", "end-card", "outro", "youtube", "end-screen", "subscribe"],
+  hold: 300,
+  presets: [
+    { name: "Dark", values: { background: [0.06, 0.06, 0.07], tile: [0.12, 0.16, 0.22] } },
+    { name: "Light", values: { background: [0.97, 0.97, 0.98], tile: [0.89, 0.91, 0.94], ink: [0.07, 0.09, 0.15] } },
+    { name: "Brand", values: { background: [0.15, 0.08, 0.35], tile: [0.24, 0.15, 0.5], accent: [0.98, 0.8, 0.08], buttonInk: [0.1, 0.06, 0.2] } }
+  ],
+  derived: (v) => {
+    const title = fit6(v.title, 1400, 88);
+    const a = fit6(v.videoA, 600, 36);
+    const b = fit6(v.videoB, 600, 36);
+    const button = fit6(v.button, 420, 34);
+    const w = Math.max(220, button.width + 96);
+    return {
+      ...outTimes(endCardMotion, 1600 + ms(v.hold)),
+      titleSize: title.size,
+      titleW: title.width,
+      titleBase: r111(250 + title.size * 0.35),
+      aSize: a.size,
+      aW: a.width,
+      bSize: b.size,
+      bW: b.width,
+      labelBase: r111(735 + Math.max(a.size, b.size) * 0.35),
+      buttonW: r111(w),
+      buttonX: -r111(w / 2),
+      buttonSize: button.size,
+      buttonTextW: button.width,
+      buttonBase: r111(button.size * 0.35)
+    };
+  },
+  motion: endCardMotion
+};
+var COUNT_MAX = 30;
+var COUNT_IN = 300;
+var flipPose = (s) => `translate(960 540) scale(1 ${s}) translate(-960 -540)`;
+var countdownMotion = {
+  svg: `<svg viewBox="0 0 1920 1080"><!-- {{from: int min=1 max=${COUNT_MAX} default=10 label='Count from'}} {{step: float min=0.25 max=3 default=1 step=0.05 label='Seconds per step'}} {{label: text default='Starting in' label='Label'}} {{background: color default=#0B1020 label='Background'}} {{ring: color default=#F43F5E label='Ring'}} {{track: color default=#1E293B label='Ring track'}} {{ink: color default=#FFFFFF label='Number colour'}} ${holdControl(1, "Hold on zero (s)")} {{font: text default="${SANS9}" label='Font'}} --><rect width="1920" height="1080" fill="{{background}}"/><g id="countdownAll" opacity="0" transform="translate(960 540) scale(0.9) translate(-960 -540)"><circle cx="960" cy="520" r="300" fill="none" stroke="{{track}}" stroke-width="28"/><circle id="countdownRing" cx="960" cy="520" r="300" fill="none" stroke="{{ring}}" stroke-width="28" stroke-linecap="round" transform="rotate(-90 960 520)"/><g id="countdownFlip" transform="${flipPose(0)}"><text id="countdownNumber" x="960" y="{{numberBase}}" text-anchor="middle" font-family="{{font}}" font-size="{{numberSize}}" font-weight="800" fill="{{ink}}">{{d0}}</text></g><text x="960" y="{{labelBase}}" text-anchor="middle" font-family="{{font}}" font-size="{{labelSize}}" font-weight="600" letter-spacing="4" textLength="{{labelW}}" lengthAdjust="spacingAndGlyphs" fill="{{ink}}" fill-opacity="0.7">{{label}}</text></g></svg>`,
+  animate: [
+    { id: "countdownAll", attrs: { opacity: [0, 1], transform: ["translate(960 540) scale(0.9) translate(-960 -540)", "translate(960 540) scale(1) translate(-960 -540)"] }, ms: COUNT_IN, ease: "out" },
+    // A slot per number: the ring drains over its step, the number is written and flips open.
+    ...Array.from({ length: COUNT_MAX + 1 }, (_, k) => [
+      { id: "countdownRing", draw: [n12(`ra${k}`), 0], delay: n12(`t${k}`), ms: n12(`rm${k}`), ease: "linear" },
+      { id: "countdownNumber", write: `{{d${k}}}`, delay: n12(`t${k}`), ms: 0 },
+      { id: "countdownFlip", attrs: { transform: [flipPose(0), flipPose(1)] }, delay: n12(`t${k}`), ms: 260, ease: "out" }
+    ]).flat(),
+    { id: "countdownAll", attrs: { opacity: [1, 0], transform: ["translate(960 540) scale(1) translate(-960 -540)", "translate(960 540) scale(1.08) translate(-960 -540)"] }, delay: after(0), ms: 400 }
+  ]
+};
+var countdown = {
+  kind: "vector",
+  id: "countdown",
+  name: "Countdown",
+  description: "A countdown from ten (or any number) to zero, the number flipping over each second as a ring drains around it.",
+  category: "broadcast",
+  tags: ["broadcast", "countdown", "timer", "number", "intro", "live"],
+  hold: 300,
+  presets: [
+    { name: "Live", values: { ring: [0.96, 0.25, 0.37], background: [0.04, 0.06, 0.13] } },
+    { name: "Clean", values: { background: [0.98, 0.98, 0.98], ring: [0.15, 0.39, 0.92], track: [0.89, 0.91, 0.94], ink: [0.07, 0.09, 0.15] } },
+    { name: "Retro film", values: { background: [0.1, 0.09, 0.08], ring: [0.95, 0.9, 0.8], track: [0.25, 0.23, 0.2], ink: [0.95, 0.9, 0.8], from: 5, label: "" } }
+  ],
+  derived: (v) => {
+    const from = Math.max(1, Math.min(COUNT_MAX, Math.round(Number(v.from)) || 1));
+    const step = ms(v.step);
+    const number = fit6(String(from), 380, 300);
+    const label = fit6(v.label, 900, 40);
+    const out = {
+      ...outTimes(countdownMotion, COUNT_IN + from * step + 300 + ms(v.hold)),
+      numberSize: number.size,
+      numberBase: r111(520 + number.size * 0.36),
+      labelSize: label.size,
+      labelW: label.width,
+      labelBase: r111(920 + label.size * 0.35)
+    };
+    for (let k = 0; k <= COUNT_MAX; k++) {
+      const s = Math.min(k, from);
+      out[`t${k}`] = COUNT_IN + s * step;
+      out[`d${k}`] = String(from - s);
+      out[`ra${k}`] = s < from ? 1 : 0;
+      out[`rm${k}`] = s < from ? step : 0;
+    }
+    return out;
+  },
+  motion: countdownMotion
+};
+var CURSOR = "M0 0 L0 34 L9.5 25.5 L15.5 39.5 L21.5 37 L15.5 23.5 L27.5 23.5 Z";
+var BELL = "M12 3 C8.4 3 6 5.8 6 9.6 V14 L4 17.2 H20 L18 14 V9.6 C18 5.8 15.6 3 12 3 Z M9.6 19.4 A2.5 2.5 0 0 0 14.4 19.4";
+var ring = (deg) => `rotate(${deg} 0 -26)`;
+var subscribeButtonMotion = {
+  svg: `<svg viewBox="0 0 1920 1080"><!-- {{label: text default='Subscribe' label='Button'}} {{done: text default='Subscribed' label='Button when subscribed'}} {{color: color default=#FF0033 label='Button'}} {{ink: color default=#FFFFFF label='Button text'}} {{doneColor: color default=#E5E7EB label='Subscribed button'}} {{doneInk: color default=#111827 label='Subscribed text'}} ${holdControl(2)} {{font: text default="${SANS9}" label='Font'}} --><g transform="translate(960 860) scale(1.35) translate(-960 -860)"><g id="subscribeButtonAll" opacity="0" transform="translate(0 40)"><rect id="subscribeButtonFace" x="{{buttonX}}" y="816" width="{{buttonW}}" height="88" rx="44" fill="{{color}}"/><text id="subscribeButtonLabel" x="{{buttonCx}}" y="{{textBase}}" text-anchor="middle" font-family="{{font}}" font-size="{{labelSize}}" font-weight="700" textLength="{{labelW}}" lengthAdjust="spacingAndGlyphs" fill="{{ink}}">{{label}}</text><text id="subscribeButtonDone" x="{{buttonCx}}" y="{{doneBase}}" text-anchor="middle" font-family="{{font}}" font-size="{{doneSize}}" font-weight="700" textLength="{{doneW}}" lengthAdjust="spacingAndGlyphs" fill="{{doneInk}}" opacity="0">{{done}}</text><g transform="translate({{bellX}} 860)"><g id="subscribeButtonBell" transform="scale(0)"><circle r="44" fill="{{doneColor}}"/><g id="subscribeButtonSwing" transform="${ring(0)}"><path d="${BELL}" transform="scale(2.4) translate(-12 -11.5)" fill="none" stroke="{{doneInk}}" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></g></g></g><circle id="subscribeButtonRipple" cx="{{clickX}}" cy="872" r="0" fill="#FFFFFF" opacity="0"/><g id="subscribeButtonCursor" transform="translate(1640 1130)"><g id="subscribeButtonPress" transform="scale(1.3)"><path d="${CURSOR}" fill="#FFFFFF" stroke="#111111" stroke-width="2" stroke-linejoin="round"/></g></g></g></g></svg>`,
+  animate: [
+    { id: "subscribeButtonAll", attrs: { opacity: [0, 1], transform: ["translate(0 40)", "translate(0 0)"] }, ms: 450, ease: "out" },
+    { id: "subscribeButtonCursor", attrs: { transform: ["translate(1640 1130)", "translate({{clickX}} 872)"] }, delay: 450, ms: 850, ease: "in-out" },
+    { id: "subscribeButtonPress", attrs: { transform: ["scale(1.3)", "scale(1.1)"] }, delay: 1300, ms: 100, ease: "out" },
+    { id: "subscribeButtonPress", attrs: { transform: ["scale(1.1)", "scale(1.3)"] }, delay: 1400, ms: 140, ease: "out" },
+    { id: "subscribeButtonRipple", attrs: { r: [0, 110], opacity: [0.5, 0] }, delay: 1300, ms: 550, ease: "out" },
+    { id: "subscribeButtonFace", attrs: { fill: ["{{color}}", "{{doneColor}}"] }, delay: 1300, ms: 180, ease: "linear" },
+    { id: "subscribeButtonLabel", attrs: { opacity: [1, 0] }, delay: 1300, ms: 120, ease: "linear" },
+    { id: "subscribeButtonDone", attrs: { opacity: [0, 1] }, delay: 1380, ms: 160, ease: "linear" },
+    ...pop("subscribeButtonBell", 1450, 1.15, 240),
+    ...[[0, 20], [20, -18], [-18, 14], [14, -9], [-9, 5], [5, 0]].map(([a, b], i) => ({ id: "subscribeButtonSwing", attrs: { transform: [ring(a), ring(b)] }, delay: 1700 + i * 110, ms: 110, ease: "in-out" })),
+    { id: "subscribeButtonCursor", attrs: { transform: ["translate({{clickX}} 872)", "translate({{leaveX}} 1000)"] }, delay: 2e3, ms: 700, ease: "in-out" },
+    { id: "subscribeButtonAll", attrs: { opacity: [1, 0], transform: ["translate(0 0)", "translate(0 40)"] }, delay: after(0), ms: 450 }
+  ]
+};
+var subscribeButton = {
+  kind: "vector",
+  id: "subscribe-button",
+  name: "Subscribe button",
+  description: "A YouTube-style subscribe button: a cursor glides in and clicks it, it turns grey and reads Subscribed, and a bell pops up and rings.",
+  category: "broadcast",
+  tags: ["broadcast", "subscribe", "youtube", "button", "cursor", "bell", "overlay", "cta"],
+  hold: 300,
+  presets: [
+    { name: "YouTube", values: { color: [1, 0, 0.2], doneColor: [0.9, 0.91, 0.92], doneInk: [0.07, 0.09, 0.15] } },
+    { name: "Dark", values: { color: [1, 1, 1], ink: [0.06, 0.06, 0.06], doneColor: [0.15, 0.15, 0.15], doneInk: [1, 1, 1] } },
+    { name: "Brand", values: { color: [0.49, 0.23, 0.93], doneColor: [0.93, 0.91, 0.99], doneInk: [0.35, 0.15, 0.7], label: "Follow", done: "Following" } }
+  ],
+  derived: (v) => {
+    const label = fit6(v.label, 520, 34);
+    const done = fit6(v.done, 520, 34);
+    const w = Math.max(label.width, done.width) + 88;
+    const total = w + 24 + 88;
+    const left = 960 - total / 2;
+    return {
+      ...outTimes(subscribeButtonMotion, 2700 + ms(v.hold)),
+      buttonX: r111(left),
+      buttonW: r111(w),
+      buttonCx: r111(left + w / 2),
+      labelSize: label.size,
+      labelW: label.width,
+      textBase: r111(860 + label.size * 0.35),
+      doneSize: done.size,
+      doneW: done.width,
+      doneBase: r111(860 + done.size * 0.35),
+      bellX: r111(left + w + 24 + 44),
+      clickX: r111(left + w * 0.55),
+      leaveX: r111(Math.min(1700, left + total + 260))
+    };
+  },
+  motion: subscribeButtonMotion
+};
+var TICKER_COPIES = 8;
+var TICKER_MIN_REPEAT = 400;
+var BLINKS2 = 24;
+var newsTickerMotion = {
+  svg: `<svg viewBox="0 0 1920 1080"><!-- {{text: text default='Markets close higher as rates hold steady  \xB7  Storm warning lifted along the coast  \xB7  City council approves new transit line' label='Ticker text'}} {{label: text default='BREAKING' label='Label'}} {{band: color default=#0B1220 label='Band'}} {{ink: color default=#FFFFFF label='Text colour'}} {{accent: color default=#DC2626 label='Label'}} {{labelInk: color default=#FFFFFF label='Label text'}} {{speed: float min=40 max=600 default=160 step=10 label='Speed (px/s)'}} {{font: text default="${SANS9}" label='Font'}} --><defs><clipPath id="newsTickerClip"><rect x="{{crawlX}}" y="884" width="{{crawlW}}" height="80"/></clipPath></defs><rect x="0" y="884" width="1920" height="80" fill="{{band}}" fill-opacity="0.92"/><rect x="0" y="884" width="1920" height="4" fill="{{accent}}"/><g clip-path="url(#newsTickerClip)"><g id="newsTickerCrawl" transform="translate(0 0)">${Array.from(
+    { length: TICKER_COPIES },
+    (_, k) => `<text x="{{x${k}}}" y="{{textBase}}" font-family="{{font}}" font-size="{{textSize}}" font-weight="500" textLength="{{textW}}" lengthAdjust="spacingAndGlyphs" fill="{{ink}}">{{text}}</text><rect x="{{s${k}}}" y="917" width="14" height="14" transform="rotate(45 {{sc${k}}} 924)" fill="{{accent}}"/>`
+  ).join("")}</g></g><rect x="192" y="884" width="{{labelBox}}" height="80" fill="{{accent}}"/><circle id="newsTickerDot" cx="226" cy="924" r="9" fill="{{labelInk}}"/><text x="250" y="{{labelBase}}" font-family="{{font}}" font-size="{{labelSize}}" font-weight="800" letter-spacing="2" textLength="{{labelW}}" lengthAdjust="spacingAndGlyphs" fill="{{labelInk}}">{{label}}</text></svg>`,
+  animate: [
+    { id: "newsTickerCrawl", attrs: { transform: ["translate(0 0)", "translate({{repeatBack}} 0)"] }, ms: n12("period"), ease: "linear" },
+    ...holds2(
+      "newsTickerDot",
+      "opacity",
+      Array.from({ length: BLINKS2 }, (_, k) => [n12(`b${k}`), k % 2 ? 0.25 : 1])
+    )
+  ]
+};
+var newsTicker = {
+  kind: "vector",
+  id: "news-ticker",
+  name: "News ticker",
+  description: "A news band along the bottom with a BREAKING label and a blinking live dot, its headlines crawling past in a seamless loop.",
+  category: "broadcast",
+  tags: ["broadcast", "news", "ticker", "crawl", "marquee", "breaking", "loop", "overlay"],
+  hold: 0,
+  presets: [
+    { name: "Breaking", values: { accent: [0.86, 0.15, 0.15], band: [0.04, 0.07, 0.13] } },
+    { name: "Business", values: { accent: [0.15, 0.39, 0.92], band: [1, 1, 1], ink: [0.07, 0.09, 0.15], label: "MARKETS" } },
+    { name: "Sport", values: { accent: [0.64, 0.9, 0.21], labelInk: [0.05, 0.05, 0.05], band: [0.05, 0.05, 0.05], label: "LATEST" } }
+  ],
+  derived: (v) => {
+    const label = fit6(v.label, 360, 30);
+    const text = fit6(v.text, Infinity, 36);
+    const labelBox = label.width + 92;
+    const crawlX = 192 + labelBox;
+    const repeat = Math.max(TICKER_MIN_REPEAT, text.width + 96);
+    const period = Math.max(1, Math.round(repeat / Math.max(1, Number(v.speed)) * 1e3));
+    const out = {
+      labelSize: label.size,
+      labelW: label.width,
+      labelBase: r111(924 + label.size * 0.35),
+      labelBox: r111(labelBox),
+      crawlX: r111(crawlX),
+      crawlW: r111(1920 - crawlX),
+      textSize: text.size,
+      textW: text.width,
+      textBase: r111(924 + text.size * 0.35),
+      repeatBack: -r111(repeat),
+      period
+    };
+    for (let k = 0; k < TICKER_COPIES; k++) {
+      const x = crawlX + 32 + k * repeat;
+      out[`x${k}`] = r111(x);
+      out[`s${k}`] = r111(x + text.width + 41);
+      out[`sc${k}`] = r111(x + text.width + 48);
+    }
+    for (let k = 0; k < BLINKS2; k++) out[`b${k}`] = Math.round(k * period / BLINKS2);
+    return out;
+  },
+  motion: newsTickerMotion
+};
+var TICKS2 = 40;
+var SCORE_IN = 1400;
+var clockText = (total) => {
+  const t = Math.max(0, total);
+  return `${Math.floor(t / 60)}:${String(t % 60).padStart(2, "0")}`;
+};
+var scoreboardMotion = {
+  svg: `<svg viewBox="0 0 1920 1080"><!-- {{home: text default='LIV' label='Home team'}} {{away: text default='ARS' label='Away team'}} {{homeScore: int min=0 max=199 default=2 label='Home score'}} {{awayScore: int min=0 max=199 default=1 label='Away score'}} {{period: text default='2H' label='Period'}} {{minutes: int min=0 max=120 default=67 label='Clock minutes'}} {{seconds: int min=0 max=59 default=12 label='Clock seconds'}} {{countDown: bool default=false label='Clock counts down'}} {{homeColor: color default=#C8102E label='Home colour'}} {{awayColor: color default=#F5F5F5 label='Away colour'}} {{plate: color default=#101828 label='Team plate'}} {{scorePlate: color default=#FFFFFF label='Score plate'}} {{ink: color default=#FFFFFF label='Team text'}} {{scoreInk: color default=#101828 label='Score text'}} {{accent: color default=#22C55E label='Clock plate'}} {{clockInk: color default=#04130A label='Clock text'}} ${holdControl(6)} {{font: text default="${SANS9}" label='Font'}} --><defs><clipPath id="scoreboardWipe"><rect id="scoreboardWipeRect" x="192" y="100" width="0" height="80"/></clipPath><filter id="scoreboardShadow" x="-10%" y="-50%" width="120%" height="200%"><feDropShadow dx="0" dy="4" stdDeviation="6" flood-color="#000000" flood-opacity="0.35"/></filter></defs><g clip-path="url(#scoreboardWipe)" filter="url(#scoreboardShadow)"><rect x="192" y="108" width="10" height="64" fill="{{homeColor}}"/><rect x="202" y="108" width="180" height="64" fill="{{plate}}"/><text x="292" y="{{homeBase}}" text-anchor="middle" font-family="{{font}}" font-size="{{homeSize}}" font-weight="800" textLength="{{homeW}}" lengthAdjust="spacingAndGlyphs" fill="{{ink}}">{{home}}</text><rect x="382" y="108" width="152" height="64" fill="{{scorePlate}}"/><line x1="458" y1="122" x2="458" y2="158" stroke="{{scoreInk}}" stroke-opacity="0.2" stroke-width="2"/><text id="scoreboardHomeScore" x="420" y="152" text-anchor="middle" font-family="{{font}}" font-size="40" font-weight="800" fill="{{scoreInk}}">0</text><text id="scoreboardAwayScore" x="496" y="152" text-anchor="middle" font-family="{{font}}" font-size="40" font-weight="800" fill="{{scoreInk}}">0</text><rect x="534" y="108" width="180" height="64" fill="{{plate}}"/><text x="624" y="{{awayBase}}" text-anchor="middle" font-family="{{font}}" font-size="{{awaySize}}" font-weight="800" textLength="{{awayW}}" lengthAdjust="spacingAndGlyphs" fill="{{ink}}">{{away}}</text><rect x="714" y="108" width="10" height="64" fill="{{awayColor}}"/><rect x="724" y="108" width="150" height="64" fill="{{accent}}"/><text id="scoreboardClock" x="799" y="152" text-anchor="middle" font-family="{{font}}" font-size="36" font-weight="700" fill="{{clockInk}}">{{c0}}</text><rect x="874" y="108" width="72" height="64" fill="{{plate}}"/><text x="910" y="{{periodBase}}" text-anchor="middle" font-family="{{font}}" font-size="{{periodSize}}" font-weight="700" textLength="{{periodW}}" lengthAdjust="spacingAndGlyphs" fill="{{ink}}">{{period}}</text></g></svg>`,
+  animate: [
+    { id: "scoreboardWipeRect", attrs: { width: [0, 760] }, ms: 600, ease: "out" },
+    { id: "scoreboardHomeScore", count: [0, n12("homeScore")], delay: 500, ms: 900, ease: "out" },
+    { id: "scoreboardAwayScore", count: [0, n12("awayScore")], delay: 600, ms: 800, ease: "out" },
+    ...Array.from({ length: TICKS2 }, (_, k) => ({ id: "scoreboardClock", write: `{{c${k}}}`, delay: n12(`ct${k}`), ms: 0 })),
+    { id: "scoreboardWipeRect", attrs: { width: [760, 0] }, delay: after(0), ms: 500 }
+  ]
+};
+var scoreboard = {
+  kind: "vector",
+  id: "scoreboard",
+  name: "Scoreboard",
+  description: "A sports score bug wiping in at the top left: team names and colours, scores counting up, a ticking match clock and the period.",
+  category: "broadcast",
+  tags: ["broadcast", "sport", "scoreboard", "score-bug", "clock", "overlay", "counter"],
+  hold: 300,
+  presets: [
+    { name: "Football", values: { accent: [0.13, 0.77, 0.37], clockInk: [0.02, 0.07, 0.04] } },
+    { name: "Basketball", values: { home: "LAL", away: "BOS", homeScore: 98, awayScore: 101, period: "Q4", minutes: 2, seconds: 30, countDown: true, homeColor: [0.33, 0.15, 0.53], awayColor: [0, 0.48, 0.2], accent: [0.98, 0.45, 0.09], clockInk: [0.1, 0.04, 0] } },
+    { name: "Minimal", values: { plate: [1, 1, 1], ink: [0.07, 0.09, 0.15], scorePlate: [0.07, 0.09, 0.15], scoreInk: [1, 1, 1], accent: [0.95, 0.96, 0.97], clockInk: [0.07, 0.09, 0.15] } }
+  ],
+  derived: (v) => {
+    const home = fit6(v.home, 150, 34);
+    const away = fit6(v.away, 150, 34);
+    const period = fit6(v.period, 56, 28);
+    const hold = ms(v.hold);
+    const start = Math.round(Number(v.minutes)) * 60 + Math.round(Number(v.seconds));
+    const dir = v.countDown ? -1 : 1;
+    const ticks2 = Math.max(1, Math.min(TICKS2, Math.floor((SCORE_IN + hold - 600) / 1e3) + 1));
+    const out = {
+      ...outTimes(scoreboardMotion, SCORE_IN + hold),
+      homeSize: home.size,
+      homeW: home.width,
+      homeBase: r111(140 + home.size * 0.35),
+      awaySize: away.size,
+      awayW: away.width,
+      awayBase: r111(140 + away.size * 0.35),
+      periodSize: period.size,
+      periodW: period.width,
+      periodBase: r111(140 + period.size * 0.35),
+      homeScore: Math.round(Number(v.homeScore)),
+      awayScore: Math.round(Number(v.awayScore))
+    };
+    for (let k = 0; k < TICKS2; k++) {
+      const s = Math.min(k, ticks2 - 1);
+      out[`ct${k}`] = 600 + s * 1e3;
+      out[`c${k}`] = clockText(start + dir * s);
+    }
+    return out;
+  },
+  motion: scoreboardMotion
+};
+var chapterMarkerMotion = {
+  svg: `<svg viewBox="0 0 1920 1080"><!-- {{title: text default='The plan' label='Title'}} {{number: int min=0 max=99 default=2 label='Chapter number'}} {{label: text default='Chapter' label='Label'}} {{accent: color default=#F97316 label='Badge'}} {{badgeInk: color default=#FFFFFF label='Number colour'}} {{plate: color default=#111827 label='Panel'}} {{ink: color default=#FFFFFF label='Title colour'}} {{labelInk: color default=#F97316 label='Label colour'}} {{plateOpacity: float min=0 max=1 default=0.92 step=0.05 label='Panel opacity'}} ${holdControl(3)} {{font: text default="${SANS9}" label='Font'}} --><defs><clipPath id="chapterMarkerClip"><rect x="318" y="760" width="1420" height="112"/></clipPath></defs><rect id="chapterMarkerPanel" x="252" y="760" width="0" height="112" rx="56" fill="{{plate}}" fill-opacity="{{plateOpacity}}"/><g clip-path="url(#chapterMarkerClip)"><text id="chapterMarkerLabel" x="340" y="{{labelBase}}" transform="translate(-260 0)" font-family="{{font}}" font-size="{{labelSize}}" font-weight="700" letter-spacing="3" textLength="{{labelW}}" lengthAdjust="spacingAndGlyphs" fill="{{labelInk}}">{{heading}}</text><text id="chapterMarkerTitle" x="340" y="{{titleBase}}" transform="translate(-320 0)" font-family="{{font}}" font-size="{{titleSize}}" font-weight="700" textLength="{{titleW}}" lengthAdjust="spacingAndGlyphs" fill="{{ink}}">{{title}}</text></g><g transform="translate(252 816)"><g id="chapterMarkerBadge" transform="rotate(-120) scale(0)"><circle r="60" fill="{{accent}}"/><circle r="50" fill="none" stroke="{{badgeInk}}" stroke-opacity="0.35" stroke-width="2"/><text y="{{numberBase}}" text-anchor="middle" font-family="{{font}}" font-size="{{numberSize}}" font-weight="800" fill="{{badgeInk}}">{{number}}</text></g></g></svg>`,
+  animate: [
+    { id: "chapterMarkerBadge", attrs: { transform: ["rotate(-120) scale(0)", "rotate(8) scale(1.1)"] }, ms: 380, ease: "out" },
+    { id: "chapterMarkerBadge", attrs: { transform: ["rotate(8) scale(1.1)", "rotate(0) scale(1)"] }, delay: 380, ms: 180, ease: "in-out" },
+    { id: "chapterMarkerPanel", attrs: { width: [0, n12("panel")] }, delay: 250, ms: 550, ease: "out" },
+    { id: "chapterMarkerLabel", attrs: { transform: ["translate(-260 0)", "translate(0 0)"] }, delay: 450, ms: 450, ease: "out" },
+    { id: "chapterMarkerTitle", attrs: { transform: ["translate(-320 0)", "translate(0 0)"] }, delay: 550, ms: 500, ease: "out" },
+    { id: "chapterMarkerTitle", attrs: { transform: ["translate(0 0)", "translate(-320 0)"] }, delay: after(0), ms: 350 },
+    { id: "chapterMarkerLabel", attrs: { transform: ["translate(0 0)", "translate(-260 0)"] }, delay: after(80), ms: 350 },
+    { id: "chapterMarkerPanel", attrs: { width: [n12("panel"), 0] }, delay: after(200), ms: 450 },
+    { id: "chapterMarkerBadge", attrs: { transform: ["rotate(0) scale(1)", "rotate(-120) scale(0)"] }, delay: after(550), ms: 350 }
+  ]
+};
+var chapterMarker = {
+  kind: "vector",
+  id: "chapter-marker",
+  name: "Chapter marker",
+  description: "A numbered badge spinning in at the lower left and a panel sliding out of it with the chapter label over its title.",
+  category: "broadcast",
+  tags: ["broadcast", "chapter", "section", "title", "number", "overlay", "youtube"],
+  hold: 300,
+  presets: [
+    { name: "Bold", values: { accent: [0.98, 0.45, 0.09], labelInk: [0.98, 0.45, 0.09] } },
+    { name: "Clean", values: { plate: [1, 1, 1], ink: [0.07, 0.09, 0.15], accent: [0.15, 0.39, 0.92], labelInk: [0.15, 0.39, 0.92], plateOpacity: 1 } },
+    { name: "Minimal", values: { plateOpacity: 0, accent: [1, 1, 1], badgeInk: [0.07, 0.07, 0.07], labelInk: [1, 1, 1] } }
+  ],
+  derived: (v) => {
+    const heading = `${String(v.label).toUpperCase()} ${Math.round(Number(v.number))}`.trim();
+    const label = fit6(heading, 1300, 24);
+    const title = fit6(v.title, 1300, 50);
+    const number = fit6(String(Math.round(Number(v.number))), 80, 56);
+    return {
+      ...outTimes(chapterMarkerMotion, 1050 + ms(v.hold)),
+      heading,
+      labelSize: label.size,
+      labelW: label.width,
+      labelBase: r111(796 + label.size * 0.35),
+      titleSize: title.size,
+      titleW: title.width,
+      titleBase: r111(840 + title.size * 0.35),
+      numberSize: number.size,
+      numberBase: r111(number.size * 0.36),
+      panel: r111(88 + Math.max(label.width, title.width) + 44)
+    };
+  },
+  motion: chapterMarkerMotion
+};
+var broadcastEffects = [
+  lowerThird,
+  lowerThirdStacked,
+  titleCard,
+  logoReveal,
+  logoSting,
+  endCard,
+  countdown,
+  subscribeButton,
+  newsTicker,
+  scoreboard,
+  chapterMarker
+];
+
+// src/catalog/annotation.ts
+var HAND = `'Caveat', 'Patrick Hand', 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive`;
+var px = (v) => r111(Number(v) / 100 * 1920);
+var py = (v) => r111(Number(v) / 100 * 1080);
+var clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+var pt = (p) => `${r111(p[0])} ${r111(p[1])}`;
+var at3 = (name, value, label, axis) => `{{${name}: float min=0 max=100 default=${value} step=0.5 label='${label} ${axis} (%)'}}`;
+function random2(seed) {
+  let a = (Math.round(Number(seed)) || 0) * 7919 + 1;
+  return () => {
+    a = a + 1831565813 | 0;
+    let t = Math.imul(a ^ a >>> 15, 1 | a);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function smooth(pts) {
+  let d = `M${pt(pts[0])}`;
+  for (let i = 0; i < pts.length - 1; i++) {
+    const [p0, p1, p2, p3] = [pts[i - 1] ?? pts[i], pts[i], pts[i + 1], pts[i + 2] ?? pts[i + 1]];
+    const c1 = [p1[0] + (p2[0] - p0[0]) / 6, p1[1] + (p2[1] - p0[1]) / 6];
+    const c2 = [p2[0] - (p3[0] - p1[0]) / 6, p2[1] - (p3[1] - p1[1]) / 6];
+    d += ` C${pt(c1)} ${pt(c2)} ${pt(p2)}`;
+  }
+  return d;
+}
+function handLoop(cx, cy, rx, ry, rand3, rough, grow = 1) {
+  const a0 = -2.5 + rand3() * 0.5;
+  const sweep = Math.PI * 2 + 0.4 + rand3() * 0.25;
+  const [p1, p2, p3] = [rand3() * 6.28, rand3() * 6.28, rand3() * 6.28];
+  const tilt = (rand3() - 0.5) * 0.12;
+  const amp = 0.012 + 0.06 * rough;
+  const pts = [];
+  const N = 40;
+  for (let i = 0; i <= N; i++) {
+    const t = i / N;
+    const a = a0 + sweep * t;
+    const r = grow * (1 + amp * (0.55 * Math.sin(2 * a + p1) + 0.3 * Math.sin(3 * a + p2) + 0.15 * Math.sin(5 * a + p3)) + 0.07 * rough * t);
+    const [x, y] = [rx * r * Math.cos(a), ry * r * Math.sin(a)];
+    pts.push([cx + x * Math.cos(tilt) - y * Math.sin(tilt), cy + x * Math.sin(tilt) + y * Math.cos(tilt)]);
+  }
+  return smooth(pts);
+}
+var writing = (text, perLetter = 60) => clamp(Array.from(String(text ?? "")).length * perLetter, 200, 1800);
+var handCircleMotion = {
+  svg: `<svg viewBox="0 0 1920 1080"><!-- ${at3("x", 50, "Centre", "x")} ${at3("y", 50, "Centre", "y")} {{w: float min=2 max=100 default=30 step=0.5 label='Width (%)'}} {{h: float min=2 max=100 default=26 step=0.5 label='Height (%)'}} {{color: color default=#EF4444 label='Ink'}} {{width: float min=1 max=40 default=8 step=0.5 label='Pen width'}} {{alpha: float min=0.1 max=1 default=1 step=0.05 label='Ink opacity'}} {{rough: float min=0 max=1 default=0.5 step=0.05 label='Roughness'}} {{seed: int min=0 max=99 default=3 label='Seed'}} ${holdControl(2)} --><g id="handCircleAll" fill="none" stroke="{{color}}" stroke-linecap="round" stroke-linejoin="round"><path id="handCircleA" d="{{a}}" stroke-width="{{width}}" stroke-opacity="{{alpha}}"/><path id="handCircleB" d="{{b}}" stroke-width="{{thin}}" stroke-opacity="{{alphaB}}"/></g></svg>`,
+  animate: [
+    { id: "handCircleA", draw: true, ms: 750, ease: "in-out" },
+    { id: "handCircleB", draw: true, delay: 350, ms: 700, ease: "in-out" },
+    { id: "handCircleAll", attrs: { opacity: [1, 0] }, delay: after(0), ms: 400 }
+  ]
+};
+var handCircle = {
+  kind: "vector",
+  id: "hand-circle",
+  name: "Hand circle",
+  description: "A hand-drawn, slightly wobbly marker circle drawing itself round a region in a rough double stroke, then fading.",
+  category: "annotation",
+  tags: ["annotation", "hand-drawn", "circle", "highlight", "marker", "draw-on", "tutorial"],
+  hold: 300,
+  presets: [
+    { name: "Red marker", values: { color: [0.94, 0.27, 0.27], width: 8 } },
+    { name: "Highlighter", values: { color: [0.98, 0.88, 0.2], width: 26, alpha: 0.55, rough: 0.3 } },
+    { name: "Blue pen", values: { color: [0.15, 0.39, 0.92], width: 4, rough: 0.7 } }
+  ],
+  derived: (v) => {
+    const [cx, cy] = [px(v.x), py(v.y)];
+    const [rx, ry] = [Number(v.w) / 200 * 1920, Number(v.h) / 200 * 1080];
+    const rough = Number(v.rough);
+    return {
+      ...outTimes(handCircleMotion, 1050 + ms(v.hold)),
+      a: handLoop(cx, cy, rx, ry, random2(v.seed), rough),
+      b: handLoop(cx, cy, rx, ry, random2(Number(v.seed) + 101), rough, 1.035),
+      thin: r111(Number(v.width) * 0.6),
+      alphaB: r111(Number(v.alpha) * 0.85 * 100) / 100
+    };
+  },
+  motion: handCircleMotion
+};
+var handArrowMotion = {
+  svg: `<svg viewBox="0 0 1920 1080"><!-- {{label: text default='Click here!' label='Label'}} ${at3("lx", 22, "Label", "x")} ${at3("ly", 24, "Label", "y")} ${at3("tx", 52, "Target", "x")} ${at3("ty", 58, "Target", "y")} {{bend: float min=-1 max=1 default=0.45 step=0.05 label='Bend'}} {{color: color default=#EF4444 label='Ink'}} {{width: float min=1 max=24 default=7 step=0.5 label='Pen width'}} {{size: float min=16 max=160 default=76 step=1 label='Label size'}} {{rough: float min=0 max=1 default=0.5 step=0.05 label='Roughness'}} {{seed: int min=0 max=99 default=5 label='Seed'}} ${holdControl(2)} {{font: text default="${HAND}" label='Font'}} --><g id="handArrowAll" fill="none" stroke="{{color}}" stroke-width="{{width}}" stroke-linecap="round" stroke-linejoin="round"><text id="handArrowLabel" x="{{lx}}" y="{{labelBase}}" text-anchor="middle" transform="rotate(-4 {{lx}} {{ly}})" font-family="{{font}}" font-size="{{labelSize}}" font-weight="700" fill="{{color}}" stroke="none">{{label}}</text><path id="handArrowShaft" d="{{shaft}}"/><path id="handArrowHead" d="{{head}}"/></g></svg>`,
+  animate: [
+    { id: "handArrowLabel", write: "{{label}}", ms: n12("writeMs"), ease: "linear" },
+    { id: "handArrowShaft", draw: true, delay: n12("shaftAt"), ms: 700, ease: "in-out" },
+    { id: "handArrowHead", draw: true, delay: n12("headAt"), ms: 250, ease: "out" },
+    { id: "handArrowAll", attrs: { opacity: [1, 0] }, delay: after(0), ms: 400 }
+  ]
+};
+var handArrow = {
+  kind: "vector",
+  id: "hand-arrow",
+  name: "Hand arrow",
+  description: "A handwritten label, then a curved, hand-drawn arrow drawing itself from it to a target point.",
+  category: "annotation",
+  tags: ["annotation", "hand-drawn", "arrow", "pointer", "label", "draw-on", "tutorial"],
+  hold: 300,
+  presets: [
+    { name: "Red marker", values: { color: [0.94, 0.27, 0.27] } },
+    { name: "White chalk", values: { color: [0.97, 0.97, 0.95], width: 6, rough: 0.8 } },
+    { name: "Blue pen", values: { color: [0.15, 0.39, 0.92], width: 4, bend: -0.35 } }
+  ],
+  derived: (v) => {
+    const L = [px(v.lx), py(v.ly)];
+    const T = [px(v.tx), py(v.ty)];
+    const label = fit6(v.label, 900, Number(v.size));
+    const empty = String(v.label ?? "").trim() === "";
+    let [dx, dy] = [T[0] - L[0], T[1] - L[1]];
+    let len = Math.hypot(dx, dy);
+    if (len < 1) [dx, dy, len] = [1, 0, 1];
+    const [ux, uy] = [dx / len, dy / len];
+    const [hw, hh] = empty ? [0, 0] : [label.width / 2 + 22, label.size * 0.55 + 18];
+    const edge = Math.min(Math.abs(ux) > 1e-6 ? hw / Math.abs(ux) : Infinity, Math.abs(uy) > 1e-6 ? hh / Math.abs(uy) : Infinity, Math.max(0, len - 40));
+    const S = [L[0] + ux * edge, L[1] + uy * edge];
+    const E = [T[0] - ux * 14, T[1] - uy * 14];
+    const span = Math.max(10, Math.hypot(E[0] - S[0], E[1] - S[1]));
+    const perp = [-uy, ux];
+    const bend = Number(v.bend) * span * 0.5;
+    const C = [(S[0] + E[0]) / 2 + perp[0] * bend, (S[1] + E[1]) / 2 + perp[1] * bend];
+    const rand3 = random2(v.seed);
+    const phase = rand3() * 6.28;
+    const wobble = Number(v.rough) * Math.min(14, span * 0.03);
+    const curve = (t) => [
+      (1 - t) ** 2 * S[0] + 2 * (1 - t) * t * C[0] + t * t * E[0],
+      (1 - t) ** 2 * S[1] + 2 * (1 - t) * t * C[1] + t * t * E[1]
+    ];
+    const pts = Array.from({ length: 18 }, (_, i) => {
+      const t = i / 17;
+      const [x, y] = curve(t);
+      const j = wobble * Math.sin(Math.PI * t * 3 + phase) * 4 * t * (1 - t);
+      return [x + perp[0] * j, y + perp[1] * j];
+    });
+    const before = curve(0.9);
+    const angle = Math.atan2(E[1] - before[1], E[0] - before[0]);
+    const barb = 22 + Number(v.width) * 2.2;
+    const wing = (s) => [E[0] + barb * Math.cos(angle + Math.PI + s * (0.5 + rand3() * 0.08)), E[1] + barb * Math.sin(angle + Math.PI + s * (0.5 + rand3() * 0.08))];
+    const writeMs = empty ? 0 : writing(v.label);
+    return {
+      ...outTimes(handArrowMotion, writeMs + 950 + ms(v.hold)),
+      lx: L[0],
+      ly: L[1],
+      labelSize: label.size,
+      labelBase: r111(L[1] + label.size * 0.32),
+      shaft: smooth(pts),
+      head: `M${pt(wing(1))} L${pt(E)} L${pt(wing(-1))}`,
+      writeMs,
+      shaftAt: Math.max(0, writeMs - 100),
+      headAt: writeMs + 550
+    };
+  },
+  motion: handArrowMotion
+};
+var calloutMotion = {
+  svg: `<svg viewBox="0 0 1920 1080"><!-- {{label: text default='New: dark mode' label='Label'}} ${at3("tx", 38, "Target", "x")} ${at3("ty", 46, "Target", "y")} ${at3("bx", 64, "Label", "x")} ${at3("by", 26, "Label", "y")} {{accent: color default=#6366F1 label='Accent'}} {{box: color default=#FFFFFF label='Label box'}} {{ink: color default=#111827 label='Label colour'}} {{size: float min=14 max=80 default=34 step=1 label='Label size'}} ${holdControl(2.5)} {{font: text default="${SANS9}" label='Font'}} --><defs><filter id="calloutShadow" x="-20%" y="-40%" width="140%" height="180%"><feDropShadow dx="0" dy="6" stdDeviation="10" flood-color="#000000" flood-opacity="0.25"/></filter></defs><g id="calloutAll"><path id="calloutLeader" d="{{leader}}" fill="none" stroke="{{accent}}" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><g transform="translate({{tx}} {{ty}})"><circle id="calloutPulse" r="11" fill="none" stroke="{{accent}}" stroke-width="4" opacity="0"/><g id="calloutDot" transform="scale(0)"><circle r="16" fill="{{accent}}" fill-opacity="0.25"/><circle r="9" fill="{{accent}}"/></g></g><g transform="translate({{bx}} {{by}})"><g id="calloutBox" transform="scale(0)" filter="url(#calloutShadow)"><rect x="{{boxX}}" y="{{boxY}}" width="{{boxW}}" height="{{boxH}}" rx="14" fill="{{box}}" stroke="{{accent}}" stroke-width="3"/><text y="{{labelBase}}" text-anchor="middle" font-family="{{font}}" font-size="{{labelSize}}" font-weight="600" textLength="{{labelW}}" lengthAdjust="spacingAndGlyphs" fill="{{ink}}">{{label}}</text></g></g></g></svg>`,
+  animate: [
+    ...pop("calloutDot", 0, 1.3, 260),
+    { id: "calloutPulse", attrs: { r: [11, 46], opacity: [0.9, 0] }, delay: 150, ms: 700, ease: "out" },
+    { id: "calloutLeader", draw: true, delay: 250, ms: 500, ease: "in-out" },
+    ...pop("calloutBox", 650, 1.08, 280),
+    { id: "calloutPulse", attrs: { r: [11, 46], opacity: [0.9, 0] }, delay: 1300, ms: 700, ease: "out" },
+    { id: "calloutAll", attrs: { opacity: [1, 0] }, delay: after(0), ms: 400 }
+  ]
+};
+var callout = {
+  kind: "vector",
+  id: "callout",
+  name: "Callout",
+  description: "A dot pops on a target and pulses, a leader line draws out from it and a label box pops in at its end.",
+  category: "annotation",
+  tags: ["annotation", "callout", "label", "pointer", "product", "tutorial", "ui"],
+  hold: 300,
+  presets: [
+    { name: "Indigo", values: { accent: [0.39, 0.4, 0.95] } },
+    { name: "Dark", values: { accent: [0.13, 0.83, 0.93], box: [0.07, 0.09, 0.15], ink: [1, 1, 1] } },
+    { name: "Alert", values: { accent: [0.94, 0.27, 0.27], box: [1, 0.95, 0.95], ink: [0.5, 0.1, 0.1] } }
+  ],
+  derived: (v) => {
+    const T = [px(v.tx), py(v.ty)];
+    const B = [px(v.bx), py(v.by)];
+    const label = fit6(v.label, 760, Number(v.size));
+    const [bw, bh] = [label.width + 56, label.size + 40];
+    const side = B[0] >= T[0] ? -1 : 1;
+    const A = [B[0] + side * bw / 2, B[1]];
+    const elbow = [A[0] + side * 40, B[1]];
+    return {
+      ...outTimes(calloutMotion, 1150 + ms(v.hold)),
+      tx: T[0],
+      ty: T[1],
+      bx: B[0],
+      by: B[1],
+      leader: `M${pt(T)} L${pt(elbow)} L${pt(A)}`,
+      boxX: -r111(bw / 2),
+      boxY: -r111(bh / 2),
+      boxW: r111(bw),
+      boxH: r111(bh),
+      labelSize: label.size,
+      labelW: label.width,
+      labelBase: r111(label.size * 0.35)
+    };
+  },
+  motion: calloutMotion
+};
+var bracketNoteMotion = {
+  svg: `<svg viewBox="0 0 1920 1080"><!-- {{note: text default='All of these ship today' label='Note'}} ${at3("x", 62, "Bracket", "x")} {{top: float min=0 max=100 default=24 step=0.5 label='Top (%)'}} {{bottom: float min=0 max=100 default=76 step=0.5 label='Bottom (%)'}} {{flip: bool default=false label='Note on the left'}} {{color: color default=#EF4444 label='Ink'}} {{width: float min=1 max=20 default=6 step=0.5 label='Pen width'}} {{depth: float min=10 max=120 default=40 step=1 label='Bracket depth'}} {{size: float min=16 max=140 default=68 step=1 label='Note size'}} ${holdControl(2.5)} {{font: text default="${HAND}" label='Font'}} --><g id="bracketNoteAll"><path id="bracketNoteBrace" d="{{brace}}" fill="none" stroke="{{color}}" stroke-width="{{width}}" stroke-linecap="round" stroke-linejoin="round"/><text id="bracketNoteText" x="{{noteX}}" y="{{noteBase}}" text-anchor="{{anchor}}" font-family="{{font}}" font-size="{{noteSize}}" font-weight="700" fill="{{color}}">{{note}}</text></g></svg>`,
+  animate: [
+    { id: "bracketNoteBrace", draw: true, ms: 700, ease: "in-out" },
+    { id: "bracketNoteText", write: "{{note}}", delay: 600, ms: n12("writeMs"), ease: "linear" },
+    { id: "bracketNoteAll", attrs: { opacity: [1, 0] }, delay: after(0), ms: 400 }
+  ]
+};
+var bracketNote = {
+  kind: "vector",
+  id: "bracket-note",
+  name: "Bracket note",
+  description: "A curly bracket drawing itself down the side of a region, then a handwritten note beside its point.",
+  category: "annotation",
+  tags: ["annotation", "hand-drawn", "bracket", "note", "group", "draw-on", "tutorial"],
+  hold: 300,
+  presets: [
+    { name: "Red marker", values: { color: [0.94, 0.27, 0.27] } },
+    { name: "Blue pen", values: { color: [0.15, 0.39, 0.92], width: 4 } },
+    { name: "Chalk", values: { color: [0.97, 0.97, 0.95] } }
+  ],
+  derived: (v) => {
+    const x = px(v.x);
+    const [y1, y2] = [py(v.top), py(v.bottom)].sort((a, b) => a - b);
+    const ym = (y1 + y2) / 2;
+    const dir = v.flip ? -1 : 1;
+    const w = dir * Math.max(4, Math.min(Number(v.depth), (y2 - y1) / 4));
+    const h = w / 2;
+    const ah = Math.abs(h);
+    const brace = `M${r111(x)} ${r111(y1)} Q${r111(x + h)} ${r111(y1)} ${r111(x + h)} ${r111(y1 + ah)} L${r111(x + h)} ${r111(ym - ah)} Q${r111(x + h)} ${r111(ym)} ${r111(x + w)} ${r111(ym)} Q${r111(x + h)} ${r111(ym)} ${r111(x + h)} ${r111(ym + ah)} L${r111(x + h)} ${r111(y2 - ah)} Q${r111(x + h)} ${r111(y2)} ${r111(x)} ${r111(y2)}`;
+    const noteX = x + w + dir * 24;
+    const room2 = v.flip ? noteX - 96 : 1824 - noteX;
+    const note = fit6(v.note, Math.max(200, room2), Number(v.size));
+    const writeMs = writing(v.note);
+    return {
+      ...outTimes(bracketNoteMotion, 600 + writeMs + 200 + ms(v.hold)),
+      brace,
+      noteX: r111(noteX),
+      noteBase: r111(ym + note.size * 0.3),
+      noteSize: note.size,
+      anchor: v.flip ? "end" : "start",
+      writeMs
+    };
+  },
+  motion: bracketNoteMotion
+};
+var scribbleOutMotion = {
+  svg: `<svg viewBox="0 0 1920 1080"><!-- {{word: text default='Tuesday' label='Word'}} {{replacement: text default='Friday!' label='Replacement'}} ${at3("x", 42, "Word", "x")} ${at3("y", 50, "Word", "y")} {{size: float min=16 max=200 default=96 step=1 label='Word size'}} {{showWord: bool default=true label='Draw the word'}} {{ink: color default=#111827 label='Word colour'}} {{color: color default=#EF4444 label='Scribble'}} {{fix: color default=#2563EB label='Replacement colour'}} {{width: float min=1 max=24 default=8 step=0.5 label='Pen width'}} {{seed: int min=0 max=99 default=7 label='Seed'}} ${holdControl(2.5)} {{font: text default="${SANS9}" label='Font'}} {{handFont: text default="${HAND}" label='Handwriting font'}} --><g id="scribbleOutAll"><text id="scribbleOutWord" x="{{x}}" y="{{wordBase}}" text-anchor="middle" font-family="{{font}}" font-size="{{wordSize}}" font-weight="700" textLength="{{wordW}}" lengthAdjust="spacingAndGlyphs" fill="{{ink}}" opacity="0">{{word}}</text><path id="scribbleOutScribble" d="{{scribble}}" fill="none" stroke="{{color}}" stroke-width="{{width}}" stroke-linecap="round" stroke-linejoin="round"/><text id="scribbleOutFix" x="{{fixX}}" y="{{fixY}}" text-anchor="{{fixAnchor}}" transform="rotate(-5 {{fixX}} {{fixY}})" font-family="{{handFont}}" font-size="{{fixSize}}" font-weight="700" fill="{{fix}}">{{replacement}}</text></g></svg>`,
+  animate: [
+    { id: "scribbleOutWord", attrs: { opacity: [0, n12("wordOpacity")] }, ms: 300, ease: "out" },
+    { id: "scribbleOutScribble", draw: true, delay: 300, ms: 1e3, ease: "in-out" },
+    { id: "scribbleOutFix", write: "{{replacement}}", delay: 1300, ms: n12("writeMs"), ease: "linear" },
+    { id: "scribbleOutAll", attrs: { opacity: [1, 0] }, delay: after(0), ms: 400 }
+  ]
+};
+var scribbleOut = {
+  kind: "vector",
+  id: "scribble-out",
+  name: "Scribble out",
+  description: "A word scribbled out in a back-and-forth cross-hatch, then a replacement handwritten beside it.",
+  category: "annotation",
+  tags: ["annotation", "hand-drawn", "scribble", "strike", "correction", "draw-on", "edit"],
+  hold: 300,
+  presets: [
+    { name: "Red and blue", values: { color: [0.94, 0.27, 0.27], fix: [0.15, 0.39, 0.92] } },
+    { name: "Over a screenshot", values: { showWord: false, color: [0.94, 0.27, 0.27], fix: [0.94, 0.27, 0.27] } },
+    { name: "Black marker", values: { color: [0.07, 0.07, 0.07], width: 10, fix: [0.86, 0.15, 0.15] } }
+  ],
+  derived: (v) => {
+    const [X, Y] = [px(v.x), py(v.y)];
+    const word = fit6(v.word, 1400, Number(v.size));
+    const rand3 = random2(v.seed);
+    const [left, right] = [X - word.width / 2 - 10, X + word.width / 2 + 10];
+    const [top, bottom] = [Y - word.size * 0.46, Y + word.size * 0.32];
+    const step = Math.max(6, word.size * 0.12);
+    const jitter = () => (rand3() - 0.5) * word.size * 0.1;
+    const pts = [];
+    for (let x = left, k = 0; x <= right + step / 2; x += step, k++) pts.push([Math.min(x, right) + (k % 2 ? step * 0.4 : 0), (k % 2 ? top : bottom) + jitter()]);
+    for (let x = right, k = 0; x >= left - step / 2; x -= step * 1.1, k++) pts.push([Math.max(x, left) - (k % 2 ? step * 0.4 : 0), (k % 2 ? bottom : top) + jitter() + word.size * 0.04]);
+    const roomRight = 1824 - (X + word.width / 2 + 24);
+    const beside = roomRight >= 280;
+    const fix = fit6(v.replacement, beside ? roomRight : 1600, word.size * 0.9);
+    return {
+      ...outTimes(scribbleOutMotion, 1300 + writing(v.replacement, 70) + 150 + ms(v.hold)),
+      x: X,
+      wordSize: word.size,
+      wordW: word.width,
+      wordBase: r111(Y + word.size * 0.35),
+      wordOpacity: v.showWord ? 1 : 0,
+      scribble: `M${pts.map(pt).join(" L")}`,
+      fixX: r111(beside ? X + word.width / 2 + 24 : X),
+      fixY: r111(beside ? Y - word.size * 0.5 : Y - word.size * 0.75),
+      fixAnchor: beside ? "start" : "middle",
+      fixSize: fix.size,
+      writeMs: writing(v.replacement, 70)
+    };
+  },
+  motion: scribbleOutMotion
+};
+var STEPS = 4;
+var STEP_GAP = 450;
+var STEP_SPOTS = [[24, 30], [58, 24], [36, 64], [72, 70]];
+var STEP_LABELS = ["Open settings", "Pick a theme", "Hit save", "Share it"];
+var stepBadgesMotion = {
+  svg: `<svg viewBox="0 0 1920 1080"><!-- {{count: int min=1 max=${STEPS} default=3 label='Steps'}} ${Array.from({ length: STEPS }, (_, i) => `{{l${i + 1}: text default='${STEP_LABELS[i]}' label='Step ${i + 1}'}} ${at3(`x${i + 1}`, STEP_SPOTS[i][0], `Step ${i + 1}`, "x")} ${at3(`y${i + 1}`, STEP_SPOTS[i][1], `Step ${i + 1}`, "y")}`).join(" ")} {{accent: color default=#F97316 label='Badge'}} {{badgeInk: color default=#FFFFFF label='Number colour'}} {{plate: color default=#111827 label='Label box'}} {{labelInk: color default=#FFFFFF label='Label colour'}} ${holdControl(2.5)} {{font: text default="${SANS9}" label='Font'}} --><defs><filter id="stepBadgesShadow" x="-30%" y="-60%" width="160%" height="220%"><feDropShadow dx="0" dy="4" stdDeviation="6" flood-color="#000000" flood-opacity="0.3"/></filter></defs><g id="stepBadgesAll" filter="url(#stepBadgesShadow)">${Array.from({ length: STEPS }, (_, i) => {
+    const k = i + 1;
+    return `<g transform="translate({{bx${k}}} {{by${k}}})" opacity="{{v${k}}}"><g id="stepBadgesLabel${k}" opacity="0" transform="translate({{lo${k}}} 0)"><rect x="{{lr${k}}}" y="-28" width="{{lw${k}}}" height="56" rx="28" fill="{{plate}}"/><text x="{{lt${k}}}" y="{{lb${k}}}" text-anchor="middle" font-family="{{font}}" font-size="{{ls${k}}}" font-weight="600" textLength="{{ll${k}}}" lengthAdjust="spacingAndGlyphs" fill="{{labelInk}}">{{l${k}}}</text></g><g id="stepBadgesBadge${k}" transform="scale(0)"><circle r="36" fill="{{accent}}"/><circle r="36" fill="none" stroke="{{badgeInk}}" stroke-width="4"/><text y="14" text-anchor="middle" font-family="{{font}}" font-size="38" font-weight="800" fill="{{badgeInk}}">${k}</text></g></g>`;
+  }).join("")}</g></svg>`,
+  animate: [
+    ...Array.from({ length: STEPS }, (_, i) => [
+      ...pop(`stepBadgesBadge${i + 1}`, i * STEP_GAP, 1.18, 260),
+      { id: `stepBadgesLabel${i + 1}`, attrs: { opacity: [0, 1], transform: [`translate({{lo${i + 1}}} 0)`, "translate(0 0)"] }, delay: i * STEP_GAP + 220, ms: 380, ease: "out" }
+    ]).flat(),
+    { id: "stepBadgesAll", attrs: { opacity: [1, 0] }, delay: after(0), ms: 400 }
+  ]
+};
+var stepBadges = {
+  kind: "vector",
+  id: "step-badges",
+  name: "Step badges",
+  description: "Numbered step badges popping in one after another at points on a screen, each with a label sliding out beside it.",
+  category: "annotation",
+  tags: ["annotation", "steps", "badges", "numbers", "tutorial", "onboarding", "product"],
+  hold: 300,
+  presets: [
+    { name: "Orange", values: { accent: [0.98, 0.45, 0.09] } },
+    { name: "Light", values: { accent: [0.15, 0.39, 0.92], plate: [1, 1, 1], labelInk: [0.07, 0.09, 0.15] } },
+    { name: "Four steps", values: { count: 4 } }
+  ],
+  derived: (v) => {
+    const count = clamp(Math.round(Number(v.count)) || 1, 1, STEPS);
+    const out = { ...outTimes(stepBadgesMotion, (count - 1) * STEP_GAP + 700 + ms(v.hold)) };
+    for (let k = 1; k <= STEPS; k++) {
+      const [x, y] = [px(v[`x${k}`]), py(v[`y${k}`])];
+      const label = fit6(v[`l${k}`], 520, 28);
+      const w = label.width + 44;
+      const left = x + 46 + w > 1824;
+      out[`bx${k}`] = x;
+      out[`by${k}`] = y;
+      out[`v${k}`] = k <= count ? 1 : 0;
+      out[`lw${k}`] = r111(w);
+      out[`lr${k}`] = left ? -r111(46 + w) : 46;
+      out[`lt${k}`] = left ? -r111(46 + w / 2) : r111(46 + w / 2);
+      out[`lo${k}`] = left ? 24 : -24;
+      out[`ls${k}`] = label.size;
+      out[`ll${k}`] = label.width;
+      out[`lb${k}`] = r111(label.size * 0.35);
+    }
+    return out;
+  },
+  motion: stepBadgesMotion
+};
+var FOCUS = [[30, 32, 30, 24], [70, 40, 34, 30], [50, 76, 60, 18]];
+var box = (k) => ["x", "y", "width", "height"].map((a) => `{{${a}${k}}}`);
+var between = (from, to) => Object.fromEntries(["x", "y", "width", "height"].map((a, i) => [a, [box(from)[i], box(to)[i]]]));
+var focusBoxMotion = {
+  svg: `<svg viewBox="0 0 1920 1080"><!-- {{stops: int min=2 max=3 default=3 label='Stops'}} ${FOCUS.map(([x, y, w, h], i) => `${at3(`cx${i + 1}`, x, `Stop ${i + 1}`, "x")} ${at3(`cy${i + 1}`, y, `Stop ${i + 1}`, "y")} {{w${i + 1}: float min=2 max=100 default=${w} step=0.5 label='Stop ${i + 1} width (%)'}} {{h${i + 1}: float min=2 max=100 default=${h} step=0.5 label='Stop ${i + 1} height (%)'}}`).join(" ")} {{dim: color default=#000000 label='Dim'}} {{dimOpacity: float min=0 max=1 default=0.62 step=0.02 label='Dim opacity'}} {{ring: color default=#FACC15 label='Outline'}} {{ringWidth: float min=0 max=16 default=4 step=0.5 label='Outline width'}} {{radius: float min=0 max=80 default=18 step=1 label='Corner radius'}} ${holdControl(1.5, "Hold at each stop (s)")} --><defs><mask id="focusBoxMask" maskUnits="userSpaceOnUse" x="0" y="0" width="1920" height="1080"><rect width="1920" height="1080" fill="#FFFFFF"/><rect id="focusBoxHole" x="{{x1}}" y="{{y1}}" width="{{width1}}" height="{{height1}}" rx="{{radius}}" fill="#000000"/></mask></defs><rect id="focusBoxDim" width="1920" height="1080" fill="{{dim}}" opacity="0" mask="url(#focusBoxMask)"/><rect id="focusBoxRing" x="{{x1}}" y="{{y1}}" width="{{width1}}" height="{{height1}}" rx="{{radius}}" fill="none" stroke="{{ring}}" stroke-width="{{ringWidth}}" opacity="0"/></svg>`,
+  animate: [
+    { id: "focusBoxDim", attrs: { opacity: [0, n12("dimOpacity")] }, ms: 500, ease: "out" },
+    { id: "focusBoxRing", attrs: { opacity: [0, 1] }, delay: 200, ms: 400, ease: "out" },
+    ...["focusBoxHole", "focusBoxRing"].flatMap((id) => [
+      { id, attrs: between(1, 2), delay: n12("move2"), ms: 700, ease: "in-out" },
+      { id, attrs: between(2, 3), delay: n12("move3"), ms: n12("move3ms"), ease: "in-out" }
+    ]),
+    { id: "focusBoxRing", attrs: { opacity: [1, 0] }, delay: after(0), ms: 300 },
+    { id: "focusBoxDim", attrs: { opacity: [n12("dimOpacity"), 0] }, delay: after(100), ms: 450 }
+  ]
+};
+var focusBox = {
+  kind: "vector",
+  id: "focus-box",
+  name: "Focus box",
+  description: "A spotlight dimming a screen everywhere but a rounded box, which glides from one region to the next and the next.",
+  category: "annotation",
+  tags: ["annotation", "spotlight", "focus", "highlight", "dim", "tutorial", "product", "walkthrough"],
+  hold: 300,
+  presets: [
+    { name: "Yellow outline", values: { ring: [0.98, 0.8, 0.08] } },
+    { name: "Soft", values: { dimOpacity: 0.4, ringWidth: 0, radius: 32 } },
+    { name: "Light", values: { dim: [1, 1, 1], dimOpacity: 0.7, ring: [0.15, 0.39, 0.92] } }
+  ],
+  derived: (v) => {
+    const stops = Math.round(Number(v.stops)) >= 3 ? 3 : 2;
+    const hold = ms(v.hold);
+    const move2 = 500 + hold;
+    const move3 = move2 + 700 + (stops === 3 ? hold : 0);
+    const out = {
+      ...outTimes(focusBoxMotion, (stops === 3 ? move3 + 700 : move2 + 700) + hold),
+      move2,
+      move3,
+      move3ms: stops === 3 ? 700 : 0
+    };
+    for (let k = 1; k <= 3; k++) {
+      const s = stops === 2 && k === 3 ? 2 : k;
+      const [w, h] = [px(v[`w${s}`]), py(v[`h${s}`])];
+      out[`x${k}`] = r111(px(v[`cx${s}`]) - w / 2);
+      out[`y${k}`] = r111(py(v[`cy${s}`]) - h / 2);
+      out[`width${k}`] = w;
+      out[`height${k}`] = h;
+    }
+    return out;
+  },
+  motion: focusBoxMotion
+};
+var press = (s) => `scale(${s})`;
+var fakeCursorMotion = {
+  svg: `<svg viewBox="0 0 1920 1080"><!-- {{typed: text default='hello@flair.dev' label='Typed text'}} ${at3("sx", 82, "Start", "x")} ${at3("sy", 86, "Start", "y")} ${at3("cx", 28, "Click", "x")} ${at3("cy", 30, "Click", "y")} ${at3("dx", 52, "Drag to", "x")} ${at3("dy", 52, "Drag to", "y")} ${at3("fx", 62, "Text field", "x")} ${at3("fy", 74, "Text field", "y")} {{field: bool default=true label='Draw the text field'}} {{accent: color default=#3B82F6 label='Accent'}} {{fieldColor: color default=#FFFFFF label='Field'}} {{fieldBorder: color default=#CBD5E1 label='Field border'}} {{ink: color default=#0F172A label='Text colour'}} {{pointer: color default=#FFFFFF label='Cursor'}} {{size: float min=14 max=64 default=30 step=1 label='Text size'}} ${holdControl(2)} {{font: text default="${SANS9}" label='Font'}} --><g id="fakeCursorAll"><rect id="fakeCursorMarquee" x="{{cx}}" y="{{cy}}" width="0" height="0" fill="{{accent}}" fill-opacity="0.15" stroke="{{accent}}" stroke-width="2" stroke-dasharray="8 6"/><rect id="fakeCursorField" x="{{fieldX}}" y="{{fieldY}}" width="{{fieldW}}" height="{{fieldH}}" rx="10" fill="{{fieldColor}}" stroke="{{fieldBorder}}" stroke-width="3" opacity="{{fieldOpacity}}"/><text id="fakeCursorTyped" x="{{textX}}" y="{{textBase}}" font-family="{{font}}" font-size="{{size}}" fill="{{ink}}" xml:space="preserve">{{typed}}</text><circle id="fakeCursorRipple1" cx="{{cx}}" cy="{{cy}}" r="0" fill="{{accent}}" opacity="0"/><circle id="fakeCursorRipple2" cx="{{kx}}" cy="{{ky}}" r="0" fill="{{accent}}" opacity="0"/><g id="fakeCursorPos" transform="translate({{sx}} {{sy}})" opacity="0"><g id="fakeCursorPress" transform="${press(1.3)}"><path d="${CURSOR}" fill="{{pointer}}" stroke="#111111" stroke-width="2" stroke-linejoin="round"/></g></g></g></svg>`,
+  animate: [
+    { id: "fakeCursorPos", attrs: { opacity: [0, 1] }, ms: 300, ease: "out" },
+    { id: "fakeCursorPos", attrs: { transform: ["translate({{sx}} {{sy}})", "translate({{cx}} {{cy}})"] }, delay: 300, ms: 800, ease: "in-out" },
+    // Click.
+    { id: "fakeCursorPress", attrs: { transform: [press(1.3), press(1.1)] }, delay: 1100, ms: 100, ease: "out" },
+    { id: "fakeCursorPress", attrs: { transform: [press(1.1), press(1.3)] }, delay: 1200, ms: 120, ease: "out" },
+    { id: "fakeCursorRipple1", attrs: { r: [0, 60], opacity: [0.45, 0] }, delay: 1100, ms: 500, ease: "out" },
+    // Press, drag out a selection, let go.
+    { id: "fakeCursorPress", attrs: { transform: [press(1.3), press(1.1)] }, delay: 1500, ms: 100, ease: "out" },
+    { id: "fakeCursorPos", attrs: { transform: ["translate({{cx}} {{cy}})", "translate({{dx}} {{dy}})"] }, delay: 1600, ms: 1e3, ease: "in-out" },
+    { id: "fakeCursorMarquee", attrs: { x: [n12("cx"), n12("mx")], y: [n12("cy"), n12("my")], width: [0, n12("mw")], height: [0, n12("mh")] }, delay: 1600, ms: 1e3, ease: "in-out" },
+    { id: "fakeCursorPress", attrs: { transform: [press(1.1), press(1.3)] }, delay: 2600, ms: 120, ease: "out" },
+    { id: "fakeCursorMarquee", attrs: { opacity: [1, 0] }, delay: 2800, ms: 300, ease: "linear" },
+    // Click into the field and type.
+    { id: "fakeCursorPos", attrs: { transform: ["translate({{dx}} {{dy}})", "translate({{kx}} {{ky}})"] }, delay: 2900, ms: 800, ease: "in-out" },
+    { id: "fakeCursorPress", attrs: { transform: [press(1.3), press(1.1)] }, delay: 3700, ms: 100, ease: "out" },
+    { id: "fakeCursorPress", attrs: { transform: [press(1.1), press(1.3)] }, delay: 3800, ms: 120, ease: "out" },
+    { id: "fakeCursorRipple2", attrs: { r: [0, 60], opacity: [0.45, 0] }, delay: 3700, ms: 500, ease: "out" },
+    { id: "fakeCursorField", attrs: { stroke: ["{{fieldBorder}}", "{{accent}}"] }, delay: 3700, ms: 200, ease: "linear" },
+    // The caret shows once the field has focus, and the cursor steps aside to let the text be read.
+    { id: "fakeCursorTyped", attrs: { opacity: [0, 0] }, ms: 0 },
+    { id: "fakeCursorTyped", attrs: { opacity: [1, 1] }, delay: 3800, ms: 0 },
+    { id: "fakeCursorPos", attrs: { transform: ["translate({{kx}} {{ky}})", "translate({{ax}} {{ay}})"] }, delay: 3950, ms: 500, ease: "in-out" },
+    { id: "fakeCursorTyped", write: "{{typed}}", caret: "|", delay: 4e3, ms: n12("typeMs"), ease: "linear" },
+    { id: "fakeCursorAll", attrs: { opacity: [1, 0] }, delay: after(0), ms: 400 }
+  ]
+};
+var fakeCursor = {
+  kind: "vector",
+  id: "fake-cursor",
+  name: "Fake cursor",
+  description: "A product-demo cursor over a screen: it glides to a point and clicks with a ripple, drags out a selection, then clicks a text field and types.",
+  category: "annotation",
+  tags: ["annotation", "cursor", "pointer", "demo", "product", "click", "typing", "walkthrough"],
+  hold: 300,
+  presets: [
+    { name: "Light UI", values: { accent: [0.23, 0.51, 0.96] } },
+    { name: "Dark UI", values: { fieldColor: [0.07, 0.09, 0.15], fieldBorder: [0.2, 0.25, 0.33], ink: [0.95, 0.96, 0.98], accent: [0.13, 0.83, 0.93] } },
+    { name: "Over a screenshot", values: { field: false } }
+  ],
+  derived: (v) => {
+    const [cx, cy, dx, dy, fx, fy] = [px(v.cx), py(v.cy), px(v.dx), py(v.dy), px(v.fx), py(v.fy)];
+    const size = Number(v.size);
+    const text = fit6(v.typed, 1400, size);
+    const fieldW = Math.max(360, text.width + 72);
+    const fieldX = clamp(fx - fieldW / 2, 24, Math.max(24, 1896 - fieldW));
+    const fieldH = size + 40;
+    return {
+      ...outTimes(fakeCursorMotion, 4e3 + writing(v.typed, 65) + 300 + ms(v.hold)),
+      sx: px(v.sx),
+      sy: py(v.sy),
+      cx,
+      cy,
+      dx,
+      dy,
+      mx: Math.min(cx, dx),
+      my: Math.min(cy, dy),
+      mw: r111(Math.abs(dx - cx)),
+      mh: r111(Math.abs(dy - cy)),
+      fieldX: r111(fieldX),
+      fieldY: r111(fy - fieldH / 2),
+      fieldW: r111(fieldW),
+      fieldH: r111(fieldH),
+      fieldOpacity: v.field ? 1 : 0,
+      textX: r111(fieldX + 28),
+      textBase: r111(fy + size * 0.35),
+      kx: r111(fieldX + 40),
+      ky: fy,
+      ax: r111(fieldX + 40 + 50),
+      ay: r111(fy + fieldH / 2 + 50),
+      typeMs: writing(v.typed, 65)
+    };
+  },
+  motion: fakeCursorMotion
+};
+var TOUR = [[22, 22], [70, 34], [44, 74]];
+var TOUR_TITLES = ["Search anything from here", "Your projects live here", "Invite your team"];
+var TOUR_IN = 400;
+var TOUR_MOVE = 600;
+var tooltipTourMotion = {
+  svg: `<svg viewBox="0 0 1920 1080"><!-- ${TOUR.map(([x, y], i) => `{{t${i + 1}: text default='${TOUR_TITLES[i]}' label='Step ${i + 1}'}} ${at3(`x${i + 1}`, x, `Target ${i + 1}`, "x")} ${at3(`y${i + 1}`, y, `Target ${i + 1}`, "y")}`).join(" ")} {{radius: float min=10 max=200 default=54 step=1 label='Highlight radius'}} {{accent: color default=#8B5CF6 label='Accent'}} {{plate: color default=#FFFFFF label='Tooltip'}} {{ink: color default=#111827 label='Text colour'}} {{muted: color default=#6B7280 label='Counter colour'}} {{size: float min=16 max=48 default=28 step=1 label='Text size'}} ${holdControl(1.8, "Hold at each step (s)")} {{font: text default="${SANS9}" label='Font'}} --><defs><filter id="tooltipTourShadow" x="-20%" y="-30%" width="140%" height="170%"><feDropShadow dx="0" dy="8" stdDeviation="12" flood-color="#000000" flood-opacity="0.28"/></filter></defs><g id="tooltipTourAll" opacity="0"><circle id="tooltipTourHalo" cx="{{hx1}}" cy="{{hy1}}" r="0" fill="{{accent}}" fill-opacity="0.16" stroke="{{accent}}" stroke-width="4"/><g filter="url(#tooltipTourShadow)"><path id="tooltipTourArrow" d="{{arrow1}}" fill="{{plate}}"/><g id="tooltipTourTip" transform="translate({{tx1}} {{ty1}})"><rect width="{{tipW}}" height="{{tipH}}" rx="14" fill="{{plate}}"/>${[1, 2, 3].map((k) => `<text id="tooltipTourTitle${k}" x="28" y="{{titleBase}}" font-family="{{font}}" font-size="{{s${k}}}" font-weight="700" textLength="{{w${k}}}" lengthAdjust="spacingAndGlyphs" fill="{{ink}}" opacity="${k === 1 ? 1 : 0}">{{t${k}}}</text>`).join("")}<text id="tooltipTourCount" x="28" y="{{countBase}}" font-family="{{font}}" font-size="22" font-weight="600" fill="{{muted}}">1 / 3</text>${[0, 1, 2].map((k) => `<circle cx="{{dot${k}}}" cy="{{dotY}}" r="5" fill="{{muted}}" fill-opacity="0.35"/>`).join("")}<rect id="tooltipTourActive" x="{{pill0}}" y="{{pillY}}" width="22" height="10" rx="5" fill="{{accent}}"/></g></g></g></svg>`,
+  animate: [
+    { id: "tooltipTourAll", attrs: { opacity: [0, 1] }, ms: TOUR_IN, ease: "out" },
+    { id: "tooltipTourHalo", attrs: { r: [0, n12("radius")] }, ms: TOUR_IN, ease: "out" },
+    ...[2, 3].flatMap((k) => {
+      const t = n12(`m${k}`);
+      return [
+        { id: "tooltipTourTip", attrs: { transform: [`translate({{tx${k - 1}}} {{ty${k - 1}}})`, `translate({{tx${k}}} {{ty${k}}})`] }, delay: t, ms: TOUR_MOVE, ease: "in-out" },
+        { id: "tooltipTourArrow", attrs: { d: [`{{arrow${k - 1}}}`, `{{arrow${k}}}`] }, delay: t, ms: TOUR_MOVE, ease: "in-out" },
+        { id: "tooltipTourHalo", attrs: { cx: [n12(`hx${k - 1}`), n12(`hx${k}`)], cy: [n12(`hy${k - 1}`), n12(`hy${k}`)] }, delay: t, ms: TOUR_MOVE, ease: "in-out" },
+        { id: `tooltipTourTitle${k - 1}`, attrs: { opacity: [1, 0] }, delay: t, ms: 200, ease: "linear" },
+        { id: `tooltipTourTitle${k}`, attrs: { opacity: [0, 1] }, delay: n12(`f${k}`), ms: 250, ease: "linear" },
+        { id: "tooltipTourCount", write: `${k} / 3`, delay: n12(`f${k}`), ms: 0 },
+        { id: "tooltipTourActive", attrs: { x: [n12(`pill${k - 2}`), n12(`pill${k - 1}`)] }, delay: t, ms: 400, ease: "in-out" }
+      ];
+    }),
+    { id: "tooltipTourAll", attrs: { opacity: [1, 0] }, delay: after(0), ms: 400 }
+  ]
+};
+var tooltipTour = {
+  kind: "vector",
+  id: "tooltip-tour",
+  name: "Tooltip tour",
+  description: "A guided-tour tooltip moving between three highlighted spots on a screen, its text changing with a 1/3, 2/3, 3/3 counter and a progress dot.",
+  category: "annotation",
+  tags: ["annotation", "tooltip", "tour", "onboarding", "walkthrough", "product", "ui"],
+  hold: 300,
+  presets: [
+    { name: "Violet", values: { accent: [0.55, 0.36, 0.96] } },
+    { name: "Dark", values: { plate: [0.07, 0.09, 0.15], ink: [1, 1, 1], muted: [0.6, 0.64, 0.7], accent: [0.13, 0.83, 0.93] } },
+    { name: "Blue", values: { accent: [0.15, 0.39, 0.92] } }
+  ],
+  derived: (v) => {
+    const size = Number(v.size);
+    const r = Number(v.radius);
+    const titles = [1, 2, 3].map((k) => fit6(v[`t${k}`], 700, size));
+    const w = Math.max(340, ...titles.map((t) => t.width + 56));
+    const h = size + 92;
+    const hold = ms(v.hold);
+    const m2 = TOUR_IN + hold;
+    const m3 = m2 + TOUR_MOVE + hold;
+    const out = {
+      ...outTimes(tooltipTourMotion, m3 + TOUR_MOVE + hold),
+      m2,
+      m3,
+      f2: m2 + 300,
+      f3: m3 + 300,
+      radius: r,
+      tipW: r111(w),
+      tipH: r111(h),
+      titleBase: r111(26 + size * 0.8),
+      countBase: r111(h - 24),
+      dotY: r111(h - 31),
+      pillY: r111(h - 36)
+    };
+    [1, 2, 3].forEach((k, i) => {
+      const [x, y] = [px(v[`x${k}`]), py(v[`y${k}`])];
+      const left = clamp(x - w / 2, 96, Math.max(96, 1824 - w));
+      const below = y + r + 22 + h <= 1e3;
+      const top = below ? y + r + 22 : y - r - 22 - h;
+      const ax = clamp(x, left + 28, left + w - 28);
+      const edge = below ? top : top + h;
+      const tip = below ? edge - 14 : edge + 14;
+      out[`s${k}`] = titles[i].size;
+      out[`w${k}`] = titles[i].width;
+      out[`hx${k}`] = x;
+      out[`hy${k}`] = y;
+      out[`tx${k}`] = r111(left);
+      out[`ty${k}`] = r111(top);
+      out[`arrow${k}`] = `M${r111(ax - 14)} ${r111(edge)} L${r111(ax)} ${r111(tip)} L${r111(ax + 14)} ${r111(edge)} Z`;
+      out[`dot${i}`] = r111(w - 28 - (2 - i) * 24);
+      out[`pill${i}`] = r111(w - 28 - (2 - i) * 24 - 11);
+    });
+    return out;
+  },
+  motion: tooltipTourMotion
+};
+var annotationEffects = [handCircle, handArrow, callout, bracketNote, scribbleOut, stepBadges, focusBox, fakeCursor, tooltipTour];
+
 // src/catalog/vector.ts
 var spinner = {
   kind: "vector",
@@ -21760,7 +23856,7 @@ var dripText = {
     const left = 200 - width / 2;
     const runs = Math.min(DRIP_RUNS, Math.max(1, Math.round(width / DRIP_RUN)));
     const run = width / runs;
-    const r111 = (n11) => Math.round(n11 * 10) / 10;
+    const r112 = (n13) => Math.round(n13 * 10) / 10;
     const edge = Number(v.stroke) / 2 / DRIP_SIZE;
     const tip = (DRIP_TOP + Math.max(...DRIPS2.map((d) => d.length)) * Number(v.drip) + 13 * 0.72 - DRIP_BASELINE) / DRIP_SIZE;
     const overhang = [edge, edge, Math.max(0.05, tip) + edge, edge].map((e) => Math.round(e * 100) / 100).join(" ");
@@ -21774,15 +23870,15 @@ var dripText = {
       overhang,
       ...Object.fromEntries(
         DRIP_SLOTS.flatMap((d) => {
-          const x = r111(left + (d.run + d.at) * run);
-          const length = r111(d.length * Number(v.drip));
+          const x = r112(left + (d.run + d.at) * run);
+          const length = r112(d.length * Number(v.drip));
           return [
             [`show${d.i}`, d.run < runs ? "inline" : "none"],
             [`x${d.i}`, x],
-            [`left${d.i}`, r111(x - d.width / 2)],
-            [`shine${d.i}`, r111(x - d.width * 0.25)],
+            [`left${d.i}`, r112(x - d.width / 2)],
+            [`shine${d.i}`, r112(x - d.width * 0.25)],
             [`len${d.i}`, length],
-            [`tip${d.i}`, r111(DRIP_TOP + length)]
+            [`tip${d.i}`, r112(DRIP_TOP + length)]
           ];
         })
       )
@@ -21794,23 +23890,23 @@ var dripText = {
       (d) => `<g display="{{show${d.i}}}"><rect id="${layer}r${d.i}" x="{{left${d.i}}}" y="${DRIP_TOP}" width="${d.width}" height="0" rx="${d.width / 2}" ${paint}/><circle id="${layer}c${d.i}" cx="{{x${d.i}}}" cy="${DRIP_TOP}" r="${d.width * 0.72}" ${paint}/></g>`
     ).join("");
     const outline4 = `fill="{{outline}}" stroke="{{outline}}" stroke-width="{{stroke}}"`;
-    const pop = (from, to) => [`translate(200 100) scale(${from}) translate(-200 -100)`, `translate(200 100) scale(${to}) translate(-200 -100)`];
+    const pop2 = (from, to) => [`translate(200 100) scale(${from}) translate(-200 -100)`, `translate(200 100) scale(${to}) translate(-200 -100)`];
     return {
-      svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{word: text default=SLOP label='Word'}} {{font: text default='Arial Black, Impact, system-ui, sans-serif' label='Font'}} {{weight: int min=100 max=900 default=900 step=100 label='Weight'}} {{fill: color default=#FF7EB6 label='Fill'}} {{outline: color default=#3A0A2C label='Outline'}} {{shine: color default=#FFD1E6 label='Shine'}} {{drip: float min=0.2 max=2 default=1 label='Drip length'}} {{stroke: float min=0 max=14 default=7 step=0.5 label='Outline width'}} {{inline: bool default=false label='Inline'}} --><g transform="translate(200 100) scale({{fit}}) translate(-200 -100)"><g id="word" transform="${pop(0.6, 1)[0]}" opacity="0">${drips("o", outline4)}${word} fill="none" stroke="{{outline}}" stroke-width="{{stroke}}">{{word}}</text>${drips("f", `fill="{{fill}}"`)}${word} fill="{{fill}}">{{word}}</text>${DRIP_SLOTS.map(
+      svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{word: text default=SLOP label='Word'}} {{font: text default='Arial Black, Impact, system-ui, sans-serif' label='Font'}} {{weight: int min=100 max=900 default=900 step=100 label='Weight'}} {{fill: color default=#FF7EB6 label='Fill'}} {{outline: color default=#3A0A2C label='Outline'}} {{shine: color default=#FFD1E6 label='Shine'}} {{drip: float min=0.2 max=2 default=1 label='Drip length'}} {{stroke: float min=0 max=14 default=7 step=0.5 label='Outline width'}} {{inline: bool default=false label='Inline'}} --><g transform="translate(200 100) scale({{fit}}) translate(-200 -100)"><g id="word" transform="${pop2(0.6, 1)[0]}" opacity="0">${drips("o", outline4)}${word} fill="none" stroke="{{outline}}" stroke-width="{{stroke}}">{{word}}</text>${drips("f", `fill="{{fill}}"`)}${word} fill="{{fill}}">{{word}}</text>${DRIP_SLOTS.map(
         (d) => `<circle id="s${d.i}" display="{{show${d.i}}}" cx="{{shine${d.i}}}" cy="${DRIP_TOP}" r="${d.width * 0.2}" fill="{{shine}}" opacity="0"/>`
       ).join("")}</g></g></svg>`,
       animate: [
-        { id: "word", attrs: { transform: pop(0.6, 1.08), opacity: [0, 1] }, ms: 260, ease: "out" },
-        { id: "word", attrs: { transform: pop(1.08, 1) }, delay: 260, ms: 200, ease: "in-out" },
+        { id: "word", attrs: { transform: pop2(0.6, 1.08), opacity: [0, 1] }, ms: 260, ease: "out" },
+        { id: "word", attrs: { transform: pop2(1.08, 1) }, delay: 260, ms: 200, ease: "in-out" },
         ...DRIP_SLOTS.flatMap((d) => {
-          const at3 = { delay: 400 + d.delay, ms: d.ms, ease: "in-out" };
+          const at4 = { delay: 400 + d.delay, ms: d.ms, ease: "in-out" };
           const tip = `{{tip${d.i}}}`;
           return [
             ...["o", "f"].flatMap((layer) => [
-              { id: `${layer}r${d.i}`, attrs: { height: [0, `{{len${d.i}}}`] }, ...at3 },
-              { id: `${layer}c${d.i}`, attrs: { cy: [DRIP_TOP, tip] }, ...at3 }
+              { id: `${layer}r${d.i}`, attrs: { height: [0, `{{len${d.i}}}`] }, ...at4 },
+              { id: `${layer}c${d.i}`, attrs: { cy: [DRIP_TOP, tip] }, ...at4 }
             ]),
-            { id: `s${d.i}`, attrs: { cy: [DRIP_TOP, tip], opacity: [0, 0.9] }, ...at3 }
+            { id: `s${d.i}`, attrs: { cy: [DRIP_TOP, tip], opacity: [0, 0.9] }, ...at4 }
           ];
         })
       ]
@@ -21991,9 +24087,11 @@ var SHADER_EFFECTS = [
   ...glowShaders,
   ...shadowShaders,
   ...distortionShaders,
+  ...audioShaders,
+  ...scrollShaders,
   ...transitions
 ];
-var EFFECTS = [...SHADER_EFFECTS, ...vectorEffects, ...textEffects, ...morphEffects, ...interactionEffects, ...pyroEffects, ...timewarpEffects, ...meltEffects, ...electricEffects, ...pixelEffects, ...splatterEffects, ...bubbleEffects, ...stickerEffects, ...trailEffects, ...impactEffects, ...comicEffects, ...glowEffects, ...shadowEffects, ...lightingEffects].sort(
+var EFFECTS = [...SHADER_EFFECTS, ...vectorEffects, ...textEffects, ...morphEffects, ...interactionEffects, ...pyroEffects, ...timewarpEffects, ...meltEffects, ...electricEffects, ...pixelEffects, ...splatterEffects, ...bubbleEffects, ...stickerEffects, ...trailEffects, ...impactEffects, ...comicEffects, ...glowEffects, ...shadowEffects, ...lightingEffects, ...scrollEffects, ...broadcastEffects, ...annotationEffects].sort(
   (a, b) => EFFECT_CATEGORIES.indexOf(a.category) - EFFECT_CATEGORIES.indexOf(b.category)
 );
 var byId = new Map(EFFECTS.map((e) => [e.id, e]));
@@ -22069,4 +24167,4 @@ export {
   effectControls,
   effectDefaults
 };
-//# sourceMappingURL=chunk-4LKAPRFM.js.map
+//# sourceMappingURL=chunk-UIODYJ6B.js.map