@pixerate/flair 0.8.0 → 0.10.0

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

@@ -1,3 +1,7 @@
+import {
+  morphPaths,
+  morphSequence
+} from "./chunk-OHW7UG6D.js";
 import {
   getTransitionGLSL
 } from "./chunk-EHDJ3CPJ.js";
@@ -295,10 +299,33 @@ var PORTRAIT = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360">
 <circle cx="295" cy="150" r="6" fill="#2b1d16"/><circle cx="345" cy="150" r="6" fill="#2b1d16"/>
 <path d="M300 185 Q320 198 340 185" stroke="#7a3e2c" stroke-width="5" fill="none"/>
 </svg>`;
+var PORTRAIT_2 = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360" width="640" height="360">
+<rect width="640" height="360" fill="#d3e4e6"/>
+<path d="M255 360 Q268 300 430 297 Q592 300 605 360Z" fill="#a4372f"/>
+<rect x="408" y="250" width="44" height="52" fill="#d9a07c"/>
+<circle cx="430" cy="175" r="95" fill="#e8b48f"/>
+<path d="M332 172 Q330 66 430 64 Q530 66 528 172 Q520 112 470 100 Q420 128 352 116 Q336 140 332 172Z" fill="#8a3b1e"/>
+<circle cx="396" cy="175" r="8" fill="#3a2418"/><circle cx="464" cy="175" r="8" fill="#3a2418"/>
+<path d="M424 186 Q430 206 436 186" stroke="#c48262" stroke-width="5" fill="none"/>
+<path d="M403 225 Q430 244 457 225" stroke="#9c4a35" stroke-width="7" fill="none" stroke-linecap="round"/>
+</svg>`;
+var LOGO = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+<path fill="#6366f1" fill-rule="evenodd" d="M256 56a200 200 0 1 1 0 400a200 200 0 1 1 0-400zm0 92a108 108 0 1 0 0 216a108 108 0 1 0 0-216z"/>
+<circle cx="256" cy="256" r="52" fill="#6366f1"/>
+</svg>`;
+var HEART = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
+<path fill="#f43f5e" d="M256 452C120 352 40 272 40 172C40 102 95 58 160 58C205 58 238 84 256 118C274 84 307 58 352 58C417 58 472 102 472 172C472 272 392 352 256 452Z"/>
+</svg>`;
 var SAMPLE_IMAGES = {
   landscape: svgDataUrl(LANDSCAPE),
   city: svgDataUrl(CITY),
-  portrait: svgDataUrl(PORTRAIT)
+  portrait: svgDataUrl(PORTRAIT),
+  /** Another face, larger and to the right: morph it with `portrait`. */
+  portrait2: svgDataUrl(PORTRAIT_2),
+  /** A ring-and-dot mark, indigo on transparent. */
+  logo: svgDataUrl(LOGO),
+  /** A heart, rose on transparent. */
+  heart: svgDataUrl(HEART)
 };
 function charWidth(c) {
   if (/[iIjl.,:;'!|`]/.test(c)) return 0.3;
@@ -1290,162 +1317,2107 @@ uniform float uSpeed;     // @control min=0 max=2 default=0.5 label="Speed"`,
   col = mix(col, uWall, wall);
   fragColor = vec4(col, 1.0);
 }`
-  )
+  )
+};
+var kaleidoscope = {
+  kind: "shader",
+  id: "kaleidoscope",
+  name: "Kaleidoscope",
+  description: "Mirrored wedges of shifting colour turning around the centre.",
+  category: "pattern",
+  tags: ["psychedelic", "music", "symmetry"],
+  source: glsl(
+    `// Kaleidoscope: mirrored wedges of shifting colour.
+uniform int uSegments;  // @control min=2 max=16 default=8 label="Segments"
+uniform float uZoom;    // @control min=0.5 max=8 default=3 label="Zoom"
+uniform float uSpeed;   // @control min=0 max=2 default=0.4 label="Speed"
+uniform vec3 uTint;     // @control color default=#FFFFFF label="Tint"`,
+    ROTATE,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
+  float t = iTime * uSpeed;
+  float n = float(uSegments);
+  float a = atan(p.y, p.x) + t * 0.3;
+  float r = length(p);
+  float wedge = 6.28318 / n;
+  a = mod(a, wedge);
+  a = abs(a - wedge * 0.5);
+  vec2 q = vec2(cos(a), sin(a)) * r * uZoom;
+  q = rot(t * 0.2) * q + t;
+  vec3 col = 0.5 + 0.5 * cos(vec3(0.0, 2.0, 4.0) + q.x * 2.0 + sin(q.y * 3.0) + t);
+  col *= 0.6 + 0.4 * sin(q.x * 5.0) * sin(q.y * 5.0);
+  col *= smoothstep(1.2, 0.2, r);
+  fragColor = vec4(col * uTint, 1.0);
+}`
+  )
+};
+var neonCircuit = {
+  kind: "shader",
+  id: "neon-circuit",
+  name: "Neon circuit",
+  description: "Glowing neon traces routed up a circuit board, with pulses of light racing along them.",
+  category: "pattern",
+  tags: ["background", "neon", "circuit", "tech", "80s", "vaporwave"],
+  source: glsl(
+    `// Neon circuit: glowing traces climbing a board in rounded jogs, with pulses running along them.
+uniform vec3 uBackground; // @control color default=#170A2E label="Background"
+uniform vec3 uColorA;     // @control color default=#FF5FA2 label="Trace A"
+uniform vec3 uColorB;     // @control color default=#43E5FF label="Trace B"
+uniform vec3 uColorC;     // @control color default=#FFD23F label="Trace C"
+uniform vec3 uColorD;     // @control color default=#9D7BFF label="Trace D"
+uniform float uLanes;     // @control min=4 max=40 default=14 label="Lanes"
+uniform float uDensity;   // @control min=0.1 max=1 default=0.7 label="Density"
+uniform float uWidth;     // @control min=0.04 max=0.4 default=0.16 label="Line width"
+uniform float uGlow;      // @control min=0 max=2 default=1 label="Glow"
+uniform float uSpeed;     // @control min=0 max=3 default=1 label="Pulse speed"
+uniform float uPulses;    // @control min=0 max=1 default=0.5 label="Pulses"
+uniform float uScroll;    // @control min=-2 max=2 default=0.4 label="Scroll"
+uniform float uGrid;      // @control min=0 max=1 default=0.3 label="Grid"`,
+    HASH,
+    `// Each trace k owns lanes 3k..3k+2 and climbs in runs of RUN lanes, jogging
+// sideways between them on rounded corners, so traces never cross.
+const float RUN = 2.5;
+const float RADIUS = 0.35;
+
+float laneOf(float k, float j) {
+  return 3.0 * k + floor(hash12(vec2(k, j) + 0.37) * 3.0) + 0.5;
+}
+
+vec3 traceColor(float k) {
+  float h = hash12(vec2(k, 7.3));
+  return h < 0.25 ? uColorA : h < 0.5 ? uColorB : h < 0.75 ? uColorC : uColorD;
+}
+
+// Distance to a quarter circle of RADIUS round c, in the quadrant whose signs are q.
+float arcDist(vec2 p, vec2 c, vec2 q) {
+  vec2 d = p - c;
+  return d.x * q.x >= 0.0 && d.y * q.y >= 0.0 ? abs(length(d) - RADIUS) : 1e5;
+}
+
+// Trace k's run j: distance from p to its climb (x) and how far up it p is (y), then
+// the same for its jog into run j + 1 (z, w), measured along the run.
+vec4 run(vec2 p, float k, float j) {
+  float x0 = laneOf(k, j - 1.0);
+  float x1 = laneOf(k, j);
+  float x2 = laneOf(k, j + 1.0);
+  float y0 = j * RUN;
+  float y1 = y0 + RUN;
+  float lo = y0 + (x0 == x1 ? 0.0 : RADIUS);
+  float hi = y1 - (x2 == x1 ? 0.0 : RADIUS);
+  vec4 r = vec4(length(p - vec2(x1, clamp(p.y, lo, hi))), p.y - y0, 1e5, 0.0);
+  if (x2 != x1) {
+    float sx = sign(x2 - x1);
+    float h = length(p - vec2(clamp(p.x, min(x1, x2) + RADIUS, max(x1, x2) - RADIUS), y1));
+    h = min(h, arcDist(p, vec2(x1 + sx * RADIUS, y1 - RADIUS), vec2(-sx, 1.0)));
+    h = min(h, arcDist(p, vec2(x2 - sx * RADIUS, y1 + RADIUS), vec2(sx, -1.0)));
+    r.zw = vec2(h, RUN + abs(p.x - x1));
+  }
+  return r;
+}
+
+// How bright a pulse is at s along run j of trace k: a bright head with a fading tail.
+// A pulse crosses one run per cycle and carries on into the next with the next cycle.
+float pulseAt(float k, float j, float s) {
+  float cycle = iTime * uSpeed * 1.5 + hash12(vec2(k, 8.8));
+  float behind = fract(cycle) * (RUN + abs(laneOf(k, j + 1.0) - laneOf(k, j))) - s;
+  float lit = step(hash12(vec2(k, floor(cycle) - j)), uPulses);
+  return lit * (behind >= 0.0 ? exp(-behind * 0.8) : exp(behind * 30.0));
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float px = uLanes / iResolution.y;
+  vec2 p = fragCoord * px;
+  p.y += iTime * uScroll;
+
+  vec2 g = abs(fract(p / 1.5) - 0.5);
+  float grid = 1.0 - smoothstep(0.0, px * 1.5, (0.5 - max(g.x, g.y)) * 1.5);
+  vec3 light = uColorD * 0.12 * uGrid * grid;
+
+  float home = floor(p.x / 3.0);
+  for (int i = -1; i <= 1; i++) {
+    float k = home + float(i);
+    if (hash12(vec2(k, 1.9)) > uDensity) continue;
+    vec2 q = vec2(p.x, p.y + hash12(vec2(k, 4.1)) * RUN);
+    float jq = floor(q.y / RUN);
+    float w = uWidth * 0.5;
+    // The trace's nearest point lights it; each piece's pulse lights only round that piece.
+    float d = 1e5;
+    float pulse = 0.0;
+    for (int b = -1; b <= 1; b++) {
+      float j = jq + float(b);
+      vec4 r = run(q, k, j);
+      d = min(d, min(r.x, r.z));
+      pulse = max(pulse, pulseAt(k, j, r.y) * exp(-r.x / uWidth));
+      if (r.z < 1e4) pulse = max(pulse, pulseAt(k, j, r.w) * exp(-r.z / uWidth));
+    }
+    float core = 1.0 - smoothstep(w - px, w + px, d);
+    float glow = uGlow * (0.5 * exp(-d / uWidth) + 0.2 * exp(-d / (uWidth * 5.0)));
+    vec3 c = traceColor(k);
+    light += c * (core * 0.8 + glow + uGlow * pulse) + mix(c, vec3(1.0), 0.7) * core * pulse * 3.0;
+  }
+  fragColor = vec4(uBackground + (1.0 - exp(-light * 1.4)), 1.0);
+}`
+  ),
+  presets: [
+    { name: "Mainframe", values: { uBackground: [0, 0.04, 0.02], uColorA: [0.2, 1, 0.45], uColorB: [0.1, 0.75, 0.35], uColorC: [0.6, 1, 0.7], uColorD: [0.1, 0.5, 0.25] } },
+    { name: "Blueprint", values: { uBackground: [0.02, 0.06, 0.16], uColorA: [0.35, 0.75, 1], uColorB: [0.6, 0.9, 1], uColorC: [1, 1, 1], uColorD: [0.25, 0.45, 0.9], uGlow: 0.6, uPulses: 0.3 } },
+    { name: "Dense", values: { uLanes: 26, uDensity: 1, uWidth: 0.12, uPulses: 0.8 } }
+  ]
+};
+
+// 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 r22 = (v) => {
+  const r = Math.round(v * 100) / 100;
+  return Object.is(r, -0) ? 0 : r;
+};
+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]]);
+};
+function mapPath(d, f) {
+  const moved = pointsOf(d).map(f);
+  let i = 0;
+  return d.replace(NUMBER, () => {
+    const k = i++;
+    return String(r22(moved[k >> 1][k % 2]));
+  });
+}
+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) => {
+    const a = (from + (to - from) * k / steps) * DEG;
+    return [cx + rx * Math.cos(a), cy + ry * Math.sin(a)];
+  });
+}
+var circle = (cx, cy, r) => polyline(arc(cx, cy, r, r, 0, 360).slice(0, -1), true);
+var star = (cx, cy, tips, outer, inner) => polyline(
+  Array.from({ length: tips * 2 }, (_, k) => {
+    const r = k % 2 ? inner : outer;
+    const a = (-90 + k * 180 / tips) * DEG;
+    return [cx + r * Math.cos(a), cy + r * Math.sin(a)];
+  }),
+  true
+);
+function stroke(pts, width, flat = {}) {
+  const h = width / 2;
+  const normals = pts.slice(1).map((p, i) => {
+    const q = pts[i];
+    const l = Math.hypot(p[0] - q[0], p[1] - q[1]);
+    return [-(p[1] - q[1]) / l, (p[0] - q[0]) / l];
+  });
+  const offsets = pts.map((_, i) => {
+    const a = normals[Math.max(0, i - 1)];
+    const b = normals[Math.min(normals.length - 1, i)];
+    const l = Math.hypot(a[0] + b[0], a[1] + b[1]);
+    const m = [(a[0] + b[0]) / l, (a[1] + b[1]) / l];
+    const k = h / (m[0] * b[0] + m[1] * b[1]);
+    return [m[0] * k, m[1] * k];
+  });
+  const left = pts.map((p, i) => [p[0] + offsets[i][0], p[1] + offsets[i][1]]);
+  const right = pts.map((p, i) => [p[0] - offsets[i][0], p[1] - offsets[i][1]]).reverse();
+  const angle = (v) => Math.atan2(v[1], v[0]) / DEG;
+  const [first, last] = [pts[0], pts[pts.length - 1]];
+  const endAt = angle(normals[normals.length - 1]);
+  const startAt = angle(normals[0]) + 180;
+  const endCap = flat.end ? [] : arc(last[0], last[1], h, h, endAt, endAt - 180, 15).slice(1, -1);
+  const startCap = flat.start ? [] : arc(first[0], first[1], h, h, startAt, startAt - 180, 15).slice(1, -1);
+  return polyline([...left, ...endCap, ...right, ...startCap], true);
+}
+function around(c, r, from, to, avoid) {
+  let delta = ((to - from) % 360 + 360) % 360;
+  if (((avoid - from) % 360 + 360) % 360 < delta) delta -= 360;
+  return arc(c[0], c[1], r, r, from, from + delta);
+}
+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 = (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, 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 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];
+  const pts = pointsOf(outline);
+  const xs = pts.map((p) => p[0]);
+  const ys = pts.map((p) => p[1]);
+  const [x0, y0] = [Math.min(...xs), Math.min(...ys)];
+  const [w, h] = [Math.max(...xs) - x0, Math.max(...ys) - y0];
+  const s = Math.min(box[2] / Math.max(w, 1e-6), box[3] / Math.max(h, 1e-6));
+  const [ox, oy] = [box[0] + (box[2] - w * s) / 2, box[1] + (box[3] - h * s) / 2];
+  return mapPath(outline, (p) => [ox + (p[0] - x0) * s, oy + (p[1] - y0) * s]);
+}
+function fittedOr(d, fallback, box, points) {
+  try {
+    return fitted(String(d), box, points);
+  } catch {
+    return fitted(fallback, box, points);
+  }
+}
+var SHAPE_FROM = "M30 12 H70 A18 18 0 0 1 88 30 V70 A18 18 0 0 1 70 88 H30 A18 18 0 0 1 12 70 V30 A18 18 0 0 1 30 12 Z";
+var SHAPE_TO = "M50 6 L61 38 L95 38 L67 58 L78 92 L50 72 L22 92 L33 58 L5 38 L39 38 Z";
+var shapeMorph = {
+  kind: "vector",
+  id: "shape-morph",
+  name: "Shape morph",
+  description: "Any two SVG paths morphing into each other and back, their fill and outline colours blending along.",
+  category: "morph",
+  tags: ["morph", "shape", "path", "icon", "logo"],
+  hold: 0,
+  presets: [
+    { name: "Ink", values: { background: [0.98, 0.97, 0.94], fillFrom: [0.1, 0.1, 0.12], fillTo: [0.1, 0.1, 0.12], strokeFrom: [0.1, 0.1, 0.12], strokeTo: [0.1, 0.1, 0.12], width: 0 } },
+    {
+      name: "Heart to drop",
+      values: {
+        from: "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",
+        to: "M12 2 C12 2 5 10 5 15 A7 7 0 0 0 19 15 C19 10 12 2 12 2 Z",
+        fillFrom: [0.96, 0.25, 0.37],
+        fillTo: [0.22, 0.6, 0.97]
+      }
+    },
+    { name: "Outline", values: { fillFrom: [0.06, 0.09, 0.16], fillTo: [0.06, 0.09, 0.16], strokeFrom: [0.2, 0.83, 0.6], strokeTo: [0.98, 0.8, 0.08], width: 2.5 } }
+  ],
+  // Each path is fitted to the picture on its own, so paths in any coordinates fill it.
+  derived: (v) => {
+    const [a, b] = morphPaths(fittedOr(v.from, SHAPE_FROM, [12, 12, 76, 76], 96), fittedOr(v.to, SHAPE_TO, [12, 12, 76, 76], 96), { points: 80 });
+    return { a, b, back: Number(v.pause) * 2 + Number(v.morph) };
+  },
+  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: 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" }
+    ]
+  }
+};
+var LINE = 2.4;
+var ICON_PAIRS = (() => {
+  const c = 12;
+  const meet = LINE / 2 / Math.SQRT2;
+  const sun = [circle(c, c, 4.6), ...Array.from({ length: 8 }, (_, k) => {
+    const a = k * 45 * DEG;
+    return stroke([[c + 7.6 * Math.cos(a), c + 7.6 * Math.sin(a)], [c + 10 * Math.cos(a), c + 10 * Math.sin(a)]], 2);
+  })];
+  return [
+    [
+      "M7.5 4.5 L13.5 8.32 L13.5 15.68 L7.5 19.5 Z M13.5 8.32 L19.3 12 L13.5 15.68 Z",
+      [stroke([[8.5, 6.5], [8.5, 17.5]], 3.6), stroke([[15.5, 6.5], [15.5, 17.5]], 3.6)].join(" ")
+    ],
+    [
+      [7, 12, 17].map((y) => stroke([[5, y], [19, y]], LINE)).join(" "),
+      [
+        stroke([[6.5, 6.5], [17.5, 17.5]], LINE),
+        stroke([[17.5, 6.5], [c + meet, c - meet]], LINE, { end: true }),
+        stroke([[6.5, 17.5], [c - meet, c + meet]], LINE, { end: true })
+      ].join(" ")
+    ],
+    ["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)],
+    [`${HEART3} ${placed(HEART3, 12, 12, 0.7)}`, HEART3]
+  ];
+})();
+var iconMorphs = /* @__PURE__ */ new Map();
+function iconMorph(pair2) {
+  if (!iconMorphs.has(pair2)) iconMorphs.set(pair2, morphPaths(...ICON_PAIRS[pair2], { points: 64 }));
+  return iconMorphs.get(pair2);
+}
+var pose = (turn, scale) => `translate(60 60) rotate(${turn}) scale(${scale}) translate(-12 -12)`;
+var toggle = (at, d, fill, turn) => [
+  { id: "glyph", attrs: { d }, delay: at, ms: 420, ease: "in-out" },
+  { id: "icon", attrs: { transform: [pose(0, 2.6), pose(turn, 2.15)] }, delay: at, ms: 170, ease: "out" },
+  { id: "icon", attrs: { transform: [pose(turn, 2.15), pose(-turn * 0.3, 2.85)] }, delay: at + 170, ms: 190, ease: "in-out" },
+  { id: "icon", attrs: { transform: [pose(-turn * 0.3, 2.85), pose(0, 2.6)] }, delay: at + 360, ms: 260, ease: "in-out" },
+  { id: "button", attrs: { fill }, delay: at, ms: 320, ease: "in-out" }
+];
+var iconToggle = {
+  kind: "vector",
+  id: "icon-toggle",
+  name: "Icon toggle",
+  description: "A round button whose icon morphs between two states (play and pause, menu and close, sun and moon) with a little pop.",
+  category: "morph",
+  tags: ["morph", "icon", "ui", "button", "toggle", "micro-interaction"],
+  hold: 700,
+  presets: [
+    { name: "Play / pause", values: { pair: 0 } },
+    { name: "Menu / close", values: { pair: 1, off: [0.98, 0.98, 0.98], on: [0.07, 0.07, 0.09], ink: [0.4, 0.4, 0.45], page: [0.9, 0.91, 0.93] } },
+    { name: "Plus / check", values: { pair: 2, on: [0.13, 0.77, 0.37] } },
+    { name: "Day / night", values: { pair: 3, off: [0.98, 0.75, 0.14], on: [0.19, 0.18, 0.5], page: [0.06, 0.07, 0.15] } },
+    { name: "Like", values: { pair: 4, off: [0.12, 0.12, 0.14], on: [0.94, 0.27, 0.4] } }
+  ],
+  derived: (v) => {
+    const [a, b] = iconMorph(Math.min(ICON_PAIRS.length - 1, Math.max(0, Math.round(Number(v.pair)) || 0)));
+    return { a, b };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 120 120"><!-- {{pair: int min=0 max=4 default=0 label='Icons (play, menu, plus, sun, heart)'}} {{ink: color default=#FFFFFF label='Icon'}} {{off: color default=#334155 label='Button'}} {{on: color default=#6366F1 label='Button (on)'}} {{page: color default=#0B1020 label='Background'}} --><rect width="120" height="120" fill="{{page}}"/><circle id="button" cx="60" cy="60" r="44" fill="{{off}}"/><g id="icon" transform="${pose(0, 2.6)}"><path id="glyph" d="{{a}}" fill="{{ink}}" fill-rule="evenodd" stroke="{{ink}}" stroke-width="0.3" stroke-linejoin="round"/></g></svg>`,
+    animate: [...toggle(500, ["{{a}}", "{{b}}"], ["{{off}}", "{{on}}"], -16), ...toggle(2100, ["{{b}}", "{{a}}"], ["{{on}}", "{{off}}"], 16)]
+  }
+};
+var SEQUENCE = morphSequence(
+  [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 = {
+  kind: "vector",
+  id: "morph-sequence",
+  name: "Morph sequence",
+  description: "One shape flowing from circle to star to heart to hexagon and round again, its colour changing with each.",
+  category: "morph",
+  tags: ["morph", "shape", "loop", "background", "playful"],
+  hold: 0,
+  presets: [
+    { name: "Pastel", values: { background: [0.99, 0.97, 0.94], c0: [0.65, 0.84, 0.98], c1: [0.99, 0.85, 0.55], c2: [0.98, 0.65, 0.7], c3: [0.75, 0.7, 0.98] } },
+    { name: "Mono", values: { background: [0.04, 0.04, 0.05], c0: [0.95, 0.95, 0.95], c1: [0.95, 0.95, 0.95], c2: [0.95, 0.95, 0.95], c3: [0.95, 0.95, 0.95], morph: 600, pause: 300 } }
+  ],
+  derived: (v) => {
+    const each = Number(v.morph) + Number(v.pause);
+    return Object.fromEntries(SEQUENCE.map((_, i) => [`at${i}`, Number(v.pause) + i * each]));
+  },
+  motion: {
+    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: n2(`at${i}`), ms: n2("morph"), ease: "in-out" };
+    })
+  }
+};
+var GOO = (() => {
+  const cluster = [
+    circle(100, 100, 25),
+    ...Array.from({ length: 5 }, (_, k) => circle(100 + 56 * Math.cos((-90 + 72 * k) * DEG), 100 + 56 * Math.sin((-90 + 72 * k) * DEG), 15))
+  ].join(" ");
+  const blobStar = polyline(
+    arc(100, 100, 1, 1, -90, 270, 4).slice(0, -1).map((p) => {
+      const a = Math.atan2(p[1] - 100, p[0] - 100);
+      const r = 50 + 20 * Math.cos(5 * (a + Math.PI / 2));
+      return [100 + r * Math.cos(a), 100 + r * Math.sin(a)];
+    }),
+    true
+  );
+  const pair2 = `${circle(63, 100, 35)} ${circle(137, 100, 35)}`;
+  const stages = morphSequence([cluster, blobStar, pair2], { points: 64 }).map((d) => d.split(/ (?=M)/));
+  return stages[0].map((_, piece) => stages.map((stage) => stage[piece]));
+})();
+var gooeyMorph = {
+  kind: "vector",
+  id: "gooey-morph",
+  name: "Gooey morph",
+  description: "A cluster of liquid drops melting into a star, splitting into two blobs and beading back into drops.",
+  category: "morph",
+  tags: ["morph", "gooey", "liquid", "metaball", "blob", "loop"],
+  hold: 0,
+  presets: [
+    { name: "Lava", values: { colorA: [1, 0.85, 0.2], colorB: [0.95, 0.2, 0.1], background: [0.1, 0.02, 0.02] } },
+    { name: "Slime", values: { colorA: [0.75, 1, 0.3], colorB: [0.1, 0.7, 0.35], background: [0.03, 0.08, 0.05], goo: 9 } },
+    { name: "Ink", values: { colorA: [0.1, 0.1, 0.12], colorB: [0.1, 0.1, 0.12], background: [0.97, 0.96, 0.93] } }
+  ],
+  derived: (v) => {
+    const each = Number(v.morph) + Number(v.pause);
+    return { ...Object.fromEntries(GOO[0].map((_, i) => [`at${i}`, Number(v.pause) + i * each])), threshold: -0.5 * Number(v.sharp) };
+  },
+  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: n2(`at${s}`), ms: n2("morph"), ease: "in-out" }))
+    )
+  }
+};
+var DOTS = 48;
+var DOT_STAGGER = 14;
+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;
+  return x - Math.floor(x);
+};
+var particleMorph = {
+  kind: "vector",
+  id: "particle-morph",
+  name: "Particle morph",
+  description: "A shape bursting into dots along its outline that swirl across and settle into a second shape, then back.",
+  category: "morph",
+  tags: ["morph", "particles", "dots", "shape", "logo", "reveal"],
+  hold: 600,
+  presets: [
+    { name: "Confetti", values: { background: [1, 0.98, 0.95], fromColor: [0.93, 0.27, 0.6], toColor: [0.15, 0.55, 0.95], ghost: 0.1, size: 3.2 } },
+    { name: "Embers", values: { background: [0.05, 0.02, 0.02], fromColor: [1, 0.85, 0.3], toColor: [1, 0.3, 0.1], scatter: 50, size: 2 } },
+    { name: "Circle to square", values: { from: "M12 2 A10 10 0 1 1 12 22 A10 10 0 1 1 12 2 Z", to: "M3 3 H21 V21 H3 Z" } }
+  ],
+  // The dots sit on the morphed outlines: point k of one shape flies to point k of the other.
+  derived: (v) => {
+    const box = [40, 40, 120, 120];
+    const [a, b] = morphPaths(fittedOr(v.from, PARTICLE_FROM, box, 96), fittedOr(v.to, PARTICLE_TO, box, 96), { points: DOTS });
+    const [pa, pb] = [pointsOf(a), pointsOf(b)];
+    const out = { a, b };
+    const scatter = Number(v.scatter);
+    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}`] = 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}`] = 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;
+  },
+  motion: (() => {
+    const back = 3e3;
+    const spread = DOTS * DOT_STAGGER;
+    const leg = (i, at, from, mid, to, colours) => [
+      { 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, 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 },
+        (_, i) => `<circle id="p${i}" cx="{{ax${i}}}" cy="{{ay${i}}}" r="{{size}}" fill="{{fromColor}}"/>`
+      ).join("")}</svg>`,
+      animate: [
+        fade("ghostA", 400, false),
+        fade("ghostB", 400 + spread + 900, true),
+        fade("ghostB", back, false),
+        fade("ghostA", back + spread + 900, true),
+        ...Array.from({ length: DOTS }, (_, i) => [
+          ...leg(i, 400, "a", "s", "b", ["{{fromColor}}", "{{toColor}}"]),
+          ...leg(i, back, "b", "t", "a", ["{{toColor}}", "{{fromColor}}"])
+        ]).flat()
+      ]
+    };
+  })()
+};
+var DIGITS = (() => {
+  const six = [...arc(17, 22, 14, 19, 245, 180), ...arc(10, 22, 7, 7, 180, 540).slice(1)];
+  return [
+    polyline(arc(10, 16, 7, 13, 0, 360).slice(0, -1), true),
+    polyline([[5.5, 8], [11, 3], [11, 29]]),
+    polyline([...arc(10, 9.5, 6.5, 6.5, 200, 380), [3.5, 29], [17, 29]]),
+    polyline([...arc(10, 9, 6, 6, 215, 450), ...arc(10, 21.5, 7, 6.5, 270, 495).slice(1)]),
+    polyline([[14, 29], [14, 3], [3, 20.5], [18, 20.5]]),
+    polyline([[16.5, 3], [5.5, 3], [4.6, 14.6], ...arc(10.5, 21.2, 6.8, 7, 218, 500)]),
+    polyline(six),
+    polyline([[3, 3], [17, 3], [8, 29]]),
+    polyline([...arc(10, 9.5, 5.5, 5.5, 90, 450), ...arc(10, 22, 7, 7, 270, 630).slice(1)]),
+    polyline(six.map((p) => [20 - p[0], 32 - p[1]]))
+  ];
+})();
+var BLANK = "M10 16 L10 16";
+var SLOTS = 4;
+var MAX_STEPS = 8;
+var DIGIT_REST = 260;
+var digitMorph = {
+  kind: "vector",
+  id: "digit-morph",
+  name: "Digit morph",
+  description: "A number counting from one value to another, each digit's stroke bending smoothly into the next.",
+  category: "morph",
+  tags: ["morph", "number", "counter", "countdown", "kpi", "digits"],
+  hold: 900,
+  presets: [
+    { name: "Countdown", values: { from: 10, to: 0, ink: [1, 0.36, 0.3] } },
+    { name: "New year", values: { from: 2025, to: 2026, morph: 700, background: [0.04, 0.03, 0.1], ink: [1, 0.84, 0.4] } },
+    { name: "Thin", values: { weight: 1.4, background: [0.98, 0.98, 0.97], ink: [0.1, 0.1, 0.12] } }
+  ],
+  derived: (v) => {
+    const from = Math.round(Number(v.from)) || 0;
+    const to = Math.round(Number(v.to)) || 0;
+    const steps = Math.min(MAX_STEPS, Math.abs(to - from));
+    const values = Array.from({ length: steps + 1 }, (_, k) => Math.round(from + (to - from) * k / Math.max(1, steps)));
+    const used = Math.max(1, ...values.map((x) => String(x).length));
+    const scale = Math.min(4.2, 340 / (used * 22 - 2));
+    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: 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}`] = r22(left + Math.max(0, place) * 22 * scale);
+      const glyphs = values.map((x) => {
+        const text = String(x);
+        const at = text.length - (used - place);
+        return place >= 0 && at >= 0 ? Number(text[at]) : -1;
+      });
+      const paths = morphSequence(glyphs.map((g) => g < 0 ? BLANK : DIGITS[g]), { points: 64 });
+      for (let k = 0; k <= MAX_STEPS; k++) {
+        const s = Math.min(k, steps);
+        out[`d${j}_${k}`] = paths[s];
+        out[`o${j}_${k}`] = glyphs[s] < 0 ? 0 : 1;
+      }
+    }
+    return out;
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 400 200"><!-- {{from: int min=0 max=9999 default=12 label='From'}} {{to: int min=0 max=9999 default=20 label='To'}} {{ink: color default=#F8FAFC label='Digits'}} {{background: color default=#111827 label='Background'}} {{weight: float min=0.8 max=5 default=2.8 step=0.1 label='Weight'}} {{morph: float min=150 max=1500 default=420 step=10 label='Morph ms'}} --><rect width="400" height="200" fill="{{background}}"/>${Array.from(
+      { length: SLOTS },
+      (_, j) => `<path id="s${j}" d="{{d${j}_0}}" opacity="{{o${j}_0}}" transform="translate({{x${j}}} {{y}}) scale({{scale}})" fill="none" fill-rule="evenodd" stroke="{{ink}}" stroke-width="{{weight}}" stroke-linecap="round" stroke-linejoin="round"/>`
+    ).join("")}</svg>`,
+    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: [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: [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 kaleidoscope = {
+var hoverSwap = {
   kind: "shader",
-  id: "kaleidoscope",
-  name: "Kaleidoscope",
-  description: "Mirrored wedges of shifting colour turning around the centre.",
-  category: "pattern",
-  tags: ["psychedelic", "music", "symmetry"],
+  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(
-    `// Kaleidoscope: mirrored wedges of shifting colour.
-uniform int uSegments;  // @control min=2 max=16 default=8 label="Segments"
-uniform float uZoom;    // @control min=0.5 max=8 default=3 label="Zoom"
-uniform float uSpeed;   // @control min=0 max=2 default=0.4 label="Speed"
-uniform vec3 uTint;     // @control color default=#FFFFFF label="Tint"`,
-    ROTATE,
+    `// 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 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
-  float t = iTime * uSpeed;
-  float n = float(uSegments);
-  float a = atan(p.y, p.x) + t * 0.3;
-  float r = length(p);
-  float wedge = 6.28318 / n;
-  a = mod(a, wedge);
-  a = abs(a - wedge * 0.5);
-  vec2 q = vec2(cos(a), sin(a)) * r * uZoom;
-  q = rot(t * 0.2) * q + t;
-  vec3 col = 0.5 + 0.5 * cos(vec3(0.0, 2.0, 4.0) + q.x * 2.0 + sin(q.y * 3.0) + t);
-  col *= 0.6 + 0.4 * sin(q.x * 5.0) * sin(q.y * 5.0);
-  col *= smoothstep(1.2, 0.2, r);
-  fragColor = vec4(col * uTint, 1.0);
+  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 neonCircuit = {
+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"
+uniform bool uAnimate;     // @control default=true label="Animate"
+uniform float uProgress;   // @control min=0 max=1 default=0.5 label="Progress (when still)"`;
+var COMMON = `
+float progress() {
+  return uAnimate ? smoothstep(0.1, 0.9, 0.5 - 0.5 * cos(iTime * 6.28318 / 4.0)) : uProgress;
+}
+
+// The share of an image visible across and up when it covers the frame (the test card fits it).
+vec2 coverScale(sampler2D tex) {
+  vec2 size = vec2(textureSize(tex, 0));
+  float frameAspect = iResolution.x / iResolution.y;
+  float imageAspect = size.x > 1.0 ? size.x / size.y : frameAspect;
+  return frameAspect > imageAspect ? vec2(1.0, imageAspect / frameAspect) : vec2(frameAspect / imageAspect, 1.0);
+}
+
+vec3 cover(sampler2D tex, vec2 uv) {
+  return picture(tex, 0.5 + (uv - 0.5) * coverScale(tex));
+}
+
+float luma(vec3 c) {
+  return dot(c, vec3(0.2126, 0.7152, 0.0722));
+}`.trim();
+var featureMorph = {
   kind: "shader",
-  id: "neon-circuit",
-  name: "Neon circuit",
-  description: "Glowing neon traces routed up a circuit board, with pulses of light racing along them.",
-  category: "pattern",
-  tags: ["background", "neon", "circuit", "tech", "80s", "vaporwave"],
+  id: "feature-morph",
+  name: "Feature morph",
+  description: "The classic face morph: two pictures warp so five matching points (eyes, mouth, chin, hairline) meet while they cross-fade.",
+  category: "morph",
+  tags: ["morph", "face", "warp", "image", "transition"],
+  loop: 4,
   source: glsl(
-    `// Neon circuit: glowing traces climbing a board in rounded jogs, with pulses running along them.
-uniform vec3 uBackground; // @control color default=#170A2E label="Background"
-uniform vec3 uColorA;     // @control color default=#FF5FA2 label="Trace A"
-uniform vec3 uColorB;     // @control color default=#43E5FF label="Trace B"
-uniform vec3 uColorC;     // @control color default=#FFD23F label="Trace C"
-uniform vec3 uColorD;     // @control color default=#9D7BFF label="Trace D"
-uniform float uLanes;     // @control min=4 max=40 default=14 label="Lanes"
-uniform float uDensity;   // @control min=0.1 max=1 default=0.7 label="Density"
-uniform float uWidth;     // @control min=0.04 max=0.4 default=0.16 label="Line width"
-uniform float uGlow;      // @control min=0 max=2 default=1 label="Glow"
-uniform float uSpeed;     // @control min=0 max=3 default=1 label="Pulse speed"
-uniform float uPulses;    // @control min=0 max=1 default=0.5 label="Pulses"
-uniform float uScroll;    // @control min=-2 max=2 default=0.4 label="Scroll"
-uniform float uGrid;      // @control min=0 max=1 default=0.3 label="Grid"`,
-    HASH,
-    `// Each trace k owns lanes 3k..3k+2 and climbs in runs of RUN lanes, jogging
-// sideways between them on rounded corners, so traces never cross.
-const float RUN = 2.5;
-const float RADIUS = 0.35;
+    `// Feature morph: both images warp towards in-between positions of five matching points while they cross-fade.
+${pair(SAMPLE_IMAGES.portrait, SAMPLE_IMAGES.portrait2)}
+uniform vec2 uFromA;       // @control min=0 max=1 default=0.461,0.583 label="From: left eye"
+uniform vec2 uFromB;       // @control min=0 max=1 default=0.539,0.583 label="From: right eye"
+uniform vec2 uFromC;       // @control min=0 max=1 default=0.5,0.472 label="From: mouth"
+uniform vec2 uFromD;       // @control min=0 max=1 default=0.5,0.389 label="From: chin"
+uniform vec2 uFromE;       // @control min=0 max=1 default=0.5,0.778 label="From: hairline"
+uniform vec2 uToA;         // @control min=0 max=1 default=0.619,0.514 label="To: left eye"
+uniform vec2 uToB;         // @control min=0 max=1 default=0.725,0.514 label="To: right eye"
+uniform vec2 uToC;         // @control min=0 max=1 default=0.672,0.364 label="To: mouth"
+uniform vec2 uToD;         // @control min=0 max=1 default=0.672,0.25 label="To: chin"
+uniform vec2 uToE;         // @control min=0 max=1 default=0.672,0.778 label="To: hairline"
+uniform bool uShowPoints;  // @control default=false label="Show points"`,
+    PICTURE,
+    COMMON,
+    `// Points are given in image uv; the warp works in frame space (height 1, x scaled by the aspect).
+vec2 toFrame(vec2 imageUv, vec2 scale) {
+  return (0.5 + (imageUv - 0.5) / scale) * vec2(iResolution.x / iResolution.y, 1.0);
+}
 
-float laneOf(float k, float j) {
-  return 3.0 * k + floor(hash12(vec2(k, j) + 0.37) * 3.0) + 0.5;
+vec2 toImage(vec2 q, vec2 scale) {
+  return 0.5 + (q / vec2(iResolution.x / iResolution.y, 1.0) - 0.5) * scale;
 }
 
-vec3 traceColor(float k) {
-  float h = hash12(vec2(k, 7.3));
-  return h < 0.25 ? uColorA : h < 0.5 ? uColorB : h < 0.75 ? uColorC : uColorD;
+vec2 cmul(vec2 a, vec2 b) {
+  return vec2(a.x * b.x - a.y * b.y, a.x * b.y + a.y * b.x);
 }
 
-// Distance to a quarter circle of RADIUS round c, in the quadrant whose signs are q.
-float arcDist(vec2 p, vec2 c, vec2 q) {
-  vec2 d = p - c;
-  return d.x * q.x >= 0.0 && d.y * q.y >= 0.0 ? abs(length(d) - RADIUS) : 1e5;
+// Where frame point x, among the in-between points m, comes from in a picture whose points are s:
+// a best-fit similarity (move, scale, turn) carries m onto s, then inverse-distance weighting of
+// what is left over bends each point exactly onto its partner.
+vec2 warp(vec2 x, vec2 m[5], vec2 s[5]) {
+  vec2 cm = vec2(0.0);
+  vec2 cs = vec2(0.0);
+  for (int i = 0; i < 5; i++) {
+    cm += m[i] * 0.2;
+    cs += s[i] * 0.2;
+  }
+  vec2 num = vec2(0.0);
+  float den = 0.0;
+  for (int i = 0; i < 5; i++) {
+    vec2 a = m[i] - cm;
+    num += cmul(vec2(a.x, -a.y), s[i] - cs);
+    den += dot(a, a);
+  }
+  vec2 k = num / max(den, 1e-6);
+  vec2 bend = vec2(0.0);
+  float total = 0.0;
+  for (int i = 0; i < 5; i++) {
+    vec2 left = s[i] - (cs + cmul(k, m[i] - cm));
+    float d2 = dot(x - m[i], x - m[i]);
+    float w = 1.0 / (d2 * d2 + 1e-6);
+    bend += w * left;
+    total += w;
+  }
+  return cs + cmul(k, x - cm) + bend / total;
 }
 
-// Trace k's run j: distance from p to its climb (x) and how far up it p is (y), then
-// the same for its jog into run j + 1 (z, w), measured along the run.
-vec4 run(vec2 p, float k, float j) {
-  float x0 = laneOf(k, j - 1.0);
-  float x1 = laneOf(k, j);
-  float x2 = laneOf(k, j + 1.0);
-  float y0 = j * RUN;
-  float y1 = y0 + RUN;
-  float lo = y0 + (x0 == x1 ? 0.0 : RADIUS);
-  float hi = y1 - (x2 == x1 ? 0.0 : RADIUS);
-  vec4 r = vec4(length(p - vec2(x1, clamp(p.y, lo, hi))), p.y - y0, 1e5, 0.0);
-  if (x2 != x1) {
-    float sx = sign(x2 - x1);
-    float h = length(p - vec2(clamp(p.x, min(x1, x2) + RADIUS, max(x1, x2) - RADIUS), y1));
-    h = min(h, arcDist(p, vec2(x1 + sx * RADIUS, y1 - RADIUS), vec2(-sx, 1.0)));
-    h = min(h, arcDist(p, vec2(x2 - sx * RADIUS, y1 + RADIUS), vec2(sx, -1.0)));
-    r.zw = vec2(h, RUN + abs(p.x - x1));
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float t = progress();
+  vec2 scaleA = coverScale(uFrom);
+  vec2 scaleB = coverScale(uTo);
+  vec2 a[5] = vec2[5](toFrame(uFromA, scaleA), toFrame(uFromB, scaleA), toFrame(uFromC, scaleA), toFrame(uFromD, scaleA), toFrame(uFromE, scaleA));
+  vec2 b[5] = vec2[5](toFrame(uToA, scaleB), toFrame(uToB, scaleB), toFrame(uToC, scaleB), toFrame(uToD, scaleB), toFrame(uToE, scaleB));
+  vec2 m[5];
+  for (int i = 0; i < 5; i++) m[i] = mix(a[i], b[i], t);
+  vec2 x = fragCoord / iResolution.y;
+  vec3 colA = picture(uFrom, toImage(warp(x, m, a), scaleA));
+  vec3 colB = picture(uTo, toImage(warp(x, m, b), scaleB));
+  vec3 col = mix(colA, colB, smoothstep(0.2, 0.8, t));
+  if (uShowPoints) {
+    float px = 1.0 / iResolution.y;
+    for (int i = 0; i < 5; i++) {
+      float d = length(x - m[i]);
+      col = mix(col, vec3(0.0), smoothstep(px * 1.5, 0.0, abs(d - 0.012)) * 0.6);
+      col = mix(col, vec3(1.0, 0.85, 0.2), smoothstep(px, 0.0, abs(d - 0.012)));
+    }
   }
-  return r;
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [{ name: "Show points", values: { uShowPoints: true, uAnimate: false, uProgress: 0.5 } }]
+};
+var silhouetteMorph = {
+  kind: "shader",
+  id: "silhouette-morph",
+  name: "Silhouette morph",
+  description: "One silhouette or logo flowing into another as a gooey blob, its colour blending from the first shape's to the second's.",
+  category: "morph",
+  tags: ["morph", "shape", "logo", "goo", "blob", "text"],
+  loop: 4,
+  source: glsl(
+    `// Silhouette morph: blurred alpha masks of two shapes mixed by progress and thresholded, so one flows into the other.
+uniform sampler2D uFrom;      // @control filter=mipmap wrap=clamp default=${SAMPLE_IMAGES.logo} label="From shape"
+uniform sampler2D uTo;        // @control filter=mipmap wrap=clamp default=${SAMPLE_IMAGES.heart} label="To shape"
+uniform bool uAnimate;        // @control default=true label="Animate"
+uniform float uProgress;      // @control min=0 max=1 default=0.5 label="Progress (when still)"
+uniform float uSize;          // @control min=0.2 max=1 default=0.75 label="Shape size"
+uniform float uGoo;           // @control min=0 max=0.3 default=0.1 label="Gooeyness"
+uniform float uEdge;          // @control min=0 max=0.05 default=0.004 label="Edge softness"
+uniform bool uImageColours;   // @control default=true label="Use the shapes' own colours"
+uniform vec3 uColourA;        // @control color default=#6366F1 label="From colour"
+uniform vec3 uColourB;        // @control color default=#F43F5E label="To colour"
+uniform vec3 uBackground;     // @control color default=#0F172A label="Background"`,
+    `// A shape's colour (premultiplied) and alpha at frame point p (height 1, centred), the image contained in
+// uSize of the frame, read from a mip level about as coarse as the spacing (in frame units), so sparse blur
+// taps still sum smoothly. With no image, a disc (fallback 0) or a rounded square (1).
+vec4 shapeAt(sampler2D tex, vec2 p, float spacing, int fallback) {
+  vec2 size = vec2(textureSize(tex, 0));
+  if (size.x <= 1.0) {
+    float d = fallback == 0 ? length(p) - 0.3 * uSize : length(max(abs(p) - 0.2 * uSize, 0.0)) - 0.08 * uSize;
+    float a = step(d, 0.0);
+    return vec4(vec3(a), a);
+  }
+  float aspect = size.x / size.y;
+  float h = min(uSize, iResolution.x / iResolution.y * uSize / aspect);
+  vec2 uv = p / vec2(h * aspect, h) + 0.5;
+  if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) return vec4(0.0);
+  vec4 c = textureLod(tex, uv, log2(max(spacing * size.y / h, 1.0)));
+  // Clear texels upload black, so filtered colour is already about colour \xD7 alpha: divide it out, then weight by alpha.
+  return vec4(clamp(c.rgb / max(c.a, 1e-3), 0.0, 1.0) * c.a, c.a);
 }
 
-// How bright a pulse is at s along run j of trace k: a bright head with a fading tail.
-// A pulse crosses one run per cycle and carries on into the next with the next cycle.
-float pulseAt(float k, float j, float s) {
-  float cycle = iTime * uSpeed * 1.5 + hash12(vec2(k, 8.8));
-  float behind = fract(cycle) * (RUN + abs(laneOf(k, j + 1.0) - laneOf(k, j))) - s;
-  float lit = step(hash12(vec2(k, floor(cycle) - j)), uPulses);
-  return lit * (behind >= 0.0 ? exp(-behind * 0.8) : exp(behind * 30.0));
+// A disc blur of the shape: 28 taps on a golden-angle spiral.
+vec4 blurred(sampler2D tex, vec2 p, float radius, int fallback) {
+  vec4 sum = vec4(0.0);
+  for (int i = 0; i < 28; i++) {
+    float r = radius * sqrt((float(i) + 0.5) / 28.0);
+    float a = float(i) * 2.39996;
+    sum += shapeAt(tex, p + r * vec2(cos(a), sin(a)), radius * 0.35, fallback);
+  }
+  return sum / 28.0;
 }
 
 void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  float px = uLanes / iResolution.y;
-  vec2 p = fragCoord * px;
-  p.y += iTime * uScroll;
+  float t = uAnimate ? smoothstep(0.1, 0.9, 0.5 - 0.5 * cos(iTime * 6.28318 / 4.0)) : uProgress;
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
+  // Shapes are sharp at either end and softest half way, where the blobs merge.
+  float radius = uGoo * sin(3.14159 * t) + 1.0 / iResolution.y;
+  vec4 a = blurred(uFrom, p, radius, 0);
+  vec4 b = blurred(uTo, p, radius, 1);
+  float field = mix(a.a, b.a, t);
+  float w = uEdge + fwidth(field) * 0.75;
+  float inside = smoothstep(0.5 - w, 0.5 + w, field);
+  // Each shape's colour here (or the other's, where only one shape reaches), blended by progress.
+  vec3 ca = uImageColours ? a.rgb / max(a.a, 1e-4) : uColourA;
+  vec3 cb = uImageColours ? b.rgb / max(b.a, 1e-4) : uColourB;
+  ca = mix(cb, ca, smoothstep(0.0, 0.05, a.a));
+  cb = mix(ca, cb, smoothstep(0.0, 0.05, b.a));
+  vec3 tint = mix(ca, cb, smoothstep(0.2, 0.8, t));
+  // A little roundness: the thick middle of a blob is lighter than its rim.
+  tint *= 0.82 + 0.25 * smoothstep(0.5, 1.0, field);
+  fragColor = vec4(mix(uBackground, tint, inside), 1.0);
+}`
+  ),
+  presets: [
+    {
+      name: "Hello \u2192 World",
+      values: { uFrom: textImage("HELLO"), uTo: textImage("WORLD"), uImageColours: false, uSize: 0.9, uGoo: 0.05, uColourA: [0.98, 0.75, 0.14], uColourB: [0.13, 0.83, 0.93] }
+    },
+    { name: "Blobby", values: { uGoo: 0.25, uBackground: [1, 0.97, 0.93] } }
+  ]
+};
+var transitionLiquidMorph = {
+  kind: "shader",
+  id: "transition-liquid-morph",
+  name: "Liquid morph",
+  description: "Both images swept along a flowing, swirling current that peaks half way, dissolving one into the other like ink in water.",
+  category: "transition",
+  tags: ["transition", "morph", "liquid", "image", "flow"],
+  loop: 4,
+  source: glsl(
+    `// Liquid morph: both images advected along a domain-warped fbm current, strongest at mid-progress, while cross-fading.
+${pair(SAMPLE_IMAGES.landscape, SAMPLE_IMAGES.city)}
+uniform float uStrength;   // @control min=0 max=0.5 default=0.1 label="Strength"
+uniform float uScale;      // @control min=0.5 max=8 default=2.5 label="Scale"
+uniform float uFlow;       // @control min=0 max=2 default=0.4 label="Flow speed"`,
+    HASH,
+    NOISE,
+    FBM,
+    PICTURE,
+    COMMON,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  float t = progress();
+  float s = sin(3.14159 * t);
+  float time = iTime * uFlow;
+  vec2 q = fragCoord / iResolution.y * uScale;
+  vec2 first = vec2(fbm(q + vec2(0.0, time), 4), fbm(q + vec2(5.2, 1.3) - vec2(time, 0.0), 4)) - 0.5;
+  vec2 flow = vec2(fbm(q + 4.0 * first + vec2(1.7, 9.2) + time * 0.5, 4), fbm(q + 4.0 * first + vec2(8.3, 2.8) - time * 0.5, 4)) - 0.5;
+  vec2 d = flow * uStrength * s * 2.0;
+  // From is carried downstream, To arrives from upstream; neither moves at the ends.
+  vec3 a = cover(uFrom, uv + d);
+  vec3 b = cover(uTo, uv - d);
+  float k = smoothstep(0.25, 0.75, t + (flow.x + flow.y) * 0.6 * s);
+  fragColor = vec4(mix(a, b, k), 1.0);
+}`
+  ),
+  presets: [
+    { name: "Gentle", values: { uStrength: 0.08, uScale: 1.5, uFlow: 0.2 } },
+    { name: "Turbulent", values: { uStrength: 0.35, uScale: 4, uFlow: 1.2 } }
+  ]
+};
+var transitionDisplacement = {
+  kind: "shader",
+  id: "transition-displacement",
+  name: "Displacement",
+  description: "Each image's brightness pushes it out in one direction as the next slides in, warped by its own light and dark.",
+  category: "transition",
+  tags: ["transition", "morph", "displacement", "image", "warp"],
+  loop: 4,
+  source: glsl(
+    `// Displacement: From's luminance drives a directional warp out, To's luminance the same warp in reverse.
+${pair(SAMPLE_IMAGES.city, SAMPLE_IMAGES.landscape)}
+uniform float uStrength;   // @control min=0 max=1 default=0.4 label="Strength"
+uniform float uAngle;      // @control min=0 max=360 default=0 label="Direction (\xB0)"`,
+    PICTURE,
+    COMMON,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  float t = progress();
+  vec2 dir = vec2(cos(radians(uAngle)), sin(radians(uAngle))) * vec2(iResolution.y / iResolution.x, 1.0);
+  float la = luma(cover(uFrom, uv));
+  float lb = luma(cover(uTo, uv));
+  vec3 a = cover(uFrom, uv + dir * t * uStrength * la);
+  vec3 b = cover(uTo, uv - dir * (1.0 - t) * uStrength * lb);
+  fragColor = vec4(mix(a, b, smoothstep(0.2, 0.8, t)), 1.0);
+}`
+  ),
+  presets: [
+    { name: "Upward smear", values: { uStrength: 0.6, uAngle: 90 } },
+    { name: "Subtle", values: { uStrength: 0.12, uAngle: 30 } }
+  ]
+};
+var transitionLuma = {
+  kind: "shader",
+  id: "transition-luma",
+  name: "Luma fade",
+  description: "Pixels switch to the next image in order of brightness, shadows first or highlights first, along a soft edge.",
+  category: "transition",
+  tags: ["transition", "morph", "luma", "image", "dissolve"],
+  loop: 4,
+  source: glsl(
+    `// Luma fade: each pixel switches when progress passes its brightness, with a soft edge.
+${pair(SAMPLE_IMAGES.landscape, SAMPLE_IMAGES.city)}
+uniform float uSoftness;   // @control min=0.01 max=0.5 default=0.1 label="Softness"
+uniform bool uLightFirst;  // @control default=false label="Light first"
+uniform int uSource;       // @control min=0 max=1 default=0 label="Brightness of (0 From, 1 To)"`,
+    PICTURE,
+    COMMON,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  float t = progress();
+  vec3 a = cover(uFrom, uv);
+  vec3 b = cover(uTo, uv);
+  float l = clamp(luma(uSource == 0 ? a : b), 0.0, 1.0);
+  if (uLightFirst) l = 1.0 - l;
+  // The front sweeps from below the darkest pixel to above the lightest, so both ends are clean.
+  float front = mix(-uSoftness, 1.0 + uSoftness, t);
+  fragColor = vec4(mix(a, b, smoothstep(l - uSoftness, l + uSoftness, front)), 1.0);
+}`
+  ),
+  presets: [
+    { name: "Highlights first", values: { uLightFirst: true, uSoftness: 0.06 } },
+    { name: "Hard threshold", values: { uSoftness: 0.01, uSource: 1 } }
+  ]
+};
+var transitionParticleSwap = {
+  kind: "shader",
+  id: "transition-particle-swap",
+  name: "Particle swap",
+  description: "The image breaks into square particles that tumble along curved, staggered paths and land as the next image.",
+  category: "transition",
+  tags: ["transition", "morph", "particles", "image", "mosaic"],
+  loop: 4,
+  source: glsl(
+    `// Particle swap: each cell of From flies to a neighbouring cell's place, shrinking and spinning on the way, and lands as To.
+${pair(SAMPLE_IMAGES.landscape, SAMPLE_IMAGES.city)}
+uniform float uParticle;   // @control min=6 max=80 default=20 label="Particle size (px)"
+uniform float uScatter;    // @control min=0 max=0.8 default=0.45 label="Scatter"
+uniform float uSpin;       // @control min=0 max=2 default=0.6 label="Spin & curl"
+uniform vec3 uBackground;  // @control color default=#0B0B12 label="Background"`,
+    HASH,
+    ROTATE,
+    PICTURE,
+    COMMON,
+    `const vec2 RING[4] = vec2[4](vec2(0.0, 0.0), vec2(1.0, 0.0), vec2(1.0, 1.0), vec2(0.0, 1.0));
 
-  vec2 g = abs(fract(p / 1.5) - 0.5);
-  float grid = 1.0 - smoothstep(0.0, px * 1.5, (0.5 - max(g.x, g.y)) * 1.5);
-  vec3 light = uColorD * 0.12 * uGrid * grid;
+// Where cell c's particle lands: cells trade places around each 2 \xD7 2 block, turned 1\u20133 steps.
+vec2 landing(vec2 c) {
+  vec2 block = floor(c * 0.5);
+  vec2 local = c - block * 2.0;
+  int i = local.y < 0.5 ? int(local.x) : 3 - int(local.x);
+  int turn = 1 + int(hash12(block + 7.3) * 2.999);
+  return block * 2.0 + RING[(i + turn) % 4];
+}
 
-  float home = floor(p.x / 3.0);
-  for (int i = -1; i <= 1; i++) {
-    float k = home + float(i);
-    if (hash12(vec2(k, 1.9)) > uDensity) continue;
-    vec2 q = vec2(p.x, p.y + hash12(vec2(k, 4.1)) * RUN);
-    float jq = floor(q.y / RUN);
-    float w = uWidth * 0.5;
-    // The trace's nearest point lights it; each piece's pulse lights only round that piece.
-    float d = 1e5;
-    float pulse = 0.0;
-    for (int b = -1; b <= 1; b++) {
-      float j = jq + float(b);
-      vec4 r = run(q, k, j);
-      d = min(d, min(r.x, r.z));
-      pulse = max(pulse, pulseAt(k, j, r.y) * exp(-r.x / uWidth));
-      if (r.z < 1e4) pulse = max(pulse, pulseAt(k, j, r.w) * exp(-r.z / uWidth));
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float t = progress();
+  vec2 p = fragCoord / uParticle;
+  vec2 grid = iResolution.xy / uParticle;
+  vec2 base = floor(p);
+  vec3 col = uBackground;
+  float top = -1.0;
+  vec2 hitFrom = vec2(0.0);
+  vec2 hitTo = vec2(0.0);
+  float hitT = 0.0;
+  float hitCover = 0.0;
+  // Particles travel at most about 1.5 cells, so the 5 \xD7 5 cells around are every candidate.
+  for (int j = -2; j <= 2; j++) {
+    for (int i = -2; i <= 2; i++) {
+      vec2 c = base + vec2(float(i), float(j));
+      vec2 h = hash22(c);
+      // Staggered: a sweep from the left plus some randomness.
+      float delay = 0.5 * (0.55 * clamp(c.x / grid.x, 0.0, 1.0) + 0.45 * h.x);
+      float k = smoothstep(0.0, 1.0, clamp((t - delay) / 0.5, 0.0, 1.0));
+      float lift = sin(3.14159 * k);
+      vec2 from = c + 0.5;
+      vec2 to = landing(c) + 0.5;
+      vec2 path = to - from;
+      vec2 side = normalize(vec2(-path.y, path.x) + (h - 0.5) * 0.8);
+      vec2 pos = mix(from, to, k) + side * lift * (uScatter + uSpin * 0.3) * (h.y > 0.5 ? 0.6 : -0.6);
+      float size = 1.0 - 0.3 * lift;
+      float angle = (h.y - 0.5) * 6.28318 * uSpin * lift;
+      vec2 l = rot(-angle) * (p - pos) / size;
+      float m = max(abs(l.x), abs(l.y));
+      float z = h.y + lift;
+      if (m <= 0.5 && z > top) {
+        top = z;
+        hitFrom = from + l;
+        hitTo = to + l;
+        hitT = k;
+        hitCover = 1.0 - smoothstep(0.5 - 1.5 / uParticle, 0.5, m) * min(lift * 8.0, 1.0);
+      }
     }
-    float core = 1.0 - smoothstep(w - px, w + px, d);
-    float glow = uGlow * (0.5 * exp(-d / uWidth) + 0.2 * exp(-d / (uWidth * 5.0)));
-    vec3 c = traceColor(k);
-    light += c * (core * 0.8 + glow + uGlow * pulse) + mix(c, vec3(1.0), 0.7) * core * pulse * 3.0;
   }
-  fragColor = vec4(uBackground + (1.0 - exp(-light * 1.4)), 1.0);
+  if (top > -1.0) {
+    vec3 a = cover(uFrom, hitFrom / grid);
+    vec3 b = cover(uTo, hitTo / grid);
+    vec3 particle = mix(a, b, hitT) * (1.0 + 0.15 * sin(3.14159 * hitT));
+    col = mix(col, particle, hitCover);
+  }
+  fragColor = vec4(col, 1.0);
 }`
   ),
   presets: [
-    { name: "Mainframe", values: { uBackground: [0, 0.04, 0.02], uColorA: [0.2, 1, 0.45], uColorB: [0.1, 0.75, 0.35], uColorC: [0.6, 1, 0.7], uColorD: [0.1, 0.5, 0.25] } },
-    { name: "Blueprint", values: { uBackground: [0.02, 0.06, 0.16], uColorA: [0.35, 0.75, 1], uColorB: [0.6, 0.9, 1], uColorC: [1, 1, 1], uColorD: [0.25, 0.45, 0.9], uGlow: 0.6, uPulses: 0.3 } },
-    { name: "Dense", values: { uLanes: 26, uDensity: 1, uWidth: 0.12, uPulses: 0.8 } }
+    { name: "Confetti", values: { uParticle: 10, uScatter: 0.8, uSpin: 1.6 } },
+    { name: "Tiles", values: { uParticle: 48, uScatter: 0.2, uSpin: 0.15 } }
+  ]
+};
+var transitionInkBleed = {
+  kind: "shader",
+  id: "transition-ink-bleed",
+  name: "Ink bleed",
+  description: "The next image bleeds through the first like wet ink on paper, spreading from a few seeds with dark, pooled edges.",
+  category: "transition",
+  tags: ["transition", "morph", "ink", "watercolour", "image", "organic"],
+  loop: 4,
+  source: glsl(
+    `// Ink bleed: To spreads through From along an fbm threshold grown from seeds, with a wet, darkened fringe.
+${pair(SAMPLE_IMAGES.city, SAMPLE_IMAGES.landscape)}
+uniform float uScale;      // @control min=0.5 max=8 default=3 label="Scale"
+uniform float uEdge;       // @control min=0.005 max=0.2 default=0.05 label="Edge width"
+uniform vec3 uInk;         // @control color default=#1B1F3B label="Ink"`,
+    HASH,
+    NOISE,
+    FBM,
+    PICTURE,
+    COMMON,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  float t = progress();
+  vec2 q = fragCoord / iResolution.y;
+  // Distance to the nearest of four seeds spread across the frame, measured through a noisy warp so the blots are ragged.
+  vec2 warped = q + (vec2(fbm(q * uScale, 5), fbm(q * uScale + 31.7, 5)) - 0.5) * 0.35;
+  float aspect = iResolution.x / iResolution.y;
+  float near = 1e9;
+  for (int i = 0; i < 4; i++) {
+    vec2 h = hash22(vec2(float(i), 3.7));
+    vec2 seed = vec2((float(i) + 0.2 + 0.6 * h.x) / 4.0 * aspect, 0.2 + 0.6 * h.y);
+    near = min(near, length(warped - seed));
+  }
+  // Fine noise adds capillary fingers to the front.
+  float v = clamp(near / 0.5 * 0.75 + 0.25 * fbm(q * uScale * 4.0, 4) + 0.06 * (vnoise(q * uScale * 18.0) - 0.5), 0.0, 1.0);
+  float front = mix(-2.0 * uEdge - 0.02, 1.0 + 2.0 * uEdge + 0.02, t);
+  float gap = front - v;
+  float wet = smoothstep(-uEdge * 0.3, uEdge * 0.3, gap);
+  // Paper just ahead of the front darkens as it soaks; pigment pools just behind it.
+  float soak = smoothstep(-2.0 * uEdge, 0.0, gap) * (1.0 - wet);
+  float pool = wet * smoothstep(uEdge, 0.0, gap);
+  vec2 bleed = vec2(soak - pool) * 0.004;
+  vec3 a = cover(uFrom, uv + bleed);
+  vec3 b = cover(uTo, uv - bleed);
+  vec3 col = mix(a, b, wet);
+  col = mix(col, col * 0.82, soak * 0.6);
+  col = mix(col, uInk, pool * 0.85);
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Sepia wash", values: { uInk: [0.36, 0.23, 0.12], uEdge: 0.08, uScale: 2 } },
+    { name: "Crisp", values: { uEdge: 0.015, uScale: 5 } }
   ]
 };
