@pixerate/flair 0.7.0 → 0.9.0

package/dist/chunk-J2WIWT4J.js

@@ -1,2275 +0,0 @@
-import {
-  getTransitionGLSL
-} from "./chunk-EHDJ3CPJ.js";
-import {
-  checkControlValue,
-  controlFromDeclaration,
-  controlValue,
-  hexToRgb,
-  parseControls,
-  rgbToHex
-} from "./chunk-WC3VADZC.js";
-
-// src/catalog/glsl.ts
-var HASH = `
-float hash12(vec2 p) {
-  vec3 p3 = fract(vec3(p.xyx) * 0.1031);
-  p3 += dot(p3, p3.yzx + 33.33);
-  return fract((p3.x + p3.y) * p3.z);
-}
-vec2 hash22(vec2 p) {
-  vec3 p3 = fract(vec3(p.xyx) * vec3(0.1031, 0.1030, 0.0973));
-  p3 += dot(p3, p3.yzx + 33.33);
-  return fract((p3.xx + p3.yz) * p3.zy);
-}`.trim();
-var NOISE = `
-float vnoise(vec2 p) {
-  vec2 i = floor(p);
-  vec2 f = fract(p);
-  vec2 u = f * f * (3.0 - 2.0 * f);
-  float a = hash12(i);
-  float b = hash12(i + vec2(1.0, 0.0));
-  float c = hash12(i + vec2(0.0, 1.0));
-  float d = hash12(i + vec2(1.0, 1.0));
-  return mix(mix(a, b, u.x), mix(c, d, u.x), u.y);
-}`.trim();
-var FBM = `
-float fbm(vec2 p, int octaves) {
-  float sum = 0.0;
-  float amp = 0.5;
-  mat2 turn = mat2(0.8, 0.6, -0.6, 0.8);
-  for (int i = 0; i < 8; i++) {
-    if (i >= octaves) break;
-    sum += amp * vnoise(p);
-    p = turn * p * 2.02 + 17.0;
-    amp *= 0.5;
-  }
-  return sum;
-}`.trim();
-var PALETTE = `
-vec3 palette(float t, vec3 a, vec3 b, vec3 c, vec3 d) {
-  return a + b * cos(6.28318 * (c * t + d));
-}`.trim();
-var OKLAB_MIX = `
-vec3 toOklab(vec3 c) {
-  c = pow(max(c, 0.0), vec3(2.2));
-  vec3 lms = mat3(0.4122, 0.2119, 0.0883, 0.5363, 0.6807, 0.2817, 0.0514, 0.1074, 0.6300) * c;
-  lms = pow(lms, vec3(1.0 / 3.0));
-  return mat3(0.2105, 1.9780, 0.0259, 0.7936, -2.4286, 0.7828, -0.0041, 0.4506, -0.8087) * lms;
-}
-vec3 fromOklab(vec3 c) {
-  vec3 lms = mat3(1.0, 1.0, 1.0, 0.3963, -0.1056, -0.0895, 0.2158, -0.0639, -1.2915) * c;
-  lms = lms * lms * lms;
-  vec3 rgb = mat3(4.0767, -1.2684, -0.0042, -3.3077, 2.6098, -0.7034, 0.2310, -0.3413, 1.7076) * lms;
-  return pow(max(rgb, 0.0), vec3(1.0 / 2.2));
-}
-vec3 oklabMix(vec3 a, vec3 b, float t) {
-  return fromOklab(mix(toOklab(a), toOklab(b), t));
-}`.trim();
-var ROTATE = `
-mat2 rot(float a) {
-  float c = cos(a);
-  float s = sin(a);
-  return mat2(c, s, -s, c);
-}`.trim();
-function glsl(...parts) {
-  return parts.map((p) => p.trim()).join("\n\n") + "\n";
-}
-
-// src/catalog/shaders/gradients.ts
-var aurora = {
-  kind: "shader",
-  id: "aurora",
-  name: "Aurora",
-  description: "Soft curtains of light drifting over a night sky.",
-  category: "gradient",
-  tags: ["background", "hero", "calm", "night"],
-  source: glsl(
-    `// Aurora: curtains of light drifting over a night sky.
-uniform vec3 uSky;        // @control color default=#050816 label="Sky"
-uniform vec3 uGlowA;      // @control color default=#22D3A6 label="Glow A"
-uniform vec3 uGlowB;      // @control color default=#7C3AED label="Glow B"
-uniform float uSpeed;     // @control min=0 max=2 default=0.35 label="Speed"
-uniform float uIntensity; // @control min=0 max=2 default=1 label="Intensity"
-uniform float uHeight;    // @control min=0 max=1 default=0.55 label="Height"`,
-    HASH,
-    NOISE,
-    FBM,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 uv = fragCoord / iResolution.xy;
-  float t = iTime * uSpeed;
-  vec3 col = uSky * (0.6 + 0.4 * uv.y);
-  for (int i = 0; i < 3; i++) {
-    float fi = float(i);
-    float x = uv.x * (1.4 + 0.3 * fi) + fi * 3.7;
-    float wave = fbm(vec2(x * 1.5 + t * 0.4, t * 0.25 + fi), 4);
-    float centre = uHeight + 0.18 * (wave - 0.5) + 0.06 * fi;
-    float band = exp(-pow((uv.y - centre) * (7.0 + 2.0 * fi), 2.0));
-    float rays = 0.55 + 0.45 * fbm(vec2(x * 12.0, t * 0.6 + fi * 9.0), 3);
-    float above = smoothstep(centre - 0.05, centre + 0.35, uv.y) * 0.35;
-    vec3 glow = mix(uGlowA, uGlowB, clamp(uv.y * 1.4 - 0.2 + 0.25 * fi, 0.0, 1.0));
-    col += glow * (band * rays + above * band) * 0.6 * uIntensity;
-  }
-  float stars = step(0.997, hash12(floor(fragCoord * 0.5))) * smoothstep(0.3, 1.0, uv.y);
-  col += stars * 0.6 * (0.5 + 0.5 * sin(iTime * 3.0 + hash12(floor(fragCoord)) * 40.0));
-  fragColor = vec4(col, 1.0);
-}`
-  ),
-  presets: [
-    { name: "Arctic", values: { uGlowA: [0.13, 0.83, 0.65], uGlowB: [0.49, 0.23, 0.93] } },
-    { name: "Ember", values: { uSky: [0.06, 0.02, 0.03], uGlowA: [1, 0.45, 0.1], uGlowB: [0.9, 0.1, 0.4] } },
-    { name: "Ice", values: { uSky: [0.01, 0.03, 0.06], uGlowA: [0.5, 0.9, 1], uGlowB: [0.2, 0.4, 1] } }
-  ]
-};
-var meshGradient = {
-  kind: "shader",
-  id: "mesh-gradient",
-  name: "Mesh gradient",
-  description: "Four colours blended across a slowly warping mesh, mixed in Oklab.",
-  category: "gradient",
-  tags: ["background", "hero", "brand", "soft"],
-  source: glsl(
-    `// Mesh gradient: four colours on drifting points, blended in Oklab.
-uniform vec3 uColorA;  // @control color default=#FF6B6B label="Colour A"
-uniform vec3 uColorB;  // @control color default=#FFD93D label="Colour B"
-uniform vec3 uColorC;  // @control color default=#6BCB77 label="Colour C"
-uniform vec3 uColorD;  // @control color default=#4D96FF label="Colour D"
-uniform float uSpeed;  // @control min=0 max=2 default=0.3 label="Speed"
-uniform float uWarp;   // @control min=0 max=1 default=0.35 label="Warp"
-uniform float uGrain;  // @control min=0 max=0.2 default=0.04 label="Grain"`,
-    HASH,
-    NOISE,
-    OKLAB_MIX,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 uv = fragCoord / iResolution.xy;
-  float t = iTime * uSpeed;
-  vec2 w = uv + uWarp * 0.3 * vec2(vnoise(uv * 2.0 + t), vnoise(uv * 2.0 - t + 5.0)) - uWarp * 0.15;
-  vec2 pa = vec2(0.2, 0.2) + 0.15 * vec2(sin(t * 1.1), cos(t * 0.9));
-  vec2 pb = vec2(0.8, 0.25) + 0.15 * vec2(cos(t * 0.7), sin(t * 1.3));
-  vec2 pc = vec2(0.25, 0.8) + 0.15 * vec2(sin(t * 0.8 + 2.0), cos(t * 1.2));
-  vec2 pd = vec2(0.8, 0.8) + 0.15 * vec2(cos(t * 1.0 + 1.0), sin(t * 0.6));
-  vec4 d = vec4(distance(w, pa), distance(w, pb), distance(w, pc), distance(w, pd));
-  vec4 k = 1.0 / (d * d + 0.02);
-  k /= dot(k, vec4(1.0));
-  vec3 ab = oklabMix(uColorA, uColorB, k.y / max(k.x + k.y, 1e-4));
-  vec3 cd = oklabMix(uColorC, uColorD, k.w / max(k.z + k.w, 1e-4));
-  vec3 col = oklabMix(ab, cd, k.z + k.w);
-  col += (hash12(fragCoord + fract(iTime) * 100.0) - 0.5) * uGrain;
-  fragColor = vec4(col, 1.0);
-}`
-  ),
-  presets: [
-    { name: "Sunset", values: { uColorA: [1, 0.42, 0.42], uColorB: [1, 0.85, 0.24], uColorC: [0.9, 0.3, 0.6], uColorD: [0.36, 0.2, 0.7] } },
-    { name: "Lagoon", values: { uColorA: [0, 0.6, 0.7], uColorB: [0.5, 0.95, 0.85], uColorC: [0.1, 0.3, 0.6], uColorD: [0.85, 0.95, 1] } },
-    { name: "Mono", values: { uColorA: [0.1, 0.1, 0.12], uColorB: [0.3, 0.3, 0.34], uColorC: [0.2, 0.2, 0.24], uColorD: [0.6, 0.6, 0.65] } }
-  ]
-};
-var conicSweep = {
-  kind: "shader",
-  id: "conic-sweep",
-  name: "Conic sweep",
-  description: "A rotating conic gradient with a soft glowing core.",
-  category: "gradient",
-  tags: ["background", "spotlight", "brand"],
-  loop: 10,
-  source: glsl(
-    `// Conic sweep: a rotating conic gradient with a glowing core.
-uniform vec3 uColorA;  // @control color default=#0EA5E9 label="Colour A"
-uniform vec3 uColorB;  // @control color default=#A855F7 label="Colour B"
-uniform vec3 uColorC;  // @control color default=#F43F5E label="Colour C"
-uniform float uTurns;  // @control min=-3 max=3 default=1 step=1 label="Turns per loop"
-uniform float uCore;   // @control min=0 max=1 default=0.4 label="Core glow"
-uniform vec2 uCenter;  // @control min=-0.5 max=0.5 default=0,0 label="Centre"`,
-    OKLAB_MIX,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y - uCenter;
-  float a = atan(p.y, p.x) / 6.28318 + 0.5;
-  a = fract(a + iTime * uTurns / 10.0);
-  float s = a * 3.0;
-  vec3 col = s < 1.0 ? oklabMix(uColorA, uColorB, s)
-           : s < 2.0 ? oklabMix(uColorB, uColorC, s - 1.0)
-                     : oklabMix(uColorC, uColorA, s - 2.0);
-  float r = length(p);
-  col *= 0.75 + 0.25 * smoothstep(0.9, 0.0, r);
-  col += uCore * exp(-r * 6.0);
-  fragColor = vec4(col, 1.0);
-}`
-  )
-};
-var silk = {
-  kind: "shader",
-  id: "silk",
-  name: "Silk",
-  description: "Folds of glossy fabric rippling in a slow breeze.",
-  category: "gradient",
-  tags: ["background", "luxury", "soft"],
-  source: glsl(
-    `// Silk: glossy folds of fabric rippling slowly.
-uniform vec3 uBase;      // @control color default=#3B0764 label="Base"
-uniform vec3 uSheen;     // @control color default=#F0ABFC label="Sheen"
-uniform float uSpeed;    // @control min=0 max=2 default=0.4 label="Speed"
-uniform float uFolds;    // @control min=1 max=10 default=5 label="Folds"
-uniform float uGloss;    // @control min=0 max=2 default=1 label="Gloss"`,
-    ROTATE,
-    `float folds(vec2 p, float t) {
-  float h = 0.0;
-  for (int i = 1; i <= 4; i++) {
-    float fi = float(i);
-    h += sin(p.x * uFolds * fi * 0.7 + t * (1.0 + 0.3 * fi) + sin(p.y * 2.0 * fi + t)) / fi;
-  }
-  return h;
-}
-
-void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 p = rot(0.6) * (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
-  float t = iTime * uSpeed;
-  float e = 0.002;
-  float hx = (folds(p + vec2(e, 0.0), t) - folds(p - vec2(e, 0.0), t)) / (2.0 * e);
-  float hy = (folds(p + vec2(0.0, e), t) - folds(p - vec2(0.0, e), t)) / (2.0 * e);
-  vec3 n = normalize(vec3(-hx * 0.12, -hy * 0.12, 1.0));
-  vec3 l = normalize(vec3(-0.4, 0.6, 0.7));
-  float diff = clamp(dot(n, l), 0.0, 1.0);
-  float spec = pow(clamp(dot(reflect(-l, n), vec3(0.0, 0.0, 1.0)), 0.0, 1.0), 20.0) * uGloss;
-  vec3 col = uBase * (0.35 + 0.9 * diff) + uSheen * (spec + 0.12 * pow(diff, 6.0));
-  fragColor = vec4(col, 1.0);
-}`
-  ),
-  presets: [
-    { name: "Champagne", values: { uBase: [0.55, 0.42, 0.25], uSheen: [1, 0.95, 0.8] } },
-    { name: "Midnight", values: { uBase: [0.04, 0.08, 0.2], uSheen: [0.6, 0.75, 1] } }
-  ]
-};
-var duotoneFlow = {
-  kind: "shader",
-  id: "gradient-flow",
-  name: "Gradient flow",
-  description: "Two colours flowing through each other along a warped noise field.",
-  category: "gradient",
-  tags: ["background", "brand", "liquid"],
-  source: glsl(
-    `// Gradient flow: two colours flowing through a warped noise field.
-uniform vec3 uColorA;   // @control color default=#1E3A8A label="Colour A"
-uniform vec3 uColorB;   // @control color default=#F97316 label="Colour B"
-uniform float uSpeed;   // @control min=0 max=2 default=0.25 label="Speed"
-uniform float uScale;   // @control min=0.5 max=6 default=2 label="Scale"
-uniform float uContrast; // @control min=0.5 max=4 default=1.5 label="Contrast"`,
-    HASH,
-    NOISE,
-    FBM,
-    OKLAB_MIX,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 p = fragCoord / iResolution.y * uScale;
-  float t = iTime * uSpeed;
-  vec2 q = vec2(fbm(p + t, 4), fbm(p + vec2(5.2, 1.3) - t, 4));
-  float f = fbm(p + 3.0 * q + vec2(1.7, 9.2) + 0.5 * t, 5);
-  f = clamp((f - 0.5) * uContrast + 0.5, 0.0, 1.0);
-  fragColor = vec4(oklabMix(uColorA, uColorB, smoothstep(0.0, 1.0, f)), 1.0);
-}`
-  )
-};
-
-// src/catalog/images.ts
-function svgDataUrl(svg) {
-  const base64 = typeof btoa === "function" ? btoa(svg) : globalThis.Buffer.from(svg).toString("base64");
-  return `data:image/svg+xml;base64,${base64}`;
-}
-var LANDSCAPE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360">
-<defs><linearGradient id="s" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#3b4cb8"/><stop offset="1" stop-color="#ffa36b"/></linearGradient></defs>
-<rect width="640" height="360" fill="url(#s)"/>
-<circle cx="420" cy="170" r="62" fill="#ffe9b0"/>
-<path d="M0 250 Q120 190 240 240 T480 230 T640 220 V360 H0Z" fill="#2c4a52"/>
-<path d="M0 290 Q160 240 320 290 T640 280 V360 H0Z" fill="#1b2f33"/>
-<path d="M0 330 Q200 300 400 330 T640 325 V360 H0Z" fill="#0f1c1f"/>
-</svg>`;
-var CITY = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360">
-<rect width="640" height="360" fill="#0d1028"/>
-<circle cx="520" cy="80" r="34" fill="#f5f3d7"/>
-<g fill="#252a52"><rect x="20" y="170" width="70" height="190"/><rect x="110" y="120" width="60" height="240"/><rect x="190" y="200" width="80" height="160"/><rect x="290" y="90" width="55" height="270"/><rect x="365" y="160" width="90" height="200"/><rect x="475" y="130" width="60" height="230"/><rect x="555" y="190" width="70" height="170"/></g>
-<g fill="#ffcf5a"><rect x="125" y="140" width="8" height="8"/><rect x="150" y="170" width="8" height="8"/><rect x="305" y="110" width="8" height="8"/><rect x="320" y="150" width="8" height="8"/><rect x="380" y="180" width="8" height="8"/><rect x="420" y="220" width="8" height="8"/><rect x="490" y="150" width="8" height="8"/><rect x="40" y="200" width="8" height="8"/><rect x="215" y="230" width="8" height="8"/><rect x="575" y="215" width="8" height="8"/></g>
-</svg>`;
-var PORTRAIT = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360">
-<rect width="640" height="360" fill="#f2e6d8"/>
-<circle cx="320" cy="150" r="70" fill="#c98b6b"/>
-<path d="M190 360 Q200 240 320 240 Q440 240 450 360Z" fill="#33415c"/>
-<path d="M250 130 Q260 60 320 62 Q385 60 392 135 Q370 100 320 100 Q275 100 250 130Z" fill="#2b1d16"/>
-<circle cx="295" cy="150" r="6" fill="#2b1d16"/><circle cx="345" cy="150" r="6" fill="#2b1d16"/>
-<path d="M300 185 Q320 198 340 185" stroke="#7a3e2c" stroke-width="5" fill="none"/>
-</svg>`;
-var SAMPLE_IMAGES = {
-  landscape: svgDataUrl(LANDSCAPE),
-  city: svgDataUrl(CITY),
-  portrait: svgDataUrl(PORTRAIT)
-};
-
-// src/catalog/shaders/image.ts
-var PICTURE = `
-vec3 testCard(vec2 uv) {
-  vec3 sky = mix(vec3(0.98, 0.62, 0.42), vec3(0.24, 0.32, 0.72), uv.y);
-  float sun = smoothstep(0.16, 0.15, length((uv - vec2(0.65, 0.58)) * vec2(1.6, 1.0)));
-  float hills = step(uv.y, 0.32 + 0.06 * sin(uv.x * 9.0) + 0.04 * sin(uv.x * 23.0 + 1.0));
-  vec3 col = mix(sky, vec3(1.0, 0.92, 0.7), sun);
-  col = mix(col, vec3(0.12, 0.28, 0.24) + 0.08 * sin(uv.x * 40.0), hills);
-  vec2 grid = abs(fract(uv * 8.0) - 0.5);
-  col += 0.04 * step(0.48, max(grid.x, grid.y));
-  return col;
-}
-vec3 picture(sampler2D tex, vec2 uv) {
-  return textureSize(tex, 0).x > 1 ? texture(tex, uv).rgb : testCard(fract(uv));
-}`.trim();
-var imageRipple = {
-  kind: "shader",
-  id: "image-ripple",
-  name: "Ripple",
-  description: "An image rippling as if seen through water, from the pointer or the centre.",
-  category: "image",
-  tags: ["image", "water", "interactive", "distortion"],
-  source: glsl(
-    `// Ripple: an image rippling as if under water.
-uniform sampler2D uImage;  // @control filter=linear wrap=mirror default=${SAMPLE_IMAGES.landscape} label="Image"
-uniform float uAmplitude;  // @control min=0 max=0.05 default=0.012 label="Amplitude"
-uniform float uFrequency;  // @control min=5 max=80 default=30 label="Frequency"
-uniform float uSpeed;      // @control min=0 max=6 default=2 label="Speed"`,
-    PICTURE,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 uv = fragCoord / iResolution.xy;
-  vec2 centre = (iMouse.z > 0.0 ? iMouse.xy : 0.5 * iResolution.xy) / iResolution.xy;
-  vec2 d = uv - centre;
-  d.x *= iResolution.x / iResolution.y;
-  float r = length(d);
-  float wave = sin(r * uFrequency - iTime * uSpeed) * smoothstep(0.9, 0.0, r);
-  vec2 offset = normalize(d + 1e-5) * wave * uAmplitude;
-  vec3 col = picture(uImage, uv + offset);
-  col += 0.6 * max(wave, 0.0) * uAmplitude * 8.0;
-  fragColor = vec4(col, 1.0);
-}`
-  )
-};
-var imageGlitch = {
-  kind: "shader",
-  id: "image-glitch",
-  name: "Glitch",
-  description: "Digital glitch on an image: RGB split, slice displacement and blocky corruption in bursts.",
-  category: "image",
-  tags: ["image", "glitch", "cyber", "transition"],
-  source: glsl(
-    `// Glitch: RGB split, slice displacement and blocky corruption in bursts.
-uniform sampler2D uImage;  // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.landscape} label="Image"
-uniform float uAmount;     // @control min=0 max=1 default=0.5 label="Amount"
-uniform float uSplit;      // @control min=0 max=0.05 default=0.012 label="RGB split"
-uniform float uRate;       // @control min=0.5 max=12 default=4 label="Bursts per second"`,
-    HASH,
-    PICTURE,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 uv = fragCoord / iResolution.xy;
-  float tick = floor(iTime * uRate);
-  float burst = step(1.0 - uAmount * 0.6, hash12(vec2(tick, 1.0)));
-  float slice = floor(uv.y * mix(8.0, 40.0, hash12(vec2(tick, 2.0))));
-  float shift = (hash12(vec2(slice, tick)) - 0.5) * 0.15 * burst * step(0.6, hash12(vec2(slice, tick + 3.0)));
-  vec2 block = floor(uv * vec2(16.0, 9.0));
-  float corrupt = burst * step(0.97 - uAmount * 0.05, hash12(block + tick));
-  vec2 st = uv + vec2(shift, 0.0);
-  st = mix(st, floor(st * 24.0) / 24.0, corrupt);
-  float split = uSplit * (0.3 + burst);
-  vec3 col = vec3(
-    picture(uImage, st + vec2(split, 0.0)).r,
-    picture(uImage, st).g,
-    picture(uImage, st - vec2(split, 0.0)).b
-  );
-  col = mix(col, col.bgr, corrupt);
-  col *= 0.92 + 0.08 * sin(fragCoord.y * 2.0);
-  fragColor = vec4(col, 1.0);
-}`
-  )
-};
-var imageDuotone = {
-  kind: "shader",
-  id: "image-duotone",
-  name: "Duotone",
-  description: "An image mapped onto two colours, with a slow light sweep.",
-  category: "image",
-  tags: ["image", "brand", "editorial", "colour"],
-  source: glsl(
-    `// Duotone: an image mapped onto two colours, with a light sweep.
-uniform sampler2D uImage;  // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.landscape} label="Image"
-uniform vec3 uShadow;      // @control color default=#1E1B4B label="Shadows"
-uniform vec3 uHighlight;   // @control color default=#FB7185 label="Highlights"
-uniform float uContrast;   // @control min=0.5 max=3 default=1.2 label="Contrast"
-uniform float uSweep;      // @control min=0 max=1 default=0.3 label="Light sweep"`,
-    PICTURE,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 uv = fragCoord / iResolution.xy;
-  vec3 src = picture(uImage, uv);
-  float l = dot(src, vec3(0.2126, 0.7152, 0.0722));
-  l = clamp((l - 0.5) * uContrast + 0.5, 0.0, 1.0);
-  float sweep = exp(-pow((uv.x + uv.y * 0.4 - fract(iTime * 0.15) * 2.0 + 0.4) * 6.0, 2.0));
-  vec3 col = mix(uShadow, uHighlight, l) + sweep * uSweep;
-  fragColor = vec4(col, 1.0);
-}`
-  ),
-  presets: [
-    { name: "Spotify", values: { uShadow: [0.07, 0.1, 0.35], uHighlight: [0.12, 0.84, 0.38] } },
-    { name: "Newsprint", values: { uShadow: [0.1, 0.1, 0.1], uHighlight: [0.96, 0.94, 0.88] } }
-  ]
-};
-var imagePixelate = {
-  kind: "shader",
-  id: "image-pixelate",
-  name: "Pixel reveal",
-  description: "An image resolving from big blocks to full detail, then back, in a loop.",
-  category: "image",
-  tags: ["image", "reveal", "transition", "8-bit"],
-  loop: 4,
-  source: glsl(
-    `// Pixel reveal: an image resolving from blocks to full detail and back.
-uniform sampler2D uImage;  // @control filter=nearest wrap=clamp default=${SAMPLE_IMAGES.landscape} label="Image"
-uniform float uMaxBlock;   // @control min=4 max=128 default=48 label="Largest block (px)"
-uniform bool uAnimate;     // @control default=true label="Animate"
-uniform float uProgress;   // @control min=0 max=1 default=1 label="Detail (when still)"`,
-    PICTURE,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  float k = uAnimate ? 0.5 - 0.5 * cos(iTime * 6.28318 / 4.0) : uProgress;
-  float block = max(1.0, floor(mix(uMaxBlock, 1.0, k)));
-  vec2 cell = (floor(fragCoord / block) + 0.5) * block;
-  vec3 col = picture(uImage, cell / iResolution.xy);
-  fragColor = vec4(col, 1.0);
-}`
-  )
-};
-var imageHalftone = {
-  kind: "shader",
-  id: "image-halftone",
-  name: "Halftone",
-  description: "An image printed as rotated halftone dots, breathing slightly.",
-  category: "image",
-  tags: ["image", "print", "comic", "pop-art"],
-  source: glsl(
-    `// Halftone: an image as rotated print dots.
-uniform sampler2D uImage;  // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.landscape} label="Image"
-uniform vec3 uInk;         // @control color default=#111827 label="Ink"
-uniform vec3 uPaper;       // @control color default=#FEF3C7 label="Paper"
-uniform float uSpacing;    // @control min=3 max=30 default=8 label="Dot spacing (px)"
-uniform float uAngle;      // @control min=0 max=90 default=45 label="Screen angle (\xB0)"`,
-    PICTURE,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  float a = radians(uAngle);
-  mat2 r = mat2(cos(a), sin(a), -sin(a), cos(a));
-  vec2 q = r * fragCoord / uSpacing;
-  vec2 cell = floor(q) + 0.5;
-  vec2 centre = transpose(r) * cell * uSpacing;
-  float l = dot(picture(uImage, centre / iResolution.xy), vec3(0.2126, 0.7152, 0.0722));
-  float radius = sqrt(1.0 - l) * 0.62 * (0.95 + 0.05 * sin(iTime * 2.0));
-  float d = length(q - cell);
-  float ink = smoothstep(radius + 0.06, radius - 0.06, d);
-  fragColor = vec4(mix(uPaper, uInk, ink), 1.0);
-}`
-  )
-};
-var crt = {
-  kind: "shader",
-  id: "crt",
-  name: "CRT screen",
-  description: "An image on a curved CRT: scanlines, shadow mask, bloom and flicker.",
-  category: "image",
-  tags: ["image", "retro", "screen", "arcade"],
-  source: glsl(
-    `// CRT screen: an image on a curved tube with scanlines and a shadow mask.
-uniform sampler2D uImage;   // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.landscape} label="Image"
-uniform float uCurve;       // @control min=0 max=0.5 default=0.15 label="Curvature"
-uniform float uScanlines;   // @control min=0 max=1 default=0.5 label="Scanlines"
-uniform float uMask;        // @control min=0 max=1 default=0.35 label="Shadow mask"
-uniform float uFlicker;     // @control min=0 max=0.2 default=0.03 label="Flicker"`,
-    HASH,
-    PICTURE,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 uv = fragCoord / iResolution.xy * 2.0 - 1.0;
-  uv *= 1.0 + uCurve * dot(uv.yx, uv.yx) * 0.5;
-  vec2 st = uv * 0.5 + 0.5;
-  if (st.x < 0.0 || st.x > 1.0 || st.y < 0.0 || st.y > 1.0) {
-    fragColor = vec4(0.0, 0.0, 0.0, 1.0);
-    return;
-  }
-  vec3 col = picture(uImage, st);
-  col += 0.25 * picture(uImage, st + vec2(0.003, 0.0)) * col;
-  float scan = 1.0 - uScanlines * 0.5 * (1.0 - cos(st.y * iResolution.y * 3.14159));
-  float m = mod(fragCoord.x, 3.0);
-  vec3 mask = mix(vec3(1.0), vec3(m < 1.0 ? 1.2 : 0.8, m >= 1.0 && m < 2.0 ? 1.2 : 0.8, m >= 2.0 ? 1.2 : 0.8), uMask);
-  col *= scan * mask;
-  col *= 1.0 - uFlicker * hash12(vec2(floor(iTime * 24.0), 0.0));
-  col *= smoothstep(1.0, 0.7, max(abs(uv.x), abs(uv.y)) * 0.98 + 0.02 * length(uv));
-  fragColor = vec4(col, 1.0);
-}`
-  )
-};
-var filmGrain = {
-  kind: "shader",
-  id: "film-look",
-  name: "Film look",
-  description: "An image graded like film: grain, gate weave, halation and vignette.",
-  category: "image",
-  tags: ["image", "cinematic", "grain", "vintage"],
-  source: glsl(
-    `// Film look: grain, gate weave, halation and vignette.
-uniform sampler2D uImage;   // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.landscape} label="Image"
-uniform float uGrain;       // @control min=0 max=0.3 default=0.08 label="Grain"
-uniform float uWeave;       // @control min=0 max=0.01 default=0.0015 label="Gate weave"
-uniform float uHalation;    // @control min=0 max=1 default=0.3 label="Halation"
-uniform float uVignette;    // @control min=0 max=1 default=0.45 label="Vignette"
-uniform vec3 uTint;         // @control color default=#FFF1DC label="Print tint"`,
-    HASH,
-    NOISE,
-    PICTURE,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 uv = fragCoord / iResolution.xy;
-  float frame = floor(iTime * 24.0);
-  uv += uWeave * (vec2(vnoise(vec2(frame * 0.3, 0.0)), vnoise(vec2(0.0, frame * 0.3))) - 0.5);
-  vec3 col = picture(uImage, uv);
-  vec3 blur = (picture(uImage, uv + vec2(0.006, 0.0)) + picture(uImage, uv - vec2(0.006, 0.0)) +
-               picture(uImage, uv + vec2(0.0, 0.006)) + picture(uImage, uv - vec2(0.0, 0.006))) * 0.25;
-  float bright = smoothstep(0.6, 1.0, dot(blur, vec3(0.333)));
-  col += vec3(1.0, 0.3, 0.1) * bright * uHalation * 0.5;
-  col *= uTint;
-  col += (hash12(fragCoord + frame * 31.7) - 0.5) * uGrain;
-  col *= 1.0 - uVignette * smoothstep(0.3, 0.9, length(uv - 0.5) * 1.3);
-  fragColor = vec4(col, 1.0);
-}`
-  )
-};
-var TRANSITIONS = [
-  { type: "linearWipe", id: "wipe", name: "Wipe", description: "A soft-edged wipe from one image to the next." },
-  { type: "radialIris", id: "iris", name: "Iris", description: "A circle opening from the centre onto the next image." },
-  { type: "blockDissolve", id: "block-dissolve", name: "Block dissolve", description: "Random blocks switching to the next image." },
-  { type: "gridWipe", id: "grid-wipe", name: "Grid wipe", description: "A diagonal cascade of cells revealing the next image." },
-  { type: "glassWipe", id: "glass-wipe", name: "Glass wipe", description: "A refracting glass edge sweeping across." },
-  { type: "twister", id: "twister", name: "Twister", description: "A swirl that twists one image into the next." },
-  { type: "lightLeak", id: "light-leak", name: "Light leak", description: "A warm flare of light burning through to the next image." },
-  { type: "crossZoom", id: "cross-zoom", name: "Cross zoom", description: "A zoom blur punching through to the next image." }
-];
-var transitions = TRANSITIONS.map(({ type, id, name, description }) => ({
-  kind: "shader",
-  id: `transition-${id}`,
-  name,
-  description: `${description} Loops back and forth; or turn Animate off and set Progress.`,
-  category: "transition",
-  tags: ["transition", "image", "slideshow"],
-  loop: 4,
-  source: glsl(
-    `// ${name} transition between two images. Progress runs 0 \u2192 1 \u2192 0 when animated.
-uniform sampler2D uFrom;   // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.landscape} label="From image"
-uniform sampler2D uTo;     // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.city} label="To image"
-uniform bool uAnimate;     // @control default=true label="Animate"
-uniform float uProgress;   // @control min=0 max=1 default=0.5 label="Progress (when still)"`,
-    getTransitionGLSL(type),
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 uv = fragCoord / iResolution.xy;
-  float p = uAnimate ? smoothstep(0.1, 0.9, 0.5 - 0.5 * cos(iTime * 6.28318 / 4.0)) : uProgress;
-  fragColor = vec4(flair_transition(uFrom, uTo, uv, p).rgb, 1.0);
-}`
-  )
-}));
-
-// src/catalog/shaders/light.ts
-var bokeh = {
-  kind: "shader",
-  id: "bokeh",
-  name: "Bokeh",
-  description: "Out-of-focus city lights drifting softly.",
-  category: "light",
-  tags: ["background", "festive", "dreamy", "night"],
-  source: glsl(
-    `// Bokeh: soft out-of-focus lights drifting.
-uniform vec3 uBackground;       // @control color default=#0B1026 label="Background"
-uniform float uBackgroundAlpha; // @control min=0 max=1 default=1 label="Background opacity"
-uniform vec3 uWarm;             // @control color default=#FFC56E label="Warm light"
-uniform vec3 uCool;             // @control color default=#6EC8FF label="Cool light"
-uniform int uCount;             // @control min=4 max=60 default=30 label="Lights"
-uniform float uSize;            // @control min=0.02 max=0.25 default=0.08 label="Size"
-uniform float uSpeed;           // @control min=0 max=1 default=0.15 label="Drift"`,
-    HASH,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 p = fragCoord / iResolution.y;
-  float aspect = iResolution.x / iResolution.y;
-  vec3 col = uBackground * (0.7 + 0.3 * fragCoord.y / iResolution.y) * uBackgroundAlpha;
-  float lightAlpha = 0.0;
-  for (int i = 0; i < 60; i++) {
-    if (i >= uCount) break;
-    float fi = float(i);
-    vec2 h = hash22(vec2(fi, 3.1));
-    float depth = hash12(vec2(fi, 9.7));
-    vec2 c = vec2(fract(h.x + iTime * uSpeed * (0.2 + depth) * 0.1) * (aspect + 0.4) - 0.2, h.y);
-    c.y += 0.03 * sin(iTime * 0.5 + fi);
-    float r = uSize * (0.5 + depth);
-    float d = length(p - c);
-    float disc = smoothstep(r, r * 0.85, d) * (0.6 + 0.4 * smoothstep(r * 0.4, r, d));
-    vec3 light = mix(uWarm, uCool, step(0.5, hash12(vec2(fi, 1.3))));
-    float weight = disc * (0.15 + 0.25 * (1.0 - depth));
-    col += light * weight;
-    lightAlpha += weight;
-  }
-  float a = clamp(uBackgroundAlpha + lightAlpha * (1.0 - uBackgroundAlpha), 0.0, 1.0);
-  fragColor = vec4(col, a);
-}`
-  )
-};
-var godRays = {
-  kind: "shader",
-  id: "god-rays",
-  name: "God rays",
-  description: "Shafts of light fanning down through haze.",
-  category: "light",
-  tags: ["background", "hero", "heavenly", "spotlight"],
-  source: glsl(
-    `// God rays: shafts of light fanning through haze.
-uniform vec3 uBackground; // @control color default=#0C0A09 label="Background"
-uniform vec3 uLight;      // @control color default=#FDE68A label="Light"
-uniform vec2 uSource;     // @control min=-1 max=1 default=0,0.6 label="Source"
-uniform float uRays;      // @control min=4 max=60 default=18 label="Rays"
-uniform float uSpeed;     // @control min=0 max=2 default=0.3 label="Speed"
-uniform float uStrength;  // @control min=0 max=2 default=1 label="Strength"`,
-    HASH,
-    NOISE,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
-  vec2 d = p - uSource * vec2(iResolution.x / iResolution.y, 1.0) * 0.5;
-  float a = atan(d.x, -d.y);
-  float r = length(d);
-  float t = iTime * uSpeed;
-  float rays = vnoise(vec2(a * uRays, t)) * 0.6 + vnoise(vec2(a * uRays * 2.3, -t * 1.3)) * 0.4;
-  rays = pow(rays, 2.0) * smoothstep(1.6, 0.0, r);
-  float glow = exp(-r * 4.0);
-  vec3 col = uBackground + uLight * (rays * 0.9 + glow * 0.8) * uStrength;
-  fragColor = vec4(col, 1.0);
-}`
-  )
-};
-var sparkles = {
-  kind: "shader",
-  id: "sparkles",
-  name: "Sparkles",
-  description: "Four-pointed glints twinkling on and off across the frame.",
-  category: "light",
-  tags: ["overlay", "magic", "celebration", "premium"],
-  source: glsl(
-    `// Sparkles: four-pointed glints twinkling across the frame.
-uniform vec3 uBackground;       // @control color default=#1E1B4B label="Background"
-uniform float uBackgroundAlpha; // @control min=0 max=1 default=1 label="Background opacity"
-uniform vec3 uSparkle;          // @control color default=#FFFFFF label="Sparkle"
-uniform float uDensity;         // @control min=2 max=30 default=10 label="Density"
-uniform float uChance;          // @control min=0.02 max=1 default=1 label="Sparsity"
-uniform float uSize;            // @control min=0.05 max=0.5 default=0.35 label="Size"
-uniform float uSpeed;           // @control min=0 max=4 default=1 label="Twinkle speed"`,
-    HASH,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 p = fragCoord / iResolution.y * uDensity;
-  float glint = 0.0;
-  for (int layer = 0; layer < 2; layer++) {
-    vec2 q = p * (1.0 + float(layer) * 0.6) + float(layer) * 7.3;
-    vec2 id = floor(q);
-    float keep = step(1.0 - uChance, hash12(id + 19.0 + float(layer) * 31.0));
-    vec2 f = fract(q) - 0.5;
-    vec2 o = hash22(id) - 0.5;
-    vec2 d = f - o * 0.6;
-    float phase = hash12(id + 4.0) * 6.28318;
-    float tw = pow(max(0.0, sin(iTime * uSpeed * 2.0 + phase)), 4.0);
-    float r = length(d);
-    float rays = max(0.0, 1.0 - abs(d.x * d.y) * 3000.0);
-    float core = 0.01 / (r + 0.01);
-    float star = (rays * 0.8 + core) * smoothstep(uSize, 0.0, r) * tw * keep;
-    glint += star;
-  }
-  vec3 col = uBackground * uBackgroundAlpha + uSparkle * glint;
-  float a = clamp(uBackgroundAlpha + glint * (1.0 - uBackgroundAlpha), 0.0, 1.0);
-  fragColor = vec4(col, a);
-}`
-  )
-};
-var neonRipple = {
-  kind: "shader",
-  id: "neon-ripple",
-  name: "Neon ripple",
-  description: "Glowing neon rings radiating out from the pointer or the centre.",
-  category: "light",
-  tags: ["interactive", "glow", "music", "pulse"],
-  loop: 2,
-  source: glsl(
-    `// Neon ripple: glowing rings radiating from the pointer (or the centre).
-uniform vec3 uBackground; // @control color default=#09090B label="Background"
-uniform vec3 uNeon;       // @control color default=#FF2BD6 label="Neon"
-uniform float uRings;     // @control min=1 max=10 default=4 label="Rings"
-uniform float uWidth;     // @control min=0.002 max=0.05 default=0.01 label="Width"
-uniform float uGlow;      // @control min=0 max=3 default=1 label="Glow"`,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 centre = iMouse.z > 0.0 ? iMouse.xy : 0.5 * iResolution.xy;
-  float r = length(fragCoord - centre) / iResolution.y;
-  float phase = fract(r * uRings - iTime * 0.5);
-  float ringDist = min(phase, 1.0 - phase) / uRings;
-  float fade = smoothstep(1.2, 0.0, r);
-  float core = smoothstep(uWidth, 0.0, ringDist);
-  float glow = uWidth * 2.0 / (ringDist + uWidth) * 0.25 * uGlow;
-  vec3 col = uBackground + uNeon * (core + glow) * fade;
-  fragColor = vec4(col, 1.0);
-}`
-  )
-};
-var starfield = {
-  kind: "shader",
-  id: "starfield",
-  name: "Warp starfield",
-  description: "Flying through a field of stars, from cruising to warp speed.",
-  category: "space",
-  tags: ["background", "space", "speed", "sci-fi"],
-  source: glsl(
-    `// Warp starfield: flying through layers of stars.
-uniform vec3 uBackground; // @control color default=#000005 label="Background"
-uniform vec3 uStar;       // @control color default=#E0E7FF label="Star"
-uniform float uSpeed;     // @control min=0 max=4 default=0.6 label="Speed"
-uniform float uStreak;    // @control min=0 max=1 default=0.3 label="Streak"
-uniform int uLayers;      // @control min=1 max=8 default=5 label="Layers"`,
-    HASH,
-    ROTATE,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
-  vec3 col = uBackground;
-  float n = float(uLayers);
-  for (int i = 0; i < 8; i++) {
-    if (i >= uLayers) break;
-    float depth = fract(float(i) / n + iTime * uSpeed * 0.1);
-    float scale = mix(20.0, 0.5, depth);
-    float fade = depth * smoothstep(1.0, 0.85, depth);
-    vec2 q = rot(float(i) * 1.7) * p * scale + float(i) * 13.1;
-    vec2 id = floor(q);
-    vec2 f = fract(q) - 0.5;
-    vec2 o = hash22(id) - 0.5;
-    vec2 d = f - o * 0.8;
-    vec2 dir = normalize(p + 1e-4);
-    float along = dot(d, dir);
-    float across = length(d - dir * along);
-    float len = 0.02 + uStreak * depth * 0.4;
-    float star = smoothstep(0.03, 0.0, across) * smoothstep(len, 0.0, abs(along));
-    star *= step(0.6, hash12(id + 2.0));
-    col += uStar * star * fade * 1.5;
-  }
-  fragColor = vec4(col, 1.0);
-}`
-  )
-};
-var nebula = {
-  kind: "shader",
-  id: "nebula",
-  name: "Nebula",
-  description: "Glowing gas clouds and stars drifting in deep space.",
-  category: "space",
-  tags: ["background", "space", "cosmic", "hero"],
-  source: glsl(
-    `// Nebula: glowing gas clouds over a field of stars.
-uniform vec3 uGasA;     // @control color default=#7C3AED label="Gas A"
-uniform vec3 uGasB;     // @control color default=#EC4899 label="Gas B"
-uniform vec3 uDeep;     // @control color default=#020010 label="Deep space"
-uniform float uSpeed;   // @control min=0 max=1 default=0.05 label="Drift"
-uniform float uDensity; // @control min=0 max=2 default=1 label="Density"`,
-    HASH,
-    NOISE,
-    FBM,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 p = fragCoord / iResolution.y * 2.0;
-  float t = iTime * uSpeed;
-  vec2 q = vec2(fbm(p + t, 5), fbm(p - t + 3.3, 5));
-  float gas = fbm(p * 1.3 + 2.5 * q, 6);
-  float dust = smoothstep(0.45, 0.75, fbm(p * 3.0 - q, 5));
-  vec3 col = uDeep;
-  col += uGasA * smoothstep(0.35, 0.8, gas) * uDensity;
-  col += uGasB * smoothstep(0.5, 0.9, gas * q.x * 1.6) * uDensity;
-  col *= 1.0 - 0.6 * dust;
-  float star = step(0.996, hash12(floor(fragCoord)));
-  float bright = step(0.9993, hash12(floor(fragCoord * 0.5) + 7.0));
-  col += vec3(star * 0.7 + bright * (0.8 + 0.2 * sin(iTime * 4.0 + fragCoord.x)));
-  fragColor = vec4(col, 1.0);
-}`
-  )
-};
-var blackHole = {
-  kind: "shader",
-  id: "event-horizon",
-  name: "Event horizon",
-  description: "A glowing accretion disc swirling into a black hole.",
-  category: "space",
-  tags: ["space", "dramatic", "vortex", "hero"],
-  source: glsl(
-    `// Event horizon: an accretion disc swirling into a black hole.
-uniform vec3 uHot;      // @control color default=#FFE4B5 label="Hot"
-uniform vec3 uDisc;     // @control color default=#FF6A00 label="Disc"
-uniform float uRadius;  // @control min=0.05 max=0.4 default=0.15 label="Horizon"
-uniform float uSpin;    // @control min=0 max=4 default=1 label="Spin"`,
-    HASH,
-    NOISE,
-    FBM,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
-  p.y *= 2.2;
-  float r = length(p);
-  float a = atan(p.y, p.x);
-  float swirl = a + uSpin * iTime * 0.5 + 1.5 / (r + 0.05);
-  float streaks = fbm(vec2(swirl * 3.0, r * 8.0), 5);
-  float disc = smoothstep(uRadius, uRadius * 1.6, r) * smoothstep(1.0, uRadius * 1.6, r);
-  vec3 col = mix(uDisc, uHot, smoothstep(0.5, 0.9, streaks) * smoothstep(0.6, 0.1, r));
-  col *= disc * (0.4 + 1.2 * streaks);
-  col += uHot * 0.6 * exp(-abs(r - uRadius * 1.05) * 60.0);
-  col *= smoothstep(uRadius * 0.95, uRadius * 1.05, r);
-  fragColor = vec4(col, 1.0);
-}`
-  )
-};
-var lightRibbons = {
-  kind: "shader",
-  id: "light-ribbons",
-  name: "Light ribbons",
-  description: "A bundle of thin iridescent light strands weaving across a dark frame.",
-  category: "light",
-  tags: ["background", "hero", "tech", "iridescent", "flow"],
-  source: glsl(
-    `// Light ribbons: thin glowing strands weaving across the frame, shading from one colour to the next.
-uniform vec3 uBackground; // @control color default=#05060D label="Background"
-uniform vec3 uColorA;     // @control color default=#4FD1FF label="Colour A"
-uniform vec3 uColorB;     // @control color default=#B06BFF label="Colour B"
-uniform vec3 uColorC;     // @control color default=#FF7AC6 label="Colour C"
-uniform float uCount;     // @control min=2 max=24 default=12 step=1 label="Strands"
-uniform float uSpread;    // @control min=0.02 max=0.6 default=0.18 label="Spread"
-uniform float uWave;      // @control min=0 max=0.5 default=0.22 label="Wave"
-uniform float uTilt;      // @control min=-1 max=1 default=0.3 label="Tilt"
-uniform float uSpeed;     // @control min=0 max=2 default=0.5 label="Speed"
-uniform float uGlow;      // @control min=0 max=2 default=1 label="Glow"`,
-    `// Three colours round a loop, so the shading drifts without a seam.
-vec3 shade(float g) {
-  g = fract(g) * 3.0;
-  return g < 1.0 ? mix(uColorA, uColorB, g) : g < 2.0 ? mix(uColorB, uColorC, g - 1.0) : mix(uColorC, uColorA, g - 2.0);
-}
-
-void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
-  float px = 1.0 / iResolution.y;
-  float t = iTime * uSpeed;
-  float halfWidth = 0.5 * iResolution.x / iResolution.y;
-  float x = p.x;
-  float y = p.y - x * uTilt;
-  // The bundle pinches and opens along its length, like ribbons twisting.
-  float pinch = 0.35 + 0.65 * abs(sin(x * 1.3 - t * 0.7));
-  vec3 light = vec3(0.0);
-  for (int i = 0; i < 24; i++) {
-    if (float(i) >= uCount) break;
-    float f = float(i) / max(uCount - 1.0, 1.0) - 0.5;
-    float centre = f * uSpread * pinch
-      + uWave * (0.6 * sin(x * 1.7 + t + f * 2.0) + 0.3 * sin(x * 3.3 - t * 1.3 + f * 5.0));
-    float d = abs(y - centre);
-    float core = 1.0 - smoothstep(0.0, px * 1.5, d);
-    float glow = uGlow * 0.006 / (d + 0.006);
-    light += shade(f * 0.6 + x * 0.12 + t * 0.05) * (core * 0.9 + glow * 0.4);
-  }
-  light *= 1.0 - 0.75 * pow(min(abs(x) / halfWidth, 1.0), 2.0);
-  fragColor = vec4(uBackground + (1.0 - exp(-light)), 1.0);
-}`
-  ),
-  presets: [
-    { name: "Gold", values: { uBackground: [0.03, 0.03, 0.04], uColorA: [1, 0.78, 0.4], uColorB: [0.75, 0.5, 0.2], uColorC: [1, 0.93, 0.75], uCount: 8, uSpread: 0.4 } },
-    { name: "Aurora", values: { uColorA: [0.2, 1, 0.7], uColorB: [0.2, 0.6, 1], uColorC: [0.6, 0.3, 1], uTilt: -0.2, uWave: 0.3 } }
-  ]
-};
-
-// src/catalog/shaders/organic.ts
-var marble = {
-  kind: "shader",
-  id: "marble",
-  name: "Liquid marble",
-  description: "Veined marble swirling like ink in water (domain-warped noise).",
-  category: "organic",
-  tags: ["background", "ink", "liquid", "luxury"],
-  source: glsl(
-    `// Liquid marble: domain-warped noise swirling like ink in water.
-uniform vec3 uStone;    // @control color default=#F5F1E8 label="Stone"
-uniform vec3 uVein;     // @control color default=#1F2937 label="Vein"
-uniform vec3 uAccent;   // @control color default=#B08D57 label="Accent"
-uniform float uSpeed;   // @control min=0 max=1 default=0.15 label="Speed"
-uniform float uScale;   // @control min=0.5 max=6 default=2.5 label="Scale"
-uniform float uWarp;    // @control min=0 max=8 default=4 label="Warp"`,
-    HASH,
-    NOISE,
-    FBM,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 p = fragCoord / iResolution.y * uScale;
-  float t = iTime * uSpeed;
-  vec2 q = vec2(fbm(p + vec2(0.0, t), 5), fbm(p + vec2(5.2, 1.3 - t), 5));
-  vec2 r = vec2(fbm(p + uWarp * q + vec2(1.7, 9.2) + 0.3 * t, 5), fbm(p + uWarp * q + vec2(8.3, 2.8), 5));
-  float f = fbm(p + uWarp * r, 5);
-  float vein = 1.0 - smoothstep(0.0, 0.06, abs(sin(f * 12.0 + r.x * 6.0)));
-  vec3 col = mix(uStone, uStone * 0.85, length(q) * 0.6);
-  col = mix(col, uAccent, smoothstep(0.55, 0.9, r.y) * 0.5);
-  col = mix(col, uVein, vein * 0.85);
-  fragColor = vec4(col, 1.0);
-}`
-  ),
-  presets: [
-    { name: "Nero", values: { uStone: [0.08, 0.08, 0.09], uVein: [0.9, 0.88, 0.82], uAccent: [0.7, 0.55, 0.3] } },
-    { name: "Jade", values: { uStone: [0.18, 0.45, 0.35], uVein: [0.85, 0.95, 0.88], uAccent: [0.05, 0.2, 0.15] } }
-  ]
-};
-var smoke = {
-  kind: "shader",
-  id: "smoke",
-  name: "Smoke",
-  description: "Billowing smoke or cloud drifting upwards.",
-  category: "organic",
-  tags: ["background", "atmosphere", "cloud", "mist"],
-  source: glsl(
-    `// Smoke: billowing fractal noise drifting upwards.
-uniform vec3 uBackground; // @control color default=#0B0F19 label="Background"
-uniform vec3 uSmoke;      // @control color default=#CBD5E1 label="Smoke"
-uniform float uSpeed;     // @control min=0 max=2 default=0.3 label="Speed"
-uniform float uDensity;   // @control min=0 max=2 default=1 label="Density"
-uniform int uDetail;      // @control min=1 max=8 default=6 label="Detail"`,
-    HASH,
-    NOISE,
-    FBM,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 p = fragCoord / iResolution.y * 3.0;
-  float t = iTime * uSpeed;
-  p.y -= t;
-  float n = fbm(p + fbm(p + vec2(t * 0.3, 0.0), uDetail), uDetail);
-  float body = smoothstep(0.35, 0.85, n) * uDensity;
-  float fade = smoothstep(0.0, 0.7, fragCoord.y / iResolution.y + 0.2);
-  vec3 col = mix(uBackground, uSmoke, clamp(body * fade, 0.0, 1.0));
-  fragColor = vec4(col, 1.0);
-}`
-  )
-};
-var lavaLamp = {
-  kind: "shader",
-  id: "lava-lamp",
-  name: "Lava lamp",
-  description: "Soft metaballs merging and parting as they rise and fall.",
-  category: "organic",
-  tags: ["background", "playful", "blobs", "retro"],
-  source: glsl(
-    `// Lava lamp: metaballs merging as they rise and fall.
-uniform vec3 uBackground; // @control color default=#1A0B2E label="Background"
-uniform vec3 uBlobA;      // @control color default=#FF5E8A label="Blob A"
-uniform vec3 uBlobB;      // @control color default=#FFB347 label="Blob B"
-uniform int uCount;       // @control min=2 max=12 default=7 label="Blobs"
-uniform float uSpeed;     // @control min=0 max=2 default=0.5 label="Speed"
-uniform float uSize;      // @control min=0.02 max=0.3 default=0.12 label="Size"`,
-    HASH,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 p = fragCoord / iResolution.y;
-  float aspect = iResolution.x / iResolution.y;
-  float t = iTime * uSpeed;
-  float field = 0.0;
-  float tint = 0.0;
-  for (int i = 0; i < 12; i++) {
-    if (i >= uCount) break;
-    float fi = float(i);
-    vec2 seed = hash22(vec2(fi, 7.0));
-    vec2 c = vec2(seed.x * aspect, 0.5 + 0.45 * sin(t * (0.4 + seed.y) + fi * 2.1));
-    c.x += 0.1 * sin(t * 0.7 + fi);
-    float r = uSize * (0.7 + 0.6 * seed.y);
-    float k = r * r / dot(p - c, p - c);
-    field += k;
-    tint += k * seed.x;
-  }
-  float inside = smoothstep(0.9, 1.1, field);
-  vec3 blob = mix(uBlobA, uBlobB, clamp(tint / max(field, 1e-3), 0.0, 1.0));
-  blob *= 0.85 + 0.15 * smoothstep(1.0, 3.0, field);
-  vec3 col = mix(uBackground, blob, inside);
-  col += blob * 0.15 * smoothstep(0.3, 0.9, field) * (1.0 - inside);
-  fragColor = vec4(col, 1.0);
-}`
-  )
-};
-var plasma = {
-  kind: "shader",
-  id: "plasma",
-  name: "Plasma",
-  description: "The demoscene classic: interfering sine waves through a colour palette.",
-  category: "organic",
-  tags: ["background", "retro", "psychedelic", "loop"],
-  loop: 6.28318,
-  source: glsl(
-    `// Plasma: interfering sine waves through a cosine palette.
-uniform float uScale;   // @control min=1 max=20 default=8 label="Scale"
-uniform float uShift;   // @control min=0 max=1 default=0 label="Hue shift"
-uniform vec3 uPhase;    // @control min=0 max=1 default=0,0.33,0.67 label="Palette phase"`,
-    PALETTE,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y * uScale;
-  float t = iTime;
-  float v = sin(p.x + t);
-  v += sin((p.y + t) * 0.5);
-  v += sin((p.x + p.y + t) * 0.5);
-  vec2 c = p + vec2(sin(t * 0.5), cos(t * 0.5)) * uScale * 0.3;
-  v += sin(sqrt(dot(c, c) + 1.0) + t);
-  vec3 col = palette(v * 0.25 + uShift, vec3(0.5), vec3(0.5), vec3(1.0), uPhase);
-  fragColor = vec4(col, 1.0);
-}`
-  )
-};
-var caustics = {
-  kind: "shader",
-  id: "caustics",
-  name: "Caustics",
-  description: "Light dancing on the floor of a swimming pool.",
-  category: "organic",
-  tags: ["background", "water", "summer", "calm"],
-  source: glsl(
-    `// Caustics: light dancing on the floor of a pool.
-uniform vec3 uWater;    // @control color default=#0369A1 label="Water"
-uniform vec3 uLight;    // @control color default=#E0F2FE label="Light"
-uniform float uSpeed;   // @control min=0 max=2 default=0.5 label="Speed"
-uniform float uScale;   // @control min=1 max=10 default=4 label="Scale"
-uniform float uBright;  // @control min=0 max=2 default=1 label="Brightness"`,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  // After Dave Hoskins' "Tileable water caustic".
-  vec2 uv = fragCoord / iResolution.y * uScale * 0.25;
-  float t = iTime * uSpeed * 0.5 + 23.0;
-  vec2 p = mod(uv * 6.28318, 6.28318) - 250.0;
-  vec2 i = p;
-  float c = 1.0;
-  float inten = 0.005;
-  for (int n = 0; n < 5; n++) {
-    float tn = t * (1.0 - 3.5 / float(n + 1));
-    i = p + vec2(cos(tn - i.x) + sin(tn + i.y), sin(tn - i.y) + cos(tn + i.x));
-    c += 1.0 / length(vec2(p.x / (sin(i.x + tn) / inten), p.y / (cos(i.y + tn) / inten)));
-  }
-  c /= 5.0;
-  c = 1.17 - pow(c, 1.4);
-  float light = pow(abs(c), 8.0) * uBright;
-  vec3 col = uWater + uLight * clamp(light, 0.0, 1.5);
-  fragColor = vec4(col, 1.0);
-}`
-  )
-};
-var flames = {
-  kind: "shader",
-  id: "flames",
-  name: "Flames",
-  description: "A wall of fire licking upwards from the bottom edge.",
-  category: "organic",
-  tags: ["fire", "energy", "hot", "overlay"],
-  source: glsl(
-    `// Flames: a wall of fire licking upwards.
-uniform vec3 uHot;      // @control color default=#FFF3B0 label="Hot"
-uniform vec3 uMid;      // @control color default=#FF7A00 label="Mid"
-uniform vec3 uCool;     // @control color default=#7A0000 label="Cool"
-uniform float uSpeed;   // @control min=0 max=3 default=1.2 label="Speed"
-uniform float uHeight;  // @control min=0.1 max=1.5 default=0.7 label="Height"`,
-    HASH,
-    NOISE,
-    FBM,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 uv = fragCoord / iResolution.xy;
-  vec2 p = vec2(fragCoord.x / iResolution.y, uv.y);
-  float t = iTime * uSpeed;
-  float n = fbm(vec2(p.x * 4.0, p.y * 3.0 - t * 1.5), 5);
-  float heat = (1.0 - uv.y / uHeight) + (n - 0.5) * 1.1;
-  heat = clamp(heat, 0.0, 1.0);
-  vec3 col = mix(vec3(0.0), uCool, smoothstep(0.05, 0.3, heat));
-  col = mix(col, uMid, smoothstep(0.3, 0.6, heat));
-  col = mix(col, uHot, smoothstep(0.6, 0.95, heat));
-  fragColor = vec4(col, 1.0);
-}`
-  ),
-  presets: [
-    { name: "Spirit", values: { uHot: [0.85, 1, 1], uMid: [0.2, 0.6, 1], uCool: [0.05, 0.05, 0.4] } },
-    { name: "Toxic", values: { uHot: [0.95, 1, 0.7], uMid: [0.4, 0.95, 0.2], uCool: [0.05, 0.25, 0.05] } }
-  ]
-};
-
-// src/catalog/shaders/patterns.ts
-var dotWave = {
-  kind: "shader",
-  id: "dot-wave",
-  name: "Dot wave",
-  description: "A halftone grid of dots swelling in a travelling wave.",
-  category: "pattern",
-  tags: ["background", "halftone", "tech", "minimal"],
-  loop: 4,
-  source: glsl(
-    `// Dot wave: a grid of dots swelling in a travelling wave.
-uniform vec3 uBackground; // @control color default=#0F172A label="Background"
-uniform vec3 uDot;        // @control color default=#38BDF8 label="Dot"
-uniform float uSpacing;   // @control min=8 max=64 default=22 label="Spacing (px)"
-uniform float uWaves;     // @control min=0.5 max=6 default=2 label="Waves"
-uniform bool uRadial;     // @control default=true label="Radial"`,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 cell = floor(fragCoord / uSpacing);
-  vec2 local = fract(fragCoord / uSpacing) - 0.5;
-  vec2 centre = (cell + 0.5) * uSpacing;
-  vec2 p = (centre - 0.5 * iResolution.xy) / iResolution.y;
-  float d = uRadial ? length(p) : p.x + p.y * 0.3;
-  float phase = d * uWaves * 6.28318 - iTime * 6.28318 / 4.0;
-  float size = 0.1 + 0.32 * (0.5 + 0.5 * sin(phase));
-  float aa = 1.5 / uSpacing;
-  float disc = 1.0 - smoothstep(size - aa, size + aa, length(local));
-  vec3 col = mix(uBackground, uDot * (0.6 + 0.4 * size / 0.42), disc);
-  fragColor = vec4(col, 1.0);
-}`
-  )
-};
-var truchet = {
-  kind: "shader",
-  id: "truchet",
-  name: "Truchet flow",
-  description: "Quarter-circle Truchet tiles forming endless winding paths, with light flowing along them.",
-  category: "pattern",
-  tags: ["background", "maze", "geometric", "tech"],
-  source: glsl(
-    `// Truchet flow: winding quarter-circle tiles with light flowing along them.
-uniform vec3 uBackground; // @control color default=#111827 label="Background"
-uniform vec3 uLine;       // @control color default=#F472B6 label="Line"
-uniform float uTiles;     // @control min=3 max=30 default=10 label="Tiles"
-uniform float uWidth;     // @control min=0.02 max=0.3 default=0.1 label="Line width"
-uniform float uSpeed;     // @control min=0 max=3 default=1 label="Flow speed"`,
-    HASH,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 p = fragCoord / iResolution.y * uTiles;
-  vec2 id = floor(p);
-  vec2 f = fract(p) - 0.5;
-  float flip = hash12(id) > 0.5 ? 1.0 : -1.0;
-  f.x *= flip;
-  vec2 c = f.x > -f.y ? vec2(0.5) : vec2(-0.5);
-  vec2 q = f - c;
-  float d = abs(length(q) - 0.5);
-  float angle = atan(q.y, q.x);
-  float checker = mod(id.x + id.y, 2.0) * 2.0 - 1.0;
-  float flow = 0.5 + 0.5 * sin(angle * 4.0 * checker * flip + iTime * uSpeed * 4.0);
-  float line = 1.0 - smoothstep(uWidth - 0.02, uWidth, d);
-  vec3 col = mix(uBackground, uLine * (0.45 + 0.75 * flow), line);
-  fragColor = vec4(col, 1.0);
-}`
-  )
-};
-var hexPulse = {
-  kind: "shader",
-  id: "hex-pulse",
-  name: "Hex pulse",
-  description: "A honeycomb grid lighting up cell by cell in ripples.",
-  category: "pattern",
-  tags: ["background", "tech", "honeycomb", "sci-fi"],
-  source: glsl(
-    `// Hex pulse: a honeycomb grid lighting up in ripples.
-uniform vec3 uBackground; // @control color default=#020617 label="Background"
-uniform vec3 uEdge;       // @control color default=#22D3EE label="Edge"
-uniform vec3 uFill;       // @control color default=#0E7490 label="Fill"
-uniform float uCells;     // @control min=3 max=40 default=12 label="Cells"
-uniform float uSpeed;     // @control min=0 max=3 default=1 label="Speed"`,
-    HASH,
-    `vec4 hexCoords(vec2 p) {
-  vec2 r = vec2(1.0, 1.7320508);
-  vec2 h = r * 0.5;
-  vec2 a = mod(p, r) - h;
-  vec2 b = mod(p - h, r) - h;
-  vec2 gv = dot(a, a) < dot(b, b) ? a : b;
-  return vec4(gv, p - gv);
-}
-
-void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y * uCells;
-  vec4 h = hexCoords(p);
-  vec2 gv = abs(h.xy);
-  float edgeDist = 0.5 - max(dot(gv, normalize(vec2(1.0, 1.7320508))), gv.x);
-  float ripple = 0.5 + 0.5 * sin(length(h.zw) * 0.6 - iTime * uSpeed * 3.0);
-  float spark = step(0.92, hash12(h.zw + floor(iTime * uSpeed * 2.0)));
-  float lit = clamp(pow(ripple, 6.0) + spark * 0.6, 0.0, 1.0);
-  vec3 col = mix(uBackground, uFill, lit * smoothstep(0.0, 0.1, edgeDist));
-  col = mix(col, uEdge, (1.0 - smoothstep(0.0, 0.04, edgeDist)) * (0.3 + 0.7 * ripple));
-  fragColor = vec4(col, 1.0);
-}`
-  )
-};
-var moire = {
-  kind: "shader",
-  id: "moire",
-  name: "Moir\xE9 rings",
-  description: "Two sets of concentric rings sliding over each other into shimmering interference.",
-  category: "pattern",
-  tags: ["background", "op-art", "hypnotic", "minimal"],
-  source: glsl(
-    `// Moir\xE9 rings: two ring sets interfering as they slide.
-uniform vec3 uInk;      // @control color default=#111111 label="Ink"
-uniform vec3 uPaper;    // @control color default=#F5F5F0 label="Paper"
-uniform float uRings;   // @control min=10 max=200 default=80 label="Rings"
-uniform float uDrift;   // @control min=0 max=0.5 default=0.15 label="Drift"`,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
-  vec2 o = uDrift * vec2(sin(iTime * 0.4), cos(iTime * 0.3));
-  float a = sin(length(p - o) * uRings);
-  float b = sin(length(p + o) * uRings);
-  float v = smoothstep(-0.2, 0.2, a * b);
-  fragColor = vec4(mix(uInk, uPaper, v), 1.0);
-}`
-  )
-};
-var barberStripes = {
-  kind: "shader",
-  id: "stripes",
-  name: "Stripes",
-  description: "Diagonal stripes marching across, for progress bars, banners and warnings.",
-  category: "pattern",
-  tags: ["progress", "banner", "warning", "loop"],
-  loop: 1,
-  source: glsl(
-    `// Stripes: diagonal stripes marching across.
-uniform vec3 uColorA;   // @control color default=#FACC15 label="Colour A"
-uniform vec3 uColorB;   // @control color default=#18181B label="Colour B"
-uniform float uWidth;   // @control min=4 max=120 default=28 label="Stripe width (px)"
-uniform float uAngle;   // @control min=-90 max=90 default=45 label="Angle (\xB0)"
-uniform float uSoft;    // @control min=0 max=1 default=0.05 label="Softness"`,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  float a = radians(uAngle);
-  float d = dot(fragCoord, vec2(cos(a), sin(a))) / (uWidth * 2.0);
-  float s = fract(d - iTime);
-  float edge = max(uSoft * 0.5, 0.5 / uWidth);
-  float m = smoothstep(0.5 - edge, 0.5 + edge, s) - smoothstep(1.0 - edge, 1.0, s) + (1.0 - smoothstep(0.0, edge, s));
-  fragColor = vec4(mix(uColorA, uColorB, clamp(m, 0.0, 1.0)), 1.0);
-}`
-  )
-};
-var voronoi = {
-  kind: "shader",
-  id: "voronoi",
-  name: "Living cells",
-  description: "Voronoi cells drifting and dividing, like a microscope slide.",
-  category: "pattern",
-  tags: ["background", "biology", "cells", "organic"],
-  source: glsl(
-    `// Living cells: drifting Voronoi cells with glowing walls.
-uniform vec3 uBackground; // @control color default=#052E16 label="Background"
-uniform vec3 uCell;       // @control color default=#4ADE80 label="Cell"
-uniform vec3 uWall;       // @control color default=#DCFCE7 label="Wall"
-uniform float uScale;     // @control min=2 max=20 default=6 label="Scale"
-uniform float uSpeed;     // @control min=0 max=2 default=0.5 label="Speed"`,
-    HASH,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 p = fragCoord / iResolution.y * uScale;
-  vec2 i = floor(p);
-  vec2 f = fract(p);
-  float d1 = 8.0;
-  float d2 = 8.0;
-  float shade = 0.0;
-  for (int y = -1; y <= 1; y++) {
-    for (int x = -1; x <= 1; x++) {
-      vec2 g = vec2(float(x), float(y));
-      vec2 o = hash22(i + g);
-      o = 0.5 + 0.4 * sin(iTime * uSpeed + 6.28318 * o);
-      float d = length(g + o - f);
-      if (d < d1) { d2 = d1; d1 = d; shade = hash12(i + g); }
-      else if (d < d2) { d2 = d; }
-    }
-  }
-  float wall = 1.0 - smoothstep(0.0, 0.08, d2 - d1);
-  vec3 col = mix(uBackground, uCell * (0.4 + 0.6 * shade), smoothstep(0.9, 0.1, d1));
-  col = mix(col, uWall, wall);
-  fragColor = vec4(col, 1.0);
-}`
-  )
-};
-var kaleidoscope = {
-  kind: "shader",
-  id: "kaleidoscope",
-  name: "Kaleidoscope",
-  description: "Mirrored wedges of shifting colour turning around the centre.",
-  category: "pattern",
-  tags: ["psychedelic", "music", "symmetry"],
-  source: glsl(
-    `// Kaleidoscope: mirrored wedges of shifting colour.
-uniform int uSegments;  // @control min=2 max=16 default=8 label="Segments"
-uniform float uZoom;    // @control min=0.5 max=8 default=3 label="Zoom"
-uniform float uSpeed;   // @control min=0 max=2 default=0.4 label="Speed"
-uniform vec3 uTint;     // @control color default=#FFFFFF label="Tint"`,
-    ROTATE,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
-  float t = iTime * uSpeed;
-  float n = float(uSegments);
-  float a = atan(p.y, p.x) + t * 0.3;
-  float r = length(p);
-  float wedge = 6.28318 / n;
-  a = mod(a, wedge);
-  a = abs(a - wedge * 0.5);
-  vec2 q = vec2(cos(a), sin(a)) * r * uZoom;
-  q = rot(t * 0.2) * q + t;
-  vec3 col = 0.5 + 0.5 * cos(vec3(0.0, 2.0, 4.0) + q.x * 2.0 + sin(q.y * 3.0) + t);
-  col *= 0.6 + 0.4 * sin(q.x * 5.0) * sin(q.y * 5.0);
-  col *= smoothstep(1.2, 0.2, r);
-  fragColor = vec4(col * uTint, 1.0);
-}`
-  )
-};
-var neonCircuit = {
-  kind: "shader",
-  id: "neon-circuit",
-  name: "Neon circuit",
-  description: "Glowing neon traces routed up a circuit board, with pulses of light racing along them.",
-  category: "pattern",
-  tags: ["background", "neon", "circuit", "tech", "80s", "vaporwave"],
-  source: glsl(
-    `// Neon circuit: glowing traces climbing a board in rounded jogs, with pulses running along them.
-uniform vec3 uBackground; // @control color default=#170A2E label="Background"
-uniform vec3 uColorA;     // @control color default=#FF5FA2 label="Trace A"
-uniform vec3 uColorB;     // @control color default=#43E5FF label="Trace B"
-uniform vec3 uColorC;     // @control color default=#FFD23F label="Trace C"
-uniform vec3 uColorD;     // @control color default=#9D7BFF label="Trace D"
-uniform float uLanes;     // @control min=4 max=40 default=14 label="Lanes"
-uniform float uDensity;   // @control min=0.1 max=1 default=0.7 label="Density"
-uniform float uWidth;     // @control min=0.04 max=0.4 default=0.16 label="Line width"
-uniform float uGlow;      // @control min=0 max=2 default=1 label="Glow"
-uniform float uSpeed;     // @control min=0 max=3 default=1 label="Pulse speed"
-uniform float uPulses;    // @control min=0 max=1 default=0.5 label="Pulses"
-uniform float uScroll;    // @control min=-2 max=2 default=0.4 label="Scroll"
-uniform float uGrid;      // @control min=0 max=1 default=0.3 label="Grid"`,
-    HASH,
-    `// Each trace k owns lanes 3k..3k+2 and climbs in runs of RUN lanes, jogging
-// sideways between them on rounded corners, so traces never cross.
-const float RUN = 2.5;
-const float RADIUS = 0.35;
-
-float laneOf(float k, float j) {
-  return 3.0 * k + floor(hash12(vec2(k, j) + 0.37) * 3.0) + 0.5;
-}
-
-vec3 traceColor(float k) {
-  float h = hash12(vec2(k, 7.3));
-  return h < 0.25 ? uColorA : h < 0.5 ? uColorB : h < 0.75 ? uColorC : uColorD;
-}
-
-// Distance to a quarter circle of RADIUS round c, in the quadrant whose signs are q.
-float arcDist(vec2 p, vec2 c, vec2 q) {
-  vec2 d = p - c;
-  return d.x * q.x >= 0.0 && d.y * q.y >= 0.0 ? abs(length(d) - RADIUS) : 1e5;
-}
-
-// Trace k's run j: distance from p to its climb (x) and how far up it p is (y), then
-// the same for its jog into run j + 1 (z, w), measured along the run.
-vec4 run(vec2 p, float k, float j) {
-  float x0 = laneOf(k, j - 1.0);
-  float x1 = laneOf(k, j);
-  float x2 = laneOf(k, j + 1.0);
-  float y0 = j * RUN;
-  float y1 = y0 + RUN;
-  float lo = y0 + (x0 == x1 ? 0.0 : RADIUS);
-  float hi = y1 - (x2 == x1 ? 0.0 : RADIUS);
-  vec4 r = vec4(length(p - vec2(x1, clamp(p.y, lo, hi))), p.y - y0, 1e5, 0.0);
-  if (x2 != x1) {
-    float sx = sign(x2 - x1);
-    float h = length(p - vec2(clamp(p.x, min(x1, x2) + RADIUS, max(x1, x2) - RADIUS), y1));
-    h = min(h, arcDist(p, vec2(x1 + sx * RADIUS, y1 - RADIUS), vec2(-sx, 1.0)));
-    h = min(h, arcDist(p, vec2(x2 - sx * RADIUS, y1 + RADIUS), vec2(sx, -1.0)));
-    r.zw = vec2(h, RUN + abs(p.x - x1));
-  }
-  return r;
-}
-
-// How bright a pulse is at s along run j of trace k: a bright head with a fading tail.
-// A pulse crosses one run per cycle and carries on into the next with the next cycle.
-float pulseAt(float k, float j, float s) {
-  float cycle = iTime * uSpeed * 1.5 + hash12(vec2(k, 8.8));
-  float behind = fract(cycle) * (RUN + abs(laneOf(k, j + 1.0) - laneOf(k, j))) - s;
-  float lit = step(hash12(vec2(k, floor(cycle) - j)), uPulses);
-  return lit * (behind >= 0.0 ? exp(-behind * 0.8) : exp(behind * 30.0));
-}
-
-void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  float px = uLanes / iResolution.y;
-  vec2 p = fragCoord * px;
-  p.y += iTime * uScroll;
-
-  vec2 g = abs(fract(p / 1.5) - 0.5);
-  float grid = 1.0 - smoothstep(0.0, px * 1.5, (0.5 - max(g.x, g.y)) * 1.5);
-  vec3 light = uColorD * 0.12 * uGrid * grid;
-
-  float home = floor(p.x / 3.0);
-  for (int i = -1; i <= 1; i++) {
-    float k = home + float(i);
-    if (hash12(vec2(k, 1.9)) > uDensity) continue;
-    vec2 q = vec2(p.x, p.y + hash12(vec2(k, 4.1)) * RUN);
-    float jq = floor(q.y / RUN);
-    float w = uWidth * 0.5;
-    // The trace's nearest point lights it; each piece's pulse lights only round that piece.
-    float d = 1e5;
-    float pulse = 0.0;
-    for (int b = -1; b <= 1; b++) {
-      float j = jq + float(b);
-      vec4 r = run(q, k, j);
-      d = min(d, min(r.x, r.z));
-      pulse = max(pulse, pulseAt(k, j, r.y) * exp(-r.x / uWidth));
-      if (r.z < 1e4) pulse = max(pulse, pulseAt(k, j, r.w) * exp(-r.z / uWidth));
-    }
-    float core = 1.0 - smoothstep(w - px, w + px, d);
-    float glow = uGlow * (0.5 * exp(-d / uWidth) + 0.2 * exp(-d / (uWidth * 5.0)));
-    vec3 c = traceColor(k);
-    light += c * (core * 0.8 + glow + uGlow * pulse) + mix(c, vec3(1.0), 0.7) * core * pulse * 3.0;
-  }
-  fragColor = vec4(uBackground + (1.0 - exp(-light * 1.4)), 1.0);
-}`
-  ),
-  presets: [
-    { name: "Mainframe", values: { uBackground: [0, 0.04, 0.02], uColorA: [0.2, 1, 0.45], uColorB: [0.1, 0.75, 0.35], uColorC: [0.6, 1, 0.7], uColorD: [0.1, 0.5, 0.25] } },
-    { name: "Blueprint", values: { uBackground: [0.02, 0.06, 0.16], uColorA: [0.35, 0.75, 1], uColorB: [0.6, 0.9, 1], uColorC: [1, 1, 1], uColorD: [0.25, 0.45, 0.9], uGlow: 0.6, uPulses: 0.3 } },
-    { name: "Dense", values: { uLanes: 26, uDensity: 1, uWidth: 0.12, uPulses: 0.8 } }
-  ]
-};
-
-// src/catalog/shaders/retro.ts
-var synthwaveGrid = {
-  kind: "shader",
-  id: "synthwave",
-  name: "Synthwave",
-  description: "A neon perspective grid racing towards a striped retro sun.",
-  category: "retro",
-  tags: ["background", "80s", "neon", "music", "loop"],
-  loop: 1,
-  source: glsl(
-    `// Synthwave: a neon grid racing towards a striped sun.
-uniform vec3 uSkyTop;    // @control color default=#12002B label="Sky top"
-uniform vec3 uSkyBottom; // @control color default=#7A1A6B label="Sky bottom"
-uniform vec3 uSunTop;    // @control color default=#FFE45E label="Sun top"
-uniform vec3 uSunBottom; // @control color default=#FF3D7F label="Sun bottom"
-uniform vec3 uGrid;      // @control color default=#00F0FF label="Grid"
-uniform float uHorizon;  // @control min=0.2 max=0.7 default=0.42 label="Horizon"`,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 uv = fragCoord / iResolution.xy;
-  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
-  float horizon = uHorizon - 0.5;
-  vec3 col;
-  if (p.y > horizon) {
-    float h = (p.y - horizon) / (0.5 - horizon);
-    col = mix(uSkyBottom, uSkyTop, h);
-    vec2 s = p - vec2(0.0, horizon + 0.18);
-    float sun = smoothstep(0.2, 0.195, length(s));
-    float bands = step(0.0, sin((s.y + 0.2) * 60.0 - 1.5)) + step(0.06, s.y);
-    sun *= clamp(bands, 0.0, 1.0);
-    col = mix(col, mix(uSunBottom, uSunTop, clamp(s.y / 0.2 * 0.5 + 0.5, 0.0, 1.0)), sun);
-    col += uSunBottom * 0.25 * exp(-length(s) * 4.0);
-  } else {
-    float depth = (horizon - p.y);
-    vec2 g = vec2(p.x / depth, 1.0 / depth);
-    g.y += iTime * 2.0;
-    vec2 grid = abs(fract(g * 0.5) - 0.5) / fwidth(g * 0.5);
-    float line = 1.0 - clamp(min(grid.x, grid.y), 0.0, 1.0);
-    float fade = smoothstep(0.0, 0.25, depth);
-    col = mix(uSkyTop * 0.4, uSkyBottom * 0.3, uv.y);
-    col += uGrid * line * fade + uGrid * 0.25 * exp(-depth * 20.0);
-  }
-  fragColor = vec4(col, 1.0);
-}`
-  )
-};
-var tvStatic = {
-  kind: "shader",
-  id: "tv-static",
-  name: "TV static",
-  description: "Analogue snow with rolling bars and scanlines.",
-  category: "retro",
-  tags: ["glitch", "analogue", "transition", "noise"],
-  source: glsl(
-    `// TV static: analogue snow with a rolling bar and scanlines.
-uniform float uAmount;    // @control min=0 max=1 default=0.9 label="Snow"
-uniform float uScanlines; // @control min=0 max=1 default=0.35 label="Scanlines"
-uniform float uRoll;      // @control min=0 max=1 default=0.3 label="Rolling bar"
-uniform vec3 uTint;       // @control color default=#E6E6E6 label="Tint"`,
-    HASH,
-    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 uv = fragCoord / iResolution.xy;
-  float n = hash12(floor(fragCoord * 0.5) + floor(iTime * 30.0) * 17.31);
-  float scan = 1.0 - uScanlines * 0.5 * (1.0 + sin(fragCoord.y * 3.14159));
-  float bar = 1.0 + uRoll * 0.6 * smoothstep(0.15, 0.0, abs(fract(uv.y - iTime * 0.2) - 0.5) - 0.3);
-  vec3 col = uTint * mix(0.5, n, uAmount) * scan * bar;
-  col *= smoothstep(1.2, 0.4, length(uv - 0.5) * 1.4);
-  fragColor = vec4(col, 1.0);
-}`
-  )
-};
-var digitalRain = {
-  kind: "shader",
-  id: "digital-rain",
-  name: "Digital rain",
-  description: "Columns of glyph-like characters raining down a terminal.",
-  category: "retro",
-  tags: ["hacker", "code", "tech", "cyber"],
-  source: glsl(
-    `// Digital rain: glyph-like cells raining down in columns.
-uniform vec3 uBackground; // @control color default=#000000 label="Background"
-uniform vec3 uGlyph;      // @control color default=#22FF66 label="Glyph"
-uniform float uCell;      // @control min=6 max=40 default=14 label="Cell size (px)"
-uniform float uSpeed;     // @control min=0 max=4 default=1 label="Speed"`,
-    HASH,
-    `float glyph(vec2 cell, vec2 f) {
-  vec2 g = floor(f * vec2(3.0, 5.0));
-  float on = step(0.45, hash12(g + cell * 13.7 + floor(iTime * 4.0 * hash12(cell))));
-  vec2 inset = abs(fract(f * vec2(3.0, 5.0)) - 0.5);
-  return on * step(max(inset.x, inset.y), 0.38);
-}
-
-void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 q = fragCoord / uCell;
-  vec2 cell = floor(q);
-  vec2 f = fract(q);
-  float col = cell.x;
-  float speed = (0.5 + hash12(vec2(col, 1.0))) * uSpeed * 8.0;
-  float offset = hash12(vec2(col, 2.0)) * 100.0;
-  float head = fract((iTime * speed + offset) / 40.0) * (iResolution.y / uCell + 30.0);
-  float y = iResolution.y / uCell - cell.y;
-  float trail = head - y;
-  float lit = trail >= 0.0 ? exp(-trail * 0.15) : 0.0;
-  float isHead = step(abs(trail), 0.5);
-  float g = glyph(cell, f);
-  vec3 c = uBackground + uGlyph * g * lit + vec3(0.8) * g * isHead;
-  fragColor = vec4(c, 1.0);
-}`
-  )
-};
-var pixelSunset = {
-  kind: "shader",
-  id: "dither-gradient",
-  name: "Dithered gradient",
-  description: "A 1-bit Bayer-dithered gradient wave, like an old Mac or Game Boy screen.",
-  category: "retro",
-  tags: ["pixel", "1-bit", "lo-fi", "background"],
-  source: glsl(
-    `// Dithered gradient: a Bayer-dithered gradient wave in two colours.
-uniform vec3 uDark;     // @control color default=#0F380F label="Dark"
-uniform vec3 uLight;    // @control color default=#9BBC0F label="Light"
-uniform float uPixel;   // @control min=1 max=12 default=4 step=1 label="Pixel size"
-uniform float uSpeed;   // @control min=0 max=2 default=0.5 label="Speed"`,
-    `float bayer4(vec2 p) {
-  vec2 q = mod(floor(p), 4.0);
-  int i = int(q.x) + int(q.y) * 4;
-  int m[16] = int[16](0, 8, 2, 10, 12, 4, 14, 6, 3, 11, 1, 9, 15, 7, 13, 5);
-  return (float(m[i]) + 0.5) / 16.0;
-}
-
-void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 px = floor(fragCoord / uPixel);
-  vec2 uv = px * uPixel / iResolution.xy;
-  float v = uv.y + 0.15 * sin(uv.x * 6.0 + iTime * uSpeed * 2.0) + 0.1 * sin(uv.x * 13.0 - iTime * uSpeed * 3.0);
-  v = clamp(v, 0.0, 1.0);
-  float on = step(bayer4(px), v);
-  fragColor = vec4(mix(uDark, uLight, on), 1.0);
-}`
-  ),
-  presets: [
-    { name: "Mac", values: { uDark: [0.05, 0.05, 0.05], uLight: [0.93, 0.93, 0.9] } },
-    { name: "Amber", values: { uDark: [0.1, 0.04, 0], uLight: [1, 0.69, 0] } }
-  ]
-};
-
-// src/catalog/types.ts
-var EFFECT_CATEGORIES = [
-  "gradient",
-  "organic",
-  "pattern",
-  "light",
-  "space",
-  "retro",
-  "image",
-  "transition",
-  "loader",
-  "data",
-  "icon"
-];
-var VECTOR_CONTROL_TYPES = ["float", "int", "bool", "color", "text"];
-var PLACEHOLDER = /\{\{\s*([A-Za-z_]\w*)\s*(?::\s*([A-Za-z0-9]*)([^}]*))?\}\}/g;
-function motionStrings(motion) {
-  const out = [];
-  const walk = (v) => {
-    if (typeof v === "string") out.push(v);
-    else if (Array.isArray(v)) v.forEach(walk);
-    else if (v && typeof v === "object") Object.values(v).forEach(walk);
-  };
-  walk(motion);
-  return out;
-}
-function vectorControls(motion) {
-  const controls = [];
-  const seen = /* @__PURE__ */ new Set();
-  for (const text of motionStrings(motion)) {
-    for (const [, name, type, attributes] of text.matchAll(PLACEHOLDER)) {
-      if (type === void 0 || seen.has(name) || !VECTOR_CONTROL_TYPES.includes(type)) continue;
-      seen.add(name);
-      const colour = type === "color";
-      controls.push(controlFromDeclaration(name, colour ? "vec3" : type, `${attributes}${colour ? " color" : ""}`, controls.length + 1));
-    }
-  }
-  return controls;
-}
-function vectorEffectControls(effect) {
-  const declared = vectorControls(effect.motion);
-  const names = new Set(declared.map((c) => c.name));
-  const listed = (effect.controls ?? []).filter((c) => !names.has(c.name));
-  return [...declared, ...listed.map((c, i) => vectorControlDef(c, declared.length + i + 1))];
-}
-function vectorControlIssues(motion) {
-  const issues = [];
-  const declarations = /* @__PURE__ */ new Map();
-  for (const text of motionStrings(motion)) {
-    for (const [whole, name, type] of text.matchAll(PLACEHOLDER)) {
-      if (type === void 0) continue;
-      if (!VECTOR_CONTROL_TYPES.includes(type))
-        issues.push(`${whole}: a control's type is one of ${VECTOR_CONTROL_TYPES.join(", ")}`);
-      else if (declarations.has(name) && declarations.get(name) !== whole)
-        issues.push(`"${name}" is declared twice; declare it once and write {{${name}}} everywhere else`);
-      else declarations.set(name, whole);
-    }
-  }
-  return issues;
-}
-function written(control, value) {
-  if (control.color && Array.isArray(value)) return rgbToHex(value);
-  if (Array.isArray(value)) return value.join(" ");
-  return value;
-}
-var escapeMarkup = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-function vectorControlDef(control, line = 0) {
-  const min = control.min ?? 0;
-  return {
-    name: control.name,
-    type: control.type,
-    label: control.label ?? control.name,
-    color: control.color ?? false,
-    min,
-    max: control.max ?? Math.max(min + 1, 1),
-    step: control.step ?? (control.type === "int" ? 1 : 0.01),
-    default: control.default,
-    line
-  };
-}
-function renderVectorEffect(effect, values = {}) {
-  const filled = {};
-  const placeholders = /* @__PURE__ */ new Map();
-  for (const control of vectorEffectControls(effect)) {
-    const given = values[control.name];
-    const check = given === void 0 ? void 0 : checkControlValue(control, given);
-    filled[control.name] = check?.ok ? check.value : control.default;
-    placeholders.set(control.name, written(control, filled[control.name]));
-  }
-  for (const [name, value] of Object.entries(effect.derived?.(filled) ?? {})) placeholders.set(name, value);
-  const fill = (text, markup) => {
-    const whole = /^\{\{\s*([A-Za-z_]\w*)\s*(?::[^}]*)?\}\}$/.exec(text);
-    if (!markup && whole && placeholders.has(whole[1])) return placeholders.get(whole[1]);
-    return text.replace(PLACEHOLDER, (match, name) => {
-      if (!placeholders.has(name)) return match;
-      const value = String(placeholders.get(name));
-      return markup ? escapeMarkup(value) : value;
-    });
-  };
-  const walk = (v) => {
-    if (typeof v === "string") return fill(v, false);
-    if (Array.isArray(v)) return v.map(walk);
-    if (v && typeof v === "object") return Object.fromEntries(Object.entries(v).map(([k, x]) => [k, walk(x)]));
-    return v;
-  };
-  const { svg, ...rest } = effect.motion;
-  return { svg: fill(svg.replace(/<!--[\s\S]*?-->/g, ""), true), ...walk(rest) };
-}
-function colorControl(name, hex, label) {
-  return { name, type: "vec3", color: true, default: hexToRgb(hex) ?? [1, 1, 1], label: label ?? name };
-}
-function numberControl(name, value, min, max, label, step) {
-  return { name, type: "float", default: value, min, max, label: label ?? name, step };
-}
-
-// src/catalog/vector.ts
-var spinner = {
-  kind: "vector",
-  id: "spinner",
-  name: "Spinner",
-  description: "An arc chasing its tail: the classic indeterminate loader.",
-  category: "loader",
-  tags: ["loader", "ui", "minimal"],
-  hold: 0,
-  motion: {
-    svg: `<svg viewBox="0 0 100 100"><!-- {{accent: color default=#6366F1 label='Arc'}} {{track: color default=#E5E7EB label='Track'}} {{width: float min=2 max=20 default=8 step=1 label='Stroke width'}} --><circle cx="50" cy="50" r="38" fill="none" stroke="{{track}}" stroke-width="{{width}}"/><g id="spin" transform="rotate(0 50 50)"><circle id="arc" cx="50" cy="50" r="38" fill="none" stroke="{{accent}}" stroke-width="{{width}}" stroke-linecap="round" pathLength="1" stroke-dasharray="0.25 1"/></g></svg>`,
-    animate: [
-      { id: "spin", attrs: { transform: ["rotate(0 50 50)", "rotate(720 50 50)"] }, ms: 1600, ease: "linear" },
-      { id: "arc", attrs: { "stroke-dasharray": ["0.08 1", "0.6 1"] }, ms: 800, ease: "in-out" },
-      { id: "arc", attrs: { "stroke-dasharray": ["0.6 1", "0.08 1"] }, delay: 800, ms: 800, ease: "in-out" }
-    ]
-  }
-};
-var bouncingDots = {
-  kind: "vector",
-  id: "bouncing-dots",
-  name: "Bouncing dots",
-  description: "Three dots hopping in turn, for typing indicators and loaders.",
-  category: "loader",
-  tags: ["loader", "chat", "typing", "ui"],
-  hold: 0,
-  motion: {
-    svg: `<svg viewBox="0 0 120 60"><!-- {{accent: color default=#0EA5E9 label='Dots'}} {{height: float min=4 max=30 default=18 step=1 label='Bounce height'}} --><circle id="a" cx="30" cy="40" r="9" fill="{{accent}}"/><circle id="b" cx="60" cy="40" r="9" fill="{{accent}}"/><circle id="c" cx="90" cy="40" r="9" fill="{{accent}}"/></svg>`,
-    animate: ["a", "b", "c"].flatMap((id, i) => [
-      { id, attrs: { transform: ["translate(0 0)", "translate(0 -{{height}})"] }, delay: i * 150, ms: 250, ease: "out" },
-      { id, attrs: { transform: ["translate(0 -{{height}})", "translate(0 0)"] }, delay: i * 150 + 250, ms: 250, ease: "in-out" },
-      { id, attrs: { opacity: [0.5, 1] }, delay: i * 150, ms: 250 },
-      { id, attrs: { opacity: [1, 0.5] }, delay: i * 150 + 250, ms: 250 }
-    ])
-  }
-};
-var progressRing = {
-  kind: "vector",
-  id: "progress-ring",
-  name: "Progress ring",
-  description: "A ring filling up to a percentage while the number counts with it.",
-  category: "data",
-  tags: ["progress", "kpi", "dashboard", "loader"],
-  derived: (v) => ({ fraction: Math.min(1, Math.max(0, Number(v.value) / 100)) }),
-  motion: {
-    svg: `<svg viewBox="0 0 120 120" font-family="system-ui, sans-serif"><!-- {{accent: color default=#22C55E label='Ring'}} {{track: color default=#E5E7EB label='Track'}} {{text: color default=#111827 label='Text'}} {{value: float min=0 max=100 default=72 step=1 label='Percent'}} --><circle cx="60" cy="60" r="48" fill="none" stroke="{{track}}" stroke-width="10"/><circle id="ring" cx="60" cy="60" r="48" fill="none" stroke="{{accent}}" stroke-width="10" stroke-linecap="round" transform="rotate(-90 60 60)"/><text id="label" x="60" y="68" text-anchor="middle" font-size="24" font-weight="700" fill="{{text}}">0%</text></svg>`,
-    animate: [
-      { id: "ring", draw: [0, "{{fraction}}"], ms: 1600, ease: "out" },
-      { id: "label", count: [0, "{{value}}"], format: "{n}%", ms: 1600, ease: "out" }
-    ]
-  }
-};
-var pulsePing = {
-  kind: "vector",
-  id: "pulse-ping",
-  name: "Pulse ping",
-  description: "Rings radiating from a dot, like a live indicator or radar ping.",
-  category: "loader",
-  tags: ["live", "notification", "location", "status"],
-  hold: 0,
-  motion: {
-    svg: `<svg viewBox="0 0 100 100"><!-- {{accent: color default=#EF4444 label='Colour'}} --><circle id="r1" cx="50" cy="50" r="8" fill="none" stroke="{{accent}}" stroke-width="3"/><circle id="r2" cx="50" cy="50" r="8" fill="none" stroke="{{accent}}" stroke-width="3"/><circle cx="50" cy="50" r="9" fill="{{accent}}"/></svg>`,
-    animate: [
-      { id: "r1", attrs: { r: [8, 44], opacity: [0.9, 0], "stroke-width": [4, 1] }, ms: 1400, ease: "out" },
-      { id: "r2", attrs: { r: [8, 44], opacity: [0.9, 0], "stroke-width": [4, 1] }, delay: 700, ms: 1400, ease: "out" }
-    ]
-  }
-};
-var successCheck = {
-  kind: "vector",
-  id: "success-check",
-  name: "Success check",
-  description: "A circle drawing itself closed, then a tick, then a little pop.",
-  category: "icon",
-  tags: ["success", "confirmation", "ui", "feedback"],
-  hold: 1200,
-  motion: {
-    svg: `<svg viewBox="0 0 100 100"><!-- {{accent: color default=#16A34A label='Colour'}} {{width: float min=2 max=12 default=6 step=1 label='Stroke width'}} --><g id="badge" transform="translate(50 50) scale(1) translate(-50 -50)"><circle id="circle" cx="50" cy="50" r="40" fill="none" stroke="{{accent}}" stroke-width="{{width}}" stroke-linecap="round" transform="rotate(-90 50 50)"/><path id="tick" d="M31 52 L44 64 L70 37" fill="none" stroke="{{accent}}" stroke-width="{{width}}" stroke-linecap="round" stroke-linejoin="round"/></g></svg>`,
-    animate: [
-      { id: "circle", draw: true, ms: 600, ease: "in-out" },
-      { id: "tick", draw: true, delay: 500, ms: 400, ease: "out" },
-      { id: "badge", attrs: { transform: ["translate(50 50) scale(1) translate(-50 -50)", "translate(50 50) scale(1.12) translate(-50 -50)"] }, delay: 850, ms: 150, ease: "out" },
-      { id: "badge", attrs: { transform: ["translate(50 50) scale(1.12) translate(-50 -50)", "translate(50 50) scale(1) translate(-50 -50)"] }, delay: 1e3, ms: 250, ease: "in-out" }
-    ]
-  }
-};
-var errorCross = {
-  kind: "vector",
-  id: "error-cross",
-  name: "Error cross",
-  description: "A circle and a cross drawing on, with a short shake.",
-  category: "icon",
-  tags: ["error", "failure", "ui", "feedback"],
-  hold: 1200,
-  motion: {
-    svg: `<svg viewBox="0 0 100 100"><!-- {{accent: color default=#DC2626 label='Colour'}} {{width: float min=2 max=12 default=6 step=1 label='Stroke width'}} --><g id="badge" transform="translate(0 0)"><circle id="circle" cx="50" cy="50" r="40" fill="none" stroke="{{accent}}" stroke-width="{{width}}" stroke-linecap="round" transform="rotate(-90 50 50)"/><path id="a" d="M36 36 L64 64" fill="none" stroke="{{accent}}" stroke-width="{{width}}" stroke-linecap="round"/><path id="b" d="M64 36 L36 64" fill="none" stroke="{{accent}}" stroke-width="{{width}}" stroke-linecap="round"/></g></svg>`,
-    animate: [
-      { id: "circle", draw: true, ms: 600, ease: "in-out" },
-      { id: "a", draw: true, delay: 500, ms: 250, ease: "out" },
-      { id: "b", draw: true, delay: 700, ms: 250, ease: "out" },
-      { id: "badge", attrs: { transform: ["translate(0 0)", "translate(-6 0)"] }, delay: 950, ms: 60, ease: "linear" },
-      { id: "badge", attrs: { transform: ["translate(-6 0)", "translate(6 0)"] }, delay: 1010, ms: 100, ease: "linear" },
-      { id: "badge", attrs: { transform: ["translate(6 0)", "translate(0 0)"] }, delay: 1110, ms: 80, ease: "out" }
-    ]
-  }
-};
-var heartbeat = {
-  kind: "vector",
-  id: "heartbeat",
-  name: "Heartbeat",
-  description: "A heart beating twice, with an ECG line tracing beneath it.",
-  category: "icon",
-  tags: ["health", "like", "love", "pulse"],
-  hold: 300,
-  motion: {
-    svg: `<svg viewBox="0 0 200 120"><!-- {{accent: color default=#F43F5E label='Heart'}} {{line: color default=#94A3B8 label='Line'}} --><g id="heart" transform="translate(100 46) scale(1)"><path d="M0 22 C-30 0 -30 -26 -10 -26 C-3 -26 0 -20 0 -16 C0 -20 3 -26 10 -26 C30 -26 30 0 0 22Z" fill="{{accent}}"/></g><path id="ecg" d="M10 100 H70 L80 86 L90 112 L100 76 L110 104 L118 100 H190" fill="none" stroke="{{line}}" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/></svg>`,
-    animate: [
-      { id: "heart", attrs: { transform: ["translate(100 46) scale(1)", "translate(100 46) scale(1.18)"] }, ms: 120, ease: "out" },
-      { id: "heart", attrs: { transform: ["translate(100 46) scale(1.18)", "translate(100 46) scale(1)"] }, delay: 120, ms: 160, ease: "in-out" },
-      { id: "heart", attrs: { transform: ["translate(100 46) scale(1)", "translate(100 46) scale(1.12)"] }, delay: 300, ms: 120, ease: "out" },
-      { id: "heart", attrs: { transform: ["translate(100 46) scale(1.12)", "translate(100 46) scale(1)"] }, delay: 420, ms: 300, ease: "in-out" },
-      { id: "ecg", draw: true, ms: 900, ease: "linear" }
-    ]
-  }
-};
-var barChart = {
-  kind: "vector",
-  id: "bar-chart",
-  name: "Bar chart",
-  description: "Bars growing into place one after another, values counting above them.",
-  category: "data",
-  tags: ["chart", "dashboard", "report", "explainer"],
-  hold: 1500,
-  derived: (v) => Object.fromEntries(
-    ["a", "b", "c", "d"].flatMap((k) => {
-      const h = Math.min(100, Math.max(0, Number(v[k]))) * 1.1;
-      return [
-        [`${k}_height`, +h.toFixed(2)],
-        [`${k}_label_y`, +(134 - h).toFixed(2)]
-      ];
-    })
-  ),
-  motion: {
-    svg: `<svg viewBox="0 0 240 160" font-family="system-ui, sans-serif"><!-- {{accent: color default=#6366F1 label='Bars'}} {{text: color default=#334155 label='Text'}} {{a: float min=0 max=100 default=40 step=1 label='Bar 1'}} {{b: float min=0 max=100 default=65 step=1 label='Bar 2'}} {{c: float min=0 max=100 default=50 step=1 label='Bar 3'}} {{d: float min=0 max=100 default=90 step=1 label='Bar 4'}} --><line x1="20" y1="140" x2="220" y2="140" stroke="{{text}}" stroke-opacity="0.3" stroke-width="2"/>${["a", "b", "c", "d"].map(
-      (k, i) => `<g id="bar-${k}" transform="translate(${40 + i * 48} 140) scale(1 0)"><rect x="0" y="-1" width="32" height="1" rx="0.02" fill="{{accent}}"/></g><text id="label-${k}" x="${56 + i * 48}" y="132" text-anchor="middle" font-size="12" fill="{{text}}" opacity="0">0</text>`
-    ).join("")}</svg>`,
-    animate: ["a", "b", "c", "d"].flatMap((k, i) => [
-      { id: `bar-${k}`, attrs: { transform: [`translate(${40 + i * 48} 140) scale(1 0)`, `translate(${40 + i * 48} 140) scale(1 {{${k}_height}})`] }, delay: i * 180, ms: 700, ease: "out" },
-      { id: `label-${k}`, attrs: { y: [132, `{{${k}_label_y}}`], opacity: [0, 1] }, delay: i * 180, ms: 700, ease: "out" },
-      { id: `label-${k}`, count: [0, `{{${k}}}`], delay: i * 180, ms: 700, ease: "out" }
-    ])
-  }
-};
-var lineChart = {
-  kind: "vector",
-  id: "line-chart",
-  name: "Line chart",
-  description: "A trend line drawing across with a marker riding its tip and the area fading in below.",
-  category: "data",
-  tags: ["chart", "trend", "growth", "dashboard"],
-  hold: 1500,
-  motion: {
-    svg: `<svg viewBox="0 0 240 140"><!-- {{accent: color default=#0EA5E9 label='Line'}} {{grid: color default=#CBD5E1 label='Grid'}} --><defs><linearGradient id="fill" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="{{accent}}" stop-opacity="0.35"/><stop offset="1" stop-color="{{accent}}" stop-opacity="0"/></linearGradient></defs><g stroke="{{grid}}" stroke-width="1"><line x1="20" y1="30" x2="220" y2="30"/><line x1="20" y1="70" x2="220" y2="70"/><line x1="20" y1="110" x2="220" y2="110"/></g><path id="area" d="M20 110 L60 92 L100 98 L140 64 L180 70 L220 30 L220 120 L20 120Z" fill="url(#fill)" opacity="0"/><path id="trend" d="M20 110 L60 92 L100 98 L140 64 L180 70 L220 30" fill="none" stroke="{{accent}}" stroke-width="3" stroke-linejoin="round" stroke-linecap="round"/><circle id="marker" r="5" fill="#fff" stroke="{{accent}}" stroke-width="3"/></svg>`,
-    animate: [
-      { id: "trend", draw: true, ms: 1400, ease: "in-out" },
-      { id: "marker", along: "trend", ms: 1400, ease: "in-out" },
-      { id: "area", attrs: { opacity: [0, 1] }, delay: 900, ms: 600 }
-    ]
-  }
-};
-var statCounter = {
-  kind: "vector",
-  id: "stat-counter",
-  name: "Stat counter",
-  description: "A headline number counting up, with its caption and underline sweeping in.",
-  category: "data",
-  tags: ["kpi", "number", "headline", "explainer"],
-  hold: 1500,
-  motion: {
-    svg: `<svg viewBox="0 0 240 120" font-family="system-ui, sans-serif"><!-- {{accent: color default=#F59E0B label='Accent'}} {{text: color default=#0F172A label='Text'}} {{value: float min=0 max=100000 default=1250 step=1 label='Value'}} {{caption: text default='happy customers' label='Caption'}} --><text id="number" x="120" y="62" text-anchor="middle" font-size="44" font-weight="800" fill="{{text}}">0</text><path id="underline" d="M60 78 H180" stroke="{{accent}}" stroke-width="6" stroke-linecap="round"/><text id="caption" x="120" y="104" text-anchor="middle" font-size="13" fill="{{text}}" opacity="0">{{caption}}</text></svg>`,
-    animate: [
-      { id: "number", count: [0, "{{value}}"], ms: 1500, ease: "out" },
-      { id: "underline", draw: true, delay: 300, ms: 900, ease: "in-out" },
-      { id: "caption", attrs: { opacity: [0, 1], y: [112, 104] }, delay: 800, ms: 500, ease: "out" }
-    ]
-  }
-};
-var timelineTrack = {
-  kind: "vector",
-  id: "timeline-track",
-  name: "Timeline track",
-  description: "A vertical line drawing down with nodes popping along milestones.",
-  category: "data",
-  tags: ["timeline", "roadmap", "milestones", "history"],
-  hold: 1200,
-  motion: {
-    svg: `<svg viewBox="0 0 100 400"><!-- {{track: color default=#E5E7EB label='Track'}} {{accent: color default=#F97316 label='Accent'}} {{width: float min=1 max=8 default=3 step=0.5 label='Line width'}} --><line x1="50" y1="20" x2="50" y2="380" stroke="{{track}}" stroke-width="{{width}}" stroke-linecap="round"/><path id="line" d="M50 20 L50 380" fill="none" stroke="{{accent}}" stroke-width="{{width}}" stroke-linecap="round"/><g id="n1" transform="translate(50 60) scale(0)"><circle r="8" fill="{{accent}}"/><circle r="4" fill="#ffffff"/></g><g id="n2" transform="translate(50 160) scale(0)"><circle r="8" fill="{{accent}}"/><circle r="4" fill="#ffffff"/></g><g id="n3" transform="translate(50 260) scale(0)"><circle r="8" fill="{{accent}}"/><circle r="4" fill="#ffffff"/></g><g id="n4" transform="translate(50 360) scale(0)"><circle r="8" fill="{{accent}}"/><circle r="4" fill="#ffffff"/></g></svg>`,
-    animate: [
-      { id: "line", draw: true, ms: 1400, ease: "in-out" },
-      { id: "n1", attrs: { transform: ["translate(50 60) scale(0)", "translate(50 60) scale(1)"] }, delay: 200, ms: 250, ease: "out" },
-      { id: "n2", attrs: { transform: ["translate(50 160) scale(0)", "translate(50 160) scale(1)"] }, delay: 550, ms: 250, ease: "out" },
-      { id: "n3", attrs: { transform: ["translate(50 260) scale(0)", "translate(50 260) scale(1)"] }, delay: 900, ms: 250, ease: "out" },
-      { id: "n4", attrs: { transform: ["translate(50 360) scale(0)", "translate(50 360) scale(1)"] }, delay: 1300, ms: 250, ease: "out" }
-    ]
-  }
-};
-var route = {
-  kind: "vector",
-  id: "route",
-  name: "Route",
-  description: "A dashed journey drawing between two pins, with a traveller following it.",
-  category: "data",
-  tags: ["map", "travel", "delivery", "journey"],
-  hold: 1200,
-  motion: {
-    svg: `<svg viewBox="0 0 240 150"><!-- {{accent: color default=#8B5CF6 label='Route'}} {{pin: color default=#0F172A label='Pins'}} --><path id="path" d="M30 120 C60 40 120 140 150 70 S210 30 210 30" fill="none" stroke="{{accent}}" stroke-width="4" stroke-linecap="round"/><circle cx="30" cy="120" r="7" fill="{{pin}}"/><g id="end" opacity="0"><circle cx="210" cy="30" r="9" fill="{{pin}}"/><circle cx="210" cy="30" r="3.5" fill="#fff"/></g><g id="traveller"><circle r="7" fill="{{accent}}"/><circle r="3" fill="#fff"/></g></svg>`,
-    animate: [
-      { id: "path", draw: true, ms: 1800, ease: "in-out" },
-      { id: "traveller", along: "path", ms: 1800, ease: "in-out" },
-      { id: "end", attrs: { opacity: [0, 1] }, delay: 1600, ms: 300 }
-    ]
-  }
-};
-var blobMorph = {
-  kind: "vector",
-  id: "blob-morph",
-  name: "Blob morph",
-  description: "An organic blob shape-shifting through three forms.",
-  category: "organic",
-  tags: ["shape", "background", "playful", "brand"],
-  hold: 0,
-  motion: (() => {
-    const shapes = [
-      "M100 30 C140 30 170 60 170 100 C170 140 140 170 100 170 C60 170 30 140 30 100 C30 60 60 30 100 30Z",
-      "M100 20 C150 40 180 70 160 110 C140 160 120 175 85 165 C45 155 25 120 40 80 C55 40 70 15 100 20Z",
-      "M110 35 C155 25 175 85 165 120 C155 160 105 180 70 160 C35 140 20 100 45 70 C65 45 80 40 110 35Z"
-    ];
-    const step = 1200;
-    return {
-      svg: `<svg viewBox="0 0 200 200"><!-- {{colorA: color default=#F472B6 label='Colour A'}} {{colorB: color default=#818CF8 label='Colour B'}} --><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="{{colorA}}"/><stop offset="1" stop-color="{{colorB}}"/></linearGradient></defs><path id="blob" d="${shapes[0]}" fill="url(#g)"/></svg>`,
-      animate: shapes.map((d, i) => ({
-        id: "blob",
-        attrs: { d: [d, shapes[(i + 1) % shapes.length]] },
-        delay: i * step,
-        ms: step,
-        ease: "in-out"
-      }))
-    };
-  })()
-};
-var signature = {
-  kind: "vector",
-  id: "signature",
-  name: "Signature",
-  description: "A handwritten flourish drawing itself as if by pen.",
-  category: "icon",
-  tags: ["handwriting", "draw-on", "personal", "reveal"],
-  hold: 1500,
-  motion: {
-    svg: `<svg viewBox="0 0 260 120"><!-- {{ink: color default=#1E293B label='Ink'}} {{width: float min=1 max=8 default=3 step=0.5 label='Pen width'}} --><path id="sig" d="M20 80 C40 20 60 20 55 70 C52 95 70 95 85 60 C95 40 100 75 110 70 C120 65 125 40 135 55 C145 70 150 75 165 50 C175 35 185 60 190 65 C200 75 215 40 240 45" fill="none" stroke="{{ink}}" stroke-width="{{width}}" stroke-linecap="round" stroke-linejoin="round"/><path id="dash" d="M70 100 Q140 92 220 98" fill="none" stroke="{{ink}}" stroke-width="{{width}}" stroke-linecap="round"/></svg>`,
-    animate: [
-      { id: "sig", draw: true, ms: 1800, ease: "in-out" },
-      { id: "dash", draw: true, delay: 1700, ms: 400, ease: "out" }
-    ]
-  }
-};
-var equalizer = {
-  kind: "vector",
-  id: "equalizer",
-  name: "Equalizer",
-  description: "Audio level bars dancing, for now-playing badges and voice states.",
-  category: "loader",
-  tags: ["music", "audio", "voice", "now-playing"],
-  hold: 0,
-  motion: (() => {
-    const heights = [
-      [0.3, 0.9, 0.5, 0.3],
-      [0.7, 0.4, 1, 0.7],
-      [0.5, 1, 0.3, 0.5],
-      [0.9, 0.5, 0.7, 0.9],
-      [0.4, 0.8, 0.6, 0.4]
-    ];
-    const beat = 250;
-    return {
-      svg: `<svg viewBox="0 0 100 100"><!-- {{accent: color default=#10B981 label='Bars'}} -->${heights.map((_, i) => `<g id="bar${i}" transform="translate(${14 + i * 16} 85) scale(1 ${heights[i][0]})"><rect x="0" y="-70" width="10" height="70" rx="5" fill="{{accent}}"/></g>`).join("")}</svg>`,
-      animate: heights.flatMap(
-        (h, i) => [0, 1, 2].map((k) => ({
-          id: `bar${i}`,
-          attrs: { transform: [`translate(${14 + i * 16} 85) scale(1 ${h[k]})`, `translate(${14 + i * 16} 85) scale(1 ${h[k + 1]})`] },
-          delay: k * beat,
-          ms: beat,
-          ease: "in-out"
-        }))
-      )
-    };
-  })()
-};
-var confetti = {
-  kind: "vector",
-  id: "confetti",
-  name: "Confetti burst",
-  description: "A burst of confetti flying out and fluttering down.",
-  category: "icon",
-  tags: ["celebration", "success", "party", "reward"],
-  hold: 400,
-  motion: (() => {
-    const pieces = Array.from({ length: 18 }, (_, i) => {
-      const angle = i / 18 * Math.PI * 2 + i % 3 * 0.2;
-      const dist = 55 + i % 4 * 12;
-      const x = Math.round(Math.cos(angle) * dist);
-      const y = Math.round(Math.sin(angle) * dist * 0.8 - 20);
-      const spin = (i % 2 ? 1 : -1) * (180 + i % 5 * 60);
-      return { i, x, y, spin, fill: ["{{a}}", "{{b}}", "{{c}}"][i % 3] };
-    });
-    return {
-      svg: `<svg viewBox="0 0 200 200"><!-- {{a: color default=#F43F5E label='Colour A'}} {{b: color default=#FACC15 label='Colour B'}} {{c: color default=#22D3EE label='Colour C'}} -->${pieces.map((p) => `<rect id="p${p.i}" x="-4" y="-2" width="8" height="4" rx="1" fill="${p.fill}" transform="translate(100 110) rotate(0)" opacity="0"/>`).join("")}</svg>`,
-      animate: pieces.flatMap((p) => [
-        { id: `p${p.i}`, attrs: { opacity: [0, 1] }, ms: 50 },
-        {
-          id: `p${p.i}`,
-          attrs: { transform: ["translate(100 110) rotate(0)", `translate(${100 + p.x} ${110 + p.y}) rotate(${p.spin})`] },
-          ms: 600,
-          ease: "out"
-        },
-        {
-          id: `p${p.i}`,
-          attrs: {
-            transform: [`translate(${100 + p.x} ${110 + p.y}) rotate(${p.spin})`, `translate(${100 + p.x * 1.2} ${180 + p.y * 0.2}) rotate(${p.spin * 2})`]
-          },
-          delay: 600,
-          ms: 1e3,
-          ease: "in-out"
-        },
-        { id: `p${p.i}`, attrs: { opacity: [1, 0] }, delay: 1300, ms: 300 }
-      ])
-    };
-  })()
-};
-var NODES = {
-  s: [40, 120],
-  a: [120, 60],
-  b: [120, 180],
-  c: [280, 50],
-  d: [290, 130],
-  e: [280, 200],
-  t: [360, 120]
-};
-var HUB = [200, 120];
-var link = ([x1, y1], [x2, y2]) => {
-  const mid = (x1 + x2) / 2;
-  return `M${x1} ${y1} C${mid} ${y1} ${mid} ${y2} ${x2} ${y2}`;
-};
-var LINKS = [
-  { from: NODES.s, to: NODES.a, column: 0 },
-  { from: NODES.s, to: NODES.b, column: 0 },
-  { from: NODES.a, to: HUB, column: 1 },
-  { from: NODES.b, to: HUB, column: 1 },
-  { from: HUB, to: NODES.c, column: 2 },
-  { from: HUB, to: NODES.d, column: 2 },
-  { from: HUB, to: NODES.e, column: 2 },
-  { from: NODES.c, to: NODES.t, column: 3 },
-  { from: NODES.d, to: NODES.t, column: 3 },
-  { from: NODES.e, to: NODES.t, column: 3 }
-];
-var CRITICAL = [NODES.s, NODES.b, HUB, NODES.c, NODES.t].map((p, i, all) => i === 0 ? "" : link(all[i - 1], p).replace(/^M[\d.]+ [\d.]+ /, i === 1 ? `M${all[0][0]} ${all[0][1]} ` : "")).filter(Boolean).join(" ");
-var NODE_COLUMN = { s: 0, a: 1, b: 1, c: 3, d: 3, e: 3, t: 4 };
-var COLUMN_MS = 280;
-var PATH_START = 1500;
-var PATH_MS = 1800;
-var flowNetwork = {
-  kind: "vector",
-  id: "flow-network",
-  name: "Flow network",
-  description: "A node graph linking up, then a glowing critical path racing through it to a pulsing hub.",
-  category: "data",
-  tags: ["network", "graph", "dag", "workflow", "tech", "explainer"],
-  hold: 1200,
-  presets: [
-    { name: "Light", values: { background: [0.93, 0.95, 0.96], link: [0.37, 0.72, 0.69], path: [0.96, 0.62, 0.04], ink: [0.2, 0.25, 0.33] } },
-    { name: "Neon", values: { background: [0.04, 0.02, 0.1], link: [0.13, 0.83, 0.93], path: [0.96, 0.45, 0.71], ink: [0.85, 0.85, 1] } }
-  ],
-  motion: {
-    svg: `<svg viewBox="0 0 400 240" font-family="system-ui, sans-serif"><!-- {{label: text default='Critical path' label='Hub label'}} {{background: color default=#0B1220 label='Background'}} {{link: color default=#4FD1C5 label='Links'}} {{path: color default=#F5A524 label='Critical path'}} {{ink: color default=#CBD5E1 label='Label'}} {{glow: float min=0 max=6 default=2.5 step=0.5 label='Glow'}} --><defs><filter id="glow" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="{{glow}}" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><rect width="400" height="240" fill="{{background}}"/>${LINKS.map(
-      (l, i) => `<path id="l${i}" d="${link(l.from, l.to)}" fill="none" stroke="{{link}}" stroke-width="1.6" stroke-opacity="0.75" filter="url(#glow)"/>`
-    ).join("")}<path id="crit" d="${CRITICAL}" fill="none" stroke="{{path}}" stroke-width="3" stroke-linecap="round" filter="url(#glow)"/>${[0, 1].map((i) => `<circle id="ring${i}" cx="${HUB[0]}" cy="${HUB[1]}" r="10" fill="none" stroke="{{link}}" stroke-width="2" opacity="0"/>`).join("")}${Object.entries(NODES).map(([id, [x, y]]) => `<circle id="n${id}" cx="${x}" cy="${y}" r="6" fill="{{background}}" stroke="{{link}}" stroke-width="2.5" filter="url(#glow)" opacity="0"/>`).join("")}<g id="hub" opacity="0"><circle cx="${HUB[0]}" cy="${HUB[1]}" r="13" fill="{{link}}" fill-opacity="0.25" stroke="{{link}}" stroke-width="2" filter="url(#glow)"/><circle cx="${HUB[0]}" cy="${HUB[1]}" r="6" fill="{{link}}"/></g><text id="caption" x="${HUB[0]}" y="${HUB[1] + 34}" text-anchor="middle" font-size="12" font-weight="600" fill="{{ink}}" opacity="0">{{label}}</text>${[0, 1, 2].map((i) => `<circle id="pkt${i}" r="2.5" fill="{{link}}" filter="url(#glow)" opacity="0"/>`).join("")}<circle id="comet" r="5" fill="#FFFFFF" stroke="{{path}}" stroke-width="2" filter="url(#glow)" opacity="0"/></svg>`,
-    animate: [
-      ...LINKS.map((l, i) => ({ id: `l${i}`, draw: true, delay: l.column * COLUMN_MS, ms: 500, ease: "out" })),
-      ...Object.keys(NODES).map((id) => ({ id: `n${id}`, attrs: { opacity: [0, 1] }, delay: Math.max(0, NODE_COLUMN[id] * COLUMN_MS - 120), ms: 250 })),
-      { id: "hub", attrs: { opacity: [0, 1] }, delay: 2 * COLUMN_MS - 120, ms: 300 },
-      { id: "caption", attrs: { opacity: [0, 1], y: [HUB[1] + 40, HUB[1] + 34] }, delay: 2 * COLUMN_MS, ms: 400, ease: "out" },
-      // Data packets drift along a few links while the path waits.
-      ...[3, 5, 8].map((link2, i) => [
-        { id: `pkt${i}`, attrs: { opacity: [0, 1] }, delay: 1e3 + i * 150, ms: 150 },
-        { id: `pkt${i}`, along: `l${link2}`, delay: 1e3 + i * 150, ms: 1100, ease: "in-out" },
-        { id: `pkt${i}`, attrs: { opacity: [1, 0] }, delay: 2e3 + i * 150, ms: 200 }
-      ]).flat(),
-      { id: "crit", draw: true, delay: PATH_START, ms: PATH_MS, ease: "in-out" },
-      { id: "comet", attrs: { opacity: [0, 1] }, delay: PATH_START, ms: 150 },
-      { id: "comet", along: "crit", delay: PATH_START, ms: PATH_MS, ease: "in-out" },
-      { id: "comet", attrs: { opacity: [1, 0] }, delay: PATH_START + PATH_MS, ms: 300 },
-      // Rings pulse out from the hub as the comet passes it, halfway along.
-      ...[0, 1].map((i) => ({
-        id: `ring${i}`,
-        attrs: { r: [10, 52], opacity: [0.9, 0], "stroke-width": [3, 0.5] },
-        delay: PATH_START + PATH_MS / 2 + i * 350,
-        ms: 1200,
-        ease: "out"
-      }))
-    ]
-  }
-};
-var DRIP_TOP = 106;
-var DRIPS = [
-  { at: 0.067, width: 11, length: 34, delay: 0, ms: 1500 },
-  { at: 0.18, width: 8, length: 18, delay: 260, ms: 1100 },
-  { at: 0.3, width: 13, length: 50, delay: 120, ms: 1800 },
-  { at: 0.453, width: 9, length: 22, delay: 380, ms: 1200 },
-  { at: 0.587, width: 10, length: 28, delay: 200, ms: 1400 },
-  { at: 0.693, width: 12, length: 42, delay: 60, ms: 1700 },
-  { at: 0.793, width: 11, length: 32, delay: 300, ms: 1500 }
-];
-var dripText = {
-  kind: "vector",
-  id: "drip-text",
-  name: "Drip text",
-  description: "A chunky outlined title popping in, then oozing slime drips from its letters.",
-  category: "icon",
-  tags: ["title", "text", "drip", "slime", "y2k", "headline"],
-  hold: 1200,
-  presets: [
-    { name: "Slime", values: { fill: [0.55, 0.93, 0.25], outline: [0.06, 0.2, 0.04], shine: [0.85, 1, 0.7] } },
-    { name: "Molten gold", values: { fill: [1, 0.78, 0.2], outline: [0.35, 0.16, 0], shine: [1, 0.96, 0.75], drip: 1.5 } }
-  ],
-  // The word is stretched to a width set by its length (textLength), so the drips land under its letters in any font.
-  derived: (v) => {
-    const letters = Math.max(1, Array.from(String(v.word).trim()).length);
-    const width = Math.min(380, letters * 75);
-    const left = 200 - width / 2;
-    return {
-      width,
-      ...Object.fromEntries(
-        DRIPS.flatMap((d, i) => {
-          const x = Math.round((left + d.at * width) * 10) / 10;
-          const length = Math.round(d.length * Number(v.drip) * 10) / 10;
-          return [
-            [`x${i}`, x],
-            [`left${i}`, x - d.width / 2],
-            [`shine${i}`, x - d.width * 0.25],
-            [`len${i}`, length],
-            [`tip${i}`, DRIP_TOP + length]
-          ];
-        })
-      )
-    };
-  },
-  motion: (() => {
-    const word = `<text x="200" y="120" text-anchor="middle" textLength="{{width}}" lengthAdjust="spacingAndGlyphs" font-family="'Arial Black', Impact, system-ui, sans-serif" font-size="104" font-weight="900" stroke-linejoin="round"`;
-    const drips = (layer, paint) => DRIPS.map(
-      (d, i) => `<rect id="${layer}r${i}" x="{{left${i}}}" y="${DRIP_TOP}" width="${d.width}" height="0" rx="${d.width / 2}" ${paint}/><circle id="${layer}c${i}" cx="{{x${i}}}" cy="${DRIP_TOP}" r="${d.width * 0.72}" ${paint}/>`
-    ).join("");
-    const outline = `fill="{{outline}}" stroke="{{outline}}" stroke-width="{{stroke}}"`;
-    const pop = (from, to) => [`translate(200 100) scale(${from}) translate(-200 -100)`, `translate(200 100) scale(${to}) translate(-200 -100)`];
-    return {
-      svg: `<svg viewBox="0 0 400 200"><!-- {{word: text default=SLOP label='Word'}} {{fill: color default=#FF7EB6 label='Fill'}} {{outline: color default=#3A0A2C label='Outline'}} {{shine: color default=#FFD1E6 label='Shine'}} {{drip: float min=0.2 max=2 default=1 label='Drip length'}} {{stroke: float min=0 max=14 default=7 step=0.5 label='Outline width'}} --><g id="word" transform="${pop(0.6, 1)[0]}" opacity="0">${drips("o", outline)}${word} fill="none" stroke="{{outline}}" stroke-width="{{stroke}}">{{word}}</text>${drips("f", `fill="{{fill}}"`)}${word} fill="{{fill}}">{{word}}</text>${DRIPS.map(
-        (d, i) => `<circle id="s${i}" cx="{{shine${i}}}" cy="${DRIP_TOP}" r="${d.width * 0.2}" fill="{{shine}}" opacity="0"/>`
-      ).join("")}</g></svg>`,
-      animate: [
-        { id: "word", attrs: { transform: pop(0.6, 1.08), opacity: [0, 1] }, ms: 260, ease: "out" },
-        { id: "word", attrs: { transform: pop(1.08, 1) }, delay: 260, ms: 200, ease: "in-out" },
-        ...DRIPS.flatMap((d, i) => {
-          const at = { delay: 400 + d.delay, ms: d.ms, ease: "in-out" };
-          const tip = `{{tip${i}}}`;
-          return [
-            ...["o", "f"].flatMap((layer) => [
-              { id: `${layer}r${i}`, attrs: { height: [0, `{{len${i}}}`] }, ...at },
-              { id: `${layer}c${i}`, attrs: { cy: [DRIP_TOP, tip] }, ...at }
-            ]),
-            { id: `s${i}`, attrs: { cy: [DRIP_TOP, tip], opacity: [0, 0.9] }, ...at }
-          ];
-        })
-      ]
-    };
-  })()
-};
-var vectorEffects = [
-  spinner,
-  bouncingDots,
-  pulsePing,
-  equalizer,
-  progressRing,
-  barChart,
-  lineChart,
-  statCounter,
-  route,
-  timelineTrack,
-  successCheck,
-  errorCross,
-  heartbeat,
-  signature,
-  confetti,
-  blobMorph,
-  dripText,
-  flowNetwork
-];
-
-// src/catalog/index.ts
-var SHADER_EFFECTS = [
-  meshGradient,
-  aurora,
-  duotoneFlow,
-  conicSweep,
-  silk,
-  marble,
-  smoke,
-  lavaLamp,
-  plasma,
-  caustics,
-  flames,
-  dotWave,
-  truchet,
-  hexPulse,
-  voronoi,
-  moire,
-  kaleidoscope,
-  barberStripes,
-  neonCircuit,
-  bokeh,
-  godRays,
-  sparkles,
-  neonRipple,
-  lightRibbons,
-  starfield,
-  nebula,
-  blackHole,
-  synthwaveGrid,
-  digitalRain,
-  pixelSunset,
-  tvStatic,
-  imageRipple,
-  imageGlitch,
-  imageDuotone,
-  imageHalftone,
-  imagePixelate,
-  crt,
-  filmGrain,
-  ...transitions
-];
-var EFFECTS = [...SHADER_EFFECTS, ...vectorEffects].sort(
-  (a, b) => EFFECT_CATEGORIES.indexOf(a.category) - EFFECT_CATEGORIES.indexOf(b.category)
-);
-var byId = new Map(EFFECTS.map((e) => [e.id, e]));
-function getEffect(id) {
-  return byId.get(id);
-}
-function findEffects(query = {}) {
-  const words = (query.text ?? "").toLowerCase().split(/\s+/).filter(Boolean);
-  return EFFECTS.filter((e) => {
-    if (query.category && e.category !== query.category) return false;
-    if (query.kind && e.kind !== query.kind) return false;
-    if (query.tags && !query.tags.every((t) => e.tags.includes(t))) return false;
-    const haystack = [e.id, e.name, e.description, e.category, ...e.tags].join(" ").toLowerCase();
-    return words.every((w) => haystack.includes(w));
-  });
-}
-function effectControls(effect) {
-  return effect.kind === "shader" ? parseControls(effect.source) : vectorEffectControls(effect);
-}
-function effectDefaults(effect, options = {}) {
-  const preset = options.preset ? effect.presets?.find((p) => p.name === options.preset)?.values : void 0;
-  const merged = { ...preset, ...options.values };
-  return Object.fromEntries(effectControls(effect).map((c) => [c.name, controlValue(c, merged)]));
-}
-
-export {
-  HASH,
-  NOISE,
-  FBM,
-  PALETTE,
-  OKLAB_MIX,
-  ROTATE,
-  glsl,
-  svgDataUrl,
-  SAMPLE_IMAGES,
-  EFFECT_CATEGORIES,
-  VECTOR_CONTROL_TYPES,
-  vectorControls,
-  vectorEffectControls,
-  vectorControlIssues,
-  vectorControlDef,
-  renderVectorEffect,
-  colorControl,
-  numberControl,
-  SHADER_EFFECTS,
-  EFFECTS,
-  getEffect,
-  findEffects,
-  effectControls,
-  effectDefaults
-};
-//# sourceMappingURL=chunk-J2WIWT4J.js.map