@pixerate/flair 0.29.0 → 0.30.0

package/dist/{chunk-6GFOLHCT.js → chunk-UIODYJ6B.js}

@@ -28,8 +28,8 @@ 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) {
@@ -1885,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) {
@@ -1973,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 }
 ];
@@ -2308,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>`,
@@ -2452,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(),
@@ -2534,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()
       )
@@ -2606,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)
             ];
@@ -2731,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.
@@ -2813,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: {
@@ -2883,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 }
       ];
@@ -2949,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;
@@ -3026,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 {
@@ -3049,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" }
@@ -3305,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"
     };
   });
@@ -3412,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" };
       })
     ]
   }
@@ -3500,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: {
@@ -3612,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.
@@ -3758,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", [
@@ -4024,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,
@@ -4176,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)
@@ -4219,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",
@@ -4282,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>`,
@@ -4323,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" }
     ];
@@ -4332,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 },
@@ -4341,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 },
@@ -4498,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 = [
@@ -4658,8 +4658,8 @@ function packGlyph(rows) {
   return `ivec2(${a}, ${b})`;
 }
 var vec3Hex = (hex) => {
-  const n12 = parseInt(hex.slice(1), 16);
-  const c = [n12 >> 16, n12 >> 8 & 255, n12 & 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}](
@@ -5592,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) => {
@@ -5645,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 },
@@ -5717,7 +5717,7 @@ var chompLoader = {
 var pixelEffects = [pixelText, coinSpin, spaceInvader, pixelHeartHealth, chompLoader];
 
 // src/catalog/pyro.ts
-var round = (n12) => Math.round(n12 * 10) / 10;
+var round = (n13) => Math.round(n13 * 10) / 10;
 var fireworkBurst = {
   kind: "vector",
   id: "firework-burst",
@@ -5736,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" },
@@ -5772,7 +5772,7 @@ var fireworkBurst = {
 var pyroEffects = [fireworkBurst];
 
 // src/catalog/timewarp.ts
-var r19 = (n12) => Math.round(n12 * 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))];
@@ -5906,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";
@@ -6007,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",
@@ -6130,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);
@@ -6154,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 },
@@ -6226,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++) {
@@ -18442,26 +18442,26 @@ float coverage(vec2 p, float radius) {
   }
   return sum / 16.0;
 }`.trim();
-function goldenTaps(n12) {
-  const taps = Array.from({ length: n12 }, (_, i) => {
-    const r = Math.sqrt((i + 0.5) / n12);
+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${n12}[${n12}] = vec2[${n12}](${taps.join(", ")});`;
+  return `const vec2 GOLDEN${n13}[${n13}] = vec2[${n13}](${taps.join(", ")});`;
 }
-function coverageTaps(name, n12, blur) {
+function coverageTaps(name, n13, blur) {
   return `
-${goldenTaps(n12)}
+${goldenTaps(n13)}
 float ${name}(vec2 p, float radius) {
   float sum = 0.0;
   if (gMaskPlace.w < 0.5) {
-    for (int i = 0; i < ${n12}; i++) sum += shapeAt(p + radius * GOLDEN${n12}[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 < ${n12}; i++) sum += shapeLod(p + radius * GOLDEN${n12}[i], lod);
+    for (int i = 0; i < ${n13}; i++) sum += shapeLod(p + radius * GOLDEN${n13}[i], lod);
   }
-  return sum / ${n12}.0;
+  return sum / ${n13}.0;
 }`.trim();
 }
 var LITE_TAPS = 10;
@@ -21538,6 +21538,8 @@ var EFFECT_CATEGORIES = [
   "distortion",
   "audio",
   "scroll",
+  "broadcast",
+  "annotation",
   "transition",
   "loader",
   "data",
@@ -21655,7 +21657,7 @@ function numberControl(name, value, min, max, label, step) {
 }
 
 // src/catalog/text.ts
-var r110 = (n12) => Math.round(n12 * 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);
@@ -22023,10 +22025,10 @@ var wordCycle = {
       (_, 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: [n11(`len${i}`), n11(`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()
   }
@@ -22151,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)})`;
     };
@@ -22165,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()
       )
@@ -22199,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",
@@ -22644,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 = (n12) => Math.round(n12 * 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(" ");
@@ -22658,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)]
           ];
         })
       )
@@ -22678,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 }
           ];
         })
       ]
@@ -22879,7 +24091,7 @@ var SHADER_EFFECTS = [
   ...scrollShaders,
   ...transitions
 ];
-var EFFECTS = [...SHADER_EFFECTS, ...vectorEffects, ...textEffects, ...morphEffects, ...interactionEffects, ...pyroEffects, ...timewarpEffects, ...meltEffects, ...electricEffects, ...pixelEffects, ...splatterEffects, ...bubbleEffects, ...stickerEffects, ...trailEffects, ...impactEffects, ...comicEffects, ...glowEffects, ...shadowEffects, ...lightingEffects, ...scrollEffects].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]));
@@ -22955,4 +24167,4 @@ export {
   effectControls,
   effectDefaults
 };
-//# sourceMappingURL=chunk-6GFOLHCT.js.map
+//# sourceMappingURL=chunk-UIODYJ6B.js.map