@pixerate/flair 0.31.0 → 0.32.0

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

@@ -1671,6 +1671,9 @@ var EFFECT_CATEGORIES = [
   "broadcast",
   "annotation",
   "ui",
+  "3d",
+  "weather",
+  "water",
   "transition",
   "loader",
   "data",
@@ -22799,6 +22802,2185 @@ 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;
 function fit5(text, width, max, ems = textWidthEm(text)) {
@@ -25197,6 +27379,7 @@ var SHADER_EFFECTS = [
   starfield,
   nebula,
   blackHole,
+  ...spaceShaders,
   synthwaveGrid,
   digitalRain,
   pixelSunset,
@@ -25234,6 +27417,9 @@ 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(
@@ -25312,4 +27498,4 @@ export {
   effectControls,
   effectDefaults
 };
-//# sourceMappingURL=chunk-7F4ITXGK.js.map
+//# sourceMappingURL=chunk-RS2S2K5C.js.map