@pixerate/flair 0.31.0 → 0.33.0

package/dist/{chunk-7F4ITXGK.js → chunk-4FFBIVPI.js}

@@ -10,9 +10,11 @@ import {
   rgbToHex
 } from "./chunk-VYOMXE6I.js";
 import {
+  formatCount,
+  lerpAttr,
   morphPaths,
   morphSequence
-} from "./chunk-ORAFCHX3.js";
+} from "./chunk-VKIDRHBG.js";
 
 // src/catalog/inputs.ts
 var EFFECT_INPUTS = ["image", "video", "svg", "text", "mask", "path", "audio"];
@@ -1545,10 +1547,10 @@ var numberTicker = {
     const chars = Array.from(String(v.value)).slice(0, TICKER_SLOTS);
     const widths = chars.map((c) => (/[0-9]/.test(c) ? 0.62 : Math.max(0.3, textWidthEm(c))) * TICKER_SIZE);
     const total = widths.reduce((a, b) => a + b, 0);
-    const fit7 = Math.min(1, 296 / Math.max(1, total));
+    const fit8 = Math.min(1, 296 / Math.max(1, total));
     const duration = Math.round(Math.min(5, Math.max(0.2, Number(v.duration) || 1.6)) * 1e3);
     const stagger = Math.round(Math.min(0.5, Math.max(0, Number(v.stagger) || 0)) * 1e3);
-    const out = { fit: +fit7.toFixed(4), ms: duration };
+    const out = { fit: +fit8.toFixed(4), ms: duration };
     let x = 160 - total / 2;
     let digit = 0;
     for (let i = 0; i < TICKER_SLOTS; i++) {
@@ -1671,6 +1673,9 @@ var EFFECT_CATEGORIES = [
   "broadcast",
   "annotation",
   "ui",
+  "3d",
+  "weather",
+  "water",
   "transition",
   "loader",
   "data",
@@ -5951,8 +5956,8 @@ function packGlyph(rows) {
   return `ivec2(${a}, ${b})`;
 }
 var vec3Hex = (hex) => {
-  const n15 = parseInt(hex.slice(1), 16);
-  const c = [n15 >> 16, n15 >> 8 & 255, n15 & 255].map((v) => +(v / 255).toFixed(3));
+  const n17 = parseInt(hex.slice(1), 16);
+  const c = [n17 >> 16, n17 >> 8 & 255, n17 & 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}](
@@ -7010,7 +7015,7 @@ var chompLoader = {
 var pixelEffects = [pixelText, coinSpin, spaceInvader, pixelHeartHealth, chompLoader];
 
 // src/catalog/pyro.ts
-var round = (n15) => Math.round(n15 * 10) / 10;
+var round = (n17) => Math.round(n17 * 10) / 10;
 var fireworkBurst = {
   kind: "vector",
   id: "firework-burst",
@@ -7065,7 +7070,7 @@ var fireworkBurst = {
 var pyroEffects = [fireworkBurst];
 
 // src/catalog/timewarp.ts
-var r111 = (n15) => Math.round(n15 * 10) / 10;
+var r111 = (n17) => Math.round(n17 * 10) / 10;
 var at2 = (degrees, radius) => {
   const a = degrees * Math.PI / 180;
   return [r111(100 + radius * Math.sin(a)), r111(100 - radius * Math.cos(a))];
@@ -7199,16 +7204,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, r114, c2, r2_) {
+function crescent(c1, r116, c2, r2_) {
   const [dx, dy] = [c2[0] - c1[0], c2[1] - c1[1]];
   const d = Math.hypot(dx, dy);
-  const a = (r114 * r114 - r2_ * r2_ + d * d) / (2 * d);
-  const h = Math.sqrt(Math.max(0, r114 * r114 - a * a));
+  const a = (r116 * r116 - r2_ * r2_ + d * d) / (2 * d);
+  const h = Math.sqrt(Math.max(0, r116 * r116 - a * a));
   const [px2, py2] = [c1[0] + a * dx / d, c1[1] + a * dy / d];
   const i1 = [px2 - h * dy / d, py2 + h * dx / d];
   const i2 = [px2 + h * dy / d, py2 - h * dx / d];
   const angle = (c, p) => Math.atan2(p[1] - c[1], p[0] - c[0]) / DEG2;
-  const outer = around(c1, r114, angle(c1, i1), angle(c1, i2), angle(c1, c2));
+  const outer = around(c1, r116, 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);
 }
@@ -19735,26 +19740,26 @@ float coverage(vec2 p, float radius) {
   }
   return sum / 16.0;
 }`.trim();
-function goldenTaps(n15) {
-  const taps = Array.from({ length: n15 }, (_, i) => {
-    const r = Math.sqrt((i + 0.5) / n15);
+function goldenTaps(n17) {
+  const taps = Array.from({ length: n17 }, (_, i) => {
+    const r = Math.sqrt((i + 0.5) / n17);
     const a = i * 2.39996;
     return `vec2(${(r * Math.cos(a)).toFixed(5)}, ${(r * Math.sin(a)).toFixed(5)})`;
   });
-  return `const vec2 GOLDEN${n15}[${n15}] = vec2[${n15}](${taps.join(", ")});`;
+  return `const vec2 GOLDEN${n17}[${n17}] = vec2[${n17}](${taps.join(", ")});`;
 }
-function coverageTaps(name, n15, blur) {
+function coverageTaps(name, n17, blur) {
   return `
-${goldenTaps(n15)}
+${goldenTaps(n17)}
 float ${name}(vec2 p, float radius) {
   float sum = 0.0;
   if (gMaskPlace.w < 0.5) {
-    for (int i = 0; i < ${n15}; i++) sum += shapeAt(p + radius * GOLDEN${n15}[i], radius * ${blur.toFixed(2)});
+    for (int i = 0; i < ${n17}; i++) sum += shapeAt(p + radius * GOLDEN${n17}[i], radius * ${blur.toFixed(2)});
   } else {
     float lod = log2(max(radius * ${blur.toFixed(2)} * gMaskPlace.z, 1.0));
-    for (int i = 0; i < ${n15}; i++) sum += shapeLod(p + radius * GOLDEN${n15}[i], lod);
+    for (int i = 0; i < ${n17}; i++) sum += shapeLod(p + radius * GOLDEN${n17}[i], lod);
   }
-  return sum / ${n15}.0;
+  return sum / ${n17}.0;
 }`.trim();
 }
 var LITE_TAPS = 10;
@@ -22799,8 +22804,2187 @@ var scrollSteps = {
 };
 var scrollEffects = [scrollDraw, scrollCounter, scrollSteps];
 
+// src/catalog/shaders/three-d.ts
+var SPHERE_HIT = `
+vec2 sphereHit(vec3 ro, vec3 rd, float r) {
+  float b = dot(ro, rd);
+  float c = dot(ro, ro) - r * r;
+  float h = b * b - c;
+  if (h < 0.0) return vec2(1e9, -1e9);
+  h = sqrt(h);
+  return vec2(-b - h, -b + h);
+}`.trim();
+var globe = {
+  kind: "shader",
+  id: "globe",
+  name: "Globe",
+  description: "A spinning Earth-like globe, dotted or realistic, with glowing arcs travelling between cities and an atmosphere rim; drag it to turn it.",
+  category: "3d",
+  tags: ["3d", "globe", "earth", "world", "map", "network", "data", "interactive", "press", "background"],
+  source: glsl(
+    `// Globe: an analytic sphere with noise continents (as dots on a lat/long grid, or shaded), great-circle
+// arcs between cities lifted off the surface, and a rim of atmosphere. Dragging turns it (iPointer, iClicks).
+uniform int uStyle;          // @control min=0 max=1 default=0 label="Style (0 dots, 1 realistic)"
+uniform vec3 uBackground;    // @control color default=#050816 label="Background"
+uniform vec3 uOcean;         // @control color default=#0B1430 label="Ocean"
+uniform vec3 uLand;          // @control color default=#5B8CFF label="Land"
+uniform vec3 uArcColor;      // @control color default=#FFB547 label="Arc colour"
+uniform vec3 uAtmosphere;    // @control color default=#4F8BFF label="Atmosphere"
+uniform float uSize;         // @control min=0.4 max=1.6 default=1 label="Size"
+uniform float uSpin;         // @control min=-1 max=1 default=0.15 label="Spin speed"
+uniform float uTilt;         // @control min=-1 max=1 default=0.35 label="Tilt"
+uniform float uDots;         // @control min=40 max=200 default=110 step=1 label="Dot rows"
+uniform float uLandAmount;   // @control min=0 max=1 default=0.5 label="Land amount"
+uniform int uArcs;           // @control min=0 max=6 default=6 label="Arcs"
+uniform float uArcSpeed;     // @control min=0 max=3 default=1 label="Arc speed"
+uniform float uGlow;         // @control min=0 max=2 default=1 label="Atmosphere glow"
+uniform bool uDemo;          // @control default=true label="Spin when idle"`,
+    HASH,
+    NOISE_3D,
+    SPHERE_HIT,
+    `const float PI = 3.14159265;
+// Cities as (latitude, longitude) in degrees, and the pairs the arcs join.
+const vec2 CITY[6] = vec2[6](vec2(40.7, -74.0), vec2(51.5, -0.1), vec2(35.7, 139.7), vec2(-33.9, 151.2), vec2(-23.5, -46.6), vec2(25.2, 55.3));
+const ivec2 ROUTE[6] = ivec2[6](ivec2(0, 1), ivec2(1, 5), ivec2(5, 2), ivec2(2, 3), ivec2(0, 4), ivec2(4, 1));
+const float CAM = 3.4;
+
+// The globe's own frame (where cities and continents live) to the view; its transpose goes back.
+mat3 view;
+
+mat3 viewFrom(float yaw, float tilt) {
+  float cy = cos(yaw), sy = sin(yaw), ct = cos(tilt), st = sin(tilt);
+  mat3 y = mat3(cy, 0.0, -sy, 0.0, 1.0, 0.0, sy, 0.0, cy);
+  mat3 x = mat3(1.0, 0.0, 0.0, 0.0, ct, st, 0.0, -st, ct);
+  return x * y;
+}
+
+vec3 fromLatLong(vec2 ll) {
+  vec2 r = ll * PI / 180.0;
+  return vec3(cos(r.x) * sin(r.y), sin(r.x), cos(r.x) * cos(r.y));
+}
+
+// Above 0 on land: noise continents, ice at the poles.
+float landAt(vec3 g) {
+  float n = fbm3(g * 1.7 + vec3(3.1, 7.4, 1.3), 5);
+  return n - mix(0.6, 0.38, uLandAmount);
+}
+
+// Where the pointer has dragged the globe: the drag so far while pressed, easing back after letting go.
+vec2 dragOffset() {
+  float w = iPointer.w;
+  if (w == 0.0 || iClicks[0].w < 0.5) return vec2(0.0);
+  vec2 from = iClicks[0].xy;
+  vec2 to = iPointer.xy;
+  float ease = 1.0;
+  if (w < 0.0) {
+    // Let go: where the pointer was then (its trail, newest first), easing back over two seconds.
+    float released = iTime + w;
+    for (int i = 0; i < 32; i++) {
+      if (iTrail[i].w > 0.5 && iTrail[i].z <= released) {
+        to = iTrail[i].xy;
+        break;
+      }
+    }
+    ease = 1.0 - smoothstep(0.0, 2.0, -w);
+  }
+  return (to - from) / iResolution.y * ease;
+}
+
+// The screen position (and depth toward the camera) of a point in the view frame.
+vec3 project(vec3 v, float f) {
+  return vec3(v.xy * f / (CAM - v.z), v.z);
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float px = 1.0 / iResolution.y;
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) * px;
+  float f = 1.15 * uSize;
+  vec2 drag = dragOffset();
+  bool idle = iPointer.w == 0.0 && iPointer.z < 0.01;
+  float yaw = iTime * uSpin * (uDemo || !idle ? 1.0 : 0.0) + drag.x * 3.5 + 0.8;
+  float tilt = clamp(uTilt * 0.6 - drag.y * 2.5, -1.3, 1.3);
+  view = viewFrom(yaw, tilt);
+
+  vec3 ro = vec3(0.0, 0.0, CAM);
+  vec3 rd = normalize(vec3(p, -f));
+  vec2 hit = sphereHit(ro, rd, 1.0);
+  // Closest approach of the ray to the centre, for the atmosphere outside the disc.
+  float closest = length(ro - rd * dot(ro, rd));
+  vec3 col = uBackground + 0.03 * (1.0 - length(p));
+  // Atmosphere halo.
+  float halo = exp(-max(closest - 1.0, 0.0) * 9.0) * uGlow;
+  vec3 sun = normalize(vec3(-0.6, 0.45, 0.75));
+
+  // Size of a pixel on the sphere, in radians at the disc's centre.
+  float pxAngle = px * (CAM - 1.0) / f;
+  if (hit.x < hit.y) {
+    vec3 pos = ro + rd * hit.x;
+    vec3 n = pos;
+    vec3 g = n * view;
+    float facing = max(dot(n, -rd), 0.0);
+    float lat = asin(clamp(g.y, -1.0, 1.0));
+    float lon = atan(g.x, g.z);
+    if (uStyle == 0) {
+      // Dots on land, on a grid of rows whose dots keep their spacing toward the poles.
+      float rowStep = PI / uDots;
+      float row = floor((lat + 0.5 * PI) / rowStep);
+      float rowLat = (row + 0.5) * rowStep - 0.5 * PI;
+      float count = max(floor(2.0 * PI * cos(rowLat) / rowStep), 1.0);
+      float lonStep = 2.0 * PI / count;
+      float cell = floor((lon + PI) / lonStep);
+      float cellLon = (cell + 0.5) * lonStep - PI;
+      vec3 centre = vec3(cos(rowLat) * sin(cellLon), sin(rowLat), cos(rowLat) * cos(cellLon));
+      float onLand = step(0.0, landAt(centre));
+      vec2 d = vec2((lon - cellLon) * cos(lat), lat - rowLat);
+      d.x = mod(d.x + PI, 2.0 * PI) - PI;
+      float aa = pxAngle / max(facing, 0.12);
+      float dotMask = 1.0 - smoothstep(rowStep * 0.3 - aa, rowStep * 0.3 + aa, length(d));
+      // Dots too small to resolve blend into a soft fill.
+      dotMask = mix(dotMask, 0.3, smoothstep(rowStep * 0.25, rowStep * 0.7, aa));
+      vec3 body = uOcean * (0.55 + 0.45 * facing);
+      float light = 0.45 + 0.55 * facing;
+      col = mix(body, uLand * light, dotMask * onLand);
+    } else {
+      // Shaded continents: ocean with a sun glint, land by height, ice at the poles, a lit and a night side.
+      float h = landAt(g);
+      float coast = smoothstep(-0.015, 0.015, h);
+      float relief = fbm3(g * 9.0, 3);
+      vec3 shallow = mix(uOcean * 1.8, uOcean, smoothstep(-0.12, 0.0, -h));
+      vec3 land = mix(uLand * 0.8, mix(uLand, vec3(0.55, 0.45, 0.3), 0.5), smoothstep(0.03, 0.15, h + relief * 0.06));
+      vec3 surface = mix(shallow, land * (0.8 + 0.4 * relief), coast);
+      float ice = smoothstep(0.82, 0.9, abs(g.y) + relief * 0.08);
+      surface = mix(surface, vec3(0.92, 0.95, 1.0), ice);
+      float diffuse = max(dot(n, sun), 0.0);
+      vec3 h2 = normalize(sun - rd);
+      float glint = pow(max(dot(n, h2), 0.0), 140.0) * (1.0 - coast) * (1.0 - ice);
+      col = surface * (0.06 + 0.94 * diffuse) + vec3(1.0, 0.95, 0.85) * glint * 0.6;
+      // City lights on the night side's land.
+      float lights = step(0.86, hash12(floor(vec2(lon, lat) * 90.0))) * coast * (1.0 - ice);
+      col += vec3(1.0, 0.75, 0.4) * lights * smoothstep(0.1, -0.15, dot(n, sun)) * 0.8;
+      halo *= 0.6 + 0.4 * max(dot(normalize(vec3(p, 0.2)), sun), 0.0);
+    }
+    // Atmosphere rim, toward the edge of the disc.
+    float rim = pow(1.0 - facing, 3.0);
+    col += uAtmosphere * rim * 0.9 * uGlow;
+    // Smooth edge.
+    float edge = smoothstep(1.0, 1.0 - 2.5 * px * (CAM - 1.0) / f, closest);
+    col = mix(uBackground + uAtmosphere * halo, col, edge);
+  } else {
+    col += uAtmosphere * halo * 0.8;
+  }
+
+  // Arcs: great circles between cities, lifted off the surface, a glowing head and fading tail travelling along.
+  float arcs = 0.0;
+  float cities = 0.0;
+  for (int i = 0; i < 6; i++) {
+    if (i >= uArcs) break;
+    vec3 a = fromLatLong(CITY[ROUTE[i].x]);
+    vec3 b = fromLatLong(CITY[ROUTE[i].y]);
+    float span = acos(clamp(dot(a, b), -1.0, 1.0));
+    vec3 axis = normalize(b - a * dot(a, b));
+    float period = 3.2;
+    float phase = iTime * uArcSpeed / period + float(i) * 0.37;
+    float head = fract(phase) * 1.6;
+    float lift = 0.12 + 0.18 * span / PI;
+    // Walk the great circle in the view frame, turning by a fixed step (one cos and sin per arc).
+    vec3 va = view * a;
+    vec3 vb = view * axis;
+    // Pixels well away from the arc's bounding sphere skip it.
+    vec3 m = view * (0.5 * (a + b));
+    float radius = max(0.5 * length(a - b), 1.0 - length(m)) + lift + 0.02;
+    float depth = CAM - m.z - radius;
+    if (depth > 0.05 && length(p - project(m, f).xy) > radius * f / depth + 40.0 * px) continue;
+    float cs = cos(span / 16.0), sn = sin(span / 16.0);
+    vec2 cw = vec2(1.0, 0.0);
+    vec3 prevV = va * 1.004;
+    vec3 prev = project(prevV, f);
+    float sPrev = 0.0;
+    for (int k = 1; k <= 16; k++) {
+      float s = float(k) / 16.0;
+      cw = vec2(cw.x * cs - cw.y * sn, cw.y * cs + cw.x * sn);
+      vec3 v = (va * cw.x + vb * cw.y) * (1.004 + lift * sin(PI * s));
+      vec3 cur = project(v, f);
+      vec2 e = cur.xy - prev.xy;
+      float u = clamp(dot(p - prev.xy, e) / max(dot(e, e), 1e-8), 0.0, 1.0);
+      float d = length(p - prev.xy - e * u);
+      // Only near the segment: is that part of it hidden behind the globe?
+      bool hidden = true;
+      if (d < 40.0 * px) {
+        vec3 near = mix(prevV, v, u);
+        vec2 sh = sphereHit(ro, normalize(near - ro), 1.0);
+        hidden = sh.x < sh.y && sh.x < length(near - ro) - 1e-3;
+      }
+      prevV = v;
+      if (!hidden) {
+        float along = mix(sPrev, s, u);
+        float tail = smoothstep(head - 0.6, head, along) * step(along, head);
+        float core = 1.0 - smoothstep(0.6 * px, 1.8 * px, d);
+        float glow = exp(-d / (5.0 * px)) * 0.5;
+        arcs = max(arcs, (core + glow) * tail + core * 0.12);
+        // The head's spark.
+        float spark = exp(-length(p - mix(prev.xy, cur.xy, clamp((head - sPrev) / (s - sPrev), 0.0, 1.0))) / (3.5 * px));
+        arcs = max(arcs, spark * step(sPrev, head) * step(head, s) * 1.4);
+      }
+      prev = cur;
+      sPrev = s;
+    }
+  }
+  for (int i = 0; i < 6; i++) {
+    vec3 c = view * fromLatLong(CITY[i]);
+    if (c.z < 0.05) continue;
+    vec3 q = project(c, f);
+    float d = length(p - q.xy);
+    float pulse = 0.5 + 0.5 * sin(iTime * 3.0 + float(i));
+    cities = max(cities, (1.0 - smoothstep(1.5 * px, 3.0 * px, d)) + exp(-d / (6.0 * px)) * 0.4 * pulse);
+  }
+  col += uArcColor * (arcs + cities);
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Dotted dark", values: { uStyle: 0 } },
+    {
+      name: "Realistic",
+      values: {
+        uStyle: 1,
+        uBackground: [0, 0, 0.02],
+        uOcean: [0.02, 0.1, 0.3],
+        uLand: [0.22, 0.42, 0.18],
+        uArcColor: [1, 0.85, 0.45],
+        uAtmosphere: [0.35, 0.6, 1]
+      }
+    },
+    { name: "Light", values: { uStyle: 0, uBackground: [0.96, 0.97, 1], uOcean: [0.86, 0.89, 0.96], uLand: [0.15, 0.25, 0.6], uArcColor: [1, 0.3, 0.45], uAtmosphere: [0.55, 0.65, 1], uGlow: 0.5 } }
+  ]
+};
+var rotatingShapes = {
+  kind: "shader",
+  id: "rotating-shapes",
+  name: "Rotating shapes",
+  description: "A torus, a rounded cube and an icosahedron floating and turning in a soft-lit studio, casting soft shadows on the backdrop.",
+  category: "3d",
+  tags: ["3d", "shapes", "studio", "geometry", "product", "background", "minimal"],
+  source: glsl(
+    `// Rotating shapes: three signed-distance primitives ray-marched inside their bounding spheres (64 steps at
+// most), a studio floor met analytically, soft shadows toward a key light and a little ambient occlusion.
+uniform vec3 uBackdrop;   // @control color default=#ECE7E1 label="Backdrop"
+uniform vec3 uColorA;     // @control color default=#FF6A4D label="Torus"
+uniform vec3 uColorB;     // @control color default=#4C6FFF label="Cube"
+uniform vec3 uColorC;     // @control color default=#FFC23D label="Icosahedron"
+uniform float uSpeed;     // @control min=0 max=3 default=1 label="Speed"
+uniform float uFloat;     // @control min=0 max=2 default=1 label="Float"
+uniform float uGloss;     // @control min=0 max=1 default=0.6 label="Gloss"
+uniform float uSoftness;  // @control min=0.1 max=2 default=0.7 label="Shadow softness"`,
+    SPHERE_HIT,
+    `const float PHI = 1.618034;
+const vec3 LIGHT = vec3(0.55, 0.85, 0.45);
+
+vec3 centre(int i) {
+  float fi = float(i);
+  return vec3(-1.55 + 1.55 * fi, -0.05 + 0.18 * uFloat * sin(iTime * uSpeed * 0.9 + fi * 2.1), 0.15 * fi - 0.15);
+}
+
+mat3 spin(float a, float b) {
+  float ca = cos(a), sa = sin(a), cb = cos(b), sb = sin(b);
+  return mat3(ca, 0.0, -sa, 0.0, 1.0, 0.0, sa, 0.0, ca) * mat3(1.0, 0.0, 0.0, 0.0, cb, sb, 0.0, -sb, cb);
+}
+
+float sdTorus(vec3 p) {
+  vec2 q = vec2(length(p.xz) - 0.5, p.y);
+  return length(q) - 0.19;
+}
+float sdRoundBox(vec3 p) {
+  vec3 q = abs(p) - vec3(0.36);
+  return length(max(q, 0.0)) + min(max(q.x, max(q.y, q.z)), 0.0) - 0.08;
+}
+float sdIcosahedron(vec3 p) {
+  p = abs(p);
+  float d = dot(p, normalize(vec3(1.0)));
+  d = max(d, dot(p, normalize(vec3(0.0, 1.0, PHI + 1.0))));
+  d = max(d, dot(p, normalize(vec3(PHI + 1.0, 0.0, 1.0))));
+  d = max(d, dot(p, normalize(vec3(1.0, PHI + 1.0, 0.0))));
+  return d - 0.5;
+}
+
+// The distance to the nearest shape, and which (0, 1, 2).
+vec2 scene(vec3 p) {
+  float t = iTime * uSpeed;
+  vec2 best = vec2(1e9, -1.0);
+  for (int i = 0; i < 3; i++) {
+    vec3 q = (p - centre(i)) * spin(t * (0.5 + 0.15 * float(i)) + float(i), t * 0.7 + float(i) * 1.3);
+    float d = i == 0 ? sdTorus(q) : i == 1 ? sdRoundBox(q) : sdIcosahedron(q);
+    if (d < best.x) best = vec2(d, float(i));
+  }
+  return best;
+}
+
+// The stretch of a ray inside any shape's bounding sphere (x > y when it misses them all).
+vec2 bounds(vec3 ro, vec3 rd) {
+  vec2 span = vec2(1e9, -1e9);
+  for (int i = 0; i < 3; i++) {
+    vec2 h = sphereHit(ro - centre(i), rd, 0.78);
+    if (h.x < h.y) span = vec2(min(span.x, h.x), max(span.y, h.y));
+  }
+  return vec2(max(span.x, 0.0), span.y);
+}
+
+vec3 normalAt(vec3 p) {
+  vec2 e = vec2(1.0, -1.0) * 0.0015;
+  return normalize(e.xyy * scene(p + e.xyy).x + e.yyx * scene(p + e.yyx).x + e.yxy * scene(p + e.yxy).x + e.xxx * scene(p + e.xxx).x);
+}
+
+// Soft shadow toward the light from p (1 lit, 0 in shadow), marched only through the shapes' bounds.
+float softShadow(vec3 p, vec3 l) {
+  vec2 b = bounds(p, l);
+  if (b.x > b.y) return 1.0;
+  float k = 10.0 / uSoftness;
+  float res = 1.0;
+  float t = max(b.x, 0.02);
+  for (int i = 0; i < 28; i++) {
+    if (t > b.y) break;
+    float h = scene(p + l * t).x;
+    res = min(res, k * h / t);
+    if (res < 0.002) break;
+    t += clamp(h, 0.03, 0.3);
+  }
+  return smoothstep(0.0, 1.0, res);
+}
+
+vec3 studio(vec3 rd) {
+  // The backdrop's sweep, lighter toward the top, with a softbox overhead for reflections.
+  vec3 c = uBackdrop * mix(0.82, 1.05, smoothstep(-0.3, 0.6, rd.y));
+  c += vec3(1.2) * smoothstep(0.75, 0.95, rd.y) * smoothstep(-0.2, 0.3, rd.z + 0.4);
+  return c;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
+  vec3 ro = vec3(0.0, 0.75, 5.6);
+  vec3 target = vec3(0.0, -0.15, 0.0);
+  vec3 fw = normalize(target - ro);
+  vec3 rt = normalize(cross(fw, vec3(0.0, 1.0, 0.0)));
+  vec3 up = cross(rt, fw);
+  vec3 rd = normalize(p.x * rt + p.y * up + 1.9 * fw);
+  vec3 l = normalize(LIGHT);
+
+  // The backdrop: a floor at y = -1 sweeping up into the wall behind.
+  vec3 col = studio(rd) * (0.9 + 0.1 * smoothstep(-0.3, 0.2, rd.y));
+  float tFloor = rd.y < 0.0 ? (-1.0 - ro.y) / rd.y : 1e9;
+  float tHit = 1e9;
+  float id = -1.0;
+  vec2 b = bounds(ro, rd);
+  if (b.x < b.y) {
+    float t = b.x;
+    for (int i = 0; i < 64; i++) {
+      vec2 h = scene(ro + rd * t);
+      if (h.x < 0.001 * t) {
+        tHit = t;
+        id = h.y;
+        break;
+      }
+      t += h.x;
+      if (t > b.y) break;
+    }
+  }
+  if (tHit < tFloor) {
+    vec3 pos = ro + rd * tHit;
+    vec3 n = normalAt(pos);
+    vec3 base = id < 0.5 ? uColorA : id < 1.5 ? uColorB : uColorC;
+    float diff = max(dot(n, l), 0.0) * softShadow(pos + n * 0.01, l);
+    float ao = clamp(0.5 + 0.5 * scene(pos + n * 0.12).x / 0.12, 0.0, 1.0);
+    ao *= clamp(0.6 + 0.4 * (pos.y + 1.0), 0.0, 1.0);
+    float sky = 0.5 + 0.5 * n.y;
+    vec3 lit = base * (0.25 * sky * ao + 0.85 * diff) + base * uBackdrop * 0.12 * (1.0 - sky) * ao;
+    vec3 h = normalize(l - rd);
+    float fres = pow(1.0 - max(dot(n, -rd), 0.0), 5.0);
+    float spec = pow(max(dot(n, h), 0.0), mix(8.0, 90.0, uGloss)) * diff * mix(0.1, 0.9, uGloss);
+    vec3 env = studio(reflect(rd, n));
+    col = lit + spec + env * mix(0.02, 0.25, uGloss) * mix(0.3, 1.0, fres) * ao;
+  } else if (tFloor < 1e8) {
+    vec3 pos = ro + rd * tFloor;
+    float shadow = softShadow(pos, l);
+    // Contact darkening near the shapes.
+    float near = scene(pos).x;
+    float ao = mix(0.55, 1.0, smoothstep(0.0, 0.6, near));
+    vec3 floorCol = uBackdrop * (0.62 + 0.38 * shadow) * ao;
+    // The floor curves up into the wall: blend into the backdrop with distance.
+    col = mix(floorCol, col, smoothstep(9.0, 16.0, tFloor));
+  }
+  // A soft vignette and gamma.
+  col *= 1.0 - 0.25 * dot(p, p);
+  fragColor = vec4(pow(clamp(col, 0.0, 1.0), vec3(0.9)), 1.0);
+}`
+  ),
+  presets: [
+    { name: "Pastel", values: { uBackdrop: [0.96, 0.92, 0.95], uColorA: [1, 0.62, 0.7], uColorB: [0.55, 0.75, 1], uColorC: [0.62, 0.9, 0.75], uGloss: 0.4 } },
+    { name: "Midnight", values: { uBackdrop: [0.12, 0.13, 0.18], uColorA: [1, 0.35, 0.55], uColorB: [0.3, 0.85, 1], uColorC: [0.9, 0.95, 1], uGloss: 0.9 } }
+  ]
+};
+var isometricCity = {
+  kind: "shader",
+  id: "isometric-city",
+  name: "Isometric city",
+  description: "An isometric block city whose buildings rise out of the ground, drifting through day and night as windows, street lights and traffic come on.",
+  category: "3d",
+  tags: ["3d", "city", "isometric", "buildings", "day", "night", "urban", "background"],
+  source: glsl(
+    `// Isometric city: an orthographic camera walks the city's grid cell by cell (48 cells at most), meeting each
+// cell's building box or the street analytically. A sun circles for the day, windows light up at dusk.
+uniform vec3 uBuilding;    // @control color default=#E8DCCB label="Buildings"
+uniform vec3 uAccent;      // @control color default=#7FA7D9 label="Accent buildings"
+uniform vec3 uGround;      // @control color default=#B9C7A5 label="Ground"
+uniform vec3 uRoad;        // @control color default=#5B6170 label="Roads"
+uniform vec3 uWindow;      // @control color default=#FFD27A label="Window light"
+uniform float uDayLength;  // @control min=4 max=120 default=40 label="Day length (s)"
+uniform float uTimeOfDay;  // @control min=0 max=1 default=0.15 label="Time of day"
+uniform float uHeight;     // @control min=0.3 max=2 default=1 label="Building height"
+uniform float uRise;       // @control min=0 max=10 default=3 label="Rise time (s)"
+uniform float uZoom;       // @control min=0.5 max=2 default=1 label="Zoom"
+uniform float uPan;        // @control min=0 max=2 default=0.4 label="Pan speed"`,
+    HASH,
+    `const float BLOCK = 4.0;
+const float MAXH = 7.0;
+
+bool isRoad(vec2 c) {
+  return mod(c.x, BLOCK) < 0.5 || mod(c.y, BLOCK) < 0.5;
+}
+
+// The building in cell c: its height (0 for none) and kind (a hash).
+vec2 building(vec2 c) {
+  if (isRoad(c)) return vec2(0.0);
+  float h = hash12(c);
+  float k = hash12(c + 17.3);
+  // A little park.
+  if (k < 0.08) return vec2(0.0, k);
+  // Downtowns: taller where a slow wave of districts peaks.
+  float district = 0.5 + 0.5 * sin(c.x * 0.13 + 1.3) * sin(c.y * 0.11 + 0.4);
+  float height = (0.6 + 0.6 * h + 4.8 * pow(h, 4.0) * district) * uHeight;
+  float start = hash12(c + 5.1) * uRise * 0.75;
+  float grow = uRise <= 0.0 ? 1.0 : smoothstep(start, start + uRise * 0.25 + 0.01, iTime);
+  return vec2(min(height, MAXH) * grow, k);
+}
+
+// The sun's direction, and how much of the day it is (1 by day, 0 at night).
+vec4 sunAt() {
+  float phase = fract(uTimeOfDay + iTime / uDayLength) * 6.28318;
+  vec3 dir = normalize(vec3(cos(phase) * 0.8, sin(phase), 0.45));
+  return vec4(dir, smoothstep(-0.22, 0.2, dir.y));
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
+  vec3 d = normalize(vec3(-1.0, -0.82, -1.0));
+  vec3 rt = normalize(cross(d, vec3(0.0, 1.0, 0.0)));
+  vec3 up = cross(rt, d);
+  vec3 target = vec3(1.0, 0.0, 0.3) * iTime * uPan + vec3(0.5, 0.0, 0.5);
+  vec3 o = target + (p.x * rt + p.y * up) * 10.0 / uZoom - d * 40.0;
+  // Start where the ray comes down to the tallest buildings.
+  float t = (MAXH - o.y) / d.y;
+  vec3 pos = o + d * t;
+  vec2 cell = floor(pos.xz);
+  vec2 stepDir = sign(d.xz);
+  vec2 delta = abs(1.0 / d.xz);
+  vec2 side = (stepDir * (cell - pos.xz) + stepDir * 0.5 + 0.5) * delta + t;
+  vec3 inv = 1.0 / d;
+
+  vec4 sun = sunAt();
+  float day = sun.w;
+  float night = 1.0 - day;
+  vec3 ambient = mix(vec3(0.22, 0.26, 0.45), vec3(1.0), day);
+  vec3 col = uGround * ambient * 0.7;
+  for (int i = 0; i < 48; i++) {
+    float tExit = min(side.x, side.y);
+    vec2 b = building(cell);
+    if (b.x > 0.0) {
+      // The building's box, inset from the cell's edges.
+      vec3 lo = vec3(cell.x + 0.12, 0.0, cell.y + 0.12);
+      vec3 hi = vec3(cell.x + 0.88, b.x, cell.y + 0.88);
+      vec3 t0 = (lo - o) * inv;
+      vec3 t1 = (hi - o) * inv;
+      vec3 tn = min(t0, t1);
+      vec3 tf = max(t0, t1);
+      float tin = max(max(tn.x, tn.y), tn.z);
+      float tout = min(min(tf.x, tf.y), tf.z);
+      if (tin < tout && tout > 0.0) {
+        vec3 hp = o + d * tin;
+        vec3 n = tin == tn.y ? vec3(0.0, 1.0, 0.0) : tin == tn.x ? vec3(-stepDir.x, 0.0, 0.0) : vec3(0.0, 0.0, -stepDir.y);
+        vec3 base = mix(uBuilding, uAccent, step(0.72, b.y)) * (0.85 + 0.3 * hash12(cell + 2.0));
+        float light = max(dot(n, sun.xyz), 0.0) * day;
+        // Faces keep the isometric look: the top brightest, the two sides apart.
+        float face = n.y > 0.5 ? 1.0 : abs(n.x) > 0.5 ? 0.78 : 0.62;
+        vec3 c = base * face * (ambient * 0.55 + vec3(1.0, 0.95, 0.85) * light * 0.6);
+        if (n.y < 0.5) {
+          // Windows on the sides: a grid of panes, glass by day and lit at random by night.
+          float along = abs(n.x) > 0.5 ? hp.z : hp.x;
+          vec2 g = vec2(along * 4.0, hp.y * 3.2);
+          vec2 f = fract(g);
+          float pane = step(0.25, f.x) * step(f.x, 0.75) * step(0.3, f.y) * step(f.y, 0.78) * step(0.25, hp.y) * step(hp.y, b.x - 0.15);
+          float on = step(hash12(floor(g) + cell * 7.0 + n.xz * 3.0), night * 0.75 - 0.05);
+          vec3 glass = mix(vec3(0.35, 0.5, 0.65) * ambient * face, uWindow * 1.6, on);
+          c = mix(c, glass, pane);
+          // Darker toward the ground.
+          c *= 0.7 + 0.3 * smoothstep(0.0, 1.2, hp.y);
+        } else {
+          // A parapet around the roof.
+          vec2 r = abs(fract(hp.xz) - 0.5);
+          c *= 0.9 + 0.1 * step(max(r.x, r.y), 0.3);
+        }
+        col = c;
+        break;
+      }
+    }
+    // Reaching the ground in this cell.
+    float tg = -o.y / d.y;
+    if (tg <= tExit) {
+      vec3 gp = o + d * tg;
+      vec2 f = fract(gp.xz);
+      vec3 g;
+      if (isRoad(cell)) {
+        g = uRoad;
+        // Lane markings, and traffic in both directions.
+        bool alongX = mod(cell.y, BLOCK) < 0.5;
+        bool junction = mod(cell.x, BLOCK) < 0.5 && mod(cell.y, BLOCK) < 0.5;
+        float across = alongX ? f.y : f.x;
+        float run = alongX ? gp.x : gp.z;
+        float lane = across < 0.5 ? 1.0 : -1.0;
+        g = mix(g, vec3(0.92), step(abs(across - 0.5), 0.02) * step(0.5, fract(run * 2.0)) * (junction ? 0.0 : 1.0));
+        float road = alongX ? cell.y : cell.x;
+        float slot = run * 0.25 - iTime * 0.35 * lane + hash12(vec2(road, lane));
+        float car = step(abs(across - 0.5 + lane * 0.22), 0.11) * step(abs(fract(slot) - 0.5), 0.07) * step(0.4, hash12(vec2(floor(slot), road + lane)));
+        vec3 carCol = mix(vec3(0.9, 0.3, 0.3), vec3(0.3, 0.5, 0.9), hash12(vec2(floor(slot), road)));
+        g = mix(g, mix(carCol, vec3(1.0, 0.9, 0.6) * 2.0, night), car);
+      } else {
+        g = b.y < 0.08 ? uGround * vec3(0.8, 1.0, 0.75) : uGround;
+        // Shade around a building's foot.
+        vec2 q = abs(f - 0.5);
+        g *= b.x > 0.0 ? mix(0.6, 1.0, smoothstep(0.38, 0.5, max(q.x, q.y))) : 1.0;
+        // Street lights at the corners of each lot by night.
+        vec2 corner = q - 0.42;
+        float lamp = exp(-length(max(corner, 0.0)) * 18.0) * step(0.0, corner.x) * step(0.0, corner.y);
+        g += uWindow * lamp * night * 1.5;
+      }
+      col = g * mix(ambient * 0.7, ambient, day);
+      break;
+    }
+    if (side.x < side.y) {
+      side.x += delta.x;
+      cell.x += stepDir.x;
+    } else {
+      side.y += delta.y;
+      cell.y += stepDir.y;
+    }
+  }
+  // Warm light at dawn and dusk.
+  col *= mix(vec3(1.0), vec3(1.15, 0.85, 0.7), smoothstep(0.35, 0.0, abs(sun.y)) * 0.6);
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Night", values: { uTimeOfDay: 0.72, uDayLength: 120 } },
+    { name: "Toy town", values: { uBuilding: [1, 0.86, 0.75], uAccent: [1, 0.55, 0.5], uGround: [0.66, 0.85, 0.55], uRoad: [0.55, 0.58, 0.66], uHeight: 0.6, uZoom: 1.4 } }
+  ]
+};
+var wireframeTerrain = {
+  kind: "shader",
+  id: "wireframe-terrain",
+  name: "Wireframe terrain",
+  description: "A fly-over of a glowing wireframe mesh of hills and valleys, the lines coloured by height and fading into fog on the horizon.",
+  category: "3d",
+  tags: ["3d", "terrain", "wireframe", "mesh", "landscape", "sci-fi", "retro", "background"],
+  source: glsl(
+    `// Wireframe terrain: a noise heightfield ray-marched with steps that grow with distance (80 at most), a
+// triangle mesh's lines drawn on it from the hit point (anti-aliased with fwidth), fog toward the horizon.
+uniform vec3 uSky;          // @control color default=#03040C label="Sky"
+uniform vec3 uHorizon;      // @control color default=#3A1E5C label="Horizon glow"
+uniform vec3 uFill;         // @control color default=#05060F label="Surface"
+uniform vec3 uLineLow;      // @control color default=#00E5FF label="Lines (low)"
+uniform vec3 uLineHigh;     // @control color default=#FF3BD4 label="Lines (high)"
+uniform float uHeight;      // @control min=0 max=3 default=1 label="Height"
+uniform float uSpeed;       // @control min=0 max=4 default=1 label="Speed"
+uniform float uDensity;     // @control min=0.5 max=4 default=1.5 label="Mesh density"
+uniform float uLineWidth;   // @control min=0.5 max=4 default=1.2 label="Line width (px)"
+uniform float uGlow;        // @control min=0 max=2 default=1 label="Glow"
+uniform float uFog;         // @control min=0 max=2 default=1 label="Fog"`,
+    HASH,
+    `float vnoise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  return mix(mix(hash12(i), hash12(i + vec2(1.0, 0.0)), u.x), mix(hash12(i + vec2(0.0, 1.0)), hash12(i + vec2(1.0, 1.0)), u.x), u.y);
+}
+
+// The ground's height: rolling noise hills, lower along the valley the camera flies down.
+float terrain(vec2 xz) {
+  vec2 q = xz * 0.12;
+  float h = 0.0;
+  float amp = 1.0;
+  for (int i = 0; i < 3; i++) {
+    h += amp * vnoise(q);
+    q = mat2(0.8, 0.6, -0.6, 0.8) * q * 2.1 + 3.7;
+    amp *= 0.45;
+  }
+  float valley = smoothstep(1.0, 9.0, abs(xz.x));
+  return (h - 0.55) * 4.5 * uHeight * (0.25 + 0.75 * valley);
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
+  float z = iTime * uSpeed * 4.0;
+  vec3 ro = vec3(sin(z * 0.03) * 1.5, 0.0, z);
+  ro.y = max(terrain(ro.xz), 0.0) * 0.4 + 2.6 * max(uHeight, 0.4);
+  vec3 fw = normalize(vec3(0.0, -0.22, 1.0));
+  vec3 rt = normalize(cross(vec3(0.0, 1.0, 0.0), fw));
+  vec3 up = cross(fw, rt);
+  vec3 rd = normalize(p.x * rt + p.y * up + 1.3 * fw);
+
+  // The sky: dark above, glowing toward the horizon.
+  vec3 sky = mix(uHorizon, uSky, smoothstep(-0.05, 0.35, rd.y));
+  sky += uHorizon * 0.6 * exp(-abs(rd.y) * 18.0);
+  vec2 sp = floor(fragCoord / 2.0);
+  sky += step(0.997, hash12(sp)) * smoothstep(0.0, 0.3, rd.y) * 0.7;
+  vec3 col = sky;
+
+  float far = 70.0;
+  float t = 0.5;
+  float prevT = t;
+  float prevGap = 1.0;
+  bool hit = false;
+  for (int i = 0; i < 80; i++) {
+    vec3 pos = ro + rd * t;
+    float gap = pos.y - terrain(pos.xz);
+    if (gap < 0.0) {
+      // Between the last step above the ground and this one below it.
+      t = prevT + (t - prevT) * prevGap / (prevGap - gap);
+      hit = true;
+      break;
+    }
+    prevT = t;
+    prevGap = gap;
+    t += max(0.06 * t, gap * 0.5);
+    // Above the highest hill and climbing: nothing left to meet.
+    if (t > far || (rd.y > 0.0 && pos.y > 5.0 * uHeight)) break;
+  }
+  if (hit) {
+    vec3 pos = ro + rd * t;
+    float h = terrain(pos.xz);
+    // A triangle mesh: lines along x, along z and one diagonal.
+    vec2 g = pos.xz * uDensity;
+    vec3 coord = vec3(g, g.x - g.y);
+    vec3 dist = abs(fract(coord + 0.5) - 0.5);
+    vec3 w = fwidth(coord);
+    vec3 lines3 = dist / max(w, 1e-4);
+    float lineD = min(min(lines3.x, lines3.y), lines3.z);
+    float line = 1.0 - smoothstep(uLineWidth * 0.5, uLineWidth * 0.5 + 1.0, lineD);
+    float glow = exp(-lineD / (uLineWidth * 3.0)) * 0.45 * uGlow;
+    // Lines too dense to tell apart blend into a faint wash.
+    float dense = smoothstep(0.25, 0.6, max(max(w.x, w.y), w.z));
+    float amount = mix(line + glow, 0.35, dense);
+    vec3 lineCol = mix(uLineLow, uLineHigh, smoothstep(-1.5, 2.5, h / max(uHeight, 0.1)));
+    vec3 surf = uFill + lineCol * amount;
+    float fog = 1.0 - exp(-t * 0.035 * uFog);
+    col = mix(surf, sky, clamp(fog * fog + smoothstep(far * 0.7, far, t), 0.0, 1.0));
+  }
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Matrix", values: { uSky: [0, 0.02, 0], uHorizon: [0, 0.25, 0.08], uFill: [0, 0.02, 0], uLineLow: [0, 0.6, 0.2], uLineHigh: [0.6, 1, 0.6] } },
+    { name: "Blueprint", values: { uSky: [0.05, 0.15, 0.35], uHorizon: [0.2, 0.4, 0.7], uFill: [0.06, 0.18, 0.4], uLineLow: [0.75, 0.88, 1], uLineHigh: [1, 1, 1], uGlow: 0.3 } }
+  ]
+};
+var metaballs3d = {
+  kind: "shader",
+  id: "metaballs-3d",
+  name: "3D metaballs",
+  description: "Glossy 3D metaballs drifting, merging and pulling apart like liquid, reflecting a soft studio around them.",
+  category: "3d",
+  tags: ["3d", "metaballs", "liquid", "blob", "glossy", "chrome", "background"],
+  source: glsl(
+    `// 3D metaballs: spheres joined with a smooth minimum, ray-marched inside their bounding sphere (56 steps
+// at most), shaded with a procedural studio environment for reflections and a fresnel rim.
+uniform vec3 uBackground;  // @control color default=#0E0B1A label="Background"
+uniform vec3 uColorA;      // @control color default=#FF4FA3 label="Colour A"
+uniform vec3 uColorB;      // @control color default=#6B5BFF label="Colour B"
+uniform int uCount;        // @control min=2 max=8 default=6 label="Balls"
+uniform float uMerge;      // @control min=0.05 max=1 default=0.45 label="Merge"
+uniform float uSpeed;      // @control min=0 max=3 default=1 label="Speed"
+uniform float uReflection; // @control min=0 max=1 default=0.7 label="Reflection"
+uniform float uSize;       // @control min=0.5 max=1.5 default=1 label="Size"`,
+    SPHERE_HIT,
+    `vec3 ballAt(int i) {
+  float fi = float(i);
+  float t = iTime * uSpeed * 0.5;
+  return vec3(sin(t * (0.7 + 0.13 * fi) + fi * 1.7) * 1.1, cos(t * (0.9 + 0.11 * fi) + fi * 2.3) * 0.7, sin(t * (0.5 + 0.07 * fi) + fi * 0.9) * 0.6) * uSize;
+}
+
+float smin(float a, float b, float k) {
+  float h = max(k - abs(a - b), 0.0) / k;
+  return min(a, b) - h * h * k * 0.25;
+}
+
+float scene(vec3 p) {
+  float d = 1e9;
+  for (int i = 0; i < 8; i++) {
+    if (i >= uCount) break;
+    float r = (0.42 + 0.12 * sin(float(i) * 3.1)) * uSize;
+    d = smin(d, length(p - ballAt(i)) - r, uMerge);
+  }
+  return d;
+}
+
+vec3 normalAt(vec3 p) {
+  vec2 e = vec2(1.0, -1.0) * 0.002;
+  return normalize(e.xyy * scene(p + e.xyy) + e.yyx * scene(p + e.yyx) + e.yxy * scene(p + e.yxy) + e.xxx * scene(p + e.xxx));
+}
+
+// A studio around the balls: a dim room, a bright softbox overhead and two strip lights.
+vec3 env(vec3 r) {
+  vec3 c = mix(uBackground * 0.6, uBackground * 2.0 + 0.08, smoothstep(-0.4, 0.6, r.y));
+  c += vec3(2.2) * smoothstep(0.82, 0.9, r.y);
+  float a = atan(r.x, r.z);
+  c += vec3(1.4, 1.3, 1.2) * smoothstep(0.06, 0.0, abs(a - 1.9)) * smoothstep(-0.4, 0.0, r.y) * smoothstep(0.7, 0.3, r.y);
+  c += vec3(0.9, 1.1, 1.4) * smoothstep(0.05, 0.0, abs(a + 2.2)) * smoothstep(-0.3, 0.1, r.y) * smoothstep(0.6, 0.2, r.y);
+  return c;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
+  vec3 ro = vec3(0.0, 0.0, 4.2);
+  vec3 rd = normalize(vec3(p, -1.6));
+  vec3 col = uBackground * (1.2 - 0.6 * length(p));
+  vec2 b = sphereHit(ro, rd, 2.3 * uSize);
+  if (b.x < b.y) {
+    float t = max(b.x, 0.0);
+    bool hit = false;
+    for (int i = 0; i < 56; i++) {
+      float d = scene(ro + rd * t);
+      if (d < 0.001) {
+        hit = true;
+        break;
+      }
+      t += d;
+      if (t > b.y) break;
+    }
+    if (hit) {
+      vec3 pos = ro + rd * t;
+      vec3 n = normalAt(pos);
+      float fres = pow(1.0 - max(dot(n, -rd), 0.0), 4.0);
+      vec3 base = mix(uColorA, uColorB, smoothstep(-0.6, 0.6, n.x * 0.7 + n.y * 0.5 + 0.2 * sin(iTime * 0.3)));
+      vec3 l = normalize(vec3(0.4, 0.8, 0.6));
+      float diff = max(dot(n, l), 0.0);
+      vec3 refl = env(reflect(rd, n));
+      col = base * (0.15 + 0.6 * diff) + refl * mix(0.08, 0.9, uReflection) * mix(0.35, 1.0, fres) + base * fres * 0.3;
+      col += pow(max(dot(reflect(rd, n), l), 0.0), 80.0) * 1.2;
+    }
+  }
+  fragColor = vec4(col / (1.0 + col * 0.15), 1.0);
+}`
+  ),
+  presets: [
+    { name: "Chrome", values: { uBackground: [0.06, 0.06, 0.08], uColorA: [0.35, 0.36, 0.4], uColorB: [0.55, 0.56, 0.6], uReflection: 1 } },
+    { name: "Candy", values: { uBackground: [1, 0.9, 0.93], uColorA: [1, 0.45, 0.6], uColorB: [1, 0.75, 0.3], uReflection: 0.45 } }
+  ]
+};
+var torusKnot = {
+  kind: "shader",
+  id: "torus-knot",
+  name: "Torus knot",
+  description: "A glowing torus knot tube turning slowly, its surface shimmering with iridescent thin-film colour.",
+  category: "3d",
+  tags: ["3d", "knot", "torus", "iridescent", "glow", "abstract", "background"],
+  source: glsl(
+    `// Torus knot: a (p, q) knot's tube as a distance from each of its p strands around the torus, ray-marched
+// inside a bounding sphere (80 steps at most); the march's near misses add up to a glow around it.
+uniform vec3 uBackground;  // @control color default=#05040B label="Background"
+uniform vec3 uGlowColor;   // @control color default=#7A5CFF label="Glow"
+uniform int uP;            // @control min=1 max=7 default=2 label="Turns around (p)"
+uniform int uQ;            // @control min=1 max=9 default=3 label="Turns through (q)"
+uniform float uThickness;  // @control min=0.05 max=0.35 default=0.16 label="Thickness"
+uniform float uSpeed;      // @control min=0 max=3 default=1 label="Speed"
+uniform float uIridescence; // @control min=0 max=1 default=0.8 label="Iridescence"
+uniform float uGlow;       // @control min=0 max=2 default=1 label="Glow amount"`,
+    SPHERE_HIT,
+    `const float R = 1.0;
+const float STRAND = 0.45;
+
+mat3 turn(float a, float b) {
+  float ca = cos(a), sa = sin(a), cb = cos(b), sb = sin(b);
+  return mat3(1.0, 0.0, 0.0, 0.0, cb, sb, 0.0, -sb, cb) * mat3(ca, 0.0, -sa, 0.0, 1.0, 0.0, sa, 0.0, ca);
+}
+
+// The tube's distance (an underestimate: the march takes shorter steps), and how far along the knot (0-1).
+vec2 knot(vec3 p) {
+  float r = length(p.xz);
+  float a = atan(p.z, p.x);
+  vec2 q = vec2(r - R, p.y);
+  float best = 1e9;
+  float along = 0.0;
+  float P = float(uP);
+  for (int k = 0; k < 7; k++) {
+    if (k >= uP) break;
+    float s = (a + 6.28318 * float(k)) / P;
+    float ang = s * float(uQ);
+    float d = length(q - STRAND * vec2(cos(ang), sin(ang)));
+    if (d < best) {
+      best = d;
+      along = s / 6.28318;
+    }
+  }
+  return vec2(best - uThickness, along);
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
+  vec3 ro = vec3(0.0, 0.0, 5.2);
+  vec3 rd = normalize(vec3(p, -1.3));
+  float t0 = iTime * uSpeed;
+  mat3 m = turn(t0 * 0.3, 1.15 + 0.25 * sin(t0 * 0.2));
+  vec3 lro = m * ro;
+  vec3 lrd = m * rd;
+  vec3 col = uBackground + uGlowColor * 0.05 * (1.0 - length(p));
+  float glow = 0.0;
+  vec2 b = sphereHit(lro, lrd, R + STRAND + uThickness + 0.05);
+  if (b.x < b.y) {
+    float t = max(b.x, 0.0);
+    bool hit = false;
+    vec2 h = vec2(0.0);
+    for (int i = 0; i < 80; i++) {
+      h = knot(lro + lrd * t);
+      if (h.x < 0.001) {
+        hit = true;
+        break;
+      }
+      // The field stretches where strands wind fast around a small radius: step within its slope.
+      vec3 at = lro + lrd * t;
+      float slope = STRAND * float(uQ) / (float(uP) * max(length(at.xz), 0.3));
+      float dt = h.x / sqrt(1.0 + slope * slope) * 0.9;
+      // Glow by the length of ray spent near the tube, so it does not depend on the step count.
+      glow += exp(-h.x * 9.0) * min(dt, b.y - t) * 0.6;
+      t += dt;
+      if (t > b.y) break;
+    }
+    if (hit) {
+      vec3 pos = lro + lrd * t;
+      vec2 e = vec2(0.002, 0.0);
+      vec3 n = normalize(vec3(knot(pos + e.xyy).x - knot(pos - e.xyy).x, knot(pos + e.yxy).x - knot(pos - e.yxy).x, knot(pos + e.yyx).x - knot(pos - e.yyx).x));
+      float facing = max(dot(n, -lrd), 0.0);
+      // Thin film: the colour shifts with the viewing angle and along the knot.
+      vec3 film = 0.5 + 0.5 * cos(6.28318 * (vec3(0.0, 0.33, 0.67) + (1.0 - facing) * 1.4 + h.y * 2.0 + iTime * 0.05));
+      vec3 base = mix(uGlowColor, film, uIridescence);
+      vec3 l = normalize(m * vec3(0.5, 0.7, 0.6));
+      float diff = max(dot(n, l), 0.0);
+      float spec = pow(max(dot(reflect(lrd, n), l), 0.0), 60.0);
+      float rim = pow(1.0 - facing, 3.0);
+      col = base * (0.18 + 0.75 * diff) + spec * 0.9 + mix(uGlowColor, film, 0.5) * rim * 0.9;
+    }
+  }
+  col += uGlowColor * glow * uGlow;
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Trefoil", values: { uP: 2, uQ: 3 } },
+    { name: "Cinquefoil", values: { uP: 2, uQ: 5, uThickness: 0.12 } },
+    { name: "Gold", values: { uP: 3, uQ: 4, uThickness: 0.11, uGlowColor: [1, 0.7, 0.25], uIridescence: 0.3 } }
+  ]
+};
+var threeDShaders = [globe, rotatingShapes, isometricCity, wireframeTerrain, metaballs3d, torusKnot];
+
+// src/catalog/shaders/space-more.ts
+var STARS2 = `
+float stars(vec2 fragCoord, float density) {
+  vec2 cell = floor(fragCoord / 3.0);
+  float h = hash12(cell);
+  float on = step(1.0 - 0.012 * density, h);
+  vec2 at = hash22(cell) * 3.0;
+  float d = length(fract(fragCoord / 3.0) * 3.0 - at);
+  return on * smoothstep(1.4, 0.0, d) * (0.4 + 0.6 * hash12(cell + 7.0)) * (0.75 + 0.25 * sin(iTime * (1.0 + 3.0 * h) + h * 40.0));
+}`.trim();
+var SPHERE_HIT2 = `
+vec2 sphereHit(vec3 ro, vec3 rd, float r) {
+  float b = dot(ro, rd);
+  float c = dot(ro, ro) - r * r;
+  float h = b * b - c;
+  if (h < 0.0) return vec2(1e9, -1e9);
+  h = sqrt(h);
+  return vec2(-b - h, -b + h);
+}`.trim();
+var planet = {
+  kind: "shader",
+  id: "planet",
+  name: "Planet",
+  description: "A turning planet, banded gas giant or rocky world, lit from one side with a soft terminator, a scattering atmosphere and optional rings.",
+  category: "space",
+  tags: ["space", "planet", "saturn", "rings", "astronomy", "sci-fi", "background"],
+  source: glsl(
+    `// Planet: an analytic sphere on a tilted axis, banded (fbm-warped latitude) or rocky (3D noise), with a
+// rim of scattered light brighter on the day side, and a ring plane that shadows the planet and is shadowed by it.
+uniform int uStyle;          // @control min=0 max=1 default=0 label="Style (0 gas giant, 1 rocky)"
+uniform vec3 uBackground;    // @control color default=#02030A label="Background"
+uniform vec3 uColorA;        // @control color default=#EBD3A8 label="Colour A"
+uniform vec3 uColorB;        // @control color default=#B0683E label="Colour B"
+uniform vec3 uAtmosphere;    // @control color default=#8DB8FF label="Atmosphere"
+uniform vec3 uRingColor;     // @control color default=#D8C6A2 label="Ring colour"
+uniform bool uRings;         // @control default=true label="Rings"
+uniform float uSize;         // @control min=0.4 max=1.6 default=1 label="Size"
+uniform float uSpin;         // @control min=-1 max=1 default=0.12 label="Spin speed"
+uniform float uTilt;         // @control min=-1 max=1 default=0.42 label="Axis tilt"
+uniform float uSunAngle;     // @control min=-3.1416 max=3.1416 default=0.35 label="Sun direction"
+uniform float uAtmosphereAmount; // @control min=0 max=2 default=1 label="Atmosphere amount"`,
+    HASH,
+    NOISE_3D,
+    STARS2,
+    SPHERE_HIT2,
+    `const float CAM = 4.2;
+
+// The planet's axis tilted toward the viewer, and its frame (spin about the axis).
+mat3 frame(float spin) {
+  float ct = cos(uTilt), st = sin(uTilt);
+  float cv = cos(0.35), sv = sin(0.35);
+  float cs = cos(spin), ss = sin(spin);
+  mat3 roll = mat3(ct, st, 0.0, -st, ct, 0.0, 0.0, 0.0, 1.0);
+  mat3 lean = mat3(1.0, 0.0, 0.0, 0.0, cv, sv, 0.0, -sv, cv);
+  mat3 turn = mat3(cs, 0.0, -ss, 0.0, 1.0, 0.0, ss, 0.0, cs);
+  return lean * roll * turn;
+}
+
+vec3 surface(vec3 g) {
+  if (uStyle == 0) {
+    // Bands of latitude, warped by noise, and one great storm.
+    float warp = fbm3(g * vec3(2.0, 7.0, 2.0) + vec3(0.0, 0.0, iTime * 0.02), 4);
+    float v = g.y + 0.09 * (warp - 0.5);
+    float bands = 0.5 + 0.35 * sin(v * 17.0) + 0.15 * sin(v * 43.0 + 1.3);
+    vec3 c = mix(uColorB, uColorA, smoothstep(0.2, 0.8, bands));
+    c *= 0.9 + 0.2 * fbm3(g * vec3(4.0, 24.0, 4.0), 3);
+    vec2 storm = vec2(atan(g.x, g.z) - 0.9, (g.y + 0.38) * 3.2);
+    float s = length(storm * vec2(1.0, 1.6));
+    c = mix(c, mix(uColorB * 1.25, uColorA, 0.25), smoothstep(0.32, 0.18, s) * (0.7 + 0.3 * sin(s * 30.0)));
+    return c;
+  }
+  // Rocky: two kinds of ground by noise, darker basins, polar caps.
+  float n = fbm3(g * 2.4, 5);
+  float fine = fbm3(g * 11.0, 3);
+  vec3 c = mix(uColorB, uColorA, smoothstep(0.35, 0.65, n));
+  c *= 0.75 + 0.45 * fine;
+  c = mix(c, uColorB * 0.45, smoothstep(0.58, 0.72, n) * 0.6);
+  c = mix(c, vec3(0.95), smoothstep(0.86, 0.92, abs(g.y) + fine * 0.08));
+  return c;
+}
+
+// How much the rings hold at radius r (in planet radii).
+float ringDensity(float r) {
+  if (r < 1.35 || r > 2.35) return 0.0;
+  float d = 0.5 + 0.2 * sin(r * 61.0) + 0.15 * sin(r * 23.0 + 1.0) + 0.15 * sin(r * 137.0 + 2.0) * sin(r * 9.0);
+  d *= smoothstep(1.35, 1.45, r) * smoothstep(2.35, 2.2, r);
+  // A dark gap partway out.
+  d *= 1.0 - 0.85 * smoothstep(0.04, 0.0, abs(r - 1.95));
+  return clamp(d, 0.0, 1.0);
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float px = 1.0 / iResolution.y;
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) * px;
+  float f = 1.55 * uSize * (uRings ? 0.52 : 1.0);
+  vec3 ro = vec3(0.0, 0.0, CAM);
+  vec3 rd = normalize(vec3(p, -f));
+  vec3 sun = normalize(vec3(cos(uSunAngle), 0.25, sin(uSunAngle)));
+  mat3 m = frame(iTime * uSpin);
+  vec3 axis = m * vec3(0.0, 1.0, 0.0);
+
+  vec3 col = uBackground + stars(fragCoord, 1.0);
+  vec2 hit = sphereHit(ro, rd, 1.0);
+  float closest = length(ro - rd * dot(ro, rd));
+  // Scattered light beyond the limb, brightest toward the sun.
+  vec2 dir = normalize(p + 1e-5);
+  float sunSide = 0.25 + 0.75 * smoothstep(-0.6, 0.6, dot(dir, normalize(sun.xy + vec2(1e-4))) + sun.z * 0.3);
+  float halo = exp(-max(closest - 1.0, 0.0) * 14.0) * sunSide * uAtmosphereAmount;
+  col += uAtmosphere * halo * 0.7;
+
+  float tPlanet = hit.x < hit.y ? hit.x : 1e9;
+  if (tPlanet < 1e8) {
+    vec3 n = ro + rd * tPlanet;
+    vec3 g = n * m;
+    vec3 c = surface(g);
+    float ndl = dot(n, sun);
+    // A soft terminator, slightly warm where day turns to night.
+    float day = smoothstep(-0.12, 0.35, ndl);
+    float light = max(ndl, 0.0) * 0.85 + day * 0.15;
+    vec3 lit = c * light + c * vec3(1.0, 0.55, 0.35) * 0.12 * smoothstep(0.25, 0.0, abs(ndl + 0.02));
+    // The rings' shadow on the planet.
+    if (uRings) {
+      float tr = -dot(n, axis) / dot(sun, axis);
+      if (tr > 0.0) {
+        vec3 q = n + sun * tr;
+        lit *= 1.0 - 0.75 * ringDensity(length(q));
+      }
+    }
+    float facing = max(dot(n, -rd), 0.0);
+    float rim = pow(1.0 - facing, 2.5) * (0.15 + smoothstep(-0.3, 0.6, ndl)) * uAtmosphereAmount;
+    lit += uAtmosphere * rim * 0.9;
+    float edge = smoothstep(1.0, 1.0 - 2.0 * px * (CAM - 1.0) / f, closest);
+    col = mix(col, lit, edge);
+  }
+
+  if (uRings) {
+    float tr = -dot(ro, axis) / dot(rd, axis);
+    if (tr > 0.0 && tr < tPlanet + (tPlanet < 1e8 ? 0.0 : 1e9)) {
+      vec3 q = ro + rd * tr;
+      float r = length(q);
+      float dens = ringDensity(r);
+      if (dens > 0.0) {
+        // Lit unless the planet stands between the ring and the sun.
+        vec2 sh = sphereHit(q, sun, 1.0);
+        float shadow = sh.x < sh.y && sh.y > 0.0 ? 0.12 : 1.0;
+        float light = 0.35 + 0.65 * abs(dot(sun, axis));
+        vec3 rc = uRingColor * (0.85 + 0.15 * sin(r * 97.0)) * light * shadow;
+        col = mix(col, rc, dens * 0.85);
+      }
+    }
+  }
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Gas giant", values: { uStyle: 0, uRings: true } },
+    {
+      name: "Ice giant",
+      values: { uStyle: 0, uRings: false, uColorA: [0.72, 0.9, 0.95], uColorB: [0.32, 0.62, 0.82], uAtmosphere: [0.6, 0.85, 1], uTilt: 0.9 }
+    },
+    {
+      name: "Red planet",
+      values: { uStyle: 1, uRings: false, uColorA: [0.86, 0.5, 0.3], uColorB: [0.45, 0.2, 0.12], uAtmosphere: [1, 0.6, 0.45], uAtmosphereAmount: 0.5 }
+    }
+  ]
+};
+var spiralGalaxy = {
+  kind: "shader",
+  id: "spiral-galaxy",
+  name: "Spiral galaxy",
+  description: "A spiral galaxy seen at a tilt, its arms of blue stars and pink nebulae wound around a warm core and laced with dark dust lanes, turning slowly.",
+  category: "space",
+  tags: ["space", "galaxy", "stars", "astronomy", "cosmic", "background"],
+  source: glsl(
+    `// Spiral galaxy: log-spiral arms (cos of arms \xD7 (angle \u2212 winding \xD7 ln r)) on a tilted disc, stars
+// scattered more thickly along the arms, fbm dust lanes on their inner edges and a bulge at the core.
+uniform vec3 uBackground;  // @control color default=#020208 label="Background"
+uniform vec3 uCore;        // @control color default=#FFE0B0 label="Core"
+uniform vec3 uArmColor;    // @control color default=#8AB0FF label="Arms"
+uniform vec3 uNebula;      // @control color default=#FF6FB0 label="Nebulae"
+uniform int uArms;         // @control min=1 max=6 default=2 label="Arms"
+uniform float uWinding;    // @control min=0.5 max=4 default=2.2 label="Winding"
+uniform float uTilt;       // @control min=0 max=1.4 default=0.95 label="Tilt"
+uniform float uAngle;      // @control min=-3.1416 max=3.1416 default=0.5 label="Angle"
+uniform float uSize;       // @control min=0.4 max=2 default=1 label="Size"
+uniform float uSpeed;      // @control min=-2 max=2 default=0.4 label="Rotation speed"
+uniform float uDust;       // @control min=0 max=1 default=0.7 label="Dust"`,
+    HASH,
+    NOISE,
+    FBM,
+    STARS2,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float px = 1.0 / iResolution.y;
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) * px;
+  float ca = cos(uAngle), sa = sin(uAngle);
+  vec2 q = mat2(ca, sa, -sa, ca) * p / (0.42 * uSize);
+  // Undo the tilt: the disc is foreshortened along y.
+  q.y /= max(cos(uTilt), 0.08);
+  float r = length(q);
+  float spin = iTime * uSpeed * 0.06;
+  // The disc's own coordinates, turned with the galaxy.
+  vec2 d = mat2(cos(spin), sin(spin), -sin(spin), cos(spin)) * q;
+  float theta = atan(d.y, d.x);
+  float arms = float(uArms);
+  float wind = theta - uWinding * log(max(r, 1e-3));
+  float arm = 0.5 + 0.5 * cos(arms * wind);
+  float armSharp = pow(arm, 3.0);
+  float disc = exp(-r * 2.6) * smoothstep(1.4, 0.6, r);
+
+  // Clumpy light along the arms.
+  float clump = fbm(d * 4.0, 5);
+  float light = disc * (0.25 + 1.4 * armSharp * (0.5 + clump));
+  vec3 col = uBackground + stars(fragCoord, 1.0) * (1.0 - smoothstep(0.0, 0.6, disc * 4.0));
+  col += uArmColor * light * 1.2;
+  // Pink star-forming knots on the arms.
+  float knots = smoothstep(0.62, 0.8, fbm(d * 9.0 + 3.0, 4)) * armSharp * disc;
+  col += uNebula * knots * 2.2;
+  // Stars along the arms, more toward the middle.
+  for (int i = 0; i < 2; i++) {
+    float scale = i == 0 ? 90.0 : 180.0;
+    vec2 g = d * scale * uSize;
+    vec2 cell = floor(g);
+    float h = hash12(cell + float(i) * 31.0);
+    float chance = disc * (0.4 + 2.5 * armSharp) * (i == 0 ? 1.6 : 3.0);
+    float s = step(1.0 - min(chance, 0.9), h);
+    vec2 at = hash22(cell) * 0.6 + 0.2;
+    float dist = length(fract(g) - at) / (scale * uSize * px * 0.42 * uSize);
+    col += mix(uArmColor, vec3(1.0), 0.6) * s * smoothstep(1.6, 0.0, dist) * (0.4 + 0.6 * hash12(cell + 9.0));
+  }
+  // Dust lanes on the arms' inner edges.
+  float lane = pow(0.5 + 0.5 * cos(arms * wind - 0.9), 6.0);
+  float dust = lane * smoothstep(0.08, 0.3, r) * smoothstep(1.2, 0.5, r) * (0.35 + 0.65 * fbm(d * 7.0 + 11.0, 4)) * uDust;
+  col *= 1.0 - 0.85 * clamp(dust * 1.6, 0.0, 1.0);
+  // The bulge.
+  float bulge = exp(-r * r * 30.0) * 1.6 + exp(-r * 6.0) * 0.35;
+  col += uCore * bulge;
+  fragColor = vec4(col / (1.0 + 0.25 * col), 1.0);
+}`
+  ),
+  presets: [
+    { name: "Face on", values: { uTilt: 0.15, uWinding: 2.6 } },
+    { name: "Edge on", values: { uTilt: 1.3, uAngle: 0.15 } },
+    { name: "Four arms", values: { uArms: 4, uWinding: 1.6, uArmColor: [0.75, 0.6, 1], uNebula: [1, 0.45, 0.6] } }
+  ]
+};
+var solarSystem = {
+  kind: "shader",
+  id: "solar-system",
+  name: "Solar system",
+  description: "A stylised solar system seen at a tilt: planets circling a glowing sun on their orbit lines, the outer ones slower, one with rings.",
+  category: "space",
+  tags: ["space", "solar system", "planets", "orbit", "astronomy", "sun", "background"],
+  source: glsl(
+    `// Solar system: planets as analytic spheres on circular orbits in a plane seen at a tilt, orbit lines where
+// each pixel's ray meets that plane (anti-aliased with fwidth), lit from the sun at the centre.
+uniform vec3 uBackground;  // @control color default=#03040B label="Background"
+uniform vec3 uSun;         // @control color default=#FFB443 label="Sun"
+uniform vec3 uOrbit;       // @control color default=#7C8BB8 label="Orbit lines"
+uniform int uPlanets;      // @control min=1 max=8 default=8 label="Planets"
+uniform float uSpeed;      // @control min=0 max=4 default=1 label="Speed"
+uniform float uTilt;       // @control min=0.1 max=1.5 default=0.5 label="Tilt"
+uniform float uZoom;       // @control min=0.5 max=2 default=1 label="Zoom"
+uniform float uOrbitOpacity; // @control min=0 max=1 default=0.45 label="Orbit opacity"
+uniform float uPlanetSize; // @control min=0.5 max=2 default=1 label="Planet size"`,
+    HASH,
+    NOISE_3D,
+    STARS2,
+    SPHERE_HIT2,
+    `const vec3 COLOUR[8] = vec3[8](vec3(0.66, 0.62, 0.58), vec3(0.95, 0.78, 0.5), vec3(0.3, 0.55, 0.95), vec3(0.85, 0.42, 0.25),
+  vec3(0.86, 0.72, 0.55), vec3(0.92, 0.82, 0.6), vec3(0.6, 0.88, 0.92), vec3(0.32, 0.45, 0.95));
+const float SIZE[8] = float[8](0.035, 0.05, 0.055, 0.042, 0.11, 0.095, 0.07, 0.068);
+
+float orbitRadius(int i) {
+  return 0.42 + float(i) * 0.2 + float(i) * float(i) * 0.008;
+}
+
+vec3 planetAt(int i) {
+  float r = orbitRadius(i);
+  float a = iTime * uSpeed * 0.6 / pow(r / 0.42, 1.5) + float(i) * 2.4 + 0.7;
+  return vec3(cos(a), 0.0, sin(a)) * r;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float px = 1.0 / iResolution.y;
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) * px;
+  float dist = 4.6 / uZoom;
+  vec3 ro = vec3(0.0, sin(uTilt), cos(uTilt)) * dist;
+  vec3 fw = normalize(-ro);
+  vec3 rt = normalize(cross(fw, vec3(0.0, 1.0, 0.0)));
+  vec3 up = cross(rt, fw);
+  vec3 rd = normalize(p.x * rt + p.y * up + 1.8 * fw);
+
+  vec3 col = uBackground + stars(fragCoord, 1.0);
+  float sunR = 0.17;
+
+  // The nearest planet along the ray.
+  float tBest = 1e9;
+  int best = -1;
+  for (int i = 0; i < 8; i++) {
+    if (i >= uPlanets) break;
+    vec2 h = sphereHit(ro - planetAt(i), rd, SIZE[i] * uPlanetSize);
+    if (h.x < h.y && h.x > 0.0 && h.x < tBest) {
+      tBest = h.x;
+      best = i;
+    }
+  }
+  vec2 sunHit = sphereHit(ro, rd, sunR);
+  float tSun = sunHit.x < sunHit.y ? sunHit.x : 1e9;
+
+  // Orbit lines, where the ray meets the plane in front of anything solid.
+  float tPlane = -ro.y / rd.y;
+  if (tPlane > 0.0 && tPlane < min(tBest, tSun)) {
+    vec3 q = ro + rd * tPlane;
+    float r = length(q.xz);
+    float w = fwidth(r);
+    float lines = 0.0;
+    for (int i = 0; i < 8; i++) {
+      if (i >= uPlanets) break;
+      lines = max(lines, 1.0 - smoothstep(0.5, 1.5, abs(r - orbitRadius(i)) / max(w, 1e-5)));
+    }
+    col += uOrbit * lines * uOrbitOpacity;
+  }
+
+  if (best >= 0 && tBest < tSun) {
+    vec3 c = planetAt(best);
+    vec3 pos = ro + rd * tBest;
+    vec3 n = normalize(pos - c);
+    vec3 l = normalize(-c);
+    vec3 base = COLOUR[best];
+    // Gas giants get bands.
+    if (best >= 4) base *= 0.85 + 0.25 * sin(n.y * 26.0 + float(best) + 2.0 * vnoise3(n * 4.0));
+    if (best == 2) base = mix(base, vec3(0.3, 0.6, 0.3), smoothstep(0.5, 0.6, vnoise3(n * 3.0 + 2.0)));
+    float diff = max(dot(n, l), 0.0);
+    col = base * (0.04 + 0.96 * diff) + uSun * pow(1.0 - max(dot(n, -rd), 0.0), 3.0) * diff * 0.4;
+  } else if (tSun < 1e8) {
+    vec3 n = normalize(ro + rd * tSun);
+    float boil = fbm3(n * 6.0 + vec3(0.0, iTime * 0.15, 0.0), 4);
+    float limb = max(dot(n, -rd), 0.0);
+    col = uSun * (0.7 + 0.8 * boil) * (0.55 + 0.45 * limb) + vec3(1.0, 0.95, 0.8) * pow(limb, 3.0) * 0.5;
+  }
+
+  // Saturn's rings (the sixth planet), drawn over whatever lies behind them.
+  if (uPlanets >= 6) {
+    vec3 c = planetAt(5);
+    float t = -ro.y / rd.y;
+    if (t > 0.0 && t < min(tSun, best == 5 ? tBest + 0.0 : 1e9)) {
+      float r = length((ro + rd * t) - c) / (SIZE[5] * uPlanetSize);
+      float ring = smoothstep(1.35, 1.45, r) * smoothstep(2.3, 2.15, r) * (0.6 + 0.4 * sin(r * 40.0));
+      if (best != 5 || t < tBest) col = mix(col, COLOUR[5] * 0.95, ring * 0.75);
+    }
+  }
+
+  // The sun's glow over everything.
+  float closest = length(ro - rd * dot(ro, rd));
+  col += uSun * exp(-max(closest - sunR, 0.0) * 9.0) * 0.6;
+  col += uSun * exp(-max(closest - sunR, 0.0) * 40.0) * 0.6;
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Top down", values: { uTilt: 1.45, uZoom: 0.9 } },
+    { name: "Inner planets", values: { uPlanets: 4, uZoom: 1.9, uPlanetSize: 1.6 } }
+  ]
+};
+var spaceShaders = [planet, spiralGalaxy, solarSystem];
+
+// src/catalog/shaders/weather.ts
+var rainStreaks = {
+  kind: "shader",
+  id: "rain-streaks",
+  name: "Rain streaks",
+  description: "Rain falling in slanted streaks at several depths, splashing where it meets a ground line, to lay over any scene.",
+  category: "weather",
+  tags: ["weather", "rain", "storm", "overlay", "particles", "moody"],
+  transparent: true,
+  source: glsl(
+    `// Rain streaks: layers of streaks in sheared grid cells (far layers finer, slower and fainter), and splashes
+// (a ring and a few flying droplets) in cells along the ground line.
+uniform vec3 uColor;      // @control color default=#D4E4FF label="Colour"
+uniform float uDensity;   // @control min=0 max=1 default=0.55 label="Density"
+uniform float uSpeed;     // @control min=0 max=3 default=1 label="Speed"
+uniform float uWind;      // @control min=-1 max=1 default=0.18 label="Wind (slant)"
+uniform float uLength;    // @control min=0.2 max=3 default=1 label="Streak length"
+uniform int uLayers;      // @control min=1 max=5 default=4 label="Layers"
+uniform float uGround;    // @control min=0 max=0.6 default=0.1 label="Ground line"
+uniform float uSplashes;  // @control min=0 max=1 default=0.8 label="Splashes"
+uniform float uOpacity;   // @control min=0 max=1 default=0.75 label="Opacity"`,
+    HASH,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float px = 1.0 / iResolution.y;
+  vec2 p = fragCoord * px;
+  float a = 0.0;
+  for (int i = 0; i < 5; i++) {
+    if (i >= uLayers) break;
+    float depth = (float(i) + 1.0) / float(uLayers);
+    // Columns per screen height, and how long a cell is (in columns).
+    float cols = mix(70.0, 18.0, depth);
+    float cellH = 6.0;
+    // Shear so streaks slant with the wind.
+    vec2 q = vec2(p.x - (p.y - uGround) * uWind, p.y);
+    float fall = iTime * uSpeed * mix(1.4, 3.2, depth);
+    float column = floor(q.x * cols + float(i) * 7.3);
+    // Each column's cells start at a height of their own, so streaks never line up in rows.
+    vec2 g = vec2(q.x * cols + float(i) * 7.3, (q.y + fall) * cols / cellH + hash12(vec2(column, float(i))));
+    vec2 cell = floor(g);
+    vec2 f = fract(g);
+    float h = hash12(cell + float(i) * 13.1);
+    if (h > uDensity) continue;
+    float x = 0.2 + 0.6 * hash12(cell + 3.3);
+    float len = clamp(0.35 * uLength * mix(0.6, 1.0, depth) * (0.7 + 0.6 * hash12(cell + 5.7)), 0.05, 0.95);
+    float top = 0.05 + (0.95 - len) * hash12(cell + 9.1);
+    // Distance across the streak in pixels (a column is iResolution.y / cols pixels wide).
+    float across = abs(f.x - x) / (px * cols);
+    float width = mix(0.5, 1.4, depth);
+    float along = (f.y - top) / len;
+    float body = step(0.0, along) * step(along, 1.0) * pow(1.0 - along, 0.6) * smoothstep(0.0, 0.15, along);
+    float streak = (1.0 - smoothstep(width * 0.5, width * 0.5 + 1.0, across)) * body;
+    // Rain stops at the ground.
+    streak *= step(uGround, p.y);
+    a = max(a, streak * mix(0.25, 0.9, depth));
+  }
+  // Splashes along the ground: a flattened ring spreading and droplets thrown up.
+  if (uSplashes > 0.0) {
+    for (int k = 0; k < 2; k++) {
+      float w = 0.045;
+      float sx = p.x / w + float(k) * 0.5;
+      float cell = floor(sx);
+      float period = 0.45 + 0.5 * hash12(vec2(cell, float(k)));
+      float time = iTime * uSpeed + hash12(vec2(cell, 7.0 + float(k))) * period;
+      float cycle = floor(time / period);
+      float age = fract(time / period) * period;
+      if (hash12(vec2(cell, cycle + float(k) * 19.0)) > uSplashes * uDensity * 1.4) continue;
+      vec2 centre = vec2((cell + 0.25 + 0.5 * hash12(vec2(cell, cycle + 2.0)) - float(k) * 0.5) * w, uGround);
+      vec2 d = p - centre;
+      float life = smoothstep(0.25, 0.0, age);
+      // The ring, flattened by perspective.
+      float r = 0.004 + age * 0.08;
+      float ring = abs(length(d * vec2(1.0, 3.5)) - r);
+      a = max(a, (1.0 - smoothstep(0.6 * px, 1.8 * px, ring)) * life * 0.7 * step(-0.003, d.y));
+      // Droplets.
+      for (int j = 0; j < 3; j++) {
+        float fj = float(j);
+        float vx = (fj - 1.0) * 0.12 + (hash12(vec2(cell, fj + cycle)) - 0.5) * 0.06;
+        float vy = 0.22 + 0.12 * hash12(vec2(cell + 4.0, fj + cycle));
+        vec2 at = centre + vec2(vx * age, vy * age - 2.2 * age * age);
+        float drop = 1.0 - smoothstep(0.8 * px, 2.0 * px, length(p - at));
+        a = max(a, drop * life * step(uGround - 0.002, at.y) * 0.9);
+      }
+    }
+  }
+  fragColor = vec4(uColor, a * uOpacity);
+}`
+  ),
+  presets: [
+    { name: "Drizzle", values: { uDensity: 0.25, uSpeed: 0.7, uLength: 0.6, uWind: 0.05, uOpacity: 0.55 } },
+    { name: "Downpour", values: { uDensity: 0.9, uSpeed: 1.6, uLength: 1.6, uWind: 0.35, uLayers: 5 } },
+    { name: "No splashes", values: { uSplashes: 0, uGround: 0 } }
+  ]
+};
+var thunderstorm = {
+  kind: "shader",
+  id: "thunderstorm",
+  name: "Thunderstorm",
+  description: "Dark, roiling storm clouds lit from inside by flickering lightning, with bolts to the ground and driving rain.",
+  category: "weather",
+  tags: ["weather", "storm", "lightning", "clouds", "rain", "dramatic", "background"],
+  source: glsl(
+    `// Thunderstorm: domain-warped fbm clouds, flashes in random slots that light the clouds around a point
+// (more where they are thin), a jagged bolt to the ground for some, and two layers of rain.
+uniform vec3 uSky;         // @control color default=#10131C label="Sky"
+uniform vec3 uCloud;       // @control color default=#454C5E label="Cloud"
+uniform vec3 uFlash;       // @control color default=#D6DEFF label="Flash"
+uniform vec3 uRainColor;   // @control color default=#9AA8C4 label="Rain"
+uniform float uFrequency;  // @control min=0 max=2 default=0.5 label="Flashes per second"
+uniform float uRain;       // @control min=0 max=1 default=0.6 label="Rain"
+uniform float uSpeed;      // @control min=0 max=3 default=1 label="Cloud speed"
+uniform bool uBolts;       // @control default=true label="Bolts"`,
+    HASH,
+    NOISE,
+    FBM,
+    `// The flash in slot k: its brightness now, where (x), and whether it strikes the ground.
+vec3 flashAt(float slot, float t) {
+  float h = hash12(vec2(slot, 1.7));
+  if (h > 0.7) return vec3(0.0);
+  float start = hash12(vec2(slot, 4.1)) * 0.5;
+  float tau = t - start;
+  if (tau < 0.0) return vec3(0.0);
+  // A few flickers: a bright strike, a dip, a restrike, then fading.
+  float b = exp(-tau * 9.0) + 0.7 * exp(-max(tau - 0.12, 0.0) * 12.0) * step(0.12, tau) + 0.4 * exp(-max(tau - 0.3, 0.0) * 6.0) * step(0.3, tau);
+  return vec3(b, hash12(vec2(slot, 9.3)), step(0.45, hash12(vec2(slot, 2.2))));
+}
+
+float rain(vec2 p, float cols, float speed, float slant, float seed) {
+  vec2 q = vec2(p.x + p.y * slant, p.y + iTime * speed);
+  vec2 g = vec2(q.x * cols + seed, q.y * cols / 8.0);
+  vec2 c = floor(g);
+  vec2 f = fract(g);
+  if (hash12(c + seed) > uRain) return 0.0;
+  float x = 0.2 + 0.6 * hash12(c + 1.3);
+  float across = abs(f.x - x) * iResolution.y / cols;
+  float y0 = hash12(c + 2.9) * 0.5;
+  float body = smoothstep(y0, y0 + 0.1, f.y) * smoothstep(y0 + 0.5, y0 + 0.3, f.y);
+  return (1.0 - smoothstep(0.4, 1.4, across)) * body;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float px = 1.0 / iResolution.y;
+  vec2 uv = fragCoord / iResolution.xy;
+  vec2 p = fragCoord * px;
+  float aspect = iResolution.x / iResolution.y;
+  float t = iTime * uSpeed * 0.05;
+
+  // Clouds: warped fbm, thickest overhead, with a ragged base.
+  vec2 cp = vec2(p.x, p.y * 1.6) * 1.6;
+  vec2 warp = vec2(fbm(cp + vec2(t, 0.0), 4), fbm(cp + vec2(5.2, 1.3) - vec2(0.0, t * 0.7), 4));
+  float dens = fbm(cp + 1.8 * warp + vec2(t * 2.0, 0.0), 5);
+  float base = smoothstep(0.25, 0.75, uv.y + 0.35 * (dens - 0.5));
+  float cloud = clamp(smoothstep(0.35, 0.68, dens) * 0.75 + base * 0.6, 0.0, 1.0);
+  // Light from above: thick cloud is dark below.
+  float shade = fbm(cp + 1.8 * warp + vec2(t * 2.0, 0.03), 5) - dens;
+  vec3 col = mix(uSky * 0.7, uCloud * clamp(0.55 + 5.0 * shade + 0.45 * uv.y, 0.15, 1.6), cloud);
+
+  // Lightning: one possible flash in each slot.
+  float slotLen = 1.0 / max(uFrequency, 0.01);
+  float slot = floor(iTime / slotLen);
+  vec3 fl = flashAt(slot, iTime - slot * slotLen);
+  if (uFrequency > 0.0 && fl.x > 0.002) {
+    vec2 at = vec2((0.1 + 0.8 * fl.y) * aspect, 0.72 + 0.15 * hash12(vec2(slot, 6.6)));
+    float d = length(p - at);
+    float glow = exp(-d * 3.2);
+    // Light scatters through the cloud: brightest at the source, more where the cloud is thinner.
+    col += uFlash * fl.x * glow * (0.35 + 0.9 * cloud * (1.2 - dens)) * 1.6;
+    col += uFlash * fl.x * 0.12;
+    if (uBolts && fl.z > 0.5) {
+      // A jagged bolt from the cloud base to the ground, with one fork.
+      float y = p.y;
+      float jag = (fbm(vec2(y * 5.0, slot * 3.1), 4) - 0.5) * 0.35 + (vnoise(vec2(y * 40.0, slot)) - 0.5) * 0.03;
+      float x = at.x + jag;
+      float dx = abs(p.x - x);
+      float span = step(y, at.y) * smoothstep(-0.02, 0.05, y);
+      float core = (1.0 - smoothstep(0.6 * px, 2.2 * px, dx)) * span;
+      float halo = exp(-dx * 60.0) * span * 0.5;
+      float forkY = at.y - 0.2 - 0.15 * hash12(vec2(slot, 8.8));
+      float fx = x + (forkY - y) * (0.3 * sign(hash12(vec2(slot, 3.3)) - 0.5)) + (vnoise(vec2(y * 30.0, slot + 9.0)) - 0.5) * 0.04;
+      float fork = (1.0 - smoothstep(0.5 * px, 1.6 * px, abs(p.x - fx))) * step(y, forkY) * step(forkY - 0.18, y) * smoothstep(forkY - 0.18, forkY - 0.1, y);
+      float strike = smoothstep(0.25, 0.6, fl.x);
+      col += (vec3(1.0) * (core + fork * 0.8) + uFlash * halo) * strike * 1.5;
+    }
+  }
+  // The land: a dark ridge lit by the flash.
+  float ridge = 0.08 + 0.04 * fbm(vec2(p.x * 3.0, 1.0), 4);
+  col = mix(col, uSky * 0.35 + uFlash * fl.x * 0.15, 1.0 - smoothstep(ridge - px, ridge + px, p.y));
+  // Rain.
+  float r = max(rain(p, 60.0, 2.6, 0.12, 0.0) * 0.5, rain(p, 24.0, 3.6, 0.15, 17.0));
+  col = mix(col, uRainColor * (1.0 + fl.x), r * 0.3);
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Distant storm", values: { uFrequency: 0.25, uRain: 0.2, uBolts: false } },
+    { name: "Supercell", values: { uSky: [0.08, 0.1, 0.1], uCloud: [0.3, 0.38, 0.36], uFlash: [0.85, 0.8, 1], uFrequency: 1.2, uRain: 0.9, uSpeed: 2 } }
+  ]
+};
+var rainbow = {
+  kind: "shader",
+  id: "rainbow",
+  name: "Rainbow",
+  description: "A soft rainbow arc fading in over a picture as if after rain, with a faint second bow and optional sun rays.",
+  category: "weather",
+  video: "filter",
+  tags: ["weather", "rainbow", "image", "light", "hopeful", "spring"],
+  source: glsl(
+    `// Rainbow: a primary bow (red outside, violet inside) and a fainter reversed secondary over the picture,
+// brighter inside the primary and darker between them, fading in over time, with optional sun rays.
+uniform sampler2D uImage;   // @control filter=linear wrap=mirror default=${SAMPLE_IMAGES.landscape} label="Image"
+uniform vec2 uCentre;       // @control min=-1 max=2 default=0.5,-0.35 label="Bow centre"
+uniform float uRadius;      // @control min=0.2 max=2 default=0.95 label="Radius"
+uniform float uWidth;       // @control min=0.01 max=0.3 default=0.07 label="Width"
+uniform float uStrength;    // @control min=0 max=1.5 default=0.65 label="Strength"
+uniform float uSecondary;   // @control min=0 max=1 default=0.35 label="Second bow"
+uniform float uDelay;       // @control min=0 max=10 default=0.5 label="Fade-in delay (s)"
+uniform float uFade;        // @control min=0 max=10 default=3 label="Fade-in time (s)"
+uniform float uRays;        // @control min=0 max=1 default=0.35 label="Sun rays"
+uniform vec2 uSun;          // @control min=-0.5 max=1.5 default=0.1,1.05 label="Sun position"
+${BACKDROP_CONTROLS}`,
+    HASH,
+    NOISE,
+    PICTURE,
+    `// Spectrum across a bow: 0 inside (violet) to 1 outside (red), soft at both edges.
+vec3 spectrum(float x) {
+  float h = (1.0 - x) * 0.78;
+  vec3 c = clamp(abs(fract(h + vec3(0.0, 2.0 / 3.0, 1.0 / 3.0)) * 6.0 - 3.0) - 1.0, 0.0, 1.0);
+  return c * smoothstep(0.0, 0.18, x) * smoothstep(1.0, 0.82, x);
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  float aspect = iResolution.x / iResolution.y;
+  vec4 pic = pictureRGBA(uImage, uv);
+  vec2 p = vec2(uv.x * aspect, uv.y);
+  vec2 c = vec2(uCentre.x * aspect, uCentre.y);
+  float r = length(p - c);
+  float appear = uFade <= 0.0 ? step(uDelay, iTime) : smoothstep(uDelay, uDelay + uFade, iTime);
+  // Bows fade toward the ground and shimmer faintly.
+  float ground = smoothstep(0.0, 0.35, uv.y);
+  float shimmer = 0.85 + 0.15 * vnoise(vec2(atan(p.y - c.y, p.x - c.x) * 6.0, iTime * 0.3));
+  float x1 = (r - (uRadius - uWidth)) / uWidth;
+  vec3 bow = spectrum(x1);
+  float r2 = uRadius * 1.27;
+  float x2 = 1.0 - (r - r2) / (uWidth * 1.6);
+  bow += spectrum(x2) * uSecondary * 0.6;
+  // Brighter sky inside the primary, darker between the bows.
+  float inside = smoothstep(uRadius - uWidth, uRadius - uWidth - 0.25, r) * step(0.0, uRadius - uWidth - r) * 0.12;
+  float between = smoothstep(uRadius, uRadius + 0.02, r) * smoothstep(r2 - uWidth * 1.6, r2 - uWidth * 1.6 - 0.02, r) * 0.08;
+  float amount = appear * ground * shimmer * uStrength;
+  vec3 col = pic.rgb;
+  col = 1.0 - (1.0 - col) * (1.0 - bow * amount);
+  col += inside * amount * 0.8;
+  col *= 1.0 - between * amount;
+  // Sun rays fanning from the sun.
+  if (uRays > 0.0) {
+    vec2 s = vec2(uSun.x * aspect, uSun.y);
+    vec2 d = p - s;
+    float ang = atan(d.y, d.x);
+    float rays = vnoise(vec2(ang * 9.0, iTime * 0.15)) * vnoise(vec2(ang * 23.0 + 4.0, iTime * 0.1));
+    float fall = exp(-length(d) * 1.4);
+    col += vec3(1.0, 0.93, 0.75) * (smoothstep(0.15, 0.6, rays) * 0.7 + 0.3) * fall * uRays * appear * 0.7;
+  }
+  fragColor = vec4(min(col, 1.0), pic.a);
+}`
+  ),
+  presets: [
+    { name: "Double rainbow", values: { uSecondary: 1, uStrength: 0.9, uWidth: 0.08 } },
+    { name: "Low and wide", values: { uCentre: [0.5, -0.8], uRadius: 1.35, uWidth: 0.09, uRays: 0 } }
+  ]
+};
+var windGust = {
+  kind: "shader",
+  id: "wind-gust",
+  name: "Wind gust",
+  description: "Gusts of wind sweeping across: curling wind lines with leaves and dust tumbling along, to lay over any scene.",
+  category: "weather",
+  tags: ["weather", "wind", "leaves", "autumn", "overlay", "particles"],
+  transparent: true,
+  source: glsl(
+    `// Wind gust: wind lines (curving segments sliding along rows), leaves (tumbling ellipses with a vein) and
+// dust carried in cells by the wind's integrated push, all swelling with each gust.
+uniform vec3 uLineColor;   // @control color default=#FFFFFF label="Wind lines"
+uniform vec3 uLeafA;       // @control color default=#E0892E label="Leaf colour A"
+uniform vec3 uLeafB;       // @control color default=#9BB13E label="Leaf colour B"
+uniform vec3 uDustColor;   // @control color default=#D6C5A4 label="Dust"
+uniform float uStrength;   // @control min=0 max=2 default=1 label="Strength"
+uniform float uDirection;  // @control min=-1 max=1 default=1 step=2 label="Direction"
+uniform float uGustRate;   // @control min=0.05 max=1 default=0.25 label="Gusts per second"
+uniform float uLines;      // @control min=0 max=1 default=0.7 label="Wind lines"
+uniform float uLeaves;     // @control min=0 max=1 default=0.5 label="Leaves"
+uniform float uDust;       // @control min=0 max=1 default=0.5 label="Dust"`,
+    HASH,
+    `const float TAU = 6.28318;
+
+// The gust at time t: 0.25 calm to 1 at its peak.
+float gust(float t) {
+  float s = 0.5 + 0.5 * sin(t * uGustRate * TAU);
+  return 0.25 + 0.75 * s * s;
+}
+// How far the wind has pushed by time t (the integral of gust: s\xB2 = 3/8 + sin/2 \u2212 cos(2x)/8).
+float pushed(float t) {
+  float w = uGustRate * TAU;
+  float x = t * w;
+  return 0.25 * t + 0.75 * (0.375 * t - 0.5 * cos(x) / w - 0.125 * sin(2.0 * x) / (2.0 * w));
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float px = 1.0 / iResolution.y;
+  vec2 p = fragCoord * px;
+  float dir = uDirection < 0.0 ? -1.0 : 1.0;
+  p.x *= dir;
+  float aspect = iResolution.x / iResolution.y;
+  vec4 acc = vec4(0.0);
+
+  // Wind lines: each row holds a curved segment sliding fast along it, shown while the gust passes.
+  if (uLines > 0.0) {
+    for (int k = 0; k < 2; k++) {
+      float rows = k == 0 ? 9.0 : 15.0;
+      float y = p.y * rows + float(k) * 0.5;
+      float row = floor(y);
+      float h = hash12(vec2(row, float(k)));
+      float speed = (1.2 + 0.8 * h) * uStrength;
+      float lag = iTime - p.x * 0.35;
+      float g = gust(lag);
+      float u = p.x * 0.7 - iTime * speed * 0.6 - h * 9.0;
+      float seg = floor(u);
+      float fu = fract(u);
+      if (hash12(vec2(seg, row + float(k) * 5.0)) > uLines * 0.7) continue;
+      float len = 0.25 + 0.3 * hash12(vec2(seg, row + 1.0));
+      float along = fu / len;
+      if (along > 1.0) continue;
+      // A gentle wave and, now and then, a curl at the head.
+      float curve = 0.25 * sin(p.x * 5.0 + h * 6.0 + iTime * 0.5) + 0.12 * sin(p.x * 13.0 + h * 3.0);
+      float curl = step(0.75, hash12(vec2(seg, row + 3.0))) * smoothstep(0.65, 1.0, along) * 0.45 * sin((along - 0.65) * 14.0);
+      float centre = row + 0.5 + curve + curl;
+      float d = abs(y - centre) / (rows * px);
+      float taper = smoothstep(0.0, 0.3, along) * smoothstep(1.0, 0.75, along);
+      float line = (1.0 - smoothstep(0.9, 2.2, d)) * taper * mix(0.25, 1.0, smoothstep(0.3, 0.9, g)) * (k == 0 ? 0.85 : 0.5);
+      acc.rgb = mix(acc.rgb, uLineColor, line);
+      acc.a = max(acc.a, line);
+    }
+  }
+
+  // Leaves and dust carried by the wind's push.
+  float push = pushed(iTime) * uStrength;
+  for (int k = 0; k < 3; k++) {
+    bool leaf = k < 2;
+    float amount = leaf ? uLeaves : uDust;
+    if (amount <= 0.0) continue;
+    float scale = k == 0 ? 5.0 : k == 1 ? 8.0 : 22.0;
+    float speed = k == 0 ? 0.9 : k == 1 ? 0.65 : 1.2;
+    vec2 q = p * scale;
+    q.x -= push * speed * scale * 0.55;
+    q.y += sin(iTime * 0.8 + q.x * 0.3) * 0.3 + iTime * 0.15 * scale * 0.1;
+    vec2 cell = floor(q);
+    float h = hash12(cell + float(k) * 11.0);
+    if (h > amount * (leaf ? 0.45 : 0.5)) continue;
+    vec2 at = 0.25 + 0.5 * hash22(cell + float(k));
+    // Tumbling and bobbing within the cell.
+    float spin = iTime * (1.5 + 3.0 * hash12(cell + 2.0)) * (0.5 + gust(iTime)) + h * 20.0;
+    at += 0.15 * vec2(sin(spin * 0.7), cos(spin * 0.9));
+    vec2 d = fract(q) - at;
+    if (leaf) {
+      float c = cos(spin), s = sin(spin);
+      d = mat2(c, s, -s, c) * d;
+      // The tumble foreshortens the leaf.
+      d.y /= max(abs(sin(spin * 0.6)), 0.25);
+      float size = 0.18 + 0.08 * hash12(cell + 4.0);
+      vec2 e = d / vec2(size, size * 0.45);
+      float r = length(e) - (1.0 - 0.35 * abs(e.x));
+      float aa = px * scale / size * 1.5;
+      float shape = 1.0 - smoothstep(-aa, aa, r);
+      vec3 colour = mix(uLeafA, uLeafB, hash12(cell + 6.0)) * (0.8 + 0.3 * sign(sin(spin * 0.6)));
+      float vein = (1.0 - smoothstep(0.0, 0.08, abs(e.y))) * step(abs(e.x), 0.85) * 0.3;
+      colour *= 1.0 - vein;
+      acc.rgb = mix(acc.rgb, colour, shape);
+      acc.a = max(acc.a, shape);
+    } else {
+      // Dust: short streaks along the wind.
+      float len = 0.06 + 0.1 * gust(iTime);
+      float dd = length(vec2(d.x / (1.0 + len * 12.0), d.y));
+      float speck = (1.0 - smoothstep(0.02, 0.05, dd)) * 0.55 * smoothstep(0.3, 0.6, gust(iTime - p.x * 0.35));
+      acc.rgb = mix(acc.rgb, uDustColor, speck * (1.0 - acc.a));
+      acc.a = max(acc.a, speck);
+    }
+  }
+  fragColor = vec4(acc.rgb, acc.a);
+}`
+  ),
+  presets: [
+    { name: "Autumn", values: { uLeaves: 0.85, uLines: 0.4, uDust: 0.2 } },
+    { name: "Dust storm", values: { uLeaves: 0, uDust: 1, uLines: 0.9, uStrength: 1.8, uLineColor: [0.9, 0.82, 0.68], uDustColor: [0.8, 0.66, 0.45] } },
+    { name: "Breeze", values: { uLeaves: 0.2, uDust: 0, uLines: 0.5, uStrength: 0.6, uGustRate: 0.12 } }
+  ]
+};
+var hail = {
+  kind: "shader",
+  id: "hail",
+  name: "Hail",
+  description: "Hailstones pelting down and bouncing on a ground line, each bounce lower than the last, to lay over any scene.",
+  category: "weather",
+  tags: ["weather", "hail", "ice", "storm", "overlay", "particles", "physics"],
+  transparent: true,
+  source: glsl(
+    `// Hail: stones on cycles in columns, each falling under gravity, bouncing three times on the ground line
+// with a loss of speed each time and scattering sideways, then melting away. A pixel checks its column and
+// its neighbours (stones scatter into them), two stones each.
+uniform vec3 uColor;      // @control color default=#EEF4FA label="Colour"
+uniform vec3 uShade;      // @control color default=#9FB4CC label="Shade"
+uniform float uDensity;   // @control min=0 max=1 default=0.6 label="Density"
+uniform float uSize;      // @control min=0.3 max=2.5 default=1 label="Size"
+uniform float uGround;    // @control min=0 max=0.6 default=0.12 label="Ground line"
+uniform float uBounce;    // @control min=0 max=0.8 default=0.42 label="Bounciness"
+uniform float uSpeed;     // @control min=0 max=2 default=1 label="Speed"`,
+    HASH,
+    `const float G = 3.2;
+const float TOP = 1.1;
+
+// A stone's place at local time tau (x offset from its column, height), its fall speed, and how visible it is.
+vec4 stoneAt(float tau, float r, float drift) {
+  float h0 = TOP - uGround - r;
+  float tf = sqrt(2.0 * h0 / G);
+  if (tau < tf) return vec4(0.0, TOP - 0.5 * G * tau * tau, G * tau, 1.0);
+  float v = G * tf;
+  float t = tau - tf;
+  float x = 0.0;
+  // Each bounce: up at v\xB7e, back down after 2v\xB7e/G, drifting sideways.
+  for (int b = 0; b < 3; b++) {
+    v *= uBounce;
+    float d = 2.0 * v / G;
+    if (t < d) return vec4(drift * (x + t), uGround + r + v * t - 0.5 * G * t * t, abs(v - G * t), 1.0);
+    t -= d;
+    x += d;
+  }
+  // At rest, melting away.
+  return vec4(drift * x, uGround + r, 0.0, 1.0 - smoothstep(0.2, 0.7, t));
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float px = 1.0 / iResolution.y;
+  vec2 p = fragCoord * px;
+  float w = 0.035;
+  float col0 = floor(p.x / w);
+  vec4 acc = vec4(0.0);
+  for (int c = -1; c <= 1; c++) {
+    float column = col0 + float(c);
+    for (int k = 0; k < 2; k++) {
+      vec2 id = vec2(column, float(k));
+      float period = 1.3 + 1.2 * hash12(id);
+      float time = iTime * uSpeed + hash12(id + 3.1) * period;
+      float cycle = floor(time / period);
+      float tau = time - cycle * period;
+      vec2 seed = id + cycle * 7.13;
+      if (hash12(seed + 1.9) > uDensity) continue;
+      float r = (0.008 + 0.009 * hash12(seed + 5.5)) * uSize;
+      float drift = (hash12(seed + 8.2) - 0.5) * 0.25;
+      vec4 s = stoneAt(tau, r, drift);
+      if (s.w <= 0.0) continue;
+      vec2 centre = vec2((column + 0.2 + 0.6 * hash12(seed + 2.4)) * w + s.x, s.y);
+      vec2 d = p - centre;
+      // Stretched a little along the fall when moving fast.
+      d.y /= 1.0 + min(s.z * 0.12, 0.6);
+      float dist = length(d);
+      float disc = 1.0 - smoothstep(r - px, r + px, dist);
+      if (disc <= 0.0) continue;
+      // Lit from the upper left, with a hard highlight.
+      vec2 n = d / r;
+      float light = clamp(0.6 - 0.5 * dot(n, vec2(0.6, -0.6)), 0.0, 1.0);
+      vec3 colour = mix(uShade, uColor, light);
+      colour += smoothstep(0.35, 0.1, length(n - vec2(-0.35, 0.35))) * 0.5;
+      float a = disc * s.w * 0.95;
+      acc.rgb = mix(acc.rgb, colour, a);
+      acc.a = max(acc.a, a);
+    }
+  }
+  fragColor = vec4(min(acc.rgb, 1.0), acc.a);
+}`
+  ),
+  presets: [
+    { name: "Light hail", values: { uDensity: 0.3, uSize: 0.7, uBounce: 0.3 } },
+    { name: "Golf balls", values: { uDensity: 0.45, uSize: 2.2, uBounce: 0.5, uSpeed: 0.8 } }
+  ]
+};
+var weatherShaders = [rainStreaks, thunderstorm, rainbow, windGust, hail];
+
+// src/catalog/shaders/water.ts
+var oceanWaves = {
+  kind: "shader",
+  id: "ocean-waves",
+  name: "Ocean waves",
+  description: "An open ocean at sunset or by day: layered, sharp-crested waves rolling in, foam on the crests, the sky in the water and a glint of sun.",
+  category: "water",
+  tags: ["water", "ocean", "sea", "waves", "sunset", "nature", "3d", "background"],
+  source: glsl(
+    `// Ocean waves: a sum of sharp-crested waves (e^(sin x \u2212 1), each layer's position dragged by the last),
+// met by marching only between the planes of its highest and lowest points (16 steps and 4 secant steps),
+// with more layers for the normal. Fresnel mixes the reflected sky with light scattered through the crests.
+uniform vec3 uSkyTop;      // @control color default=#27325E label="Sky (top)"
+uniform vec3 uSkyHorizon;  // @control color default=#FF9B5C label="Sky (horizon)"
+uniform vec3 uSun;         // @control color default=#FFD38A label="Sun"
+uniform vec3 uWater;       // @control color default=#0A2638 label="Water"
+uniform vec3 uFoam;        // @control color default=#F2EEE6 label="Foam"
+uniform float uSunHeight;  // @control min=-0.1 max=1.2 default=0.06 label="Sun height"
+uniform float uSunAzimuth; // @control min=-1 max=1 default=0 label="Sun direction"
+uniform float uWaveHeight; // @control min=0 max=2.5 default=1 label="Wave height"
+uniform float uChoppiness; // @control min=0 max=2 default=1 label="Choppiness"
+uniform float uSpeed;      // @control min=0 max=3 default=1 label="Speed"
+uniform float uFoamAmount; // @control min=0 max=1 default=0.5 label="Foam"`,
+    HASH,
+    NOISE,
+    `const float AMP = 1.1;
+
+// The sea's height (about 0\u20131) at p from its first n wave layers.
+float sea(vec2 p, int n) {
+  float t = iTime * uSpeed;
+  float h = 0.0;
+  float total = 0.0;
+  float a = 1.0;
+  float k = 0.26;
+  float ang = 0.3;
+  for (int i = 0; i < 18; i++) {
+    if (i >= n) break;
+    vec2 d = vec2(cos(ang), sin(ang));
+    float x = dot(d, p) * k + t * sqrt(9.8 * k) * 0.55;
+    float e = exp(sin(x) - 1.0);
+    h += a * e;
+    total += a;
+    // Drag the next layers toward this one's crests, so the crests gather.
+    p += d * e * cos(x) * a * 0.35 * uChoppiness;
+    a *= 0.76;
+    k *= 1.24;
+    ang += 2.39996;
+  }
+  return h / total;
+}
+
+float heightAt(vec2 p, int n) {
+  return (sea(p, n) - 0.42) * AMP * uWaveHeight;
+}
+
+vec3 sky(vec3 rd, vec3 sun) {
+  float y = max(rd.y, 0.0);
+  vec3 c = mix(uSkyHorizon, uSkyTop, pow(y, 0.5));
+  float mu = max(dot(rd, sun), 0.0);
+  c += uSun * (pow(mu, 8.0) * 0.35 + pow(mu, 90.0) * 0.6);
+  c += uSun * smoothstep(0.9993, 0.9997, mu) * 3.0;
+  return c;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
+  vec3 ro = vec3(0.0, 1.6 + 0.4 * uWaveHeight, iTime * uSpeed * 0.6);
+  vec3 rd = normalize(vec3(p.x, p.y - 0.12, 1.2));
+  vec3 sun = normalize(vec3(sin(uSunAzimuth), uSunHeight, cos(uSunAzimuth)));
+  vec3 col = sky(rd, sun);
+
+  float top = AMP * uWaveHeight * 0.6;
+  float bottom = -AMP * uWaveHeight * 0.45;
+  if (rd.y < -0.0005) {
+    // Between the planes of the highest and lowest water.
+    float t0 = (top - ro.y) / rd.y;
+    float t1 = min((bottom - ro.y) / rd.y, 400.0);
+    float tPrev = t0;
+    float gPrev = top - heightAt(ro.xz + rd.xz * t0, 7);
+    float t = t0;
+    float dt = (t1 - t0) / 16.0;
+    float tHit = t1;
+    for (int i = 1; i <= 16; i++) {
+      t = t0 + dt * float(i);
+      vec3 pos = ro + rd * t;
+      float g = pos.y - heightAt(pos.xz, 7);
+      if (g < 0.0) {
+        // Secant steps between the last point above and this one below.
+        float a = tPrev, b = t, ga = gPrev, gb = g;
+        for (int j = 0; j < 4; j++) {
+          float m = a + (b - a) * ga / (ga - gb);
+          vec3 q = ro + rd * m;
+          float gm = q.y - heightAt(q.xz, 7);
+          if (gm > 0.0) {
+            a = m;
+            ga = gm;
+          } else {
+            b = m;
+            gb = gm;
+          }
+        }
+        tHit = a + (b - a) * ga / (ga - gb);
+        break;
+      }
+      tPrev = t;
+      gPrev = g;
+    }
+    vec3 pos = ro + rd * tHit;
+    // The normal from more wave layers, finer up close.
+    int fine = tHit < 30.0 ? 13 : 9;
+    float e = 0.008 * tHit + 0.01;
+    float h = heightAt(pos.xz, fine);
+    vec3 n = normalize(vec3(h - heightAt(pos.xz + vec2(e, 0.0), fine), e, h - heightAt(pos.xz + vec2(0.0, e), fine)));
+    // Far away the waves blur into a flatter surface.
+    n = normalize(mix(n, vec3(0.0, 1.0, 0.0), smoothstep(30.0, 200.0, tHit)));
+    float fres = 0.02 + 0.98 * pow(1.0 - max(dot(n, -rd), 0.0), 5.0);
+    vec3 r = reflect(rd, n);
+    r.y = abs(r.y);
+    vec3 refl = sky(r, sun);
+    float crest = clamp(h / (AMP * max(uWaveHeight, 0.05)) + 0.3, 0.0, 1.0);
+    // Light through the crests, toward the sun.
+    float through = pow(max(dot(rd, sun) * 0.5 + 0.5, 0.0), 3.0) * crest;
+    vec3 water = uWater * (0.35 + 0.65 * max(dot(n, sun), 0.0)) + mix(uWater * 3.0, uSun * 0.6, 0.3) * through * 0.6;
+    col = mix(water, refl, fres);
+    // Glint.
+    col += uSun * pow(max(dot(r, sun), 0.0), 700.0) * 6.0 * smoothstep(-0.1, 0.1, uSunHeight);
+    // Foam on the crests, broken up by noise.
+    float foamNoise = vnoise(pos.xz * 3.0 + iTime * 0.3) * vnoise(pos.xz * 7.0 - iTime * 0.2);
+    float foam = smoothstep(0.55, 0.85, crest + foamNoise * 0.6 - (1.0 - uFoamAmount) * 0.5) * uFoamAmount;
+    col = mix(col, uFoam * (0.5 + 0.5 * max(dot(n, sun), 0.3)) * mix(vec3(1.0), uSkyHorizon, 0.25), foam * smoothstep(80.0, 20.0, tHit));
+    // Haze toward the horizon.
+    col = mix(col, sky(vec3(rd.x, 0.0, rd.z), sun), smoothstep(0.0, 1.0, 1.0 - exp(-tHit * 0.006)));
+  }
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Sunset", values: { uSunHeight: 0.06 } },
+    {
+      name: "Day",
+      values: {
+        uSkyTop: [0.22, 0.48, 0.85],
+        uSkyHorizon: [0.8, 0.9, 0.97],
+        uSun: [1, 0.97, 0.9],
+        uWater: [0.03, 0.22, 0.32],
+        uSunHeight: 0.55,
+        uSunAzimuth: 0.4
+      }
+    },
+    { name: "Stormy sea", values: { uSkyTop: [0.2, 0.23, 0.27], uSkyHorizon: [0.5, 0.53, 0.55], uSun: [0.6, 0.62, 0.65], uWater: [0.05, 0.1, 0.12], uSunHeight: 0.3, uWaveHeight: 2.2, uChoppiness: 1.6, uFoamAmount: 0.9, uSpeed: 1.4 } }
+  ]
+};
+var underwaterScene = {
+  kind: "shader",
+  id: "underwater-scene",
+  name: "Underwater scene",
+  description: "Looking out under water: shafts of light from the rippling surface, caustics dancing on a sandy floor, drifting particles and deep blue fog.",
+  category: "water",
+  tags: ["water", "underwater", "ocean", "sea", "caustics", "light", "background"],
+  source: glsl(
+    `// Underwater scene: a sandy floor met analytically with caustic lines (ridges of warped noise), the surface
+// above shimmering inside its bright window, light shafts as streaks of noise fanning down, particles in layers.
+uniform vec3 uDeep;        // @control color default=#021E33 label="Deep water"
+uniform vec3 uShallow;     // @control color default=#13708A label="Shallow water"
+uniform vec3 uLight;       // @control color default=#C8F6FF label="Light"
+uniform vec3 uSand;        // @control color default=#C6B188 label="Sand"
+uniform float uShafts;     // @control min=0 max=1.5 default=0.7 label="Light shafts"
+uniform float uCaustics;   // @control min=0 max=1.5 default=0.8 label="Caustics"
+uniform float uParticles;  // @control min=0 max=1 default=0.6 label="Particles"
+uniform float uFog;        // @control min=0 max=2 default=1 label="Fog"
+uniform float uSpeed;      // @control min=0 max=3 default=1 label="Speed"`,
+    HASH,
+    NOISE,
+    `// Bright lines where light gathers: the ridges of two layers of warped noise, multiplied.
+float caustic(vec2 p, float t) {
+  vec2 w = vec2(vnoise(p * 0.7 + t * 0.3), vnoise(p * 0.7 - t * 0.25 + 5.0));
+  vec2 q = p + w * 1.6;
+  float a = 1.0 - abs(vnoise(q + t * 0.4) * 2.0 - 1.0);
+  float b = 1.0 - abs(vnoise(q * 1.7 - t * 0.35 + 3.0) * 2.0 - 1.0);
+  return pow(a, 6.0) + pow(b, 6.0) * 0.7 + pow(a * b, 4.0) * 1.5;
+}
+
+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;
+  vec3 ro = vec3(0.0, 0.0, t * 0.15);
+  vec3 rd = normalize(vec3(p.x, p.y + 0.08, 1.0));
+  // The water itself: lighter looking up.
+  vec3 water = mix(uDeep, uShallow, smoothstep(-0.45, 0.7, rd.y));
+  vec3 col = water;
+  float fogK = 0.09 * uFog;
+
+  if (rd.y < 0.0) {
+    // The floor: sand in low dunes, lit by caustics, fading into the blue.
+    float tf = -3.0 / rd.y;
+    vec3 pos = ro + rd * tf;
+    float dunes = vnoise(pos.xz * 0.35) * 0.6 + vnoise(pos.xz * 1.3) * 0.25 + vnoise(pos.xz * 6.0) * 0.08;
+    vec3 sand = uSand * (0.55 + 0.5 * dunes);
+    float c = caustic(pos.xz * 0.9, t * 0.8);
+    // Fine caustics turn to an even glow far away.
+    c = mix(c, 0.5, smoothstep(10.0, 30.0, tf));
+    sand += uLight * c * 0.55 * uCaustics;
+    sand *= mix(uShallow * 1.5, vec3(1.0), 0.4);
+    col = mix(water, sand, exp(-tf * fogK));
+  } else {
+    // The surface: a bright, rippling window overhead.
+    float ts = 4.0 / max(rd.y, 0.05);
+    vec2 sp = (ro + rd * ts).xz;
+    float ripple = caustic(sp * 0.6, t * 1.2);
+    float window = smoothstep(0.35, 0.8, rd.y);
+    col += uLight * (0.25 + 0.6 * ripple) * window * exp(-ts * 0.04);
+  }
+
+  // Light shafts fanning down from the surface, swaying.
+  float ang = (p.x - 0.35 * p.y) / (1.3 - p.y);
+  float shafts = vnoise(vec2(ang * 9.0 + t * 0.15, t * 0.1)) * vnoise(vec2(ang * 23.0 - t * 0.1, 3.0 + t * 0.12));
+  shafts = smoothstep(0.12, 0.6, shafts);
+  col += uLight * shafts * smoothstep(-0.55, 0.45, p.y) * 0.35 * uShafts;
+
+  // Drifting particles: far ones small and dim, near ones larger and soft.
+  for (int i = 0; i < 3; i++) {
+    float fi = float(i);
+    float scale = mix(28.0, 8.0, fi / 2.0);
+    vec2 q = p * scale + vec2(t * 0.05 * (fi + 1.0), t * (0.08 + 0.05 * fi)) + fi * 17.0;
+    vec2 cell = floor(q);
+    if (hash12(cell + fi) > uParticles * 0.5) continue;
+    vec2 at = 0.2 + 0.6 * hash22(cell + 3.0 * fi);
+    at += 0.15 * vec2(sin(t * 0.7 + hash12(cell) * 6.28), cos(t * 0.5 + hash12(cell + 1.0) * 6.28));
+    float d = length(fract(q) - at) / (scale * px);
+    float size = mix(0.8, 3.0, fi / 2.0) * (0.6 + 0.8 * hash12(cell + 5.0));
+    col += uLight * (1.0 - smoothstep(size * 0.4, size + 0.8, d)) * mix(0.25, 0.45, fi / 2.0);
+  }
+  // Darker at the edges and bottom, like a lens in water.
+  col *= 1.0 - 0.35 * dot(p, p);
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Tropical", values: { uDeep: [0, 0.25, 0.35], uShallow: [0.1, 0.65, 0.7], uSand: [0.95, 0.88, 0.7], uFog: 0.6, uCaustics: 1.1 } },
+    { name: "Murky", values: { uDeep: [0.02, 0.07, 0.05], uShallow: [0.12, 0.25, 0.18], uLight: [0.75, 0.9, 0.7], uSand: [0.4, 0.38, 0.3], uFog: 1.8, uShafts: 1.1, uParticles: 1 } }
+  ]
+};
+var pondRipples = {
+  kind: "shader",
+  id: "pond-ripples",
+  name: "Pond ripples",
+  description: "Raindrops landing on a picture as if it lay under a pond, each spreading rings that bend the picture beneath; clicks drop stones that ripple wider.",
+  category: "water",
+  video: "filter",
+  tags: ["water", "ripples", "rain", "pond", "image", "distortion", "interactive", "click"],
+  source: glsl(
+    `// Pond ripples: drops on cycles in grid cells (a pixel sums its own and the eight around it), clicks as larger
+// drops (iClicks), each a damped ring whose slope bends the picture and catches a highlight.
+uniform sampler2D uImage;   // @control filter=linear wrap=mirror default=${SAMPLE_IMAGES.landscape} label="Image"
+uniform float uRain;        // @control min=0 max=1 default=0.55 label="Rain"
+uniform float uSize;        // @control min=0.3 max=2 default=1 label="Ripple size"
+uniform float uStrength;    // @control min=0 max=2 default=1 label="Refraction"
+uniform float uSpeed;       // @control min=0 max=3 default=1 label="Speed"
+uniform vec3 uTint;         // @control color default=#BFD8E4 label="Water tint"
+uniform float uTintAmount;  // @control min=0 max=1 default=0.12 label="Tint amount"
+uniform bool uDemo;         // @control default=true label="Demo when idle"
+${BACKDROP_CONTROLS}`,
+    HASH,
+    PICTURE,
+    `const float CELL = 0.22;
+
+// The slope (gradient of the water's height) of one ring: centre c, age in seconds, size and strength.
+vec2 ring(vec2 p, vec2 c, float age, float speed, float life, float amp) {
+  if (age < 0.0 || age > life) return vec2(0.0);
+  vec2 d = p - c;
+  float r = length(d);
+  float front = age * speed;
+  float x = r - front;
+  float width = 0.025 * uSize + age * 0.012;
+  float k = 6.28318 / (0.035 * uSize + age * 0.01);
+  float env = exp(-x * x / (width * width)) * (1.0 - age / life) * smoothstep(0.0, 0.04, age);
+  // d/dr of sin(k x)\xB7env, about k\xB7cos(k x)\xB7env for narrow rings.
+  float slope = (k * cos(k * x) - 2.0 * x / (width * width) * sin(k * x)) * env * amp;
+  return d / max(r, 1e-4) * slope;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  float px = 1.0 / iResolution.y;
+  vec2 p = fragCoord * px;
+  float t = iTime * uSpeed;
+  vec2 grad = vec2(0.0);
+
+  // Rain: one drop per cell per cycle.
+  if (uRain > 0.0) {
+    vec2 base = floor(p / CELL);
+    for (int j = -1; j <= 1; j++) {
+      for (int i = -1; i <= 1; i++) {
+        vec2 cell = base + vec2(float(i), float(j));
+        float period = mix(3.5, 0.9, uRain) * (0.7 + 0.6 * hash12(cell));
+        float time = t + hash12(cell + 4.2) * period;
+        float cycle = floor(time / period);
+        float age = time - cycle * period;
+        if (hash12(cell + cycle * 3.7) > 0.35 + 0.65 * uRain) continue;
+        vec2 c = (cell + 0.15 + 0.7 * hash22(cell + cycle)) * CELL;
+        grad += ring(p, c, age, 0.12 * uSize, min(period, 1.6), 0.0012 * uSize);
+      }
+    }
+  }
+  // Clicks drop stones; while nobody has clicked, the demo drops one now and then.
+  if (iClicks[0].w > 0.5 || !uDemo) {
+    for (int i = 0; i < 8; i++) {
+      vec4 c = iClicks[i];
+      if (c.w < 0.5) continue;
+      grad += ring(p, c.xy * px, (iTime - c.z) * uSpeed, 0.2 * uSize, 3.0, 0.004 * uSize);
+    }
+  } else {
+    float k = floor(t / 3.0);
+    vec2 at = vec2((0.2 + 0.6 * hash12(vec2(k, 1.0))) * iResolution.x * px, 0.25 + 0.5 * hash12(vec2(k, 2.0)));
+    grad += ring(p, at, t - k * 3.0, 0.2 * uSize, 3.0, 0.004 * uSize);
+  }
+
+  vec2 offset = grad * 0.6 * uStrength;
+  offset.x *= iResolution.y / iResolution.x;
+  vec4 pic = pictureRGBA(uImage, uv - offset);
+  vec3 col = mix(pic.rgb, pic.rgb * uTint * 1.2, uTintAmount);
+  // A highlight on the slopes facing the light, and a little shade on the others.
+  vec3 n = normalize(vec3(-grad * 1.5, 1.0));
+  vec3 l = normalize(vec3(-0.5, 0.6, 0.65));
+  float lit = dot(n, l) - l.z;
+  col += vec3(1.0) * pow(max(lit, 0.0), 1.5) * 0.9;
+  col *= 1.0 + min(lit, 0.0) * 0.6;
+  fragColor = vec4(clamp(col, 0.0, 1.0), pic.a);
+}`
+  ),
+  presets: [
+    { name: "Drizzle", values: { uRain: 0.25, uSize: 0.7 } },
+    { name: "Downpour", values: { uRain: 1, uSize: 0.8, uStrength: 1.3, uTintAmount: 0.2 } },
+    { name: "Stones only", values: { uRain: 0 } }
+  ]
+};
+var waterfall = {
+  kind: "shader",
+  id: "waterfall",
+  name: "Waterfall",
+  description: "A stylised waterfall pouring over a cliff between mossy rocks into a churning plunge pool, wrapped in rising mist.",
+  category: "water",
+  tags: ["water", "waterfall", "nature", "mist", "landscape", "background"],
+  source: glsl(
+    `// Waterfall: a curtain of streaks (noise stretched down, scrolling faster as it falls) between noise-edged
+// cliffs, foam where it lands in the pool, rings spreading across the pool and fbm mist rising around the foot.
+uniform vec3 uSky;        // @control color default=#A9D3EE label="Sky"
+uniform vec3 uRock;       // @control color default=#4A443E label="Rock"
+uniform vec3 uFoliage;    // @control color default=#3E6B3C label="Foliage"
+uniform vec3 uWater;      // @control color default=#CDEFFA label="Falling water"
+uniform vec3 uPool;       // @control color default=#2D7591 label="Pool"
+uniform float uWidth;     // @control min=0.1 max=0.8 default=0.32 label="Width"
+uniform float uSpeed;     // @control min=0 max=3 default=1 label="Speed"
+uniform float uMist;      // @control min=0 max=1.5 default=0.8 label="Mist"`,
+    HASH,
+    NOISE,
+    FBM,
+    `const float LIP = 0.74;
+const float POOL = 0.24;
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float px = 1.0 / iResolution.y;
+  vec2 uv = fragCoord / iResolution.xy;
+  float aspect = iResolution.x / iResolution.y;
+  vec2 p = vec2((uv.x - 0.5) * aspect, uv.y);
+  float t = iTime * uSpeed;
+
+  // Sky and distant hills.
+  vec3 col = mix(uSky * 1.08, uSky * 0.85, uv.y);
+  float hills = 0.83 + 0.05 * fbm(vec2(p.x * 2.0, 3.0), 4);
+  col = mix(col, mix(uFoliage, uSky, 0.55), step(uv.y, hills));
+
+  // The cliff: rock on both sides of the fall, its top edge ragged with foliage.
+  float half_ = uWidth * 0.5 * aspect * 0.5;
+  float edgeNoise = (fbm(vec2(p.y * 8.0, 1.0), 3) - 0.5) * 0.06;
+  float fallEdge = abs(p.x) - half_ - edgeNoise - (LIP - p.y) * 0.03;
+  float cliffTop = LIP + 0.03 + 0.04 * fbm(vec2(p.x * 4.0, 7.0), 3);
+  if (p.y < cliffTop) {
+    float strata = fbm(vec2(p.x * 3.0, p.y * 14.0), 4);
+    vec3 rock = uRock * (0.6 + 0.7 * strata) * (0.75 + 0.35 * smoothstep(0.0, 0.3, fallEdge));
+    // Moss and leaves on ledges and along the top.
+    float moss = smoothstep(0.55, 0.7, fbm(p * 9.0, 4)) + smoothstep(cliffTop - 0.08, cliffTop - 0.01, p.y);
+    rock = mix(rock, uFoliage * (0.7 + 0.5 * fbm(p * 30.0, 2)), clamp(moss, 0.0, 1.0) * 0.85);
+    col = rock;
+  }
+
+  // The falling water, in front of the cliff between its edges.
+  float inFall = smoothstep(px * 2.0, -px * 2.0, fallEdge) * step(POOL - 0.02, p.y) * step(p.y, LIP + 0.012);
+  if (inFall > 0.0) {
+    float drop = max(LIP - p.y, 0.0);
+    // Water speeds up as it falls: the scroll stretches toward the bottom.
+    float s = pow(drop, 0.7) * 6.0 - t * 1.6;
+    float streaks = vnoise(vec2(p.x * 70.0, s * 3.0)) * 0.6 + vnoise(vec2(p.x * 160.0 + 3.0, s * 5.0)) * 0.4;
+    float sheets = vnoise(vec2(p.x * 12.0, s * 1.2));
+    vec3 w = mix(uWater * 0.65, uWater * 1.1, smoothstep(0.3, 0.8, streaks * 0.7 + sheets * 0.5));
+    // The lip: water bulges over the edge, bright.
+    w += vec3(0.25) * smoothstep(LIP - 0.04, LIP, p.y);
+    // Darker gaps near the edges where the curtain thins.
+    float thin = smoothstep(-0.06, 0.0, fallEdge + streaks * 0.03);
+    w = mix(w, col, thin * 0.6);
+    col = mix(col, w, inFall);
+  }
+
+  // The plunge pool.
+  if (p.y < POOL) {
+    float depth = (POOL - p.y) / POOL;
+    float z = 1.0 / (0.05 + depth);
+    vec2 q = vec2(p.x * z * 0.6, z);
+    float waves = vnoise(vec2(q.x * 5.0, q.y * 2.0 - t * 0.6)) * 0.5 + vnoise(vec2(q.x * 13.0, q.y * 5.0 + t * 0.3)) * 0.5;
+    vec3 pool = uPool * (0.7 + 0.5 * waves) + mix(uSky, vec3(1.0), 0.3) * smoothstep(0.6, 0.85, waves) * 0.3;
+    // Rings spreading from where the water lands.
+    float rings = sin(length(vec2(p.x / max(half_ * 1.4, 0.05), (POOL - p.y) * 6.0)) * 9.0 - t * 4.0);
+    pool += uWater * smoothstep(0.7, 1.0, rings) * 0.12 * (1.0 - depth);
+    col = pool;
+  }
+
+  // Foam where the curtain lands, churning.
+  float foamZone = exp(-pow((p.y - POOL) / 0.05, 2.0)) * smoothstep(half_ * 1.6, half_ * 0.6, abs(p.x));
+  float churn = fbm(vec2(p.x * 14.0, p.y * 18.0 - t * 1.5), 4);
+  col = mix(col, uWater * 1.15, clamp(foamZone * (0.6 + churn), 0.0, 1.0));
+
+  // Mist rising from the foot.
+  vec2 mp = vec2(p.x * 2.5, (p.y - POOL) * 3.0 - t * 0.25);
+  float mist = fbm(mp + vec2(fbm(mp + t * 0.05, 3), 0.0), 5);
+  float around = exp(-pow((p.y - POOL - 0.08) / 0.2, 2.0)) * smoothstep(half_ * 3.5, half_ * 0.5, abs(p.x));
+  col = mix(col, vec3(0.95, 0.98, 1.0), clamp(smoothstep(0.35, 0.8, mist) * around * uMist, 0.0, 0.85));
+  // Spray droplets thrown up.
+  vec2 g = vec2(p.x * 90.0, (p.y + t * 0.05) * 90.0);
+  vec2 cell = floor(g);
+  float spray = step(0.93, hash12(cell)) * (1.0 - smoothstep(0.1, 0.35, length(fract(g) - 0.5)));
+  col += spray * around * 0.5 * uMist;
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Jungle", values: { uSky: [0.75, 0.9, 0.85], uRock: [0.25, 0.27, 0.22], uFoliage: [0.18, 0.45, 0.2], uPool: [0.12, 0.45, 0.4], uMist: 1.2 } },
+    { name: "Dusk", values: { uSky: [0.95, 0.6, 0.5], uRock: [0.22, 0.18, 0.2], uFoliage: [0.2, 0.22, 0.25], uWater: [0.95, 0.85, 0.85], uPool: [0.3, 0.25, 0.4] } }
+  ]
+};
+var waterShaders = [oceanWaves, underwaterScene, pondRipples, waterfall];
+
 // src/catalog/text.ts
-var r112 = (n15) => Math.round(n15 * 10) / 10;
+var r112 = (n17) => Math.round(n17 * 10) / 10;
 function fit5(text, width, max, ems = textWidthEm(text)) {
   const e = Math.max(0.6, ems);
   const size = Math.min(max, width / e);
@@ -23264,7 +25448,7 @@ var glitchText = {
     };
   },
   motion: (() => {
-    const word = (paint) => `<text x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" ${paint}>{{text}}</text>`;
+    const word = (paint2) => `<text x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" ${paint2}>{{text}}</text>`;
     const jumps = (id, value) => GLITCH.map((key, k) => ({ id, attrs: { transform: [value(k), value(k)] }, delay: key.at, ms: 0 }));
     return {
       svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='GLITCH' label='Text'}} {{background: color default=#07070B label='Background'}} {{ink: color default=#F5F5F5 label='Text colour'}} {{left: color default=#FF0040 label='Red copy'}} {{right: color default=#00F0FF label='Cyan copy'}} {{amount: float min=0 max=3 default=1 step=0.1 label='Intensity'}} ${typeface(HEAVY2, 900)} --><defs>${[0, 1, 2, 3].map((b) => `<clipPath id="slice${b}"><rect x="-5000" y="{{cut${b}}}" width="10400" height="{{band${b}}}"/></clipPath>`).join("")}</defs><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><g id="red" style="mix-blend-mode:screen">${word(`fill="{{left}}"`)}</g><g id="cyan" style="mix-blend-mode:screen">${word(`fill="{{right}}"`)}</g>${[0, 1, 2, 3].map((b) => `<g clip-path="url(#slice${b})"><g id="s${b}">${word(`fill="{{ink}}"`)}</g></g>`).join("")}</svg>`,
@@ -23318,7 +25502,7 @@ var extrudedText = {
     };
   },
   motion: (() => {
-    const word = (paint) => `x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" stroke-linejoin="round" ${paint}`;
+    const word = (paint2) => `x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" stroke-linejoin="round" ${paint2}`;
     const layers = Array.from({ length: LAYERS }, (_, k) => LAYERS - k);
     return {
       svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='RETRO' label='Text'}} {{background: color default=#FFE8C2 label='Background'}} {{face: color default=#FFD23F label='Face'}} {{outline: color default=#1A1423 label='Outline'}} {{side: color default=#EE4266 label='Extrude'}} {{shade: color default=#3B1F2B label='Shadow'}} {{depth: float min=0.2 max=2 default=1 step=0.1 label='Depth'}} ${typeface(HEAVY2, 900)} --><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/>${layers.map((i) => `<text id="e${i}" transform="translate(0 0)" ${word(`fill="{{fill${i}}}" stroke="{{fill${i}}}" stroke-width="2"`)}>{{text}}</text>`).join("")}<text ${word(`fill="{{face}}" stroke="{{outline}}" stroke-width="2.5" paint-order="stroke"`)}>{{text}}</text></svg>`,
@@ -24999,7 +27183,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 r114 = (n15) => Math.round(n15 * 10) / 10;
+    const r116 = (n17) => Math.round(n17 * 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(" ");
@@ -25013,15 +27197,15 @@ var dripText = {
       overhang,
       ...Object.fromEntries(
         DRIP_SLOTS.flatMap((d) => {
-          const x = r114(left + (d.run + d.at) * run);
-          const length = r114(d.length * Number(v.drip));
+          const x = r116(left + (d.run + d.at) * run);
+          const length = r116(d.length * Number(v.drip));
           return [
             [`show${d.i}`, d.run < runs ? "inline" : "none"],
             [`x${d.i}`, x],
-            [`left${d.i}`, r114(x - d.width / 2)],
-            [`shine${d.i}`, r114(x - d.width * 0.25)],
+            [`left${d.i}`, r116(x - d.width / 2)],
+            [`shine${d.i}`, r116(x - d.width * 0.25)],
             [`len${d.i}`, length],
-            [`tip${d.i}`, r114(DRIP_TOP + length)]
+            [`tip${d.i}`, r116(DRIP_TOP + length)]
           ];
         })
       )
@@ -25029,8 +27213,8 @@ var dripText = {
   },
   motion: (() => {
     const word = `<text x="200" y="${DRIP_BASELINE}" text-anchor="middle" textLength="{{width}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="${DRIP_SIZE}" font-weight="{{weight}}" stroke-linejoin="round"`;
-    const drips = (layer, paint) => DRIP_SLOTS.map(
-      (d) => `<g display="{{show${d.i}}}"><rect id="${layer}r${d.i}" x="{{left${d.i}}}" y="${DRIP_TOP}" width="${d.width}" height="0" rx="${d.width / 2}" ${paint}/><circle id="${layer}c${d.i}" cx="{{x${d.i}}}" cy="${DRIP_TOP}" r="${d.width * 0.72}" ${paint}/></g>`
+    const drips = (layer, paint2) => DRIP_SLOTS.map(
+      (d) => `<g display="{{show${d.i}}}"><rect id="${layer}r${d.i}" x="{{left${d.i}}}" y="${DRIP_TOP}" width="${d.width}" height="0" rx="${d.width / 2}" ${paint2}/><circle id="${layer}c${d.i}" cx="{{x${d.i}}}" cy="${DRIP_TOP}" r="${d.width * 0.72}" ${paint2}/></g>`
     ).join("");
     const outline4 = `fill="{{outline}}" stroke="{{outline}}" stroke-width="{{stroke}}"`;
     const pop2 = (from, to) => [`translate(200 100) scale(${from}) translate(-200 -100)`, `translate(200 100) scale(${to}) translate(-200 -100)`];
@@ -25164,6 +27348,1038 @@ var vectorEffects = [
   uploadCard
 ];
 
+// src/catalog/data.ts
+var r114 = (v) => Math.round(v * 10) / 10;
+var r212 = (v) => Math.round(v * 100) / 100;
+var n15 = (name) => `{{${name}}}`;
+var SANS12 = `system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`;
+function fit7(text, width, max) {
+  const e = Math.max(0.6, textWidthEm(String(text)));
+  const size = Math.min(max, width / e);
+  return { size: r114(size), length: r114(e * size) };
+}
+function fitLabel(text, width, max, min) {
+  const whole = String(text ?? "");
+  const f = fit7(whole, width, max);
+  if (f.size >= min) return { text: whole, ...f };
+  const letters = Array.from(whole);
+  while (letters.length > 1 && Math.max(0.6, textWidthEm(`${letters.join("").trimEnd()}\u2026`)) * min > width) letters.pop();
+  const cut = `${letters.join("").trimEnd()}\u2026`;
+  return { text: cut, ...fit7(cut, width, max) };
+}
+var paint = (v) => isCurrentColor(v) ? "currentColor" : Array.isArray(v) ? rgbToHex(v) : "#000000";
+var formatSafe = (v) => String(v ?? "").replace(/[{}]/g, "");
+var DATA_PALETTE = ["#6366F1", "#22C55E", "#F59E0B", "#EC4899", "#0EA5E9", "#A855F7"];
+var palette = (count = DATA_PALETTE.length) => DATA_PALETTE.slice(0, count).map((hex, i) => `{{c${i + 1}: color default=${hex} label='Colour ${i + 1}'}}`).join(" ");
+var PALETTE_PRESETS = [
+  { name: "Ocean", values: { c1: [0.03, 0.4, 0.62], c2: [0.05, 0.65, 0.91], c3: [0.22, 0.74, 0.97], c4: [0.49, 0.83, 0.99], c5: [0.08, 0.72, 0.65], c6: [0.37, 0.92, 0.83] } },
+  { name: "Sunset", values: { c1: [0.94, 0.27, 0.27], c2: [0.98, 0.45, 0.09], c3: [0.98, 0.75, 0.14], c4: [0.93, 0.29, 0.6], c5: [0.66, 0.33, 0.97], c6: [0.4, 0.4, 0.95] } }
+];
+function parseNumberList(text, max) {
+  return String(text ?? "").split(/[,;\s]+/).filter((t) => t !== "").slice(0, max).map((token) => {
+    const cleaned = token.replace(/[^0-9.eE+-]/g, "");
+    const value = /\d/.test(cleaned) ? Number(cleaned) : NaN;
+    return Number.isFinite(value) ? Math.max(-1e9, Math.min(1e9, value)) : NaN;
+  });
+}
+function parseLabels(text, max) {
+  return String(text ?? "").split(/[,;\n]/).map((s) => s.trim()).slice(0, max);
+}
+function parseShares(text, max, fallback) {
+  const values = parseNumberList(text, max).map((v) => Number.isFinite(v) && v > 0 ? v : 0);
+  return values.some((v) => v > 0) ? values : [...fallback];
+}
+function decimalsOf(values) {
+  let most = 0;
+  for (const v of values) {
+    if (!Number.isFinite(v) || Number.isInteger(v)) continue;
+    const s = String(v);
+    most = Math.max(most, s.includes("e") ? 2 : s.split(".")[1]?.length ?? 0);
+  }
+  return Math.min(2, most);
+}
+function parseRace(text, maxRows, maxStates, fallback) {
+  const rows = [];
+  for (const line of String(text ?? "").split(/[;\n]+/)) {
+    if (!line.trim()) continue;
+    const colon = line.indexOf(":");
+    const name = colon >= 0 ? line.slice(0, colon).trim() : `#${rows.length + 1}`;
+    const raw = parseNumberList(colon >= 0 ? line.slice(colon + 1) : line, maxStates);
+    if (raw.some((v) => Number.isFinite(v))) rows.push({ name, raw });
+    if (rows.length === maxRows) break;
+  }
+  if (!rows.length) return fallback.map((r) => ({ name: r.name, values: [...r.values] }));
+  const states = Math.max(...rows.map((r) => r.raw.length));
+  return rows.map(({ name, raw }) => {
+    let last = raw.find((v) => Number.isFinite(v)) ?? 0;
+    const values = Array.from({ length: states }, (_, k) => {
+      const v = raw[k];
+      if (v !== void 0 && Number.isFinite(v)) last = Math.max(0, v);
+      return last;
+    });
+    return { name, values };
+  });
+}
+function parseSeries(text, maxRows, maxPoints, fallback) {
+  const rows = String(text ?? "").split(/[;\n]+/).map((line) => parseNumberList(line, maxPoints)).filter((row) => row.some((v) => Number.isFinite(v))).slice(0, maxRows).map((row) => row.map((v) => Number.isFinite(v) && v > 0 ? v : 0));
+  if (!rows.length || rows.every((r) => r.every((v) => v === 0))) return fallback.map((r) => [...r]);
+  const points = Math.max(2, ...rows.map((r) => r.length));
+  return rows.map((r) => Array.from({ length: points }, (_, j) => r[Math.min(j, r.length - 1)]));
+}
+var SLOTS3 = 6;
+var LEGEND = { swatch: 158, label: 174, right: 250, pitch: 22 };
+function legendValues(labels, fractions, at4, cy) {
+  const shown = fractions.map((f) => f > 0);
+  const count = shown.filter(Boolean).length;
+  const out = {};
+  let row = 0;
+  for (let i = 0; i < SLOTS3; i++) {
+    const f = fractions[i] ?? 0;
+    const label = labels[i] ?? "";
+    const { text, size, length } = fitLabel(label, LEGEND.right - LEGEND.label - 32, 11, 8);
+    out[`show${i}`] = f > 0 ? "inline" : "none";
+    out[`ly${i}`] = r114(cy + ((f > 0 ? row : 0) - (count - 1) / 2) * LEGEND.pitch);
+    out[`l${i}`] = text;
+    out[`ls${i}`] = size;
+    out[`ll${i}`] = length;
+    out[`pct${i}`] = Math.round(f * 100);
+    out[`at${i}`] = at4[i] ?? 0;
+    if (f > 0) row++;
+  }
+  return out;
+}
+var legendMarkup = (prefix) => Array.from(
+  { length: SLOTS3 },
+  (_, i) => `<g id="${prefix}Row${i}" display="{{show${i}}}" opacity="0" transform="translate(8 {{ly${i}}})"><rect x="${LEGEND.swatch}" y="-5" width="10" height="10" rx="3" fill="{{c${i + 1}}}"/><text x="${LEGEND.label}" y="4" font-size="{{ls${i}}}" textLength="{{ll${i}}}" lengthAdjust="spacingAndGlyphs" fill="{{ink}}">{{l${i}}}</text><text id="${prefix}Pct${i}" x="${LEGEND.right}" y="4" text-anchor="end" font-size="11" font-weight="700" fill="{{ink}}">0%</text></g>`
+).join("");
+var legendAnimations = (prefix) => Array.from({ length: SLOTS3 }, (_, i) => [
+  { id: `${prefix}Row${i}`, attrs: { opacity: [0, 1], transform: [`translate(8 {{ly${i}}})`, `translate(0 {{ly${i}}})`] }, delay: n15(`at${i}`), ms: 320, ease: "out" },
+  { id: `${prefix}Pct${i}`, count: [0, n15(`pct${i}`)], format: "{n}%", delay: n15(`at${i}`), ms: 600, ease: "out" }
+]).flat();
+var DONUT = { cx: 80, cy: 80, r: 50, width: 22, start: 150, sweep: 1400 };
+var DONUT_DEFAULT = [42, 28, 18, 12];
+var donutChart = {
+  kind: "vector",
+  id: "donut-chart",
+  name: "Donut chart",
+  description: "Segments sweeping round a ring one after another, a legend giving each share, and the total counting up in the middle.",
+  category: "data",
+  tags: ["chart", "donut", "share", "dashboard", "report", "explainer"],
+  hold: 1600,
+  presets: [...PALETTE_PRESETS, { name: "Budget", values: { values: "1200,800,450,300,250", labels: "Rent,Food,Travel,Fun,Other", caption: "per month" } }],
+  derived: (v) => {
+    const values = parseShares(v.values, SLOTS3, DONUT_DEFAULT);
+    const total = values.reduce((a, b) => a + b, 0);
+    const fractions = values.map((x) => x / total);
+    const gap = fractions.filter((f) => f > 0).length > 1 ? 5e-3 : 0;
+    const out = {};
+    const at4 = [];
+    let cum = 0;
+    for (let i = 0; i < SLOTS3; i++) {
+      const f = fractions[i] ?? 0;
+      at4.push(Math.round(DONUT.start + cum * DONUT.sweep));
+      out[`rot${i}`] = r212(-90 + cum * 360);
+      out[`frac${i}`] = Math.min(1, Math.max(1e-3, +(f - gap).toFixed(4)));
+      out[`ms${i}`] = Math.max(60, Math.round(f * DONUT.sweep));
+      cum += f;
+    }
+    const dec = decimalsOf(values);
+    const totalSize = fit7(formatCount(total, { decimals: dec }), 64, 26).size;
+    const caption = fitLabel(v.caption, 58, 9.5, 7.5);
+    return {
+      ...legendValues(parseLabels(v.labels, SLOTS3), fractions, at4, DONUT.cy),
+      ...out,
+      total: +total.toFixed(dec),
+      dec,
+      totalSize,
+      totalY: r114(DONUT.cy + totalSize * 0.35 - (String(v.caption).trim() ? 5 : 0)),
+      captionY: r114(DONUT.cy + totalSize * 0.35 + 9),
+      captionText: caption.text,
+      captionSize: caption.size,
+      captionLength: caption.length,
+      countMs: DONUT.start + DONUT.sweep
+    };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 260 160" font-family="${SANS12}"><!-- {{values: text default='42,28,18,12' label='Values (comma-separated)'}} {{labels: text default='Direct,Social,Search,Email' label='Labels (comma-separated)'}} {{caption: text default='visits' label='Caption'}} {{ink: color default=#1E293B label='Text'}} {{track: color default=#E2E8F0 label='Track'}} ${palette()} --><circle cx="${DONUT.cx}" cy="${DONUT.cy}" r="${DONUT.r}" fill="none" stroke="{{track}}" stroke-width="${DONUT.width}"/>${Array.from(
+      { length: SLOTS3 },
+      (_, i) => `<g display="{{show${i}}}"><circle id="donutChartSeg${i}" cx="${DONUT.cx}" cy="${DONUT.cy}" r="${DONUT.r}" fill="none" stroke="{{c${i + 1}}}" stroke-width="${DONUT.width}" transform="rotate({{rot${i}}} ${DONUT.cx} ${DONUT.cy})"/></g>`
+    ).join(
+      ""
+    )}<text id="donutChartTotal" x="${DONUT.cx}" y="{{totalY}}" text-anchor="middle" font-size="{{totalSize}}" font-weight="800" fill="{{ink}}">0</text><text x="${DONUT.cx}" y="{{captionY}}" text-anchor="middle" font-size="{{captionSize}}" textLength="{{captionLength}}" lengthAdjust="spacingAndGlyphs" fill="{{ink}}" fill-opacity="0.6">{{captionText}}</text>${legendMarkup("donutChart")}</svg>`,
+    animate: [
+      ...Array.from({ length: SLOTS3 }, (_, i) => ({ id: `donutChartSeg${i}`, draw: [0, n15(`frac${i}`)], delay: n15(`at${i}`), ms: n15(`ms${i}`), ease: "linear" })),
+      { id: "donutChartTotal", count: [0, n15("total")], decimals: n15("dec"), ms: n15("countMs"), ease: "out" },
+      ...legendAnimations("donutChart")
+    ]
+  }
+};
+var PIE = { cx: 80, cy: 80, r: 58, pop: 7, start: 150, stagger: 230 };
+var PIE_DEFAULT = [38, 26, 20, 16];
+var pieMove = (dx, dy, s) => `translate(${dx} ${dy}) translate(${PIE.cx} ${PIE.cy}) scale(${s}) translate(${-PIE.cx} ${-PIE.cy})`;
+function wedge(a, b) {
+  const { cx, cy, r } = PIE;
+  if (b - a <= 0) return `M${cx} ${cy}Z`;
+  if (b - a >= 0.9999) return `M${cx} ${cy - r} A${r} ${r} 0 1 1 ${cx} ${cy + r} A${r} ${r} 0 1 1 ${cx} ${cy - r}Z`;
+  const at4 = (f) => `${r212(cx + r * Math.sin(f * 2 * Math.PI))} ${r212(cy - r * Math.cos(f * 2 * Math.PI))}`;
+  return `M${cx} ${cy} L${at4(a)} A${r} ${r} 0 ${b - a > 0.5 ? 1 : 0} 1 ${at4(b)}Z`;
+}
+var pieChart = {
+  kind: "vector",
+  id: "pie-chart",
+  name: "Pie chart",
+  description: "Pie slices popping out one at a time and settling into place, each with its percentage, beside a legend.",
+  category: "data",
+  tags: ["chart", "pie", "share", "percentage", "dashboard", "report"],
+  hold: 1600,
+  presets: [...PALETTE_PRESETS, { name: "Survey", values: { values: "54,31,15", labels: "Yes,No,Not sure" } }],
+  derived: (v) => {
+    const values = parseShares(v.values, SLOTS3, PIE_DEFAULT);
+    const total = values.reduce((a, b) => a + b, 0);
+    const fractions = values.map((x) => x / total);
+    const out = {};
+    const at4 = [];
+    const ink = paint(v.ink);
+    let cum = 0;
+    for (let i = 0; i < SLOTS3; i++) {
+      const f = fractions[i] ?? 0;
+      const mid = (cum + f / 2) * 2 * Math.PI;
+      const inside = f >= 0.08;
+      out[`tshow${i}`] = f >= 0.04 ? "inline" : "none";
+      const radius = inside ? PIE.r * 0.62 : PIE.r + 14;
+      at4.push(PIE.start + i * PIE.stagger);
+      out[`d${i}`] = wedge(cum, cum + f);
+      out[`ox${i}`] = r212(PIE.pop * Math.sin(mid));
+      out[`oy${i}`] = r212(-PIE.pop * Math.cos(mid));
+      out[`tx${i}`] = r114(PIE.cx + radius * Math.sin(mid));
+      out[`ty${i}`] = r114(PIE.cy - radius * Math.cos(mid) + 4);
+      out[`tf${i}`] = inside ? paint(v.onSlice) : ink;
+      out[`tl${i}`] = PIE.start + i * PIE.stagger + 260;
+      cum += f;
+    }
+    return { ...legendValues(parseLabels(v.labels, SLOTS3), fractions, at4, PIE.cy), ...out };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 260 160" font-family="${SANS12}"><!-- {{values: text default='38,26,20,16' label='Values (comma-separated)'}} {{labels: text default='Product,Services,Support,Other' label='Labels (comma-separated)'}} {{ink: color default=#1E293B label='Text'}} {{onSlice: color default=#FFFFFF label='Labels on slices'}} {{edge: color default=#FFFFFF label='Slice edges'}} ${palette()} -->${Array.from(
+      { length: SLOTS3 },
+      (_, i) => `<g id="pieChartSlice${i}" display="{{show${i}}}" transform="${pieMove(0, 0, 0)}"><path d="{{d${i}}}" fill="{{c${i + 1}}}" stroke="{{edge}}" stroke-width="2" stroke-linejoin="round"/></g>`
+    ).join("")}${Array.from(
+      { length: SLOTS3 },
+      (_, i) => `<text id="pieChartLabel${i}" display="{{tshow${i}}}" x="{{tx${i}}}" y="{{ty${i}}}" text-anchor="middle" font-size="11" font-weight="700" fill="{{tf${i}}}" opacity="0">0%</text>`
+    ).join("")}${legendMarkup("pieChart")}</svg>`,
+    animate: [
+      ...Array.from({ length: SLOTS3 }, (_, i) => [
+        { id: `pieChartSlice${i}`, attrs: { transform: [pieMove(0, 0, 0), pieMove(`{{ox${i}}}`, `{{oy${i}}}`, 1.06)] }, delay: n15(`at${i}`), ms: 260, ease: "out" },
+        { id: `pieChartSlice${i}`, attrs: { transform: [pieMove(`{{ox${i}}}`, `{{oy${i}}}`, 1.06), pieMove(0, 0, 1)] }, delay: n15(`tl${i}`), ms: 300, ease: "in-out" },
+        { id: `pieChartLabel${i}`, attrs: { opacity: [0, 1] }, delay: n15(`tl${i}`), ms: 200 },
+        { id: `pieChartLabel${i}`, count: [0, n15(`pct${i}`)], format: "{n}%", delay: n15(`tl${i}`), ms: 500, ease: "out" }
+      ]).flat(),
+      ...legendAnimations("pieChart")
+    ]
+  }
+};
+var GAUGE = { cx: 120, cy: 112, r: 84, band: 14 };
+var gaugeAt = (f, r) => `${r212(GAUGE.cx - r * Math.cos(f * Math.PI))} ${r212(GAUGE.cy - r * Math.sin(f * Math.PI))}`;
+var gaugeArc = (a, b) => b - a <= 5e-4 ? `M${gaugeAt(a, GAUGE.r)}` : `M${gaugeAt(a, GAUGE.r)} A${GAUGE.r} ${GAUGE.r} 0 0 1 ${gaugeAt(b, GAUGE.r)}`;
+var needle = (deg) => `rotate(${deg} ${GAUGE.cx} ${GAUGE.cy})`;
+var gauge = {
+  kind: "vector",
+  id: "gauge",
+  name: "Gauge",
+  description: "A speedometer gauge: its coloured band draws on, the needle sweeps past the value and settles, and the reading counts up beneath.",
+  category: "data",
+  tags: ["gauge", "speedometer", "meter", "kpi", "dashboard", "score"],
+  hold: 1600,
+  presets: [
+    { name: "Speed", values: { value: 88, max: 160, unit: " km/h", label: "Speed", warn: 70, danger: 85 } },
+    { name: "Dark", values: { ink: [0.94, 0.95, 0.97], needleColor: [0.94, 0.95, 0.97], hub: [0.06, 0.07, 0.1] } }
+  ],
+  derived: (v) => {
+    const max = Math.max(1e-3, Number(v.max) || 100);
+    const value = Math.min(max, Math.max(0, Number(v.value) || 0));
+    const f = value / max;
+    const warn = Math.min(1, Math.max(0, Number(v.warn) / 100));
+    const danger = Math.min(1, Math.max(warn, Number(v.danger) / 100));
+    const dec = decimalsOf([value]);
+    const unit = formatSafe(v.unit);
+    const reading = fit7(`${formatCount(value, { decimals: dec })}${unit}`, 150, 26);
+    const label = fitLabel(v.label, 150, 10, 8);
+    const ends = [0, max].map((x) => fit7(formatCount(x, { decimals: decimalsOf([x]) }), 30, 10).size);
+    return {
+      band0: gaugeArc(0, warn),
+      band1: gaugeArc(warn, danger),
+      band2: gaugeArc(danger, 1),
+      over: needle(r114(180 * Math.min(1, f + 0.06))),
+      angle: needle(r114(180 * f)),
+      reading: +value.toFixed(dec),
+      dec,
+      unit,
+      readingSize: reading.size,
+      labelText: label.text,
+      labelSize: label.size,
+      labelLength: label.length,
+      maxText: formatCount(max, { decimals: decimalsOf([max]) }),
+      maxSize: ends[1]
+    };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 240 170" font-family="${SANS12}"><!-- {{value: float min=0 max=10000 default=72 step=1 label='Value'}} {{max: float min=1 max=10000 default=100 step=1 label='Scale maximum'}} {{unit: text default='%' label='Unit'}} {{label: text default='Performance' label='Label'}} {{warn: float min=0 max=100 default=60 step=1 label='Amber from (% of scale)'}} {{danger: float min=0 max=100 default=85 step=1 label='Red from (% of scale)'}} {{low: color default=#22C55E label='Low band'}} {{mid: color default=#F59E0B label='Middle band'}} {{high: color default=#EF4444 label='High band'}} {{needleColor: color default=#0F172A label='Needle'}} {{hub: color default=#FFFFFF label='Hub centre'}} {{ink: color default=#1E293B label='Text'}} --><path id="gaugeBand0" d="{{band0}}" fill="none" stroke="{{low}}" stroke-width="${GAUGE.band}"/><path id="gaugeBand1" d="{{band1}}" fill="none" stroke="{{mid}}" stroke-width="${GAUGE.band}"/><path id="gaugeBand2" d="{{band2}}" fill="none" stroke="{{high}}" stroke-width="${GAUGE.band}"/><g stroke="{{ink}}" stroke-opacity="0.35" stroke-linecap="round">${Array.from({ length: 11 }, (_, k) => `<path d="M${gaugeAt(k / 10, 70)} L${gaugeAt(k / 10, k % 5 ? 65 : 61)}" stroke-width="${k % 5 ? 1.5 : 2.5}"/>`).join("")}</g><text x="${GAUGE.cx - GAUGE.r}" y="130" text-anchor="middle" font-size="10" fill="{{ink}}" fill-opacity="0.6">0</text><text x="${GAUGE.cx + GAUGE.r}" y="130" text-anchor="middle" font-size="{{maxSize}}" fill="{{ink}}" fill-opacity="0.6">{{maxText}}</text><g id="gaugeNeedle" transform="${needle(0)}"><path d="M${GAUGE.cx} ${GAUGE.cy - 4} L${GAUGE.cx - GAUGE.r + 12} ${GAUGE.cy} L${GAUGE.cx} ${GAUGE.cy + 4}Z" fill="{{needleColor}}"/></g><circle cx="${GAUGE.cx}" cy="${GAUGE.cy}" r="8" fill="{{needleColor}}"/><circle cx="${GAUGE.cx}" cy="${GAUGE.cy}" r="3" fill="{{hub}}"/><text id="gaugeValue" x="${GAUGE.cx}" y="148" text-anchor="middle" font-size="{{readingSize}}" font-weight="800" fill="{{ink}}">0</text><text x="${GAUGE.cx}" y="164" text-anchor="middle" font-size="{{labelSize}}" textLength="{{labelLength}}" lengthAdjust="spacingAndGlyphs" fill="{{ink}}" fill-opacity="0.6">{{labelText}}</text></svg>`,
+    animate: [
+      ...[0, 1, 2].map((k) => ({ id: `gaugeBand${k}`, draw: true, delay: k * 140, ms: 320, ease: k === 0 ? "out" : "linear" })),
+      { id: "gaugeNeedle", attrs: { transform: [needle(0), "{{over}}"] }, delay: 300, ms: 900, ease: "out" },
+      { id: "gaugeNeedle", attrs: { transform: ["{{over}}", "{{angle}}"] }, delay: 1200, ms: 450, ease: "in-out" },
+      { id: "gaugeValue", count: [0, n15("reading")], decimals: n15("dec"), format: "{n}{{unit}}", delay: 300, ms: 1300, ease: "out" }
+    ]
+  }
+};
+var RACE_ROWS = 6;
+var RACE_STATES = 5;
+var RACE = { left: 74, top: 12, pitch: 28, height: 22, width: 320, value: 10, intro: 900, move: 1e3, rest: 700 };
+var RACE_DEFAULT = [
+  { name: "Lumen", values: [12, 28, 41, 66] },
+  { name: "Pixel", values: [30, 36, 48, 54] },
+  { name: "Vertex", values: [22, 40, 39, 71] },
+  { name: "Shader", values: [8, 20, 52, 60] },
+  { name: "Raster", values: [18, 24, 30, 35] },
+  { name: "Vector", values: [26, 30, 44, 49] }
+];
+var raceTime = (k) => RACE.intro + RACE.rest + (k - 1) * (RACE.move + RACE.rest);
+var barRace = {
+  kind: "vector",
+  id: "bar-race",
+  name: "Bar race",
+  description: "A bar chart race: bars stretch and overtake each other, swapping places as the period label ticks through the years.",
+  category: "data",
+  tags: ["chart", "race", "ranking", "bars", "timeline", "explainer"],
+  hold: 1800,
+  presets: [
+    ...PALETTE_PRESETS,
+    { name: "Browsers", values: { rows: "Chrome:20,45,62,65;Firefox:28,30,22,8;Safari:5,8,15,19;Edge:0,2,4,5;Opera:3,2,2,2", periods: "2009,2012,2016,2020" } }
+  ],
+  derived: (v) => {
+    const rows = parseRace(v.rows, RACE_ROWS, RACE_STATES, RACE_DEFAULT);
+    const states = Math.max(1, rows[0].values.length);
+    const all = rows.flatMap((r) => r.values);
+    const dec = decimalsOf(all);
+    const valueWidth = Math.max(...all.map((x) => textWidthEm(formatCount(x, { decimals: dec })))) * RACE.value;
+    const barWidth = Math.max(40, RACE.width - RACE.left - 10 - valueWidth);
+    const periods = parseLabels(v.periods, RACE_STATES);
+    const end = states > 1 ? raceTime(states - 1) + RACE.move : RACE.intro;
+    const out = { dec };
+    const ranks = Array.from({ length: RACE_STATES }, (_, k) => {
+      const s = Math.min(k, states - 1);
+      const order = rows.map((r, i) => [i, r.values[s]]).sort((a, b) => b[1] - a[1] || a[0] - b[0]);
+      const rank = new Map(order.map(([i], place) => [i, place]));
+      const top = Math.max(1e-9, order[0][1]);
+      return { s, rank, top };
+    });
+    for (let i = 0; i < RACE_ROWS; i++) {
+      const row = rows[i];
+      const name = fitLabel(row?.name ?? "", RACE.left - 12, 11, 8);
+      out[`show${i}`] = row ? "inline" : "none";
+      out[`nm${i}`] = name.text;
+      out[`ns${i}`] = name.size;
+      out[`nl${i}`] = name.length;
+      out[`in${i}`] = i * 70;
+      for (let k = 0; k < RACE_STATES; k++) {
+        const { s, rank, top } = ranks[k];
+        const value = row ? row.values[s] : 0;
+        const w = r114(value / top * barWidth);
+        out[`y${i}_${k}`] = RACE.top + (rank.get(i) ?? i) * RACE.pitch;
+        out[`w${i}_${k}`] = w;
+        out[`x${i}_${k}`] = r114(RACE.left + w + 5);
+        out[`v${i}_${k}`] = value;
+      }
+    }
+    for (let k = 1; k < RACE_STATES; k++) {
+      out[`t${k}`] = k < states ? raceTime(k) : end;
+      out[`m${k}`] = k < states ? RACE.move : 0;
+      out[`tick${k}`] = k < states ? raceTime(k) + RACE.move / 2 : end;
+      out[`solo${k}`] = Math.min(k, states - 1);
+    }
+    for (let k = 0; k < RACE_STATES; k++) {
+      const p = fit7(periods[k] ?? "", 120, 30);
+      out[`p${k}`] = periods[k] ?? "";
+      out[`ps${k}`] = p.size;
+    }
+    return out;
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 ${RACE.width} 210" font-family="${SANS12}"><!-- {{rows: text default='Lumen:12,28,41,66;Pixel:30,36,48,54;Vertex:22,40,39,71;Shader:8,20,52,60;Raster:18,24,30,35;Vector:26,30,44,49' label='Rows (Name:v1,v2,\u2026; \u2026)'}} {{periods: text default='2021,2022,2023,2024' label='Periods (comma-separated)'}} {{ink: color default=#1E293B label='Text'}} ${palette()} --><g id="barRacePeriod" font-weight="800" fill="{{ink}}" fill-opacity="0.22" text-anchor="end">${Array.from(
+      { length: RACE_STATES },
+      (_, k) => `<text x="${RACE.width - 8}" y="202" font-size="{{ps${k}}}"${k ? ` display="none"` : ""}>{{p${k}}}</text>`
+    ).join("")}</g>${Array.from(
+      { length: RACE_ROWS },
+      (_, i) => `<g id="barRaceRow${i}" display="{{show${i}}}" opacity="0" transform="translate(0 {{y${i}_0}})"><text x="${RACE.left - 6}" y="15" text-anchor="end" font-size="{{ns${i}}}" textLength="{{nl${i}}}" lengthAdjust="spacingAndGlyphs" font-weight="600" fill="{{ink}}">{{nm${i}}}</text><rect id="barRaceBar${i}" x="${RACE.left}" y="0" width="0" height="${RACE.height}" rx="4" fill="{{c${i + 1}}}"/><text id="barRaceValue${i}" x="${RACE.left + 5}" y="15" font-size="${RACE.value}" font-weight="700" fill="{{ink}}">0</text></g>`
+    ).join("")}</svg>`,
+    animate: [
+      { id: "barRacePeriod", solo: 0 },
+      ...Array.from({ length: RACE_STATES - 1 }, (_, j) => ({ id: "barRacePeriod", solo: n15(`solo${j + 1}`), delay: n15(`tick${j + 1}`) })),
+      ...Array.from({ length: RACE_ROWS }, (_, i) => [
+        { id: `barRaceRow${i}`, attrs: { opacity: [0, 1] }, delay: n15(`in${i}`), ms: 300 },
+        { id: `barRaceBar${i}`, attrs: { width: [0, n15(`w${i}_0`)] }, delay: n15(`in${i}`), ms: 800, ease: "out" },
+        { id: `barRaceValue${i}`, attrs: { x: [RACE.left + 5, n15(`x${i}_0`)] }, count: [0, n15(`v${i}_0`)], decimals: n15("dec"), delay: n15(`in${i}`), ms: 800, ease: "out" },
+        ...Array.from({ length: RACE_STATES - 1 }, (_2, j) => {
+          const [a, b] = [j, j + 1];
+          const at4 = { delay: n15(`t${b}`), ms: n15(`m${b}`), ease: "in-out" };
+          return [
+            { id: `barRaceRow${i}`, attrs: { transform: [`translate(0 {{y${i}_${a}}})`, `translate(0 {{y${i}_${b}}})`] }, ...at4 },
+            { id: `barRaceBar${i}`, attrs: { width: [n15(`w${i}_${a}`), n15(`w${i}_${b}`)] }, ...at4 },
+            { id: `barRaceValue${i}`, attrs: { x: [n15(`x${i}_${a}`), n15(`x${i}_${b}`)] }, count: [n15(`v${i}_${a}`), n15(`v${i}_${b}`)], decimals: n15("dec"), ...at4 }
+          ];
+        }).flat()
+      ]).flat()
+    ]
+  }
+};
+var SPARK_DEFAULT = [4, 6, 5, 8, 7, 10, 9, 13];
+var SPARK_DRAW = 1200;
+function linePath(values, x0, x1, top, bottom) {
+  const lo = Math.min(...values);
+  const hi = Math.max(...values);
+  const span = hi - lo || 1;
+  const pts = values.map((v, j) => [r114(x0 + j * (x1 - x0) / (values.length - 1)), r114(hi === lo ? (top + bottom) / 2 : bottom - (v - lo) / span * (bottom - top))]);
+  const line = pts.map(([x, y], j) => `${j ? "L" : "M"}${x} ${y}`).join(" ");
+  return { line, area: `${line} L${pts.at(-1)[0]} ${bottom + 3} L${pts[0][0]} ${bottom + 3}Z`, end: pts.at(-1) };
+}
+function series(text, max, fallback) {
+  const values = parseNumberList(text, max).filter((x) => Number.isFinite(x));
+  return values.length >= 2 ? values : values.length === 1 ? [values[0], values[0]] : fallback;
+}
+var sparkline = {
+  kind: "vector",
+  id: "sparkline",
+  name: "Sparkline",
+  description: "A tiny trend line drawing in with a dot riding its tip, which then pulses beside the latest value; small enough to sit in a line of text.",
+  category: "data",
+  tags: ["chart", "sparkline", "trend", "inline", "kpi", "dashboard"],
+  hold: 600,
+  presets: [
+    { name: "Falling", values: { values: "14,13,11,12,9,8,9,6", accent: [0.86, 0.15, 0.15] } },
+    { name: "Violet", values: { accent: [0.55, 0.36, 0.96] } }
+  ],
+  derived: (v) => {
+    const values = series(v.values, 32, SPARK_DEFAULT);
+    const dec = decimalsOf(values);
+    const e = Math.max(0.6, textWidthEm(formatCount(values.at(-1), { decimals: dec })));
+    const size = r114(Math.min(13, 44 / e));
+    const right = r114(120 - 3 - e * size - 6);
+    const { line, area } = linePath(values, 4, right, 6, 26);
+    return { line, area, size, valueX: r114(right + 6), first: values[0], last: values.at(-1), dec };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 120 32" font-family="${SANS12}"><!-- {{values: text default='4,6,5,8,7,10,9,13' label='Values (comma-separated)'}} {{accent: color default=#10B981 label='Line'}} {{ink: color default=#1E293B label='Value'}} --><defs><linearGradient id="sparklineFill" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="{{accent}}" stop-opacity="0.3"/><stop offset="1" stop-color="{{accent}}" stop-opacity="0"/></linearGradient></defs><path id="sparklineArea" d="{{area}}" fill="url(#sparklineFill)" opacity="0"/><path id="sparklineLine" d="{{line}}" fill="none" stroke="{{accent}}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><g id="sparklineDot"><circle id="sparklinePulse" r="2.6" fill="none" stroke="{{accent}}" stroke-width="1.5" opacity="0"/><circle r="2.8" fill="{{accent}}"/></g><text id="sparklineValue" x="{{valueX}}" y="20.5" font-size="{{size}}" font-weight="700" fill="{{ink}}">0</text></svg>`,
+    animate: [
+      { id: "sparklineLine", draw: true, ms: SPARK_DRAW, ease: "in-out" },
+      { id: "sparklineDot", along: "sparklineLine", ms: SPARK_DRAW, ease: "in-out" },
+      { id: "sparklineArea", attrs: { opacity: [0, 1] }, delay: 700, ms: 600 },
+      { id: "sparklineValue", count: [n15("first"), n15("last")], decimals: n15("dec"), ms: SPARK_DRAW, ease: "in-out" },
+      ...[0, 1, 2].map((k) => ({ id: "sparklinePulse", attrs: { r: [2.6, 9], opacity: [0.8, 0] }, delay: SPARK_DRAW + 50 + k * 750, ms: 700, ease: "out" }))
+    ]
+  }
+};
+var BOARD = { rows: 6, top: 8, pitch: 34, height: 30, left: 8, width: 244, slide: 130 };
+var leaderboard = {
+  kind: "vector",
+  id: "leaderboard",
+  name: "Leaderboard",
+  description: "Ranked rows sliding into place from the bottom up, each with an initials avatar and a score counting up, then a highlight on the winner.",
+  category: "data",
+  tags: ["leaderboard", "ranking", "scores", "game", "dashboard", "competition"],
+  hold: 1800,
+  presets: [
+    { name: "Dark", values: { card: [0.12, 0.14, 0.19], ink: [0.94, 0.95, 0.97] } },
+    { name: "Sales", values: { names: "North team,South team,East team,West team", scores: "128400,119250,98100,87600", accent: [0.13, 0.77, 0.37] } }
+  ],
+  derived: (v) => {
+    const names = parseLabels(v.names, BOARD.rows);
+    const scores = parseNumberList(v.scores, BOARD.rows).map((x) => Number.isFinite(x) ? x : 0);
+    const count = Math.min(BOARD.rows, Math.max(1, names.filter((s) => s !== "").length, scores.length));
+    const rows = Array.from({ length: count }, (_, i) => ({ name: names[i] || `Player ${i + 1}`, score: scores[i] ?? 0 }));
+    const order = rows.map((r, i) => [i, r.score]).sort((a, b) => b[1] - a[1] || a[0] - b[0]);
+    const rank = new Map(order.map(([i], place) => [i, place]));
+    const dec = decimalsOf(rows.map((r) => r.score));
+    const crown = (count - 1) * BOARD.slide + 450;
+    const out = { dec, crown, settle: crown + 200 };
+    for (let i = 0; i < BOARD.rows; i++) {
+      const row = rows[i];
+      const place = rank.get(i) ?? i;
+      const wait = Math.max(0, count - 1 - place) * BOARD.slide;
+      const scoreWidth = textWidthEm(formatCount(row?.score ?? 0, { decimals: dec })) * 12;
+      const name = fitLabel(row?.name ?? "", Math.max(20, BOARD.left + BOARD.width - 12 - scoreWidth - 8 - 72), 12, 9);
+      const initials = (row?.name ?? "").split(/\s+/).filter(Boolean).slice(0, 2).map((w) => Array.from(w)[0]).join("").toUpperCase() || "?";
+      out[`show${i}`] = row ? "inline" : "none";
+      out[`y${i}`] = BOARD.top + place * BOARD.pitch;
+      out[`at${i}`] = wait;
+      out[`land${i}`] = wait + 300;
+      out[`rank${i}`] = place + 1;
+      out[`nm${i}`] = name.text;
+      out[`ns${i}`] = name.size;
+      out[`nl${i}`] = name.length;
+      out[`ini${i}`] = initials;
+      out[`is${i}`] = r114(Math.min(10, 15 / Math.max(0.6, textWidthEm(initials))));
+      out[`sc${i}`] = row?.score ?? 0;
+    }
+    return out;
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 260 214" font-family="${SANS12}"><!-- {{names: text default='Ava Stone,Ben Ito,Cleo Park,Dev Shah,Eli Moss' label='Names (comma-separated)'}} {{scores: text default='870,980,640,820,510' label='Scores (comma-separated)'}} {{card: color default=#F1F5F9 label='Rows'}} {{ink: color default=#0F172A label='Text'}} {{accent: color default=#F59E0B label='Winner highlight'}} ${palette()} -->${Array.from(
+      { length: BOARD.rows },
+      (_, i) => `<g id="leaderboardRow${i}" display="{{show${i}}}" opacity="0" transform="translate(280 {{y${i}}})"><rect x="${BOARD.left}" y="0" width="${BOARD.width}" height="${BOARD.height}" rx="8" fill="{{card}}"/><text x="26" y="19.5" text-anchor="middle" font-size="12" font-weight="700" fill="{{ink}}" fill-opacity="0.55">{{rank${i}}}</text><circle cx="52" cy="15" r="11" fill="{{c${i + 1}}}"/><text x="52" y="18.5" text-anchor="middle" font-size="{{is${i}}}" font-weight="700" fill="#FFFFFF">{{ini${i}}}</text><text x="70" y="19.5" font-size="{{ns${i}}}" textLength="{{nl${i}}}" lengthAdjust="spacingAndGlyphs" font-weight="600" fill="{{ink}}">{{nm${i}}}</text><text id="leaderboardScore${i}" x="${BOARD.left + BOARD.width - 12}" y="19.5" text-anchor="end" font-size="12" font-weight="700" fill="{{ink}}">0</text></g>`
+    ).join(
+      ""
+    )}<rect id="leaderboardRing" x="${BOARD.left}" y="${BOARD.top}" width="${BOARD.width}" height="${BOARD.height}" rx="8" fill="none" stroke="{{accent}}" stroke-width="2" opacity="0"/><rect id="leaderboardTop" x="${BOARD.left}" y="${BOARD.top}" width="${BOARD.width}" height="${BOARD.height}" rx="8" fill="{{accent}}" fill-opacity="0.12" stroke="{{accent}}" stroke-width="2" opacity="0"/><g id="leaderboardBadge" transform="translate(26 23) scale(0)"><circle r="10" fill="{{accent}}"/><path d="M-5 -3.5 L-2.5 -0.5 L0 -5 L2.5 -0.5 L5 -3.5 L4 3.5 H-4Z" fill="#FFFFFF"/></g></svg>`,
+    animate: [
+      ...Array.from({ length: BOARD.rows }, (_, i) => [
+        { id: `leaderboardRow${i}`, attrs: { transform: [`translate(280 {{y${i}}})`, `translate(0 {{y${i}}})`] }, delay: n15(`at${i}`), ms: 450, ease: "out" },
+        { id: `leaderboardRow${i}`, attrs: { opacity: [0, 1] }, delay: n15(`at${i}`), ms: 200 },
+        { id: `leaderboardScore${i}`, count: [0, n15(`sc${i}`)], decimals: n15("dec"), delay: n15(`land${i}`), ms: 800, ease: "out" }
+      ]).flat(),
+      { id: "leaderboardTop", attrs: { opacity: [0, 1] }, delay: n15("crown"), ms: 250 },
+      { id: "leaderboardRing", attrs: { opacity: [0, 0.9] }, delay: n15("crown"), ms: 0 },
+      { id: "leaderboardRing", attrs: { x: [BOARD.left, BOARD.left - 5], y: [BOARD.top, BOARD.top - 5], width: [BOARD.width, BOARD.width + 10], height: [BOARD.height, BOARD.height + 10], opacity: [0.9, 0] }, delay: n15("crown"), ms: 650, ease: "out" },
+      { id: "leaderboardBadge", attrs: { transform: ["translate(26 23) scale(0)", "translate(26 23) scale(1.25)"] }, delay: n15("crown"), ms: 200, ease: "out" },
+      { id: "leaderboardBadge", attrs: { transform: ["translate(26 23) scale(1.25)", "translate(26 23) scale(1)"] }, delay: n15("settle"), ms: 200, ease: "in-out" }
+    ]
+  }
+};
+var AREA = { series: 4, points: 12, x0: 34, x1: 268, top: 40, base: 150, sweep: 2400, rise: 1100 };
+var AREA_DEFAULT = [
+  [12, 18, 15, 24, 28, 34],
+  [8, 10, 14, 12, 18, 22],
+  [5, 6, 9, 8, 11, 14]
+];
+var areaChart = {
+  kind: "vector",
+  id: "area-chart",
+  name: "Area chart",
+  description: "A stacked area chart whose layers rise together from the baseline, then a tooltip line glides across reading the total.",
+  category: "data",
+  tags: ["chart", "area", "stacked", "trend", "dashboard", "report"],
+  hold: 1400,
+  presets: [...PALETTE_PRESETS.map((p) => ({ ...p, values: Object.fromEntries(Object.entries(p.values).slice(0, AREA.series)) })), { name: "Two series", values: { series: "5,9,7,12,15,14,18,22;3,4,6,5,8,9,8,11", labels: "Paid,Organic", points: "W1,W2,W3,W4,W5,W6,W7,W8" } }],
+  derived: (v) => {
+    const rows = parseSeries(v.series, AREA.series, AREA.points, AREA_DEFAULT);
+    const points = rows[0].length;
+    const cum = rows.map((_, s) => Array.from({ length: points }, (_2, j) => rows.slice(0, s + 1).reduce((a, r) => a + r[j], 0)));
+    const top = Math.max(1e-9, ...cum.at(-1));
+    const x = (j) => r114(AREA.x0 + j * (AREA.x1 - AREA.x0) / (points - 1));
+    const y = (value) => r114(AREA.base - value / top * (AREA.base - AREA.top));
+    const edge = (values, back) => {
+      const pts = values.map((val, j) => `${x(j)} ${y(val)}`);
+      return (back ? pts.reverse() : pts).join(" L");
+    };
+    const zero = new Array(points).fill(0);
+    const labels = parseLabels(v.labels, AREA.series);
+    const xLabels = parseLabels(v.points, AREA.points);
+    const dec = decimalsOf(rows.flat());
+    const totals = cum.at(-1);
+    const spacing = (AREA.x1 - AREA.x0) / (points - 1);
+    const seg = AREA.sweep / (points - 1);
+    const tip = AREA.rise + 200;
+    const end = tip + AREA.sweep;
+    const tipSize = r114(Math.min(9, 34 / Math.max(0.6, ...totals.map((t) => textWidthEm(formatCount(t, { decimals: dec }))))));
+    const out = { dec, tip, tipSize, tx0: x(0), total0: +totals[0].toFixed(dec) };
+    for (let s = 0; s < AREA.series; s++) {
+      const shown = s < rows.length;
+      const below = s > 0 && shown ? cum[s - 1] : zero;
+      const above = shown ? cum[s] : zero;
+      out[`show${s}`] = shown ? "inline" : "none";
+      out[`flat${s}`] = `M${edge(zero, false)} L${edge(zero, true)}Z`;
+      out[`full${s}`] = `M${edge(above, false)} L${edge(below, true)}Z`;
+      const lab = fitLabel(labels[s] ?? "", 50, 9, 7.5);
+      out[`lab${s}`] = lab.text;
+      out[`labs${s}`] = lab.size;
+      out[`labl${s}`] = lab.length;
+      out[`dy${s}_0`] = y(above[0]);
+    }
+    for (let j = 0; j < AREA.points; j++) {
+      const shown = j < points;
+      const label = fitLabel(xLabels[j] ?? "", spacing * 0.9, 9, 7);
+      out[`xs${j}`] = shown ? "inline" : "none";
+      out[`xx${j}`] = shown ? x(j) : AREA.x1;
+      out[`xl${j}`] = label.text;
+      out[`xz${j}`] = label.size;
+    }
+    for (let j = 0; j < AREA.points - 1; j++) {
+      const real = j < points - 1;
+      const [a, b] = real ? [j, j + 1] : [points - 1, points - 1];
+      out[`sd${j}`] = real ? Math.round(tip + j * seg) : end;
+      out[`sm${j}`] = real ? Math.round(seg) : 0;
+      out[`ta${j}`] = x(a);
+      out[`tb${j}`] = x(b);
+      out[`va${j}`] = +totals[a].toFixed(dec);
+      out[`vb${j}`] = +totals[b].toFixed(dec);
+      for (let s = 0; s < AREA.series; s++) {
+        const c = s < rows.length ? cum[s] : zero;
+        out[`ya${s}_${j}`] = y(c[a]);
+        out[`yb${s}_${j}`] = y(c[b]);
+      }
+    }
+    return out;
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 300 176" font-family="${SANS12}"><!-- {{series: text default='12,18,15,24,28,34;8,10,14,12,18,22;5,6,9,8,11,14' label='Series (values, rows split by ;)'}} {{labels: text default='Web,Mobile,API' label='Series labels (comma-separated)'}} {{points: text default='Jan,Feb,Mar,Apr,May,Jun' label='Point labels (comma-separated)'}} {{ink: color default=#1E293B label='Text'}} {{grid: color default=#E2E8F0 label='Grid'}} ${palette(AREA.series)} --><g stroke="{{grid}}" stroke-width="1">${[0, 1, 2, 3].map((k) => `<line x1="${AREA.x0}" x2="${AREA.x1}" y1="${AREA.top + k * (AREA.base - AREA.top) / 3}" y2="${AREA.top + k * (AREA.base - AREA.top) / 3}"/>`).join("")}</g>${Array.from(
+      { length: AREA.series },
+      (_, s) => `<path id="areaChartArea${s}" display="{{show${s}}}" d="{{flat${s}}}" fill="{{c${s + 1}}}" fill-opacity="0.78" stroke="{{c${s + 1}}}" stroke-width="1.5" stroke-linejoin="round"/>`
+    ).join("")}${Array.from(
+      { length: AREA.series },
+      (_, s) => `<g display="{{show${s}}}" transform="translate(${AREA.x0 + s * 64} 0)"><rect x="0" y="5" width="8" height="8" rx="2" fill="{{c${s + 1}}}"/><text x="12" y="12.5" font-size="{{labs${s}}}" textLength="{{labl${s}}}" lengthAdjust="spacingAndGlyphs" fill="{{ink}}">{{lab${s}}}</text></g>`
+    ).join("")}<g font-size="9" fill="{{ink}}" fill-opacity="0.6" text-anchor="middle">${Array.from(
+      { length: AREA.points },
+      (_, j) => `<text display="{{xs${j}}}" x="{{xx${j}}}" y="166" font-size="{{xz${j}}}">{{xl${j}}}</text>`
+    ).join("")}</g><g id="areaChartTip" opacity="0" transform="translate({{tx0}} 0)"><line x1="0" x2="0" y1="34" y2="${AREA.base}" stroke="{{ink}}" stroke-opacity="0.5" stroke-width="1.2" stroke-dasharray="3 2"/><rect x="-20" y="18" width="40" height="16" rx="4" fill="{{ink}}"/><text id="areaChartTipValue" x="0" y="29" text-anchor="middle" font-size="{{tipSize}}" font-weight="700" fill="#FFFFFF">0</text>${Array.from(
+      { length: AREA.series },
+      (_, s) => `<circle id="areaChartDot${s}" display="{{show${s}}}" cx="0" cy="{{dy${s}_0}}" r="3" fill="#FFFFFF" stroke="{{c${s + 1}}}" stroke-width="2"/>`
+    ).join("")}</g></svg>`,
+    animate: [
+      ...Array.from({ length: AREA.series }, (_, s) => ({ id: `areaChartArea${s}`, attrs: { d: [`{{flat${s}}}`, `{{full${s}}}`] }, ms: AREA.rise, ease: "out" })),
+      { id: "areaChartTip", attrs: { opacity: [0, 1] }, delay: n15("tip"), ms: 200 },
+      { id: "areaChartTipValue", count: [n15("total0"), n15("total0")], decimals: n15("dec"), delay: n15("tip"), ms: 0 },
+      ...Array.from({ length: AREA.points - 1 }, (_, j) => {
+        const at4 = { delay: n15(`sd${j}`), ms: n15(`sm${j}`), ease: "linear" };
+        return [
+          { id: "areaChartTip", attrs: { transform: [`translate({{ta${j}}} 0)`, `translate({{tb${j}}} 0)`] }, ...at4 },
+          { id: "areaChartTipValue", count: [n15(`va${j}`), n15(`vb${j}`)], decimals: n15("dec"), ...at4 },
+          ...Array.from({ length: AREA.series }, (_2, s) => ({ id: `areaChartDot${s}`, attrs: { cy: [n15(`ya${s}_${j}`), n15(`yb${s}_${j}`)] }, ...at4 }))
+        ];
+      }).flat()
+    ]
+  }
+};
+var KPI_DEFAULT = [3, 4, 3.5, 5, 4.8, 6, 7.2];
+var kpiTile = {
+  kind: "vector",
+  id: "kpi-tile",
+  name: "KPI tile",
+  description: "A dashboard tile: the headline figure counts up, a delta arrow shows the change in green or red by its sign, and a mini sparkline draws in.",
+  category: "data",
+  tags: ["kpi", "dashboard", "metric", "card", "sparkline", "report"],
+  hold: 1600,
+  presets: [
+    { name: "Dark", values: { card: [0.09, 0.11, 0.15], ink: [0.95, 0.96, 0.97] } },
+    { name: "Churn", values: { label: "Churn rate", value: 2.4, prefix: "", suffix: "%", delta: -0.6, trend: "3.4,3.3,3.1,3.0,2.8,2.6,2.4", caption: "vs last quarter" } }
+  ],
+  derived: (v) => {
+    const value = Number(v.value) || 0;
+    const dec = Math.min(3, Math.max(0, Math.round(Number(v.decimals) || 0)));
+    const pre = formatSafe(v.prefix);
+    const suf = formatSafe(v.suffix);
+    const big = fit7(`${pre}${formatCount(value, { decimals: dec })}${suf}`, 204, 34);
+    const delta = Number(v.delta) || 0;
+    const up = delta >= 0;
+    const trend = series(v.trend, 24, KPI_DEFAULT);
+    const { line, area, end } = linePath(trend, 148, 222, 90, 120);
+    const label = fitLabel(v.label, 204, 12, 10);
+    const caption = fitLabel(v.caption, 120, 10, 8);
+    return {
+      pre,
+      suf,
+      dec,
+      value: +value.toFixed(dec),
+      size: big.size,
+      delta: +Math.abs(delta).toFixed(1),
+      deltaFormat: up ? "+{n}%" : "\u2212{n}%",
+      deltaColor: paint(up ? v.up : v.down),
+      arrow: up ? "M24 92 L30 100 H18Z" : "M24 101 L30 93 H18Z",
+      line,
+      area,
+      endX: end[0],
+      endY: end[1],
+      labelText: label.text,
+      captionText: caption.text,
+      labelSize: label.size,
+      labelLength: label.length,
+      captionSize: caption.size,
+      captionLength: caption.length
+    };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 240 140" font-family="${SANS12}"><!-- {{label: text default='Monthly revenue' label='Label'}} {{value: float min=0 max=1000000 default=48.2 step=0.1 label='Value'}} {{decimals: int min=0 max=3 default=1 label='Decimals'}} {{prefix: text default='$' label='Prefix'}} {{suffix: text default='k' label='Suffix'}} {{delta: float min=-100 max=100 default=12.4 step=0.1 label='Change (%)'}} {{caption: text default='vs last month' label='Caption'}} {{trend: text default='3,4,3.5,5,4.8,6,7.2' label='Trend (comma-separated)'}} {{card: color default=#FFFFFF label='Card'}} {{ink: color default=#0F172A label='Text'}} {{accent: color default=#6366F1 label='Sparkline'}} {{up: color default=#16A34A label='Rise'}} {{down: color default=#DC2626 label='Fall'}} --><defs><linearGradient id="kpiTileFill" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="{{accent}}" stop-opacity="0.28"/><stop offset="1" stop-color="{{accent}}" stop-opacity="0"/></linearGradient></defs><rect x="2" y="2" width="236" height="136" rx="14" fill="{{card}}" stroke="{{ink}}" stroke-opacity="0.1"/><text x="18" y="30" font-size="{{labelSize}}" textLength="{{labelLength}}" lengthAdjust="spacingAndGlyphs" font-weight="600" fill="{{ink}}" fill-opacity="0.6">{{labelText}}</text><text id="kpiTileValue" x="18" y="72" font-size="{{size}}" font-weight="800" fill="{{ink}}">0</text><g id="kpiTileDelta" opacity="0"><path d="{{arrow}}" fill="{{deltaColor}}"/><text id="kpiTileDeltaValue" x="34" y="101" font-size="12" font-weight="700" fill="{{deltaColor}}">0%</text></g><text id="kpiTileCaption" x="18" y="124" font-size="{{captionSize}}" textLength="{{captionLength}}" lengthAdjust="spacingAndGlyphs" fill="{{ink}}" fill-opacity="0.55" opacity="0">{{captionText}}</text><path id="kpiTileArea" d="{{area}}" fill="url(#kpiTileFill)" opacity="0"/><path id="kpiTileLine" d="{{line}}" fill="none" stroke="{{accent}}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle id="kpiTileEnd" cx="{{endX}}" cy="{{endY}}" r="0" fill="{{accent}}"/></svg>`,
+    animate: [
+      { id: "kpiTileValue", count: [0, n15("value")], decimals: n15("dec"), format: "{{pre}}{n}{{suf}}", ms: 1400, ease: "out" },
+      { id: "kpiTileDelta", attrs: { opacity: [0, 1], transform: ["translate(0 6)", "translate(0 0)"] }, delay: 500, ms: 400, ease: "out" },
+      { id: "kpiTileDeltaValue", count: [0, n15("delta")], decimals: 1, format: "{{deltaFormat}}", delay: 500, ms: 900, ease: "out" },
+      { id: "kpiTileCaption", attrs: { opacity: [0, 1] }, delay: 800, ms: 400 },
+      { id: "kpiTileLine", draw: true, delay: 300, ms: 1100, ease: "in-out" },
+      { id: "kpiTileArea", attrs: { opacity: [0, 1] }, delay: 900, ms: 500 },
+      { id: "kpiTileEnd", attrs: { r: [0, 4.5] }, delay: 1400, ms: 180, ease: "out" },
+      { id: "kpiTileEnd", attrs: { r: [4.5, 3] }, delay: 1580, ms: 200, ease: "in-out" }
+    ]
+  }
+};
+var dataEffects = [donutChart, pieChart, gauge, barRace, sparkline, leaderboard, areaChart, kpiTile];
+
+// src/catalog/icons.ts
+var r115 = (v) => Math.round(v * 10) / 10;
+var r213 = (v) => Math.round(v * 100) / 100;
+var n16 = (name) => `{{${name}}}`;
+var SANS13 = `system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`;
+var about6 = (cx, cy, s) => `translate(${cx} ${cy}) scale(${r213(s)}) translate(${-cx} ${-cy})`;
+function cycle(id, from, to, phase, period, ease = "linear") {
+  const at4 = (u) => Object.fromEntries(Object.keys(from).map((k) => [k, lerpAttr(from[k], to[k], u)]));
+  const mid = at4(phase);
+  const pairs = (a, b) => Object.fromEntries(Object.keys(from).map((k) => [k, [a[k], b[k]]]));
+  const first = Math.round((1 - phase) * period);
+  const out = [{ id, attrs: pairs(mid, to), ms: first, ease }];
+  if (phase > 0) out.push({ id, attrs: pairs(from, mid), delay: first, ms: period - first, ease });
+  return out;
+}
+var swing = (id, attr, a, b, period, delay = 0) => [
+  { id, attrs: { [attr]: [a, b] }, delay, ms: period / 2, ease: "in-out" },
+  { id, attrs: { [attr]: [b, a] }, delay: delay + period / 2, ms: period / 2, ease: "in-out" }
+];
+var picks = (name, count) => (v) => {
+  const pick = Math.min(count - 1, Math.max(0, Math.round(Number(v[name]) || 0)));
+  return Object.fromEntries(Array.from({ length: count }, (_, k) => [`show${k}`, k === pick ? "inline" : "none"]));
+};
+var WEATHER_MS = 2400;
+var CLOUD = "M-22 14 H22 A12 12 0 0 0 20 -9 A17 17 0 0 0 -12 -10 A12 12 0 0 0 -22 14Z";
+var DROP = "M0 -5 C2 -1 3 1 3 3 A3 3 0 0 1 -3 3 C-3 1 -2 -1 0 -5Z";
+var FLAKE = "M0 -4 V4 M-3.5 -2 L3.5 2 M-3.5 2 L3.5 -2";
+var sunRays = (cx, cy, from, to) => Array.from({ length: 8 }, (_, k) => {
+  const a = k * Math.PI / 4;
+  return `M${r115(cx + from * Math.cos(a))} ${r115(cy + from * Math.sin(a))} L${r115(cx + to * Math.cos(a))} ${r115(cy + to * Math.sin(a))}`;
+}).join(" ");
+var cloud2 = (id, x, y, s, fill, extra = "") => `<g id="${id}" transform="translate(${x} ${y}) scale(${s})"><path d="${CLOUD}" fill="${fill}"${extra}/></g>`;
+var falling = (prefix, shape, xs, top, bottom, spin = 0) => ({
+  markup: xs.map((x, i) => `<g id="${prefix}${i}" transform="translate(${x} ${top}) rotate(0)" opacity="1">${shape(i)}</g>`).join(""),
+  animate: xs.flatMap(
+    (x, i) => cycle(`${prefix}${i}`, { transform: `translate(${x} ${top}) rotate(0)`, opacity: 1 }, { transform: `translate(${x + spin / 30} ${bottom}) rotate(${spin})`, opacity: 0 }, (i * 0.37 + 0.15) % 1, WEATHER_MS)
+  )
+});
+var rain = falling("weatherIconsDrop", () => `<path d="${DROP}" fill="{{accent}}"/>`, [36, 50, 64, 43, 57], 50, 86);
+var storm = falling("weatherIconsStormDrop", () => `<path d="${DROP}" fill="{{accent}}"/>`, [34, 66], 50, 86);
+var snow = falling("weatherIconsFlake", () => `<path d="${FLAKE}" stroke="{{accent}}" stroke-width="1.8" stroke-linecap="round"/>`, [36, 50, 64, 43, 58], 50, 88, 120);
+var WIND = ["M14 38 H58 C68 38 70 26 62 24 C56 23 54 29 58 32", "M10 52 H76 C86 52 88 64 80 66 C74 67 72 61 76 58", "M20 66 H50"];
+var weatherIcons = {
+  kind: "vector",
+  id: "weather-icons",
+  name: "Weather icons",
+  description: "An animated weather icon: sun with turning rays, partly cloudy, drifting clouds, falling rain, a flashing thunderbolt, snow or gusting wind.",
+  category: "icon",
+  tags: ["weather", "forecast", "sun", "rain", "snow", "loop"],
+  hold: 0,
+  presets: [
+    { name: "Rain", values: { kind: 3 } },
+    { name: "Snow", values: { kind: 5, cloud: [0.8, 0.85, 0.92], accent: [0.55, 0.75, 0.95] } },
+    { name: "Thunder", values: { kind: 4, cloud: [0.39, 0.45, 0.55] } }
+  ],
+  derived: picks("kind", 7),
+  motion: {
+    svg: `<svg viewBox="0 0 100 100"><!-- {{kind: int min=0 max=6 default=0 label='Weather (sun, partly cloudy, cloudy, rain, thunder, snow, wind)'}} {{sun: color default=#FBBF24 label='Sun'}} {{cloud: color default=#94A3B8 label='Cloud'}} {{accent: color default=#38BDF8 label='Rain, snow and wind'}} {{bolt: color default=#FACC15 label='Lightning'}} --><g display="{{show0}}"><g id="weatherIconsRays" transform="rotate(0 50 50)"><path d="${sunRays(50, 50, 26, 36)}" stroke="{{sun}}" stroke-width="5" stroke-linecap="round"/></g><circle id="weatherIconsSun" cx="50" cy="50" r="17" fill="{{sun}}"/></g><g display="{{show1}}"><g id="weatherIconsPartRays" transform="rotate(0 38 38)"><path d="${sunRays(38, 38, 19, 27)}" stroke="{{sun}}" stroke-width="4" stroke-linecap="round"/></g><circle cx="38" cy="38" r="13" fill="{{sun}}"/>${cloud2("weatherIconsPartCloud", 56, 60, 1, "{{cloud}}")}</g><g display="{{show2}}">${cloud2("weatherIconsBackCloud", 62, 40, 0.75, "{{cloud}}", ` opacity="0.55"`)}${cloud2("weatherIconsFrontCloud", 46, 56, 1.05, "{{cloud}}")}</g><g display="{{show3}}">${rain.markup}${cloud2("weatherIconsRainCloud", 50, 38, 1.1, "{{cloud}}")}</g><g display="{{show4}}">${storm.markup}<g transform="translate(50 36) scale(1.1)"><path d="${CLOUD}" fill="{{cloud}}"/><path d="${CLOUD}" fill="#000000" opacity="0.22"/></g><path id="weatherIconsBolt" d="M54 50 L42 70 H51 L45 90 L63 64 H54 L60 50Z" fill="{{bolt}}" opacity="0"/></g><g display="{{show5}}">${snow.markup}${cloud2("weatherIconsSnowCloud", 50, 38, 1.1, "{{cloud}}")}</g><g display="{{show6}}" fill="none" stroke="{{accent}}" stroke-width="5" stroke-linecap="round">${WIND.map((d, k) => `<path id="weatherIconsWind${k}" d="${d}"/>`).join("")}</g></svg>`,
+    animate: [
+      ...cycle("weatherIconsRays", { transform: "rotate(0 50 50)" }, { transform: "rotate(45 50 50)" }, 0, WEATHER_MS),
+      ...swing("weatherIconsSun", "r", 17, 18.5, WEATHER_MS),
+      ...cycle("weatherIconsPartRays", { transform: "rotate(0 38 38)" }, { transform: "rotate(45 38 38)" }, 0, WEATHER_MS),
+      ...swing("weatherIconsPartCloud", "transform", "translate(54 60) scale(1)", "translate(60 60) scale(1)", WEATHER_MS),
+      ...swing("weatherIconsBackCloud", "transform", "translate(66 40) scale(0.75)", "translate(58 40) scale(0.75)", WEATHER_MS),
+      ...swing("weatherIconsFrontCloud", "transform", "translate(43 56) scale(1.05)", "translate(50 56) scale(1.05)", WEATHER_MS),
+      ...swing("weatherIconsRainCloud", "transform", "translate(49 38) scale(1.1)", "translate(51 38) scale(1.1)", WEATHER_MS),
+      ...swing("weatherIconsSnowCloud", "transform", "translate(49 38) scale(1.1)", "translate(51 38) scale(1.1)", WEATHER_MS),
+      ...rain.animate,
+      ...storm.animate,
+      ...snow.animate,
+      // Two quick flashes, then dark until the loop comes round.
+      { id: "weatherIconsBolt", attrs: { opacity: [0, 1] }, delay: 700, ms: 60 },
+      { id: "weatherIconsBolt", attrs: { opacity: [1, 0.2] }, delay: 760, ms: 90 },
+      { id: "weatherIconsBolt", attrs: { opacity: [0.2, 1] }, delay: 850, ms: 60 },
+      { id: "weatherIconsBolt", attrs: { opacity: [1, 0] }, delay: 1100, ms: 400 },
+      // Gusts draw on in turn and fade; undrawn again by the time the loop restarts.
+      ...WIND.flatMap((_, k) => [
+        { id: `weatherIconsWind${k}`, draw: true, delay: k * 220, ms: 900, ease: "in-out" },
+        { id: `weatherIconsWind${k}`, attrs: { opacity: [1, 0] }, delay: 1300 + k * 220, ms: 450 }
+      ])
+    ]
+  }
+};
+var BELL_PIVOT = "50 16";
+var bellTurn = (deg) => `rotate(${deg} ${BELL_PIVOT})`;
+var BELL_SWING = [0, 18, -15, 11, -7, 3, 0];
+var CLAPPER_SWING = [0, -12, 14, -9, 6, -2, 0];
+var BADGE = [72, 26];
+var notificationBell = {
+  kind: "vector",
+  id: "notification-bell",
+  name: "Notification bell",
+  description: "A bell ringing with a damped swing and its clapper lagging behind, as a badge pops on with the unread count.",
+  category: "icon",
+  tags: ["notification", "bell", "alert", "badge", "ui", "loop"],
+  hold: 300,
+  presets: [
+    { name: "Dark", values: { bell: [0.9, 0.91, 0.94], ring: [0.06, 0.07, 0.1] } },
+    { name: "Many", values: { count: 128 } }
+  ],
+  derived: (v) => {
+    const count = Math.max(0, Math.round(Number(v.count) || 0));
+    const many = count > 99;
+    const digits = many ? 3 : String(count).length;
+    return {
+      from: many ? 99 : Math.max(0, count - 1),
+      to: many ? 99 : count,
+      format: many ? "{n}+" : "{n}",
+      size: digits >= 3 ? 9 : digits === 2 ? 11 : 13,
+      badgeR: digits >= 3 ? 15 : 13
+    };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 100 100" font-family="${SANS13}"><!-- {{count: int min=0 max=999 default=3 label='Count'}} {{bell: color default=#334155 label='Bell'}} {{badge: color default=#EF4444 label='Badge'}} {{ring: color default=#FFFFFF label='Badge outline'}} --><g fill="none" stroke="{{bell}}" stroke-width="3.5" stroke-linecap="round"><path id="notificationBellWaveL" d="M20 30 C14 38 14 50 20 58" opacity="0"/><path id="notificationBellWaveR" d="M80 30 C86 38 86 50 80 58" opacity="0"/></g><g id="notificationBellClapper" transform="${bellTurn(0)}"><circle cx="50" cy="80" r="7" fill="{{bell}}"/></g><g id="notificationBellBody" transform="${bellTurn(0)}"><circle cx="50" cy="15" r="5" fill="{{bell}}"/><path d="M50 18 C36 18 30 30 30 44 V58 L23 68 V72 H77 V68 L70 58 V44 C70 30 64 18 50 18Z" fill="{{bell}}"/></g><g id="notificationBellBadge" transform="${about6(BADGE[0], BADGE[1], 0)}"><circle cx="${BADGE[0]}" cy="${BADGE[1]}" r="{{badgeR}}" fill="{{badge}}" stroke="{{ring}}" stroke-width="3"/><text id="notificationBellCount" x="${BADGE[0]}" y="${BADGE[1] + 4.5}" text-anchor="middle" font-size="{{size}}" font-weight="800" fill="#FFFFFF">0</text></g></svg>`,
+    animate: [
+      ...BELL_SWING.slice(1).map((deg, k) => ({ id: "notificationBellBody", attrs: { transform: [bellTurn(BELL_SWING[k]), bellTurn(deg)] }, delay: k * 120, ms: 120, ease: "in-out" })),
+      ...CLAPPER_SWING.slice(1).map((deg, k) => ({ id: "notificationBellClapper", attrs: { transform: [bellTurn(CLAPPER_SWING[k]), bellTurn(deg)] }, delay: 50 + k * 120, ms: 120, ease: "in-out" })),
+      ...["L", "R"].flatMap((side, k) => [
+        { id: `notificationBellWave${side}`, attrs: { opacity: [0, 1] }, delay: 80 + k * 120, ms: 120 },
+        { id: `notificationBellWave${side}`, attrs: { opacity: [1, 0] }, delay: 420 + k * 120, ms: 260 }
+      ]),
+      { id: "notificationBellBadge", attrs: { transform: [about6(BADGE[0], BADGE[1], 0), about6(BADGE[0], BADGE[1], 1.25)] }, delay: 300, ms: 180, ease: "out" },
+      { id: "notificationBellBadge", attrs: { transform: [about6(BADGE[0], BADGE[1], 1.25), about6(BADGE[0], BADGE[1], 1)] }, delay: 480, ms: 200, ease: "in-out" },
+      { id: "notificationBellCount", count: [n16("from"), n16("to")], format: "{{format}}", delay: 300, ms: 350, ease: "out" },
+      // The badge goes before the loop starts over, so it can pop on again.
+      { id: "notificationBellBadge", attrs: { transform: [about6(BADGE[0], BADGE[1], 1), about6(BADGE[0], BADGE[1], 0)] }, delay: 2400, ms: 220, ease: "in-out" }
+    ]
+  }
+};
+var ARROW_MS = 1200;
+var refreshArc = (() => {
+  const r = 26;
+  const end = -40 * Math.PI / 180;
+  const [ex, ey] = [50 + r * Math.cos(end), 50 + r * Math.sin(end)];
+  const [tx, ty] = [-Math.sin(end), Math.cos(end)];
+  const [nx, ny] = [Math.cos(end), Math.sin(end)];
+  const tip = `${r115(ex + tx * 7)} ${r115(ey + ty * 7)}`;
+  const head = `M${r115(ex + nx * 7)} ${r115(ey + ny * 7)} L${tip} L${r115(ex - nx * 7)} ${r115(ey - ny * 7)}Z`;
+  return { arc: `M24 50 A${r} ${r} 0 0 1 ${r115(ex)} ${r115(ey)}`, head };
+})();
+var animatedArrows = {
+  kind: "vector",
+  id: "animated-arrows",
+  name: "Animated arrows",
+  description: "An arrow icon set: an arrow nudging right, chevrons cascading down, refresh arrows turning, or an external-link arrow leaving its box.",
+  category: "icon",
+  tags: ["arrow", "chevron", "refresh", "link", "ui", "loop"],
+  // Every arrow's motion is over by 1000 ms: each rests the same before it repeats.
+  hold: ARROW_MS - 1e3,
+  presets: [
+    { name: "Scroll hint", values: { kind: 1, color: [0.39, 0.4, 0.95] } },
+    { name: "Refresh", values: { kind: 2 } }
+  ],
+  derived: picks("kind", 4),
+  motion: {
+    svg: `<svg viewBox="0 0 100 100"><!-- {{kind: int min=0 max=3 default=0 label='Arrow (right, chevrons, refresh, external)'}} {{color: color default=#0F172A label='Colour'}} {{width: float min=2 max=12 default=7 step=0.5 label='Stroke width'}} --><g fill="none" stroke="{{color}}" stroke-width="{{width}}" stroke-linecap="round" stroke-linejoin="round"><g display="{{show0}}"><g id="animatedArrowsRight" transform="translate(0 0)"><path d="M20 50 H76 M56 30 L76 50 L56 70"/></g></g><g display="{{show1}}">${[0, 1, 2].map((k) => `<path id="animatedArrowsChevron${k}" d="M32 ${24 + k * 18} L50 ${38 + k * 18} L68 ${24 + k * 18}" opacity="0.2"/>`).join("")}</g><g display="{{show2}}"><g id="animatedArrowsRefresh" transform="rotate(0 50 50)">${[0, 180].map((deg) => `<g transform="rotate(${deg} 50 50)"><path d="${refreshArc.arc}"/><path d="${refreshArc.head}" fill="{{color}}" stroke-width="2"/></g>`).join("")}</g></g><g display="{{show3}}"><path d="M54 22 H32 C26 22 22 26 22 32 V68 C22 74 26 78 32 78 H68 C74 78 78 74 78 68 V46"/><g id="animatedArrowsExternal" transform="translate(0 0)"><path d="M46 54 L76 24 M56 24 H76 V44"/></g></g></g></svg>`,
+    animate: [
+      { id: "animatedArrowsRight", attrs: { transform: ["translate(0 0)", "translate(9 0)"] }, ms: 380, ease: "out" },
+      { id: "animatedArrowsRight", attrs: { transform: ["translate(9 0)", "translate(0 0)"] }, delay: 380, ms: 520, ease: "in-out" },
+      ...[0, 1, 2].flatMap((k) => [
+        { id: `animatedArrowsChevron${k}`, attrs: { opacity: [0.2, 1], transform: ["translate(0 0)", "translate(0 3)"] }, delay: k * 180, ms: 260, ease: "out" },
+        { id: `animatedArrowsChevron${k}`, attrs: { opacity: [1, 0.2], transform: ["translate(0 3)", "translate(0 0)"] }, delay: k * 180 + 300, ms: 420, ease: "in-out" }
+      ]),
+      // Two arrows round the circle: half a turn brings it back to how it started.
+      { id: "animatedArrowsRefresh", attrs: { transform: ["rotate(0 50 50)", "rotate(180 50 50)"] }, ms: 1e3, ease: "in-out" },
+      { id: "animatedArrowsExternal", attrs: { transform: ["translate(0 0)", "translate(10 -10)"], opacity: [1, 0] }, delay: 100, ms: 360, ease: "in-out" },
+      { id: "animatedArrowsExternal", attrs: { transform: ["translate(-10 10)", "translate(0 0)"], opacity: [0, 1] }, delay: 520, ms: 420, ease: "out" }
+    ]
+  }
+};
+var EMOJI_Y = 40;
+var emojiX = (i) => 30 + i * 44;
+var emojiPose = (i, dy, s) => `translate(${emojiX(i)} ${EMOJI_Y}) translate(0 ${dy}) scale(${s})`;
+var FACES = [
+  // Like: a thumb up on a blue disc.
+  `<circle r="17" fill="{{like}}"/><path d="M-8 -1 H-4 V9 H-8Z M-2 -1 L2 -9 C3.5 -10.5 6.5 -9 5.8 -6.3 L4.8 -2.5 H8.5 C10.4 -2.5 11.4 -0.6 10.8 1.2 L8.8 7.5 C8.3 9 7.2 9.6 5.8 9.6 H-2Z" fill="#FFFFFF"/>`,
+  // Love: a heart on a red disc.
+  `<circle r="17" fill="{{love}}"/><path d="M0 9 C0 9 -9.5 3 -9.5 -2.8 C-9.5 -6 -7.3 -8.2 -4.6 -8.2 C-2.6 -8.2 -0.9 -7.1 0 -5.5 C0.9 -7.1 2.6 -8.2 4.6 -8.2 C7.3 -8.2 9.5 -6 9.5 -2.8 C9.5 3 0 9 0 9Z" fill="#FFFFFF"/>`,
+  // Haha: shut eyes and a wide open laugh.
+  `<circle r="17" fill="{{face}}"/><path d="M-10 -6 L-5 -3.5 L-10 -1 M10 -6 L5 -3.5 L10 -1" fill="none" stroke="{{features}}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M-9 2 H9 C9 8.5 5 12 0 12 C-5 12 -9 8.5 -9 2Z" fill="{{features}}"/>`,
+  // Wow: raised brows, round eyes and mouth.
+  `<circle r="17" fill="{{face}}"/><path d="M-9 -9 Q-6 -11.5 -3 -9.5 M9 -9 Q6 -11.5 3 -9.5" fill="none" stroke="{{features}}" stroke-width="1.8" stroke-linecap="round"/><ellipse cx="-5.5" cy="-3.5" rx="2.2" ry="3" fill="{{features}}"/><ellipse cx="5.5" cy="-3.5" rx="2.2" ry="3" fill="{{features}}"/><ellipse cx="0" cy="7.5" rx="4" ry="5" fill="{{features}}"/>`,
+  // Sad: a frown and a tear.
+  `<circle r="17" fill="{{face}}"/><circle cx="-5.5" cy="-3" r="2.2" fill="{{features}}"/><circle cx="5.5" cy="-3" r="2.2" fill="{{features}}"/><path d="M-6 9.5 Q0 3.5 6 9.5" fill="none" stroke="{{features}}" stroke-width="2" stroke-linecap="round"/><path d="M-6 1 C-4.5 3.5 -4 4.8 -4 5.8 A2 2 0 0 1 -8 5.8 C-8 4.8 -7.5 3.5 -6 1Z" fill="#38BDF8"/>`,
+  // Angry: a red-orange face with knitted brows.
+  `<circle r="17" fill="{{angry}}"/><path d="M-10 -8 L-3 -4.5 M10 -8 L3 -4.5" stroke="{{features}}" stroke-width="2.2" stroke-linecap="round"/><circle cx="-5" cy="-1" r="2" fill="{{features}}"/><circle cx="5" cy="-1" r="2" fill="{{features}}"/><path d="M-6 10 Q0 5.5 6 10" fill="none" stroke="{{features}}" stroke-width="2" stroke-linecap="round"/>`
+];
+var emojiReactions = {
+  kind: "vector",
+  id: "emoji-reactions",
+  name: "Emoji reactions",
+  description: "A reaction picker: on hover the bar opens and like, love, haha, wow, sad and angry faces bounce up one after another, drawn as vectors.",
+  category: "icon",
+  tags: ["interactive", "hover", "emoji", "reactions", "social", "ui"],
+  trigger: "hover",
+  hold: 600,
+  presets: [{ name: "Dark", values: { pill: [0.13, 0.14, 0.19], button: [0.6, 0.63, 0.7] } }],
+  motion: {
+    svg: `<svg viewBox="0 0 280 80"><!-- {{pill: color default=#FFFFFF label='Bar'}} {{button: color default=#64748B label='Button icon'}} {{face: color default=#FBBF24 label='Faces'}} {{features: color default=#5B3A00 label='Eyes and mouths'}} {{like: color default=#2563EB label='Like'}} {{love: color default=#F43F5E label='Love'}} {{angry: color default=#F97316 label='Angry'}} --><rect id="emojiReactionsShadow" x="8" y="17" width="52" height="52" rx="26" fill="#000000" opacity="0.1"/><rect id="emojiReactionsPill" x="6" y="14" width="52" height="52" rx="26" fill="{{pill}}" stroke="#000000" stroke-opacity="0.08"/><g id="emojiReactionsButton" fill="none" stroke="{{button}}" stroke-width="2.2" stroke-linecap="round"><circle cx="30" cy="40" r="11"/><circle cx="26" cy="37" r="0.8" fill="{{button}}"/><circle cx="34" cy="37" r="0.8" fill="{{button}}"/><path d="M25.5 43.5 Q30 47 34.5 43.5"/></g>${FACES.map(
+      (face, i) => `<g id="emojiReactionsFace${i}" transform="${emojiPose(i, 14, 0)}">${face}</g>`
+    ).join("")}</svg>`,
+    animate: [
+      { id: "emojiReactionsPill", attrs: { width: [52, 268] }, ms: 280, ease: "out" },
+      { id: "emojiReactionsShadow", attrs: { width: [52, 268] }, ms: 280, ease: "out" },
+      { id: "emojiReactionsButton", attrs: { opacity: [1, 0] }, ms: 120 },
+      ...FACES.flatMap((_, i) => [
+        { id: `emojiReactionsFace${i}`, attrs: { transform: [emojiPose(i, 14, 0), emojiPose(i, -9, 1.15)] }, delay: 90 + i * 70, ms: 200, ease: "out" },
+        { id: `emojiReactionsFace${i}`, attrs: { transform: [emojiPose(i, -9, 1.15), emojiPose(i, 0, 1)] }, delay: 290 + i * 70, ms: 200, ease: "in-out" }
+      ])
+    ]
+  }
+};
+var STARS3 = 5;
+var STAR = { y: 32, r: 16, inner: 7, pitch: 38, first: 22 };
+var starX = (i) => STAR.first + i * STAR.pitch;
+var starPath2 = (cx) => `M${Array.from({ length: 10 }, (_, k) => {
+  const a = k * Math.PI / 5 - Math.PI / 2;
+  const r = k % 2 ? STAR.inner : STAR.r;
+  return `${r115(cx + r * Math.cos(a))} ${r115(STAR.y + 1.5 + r * Math.sin(a))}`;
+}).join(" L")}Z`;
+var bookmarkStar = {
+  kind: "vector",
+  id: "bookmark-star",
+  name: "Star rating",
+  description: "Five stars that fill one after another on hover, each bouncing as it fills (halves too), while the rating counts up beside them.",
+  category: "icon",
+  tags: ["interactive", "hover", "rating", "stars", "review", "ui"],
+  trigger: "hover",
+  hold: 600,
+  presets: [
+    { name: "Half", values: { rating: 3.5 } },
+    { name: "Dark", values: { empty: [0.28, 0.31, 0.37], ink: [0.94, 0.95, 0.97] } }
+  ],
+  derived: (v) => {
+    const rating = Math.min(STARS3, Math.max(0, Math.round((Number(v.rating) || 0) * 2) / 2));
+    return {
+      rating,
+      ...Object.fromEntries(
+        Array.from({ length: STARS3 }, (_, i) => {
+          const f = Math.min(1, Math.max(0, rating - i));
+          return [
+            [`w${i}`, r115(f * STAR.r * 2)],
+            [`pop${i}`, about6(starX(i), STAR.y, f > 0 ? 1.22 : 1)]
+          ];
+        }).flat()
+      )
+    };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 260 64" font-family="${SANS13}"><!-- {{rating: float min=0 max=5 default=4.5 step=0.5 label='Rating'}} {{star: color default=#FBBF24 label='Filled'}} {{empty: color default=#CBD5E1 label='Empty'}} {{ink: color default=#0F172A label='Text'}} --><defs>${Array.from(
+      { length: STARS3 },
+      (_, i) => `<clipPath id="bookmarkStarClip${i}"><rect id="bookmarkStarFill${i}" x="${starX(i) - STAR.r}" y="${STAR.y - STAR.r - 2}" width="0" height="${STAR.r * 2 + 6}"/></clipPath>`
+    ).join("")}</defs>${Array.from(
+      { length: STARS3 },
+      (_, i) => `<g id="bookmarkStarStar${i}" transform="${about6(starX(i), STAR.y, 1)}"><path d="${starPath2(starX(i))}" fill="{{empty}}" stroke="{{empty}}" stroke-width="2" stroke-linejoin="round"/><path d="${starPath2(starX(i))}" fill="{{star}}" stroke="{{star}}" stroke-width="2" stroke-linejoin="round" clip-path="url(#bookmarkStarClip${i})"/></g>`
+    ).join("")}<text id="bookmarkStarValue" x="202" y="38.5" font-size="16" font-weight="700" fill="{{ink}}" opacity="0">0.0</text></svg>`,
+    animate: [
+      ...Array.from({ length: STARS3 }, (_, i) => [
+        { id: `bookmarkStarFill${i}`, attrs: { width: [0, n16(`w${i}`)] }, delay: i * 110, ms: 160, ease: "linear" },
+        { id: `bookmarkStarStar${i}`, attrs: { transform: [about6(starX(i), STAR.y, 1), `{{pop${i}}}`] }, delay: i * 110 + 60, ms: 130, ease: "out" },
+        { id: `bookmarkStarStar${i}`, attrs: { transform: [`{{pop${i}}}`, about6(starX(i), STAR.y, 1)] }, delay: i * 110 + 190, ms: 180, ease: "in-out" }
+      ]).flat(),
+      { id: "bookmarkStarValue", attrs: { opacity: [0, 1] }, ms: 200 },
+      { id: "bookmarkStarValue", count: [0, n16("rating")], decimals: 1, format: "{n} / 5", ms: STARS3 * 110 + 100, ease: "out" }
+    ]
+  }
+};
+var LID_HINGE = "76 30";
+var lid = (deg) => `rotate(${deg} ${LID_HINGE})`;
+var paperAt = (x, y, deg) => `translate(${x} ${y}) rotate(${deg})`;
+var canTilt = (deg) => `rotate(${deg} 50 88)`;
+var trashDelete = {
+  kind: "vector",
+  id: "trash-delete",
+  name: "Trash delete",
+  description: "A trash can whose lid flips open as a crumpled paper drops in, then snaps shut with a little wobble; replays on every click.",
+  category: "icon",
+  tags: ["interactive", "click", "delete", "trash", "remove", "ui"],
+  trigger: "click",
+  hold: 600,
+  presets: [
+    { name: "Danger", values: { color: [0.86, 0.15, 0.15] } },
+    { name: "Dark", values: { color: [0.9, 0.91, 0.94], paper: [0.6, 0.63, 0.7] } }
+  ],
+  motion: {
+    svg: `<svg viewBox="0 0 100 100"><!-- {{color: color default=#334155 label='Can'}} {{paper: color default=#F8FAFC label='Paper'}} {{width: float min=2 max=8 default=5 step=0.5 label='Stroke width'}} --><g id="trashDeletePaper" transform="${paperAt(38, 12, 0)}" opacity="0"><path d="M-9 -4 L-4 -10 L3 -8 L9 -3 L8 5 L2 9 L-6 8 L-10 2Z" fill="{{paper}}" stroke="{{color}}" stroke-width="2" stroke-linejoin="round"/><path d="M-4 -3 L2 1 M-2 5 L4 -2" stroke="{{color}}" stroke-width="1.4" stroke-linecap="round"/></g><g id="trashDeleteCan" transform="${canTilt(0)}" fill="none" stroke="{{color}}" stroke-width="{{width}}" stroke-linecap="round" stroke-linejoin="round"><path d="M30 36 L34 82 C34.4 86 36 88 40 88 H60 C64 88 65.6 86 66 82 L70 36"/><path d="M43 46 V76 M57 46 V76"/><g id="trashDeleteLid" transform="${lid(0)}"><path d="M24 30 H76 M42 30 V23 H58 V30"/></g></g></svg>`,
+    animate: [
+      { id: "trashDeleteLid", step: 1, attrs: { transform: [lid(0), lid(32)] }, ms: 220, ease: "out" },
+      { id: "trashDeletePaper", step: 1, attrs: { opacity: [0, 1] }, delay: 100, ms: 100 },
+      { id: "trashDeletePaper", step: 1, attrs: { transform: [paperAt(38, 12, 0), paperAt(48, 62, 160)] }, delay: 120, ms: 420, ease: "in-out" },
+      { id: "trashDeletePaper", step: 1, attrs: { opacity: [1, 0] }, delay: 430, ms: 110 },
+      { id: "trashDeleteLid", step: 1, attrs: { transform: [lid(32), lid(0)] }, delay: 540, ms: 170, ease: "in-out" },
+      { id: "trashDeleteLid", step: 1, attrs: { transform: [lid(0), lid(5)] }, delay: 710, ms: 80, ease: "out" },
+      { id: "trashDeleteLid", step: 1, attrs: { transform: [lid(5), lid(0)] }, delay: 790, ms: 120, ease: "in-out" },
+      { id: "trashDeleteCan", step: 1, attrs: { transform: [canTilt(0), canTilt(-5)] }, delay: 700, ms: 90, ease: "out" },
+      { id: "trashDeleteCan", step: 1, attrs: { transform: [canTilt(-5), canTilt(3)] }, delay: 790, ms: 120, ease: "in-out" },
+      { id: "trashDeleteCan", step: 1, attrs: { transform: [canTilt(3), canTilt(0)] }, delay: 910, ms: 140, ease: "in-out" },
+      // The paper, gone, goes back to the top for the next click.
+      { id: "trashDeletePaper", step: 1, attrs: { transform: [paperAt(38, 12, 0), paperAt(38, 12, 0)] }, delay: 1100, ms: 0 }
+    ]
+  }
+};
+var shackle = (y) => `translate(0 ${y})`;
+var keyPose = (deg, s) => `translate(50 66) rotate(${deg}) scale(${s})`;
+var lockUnlock = {
+  kind: "vector",
+  id: "lock-unlock",
+  name: "Lock and unlock",
+  description: "A padlock: a click turns a key and pops the shackle open as the lock turns green; the next click turns it back and snaps it shut.",
+  category: "icon",
+  tags: ["interactive", "click", "lock", "security", "toggle", "ui"],
+  trigger: "click",
+  hold: 600,
+  presets: [{ name: "Dark", values: { locked: [0.85, 0.87, 0.9], hole: [0.06, 0.07, 0.1] } }],
+  motion: {
+    svg: `<svg viewBox="0 0 100 100"><!-- {{locked: color default=#334155 label='Locked'}} {{open: color default=#16A34A label='Unlocked'}} {{hole: color default=#FFFFFF label='Keyhole'}} {{key: color default=#F59E0B label='Key'}} --><g id="lockUnlockShackle" transform="${shackle(0)}"><path id="lockUnlockLoop" d="M34 48 V34 C34 25 41 18 50 18 C59 18 66 25 66 34 V48" fill="none" stroke="{{locked}}" stroke-width="8"/></g><rect id="lockUnlockBody" x="22" y="44" width="56" height="44" rx="9" fill="{{locked}}"/><g id="lockUnlockHole" transform="rotate(0 50 66)"><circle cx="50" cy="62" r="5.5" fill="{{hole}}"/><path d="M47.5 64 H52.5 L53.5 75 H46.5Z" fill="{{hole}}"/></g><g id="lockUnlockKey" transform="${keyPose(0, 0.4)}" opacity="0"><rect x="-2.5" y="-6" width="5" height="10" fill="{{key}}"/><circle cy="-13" r="8" fill="none" stroke="{{key}}" stroke-width="4.5"/></g></svg>`,
+    animate: [
+      // Step 1, unlock: the key goes in and turns, the shackle springs up, and the lock goes green.
+      { id: "lockUnlockKey", step: 1, attrs: { opacity: [0, 1], transform: [keyPose(0, 0.4), keyPose(0, 1)] }, ms: 160, ease: "out" },
+      { id: "lockUnlockKey", step: 1, attrs: { transform: [keyPose(0, 1), keyPose(90, 1)] }, delay: 180, ms: 200, ease: "in-out" },
+      { id: "lockUnlockHole", step: 1, attrs: { transform: ["rotate(0 50 66)", "rotate(90 50 66)"] }, delay: 180, ms: 200, ease: "in-out" },
+      { id: "lockUnlockShackle", step: 1, attrs: { transform: [shackle(0), shackle(-16)] }, delay: 380, ms: 160, ease: "out" },
+      { id: "lockUnlockShackle", step: 1, attrs: { transform: [shackle(-16), shackle(-12)] }, delay: 540, ms: 180, ease: "in-out" },
+      { id: "lockUnlockBody", step: 1, attrs: { fill: ["{{locked}}", "{{open}}"] }, delay: 380, ms: 220 },
+      { id: "lockUnlockLoop", step: 1, attrs: { stroke: ["{{locked}}", "{{open}}"] }, delay: 380, ms: 220 },
+      { id: "lockUnlockKey", step: 1, attrs: { opacity: [1, 0] }, delay: 650, ms: 200 },
+      // Step 2, lock: the key turns back, the shackle drops shut with a bump.
+      { id: "lockUnlockKey", step: 2, attrs: { opacity: [0, 1], transform: [keyPose(90, 0.4), keyPose(90, 1)] }, ms: 160, ease: "out" },
+      { id: "lockUnlockKey", step: 2, attrs: { transform: [keyPose(90, 1), keyPose(0, 1)] }, delay: 180, ms: 200, ease: "in-out" },
+      { id: "lockUnlockHole", step: 2, attrs: { transform: ["rotate(90 50 66)", "rotate(0 50 66)"] }, delay: 180, ms: 200, ease: "in-out" },
+      { id: "lockUnlockShackle", step: 2, attrs: { transform: [shackle(-12), shackle(2)] }, delay: 380, ms: 150, ease: "in-out" },
+      { id: "lockUnlockShackle", step: 2, attrs: { transform: [shackle(2), shackle(0)] }, delay: 530, ms: 120, ease: "out" },
+      { id: "lockUnlockBody", step: 2, attrs: { fill: ["{{open}}", "{{locked}}"] }, delay: 400, ms: 220 },
+      { id: "lockUnlockLoop", step: 2, attrs: { stroke: ["{{open}}", "{{locked}}"] }, delay: 400, ms: 220 },
+      { id: "lockUnlockKey", step: 2, attrs: { opacity: [1, 0] }, delay: 650, ms: 200 },
+      { id: "lockUnlockKey", step: 2, attrs: { transform: [keyPose(0, 0.4), keyPose(0, 0.4)] }, delay: 900, ms: 0 }
+    ]
+  }
+};
+var WIFI = { cx: 50, cy: 80 };
+var wifiArc = (r) => {
+  const d = r * Math.SQRT1_2;
+  return `M${r115(WIFI.cx - d)} ${r115(WIFI.cy - d)} A${r} ${r} 0 0 1 ${r115(WIFI.cx + d)} ${r115(WIFI.cy - d)}`;
+};
+var WIFI_ARCS = [20, 36, 52];
+var wifiSignal = {
+  kind: "vector",
+  id: "wifi-signal",
+  name: "Wi-Fi signal",
+  description: "Wi-Fi bars filling one after another from the dot outward, pulsing twice at full strength, then fading to start again.",
+  category: "icon",
+  tags: ["wifi", "signal", "connection", "network", "status", "loop"],
+  hold: 200,
+  presets: [
+    { name: "Dark", values: { track: [0.2, 0.22, 0.27], color: [0.38, 0.65, 0.98] } }
+  ],
+  motion: {
+    svg: `<svg viewBox="0 0 100 100"><!-- {{color: color default=#2563EB label='Signal'}} {{track: color default=#E2E8F0 label='Empty bars'}} {{width: float min=4 max=12 default=9 step=0.5 label='Bar width'}} --><g fill="none" stroke="{{track}}" stroke-width="{{width}}" stroke-linecap="round">${WIFI_ARCS.map((r) => `<path d="${wifiArc(r)}"/>`).join("")}</g><circle cx="${WIFI.cx}" cy="${WIFI.cy}" r="6.5" fill="{{track}}"/><g id="wifiSignalOn"><circle id="wifiSignalDot" cx="${WIFI.cx}" cy="${WIFI.cy}" r="6.5" fill="{{color}}" opacity="0"/><g fill="none" stroke="{{color}}" stroke-width="{{width}}" stroke-linecap="round">${WIFI_ARCS.map((r, k) => `<path id="wifiSignalArc${k}" d="${wifiArc(r)}" opacity="0"/>`).join("")}</g></g></svg>`,
+    animate: [
+      { id: "wifiSignalDot", attrs: { opacity: [0, 1], r: [3, 6.5] }, ms: 220, ease: "out" },
+      ...WIFI_ARCS.map((_, k) => ({ id: `wifiSignalArc${k}`, attrs: { opacity: [0, 1] }, delay: 250 + k * 250, ms: 220, ease: "out" })),
+      ...[0, 1].flatMap((k) => swing("wifiSignalOn", "opacity", 1, 0.45, 600, 1150 + k * 600)),
+      // Fades out together, so the loop starts from empty again.
+      { id: "wifiSignalDot", attrs: { opacity: [1, 0], r: [6.5, 3] }, delay: 2600, ms: 300 },
+      ...WIFI_ARCS.map((_, k) => ({ id: `wifiSignalArc${k}`, attrs: { opacity: [1, 0] }, delay: 2600, ms: 300 }))
+    ]
+  }
+};
+var iconEffects = [weatherIcons, notificationBell, animatedArrows, emojiReactions, bookmarkStar, trashDelete, lockUnlock, wifiSignal];
+
 // src/catalog/index.ts
 var SHADER_EFFECTS = [
   meshGradient,
@@ -25197,6 +28413,7 @@ var SHADER_EFFECTS = [
   starfield,
   nebula,
   blackHole,
+  ...spaceShaders,
   synthwaveGrid,
   digitalRain,
   pixelSunset,
@@ -25234,9 +28451,12 @@ var SHADER_EFFECTS = [
   ...audioShaders,
   ...scrollShaders,
   ...uiShaders,
+  ...threeDShaders,
+  ...weatherShaders,
+  ...waterShaders,
   ...transitions
 ];
-var EFFECTS = [...SHADER_EFFECTS, ...vectorEffects, ...textEffects, ...morphEffects, ...interactionEffects, ...pyroEffects, ...timewarpEffects, ...meltEffects, ...electricEffects, ...pixelEffects, ...splatterEffects, ...bubbleEffects, ...stickerEffects, ...trailEffects, ...impactEffects, ...comicEffects, ...glowEffects, ...shadowEffects, ...lightingEffects, ...scrollEffects, ...broadcastEffects, ...annotationEffects, ...uiEffects, ...loaderEffects].sort(
+var EFFECTS = [...SHADER_EFFECTS, ...vectorEffects, ...textEffects, ...morphEffects, ...interactionEffects, ...pyroEffects, ...timewarpEffects, ...meltEffects, ...electricEffects, ...pixelEffects, ...splatterEffects, ...bubbleEffects, ...stickerEffects, ...trailEffects, ...impactEffects, ...comicEffects, ...glowEffects, ...shadowEffects, ...lightingEffects, ...scrollEffects, ...broadcastEffects, ...annotationEffects, ...uiEffects, ...loaderEffects, ...dataEffects, ...iconEffects].sort(
   (a, b) => EFFECT_CATEGORIES.indexOf(a.category) - EFFECT_CATEGORIES.indexOf(b.category)
 );
 var byId = new Map(EFFECTS.map((e) => [e.id, e]));
@@ -25312,4 +28532,4 @@ export {
   effectControls,
   effectDefaults
 };
-//# sourceMappingURL=chunk-7F4ITXGK.js.map
+//# sourceMappingURL=chunk-4FFBIVPI.js.map