@pixerate/flair 0.20.0 → 0.21.0

package/dist/{chunk-TCNONB22.js → chunk-KD7E3RWF.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()
   }
 };
@@ -16052,176 +16198,2153 @@ 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;
-}
-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;
-      if (!VECTOR_CONTROL_TYPES.includes(type))
-        issues.push(`${whole}: a control's type is one of ${VECTOR_CONTROL_TYPES.join(", ")}`);
-      else if (declarations.has(name) && declarations.get(name) !== whole)
-        issues.push(`"${name}" is declared twice; declare it once and write {{${name}}} everywhere else`);
-      else declarations.set(name, whole);
-    }
-  }
-  return issues;
-}
-function written(control, value) {
-  if (control.color && Array.isArray(value)) return rgbToHex(value);
-  if (Array.isArray(value)) return value.join(" ");
-  return value;
-}
-var escapeMarkup = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-function vectorControlDef(control, line = 0) {
-  const min = control.min ?? 0;
-  return {
-    name: control.name,
-    type: control.type,
-    label: control.label ?? control.name,
-    color: control.color ?? false,
-    min,
-    max: control.max ?? Math.max(min + 1, 1),
-    step: control.step ?? (control.type === "int" ? 1 : 0.01),
-    default: control.default,
-    line
-  };
+// 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);
 }
-var CURRENT_COLOR = "currentColor";
-function isCurrentColor(value) {
-  return typeof value === "string" && value.trim().toLowerCase() === "currentcolor";
+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 renderVectorEffect(effect, values = {}) {
-  const filled = {};
-  const placeholders = /* @__PURE__ */ new Map();
-  for (const control of vectorEffectControls(effect)) {
-    const given = values[control.name];
-    if (control.color && isCurrentColor(given)) {
-      filled[control.name] = CURRENT_COLOR;
-      placeholders.set(control.name, CURRENT_COLOR);
-      continue;
-    }
-    const check = given === void 0 ? void 0 : checkControlValue(control, given);
-    filled[control.name] = check?.ok ? check.value : control.default;
-    placeholders.set(control.name, written(control, filled[control.name]));
+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;
   }
-  for (const [name, value] of Object.entries(effect.derived?.(filled) ?? {})) placeholders.set(name, value);
-  const fill = (text, markup) => {
-    const whole = /^\{\{\s*([A-Za-z_]\w*)\s*(?::[^}]*)?\}\}$/.exec(text);
-    if (!markup && whole && placeholders.has(whole[1])) return placeholders.get(whole[1]);
-    return text.replace(PLACEHOLDER, (match, name) => {
-      if (!placeholders.has(name)) return match;
-      const value = String(placeholders.get(name));
-      return markup ? escapeMarkup(value) : value;
-    });
-  };
-  const walk = (v) => {
-    if (typeof v === "string") return fill(v, false);
-    if (Array.isArray(v)) return v.map(walk);
-    if (v && typeof v === "object") return Object.fromEntries(Object.entries(v).map(([k, x]) => [k, walk(x)]));
-    return v;
-  };
-  const { svg, ...rest } = effect.motion;
-  return { svg: fill(svg.replace(/<!--[\s\S]*?-->/g, ""), true), ...walk(rest) };
-}
-function colorControl(name, hex, label) {
-  return { name, type: "vec3", color: true, default: hexToRgb(hex) ?? [1, 1, 1], label: label ?? name };
+  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 numberControl(name, value, min, max, label, step) {
-  return { name, type: "float", default: value, min, max, label: label ?? name, step };
+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;
+
+float cloudDensity(vec3 p, int octaves) {
+  vec3 q = p * 0.42 + vec3(iTime * uSpeed * 0.12, 0.0, iTime * uSpeed * 0.05);
+  float n = fbm3(q, octaves);
+  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));
+  return clamp((n - (1.0 - uCoverage) * 0.75) * 3.0 * shape, 0.0, 1.0) * uDensity;
 }
 