+var morphShaders = [
+  featureMorph,
+  silhouetteMorph,
+  transitionLiquidMorph,
+  transitionDisplacement,
+  transitionLuma,
+  transitionParticleSwap,
+  transitionInkBleed
+];
 
 // 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);
 }
@@ -1467,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);
@@ -1601,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;
@@ -1651,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.
@@ -1688,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;
@@ -1762,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;
@@ -2814,24 +4786,24 @@ var imageTreatments = [
 ];
 
 // src/catalog/text.ts
-var r1 = (n2) => Math.round(n2 * 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 n = (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",
@@ -2848,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]))
     };
@@ -2863,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: n("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) => [n(`blink${k}`), k % 2 ? 0 : 1])])
+      ...holds("caret", "opacity", [[0, 0], ...Array.from({ length: BLINKS }, (_, k) => [n3(`blink${k}`), k % 2 ? 0 : 1])])
     ]
   }
 };
@@ -2883,21 +4855,21 @@ 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: n("decode"), ease: "linear" },
-      { id: "bar", attrs: { width: [0, n("barW")] }, delay: 500, ms: n("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" }
     ]
   }
 };
-var SLOTS = 20;
+var SLOTS2 = 20;
 var kineticStagger = {
   kind: "vector",
   id: "kinetic-stagger",
@@ -2912,27 +4884,27 @@ var kineticStagger = {
   ],
   // Up to SLOTS letters, each centred in its estimated advance; unused slots stay empty.
   derived: (v) => {
-    const letters = lettersOf(v.text).slice(0, SLOTS);
+    const letters = lettersOf(v.text).slice(0, SLOTS2);
     const widths = letters.map((c) => textWidthEm(c));
     const ems = Math.max(0.6, widths.reduce((a, b) => a + b, 0));
     const size = Math.min(92, 370 / ems);
     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 < SLOTS; i++) {
+    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;
@@ -2941,21 +4913,21 @@ var kineticStagger = {
   },
   motion: {
     svg: `<svg viewBox="0 0 400 200"><!-- {{text: text default='Kinetic' label='Text'}} {{background: color default=#F8FAFC label='Background'}} {{ink: color default=#0F172A label='Text colour'}} {{accent: color default=#F43F5E label='Underline'}} {{stagger: float min=20 max=200 default=55 step=5 label='Ms between letters'}} --><rect width="400" height="200" fill="{{background}}"/>${Array.from(
-      { length: SLOTS },
+      { length: SLOTS2 },
       (_, i) => `<text id="l${i}" text-anchor="middle" transform="translate({{x${i}}} {{drop}}) rotate(-28) scale(0.3)" opacity="0" font-family="${HEAVY}" font-size="{{size}}" font-weight="900" fill="{{ink}}">{{c${i}}}</text>`
     ).join("")}<rect id="line" x="{{lineX}}" y="{{lineY}}" width="0" height="6" rx="3" fill="{{accent}}"/></svg>`,
     animate: [
-      ...Array.from({ length: SLOTS }, (_, i) => [
+      ...Array.from({ length: SLOTS2 }, (_, i) => [
         {
           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: n(`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: n(`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, n("lineW")] }, delay: n("lineAt"), ms: 500, ease: "in-out" }
+      { id: "line", attrs: { width: [0, n3("lineW")] }, delay: n3("lineAt"), ms: 500, ease: "in-out" }
     ]
   }
 };
@@ -2976,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: (() => {
@@ -3017,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, n("fillOpacity")] }, delay: 1500, ms: 700, ease: "out" }
+      { id: "word", attrs: { "fill-opacity": [0, n3("fillOpacity")] }, delay: 1500, ms: 700, ease: "out" }
     ]
   }
 };
@@ -3041,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" },
@@ -3081,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;
@@ -3089,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" },
@@ -3132,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: [n(`len${i}`), n(`len${i + 1}`)] }, ...at }
+        { id: "under", attrs: { width: [n3(`len${i}`), n3(`len${i + 1}`)] }, ...at }
       ];
     }).flat()
   }
@@ -3182,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"`;
@@ -3231,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)],
@@ -3281,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)]
           ];
@@ -3341,6 +5313,8 @@ var EFFECT_CATEGORIES = [
   "image",
   "overlay",
   "text",
+  "morph",
+  "interaction",
   "transition",
   "loader",
   "data",
@@ -4022,9 +5996,11 @@ var SHADER_EFFECTS = [
   filmGrain,
   ...overlayEffects,
   ...textShaders,
+  ...morphShaders,
+  ...interactionShaders,
   ...transitions
 ];
-var EFFECTS = [...SHADER_EFFECTS, ...vectorEffects, ...textEffects].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]));
@@ -4077,4 +6053,4 @@ export {
   effectControls,
   effectDefaults
 };
-//# sourceMappingURL=chunk-FHXOMIQY.js.map
+//# sourceMappingURL=chunk-STGGN4MR.js.map