@pixerate/flair 0.20.0 → 0.21.1

package/dist/{chunk-TCNONB22.js → chunk-ECBG5K6E.js}

@@ -3510,8 +3510,154 @@ var lineBoil = {
 };
 var comicEffects = [soundEffect, speechBubble, fightCloud, dizzyStars, animeEmotes, cartoonPoof, lineBoil];
 
-// src/catalog/electric.ts
+// src/catalog/glow.ts
 var r16 = (v) => Math.round(v * 10) / 10;
+var n7 = (name) => `{{${name}}}`;
+var SANS4 = `system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`;
+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));
+};
+function fit3(text, width, max) {
+  const e = Math.max(0.6, textWidthEm(String(text)));
+  const size = Math.min(max, width / e);
+  return { size: r16(size), length: r16(e * size) };
+}
+var RINGS = 3;
+var RING_FROM = 18;
+var RING_TO = 112;
+function ringAnimations(k) {
+  const at3 = (phase2) => ({ r: r16(RING_FROM + (RING_TO - RING_FROM) * phase2), o: Math.round((1 - phase2) * 100) / 100 });
+  const id = `glowRingPulseRing${k}`;
+  const phase = k / RINGS;
+  const from = at3(phase);
+  const end = at3(1);
+  const start = at3(0);
+  const out = [
+    {
+      id,
+      attrs: { r: [from.r, end.r], opacity: [from.o, end.o], "stroke-width": [n7(`ws${k}`), n7("wEnd")] },
+      ms: n7(`rest${k}`)
+    }
+  ];
+  if (phase > 0)
+    out.push({
+      id,
+      attrs: { r: [start.r, from.r], opacity: [start.o, from.o], "stroke-width": [n7("wStart"), n7(`ws${k}`)] },
+      delay: n7(`rest${k}`),
+      ms: n7(`lead${k}`)
+    });
+  return out;
+}
+var glowRingPulse = {
+  kind: "vector",
+  id: "glow-ring-pulse",
+  name: "Glow ring pulse",
+  description: "Glowing rings pulsing out from a softly breathing core in endless waves, like a beacon or a live indicator.",
+  category: "glow",
+  tags: ["glow", "ring", "pulse", "beacon", "live", "loop", "radar"],
+  hold: 0,
+  presets: [
+    { name: "Live", values: { ring: [1, 0.25, 0.35], core: [1, 0.72, 0.75], period: 1.6 } },
+    { name: "Gold", values: { ring: [1, 0.75, 0.25], core: [1, 0.95, 0.75], background: [0.08, 0.06, 0.03], glow: 8 } },
+    { name: "Light", values: { background: [0.96, 0.97, 1], ring: [0.31, 0.27, 0.9], core: [0.55, 0.5, 1], glow: 4 } }
+  ],
+  derived: (v) => {
+    const period = Math.round(Number(v.period) * 1e3);
+    const width = Number(v.width);
+    const out = { half: Math.round(period / 2), wStart: r16(width * 1.6), wEnd: r16(width * 0.4) };
+    for (let k = 0; k < RINGS; k++) {
+      const phase = k / RINGS;
+      out[`rest${k}`] = Math.round(period * (1 - phase));
+      out[`lead${k}`] = period - out[`rest${k}`];
+      out[`ws${k}`] = r16(width * (1.6 - 1.2 * phase));
+    }
+    return out;
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 240 240"><!-- {{period: float min=0.8 max=6 default=2.4 step=0.1 label='Seconds per wave'}} {{width: float min=1 max=10 default=4 step=0.5 label='Ring width'}} --><defs><filter id="glowRingPulseGlow" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur in="SourceGraphic" stdDeviation="{{glow: float min=0 max=16 default=6 step=0.5 label='Glow'}}" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter><radialGradient id="glowRingPulseCoreFill"><stop offset="0" stop-color="#FFFFFF"/><stop offset="0.45" stop-color="{{core: color default=#A5F3FC label='Core'}}"/><stop offset="1" stop-color="{{ring: color default=#22D3EE label='Ring'}}"/></radialGradient></defs><rect width="240" height="240" fill="{{background: color default=#060A14 label='Background'}}"/><g filter="url(#glowRingPulseGlow)">${Array.from(
+      { length: RINGS },
+      (_, k) => `<circle id="glowRingPulseRing${k}" cx="120" cy="120" r="${r16(RING_FROM + (RING_TO - RING_FROM) * k / RINGS)}" fill="none" stroke="{{ring}}" stroke-width="{{ws${k}}}" opacity="${Math.round((1 - k / RINGS) * 100) / 100}"/>`
+    ).join("")}<circle id="glowRingPulseCore" cx="120" cy="120" r="22" fill="url(#glowRingPulseCoreFill)"/></g></svg>`,
+    animate: [
+      ...Array.from({ length: RINGS }, (_, k) => ringAnimations(k)).flat(),
+      // The core breathes once a period, out and back, so it too loops seamlessly.
+      { id: "glowRingPulseCore", attrs: { r: [22, 26] }, ms: n7("half"), ease: "in-out" },
+      { id: "glowRingPulseCore", attrs: { r: [26, 22] }, delay: n7("half"), ms: n7("half"), ease: "in-out" }
+    ]
+  }
+};
+var haloPose = (s) => `translate(160 70) scale(${s}) translate(-160 -70)`;
+var glowButton = {
+  kind: "vector",
+  id: "glow-button",
+  name: "Glow button",
+  description: "A pill button with a soft glow that, on hover, brightens, spreads its glow wider and lifts a little.",
+  category: "glow",
+  tags: ["glow", "button", "hover", "interactive", "ui", "cta", "neon"],
+  trigger: "hover",
+  hold: 800,
+  presets: [
+    { name: "Violet", values: { accent: [0.55, 0.36, 0.96], background: [0.05, 0.04, 0.09] } },
+    { name: "Mint", values: { accent: [0.2, 0.9, 0.6], ink: [0.02, 0.15, 0.1], label: "Start free trial" } },
+    { name: "Sunset", values: { accent: [1, 0.45, 0.3], label: "Join now" } }
+  ],
+  derived: (v) => {
+    const { size, length } = fit3(v.label, 180, 22);
+    return { size, length, base: r16(70 + size * 0.35), bright: mixHex2(v.accent, [1, 1, 1], 0.3) };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 320 140"><!-- {{label: text default='Get started' label='Label'}} {{background: color default=#0A0D18 label='Background'}} {{accent: color default=#38BDF8 label='Accent'}} {{ink: color default=#04121C label='Label colour'}} --><defs><filter id="glowButtonBlur" x="-60%" y="-120%" width="220%" height="340%"><feGaussianBlur id="glowButtonSpread" stdDeviation="10"/></filter><linearGradient id="glowButtonSheen" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FFFFFF" stop-opacity="0.35"/><stop offset="0.5" stop-color="#FFFFFF" stop-opacity="0.05"/><stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/></linearGradient></defs><rect width="320" height="140" fill="{{background}}"/><g opacity="0.9"><g id="glowButtonHalo" transform="${haloPose(1)}" opacity="0.55"><rect x="50" y="42" width="220" height="56" rx="28" fill="{{accent}}" filter="url(#glowButtonBlur)"/></g></g><g id="glowButtonLift" transform="translate(0 0)"><rect id="glowButtonFace" x="50" y="42" width="220" height="56" rx="28" fill="{{accent}}"/><rect x="50" y="42" width="220" height="56" rx="28" fill="url(#glowButtonSheen)"/><text x="160" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="${SANS4}" font-size="{{size}}" font-weight="700" letter-spacing="0.3" fill="{{ink}}">{{label}}</text></g></svg>`,
+    animate: [
+      { id: "glowButtonHalo", attrs: { opacity: [0.55, 0.95], transform: [haloPose(1), haloPose(1.08)] }, ms: 320, ease: "out" },
+      { id: "glowButtonSpread", attrs: { stdDeviation: [10, 14] }, ms: 320, ease: "out" },
+      { id: "glowButtonLift", attrs: { transform: ["translate(0 0)", "translate(0 -3)"] }, ms: 260, ease: "out" },
+      { id: "glowButtonFace", attrs: { fill: ["{{accent}}", "{{bright}}"] }, ms: 260 }
+    ]
+  }
+};
+var glowEffects = [glowRingPulse, glowButton];
+
+// src/catalog/shadow.ts
+var r17 = (v) => Math.round(v * 10) / 10;
+var SANS5 = `system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif`;
+function fit4(text, width, max) {
+  const e = Math.max(0.6, textWidthEm(String(text)));
+  const size = Math.min(max, width / e);
+  return { size: r17(size), length: r17(e * size) };
+}
+var raised = (up, scale) => `translate(0 ${-up}) translate(160 120) scale(${scale}) translate(-160 -120)`;
+var liftCard = {
+  kind: "vector",
+  id: "lift-card",
+  name: "Lift card",
+  description: "A content card that lifts toward you on hover like a material elevation change, rising and growing slightly as its shadow spreads and softens beneath it.",
+  category: "shadow",
+  tags: ["shadow", "card", "hover", "interactive", "elevation", "material", "ui", "micro-interaction"],
+  trigger: "hover",
+  hold: 800,
+  presets: [
+    { name: "Dark", values: { background: [0.07, 0.08, 0.11], card: [0.13, 0.15, 0.2], ink: [0.9, 0.92, 0.96], shadow: [0, 0, 0], accent: [0.4, 0.85, 1] } },
+    { name: "Warm", values: { title: "Weekend recipes", background: [0.98, 0.94, 0.88], accent: [0.93, 0.42, 0.25], shadow: [0.35, 0.18, 0.08] } }
+  ],
+  derived: (v) => {
+    const { size, length } = fit4(v.title, 116, 17);
+    return { size, length, base: r17(82 + size * 0.35) };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 320 240"><!-- {{title: text default='Getting started' label='Title'}} {{background: color default=#EEF1F6 label='Background'}} {{card: color default=#FFFFFF label='Card'}} {{ink: color default=#1F2937 label='Text colour'}} {{accent: color default=#6366F1 label='Accent'}} {{shadow: color default=#0F172A label='Shadow colour'}} --><defs><filter id="liftCardTight" x="-20%" y="-20%" width="140%" height="140%"><feGaussianBlur stdDeviation="2.5"/></filter><filter id="liftCardSoft" x="-40%" y="-40%" width="180%" height="180%"><feGaussianBlur stdDeviation="14"/></filter></defs><rect width="320" height="240" fill="{{background}}"/><rect id="liftCardAmbient" x="70" y="50" width="180" height="140" rx="14" fill="{{shadow}}" opacity="0" filter="url(#liftCardSoft)" transform="${raised(-4, 0.94)}"/><rect id="liftCardKey" x="70" y="50" width="180" height="140" rx="14" fill="{{shadow}}" opacity="0.22" filter="url(#liftCardTight)" transform="translate(0 2)"/><g id="liftCardFace" transform="${raised(0, 1)}"><rect x="70" y="50" width="180" height="140" rx="14" fill="{{card}}"/><circle cx="98" cy="80" r="12" fill="{{accent}}"/><text x="118" y="{{base}}" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="${SANS5}" font-size="{{size}}" font-weight="700" fill="{{ink}}">{{title}}</text><g fill="{{ink}}" opacity="0.16"><rect x="86" y="108" width="148" height="8" rx="4"/><rect x="86" y="124" width="148" height="8" rx="4"/><rect x="86" y="140" width="96" height="8" rx="4"/></g><rect x="86" y="160" width="54" height="16" rx="8" fill="{{accent}}"/></g></svg>`,
+    animate: [
+      { id: "liftCardFace", attrs: { transform: [raised(0, 1), raised(6, 1.02)] }, ms: 260, ease: "out" },
+      { id: "liftCardAmbient", attrs: { opacity: [0, 0.3], transform: [raised(-4, 0.94), raised(-16, 1)] }, ms: 300, ease: "out" },
+      { id: "liftCardKey", attrs: { opacity: [0.22, 0.12], transform: ["translate(0 2)", "translate(0 5)"] }, ms: 260, ease: "out" }
+    ]
+  }
+};
+var shadowEffects = [liftCard];
+
+// src/catalog/electric.ts
+var r18 = (v) => Math.round(v * 10) / 10;
 var about5 = (cx, cy, s) => `translate(${cx} ${cy}) scale(${Math.round(s * 1e3) / 1e3}) translate(${-cx} ${-cy})`;
 var snap6 = (id, attr, value, delay, step) => ({
   id,
@@ -3520,7 +3666,7 @@ var snap6 = (id, attr, value, delay, step) => ({
   delay,
   ms: 0
 });
-var SANS4 = `system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif`;
+var SANS6 = `system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif`;
 var BOLT = "M68 8 L28 66 L56 66 L46 112 L92 48 L64 48 L76 8 Z";
 var zapIcon = {
   kind: "vector",
@@ -3537,7 +3683,7 @@ var zapIcon = {
   motion: (() => {
     const sparks = [-55, 25, 160, 215].map((deg, i) => {
       const a = deg * Math.PI / 180;
-      const at3 = (r) => [r16(60 + r * Math.cos(a)), r16(60 + r * Math.sin(a))];
+      const at3 = (r) => [r18(60 + r * Math.cos(a)), r18(60 + r * Math.sin(a))];
       return { id: `s${i}`, from: at3(30), mid: at3(46), to: at3(56) };
     });
     return {
@@ -3605,7 +3751,7 @@ var powerButton = {
     };
   })()
 };
-var CELLS = Array.from({ length: 5 }, (_, i) => ({ id: `cell${i}`, x: r16(36 + i * 24.8) }));
+var CELLS = Array.from({ length: 5 }, (_, i) => ({ id: `cell${i}`, x: r18(36 + i * 24.8) }));
 var boltPose = (k) => `translate(96 58) scale(${Math.round(0.36 * k * 1e3) / 1e3}) translate(-60 -60)`;
 var batteryCharge = {
   kind: "vector",
@@ -3622,7 +3768,7 @@ var batteryCharge = {
   motion: {
     svg: `<svg viewBox="0 0 200 140"><!-- {{background: color default=#0F172A label='Background'}} {{shell: color default=#CBD5E1 label='Case'}} {{charge: color default=#22C55E label='Charge'}} {{bolt: color default=#FDE047 label='Bolt'}} {{ink: color default=#F8FAFC label='Percent'}} --><rect width="200" height="140" fill="{{background}}"/><rect id="case" x="28" y="26" width="136" height="64" rx="12" fill="none" stroke="{{shell}}" stroke-width="5"/><rect id="nub" x="167" y="46" width="9" height="24" rx="3" fill="{{shell}}"/>${CELLS.map(
       ({ id, x }) => `<rect id="${id}" x="${x}" y="34" width="20.8" height="48" rx="4" fill="{{charge}}" opacity="0"/>`
-    ).join("")}<path id="bolt" d="${BOLT}" transform="${boltPose(1)}" fill="{{bolt}}" stroke="{{background}}" stroke-width="10" stroke-linejoin="round" paint-order="stroke"/><rect id="flash" x="28" y="26" width="136" height="64" rx="12" fill="#FFFFFF" opacity="0"/><text id="pct" x="96" y="124" text-anchor="middle" font-family="${SANS4}" font-size="22" font-weight="700" fill="{{ink}}">0%</text></svg>`,
+    ).join("")}<path id="bolt" d="${BOLT}" transform="${boltPose(1)}" fill="{{bolt}}" stroke="{{background}}" stroke-width="10" stroke-linejoin="round" paint-order="stroke"/><rect id="flash" x="28" y="26" width="136" height="64" rx="12" fill="#FFFFFF" opacity="0"/><text id="pct" x="96" y="124" text-anchor="middle" font-family="${SANS6}" font-size="22" font-weight="700" fill="{{ink}}">0%</text></svg>`,
     animate: [
       { id: "pct", count: [0, 100], format: "{n}%", ms: 2e3, ease: "linear" },
       // Each cell lights as the count passes its share.
@@ -3913,8 +4059,8 @@ function packGlyph(rows) {
   return `ivec2(${a}, ${b})`;
 }
 var vec3Hex = (hex) => {
-  const n10 = parseInt(hex.slice(1), 16);
-  const c = [n10 >> 16, n10 >> 8 & 255, n10 & 255].map((v) => +(v / 255).toFixed(3));
+  const n11 = parseInt(hex.slice(1), 16);
+  const c = [n11 >> 16, n11 >> 8 & 255, n11 & 255].map((v) => +(v / 255).toFixed(3));
   return `vec3(${c.map((v) => Number.isInteger(v) ? `${v}.0` : String(v)).join(", ")})`;
 };
 var paletteArray = (name, hexes) => `const vec3 ${name}[${hexes.length}] = vec3[${hexes.length}](
@@ -4699,7 +4845,7 @@ var pixelShaders = [
 
 // src/catalog/pixel.ts
 var r29 = (v) => Math.round(v * 100) / 100;
-var n7 = (name) => `{{${name}}}`;
+var n8 = (name) => `{{${name}}}`;
 function bitmapPath(bitmap, char, unit = 1, x = 0, y = 0) {
   let d = "";
   bitmap.forEach((row, j) => {
@@ -4764,10 +4910,10 @@ var pixelText = {
       (_, i) => `<g id="g${i}" transform="${letterAt(i, -14)}" opacity="0"><path transform="translate(0.6 0.6)" fill="{{shadow}}" d="{{d${i}}}"/><path fill="{{ink}}" d="{{d${i}}}"/></g>`
     ).join("")}</g></svg>`,
     animate: Array.from({ length: TEXT_SLOTS }, (_, i) => [
-      { id: `g${i}`, attrs: { opacity: [0, 1] }, delay: n7(`t${i}`), ms: 60, ease: "linear" },
-      { id: `g${i}`, attrs: { transform: [letterAt(i, -14), letterAt(i, 0)] }, delay: n7(`t${i}`), ms: 260, ease: "in-out" },
-      { id: `g${i}`, attrs: { transform: [letterAt(i, 0), letterAt(i, -1.6)] }, delay: n7(`u${i}`), ms: 110, ease: "out" },
-      { id: `g${i}`, attrs: { transform: [letterAt(i, -1.6), letterAt(i, 0)] }, delay: n7(`w${i}`), ms: 120, ease: "in-out" }
+      { id: `g${i}`, attrs: { opacity: [0, 1] }, delay: n8(`t${i}`), ms: 60, ease: "linear" },
+      { id: `g${i}`, attrs: { transform: [letterAt(i, -14), letterAt(i, 0)] }, delay: n8(`t${i}`), ms: 260, ease: "in-out" },
+      { id: `g${i}`, attrs: { transform: [letterAt(i, 0), letterAt(i, -1.6)] }, delay: n8(`u${i}`), ms: 110, ease: "out" },
+      { id: `g${i}`, attrs: { transform: [letterAt(i, -1.6), letterAt(i, 0)] }, delay: n8(`w${i}`), ms: 120, ease: "in-out" }
     ]).flat()
   }
 };
@@ -4972,7 +5118,7 @@ var chompLoader = {
 var pixelEffects = [pixelText, coinSpin, spaceInvader, pixelHeartHealth, chompLoader];
 
 // src/catalog/pyro.ts
-var round = (n10) => Math.round(n10 * 10) / 10;
+var round = (n11) => Math.round(n11 * 10) / 10;
 var fireworkBurst = {
   kind: "vector",
   id: "firework-burst",
@@ -5027,10 +5173,10 @@ var fireworkBurst = {
 var pyroEffects = [fireworkBurst];
 
 // src/catalog/timewarp.ts
-var r17 = (n10) => Math.round(n10 * 10) / 10;
+var r19 = (n11) => Math.round(n11 * 10) / 10;
 var at2 = (degrees, radius) => {
   const a = degrees * Math.PI / 180;
-  return [r17(100 + radius * Math.sin(a)), r17(100 - radius * Math.cos(a))];
+  return [r19(100 + radius * Math.sin(a)), r19(100 - radius * Math.cos(a))];
 };
 var slice = (from, to, radius) => {
   const [x0, y0] = at2(from, radius);
@@ -5101,7 +5247,7 @@ var r210 = (v) => {
   const r = Math.round(v * 100) / 100;
   return Object.is(r, -0) ? 0 : r;
 };
-var n8 = (name) => `{{${name}}}`;
+var n9 = (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]]);
@@ -5161,16 +5307,16 @@ function around(c, r, from, to, avoid) {
   if (((avoid - from) % 360 + 360) % 360 < delta) delta -= 360;
   return arc2(c[0], c[1], r, r, from, from + delta);
 }
-function crescent(c1, r19, c2, r2_) {
+function crescent(c1, r111, c2, r2_) {
   const [dx, dy] = [c2[0] - c1[0], c2[1] - c1[1]];
   const d = Math.hypot(dx, dy);
-  const a = (r19 * r19 - r2_ * r2_ + d * d) / (2 * d);
-  const h = Math.sqrt(Math.max(0, r19 * r19 - a * a));
+  const a = (r111 * r111 - r2_ * r2_ + d * d) / (2 * d);
+  const h = Math.sqrt(Math.max(0, r111 * r111 - a * a));
   const [px, py] = [c1[0] + a * dx / d, c1[1] + a * dy / d];
   const i1 = [px - h * dy / d, py + h * dx / d];
   const i2 = [px + h * dy / d, py - h * dx / d];
   const angle = (c, p) => Math.atan2(p[1] - c[1], p[0] - c[0]) / DEG2;
-  const outer = around(c1, r19, angle(c1, i1), angle(c1, i2), angle(c1, c2));
+  const outer = around(c1, r111, angle(c1, i1), angle(c1, i2), angle(c1, c2));
   const inner = around(c2, r2_, angle(c2, i2), angle(c2, i1), angle(c2, c1) + 180);
   return polyline3([...outer, ...inner.slice(1, -1)], true);
 }
@@ -5225,8 +5371,8 @@ var shapeMorph = {
   motion: {
     svg: `<svg viewBox="0 0 100 100"><!-- {{from: text default='${SHAPE_FROM}' label='From path'}} {{to: text default='${SHAPE_TO}' label='To path'}} {{fillFrom: color default=#6366F1 label='Fill (from)'}} {{fillTo: color default=#F59E0B label='Fill (to)'}} {{strokeFrom: color default=#C7D2FE label='Outline (from)'}} {{strokeTo: color default=#FEF3C7 label='Outline (to)'}} {{background: color default=#0F172A label='Background'}} {{width: float min=0 max=6 default=1.5 step=0.25 label='Outline width'}} {{morph: float min=200 max=3000 default=1000 step=50 label='Morph ms'}} {{pause: float min=0 max=3000 default=700 step=50 label='Pause ms'}} --><rect width="100" height="100" fill="{{background}}"/><path id="shape" d="{{a}}" fill="{{fillFrom}}" fill-rule="evenodd" stroke="{{strokeFrom}}" stroke-width="{{width}}" stroke-linejoin="round"/></svg>`,
     animate: [
-      { id: "shape", attrs: { d: ["{{a}}", "{{b}}"], fill: ["{{fillFrom}}", "{{fillTo}}"], stroke: ["{{strokeFrom}}", "{{strokeTo}}"] }, delay: n8("pause"), ms: n8("morph"), ease: "in-out" },
-      { id: "shape", attrs: { d: ["{{b}}", "{{a}}"], fill: ["{{fillTo}}", "{{fillFrom}}"], stroke: ["{{strokeTo}}", "{{strokeFrom}}"] }, delay: n8("back"), ms: n8("morph"), ease: "in-out" }
+      { id: "shape", attrs: { d: ["{{a}}", "{{b}}"], fill: ["{{fillFrom}}", "{{fillTo}}"], stroke: ["{{strokeFrom}}", "{{strokeTo}}"] }, delay: n9("pause"), ms: n9("morph"), ease: "in-out" },
+      { id: "shape", attrs: { d: ["{{b}}", "{{a}}"], fill: ["{{fillTo}}", "{{fillFrom}}"], stroke: ["{{strokeTo}}", "{{strokeFrom}}"] }, delay: n9("back"), ms: n9("morph"), ease: "in-out" }
     ]
   }
 };
@@ -5317,7 +5463,7 @@ var morphSequenceEffect = {
     svg: `<svg viewBox="0 0 200 200"><!-- {{c0: color default=#38BDF8 label='Circle'}} {{c1: color default=#FACC15 label='Star'}} {{c2: color default=#F43F5E label='Heart'}} {{c3: color default=#A78BFA label='Hexagon'}} {{background: color default=#0F172A label='Background'}} {{morph: float min=200 max=3000 default=900 step=50 label='Morph ms'}} {{pause: float min=0 max=3000 default=500 step=50 label='Pause ms'}} --><rect width="200" height="200" fill="{{background}}"/><path id="shape" d="${SEQUENCE[0]}" fill="{{c0}}" fill-rule="evenodd"/></svg>`,
     animate: SEQUENCE.map((d, i) => {
       const next = (i + 1) % SEQUENCE.length;
-      return { id: "shape", attrs: { d: [d, SEQUENCE[next]], fill: [`{{c${i}}}`, `{{c${next}}}`] }, delay: n8(`at${i}`), ms: n8("morph"), ease: "in-out" };
+      return { id: "shape", attrs: { d: [d, SEQUENCE[next]], fill: [`{{c${i}}}`, `{{c${next}}}`] }, delay: n9(`at${i}`), ms: n9("morph"), ease: "in-out" };
     })
   }
 };
@@ -5358,7 +5504,7 @@ var gooeyMorph = {
   motion: {
     svg: `<svg viewBox="0 0 200 200"><!-- {{colorA: color default=#22D3EE label='Colour A'}} {{colorB: color default=#A855F7 label='Colour B'}} {{background: color default=#0B0B1A label='Background'}} {{goo: float min=1 max=14 default=7 step=0.5 label='Gooeyness'}} {{sharp: float min=8 max=40 default=20 step=1 label='Edge sharpness'}} {{morph: float min=300 max=3000 default=1200 step=50 label='Morph ms'}} {{pause: float min=0 max=3000 default=400 step=50 label='Pause ms'}} --><defs><linearGradient id="gooFill" gradientUnits="userSpaceOnUse" x1="30" y1="30" x2="170" y2="170"><stop offset="0" stop-color="{{colorA}}"/><stop offset="1" stop-color="{{colorB}}"/></linearGradient><filter id="goo" x="-20%" y="-20%" width="140%" height="140%"><feGaussianBlur in="SourceGraphic" stdDeviation="{{goo}}" result="soft"/><feColorMatrix in="soft" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 {{sharp}} {{threshold}}"/></filter></defs><rect width="200" height="200" fill="{{background}}"/><g filter="url(#goo)" fill="url(#gooFill)">${GOO.map((stages2, i) => `<path id="goo${i}" d="${stages2[0]}" fill-rule="evenodd"/>`).join("")}</g></svg>`,
     animate: GOO.flatMap(
-      (stages2, i) => stages2.map((d, s) => ({ id: `goo${i}`, attrs: { d: [d, stages2[(s + 1) % stages2.length]] }, delay: n8(`at${s}`), ms: n8("morph"), ease: "in-out" }))
+      (stages2, i) => stages2.map((d, s) => ({ id: `goo${i}`, attrs: { d: [d, stages2[(s + 1) % stages2.length]] }, delay: n9(`at${s}`), ms: n9("morph"), ease: "in-out" }))
     )
   }
 };
@@ -5410,10 +5556,10 @@ var particleMorph = {
     const back = 3e3;
     const spread = DOTS4 * DOT_STAGGER;
     const leg = (i, at3, from, mid, to, colours) => [
-      { id: `p${i}`, attrs: { cx: [n8(`${from}x${i}`), n8(`${mid}x${i}`)], cy: [n8(`${from}y${i}`), n8(`${mid}y${i}`)] }, delay: at3 + i * DOT_STAGGER, ms: 450, ease: "out" },
-      { id: `p${i}`, attrs: { cx: [n8(`${mid}x${i}`), n8(`${to}x${i}`)], cy: [n8(`${mid}y${i}`), n8(`${to}y${i}`)], fill: colours }, delay: at3 + 450 + i * DOT_STAGGER, ms: 650, ease: "in-out" }
+      { id: `p${i}`, attrs: { cx: [n9(`${from}x${i}`), n9(`${mid}x${i}`)], cy: [n9(`${from}y${i}`), n9(`${mid}y${i}`)] }, delay: at3 + i * DOT_STAGGER, ms: 450, ease: "out" },
+      { id: `p${i}`, attrs: { cx: [n9(`${mid}x${i}`), n9(`${to}x${i}`)], cy: [n9(`${mid}y${i}`), n9(`${to}y${i}`)], fill: colours }, delay: at3 + 450 + i * DOT_STAGGER, ms: 650, ease: "in-out" }
     ];
-    const fade = (id, at3, show) => ({ id, attrs: { opacity: show ? [0, n8("ghost")] : [n8("ghost"), 0] }, delay: at3, ms: 450, ease: "in-out" });
+    const fade = (id, at3, show) => ({ id, attrs: { opacity: show ? [0, n9("ghost")] : [n9("ghost"), 0] }, delay: at3, ms: 450, ease: "in-out" });
     return {
       svg: `<svg viewBox="0 0 200 200"><!-- {{from: text default='${PARTICLE_FROM}' label='From path'}} {{to: text default='${PARTICLE_TO}' label='To path'}} {{fromColor: color default=#F472B6 label='From colour'}} {{toColor: color default=#FBBF24 label='To colour'}} {{background: color default=#0C0A1D label='Background'}} {{size: float min=0.8 max=6 default=2.6 step=0.1 label='Dot size'}} {{scatter: float min=0 max=80 default=34 step=1 label='Scatter'}} {{ghost: float min=0 max=1 default=0.16 label='Shape fill'}} --><rect width="200" height="200" fill="{{background}}"/><path id="ghostA" d="{{a}}" fill="{{fromColor}}" fill-rule="evenodd" opacity="{{ghost}}"/><path id="ghostB" d="{{b}}" fill="{{toColor}}" fill-rule="evenodd" opacity="0"/>${Array.from(
         { length: DOTS4 },
@@ -5501,10 +5647,10 @@ var digitMorph = {
     animate: Array.from({ length: SLOTS }, (_, j) => [
       ...Array.from({ length: MAX_STEPS }, (_2, i) => {
         const k = i + 1;
-        return { id: `s${j}`, attrs: { d: [`{{d${j}_${k - 1}}}`, `{{d${j}_${k}}}`], opacity: [n8(`o${j}_${k - 1}`), n8(`o${j}_${k}`)] }, delay: n8(`t${k}`), ms: n8("morph"), ease: "in-out" };
+        return { id: `s${j}`, attrs: { d: [`{{d${j}_${k - 1}}}`, `{{d${j}_${k}}}`], opacity: [n9(`o${j}_${k - 1}`), n9(`o${j}_${k}`)] }, delay: n9(`t${k}`), ms: n9("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: [n8(`o${j}_${MAX_STEPS}`), n8(`o${j}_0`)] }, delay: n8("back"), ms: n8("morph"), ease: "in-out" }
+      { id: `s${j}`, attrs: { d: [`{{d${j}_${MAX_STEPS}}}`, `{{d${j}_0}}`], opacity: [n9(`o${j}_${MAX_STEPS}`), n9(`o${j}_0`)] }, delay: n9("back"), ms: n9("morph"), ease: "in-out" }
     ]).flat()
   }
 };
@@ -6846,16 +6992,25 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   float px = 1.0 / iResolution.y;
   vec2 p = fragCoord * px;
   vec4 acc = vec4(0.0);
+  // The clicks are the same for every bubble, so look them up once.
+  vec4 clicks[8];
+  for (int j = 0; j < 8; j++) clicks[j] = clickAt(j, uDemo);
+  // Nothing of a bubble reaches further than this from where it is now: its pop (up to 0.7 s
+  // ago, so it has drifted at most this far since) throws droplets out to 3.6 radii + 0.1.
+  float drift = 0.7 * (uRise + 0.085 * uWobble + 0.04);
+  float far = max(uSize * 0.12, 0.01) * 3.6 + 0.1 + drift + 2.0 * px;
   for (int i = 0; i < 16; i++) {
     if (i >= uCount) break;
     float age;
     float life;
     vec4 b = bubbleAt(i, iTime, age, life);
+    vec2 d0 = p - b.xy;
+    if (dot(d0, d0) > far * far) continue;
     float birth = iTime - age;
     // It pops when its life is up, or at the first click that lands on it.
     float popAt = birth + life;
     for (int j = 0; j < 8; j++) {
-      vec4 c = clickAt(j, uDemo);
+      vec4 c = clicks[j];
       if (c.w < 0.5 || c.z < birth || c.z > iTime || c.z >= popAt) continue;
       float a2;
       float l2;
@@ -8094,10 +8249,36 @@ uniform float uClump;    // @control min=0 max=1 default=0.5 label="Clumping"
 uniform float uPart;     // @control min=0 max=1 default=0.8 label="Parting"`,
     HASH,
     NOISE,
-    `vec2 strandDir(vec2 root, vec2 ptr, float hov) {
-  float a = radians(uLie) + (vnoise(root * 0.07) - 0.5) * 1.6 * uClump;
-  a += uSway * 0.7 * sin(iTime * 1.3 + root.x * 0.05 + root.y * 0.03 + 2.0 * vnoise(root * 0.02 + iTime * 0.15));
+    `// The two slow noise fields that turn the strands, hashed once per pixel on a
+// 3 x 3 lattice that covers every root the pixel looks at.
+mat3 clumpGrid;
+vec2 clumpBase;
+mat3 swayGrid;
+vec2 swayBase;
+
+mat3 noiseGrid(vec2 base) {
+  mat3 g;
+  for (int x = 0; x < 3; x++) {
+    for (int y = 0; y < 3; y++) g[x][y] = hash12(base + vec2(float(x), float(y)));
+  }
+  return g;
+}
+
+// vnoise(q), with its corners read from a lattice hashed at base.
+float gridNoise(vec2 q, vec2 base, mat3 g) {
+  vec2 f = fract(q);
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  ivec2 k = clamp(ivec2(floor(q) - base), 0, 1);
+  vec3 c0 = g[k.x];
+  vec3 c1 = g[k.x + 1];
+  return mix(mix(c0[k.y], c1[k.y], u.x), mix(c0[k.y + 1], c1[k.y + 1], u.x), u.y);
+}
+
+vec2 strandDir(vec2 root, vec2 ptr, float hov) {
+  float a = radians(uLie) + (gridNoise(root * 0.07, clumpBase, clumpGrid) - 0.5) * 1.6 * uClump;
+  a += uSway * 0.7 * sin(iTime * 1.3 + root.x * 0.05 + root.y * 0.03 + 2.0 * gridNoise(root * 0.02 + iTime * 0.15, swayBase, swayGrid));
   vec2 dir = vec2(cos(a), sin(a));
+  if (uPart * hov <= 0.0) return dir;
   vec2 away = root - ptr;
   float reach = 0.16 * uDensity;
   float f = uPart * hov * exp(-dot(away, away) / (reach * reach));
@@ -8108,23 +8289,93 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   vec2 p = fragCoord / iResolution.y * uDensity;
   vec2 ptr = iPointer.xy / iResolution.y * uDensity;
   float hov = clamp(iPointer.z, 0.0, 1.0);
+  // Every root looked at below lies within 7 cells of p.
+  clumpBase = floor((p - 7.0) * 0.07);
+  clumpGrid = noiseGrid(clumpBase);
+  swayBase = floor((p - 7.0) * 0.02 + iTime * 0.15);
+  swayGrid = noiseGrid(swayBase);
   vec2 here = strandDir(p, ptr, hov);
   float top = -1.0;
   float across = 0.0;
   float tint = 0.0;
   vec2 topDir = here;
+  // Clumping and breeze turn a strand by at most 0.8 * uClump and 0.7 * uSway, and
+  // both fields are smooth, so strands rooted within reach of this pixel point
+  // inside a cone around its own direction. Roots whose strands can't reach the
+  // pixel, or can't rise above the strand already found, are skipped before their
+  // directions are worked out. Roots are visited upstream first, so the topmost
+  // strand tends to be found early and the rest skipped. (Hovering parts the fur
+  // near the pointer in any direction, so the cone isn't used there.)
+  float lie = radians(uLie);
+  float R = 1.25 * uLength + uWidth;
+  float cp = (gridNoise(p * 0.07, clumpBase, clumpGrid) - 0.5) * 1.6 * uClump;
+  float sp = uSway * 0.7 * sin(iTime * 1.3 + p.x * 0.05 + p.y * 0.03 + 2.0 * gridNoise(p * 0.02 + iTime * 0.15, swayBase, swayGrid));
+  // Bounds on each field's slope: 0.2376 * uClump and 0.10024 * uSway per cell.
+  float dc = 0.2376 * uClump * R;
+  float ds = 0.10024 * uSway * R;
+  vec2 lo = vec2(max(-0.8 * uClump, cp - dc), max(-0.7 * uSway, sp - ds));
+  vec2 hi = vec2(min(0.8 * uClump, cp + dc), min(0.7 * uSway, sp + ds));
+  float mid = lie + 0.5 * (lo.x + hi.x + lo.y + hi.y);
+  // At most 1.54, under a quarter turn.
+  float cone = 0.5 * (hi.x - lo.x + hi.y - lo.y) + 0.04;
+  vec2 axis = vec2(cos(mid), sin(mid));
+  float cosCone = cos(cone);
+  float sinCone = sin(cone);
+  float reach = 0.16 * uDensity;
+  bool parting = uPart * hov > 0.0;
+  // The box roots that reach this pixel lie in, relative to it: behind it within
+  // the cone (anywhere within reach where the pointer may be parting the fur).
+  float back = 1.25 * uLength;
+  vec2 e1 = -back * vec2(cos(mid + cone), sin(mid + cone));
+  vec2 e2 = -back * vec2(cos(mid - cone), sin(mid - cone));
+  vec2 boxLo = min(vec2(0.0), min(e1, e2));
+  vec2 boxHi = max(vec2(0.0), max(e1, e2));
+  if (-axis.x >= cosCone) boxHi.x = back;
+  if (axis.x >= cosCone) boxLo.x = -back;
+  if (-axis.y >= cosCone) boxHi.y = back;
+  if (axis.y >= cosCone) boxLo.y = -back;
+  float ptrGap = max(length(p - ptr) - R, 0.0);
+  if (uPart * hov * exp(-ptrGap * ptrGap / (reach * reach)) * 1.4 > 0.02) {
+    boxLo = vec2(-back);
+    boxHi = vec2(back);
+  }
+  boxLo += p - uWidth;
+  boxHi += p + uWidth;
+  bvec2 up = lessThan(here, vec2(0.0));
   for (int layer = 0; layer < 3; layer++) {
     float fl = float(layer);
     vec2 off = vec2(0.37, 0.71) * fl;
+    // Each layer's 5 x 5 cells around the middle of the strands through here,
+    // cut to those whose roots (in [id + off, id + off + 1)) can lie in the box.
     vec2 base = floor(p - here * uLength * 0.5 - off);
-    for (int j = -2; j <= 2; j++) {
-      for (int i = -2; i <= 2; i++) {
+    ivec2 first = ivec2(max(ceil(boxLo - off - 1.0), base - 2.0) - base);
+    ivec2 last = ivec2(min(floor(boxHi - off), base + 2.0) - base);
+    for (int row = 0; row < 5; row++) {
+      if (row > last.y - first.y) break;
+      int j = up.y ? last.y - row : first.y + row;
+      for (int column = 0; column < 5; column++) {
+        if (column > last.x - first.x) break;
+        int i = up.x ? last.x - column : first.x + column;
         vec2 id = base + vec2(float(i), float(j));
         vec2 h = hash22(id + fl * 31.7);
         vec2 root = id + off + h;
-        vec2 dir = strandDir(root, ptr, hov);
         float len = uLength * (0.75 + 0.5 * h.y);
         vec2 rp = p - root;
+        float r2 = dot(rp, rp);
+        // Too far away, or can't rise above the strand already found (along <= r / len).
+        float reachLen = len + uWidth;
+        if (r2 >= reachLen * reachLen || top >= 1.0 || (top >= 0.0 && r2 <= top * top * len * len)) continue;
+        bool parted = false;
+        if (parting) {
+          vec2 away = root - ptr;
+          parted = uPart * hov * exp(-dot(away, away) / (reach * reach)) * 1.4 > 0.02;
+        }
+        if (r2 > uWidth * uWidth && !parted) {
+          // Off the cone widened by the strand's width: it can't cover this pixel.
+          float da = dot(rp, axis);
+          if (da < cosCone * sqrt(r2 - uWidth * uWidth) - sinCone * uWidth) continue;
+        }
+        vec2 dir = strandDir(root, ptr, hov);
         float along = clamp(dot(rp, dir) / len, 0.0, 1.0);
         float w = uWidth * (1.0 - 0.75 * along);
         float dist = length(rp - dir * along * len);
@@ -9319,29 +9570,61 @@ float poolY(float x, float m) {
   return m * (0.1 + 0.012 * sin(x * 9.0 + iTime * 0.7854) + 0.025 * vnoise(vec2(x * 6.0, 2.0))) - 0.006;
 }
 
-// Distance to the liquid (negative inside): a lip along the slumped edge, drips hanging from it, the puddle.
-float liquid(vec2 uv, float m) {
+vec4 smin4(vec4 a, vec4 b, float k) {
+  k = max(k, 1e-4);
+  vec4 h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
+  return mix(b, a, h) - k * h * (1.0 - h);
+}
+
+// Distances to the liquid (negative inside) at four nearby points (xs, ys) at
+// once: a lip along the slumped edge, drips hanging from it, the puddle. Each
+// point sees the drips of the five columns around its own; those columns'
+// drips are worked out once for all four. edge and pool are edgeY and poolY
+// at the points; a point's distance only matters below its entry in matter.
+vec4 liquid(vec4 xs, vec4 ys, vec4 edge, vec4 pool, float m, vec4 matter) {
   float n = float(uDrips);
   float grow = smoothstep(0.0, 0.2, m);
-  float e = edgeY(uv.x, m) + 0.01 * (1.0 - grow);
+  vec4 e = edge + 0.01 * (1.0 - grow);
   float lip = 0.022 * grow;
-  float d = max(uv.y - e, e - lip - uv.y);
-  float c = floor(uv.x * n);
-  for (int k = -2; k <= 2; k++) {
+  vec4 d = max(ys - e, e - lip - ys);
+  vec4 cs = floor(xs * n);
+  float c = cs.y;
+  // Where any drip's top and head can be, from the bounds of edgeY and poolY.
+  float topMin = 1.0 - m * 0.34 - lip * 0.5;
+  float topMax = 1.0 - m * 0.04 - lip * 0.5;
+  float poolMin = m * 0.088 - 0.006;
+  // A drip farther than this beyond where a distance matters can't change it
+  // there: the blends that follow can pull a distance down by at most this much.
+  vec4 reach = matter + 0.16;
+  for (int k = -3; k <= 3; k++) {
     float ci = c + float(k);
+    bvec4 near = lessThanEqual(abs(cs - ci), vec4(2.0));
+    if (!any(near)) continue;
     vec2 h = hash22(vec2(ci, 3.1));
     float xi = (ci + 0.2 + 0.6 * h.x) / n;
     float w = min(uViscosity * (0.7 + 0.6 * hash12(vec2(ci, 7.7))), 0.6 * aspect / n) * grow;
+    // The nearest this drip can be to each point, before working out its shape:
+    // skip it if it can't change any of them.
+    float f = pow(m, 1.4) * min(0.2 + 0.95 * h.y, 1.0);
+    float headMin = min(topMin, topMin * (1.0 - f) + f * poolMin);
+    vec4 gap = vec4(abs(xs - xi) * aspect);
+    vec4 rise = max(max(headMin - ys, ys - topMax), 0.0);
+    vec4 nearest = sqrt(gap * gap + rise * rise) - 1.3 * w;
+    bvec4 counts = bvec4(vec4(near) * step(nearest, d + 0.012 * grow) * step(nearest, reach));
+    if (!any(counts)) continue;
     float top = edgeY(xi, m) - lip * 0.5;
-    float len = pow(m, 1.4) * min(0.2 + 0.95 * h.y, 1.0) * max(top - poolY(xi, m), 0.0);
+    float len = f * max(top - poolY(xi, m), 0.0);
     float head = top - len;
-    float along = clamp(uv.y, head, top);
+    vec4 along = clamp(ys, head, top);
     // A stem thinning as it runs, then a round, heavier head.
-    float r = w * mix(0.85, 0.6, smoothstep(top, top - 0.3, uv.y));
-    r = mix(r, w * 1.3, smoothstep(head + 3.0 * w, head, uv.y));
-    d = smin(d, length(vec2((uv.x - xi) * aspect, uv.y - along)) - r, 0.012 * grow);
-  }
-  return smin(d, uv.y - poolY(uv.x, m), 0.03 * grow);
+    vec4 r = w * mix(vec4(0.85), vec4(0.6), smoothstep(top, top - 0.3, ys));
+    r = mix(r, vec4(w * 1.3), smoothstep(head + 3.0 * w, head, ys));
+    vec4 dx = (xs - xi) * aspect;
+    vec4 dy = ys - along;
+    vec4 dd = smin4(d, sqrt(dx * dx + dy * dy) - r, 0.012 * grow);
+    d = mix(d, dd, near);
+  }
+  return smin4(d, ys - pool, 0.03 * grow);
 }
 
 void mainImage(out vec4 fragColor, in vec2 fragCoord) {
@@ -9350,23 +9633,32 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   float px = 1.0 / iResolution.y;
   float m = uAnimate ? meltCycle(uSpeed) : uProgress;
 
+  // The liquid is sampled at four points: under the shadow, here, and a step
+  // right and up for its normal. They share three columns of x.
+  float eps = 0.0015;
+  vec4 xs = uv.x + vec4(-0.004, 0.0, eps / aspect, 0.0);
+  vec4 ys = uv.y + vec4(0.009, 0.0, 0.0, eps);
+  vec3 edge3 = vec3(edgeY(xs.x, m), edgeY(xs.y, m), edgeY(xs.z, m));
+  vec3 pool3 = vec3(poolY(xs.x, m), poolY(xs.y, m), poolY(xs.z, m));
+  // The shadow shows below 0.012, the liquid below 4 px (its neighbours a little farther).
+  vec4 liq = liquid(xs, ys, edge3.xyzy, pool3.xyzy, m, vec4(0.012, 4.0 * px, vec2(4.0 * px + 0.005)));
+
   // The picture slumped under its edge: squashed towards the bottom, stretched thin at the top.
-  float e = edgeY(uv.x, m);
+  float e = edge3.y;
   float h = clamp(uv.y / e, 0.0, 1.0);
-  float ys = 1.0 - pow(1.0 - h, 1.0 + m * 1.3);
-  float xs = uv.x + m * 0.006 * sin(uv.y * 40.0 + uv.x * 13.0);
-  vec4 col = pictureRGBA(uImage, vec2(xs, ys));
+  float ys0 = 1.0 - pow(1.0 - h, 1.0 + m * 1.3);
+  float xs0 = uv.x + m * 0.006 * sin(uv.y * 40.0 + uv.x * 13.0);
+  vec4 col = pictureRGBA(uImage, vec2(xs0, ys0));
   vec4 behind = vec4(uBackground * (0.75 + 0.5 * uv.y), uBackdropAlpha);
   col = mix(col, behind, smoothstep(e - px, e + px, uv.y));
 
   // The liquid's shadow, down and to the right.
-  float shadow = liquid(uv + vec2(-0.004, 0.009), m);
+  float shadow = liq.x;
   col.rgb *= 1.0 - 0.4 * smoothstep(0.012, -0.004, shadow) * smoothstep(0.0, 0.1, m);
 
-  float d = liquid(uv, m);
+  float d = liq.y;
   if (d < 4.0 * px) {
-    float eps = 0.0015;
-    vec2 g = vec2(liquid(uv + vec2(eps / aspect, 0.0), m) - d, liquid(uv + vec2(0.0, eps), m) - d);
+    vec2 g = vec2(liq.z - d, liq.w - d);
     g /= max(length(g), 1e-5);
     float thick = sqrt(clamp(-d / 0.018, 0.0, 1.0));
     vec3 nrm = normalize(vec3(g * (1.0 - thick) * 1.6, 0.4 + thick));
@@ -9374,7 +9666,7 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
     vec4 top = pictureRGBA(uImage, vec2(uv.x + 0.01 * sin(uv.y * 25.0), 0.965));
     float sx = uv.x + 0.04 * sin(uv.x * 11.0 + uv.y * 30.0);
     vec4 pool = (pictureRGBA(uImage, vec2(sx - 0.06, 0.25)) + pictureRGBA(uImage, vec2(sx + 0.06, 0.4)) + pictureRGBA(uImage, vec2(sx, 0.9))) / 3.0;
-    float inPool = smoothstep(poolY(uv.x, m) + 0.04, poolY(uv.x, m) - 0.01, uv.y);
+    float inPool = smoothstep(pool3.y + 0.04, pool3.y - 0.01, uv.y);
     vec4 base = mix(top, pool, inPool);
     base.rgb *= 0.9 + 0.12 * vnoise(vec2(uv.x * 90.0, uv.y * 3.0));
     vec3 wet = liquidShade(base.rgb * 1.05, nrm, uGloss);
@@ -10303,7 +10595,18 @@ uniform float uIntensity; // @control min=0.2 max=3 default=1 label="Intensity"`
   float w = max(0.0022, px);
   float k = 1.4;
   float g = 1.5;
+  // Past this distance a streak's glow is far below one level, so sparks farther
+  // away are skipped, and so is the whole loop outside the fountain's reach.
+  float margin = 30.0 * w;
+  float vmax = 1.35 * uHeight * 1.25;
+  float xmax = vmax * sin(min(uSpread * 1.2, 1.5708)) * (1.0 - exp(-k * 1.8)) / k;
+  float apex = log(1.0 + vmax * k / g) / k;
+  float ea = (1.0 - exp(-k * apex)) / k;
+  float ymax = vmax * ea - g / k * (apex - ea);
+  vec2 rel = p - base;
+  bool inReach = abs(rel.x) < xmax + margin && rel.y > -0.01 - margin && rel.y < ymax + margin;
   for (int j = 0; j < 112; j++) {
+    if (!inReach) break;
     float fj = float(j);
     vec2 h = hash22(vec2(fj, 2.31));
     float life = 1.0 + 0.8 * h.y;
@@ -10313,11 +10616,14 @@ uniform float uIntensity; // @control min=0.2 max=3 default=1 label="Intensity"`
     vec3 s = vec3(hash22(vec2(fj * 1.7, n)), hash12(vec2(n, fj + 0.37)));
     if (s.z > uDensity) continue;
     float a = (s.x - 0.5) * 2.0 * uSpread * 1.2;
+    // A spark only ever moves to its own side of the base.
+    if (a * rel.x < 0.0 && abs(rel.x) > margin) continue;
     vec2 v = vec2(sin(a), cos(a)) * mix(0.9, 1.35, s.y) * uHeight * 1.25;
     vec2 head = base + ballistic(v, k, g, age);
     vec2 tail = base + ballistic(v, k, g, max(age - 0.07, 0.0));
     // Sparks that fall back past the base are gone.
     if (head.y < base.y - 0.01) continue;
+    if (any(lessThan(p, min(head, tail) - margin)) || any(greaterThan(p, max(head, tail) + margin))) continue;
     float fade = 1.0 - smoothstep(0.5, 1.0, age / life);
     float twinkle = 0.6 + 0.4 * hash12(vec2(fj, floor(iTime * 24.0)));
     vec3 tint = mix(vec3(1.0, 0.96, 0.85), uColor, smoothstep(0.0, 0.5, age));
@@ -11562,15 +11868,15 @@ ${BACKDROP_CONTROLS}`,
     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.
+    `// Where cell c's particle lands: cells trade places around each 2 \xD7 2 block, turned 1\u20133 steps.
+// Round the block the corners go (0, 0), (1, 0), (1, 1), (0, 1); worked out rather than looked up in an array.
 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 i = local.y < 0.5 ? local.x : 3.0 - local.x;
+  float turn = 1.0 + floor(hash12(block + 7.3) * 2.999);
+  float r = mod(i + turn, 4.0);
+  return block * 2.0 + vec2(r > 0.5 && r < 2.5 ? 1.0 : 0.0, r > 1.5 ? 1.0 : 0.0);
 }
 
 void mainImage(out vec4 fragColor, in vec2 fragCoord) {
@@ -11584,26 +11890,43 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   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));
+  // How far a particle's corners stray from the straight line between its two places: the curl, then its turned corners.
+  float reach = max(0.7072, 0.6 * abs(uScatter + uSpin * 0.3) + 0.4951) + 0.01;
+  // Particles travel at most about 1.5 cells, so the 5 \xD7 5 cells around are every candidate;
+  // of those, only the cells within reach (one cell either side of the block) need looking at.
+  vec2 lo = max(base - 2.0, ceil(p - 1.5 - reach));
+  vec2 hi = min(base + 2.0, floor(p + 0.5 + reach));
+  for (int j = 0; j < 5; j++) {
+    if (lo.y + float(j) > hi.y) break;
+    for (int i = 0; i < 5; i++) {
+      if (lo.x + float(i) > hi.x) break;
+      vec2 c = lo + vec2(float(i), float(j));
+      // It stays in its 2 \xD7 2 block, so skip it if this pixel is out of its reach from there.
+      vec2 corner = c - 2.0 * floor(c * 0.5);
+      if (any(lessThan(p, c + 0.5 - corner - reach)) || any(greaterThan(p, c + 1.5 - corner + reach))) continue;
       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);
+      float z = h.y + lift;
+      // Behind what is already here, or (now its lift is known) out of reach: skip it before working out where it is.
+      if (z <= top) continue;
+      float near = 0.6 * abs(uScatter + uSpin * 0.3) * lift + 0.7072 * (1.0 - 0.3 * lift) + 0.01;
+      if (any(lessThan(p, c + 0.5 - corner - near)) || any(greaterThan(p, c + 1.5 - corner + near))) continue;
       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;
+      // Out of reach of its corners, however it is turned.
+      vec2 rel = p - pos;
+      if (dot(rel, rel) > 0.501 * size * size) continue;
       float angle = (h.y - 0.5) * 6.28318 * uSpin * lift;
-      vec2 l = rot(-angle) * (p - pos) / size;
+      vec2 l = rot(-angle) * rel / size;
       float m = max(abs(l.x), abs(l.y));
-      float z = h.y + lift;
-      if (m <= 0.5 && z > top) {
+      if (m <= 0.5) {
         top = z;
         hitFrom = from + l;
         hitTo = to + l;
@@ -12542,6 +12865,24 @@ ${BACKDROP_CONTROLS}`,
   return cell + 0.15 + 0.7 * hash22(cell);
 }
 
+// No point is further than this from its own shard's site (sites sit in the middle 70% of each cell).
+const float SHARD_REACH = 1.25;
+
+// Whether grid point q lies on shard c: c's site is the nearest of those in the 3 \xD7 3 cells around q.
+bool onShard(vec2 q, vec2 c) {
+  vec2 base = floor(q);
+  vec2 off = c - base;
+  if (abs(off.x) > 1.0 || abs(off.y) > 1.0) return false;
+  float own = distance(q, shardSite(c));
+  for (int j = -1; j <= 1; j++) {
+    for (int i = -1; i <= 1; i++) {
+      vec2 n = base + vec2(float(i), float(j));
+      if (n != c && distance(q, shardSite(n)) < own) return false;
+    }
+  }
+  return true;
+}
+
 // The shard (cell) under grid point q, and how far q is from its edge (xy: cell, z: edge gap).
 vec3 shardAt(vec2 q) {
   vec2 base = floor(q);
@@ -12570,28 +12911,42 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   // Shard centres move out from the middle; shards keep their size, so gaps open between them.
   float grow = 1.0 + uSpread * k;
   vec2 base = floor(p / grow);
-  vec4 col = vec4(uBackground, uBackdropAlpha);
   float top = -1.0;
-  for (int j = -2; j <= 2; j++) {
-    for (int i = -2; i <= 2; i++) {
-      vec2 c = base + vec2(float(i), float(j));
-      vec2 site = shardSite(c);
+  vec2 hitQ = vec2(0.0);
+  float hitA = 0.0;
+  // Every shard that could reach this pixel (of the 5 \xD7 5 cells around, those whose site, wherever it sits
+  // in its cell and however far it is thrown, lands close enough); the one on top (highest h.y) wins.
+  float slack = 0.6 * k + SHARD_REACH;
+  vec2 lo = max(base - 2.0, ceil((p - slack) / grow - 0.85));
+  vec2 hi = min(base + 2.0, floor((p + slack) / grow - 0.15));
+  for (int j = 0; j < 5; j++) {
+    if (lo.y + float(j) > hi.y) break;
+    for (int i = 0; i < 5; i++) {
+      if (lo.x + float(i) > hi.x) break;
+      vec2 c = lo + vec2(float(i), float(j));
       vec2 h = hash22(c + 41.7);
+      if (h.y <= top) continue;
+      vec2 site = shardSite(c);
       vec2 centre = site * grow + (h - 0.5) * 1.2 * k;
+      vec2 rel = p - centre;
+      if (dot(rel, rel) > SHARD_REACH * SHARD_REACH) continue;
       float a = (h.x - 0.5) * 2.0 * uSpin * k;
       // Back to where this pixel would sit in the unbroken image, if it is on this shard.
-      vec2 q = rot(-a) * (p - centre) + site;
-      vec3 s = shardAt(q);
-      if (s.x == c.x && s.y == c.y && h.y > top) {
+      vec2 q = rot(-a) * rel + site;
+      if (onShard(q, c)) {
         top = h.y;
-        vec2 uv = q / uCount * iResolution.y / iResolution.xy + 0.5;
-        vec4 shard = pictureRGBA(uImage, uv);
-        shard.rgb *= 1.0 - 0.35 * k * abs(sin(a));
-        shard.rgb += k * 0.35 * smoothstep(0.06, 0.0, s.z);
-        col = shard;
+        hitQ = q;
+        hitA = a;
       }
     }
   }
+  vec4 col = vec4(uBackground, uBackdropAlpha);
+  if (top > -1.0) {
+    vec2 uv = hitQ / uCount * iResolution.y / iResolution.xy + 0.5;
+    col = pictureRGBA(uImage, uv);
+    col.rgb *= 1.0 - 0.35 * k * abs(sin(hitA));
+    col.rgb += k * 0.35 * smoothstep(0.06, 0.0, shardAt(hitQ).z);
+  }
   fragColor = col;
 }`
   ),
@@ -13036,31 +13391,48 @@ uniform float uSharpness;  // @control min=0.5 max=8 default=4 label="Sharpness"
 uniform float uSaturation; // @control min=0 max=2 default=1.15 label="Saturation"
 ${BACKDROP_CONTROLS}`,
     PICTURE,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+    `// Sums of colour and colour\xB2 over four overlapping squares (down-left, down-right, up-left, up-right),
+// each pixel read once: the shared middle row and column count towards both squares they border.
+// A macro so the image and the test card each get their own loop, rather than every read paying for both.
+#define GATHER(TAP) { \\
+  vec3 c = TAP(uv); \\
+  vec3 cc = c * c; \\
+  m0 = c; m1 = c; m2 = c; m3 = c; \\
+  s0 = cc; s1 = cc; s2 = cc; s3 = cc; \\
+  for (int i = 1; i <= 8; i++) { \\
+    if (i > uRadius) break; \\
+    float o = float(i); \\
+    c = TAP(uv - vec2(o * px.x, 0.0)); cc = c * c; m0 += c; s0 += cc; m2 += c; s2 += cc; \\
+    c = TAP(uv + vec2(o * px.x, 0.0)); cc = c * c; m1 += c; s1 += cc; m3 += c; s3 += cc; \\
+    c = TAP(uv - vec2(0.0, o * px.y)); cc = c * c; m0 += c; s0 += cc; m1 += c; s1 += cc; \\
+    c = TAP(uv + vec2(0.0, o * px.y)); cc = c * c; m2 += c; s2 += cc; m3 += c; s3 += cc; \\
+  } \\
+  for (int j = 1; j <= 8; j++) { \\
+    if (j > uRadius) break; \\
+    for (int i = 1; i <= 8; i++) { \\
+      if (i > uRadius) break; \\
+      vec2 o = vec2(float(i), float(j)) * px; \\
+      c = TAP(uv - o); m0 += c; s0 += c * c; \\
+      c = TAP(uv + vec2(o.x, -o.y)); m1 += c; s1 += c * c; \\
+      c = TAP(uv + vec2(-o.x, o.y)); m2 += c; s2 += c * c; \\
+      c = TAP(uv + o); m3 += c; s3 += c * c; \\
+    } \\
+  } \\
+}
+
+vec3 imageTap(vec2 uv) {
+  return overBackdrop(texture(uImage, uv)).rgb;
+}
+
+vec3 cardTap(vec2 uv) {
+  return testCard(fract(uv));
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   vec2 uv = fragCoord / iResolution.xy;
   vec2 px = 1.0 / iResolution.xy;
-  // Sums of colour and colour\xB2 over four overlapping squares: down-left, down-right, up-left, up-right.
-  vec3 m0 = vec3(0.0), m1 = vec3(0.0), m2 = vec3(0.0), m3 = vec3(0.0);
-  vec3 s0 = vec3(0.0), s1 = vec3(0.0), s2 = vec3(0.0), s3 = vec3(0.0);
-  for (int j = 0; j <= 8; j++) {
-    if (j > uRadius) break;
-    for (int i = 0; i <= 8; i++) {
-      if (i > uRadius) break;
-      vec2 o = vec2(float(i), float(j)) * px;
-      vec3 c = picture(uImage, uv + vec2(-o.x, -o.y));
-      m0 += c;
-      s0 += c * c;
-      c = picture(uImage, uv + vec2(o.x, -o.y));
-      m1 += c;
-      s1 += c * c;
-      c = picture(uImage, uv + vec2(-o.x, o.y));
-      m2 += c;
-      s2 += c * c;
-      c = picture(uImage, uv + o);
-      m3 += c;
-      s3 += c * c;
-    }
-  }
+  vec3 m0, m1, m2, m3, s0, s1, s2, s3;
+  if (textureSize(uImage, 0).x > 1) GATHER(imageTap) else GATHER(cardTap)
   float n = float((uRadius + 1) * (uRadius + 1));
   m0 /= n; m1 /= n; m2 /= n; m3 /= n;
   // Weight each square by how calm (low-variance) it is; sharpness sets how strongly the calmest wins.
@@ -13098,7 +13470,7 @@ var imageTreatments = [
 ];
 
 // src/catalog/shaders/trail.ts
-function trailHelper(dt, speed) {
+function trailHelper(dt, speed, walk = false) {
   return `
 const int TRAIL_POINTS = 32;
 vec2 demoPath(float t) {
@@ -13115,6 +13487,52 @@ vec4 trailPoint(int i, bool demo) {
   const float dt = ${dt.toFixed(5)};
   float t = i == 0 ? iTime : (floor(iTime / dt) + 1.0 - float(i)) * dt;
   return vec4(demoPath(t), t, 1.0);
+}${walk ? `
+${trailWalk(dt, speed)}` : ""}`.trim();
+}
+function trailWalk(dt, speed) {
+  const rates = [1, 2.3, 2, 3.1];
+  const turn = rates.map((r) => r * dt * speed);
+  const vec = (f) => `vec4(${turn.map((x) => f(x).toFixed(8)).join(", ")})`;
+  return `
+bool trailLive(bool demo) {
+  return !demo || (iTrail[0].w > 0.5 && iPointer.z > 0.0);
+}
+vec4 trailAt(int i, bool live) {
+  if (live) return iTrail[i];
+  const float dt = ${dt.toFixed(5)};
+  float t = i == 0 ? iTime : (floor(iTime / dt) + 1.0 - float(i)) * dt;
+  return vec4(demoPath(t), t, 1.0);
+}
+int gWalkI;
+float gWalkBase;
+vec4 gWalkCos;
+vec4 gWalkSin;
+// Starts a walk at point i (1 or more).
+void trailFrom(int i, bool live) {
+  gWalkI = i;
+  if (live) return;
+  const float dt = ${dt.toFixed(5)};
+  gWalkBase = floor(iTime / dt) + 1.0;
+  float s = (gWalkBase - float(i)) * dt * ${speed.toFixed(3)};
+  vec4 phase = vec4(s, s * 2.3 + 1.0, s * 2.0 + 0.4, s * 3.1);
+  gWalkCos = cos(phase);
+  gWalkSin = sin(phase);
+}
+// The walk's next point: as trailAt(i, live) for i = the start, then one more each call.
+vec4 trailNext(bool live) {
+  int i = gWalkI;
+  gWalkI++;
+  if (live) return iTrail[min(i, TRAIL_POINTS - 1)];
+  const float dt = ${dt.toFixed(5)};
+  vec2 q = vec2(0.34 * gWalkSin.x + 0.05 * gWalkSin.y, 0.27 * gWalkSin.z + 0.04 * gWalkCos.w);
+  vec4 point = vec4(iResolution.xy * (0.5 + q), (gWalkBase - float(i)) * dt, 1.0);
+  const vec4 turnCos = ${vec(Math.cos)};
+  const vec4 turnSin = ${vec(Math.sin)};
+  vec4 c = gWalkCos * turnCos + gWalkSin * turnSin;
+  gWalkSin = gWalkSin * turnCos - gWalkCos * turnSin;
+  gWalkCos = c;
+  return point;
 }`.trim();
 }
 var SEGMENT3 = `
@@ -13129,6 +13547,14 @@ vec2 catmull(vec2 p0, vec2 p1, vec2 p2, vec2 p3, float t) {
   float t3 = t2 * t;
   return 0.5 * (2.0 * p1 + (p2 - p0) * t + (2.0 * p0 - 5.0 * p1 + 4.0 * p2 - p3) * t2 + (3.0 * p1 - p0 - 3.0 * p2 + p3) * t3);
 }`.trim();
+var CATMULL_BOX = `
+float trailBoxDist(vec2 p, vec2 p0, vec2 p1, vec2 p2, vec2 p3, float scale) {
+  vec2 c1 = p1 + (p2 - p0) / 6.0;
+  vec2 c2 = p2 - (p3 - p1) / 6.0;
+  vec2 lo = min(min(p1, p2), min(c1, c2)) * scale;
+  vec2 hi = max(max(p1, p2), max(c1, c2)) * scale;
+  return length(max(max(lo - p, p - hi), 0.0));
+}`.trim();
 var GLOW5 = `
 vec4 glow(vec3 c) {
   c = 1.0 - exp(-max(c, 0.0));
@@ -13225,14 +13651,16 @@ uniform float uSpin;      // @control min=0 max=10 default=2 label="Spin"
 uniform float uShine;     // @control min=0 max=1 default=0.7 label="Shine"
 uniform float uLife;      // @control min=0.1 max=3 default=1.1 label="Fade time"
 uniform bool uDemo;       // @control default=true label="Demo when idle"`,
-    trailHelper(1 / 30, 1.5),
+    trailHelper(1 / 30, 1.5, true),
     SEGMENT3,
     CATMULL,
+    CATMULL_BOX,
     `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   float px = 1.0 / iResolution.y;
   vec2 p = fragCoord * px;
-  vec4 a = trailPoint(0, uDemo);
-  vec4 b = trailPoint(1, uDemo);
+  bool live = trailLive(uDemo);
+  vec4 a = trailAt(0, live);
+  vec4 b = trailAt(1, live);
   if (a.w < 0.5 || b.w < 0.5) {
     fragColor = vec4(0.0);
     return;
@@ -13243,14 +13671,16 @@ uniform bool uDemo;       // @control default=true label="Demo when idle"`,
   float bestFace = 1.0;
   float bestV = 0.0;
   float bestFade = 0.0;
+  trailFrom(2, live);
   for (int k = 0; k < TRAIL_POINTS - 1; k++) {
-    b = trailPoint(k + 1, uDemo);
     if (b.w < 0.5 || trailJump(a, b)) break;
-    vec4 c = k + 2 < TRAIL_POINTS ? trailPoint(min(k + 2, TRAIL_POINTS - 1), uDemo) : vec4(0.0);
+    // The point after b: read once, it is the next segment's b.
+    vec4 c = k + 2 < TRAIL_POINTS ? trailNext(live) : vec4(0.0);
     vec2 next = c.w > 0.5 && !trailJump(b, c) ? c.xy : 2.0 * b.xy - a.xy;
     vec2 lo = min(min(prev, a.xy), min(b.xy, next)) * px - uWidth - 2.0 * px;
     vec2 hi = max(max(prev, a.xy), max(b.xy, next)) * px + uWidth + 2.0 * px;
-    if (all(greaterThan(p, lo)) && all(lessThan(p, hi))) {
+    // The ribbon is at most half its width either side of the spline: further off than that, a segment cannot be nearer.
+    if (all(greaterThan(p, lo)) && all(lessThan(p, hi)) && trailBoxDist(p, prev, a.xy, b.xy, next, px) - uWidth * 0.5 < best) {
       vec2 q0 = a.xy * px;
       for (int j = 1; j <= 4; j++) {
         float t1 = float(j) / 4.0;
@@ -13276,6 +13706,7 @@ uniform bool uDemo;       // @control default=true label="Demo when idle"`,
     }
     prev = a.xy;
     a = b;
+    b = c;
   }
   float cover = (1.0 - smoothstep(-px, px, best)) * smoothstep(0.0, 0.15, bestFade);
   if (cover <= 0.0) {
@@ -13320,21 +13751,31 @@ uniform float uTwinkle;   // @control min=0 max=1 default=0.7 label="Twinkle"
 uniform float uIntensity; // @control min=0.2 max=3 default=1.2 label="Intensity"
 uniform bool uDemo;       // @control default=true label="Demo when idle"`,
     HASH,
-    trailHelper(1 / 40, 1.4),
+    trailHelper(1 / 40, 1.4, true),
     GLOW5,
     `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   float px = 1.0 / iResolution.y;
   vec2 p = fragCoord * px;
   vec3 col = vec3(0.0);
+  bool live = trailLive(uDemo);
+  // How far a sparkle's light reaches from where it is (twice its largest size), and its sideways sway.
+  float reach = 2.5 * uSize + px;
+  float side = uSpread + 0.012 + reach;
   // Point 0 is still moving with the pointer, so sparkles come from the settled points after it.
+  trailFrom(1, live);
   for (int k = 1; k < TRAIL_POINTS; k++) {
-    vec4 q = trailPoint(k, uDemo);
+    vec4 q = trailNext(live);
     if (q.w < 0.5) break;
     float age = iTime - q.z;
     if (age < 0.0 || age > uLife) continue;
+    // Skip points none of whose sparkles (spread, swaying and drifting down) can reach this pixel.
+    vec2 rel = p - q.xy * px;
+    float fall = uFall * age * (0.4 + 0.6 * age);
+    if (abs(rel.x) > side || rel.y > uSpread + reach || rel.y < -uSpread - fall - reach) continue;
     float life = age / uLife;
     // Points drop off the end of the trail: fade those about to go.
     float keep = 1.0 - smoothstep(float(TRAIL_POINTS) - 6.0, float(TRAIL_POINTS) - 1.0, float(k));
+    float env = smoothstep(0.0, 0.08, life) * (1.0 - life) * (1.0 - life) * keep;
     for (int j = 0; j < 4; j++) {
       if (j >= uCount) break;
       vec2 h = hash22(vec2(q.z * 61.37 + float(j) * 7.13, float(j) + 0.5));
@@ -13347,13 +13788,12 @@ uniform bool uDemo;       // @control default=true label="Demo when idle"`,
       // Turn some of them a little.
       float an = (h.y - 0.5) * 0.9;
       d = mat2(cos(an), sin(an), -sin(an), cos(an)) * d;
-      float env = smoothstep(0.0, 0.08, life) * (1.0 - life) * (1.0 - life);
       float tw = mix(1.0, 0.35 + 0.65 * (0.5 + 0.5 * sin(age * (12.0 + 12.0 * h.y) + h.x * 6.28318)), uTwinkle);
       float rays = exp(-abs(d.x) / (s * 0.05)) * exp(-abs(d.y) / (s * 0.45));
       rays += exp(-abs(d.y) / (s * 0.05)) * exp(-abs(d.x) / (s * 0.45));
       float core = exp(-dot(d, d) / (s * s * 0.02));
       vec3 tint = h3 < 0.5 ? uColorA : uColorB;
-      col += (tint * (rays * 0.9 + core * 0.6) + vec3(1.0) * core) * env * tw * keep;
+      col += (tint * (rays * 0.9 + core * 0.6) + vec3(1.0) * core) * env * tw;
     }
   }
   fragColor = glow(col * uIntensity);
@@ -13386,7 +13826,7 @@ uniform bool uDemo;       // @control default=true label="Demo when idle"`,
     HASH,
     NOISE,
     FBM,
-    trailHelper(1 / 30, 1.3),
+    trailHelper(1 / 30, 1.3, true),
     SEGMENT3,
     `// The stroke's width at a point from how fast the segment from a to b was drawn: faster, thinner.
 float pressWidth(vec4 a, vec4 b, float px) {
@@ -13397,47 +13837,61 @@ float pressWidth(vec4 a, vec4 b, float px) {
 void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   float px = 1.0 / iResolution.y;
   vec2 p = fragCoord * px;
-  vec4 a = trailPoint(0, uDemo);
-  vec4 b = trailPoint(1, uDemo);
+  bool live = trailLive(uDemo);
+  vec4 a = trailAt(0, live);
+  vec4 b = trailAt(1, live);
   float best = 1e9;
   float bestU = 1.0;
   float bestV = 0.0;
   float bestFade = 0.0;
+  // Ragged edges: the same noise for every segment, so read it once.
+  float rag = 0.9 + 0.2 * vnoise(p * 180.0);
   if (a.w > 0.5 && b.w > 0.5) {
-    float wa = pressWidth(a, b, px);
+    // Faster strokes are thinner, never wider than uWidth: ragged, at most 1.1 \xD7 that from the line.
+    float reach = 1.1 * uWidth;
+    trailFrom(2, live);
     for (int k = 0; k < TRAIL_POINTS - 1; k++) {
-      b = trailPoint(k + 1, uDemo);
       if (b.w < 0.5 || trailJump(a, b)) break;
-      vec4 c = k + 2 < TRAIL_POINTS ? trailPoint(min(k + 2, TRAIL_POINTS - 1), uDemo) : vec4(0.0);
-      if (trailJump(b, c)) c = vec4(0.0);
-      float wb = c.w > 0.5 ? pressWidth(b, c, px) : wa;
-      vec2 s = segment(p, a.xy * px, b.xy * px);
-      float u = (float(k) + s.y) / float(TRAIL_POINTS - 1);
-      float fade = clamp(1.0 - (iTime - mix(a.z, b.z, s.y)) / uLife, 0.0, 1.0);
-      // A rounded start and a tail that thins out.
-      float w = mix(wa, wb, s.y) * (1.0 - 0.6 * smoothstep(0.55, 1.0, u)) * smoothstep(0.0, 0.04, u + 0.01);
-      w *= 0.4 + 0.6 * fade;
-      // Ragged edges.
-      float sd = s.x - w * (0.9 + 0.2 * vnoise(p * 180.0));
-      if (sd < best) {
-        vec2 dir = b.xy - a.xy;
-        float side = dir.x * (p.y - a.y * px) - dir.y * (p.x - a.x * px);
-        best = sd;
-        bestU = u;
-        bestV = clamp(s.x / max(w, 1e-5), 0.0, 1.0) * (side < 0.0 ? -1.0 : 1.0);
-        bestFade = fade;
+      // The point after b: read once, it is the next segment's b.
+      vec4 next = k + 2 < TRAIL_POINTS ? trailNext(live) : vec4(0.0);
+      // A segment whose box is further off than the stroke reaches cannot be nearer than the best so far.
+      vec2 off = max(max(min(a.xy, b.xy) * px - p, p - max(a.xy, b.xy) * px), 0.0);
+      float r = best + reach;
+      if (r > 0.0 && dot(off, off) < r * r) {
+        // The width where the segment starts is from it, where it ends from the next (or the same at the end).
+        float wa = pressWidth(a, b, px);
+        float wb = next.w > 0.5 && !trailJump(b, next) ? pressWidth(b, next, px) : wa;
+        vec2 s = segment(p, a.xy * px, b.xy * px);
+        float u = (float(k) + s.y) / float(TRAIL_POINTS - 1);
+        float fade = clamp(1.0 - (iTime - mix(a.z, b.z, s.y)) / uLife, 0.0, 1.0);
+        // A rounded start and a tail that thins out.
+        float w = mix(wa, wb, s.y) * (1.0 - 0.6 * smoothstep(0.55, 1.0, u)) * smoothstep(0.0, 0.04, u + 0.01);
+        w *= 0.4 + 0.6 * fade;
+        float sd = s.x - w * rag;
+        if (sd < best) {
+          vec2 dir = b.xy - a.xy;
+          float side = dir.x * (p.y - a.y * px) - dir.y * (p.x - a.x * px);
+          best = sd;
+          bestU = u;
+          bestV = clamp(s.x / max(w, 1e-5), 0.0, 1.0) * (side < 0.0 ? -1.0 : 1.0);
+          bestFade = fade;
+        }
       }
       a = b;
-      wa = wb;
+      b = next;
     }
   }
   // Bristles streak along the stroke (they vary across it); the paper's tooth breaks them up.
-  float bristle = 0.6 * vnoise(vec2(bestV * uBristles, 3.7)) + 0.4 * fbm(p * vec2(55.0, 55.0), 3);
-  float dry = uDry * smoothstep(0.15, 1.0, bestU) + 0.35 * uDry * smoothstep(0.6, 1.0, abs(bestV)) + 0.7 * (1.0 - bestFade);
-  float ink = smoothstep(dry - 0.06, dry + 0.06, bristle * 1.1);
-  float cover = (1.0 - smoothstep(-px, px, best)) * ink * smoothstep(0.0, 0.1, bestFade);
-  // Ink pools darker at the edges and thins where a bristle runs dry.
-  vec3 col = uInk * (1.0 + 0.6 * (1.0 - bristle) * (1.0 - abs(bestV))) + 0.04 * (1.0 - bristle);
+  // Away from the stroke nothing shows, so the bristles are not worked out there.
+  float cover = (1.0 - smoothstep(-px, px, best)) * smoothstep(0.0, 0.1, bestFade);
+  vec3 col = uInk;
+  if (cover > 0.0) {
+    float bristle = 0.6 * vnoise(vec2(bestV * uBristles, 3.7)) + 0.4 * fbm(p * vec2(55.0, 55.0), 3);
+    float dry = uDry * smoothstep(0.15, 1.0, bestU) + 0.35 * uDry * smoothstep(0.6, 1.0, abs(bestV)) + 0.7 * (1.0 - bestFade);
+    cover *= smoothstep(dry - 0.06, dry + 0.06, bristle * 1.1);
+    // Ink pools darker at the edges and thins where a bristle runs dry.
+    col = uInk * (1.0 + 0.6 * (1.0 - bristle) * (1.0 - abs(bestV))) + 0.04 * (1.0 - bristle);
+  }
   if (uPaper) {
     vec3 paper = uPaperColor * (0.95 + 0.07 * fbm(p * 9.0, 4)) - 0.03 * smoothstep(0.55, 0.9, vnoise(p * vec2(400.0, 30.0)));
     fragColor = vec4(mix(paper, col, cover * 0.95), 1.0);
@@ -13555,9 +14009,10 @@ uniform float uLife;      // @control min=0.5 max=10 default=4 label="Fade time"
 uniform float uFlicker;   // @control min=0 max=1 default=0.25 label="Flicker"
 uniform bool uDemo;       // @control default=true label="Demo when idle"`,
     HASH,
-    trailHelper(0.05, 1.1),
+    trailHelper(0.05, 1.1, true),
     SEGMENT3,
     CATMULL,
+    CATMULL_BOX,
     `vec3 spectrum(float h) {
   return 0.5 + 0.5 * cos(6.28318 * (h + vec3(0.0, 0.33, 0.67)));
 }
@@ -13570,8 +14025,9 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   vec3 col = uBackground * (1.0 - 0.45 * dot(uv - 0.5, uv - 0.5) * 2.0);
   col += (hash12(fragCoord + fract(iTime) * 113.0) - 0.5) * 0.012;
 
-  vec4 a = trailPoint(0, uDemo);
-  vec4 b = trailPoint(1, uDemo);
+  bool live = trailLive(uDemo);
+  vec4 a = trailAt(0, live);
+  vec4 b = trailAt(1, live);
   if (a.w > 0.5 && b.w > 0.5) {
     float glowR = uWidth * 4.0 * max(uGlow, 0.05);
     float margin = uWidth * 3.0 + glowR * 6.0 + 2.0 * px;
@@ -13580,35 +14036,44 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
     float halo = 0.0;
     float best = 1e9;
     float bestWhen = a.z;
+    trailFrom(2, live);
     for (int k = 0; k < TRAIL_POINTS - 1; k++) {
-      b = trailPoint(k + 1, uDemo);
       if (b.w < 0.5) break;
       // Earlier strokes stay lit, but the jump between strokes is not drawn.
       bool jump = trailJump(a, b);
-      vec4 c = k + 2 < TRAIL_POINTS ? trailPoint(min(k + 2, TRAIL_POINTS - 1), uDemo) : vec4(0.0);
+      // The point after b: read once, it is the next segment's b.
+      vec4 c = k + 2 < TRAIL_POINTS ? trailNext(live) : vec4(0.0);
       vec2 next = c.w > 0.5 && !trailJump(b, c) ? c.xy : 2.0 * b.xy - a.xy;
       vec2 lo = min(min(prev, a.xy), min(b.xy, next)) * px - margin;
       vec2 hi = max(max(prev, a.xy), max(b.xy, next)) * px + margin;
       if (!jump && all(greaterThan(p, lo)) && all(lessThan(p, hi))) {
-        vec2 q0 = a.xy * px;
-        for (int j = 1; j <= 4; j++) {
-          vec2 q1 = catmull(prev, a.xy, b.xy, next, float(j) / 4.0) * px;
-          vec2 s = segment(p, q0, q1);
-          float when = mix(a.z, b.z, (float(j - 1) + s.y) / 4.0);
-          float fade = clamp(1.0 - (iTime - when) / uLife, 0.0, 1.0);
-          fade *= fade;
-          float d = s.x;
-          core = max(core, exp(-d * d / (uWidth * uWidth)) * fade);
-          halo = max(halo, exp(-d / glowR) * fade);
-          if (d < best) {
-            best = d;
-            bestWhen = when;
+        // Nothing on the segment is brighter than its newer end: skip it when it can be neither nearer
+        // nor brighter than what is found.
+        float dmin = trailBoxDist(p, prev, a.xy, b.xy, next, px);
+        float top = clamp(1.0 - (iTime - max(a.z, b.z)) / uLife, 0.0, 1.0);
+        top *= top;
+        if (dmin < best || exp(-dmin / glowR) * top > halo || exp(-dmin * dmin / (uWidth * uWidth)) * top > core) {
+          vec2 q0 = a.xy * px;
+          for (int j = 1; j <= 4; j++) {
+            vec2 q1 = catmull(prev, a.xy, b.xy, next, float(j) / 4.0) * px;
+            vec2 s = segment(p, q0, q1);
+            float when = mix(a.z, b.z, (float(j - 1) + s.y) / 4.0);
+            float fade = clamp(1.0 - (iTime - when) / uLife, 0.0, 1.0);
+            fade *= fade;
+            float d = s.x;
+            core = max(core, exp(-d * d / (uWidth * uWidth)) * fade);
+            halo = max(halo, exp(-d / glowR) * fade);
+            if (d < best) {
+              best = d;
+              bestWhen = when;
+            }
+            q0 = q1;
           }
-          q0 = q1;
         }
       }
       prev = jump ? 2.0 * b.xy - next : a.xy;
       a = b;
+      b = c;
     }
     // Colour from when the light passed, so each part keeps its colour as it fades.
     vec3 tint = spectrum(uHue + bestWhen * uCycle);
@@ -13657,6 +14122,16 @@ vec4 clickAt(int i, bool demo, float period) {
   vec2 h = hash22(vec2(k * 1.37 + 0.5, 3.7));
   return vec4((0.2 + 0.6 * h) * iResolution.xy, k * period, 1.0);
 }`.trim();
+var CORNER_HASHES = `
+vec4 cornerHashes(vec2 i) {
+  vec2 x = fract(vec2(i.x, i.x + 1.0) * 0.1031);
+  vec2 y = fract(vec2(i.y, i.y + 1.0) * 0.1031);
+  vec4 X = x.xyxy;
+  vec4 Y = y.xxyy;
+  vec4 d = X * (Y + 33.33) + Y * (X + 33.33) + X * (X + 33.33);
+  vec4 px = X + d;
+  return fract((px + (Y + d)) * px);
+}`.trim();
 var flowParticles = {
   kind: "shader",
   id: "flow-particles",
@@ -13679,19 +14154,25 @@ uniform vec3 uFast;         // @control color default=#7CFFE0 label="Fast colour
 uniform vec3 uBackground;   // @control color default=#04060E label="Background"
 uniform bool uTransparent;  // @control default=false label="Transparent"`,
     HASH,
-    NOISE,
+    CORNER_HASHES,
     GLOW6,
-    `float potential(vec2 p, float t) {
-  return vnoise(p + vec2(t, -0.6 * t)) + uTurbulence * 0.5 * vnoise(p * 2.3 - vec2(0.7 * t, t) + 9.1);
+    `// The gradient of vnoise, worked out exactly (its value is not needed here).
+vec2 vnoiseGrad(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  vec2 du = 6.0 * f * (1.0 - f);
+  vec4 h = cornerHashes(i);
+  float k = h.x - h.y - h.z + h.w;
+  return du * vec2(h.y - h.x + k * u.y, h.z - h.x + k * u.x);
 }
 
-// The curl of the potential (divergence free, so streams swirl rather than pool), plus a gentle drift.
+// The curl of the potential vnoise(p + vec2(t, -0.6 t)) + turbulence * 0.5 * vnoise(p * 2.3 - vec2(0.7 t, t) + 9.1)
+// (divergence free, so streams swirl rather than pool), plus a gentle drift.
 vec2 flow(vec2 p, float t) {
-  const float e = 0.01;
-  float c = potential(p, t);
-  float dx = potential(p + vec2(e, 0.0), t) - c;
-  float dy = potential(p + vec2(0.0, e), t) - c;
-  return vec2(dy, -dx) / e + vec2(0.35, 0.08);
+  vec2 g = vnoiseGrad(p + vec2(t, -0.6 * t));
+  if (uTurbulence > 0.0) g += uTurbulence * 1.15 * vnoiseGrad(p * 2.3 - vec2(0.7 * t, t) + 9.1);
+  return vec2(g.y, -g.x) + vec2(0.35, 0.08);
 }
 
 void mainImage(out vec4 fragColor, in vec2 fragCoord) {
@@ -13701,22 +14182,38 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   float ft = iTime * uSpeed * 0.04;
   float tail = max(uTail * float(STEPS), 1.0);
   vec3 col = vec3(0.0);
+  // The walk stays a few steps in each cell, so its particle is worked out once per cell.
+  vec2 cellAt = vec2(-1e9);
+  bool alive = false;
+  float life = 0.0;
+  vec2 at = vec2(0.0);
+  vec2 v = vec2(0.0);
+  float sp = 0.0;
   for (int k = 0; k < STEPS; k++) {
-    vec2 v = flow(q * uScale, ft);
-    float sp = length(v);
+    // The field barely turns over a step, so it is looked up every other step.
+    if ((k & 1) == 0) {
+      v = flow(q * uScale, ft);
+      sp = length(v);
+    }
     // One particle per cell at most; each life starts somewhere new in the cell.
     vec2 c = floor(q * uDensity);
-    float h0 = hash12(c + 0.31);
-    float phase = iTime * uSpeed * (0.3 + 0.3 * h0) + hash12(c + 7.7);
-    float life = fract(phase);
-    float cyc = floor(phase);
-    if (hash12(c * 1.7 + cyc * 3.1) < uAmount) {
-      vec2 hd = hash22(c + cyc * 17.13);
-      float d = length(q - (c + 0.25 + 0.5 * hd) * cell) / cell;
-      float spot = exp(-d * d * 14.0);
-      // This pixel lies k steps downstream of the particle's start; its head is "head" steps along.
-      float behind = life * float(STEPS) - float(k);
-      if (spot > 0.01 && behind >= 0.0 && behind < tail) {
+    if (c != cellAt) {
+      cellAt = c;
+      float h0 = hash12(c + 0.31);
+      float phase = iTime * uSpeed * (0.3 + 0.3 * h0) + hash12(c + 7.7);
+      life = fract(phase);
+      float cyc = floor(phase);
+      alive = hash12(c * 1.7 + cyc * 3.1) < uAmount;
+      if (alive) at = (c + 0.25 + 0.5 * hash22(c + cyc * 17.13)) * cell;
+    }
+    // This pixel lies k steps downstream of the particle's start; its head is "head" steps along.
+    float behind = life * float(STEPS) - float(k);
+    if (alive && behind >= 0.0 && behind < tail) {
+      vec2 dq = (q - at) / cell;
+      float d2 = dot(dq, dq);
+      // exp(-14 d^2) > 0.01
+      if (d2 < 0.329) {
+        float spot = exp(-d2 * 14.0);
         float w = 1.0 - behind / tail;
         float fade = smoothstep(0.0, 0.08, life) * (1.0 - smoothstep(0.75, 1.0, life));
         vec3 hue = mix(uSlow, uFast, smoothstep(0.3, 2.2, sp));
@@ -13984,12 +14481,40 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   float t = iTime * uSpeed * 0.5;
   float len = 0.018 * uSize;
   float cover = 0.0;
+  // A bird is within its formation offset, jitter and size of the line between the two flocks
+  // it is moving between, so first find which pairs of flocks pass near this pixel (bit a * 4 + b).
+  float groups = float(uGroups);
+  vec2 flocks[4];
+  for (int g = 0; g < 4; g++) flocks[g] = flockAt(float(g), t, aspect);
+  float margin = 1.89 * uSpread + 0.036 * uJitter + 2.04 * len + 2.0 * px;
+  int near = 0;
+  for (int a = 0; a < 4; a++) {
+    if (a >= uGroups) break;
+    for (int b = 0; b < 4; b++) {
+      if (b >= uGroups) break;
+      vec2 pa = p - flocks[a];
+      vec2 ba = flocks[b] - flocks[a];
+      vec2 off = pa - ba * clamp(dot(pa, ba) / max(dot(ba, ba), 1e-8), 0.0, 1.0);
+      if (dot(off, off) < margin * margin) near |= 1 << (a * 4 + b);
+    }
+  }
   for (int i = 0; i < 120; i++) {
-    if (i >= uCount) break;
+    if (near == 0 || i >= uCount) break;
     float fi = float(i);
+    // birdAt, with the flock centres looked up and far birds dropped before the rest of the work.
+    vec2 h = hash22(vec2(fi, 3.1));
+    float sw = t * 0.06 * (0.6 + 0.8 * h.y) + h.x * 10.0;
+    float k = floor(sw);
+    int ga = int(floor(hash12(vec2(fi, k)) * groups));
+    float glide = smoothstep(0.6, 1.0, fract(sw));
+    int gb = glide > 0.0 ? int(floor(hash12(vec2(fi, k + 1.0)) * groups)) : ga;
+    if ((near & (1 << (ga * 4 + gb))) == 0) continue;
+    vec2 o = (hash22(vec2(fi, 8.3)) - 0.5) * 2.0 * uSpread;
+    o.x *= 1.6;
+    vec2 jitter = uJitter * 0.025 * vec2(sin(t * (1.1 + h.x) + fi), cos(t * (1.3 + h.y) + fi * 1.7));
+    vec2 pos = mix(flocks[ga], flocks[gb], glide) + o + jitter;
     float scale = 0.7 + 0.5 * hash12(vec2(fi, 6.6));
     float l = len * scale;
-    vec2 pos = birdAt(fi, t, aspect);
     vec2 dp = p - pos;
     if (abs(dp.x) > l * 1.2 || abs(dp.y) > l * 1.2) continue;
     vec2 v = pos - birdAt(fi, t - 0.03, aspect);
@@ -14048,7 +14573,7 @@ uniform float uDensity;      // @control min=40 max=240 default=120 step=1 label
 uniform float uScatter;      // @control min=0.1 max=1.5 default=0.4 label="Scatter distance"
 uniform float uDirection;    // @control min=-180 max=180 default=20 label="Drift direction"`,
     HASH,
-    NOISE,
+    CORNER_HASHES,
     `// The text image's alpha at frame point p (height 1, centred), the image contained in uSize of the frame.
 float letters(vec2 p) {
   vec2 size = vec2(textureSize(uText, 0));
@@ -14060,6 +14585,15 @@ float letters(vec2 p) {
   return texture(uText, uv).a;
 }
 
+// Half the size of the text's box in the frame (letters is 0 outside it).
+vec2 lettersHalf() {
+  vec2 size = vec2(textureSize(uText, 0));
+  float aspect = size.x / max(size.y, 1.0);
+  float frame = iResolution.x / iResolution.y;
+  float h = min(uSize, frame * uSize / aspect);
+  return 0.5 * vec2(h * aspect, h);
+}
+
 // How far through dissolving the particle at home is (0 in place, 1 gone): left to right, then back together.
 float scattered(vec2 home, float phase) {
   float frame = iResolution.x / iResolution.y;
@@ -14070,16 +14604,40 @@ float scattered(vec2 home, float phase) {
   return a * a * (3.0 - 2.0 * a);
 }
 
+// vnoise, keeping the corner hashes of the lattice cell it last looked in: the wind is smooth and
+// its lattice coarse, so most lookups land in the same cell as the one before.
+vec2 eddyCellA = vec2(-1e9);
+vec2 eddyCellB = vec2(-1e9);
+vec4 eddyHashA = vec4(0.0);
+vec4 eddyHashB = vec4(0.0);
+
+float eddy(vec2 p, inout vec2 cellAt, inout vec4 h) {
+  vec2 i = floor(p);
+  if (i != cellAt) {
+    cellAt = i;
+    h = cornerHashes(i);
+  }
+  vec2 f = fract(p);
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  return mix(mix(h.x, h.y, u.x), mix(h.z, h.w, u.x), u.y);
+}
+
+// Group g's gust: its wind (xy) and how much it lifts what it carries (z).
+vec3 gustOf(float g) {
+  float ang = radians(uDirection) + (fract(g * 0.618) - 0.5) * 1.2;
+  return vec3(vec2(cos(ang), sin(ang)) * (0.3 + 0.18 * g), 0.3 * (0.5 + 0.2 * g));
+}
+
 // Where the wind has carried a particle of group g from home: smooth in home, so it can be inverted.
 // Each of the six groups rides its own gust (speed, heading and eddies), so they spread apart.
-vec2 carried(vec2 home, float phase, float g) {
+vec2 carried(vec2 home, float phase, float g, vec3 gust) {
   float a = scattered(home, phase);
-  float ang = radians(uDirection) + (fract(g * 0.618) - 0.5) * 1.2;
-  vec2 wind = vec2(cos(ang), sin(ang)) * (0.3 + 0.18 * g);
+  // Still at home (most of the frame, most of the time): no need for the eddies.
+  if (a <= 0.0) return vec2(0.0);
   float t = phase * 3.0;
   vec2 q = home * 3.0 + g * 5.3;
-  vec2 swirl = vec2(vnoise(q + vec2(t, 0.0)), vnoise(q + vec2(4.7, t))) - 0.5;
-  return a * uScatter * (wind + swirl * 0.8 + vec2(0.0, 0.3 * a * (0.5 + 0.2 * g)));
+  vec2 swirl = vec2(eddy(q + vec2(t, 0.0), eddyCellA, eddyHashA), eddy(q + vec2(4.7, t), eddyCellB, eddyHashB)) - 0.5;
+  return a * uScatter * (gust.xy + swirl * 0.8 + vec2(0.0, gust.z * a));
 }
 
 void mainImage(out vec4 fragColor, in vec2 fragCoord) {
@@ -14093,22 +14651,28 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   vec3 col = uColor;
   float cover = solid;
 
+  // Every particle is home outside this part of the loop.
+  bool moving = phase > 0.12 && phase < 0.94;
+  vec2 box = lettersHalf() + 2.0 * cell;
   for (int gi = 0; gi < 6; gi++) {
+    if (!moving) break;
     float g = float(gi);
+    vec3 gust = gustOf(g);
     // Trace back to the home a particle of this group here would have come from, then search the cells round it.
     vec2 home = p;
-    for (int i = 0; i < 4; i++) home = p - carried(home, phase, g);
+    for (int i = 0; i < 4; i++) home = p - carried(home, phase, g, gust);
+    // The cells searched are all off the text.
+    if (any(greaterThan(abs(home), box))) continue;
     vec2 base = floor(home / cell);
     for (int y = -1; y <= 1; y++) {
       for (int x = -1; x <= 1; x++) {
         vec2 c = base + vec2(float(x), float(y));
         if (floor(hash12(c + 0.73) * 6.0) != g) continue;
         vec2 hc = (c + 0.5) * cell;
-        if (letters(hc) < 0.5) continue;
         float a = scattered(hc, phase);
-        if (a < 0.002) continue;
+        if (a < 0.002 || letters(hc) < 0.5) continue;
         vec2 j = hash22(c);
-        vec2 pos = hc + carried(hc, phase, g) + (j - 0.5) * cell * 1.1 * a;
+        vec2 pos = hc + carried(hc, phase, g, gust) + (j - 0.5) * cell * 1.1 * a;
         float r = cell * (0.5 - 0.1 * a) * (0.75 + 0.5 * j.x);
         float d = length(p - pos);
         float disc = (1.0 - smoothstep(r - px, r + px * 0.5, d)) * (1.0 - smoothstep(0.6, 1.0, a) * 0.6 * j.y);
@@ -14166,14 +14730,32 @@ vec4 blast(vec4 acc, vec2 p, vec2 origin, float angle, float spread, float speed
   float e = (1.0 - exp(-k * age)) / k;
   float fade = 1.0 - smoothstep(LIFE - 1.0, LIFE, age);
   float reach = 0.03 * uSize;
+  // Every piece is within its sway and the spread of fall speeds of the fan its launch sweeps out
+  // (speeds 0.5 to 1 times speed, within spread of angle, all dropped by the middle fall speed),
+  // so skip the blast where this pixel is clear of that.
+  float drop = 0.16 * uFall * (age - e);
+  vec2 rel = p - origin + vec2(0.0, drop);
+  float slack = reach * 1.42 + 0.035 + 0.3 * drop + px;
+  float r = length(rel);
+  float far = speed * e;
+  if (r > far + slack || r < 0.5 * far - slack) return acc;
+  if (spread < 6.2 && r > slack) {
+    float off = abs(mod(atan(rel.y, rel.x) - angle + 3.14159265, 6.28318531) - 3.14159265);
+    if (off > spread * 0.5 + asin(slack / r) + 0.01) return acc;
+  }
   for (int j = 0; j < 80; j++) {
     if (j >= count) break;
     float fj = float(j);
     vec2 h = hash22(vec2(fj * 7.13 + 1.0, seed));
+    float launch = speed * (0.5 + 0.5 * h.y);
+    // The same tests for this piece before working out the rest of it: how far out, then where.
+    if (abs(r - launch * e) > slack) continue;
+    float a = angle + (h.x - 0.5) * spread;
+    vec2 v0 = vec2(cos(a), sin(a)) * launch;
+    vec2 dv = rel - v0 * e;
+    if (abs(dv.x) > reach + 0.035 || abs(dv.y) > reach + 0.3 * drop) continue;
     vec2 h2 = hash22(h * 53.1 + seed);
     float h3 = hash12(h2 * 17.7 + fj);
-    float a = angle + (h.x - 0.5) * spread;
-    vec2 v0 = vec2(cos(a), sin(a)) * speed * (0.5 + 0.5 * h.y);
     float fall = 0.16 * uFall * (0.7 + 0.6 * h2.x);
     vec2 pos = origin + v0 * e - vec2(0.0, fall * (age - e));
     pos.x += 0.035 * sin(age * (2.0 + 2.0 * h2.y) + h.x * 6.28) * smoothstep(0.3, 1.2, age);
@@ -14586,18 +15168,6 @@ vec3 shardOf(vec2 q) {
   return vec3(sid, ring, edge);
 }
 
-// A shard's middle, which it turns about, and how far it reaches from there.
-vec3 shardCentre(float sid, float ring) {
-  float a0 = spoke(sid);
-  float a1 = spoke(sid + 1.0);
-  float mid = 0.5 * (a0 + a1);
-  float inner = ring > 0.0 ? ringAt(sid, ring) : 0.0;
-  float outer = ring + 1.0 < float(RINGS) ? ringAt(sid, ring + 1.0) : inner * uGrowth;
-  float rc = ring > 0.0 ? 0.5 * (inner + outer) : 0.66 * outer;
-  float reach = length(vec2(max(outer - rc, rc - inner), outer * tan(0.5 * (a1 - a0))));
-  return vec3(vec2(cos(mid), sin(mid)) * rc, reach + 0.01);
-}
-
 // When a shard lets go: the middle first, the outer pane last.
 float release(float sid, float ring) {
   return 0.3 + 0.16 * ring + 0.25 * hash12(vec2(sid, ring + 9.0));
@@ -14619,33 +15189,109 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   vec4 col = vec4(uBackground, 1.0);
 
   // Shards that have let go, falling and spinning: the first to fall is in front.
+  // A ring at a time: the rings all of whose shards are too far from this pixel, wherever they are
+  // in their fall, are passed over whole; later rings let go later, so once one is not yet falling
+  // (or would be behind what is already here) neither are the rest.
   float best = 1e3;
   vec4 hit = vec4(0.0);
   vec2 hitCentre = vec2(0.0);
-  for (int s = 0; s < 16; s++) {
-    if (s >= uSpokes) break;
-    for (int j = 0; j < RINGS; j++) {
-      float sid = float(s);
-      float ring = float(j);
+  float n = float(uSpokes);
+  float spreadMax = tan(min(0.8 * TAU / n, 1.5));
+  for (int j = 0; j < RINGS; j++) {
+    float ring = float(j);
+    float firstGo = 0.3 + 0.16 * ring;
+    float dtHi = age - firstGo;
+    if (dtHi <= 0.0 || firstGo >= best) break;
+    float dtLo = max(dtHi - 0.25, 0.0);
+    // Bounds on this ring's shards: how far out their middles are, how far they reach, how far they have drifted and dropped.
+    float span = uScale * pow(uGrowth, ring);
+    float lo = j > 0 ? span / uGrowth : 0.0;
+    float rcLo = j > 0 ? 0.425 * (lo + span) : 0.561 * span;
+    float rcHi = j > 0 ? 0.575 * (lo + span) : 0.759 * span;
+    float radial = j > 0 ? 0.5 * max(1.15 * span - 0.85 * lo, 1.15 * lo - 0.85 * span) : rcHi;
+    float reachMax = length(vec2(radial, 1.15 * span * spreadMax)) + 0.02;
+    float rMin = rcLo + 0.05 * (1.0 - exp(-0.6 * dtLo)) / 0.6 / (1.0 + ring) - reachMax - 0.01;
+    float rMax = rcHi + 0.2 * (1.0 - exp(-0.6 * dtHi)) / 0.6 / (1.0 + ring) + reachMax + 0.01;
+    float yA = ballistic(vec2(0.0, 0.08), 0.6, uGravity, dtLo).y;
+    float yB = ballistic(vec2(0.0, 0.08), 0.6, uGravity, dtHi).y;
+    float yLo = min(yA, yB) - 0.02;
+    float yHi = max(yA, yB) + 0.02;
+    float dNear = length(vec2(q.x, q.y - clamp(q.y, yLo, yHi)));
+    float dFar = max(length(q - vec2(0.0, yLo)), length(q - vec2(0.0, yHi)));
+    if (dFar < rMin || dNear > rMax) continue;
+    // And of its shards, only those whose sector points (near enough) at this pixel from where the impact point has dropped to:
+    // each sector's middle lies 0.2\u20130.8 of the way round its share of the circle.
+    float first = 0.0;
+    float count = n;
+    float slack = reachMax + 0.01;
+    if (dNear > slack) {
+      vec2 na = normalize(q - vec2(0.0, yLo));
+      vec2 nb = normalize(q - vec2(0.0, yHi));
+      float w = 0.5 * acos(clamp(dot(na, nb), -1.0, 1.0)) + asin(slack / dNear);
+      vec2 bisect = na + nb;
+      float toward = atan(bisect.y, bisect.x) / (TAU / n);
+      w /= TAU / n;
+      first = ceil(toward - w - 0.8);
+      count = min(floor(toward + w - 0.2) - first + 1.0, n);
+    }
+    for (int k = 0; k < 16; k++) {
+      if (float(k) >= count) break;
+      float sid = mod(first + float(k), n);
       float tr = release(sid, ring);
       float dt = age - tr;
       if (dt <= 0.0 || tr >= best) continue;
+      // How far it has drifted (along e) and dropped since it let go: ballistic(), split so the drop can be used first.
+      float e = (1.0 - exp(-0.6 * dt)) / 0.6;
+      // Seen from where the impact point has dropped to by now, too near or far, or not in this sector's direction.
+      vec2 dropped = q - vec2(0.0, 0.08 * e - uGravity / 0.6 * (dt - e));
+      float far = length(dropped);
+      if (far < rMin || far > rMax) continue;
+      // Its two cracks, the direction halfway between them and tan of half the angle they make.
+      float a0 = spoke(sid);
+      float a1 = spoke(sid + 1.0);
+      vec2 d0 = vec2(cos(a0), sin(a0));
+      vec2 d1 = vec2(cos(a1), sin(a1));
+      vec2 dir = normalize(d0 + d1);
+      float spread = (d0.x * d1.y - d0.y * d1.x) / (1.0 + dot(d0, d1));
+      // Not pointing (near enough) this way: further off its middle than any of its corners could be.
+      float near = length(vec2(radial, 1.15 * span * spread)) + 0.03;
+      if (far > near && dot(dropped, dir) < sqrt(far * far - near * near)) continue;
+      // Its middle, which it turns about, and how far it reaches from there (ringAt, with the ring's scale worked out above).
+      float inner = j > 0 ? lo * (0.85 + 0.3 * hash12(vec2(sid, ring + 0.5))) : 0.0;
+      float outer = j + 1 < RINGS ? span * (0.85 + 0.3 * hash12(vec2(sid, ring + 1.5))) : inner * uGrowth;
+      float rc = j > 0 ? 0.5 * (inner + outer) : 0.66 * outer;
+      float reach = length(vec2(max(outer - rc, rc - inner), outer * spread)) + 0.01;
+      vec2 cen = dir * rc;
       vec2 h = hash22(vec2(sid, ring) + 17.3);
-      vec3 cen = shardCentre(sid, ring);
-      vec2 v0 = normalize(cen.xy + 1e-4) * (0.05 + 0.15 * h.x) / (1.0 + ring) + vec2(0.0, 0.08);
-      vec2 rel = q - cen.xy - ballistic(v0, 0.6, uGravity, dt);
-      if (length(rel) > cen.z) continue;
+      vec2 rel = dropped - cen - normalize(cen + 1e-4) * (0.05 + 0.15 * h.x) / (1.0 + ring) * e;
+      if (dot(rel, rel) > reach * reach) continue;
       float ang = (h.y - 0.5) * 2.0 * uSpin * dt;
       // It also turns about its own axis, narrowing and catching the light.
       float tilt = cos(dt * (0.6 + 1.2 * h.x) * uSpin);
       vec2 local = rot(-ang) * rel;
       local.x /= sign(tilt) * max(abs(tilt), 0.05);
-      vec2 orig = cen.xy + local;
-      vec3 sh = shardOf(orig);
-      if (sh.x != sid || sh.y != ring) continue;
+      vec2 orig = cen + local;
+      // Back on the pane, is that point inside this shard: between its two cracks and its two rings?
+      float side0 = d0.x * orig.y - d0.y * orig.x;
+      float side1 = d1.x * orig.y - d1.y * orig.x;
+      float d = dot(orig, dir);
+      float rim = j + 1 < RINGS ? outer : 1e3;
+      if (side0 < 0.0 || side1 >= 0.0 || d >= rim) continue;
+      // Past every ring inside it (they are a little ragged, so not only the nearest).
+      bool past = true;
+      for (int i = 1; i < RINGS; i++) {
+        if (i > j) break;
+        if (d < ringAt(sid, float(i))) {
+          past = false;
+          break;
+        }
+      }
+      if (!past) continue;
+      float edge = min(rim - d, min(abs(side0), abs(side1)));
+      if (j > 0) edge = min(edge, d - inner);
       best = tr;
-      hit = vec4(orig, tilt, sh.z);
-      hitCentre = cen.xy;
+      hit = vec4(orig, tilt, edge);
+      hitCentre = cen;
     }
   }
 
@@ -15127,6 +15773,14 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
       float b = now - float(k);
       float a = e - b * BATCH;
       if (a < 0.0 || a > LIFE) continue;
+      // Where its grains came from, give or take the turbulence: skip the batch unless that is in
+      // the shape and in the slab of it this batch was taken from (see batchOf).
+      vec2 from = (p - vec2(dirX * uWind * (0.15 * a + 0.55 * a * a), 0.05 * a + 0.03 * a * a) - origin) / vec2(shapeW, shapeH);
+      vec2 sway = uTurbulence * a * vec2(0.04, 0.11) / vec2(shapeW, shapeH) + 1e-3;
+      if (uFromRight) from.x = 1.0 - from.x;
+      float slabLo = max((b * BATCH - 0.775) / 1.5, 0.0);
+      float slabHi = min(((b + 1.0) * BATCH - 0.125) / 1.5, 1.0);
+      if (from.x + sway.x < slabLo || from.x - sway.x > slabHi || from.y + sway.y < 0.0 || from.y - sway.y > 1.0) continue;
       // Back from where a grain is to where it came from.
       vec2 s = p - blown(a, p);
       s = p - blown(a, s);
@@ -16052,71 +16706,2188 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
 };
 var comicShaders = [comicBook, celShade, focusLines, actionLines, transitionComicPanels];
 
-// src/catalog/types.ts
-var EFFECT_CATEGORIES = [
-  "gradient",
-  "organic",
-  "pattern",
-  "light",
-  "space",
-  "retro",
-  "image",
-  "overlay",
-  "text",
-  "morph",
-  "interaction",
-  "pyrotechnics",
-  "timewarp",
-  "melt",
-  "electric",
-  "splatter",
-  "bubble",
-  "sticker",
-  "trail",
-  "particles",
-  "debris",
-  "impact",
-  "comic",
-  "transition",
-  "loader",
-  "data",
-  "icon"
-];
-var VIDEO_USES = ["filter", "transition", "interactive", "stills", "none"];
-var VECTOR_CONTROL_TYPES = ["float", "int", "bool", "color", "text"];
-var PLACEHOLDER = /\{\{\s*([A-Za-z_]\w*)\s*(?::\s*([A-Za-z0-9]*)([^}]*))?\}\}/g;
-function motionStrings(motion) {
-  const out = [];
-  const walk = (v) => {
-    if (typeof v === "string") out.push(v);
-    else if (Array.isArray(v)) v.forEach(walk);
-    else if (v && typeof v === "object") Object.values(v).forEach(walk);
-  };
-  walk(motion);
-  return out;
+// src/catalog/shaders/atmosphere.ts
+var NOISE_3D = `
+float hash13(vec3 p3) {
+  p3 = fract(p3 * 0.1031);
+  p3 += dot(p3, p3.zyx + 31.32);
+  return fract((p3.x + p3.y) * p3.z);
 }
-function vectorControls(motion) {
-  const controls = [];
-  const seen = /* @__PURE__ */ new Set();
-  for (const text of motionStrings(motion)) {
-    for (const [, name, type, attributes] of text.matchAll(PLACEHOLDER)) {
-      if (type === void 0 || seen.has(name) || !VECTOR_CONTROL_TYPES.includes(type)) continue;
-      seen.add(name);
-      const colour = type === "color";
-      controls.push(controlFromDeclaration(name, colour ? "vec3" : type, `${attributes}${colour ? " color" : ""}`, controls.length + 1));
-    }
-  }
-  return controls;
+float vnoise3(vec3 p) {
+  vec3 i = floor(p);
+  vec3 f = fract(p);
+  vec3 u = f * f * (3.0 - 2.0 * f);
+  float a = mix(hash13(i), hash13(i + vec3(1.0, 0.0, 0.0)), u.x);
+  float b = mix(hash13(i + vec3(0.0, 1.0, 0.0)), hash13(i + vec3(1.0, 1.0, 0.0)), u.x);
+  float c = mix(hash13(i + vec3(0.0, 0.0, 1.0)), hash13(i + vec3(1.0, 0.0, 1.0)), u.x);
+  float d = mix(hash13(i + vec3(0.0, 1.0, 1.0)), hash13(i + vec3(1.0, 1.0, 1.0)), u.x);
+  return mix(mix(a, b, u.y), mix(c, d, u.y), u.z);
 }
-function vectorEffectControls(effect) {
-  const declared = vectorControls(effect.motion);
-  const names = new Set(declared.map((c) => c.name));
-  const listed = (effect.controls ?? []).filter((c) => !names.has(c.name));
-  return [...declared, ...listed.map((c, i) => vectorControlDef(c, declared.length + i + 1))];
+float fbm3(vec3 p, int octaves) {
+  float sum = 0.0;
+  float amp = 0.5;
+  for (int i = 0; i < 6; i++) {
+    if (i >= octaves) break;
+    sum += amp * vnoise3(p);
+    p = p * 2.03 + vec3(11.7, 3.1, 7.9);
+    amp *= 0.5;
+  }
+  return sum;
+}`.trim();
+var OVER10 = `
+vec4 over(vec4 acc, vec3 c, float a) {
+  return vec4(acc.rgb * (1.0 - a) + c * a, acc.a * (1.0 - a) + a);
 }
-function vectorControlIssues(motion) {
-  const issues = [];
-  const declarations = /* @__PURE__ */ new Map();
+vec4 unpremultiply(vec4 acc) {
+  return vec4(acc.rgb / max(acc.a, 1e-4), acc.a);
+}`.trim();
+var volumetricClouds = {
+  kind: "shader",
+  id: "volumetric-clouds",
+  name: "Volumetric clouds",
+  description: "A ray-marched layer of soft, self-shadowed clouds drifting overhead, rimmed with a silver lining toward the sun.",
+  category: "atmosphere",
+  tags: ["atmosphere", "clouds", "sky", "background", "3d", "weather"],
+  source: glsl(
+    `// Volumetric clouds: a cloud slab ray-marched with fbm density and a short march toward the sun.
+uniform vec3 uSkyTop;       // @control color default=#3A78C9 label="Sky (top)"
+uniform vec3 uSkyHorizon;   // @control color default=#B8D8F2 label="Sky (horizon)"
+uniform vec3 uCloudColor;   // @control color default=#FFFFFF label="Cloud colour"
+uniform vec3 uShadowColor;  // @control color default=#5E6F8A label="Shadow colour"
+uniform vec3 uSunColor;     // @control color default=#FFF3DC label="Sun colour"
+uniform float uSunAzimuth;  // @control min=-3.1416 max=3.1416 default=0.4 label="Sun direction"
+uniform float uSunHeight;   // @control min=0 max=1.5 default=0.35 label="Sun height"
+uniform float uCoverage;    // @control min=0 max=1 default=0.5 label="Coverage"
+uniform float uDensity;     // @control min=0.1 max=3 default=1 label="Density"
+uniform float uSpeed;       // @control min=0 max=3 default=0.6 label="Drift speed"`,
+    NOISE_3D,
+    `const float BOTTOM = 1.5;
+const float TOP = 3.2;
+
+// The noise's lattice cell last used, and its eight corner hashes. Successive
+// samples along a ray (and toward the sun) mostly fall in the same cell of the
+// coarse octaves, so they reuse its hashes instead of hashing it again.
+struct Cell {
+  vec3 id;
+  vec4 lo;
+  vec4 hi;
+};
+
+Cell noCell() {
+  return Cell(vec3(1e9), vec4(0.0), vec4(0.0));
+}
+
+// vnoise3(p), with its corners taken from the cell when p is still in it.
+float cellNoise(vec3 p, inout Cell c) {
+  vec3 i = floor(p);
+  if (i != c.id) {
+    c.id = i;
+    c.lo = vec4(hash13(i), hash13(i + vec3(1.0, 0.0, 0.0)), hash13(i + vec3(0.0, 1.0, 0.0)), hash13(i + vec3(1.0, 1.0, 0.0)));
+    c.hi = vec4(hash13(i + vec3(0.0, 0.0, 1.0)), hash13(i + vec3(1.0, 0.0, 1.0)), hash13(i + vec3(0.0, 1.0, 1.0)), hash13(i + vec3(1.0, 1.0, 1.0)));
+  }
+  vec3 f = fract(p);
+  vec3 u = f * f * (3.0 - 2.0 * f);
+  float a = mix(c.lo.x, c.lo.y, u.x);
+  float b = mix(c.lo.z, c.lo.w, u.x);
+  float cc = mix(c.hi.x, c.hi.y, u.x);
+  float d = mix(c.hi.z, c.hi.w, u.x);
+  return mix(mix(a, b, u.y), mix(cc, d, u.y), u.z);
+}
+
+// fbm3(p, octaves) for three octaves or more, the first three through cells c0, c1 and c2.
+float cloudNoise(vec3 p, int octaves, inout Cell c0, inout Cell c1, inout Cell c2) {
+  float sum = 0.5 * cellNoise(p, c0);
+  p = p * 2.03 + vec3(11.7, 3.1, 7.9);
+  sum += 0.25 * cellNoise(p, c1);
+  p = p * 2.03 + vec3(11.7, 3.1, 7.9);
+  sum += 0.125 * cellNoise(p, c2);
+  p = p * 2.03 + vec3(11.7, 3.1, 7.9);
+  float amp = 0.0625;
+  for (int i = 3; i < 6; i++) {
+    if (i >= octaves) break;
+    sum += amp * vnoise3(p);
+    p = p * 2.03 + vec3(11.7, 3.1, 7.9);
+    amp *= 0.5;
+  }
+  return sum;
+}
+
+// The cloud's density at p from its noise to the given octaves; rest stands in
+// for the octaves left out (their average), so the cloud keeps its mass.
+float cloudDensity(vec3 p, int octaves, float rest, inout Cell c0, inout Cell c1, inout Cell c2) {
+  float h = clamp((p.y - BOTTOM) / (TOP - BOTTOM), 0.0, 1.0);
+  // Rounded tops and flat-ish bases.
+  float shape = smoothstep(0.0, 0.15, h) * (1.0 - smoothstep(0.45, 1.0, h));
+  // Outside the slab there's no cloud, whatever the noise.
+  if (shape <= 0.0) return 0.0;
+  vec3 q = p * 0.42 + vec3(iTime * uSpeed * 0.12, 0.0, iTime * uSpeed * 0.05);
+  float n = cloudNoise(q, octaves, c0, c1, c2) + rest;
+  return clamp((n - (1.0 - uCoverage) * 0.75) * 3.0 * shape, 0.0, 1.0) * uDensity;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
+  vec3 rd = normalize(vec3(p.x, p.y + 0.28, 1.0));
+  vec3 sun = normalize(vec3(sin(uSunAzimuth), uSunHeight, cos(uSunAzimuth)));
+  float mu = dot(rd, sun);
+
+  vec3 sky = mix(uSkyHorizon, uSkyTop, pow(clamp(rd.y, 0.0, 1.0), 0.6));
+  sky += uSunColor * (pow(max(mu, 0.0), 600.0) * 2.0 + pow(max(mu, 0.0), 12.0) * 0.25);
+  if (rd.y < 0.0) sky = mix(uSkyHorizon, uShadowColor, clamp(-rd.y * 4.0, 0.0, 0.6));
+
+  vec3 col = vec3(0.0);
+  float trans = 1.0;
+  if (rd.y > 0.02) {
+    float t0 = BOTTOM / rd.y;
+    float t1 = min(TOP / rd.y, t0 + 14.0);
+    // Steps of about 0.35 (as long as a ray toward the horizon takes in 40), so
+    // short, steep rays take fewer: between 28 and 40 (fewer shows the jitter as grain).
+    float steps = clamp(ceil((t1 - t0) / 0.35), 28.0, 40.0);
+    float dt = (t1 - t0) / steps;
+    float t = t0 + dt * fract(sin(dot(fragCoord, vec2(12.9898, 78.233))) * 43758.5453);
+    // Henyey-Greenstein: a forward lobe for the silver lining plus a soft back lobe.
+    float g = 0.65;
+    float hg = (1.0 - g * g) / pow(1.0 + g * g - 2.0 * g * mu, 1.5) / 12.566;
+    float phase = mix(0.08, hg * 4.0, 0.7);
+    // Noise cells along the ray (m) and toward the sun (l).
+    Cell m0 = noCell();
+    Cell m1 = noCell();
+    Cell m2 = noCell();
+    Cell l0 = noCell();
+    Cell l1 = noCell();
+    Cell l2 = noCell();
+    for (int i = 0; i < 40; i++) {
+      if (trans < 0.02 || t > 60.0 || float(i) >= steps) break;
+      vec3 pos = rd * t;
+      // Fine detail where it shows: five octaves near and in front, fewer once
+      // the cloud in front hides most of this sample, three far away.
+      int oct = t < 18.0 ? (trans > 0.5 ? 5 : trans > 0.15 ? 4 : 3) : 3;
+      float rest = t < 18.0 ? 0.5 * (exp2(-float(oct)) - exp2(-5.0)) : 0.0;
+      float d = cloudDensity(pos, oct, rest, m0, m1, m2);
+      if (d > 0.01) {
+        // Light march toward the sun for self-shadowing: the cloud between 0.11 and
+        // 0.99 toward it, sampled at the middles of its two halves.
+        float shade = 0.0;
+        for (int j = 0; j < 2; j++) shade += 2.0 * cloudDensity(pos + sun * (0.33 + 0.44 * float(j)), 3, 0.0, l0, l1, l2);
+        float light = exp(-shade * 1.4);
+        float powder = 1.0 - exp(-d * 4.0);
+        vec3 lit = mix(uShadowColor, uCloudColor, light) + uSunColor * light * powder * phase * 2.5;
+        float a = 1.0 - exp(-d * dt * 2.2);
+        col += trans * a * lit;
+        trans *= 1.0 - a;
+      }
+      t += dt;
+    }
+    // Far clouds fade into the horizon haze.
+    float haze = exp(-max(t0 - 4.0, 0.0) * 0.06);
+    col = mix(sky * (1.0 - trans), col, haze);
+  }
+  fragColor = vec4(sky * trans + col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Midday", values: { uSunHeight: 1.2, uCoverage: 0.45, uDensity: 0.9 } },
+    {
+      name: "Sunset",
+      values: {
+        uSkyTop: [0.24, 0.27, 0.52],
+        uSkyHorizon: [1, 0.62, 0.38],
+        uCloudColor: [1, 0.78, 0.6],
+        uShadowColor: [0.36, 0.25, 0.38],
+        uSunColor: [1, 0.55, 0.25],
+        uSunAzimuth: 0,
+        uSunHeight: 0.08,
+        uCoverage: 0.5
+      }
+    },
+    {
+      name: "Storm",
+      values: {
+        uSkyTop: [0.22, 0.25, 0.3],
+        uSkyHorizon: [0.45, 0.48, 0.52],
+        uCloudColor: [0.62, 0.65, 0.7],
+        uShadowColor: [0.12, 0.13, 0.17],
+        uSunColor: [0.75, 0.8, 0.9],
+        uCoverage: 0.85,
+        uDensity: 2.2,
+        uSpeed: 1.8
+      }
+    }
+  ]
+};
+var fogBanks = {
+  kind: "shader",
+  id: "fog-banks",
+  name: "Fog banks",
+  description: "Horizontal banks of fog drifting at different depths and speeds, thickest near the ground, to lay over any scene.",
+  category: "atmosphere",
+  tags: ["atmosphere", "fog", "overlay", "moody", "weather"],
+  transparent: true,
+  source: glsl(
+    `// Fog banks: layered bands of fbm fog sliding sideways, near ones lower, faster and denser.
+uniform vec3 uColor;      // @control color default=#DCE3EA label="Colour"
+uniform float uDensity;   // @control min=0 max=1.5 default=0.8 label="Density"
+uniform float uHeight;    // @control min=0.1 max=1 default=0.55 label="Height"
+uniform float uSpeed;     // @control min=0 max=3 default=1 label="Speed"
+uniform int uLayers;      // @control min=1 max=6 default=4 label="Layers"`,
+    HASH,
+    NOISE,
+    FBM,
+    OVER10,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = fragCoord / iResolution.y;
+  float y = fragCoord.y / iResolution.y;
+  vec4 acc = vec4(0.0);
+  // Far layers first (high on screen, slow, thin), near layers painted over them.
+  for (int i = 0; i < 6; i++) {
+    if (i >= uLayers) break;
+    float fi = float(i);
+    float near = (fi + 1.0) / float(uLayers);
+    float centre = uHeight * mix(0.85, 0.12, near);
+    float thick = uHeight * mix(0.12, 0.3, near);
+    float band = exp(-pow((y - centre) / thick, 2.0));
+    band = max(band, step(y, centre) * mix(0.3, 1.0, near));
+    float scale = mix(1.2, 2.6, near);
+    vec2 q = vec2(p.x * scale + iTime * uSpeed * mix(0.015, 0.08, near) + fi * 7.3, p.y * scale * 3.0 + fi * 2.1);
+    float n = fbm(q + 0.6 * vec2(fbm(q * 0.7 - iTime * 0.02, 3), 0.0), 5);
+    float a = smoothstep(0.3, 0.8, n) * band * uDensity * mix(0.35, 0.8, near);
+    // Ground haze: everything thickens toward the bottom.
+    a = clamp(a + (1.0 - smoothstep(0.0, uHeight * 0.4, y)) * 0.12 * uDensity * near, 0.0, 1.0);
+    vec3 c = uColor * mix(0.85, 1.0, n);
+    acc = over(acc, c, a);
+  }
+  fragColor = unpremultiply(acc);
+}`
+  ),
+  presets: [
+    { name: "Valley morning", values: { uColor: [0.96, 0.93, 0.88], uDensity: 0.7, uHeight: 0.45, uSpeed: 0.6 } },
+    { name: "Moor", values: { uColor: [0.66, 0.72, 0.75], uDensity: 1.2, uHeight: 0.8, uSpeed: 1.4, uLayers: 6 } }
+  ]
+};
+var risingSteam = {
+  kind: "shader",
+  id: "rising-steam",
+  name: "Rising steam",
+  description: "Wisps of steam curling up from a cup or vent, thinning and fading as they rise.",
+  category: "atmosphere",
+  tags: ["atmosphere", "steam", "overlay", "coffee", "warm"],
+  transparent: true,
+  source: glsl(
+    `// Rising steam: stretched noise wisps advected upward from a source, swaying and dissolving.
+uniform vec2 uSource;      // @control min=-1 max=1 default=0,-0.6 label="Source"
+uniform vec3 uColor;       // @control color default=#FFFFFF label="Colour"
+uniform float uWidth;      // @control min=0.02 max=0.6 default=0.12 label="Width"
+uniform float uHeight;     // @control min=0.2 max=1.5 default=0.8 label="Height"
+uniform float uSpeed;      // @control min=0 max=3 default=1 label="Speed"
+uniform float uTurbulence; // @control min=0 max=2 default=0.8 label="Curl"
+uniform float uOpacity;    // @control min=0 max=1 default=0.7 label="Opacity"`,
+    HASH,
+    NOISE,
+    FBM,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
+  float aspect = iResolution.x / iResolution.y;
+  vec2 src = uSource * vec2(aspect, 1.0) * 0.5;
+  vec2 q = p - src;
+  float h = q.y / uHeight;
+  if (h < -0.05 || h > 1.2) { fragColor = vec4(uColor, 0.0); return; }
+  float hc = clamp(h, 0.0, 1.0);
+  float t = iTime * uSpeed;
+  // The plume widens and sways more as it rises.
+  float w = uWidth * (0.6 + 1.6 * hc);
+  float sway = (sin(q.y * 5.0 - t * 1.1) * 0.5 + sin(q.y * 9.0 - t * 1.7 + 1.3) * 0.3) * uTurbulence * 0.06 * hc;
+  vec2 flow = vec2(q.x, q.y - t * 0.25);
+  vec2 warp = vec2(fbm(flow * 3.0 + vec2(0.0, -t * 0.2), 4), fbm(flow * 3.0 + vec2(5.2, 1.3), 4)) - 0.5;
+  float x = (q.x - sway + warp.x * uTurbulence * 0.25 * hc) / w;
+  // Wisps: noise stretched along the rise, so it reads as strands.
+  vec2 sq = vec2(x * 2.2, (q.y - t * 0.3) / uHeight * 1.6) + warp * uTurbulence * 1.5;
+  float strands = fbm(sq * vec2(1.0, 0.45), 5);
+  float body = exp(-x * x * 1.6);
+  float wisp = smoothstep(0.42, 0.75, strands + 0.25 * body);
+  float a = wisp * body;
+  // Born at the source, thinning and fading as it rises.
+  a *= smoothstep(-0.05, 0.12, h) * (1.0 - smoothstep(0.35, 1.05, h));
+  a *= mix(1.0, 0.55, hc);
+  fragColor = vec4(uColor, clamp(a * uOpacity * 1.4, 0.0, 1.0));
+}`
+  ),
+  presets: [
+    { name: "Coffee cup", values: { uSource: [0, -0.5], uWidth: 0.08, uHeight: 0.6, uSpeed: 0.7, uTurbulence: 1, uOpacity: 0.55 } },
+    { name: "Vent", values: { uSource: [0, -1], uWidth: 0.3, uHeight: 1.3, uSpeed: 1.4, uTurbulence: 0.6, uOpacity: 0.8 } },
+    { name: "Kettle burst", values: { uSource: [-0.4, -0.3], uWidth: 0.05, uHeight: 1.1, uSpeed: 2.6, uTurbulence: 1.8, uOpacity: 0.95 } }
+  ]
+};
+var mistOverImage = {
+  kind: "shader",
+  id: "mist-over-image",
+  name: "Mist over image",
+  description: "Slow mist drifting over a picture, thickest low down and in the distance, with light softly scattering through it.",
+  category: "atmosphere",
+  video: "filter",
+  tags: ["atmosphere", "mist", "image", "fog", "moody", "photo"],
+  source: glsl(
+    `// Mist over image: drifting fbm haze over a picture, weighted to the ground and the horizon, with a soft bloom.
+uniform sampler2D uImage;   // @control filter=linear wrap=mirror default=${SAMPLE_IMAGES.landscape} label="Image"
+uniform vec3 uMistColor;    // @control color default=#E4EAF0 label="Mist colour"
+uniform float uDensity;     // @control min=0 max=1 default=0.6 label="Density"
+uniform float uHorizon;     // @control min=0 max=1 default=0.4 label="Horizon"
+uniform float uGround;      // @control min=0 max=1 default=0.6 label="Ground mist"
+uniform float uScatter;     // @control min=0 max=1.5 default=0.6 label="Light scatter"
+uniform float uSpeed;       // @control min=0 max=3 default=1 label="Drift speed"
+${BACKDROP_CONTROLS}`,
+    PICTURE,
+    HASH,
+    NOISE,
+    FBM,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec4 pic = pictureRGBA(uImage, uv);
+  float aspect = iResolution.x / iResolution.y;
+  float t = iTime * uSpeed;
+
+  // Depth proxy: hazier toward the horizon (far away) and right at the bottom (ground mist).
+  float far = exp(-pow((uv.y - uHorizon) / 0.18, 2.0));
+  float ground = (1.0 - smoothstep(0.0, 0.45, uv.y)) * uGround;
+  vec2 q = vec2(uv.x * aspect, uv.y);
+  float n1 = fbm(vec2(q.x * 2.0 - t * 0.04, q.y * 6.0) + 3.0, 5);
+  float n2 = fbm(vec2(q.x * 3.5 + t * 0.025, q.y * 9.0 - t * 0.01) + 11.0, 4);
+  float drift = smoothstep(0.25, 0.8, 0.6 * n1 + 0.4 * n2);
+  float mist = clamp((far * 0.7 + ground) * mix(0.45, 1.25, drift) + 0.12, 0.0, 1.0) * uDensity;
+
+  // Soft scattering: bright parts of the picture bleed into the mist around them.
+  vec3 glow = vec3(0.0);
+  for (int i = 0; i < 8; i++) {
+    float a = float(i) * 0.785398 + 0.4;
+    vec2 o = vec2(cos(a), sin(a) * aspect) * 0.035;
+    vec3 s = picture(uImage, uv + o);
+    vec3 s2 = picture(uImage, uv + o * 2.4);
+    glow += max(s - 0.55, 0.0) + max(s2 - 0.55, 0.0) * 0.6;
+  }
+  glow /= 8.0;
+  vec3 haze = uMistColor + glow * uScatter * 1.6;
+  // Mist lifts the blacks and washes out the colour behind it.
+  vec3 col = mix(pic.rgb, haze, mist);
+  col += glow * uScatter * 0.5 * (1.0 - mist);
+  fragColor = vec4(col, pic.a);
+}`
+  ),
+  presets: [
+    { name: "Dawn", values: { uMistColor: [1, 0.9, 0.8], uDensity: 0.7, uScatter: 1.1, uGround: 0.7 } },
+    { name: "Cold valley", values: { uMistColor: [0.78, 0.84, 0.9], uDensity: 0.85, uHorizon: 0.5, uScatter: 0.3, uSpeed: 0.6 } }
+  ]
+};
+var skyTimelapse = {
+  kind: "shader",
+  id: "sky-timelapse",
+  name: "Sky timelapse",
+  description: "A timelapse sky: layers of clouds racing over at different speeds as the light turns from day to golden hour and back.",
+  category: "atmosphere",
+  tags: ["atmosphere", "clouds", "sky", "background", "timelapse"],
+  source: glsl(
+    `// Sky timelapse: parallax cloud layers on perspective planes, under a sky cycling through the day.
+uniform vec3 uDayTop;       // @control color default=#2F6FD0 label="Day sky (top)"
+uniform vec3 uDayHorizon;   // @control color default=#A9D3F5 label="Day sky (horizon)"
+uniform vec3 uGoldTop;      // @control color default=#3E3A7A label="Golden sky (top)"
+uniform vec3 uGoldHorizon;  // @control color default=#FFA45C label="Golden sky (horizon)"
+uniform float uSpeed;       // @control min=0 max=4 default=1.5 label="Cloud speed"
+uniform float uCycle;       // @control min=0 max=1 default=0.08 label="Day cycle speed"
+uniform float uCoverage;    // @control min=0 max=1 default=0.5 label="Coverage"
+uniform int uLayers;        // @control min=1 max=4 default=3 label="Layers"`,
+    HASH,
+    NOISE,
+    FBM,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  float x = (fragCoord.x - 0.5 * iResolution.x) / iResolution.y;
+  float y = uv.y;
+  // 0 at midday, 1 at golden hour.
+  float gold = 0.5 - 0.5 * cos(iTime * uCycle * 6.28318);
+  vec3 top = mix(uDayTop, uGoldTop, gold);
+  vec3 horizon = mix(uDayHorizon, uGoldHorizon, gold);
+  vec3 sky = mix(horizon, top, pow(y, 0.7));
+  vec2 sunPos = vec2(0.35, mix(0.85, 0.08, gold));
+  float sd = length(vec2(x, y) - sunPos);
+  vec3 sunCol = mix(vec3(1.0, 0.97, 0.9), vec3(1.0, 0.6, 0.3), gold);
+  sky += sunCol * (smoothstep(0.045, 0.04, sd) + exp(-sd * 6.0) * 0.35);
+
+  vec3 litDay = vec3(1.0);
+  vec3 litGold = vec3(1.0, 0.72, 0.5);
+  vec3 shadowDay = vec3(0.6, 0.66, 0.76);
+  vec3 shadowGold = vec3(0.42, 0.3, 0.42);
+  vec3 col = sky;
+  // Layer 0 is the highest: farthest, smallest-looking and slowest across the screen.
+  for (int i = 0; i < 4; i++) {
+    if (i >= uLayers) break;
+    float fi = float(i);
+    float alt = mix(2.4, 0.7, fi / 3.0);
+    float z = alt / (y + 0.12);
+    vec2 plane = vec2(x * z, z);
+    plane += vec2(iTime * uSpeed * 0.35, iTime * uSpeed * 0.12) + fi * 13.1;
+    float scale = mix(0.9, 0.5, fi / 3.0);
+    vec2 cq = plane * scale;
+    int oct = z > 8.0 ? 3 : 5;
+    float n = fbm(cq, oct);
+    float cover = mix(0.75, 0.35, uCoverage);
+    float a = smoothstep(cover, cover + 0.22, n);
+    // Toward the sun: a lighter side; a sample offset sunward darkens bellies.
+    float n2 = fbm(cq + vec2(0.08, 0.12), oct);
+    float shade = clamp(0.5 + (n - n2) * 6.0, 0.0, 1.0);
+    vec3 lit = mix(litDay, litGold, gold);
+    vec3 shadow = mix(shadowDay, shadowGold, gold) * mix(1.0, 0.8, fi / 3.0);
+    vec3 cc = mix(shadow, lit, shade);
+    cc += sunCol * exp(-sd * 3.0) * 0.4 * (1.0 - a);
+    // Clouds dissolve into the horizon haze.
+    a *= smoothstep(0.0, 0.25, y);
+    col = mix(col, mix(cc, horizon, exp(-y * 8.0) * 0.6), a);
+  }
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Fair weather", values: { uSpeed: 1.2, uCoverage: 0.35, uCycle: 0.05 } },
+    { name: "Racing clouds", values: { uSpeed: 3.5, uCoverage: 0.65, uCycle: 0.15, uLayers: 4 } }
+  ]
+};
+var smokeCurl = {
+  kind: "shader",
+  id: "smoke-curl",
+  name: "Smoke curl",
+  description: "A thin thread of incense or cigarette smoke rising smooth and straight, then breaking into curls and turbulence.",
+  category: "atmosphere",
+  tags: ["atmosphere", "smoke", "incense", "overlay", "elegant", "moody"],
+  transparent: true,
+  source: glsl(
+    `// Smoke curl: a laminar filament whose path and strands are warped more the higher it rises.
+uniform vec2 uSource;      // @control min=-1 max=1 default=0,-0.85 label="Source"
+uniform vec3 uColor;       // @control color default=#D9DEE6 label="Colour"
+uniform float uHeight;     // @control min=0.3 max=1.6 default=1.1 label="Height"
+uniform float uBreakup;    // @control min=0 max=1 default=0.35 label="Breakup height"
+uniform float uTurbulence; // @control min=0 max=2 default=1 label="Turbulence"
+uniform float uSpeed;      // @control min=0 max=3 default=1 label="Speed"
+uniform float uThickness;  // @control min=0.3 max=3 default=1 label="Thickness"
+uniform float uOpacity;    // @control min=0 max=1 default=0.85 label="Opacity"`,
+    HASH,
+    NOISE,
+    FBM,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
+  float px = 1.0 / iResolution.y;
+  float aspect = iResolution.x / iResolution.y;
+  vec2 src = uSource * vec2(aspect, 1.0) * 0.5;
+  vec2 q = p - src;
+  float h = q.y / uHeight;
+  if (h < -0.02 || h > 1.15) { fragColor = vec4(uColor, 0.0); return; }
+  float hc = clamp(h, 0.0, 1.0);
+  float t = iTime * uSpeed;
+  // 0 while the stream is laminar, rising to 1 where it has broken up.
+  float turb = smoothstep(uBreakup - 0.05, uBreakup + 0.45, hc) * uTurbulence;
+
+  // Advected warp: noise carried up with the smoke, swirling the filament into curls.
+  vec2 fq = vec2(q.x * 4.0, q.y * 3.0 - t * 0.6);
+  vec2 warp = vec2(fbm(fq, 4), fbm(fq + vec2(4.7, 1.9), 4)) - 0.5;
+  vec2 warp2 = vec2(fbm(fq * 2.3 + warp * 2.0, 3), fbm(fq * 2.3 + vec2(2.1, 8.4) - warp * 2.0, 3)) - 0.5;
+  vec2 w = q + (warp * 0.18 + warp2 * 0.08) * turb * (0.4 + hc);
+
+  // The base path: a gentle sway low down, more after the breakup.
+  float sway = 0.012 * sin(q.y * 7.0 - t * 1.2) * hc + turb * 0.05 * sin(q.y * 4.0 - t * 0.9 + 1.7);
+  float a = 0.0;
+  for (int i = 0; i < 3; i++) {
+    float fi = float(i);
+    // The strands start as one and peel apart above the breakup.
+    float split = (fi - 1.0) * turb * 0.035 * hc * (1.0 + sin(w.y * 6.0 + fi * 2.3 - t * 0.7));
+    float d = abs(w.x - sway - split);
+    float width = (mix(0.0015, 0.016, hc) + turb * 0.008 * hc) * uThickness + px * 0.75;
+    float strand = exp(-d * d / (width * width));
+    a += strand * (fi == 1.0 ? 1.0 : turb * 0.6);
+  }
+  // A faint diffuse veil around the curls, and dissolving gaps higher up.
+  float veil = smoothstep(0.45, 0.8, fbm(w * 6.0 + vec2(0.0, -t * 0.4), 4)) * turb * 0.25 * hc;
+  a = a * mix(1.0, 0.5, hc) + veil;
+  float gaps = mix(1.0, smoothstep(0.25, 0.6, fbm(w * 3.0 + vec2(1.3, -t * 0.5), 3)), hc * min(turb, 1.0));
+  a *= gaps;
+  a *= smoothstep(-0.02, 0.01, h) * (1.0 - smoothstep(0.6, 1.1, h));
+  fragColor = vec4(uColor, clamp(a * uOpacity, 0.0, 1.0));
+}`
+  ),
+  presets: [
+    { name: "Incense", values: { uColor: [0.86, 0.88, 0.92], uBreakup: 0.45, uTurbulence: 0.8, uSpeed: 0.7, uThickness: 0.8 } },
+    { name: "Draughty room", values: { uBreakup: 0.15, uTurbulence: 1.8, uSpeed: 1.4, uThickness: 1.3 } }
+  ]
+};
+var dryIceFog = {
+  kind: "shader",
+  id: "dry-ice-fog",
+  name: "Dry ice fog",
+  description: "Dense, low stage fog rolling along the floor and spilling over the edge in a slow, tumbling curtain.",
+  category: "atmosphere",
+  tags: ["atmosphere", "fog", "overlay", "stage", "spooky", "concert"],
+  transparent: true,
+  source: glsl(
+    `// Dry ice fog: rolling fbm fog hugging a floor, pouring over its edge and pooling below.
+uniform vec3 uColor;       // @control color default=#EEF2F7 label="Colour"
+uniform float uFloor;      // @control min=0 max=0.8 default=0.38 label="Floor height"
+uniform float uEdge;       // @control min=0 max=1.2 default=0.68 label="Edge position"
+uniform float uDepth;      // @control min=0.03 max=0.5 default=0.14 label="Fog depth"
+uniform float uDensity;    // @control min=0 max=1.5 default=1 label="Density"
+uniform float uSpeed;      // @control min=0 max=3 default=1 label="Flow speed"
+uniform float uTurbulence; // @control min=0 max=2 default=1 label="Turbulence"`,
+    HASH,
+    NOISE,
+    FBM,
+    `float rolling(vec2 q, float t) {
+  vec2 warp = vec2(fbm(q * 0.8 + vec2(-t * 0.3, t * 0.1), 4), fbm(q * 0.8 + vec2(3.1, -t * 0.2), 4)) - 0.5;
+  return fbm(q + warp * 2.2 * uTurbulence, 5);
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  float aspect = iResolution.x / iResolution.y;
+  float x = uv.x;
+  float y = uv.y;
+  float t = iTime * uSpeed;
+  float a = 0.0;
+
+  // On the stage: a dense layer above the floor, billowing higher in places, soft at the top.
+  float stage = 1.0 - smoothstep(uEdge - 0.04, uEdge + 0.01, x);
+  float n = 0.5;
+  if (stage > 0.0) {
+    float hy = (y - uFloor) / uDepth;
+    n = rolling(vec2(x * aspect * 3.0 - t * 0.35, max(hy, 0.0) * 0.9 + t * 0.05), t);
+    float d = n * 1.5 + 0.15 - max(hy, 0.0) * 0.8 - max(-hy, 0.0) * 2.5;
+    a = max(a, smoothstep(0.0, 0.7, d) * stage);
+  }
+  // Over the edge: a curtain falling in an arc, widening as it drops, pooling on the ground.
+  if (x > uEdge - 0.04) {
+    float dx = max(x - uEdge, 0.0) * aspect;
+    float fall = uFloor - dx * dx * 6.0 - dx * 0.4;
+    float spread = uDepth * (0.5 + 2.0 * max(uFloor - fall, 0.0));
+    float off = (y - fall) / spread;
+    float nc = rolling(vec2(dx * 4.0 + off * 0.3, y * 3.0 + t * 0.6), t);
+    float curtain = smoothstep(0.0, 0.7, nc * 1.5 + 0.1 - abs(off) * 0.9) * smoothstep(uEdge - 0.04, uEdge, x);
+    curtain *= 1.0 - smoothstep(uDepth * 0.5, uDepth * 1.5, y - uFloor);
+    float np = rolling(vec2(x * aspect * 3.0 - t * 0.2, y / uDepth * 0.8), t);
+    float pool = smoothstep(0.0, 0.7, np * 1.5 + 0.1 - y / (uDepth * 0.8) * 0.8) * smoothstep(uEdge, uEdge + 0.1, x);
+    float spill = max(curtain, pool * 0.85);
+    if (spill > a) n = mix(n, x > uEdge + 0.05 ? max(nc, np) : nc, 0.5);
+    a = max(a, spill);
+  }
+  a = clamp(a * uDensity, 0.0, 1.0);
+  // Denser billows catch more light; thin edges fall slightly into shadow.
+  vec3 c = uColor * mix(0.8, 1.05, smoothstep(0.3, 0.75, n));
+  fragColor = vec4(c, a);
+}`
+  ),
+  presets: [
+    { name: "Concert stage", values: { uFloor: 0.25, uEdge: 1.2, uDepth: 0.2, uDensity: 1.2, uSpeed: 0.8 } },
+    { name: "Haunted ledge", values: { uColor: [0.72, 0.9, 0.82], uFloor: 0.5, uEdge: 0.55, uDepth: 0.1, uTurbulence: 1.6 } }
+  ]
+};
+var atmosphereShaders = [
+  volumetricClouds,
+  fogBanks,
+  risingSteam,
+  mistOverImage,
+  skyTimelapse,
+  smokeCurl,
+  dryIceFog
+];
+
+// src/catalog/shaders/glow.ts
+var GLOW7 = `
+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 MASK = `
+vec3 gKeyColour;
+float gKeyTolerance;
+
+// The colour in the picture's top-left corner: the ground to key out.
+void setKey(float tolerance) {
+  gKeyTolerance = tolerance;
+  vec4 c = textureLod(uMask, vec2(0.01, 0.99), 0.0);
+  gKeyColour = c.rgb / max(c.a, 1e-3);
+}
+
+// Where frame point p falls in the picture (xy) and texels per frame unit (z).
+vec3 maskPlace(vec2 p) {
+  vec2 size = vec2(textureSize(uMask, 0));
+  float aspect = size.x / size.y;
+  float h = min(uSize, iResolution.x / iResolution.y * uSize / aspect);
+  return vec3(p / vec2(h * aspect, h) + 0.5, size.y / h);
+}
+
+float shapeAt(vec2 p, float blur) {
+  if (textureSize(uMask, 0).x <= 1) {
+    float d = length(p) - 0.3 * uSize;
+    return clamp(0.5 - d / max(blur, 0.004), 0.0, 1.0);
+  }
+  vec3 m = maskPlace(p);
+  if (m.x < 0.0 || m.x > 1.0 || m.y < 0.0 || m.y > 1.0) return 0.0;
+  vec4 c = textureLod(uMask, m.xy, log2(max(blur * m.z, 1.0)));
+  float a = c.a;
+  if (gKeyTolerance > 0.0) {
+    float away = distance(c.rgb / max(c.a, 1e-3), gKeyColour);
+    a *= smoothstep(gKeyTolerance, gKeyTolerance + 0.12, away);
+  }
+  return a;
+}
+
+float coverage(vec2 p, float radius) {
+  float sum = 0.0;
+  for (int i = 0; i < 16; i++) {
+    float r = radius * sqrt((float(i) + 0.5) / 16.0);
+    float a = float(i) * 2.39996;
+    sum += shapeAt(p + r * vec2(cos(a), sin(a)), radius * 0.4);
+  }
+  return sum / 16.0;
+}`.trim();
+function goldenTaps(n11) {
+  const taps = Array.from({ length: n11 }, (_, i) => {
+    const r = Math.sqrt((i + 0.5) / n11);
+    const a = i * 2.39996;
+    return `vec2(${(r * Math.cos(a)).toFixed(5)}, ${(r * Math.sin(a)).toFixed(5)})`;
+  });
+  return `const vec2 GOLDEN${n11}[${n11}] = vec2[${n11}](${taps.join(", ")});`;
+}
+function coverageTaps(name, n11, blur) {
+  return `
+${goldenTaps(n11)}
+float ${name}(vec2 p, float radius) {
+  float sum = 0.0;
+  if (gMaskPlace.w < 0.5) {
+    for (int i = 0; i < ${n11}; i++) sum += shapeAt(p + radius * GOLDEN${n11}[i], radius * ${blur.toFixed(2)});
+  } else {
+    float lod = log2(max(radius * ${blur.toFixed(2)} * gMaskPlace.z, 1.0));
+    for (int i = 0; i < ${n11}; i++) sum += shapeLod(p + radius * GOLDEN${n11}[i], lod);
+  }
+  return sum / ${n11}.0;
+}`.trim();
+}
+var LITE_TAPS = 10;
+var MASK_FAST = `
+vec3 gKeyColour;
+float gKeyTolerance;
+// Picture units per frame unit (xy), texels per frame unit (z), 1 with a picture (w).
+vec4 gMaskPlace;
+
+// The colour in the picture's top-left corner: the ground to key out; and where the picture sits.
+void setKey(float tolerance) {
+  gKeyTolerance = tolerance;
+  vec4 c = textureLod(uMask, vec2(0.01, 0.99), 0.0);
+  gKeyColour = c.rgb / max(c.a, 1e-3);
+  vec2 size = vec2(textureSize(uMask, 0));
+  float aspect = size.x / size.y;
+  float h = min(uSize, iResolution.x / iResolution.y * uSize / aspect);
+  gMaskPlace = vec4(1.0 / (h * aspect), 1.0 / h, size.y / h, size.x > 1.0 ? 1.0 : 0.0);
+}
+
+// Where frame point p falls in the picture (xy) and texels per frame unit (z).
+vec3 maskPlace(vec2 p) {
+  return vec3(p * gMaskPlace.xy + 0.5, gMaskPlace.z);
+}
+
+// The picture's coverage at p read at mip level lod (needs a picture).
+float shapeLod(vec2 p, float lod) {
+  vec2 uv = p * gMaskPlace.xy + 0.5;
+  if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) return 0.0;
+  vec4 c = textureLod(uMask, uv, lod);
+  float a = c.a;
+  if (gKeyTolerance > 0.0) {
+    float away = distance(c.rgb / max(c.a, 1e-3), gKeyColour);
+    a *= smoothstep(gKeyTolerance, gKeyTolerance + 0.12, away);
+  }
+  return a;
+}
+
+float shapeAt(vec2 p, float blur) {
+  if (gMaskPlace.w < 0.5) {
+    float d = length(p) - 0.3 * uSize;
+    return clamp(0.5 - d / max(blur, 0.004), 0.0, 1.0);
+  }
+  return shapeLod(p, log2(max(blur * gMaskPlace.z, 1.0)));
+}
+
+${coverageTaps("coverage", 16, 0.4)}
+
+${coverageTaps("coverageLite", LITE_TAPS, 0.5)}`.trim();
+var aura = {
+  kind: "shader",
+  id: "aura",
+  name: "Aura",
+  description: "A silhouette wreathed in an energetic aura, flame-like wisps of light rising off its outline and pulsing.",
+  category: "glow",
+  video: "stills",
+  tags: ["glow", "aura", "energy", "flame", "silhouette", "anime", "power-up"],
+  source: glsl(
+    `// Aura: a blurred silhouette, lifted and torn by rising fbm, read as tongues of light round the outline.
+uniform sampler2D uMask;     // @control filter=mipmap wrap=clamp default=${SAMPLE_IMAGES.portrait} label="Silhouette"
+uniform float uKey;          // @control min=0 max=0.5 default=0.12 label="Key out the corner colour (0 off)"
+uniform float uSize;         // @control min=0.2 max=1 default=1 label="Size"
+uniform vec3 uColor;         // @control color default=#FFC93C label="Aura"
+uniform vec3 uCore;          // @control color default=#FFF6D5 label="Core"
+uniform vec3 uBackground;    // @control color default=#0B0A12 label="Background"
+uniform float uHeight;       // @control min=0 max=0.4 default=0.16 label="Flame height"
+uniform float uSpread;       // @control min=0.01 max=0.15 default=0.06 label="Spread"
+uniform float uSpeed;        // @control min=0 max=3 default=1 label="Speed"
+uniform float uPulse;        // @control min=0 max=1 default=0.4 label="Pulse"
+uniform float uIntensity;    // @control min=0 max=3 default=1.1 label="Intensity"`,
+    HASH,
+    NOISE,
+    FBM,
+    MASK_FAST,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  setKey(uKey);
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
+  float t = iTime * uSpeed;
+  float px = 1.0 / iResolution.y;
+  // Rising noise: tongues flow up and sway.
+  vec2 q = p * 6.0;
+  float n = fbm(vec2(q.x, q.y - t * 2.0), 5);
+  float n2 = fbm(vec2(q.x * 1.7 + 4.1, q.y * 0.9 - t * 2.9), 4);
+  float pulse = 1.0 + uPulse * (0.3 * sin(t * 3.0) + 0.12 * sin(t * 7.3 + 1.0));
+  // The silhouette blurred at three widths, swayed and stretched upward by the noise, so light gathers above it.
+  // The two wide blurs, torn by the noise anyway, take fewer taps.
+  vec2 warp = vec2((n2 - 0.5) * uSpread * 1.5, -(n - 0.3) * uHeight);
+  float inner = coverage(p + warp * 0.3, uSpread * 0.5);
+  float outer = coverageLite(p + warp, uSpread * 1.4);
+  float tall = coverageLite(p + warp * 1.5 - vec2(0.0, uHeight), uSpread * 2.2);
+  float field = (inner * 0.9 + outer * 0.8 + tall * 0.6) * pulse;
+  // Torn into tongues: the noise breaks the thin outer field into licks, the thick inner field holds.
+  float tongues = smoothstep(0.12, 0.95, field * (0.45 + 1.1 * n));
+  float wisps = smoothstep(0.55, 0.75, n2) * smoothstep(0.02, 0.3, tall) * 0.5;
+  float body = shapeAt(p, 1.5 * px);
+  vec3 light = uColor * (tongues * 1.3 + wisps + field * 0.25) + uCore * smoothstep(0.5, 0.9, inner * pulse) * 0.8;
+  light *= uIntensity;
+  vec3 col = uBackground + (1.0 - exp(-light));
+  // The figure in front, its own colours, rim-lit by the aura.
+  if (gMaskPlace.w > 0.5 && body > 0.0) {
+    vec3 m = maskPlace(p);
+    vec4 c = texture(uMask, m.xy);
+    vec3 own = c.rgb / max(c.a, 1e-3);
+    float rim = 1.0 - coverage(p, uSpread * 0.25);
+    vec3 lit = own * mix(vec3(0.75), uColor, 0.25) + uColor * rim * 1.6 * uIntensity * pulse * 0.5;
+    col = mix(col, lit, body);
+  } else {
+    col = mix(col, uBackground * 0.6 + uColor * 0.15, body);
+  }
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Super saiyan", values: { uColor: [1, 0.79, 0.24], uCore: [1, 0.97, 0.84], uHeight: 0.22, uSpeed: 1.6, uPulse: 0.6, uIntensity: 1.8 } },
+    { name: "Spirit", values: { uColor: [0.25, 0.85, 1], uCore: [0.85, 1, 1], uBackground: [0.02, 0.05, 0.09], uHeight: 0.1, uSpeed: 0.6, uPulse: 0.3 } },
+    { name: "Dark", values: { uColor: [0.55, 0.2, 0.95], uCore: [0.95, 0.75, 1], uBackground: [0.02, 0.01, 0.04], uHeight: 0.18, uSpread: 0.07, uIntensity: 1.6 } }
+  ]
+};
+var bloom = {
+  kind: "shader",
+  id: "bloom",
+  name: "Bloom",
+  description: "A picture whose bright areas bleed soft light into their surroundings, with an optional anamorphic lens streak.",
+  category: "glow",
+  video: "filter",
+  tags: ["glow", "bloom", "image", "lens", "light", "filter", "anamorphic"],
+  source: glsl(
+    `// Bloom: the brightest parts of the image, blurred at two scales (and streaked sideways), added back as light.
+uniform sampler2D uImage;    // @control filter=mipmap wrap=clamp default=${SAMPLE_IMAGES.landscape} label="Image"
+uniform float uThreshold;    // @control min=0 max=1 default=0.6 label="Threshold"
+uniform float uKnee;         // @control min=0.01 max=0.5 default=0.2 label="Softness"
+uniform float uRadius;       // @control min=0.01 max=0.2 default=0.08 label="Radius"
+uniform float uIntensity;    // @control min=0 max=4 default=2.5 label="Intensity"
+uniform vec3 uTint;          // @control color default=#FFFFFF label="Tint"
+uniform float uStreak;       // @control min=0 max=2 default=0 label="Anamorphic streak"
+uniform vec3 uStreakColor;   // @control color default=#7FB2FF label="Streak colour"
+${BACKDROP_CONTROLS}`,
+    PICTURE,
+    `// The light above the threshold at uv, read at a mip level (a soft knee, so light fades in smoothly). A coarse
+// level has averaged small lights with their dark surroundings, so its threshold is lowered a little to match.
+vec3 bright(vec2 uv, float lod) {
+  vec3 c = textureSize(uImage, 0).x > 1 ? textureLod(uImage, uv, lod).rgb : testCard(fract(uv));
+  float l = dot(c, vec3(0.2126, 0.7152, 0.0722));
+  float thr = uThreshold * exp2(-max(lod, 0.0) * 0.1);
+  float knee = uKnee * exp2(-max(lod, 0.0) * 0.1);
+  float k = clamp((l - thr + knee) / (2.0 * knee), 0.0, 1.0);
+  float soft = l > thr ? l - thr : k * k * knee * 0.5;
+  return c * max(soft, 0.0) / max(l, 1e-4);
+}
+
+// A disc blur of the bright pass, radius r (uv height units): 20 golden-angle taps at a mip level about as
+// coarse as their spacing, so they run together.
+vec3 blurBright(vec2 uv, float r, float texels) {
+  float lod = log2(max(r * 0.4 * texels, 1.0));
+  vec3 sum = vec3(0.0);
+  vec2 aspect = vec2(iResolution.y / iResolution.x, 1.0);
+  for (int i = 0; i < 20; i++) {
+    float rr = r * sqrt((float(i) + 0.5) / 20.0);
+    float a = float(i) * 2.39996;
+    sum += bright(uv + rr * vec2(cos(a), sin(a)) * aspect, lod);
+  }
+  return sum / 20.0;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  float texels = textureSize(uImage, 0).y > 1 ? float(textureSize(uImage, 0).y) : iResolution.y;
+  vec3 light = blurBright(uv, uRadius * 0.3, texels) * 0.3 + blurBright(uv, uRadius, texels) * 0.4 + blurBright(uv, uRadius * 3.0, texels) * 0.5;
+  light *= uTint;
+  if (uStreak > 0.0) {
+    // A long horizontal smear of the bright pass, read a little blurred so its taps run together.
+    vec3 streak = vec3(0.0);
+    float w = 0.0;
+    float jitter = fract(sin(dot(fragCoord, vec2(12.9898, 78.233))) * 43758.5453) - 0.5;
+    float texelsX = textureSize(uImage, 0).x > 1 ? float(textureSize(uImage, 0).x) : iResolution.x;
+    float lodStreak = log2(max(0.0125 * texelsX, 1.0));
+    for (int i = -24; i <= 24; i++) {
+      float f = (float(i) + jitter) / 24.0;
+      float k = exp(-abs(f) * 3.5);
+      streak += bright(uv + vec2(f * 0.3, 0.0), lodStreak) * k;
+      w += k;
+    }
+    light += dot(streak / w, vec3(0.33)) * uStreakColor * uStreak * 4.0;
+  }
+  light *= uIntensity;
+  vec4 pic = pictureRGBA(uImage, uv);
+  // The bloom is light added over the picture, so it also shows where the picture is clear.
+  float glowA = clamp(max(light.r, max(light.g, light.b)), 0.0, 1.0);
+  float alpha = max(pic.a, glowA);
+  vec3 col = (pic.rgb * pic.a + light) / max(alpha, 1e-4);
+  fragColor = vec4(col, alpha);
+}`
+  ),
+  presets: [
+    { name: "Dreamy", values: { uThreshold: 0.45, uRadius: 0.12, uIntensity: 1.8, uTint: [1, 0.9, 0.95] } },
+    { name: "Anamorphic night", values: { uImage: SAMPLE_IMAGES.city, uStreak: 1.2, uThreshold: 0.6, uIntensity: 3 } },
+    { name: "Subtle", values: { uThreshold: 0.75, uRadius: 0.04, uIntensity: 1.2 } }
+  ]
+};
+var pulsingHalo = {
+  kind: "shader",
+  id: "pulsing-halo",
+  name: "Pulsing halo",
+  description: "Soft halo rings behind a centre spot, breathing slowly in and out with a gentle shimmer running round them.",
+  category: "glow",
+  tags: ["glow", "halo", "ring", "breathe", "overlay", "pulse", "ui"],
+  transparent: true,
+  loop: 4,
+  source: glsl(
+    `// Pulsing halo: soft rings round the centre that grow and brighten with each breath, shimmering round.
+uniform vec3 uColor;         // @control color default=#7DD3FC label="Outer colour"
+uniform vec3 uInner;         // @control color default=#E0F2FE label="Inner colour"
+uniform float uRadius;       // @control min=0.05 max=0.45 default=0.2 label="Radius"
+uniform float uWidth;        // @control min=0.004 max=0.12 default=0.025 label="Ring width"
+uniform int uRings;          // @control min=1 max=4 default=2 label="Rings"
+uniform float uSpacing;      // @control min=0.02 max=0.2 default=0.07 label="Ring spacing"
+uniform float uBreath;       // @control min=0 max=0.5 default=0.12 label="Breath"
+uniform float uPeriod;       // @control min=1 max=10 default=4 label="Seconds per breath"
+uniform float uShimmer;      // @control min=0 max=1 default=0.5 label="Shimmer"
+uniform float uIntensity;    // @control min=0 max=3 default=1.2 label="Intensity"`,
+    HASH,
+    NOISE,
+    GLOW7,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
+  float d = length(p);
+  vec2 dir = p / max(d, 1e-4);
+  float phase = 6.28318 * iTime / uPeriod;
+  float b = 0.5 - 0.5 * cos(phase);
+  float scale = 1.0 + uBreath * (b - 0.3);
+  // The shimmer: noise round the ring, drifting on a circle so it repeats every breath.
+  vec2 drift = vec2(cos(phase), sin(phase));
+  vec3 light = vec3(0.0);
+  for (int i = 0; i < 4; i++) {
+    if (i >= uRings) break;
+    float fi = float(i);
+    float r = (uRadius + fi * uSpacing * (1.0 + 0.5 * b)) * scale;
+    float w = uWidth * (1.0 + 0.5 * fi);
+    float ring = exp(-pow((d - r) / w, 2.0)) + 0.4 * exp(-abs(d - r) / (w * 3.0));
+    float s = vnoise(dir * 3.0 + drift * 0.8 + fi * 7.3) * 0.6 + vnoise(dir * 7.0 - drift * 1.3 + fi * 3.1) * 0.4;
+    float sh = mix(1.0, 0.35 + 1.3 * s, uShimmer);
+    float fade = 1.0 / (1.0 + 0.9 * fi);
+    vec3 tint = mix(uInner, uColor, uRings > 1 ? fi / float(uRings - 1) : 0.6);
+    light += tint * ring * sh * fade;
+  }
+  // A faint glow filling the centre, behind whatever sits there.
+  light += uInner * 0.18 * exp(-pow(d / (uRadius * scale), 2.0) * 1.5);
+  light *= uIntensity * (0.7 + 0.45 * b);
+  fragColor = glow(light);
+}`
+  ),
+  presets: [
+    { name: "Calm", values: { uRings: 1, uWidth: 0.04, uPeriod: 6, uShimmer: 0.2 } },
+    { name: "Golden", values: { uColor: [1, 0.66, 0.2], uInner: [1, 0.93, 0.7], uRings: 3, uShimmer: 0.8 } },
+    { name: "Notify", values: { uColor: [0.98, 0.3, 0.45], uInner: [1, 0.8, 0.85], uRadius: 0.12, uBreath: 0.35, uPeriod: 1.5, uRings: 3 } }
+  ]
+};
+var neonOutline = {
+  kind: "shader",
+  id: "neon-outline",
+  name: "Neon outline",
+  description: "Any shape or word traced in a crisp neon line with a wide soft glow, its colour flowing along the outline and flickering now and then.",
+  category: "glow",
+  video: "none",
+  tags: ["glow", "neon", "outline", "text", "logo", "overlay", "sign"],
+  transparent: true,
+  source: glsl(
+    `// Neon outline: the mask's edge as a bright tube, a soft halo either side, coloured along the outline.
+uniform sampler2D uMask;     // @control filter=mipmap wrap=clamp default=${textImage("GLOW")} label="Shape"
+uniform float uSize;         // @control min=0.2 max=1 default=0.85 label="Size"
+uniform vec3 uColorA;        // @control color default=#FF3DD8 label="Colour"
+uniform vec3 uColorB;        // @control color default=#38E1FF label="Gradient to"
+uniform float uGradient;     // @control min=0 max=1 default=1 label="Gradient along outline"
+uniform float uFlow;         // @control min=0 max=2 default=0.3 label="Gradient flow"
+uniform float uLine;         // @control min=0.5 max=8 default=2 label="Line width (px)"
+uniform float uGlow;         // @control min=0.01 max=0.2 default=0.05 label="Glow size"
+uniform float uIntensity;    // @control min=0 max=3 default=1.3 label="Intensity"
+uniform float uFlicker;      // @control min=0 max=1 default=0.3 label="Flicker"
+uniform float uFill;         // @control min=0 max=1 default=0 label="Fill"`,
+    HASH,
+    MASK,
+    GLOW7,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  setKey(0.0);
+  float px = 1.0 / iResolution.y;
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) * px;
+  // The edge, softened a few pixels so its slope gives a smooth distance in pixels.
+  float v = coverage(p, 3.0 * px) - 0.5;
+  vec2 g = vec2(dFdx(v), dFdy(v));
+  float d = abs(v) / max(length(g), 0.02);
+  float tube = exp(-pow(d / uLine, 2.0));
+  float core = exp(-pow(d / (uLine * 0.4), 2.0));
+  // The halo: blurred coverage is half way across the edge, falling off either side.
+  float c1 = coverage(p, uGlow * 0.4);
+  float c2 = coverage(p, uGlow);
+  float halo = (1.0 - abs(2.0 * c1 - 1.0)) * 0.55 + (1.0 - abs(2.0 * c2 - 1.0)) * 0.35;
+  float inside = shapeAt(p, px);
+  // Colour along the outline, flowing.
+  float k = mix(0.0, 0.5 + 0.5 * sin(p.x * 5.0 + p.y * 2.5 - iTime * uFlow * 3.0), uGradient);
+  vec3 tint = mix(uColorA, uColorB, k);
+  // Flicker: now and then a burst of quick dips, as a tired tube does.
+  float burst = step(0.72, hash12(vec2(floor(iTime * 1.7), 3.0)));
+  float dip = step(0.45, hash12(vec2(floor(iTime * 24.0), 7.0)));
+  float flick = 1.0 - uFlicker * burst * (1.0 - dip) * 0.85;
+  vec3 light = tint * (tube * 1.6 + halo) + mix(tint, vec3(1.0), 0.7) * core * 0.9;
+  light += tint * inside * uFill * 0.6;
+  fragColor = glow(light * uIntensity * flick);
+}`
+  ),
+  presets: [
+    { name: "Bar sign", values: { uColorA: [1, 0.24, 0.4], uGradient: 0, uFlicker: 0.8, uLine: 3 } },
+    { name: "Heart", values: { uMask: SAMPLE_IMAGES.heart, uSize: 0.7, uColorA: [1, 0.3, 0.55], uColorB: [1, 0.65, 0.3], uFlicker: 0 } },
+    { name: "Filled", values: { uFill: 0.35, uGlow: 0.09, uColorA: [0.5, 1, 0.4], uColorB: [0.2, 0.8, 1] } }
+  ]
+};
+var backlightGlow = {
+  kind: "shader",
+  id: "backlight-glow",
+  name: "Backlight glow",
+  description: "A dark silhouette with a light behind it: radiant rays stream past its edges and glow spills round its rim.",
+  category: "glow",
+  video: "none",
+  tags: ["glow", "backlight", "silhouette", "rays", "eclipse", "rim", "logo"],
+  source: glsl(
+    `// Backlight glow: a light behind a mask, marched toward for shafts the shape blocks, with spill and a rim.
+uniform sampler2D uMask;     // @control filter=mipmap wrap=clamp default=${SAMPLE_IMAGES.logo} label="Silhouette"
+uniform float uKey;          // @control min=0 max=0.5 default=0 label="Key out the corner colour (0 off)"
+uniform float uSize;         // @control min=0.2 max=1 default=0.6 label="Size"
+uniform vec3 uLight;         // @control color default=#FFC46B label="Light"
+uniform vec3 uBackground;    // @control color default=#07060D label="Background"
+uniform vec3 uObject;        // @control color default=#040308 label="Object"
+uniform float uLightX;       // @control min=-0.5 max=0.5 default=0 label="Light across"
+uniform float uLightY;       // @control min=-0.5 max=0.5 default=0.04 label="Light up"
+uniform float uGlowSize;     // @control min=0.05 max=0.8 default=0.3 label="Light size"
+uniform float uRays;         // @control min=0 max=1 default=0.8 label="Rays"
+uniform float uRim;          // @control min=0 max=1 default=0.6 label="Rim light"
+uniform float uSpeed;        // @control min=0 max=2 default=0.4 label="Ray drift"
+uniform float uIntensity;    // @control min=0 max=3 default=1.3 label="Intensity"`,
+    HASH,
+    NOISE,
+    MASK_FAST,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  setKey(uKey);
+  float px = 1.0 / iResolution.y;
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) * px;
+  vec2 L = vec2(uLightX, uLightY);
+  vec2 toL = L - p;
+  float dl = length(toL);
+  // Light reaching here: march toward the light, the shape shadowing what is behind it.
+  // 24 jittered steps (decay and sum scaled to match 0.965 per 1/40 of the way); steps three light
+  // sizes or more from it add almost nothing, so they skip reading the shape.
+  float shafts = 0.0;
+  float decay = 1.0;
+  float jitter = hash12(fragCoord);
+  float far = 3.0 * uGlowSize;
+  for (int i = 0; i < 24; i++) {
+    float s = (float(i) + jitter) / 24.0;
+    float r = dl * (1.0 - s);
+    float open = r < far ? 1.0 - shapeAt(p + toL * s, 2.0 * px + 0.01 * s) : 1.0;
+    float g = r / uGlowSize;
+    shafts += open * exp(-g * g) * decay;
+    decay *= 0.94236;
+  }
+  shafts /= 12.0;
+  // Streaks round the light, drifting slowly.
+  vec2 dir = -toL / max(dl, 1e-4);
+  float a = iTime * uSpeed * 0.2;
+  float streak = vnoise(dir * 6.0 + vec2(a, -a)) * 0.6 + vnoise(dir * 15.0 - vec2(a * 2.0, a)) * 0.4;
+  float rays = shafts * mix(1.0, 0.25 + 1.5 * streak * streak, uRays);
+  // Spill: light wrapping just round the edges.
+  float body = shapeAt(p, 1.2 * px);
+  float spill = coverage(p, 0.03) * 0.8 + coverageLite(p, 0.08) * 0.5;
+  float glowAt = exp(-pow(dl / (uGlowSize * 1.6), 2.0));
+  vec3 light = uLight * (rays * 1.4 + spill * (1.0 - body) * glowAt * 1.2) * uIntensity;
+  vec3 col = uBackground + (1.0 - exp(-light));
+  // The object, dark, its edges facing the light lit.
+  float edge = 1.0 - coverage(p, 0.012);
+  vec2 grad = vec2(dFdx(edge), dFdy(edge));
+  float facing = 0.5 + 0.5 * dot(normalize(grad + 1e-6), normalize(toL + 1e-6));
+  vec3 obj = uObject + uLight * edge * uRim * (0.4 + 0.6 * facing) * glowAt * 1.5 * uIntensity;
+  col = mix(col, obj, body);
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Eclipse", values: { uLight: [1, 0.95, 0.85], uGlowSize: 0.22, uRays: 0.9, uRim: 0.8 } },
+    { name: "Hero portrait", values: { uMask: SAMPLE_IMAGES.portrait, uKey: 0.12, uSize: 1, uLightY: 0.12, uLight: [0.6, 0.8, 1] } },
+    { name: "Sunset", values: { uLight: [1, 0.45, 0.2], uBackground: [0.12, 0.04, 0.1], uLightY: -0.08, uGlowSize: 0.5 } }
+  ]
+};
+var rimLight = {
+  kind: "shader",
+  id: "rim-light",
+  name: "Rim light",
+  description: "A picture given a coloured studio kicker light along the edges that face a chosen direction.",
+  category: "glow",
+  video: "filter",
+  tags: ["glow", "rim", "light", "image", "portrait", "studio", "filter"],
+  source: glsl(
+    `// Rim light: luminance edges, kept where they face the light, glowing in its colour over the dimmed picture.
+uniform sampler2D uImage;    // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.portrait} label="Image"
+uniform vec3 uColor;         // @control color default=#4FD1FF label="Light colour"
+uniform float uAngle;        // @control min=0 max=360 default=35 label="Light from (\xB0)"
+uniform float uWidth;        // @control min=0.5 max=8 default=3 label="Rim width (px)"
+uniform float uFocus;        // @control min=0 max=1 default=1 label="Focus on the light side"
+uniform float uThreshold;    // @control min=0 max=0.5 default=0.06 label="Threshold"
+uniform float uIntensity;    // @control min=0 max=4 default=2.4 label="Intensity"
+uniform float uDim;          // @control min=0 max=1 default=0.3 label="Darken picture"
+uniform bool uBrightSubject; // @control default=false label="Subject brighter than background"
+${BACKDROP_CONTROLS}`,
+    PICTURE,
+    `float luma(vec2 uv) {
+  vec4 c = pictureRGBA(uImage, uv);
+  return dot(c.rgb, vec3(0.2126, 0.7152, 0.0722)) * c.a;
+}
+
+// The luminance gradient (Sobel), sampling d apart in uv: it points from dark to bright.
+vec2 gradient(vec2 uv, vec2 d) {
+  float tl = luma(uv + vec2(-d.x, d.y));
+  float t = luma(uv + vec2(0.0, d.y));
+  float tr = luma(uv + d);
+  float l = luma(uv - vec2(d.x, 0.0));
+  float r = luma(uv + vec2(d.x, 0.0));
+  float bl = luma(uv - d);
+  float b = luma(uv - vec2(0.0, d.y));
+  float br = luma(uv + vec2(d.x, -d.y));
+  return vec2(tr + 2.0 * r + br - tl - 2.0 * l - bl, tl + 2.0 * t + tr - bl - 2.0 * b - br) * 0.25;
+}
+
+// How much rim light an edge sampled d apart gets: its strength, toward the light.
+float rimAt(vec2 uv, vec2 d, vec2 toLight) {
+  vec2 g = gradient(uv, d);
+  float s = length(g);
+  // A dark subject on a light ground: its outward normal points to the brighter side.
+  vec2 n = (uBrightSubject ? -g : g) / max(s, 1e-5);
+  float facing = mix(1.0, smoothstep(0.25, 0.95, dot(n, toLight)), uFocus);
+  return smoothstep(uThreshold, uThreshold + 0.12, s) * facing;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  float a = radians(uAngle);
+  vec2 toLight = vec2(cos(a), sin(a));
+  vec2 d = uWidth / iResolution.xy;
+  // The light falls on the subject's side of the edge: read it a little toward the light, and keep it where
+  // this pixel is on the subject's side (darker than what lies toward the light, or brighter if so set).
+  float crisp = rimAt(uv + toLight * d, d, toLight);
+  float soft = rimAt(uv + toLight * d * 2.5, d * 3.0, toLight);
+  float rise = luma(uv + toLight * d * 3.0) - luma(uv);
+  float side = smoothstep(0.0, 0.06, uBrightSubject ? -rise : rise);
+  crisp *= side;
+  soft *= mix(0.5, 1.0, side);
+  vec4 pic = pictureRGBA(uImage, uv);
+  vec3 light = uColor * (crisp + 0.45 * soft) * uIntensity + vec3(1.0) * crisp * crisp * 0.12 * uIntensity;
+  vec3 col = pic.rgb * (1.0 - uDim) + light * (1.0 - 0.5 * pic.rgb);
+  fragColor = vec4(col, pic.a);
+}`
+  ),
+  presets: [
+    { name: "Kicker", values: { uColor: [1, 0.86, 0.66], uAngle: 160, uDim: 0.2 } },
+    { name: "Cyberpunk", values: { uColor: [1, 0.2, 0.7], uAngle: 20, uDim: 0.55, uIntensity: 2.5, uWidth: 3.5 } },
+    { name: "Top light", values: { uColor: [0.85, 0.95, 1], uAngle: 90, uFocus: 0.7 } }
+  ]
+};
+var glowShaders = [aura, bloom, pulsingHalo, neonOutline, backlightGlow, rimLight];
+
+// src/catalog/shaders/shadow.ts
+var SHAPE = `
+vec4 shapeAt(vec2 p, float spacing) {
+  vec2 size = vec2(textureSize(uMask, 0));
+  if (size.x <= 1.0) {
+    vec2 q = abs(p) - 0.18 * uSize;
+    float a = step(length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - 0.08 * uSize, 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(uMask, uv, log2(max(spacing * size.y / h, 1.0)));
+  // Clear texels upload black, so filtered colour is about colour \xD7 alpha already.
+  return vec4(clamp(c.rgb / max(c.a, 1e-3), 0.0, 1.0) * c.a, c.a);
+}`.trim();
+var SDF = `
+float capsule(vec2 p, vec2 a, vec2 b, float r) {
+  vec2 pa = p - a;
+  vec2 ba = b - a;
+  float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
+  return length(pa - ba * h) - r;
+}
+float box(vec2 p, vec2 b, float r) {
+  vec2 q = abs(p) - b + r;
+  return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - r;
+}
+float smin(float a, float b, float k) {
+  float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
+  return mix(b, a, h) - k * h * (1.0 - h);
+}`.trim();
+var longShadow = {
+  kind: "shader",
+  id: "long-shadow",
+  name: "Long shadow",
+  description: "The flat-design long shadow: a word or icon casting a long diagonal band across a flat colour, fading along its length and slowly swinging round.",
+  category: "shadow",
+  video: "none",
+  tags: ["shadow", "long-shadow", "flat", "text", "logo", "icon", "mask"],
+  source: glsl(
+    `// Long shadow: the shape's mask marched back along a direction, so it casts a long band that fades as it goes.
+uniform sampler2D uMask;     // @control filter=mipmap wrap=clamp default=${textImage("LONG")} label="Shape (its alpha)"
+uniform float uSize;         // @control min=0.2 max=1 default=0.8 label="Shape size"
+uniform float uAngle;        // @control min=0 max=360 default=315 label="Direction (\xB0)"
+uniform float uSwing;        // @control min=0 max=60 default=15 label="Swing (\xB0)"
+uniform float uSpin;         // @control min=-30 max=30 default=0 label="Turn (\xB0/s)"
+uniform float uLength;       // @control min=0 max=1.5 default=0.7 label="Length"
+uniform float uFade;         // @control min=0 max=1 default=0.85 label="Fade along"
+uniform vec3 uBackground;    // @control color default=#EF5A5A label="Background"
+uniform vec3 uShadow;        // @control color default=#B8383F label="Shadow"
+uniform vec3 uColour;        // @control color default=#FFFFFF label="Shape colour"
+uniform bool uImageColours;  // @control default=false label="Use the shape's own colours"`,
+    SHAPE,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
+  float a = radians(uAngle + uSpin * iTime + uSwing * sin(iTime * 0.4));
+  vec2 dir = vec2(cos(a), sin(a));
+  // Look back toward the shape: any copy of it along the way covers this point.
+  const int STEPS = 96;
+  float spacing = uLength / float(STEPS);
+  float shade = 0.0;
+  for (int i = 1; i <= STEPS; i++) {
+    float m = shapeAt(p - dir * (float(i) * spacing), spacing).a;
+    shade = max(shade, m);
+    if (shade > 0.99) break;
+  }
+  // The band fades in one smooth gradient along the direction, from the back of the shape's box to the shadow's end.
+  vec2 size = vec2(textureSize(uMask, 0));
+  float aspect = size.x <= 1.0 ? 1.0 : size.x / size.y;
+  float h = size.x <= 1.0 ? 0.52 * uSize : min(uSize, iResolution.x / iResolution.y * uSize / aspect);
+  float reach = 0.5 * h * (abs(dir.x) * aspect + abs(dir.y));
+  shade *= 1.0 - uFade * clamp((dot(p, dir) + reach) / (2.0 * reach + uLength), 0.0, 1.0);
+  vec3 col = mix(uBackground, uShadow, shade);
+  vec4 c = shapeAt(p, 1.0 / iResolution.y);
+  vec3 ink = uImageColours ? c.rgb / max(c.a, 1e-4) : uColour;
+  fragColor = vec4(mix(col, ink, c.a), 1.0);
+}`
+  ),
+  presets: [
+    { name: "Flat", values: { uFade: 0, uLength: 1.5, uSwing: 0, uBackground: [0.16, 0.71, 0.65], uShadow: [0.11, 0.55, 0.5] } },
+    { name: "Icon", values: { uMask: SAMPLE_IMAGES.heart, uImageColours: true, uSize: 0.5, uBackground: [0.99, 0.82, 0.32], uShadow: [0.86, 0.62, 0.14] } },
+    { name: "Spinning", values: { uSwing: 0, uSpin: 20, uFade: 1, uBackground: [0.2, 0.22, 0.32], uShadow: [0.1, 0.11, 0.18] } }
+  ]
+};
+var dropShadowLift = {
+  kind: "shader",
+  id: "drop-shadow-lift",
+  name: "Drop shadow lift",
+  description: "A logo or icon resting on a soft drop shadow that lifts off the page when hovered, its shadow growing larger, softer and further below as it scales up.",
+  category: "shadow",
+  video: "none",
+  tags: ["shadow", "drop-shadow", "hover", "interactive", "elevation", "logo", "icon", "mask"],
+  source: glsl(
+    `// Drop shadow lift: a shape on a blurred copy of its own mask, which spreads and drops as the shape lifts (on hover).
+uniform sampler2D uMask;     // @control filter=mipmap wrap=clamp default=${SAMPLE_IMAGES.logo} label="Object (its alpha)"
+uniform float uSize;         // @control min=0.2 max=1 default=0.55 label="Object size"
+uniform bool uImageColours;  // @control default=true label="Use the object's own colours"
+uniform vec3 uColour;        // @control color default=#6366F1 label="Object colour"
+uniform vec3 uBackground;    // @control color default=#EEF1F7 label="Background"
+uniform vec3 uShadow;        // @control color default=#1E2340 label="Shadow colour"
+uniform float uOpacity;      // @control min=0 max=1 default=0.45 label="Shadow strength"
+uniform float uRestBlur;     // @control min=0 max=0.1 default=0.012 label="Blur at rest"
+uniform float uLiftBlur;     // @control min=0 max=0.2 default=0.07 label="Blur when lifted"
+uniform float uLiftDrop;     // @control min=0 max=0.15 default=0.06 label="Shadow drop when lifted"
+uniform float uLiftScale;    // @control min=0 max=0.2 default=0.06 label="Scale when lifted"
+uniform bool uDemo;          // @control default=true label="Demo when idle"`,
+    SHAPE,
+    `// The mask blurred over a disc of the radius: 24 taps on a golden-angle spiral, each from a mip level as coarse as their spacing.
+float blurred(vec2 p, float radius) {
+  float sum = 0.0;
+  for (int i = 0; i < 24; i++) {
+    float r = radius * sqrt((float(i) + 0.5) / 24.0);
+    float a = float(i) * 2.39996;
+    sum += shapeAt(p + r * vec2(cos(a), sin(a)), radius * 0.35).a;
+  }
+  return sum / 24.0;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float px = 1.0 / iResolution.y;
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) * px;
+  // Hovering lifts it; idle, the demo breathes it up and down.
+  float idle = uDemo ? smoothstep(0.0, 1.0, 0.5 - 0.5 * cos(iTime * 1.3)) : 0.0;
+  float lift = mix(idle, 1.0, clamp(iPointer.z, 0.0, 1.0));
+  float k = 1.0 + uLiftScale * lift;
+  vec2 rise = vec2(0.0, 0.012 * lift);
+  // The shadow spreads a little wider than the object, drops below it and softens.
+  float ks = k * (1.0 + 0.05 * lift);
+  vec2 drop = vec2(0.0, -(0.008 + uLiftDrop * lift));
+  float radius = mix(uRestBlur, uLiftBlur, lift) + px;
+  float shadow = blurred((p - drop) / ks, radius / ks) * uOpacity * mix(1.0, 0.7, lift);
+  vec3 col = mix(uBackground, uShadow, shadow);
+  vec4 c = shapeAt((p - rise) / k, px / k);
+  vec3 ink = uImageColours ? c.rgb / max(c.a, 1e-4) : uColour;
+  fragColor = vec4(mix(col, ink, c.a), 1.0);
+}`
+  ),
+  presets: [
+    { name: "Heart", values: { uMask: SAMPLE_IMAGES.heart, uBackground: [1, 0.94, 0.95], uShadow: [0.45, 0.05, 0.15], uOpacity: 0.4 } },
+    { name: "Dramatic", values: { uOpacity: 0.7, uLiftBlur: 0.12, uLiftDrop: 0.12, uLiftScale: 0.1, uBackground: [0.85, 0.87, 0.9] } }
+  ]
+};
+var lightSweepShadows = {
+  kind: "shader",
+  id: "light-sweep-shadows",
+  name: "Light sweep shadows",
+  description: "A coloured light drifting across a floor of shapes (or following the pointer), each casting a real soft shadow that swings round as the light moves.",
+  category: "shadow",
+  tags: ["shadow", "light", "soft-shadows", "sdf", "lamp", "interactive", "hover"],
+  source: glsl(
+    `// Light sweep shadows: soft 2D shadows marched from each point toward a moving light through the shapes' distance field.
+uniform vec3 uLight;         // @control color default=#FFC46E label="Light colour"
+uniform float uIntensity;    // @control min=0 max=4 default=1.8 label="Light strength"
+uniform float uReach;        // @control min=0.1 max=2 default=0.45 label="Light reach"
+uniform float uSoftness;     // @control min=0.005 max=0.3 default=0.06 label="Shadow softness"
+uniform float uSpeed;        // @control min=0 max=2 default=0.5 label="Speed"
+uniform vec3 uFloor;         // @control color default=#3A3F52 label="Floor"
+uniform vec3 uShapes;        // @control color default=#ECE6DA label="Shapes"
+uniform float uAmbient;      // @control min=0 max=1 default=0.12 label="Ambient light"
+uniform bool uFollow;        // @control default=true label="Follow the pointer"`,
+    ROTATE,
+    SDF,
+    `float scene(vec2 p) {
+  float d = length(p - vec2(-0.45, 0.13)) - 0.09;
+  d = min(d, length(p - vec2(0.36, -0.17)) - 0.065);
+  d = min(d, length(p - vec2(-0.2, -0.28)) - 0.045);
+  d = min(d, box(rot(0.5) * (p - vec2(0.04, 0.0)), vec2(0.1, 0.05), 0.012));
+  d = min(d, box(rot(-0.3) * (p - vec2(0.55, 0.2)), vec2(0.03, 0.12), 0.01));
+  d = min(d, box(rot(0.9) * (p - vec2(-0.62, -0.22)), vec2(0.05, 0.05), 0.008));
+  return d;
+}
+
+vec2 sceneNormal(vec2 p) {
+  vec2 e = vec2(0.002, 0.0);
+  return normalize(vec2(scene(p + e.xy) - scene(p - e.xy), scene(p + e.yx) - scene(p - e.yx)) + 1e-6);
+}
+
+// How much of the light reaches p: march toward it, keeping the narrowest miss relative to how far along.
+float softShadow(vec2 p, vec2 light) {
+  vec2 to = light - p;
+  float dist = length(to);
+  vec2 dir = to / max(dist, 1e-5);
+  float res = 1.0;
+  float t = 0.004;
+  for (int i = 0; i < 56; i++) {
+    if (t >= dist) break;
+    float d = scene(p + dir * t);
+    res = min(res, d / (uSoftness * t));
+    if (res < -1.0) break;
+    t += clamp(d, 0.004, 0.08);
+  }
+  res = max(res, -1.0);
+  return 0.25 * (1.0 + res) * (1.0 + res) * (2.0 - res);
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float px = 1.0 / iResolution.y;
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) * px;
+  float aspect = iResolution.x / iResolution.y;
+  float t = iTime * uSpeed;
+  vec2 light = vec2(0.42 * aspect * sin(t * 1.06), 0.36 * sin(t * 1.62 + 1.0));
+  if (uFollow) light = mix(light, (iPointer.xy - 0.5 * iResolution.xy) * px, clamp(iPointer.z, 0.0, 1.0));
+  // Keep the light out of the shapes.
+  float inside = scene(light);
+  if (inside < 0.03) light += sceneNormal(light) * (0.03 - inside);
+
+  vec2 to = light - p;
+  float r = length(to);
+  float falloff = 1.0 / (1.0 + r * r / (uReach * uReach));
+  vec3 lamp = uLight * uIntensity * falloff;
+  float d = scene(p);
+  // Floor: ambient, plus the light where it gets through.
+  vec3 floorCol = uFloor * (uAmbient + lamp * softShadow(p, light));
+  // Shapes are lit on top, brighter on the rim that faces the light.
+  vec2 n = sceneNormal(p);
+  float rim = smoothstep(-0.025, 0.0, d) * max(dot(n, to / max(r, 1e-5)), 0.0);
+  vec3 shapeCol = uShapes * (uAmbient + 0.25 + lamp * (0.45 + 0.8 * rim));
+  vec3 col = mix(shapeCol, floorCol, smoothstep(-px, px, d));
+  // The bulb itself.
+  col += uLight * (exp(-r * r / 0.00025) * 2.0 + exp(-r * r / 0.004) * 0.25);
+  fragColor = vec4(1.0 - exp(-col * 1.3), 1.0);
+}`
+  ),
+  presets: [
+    { name: "Candle", values: { uLight: [1, 0.6, 0.25], uReach: 0.3, uSoftness: 0.12, uSpeed: 0.3, uFloor: [0.22, 0.17, 0.14] } },
+    { name: "Neon", values: { uLight: [0.3, 0.85, 1], uIntensity: 2.5, uSoftness: 0.02, uFloor: [0.1, 0.1, 0.18], uShapes: [0.9, 0.3, 0.7] } }
+  ]
+};
+var contactShadow = {
+  kind: "shader",
+  id: "contact-shadow",
+  name: "Contact shadow",
+  description: "An object floating up and down above the floor, its contact shadow tightening and darkening as it nears the ground and spreading and fading as it rises.",
+  category: "shadow",
+  tags: ["shadow", "contact-shadow", "float", "ground", "product", "3d"],
+  source: glsl(
+    `// Contact shadow: an object bobbing over a floor; a tight dark core and a wide soft shadow, both spreading and fading with height.
+uniform int uShape;          // @control min=0 max=2 default=0 label="Object (0 ball, 1 cube, 2 pill)"
+uniform vec3 uObject;        // @control color default=#FF7A59 label="Object"
+uniform vec3 uBackground;    // @control color default=#F3EEE6 label="Wall"
+uniform vec3 uGround;        // @control color default=#E2D8C9 label="Floor"
+uniform vec3 uShadow;        // @control color default=#3A2C22 label="Shadow colour"
+uniform float uHeight;       // @control min=0 max=0.4 default=0.2 label="Float height"
+uniform float uSpeed;        // @control min=0 max=3 default=0.8 label="Speed"
+uniform float uDarkness;     // @control min=0 max=1 default=0.8 label="Contact darkness"
+uniform float uSpread;       // @control min=0 max=3 default=1.4 label="Spread when high"`,
+    SDF,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float px = 1.0 / iResolution.y;
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) * px;
+  const float horizon = -0.08;
+  const float groundY = -0.26;
+  const float R = 0.12;
+  // Lingers at the top and bottom of each bob, and comes down to just touch.
+  float s = 0.5 + 0.5 * sin(iTime * uSpeed * 1.6);
+  float h = 0.003 + uHeight * s * s * (3.0 - 2.0 * s);
+
+  // Wall above, floor below, a soft crease between.
+  vec3 wall = uBackground * (0.92 + 0.08 * smoothstep(horizon, 0.5, p.y));
+  vec3 floorCol = uGround * (0.94 + 0.06 * smoothstep(horizon, -0.5, p.y));
+  vec3 col = mix(floorCol, wall, smoothstep(-px, px, p.y - horizon));
+  col *= 1.0 - 0.06 * exp(-abs(p.y - horizon) * 40.0);
+
+  vec2 ext = uShape == 0 ? vec2(R) : (uShape == 1 ? vec2(0.85 * R) : vec2(1.35 * R, 0.55 * R));
+  // The shadow on the floor: a squashed core that tightens and darkens near the ground, and a broad soft one.
+  vec2 g = p - vec2(0.0, groundY);
+  float coreW = ext.x * 0.8 + h * uSpread * 0.35;
+  float core = exp(-dot(g / vec2(coreW, coreW * 0.16), g / vec2(coreW, coreW * 0.16)) * 1.6) * exp(-h * 10.0);
+  float wideW = ext.x * 1.15 + h * uSpread;
+  float wide = exp(-dot(g / vec2(wideW, wideW * 0.22), g / vec2(wideW, wideW * 0.22)) * 1.2) * 0.45 / (1.0 + h * 8.0);
+  float shade = uDarkness * (1.0 - (1.0 - core) * (1.0 - wide));
+  col = mix(col, uShadow, shade);
+
+  // The object.
+  vec2 q = p - vec2(0.0, groundY + ext.y + h);
+  float d = uShape == 0 ? length(q) - R : (uShape == 1 ? box(q, ext, 0.035) : box(q, ext, ext.y));
+  vec2 u = clamp(q / ext, -1.0, 1.0);
+  vec3 obj;
+  if (uShape == 0) {
+    vec3 n = vec3(u, sqrt(max(1.0 - dot(u, u), 0.0)));
+    vec3 l = normalize(vec3(-0.45, 0.6, 0.65));
+    float diff = max(dot(n, l), 0.0);
+    float spec = pow(max(dot(reflect(-l, n), vec3(0.0, 0.0, 1.0)), 0.0), 24.0);
+    obj = uObject * (0.35 + 0.75 * diff) + 0.35 * spec;
+  } else {
+    obj = uObject * (0.88 + 0.16 * u.y - 0.06 * u.x);
+    obj += 0.12 * smoothstep(0.7, 1.0, u.y) * smoothstep(1.0, 0.6, abs(u.x));
+  }
+  // Near the ground the floor shades its underside.
+  obj *= 1.0 - 0.35 * exp(-h * 14.0) * smoothstep(-0.2, -1.0, u.y);
+  col = mix(obj, col, smoothstep(-px, px, d));
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Cube", values: { uShape: 1, uObject: [0.38, 0.4, 0.95], uBackground: [0.93, 0.94, 0.97], uGround: [0.85, 0.87, 0.92], uShadow: [0.1, 0.12, 0.25] } },
+    { name: "Pill on dark", values: { uShape: 2, uObject: [0.98, 0.84, 0.3], uBackground: [0.13, 0.14, 0.17], uGround: [0.18, 0.19, 0.23], uShadow: [0, 0, 0], uDarkness: 0.9 } }
+  ]
+};
+var windowShadows = {
+  kind: "shader",
+  id: "window-shadows",
+  name: "Window shadows",
+  description: "Warm sunlight through a window falling across a wall or a picture, dappled by the shadows of slowly tilting blinds or rustling leaves.",
+  category: "shadow",
+  video: "filter",
+  tags: ["shadow", "light", "dappled", "window", "blinds", "leaves", "sunlight", "warm", "image"],
+  source: glsl(
+    `// Window shadows: a patch of sunlight from a window, striped by blinds or broken up by leaves, laid over a wall or picture.
+uniform sampler2D uImage;    // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.portrait} label="Image"
+uniform bool uPlainWall;     // @control default=false label="Plain wall (no image)"
+uniform vec3 uWall;          // @control color default=#E8DCCB label="Wall"
+uniform int uPattern;        // @control min=0 max=1 default=1 label="Shadows of (0 blinds, 1 leaves)"
+uniform vec3 uLight;         // @control color default=#FFC27A label="Light colour"
+uniform float uIntensity;    // @control min=0 max=2 default=0.9 label="Light strength"
+uniform float uShade;        // @control min=0 max=1 default=0.45 label="Shadow depth"
+uniform float uAngle;        // @control min=-60 max=60 default=-22 label="Light angle (\xB0)"
+uniform float uScale;        // @control min=0.4 max=2.5 default=1 label="Scale"
+uniform float uSoftness;     // @control min=0 max=1 default=0.35 label="Softness"
+uniform float uSway;         // @control min=0 max=2 default=1 label="Sway"
+${BACKDROP_CONTROLS}`,
+    PICTURE,
+    HASH,
+    NOISE,
+    FBM,
+    ROTATE,
+    `// The sunlit patch the window throws, slanted, with soft edges.
+float windowPatch(vec2 q, float soft) {
+  vec2 e = abs(q) - vec2(0.5, 0.4);
+  return smoothstep(soft, -soft, max(e.x, e.y));
+}
+
+float blinds(vec2 q, float t, float soft) {
+  q.x += 0.006 * sin(t * 0.7) * uSway;
+  // The slats tilt slowly open and shut.
+  float open = clamp(0.5 + 0.22 * sin(t * 0.35 * uSway + 0.4), 0.15, 0.85);
+  float f = fract(q.y * 14.0 + 0.04 * sin(q.x * 3.0 + t * 0.5) * uSway);
+  float w = 0.03 + soft * 0.25;
+  float lit = smoothstep(0.0, w, f) * smoothstep(open + w, open, f);
+  // The window's frame and cross bar.
+  float bars = smoothstep(0.012 + soft * 0.03, 0.006, abs(q.x)) + smoothstep(0.012 + soft * 0.03, 0.006, abs(q.y - 0.02));
+  return lit * (1.0 - clamp(bars, 0.0, 1.0)) * windowPatch(q, 0.02 + soft * 0.06);
+}
+
+float leaves(vec2 q, float t, float soft) {
+  // Branches sway slowly and the leaves rustle quickly on top.
+  vec2 sway = uSway * (vec2(0.05 * sin(t * 0.6 + q.y * 1.5), 0.03 * cos(t * 0.45 + q.x * 1.2))
+    + 0.012 * vec2(vnoise(q * 6.0 + t * 1.3), vnoise(q * 6.0 - t * 1.1 + 7.0)));
+  float n = fbm((q + sway) * 3.2 + 4.0, 5);
+  float s = 0.025 + soft * 0.1;
+  float lit = smoothstep(0.5 - s, 0.5 + s, n);
+  return lit * windowPatch(q * 0.75, 0.08 + soft * 0.1);
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
+  // Light comes in at an angle, so the window's shape is turned and sheared across the wall.
+  vec2 q = rot(radians(uAngle)) * p / uScale;
+  q.x += q.y * 0.35;
+  float lit = uPattern == 0 ? blinds(q, iTime, uSoftness) : leaves(q, iTime, uSoftness);
+
+  vec4 base;
+  if (uPlainWall) {
+    float plaster = vnoise(fragCoord * 0.35) * 0.5 + vnoise(fragCoord * 0.05) * 0.5;
+    base = vec4(uWall * (0.96 + 0.06 * plaster), 1.0);
+  } else {
+    base = pictureRGBA(uImage, uv);
+  }
+  vec3 light = (1.0 - uShade) * vec3(0.95, 0.96, 1.0) + lit * uShade * uLight * (0.6 + uIntensity);
+  vec3 col = base.rgb * light;
+  col = col / (1.0 + max(col - 1.0, 0.0));
+  fragColor = vec4(col, base.a);
+}`
+  ),
+  presets: [
+    { name: "Blinds", values: { uPattern: 0, uPlainWall: true, uAngle: -30, uSoftness: 0.2, uLight: [1, 0.82, 0.6] } },
+    { name: "Plain wall", values: { uPlainWall: true } },
+    { name: "Golden hour", values: { uPlainWall: true, uLight: [1, 0.6, 0.3], uIntensity: 1.4, uShade: 0.7, uSoftness: 0.6, uWall: [0.93, 0.85, 0.78] } }
+  ]
+};
+var shadowPuppets = {
+  kind: "shader",
+  id: "shadow-puppets",
+  name: "Shadow puppets",
+  description: "Hand shadow puppets on a lamp-lit wall: a flapping bird, a barking dog or a twitching rabbit, softening as the hand moves away from the wall.",
+  category: "shadow",
+  tags: ["shadow", "puppet", "hands", "silhouette", "bird", "dog", "rabbit", "warm", "playful"],
+  source: glsl(
+    `// Shadow puppets: hand shapes built from soft-unioned capsules, cast on a warmly lit wall; the further the hand from the wall, the bigger and softer.
+uniform int uPuppet;         // @control min=0 max=2 default=0 label="Puppet (0 bird, 1 dog, 2 rabbit)"
+uniform vec3 uWall;          // @control color default=#F2DDB8 label="Wall"
+uniform vec3 uLight;         // @control color default=#FFB75E label="Lamp colour"
+uniform vec3 uShadow;        // @control color default=#2B1B12 label="Shadow colour"
+uniform float uSpeed;        // @control min=0 max=3 default=1 label="Speed"
+uniform float uDepth;        // @control min=0 max=1 default=0.6 label="Hand moving to and from the wall"
+uniform float uSoftness;     // @control min=0 max=0.1 default=0.035 label="Softness away from the wall"
+uniform float uSize;         // @control min=0.5 max=1.5 default=1 label="Size"`,
+    HASH,
+    NOISE,
+    ROTATE,
+    SDF,
+    `float ellipse(vec2 p, vec2 r) {
+  return (length(p / r) - 1.0) * min(r.x, r.y);
+}
+
+// Two hands linked at the thumbs (the head), fingers fanned out as wings.
+float bird(vec2 p, float t) {
+  float flap = 0.45 * sin(t * 4.0);
+  float d = capsule(p, vec2(0.0, -0.02), vec2(0.0, 0.13), 0.028);
+  d = smin(d, ellipse(p - vec2(0.0, 0.165), vec2(0.04, 0.035)), 0.02);
+  d = min(d, capsule(p, vec2(0.025, 0.17), vec2(0.075, 0.158), 0.009));
+  for (int s = 0; s < 2; s++) {
+    vec2 q = vec2(s == 0 ? p.x : -p.x, p.y);
+    d = smin(d, ellipse(q - vec2(0.08, 0.0), vec2(0.075, 0.045)), 0.03);
+    d = smin(d, capsule(q, vec2(0.08, -0.01), vec2(0.3, -0.65), 0.06), 0.03);
+    for (int k = 0; k < 4; k++) {
+      float fk = float(k);
+      float a = 0.55 - fk * 0.22 + flap * (1.0 - fk * 0.12);
+      vec2 root = vec2(0.13, 0.02 - fk * 0.018);
+      d = smin(d, capsule(q, root, root + (0.2 - fk * 0.02) * vec2(cos(a), sin(a)), 0.019 - fk * 0.002), 0.012);
+    }
+  }
+  return d;
+}
+
+// The back of the hand is the head, the thumb an ear, the little finger a jaw that drops as it barks.
+float dog(vec2 p, float t) {
+  float bark = max(sin(t * 3.0), 0.0);
+  bark *= bark;
+  float d = box(p - vec2(-0.02, 0.03), vec2(0.12, 0.065), 0.05);
+  d = smin(d, capsule(p, vec2(0.06, 0.04), vec2(0.24, 0.025), 0.038), 0.03);
+  vec2 pivot = vec2(0.0, -0.03);
+  vec2 jaw = rot(0.4 * bark) * (p - pivot) + pivot;
+  d = smin(d, capsule(jaw, vec2(0.02, -0.04), vec2(0.2, -0.045), 0.024), 0.012);
+  d = smin(d, capsule(p, vec2(-0.06, 0.08), vec2(-0.1 + 0.04 * sin(t * 1.3), 0.2), 0.042), 0.03);
+  d = smin(d, capsule(p, vec2(-0.08, 0.0), vec2(-0.5, -0.65), 0.075), 0.04);
+  // A gap between the fingers for an eye.
+  return max(d, -(length(p - vec2(0.07, 0.07)) - 0.013));
+}
+
+// Two fingers up as ears, the fist a head with a twitching nose.
+float rabbit(vec2 p, float t) {
+  float nose = 0.006 * sin(t * 18.0) * step(0.3, sin(t * 0.9));
+  float d = ellipse(p, vec2(0.12, 0.085));
+  d = smin(d, length(p - vec2(0.11 + nose, -0.025)) - 0.05, 0.04);
+  d = smin(d, capsule(p, vec2(-0.04, 0.05), vec2(-0.09 + 0.08 * sin(t * 1.7), 0.32), 0.04), 0.03);
+  d = smin(d, capsule(p, vec2(0.0, 0.06), vec2(0.03 + 0.08 * sin(t * 1.7 + 1.2), 0.3), 0.037), 0.03);
+  d = smin(d, capsule(p, vec2(-0.06, -0.03), vec2(-0.45, -0.65), 0.075), 0.04);
+  return max(d, -(length(p - vec2(0.045, 0.025)) - 0.013));
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float px = 1.0 / iResolution.y;
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) * px;
+  float t = iTime * uSpeed;
+  // The lamp's pool of light on the wall, and a little plaster.
+  float spot = smoothstep(0.95, 0.05, length((p - vec2(0.04, 0.05)) * vec2(0.75, 1.0)));
+  vec3 wall = uWall * mix(vec3(0.16, 0.11, 0.09), uLight * 1.3, spot);
+  wall *= 0.95 + 0.07 * vnoise(fragCoord * 0.3) + 0.04 * vnoise(fragCoord * 0.03);
+  // Nearer the lamp the shadow grows and its edge blurs.
+  float z = uDepth * (0.5 + 0.5 * sin(iTime * 0.45));
+  float scale = uSize * (1.0 + 0.3 * z);
+  vec2 drift = vec2(0.03 * sin(iTime * 0.4), 0.02 * sin(iTime * 0.7) - 0.04);
+  vec2 q = (p - drift) / scale;
+  float d = (uPuppet == 0 ? bird(q, t) : (uPuppet == 1 ? dog(q, t) : rabbit(q, t))) * scale;
+  float soft = max(0.002 + uSoftness * z, px);
+  float cover = 1.0 - smoothstep(-soft, soft, d);
+  vec3 col = mix(wall, uShadow * (0.6 + 0.4 * spot), cover * 0.92);
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Dog", values: { uPuppet: 1 } },
+    { name: "Rabbit by candle", values: { uPuppet: 2, uLight: [1, 0.55, 0.25], uWall: [0.95, 0.8, 0.62], uSoftness: 0.06 } },
+    { name: "Moonlit bird", values: { uPuppet: 0, uLight: [0.7, 0.8, 1], uWall: [0.78, 0.82, 0.9], uShadow: [0.05, 0.07, 0.13] } }
+  ]
+};
+var shadowShaders = [longShadow, dropShadowLift, lightSweepShadows, contactShadow, windowShadows, shadowPuppets];
+
+// src/catalog/shaders/distortion.ts
+var CENTRE = `
+vec2 centreAt(vec2 centre, bool follow) {
+  vec2 drift = vec2(0.03 * sin(iTime * 0.37), 0.025 * cos(iTime * 0.29));
+  vec2 idle = (centre + drift) * iResolution.xy;
+  float h = follow ? clamp(iPointer.z, 0.0, 1.0) : 0.0;
+  return mix(idle, iPointer.xy, h);
+}`.trim();
+var twirl = {
+  kind: "shader",
+  id: "twirl",
+  name: "Twirl",
+  description: "A picture twisted into a swirl that winds and unwinds around the pointer or a centre, strongest in the middle.",
+  category: "distortion",
+  video: "interactive",
+  tags: ["distortion", "swirl", "image", "interactive", "hover"],
+  source: glsl(
+    `// Twirl: the picture swirled around a centre, the twist falling off with radius.
+uniform sampler2D uImage;  // @control filter=linear wrap=mirror default=${SAMPLE_IMAGES.landscape} label="Image"
+uniform float uTwist;      // @control min=-12 max=12 default=5 label="Twist (radians)"
+uniform float uRadius;     // @control min=0.05 max=1.2 default=0.45 label="Radius"
+uniform float uSpeed;      // @control min=0 max=3 default=0.6 label="Wind speed (0 holds it)"
+uniform vec2 uCentre;      // @control min=0 max=1 default=0.5,0.5 label="Centre"
+uniform bool uFollow;      // @control default=true label="Follow the pointer"
+${BACKDROP_CONTROLS}`,
+    ROTATE,
+    PICTURE,
+    CENTRE,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 c = centreAt(uCentre, uFollow);
+  vec2 d = fragCoord - c;
+  float R = uRadius * iResolution.y;
+  float f = clamp(1.0 - length(d) / R, 0.0, 1.0);
+  f = f * f * (3.0 - 2.0 * f);
+  float swing = cos(iTime * uSpeed);
+  d = rot(uTwist * swing * f * f) * d;
+  fragColor = pictureRGBA(uImage, (c + d) / iResolution.xy);
+}`
+  ),
+  presets: [
+    { name: "Whirlpool", values: { uTwist: 10, uRadius: 0.8, uSpeed: 0.3 } },
+    { name: "Flick", values: { uTwist: -3, uRadius: 0.25, uSpeed: 2 } }
+  ]
+};
+var pinchBulge = {
+  kind: "shader",
+  id: "pinch-bulge",
+  name: "Pinch & bulge",
+  description: "A picture swelling out like a bubble or sucked in to a point around the pointer or a centre.",
+  category: "distortion",
+  video: "interactive",
+  tags: ["distortion", "bulge", "pinch", "image", "interactive", "hover"],
+  source: glsl(
+    `// Pinch & bulge: the picture bulged out (positive) or pinched in (negative) inside a radius.
+uniform sampler2D uImage;  // @control filter=linear wrap=mirror default=${SAMPLE_IMAGES.portrait} label="Image"
+uniform float uStrength;   // @control min=-1 max=1 default=0.7 label="Pinch \u2190 \u2192 Bulge"
+uniform float uRadius;     // @control min=0.05 max=1 default=0.4 label="Radius"
+uniform bool uAnimate;     // @control default=true label="Animate (swing between pinch and bulge)"
+uniform float uSpeed;      // @control min=0.1 max=4 default=1 label="Swing speed"
+uniform vec2 uCentre;      // @control min=0 max=1 default=0.5,0.5 label="Centre"
+uniform bool uFollow;      // @control default=true label="Follow the pointer"
+${BACKDROP_CONTROLS}`,
+    PICTURE,
+    CENTRE,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 c = centreAt(uCentre, uFollow);
+  vec2 d = fragCoord - c;
+  float R = uRadius * iResolution.y;
+  float t = length(d) / R;
+  float s = uAnimate ? uStrength * cos(iTime * uSpeed) : uStrength;
+  float shade = 1.0;
+  if (t < 1.0) {
+    // A power curve that meets the untouched picture at the rim: above 1 magnifies the middle, below 1 shrinks it.
+    float e = exp(s * 1.3);
+    d *= pow(max(t, 1e-4), e - 1.0);
+    shade = 1.0 + 0.18 * s * (1.0 - t) * (1.0 - t);
+  }
+  vec4 pic = pictureRGBA(uImage, (c + d) / iResolution.xy);
+  fragColor = vec4(pic.rgb * shade, pic.a);
+}`
+  ),
+  presets: [
+    { name: "Bubble", values: { uStrength: 1, uRadius: 0.3, uAnimate: false } },
+    { name: "Black hole", values: { uStrength: -1, uRadius: 0.6, uAnimate: false } }
+  ]
+};
+var fisheye = {
+  kind: "shader",
+  id: "fisheye",
+  name: "Fisheye",
+  description: "A picture seen through a fisheye lens, bulging in the middle and curving to the corners, over the whole frame or in a round lens.",
+  category: "distortion",
+  video: "filter",
+  tags: ["distortion", "lens", "fisheye", "barrel", "image"],
+  source: glsl(
+    `// Fisheye: an equidistant fisheye projection of a flat picture, framed or in a circle.
+uniform sampler2D uImage;  // @control filter=linear wrap=mirror default=${SAMPLE_IMAGES.city} label="Image"
+uniform float uStrength;   // @control min=0 max=1 default=0.75 label="Strength (field of view)"
+uniform float uZoom;       // @control min=0.5 max=2 default=1 label="Zoom"
+uniform bool uLens;        // @control default=false label="Round lens"
+uniform float uRadius;     // @control min=0.1 max=0.7 default=0.42 label="Lens radius"
+uniform float uVignette;   // @control min=0 max=1 default=0.35 label="Vignette"
+${BACKDROP_CONTROLS}`,
+    PICTURE,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 mid = 0.5 * iResolution.xy;
+  vec2 d = fragCoord - mid;
+  // The unit radius: the half diagonal (corners stay corners) or the lens.
+  float unit = uLens ? uRadius * iResolution.y : 0.5 * length(iResolution.xy);
+  float r = length(d) / unit;
+  vec4 col = pictureRGBA(uImage, fragCoord / iResolution.xy);
+  if (r < 1.0) {
+    // A ray at angle r * fov / 2 lands at tan(angle) on the flat picture.
+    float fov = mix(0.02, 2.9, uStrength);
+    float src = tan(r * 0.5 * fov) / tan(0.5 * fov);
+    vec2 p = mid + d / max(length(d), 1e-5) * src * unit / uZoom;
+    vec4 lens = pictureRGBA(uImage, p / iResolution.xy);
+    lens.rgb *= 1.0 - uVignette * pow(r, 2.5);
+    float edge = uLens ? 1.0 - smoothstep(1.0 - 2.0 / unit, 1.0, r) : 1.0;
+    col = mix(col, lens, edge);
+  }
+  if (uLens) {
+    float rim = exp(-pow((r - 1.0) * unit / max(unit * 0.02, 1.5), 2.0));
+    col.rgb = mix(col.rgb, vec3(0.06), rim * 0.6);
+  } else {
+    col.rgb *= 1.0 - uVignette * smoothstep(0.98, 1.0, r);
+  }
+  fragColor = col;
+}`
+  ),
+  presets: [
+    { name: "Doorway peephole", values: { uLens: true, uStrength: 1, uRadius: 0.48, uVignette: 0.6 } },
+    { name: "Action cam", values: { uStrength: 0.45, uZoom: 1.1, uVignette: 0.15 } }
+  ]
+};
+var mirrorTiles = {
+  kind: "shader",
+  id: "mirror-tiles",
+  name: "Mirror tiles",
+  description: "A picture folded into mirrored kaleidoscope tiles, square or hexagonal, slowly turning and drifting.",
+  category: "distortion",
+  video: "filter",
+  tags: ["distortion", "kaleidoscope", "mirror", "tiles", "image"],
+  source: glsl(
+    `// Mirror tiles: each tile folds the picture about its centre into mirrored wedges.
+uniform sampler2D uImage;  // @control filter=linear wrap=mirror default=${SAMPLE_IMAGES.landscape} label="Image"
+uniform int uFold;         // @control min=2 max=8 step=2 default=6 label="Mirror fold"
+uniform bool uHex;         // @control default=false label="Hexagonal tiles"
+uniform float uTiles;      // @control min=1 max=8 default=2 label="Tiles down"
+uniform float uZoom;       // @control min=0.2 max=2 default=1 label="Picture scale"
+uniform float uSpin;       // @control min=-1 max=1 default=0.1 label="Spin"
+uniform float uDrift;      // @control min=0 max=1 default=0.2 label="Drift"
+${BACKDROP_CONTROLS}`,
+    PICTURE,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y * uTiles;
+  p += uDrift * iTime * vec2(0.13, 0.07);
+  vec2 q;
+  if (uHex) {
+    vec2 s = vec2(1.0, 1.7320508);
+    vec4 hc = floor(vec4(p, p - vec2(0.5, 0.866)) / s.xyxy) + 0.5;
+    vec4 h = vec4(p - hc.xy * s, p - (hc.zw + vec2(0.5, 0.5)) * s);
+    q = dot(h.xy, h.xy) < dot(h.zw, h.zw) ? h.xy : h.zw;
+  } else {
+    q = fract(p) - 0.5;
+  }
+  float sector = 6.28318 / float(uFold);
+  float a = mod(atan(q.y, q.x) + uSpin * iTime, sector);
+  a = min(a, sector - a);
+  q = length(q) * vec2(cos(a), sin(a));
+  vec2 pan = uDrift * 0.15 * vec2(sin(iTime * 0.21), cos(iTime * 0.17));
+  fragColor = pictureRGBA(uImage, 0.5 + pan + q * uZoom);
+}`
+  ),
+  presets: [
+    { name: "Hex jewel", values: { uHex: true, uFold: 6, uTiles: 2.5, uZoom: 0.5 } },
+    { name: "Four-way", values: { uFold: 4, uTiles: 2, uSpin: 0, uDrift: 0.4 } }
+  ]
+};
+var waveWarp = {
+  kind: "shader",
+  id: "wave-warp",
+  name: "Wave warp",
+  description: "A picture rippling in sine waves sideways, up and down or both, like a flag or a reflection on water, with lit crests.",
+  category: "distortion",
+  video: "filter",
+  tags: ["distortion", "wave", "flag", "water", "image"],
+  source: glsl(
+    `// Wave warp: rows and/or columns of the picture shifted along travelling sine waves.
+uniform sampler2D uImage;  // @control filter=linear wrap=mirror default=${SAMPLE_IMAGES.landscape} label="Image"
+uniform bool uRows;        // @control default=true label="Shift rows sideways"
+uniform bool uColumns;     // @control default=false label="Shift columns up and down"
+uniform float uAmplitude;  // @control min=0 max=0.08 default=0.02 label="Amplitude"
+uniform float uFrequency;  // @control min=0.5 max=40 default=6 label="Waves across"
+uniform float uSpeed;      // @control min=-6 max=6 default=2 label="Speed"
+uniform float uShade;      // @control min=0 max=1 default=0.3 label="Crest shading"
+${BACKDROP_CONTROLS}`,
+    PICTURE,
+    `float wave(float x) {
+  return sin(x) + 0.3 * sin(2.3 * x + 1.0);
+}
+float slope(float x) {
+  return cos(x) + 0.69 * cos(2.3 * x + 1.0);
+}
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  float py = uv.y * uFrequency * 6.28318 - iTime * uSpeed;
+  float px = uv.x * uFrequency * 6.28318 - iTime * uSpeed;
+  vec2 offset = vec2(uRows ? wave(py) : 0.0, uColumns ? wave(px) : 0.0) * uAmplitude;
+  float light = (uRows ? slope(py) : 0.0) + (uColumns ? slope(px) : 0.0);
+  vec4 pic = pictureRGBA(uImage, uv + offset);
+  float k = uShade * 0.18 * light * clamp(uAmplitude * 40.0, 0.0, 1.0);
+  fragColor = vec4(pic.rgb * (1.0 + k) + max(k, 0.0) * 0.4, pic.a);
+}`
+  ),
+  presets: [
+    { name: "Flag", values: { uRows: false, uColumns: true, uAmplitude: 0.03, uFrequency: 2, uSpeed: 3, uShade: 0.8 } },
+    { name: "Reflection", values: { uRows: true, uColumns: false, uAmplitude: 6e-3, uFrequency: 32, uSpeed: 3, uShade: 0.2 } },
+    { name: "Jelly", values: { uRows: true, uColumns: true, uAmplitude: 0.015, uFrequency: 3, uSpeed: 1.5 } }
+  ]
+};
+var ribbedGlass = {
+  kind: "shader",
+  id: "ribbed-glass",
+  name: "Ribbed glass",
+  description: "A picture seen through fluted glass: strips of refracted image with bright and dark rib edges, clear or frosted.",
+  category: "distortion",
+  video: "filter",
+  tags: ["distortion", "glass", "fluted", "reeded", "frosted", "image"],
+  source: glsl(
+    `// Ribbed glass: each rib is a little cylinder lens that flips and squeezes the picture behind it.
+uniform sampler2D uImage;  // @control filter=linear wrap=mirror default=${SAMPLE_IMAGES.city} label="Image"
+uniform float uWidth;      // @control min=4 max=120 default=28 label="Rib width (px)"
+uniform float uAngle;      // @control min=-90 max=90 default=0 label="Rib angle (\xB0)"
+uniform float uRefraction; // @control min=0 max=1 default=0.5 label="Refraction"
+uniform float uFrost;      // @control min=0 max=1 default=0.15 label="Frost"
+uniform float uHighlight;  // @control min=0 max=1 default=0.4 label="Edge highlights"
+uniform vec3 uTint;        // @control color default=#F2F7FA label="Glass tint"
+${BACKDROP_CONTROLS}`,
+    HASH,
+    PICTURE,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float a = radians(uAngle);
+  vec2 across = vec2(cos(a), sin(a));
+  float s = dot(fragCoord - 0.5 * iResolution.xy, across) / uWidth;
+  float f = fract(s) - 0.5;
+  vec2 bend = -across * f * uWidth * 3.0 * uRefraction;
+  // Frost: a small disc of samples, jittered per pixel.
+  float blur = uFrost * 14.0;
+  float spin = hash12(fragCoord) * 6.28318;
+  vec4 acc = vec4(0.0);
+  for (int i = 0; i < 9; i++) {
+    float fi = float(i);
+    float ang = fi * 2.39996 + spin;
+    vec2 o = blur * sqrt((fi + 0.5) / 9.0) * vec2(cos(ang), sin(ang));
+    acc += pictureRGBA(uImage, (fragCoord + bend + o) / iResolution.xy);
+  }
+  vec4 pic = acc / 9.0;
+  vec3 col = pic.rgb * uTint;
+  col = mix(col, vec3(dot(col, vec3(0.299, 0.587, 0.114))) + 0.08, uFrost * 0.2);
+  float hi = exp(-pow((f - 0.3) * 12.0, 2.0));
+  float lo = smoothstep(0.38, 0.5, abs(f));
+  col = col * (1.0 - 0.25 * lo * uHighlight) + hi * uHighlight * 0.35;
+  fragColor = vec4(col, pic.a);
+}`
+  ),
+  presets: [
+    { name: "Reeded", values: { uWidth: 14, uRefraction: 0.7, uFrost: 0 } },
+    { name: "Wide flutes", values: { uWidth: 70, uRefraction: 0.4, uHighlight: 0.6 } },
+    { name: "Frosted diagonal", values: { uAngle: 30, uFrost: 0.8, uWidth: 36 } }
+  ]
+};
+var showerGlass = {
+  kind: "shader",
+  id: "shower-glass",
+  name: "Shower glass",
+  description: "A picture blurred and bent behind textured shower-door glass, pebbled or streaked with rain, catching small highlights.",
+  category: "distortion",
+  video: "filter",
+  tags: ["distortion", "glass", "privacy", "rain", "pebble", "image"],
+  source: glsl(
+    `// Shower glass: a bumpy height field refracts and blurs the picture, lit from the top left.
+uniform sampler2D uImage;  // @control filter=linear wrap=mirror default=${SAMPLE_IMAGES.portrait2} label="Image"
+uniform bool uRain;        // @control default=false label="Rain pattern (else pebbled)"
+uniform float uScale;      // @control min=4 max=60 default=16 label="Bumps down"
+uniform float uRefraction; // @control min=0 max=1 default=0.5 label="Refraction"
+uniform float uBlur;       // @control min=0 max=1 default=0.35 label="Blur"
+uniform float uDim;        // @control min=0 max=1 default=0.15 label="Dim"
+uniform float uHighlight;  // @control min=0 max=1 default=0.5 label="Highlights"
+uniform float uFlow;       // @control min=0 max=1 default=0.1 label="Flow"
+${BACKDROP_CONTROLS}`,
+    HASH,
+    NOISE,
+    PICTURE,
+    `// Round domes on a jittered grid: 1 at a pebble's top, 0 between.
+float pebbles(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  float d = 8.0;
+  for (int y = -1; y <= 1; y++) {
+    for (int x = -1; x <= 1; x++) {
+      vec2 g = vec2(float(x), float(y));
+      vec2 o = 0.15 + 0.7 * hash22(i + g);
+      d = min(d, length(g + o - f));
+    }
+  }
+  return 1.0 - smoothstep(0.0, 0.75, d);
+}
+float height(vec2 p) {
+  float t = iTime * uFlow;
+  if (uRain) {
+    float streak = vnoise(vec2(p.x * 2.5, p.y * 0.3 + t * 2.0));
+    return 0.55 * streak + 0.45 * pebbles(p * 1.7 + vec2(0.0, t * 3.0));
+  }
+  return pebbles(p + vec2(0.0, t) + 0.3 * vnoise(p * 0.7));
+}
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = fragCoord / iResolution.y * uScale;
+  float e = 0.03;
+  vec2 grad = vec2(height(p + vec2(e, 0.0)) - height(p - vec2(e, 0.0)), height(p + vec2(0.0, e)) - height(p - vec2(0.0, e))) / (2.0 * e);
+  vec2 uv = fragCoord / iResolution.xy - grad * uRefraction * 0.02;
+  float blur = uBlur * 0.012;
+  float spin = hash12(fragCoord) * 6.28318;
+  vec4 acc = vec4(0.0);
+  for (int i = 0; i < 8; i++) {
+    float fi = float(i);
+    float ang = fi * 2.39996 + spin;
+    acc += pictureRGBA(uImage, uv + blur * sqrt((fi + 0.5) / 8.0) * vec2(cos(ang) * iResolution.y / iResolution.x, sin(ang)));
+  }
+  vec4 pic = acc / 8.0;
+  vec3 n = normalize(vec3(-grad * 0.12, 1.0));
+  vec3 h = normalize(normalize(vec3(-0.5, 0.6, 0.6)) + vec3(0.0, 0.0, 1.0));
+  float spec = pow(max(dot(n, h), 0.0), 60.0);
+  float rim = clamp(dot(n.xy, vec2(-0.6, 0.6)) * 2.0, -1.0, 1.0);
+  vec3 col = pic.rgb * (1.0 - uDim) * (1.0 + 0.12 * rim * uHighlight) + spec * uHighlight * 0.8;
+  fragColor = vec4(col, pic.a);
+}`
+  ),
+  presets: [
+    { name: "Rain door", values: { uRain: true, uScale: 10, uFlow: 0.3, uBlur: 0.3 } },
+    { name: "Privacy", values: { uScale: 28, uRefraction: 0.8, uBlur: 0.9, uDim: 0.25 } }
+  ]
+};
+var datamosh = {
+  kind: "shader",
+  id: "datamosh",
+  name: "Datamosh",
+  description: "A picture breaking down like a corrupted video stream in bursts: macroblocks smear along a false motion field, stick in the wrong place and bleed colour.",
+  category: "distortion",
+  video: "filter",
+  tags: ["distortion", "datamosh", "glitch", "compression", "image"],
+  source: glsl(
+    `// Datamosh: block motion vectors applied to a stale frame, stuck blocks and smeared chroma, in bursts.
+uniform sampler2D uImage;  // @control filter=linear wrap=mirror default=${SAMPLE_IMAGES.portrait} label="Image"
+uniform float uBlock;      // @control min=8 max=64 default=24 step=1 label="Macroblock (px)"
+uniform float uAmount;     // @control min=0 max=1 default=0.6 label="Amount"
+uniform float uSmear;      // @control min=0 max=0.4 default=0.12 label="Smear length"
+uniform float uRate;       // @control min=0.2 max=4 default=0.8 label="Bursts per second"
+uniform float uBleed;      // @control min=0 max=1 default=0.6 label="Colour bleed"
+${BACKDROP_CONTROLS}`,
+    HASH,
+    NOISE,
+    PICTURE,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  float t = iTime * uRate;
+  float epoch = floor(t);
+  float ph = fract(t);
+  float on = step(1.0 - uAmount * 0.85, hash12(vec2(epoch, 7.0))) * smoothstep(0.0, 0.08, ph);
+  vec2 block = floor(fragCoord / uBlock);
+  // One motion vector per macroblock, from a smooth field that changes each burst.
+  vec2 field = block * 0.12 + epoch * vec2(3.1, 1.7);
+  vec2 mv = vec2(vnoise(field), vnoise(field + 9.7)) * 2.0 - 1.0;
+  vec2 disp = mv * uSmear * ph * on * vec2(iResolution.y / iResolution.x, 1.0);
+  // Stuck blocks: content from the wrong place, sliding slowly.
+  vec2 bh = hash22(block + epoch * 13.0);
+  float stuck = on * step(1.0 - 0.3 * uAmount, bh.x);
+  vec2 wrong = (floor(bh * 6.0) - 2.5) * uBlock / iResolution.xy;
+  vec2 st = uv + stuck * (wrong + mv * 0.02 * ph);
+  // Smear: samples along the motion, weighted towards the oldest.
+  vec4 acc = vec4(0.0);
+  float wsum = 0.0;
+  for (int i = 0; i < 6; i++) {
+    float k = float(i) / 5.0;
+    float w = 0.4 + k;
+    acc += w * pictureRGBA(uImage, st - disp * k);
+    wsum += w;
+  }
+  vec4 pic = acc / wsum;
+  // Bleed: chroma from the block's corner, dragged further along the motion.
+  vec2 chromaUV = (block * uBlock + 0.5) / iResolution.xy - disp * 1.6;
+  vec3 smeared = picture(uImage, chromaUV);
+  float y = dot(pic.rgb, vec3(0.299, 0.587, 0.114));
+  vec3 chroma = mix(pic.rgb - y, smeared - dot(smeared, vec3(0.299, 0.587, 0.114)), uBleed * on);
+  vec3 col = y + chroma * (1.0 + 0.4 * on * uBleed);
+  // A faint block grid where the stream is broken.
+  vec2 edge = abs(fract(fragCoord / uBlock) - 0.5);
+  col *= 1.0 - 0.06 * on * step(0.47, max(edge.x, edge.y));
+  fragColor = vec4(clamp(col, 0.0, 1.0), pic.a);
+}`
+  ),
+  presets: [
+    { name: "Melted stream", values: { uAmount: 1, uSmear: 0.3, uRate: 0.4, uBleed: 1 } },
+    { name: "Hiccup", values: { uAmount: 0.4, uSmear: 0.05, uRate: 2.5, uBlock: 16 } }
+  ]
+};
+var polarWarp = {
+  kind: "shader",
+  id: "polar-warp",
+  name: "Polar warp",
+  description: "A picture wrapped into a circle, as a tiny planet or a tunnel, or a circle unrolled into a strip, slowly turning.",
+  category: "distortion",
+  video: "filter",
+  tags: ["distortion", "polar", "tiny-planet", "tunnel", "image"],
+  source: glsl(
+    `// Polar warp: rectangular \u2192 polar (the picture's bottom edge at the centre), or polar \u2192 rectangular.
+uniform sampler2D uImage;  // @control filter=linear wrap=mirror default=${SAMPLE_IMAGES.landscape} label="Image"
+uniform bool uUnwrap;      // @control default=false label="Unwrap (polar \u2192 rectangular)"
+uniform bool uInsideOut;   // @control default=false label="Inside out (tunnel)"
+uniform float uZoom;       // @control min=0.3 max=3 default=1 label="Zoom"
+uniform float uSpin;       // @control min=-0.5 max=0.5 default=0.04 label="Spin (turns/s)"
+uniform float uTwist;      // @control min=-2 max=2 default=0 label="Twist"
+${BACKDROP_CONTROLS}`,
+    PICTURE,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec2 st;
+  if (uUnwrap) {
+    // Across is the angle, up is the radius of the circle inscribed in the picture.
+    float r = (uInsideOut ? 1.0 - uv.y : uv.y) * 0.5 / uZoom;
+    float a = (uv.x + iTime * uSpin + uTwist * r) * 6.28318;
+    st = 0.5 + r * vec2(cos(a), sin(a));
+  } else {
+    vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
+    float r = length(p) * 2.0 / uZoom;
+    // The angle runs across the picture and back, so the seam is a mirror and does not show.
+    float u = fract(atan(p.y, p.x) / 6.28318 + iTime * uSpin + uTwist * r * 0.25);
+    u = 1.0 - abs(1.0 - 2.0 * u);
+    float v = uInsideOut ? 1.0 - min(r, 1.0) : min(r, 1.0);
+    st = vec2(u, v);
+  }
+  fragColor = pictureRGBA(uImage, st);
+}`
+  ),
+  presets: [
+    { name: "Tiny planet", values: { uUnwrap: false, uInsideOut: false, uZoom: 1.1, uSpin: 0.03 } },
+    { name: "Tunnel", values: { uUnwrap: false, uInsideOut: true, uZoom: 0.9, uSpin: -0.05, uTwist: 0.8 } },
+    { name: "Unrolled", values: { uUnwrap: true, uZoom: 1, uSpin: 0.02 } }
+  ]
+};
+var textureDisplace = {
+  kind: "shader",
+  id: "texture-displace",
+  name: "Texture displace",
+  description: "A picture pushed around by a second, scrolling texture, by its red and green or by its light and shade.",
+  category: "distortion",
+  video: "filter",
+  tags: ["distortion", "displacement", "map", "image"],
+  source: glsl(
+    `// Texture displace: each pixel moved by a displacement map (or its brightness slope) that scrolls.
+uniform sampler2D uImage;  // @control filter=linear wrap=mirror default=${SAMPLE_IMAGES.city} label="Image"
+uniform sampler2D uMap;    // @control filter=linear wrap=mirror default=${SAMPLE_IMAGES.landscape} label="Displacement map"
+uniform float uStrength;   // @control min=0 max=0.2 default=0.06 label="Strength"
+uniform float uScale;      // @control min=0.2 max=4 default=1.5 label="Map scale"
+uniform vec2 uScroll;      // @control min=-0.3 max=0.3 default=0.03,0.02 label="Scroll"
+uniform bool uSlope;       // @control default=false label="Push by brightness slope (else by red/green)"
+${BACKDROP_CONTROLS}`,
+    HASH,
+    NOISE,
+    PICTURE,
+    `// The map, or soft noise while there is none (an empty image control is a 1 \xD7 1 placeholder).
+vec3 mapAt(vec2 p) {
+  if (textureSize(uMap, 0).x > 1) return texture(uMap, p).rgb;
+  return vec3(vnoise(p * 6.0), vnoise(p * 6.0 + 11.3), vnoise(p * 6.0 + 23.1));
+}
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec2 m = uv * uScale + uScroll * iTime;
+  vec2 offset;
+  if (uSlope) {
+    float e = 0.03;
+    vec3 w = vec3(0.299, 0.587, 0.114);
+    float dx = dot(mapAt(m + vec2(e, 0.0)) - mapAt(m - vec2(e, 0.0)), w);
+    float dy = dot(mapAt(m + vec2(0.0, e)) - mapAt(m - vec2(0.0, e)), w);
+    offset = vec2(dx, dy) / (2.0 * e) * uStrength * 0.1;
+  } else {
+    offset = (mapAt(m).rg - 0.5) * 2.0 * uStrength;
+  }
+  fragColor = pictureRGBA(uImage, uv + offset);
+}`
+  ),
+  presets: [
+    { name: "Embossed", values: { uSlope: true, uStrength: 0.08, uScale: 1, uScroll: [0, 0] } },
+    { name: "Drifting channels", values: { uSlope: false, uStrength: 0.03, uScale: 2, uScroll: [0.05, -0.04] } }
+  ]
+};
+var distortionShaders = [
+  twirl,
+  pinchBulge,
+  fisheye,
+  mirrorTiles,
+  waveWarp,
+  ribbedGlass,
+  showerGlass,
+  datamosh,
+  polarWarp,
+  textureDisplace
+];
+
+// src/catalog/types.ts
+var EFFECT_CATEGORIES = [
+  "gradient",
+  "organic",
+  "pattern",
+  "light",
+  "space",
+  "retro",
+  "image",
+  "overlay",
+  "text",
+  "morph",
+  "interaction",
+  "pyrotechnics",
+  "timewarp",
+  "melt",
+  "electric",
+  "splatter",
+  "bubble",
+  "sticker",
+  "trail",
+  "particles",
+  "debris",
+  "impact",
+  "comic",
+  "atmosphere",
+  "glow",
+  "shadow",
+  "distortion",
+  "transition",
+  "loader",
+  "data",
+  "icon"
+];
+var VIDEO_USES = ["filter", "transition", "interactive", "stills", "none"];
+var VECTOR_CONTROL_TYPES = ["float", "int", "bool", "color", "text"];
+var PLACEHOLDER = /\{\{\s*([A-Za-z_]\w*)\s*(?::\s*([A-Za-z0-9]*)([^}]*))?\}\}/g;
+function motionStrings(motion) {
+  const out = [];
+  const walk = (v) => {
+    if (typeof v === "string") out.push(v);
+    else if (Array.isArray(v)) v.forEach(walk);
+    else if (v && typeof v === "object") Object.values(v).forEach(walk);
+  };
+  walk(motion);
+  return out;
+}
+function vectorControls(motion) {
+  const controls = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const text of motionStrings(motion)) {
+    for (const [, name, type, attributes] of text.matchAll(PLACEHOLDER)) {
+      if (type === void 0 || seen.has(name) || !VECTOR_CONTROL_TYPES.includes(type)) continue;
+      seen.add(name);
+      const colour = type === "color";
+      controls.push(controlFromDeclaration(name, colour ? "vec3" : type, `${attributes}${colour ? " color" : ""}`, controls.length + 1));
+    }
+  }
+  return controls;
+}
+function vectorEffectControls(effect) {
+  const declared = vectorControls(effect.motion);
+  const names = new Set(declared.map((c) => c.name));
+  const listed = (effect.controls ?? []).filter((c) => !names.has(c.name));
+  return [...declared, ...listed.map((c, i) => vectorControlDef(c, declared.length + i + 1))];
+}
+function vectorControlIssues(motion) {
+  const issues = [];
+  const declarations = /* @__PURE__ */ new Map();
   for (const text of motionStrings(motion)) {
     for (const [whole, name, type] of text.matchAll(PLACEHOLDER)) {
       if (type === void 0) continue;
@@ -16194,14 +18965,14 @@ function numberControl(name, value, min, max, label, step) {
 }
 
 // src/catalog/text.ts
-var r18 = (n10) => Math.round(n10 * 10) / 10;
-function fit3(text, width, max, ems = textWidthEm(text)) {
+var r110 = (n11) => Math.round(n11 * 10) / 10;
+function fit5(text, width, max, ems = textWidthEm(text)) {
   const e = Math.max(0.6, ems);
   const size = Math.min(max, width / e);
-  return { size: r18(size), length: r18(e * size), left: r18(200 - e * size / 2) };
+  return { size: r110(size), length: r110(e * size), left: r110(200 - e * size / 2) };
 }
 var lettersOf = (text) => Array.from(String(text));
-var mixHex2 = (a, b, t) => {
+var mixHex3 = (a, b, t) => {
   if (isCurrentColor(a) || isCurrentColor(b)) {
     const css = (c) => isCurrentColor(c) ? CURRENT_COLOR : rgbToHex(Array.isArray(c) ? c : [1, 1, 1]);
     return `color-mix(in srgb, ${css(a)}, ${css(b)} ${Math.round(t * 100)}%)`;
@@ -16211,17 +18982,17 @@ var mixHex2 = (a, b, t) => {
   return rgbToHex([0, 1, 2].map((i) => x[i] + (y[i] - x[i]) * t));
 };
 var holds = (id, attr, keys2) => keys2.map(([delay, value]) => ({ id, attrs: { [attr]: [value, value] }, delay, ms: 0 }));
-var n9 = (name) => `{{${name}}}`;
+var n10 = (name) => `{{${name}}}`;
 var MONO = `ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace`;
 var MONO_EM = 0.6;
 var HEAVY2 = `'Arial Black', 'Helvetica Neue', Impact, system-ui, sans-serif`;
-var SANS5 = `system-ui, 'Helvetica Neue', Arial, sans-serif`;
+var SANS7 = `system-ui, 'Helvetica Neue', Arial, sans-serif`;
 var SCRIPT = `'Pacifico', 'Brush Script MT', 'Segoe Script', 'Snell Roundhand', cursive`;
 var CAP = 0.72;
 var typeface = (font, weight) => `{{font: text default="${font}" label='Font'}} {{weight: int min=100 max=900 default=${weight} step=100 label='Weight'}} {{inline: bool default=false label='Inline'}}`;
 function frame(v, left, width, base, size, overhang = [0.05, 0, DESCENT, 0]) {
   const spill = overhang.map((e) => Math.round(Math.max(0, e) * 100) / 100).join(" ");
-  return v.inline ? { viewBox: `${r18(left)} ${r18(base - size * CAP)} ${r18(width)} ${r18(size * CAP)}`, overflow: "visible", backdrop: 0, overhang: spill } : { viewBox: "0 0 400 200", overflow: "hidden", backdrop: 1, overhang: spill };
+  return v.inline ? { viewBox: `${r110(left)} ${r110(base - size * CAP)} ${r110(width)} ${r110(size * CAP)}`, overflow: "visible", backdrop: 0, overhang: spill } : { viewBox: "0 0 400 200", overflow: "hidden", backdrop: 1, overhang: spill };
 }
 var DESCENT = 0.25;
 var glowing = (overhang, by) => overhang.map((e) => e + by);
@@ -16242,16 +19013,16 @@ 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 = r18(Math.min(44, room(v, 340) / ((count + 1) * MONO_EM)));
-    const left = r18(200 - (count + 1) * MONO_EM * size / 2);
+    const size = r110(Math.min(44, room(v, 340) / ((count + 1) * MONO_EM)));
+    const left = r110(200 - (count + 1) * MONO_EM * size / 2);
     const typing = Math.round(count * Number(v.pace));
-    const base = r18(100 + size * 0.35);
+    const base = r110(100 + size * 0.35);
     return {
       ...frame(v, left, (count + 1) * MONO_EM * size, base, size, [0.08, 0, DESCENT, 0]),
       size,
       left,
       base,
-      end: r18(left + count * MONO_EM * size),
+      end: r110(left + count * MONO_EM * size),
       typing,
       ...Object.fromEntries(Array.from({ length: BLINKS }, (_, k) => [`blink${k}`, typing + k * 500]))
     };
@@ -16259,9 +19030,9 @@ var typewriter = {
   motion: {
     svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='Hello, world.' label='Text'}} {{paper: color default=#111827 label='Background'}} {{ink: color default=#F9FAFB label='Text colour'}} {{pace: float min=30 max=300 default=90 step=5 label='Ms per letter'}} ${typeface(MONO, 400)} --><rect width="400" height="200" fill="{{paper}}" opacity="{{backdrop}}"/><text id="typed" x="{{left}}" y="{{base}}" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}" xml:space="preserve">{{text}}</text><text id="caret" x="{{end}}" y="{{base}}" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}" opacity="0">\u258C</text></svg>`,
     animate: [
-      { id: "typed", write: "{{text}}", caret: "\u258C", ms: n9("typing"), ease: "linear" },
+      { id: "typed", write: "{{text}}", caret: "\u258C", ms: n10("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) => [n9(`blink${k}`), k % 2 ? 0 : 1])])
+      ...holds("caret", "opacity", [[0, 0], ...Array.from({ length: BLINKS }, (_, k) => [n10(`blink${k}`), k % 2 ? 0 : 1])])
     ]
   }
 };
@@ -16279,17 +19050,17 @@ var scrambleText = {
   ],
   derived: (v) => {
     const count = Math.max(1, lettersOf(v.text).length);
-    const size = r18(Math.min(60, room(v, 360) / (count * MONO_EM)));
-    const width = r18(count * MONO_EM * size);
-    const base = r18(100 + size * 0.35);
-    return { size, base, barX: r18(200 - width / 2), barY: r18(base + size * 0.3), barW: width, decode: Math.round(count * Number(v.pace)), glowWide: Number(v.glow) * 2, ...frame(v, 200 - width / 2, width, base, size, glowing([0.08, 0, Math.max(DESCENT, 0.3 + 3 / size), 0], Number(v.glow) * 4 / size)) };
+    const size = r110(Math.min(60, room(v, 360) / (count * MONO_EM)));
+    const width = r110(count * MONO_EM * size);
+    const base = r110(100 + size * 0.35);
+    return { size, base, barX: r110(200 - width / 2), barY: r110(base + size * 0.3), barW: width, decode: Math.round(count * Number(v.pace)), glowWide: Number(v.glow) * 2, ...frame(v, 200 - width / 2, width, base, size, glowing([0.08, 0, Math.max(DESCENT, 0.3 + 3 / size), 0], Number(v.glow) * 4 / size)) };
   },
   motion: {
     svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='ACCESS GRANTED' label='Text'}} {{glyphs: text default='ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&@$*+' label='Scramble glyphs'}} {{background: color default=#05070D label='Background'}} {{ink: color default=#E2E8F0 label='Text colour'}} {{accent: color default=#22D3EE label='Accent'}} {{pace: float min=20 max=250 default=70 step=5 label='Ms per letter'}} {{glow: float min=0 max=6 default=2 step=0.5 label='Glow'}} ${typeface(MONO, 700)} --><defs><filter id="glow" x="-20%" y="-50%" width="140%" height="200%"><feGaussianBlur stdDeviation="{{glowWide}}" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><text id="word" x="200" y="{{base}}" text-anchor="middle" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}" filter="url(#glow)" xml:space="preserve">{{text}}</text><rect id="bar" x="{{barX}}" y="{{barY}}" width="0" height="3" fill="{{accent}}"/></svg>`,
     animate: [
       // Pure noise for a moment (the scramble runs before the change starts), then it decodes.
-      { id: "word", write: "{{text}}", scramble: "{{glyphs}}", delay: 500, ms: n9("decode"), ease: "linear" },
-      { id: "bar", attrs: { width: [0, n9("barW")] }, delay: 500, ms: n9("decode"), ease: "linear" }
+      { id: "word", write: "{{text}}", scramble: "{{glyphs}}", delay: 500, ms: n10("decode"), ease: "linear" },
+      { id: "bar", attrs: { width: [0, n10("barW")] }, delay: 500, ms: n10("decode"), ease: "linear" }
     ]
   }
 };
@@ -16316,20 +19087,20 @@ var kineticStagger = {
     const stagger = Number(v.stagger);
     const out = {
       ...frame(v, 200 - ems * size / 2, ems * size, base, size, [0.15, 0, Math.max(DESCENT, 0.2 + 6 / size), 0]),
-      size: r18(size),
-      base: r18(base),
-      rise: r18(base - size * 0.1),
-      drop: r18(base + size * 0.6),
-      lineX: r18(200 - ems * size / 2),
-      lineY: r18(base + size * 0.2),
-      lineW: r18(ems * size),
+      size: r110(size),
+      base: r110(base),
+      rise: r110(base - size * 0.1),
+      drop: r110(base + size * 0.6),
+      lineX: r110(200 - ems * size / 2),
+      lineY: r110(base + size * 0.2),
+      lineW: r110(ems * size),
       lineAt: Math.round(letters.length * stagger + 400)
     };
     let x = 200 - ems * size / 2;
     for (let i = 0; i < SLOTS2; i++) {
       const w = (widths[i] ?? 0) * size;
       out[`c${i}`] = letters[i]?.trim() ?? "";
-      out[`x${i}`] = r18(x + w / 2);
+      out[`x${i}`] = r110(x + w / 2);
       out[`d${i}`] = Math.round(i * stagger);
       out[`e${i}`] = Math.round(i * stagger + 380);
       x += w;
@@ -16346,13 +19117,13 @@ var kineticStagger = {
         {
           id: `l${i}`,
           attrs: { transform: [`translate({{x${i}}} {{drop}}) rotate(-28) scale(0.3)`, `translate({{x${i}}} {{rise}}) rotate(5) scale(1.12)`], opacity: [0, 1] },
-          delay: n9(`d${i}`),
+          delay: n10(`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: n9(`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: n10(`e${i}`), ms: 260, ease: "in-out" }
       ]).flat(),
-      { id: "line", attrs: { width: [0, n9("lineW")] }, delay: n9("lineAt"), ms: 500, ease: "in-out" }
+      { id: "line", attrs: { width: [0, n10("lineW")] }, delay: n10("lineAt"), ms: 500, ease: "in-out" }
     ]
   }
 };
@@ -16373,18 +19144,18 @@ 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, left } = fit3(String(v.text), room(v, 340), 84);
+    const { size, length, left } = fit5(String(v.text), room(v, 340), 84);
     return {
       ...frame(v, left, length, 100 + size * 0.3, size, glowing([0.1, 0, DESCENT, 0], Number(v.glow) * 6 / size)),
-      hazeX: r18(Math.max(170, length / 2 + 30)),
+      hazeX: r110(Math.max(170, length / 2 + 30)),
       head: letters.slice(0, k).join(""),
       mid: letters[k] ?? "",
       tail: letters.slice(k + 1).join(""),
       size,
       length,
-      base: r18(100 + size * 0.3),
+      base: r110(100 + size * 0.3),
       far: Number(v.glow) * 3,
-      core: mixHex2(v.tube, [1, 1, 1], 0.6)
+      core: mixHex3(v.tube, [1, 1, 1], 0.6)
     };
   },
   motion: (() => {
@@ -16416,15 +19187,15 @@ 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, left } = fit3(String(v.text), room(v, 360), 100);
+    const { size, length, left } = fit5(String(v.text), room(v, 360), 100);
     const edge = Number(v.width) / 2 / size;
-    return { size, length, base: r18(100 + size * 0.35), dash: Math.round(size * 6), ...frame(v, left, length, 100 + size * 0.35, size, glowing([0.05, 0, DESCENT, 0], edge)) };
+    return { size, length, base: r110(100 + size * 0.35), dash: Math.round(size * 6), ...frame(v, left, length, 100 + size * 0.35, size, glowing([0.05, 0, DESCENT, 0], edge)) };
   },
   motion: {
     svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='Draw' label='Text'}} {{background: color default=#FFFBF5 label='Background'}} {{outline: color default=#1E293B label='Outline'}} {{fill: color default=#F97316 label='Fill'}} {{width: float min=0.5 max=6 default=2 step=0.5 label='Outline width'}} {{fillOpacity: float min=0 max=1 default=1 label='Fill opacity'}} ${typeface(HEAVY2, 900)} --><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><text id="word" x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{fill}}" fill-opacity="0" stroke="{{outline}}" stroke-width="{{width}}" stroke-linejoin="round" stroke-dasharray="0 {{dash}}">{{text}}</text></svg>`,
     animate: [
       { id: "word", attrs: { "stroke-dasharray": ["0 {{dash}}", "{{dash}} 0"] }, ms: 2e3, ease: "in-out" },
-      { id: "word", attrs: { "fill-opacity": [0, n9("fillOpacity")] }, delay: 1500, ms: 700, ease: "out" }
+      { id: "word", attrs: { "fill-opacity": [0, n10("fillOpacity")] }, delay: 1500, ms: 700, ease: "out" }
     ]
   }
 };
@@ -16441,22 +19212,22 @@ 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 } = fit3(String(v.text), room(v, 360), 88);
+    const { size, length, left } = fit5(String(v.text), room(v, 360), 88);
     return {
       ...frame(v, left, length, 100 + size * 0.36, size, [0.05, 10 / size, Math.max(DESCENT, 34 / size), 10 / size]),
       size,
       length,
-      base: r18(100 + size * 0.36),
-      shift: r18(size * 0.8),
-      lineX1: r18(left - 10),
-      lineX2: r18(400 - left + 10),
-      captionY: r18(100 + size * 0.36 + 30)
+      base: r110(100 + size * 0.36),
+      shift: r110(size * 0.8),
+      lineX1: r110(left - 10),
+      lineX2: r110(400 - left + 10),
+      captionY: r110(100 + size * 0.36 + 30)
     };
   },
   motion: (() => {
     const word = `<text x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}">{{text}}</text>`;
     return {
-      svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='Chapter One' label='Text'}} {{caption: text default='The beginning' label='Caption'}} {{background: color default=#0F172A label='Background'}} {{ink: color default=#F8FAFC label='Text colour'}} {{line: color default=#38BDF8 label='Line'}} ${typeface(SANS5, 800)} --><defs><clipPath id="above"><rect x="-5000" y="-5000" width="10400" height="5100"/></clipPath><clipPath id="below"><rect x="-5000" y="100" width="10400" height="5100"/></clipPath></defs><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><g clip-path="url(#above)"><g id="top" transform="translate(0 {{shift}})">${word}</g></g><g clip-path="url(#below)"><g id="bottom" transform="translate(0 -{{shift}})">${word}</g></g><path id="line" d="M{{lineX1}} 100 H{{lineX2}}" stroke="{{line}}" stroke-width="2.5" stroke-linecap="round"/><text id="caption" x="200" y="{{captionY}}" text-anchor="middle" font-family="{{font}}" font-size="13" letter-spacing="3" fill="{{ink}}" opacity="0">{{caption}}</text></svg>`,
+      svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='Chapter One' label='Text'}} {{caption: text default='The beginning' label='Caption'}} {{background: color default=#0F172A label='Background'}} {{ink: color default=#F8FAFC label='Text colour'}} {{line: color default=#38BDF8 label='Line'}} ${typeface(SANS7, 800)} --><defs><clipPath id="above"><rect x="-5000" y="-5000" width="10400" height="5100"/></clipPath><clipPath id="below"><rect x="-5000" y="100" width="10400" height="5100"/></clipPath></defs><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><g clip-path="url(#above)"><g id="top" transform="translate(0 {{shift}})">${word}</g></g><g clip-path="url(#below)"><g id="bottom" transform="translate(0 -{{shift}})">${word}</g></g><path id="line" d="M{{lineX1}} 100 H{{lineX2}}" stroke="{{line}}" stroke-width="2.5" stroke-linecap="round"/><text id="caption" x="200" y="{{captionY}}" text-anchor="middle" font-family="{{font}}" font-size="13" letter-spacing="3" fill="{{ink}}" opacity="0">{{caption}}</text></svg>`,
       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" },
@@ -16482,7 +19253,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 } = fit3(String(v.text), room(v, 330), 56);
+    const { size, length, left } = fit5(String(v.text), room(v, 330), 56);
     const base = 100 + size * 0.35;
     const x0 = left - size * 0.25;
     const x1 = 400 - left + size * 0.2;
@@ -16491,15 +19262,15 @@ var highlighter = {
       ...frame(v, left, length, base, size, [0.05, 0.2, DESCENT, 0.25]),
       size,
       length,
-      base: r18(base),
-      swipe: `M${r18(x0)} ${r18(y + size * 0.05)} Q${r18((x0 + x1) / 2)} ${r18(y - size * 0.06)} ${r18(x1)} ${r18(y - size * 0.02)}`,
-      ragged: `M${r18(x0 + size * 0.15)} ${r18(y + size * 0.3)} L${r18(x1 - size * 0.1)} ${r18(y + size * 0.26)}`,
-      thick: r18(size * 0.72),
-      thin: r18(size * 0.16)
+      base: r110(base),
+      swipe: `M${r110(x0)} ${r110(y + size * 0.05)} Q${r110((x0 + x1) / 2)} ${r110(y - size * 0.06)} ${r110(x1)} ${r110(y - size * 0.02)}`,
+      ragged: `M${r110(x0 + size * 0.15)} ${r110(y + size * 0.3)} L${r110(x1 - size * 0.1)} ${r110(y + size * 0.26)}`,
+      thick: r110(size * 0.72),
+      thin: r110(size * 0.16)
     };
   },
   motion: {
-    svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='Ship it faster' label='Phrase'}} {{background: color default=#FFFFFF label='Background'}} {{ink: color default=#111827 label='Text colour'}} {{marker: color default=#FDE047 label='Marker'}} ${typeface(SANS5, 700)} --><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><g transform="rotate(-1.2 200 100)" opacity="0.9"><path id="swipe" d="{{swipe}}" fill="none" stroke="{{marker}}" stroke-width="{{thick}}"/><path id="ragged" d="{{ragged}}" fill="none" stroke="{{marker}}" stroke-width="{{thin}}" stroke-linecap="round"/></g><text id="phrase" x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}" opacity="0">{{text}}</text></svg>`,
+    svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='Ship it faster' label='Phrase'}} {{background: color default=#FFFFFF label='Background'}} {{ink: color default=#111827 label='Text colour'}} {{marker: color default=#FDE047 label='Marker'}} ${typeface(SANS7, 700)} --><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><g transform="rotate(-1.2 200 100)" opacity="0.9"><path id="swipe" d="{{swipe}}" fill="none" stroke="{{marker}}" stroke-width="{{thick}}"/><path id="ragged" d="{{ragged}}" fill="none" stroke="{{marker}}" stroke-width="{{thin}}" stroke-linecap="round"/></g><text id="phrase" x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}" opacity="0">{{text}}</text></svg>`,
     animate: [
       { id: "phrase", attrs: { opacity: [0, 1] }, ms: 300, ease: "out" },
       { id: "swipe", draw: true, delay: 350, ms: 650, ease: "in-out" },
@@ -16536,28 +19307,28 @@ var wordCycle = {
     return {
       ...frame(v, left, total * size, base, size, [0.08, 0, Math.max(DESCENT, 0.18 + 4 / size), 0]),
       bold: Math.min(900, Number(v.weight) + 100),
-      size: r18(size),
-      base: r18(base),
-      px: r18(left),
-      plen: r18(Math.max(0.6, lead) * size),
-      wx: r18(wx),
-      clipX: r18(wx - 4),
-      clipY: r18(base - size * 1),
-      clipW: r18(Math.max(...ems) * size + 8),
-      clipH: r18(size * 1.32),
-      underY: r18(base + size * 0.18),
+      size: r110(size),
+      base: r110(base),
+      px: r110(left),
+      plen: r110(Math.max(0.6, lead) * size),
+      wx: r110(wx),
+      clipX: r110(wx - 4),
+      clipY: r110(base - size * 1),
+      clipW: r110(Math.max(...ems) * size + 8),
+      clipH: r110(size * 1.32),
+      underY: r110(base + size * 0.18),
       ...Object.fromEntries(
         [...words, words[0]].flatMap((_, k) => [
-          [`y${k}`, r18(base + k * step)],
-          [`o${k}`, r18(k * step)],
-          [`len${k}`, r18(ems[k % CYCLE_WORDS] * size)]
+          [`y${k}`, r110(base + k * step)],
+          [`o${k}`, r110(k * step)],
+          [`len${k}`, r110(ems[k % CYCLE_WORDS] * size)]
         ])
       ),
       ...Object.fromEntries(words.map((w, k) => [`w${k}`, w]))
     };
   },
   motion: {
-    svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{prefix: text default='We build' label='Lead-in'}} {{word1: text default=apps label='Word 1'}} {{word2: text default=brands label='Word 2'}} {{word3: text default=websites label='Word 3'}} {{word4: text default=games label='Word 4'}} {{background: color default=#FFFFFF label='Background'}} {{ink: color default=#0F172A label='Text colour'}} {{accent: color default=#6366F1 label='Accent'}} ${typeface(SANS5, 700)} --><defs><clipPath id="window"><rect x="{{clipX}}" y="{{clipY}}" width="{{clipW}}" height="{{clipH}}"/></clipPath></defs><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><text x="{{px}}" y="{{base}}" textLength="{{plen}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}">{{prefix}}</text><g clip-path="url(#window)"><g id="reel" transform="translate(0 -0)">${Array.from(
+    svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{prefix: text default='We build' label='Lead-in'}} {{word1: text default=apps label='Word 1'}} {{word2: text default=brands label='Word 2'}} {{word3: text default=websites label='Word 3'}} {{word4: text default=games label='Word 4'}} {{background: color default=#FFFFFF label='Background'}} {{ink: color default=#0F172A label='Text colour'}} {{accent: color default=#6366F1 label='Accent'}} ${typeface(SANS7, 700)} --><defs><clipPath id="window"><rect x="{{clipX}}" y="{{clipY}}" width="{{clipW}}" height="{{clipH}}"/></clipPath></defs><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><text x="{{px}}" y="{{base}}" textLength="{{plen}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}">{{prefix}}</text><g clip-path="url(#window)"><g id="reel" transform="translate(0 -0)">${Array.from(
       { length: CYCLE_WORDS + 1 },
       (_, k) => `<text x="{{wx}}" y="{{y${k}}}" textLength="{{len${k}}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{bold}}" fill="{{accent}}">{{w${k % CYCLE_WORDS}}}</text>`
     ).join("")}</g></g><rect id="under" x="{{wx}}" y="{{underY}}" width="{{len0}}" height="4" rx="2" fill="{{accent}}"/></svg>`,
@@ -16565,7 +19336,7 @@ var wordCycle = {
       const at3 = { delay: (i + 1) * SHOW_MS + i * ROLL_MS, ms: ROLL_MS, ease: "in-out" };
       return [
         { id: "reel", attrs: { transform: [`translate(0 -{{o${i}}})`, `translate(0 -{{o${i + 1}}})`] }, ...at3 },
-        { id: "under", attrs: { width: [n9(`len${i}`), n9(`len${i + 1}`)] }, ...at3 }
+        { id: "under", attrs: { width: [n10(`len${i}`), n10(`len${i + 1}`)] }, ...at3 }
       ];
     }).flat()
   }
@@ -16586,9 +19357,9 @@ var liquidFill = {
   ],
   // The surface starts under the letters and ends above their caps.
   derived: (v) => {
-    const { size, length, left } = fit3(String(v.text), room(v, 360), 110);
+    const { size, length, left } = fit5(String(v.text), room(v, 360), 110);
     const base = 100 + size * 0.36;
-    return { ...frame(v, left, length, base, size), size, length, base: r18(base), low: r18(base + 12), high: r18(base - size * 0.82 - 12) };
+    return { ...frame(v, left, length, base, size), size, length, base: r110(base), low: r110(base + 12), high: r110(base - size * 0.82 - 12) };
   },
   motion: (() => {
     const word = `x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}"`;
@@ -16635,19 +19406,19 @@ 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, left } = fit3(String(v.text), room(v, 340), 100);
+    const { size, length, left } = fit5(String(v.text), room(v, 340), 100);
     const a = Number(v.amount);
     const base = 100 + size * 0.36;
     const top = base - size * 0.78;
-    const cuts = [-1e3, ...BANDS.map((f) => r18(top + f * (base - top))), 1200];
+    const cuts = [-1e3, ...BANDS.map((f) => r110(top + f * (base - top))), 1200];
     const unit = size * Number(v.amount);
-    const shift = ([x, y]) => `translate(${r18(x * unit)} ${r18(y * unit)})`;
+    const shift = ([x, y]) => `translate(${r110(x * unit)} ${r110(y * unit)})`;
     return {
       ...frame(v, left, length, base, size, [0.05 + 0.04 * a, 0.25 * a, DESCENT + 0.04 * a, 0.25 * a]),
       size,
       length,
-      base: r18(base),
-      ...Object.fromEntries([0, 1, 2, 3].flatMap((b) => [[`cut${b}`, cuts[b]], [`band${b}`, r18(cuts[b + 1] - cuts[b])]])),
+      base: r110(base),
+      ...Object.fromEntries([0, 1, 2, 3].flatMap((b) => [[`cut${b}`, cuts[b]], [`band${b}`, r110(cuts[b + 1] - cuts[b])]])),
       ...Object.fromEntries(
         GLITCH.flatMap((key, k) => [
           [`red${k}`, shift(key.red)],
@@ -16687,23 +19458,23 @@ 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, left } = fit3(String(v.text), room(v, 320), 96);
+    const { size, length, left } = fit5(String(v.text), room(v, 320), 96);
     const d = 0.36 * Number(v.depth);
     const step = size * 0.03 * Number(v.depth);
     const at3 = (deg, i) => {
       const a = deg * Math.PI / 180;
-      return `translate(${r18(Math.cos(a) * step * i)} ${r18(Math.sin(a) * step * i)})`;
+      return `translate(${r110(Math.cos(a) * step * i)} ${r110(Math.sin(a) * step * i)})`;
     };
     return {
       ...frame(v, left, length, 92 + size * 0.35, size, [0.05, 0.77 * d, DESCENT + d, 0.77 * d]),
       size,
       length,
-      base: r18(92 + size * 0.35),
+      base: r110(92 + size * 0.35),
       ...Object.fromEntries(
         Array.from({ length: LAYERS }, (_, k) => {
           const i = LAYERS - k;
           return [
-            [`fill${i}`, mixHex2(v.side, v.shade, i / LAYERS)],
+            [`fill${i}`, mixHex3(v.side, v.shade, i / LAYERS)],
             [`a${i}`, at3(EXTRUDE_FROM, i)],
             [`b${i}`, at3(EXTRUDE_TO, i)]
           ];
@@ -17183,7 +19954,7 @@ var dripText = {
     const left = 200 - width / 2;
     const runs = Math.min(DRIP_RUNS, Math.max(1, Math.round(width / DRIP_RUN)));
     const run = width / runs;
-    const r19 = (n10) => Math.round(n10 * 10) / 10;
+    const r111 = (n11) => Math.round(n11 * 10) / 10;
     const edge = Number(v.stroke) / 2 / DRIP_SIZE;
     const tip = (DRIP_TOP + Math.max(...DRIPS2.map((d) => d.length)) * Number(v.drip) + 13 * 0.72 - DRIP_BASELINE) / DRIP_SIZE;
     const overhang = [edge, edge, Math.max(0.05, tip) + edge, edge].map((e) => Math.round(e * 100) / 100).join(" ");
@@ -17197,15 +19968,15 @@ var dripText = {
       overhang,
       ...Object.fromEntries(
         DRIP_SLOTS.flatMap((d) => {
-          const x = r19(left + (d.run + d.at) * run);
-          const length = r19(d.length * Number(v.drip));
+          const x = r111(left + (d.run + d.at) * run);
+          const length = r111(d.length * Number(v.drip));
           return [
             [`show${d.i}`, d.run < runs ? "inline" : "none"],
             [`x${d.i}`, x],
-            [`left${d.i}`, r19(x - d.width / 2)],
-            [`shine${d.i}`, r19(x - d.width * 0.25)],
+            [`left${d.i}`, r111(x - d.width / 2)],
+            [`shine${d.i}`, r111(x - d.width * 0.25)],
             [`len${d.i}`, length],
-            [`tip${d.i}`, r19(DRIP_TOP + length)]
+            [`tip${d.i}`, r111(DRIP_TOP + length)]
           ];
         })
       )
@@ -17347,9 +20118,13 @@ var SHADER_EFFECTS = [
   ...debrisShaders,
   ...impactShaders,
   ...comicShaders,
+  ...atmosphereShaders,
+  ...glowShaders,
+  ...shadowShaders,
+  ...distortionShaders,
   ...transitions
 ];
-var EFFECTS = [...SHADER_EFFECTS, ...vectorEffects, ...textEffects, ...morphEffects, ...interactionEffects, ...pyroEffects, ...timewarpEffects, ...meltEffects, ...electricEffects, ...pixelEffects, ...splatterEffects, ...bubbleEffects, ...stickerEffects, ...trailEffects, ...impactEffects, ...comicEffects].sort(
+var EFFECTS = [...SHADER_EFFECTS, ...vectorEffects, ...textEffects, ...morphEffects, ...interactionEffects, ...pyroEffects, ...timewarpEffects, ...meltEffects, ...electricEffects, ...pixelEffects, ...splatterEffects, ...bubbleEffects, ...stickerEffects, ...trailEffects, ...impactEffects, ...comicEffects, ...glowEffects, ...shadowEffects].sort(
   (a, b) => EFFECT_CATEGORIES.indexOf(a.category) - EFFECT_CATEGORIES.indexOf(b.category)
 );
 var byId = new Map(EFFECTS.map((e) => [e.id, e]));
@@ -17407,4 +20182,4 @@ export {
   effectControls,
   effectDefaults
 };
-//# sourceMappingURL=chunk-TCNONB22.js.map
+//# sourceMappingURL=chunk-ECBG5K6E.js.map