-// src/catalog/text.ts
-var r18 = (n10) => Math.round(n10 * 10) / 10;
-function fit3(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) };
-}
-var lettersOf = (text) => Array.from(String(text));
-var mixHex2 = (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)}%)`;
+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);
+    float dt = (t1 - t0) / 40.0;
+    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);
+    for (int i = 0; i < 40; i++) {
+      if (trans < 0.02 || t > 60.0) break;
+      vec3 pos = rd * t;
+      int oct = t < 18.0 ? 5 : 3;
+      float d = cloudDensity(pos, oct);
+      if (d > 0.01) {
+        // Light march toward the sun for self-shadowing.
+        float shade = 0.0;
+        for (int j = 1; j <= 4; j++) shade += cloudDensity(pos + sun * 0.22 * float(j), 3);
+        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);
   }
-  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));
+  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 holds = (id, attr, keys2) => keys2.map(([delay, value]) => ({ id, attrs: { [attr]: [value, value] }, delay, ms: 0 }));
-var n9 = (name) => `{{${name}}}`;
+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();
+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,
+    `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.
+  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 = coverage(p + warp, uSpread * 1.4);
+  float tall = coverage(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 (textureSize(uMask, 0).x > 1 && 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,
+    `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.
+  float shafts = 0.0;
+  float decay = 1.0;
+  float jitter = hash12(fragCoord);
+  for (int i = 0; i < 40; i++) {
+    float s = (float(i) + jitter) / 40.0;
+    vec2 q = p + toL * s;
+    float open = 1.0 - shapeAt(q, 2.0 * px + 0.01 * s);
+    shafts += open * exp(-pow(length(q - L) / uGlowSize, 2.0)) * decay;
+    decay *= 0.965;
+  }
+  shafts /= 20.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 + coverage(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;
+      if (!VECTOR_CONTROL_TYPES.includes(type))
+        issues.push(`${whole}: a control's type is one of ${VECTOR_CONTROL_TYPES.join(", ")}`);
+      else if (declarations.has(name) && declarations.get(name) !== whole)
+        issues.push(`"${name}" is declared twice; declare it once and write {{${name}}} everywhere else`);
+      else declarations.set(name, whole);
+    }
+  }
+  return issues;
+}
+function written(control, value) {
+  if (control.color && Array.isArray(value)) return rgbToHex(value);
+  if (Array.isArray(value)) return value.join(" ");
+  return value;
+}
+var escapeMarkup = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function vectorControlDef(control, line = 0) {
+  const min = control.min ?? 0;
+  return {
+    name: control.name,
+    type: control.type,
+    label: control.label ?? control.name,
+    color: control.color ?? false,
+    min,
+    max: control.max ?? Math.max(min + 1, 1),
+    step: control.step ?? (control.type === "int" ? 1 : 0.01),
+    default: control.default,
+    line
+  };
+}
+var CURRENT_COLOR = "currentColor";
+function isCurrentColor(value) {
+  return typeof value === "string" && value.trim().toLowerCase() === "currentcolor";
+}
+function renderVectorEffect(effect, values = {}) {
+  const filled = {};
+  const placeholders = /* @__PURE__ */ new Map();
+  for (const control of vectorEffectControls(effect)) {
+    const given = values[control.name];
+    if (control.color && isCurrentColor(given)) {
+      filled[control.name] = CURRENT_COLOR;
+      placeholders.set(control.name, CURRENT_COLOR);
+      continue;
+    }
+    const check = given === void 0 ? void 0 : checkControlValue(control, given);
+    filled[control.name] = check?.ok ? check.value : control.default;
+    placeholders.set(control.name, written(control, filled[control.name]));
+  }
+  for (const [name, value] of Object.entries(effect.derived?.(filled) ?? {})) placeholders.set(name, value);
+  const fill = (text, markup) => {
+    const whole = /^\{\{\s*([A-Za-z_]\w*)\s*(?::[^}]*)?\}\}$/.exec(text);
+    if (!markup && whole && placeholders.has(whole[1])) return placeholders.get(whole[1]);
+    return text.replace(PLACEHOLDER, (match, name) => {
+      if (!placeholders.has(name)) return match;
+      const value = String(placeholders.get(name));
+      return markup ? escapeMarkup(value) : value;
+    });
+  };
+  const walk = (v) => {
+    if (typeof v === "string") return fill(v, false);
+    if (Array.isArray(v)) return v.map(walk);
+    if (v && typeof v === "object") return Object.fromEntries(Object.entries(v).map(([k, x]) => [k, walk(x)]));
+    return v;
+  };
+  const { svg, ...rest } = effect.motion;
+  return { svg: fill(svg.replace(/<!--[\s\S]*?-->/g, ""), true), ...walk(rest) };
+}
+function colorControl(name, hex, label) {
+  return { name, type: "vec3", color: true, default: hexToRgb(hex) ?? [1, 1, 1], label: label ?? name };
+}
+function numberControl(name, value, min, max, label, step) {
+  return { name, type: "float", default: value, min, max, label: label ?? name, step };
+}
+
+// src/catalog/text.ts
+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: r110(size), length: r110(e * size), left: r110(200 - e * size / 2) };
+}
+var lettersOf = (text) => Array.from(String(text));
+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)}%)`;
+  }
+  const x = Array.isArray(a) ? a : [1, 1, 1];
+  const y = Array.isArray(b) ? b : [1, 1, 1];
+  return rgbToHex([0, 1, 2].map((i) => x[i] + (y[i] - x[i]) * t));
+};
+var holds = (id, attr, keys2) => keys2.map(([delay, value]) => ({ id, attrs: { [attr]: [value, value] }, delay, ms: 0 }));
+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 +18365,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 +18382,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 +18402,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 +18439,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 +18469,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 +18496,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 +18539,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 +18564,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 +18605,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 +18614,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 +18659,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 +18688,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 +18709,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 +18758,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 +18810,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 +19306,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 +19320,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 +19470,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 +19534,4 @@ export {
   effectControls,
   effectDefaults
 };
-//# sourceMappingURL=chunk-TCNONB22.js.map
+//# sourceMappingURL=chunk-KD7E3RWF.js.map