@pixerate/flair 0.9.0 → 0.10.0

package/dist/{chunk-F754SFRY.js → chunk-STGGN4MR.js}

@@ -1465,14 +1465,535 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   ]
 };
 
+// src/catalog/interaction.ts
+var r1 = (v) => Math.round(v * 10) / 10;
+var r2 = (v) => Math.round(v * 100) / 100;
+var n = (name) => `{{${name}}}`;
+var mixHex = (a, b, t) => {
+  const x = Array.isArray(a) ? a : [1, 1, 1];
+  const y = Array.isArray(b) ? b : [1, 1, 1];
+  return rgbToHex([0, 1, 2].map((i) => x[i] + (y[i] - x[i]) * t));
+};
+function fit(text, width, max) {
+  const e = Math.max(0.6, textWidthEm(String(text)));
+  const size = Math.min(max, width / e);
+  return { size: r1(size), length: r1(e * size) };
+}
+var about = (cx, cy, s) => `translate(${cx} ${cy}) scale(${r2(s)}) translate(${-cx} ${-cy})`;
+var snap = (id, attr, value, delay, step = 1) => ({
+  id,
+  step,
+  attrs: { [attr]: [value, value] },
+  delay,
+  ms: 0
+});
+var SANS = `system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif`;
+var HEART2 = "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 PARTICLES = 8;
+var BURST_FROM = 22;
+var BURST_TO = 46;
+var HEART_X = 72;
+var HEART_Y = 60;
+var heartPose = (k) => `translate(${HEART_X} ${HEART_Y}) scale(${r2(2.2 * k)}) translate(-12 -12)`;
+var likeButton = {
+  kind: "vector",
+  id: "like-button",
+  name: "Like button",
+  description: "A heart that fills with a springy pop, a ring and a burst of particles as its like count ticks up, and empties again on the next click.",
+  category: "interaction",
+  tags: ["interactive", "ui", "click", "like", "heart", "toggle", "social", "micro-interaction"],
+  trigger: "click",
+  hold: 900,
+  presets: [
+    { name: "Dark", values: { background: [0.06, 0.07, 0.1], chip: [0.13, 0.14, 0.19], outline: [0.6, 0.63, 0.7], ink: [0.9, 0.91, 0.95] } },
+    { name: "Purple", values: { heart: [0.6, 0.3, 1], accent: [1, 0.4, 0.75], count: 1204 } }
+  ],
+  derived: (v) => ({ liked: Number(v.count) + 1 }),
+  motion: {
+    svg: `<svg viewBox="0 0 240 120"><!-- {{count: int min=0 max=99999 default=42 label='Start count'}} {{background: color default=#FFFFFF label='Background'}} {{chip: color default=#F3F4F6 label='Button'}} {{outline: color default=#6B7280 label='Outline'}} {{heart: color default=#F43F5E label='Heart'}} {{accent: color default=#FB923C label='Sparks'}} {{ink: color default=#111827 label='Count colour'}} --><rect width="240" height="120" fill="{{background}}"/><rect x="20" y="24" width="200" height="72" rx="36" fill="{{chip}}"/><circle id="ring" cx="${HEART_X}" cy="${HEART_Y}" r="14" fill="none" stroke="{{heart}}" stroke-width="0"/>${Array.from(
+      { length: PARTICLES },
+      (_, k) => {
+        const a = (k * 360 / PARTICLES - 90) * (Math.PI / 180);
+        return `<circle id="p${k}" cx="${r1(HEART_X + BURST_FROM * Math.cos(a))}" cy="${r1(HEART_Y + BURST_FROM * Math.sin(a))}" r="0" fill="${k % 2 ? "{{accent}}" : "{{heart}}"}"/>`;
+      }
+    ).join("")}<g id="hg" transform="${heartPose(1)}"><path id="heartShape" d="${HEART2}" fill="{{heart}}" fill-opacity="0" stroke="{{outline}}" stroke-width="1.8" stroke-linejoin="round"/></g><text id="tally" x="106" y="70.5" font-family="${SANS}" font-size="30" font-weight="700" fill="{{ink}}">{{count}}</text></svg>`,
+    animate: [
+      // Step 1, like: squash, pop past full size and settle while it fills.
+      { id: "hg", step: 1, attrs: { transform: [heartPose(1), heartPose(0.78)] }, ms: 110, ease: "out" },
+      { id: "hg", step: 1, attrs: { transform: [heartPose(0.78), heartPose(1.22)] }, delay: 110, ms: 170, ease: "out" },
+      { id: "hg", step: 1, attrs: { transform: [heartPose(1.22), heartPose(1)] }, delay: 280, ms: 220, ease: "in-out" },
+      { id: "heartShape", step: 1, attrs: { "fill-opacity": [0, 1], stroke: ["{{outline}}", "{{heart}}"] }, delay: 110, ms: 120 },
+      // The ring and sparks burst out, then snap back once they are gone.
+      snap("ring", "stroke-width", 0, 0),
+      { id: "ring", step: 1, attrs: { r: [14, 44], "stroke-width": [10, 0] }, delay: 130, ms: 480, ease: "out" },
+      snap("ring", "r", 14, 700),
+      ...Array.from({ length: PARTICLES }, (_, k) => {
+        const a = (k * 360 / PARTICLES - 90) * (Math.PI / 180);
+        const [x0, y0] = [r1(HEART_X + BURST_FROM * Math.cos(a)), r1(HEART_Y + BURST_FROM * Math.sin(a))];
+        const [x1, y1] = [r1(HEART_X + BURST_TO * Math.cos(a)), r1(HEART_Y + BURST_TO * Math.sin(a))];
+        return [
+          snap(`p${k}`, "r", 0, 0),
+          { id: `p${k}`, step: 1, attrs: { cx: [x0, x1], cy: [y0, y1], r: [4.5, 0] }, delay: 150, ms: 520, ease: "out" },
+          snap(`p${k}`, "cx", x0, 700),
+          snap(`p${k}`, "cy", y0, 700)
+        ];
+      }).flat(),
+      { id: "tally", step: 1, count: [n("count"), n("liked")], attrs: { fill: ["{{ink}}", "{{heart}}"] }, delay: 150, ms: 260, ease: "out" },
+      // Step 2, unlike: a small dip as it empties and the count goes back.
+      { id: "hg", step: 2, attrs: { transform: [heartPose(1), heartPose(0.86)] }, ms: 120, ease: "out" },
+      { id: "hg", step: 2, attrs: { transform: [heartPose(0.86), heartPose(1)] }, delay: 120, ms: 200, ease: "in-out" },
+      { id: "heartShape", step: 2, attrs: { "fill-opacity": [1, 0], stroke: ["{{heart}}", "{{outline}}"] }, ms: 180 },
+      { id: "tally", step: 2, count: [n("liked"), n("count")], attrs: { fill: ["{{heart}}", "{{ink}}"] }, ms: 220, ease: "out" }
+    ]
+  }
+};
+var toggleSwitch = {
+  kind: "vector",
+  id: "toggle-switch",
+  name: "Toggle switch",
+  description: "A switch whose knob slides across, squashing a little mid-slide, as the track blends to its on colour; the next click slides it back.",
+  category: "interaction",
+  tags: ["interactive", "ui", "click", "toggle", "switch", "settings", "micro-interaction"],
+  trigger: "click",
+  hold: 900,
+  presets: [
+    { name: "iOS", values: { on: [0.2, 0.78, 0.35] } },
+    { name: "Dark", values: { background: [0.06, 0.07, 0.1], off: [0.22, 0.24, 0.3], on: [0.55, 0.45, 1], knob: [0.96, 0.96, 1] } }
+  ],
+  motion: (() => {
+    const slide = (from, to, step) => [
+      { id: "slide", step, attrs: { transform: [`translate(${from} 0)`, `translate(${to} 0)`] }, ms: 320, ease: "in-out" },
+      // Stretched along the slide and flattened halfway, round again at the end.
+      { id: "knob", step, attrs: { rx: [19, 24], ry: [19, 16.5] }, ms: 160, ease: "out" },
+      { id: "knob", step, attrs: { rx: [24, 19], ry: [16.5, 19] }, delay: 160, ms: 160, ease: "in-out" }
+    ];
+    return {
+      svg: `<svg viewBox="0 0 200 120"><!-- {{background: color default=#FFFFFF label='Background'}} {{off: color default=#D1D5DB label='Track off'}} {{on: color default=#6366F1 label='Track on'}} {{knob: color default=#FFFFFF label='Knob'}} --><rect width="200" height="120" fill="{{background}}"/><rect id="track" x="40" y="35" width="120" height="50" rx="25" fill="{{off}}"/><g id="slide" transform="translate(0 0)"><ellipse cx="65" cy="62.5" rx="18" ry="18" fill="#000000" opacity="0.16"/><ellipse id="knob" cx="65" cy="60" rx="19" ry="19" fill="{{knob}}"/></g></svg>`,
+      animate: [
+        ...slide(0, 70, 1),
+        { id: "track", step: 1, attrs: { fill: ["{{off}}", "{{on}}"] }, ms: 320, ease: "in-out" },
+        ...slide(70, 0, 2),
+        { id: "track", step: 2, attrs: { fill: ["{{on}}", "{{off}}"] }, ms: 320, ease: "in-out" }
+      ]
+    };
+  })()
+};
+var checkbox = {
+  kind: "vector",
+  id: "checkbox",
+  name: "Checkbox",
+  description: "A labelled checkbox that fills with a press and draws its tick on, then undraws it and empties on the next click.",
+  category: "interaction",
+  tags: ["interactive", "ui", "click", "checkbox", "form", "toggle", "todo", "micro-interaction"],
+  trigger: "click",
+  hold: 900,
+  presets: [
+    { name: "Green", values: { accent: [0.13, 0.7, 0.4] } },
+    { name: "Dark", values: { background: [0.06, 0.07, 0.1], border: [0.4, 0.43, 0.5], ink: [0.92, 0.93, 0.96], accent: [0.95, 0.6, 0.15], tick: [0.06, 0.07, 0.1] } }
+  ],
+  derived: (v) => {
+    const { size, length } = fit(v.label, 216, 24);
+    return { size, length, base: r1(60 + size * 0.35) };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 320 120"><!-- {{label: text default='Remember me' label='Label'}} {{background: color default=#FFFFFF label='Background'}} {{border: color default=#9CA3AF label='Border'}} {{accent: color default=#6366F1 label='Checked'}} {{tick: color default=#FFFFFF label='Tick'}} {{ink: color default=#111827 label='Label colour'}} --><rect width="320" height="120" fill="{{background}}"/><g id="boxg" transform="${about(48, 60, 1)}"><rect id="box" x="30" y="42" width="36" height="36" rx="9" fill="{{accent}}" fill-opacity="0" stroke="{{border}}" stroke-width="3"/><path id="tick" d="M39 60.5 L45.5 67 L58 53.5" fill="none" stroke="{{tick}}" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round" opacity="0"/></g><text x="84" y="{{base}}" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="${SANS}" font-size="{{size}}" font-weight="500" fill="{{ink}}">{{label}}</text></svg>`,
+    animate: [
+      // Step 1, check: the box dips as it fills, then the tick draws on.
+      { id: "boxg", step: 1, attrs: { transform: [about(48, 60, 1), about(48, 60, 0.86)] }, ms: 100, ease: "out" },
+      { id: "boxg", step: 1, attrs: { transform: [about(48, 60, 0.86), about(48, 60, 1)] }, delay: 100, ms: 220, ease: "in-out" },
+      { id: "box", step: 1, attrs: { "fill-opacity": [0, 1], stroke: ["{{border}}", "{{accent}}"] }, ms: 160 },
+      // Shown only once it starts drawing: a round cap would leave a dot.
+      { id: "tick", step: 1, attrs: { opacity: [0, 1] }, delay: 120, ms: 40 },
+      { id: "tick", step: 1, draw: true, delay: 120, ms: 260, ease: "out" },
+      // Step 2, uncheck: the tick undraws, then the box empties.
+      { id: "tick", step: 2, draw: [1, 0], ms: 160, ease: "in-out" },
+      { id: "tick", step: 2, attrs: { opacity: [1, 0] }, delay: 140, ms: 30 },
+      { id: "box", step: 2, attrs: { "fill-opacity": [1, 0], stroke: ["{{accent}}", "{{border}}"] }, delay: 100, ms: 180 },
+      { id: "boxg", step: 2, attrs: { transform: [about(48, 60, 1), about(48, 60, 0.92)] }, delay: 100, ms: 90, ease: "out" },
+      { id: "boxg", step: 2, attrs: { transform: [about(48, 60, 0.92), about(48, 60, 1)] }, delay: 190, ms: 160, ease: "in-out" }
+    ]
+  }
+};
+function capsule(p, q, width, flatEnd = false) {
+  const h = width / 2;
+  const a = Math.atan2(q[1] - p[1], q[0] - p[0]);
+  const pts = [];
+  const cap = (c, from) => {
+    for (let k = 0; k <= 8; k++) {
+      const t = from + k * Math.PI / 8;
+      pts.push([c[0] + h * Math.cos(t), c[1] + h * Math.sin(t)]);
+    }
+  };
+  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`;
+}
+var menuMorphs = /* @__PURE__ */ new Map();
+function menuMorph(weight) {
+  if (!menuMorphs.has(weight)) {
+    const bars = [7, 12, 17].map((y) => capsule([5, y], [19, y], weight)).join(" ");
+    const meet = (weight / 2 + 0.05) / Math.SQRT2;
+    const cross = [
+      capsule([6.5, 6.5], [17.5, 17.5], weight),
+      capsule([17.5, 6.5], [12 + meet, 12 - meet], weight, true),
+      capsule([6.5, 17.5], [12 - meet, 12 + meet], weight, true)
+    ].join(" ");
+    menuMorphs.set(weight, morphPaths(bars, cross, { points: 48 }));
+  }
+  return menuMorphs.get(weight);
+}
+var menuPose = (turn) => `translate(60 60) rotate(${turn}) scale(3) translate(-12 -12)`;
+var menuToggle = {
+  kind: "vector",
+  id: "menu-toggle",
+  name: "Menu toggle",
+  description: "A hamburger menu button whose three bars morph into a close cross as it spins half a turn, and back on the next click.",
+  category: "interaction",
+  tags: ["interactive", "ui", "click", "menu", "hamburger", "close", "morph", "navigation", "micro-interaction"],
+  trigger: "click",
+  hold: 900,
+  presets: [
+    { name: "Light", values: { background: [1, 1, 1], button: [0.95, 0.96, 0.97], active: [0.07, 0.09, 0.15], ink: [0.07, 0.09, 0.15], activeInk: [1, 1, 1] } },
+    { name: "Bold", values: { weight: 3, button: [0.98, 0.8, 0.1], active: [0.95, 0.3, 0.2], ink: [0.1, 0.1, 0.1], activeInk: [1, 1, 1] } }
+  ],
+  derived: (v) => {
+    const [bars, cross] = menuMorph(Math.round(Number(v.weight) * 4) / 4);
+    return { bars, cross };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 120 120"><!-- {{weight: float min=1 max=3.5 default=2 step=0.25 label='Line weight'}} {{background: color default=#0F172A label='Background'}} {{button: color default=#1E293B label='Button'}} {{active: color default=#6366F1 label='Button open'}} {{ink: color default=#F8FAFC label='Icon'}} {{activeInk: color default=#FFFFFF label='Icon open'}} --><rect width="120" height="120" fill="{{background}}"/><rect id="bg" x="16" y="16" width="88" height="88" rx="24" fill="{{button}}"/><g id="icon" transform="${menuPose(0)}"><path id="glyph" d="{{bars}}" fill="{{ink}}" fill-rule="evenodd"/></g></svg>`,
+    animate: [
+      // Step 1, open: bars to cross while turning half a turn.
+      { id: "glyph", step: 1, attrs: { d: ["{{bars}}", "{{cross}}"], fill: ["{{ink}}", "{{activeInk}}"] }, ms: 450, ease: "in-out" },
+      { id: "icon", step: 1, attrs: { transform: [menuPose(0), menuPose(180)] }, ms: 450, ease: "in-out" },
+      { id: "bg", step: 1, attrs: { fill: ["{{button}}", "{{active}}"] }, ms: 300, ease: "in-out" },
+      // Step 2, close: on round the same way (-180° looks like 180°), ending where it started.
+      { id: "glyph", step: 2, attrs: { d: ["{{cross}}", "{{bars}}"], fill: ["{{activeInk}}", "{{ink}}"] }, ms: 450, ease: "in-out" },
+      { id: "icon", step: 2, attrs: { transform: [menuPose(-180), menuPose(0)] }, ms: 450, ease: "in-out" },
+      { id: "bg", step: 2, attrs: { fill: ["{{active}}", "{{button}}"] }, ms: 300, ease: "in-out" }
+    ]
+  }
+};
+var BOOKMARK = "M41 22 H79 Q84 22 84 27 V98 L60 81 L36 98 V27 Q36 22 41 22 Z";
+var bounce = (y) => `translate(0 ${y})`;
+var bookmark = {
+  kind: "vector",
+  id: "bookmark",
+  name: "Bookmark",
+  description: "A bookmark that hops and fills from top to bottom when saved, then drains and dips when unsaved.",
+  category: "interaction",
+  tags: ["interactive", "ui", "click", "bookmark", "save", "toggle", "micro-interaction"],
+  trigger: "click",
+  hold: 900,
+  presets: [
+    { name: "Gold", values: { fill: [0.98, 0.72, 0.1] } },
+    { name: "Dark", values: { background: [0.06, 0.07, 0.1], outline: [0.6, 0.63, 0.7], fill: [0.4, 0.8, 1] } }
+  ],
+  motion: {
+    svg: `<svg viewBox="0 0 120 120"><!-- {{background: color default=#FFFFFF label='Background'}} {{outline: color default=#6B7280 label='Outline'}} {{fill: color default=#6366F1 label='Saved'}} --><defs><clipPath id="fillClip"><rect id="level" x="30" y="18" width="60" height="0"/></clipPath></defs><rect width="120" height="120" fill="{{background}}"/><g id="mark" transform="${bounce(0)}"><path d="${BOOKMARK}" fill="{{fill}}" clip-path="url(#fillClip)"/><path id="edge" d="${BOOKMARK}" fill="none" stroke="{{outline}}" stroke-width="4" stroke-linejoin="round"/></g></svg>`,
+    animate: [
+      // Step 1, save: a hop, a drop past rest and a settle, filling top down.
+      { id: "mark", step: 1, attrs: { transform: [bounce(0), bounce(-7)] }, ms: 130, ease: "out" },
+      { id: "mark", step: 1, attrs: { transform: [bounce(-7), bounce(4)] }, delay: 130, ms: 170, ease: "in-out" },
+      { id: "mark", step: 1, attrs: { transform: [bounce(4), bounce(0)] }, delay: 300, ms: 200, ease: "in-out" },
+      { id: "level", step: 1, attrs: { height: [0, 84] }, delay: 60, ms: 380, ease: "in-out" },
+      { id: "edge", step: 1, attrs: { stroke: ["{{outline}}", "{{fill}}"] }, ms: 200 },
+      // Step 2, unsave: drains top down (then the empty clip snaps back up) with a small dip.
+      { id: "level", step: 2, attrs: { y: [18, 102], height: [84, 0] }, ms: 320, ease: "in-out" },
+      snap("level", "y", 18, 320, 2),
+      { id: "mark", step: 2, attrs: { transform: [bounce(0), bounce(3)] }, ms: 120, ease: "out" },
+      { id: "mark", step: 2, attrs: { transform: [bounce(3), bounce(0)] }, delay: 120, ms: 180, ease: "in-out" },
+      { id: "edge", step: 2, attrs: { stroke: ["{{fill}}", "{{outline}}"] }, delay: 100, ms: 200 }
+    ]
+  }
+};
+var swapLabels = (outAt, back) => [
+  { id: "label", step: 1, attrs: { opacity: [1, 0], transform: ["translate(0 0)", "translate(0 -10)"] }, delay: outAt, ms: 180, ease: "out" },
+  { id: "done", step: 1, attrs: { opacity: [0, 1], transform: ["translate(0 10)", "translate(0 0)"] }, delay: outAt + 120, ms: 220, ease: "out" },
+  { id: "done", step: 1, attrs: { opacity: [1, 0], transform: ["translate(0 0)", "translate(0 -10)"] }, delay: back, ms: 180, ease: "out" },
+  { 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 = (at, back) => [
+  { id: "check", step: 1, attrs: { opacity: [0, 1] }, delay: at, ms: 40 },
+  { id: "check", step: 1, draw: true, delay: at, 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 }
+];
+var buttonLabels = (a, b, room, max) => {
+  const ems = [a, b].map((t) => Math.max(0.6, textWidthEm(String(t))));
+  const size = Math.min(max, room / Math.max(...ems));
+  return { size: r1(size), base: r1(50 + size * 0.35), labelLen: r1(ems[0] * size), doneLen: r1(ems[1] * size) };
+};
+var labelTexts = (x) => `<text id="label" x="${x}" y="{{base}}" textLength="{{labelLen}}" lengthAdjust="spacingAndGlyphs" transform="translate(0 0)" font-family="${SANS}" font-size="{{size}}" font-weight="600" fill="{{ink}}">{{label}}</text><text id="done" x="${x}" y="{{base}}" textLength="{{doneLen}}" lengthAdjust="spacingAndGlyphs" transform="translate(0 10)" opacity="0" font-family="${SANS}" font-size="{{size}}" font-weight="600" fill="{{ink}}">{{doneText}}</text>`;
+var COPY_BACK = 1600;
+var copyPose = (s) => `translate(54 50) scale(${r2(1.2 * s)}) translate(-12 -12)`;
+var copyButton = {
+  kind: "vector",
+  id: "copy-button",
+  name: "Copy button",
+  description: "A copy button whose icon shrinks away for a drawn check and a \u201CCopied!\u201D label, turning back by itself a moment later.",
+  category: "interaction",
+  tags: ["interactive", "ui", "click", "copy", "clipboard", "feedback", "button", "micro-interaction"],
+  trigger: "click",
+  hold: 600,
+  presets: [
+    { name: "Light", values: { background: [1, 1, 1], button: [0.95, 0.96, 0.97], success: [0.86, 0.97, 0.9], ink: [0.07, 0.09, 0.15] } },
+    { name: "Code", values: { label: "Copy code", doneText: "Copied to clipboard", button: [0.2, 0.22, 0.28] } }
+  ],
+  derived: (v) => buttonLabels(v.label, v.doneText, 126, 19),
+  motion: {
+    svg: `<svg viewBox="0 0 240 100"><!-- {{label: text default='Copy' label='Label'}} {{doneText: text default='Copied!' label='Copied label'}} {{background: color default=#0F172A label='Background'}} {{button: color default=#1E293B label='Button'}} {{success: color default=#166534 label='Copied'}} {{ink: color default=#F8FAFC label='Text and icon'}} --><rect width="240" height="100" fill="{{background}}"/><rect id="btn" x="20" y="24" width="200" height="52" rx="14" fill="{{button}}"/><g id="copy" transform="${copyPose(1)}" opacity="1" fill="none" stroke="{{ink}}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="8.5" y="8.5" width="11.5" height="11.5" rx="2.5"/><path d="M4.5 15.5 V6.5 C4.5 5.4 5.4 4.5 6.5 4.5 H15.5"/></g><g transform="${copyPose(1)}"><path id="check" d="M5 12.5 L10 17.5 L19 7" fill="none" stroke="{{ink}}" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" opacity="0"/></g>${labelTexts(80)}</svg>`,
+    animate: [
+      // One step that returns by itself: each click replays it.
+      { id: "copy", step: 1, attrs: { transform: [copyPose(1), copyPose(0.3)], opacity: [1, 0] }, ms: 180, ease: "out" },
+      { id: "btn", step: 1, attrs: { fill: ["{{button}}", "{{success}}"] }, ms: 200 },
+      ...checkFlash(150, COPY_BACK),
+      ...swapLabels(0, COPY_BACK),
+      { id: "copy", step: 1, attrs: { transform: [copyPose(0.3), copyPose(1)], opacity: [0, 1] }, delay: COPY_BACK + 80, ms: 260, ease: "out" },
+      { id: "btn", step: 1, attrs: { fill: ["{{success}}", "{{button}}"] }, delay: COPY_BACK, ms: 300 }
+    ]
+  }
+};
+var SEND_BACK = 1800;
+var planeScale = (s) => `scale(${r2(s)}) translate(-12 -12)`;
+var sendButton = {
+  kind: "vector",
+  id: "send-button",
+  name: "Send button",
+  description: "A send button whose paper plane winds up and flies off up and to the right as the label turns to \u201CSent\u201D with a check, then it resets.",
+  category: "interaction",
+  tags: ["interactive", "ui", "click", "send", "submit", "message", "button", "micro-interaction"],
+  trigger: "click",
+  hold: 600,
+  presets: [
+    { name: "Sky", values: { button: [0.05, 0.6, 0.9], success: [0.05, 0.45, 0.7] } },
+    { name: "Mail", values: { label: "Send email", doneText: "Delivered", button: [0.9, 0.3, 0.25], success: [0.13, 0.6, 0.35] } }
+  ],
+  derived: (v) => buttonLabels(v.label, v.doneText, 120, 20),
+  motion: {
+    svg: `<svg viewBox="0 0 240 100"><!-- {{label: text default='Send' label='Label'}} {{doneText: text default='Sent' label='Sent label'}} {{background: color default=#FFFFFF label='Background'}} {{button: color default=#4F46E5 label='Button'}} {{success: color default=#16A34A label='Sent'}} {{ink: color default=#FFFFFF label='Text and icon'}} --><rect width="240" height="100" fill="{{background}}"/><rect id="btn" x="20" y="24" width="200" height="52" rx="26" fill="{{button}}"/><path id="flight" d="M56 50 C88 46 150 22 262 -36" fill="none"/><g transform="translate(56 50) scale(1.1) translate(-12 -12)"><path id="check" d="M5 12.5 L10 17.5 L19 7" fill="none" stroke="{{ink}}" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" opacity="0"/></g>${labelTexts(82)}<g id="plane" transform="translate(56 50)"><g id="planeIcon" transform="${planeScale(1.05)}" opacity="1"><path d="M22 2 L15 22 L11 13 L2 9 Z" fill="{{ink}}" stroke="{{ink}}" stroke-width="1.5" stroke-linejoin="round"/><path d="M22 2 L11 13" stroke="{{button}}" stroke-width="1.5" stroke-linecap="round"/></g></g></svg>`,
+    animate: [
+      // Wind up, then fly off along the curve, shrinking and fading.
+      { id: "planeIcon", step: 1, attrs: { transform: [planeScale(1.05), planeScale(0.88)] }, ms: 120, ease: "out" },
+      { id: "plane", step: 1, along: "flight", delay: 120, ms: 600, ease: "in-out" },
+      { id: "planeIcon", step: 1, attrs: { transform: [planeScale(0.88), planeScale(0.5)] }, delay: 120, ms: 600, ease: "in-out" },
+      { id: "planeIcon", step: 1, attrs: { opacity: [1, 0] }, delay: 520, ms: 200 },
+      { id: "btn", step: 1, attrs: { fill: ["{{button}}", "{{success}}"] }, delay: 450, ms: 250 },
+      ...swapLabels(150, SEND_BACK),
+      ...checkFlash(500, SEND_BACK),
+      // Back home: the plane pops in where it started.
+      { id: "plane", step: 1, along: "flight", at: [0, 0], delay: SEND_BACK, ms: 0 },
+      { id: "planeIcon", step: 1, attrs: { transform: [planeScale(0), planeScale(1.05)], opacity: [0, 1] }, delay: SEND_BACK + 100, ms: 300, ease: "out" },
+      { id: "btn", step: 1, attrs: { fill: ["{{success}}", "{{button}}"] }, delay: SEND_BACK, ms: 300 }
+    ]
+  }
+};
+var [ARROW, RING] = morphPaths(
+  "M10.6 4 H13.4 V11.6 H17.2 L12 17 L6.8 11.6 H10.6 Z M5 18.6 H19 V20.6 H5 Z",
+  (() => {
+    const circle2 = (r) => `M${Array.from({ length: 48 }, (_, k) => {
+      const a = k / 48 * Math.PI * 2 - Math.PI / 2;
+      return `${r2(12 + r * Math.cos(a))} ${r2(12 + r * Math.sin(a))}`;
+    }).join(" L")} Z`;
+    return `${circle2(9.6)} ${circle2(8)}`;
+  })(),
+  { points: 56 }
+);
+var RING_R = r2(8.8 * 2.2);
+var DOWNLOAD_BACK = 2300;
+var iconAt = (y) => `translate(60 ${y}) scale(2.2) translate(-12 -12)`;
+var downloadButton = {
+  kind: "vector",
+  id: "download-button",
+  name: "Download button",
+  description: "A round download button whose arrow drops and morphs into a progress ring that fills, ends on a check, then resets.",
+  category: "interaction",
+  tags: ["interactive", "ui", "click", "download", "progress", "morph", "button", "micro-interaction"],
+  trigger: "click",
+  hold: 600,
+  presets: [
+    { name: "Light", values: { background: [1, 1, 1], button: [0.93, 0.95, 1], ink: [0.31, 0.27, 0.9], track: [0.78, 0.8, 0.95], progress: [0.31, 0.27, 0.9], success: [0.86, 0.97, 0.9] } },
+    { name: "Ocean", values: { button: [0.03, 0.4, 0.6], progress: [0.4, 0.95, 0.85], success: [0.05, 0.55, 0.5] } }
+  ],
+  motion: {
+    svg: `<svg viewBox="0 0 120 120"><!-- {{background: color default=#0F172A label='Background'}} {{button: color default=#4F46E5 label='Button'}} {{success: color default=#16A34A label='Done'}} {{ink: color default=#FFFFFF label='Icon'}} {{track: color default=#818CF8 label='Ring track'}} {{progress: color default=#FFFFFF label='Progress'}} --><rect width="120" height="120" fill="{{background}}"/><circle id="btn" cx="60" cy="60" r="42" fill="{{button}}"/><g id="icon" transform="${iconAt(60)}"><path id="glyph" d="${ARROW}" fill="{{ink}}" fill-rule="evenodd"/></g><circle id="bar" cx="60" cy="60" r="${RING_R}" fill="none" stroke="{{progress}}" stroke-width="3.6" transform="rotate(-90 60 60)"/><g transform="translate(60 60) scale(1.5) translate(-12 -12)"><path id="check" d="M6 12.5 L10.5 17 L18.5 8" fill="none" stroke="{{ink}}" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" opacity="0"/></g></svg>`,
+    animate: [
+      // The arrow drops, then rises back as it morphs into the ring's track.
+      { id: "icon", step: 1, attrs: { transform: [iconAt(60), iconAt(67)] }, ms: 180, ease: "out" },
+      { id: "icon", step: 1, attrs: { transform: [iconAt(67), iconAt(60)] }, delay: 180, ms: 260, ease: "in-out" },
+      { id: "glyph", step: 1, attrs: { d: [ARROW, RING], fill: ["{{ink}}", "{{track}}"] }, delay: 180, ms: 340, ease: "in-out" },
+      // Progress round the ring (a flat-ended line, so nothing shows at 0), then a check.
+      { id: "bar", step: 1, draw: true, delay: 520, ms: 900, ease: "in-out" },
+      { id: "btn", step: 1, attrs: { fill: ["{{button}}", "{{success}}"] }, delay: 1400, ms: 250 },
+      { id: "check", step: 1, attrs: { opacity: [0, 1] }, delay: 1450, ms: 40 },
+      { id: "check", step: 1, draw: true, delay: 1450, ms: 300, ease: "out" },
+      // Reset: check and ring fade, the track morphs back into the arrow.
+      { id: "check", step: 1, attrs: { opacity: [1, 0] }, delay: DOWNLOAD_BACK, ms: 150 },
+      { id: "bar", step: 1, attrs: { opacity: [1, 0] }, delay: DOWNLOAD_BACK, ms: 200 },
+      { id: "check", step: 1, draw: [0, 0], delay: DOWNLOAD_BACK + 200, ms: 0 },
+      { id: "bar", step: 1, draw: [0, 0], delay: DOWNLOAD_BACK + 200, ms: 0 },
+      snap("bar", "opacity", 1, DOWNLOAD_BACK + 200),
+      { id: "glyph", step: 1, attrs: { d: [RING, ARROW], fill: ["{{track}}", "{{ink}}"] }, delay: DOWNLOAD_BACK + 100, ms: 420, ease: "in-out" },
+      { id: "btn", step: 1, attrs: { fill: ["{{success}}", "{{button}}"] }, delay: DOWNLOAD_BACK, ms: 300 }
+    ]
+  }
+};
+var linkHover = {
+  kind: "vector",
+  id: "link-hover",
+  name: "Link hover",
+  description: "A text link whose underline grows from left to right on hover, its arrow nudging right as the text changes colour.",
+  category: "interaction",
+  tags: ["interactive", "ui", "hover", "link", "underline", "navigation", "micro-interaction"],
+  trigger: "hover",
+  hold: 800,
+  presets: [
+    { name: "Dark", values: { background: [0.06, 0.07, 0.1], ink: [0.85, 0.87, 0.92], hover: [0.4, 0.85, 1] } },
+    { name: "Editorial", values: { text: "Continue reading", ink: [0.1, 0.1, 0.1], hover: [0.85, 0.2, 0.15] } }
+  ],
+  // The text and its arrow centred together; the arrow is drawn round (0, 0) and placed.
+  derived: (v) => {
+    const { size, length } = fit(v.text, 230, 28);
+    const total = length + size * 1.05;
+    const left = 160 - total / 2;
+    const base = 50 + size * 0.35;
+    const ax = left + length + size * 0.35;
+    const ay = base - size * 0.33;
+    const s = size / 28;
+    return {
+      size,
+      length,
+      left: r1(left),
+      base: r1(base),
+      lineY: r1(base + size * 0.2),
+      lineH: r1(Math.max(2, size * 0.08)),
+      arrowAt: `translate(${r1(ax)} ${r1(ay)}) scale(${r2(s)})`,
+      arrowTo: `translate(${r1(ax + size * 0.25)} ${r1(ay)}) scale(${r2(s)})`
+    };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 320 100"><!-- {{text: text default='Read the docs' label='Link text'}} {{background: color default=#FFFFFF label='Background'}} {{ink: color default=#1F2937 label='Text colour'}} {{hover: color default=#4F46E5 label='Hover colour'}} --><rect width="320" height="100" fill="{{background}}"/><text id="link" x="{{left}}" y="{{base}}" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="${SANS}" font-size="{{size}}" font-weight="600" fill="{{ink}}">{{text}}</text><rect id="under" x="{{left}}" y="{{lineY}}" width="0" height="{{lineH}}" rx="1" fill="{{hover}}"/><g id="arrow" transform="{{arrowAt}}"><path id="arrowPath" d="M0 0 H18 M11 -7 L18 0 L11 7" fill="none" stroke="{{ink}}" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></g></svg>`,
+    animate: [
+      { id: "link", attrs: { fill: ["{{ink}}", "{{hover}}"] }, ms: 220 },
+      { id: "under", attrs: { width: [0, n("length")] }, ms: 320, ease: "out" },
+      { id: "arrow", attrs: { transform: ["{{arrowAt}}", "{{arrowTo}}"] }, ms: 300, ease: "out" },
+      { id: "arrowPath", attrs: { stroke: ["{{ink}}", "{{hover}}"] }, ms: 220 }
+    ]
+  }
+};
+var buttonHoverFill = {
+  kind: "vector",
+  id: "button-hover-fill",
+  name: "Button hover fill",
+  description: "An outlined pill button that fills with a slanted sweep from the left on hover, its label inverting colour as the fill passes.",
+  category: "interaction",
+  tags: ["interactive", "ui", "hover", "button", "fill", "cta", "micro-interaction"],
+  trigger: "hover",
+  hold: 800,
+  presets: [
+    { name: "Dark", values: { background: [0.06, 0.07, 0.1], surface: [0.06, 0.07, 0.1], accent: [0.98, 0.8, 0.2] } },
+    { name: "Coral", values: { label: "Book a demo", accent: [0.96, 0.35, 0.3] } }
+  ],
+  derived: (v) => {
+    const { size, length } = fit(v.label, 190, 22);
+    return { size, length, base: r1(60 + size * 0.35) };
+  },
+  motion: (() => {
+    const sweep = (x) => `M10 26 H${x} L${x - 24} 94 H10 Z`;
+    const label = (fill, clip = "") => `<text x="160" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="${SANS}" font-size="{{size}}" font-weight="700" letter-spacing="0.5" fill="${fill}"${clip}>{{label}}</text>`;
+    return {
+      svg: `<svg viewBox="0 0 320 120"><!-- {{label: text default='Get started' label='Label'}} {{background: color default=#FFFFFF label='Background'}} {{surface: color default=#FFFFFF label='Button'}} {{accent: color default=#4F46E5 label='Accent'}} --><defs><clipPath id="swept"><path id="cover" d="${sweep(40)}"/></clipPath></defs><rect width="320" height="120" fill="{{background}}"/><g id="btn" transform="translate(0 0)"><rect x="40" y="30" width="240" height="60" rx="30" fill="{{surface}}" stroke="{{accent}}" stroke-width="2.5"/><rect x="40" y="30" width="240" height="60" rx="30" fill="{{accent}}" stroke="{{accent}}" stroke-width="2.5" clip-path="url(#swept)"/>${label("{{accent}}")}${label("{{surface}}", ` clip-path="url(#swept)"`)}</g></svg>`,
+      animate: [
+        { id: "cover", attrs: { d: [sweep(40), sweep(310)] }, ms: 380, ease: "in-out" },
+        { id: "btn", attrs: { transform: ["translate(0 0)", "translate(0 -2)"] }, ms: 240, ease: "out" }
+      ]
+    };
+  })()
+};
+var tipPose = (s, dy) => `translate(160 ${104 + dy}) scale(${r2(s)}) translate(-160 -104)`;
+var tooltipPop = {
+  kind: "vector",
+  id: "tooltip-pop",
+  name: "Tooltip pop",
+  description: "A small help badge that pops a tooltip bubble up above it on hover, rising and fading in with a slight overshoot.",
+  category: "interaction",
+  tags: ["interactive", "ui", "hover", "tooltip", "help", "popover", "micro-interaction"],
+  trigger: "hover",
+  hold: 800,
+  presets: [
+    { name: "Light", values: { background: [0.97, 0.97, 0.98], bubble: [1, 1, 1], tipInk: [0.1, 0.1, 0.15], badge: [0.6, 0.63, 0.7] } },
+    { name: "Warning", values: { tip: "This can't be undone", accent: [0.95, 0.4, 0.15], bubble: [0.95, 0.4, 0.15], tipInk: [1, 1, 1] } }
+  ],
+  // The bubble is as wide as its text, centred over the badge.
+  derived: (v) => {
+    const { size, length } = fit(v.tip, 250, 15);
+    const w = length + 28;
+    return { size, length, bx: r1(160 - w / 2), bw: r1(w), tipY: r1(79 + size * 0.35) };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 320 180"><!-- {{tip: text default='Saved to your library' label='Tooltip'}} {{background: color default=#0F172A label='Background'}} {{badge: color default=#475569 label='Badge'}} {{accent: color default=#6366F1 label='Badge hovered'}} {{bubble: color default=#F8FAFC label='Bubble'}} {{tipInk: color default=#0F172A label='Tooltip text'}} --><rect width="320" height="180" fill="{{background}}"/><g id="tip" transform="${tipPose(0.5, 8)}" opacity="0"><rect x="{{bx}}" y="60" width="{{bw}}" height="38" rx="10" fill="{{bubble}}"/><path d="M151 96 L160 105 L169 96 Z" fill="{{bubble}}"/><text x="160" y="{{tipY}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="${SANS}" font-size="{{size}}" font-weight="500" fill="{{tipInk}}">{{tip}}</text></g><g id="badgeG" transform="${about(160, 134, 1)}"><circle id="badge" cx="160" cy="134" r="18" fill="{{badge}}"/><text x="160" y="141" text-anchor="middle" font-family="${SANS}" font-size="20" font-weight="700" fill="#FFFFFF">?</text></g></svg>`,
+    animate: [
+      { id: "tip", attrs: { transform: [tipPose(0.5, 8), tipPose(1.07, -3)] }, ms: 190, ease: "out" },
+      { id: "tip", attrs: { transform: [tipPose(1.07, -3), tipPose(1, 0)] }, delay: 190, ms: 150, ease: "in-out" },
+      { id: "tip", attrs: { opacity: [0, 1] }, ms: 150 },
+      { id: "badge", attrs: { fill: ["{{badge}}", "{{accent}}"] }, ms: 200 },
+      { id: "badgeG", attrs: { transform: [about(160, 134, 1), about(160, 134, 1.08)] }, ms: 200, ease: "out" }
+    ]
+  }
+};
+var pressButton = {
+  kind: "vector",
+  id: "press-button",
+  name: "Press button",
+  description: "A chunky 3D button whose face pushes down onto its base while held, its shadow tightening, and springs back up on release.",
+  category: "interaction",
+  tags: ["interactive", "ui", "press", "button", "3d", "tactile", "micro-interaction"],
+  trigger: "press",
+  hold: 800,
+  presets: [
+    { name: "Arcade red", values: { face: [0.94, 0.27, 0.27], background: [0.1, 0.09, 0.12] } },
+    { name: "Mint", values: { face: [0.3, 0.85, 0.6], ink: [0.05, 0.25, 0.15], label: "Let's go" } }
+  ],
+  derived: (v) => {
+    const { size, length } = fit(v.label, 170, 22);
+    return { size, length, base: r1(67 + size * 0.35), side: mixHex(v.face, [0, 0, 0], 0.35), pressed: mixHex(v.face, [0, 0, 0], 0.08) };
+  },
+  // Played backwards on release, the brief lift at the start of the press becomes a spring past rest at the end.
+  motion: {
+    svg: `<svg viewBox="0 0 320 140"><!-- {{label: text default='Press me' label='Label'}} {{background: color default=#F1F5F9 label='Background'}} {{face: color default=#6366F1 label='Button'}} {{ink: color default=#FFFFFF label='Label colour'}} {{shadow: color default=#0F172A label='Shadow'}} --><rect width="320" height="140" fill="{{background}}"/><ellipse id="shadow" cx="160" cy="114" rx="108" ry="9" fill="{{shadow}}" opacity="0.3"/><rect x="60" y="50" width="200" height="58" rx="16" fill="{{side}}"/><g id="faceG" transform="translate(0 0)"><rect id="faceRect" x="60" y="38" width="200" height="58" rx="16" fill="{{face}}"/><text x="160" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="${SANS}" font-size="{{size}}" font-weight="800" fill="{{ink}}">{{label}}</text></g></svg>`,
+    animate: [
+      { id: "faceG", attrs: { transform: ["translate(0 0)", "translate(0 -1.5)"] }, ms: 40, ease: "out" },
+      { id: "faceG", attrs: { transform: ["translate(0 -1.5)", "translate(0 9)"] }, delay: 40, ms: 90, ease: "out" },
+      { id: "shadow", attrs: { rx: [108, 96], ry: [9, 5], opacity: [0.3, 0.18] }, delay: 40, ms: 90, ease: "out" },
+      { id: "faceRect", attrs: { fill: ["{{face}}", "{{pressed}}"] }, delay: 40, ms: 90 }
+    ]
+  }
+};
+var interactionEffects = [
+  likeButton,
+  toggleSwitch,
+  checkbox,
+  menuToggle,
+  bookmark,
+  copyButton,
+  sendButton,
+  downloadButton,
+  linkHover,
+  buttonHoverFill,
+  tooltipPop,
+  pressButton
+];
+
 // src/catalog/morph.ts
 var NUMBER = /-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?/gi;
 var DEG = Math.PI / 180;
-var r2 = (v) => {
+var r22 = (v) => {
   const r = Math.round(v * 100) / 100;
   return Object.is(r, -0) ? 0 : r;
 };
-var n = (name) => `{{${name}}}`;
+var n2 = (name) => `{{${name}}}`;
 var pointsOf = (d) => {
   const nums = (d.match(NUMBER) ?? []).map(Number);
   return Array.from({ length: nums.length >> 1 }, (_, i) => [nums[2 * i], nums[2 * i + 1]]);
@@ -1482,10 +2003,10 @@ function mapPath(d, f) {
   let i = 0;
   return d.replace(NUMBER, () => {
     const k = i++;
-    return String(r2(moved[k >> 1][k % 2]));
+    return String(r22(moved[k >> 1][k % 2]));
   });
 }
-var polyline = (pts, close = false) => `M${pts.map((p) => `${r2(p[0])} ${r2(p[1])}`).join(" L")}${close ? " Z" : ""}`;
+var polyline = (pts, close = false) => `M${pts.map((p) => `${r22(p[0])} ${r22(p[1])}`).join(" L")}${close ? " Z" : ""}`;
 function arc(cx, cy, rx, ry, from, to, every = 8) {
   const steps = Math.max(1, Math.ceil(Math.abs(to - from) / every));
   return Array.from({ length: steps + 1 }, (_, k) => {
@@ -1532,20 +2053,20 @@ function around(c, r, from, to, avoid) {
   if (((avoid - from) % 360 + 360) % 360 < delta) delta -= 360;
   return arc(c[0], c[1], r, r, from, from + delta);
 }
-function crescent(c1, r12, c2, r2_) {
+function crescent(c1, r13, c2, r2_) {
   const [dx, dy] = [c2[0] - c1[0], c2[1] - c1[1]];
   const d = Math.hypot(dx, dy);
-  const a = (r12 * r12 - r2_ * r2_ + d * d) / (2 * d);
-  const h = Math.sqrt(Math.max(0, r12 * r12 - a * a));
+  const a = (r13 * r13 - r2_ * r2_ + d * d) / (2 * d);
+  const h = Math.sqrt(Math.max(0, r13 * r13 - 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 angle = (c, p) => Math.atan2(p[1] - c[1], p[0] - c[0]) / DEG;
-  const outer = around(c1, r12, angle(c1, i1), angle(c1, i2), angle(c1, c2));
+  const outer = around(c1, r13, 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 polyline([...outer, ...inner.slice(1, -1)], true);
 }
-var HEART2 = "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 HEART3 = "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) {
   const outline = morphSequence([d], { points })[0];
@@ -1596,8 +2117,8 @@ var shapeMorph = {
   motion: {
     svg: `<svg viewBox="0 0 100 100"><!-- {{from: text default='${SHAPE_FROM}' label='From path'}} {{to: text default='${SHAPE_TO}' label='To path'}} {{fillFrom: color default=#6366F1 label='Fill (from)'}} {{fillTo: color default=#F59E0B label='Fill (to)'}} {{strokeFrom: color default=#C7D2FE label='Outline (from)'}} {{strokeTo: color default=#FEF3C7 label='Outline (to)'}} {{background: color default=#0F172A label='Background'}} {{width: float min=0 max=6 default=1.5 step=0.25 label='Outline width'}} {{morph: float min=200 max=3000 default=1000 step=50 label='Morph ms'}} {{pause: float min=0 max=3000 default=700 step=50 label='Pause ms'}} --><rect width="100" height="100" fill="{{background}}"/><path id="shape" d="{{a}}" fill="{{fillFrom}}" fill-rule="evenodd" stroke="{{strokeFrom}}" stroke-width="{{width}}" stroke-linejoin="round"/></svg>`,
     animate: [
-      { id: "shape", attrs: { d: ["{{a}}", "{{b}}"], fill: ["{{fillFrom}}", "{{fillTo}}"], stroke: ["{{strokeFrom}}", "{{strokeTo}}"] }, delay: n("pause"), ms: n("morph"), ease: "in-out" },
-      { id: "shape", attrs: { d: ["{{b}}", "{{a}}"], fill: ["{{fillTo}}", "{{fillFrom}}"], stroke: ["{{strokeTo}}", "{{strokeFrom}}"] }, delay: n("back"), ms: n("morph"), ease: "in-out" }
+      { id: "shape", attrs: { d: ["{{a}}", "{{b}}"], fill: ["{{fillFrom}}", "{{fillTo}}"], stroke: ["{{strokeFrom}}", "{{strokeTo}}"] }, delay: n2("pause"), ms: n2("morph"), ease: "in-out" },
+      { id: "shape", attrs: { d: ["{{b}}", "{{a}}"], fill: ["{{fillTo}}", "{{fillFrom}}"], stroke: ["{{strokeTo}}", "{{strokeFrom}}"] }, delay: n2("back"), ms: n2("morph"), ease: "in-out" }
     ]
   }
 };
@@ -1624,7 +2145,7 @@ var ICON_PAIRS = (() => {
     ],
     ["M10.7 5 H13.3 V10.7 H19 V13.3 H13.3 V19 H10.7 V13.3 H5 V10.7 H10.7 Z", stroke([[5, 12.5], [10, 17.5], [19, 7]], 2.6)],
     [sun.join(" "), crescent([11.5, 12.5], 8.5, [16.5, 7.5], 7)],
-    [`${HEART2} ${placed(HEART2, 12, 12, 0.7)}`, HEART2]
+    [`${HEART3} ${placed(HEART3, 12, 12, 0.7)}`, HEART3]
   ];
 })();
 var iconMorphs = /* @__PURE__ */ new Map();
@@ -1665,7 +2186,7 @@ var iconToggle = {
   }
 };
 var SEQUENCE = morphSequence(
-  [circle(100, 100, 72), star(100, 104, 5, 82, 36), placed(HEART2, 100, 98, 8.4), star(100, 100, 3, 78, 78)],
+  [circle(100, 100, 72), star(100, 104, 5, 82, 36), placed(HEART3, 100, 98, 8.4), star(100, 100, 3, 78, 78)],
   { points: 96 }
 );
 var morphSequenceEffect = {
@@ -1688,7 +2209,7 @@ var morphSequenceEffect = {
     svg: `<svg viewBox="0 0 200 200"><!-- {{c0: color default=#38BDF8 label='Circle'}} {{c1: color default=#FACC15 label='Star'}} {{c2: color default=#F43F5E label='Heart'}} {{c3: color default=#A78BFA label='Hexagon'}} {{background: color default=#0F172A label='Background'}} {{morph: float min=200 max=3000 default=900 step=50 label='Morph ms'}} {{pause: float min=0 max=3000 default=500 step=50 label='Pause ms'}} --><rect width="200" height="200" fill="{{background}}"/><path id="shape" d="${SEQUENCE[0]}" fill="{{c0}}" fill-rule="evenodd"/></svg>`,
     animate: SEQUENCE.map((d, i) => {
       const next = (i + 1) % SEQUENCE.length;
-      return { id: "shape", attrs: { d: [d, SEQUENCE[next]], fill: [`{{c${i}}}`, `{{c${next}}}`] }, delay: n(`at${i}`), ms: n("morph"), ease: "in-out" };
+      return { id: "shape", attrs: { d: [d, SEQUENCE[next]], fill: [`{{c${i}}}`, `{{c${next}}}`] }, delay: n2(`at${i}`), ms: n2("morph"), ease: "in-out" };
     })
   }
 };
@@ -1729,13 +2250,13 @@ var gooeyMorph = {
   motion: {
     svg: `<svg viewBox="0 0 200 200"><!-- {{colorA: color default=#22D3EE label='Colour A'}} {{colorB: color default=#A855F7 label='Colour B'}} {{background: color default=#0B0B1A label='Background'}} {{goo: float min=1 max=14 default=7 step=0.5 label='Gooeyness'}} {{sharp: float min=8 max=40 default=20 step=1 label='Edge sharpness'}} {{morph: float min=300 max=3000 default=1200 step=50 label='Morph ms'}} {{pause: float min=0 max=3000 default=400 step=50 label='Pause ms'}} --><defs><linearGradient id="gooFill" gradientUnits="userSpaceOnUse" x1="30" y1="30" x2="170" y2="170"><stop offset="0" stop-color="{{colorA}}"/><stop offset="1" stop-color="{{colorB}}"/></linearGradient><filter id="goo" x="-20%" y="-20%" width="140%" height="140%"><feGaussianBlur in="SourceGraphic" stdDeviation="{{goo}}" result="soft"/><feColorMatrix in="soft" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 {{sharp}} {{threshold}}"/></filter></defs><rect width="200" height="200" fill="{{background}}"/><g filter="url(#goo)" fill="url(#gooFill)">${GOO.map((stages, i) => `<path id="goo${i}" d="${stages[0]}" fill-rule="evenodd"/>`).join("")}</g></svg>`,
     animate: GOO.flatMap(
-      (stages, i) => stages.map((d, s) => ({ id: `goo${i}`, attrs: { d: [d, stages[(s + 1) % stages.length]] }, delay: n(`at${s}`), ms: n("morph"), ease: "in-out" }))
+      (stages, i) => stages.map((d, s) => ({ id: `goo${i}`, attrs: { d: [d, stages[(s + 1) % stages.length]] }, delay: n2(`at${s}`), ms: n2("morph"), ease: "in-out" }))
     )
   }
 };
 var DOTS = 48;
 var DOT_STAGGER = 14;
-var PARTICLE_FROM = HEART2;
+var PARTICLE_FROM = HEART3;
 var PARTICLE_TO = star(12, 12, 5, 10, 4.2);
 var noise = (i) => {
   const x = Math.sin(i * 12.9898 + 4.1414) * 43758.5453;
@@ -1764,15 +2285,15 @@ var particleMorph = {
     for (let i = 0; i < DOTS; i++) {
       const k = Math.floor(i * pa.length / DOTS);
       const [p, q] = [pa[k], pb[k]];
-      out[`ax${i}`] = r2(p[0]);
-      out[`ay${i}`] = r2(p[1]);
-      out[`bx${i}`] = r2(q[0]);
-      out[`by${i}`] = r2(q[1]);
+      out[`ax${i}`] = r22(p[0]);
+      out[`ay${i}`] = r22(p[1]);
+      out[`bx${i}`] = r22(q[0]);
+      out[`by${i}`] = r22(q[1]);
       for (const [name, seed] of [["s", i], ["t", i + DOTS]]) {
         const angle = seed * 2.39996;
         const far = scatter * (0.45 + 0.55 * noise(seed));
-        out[`${name}x${i}`] = r2((p[0] + q[0]) / 2 + far * Math.cos(angle));
-        out[`${name}y${i}`] = r2((p[1] + q[1]) / 2 + far * Math.sin(angle));
+        out[`${name}x${i}`] = r22((p[0] + q[0]) / 2 + far * Math.cos(angle));
+        out[`${name}y${i}`] = r22((p[1] + q[1]) / 2 + far * Math.sin(angle));
       }
     }
     return out;
@@ -1781,10 +2302,10 @@ var particleMorph = {
     const back = 3e3;
     const spread = DOTS * DOT_STAGGER;
     const leg = (i, at, from, mid, to, colours) => [
-      { id: `p${i}`, attrs: { cx: [n(`${from}x${i}`), n(`${mid}x${i}`)], cy: [n(`${from}y${i}`), n(`${mid}y${i}`)] }, delay: at + i * DOT_STAGGER, ms: 450, ease: "out" },
-      { id: `p${i}`, attrs: { cx: [n(`${mid}x${i}`), n(`${to}x${i}`)], cy: [n(`${mid}y${i}`), n(`${to}y${i}`)], fill: colours }, delay: at + 450 + i * DOT_STAGGER, ms: 650, ease: "in-out" }
+      { id: `p${i}`, attrs: { cx: [n2(`${from}x${i}`), n2(`${mid}x${i}`)], cy: [n2(`${from}y${i}`), n2(`${mid}y${i}`)] }, delay: at + i * DOT_STAGGER, ms: 450, ease: "out" },
+      { id: `p${i}`, attrs: { cx: [n2(`${mid}x${i}`), n2(`${to}x${i}`)], cy: [n2(`${mid}y${i}`), n2(`${to}y${i}`)], fill: colours }, delay: at + 450 + i * DOT_STAGGER, ms: 650, ease: "in-out" }
     ];
-    const fade = (id, at, show) => ({ id, attrs: { opacity: show ? [0, n("ghost")] : [n("ghost"), 0] }, delay: at, ms: 450, ease: "in-out" });
+    const fade = (id, at, show) => ({ id, attrs: { opacity: show ? [0, n2("ghost")] : [n2("ghost"), 0] }, delay: at, 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: DOTS },
@@ -1845,11 +2366,11 @@ var digitMorph = {
     const left = 200 - (used * 22 - 2) * scale / 2;
     const interval = Number(v.morph) + DIGIT_REST;
     const lastEnd = Math.max(0, steps - 1) * interval + Number(v.morph);
-    const out = { scale: r2(scale), y: r2(100 - 16 * scale), back: lastEnd + DIGIT_REST * 3 };
+    const out = { scale: r22(scale), y: r22(100 - 16 * scale), back: lastEnd + DIGIT_REST * 3 };
     for (let k = 1; k <= MAX_STEPS; k++) out[`t${k}`] = k <= steps ? (k - 1) * interval : lastEnd;
     for (let j = 0; j < SLOTS; j++) {
       const place = j - (SLOTS - used);
-      out[`x${j}`] = r2(left + Math.max(0, place) * 22 * scale);
+      out[`x${j}`] = r22(left + Math.max(0, place) * 22 * scale);
       const glyphs = values.map((x) => {
         const text = String(x);
         const at = text.length - (used - place);
@@ -1872,15 +2393,575 @@ var digitMorph = {
     animate: Array.from({ length: SLOTS }, (_, j) => [
       ...Array.from({ length: MAX_STEPS }, (_2, i) => {
         const k = i + 1;
-        return { id: `s${j}`, attrs: { d: [`{{d${j}_${k - 1}}}`, `{{d${j}_${k}}}`], opacity: [n(`o${j}_${k - 1}`), n(`o${j}_${k}`)] }, delay: n(`t${k}`), ms: n("morph"), ease: "in-out" };
+        return { id: `s${j}`, attrs: { d: [`{{d${j}_${k - 1}}}`, `{{d${j}_${k}}}`], opacity: [n2(`o${j}_${k - 1}`), n2(`o${j}_${k}`)] }, delay: n2(`t${k}`), ms: n2("morph"), ease: "in-out" };
       }),
       // Back to the first number in one morph, so it loops.
-      { id: `s${j}`, attrs: { d: [`{{d${j}_${MAX_STEPS}}}`, `{{d${j}_0}}`], opacity: [n(`o${j}_${MAX_STEPS}`), n(`o${j}_0`)] }, delay: n("back"), ms: n("morph"), ease: "in-out" }
+      { id: `s${j}`, attrs: { d: [`{{d${j}_${MAX_STEPS}}}`, `{{d${j}_0}}`], opacity: [n2(`o${j}_${MAX_STEPS}`), n2(`o${j}_0`)] }, delay: n2("back"), ms: n2("morph"), ease: "in-out" }
     ]).flat()
   }
 };
 var morphEffects = [shapeMorph, iconToggle, morphSequenceEffect, gooeyMorph, particleMorph, digitMorph];
 
+// src/catalog/shaders/interaction.ts
+var CLICKS = `
+vec4 clickAt(int i, bool demo) {
+  if (!demo || iClicks[0].w > 0.5) return iClicks[i];
+  float k = floor(iTime / 2.0) - float(i);
+  vec2 h = hash22(vec2(k * 1.37 + 0.5, 3.7));
+  return vec4((0.15 + 0.7 * h) * iResolution.xy, k * 2.0, 1.0);
+}`.trim();
+var HOVER = `
+vec3 hoverPoint(bool demo, float idle) {
+  vec2 drift = iResolution.xy * (0.5 + vec2(0.28 * sin(iTime * 0.63), 0.22 * sin(iTime * 0.91 + 1.3)));
+  float h = clamp(iPointer.z, 0.0, 1.0);
+  return vec3(mix(drift, iPointer.xy, h), mix(demo ? idle : 0.0, 1.0, h));
+}`.trim();
+var GLOW = `
+vec4 glow(vec3 c) {
+  c = 1.0 - exp(-max(c, 0.0));
+  float a = max(c.r, max(c.g, c.b));
+  return vec4(c / max(a, 1e-4), a);
+}`.trim();
+var OVER = `
+vec4 over(vec4 acc, vec3 c, float a) {
+  return vec4(acc.rgb * (1.0 - a) + c * a, acc.a * (1.0 - a) + a);
+}
+vec4 unpremultiply(vec4 acc) {
+  return vec4(acc.rgb / max(acc.a, 1e-4), acc.a);
+}`.trim();
+var clickRipple = {
+  kind: "shader",
+  id: "click-ripple",
+  name: "Click ripple",
+  description: "Rings of water spreading out from every click and fading as they go.",
+  category: "interaction",
+  tags: ["interactive", "click", "overlay", "water", "ripple"],
+  transparent: true,
+  source: glsl(
+    `// Click ripple: water rings spreading from each click (up to 8 at once).
+uniform vec3 uColor;      // @control color default=#BFE6FF label="Colour"
+uniform float uSpeed;     // @control min=0.05 max=2 default=0.5 label="Speed"
+uniform float uWidth;     // @control min=0.002 max=0.05 default=0.012 label="Ring width"
+uniform float uLife;      // @control min=0.3 max=6 default=2 label="Lifetime"
+uniform int uRings;       // @control min=1 max=4 default=3 label="Rings per click"
+uniform bool uDemo;       // @control default=true label="Demo when idle"`,
+    HASH,
+    CLICKS,
+    OVER,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float px = 1.0 / iResolution.y;
+  vec4 acc = vec4(0.0);
+  for (int i = 7; i >= 0; i--) {
+    vec4 c = clickAt(i, uDemo);
+    if (c.w < 0.5) continue;
+    float age = iTime - c.z;
+    if (age < 0.0 || age > uLife) continue;
+    float life = age / uLife;
+    float fade = (1.0 - life) * (1.0 - life);
+    float d = length(fragCoord - c.xy) * px;
+    for (int j = 0; j < 4; j++) {
+      if (j >= uRings) break;
+      float r = (age - float(j) * 0.16) * uSpeed;
+      if (r <= 0.0) continue;
+      // Rings widen and soften as they spread.
+      float w = max(uWidth * (1.0 + life * 1.5), 1.5 * px);
+      float x = (d - r) / w;
+      float k = fade * (1.0 - 0.28 * float(j)) * smoothstep(0.0, 0.05, r);
+      // A bright crest with a darker trough just inside it.
+      float crest = exp(-x * x * 2.0);
+      float trough = exp(-(x + 1.6) * (x + 1.6) * 2.0);
+      acc = over(acc, uColor * 0.15, trough * k * 0.35);
+      acc = over(acc, mix(uColor, vec3(1.0), 0.5 * crest), crest * k);
+    }
+  }
+  fragColor = unpremultiply(acc);
+}`
+  ),
+  presets: [
+    { name: "Sonar", values: { uColor: [0.3, 1, 0.6], uSpeed: 0.3, uWidth: 6e-3, uLife: 4, uRings: 4 } },
+    { name: "Raindrop", values: { uColor: [1, 1, 1], uSpeed: 0.8, uWidth: 0.02, uLife: 1.2, uRings: 2 } }
+  ]
+};
+var clickBurst = {
+  kind: "shader",
+  id: "click-burst",
+  name: "Click burst",
+  description: "Sparks or confetti bursting out of every click, falling under gravity as they fade.",
+  category: "interaction",
+  tags: ["interactive", "click", "overlay", "particles", "celebration", "confetti"],
+  transparent: true,
+  source: glsl(
+    `// Click burst: sparks (or confetti) thrown out of each click, slowed by drag and pulled down by gravity.
+uniform vec3 uColorA;     // @control color default=#FFD166 label="Colour 1"
+uniform vec3 uColorB;     // @control color default=#EF476F label="Colour 2"
+uniform vec3 uColorC;     // @control color default=#06D6A0 label="Colour 3"
+uniform int uCount;       // @control min=4 max=48 default=24 label="Count"
+uniform float uSpread;    // @control min=0.1 max=2 default=0.8 label="Spread"
+uniform float uGravity;   // @control min=0 max=3 default=1 label="Gravity"
+uniform float uLife;      // @control min=0.4 max=4 default=1.6 label="Lifetime"
+uniform bool uConfetti;   // @control default=false label="Confetti"
+uniform bool uDemo;       // @control default=true label="Demo when idle"`,
+    HASH,
+    CLICKS,
+    OVER,
+    `float segment(vec2 p, vec2 a, vec2 b) {
+  vec2 ab = b - a;
+  float t = clamp(dot(p - a, ab) / max(dot(ab, ab), 1e-8), 0.0, 1.0);
+  return length(p - a - ab * t);
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float px = 1.0 / iResolution.y;
+  vec2 p = fragCoord * px;
+  const float drag = 2.5;
+  vec4 acc = vec4(0.0);
+  for (int i = 7; i >= 0; i--) {
+    vec4 c = clickAt(i, uDemo);
+    if (c.w < 0.5) continue;
+    float age = iTime - c.z;
+    if (age < 0.0 || age > uLife) continue;
+    float life = age / uLife;
+    vec2 origin = c.xy * px;
+    // A quick flash where it landed.
+    float flash = exp(-age * 18.0) * exp(-dot(p - origin, p - origin) / 0.002);
+    acc = over(acc, vec3(1.0), clamp(flash, 0.0, 1.0));
+    float slow = (1.0 - exp(-drag * age)) / drag;
+    for (int j = 0; j < 48; j++) {
+      if (j >= uCount) break;
+      vec2 h = hash22(vec2(float(j) * 7.13 + 1.0, c.z * 3.1 + float(i)));
+      float h3 = hash12(h * 91.7 + c.z);
+      float angle = h.x * 6.28318;
+      vec2 v0 = vec2(cos(angle), sin(angle)) * uSpread * (0.3 + 0.7 * h.y) + vec2(0.0, uSpread * 0.35);
+      vec2 pos = origin + v0 * slow - vec2(0.0, 0.5 * uGravity * 0.6 * age * age);
+      if (abs(p.x - pos.x) > 0.06 || abs(p.y - pos.y) > 0.06) continue;
+      vec3 col = h3 < 0.333 ? uColorA : (h3 < 0.667 ? uColorB : uColorC);
+      float a;
+      if (uConfetti) {
+        // A tumbling paper rectangle.
+        float spin = (h3 - 0.5) * 20.0 * age + angle;
+        float cs = cos(spin);
+        float sn = sin(spin);
+        vec2 q = mat2(cs, sn, -sn, cs) * (p - pos);
+        vec2 size = vec2(0.011, 0.006 * abs(cos(age * (4.0 + 6.0 * h.y) + h.x * 9.0)) + px);
+        vec2 e = abs(q) - size;
+        float sd = length(max(e, 0.0)) + min(max(e.x, e.y), 0.0);
+        a = (1.0 - smoothstep(-px, px, sd)) * (1.0 - smoothstep(0.7, 1.0, life));
+        col *= 0.75 + 0.25 * cs;
+      } else {
+        // A streak along its velocity, with a white-hot core.
+        vec2 v = v0 * exp(-drag * age) - vec2(0.0, uGravity * 0.6 * age);
+        float r = 0.004 * (1.0 - 0.6 * life) + px;
+        float sd = segment(p, pos, pos - v * 0.05) - r;
+        a = (1.0 - smoothstep(-px, px, sd)) * (1.0 - life);
+        a += exp(-max(sd, 0.0) / (r * 2.0)) * 0.35 * (1.0 - life);
+        col = mix(col, vec3(1.0), exp(-max(sd + r, 0.0) / (r * 0.5)) * 0.6);
+      }
+      acc = over(acc, col, clamp(a, 0.0, 1.0));
+    }
+  }
+  fragColor = unpremultiply(acc);
+}`
+  ),
+  presets: [
+    { name: "Confetti", values: { uConfetti: true, uCount: 36, uSpread: 1, uGravity: 1.4, uLife: 2.5, uColorC: [0.3, 0.55, 1] } },
+    { name: "Embers", values: { uColorA: [1, 0.6, 0.15], uColorB: [1, 0.3, 0.1], uColorC: [1, 0.85, 0.5], uCount: 16, uSpread: 0.5, uGravity: 0.2 } }
+  ]
+};
+var cursorGlow = {
+  kind: "shader",
+  id: "cursor-glow",
+  name: "Cursor glow",
+  description: "A soft light following the pointer, with a halo ring that tightens while it is pressed.",
+  category: "interaction",
+  tags: ["interactive", "hover", "press", "overlay", "glow", "cursor"],
+  transparent: true,
+  source: glsl(
+    `// Cursor glow: a soft light at the pointer, scaled by how hovered, with a halo that tightens while pressed.
+uniform vec3 uColor;       // @control color default=#7DD3FC label="Colour"
+uniform float uRadius;     // @control min=0.03 max=0.6 default=0.18 label="Radius"
+uniform float uIntensity;  // @control min=0 max=3 default=1.2 label="Intensity"
+uniform float uHalo;       // @control min=0 max=1 default=0.7 label="Halo"
+uniform bool uDemo;        // @control default=true label="Demo when idle"`,
+    HOVER,
+    GLOW,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec3 hp = hoverPoint(uDemo, 0.7);
+  float d = length(fragCoord - hp.xy) / iResolution.y;
+  // How pressed: eases in while held; the idle demo pulses it.
+  float press = 1.0 - exp(-max(iPointer.w, 0.0) * 4.0);
+  if (uDemo) press = max(press, (1.0 - iPointer.z) * pow(max(sin(iTime * 1.3), 0.0), 3.0));
+  float light = exp(-pow(d / uRadius, 2.0) * 2.0) * uIntensity * hp.z * (1.0 + 0.6 * press);
+  float ringR = uRadius * mix(1.3, 0.55, press);
+  float ringW = max(uRadius * 0.05, 1.5 / iResolution.y);
+  float ring = exp(-pow((d - ringR) / ringW, 2.0)) * uHalo * hp.z * (0.6 + 0.8 * press);
+  fragColor = glow(uColor * light + mix(uColor, vec3(1.0), 0.5) * ring * 1.5);
+}`
+  ),
+  presets: [
+    { name: "Spotlight", values: { uColor: [1, 0.95, 0.85], uRadius: 0.4, uIntensity: 0.8, uHalo: 0 } },
+    { name: "Neon", values: { uColor: [1, 0.2, 0.75], uRadius: 0.1, uIntensity: 2, uHalo: 1 } }
+  ]
+};
+var hoverLiquid = {
+  kind: "shader",
+  id: "hover-liquid",
+  name: "Liquid hover",
+  description: "An image that swells and ripples like liquid around the pointer while it hovers.",
+  category: "interaction",
+  tags: ["interactive", "hover", "image", "liquid", "distortion"],
+  source: glsl(
+    `// Liquid hover: an image bulging and rippling around the pointer, as strongly as it is hovered.
+uniform sampler2D uImage;  // @control filter=linear wrap=mirror default=${SAMPLE_IMAGES.landscape} label="Image"
+uniform float uStrength;   // @control min=0 max=1 default=0.6 label="Strength"
+uniform float uRadius;     // @control min=0.05 max=0.8 default=0.3 label="Radius"
+uniform float uWobble;     // @control min=0 max=1 default=0.5 label="Wobble"
+uniform bool uDemo;        // @control default=true label="Demo when idle"`,
+    HASH,
+    NOISE,
+    HOVER,
+    PICTURE,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec3 hp = hoverPoint(uDemo, 0.5);
+  vec2 d = (fragCoord - hp.xy) / iResolution.y;
+  float r = length(d);
+  float s = uStrength * hp.z;
+  float fall = exp(-pow(r / uRadius, 2.0) * 1.5);
+  // Swell: pull samples towards the pointer, so it magnifies like a drop.
+  vec2 off = -d * fall * s * 0.6;
+  // Wobble: rings running out from the pointer and a slow liquid churn.
+  vec2 dir = d / max(r, 1e-5);
+  float wave = sin(r / uRadius * 14.0 - iTime * 5.0) * fall;
+  off += dir * wave * uWobble * s * 0.02;
+  vec2 churn = vec2(vnoise(d * 6.0 + iTime * 0.7), vnoise(d * 6.0 - iTime * 0.6 + 5.0)) - 0.5;
+  off += churn * fall * s * uWobble * 0.05;
+  vec3 col = picture(uImage, uv + off * vec2(iResolution.y / iResolution.x, 1.0));
+  // Light catching the swell's upper-left slope.
+  float slope = dot(dir, normalize(vec2(-0.6, 0.8))) * r / uRadius;
+  col += 0.12 * s * fall * slope + 0.06 * s * wave * uWobble;
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Syrup", values: { uStrength: 0.9, uRadius: 0.45, uWobble: 0.15 } },
+    { name: "Splash", values: { uStrength: 0.5, uRadius: 0.25, uWobble: 1 } }
+  ]
+};
+var hoverReveal = {
+  kind: "shader",
+  id: "hover-reveal",
+  name: "X-ray reveal",
+  description: "A second image showing through a soft lens around the pointer that grows as it hovers and pulses on click.",
+  category: "interaction",
+  tags: ["interactive", "hover", "click", "image", "reveal", "x-ray"],
+  source: glsl(
+    `// X-ray reveal: a second image seen through a soft lens at the pointer.
+uniform sampler2D uImage;  // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.landscape} label="Image"
+uniform sampler2D uReveal; // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.city} label="Revealed image"
+uniform float uRadius;     // @control min=0.05 max=0.6 default=0.22 label="Lens radius"
+uniform float uSoftness;   // @control min=0 max=1 default=0.35 label="Softness"
+uniform vec3 uRim;         // @control color default=#A5F3FC label="Rim"
+uniform bool uDemo;        // @control default=true label="Demo when idle"`,
+    HASH,
+    NOISE,
+    CLICKS,
+    HOVER,
+    PICTURE,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  float px = 1.0 / iResolution.y;
+  vec3 hp = hoverPoint(uDemo, 0.85);
+  // Each click swells the lens, which settles back.
+  float pulse = 0.0;
+  for (int i = 0; i < 8; i++) {
+    vec4 c = clickAt(i, uDemo);
+    float age = iTime - c.z;
+    if (c.w < 0.5 || age < 0.0) continue;
+    pulse += 0.6 * exp(-age * 4.0) * (1.0 - exp(-age * 30.0));
+  }
+  float R = uRadius * hp.z * (1.0 + pulse);
+  float d = length(fragCoord - hp.xy) * px;
+  // A wobbly edge, so the lens looks like it is melting through.
+  d += (vnoise(fragCoord * px * 9.0 + iTime * 0.6) - 0.5) * 0.25 * R;
+  float soft = max(uSoftness * R * 0.6, 1.5 * px);
+  float m = 1.0 - smoothstep(R - soft, R, d);
+  vec3 col = mix(picture(uImage, uv), picture(uReveal, uv), m);
+  float rim = exp(-pow((d - R + soft * 0.5) / max(soft * 0.5, 2.0 * px), 2.0)) * step(0.001, R);
+  col += uRim * rim * 0.6;
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Peephole", values: { uRadius: 0.12, uSoftness: 0.05, uRim: [1, 1, 1] } },
+    { name: "Fog lamp", values: { uRadius: 0.4, uSoftness: 1, uRim: [0, 0, 0] } }
+  ]
+};
+var magnifier = {
+  kind: "shader",
+  id: "magnifier",
+  name: "Magnifier",
+  description: "A round magnifying glass over an image at the pointer, with a bright rim and a fringe of colour at its edge.",
+  category: "interaction",
+  tags: ["interactive", "hover", "image", "lens", "zoom"],
+  source: glsl(
+    `// Magnifier: a round lens over an image at the pointer, showing while hovered.
+uniform sampler2D uImage;    // @control filter=linear wrap=mirror default=${SAMPLE_IMAGES.city} label="Image"
+uniform float uZoom;         // @control min=1 max=5 default=2 label="Zoom"
+uniform float uRadius;       // @control min=0.05 max=0.5 default=0.18 label="Radius"
+uniform float uAberration;   // @control min=0 max=1 default=0.35 label="Colour fringe"
+uniform vec3 uRim;           // @control color default=#FFFFFF label="Rim"
+uniform bool uDemo;          // @control default=true label="Demo when idle"`,
+    HOVER,
+    PICTURE,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec3 hp = hoverPoint(uDemo, 1.0);
+  float s = hp.z;
+  vec3 col = picture(uImage, uv);
+  float R = uRadius * (0.75 + 0.25 * s) * iResolution.y;
+  vec2 d = fragCoord - hp.xy;
+  float r = length(d);
+  float k = r / R;
+  // A soft shadow under the glass.
+  float shadow = 1.0 - smoothstep(R * 0.9, R * 1.3, length(d - vec2(R * 0.08, -R * 0.12)));
+  col *= 1.0 - 0.35 * shadow * s;
+  if (k < 1.05) {
+    // More magnified at the centre, squeezed towards the rim like real glass.
+    vec2 q = d / uZoom * (1.0 + 0.4 * k * k * k * k);
+    float fr = uAberration * 0.08 * k * k * k;
+    vec3 lens = vec3(
+      picture(uImage, (hp.xy + q * (1.0 + fr)) / iResolution.xy).r,
+      picture(uImage, (hp.xy + q) / iResolution.xy).g,
+      picture(uImage, (hp.xy + q * (1.0 - fr)) / iResolution.xy).b
+    );
+    lens += 0.16 * exp(-pow(length(d / R - vec2(-0.35, 0.4)) * 2.6, 2.0));
+    lens *= 1.0 - 0.25 * pow(k, 6.0);
+    col = mix(col, lens, (1.0 - smoothstep(R - 1.5, R, r)) * s);
+  }
+  float rimW = max(R * 0.035, 2.0);
+  float lit = 0.6 + 0.4 * dot(d / max(r, 1e-4), normalize(vec2(-1.0, 1.0)));
+  float rim = exp(-pow((r - R) / rimW, 2.0));
+  col = mix(col, uRim * lit, rim * s * 0.9);
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Loupe", values: { uZoom: 4, uRadius: 0.1, uAberration: 0.1 } },
+    { name: "Fishbowl", values: { uZoom: 1.5, uRadius: 0.35, uAberration: 1 } }
+  ]
+};
+var holoCard = {
+  kind: "shader",
+  id: "holo-card",
+  name: "Holo card",
+  description: "A holographic foil trading card whose rainbow sheen and glare shift as the pointer tilts it.",
+  category: "interaction",
+  tags: ["interactive", "hover", "card", "holographic", "foil", "iridescent"],
+  transparent: true,
+  source: glsl(
+    `// Holo card: a rounded card with rainbow foil and glare that move as the pointer tilts it.
+uniform sampler2D uImage;  // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.portrait} label="Image"
+uniform float uFoil;       // @control min=0 max=1 default=0.7 label="Foil"
+uniform float uGlare;      // @control min=0 max=1 default=0.6 label="Glare"
+uniform float uTilt;       // @control min=0 max=1 default=0.6 label="Tilt"
+uniform float uCorner;     // @control min=0 max=0.25 default=0.06 label="Corner radius"
+uniform vec3 uBorder;      // @control color default=#E2E8F0 label="Border"
+uniform bool uDemo;        // @control default=true label="Demo when idle"`,
+    HASH,
+    NOISE,
+    HOVER,
+    OVER,
+    PICTURE,
+    `float roundedBox(vec2 p, vec2 hs, float r) {
+  vec2 e = abs(p) - hs + r;
+  return length(max(e, 0.0)) + min(max(e.x, e.y), 0.0) - r;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 res = iResolution.xy;
+  const float aspect = 0.716;
+  float h = min(res.y * 0.84, res.x * 0.84 / aspect);
+  vec2 hs = vec2(h * aspect, h) * 0.5;
+  vec3 hp = hoverPoint(uDemo, 0.7);
+  vec2 tilt = clamp((hp.xy - 0.5 * res) / hs, -1.0, 1.0) * hp.z * uTilt;
+  vec2 s = (fragCoord - 0.5 * res) / hs;
+  // Fake perspective: the side the pointer is on leans away.
+  vec2 q = s / max(1.0 - 0.15 * dot(s, tilt), 0.2);
+  float radius = uCorner * hs.x * 2.0;
+  float sd = roundedBox(q * hs, hs, radius);
+  float mask = 1.0 - smoothstep(-1.0, 1.0, sd);
+  // A soft shadow, falling away from the tilt.
+  float shadowD = roundedBox(fragCoord - 0.5 * res + tilt * hs * 0.06 + vec2(0.0, h * 0.03), hs, radius);
+  float shadow = (1.0 - smoothstep(-h * 0.04, h * 0.06, shadowD)) * 0.35;
+  vec4 acc = over(vec4(0.0), vec3(0.0), shadow * (1.0 - mask));
+  if (mask > 0.0) {
+    vec2 cuv = q * 0.5 + 0.5;
+    // The picture fills the card, cropped to fit.
+    vec2 ts = vec2(textureSize(uImage, 0));
+    float imageAspect = ts.x / max(ts.y, 1.0);
+    vec2 fit = imageAspect > aspect ? vec2(aspect / imageAspect, 1.0) : vec2(1.0, imageAspect / aspect);
+    vec3 base = picture(uImage, 0.5 + (cuv - 0.5) * fit);
+    // Foil: rainbow bands that slide with the tilt, strongest in a broad band facing the light.
+    float n = vnoise(cuv * 5.0);
+    float phase = dot(cuv, vec2(0.7, 1.1)) * 1.6 + tilt.x * 0.9 - tilt.y * 0.6 + n * 0.5;
+    vec3 rainbow = 0.5 + 0.5 * cos(6.28318 * (phase + vec3(0.0, 0.33, 0.67)));
+    float lines = 0.75 + 0.25 * sin((cuv.x - cuv.y) * 90.0 + tilt.x * 8.0);
+    float band = exp(-pow((cuv.x + cuv.y) * 0.7 - 0.7 - (tilt.x + tilt.y) * 0.6, 2.0) * 6.0);
+    float foil = uFoil * (0.25 + 0.75 * band) * lines;
+    // Overlay blend, so the picture keeps its darks under the foil.
+    vec3 lit = mix(2.0 * base * rainbow, 1.0 - 2.0 * (1.0 - base) * (1.0 - rainbow), step(0.5, base));
+    vec3 col = mix(base, lit + rainbow * 0.12, foil * 0.75);
+    float sparkle = step(0.985, hash12(floor(cuv * vec2(90.0, 126.0))));
+    col += sparkle * uFoil * band * (0.5 + 0.5 * sin(iTime * 3.0 + n * 20.0 + tilt.x * 10.0));
+    // Glare: a highlight where the light hits, following the pointer.
+    vec2 g = cuv - (0.5 + tilt * 0.55);
+    col += uGlare * 0.6 * exp(-dot(g, g) * 7.0);
+    // A thin foil border.
+    float border = smoothstep(-0.03 * h - 1.0, -0.03 * h, sd);
+    col = mix(col, uBorder * (0.8 + 0.4 * rainbow * uFoil), border);
+    acc = over(acc, clamp(col, 0.0, 1.0), mask);
+  }
+  fragColor = unpremultiply(acc);
+}`
+  ),
+  presets: [
+    { name: "Subtle", values: { uFoil: 0.3, uGlare: 0.35, uTilt: 0.4 } },
+    { name: "Full foil", values: { uFoil: 1, uGlare: 0.8, uTilt: 1, uBorder: [0.98, 0.82, 0.35] } }
+  ]
+};
+var pressCharge = {
+  kind: "shader",
+  id: "press-charge",
+  name: "Press to charge",
+  description: "A ring that fills and glows while the pointer is held and drains when it is let go, bursting if it was fully charged.",
+  category: "interaction",
+  tags: ["interactive", "press", "overlay", "hold", "button", "ring"],
+  transparent: true,
+  source: glsl(
+    `// Press to charge: a ring that fills while held (iPointer.w > 0), drains when let go (iPointer.w < 0)
+// and bursts if it was let go fully charged.
+uniform vec3 uColor;       // @control color default=#A78BFA label="Colour"
+uniform float uHold;       // @control min=0.3 max=5 default=1.2 label="Seconds to charge"
+uniform float uSize;       // @control min=0.08 max=0.45 default=0.22 label="Size"
+uniform float uThickness;  // @control min=0.005 max=0.08 default=0.025 label="Thickness"
+uniform bool uDemo;        // @control default=true label="Demo when idle"`,
+    OVER,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float px = 1.0 / iResolution.y;
+  // iPointer.w: seconds held while pressed, minus the seconds since letting go after, 0 before any press.
+  float w = iPointer.w;
+  // The press is the newest click, so this is how long it was held when let go.
+  float heldFor = iTime + min(w, 0.0) - iClicks[0].z;
+  // Until someone presses, a synthetic press: hold, charge, let go, burst, rest.
+  if (uDemo && iClicks[0].w < 0.5 && w == 0.0) {
+    float t = mod(iTime, uHold + 2.0) - 0.4;
+    float hold = uHold + 0.4;
+    w = t <= 0.0 ? 0.0 : (t < hold ? t : -(t - hold));
+    heldFor = hold;
+  }
+  float held = max(w, 0.0);
+  float since = max(-w, 0.0);
+  float reached = w < 0.0 ? clamp(heldFor / uHold, 0.0, 1.0) : 0.0;
+  // While held it fills; once let go it drains from where it got to, over 0.4 s.
+  float drain = 1.0 - smoothstep(0.0, 0.4, since);
+  float charge = w > 0.0 ? clamp(held / uHold, 0.0, 1.0) : reached * drain;
+  float full = step(uHold, held);
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) * px;
+  float r = length(p);
+  float turn = fract(atan(p.x, p.y) / 6.28318 + 1.0);
+  float R = uSize * (1.0 - 0.06 * charge + 0.03 * iPointer.z);
+  float ringD = abs(r - R) - uThickness * 0.5;
+  float ring = 1.0 - smoothstep(-px, px, ringD);
+  vec4 acc = vec4(0.0);
+  // The core fills faintly, and the track shows where the charge goes.
+  acc = over(acc, uColor, (1.0 - smoothstep(R - px, R + px, r)) * 0.1 * charge);
+  acc = over(acc, uColor * 0.6, ring * (0.22 + 0.1 * iPointer.z));
+  // The charge: an arc clockwise from the top, glowing brighter as it fills.
+  float arcEnd = (charge - turn) * 6.28318 * R / px;
+  float arc = ring * clamp(arcEnd + 0.5, 0.0, 1.0) * step(0.001, charge);
+  float pulse = 1.0 + full * 0.25 * sin(iTime * 9.0);
+  float halo = exp(-max(ringD, 0.0) / (uThickness * 1.5)) * charge * charge * 0.6 * clamp(arcEnd + 0.5, 0.0, 1.0);
+  acc = over(acc, uColor, clamp(halo * pulse, 0.0, 1.0));
+  acc = over(acc, mix(uColor, vec3(1.0), 0.35 * charge * pulse), arc);
+  // A ping when it fills, and a flash with a ring bursting out when let go fully charged.
+  float flashAge = -1.0;
+  float flashSize = 0.0;
+  if (w > 0.0 && held >= uHold) { flashAge = held - uHold; flashSize = 0.5; }
+  if (w < 0.0 && reached >= 1.0) { flashAge = since; flashSize = 1.0; }
+  if (flashAge >= 0.0 && flashAge < 0.8) {
+    float k = 1.0 - flashAge / 0.8;
+    float burstR = R + flashAge * 0.6 * flashSize;
+    float burst = exp(-pow((r - burstR) / (uThickness * (1.0 + flashAge * 3.0)), 2.0)) * k * k * flashSize;
+    acc = over(acc, mix(uColor, vec3(1.0), 0.5), clamp(burst, 0.0, 1.0));
+    acc = over(acc, vec3(1.0), exp(-r * r / (R * R * 0.5)) * exp(-flashAge * 6.0) * 0.8 * flashSize);
+  }
+  fragColor = unpremultiply(acc);
+}`
+  ),
+  presets: [
+    { name: "Hold to confirm", values: { uColor: [0.95, 0.3, 0.3], uHold: 2, uSize: 0.15, uThickness: 0.015 } },
+    { name: "Power up", values: { uColor: [0.2, 0.9, 1], uHold: 0.8, uSize: 0.3, uThickness: 0.05 } }
+  ]
+};
+var hoverSwap = {
+  kind: "shader",
+  id: "hover-swap",
+  name: "Hover swap",
+  description: "One image burning away into another from the pointer as it hovers, along a glowing ragged edge.",
+  category: "interaction",
+  tags: ["interactive", "hover", "image", "dissolve", "transition"],
+  source: glsl(
+    `// Hover swap: image A dissolves into image B as hover goes 0 \u2192 1, spreading from the pointer.
+uniform sampler2D uFrom;   // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.landscape} label="Image"
+uniform sampler2D uTo;     // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.city} label="Hover image"
+uniform vec3 uEdge;        // @control color default=#FFB86B label="Edge glow"
+uniform float uEdgeWidth;  // @control min=0 max=0.3 default=0.08 label="Edge width"
+uniform float uGrain;      // @control min=1 max=20 default=6 label="Noise scale"
+uniform bool uDemo;        // @control default=true label="Demo when idle"`,
+    HASH,
+    NOISE,
+    FBM,
+    HOVER,
+    PICTURE,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec3 hp = hoverPoint(uDemo, 0.0);
+  float h = clamp(iPointer.z, 0.0, 1.0);
+  // Idle, hover swings slowly in and out.
+  float demo = uDemo ? smoothstep(0.1, 0.9, 0.5 - 0.5 * cos(iTime * 0.9)) : 0.0;
+  float progress = mix(demo, 1.0, h);
+  // Distance from the pointer, as a share of the way to the farthest corner.
+  vec2 o = hp.xy / iResolution.y;
+  vec2 size = iResolution.xy / iResolution.y;
+  float far = max(max(length(o), length(o - vec2(size.x, 0.0))), max(length(o - vec2(0.0, size.y)), length(o - size)));
+  float dist = length(fragCoord / iResolution.y - o) / far;
+  float f = 0.65 * dist + 0.35 * fbm(fragCoord / iResolution.y * uGrain, 5);
+  float w = max(uEdgeWidth, 0.005);
+  float t = progress * (1.0 + w);
+  float m = 1.0 - smoothstep(t - w, t, f);
+  vec3 col = mix(picture(uFrom, uv), picture(uTo, uv), m);
+  float edge = m * (1.0 - m) * 4.0 * step(0.001, uEdgeWidth);
+  col = mix(col, uEdge, edge * 0.85);
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Clean cut", values: { uEdgeWidth: 0.01, uGrain: 2 } },
+    { name: "Embers", values: { uEdge: [1, 0.35, 0.1], uEdgeWidth: 0.2, uGrain: 14 } }
+  ]
+};
+var interactionShaders = [
+  clickRipple,
+  clickBurst,
+  cursorGlow,
+  hoverLiquid,
+  hoverReveal,
+  magnifier,
+  holoCard,
+  pressCharge,
+  hoverSwap
+];
+
 // src/catalog/shaders/morph.ts
 var pair = (from, to) => `uniform sampler2D uFrom;   // @control filter=linear wrap=clamp default=${from} label="From image"
 uniform sampler2D uTo;     // @control filter=linear wrap=clamp default=${to} label="To image"
@@ -2330,13 +3411,13 @@ var morphShaders = [
 ];
 
 // src/catalog/shaders/overlay.ts
-var GLOW = `
+var GLOW2 = `
 vec4 glow(vec3 c) {
   c = 1.0 - exp(-max(c, 0.0));
   float a = max(c.r, max(c.g, c.b));
   return vec4(c / max(a, 1e-4), a);
 }`.trim();
-var OVER = `
+var OVER2 = `
 vec4 over(vec4 acc, vec3 c, float a) {
   return vec4(acc.rgb * (1.0 - a) + c * a, acc.a * (1.0 - a) + a);
 }
@@ -2358,7 +3439,7 @@ uniform float uSpeed;     // @control min=0 max=3 default=1 label="Speed"
 uniform float uSize;      // @control min=0.5 max=2 default=1 label="Drop size"
 uniform vec3 uTint;       // @control color default=#CFE3F0 label="Tint"`,
     HASH,
-    OVER,
+    OVER2,
     `// One drop of radius r at offset d: a faint tinted body, a darker rim and a bright highlight.
 vec4 paintDrop(vec4 acc, vec2 d, float r, float px) {
   float dist = length(d);
@@ -2492,7 +3573,7 @@ uniform vec3 uColor;      // @control color default=#FFC98A label="Colour"
 uniform float uStreak;    // @control min=0 max=2 default=1 label="Streak length"
 uniform float uIntensity; // @control min=0 max=2 default=1 label="Intensity"`,
     HASH,
-    GLOW,
+    GLOW2,
     `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
   float aspect = iResolution.x / iResolution.y;
@@ -2542,7 +3623,7 @@ uniform float uSoftness;  // @control min=0.05 max=1 default=0.5 label="Softness
 uniform float uGrain;     // @control min=0 max=0.3 default=0.08 label="Grain"
 uniform float uGrainSize; // @control min=1 max=4 default=1.5 label="Grain size (px)"`,
     HASH,
-    OVER,
+    OVER2,
     `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   float aspect = iResolution.x / iResolution.y;
   // 0 at the centre, 1 at the edges; rounder shapes measure across the frame's aspect.
@@ -2579,7 +3660,7 @@ uniform float uWidth;     // @control min=0.001 max=0.05 default=0.006 label="Wi
 uniform vec3 uColor;      // @control color default=#4FF0FF label="Colour"
 uniform float uInterval;  // @control min=0 max=5 default=1 label="Pause (s)"
 uniform float uTrail;     // @control min=0 max=1 default=0.5 label="Trail"`,
-    GLOW,
+    GLOW2,
     `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
   float aspect = iResolution.x / iResolution.y;
@@ -2653,7 +3734,7 @@ uniform vec3 uHeat;       // @control color default=#FF7A1A label="Heat"
 uniform float uSpeed;     // @control min=0 max=3 default=1 label="Rise speed"
 uniform float uSize;      // @control min=0.3 max=3 default=1 label="Size"`,
     HASH,
-    GLOW,
+    GLOW2,
     `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   vec2 p = fragCoord / iResolution.y;
   float aspect = iResolution.x / iResolution.y;
@@ -3705,24 +4786,24 @@ var imageTreatments = [
 ];
 
 // src/catalog/text.ts
-var r1 = (n3) => Math.round(n3 * 10) / 10;
-function fit(text, width, max, ems = textWidthEm(text)) {
+var r12 = (n4) => Math.round(n4 * 10) / 10;
+function fit2(text, width, max, ems = textWidthEm(text)) {
   const e = Math.max(0.6, ems);
   const size = Math.min(max, width / e);
-  return { size: r1(size), length: r1(e * size), left: r1(200 - e * size / 2) };
+  return { size: r12(size), length: r12(e * size), left: r12(200 - e * size / 2) };
 }
 var lettersOf = (text) => Array.from(String(text));
-var mixHex = (a, b, t) => {
+var mixHex2 = (a, b, t) => {
   const x = Array.isArray(a) ? a : [1, 1, 1];
   const y = Array.isArray(b) ? b : [1, 1, 1];
   return rgbToHex([0, 1, 2].map((i) => x[i] + (y[i] - x[i]) * t));
 };
 var holds = (id, attr, keys) => keys.map(([delay, value]) => ({ id, attrs: { [attr]: [value, value] }, delay, ms: 0 }));
-var n2 = (name) => `{{${name}}}`;
+var n3 = (name) => `{{${name}}}`;
 var MONO = `ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace`;
 var MONO_EM = 0.6;
 var HEAVY = `'Arial Black', 'Helvetica Neue', Impact, system-ui, sans-serif`;
-var SANS = `system-ui, 'Helvetica Neue', Arial, sans-serif`;
+var SANS2 = `system-ui, 'Helvetica Neue', Arial, sans-serif`;
 var BLINKS = 7;
 var typewriter = {
   kind: "vector",
@@ -3739,14 +4820,14 @@ var typewriter = {
   // Monospace, so the caret lands after the last letter however long the text is.
   derived: (v) => {
     const count = Math.max(1, lettersOf(v.text).length);
-    const size = r1(Math.min(44, 340 / ((count + 1) * MONO_EM)));
-    const left = r1(200 - (count + 1) * MONO_EM * size / 2);
+    const size = r12(Math.min(44, 340 / ((count + 1) * MONO_EM)));
+    const left = r12(200 - (count + 1) * MONO_EM * size / 2);
     const typing = Math.round(count * Number(v.pace));
     return {
       size,
       left,
-      base: r1(100 + size * 0.35),
-      end: r1(left + count * MONO_EM * size),
+      base: r12(100 + size * 0.35),
+      end: r12(left + count * MONO_EM * size),
       typing,
       ...Object.fromEntries(Array.from({ length: BLINKS }, (_, k) => [`blink${k}`, typing + k * 500]))
     };
@@ -3754,9 +4835,9 @@ var typewriter = {
   motion: {
     svg: `<svg viewBox="0 0 400 200"><!-- {{text: text default='Hello, world.' label='Text'}} {{paper: color default=#111827 label='Background'}} {{ink: color default=#F9FAFB label='Text colour'}} {{pace: float min=30 max=300 default=90 step=5 label='Ms per letter'}} --><rect width="400" height="200" fill="{{paper}}"/><text id="typed" x="{{left}}" y="{{base}}" font-family="${MONO}" font-size="{{size}}" fill="{{ink}}" xml:space="preserve">{{text}}</text><text id="caret" x="{{end}}" y="{{base}}" font-family="${MONO}" font-size="{{size}}" fill="{{ink}}" opacity="0">\u258C</text></svg>`,
     animate: [
-      { id: "typed", write: "{{text}}", caret: "\u258C", ms: n2("typing"), ease: "linear" },
+      { id: "typed", write: "{{text}}", caret: "\u258C", ms: n3("typing"), ease: "linear" },
       // Hidden while the writer shows its own caret, then blinking where it stopped.
-      ...holds("caret", "opacity", [[0, 0], ...Array.from({ length: BLINKS }, (_, k) => [n2(`blink${k}`), k % 2 ? 0 : 1])])
+      ...holds("caret", "opacity", [[0, 0], ...Array.from({ length: BLINKS }, (_, k) => [n3(`blink${k}`), k % 2 ? 0 : 1])])
     ]
   }
 };
@@ -3774,17 +4855,17 @@ var scrambleText = {
   ],
   derived: (v) => {
     const count = Math.max(1, lettersOf(v.text).length);
-    const size = r1(Math.min(60, 360 / (count * MONO_EM)));
-    const width = r1(count * MONO_EM * size);
-    const base = r1(100 + size * 0.35);
-    return { size, base, barX: r1(200 - width / 2), barY: r1(base + size * 0.3), barW: width, decode: Math.round(count * Number(v.pace)), glowWide: Number(v.glow) * 2 };
+    const size = r12(Math.min(60, 360 / (count * MONO_EM)));
+    const width = r12(count * MONO_EM * size);
+    const base = r12(100 + size * 0.35);
+    return { size, base, barX: r12(200 - width / 2), barY: r12(base + size * 0.3), barW: width, decode: Math.round(count * Number(v.pace)), glowWide: Number(v.glow) * 2 };
   },
   motion: {
     svg: `<svg viewBox="0 0 400 200"><!-- {{text: text default='ACCESS GRANTED' label='Text'}} {{glyphs: text default='ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&@$*+' label='Scramble glyphs'}} {{background: color default=#05070D label='Background'}} {{ink: color default=#E2E8F0 label='Text colour'}} {{accent: color default=#22D3EE label='Accent'}} {{pace: float min=20 max=250 default=70 step=5 label='Ms per letter'}} {{glow: float min=0 max=6 default=2 step=0.5 label='Glow'}} --><defs><filter id="glow" x="-20%" y="-50%" width="140%" height="200%"><feGaussianBlur stdDeviation="{{glowWide}}" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><rect width="400" height="200" fill="{{background}}"/><text id="word" x="200" y="{{base}}" text-anchor="middle" font-family="${MONO}" font-size="{{size}}" font-weight="700" fill="{{ink}}" filter="url(#glow)" xml:space="preserve">{{text}}</text><rect id="bar" x="{{barX}}" y="{{barY}}" width="0" height="3" fill="{{accent}}"/></svg>`,
     animate: [
       // Pure noise for a moment (the scramble runs before the change starts), then it decodes.
-      { id: "word", write: "{{text}}", scramble: "{{glyphs}}", delay: 500, ms: n2("decode"), ease: "linear" },
-      { id: "bar", attrs: { width: [0, n2("barW")] }, delay: 500, ms: n2("decode"), ease: "linear" }
+      { id: "word", write: "{{text}}", scramble: "{{glyphs}}", delay: 500, ms: n3("decode"), ease: "linear" },
+      { id: "bar", attrs: { width: [0, n3("barW")] }, delay: 500, ms: n3("decode"), ease: "linear" }
     ]
   }
 };
@@ -3810,20 +4891,20 @@ var kineticStagger = {
     const base = 100 + size * 0.35;
     const stagger = Number(v.stagger);
     const out = {
-      size: r1(size),
-      base: r1(base),
-      rise: r1(base - size * 0.1),
-      drop: r1(base + size * 0.6),
-      lineX: r1(200 - ems * size / 2),
-      lineY: r1(base + size * 0.2),
-      lineW: r1(ems * size),
+      size: r12(size),
+      base: r12(base),
+      rise: r12(base - size * 0.1),
+      drop: r12(base + size * 0.6),
+      lineX: r12(200 - ems * size / 2),
+      lineY: r12(base + size * 0.2),
+      lineW: r12(ems * size),
       lineAt: Math.round(letters.length * stagger + 400)
     };
     let x = 200 - ems * size / 2;
     for (let i = 0; i < SLOTS2; i++) {
       const w = (widths[i] ?? 0) * size;
       out[`c${i}`] = letters[i]?.trim() ?? "";
-      out[`x${i}`] = r1(x + w / 2);
+      out[`x${i}`] = r12(x + w / 2);
       out[`d${i}`] = Math.round(i * stagger);
       out[`e${i}`] = Math.round(i * stagger + 380);
       x += w;
@@ -3840,13 +4921,13 @@ var kineticStagger = {
         {
           id: `l${i}`,
           attrs: { transform: [`translate({{x${i}}} {{drop}}) rotate(-28) scale(0.3)`, `translate({{x${i}}} {{rise}}) rotate(5) scale(1.12)`], opacity: [0, 1] },
-          delay: n2(`d${i}`),
+          delay: n3(`d${i}`),
           ms: 380,
           ease: "out"
         },
-        { id: `l${i}`, attrs: { transform: [`translate({{x${i}}} {{rise}}) rotate(5) scale(1.12)`, `translate({{x${i}}} {{base}}) rotate(0) scale(1)`] }, delay: n2(`e${i}`), ms: 260, ease: "in-out" }
+        { id: `l${i}`, attrs: { transform: [`translate({{x${i}}} {{rise}}) rotate(5) scale(1.12)`, `translate({{x${i}}} {{base}}) rotate(0) scale(1)`] }, delay: n3(`e${i}`), ms: 260, ease: "in-out" }
       ]).flat(),
-      { id: "line", attrs: { width: [0, n2("lineW")] }, delay: n2("lineAt"), ms: 500, ease: "in-out" }
+      { id: "line", attrs: { width: [0, n3("lineW")] }, delay: n3("lineAt"), ms: 500, ease: "in-out" }
     ]
   }
 };
@@ -3867,16 +4948,16 @@ var neonSign = {
   derived: (v) => {
     const letters = lettersOf(v.text);
     const k = Math.min(Math.max(0, Math.round(Number(v.faulty)) - 1), Math.max(0, letters.length - 1));
-    const { size, length } = fit(String(v.text), 340, 84);
+    const { size, length } = fit2(String(v.text), 340, 84);
     return {
       head: letters.slice(0, k).join(""),
       mid: letters[k] ?? "",
       tail: letters.slice(k + 1).join(""),
       size,
       length,
-      base: r1(100 + size * 0.3),
+      base: r12(100 + size * 0.3),
       far: Number(v.glow) * 3,
-      core: mixHex(v.tube, [1, 1, 1], 0.6)
+      core: mixHex2(v.tube, [1, 1, 1], 0.6)
     };
   },
   motion: (() => {
@@ -3908,14 +4989,14 @@ var strokeDrawText = {
   ],
   // <text> takes no pathLength, so `draw` cannot measure it: the dash grows instead, longer than any letter's outline.
   derived: (v) => {
-    const { size, length } = fit(String(v.text), 360, 100);
-    return { size, length, base: r1(100 + size * 0.35), dash: Math.round(size * 6) };
+    const { size, length } = fit2(String(v.text), 360, 100);
+    return { size, length, base: r12(100 + size * 0.35), dash: Math.round(size * 6) };
   },
   motion: {
     svg: `<svg viewBox="0 0 400 200"><!-- {{text: text default='Draw' label='Text'}} {{background: color default=#FFFBF5 label='Background'}} {{outline: color default=#1E293B label='Outline'}} {{fill: color default=#F97316 label='Fill'}} {{width: float min=0.5 max=6 default=2 step=0.5 label='Outline width'}} {{fillOpacity: float min=0 max=1 default=1 label='Fill opacity'}} --><rect width="400" height="200" fill="{{background}}"/><text id="word" x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="${HEAVY}" font-size="{{size}}" font-weight="900" fill="{{fill}}" fill-opacity="0" stroke="{{outline}}" stroke-width="{{width}}" stroke-linejoin="round" stroke-dasharray="0 {{dash}}">{{text}}</text></svg>`,
     animate: [
       { id: "word", attrs: { "stroke-dasharray": ["0 {{dash}}", "{{dash}} 0"] }, ms: 2e3, ease: "in-out" },
-      { id: "word", attrs: { "fill-opacity": [0, n2("fillOpacity")] }, delay: 1500, ms: 700, ease: "out" }
+      { id: "word", attrs: { "fill-opacity": [0, n3("fillOpacity")] }, delay: 1500, ms: 700, ease: "out" }
     ]
   }
 };
@@ -3932,21 +5013,21 @@ var splitReveal = {
     { name: "Gold on black", values: { background: [0.02, 0.02, 0.02], ink: [0.96, 0.84, 0.55], line: [0.96, 0.84, 0.55] } }
   ],
   derived: (v) => {
-    const { size, length, left } = fit(String(v.text), 360, 88);
+    const { size, length, left } = fit2(String(v.text), 360, 88);
     return {
       size,
       length,
-      base: r1(100 + size * 0.36),
-      shift: r1(size * 0.8),
-      lineX1: r1(left - 10),
-      lineX2: r1(400 - left + 10),
-      captionY: r1(100 + size * 0.36 + 30)
+      base: r12(100 + size * 0.36),
+      shift: r12(size * 0.8),
+      lineX1: r12(left - 10),
+      lineX2: r12(400 - left + 10),
+      captionY: r12(100 + size * 0.36 + 30)
     };
   },
   motion: (() => {
-    const word = `<text x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="${SANS}" font-size="{{size}}" font-weight="800" fill="{{ink}}">{{text}}</text>`;
+    const word = `<text x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="${SANS2}" font-size="{{size}}" font-weight="800" fill="{{ink}}">{{text}}</text>`;
     return {
-      svg: `<svg viewBox="0 0 400 200"><!-- {{text: text default='Chapter One' label='Text'}} {{caption: text default='The beginning' label='Caption'}} {{background: color default=#0F172A label='Background'}} {{ink: color default=#F8FAFC label='Text colour'}} {{line: color default=#38BDF8 label='Line'}} --><defs><clipPath id="above"><rect width="400" height="100"/></clipPath><clipPath id="below"><rect y="100" width="400" height="100"/></clipPath></defs><rect width="400" height="200" fill="{{background}}"/><g clip-path="url(#above)"><g id="top" transform="translate(0 {{shift}})">${word}</g></g><g clip-path="url(#below)"><g id="bottom" transform="translate(0 -{{shift}})">${word}</g></g><path id="line" d="M{{lineX1}} 100 H{{lineX2}}" stroke="{{line}}" stroke-width="2.5" stroke-linecap="round"/><text id="caption" x="200" y="{{captionY}}" text-anchor="middle" font-family="${SANS}" font-size="13" letter-spacing="3" fill="{{ink}}" opacity="0">{{caption}}</text></svg>`,
+      svg: `<svg viewBox="0 0 400 200"><!-- {{text: text default='Chapter One' label='Text'}} {{caption: text default='The beginning' label='Caption'}} {{background: color default=#0F172A label='Background'}} {{ink: color default=#F8FAFC label='Text colour'}} {{line: color default=#38BDF8 label='Line'}} --><defs><clipPath id="above"><rect width="400" height="100"/></clipPath><clipPath id="below"><rect y="100" width="400" height="100"/></clipPath></defs><rect width="400" height="200" fill="{{background}}"/><g clip-path="url(#above)"><g id="top" transform="translate(0 {{shift}})">${word}</g></g><g clip-path="url(#below)"><g id="bottom" transform="translate(0 -{{shift}})">${word}</g></g><path id="line" d="M{{lineX1}} 100 H{{lineX2}}" stroke="{{line}}" stroke-width="2.5" stroke-linecap="round"/><text id="caption" x="200" y="{{captionY}}" text-anchor="middle" font-family="${SANS2}" font-size="13" letter-spacing="3" fill="{{ink}}" opacity="0">{{caption}}</text></svg>`,
       animate: [
         { id: "line", draw: true, ms: 600, ease: "in-out" },
         { id: "top", attrs: { transform: ["translate(0 {{shift}})", "translate(0 0)"] }, delay: 450, ms: 800, ease: "out" },
@@ -3972,7 +5053,7 @@ var highlighter = {
   ],
   // The swipe runs a little past the phrase at both ends, across its lower half, with a ragged second pass.
   derived: (v) => {
-    const { size, length, left } = fit(String(v.text), 330, 56);
+    const { size, length, left } = fit2(String(v.text), 330, 56);
     const base = 100 + size * 0.35;
     const x0 = left - size * 0.25;
     const x1 = 400 - left + size * 0.2;
@@ -3980,15 +5061,15 @@ var highlighter = {
     return {
       size,
       length,
-      base: r1(base),
-      swipe: `M${r1(x0)} ${r1(y + size * 0.05)} Q${r1((x0 + x1) / 2)} ${r1(y - size * 0.06)} ${r1(x1)} ${r1(y - size * 0.02)}`,
-      ragged: `M${r1(x0 + size * 0.15)} ${r1(y + size * 0.3)} L${r1(x1 - size * 0.1)} ${r1(y + size * 0.26)}`,
-      thick: r1(size * 0.72),
-      thin: r1(size * 0.16)
+      base: r12(base),
+      swipe: `M${r12(x0)} ${r12(y + size * 0.05)} Q${r12((x0 + x1) / 2)} ${r12(y - size * 0.06)} ${r12(x1)} ${r12(y - size * 0.02)}`,
+      ragged: `M${r12(x0 + size * 0.15)} ${r12(y + size * 0.3)} L${r12(x1 - size * 0.1)} ${r12(y + size * 0.26)}`,
+      thick: r12(size * 0.72),
+      thin: r12(size * 0.16)
     };
   },
   motion: {
-    svg: `<svg viewBox="0 0 400 200"><!-- {{text: text default='Ship it faster' label='Phrase'}} {{background: color default=#FFFFFF label='Background'}} {{ink: color default=#111827 label='Text colour'}} {{marker: color default=#FDE047 label='Marker'}} --><rect width="400" height="200" fill="{{background}}"/><g transform="rotate(-1.2 200 100)" opacity="0.9"><path id="swipe" d="{{swipe}}" fill="none" stroke="{{marker}}" stroke-width="{{thick}}"/><path id="ragged" d="{{ragged}}" fill="none" stroke="{{marker}}" stroke-width="{{thin}}" stroke-linecap="round"/></g><text id="phrase" x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="${SANS}" font-size="{{size}}" font-weight="700" fill="{{ink}}" opacity="0">{{text}}</text></svg>`,
+    svg: `<svg viewBox="0 0 400 200"><!-- {{text: text default='Ship it faster' label='Phrase'}} {{background: color default=#FFFFFF label='Background'}} {{ink: color default=#111827 label='Text colour'}} {{marker: color default=#FDE047 label='Marker'}} --><rect width="400" height="200" fill="{{background}}"/><g transform="rotate(-1.2 200 100)" opacity="0.9"><path id="swipe" d="{{swipe}}" fill="none" stroke="{{marker}}" stroke-width="{{thick}}"/><path id="ragged" d="{{ragged}}" fill="none" stroke="{{marker}}" stroke-width="{{thin}}" stroke-linecap="round"/></g><text id="phrase" x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="${SANS2}" font-size="{{size}}" font-weight="700" fill="{{ink}}" opacity="0">{{text}}</text></svg>`,
     animate: [
       { id: "phrase", attrs: { opacity: [0, 1] }, ms: 300, ease: "out" },
       { id: "swipe", draw: true, delay: 350, ms: 650, ease: "in-out" },
@@ -4023,36 +5104,36 @@ var wordCycle = {
     const step = size * 1.3;
     const wx = left + (lead + 0.3) * size;
     return {
-      size: r1(size),
-      base: r1(base),
-      px: r1(left),
-      plen: r1(Math.max(0.6, lead) * size),
-      wx: r1(wx),
-      clipX: r1(wx - 4),
-      clipY: r1(base - size * 1),
-      clipW: r1(Math.max(...ems) * size + 8),
-      clipH: r1(size * 1.32),
-      underY: r1(base + size * 0.18),
+      size: r12(size),
+      base: r12(base),
+      px: r12(left),
+      plen: r12(Math.max(0.6, lead) * size),
+      wx: r12(wx),
+      clipX: r12(wx - 4),
+      clipY: r12(base - size * 1),
+      clipW: r12(Math.max(...ems) * size + 8),
+      clipH: r12(size * 1.32),
+      underY: r12(base + size * 0.18),
       ...Object.fromEntries(
         [...words, words[0]].flatMap((_, k) => [
-          [`y${k}`, r1(base + k * step)],
-          [`o${k}`, r1(k * step)],
-          [`len${k}`, r1(ems[k % CYCLE_WORDS] * size)]
+          [`y${k}`, r12(base + k * step)],
+          [`o${k}`, r12(k * step)],
+          [`len${k}`, r12(ems[k % CYCLE_WORDS] * size)]
         ])
       ),
       ...Object.fromEntries(words.map((w, k) => [`w${k}`, w]))
     };
   },
   motion: {
-    svg: `<svg viewBox="0 0 400 200"><!-- {{prefix: text default='We build' label='Lead-in'}} {{word1: text default=apps label='Word 1'}} {{word2: text default=brands label='Word 2'}} {{word3: text default=websites label='Word 3'}} {{word4: text default=games label='Word 4'}} {{background: color default=#FFFFFF label='Background'}} {{ink: color default=#0F172A label='Text colour'}} {{accent: color default=#6366F1 label='Accent'}} --><defs><clipPath id="window"><rect x="{{clipX}}" y="{{clipY}}" width="{{clipW}}" height="{{clipH}}"/></clipPath></defs><rect width="400" height="200" fill="{{background}}"/><text x="{{px}}" y="{{base}}" textLength="{{plen}}" lengthAdjust="spacingAndGlyphs" font-family="${SANS}" font-size="{{size}}" font-weight="700" fill="{{ink}}">{{prefix}}</text><g clip-path="url(#window)"><g id="reel" transform="translate(0 -0)">${Array.from(
+    svg: `<svg viewBox="0 0 400 200"><!-- {{prefix: text default='We build' label='Lead-in'}} {{word1: text default=apps label='Word 1'}} {{word2: text default=brands label='Word 2'}} {{word3: text default=websites label='Word 3'}} {{word4: text default=games label='Word 4'}} {{background: color default=#FFFFFF label='Background'}} {{ink: color default=#0F172A label='Text colour'}} {{accent: color default=#6366F1 label='Accent'}} --><defs><clipPath id="window"><rect x="{{clipX}}" y="{{clipY}}" width="{{clipW}}" height="{{clipH}}"/></clipPath></defs><rect width="400" height="200" fill="{{background}}"/><text x="{{px}}" y="{{base}}" textLength="{{plen}}" lengthAdjust="spacingAndGlyphs" font-family="${SANS2}" font-size="{{size}}" font-weight="700" fill="{{ink}}">{{prefix}}</text><g clip-path="url(#window)"><g id="reel" transform="translate(0 -0)">${Array.from(
       { length: CYCLE_WORDS + 1 },
-      (_, k) => `<text x="{{wx}}" y="{{y${k}}}" textLength="{{len${k}}}" lengthAdjust="spacingAndGlyphs" font-family="${SANS}" font-size="{{size}}" font-weight="800" fill="{{accent}}">{{w${k % CYCLE_WORDS}}}</text>`
+      (_, k) => `<text x="{{wx}}" y="{{y${k}}}" textLength="{{len${k}}}" lengthAdjust="spacingAndGlyphs" font-family="${SANS2}" font-size="{{size}}" font-weight="800" 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 at = { 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}}})`] }, ...at },
-        { id: "under", attrs: { width: [n2(`len${i}`), n2(`len${i + 1}`)] }, ...at }
+        { id: "under", attrs: { width: [n3(`len${i}`), n3(`len${i + 1}`)] }, ...at }
       ];
     }).flat()
   }
@@ -4073,9 +5154,9 @@ var liquidFill = {
   ],
   // The surface starts under the letters and ends above their caps.
   derived: (v) => {
-    const { size, length } = fit(String(v.text), 360, 110);
+    const { size, length } = fit2(String(v.text), 360, 110);
     const base = 100 + size * 0.36;
-    return { size, length, base: r1(base), low: r1(base + 12), high: r1(base - size * 0.82 - 12) };
+    return { size, length, base: r12(base), low: r12(base + 12), high: r12(base - size * 0.82 - 12) };
   },
   motion: (() => {
     const word = `x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="${HEAVY}" font-size="{{size}}" font-weight="900"`;
@@ -4122,17 +5203,17 @@ var glitchText = {
     { name: "Vapor", values: { left: [1, 0.3, 0.85], right: [0.4, 0.6, 1], background: [0.08, 0.02, 0.12], amount: 1.4 } }
   ],
   derived: (v) => {
-    const { size, length } = fit(String(v.text), 340, 100);
+    const { size, length } = fit2(String(v.text), 340, 100);
     const base = 100 + size * 0.36;
     const top = base - size * 0.78;
-    const cuts = [0, ...BANDS.map((f) => r1(top + f * (base - top))), 200];
+    const cuts = [0, ...BANDS.map((f) => r12(top + f * (base - top))), 200];
     const unit = size * Number(v.amount);
-    const shift = ([x, y]) => `translate(${r1(x * unit)} ${r1(y * unit)})`;
+    const shift = ([x, y]) => `translate(${r12(x * unit)} ${r12(y * unit)})`;
     return {
       size,
       length,
-      base: r1(base),
-      ...Object.fromEntries([0, 1, 2, 3].flatMap((b) => [[`cut${b}`, cuts[b]], [`band${b}`, r1(cuts[b + 1] - cuts[b])]])),
+      base: r12(base),
+      ...Object.fromEntries([0, 1, 2, 3].flatMap((b) => [[`cut${b}`, cuts[b]], [`band${b}`, r12(cuts[b + 1] - cuts[b])]])),
       ...Object.fromEntries(
         GLITCH.flatMap((key, k) => [
           [`red${k}`, shift(key.red)],
@@ -4172,21 +5253,21 @@ var extrudedText = {
   ],
   // Each layer sits a step further back along the extrude direction, shaded from the side colour to the shadow.
   derived: (v) => {
-    const { size, length } = fit(String(v.text), 320, 96);
+    const { size, length } = fit2(String(v.text), 320, 96);
     const step = size * 0.03 * Number(v.depth);
     const at = (deg, i) => {
       const a = deg * Math.PI / 180;
-      return `translate(${r1(Math.cos(a) * step * i)} ${r1(Math.sin(a) * step * i)})`;
+      return `translate(${r12(Math.cos(a) * step * i)} ${r12(Math.sin(a) * step * i)})`;
     };
     return {
       size,
       length,
-      base: r1(92 + size * 0.35),
+      base: r12(92 + size * 0.35),
       ...Object.fromEntries(
         Array.from({ length: LAYERS }, (_, k) => {
           const i = LAYERS - k;
           return [
-            [`fill${i}`, mixHex(v.side, v.shade, i / LAYERS)],
+            [`fill${i}`, mixHex2(v.side, v.shade, i / LAYERS)],
             [`a${i}`, at(EXTRUDE_FROM, i)],
             [`b${i}`, at(EXTRUDE_TO, i)]
           ];
@@ -4233,6 +5314,7 @@ var EFFECT_CATEGORIES = [
   "overlay",
   "text",
   "morph",
+  "interaction",
   "transition",
   "loader",
   "data",
@@ -4915,9 +5997,10 @@ var SHADER_EFFECTS = [
   ...overlayEffects,
   ...textShaders,
   ...morphShaders,
+  ...interactionShaders,
   ...transitions
 ];
-var EFFECTS = [...SHADER_EFFECTS, ...vectorEffects, ...textEffects, ...morphEffects].sort(
+var EFFECTS = [...SHADER_EFFECTS, ...vectorEffects, ...textEffects, ...morphEffects, ...interactionEffects].sort(
   (a, b) => EFFECT_CATEGORIES.indexOf(a.category) - EFFECT_CATEGORIES.indexOf(b.category)
 );
 var byId = new Map(EFFECTS.map((e) => [e.id, e]));
@@ -4970,4 +6053,4 @@ export {
   effectControls,
   effectDefaults
 };
-//# sourceMappingURL=chunk-F754SFRY.js.map
+//# sourceMappingURL=chunk-STGGN4MR.js.map