@pixerate/flair 0.8.0 → 0.9.0

package/dist/{chunk-FHXOMIQY.js → chunk-F754SFRY.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;
@@ -1438,6 +1465,870 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   ]
 };
 
+// src/catalog/morph.ts
+var NUMBER = /-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?/gi;
+var DEG = Math.PI / 180;
+var r2 = (v) => {
+  const r = Math.round(v * 100) / 100;
+  return Object.is(r, -0) ? 0 : r;
+};
+var n = (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(r2(moved[k >> 1][k % 2]));
+  });
+}
+var polyline = (pts, close = false) => `M${pts.map((p) => `${r2(p[0])} ${r2(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, r12, c2, r2_) {
+  const [dx, dy] = [c2[0] - c1[0], c2[1] - c1[1]];
+  const d = Math.hypot(dx, dy);
+  const a = (r12 * r12 - r2_ * r2_ + d * d) / (2 * d);
+  const h = Math.sqrt(Math.max(0, r12 * r12 - a * a));
+  const [px, py] = [c1[0] + a * dx / d, c1[1] + a * dy / d];
+  const i1 = [px - h * dy / d, py + h * dx / d];
+  const i2 = [px + h * dy / d, py - h * dx / d];
+  const angle = (c, p) => Math.atan2(p[1] - c[1], p[0] - c[0]) / DEG;
+  const outer = around(c1, r12, angle(c1, i1), angle(c1, i2), angle(c1, c2));
+  const inner = around(c2, r2_, angle(c2, i2), angle(c2, i1), angle(c2, c1) + 180);
+  return polyline([...outer, ...inner.slice(1, -1)], true);
+}
+var HEART2 = "M12 20.5 C12 20.5 3 14.8 3 8.8 C3 6 5.2 3.8 8 3.8 C9.7 3.8 11.2 4.7 12 6.1 C12.8 4.7 14.3 3.8 16 3.8 C18.8 3.8 21 6 21 8.8 C21 14.8 12 20.5 12 20.5 Z";
+var 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: n("pause"), ms: n("morph"), ease: "in-out" },
+      { id: "shape", attrs: { d: ["{{b}}", "{{a}}"], fill: ["{{fillTo}}", "{{fillFrom}}"], stroke: ["{{strokeTo}}", "{{strokeFrom}}"] }, delay: n("back"), ms: n("morph"), ease: "in-out" }
+    ]
+  }
+};
+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)],
+    [`${HEART2} ${placed(HEART2, 12, 12, 0.7)}`, HEART2]
+  ];
+})();
+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(HEART2, 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: n(`at${i}`), ms: n("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: n(`at${s}`), ms: n("morph"), ease: "in-out" }))
+    )
+  }
+};
+var DOTS = 48;
+var DOT_STAGGER = 14;
+var PARTICLE_FROM = HEART2;
+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}`] = r2(p[0]);
+      out[`ay${i}`] = r2(p[1]);
+      out[`bx${i}`] = r2(q[0]);
+      out[`by${i}`] = r2(q[1]);
+      for (const [name, seed] of [["s", i], ["t", i + DOTS]]) {
+        const angle = seed * 2.39996;
+        const far = scatter * (0.45 + 0.55 * noise(seed));
+        out[`${name}x${i}`] = r2((p[0] + q[0]) / 2 + far * Math.cos(angle));
+        out[`${name}y${i}`] = r2((p[1] + q[1]) / 2 + far * Math.sin(angle));
+      }
+    }
+    return out;
+  },
+  motion: (() => {
+    const back = 3e3;
+    const spread = DOTS * DOT_STAGGER;
+    const leg = (i, at, from, mid, to, colours) => [
+      { id: `p${i}`, attrs: { cx: [n(`${from}x${i}`), n(`${mid}x${i}`)], cy: [n(`${from}y${i}`), n(`${mid}y${i}`)] }, delay: at + i * DOT_STAGGER, ms: 450, ease: "out" },
+      { id: `p${i}`, attrs: { cx: [n(`${mid}x${i}`), n(`${to}x${i}`)], cy: [n(`${mid}y${i}`), n(`${to}y${i}`)], fill: colours }, delay: at + 450 + i * DOT_STAGGER, ms: 650, ease: "in-out" }
+    ];
+    const fade = (id, at, show) => ({ id, attrs: { opacity: show ? [0, n("ghost")] : [n("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: r2(scale), y: r2(100 - 16 * scale), back: lastEnd + DIGIT_REST * 3 };
+    for (let k = 1; k <= MAX_STEPS; k++) out[`t${k}`] = k <= steps ? (k - 1) * interval : lastEnd;
+    for (let j = 0; j < SLOTS; j++) {
+      const place = j - (SLOTS - used);
+      out[`x${j}`] = r2(left + Math.max(0, place) * 22 * scale);
+      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: [n(`o${j}_${k - 1}`), n(`o${j}_${k}`)] }, delay: n(`t${k}`), ms: n("morph"), ease: "in-out" };
+      }),
+      // Back to the first number in one morph, so it loops.
+      { id: `s${j}`, attrs: { d: [`{{d${j}_${MAX_STEPS}}}`, `{{d${j}_0}}`], opacity: [n(`o${j}_${MAX_STEPS}`), n(`o${j}_0`)] }, delay: n("back"), ms: n("morph"), ease: "in-out" }
+    ]).flat()
+  }
+};
+var morphEffects = [shapeMorph, iconToggle, morphSequenceEffect, gooeyMorph, particleMorph, digitMorph];
+
+// 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: "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(
+    `// 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);
+}
+
+vec2 toImage(vec2 q, vec2 scale) {
+  return 0.5 + (q / vec2(iResolution.x / iResolution.y, 1.0) - 0.5) * scale;
+}
+
+vec2 cmul(vec2 a, vec2 b) {
+  return vec2(a.x * b.x - a.y * b.y, a.x * b.y + a.y * b.x);
+}
+
+// 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;
+}
+
+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)));
+    }
+  }
+  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);
+}
+
+// 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 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));
+
+// 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];
+}
+
+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);
+      }
+    }
+  }
+  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: "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 = `
 vec4 glow(vec3 c) {
@@ -2814,7 +3705,7 @@ var imageTreatments = [
 ];
 
 // src/catalog/text.ts
-var r1 = (n2) => Math.round(n2 * 10) / 10;
+var r1 = (n3) => Math.round(n3 * 10) / 10;
 function fit(text, width, max, ems = textWidthEm(text)) {
   const e = Math.max(0.6, ems);
   const size = Math.min(max, width / e);
@@ -2827,7 +3718,7 @@ var mixHex = (a, b, t) => {
   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 n2 = (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`;
@@ -2863,9 +3754,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: n2("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) => [n2(`blink${k}`), k % 2 ? 0 : 1])])
     ]
   }
 };
@@ -2892,12 +3783,12 @@ var scrambleText = {
     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: n2("decode"), ease: "linear" },
+      { id: "bar", attrs: { width: [0, n2("barW")] }, delay: 500, ms: n2("decode"), ease: "linear" }
     ]
   }
 };
-var SLOTS = 20;
+var SLOTS2 = 20;
 var kineticStagger = {
   kind: "vector",
   id: "kinetic-stagger",
@@ -2912,7 +3803,7 @@ 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);
@@ -2929,7 +3820,7 @@ var kineticStagger = {
       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);
@@ -2941,21 +3832,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: n2(`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: n2(`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, n2("lineW")] }, delay: n2("lineAt"), ms: 500, ease: "in-out" }
     ]
   }
 };
@@ -3024,7 +3915,7 @@ var strokeDrawText = {
     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, n2("fillOpacity")] }, delay: 1500, ms: 700, ease: "out" }
     ]
   }
 };
@@ -3161,7 +4052,7 @@ var wordCycle = {
       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: [n2(`len${i}`), n2(`len${i + 1}`)] }, ...at }
       ];
     }).flat()
   }
@@ -3341,6 +4232,7 @@ var EFFECT_CATEGORIES = [
   "image",
   "overlay",
   "text",
+  "morph",
   "transition",
   "loader",
   "data",
@@ -4022,9 +4914,10 @@ var SHADER_EFFECTS = [
   filmGrain,
   ...overlayEffects,
   ...textShaders,
+  ...morphShaders,
   ...transitions
 ];
-var EFFECTS = [...SHADER_EFFECTS, ...vectorEffects, ...textEffects].sort(
+var EFFECTS = [...SHADER_EFFECTS, ...vectorEffects, ...textEffects, ...morphEffects].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 +4970,4 @@ export {
   effectControls,
   effectDefaults
 };
-//# sourceMappingURL=chunk-FHXOMIQY.js.map
+//# sourceMappingURL=chunk-F754SFRY.js.map