@pixerate/flair 0.6.0 → 0.8.0

package/dist/{chunk-WQYK64AA.js → chunk-FHXOMIQY.js}

@@ -300,6 +300,30 @@ var SAMPLE_IMAGES = {
   city: svgDataUrl(CITY),
   portrait: svgDataUrl(PORTRAIT)
 };
+function charWidth(c) {
+  if (/[iIjl.,:;'!|`]/.test(c)) return 0.3;
+  if (/[\sfrt()[\]\-]/.test(c)) return 0.4;
+  if (/[MW@%]/.test(c)) return 0.94;
+  if (/[mw]/.test(c)) return 0.88;
+  if (/[A-Z&#]/.test(c)) return 0.74;
+  if (/[0-9]/.test(c)) return 0.58;
+  if (/[a-z]/.test(c)) return 0.6;
+  return /[ᄀ-ᅟ⺀-꓏가-힣豈-﫿︰-﹏＀-｠]|\p{Extended_Pictographic}/u.test(c) ? 1 : 0.64;
+}
+function textWidthEm(text) {
+  return Array.from(text).reduce((sum, c) => sum + charWidth(c), 0);
+}
+var escapeXml = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function textImage(text, options = {}) {
+  const width = options.width ?? 1024;
+  const height = options.height ?? 256;
+  const ems = Math.max(0.5, textWidthEm(text));
+  const size = options.size ?? Math.min(height * 0.78, width * 0.9 / ems);
+  const length = Math.min(width * 0.96, ems * size);
+  const font = options.font ?? "'Arial Black', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif";
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}"><text x="${width / 2}" y="${height / 2}" dy="0.35em" text-anchor="middle" textLength="${+length.toFixed(1)}" lengthAdjust="spacingAndGlyphs" font-family="${escapeXml(font)}" font-weight="${escapeXml(String(options.weight ?? 900))}" font-size="${+size.toFixed(1)}" fill="#fff">${escapeXml(text)}</text></svg>`;
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg).replace(/['()*!]/g, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`)}`;
+}
 
 // src/catalog/shaders/image.ts
 var PICTURE = `
@@ -577,17 +601,19 @@ var bokeh = {
   tags: ["background", "festive", "dreamy", "night"],
   source: glsl(
     `// Bokeh: soft out-of-focus lights drifting.
-uniform vec3 uBackground; // @control color default=#0B1026 label="Background"
-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"`,
+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);
+  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);
@@ -599,9 +625,12 @@ uniform float uSpeed;     // @control min=0 max=1 default=0.15 label="Drift"`,
     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))));
-    col += light * disc * (0.15 + 0.25 * (1.0 - depth));
+    float weight = disc * (0.15 + 0.25 * (1.0 - depth));
+    col += light * weight;
+    lightAlpha += weight;
   }
-  fragColor = vec4(col, 1.0);
+  float a = clamp(uBackgroundAlpha + lightAlpha * (1.0 - uBackgroundAlpha), 0.0, 1.0);
+  fragColor = vec4(col, a);
 }`
   )
 };
@@ -645,18 +674,21 @@ var sparkles = {
   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 vec3 uSparkle;    // @control color default=#FFFFFF label="Sparkle"
-uniform float uDensity;   // @control min=2 max=30 default=10 label="Density"
-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"`,
+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;
-  vec3 col = uBackground;
+  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;
@@ -665,10 +697,12 @@ uniform float uSpeed;     // @control min=0 max=4 default=1 label="Twinkle speed
     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;
-    col += uSparkle * star;
+    float star = (rays * 0.8 + core) * smoothstep(uSize, 0.0, r) * tw * keep;
+    glint += star;
   }
-  fragColor = vec4(col, 1.0);
+  vec3 col = uBackground * uBackgroundAlpha + uSparkle * glint;
+  float a = clamp(uBackgroundAlpha + glint * (1.0 - uBackgroundAlpha), 0.0, 1.0);
+  fragColor = vec4(col, a);
 }`
   )
 };
@@ -1404,6 +1438,483 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   ]
 };
 
+// src/catalog/shaders/overlay.ts
+var GLOW = `
+vec4 glow(vec3 c) {
+  c = 1.0 - exp(-max(c, 0.0));
+  float a = max(c.r, max(c.g, c.b));
+  return vec4(c / max(a, 1e-4), a);
+}`.trim();
+var OVER = `
+vec4 over(vec4 acc, vec3 c, float a) {
+  return vec4(acc.rgb * (1.0 - a) + c * a, acc.a * (1.0 - a) + a);
+}
+vec4 unpremultiply(vec4 acc) {
+  return vec4(acc.rgb / max(acc.a, 1e-4), acc.a);
+}`.trim();
+var rainOnGlass = {
+  kind: "shader",
+  id: "rain-on-glass",
+  name: "Rain on glass",
+  description: "Raindrops sliding down a window in fits and starts, leaving beaded trails behind them.",
+  category: "overlay",
+  tags: ["overlay", "rain", "weather", "moody", "window"],
+  transparent: true,
+  source: glsl(
+    `// Rain on glass: drops sliding down a pane, leaving trails of beads.
+uniform float uDensity;   // @control min=0 max=1 default=0.7 label="Density"
+uniform float uSpeed;     // @control min=0 max=3 default=1 label="Speed"
+uniform float uSize;      // @control min=0.5 max=2 default=1 label="Drop size"
+uniform vec3 uTint;       // @control color default=#CFE3F0 label="Tint"`,
+    HASH,
+    OVER,
+    `// One drop of radius r at offset d: a faint tinted body, a darker rim and a bright highlight.
+vec4 paintDrop(vec4 acc, vec2 d, float r, float px) {
+  float dist = length(d);
+  if (dist > r + px) return acc;
+  float m = (1.0 - smoothstep(r - 1.5 * px, r, dist)) * smoothstep(0.0, 2.0 * px, r);
+  vec2 n = d / max(r, 1e-5);
+  float l = length(n);
+  float rim = smoothstep(0.45, 1.0, l) * m;
+  float spec = (1.0 - smoothstep(0.0, 0.3, length(n - vec2(-0.3, 0.38)))) * m;
+  float caustic = (1.0 - smoothstep(0.0, 0.5, length(n - vec2(0.15, -0.5)))) * m;
+  acc = over(acc, uTint, m * 0.2);
+  acc = over(acc, vec3(0.0, 0.02, 0.05), rim * 0.5);
+  acc = over(acc, mix(uTint, vec3(1.0), 0.6), caustic * 0.3);
+  return over(acc, vec3(1.0), spec * 0.9);
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = fragCoord / iResolution.y;
+  float px = 1.0 / iResolution.y;
+  float t = iTime * uSpeed;
+  vec4 acc = vec4(0.0);
+
+  // Condensation: still beads slowly forming and drying up.
+  float beads = 30.0 / uSize;
+  vec2 bq = p * beads;
+  vec2 bid = floor(bq);
+  vec2 bh = hash22(bid);
+  float life = fract(iTime * 0.04 + bh.x * 7.0);
+  float br = (0.12 + 0.18 * bh.y) / beads * sin(3.14159 * life);
+  if (hash12(bid + 5.0) < uDensity) acc = paintDrop(acc, (fract(bq) - 0.5 - (bh - 0.5) * 0.4) / beads, br, px);
+
+  // Running drops: one per cell at most, sliding down a wavy path with a trail above.
+  for (int i = 0; i < 2; i++) {
+    float fi = float(i);
+    vec2 cell = vec2(0.12, 0.3) * uSize * (1.0 - 0.3 * fi);
+    vec2 q = p / cell + vec2(fi * 3.7, 0.0);
+    float column = floor(q.x);
+    q.y += t * 0.15 + hash12(vec2(column, fi)) * 9.0;
+    vec2 id = floor(q);
+    vec2 f = fract(q) - 0.5;
+    vec2 h = hash22(id + fi * 17.0);
+    if (h.x > uDensity) continue;
+    float tt = t * 1.2 + h.y * 6.28318;
+    float y = -0.38 * sin(tt + sin(tt + sin(tt) * 0.5));
+    float base = (h.y - 0.5) * 0.3;
+    float wobble = h.x * 6.28318;
+    float x = base + 0.03 * sin(y * 9.0 + wobble);
+    float aspect = cell.x / cell.y;
+    float r = cell.y * (0.05 + 0.04 * fract(h.x * 13.7));
+    vec2 d = vec2((f.x - x) * aspect, f.y - y) * cell.y;
+    d.y *= d.y > 0.0 ? 0.8 : 1.0;
+    acc = paintDrop(acc, d, r, px);
+    if (f.y > y) {
+      float rows = 10.0;
+      float row = floor(f.y * rows);
+      float tx = base + 0.03 * sin((row + 0.5) / rows * 9.0 + wobble);
+      vec2 bd = vec2((f.x - tx) * aspect, (fract(f.y * rows) - 0.5) / rows) * cell.y;
+      float fade = 1.0 - clamp((f.y - y) / (0.5 - y), 0.0, 1.0);
+      float keep = step(0.35, hash12(id * 3.1 + vec2(row, fi)));
+      acc = paintDrop(acc, bd, r * 0.35 * fade * keep, px);
+    }
+  }
+  fragColor = unpremultiply(acc);
+}`
+  ),
+  presets: [
+    { name: "Storm", values: { uDensity: 1, uSpeed: 1.8, uSize: 1.3 } },
+    { name: "Drizzle", values: { uDensity: 0.4, uSpeed: 0.6, uSize: 0.7 } }
+  ]
+};
+var snowfall = {
+  kind: "shader",
+  id: "snowfall",
+  name: "Snowfall",
+  description: "Layers of snowflakes drifting down on the wind, the far ones smaller and softer.",
+  category: "overlay",
+  tags: ["overlay", "snow", "winter", "festive", "particles"],
+  transparent: true,
+  source: glsl(
+    `// Snowfall: layered flakes drifting with the wind, far layers smaller and blurrier.
+uniform vec3 uColor;      // @control color default=#FFFFFF label="Colour"
+uniform float uDensity;   // @control min=0 max=1 default=0.6 label="Density"
+uniform float uWind;      // @control min=-2 max=2 default=0.3 label="Wind"
+uniform float uSpeed;     // @control min=0 max=3 default=1 label="Fall speed"
+uniform float uSize;      // @control min=0.2 max=2 default=1 label="Size"
+uniform int uLayers;      // @control min=1 max=6 default=4 label="Layers"`,
+    HASH,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = fragCoord / iResolution.y;
+  float px = 1.0 / iResolution.y;
+  float a = 0.0;
+  for (int i = 0; i < 6; i++) {
+    if (i >= uLayers) break;
+    float fi = float(i);
+    // Layer 0 is the farthest: smaller, slower, softer and fainter.
+    float depth = (fi + 1.0) / float(uLayers);
+    float scale = mix(22.0, 6.0, depth);
+    vec2 vel = vec2(uWind * 0.12 * (0.4 + depth), -uSpeed * mix(0.06, 0.25, depth));
+    vec2 q = (p - vel * iTime) * scale + fi * 11.3;
+    vec2 id = floor(q);
+    vec2 h = hash22(id);
+    if (hash12(id + 3.7) > uDensity) continue;
+    float phase = iTime * (0.4 + 0.6 * h.x) + h.y * 6.28318;
+    vec2 centre = (h - 0.5) * 0.3 + vec2(sin(phase) * 0.12, cos(phase * 0.7) * 0.05);
+    float d = length(fract(q) - 0.5 - centre);
+    float r = 0.06 * uSize * (0.6 + 0.8 * hash12(id + 9.1));
+    float soft = max(px * scale * 1.5, r * mix(0.9, 0.3, depth));
+    float flake = 1.0 - smoothstep(r - soft, r, d);
+    a = max(a, flake * mix(0.45, 1.0, depth));
+  }
+  fragColor = vec4(uColor, a);
+}`
+  ),
+  presets: [
+    { name: "Dust motes", values: { uColor: [1, 0.85, 0.63], uDensity: 0.25, uWind: 0.05, uSpeed: 0.08, uSize: 0.6, uLayers: 3 } },
+    { name: "Blizzard", values: { uDensity: 0.9, uWind: 1.6, uSpeed: 2, uLayers: 6 } }
+  ]
+};
+var lensFlare = {
+  kind: "shader",
+  id: "lens-flare",
+  name: "Lens flare",
+  description: "An anamorphic lens flare: a long horizontal streak and a chain of ghosts through the centre, following the pointer.",
+  category: "overlay",
+  tags: ["overlay", "cinematic", "light", "interactive", "sci-fi"],
+  transparent: true,
+  source: glsl(
+    `// Lens flare: an anamorphic streak and ghosts along the line through the centre.
+uniform vec2 uSource;     // @control min=-1 max=1 default=-0.45,0.4 label="Source"
+uniform vec3 uColor;      // @control color default=#FFC98A label="Colour"
+uniform float uStreak;    // @control min=0 max=2 default=1 label="Streak length"
+uniform float uIntensity; // @control min=0 max=2 default=1 label="Intensity"`,
+    HASH,
+    GLOW,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
+  float aspect = iResolution.x / iResolution.y;
+  vec2 src = iMouse.z > 0.0
+    ? (iMouse.xy - 0.5 * iResolution.xy) / iResolution.y
+    : uSource * vec2(aspect, 1.0) * 0.5;
+  vec2 d = p - src;
+  float r = length(d);
+  vec3 col = uColor * (exp(-r * 20.0) * 1.5 + 0.015 / (r + 0.015) * 0.3);
+  // The anamorphic streak: a bright thin line and a wider, fainter one, blue-shifted.
+  vec3 streakColor = mix(uColor, vec3(0.45, 0.65, 1.0), 0.6);
+  float len = uStreak + 1e-3;
+  col += streakColor * exp(-abs(d.y) * 220.0) * exp(-abs(d.x) / (0.5 * len));
+  col += streakColor * 0.4 * exp(-abs(d.y) * 60.0) * exp(-abs(d.x) / (0.25 * len));
+  // Ghosts sit on the line from the source through the centre, mostly on the far side.
+  for (int i = 0; i < 7; i++) {
+    float fi = float(i);
+    float along = mix(-1.6, 0.6, hash12(vec2(fi, 1.7)));
+    float gr = mix(0.015, 0.11, hash12(vec2(fi, 4.1)));
+    float gd = length(p - src * along);
+    vec3 tint = mix(uColor, vec3(0.4, 0.85, 1.0), hash12(vec2(fi, 8.3)));
+    float disc = (1.0 - smoothstep(gr * 0.6, gr, gd)) * 0.12;
+    float ring = exp(-abs(gd - gr) * 90.0) * 0.18;
+    col += tint * (hash12(vec2(fi, 2.9)) > 0.6 ? ring : disc);
+  }
+  fragColor = glow(col * uIntensity);
+}`
+  ),
+  presets: [
+    { name: "Sci-fi blue", values: { uColor: [0.5, 0.7, 1], uStreak: 1.8 } },
+    { name: "Golden hour", values: { uColor: [1, 0.7, 0.28], uStreak: 0.6, uIntensity: 1.3 } }
+  ]
+};
+var vignetteGrain = {
+  kind: "shader",
+  id: "vignette-grain",
+  name: "Vignette & grain",
+  description: "Darkened corners and fine animated film grain to lay over any picture.",
+  category: "overlay",
+  tags: ["overlay", "cinematic", "film", "grain", "vintage"],
+  transparent: true,
+  source: glsl(
+    `// Vignette & grain: darkened corners and fine grain, nothing else.
+uniform float uStrength;  // @control min=0 max=1 default=0.6 label="Strength"
+uniform float uRoundness; // @control min=0 max=1 default=0.5 label="Roundness"
+uniform float uSoftness;  // @control min=0.05 max=1 default=0.5 label="Softness"
+uniform float uGrain;     // @control min=0 max=0.3 default=0.08 label="Grain"
+uniform float uGrainSize; // @control min=1 max=4 default=1.5 label="Grain size (px)"`,
+    HASH,
+    OVER,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float aspect = iResolution.x / iResolution.y;
+  // 0 at the centre, 1 at the edges; rounder shapes measure across the frame's aspect.
+  vec2 q = abs(fragCoord / iResolution.xy - 0.5) * 2.0;
+  q.x *= mix(1.0, aspect, uRoundness * 0.5);
+  float n = mix(8.0, 2.0, uRoundness);
+  float dist = pow(pow(q.x, n) + pow(q.y, n), 1.0 / n);
+  float dark = smoothstep(1.25 - uSoftness * 1.2, 1.3, dist) * uStrength;
+  vec4 acc = over(vec4(0.0), vec3(0.0), dark);
+  float frame = mod(floor(iTime * 24.0), 64.0);
+  float g = hash12(floor(fragCoord / uGrainSize) + frame * vec2(17.31, 31.73)) - 0.5;
+  acc = over(acc, vec3(step(0.0, g)), abs(g) * uGrain * 2.0);
+  fragColor = unpremultiply(acc);
+}`
+  ),
+  presets: [
+    { name: "Subtle", values: { uStrength: 0.35, uGrain: 0.04 } },
+    { name: "Gritty", values: { uStrength: 0.8, uSoftness: 0.3, uGrain: 0.18, uGrainSize: 2 } }
+  ]
+};
+var scanlineSweep = {
+  kind: "shader",
+  id: "scanline-sweep",
+  name: "Scanline sweep",
+  description: "A bright scanning line with a glow and fading trail passing across, like a scanner or hologram.",
+  category: "overlay",
+  tags: ["overlay", "scan", "hologram", "sci-fi", "tech"],
+  transparent: true,
+  source: glsl(
+    `// Scanline sweep: a glowing line with a faint trail crossing the frame at intervals.
+uniform float uAngle;     // @control min=0 max=360 default=270 label="Direction (\xB0)"
+uniform float uSpeed;     // @control min=0.1 max=3 default=1 label="Speed"
+uniform float uWidth;     // @control min=0.001 max=0.05 default=0.006 label="Width"
+uniform vec3 uColor;      // @control color default=#4FF0FF label="Colour"
+uniform float uInterval;  // @control min=0 max=5 default=1 label="Pause (s)"
+uniform float uTrail;     // @control min=0 max=1 default=0.5 label="Trail"`,
+    GLOW,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
+  float aspect = iResolution.x / iResolution.y;
+  float px = 1.0 / iResolution.y;
+  float a = radians(uAngle);
+  vec2 dir = vec2(cos(a), sin(a));
+  float s = dot(p, dir);
+  // Start and end far enough past the frame that the trail has gone before the next pass.
+  float trailLength = 0.02 + 0.2 * uTrail;
+  float reach = 0.5 * (abs(dir.x) * aspect + abs(dir.y)) + uWidth * 6.0 + trailLength * 4.0;
+  float sweep = 1.5 / uSpeed;
+  float k = mod(iTime, sweep + uInterval) / sweep;
+  float d = s - mix(-reach, reach, k);
+  float core = 1.0 - smoothstep(uWidth * 0.5, uWidth * 0.5 + px, abs(d));
+  float halo = exp(-abs(d) / (uWidth * 3.0)) * 0.6;
+  float trail = d < 0.0 ? exp(d / trailLength) * 0.35 * uTrail : 0.0;
+  trail *= 0.75 + 0.25 * sin(fragCoord.y * 2.0);
+  fragColor = glow(uColor * (core * 1.5 + halo + trail));
+}`
+  ),
+  presets: [
+    { name: "Hologram", values: { uAngle: 90, uColor: [0.3, 1, 0.6], uSpeed: 0.6, uInterval: 0, uTrail: 0.9 } },
+    { name: "Barcode scanner", values: { uAngle: 0, uColor: [1, 0.15, 0.15], uSpeed: 2, uInterval: 0.2, uWidth: 3e-3 } }
+  ]
+};
+var spotlight = {
+  kind: "shader",
+  id: "spotlight",
+  name: "Spotlight",
+  description: "Darkness everywhere but a soft circle of light that follows the pointer or wanders on its own.",
+  category: "overlay",
+  tags: ["overlay", "interactive", "reveal", "focus", "dramatic"],
+  transparent: true,
+  source: glsl(
+    `// Spotlight: dark everywhere but a soft circle, at the pointer or drifting.
+uniform float uRadius;    // @control min=0.05 max=0.8 default=0.25 label="Radius"
+uniform float uSoftness;  // @control min=0 max=1 default=0.4 label="Softness"
+uniform float uDarkness;  // @control min=0 max=1 default=0.85 label="Darkness"
+uniform float uSpeed;     // @control min=0 max=2 default=0.3 label="Drift speed"
+uniform vec3 uShade;      // @control color default=#05050A label="Shade"`,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
+  float aspect = iResolution.x / iResolution.y;
+  float px = 1.0 / iResolution.y;
+  float t = iTime * uSpeed;
+  vec2 centre = iMouse.z > 0.0
+    ? (iMouse.xy - 0.5 * iResolution.xy) / iResolution.y
+    : vec2(sin(t * 2.0) * 0.32 * aspect, sin(t * 3.0 + 0.5) * 0.28);
+  float r = length(p - centre);
+  float dark = smoothstep(uRadius * (1.0 - uSoftness) - px, uRadius + px, r);
+  fragColor = vec4(uShade, dark * uDarkness);
+}`
+  ),
+  presets: [
+    { name: "Stage", values: { uRadius: 0.35, uSoftness: 0.15, uDarkness: 0.95, uSpeed: 0.15 } },
+    { name: "Torch", values: { uRadius: 0.18, uSoftness: 0.7, uDarkness: 1, uShade: [0.02, 0.01, 0] } }
+  ]
+};
+var embers = {
+  kind: "shader",
+  id: "embers",
+  name: "Embers",
+  description: "Glowing sparks rising from below, swaying and flickering out as they cool.",
+  category: "overlay",
+  tags: ["overlay", "fire", "sparks", "particles", "warm"],
+  transparent: true,
+  source: glsl(
+    `// Embers: sparks rising, swaying and flickering out as they cool.
+uniform int uCount;       // @control min=5 max=80 default=40 label="Sparks"
+uniform vec3 uHeat;       // @control color default=#FF7A1A label="Heat"
+uniform float uSpeed;     // @control min=0 max=3 default=1 label="Rise speed"
+uniform float uSize;      // @control min=0.3 max=3 default=1 label="Size"`,
+    HASH,
+    GLOW,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = fragCoord / iResolution.y;
+  float aspect = iResolution.x / iResolution.y;
+  vec3 col = vec3(0.0);
+  for (int i = 0; i < 80; i++) {
+    if (i >= uCount) break;
+    float fi = float(i);
+    vec2 h = hash22(vec2(fi, 1.3));
+    float clock = iTime * uSpeed * 0.18 * (0.6 + 0.8 * h.y) + h.x;
+    float life = fract(clock);
+    // Each life starts somewhere new along the bottom.
+    vec2 seed = vec2(fi, floor(clock));
+    float x = hash12(seed) * aspect + 0.04 * sin(life * 8.0 + fi) + life * 0.15 * (hash12(seed + 2.0) - 0.5);
+    float y = life * (0.5 + 0.7 * hash12(seed + 4.0)) - 0.02;
+    float r = 0.005 * uSize * (0.5 + hash12(seed + 6.0));
+    vec2 d = p - vec2(x, y);
+    d.y *= 0.6;
+    float dist = length(d);
+    if (dist > r * 14.0) continue;
+    float fade = smoothstep(0.0, 0.08, life) * (1.0 - smoothstep(0.45, 1.0, life));
+    float flicker = 0.6 + 0.4 * sin(iTime * 17.0 + fi * 3.7) * sin(iTime * 7.3 + fi);
+    vec3 heat = mix(vec3(1.0, 0.95, 0.75), uHeat, smoothstep(0.0, 0.5, life));
+    heat = mix(heat, uHeat * vec3(0.8, 0.25, 0.1), smoothstep(0.5, 1.0, life));
+    float core = 1.0 - smoothstep(r * 0.4, r, dist);
+    float halo = exp(-dist / (r * 2.5)) * 0.35;
+    col += heat * (core * 1.5 + halo) * fade * flicker;
+  }
+  fragColor = glow(col);
+}`
+  ),
+  presets: [
+    { name: "Bonfire", values: { uCount: 80, uSpeed: 1.6, uSize: 1.3 } },
+    { name: "Magic sparks", values: { uHeat: [0.55, 0.4, 1], uCount: 30, uSpeed: 0.6 } }
+  ]
+};
+var shineSweep = {
+  kind: "shader",
+  id: "shine-sweep",
+  name: "Shine sweep",
+  description: "A soft diagonal gloss band gliding across now and then, for cards and buttons.",
+  category: "overlay",
+  tags: ["overlay", "ui", "gloss", "premium", "button"],
+  transparent: true,
+  source: glsl(
+    `// Shine sweep: a soft gloss band crossing the frame at intervals.
+uniform float uAngle;     // @control min=-60 max=60 default=25 label="Tilt (\xB0)"
+uniform float uWidth;     // @control min=0.02 max=0.5 default=0.15 label="Width"
+uniform float uIntensity; // @control min=0 max=1 default=0.6 label="Intensity"
+uniform float uInterval;  // @control min=1 max=8 default=3 label="Every (s)"
+uniform vec3 uColor;      // @control color default=#FFFFFF label="Colour"`,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
+  float aspect = iResolution.x / iResolution.y;
+  float slope = tan(radians(uAngle));
+  float s = p.x + p.y * slope;
+  float reach = 0.5 * aspect + 0.5 * abs(slope) + uWidth;
+  // Each sweep takes 0.9 s, then waits for the next.
+  float k = clamp(mod(iTime, uInterval) / 0.9, 0.0, 1.0);
+  k = k * k * (3.0 - 2.0 * k);
+  float d = (s - mix(-reach, reach, k)) / uWidth;
+  float band = exp(-d * d * 4.0) * 0.7 + exp(-d * d * 60.0) * 0.5;
+  fragColor = vec4(uColor, clamp(band * uIntensity, 0.0, 1.0));
+}`
+  ),
+  presets: [
+    { name: "Gold foil", values: { uColor: [1, 0.9, 0.6], uWidth: 0.25, uIntensity: 0.5 } },
+    { name: "Quick glint", values: { uWidth: 0.06, uIntensity: 0.9, uInterval: 1.5, uAngle: 35 } }
+  ]
+};
+var frostCreep = {
+  kind: "shader",
+  id: "frost-creep",
+  name: "Frost creep",
+  description: "Ice crystals creeping in from the edges of the frame and melting back.",
+  category: "overlay",
+  tags: ["overlay", "ice", "winter", "frozen", "reveal"],
+  transparent: true,
+  loop: 8,
+  source: glsl(
+    `// Frost creep: crystalline frost growing in from the edges.
+uniform bool uAnimate;    // @control default=true label="Animate"
+uniform float uCoverage;  // @control min=0 max=1 default=0.6 label="Coverage (when still)"
+uniform float uScale;     // @control min=1 max=10 default=4 label="Crystal size"
+uniform vec3 uColor;      // @control color default=#DDF2FF label="Frost"`,
+    HASH,
+    NOISE,
+    FBM,
+    `// Voronoi: x = distance to the nearest point, y = to the second, zw = the nearest cell.
+vec4 voronoi(vec2 q) {
+  vec2 id = floor(q);
+  vec2 f = fract(q);
+  float f1 = 8.0;
+  float f2 = 8.0;
+  vec2 nearest = id;
+  for (int j = -1; j <= 1; j++) {
+    for (int i = -1; i <= 1; i++) {
+      vec2 o = vec2(float(i), float(j));
+      float d = length(o + hash22(id + o) - f);
+      if (d < f1) {
+        f2 = f1;
+        f1 = d;
+        nearest = id + o;
+      } else if (d < f2) {
+        f2 = d;
+      }
+    }
+  }
+  return vec4(f1, f2, nearest);
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = fragCoord / iResolution.y;
+  float coverage = uAnimate ? 0.5 - 0.5 * cos(iTime * 6.28318 / 8.0) : uCoverage;
+  // Distance in from the nearest edge, roughened by noise and stepped per crystal.
+  float edge = min(min(fragCoord.x, iResolution.x - fragCoord.x), min(fragCoord.y, iResolution.y - fragCoord.y)) / iResolution.y;
+  vec4 v = voronoi(p * uScale * 3.0);
+  float n = fbm(p * uScale * 0.8, 5);
+  float g = edge + (n - 0.5) * 0.3 + (hash12(v.zw) - 0.5) * 0.04;
+  float front = mix(-0.25, 0.75, coverage);
+  float frost = 1.0 - smoothstep(front - 0.06, front, g);
+  if (frost <= 0.0) {
+    fragColor = vec4(0.0);
+    return;
+  }
+  // Facets catch the light differently; their edges and fine needles glint.
+  float facet = hash12(v.zw + 3.1);
+  float ridges = 1.0 - smoothstep(0.0, 0.06, v.y - v.x);
+  float needles = smoothstep(0.55, 0.8, fbm(p * uScale * vec2(6.0, 1.5) + v.zw, 3));
+  float fresh = 1.0 - smoothstep(0.0, 0.35, front - g);
+  float rim = smoothstep(front - 0.06, front - 0.015, g);
+  vec3 col = mix(uColor * vec3(0.8, 0.9, 1.0), vec3(1.0), facet * 0.4 + ridges * 0.6 + rim * 0.5 + needles * 0.4);
+  float alpha = frost * clamp(0.35 + 0.25 * (1.0 - fresh) + 0.2 * facet + 0.35 * ridges + 0.25 * needles + 0.3 * rim, 0.0, 1.0);
+  fragColor = vec4(min(col, 1.0), alpha);
+}`
+  ),
+  presets: [
+    { name: "Hoarfrost", values: { uAnimate: false, uCoverage: 0.85, uScale: 6 } },
+    { name: "Icy blue", values: { uColor: [0.62, 0.83, 1], uScale: 2.5 } }
+  ]
+};
+var overlayEffects = [
+  rainOnGlass,
+  snowfall,
+  lensFlare,
+  vignetteGrain,
+  scanlineSweep,
+  spotlight,
+  embers,
+  shineSweep,
+  frostCreep
+];
+
 // src/catalog/shaders/retro.ts
 var synthwaveGrid = {
   kind: "shader",
@@ -1548,114 +2059,1387 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   ]
 };
 
-// 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;
+// src/catalog/shaders/text.ts
+var shaderText = {
+  kind: "shader",
+  id: "shader-text",
+  name: "Shader text",
+  description: "A title filled with a living texture (plasma, fire, caustics or liquid chrome), with a soft glow and outline.",
+  category: "text",
+  tags: ["text", "title", "plasma", "fire", "chrome", "glow"],
+  source: glsl(
+    `// Shader text: the letters of a text image filled with an animated pattern.
+uniform sampler2D uText;     // @control filter=linear wrap=clamp default=${textImage("FLAIR")} label="Text"
+uniform int uFill;           // @control min=0 max=3 default=0 label="Fill (0 plasma, 1 fire, 2 caustics, 3 chrome)"
+uniform vec3 uBackground;    // @control color default=#0A0A12 label="Background"
+uniform vec3 uTint;          // @control color default=#FFFFFF label="Tint"
+uniform float uSize;         // @control min=0.3 max=1 default=0.9 label="Text size"
+uniform float uSpeed;        // @control min=0 max=3 default=1 label="Speed"
+uniform float uGlow;         // @control min=0 max=2 default=0.6 label="Glow"
+uniform float uOutline;      // @control min=0 max=0.02 default=0.004 label="Outline width"
+uniform vec3 uOutlineColor;  // @control color default=#FFFFFF label="Outline"`,
+    HASH,
+    NOISE,
+    FBM,
+    PALETTE,
+    `// The text image's alpha at frame point p (height 1, centred), the image contained in uSize of the frame.
+float letters(vec2 p) {
+  vec2 size = vec2(textureSize(uText, 0));
+  float aspect = size.x / max(size.y, 1.0);
+  float frame = iResolution.x / iResolution.y;
+  float h = min(uSize, frame * uSize / aspect);
+  vec2 uv = p / vec2(h * aspect, h) + 0.5;
+  if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) return 0.0;
+  return texture(uText, uv).a;
 }
-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;
+
+vec3 plasmaFill(vec2 p, float t) {
+  float v = sin(p.x * 6.0 + t) + sin(p.y * 7.0 - t * 1.3) + sin((p.x + p.y) * 5.0 + t * 0.7) + sin(length(p * 8.0) - t * 2.0);
+  return palette(v * 0.125 + 0.5 + t * 0.05, vec3(0.5), vec3(0.5), vec3(1.0), vec3(0.0, 0.33, 0.67));
 }
-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))];
+
+vec3 fireFill(vec2 p, float t) {
+  float n = fbm(vec2(p.x * 5.0, p.y * 3.0 - t * 1.8), 5);
+  float heat = clamp(1.1 - (p.y + 0.3) * 1.6 + (n - 0.5) * 1.2, 0.0, 1.0);
+  return vec3(1.0, 0.35, 0.05) * heat * 1.4 + vec3(1.0, 0.85, 0.3) * pow(heat, 3.0) + vec3(0.25, 0.0, 0.0);
 }
-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);
-    }
+
+vec3 causticsFill(vec2 p, float t) {
+  vec2 q = p * 6.0;
+  vec2 i = q;
+  float c = 1.0;
+  for (int n = 0; n < 5; n++) {
+    float tn = t * 0.5 * (1.0 - 3.5 / float(n + 1));
+    i = q + vec2(cos(tn - i.x) + sin(tn + i.y), sin(tn - i.y) + cos(tn + i.x));
+    c += 1.0 / length(vec2(q.x / (sin(i.x + tn) / 0.005), q.y / (cos(i.y + tn) / 0.005)));
   }
-  return issues;
-}
-function written(control, value) {
-  if (control.color && Array.isArray(value)) return rgbToHex(value);
-  if (Array.isArray(value)) return value.join(" ");
-  return value;
+  c = 1.17 - pow(c / 5.0, 1.4);
+  float light = pow(abs(c), 8.0);
+  return clamp(vec3(0.0, 0.3, 0.5) + light * vec3(0.7, 1.0, 1.0), 0.0, 1.0);
 }
-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
-  };
+
+// Liquid chrome: a horizon reflection bent by the letters' bevel and a slow warp.
+vec3 chromeFill(vec2 p, float t, vec2 normal) {
+  float warp = fbm(p * 3.0 + vec2(t * 0.3, -t * 0.2), 4) - 0.5;
+  float y = p.y * 2.5 + normal.y * 1.5 + warp * 1.2 + 0.15 * sin(p.x * 4.0 + t);
+  vec3 sky = mix(vec3(0.85, 0.9, 1.0), vec3(0.3, 0.4, 0.6), clamp(y, 0.0, 1.0));
+  vec3 ground = mix(vec3(0.25, 0.2, 0.2), vec3(0.05), clamp(-y, 0.0, 1.0));
+  vec3 col = y > 0.0 ? sky : ground;
+  col += smoothstep(0.06, 0.0, abs(y)) * 0.9;
+  return col + pow(max(0.0, normal.x * 0.7 + normal.y * 0.7), 6.0) * 0.8;
 }
-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]));
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
+  float t = iTime * uSpeed;
+  float mask = letters(p);
+  // A soft bevel from the mask's slope, for chrome's reflections.
+  float e = 0.004;
+  vec2 normal = vec2(letters(p + vec2(e, 0.0)) - letters(p - vec2(e, 0.0)), letters(p + vec2(0.0, e)) - letters(p - vec2(0.0, e)));
+  // Glow and outline: the mask's average and maximum on rings round the point.
+  float glow = 0.0;
+  float ring = 0.0;
+  for (int i = 0; i < 12; i++) {
+    float a = float(i) * 0.5236;
+    vec2 dir = vec2(cos(a), sin(a));
+    glow += letters(p + dir * 0.02) + letters(p + dir * 0.05) * 0.6;
+    ring = max(ring, letters(p + dir * uOutline));
   }
-  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) };
-}
+  glow /= 19.2;
+  vec3 fill = uFill == 0 ? plasmaFill(p, t) : uFill == 1 ? fireFill(p, t) : uFill == 2 ? causticsFill(p, t) : chromeFill(p, t, normal * 2.0);
+  fill *= uTint;
+  vec3 col = uBackground + fill * glow * uGlow;
+  col = mix(col, uOutlineColor, clamp(ring - mask, 0.0, 1.0) * step(0.0001, uOutline));
+  col = mix(col, fill, mask);
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Inferno", values: { uFill: 1, uBackground: [0.05, 0.01, 0], uGlow: 1.2, uOutline: 0 } },
+    { name: "Pool", values: { uFill: 2, uBackground: [0, 0.08, 0.14], uOutlineColor: [0.7, 0.95, 1] } },
+    { name: "Chrome", values: { uFill: 3, uBackground: [0.06, 0.06, 0.08], uGlow: 0.3, uOutline: 2e-3 } }
+  ]
+};
+var textShaders = [shaderText];
+
+// src/catalog/shaders/treatments.ts
+var imageKenBurns = {
+  kind: "shader",
+  id: "image-ken-burns",
+  name: "Ken Burns",
+  description: "A slow documentary-style pan and zoom across an image, easing in and out and back again.",
+  category: "image",
+  tags: ["image", "camera", "documentary", "slideshow"],
+  loop: 12,
+  source: glsl(
+    `// Ken Burns: a slow, eased pan and zoom across a cover-fitted image, there and back.
+uniform sampler2D uImage;  // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.landscape} label="Image"
+uniform float uZoomStart;  // @control min=1 max=3 default=1.05 label="Start zoom"
+uniform float uZoomEnd;    // @control min=1 max=3 default=1.4 label="End zoom"
+uniform float uAngle;      // @control min=0 max=360 default=20 label="Pan direction (\xB0)"
+uniform float uDuration;   // @control min=2 max=30 default=6 label="Duration (s)"`,
+    PICTURE,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  // Cover-fit: the share of the image visible across and up (the test card fits the frame).
+  vec2 size = vec2(textureSize(uImage, 0));
+  float frameAspect = iResolution.x / iResolution.y;
+  float imageAspect = size.x > 1.0 ? size.x / size.y : frameAspect;
+  vec2 cover = frameAspect > imageAspect ? vec2(1.0, imageAspect / frameAspect) : vec2(frameAspect / imageAspect, 1.0);
+  // 0 \u2192 1 over one duration, back over the next, eased at both ends.
+  float k = 0.5 - 0.5 * cos(3.14159265 * iTime / max(uDuration, 0.1));
+  float zoom = max(mix(uZoomStart, uZoomEnd, k), 1.0);
+  vec2 window = cover / zoom;
+  // Pan as far as the window allows in the chosen direction, from one side to the other.
+  float a = radians(uAngle);
+  vec2 pan = vec2(cos(a), sin(a)) * (1.0 - window) * 0.5 * (2.0 * k - 1.0);
+  vec3 col = picture(uImage, 0.5 + (uv - 0.5) * window + pan);
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Push in", values: { uZoomStart: 1, uZoomEnd: 1.5, uAngle: 0 } },
+    { name: "Pull out", values: { uZoomStart: 1.6, uZoomEnd: 1.05, uAngle: 200 } },
+    { name: "Slow drift", values: { uZoomStart: 1.2, uZoomEnd: 1.25, uAngle: 0, uDuration: 12 } }
+  ]
+};
+var imageAscii = {
+  kind: "shader",
+  id: "image-ascii",
+  name: "ASCII art",
+  description: "An image drawn as text characters picked by brightness, in one ink or the picture's own colours.",
+  category: "image",
+  tags: ["image", "ascii", "text", "terminal", "retro"],
+  source: glsl(
+    `// ASCII art: each cell of the image becomes a character, denser for brighter cells.
+uniform sampler2D uImage;  // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.landscape} label="Image"
+uniform float uCell;       // @control min=4 max=32 default=9 label="Cell size (px)"
+uniform int uColourMode;   // @control min=0 max=1 default=0 label="Colour (0 ink, 1 original)"
+uniform vec3 uInk;         // @control color default=#A3E635 label="Ink"
+uniform vec3 uBackground;  // @control color default=#0A0F0A label="Background"`,
+    PICTURE,
+    `// 5 \xD7 7 glyphs, lightest to densest: bit (x + 5y) of .x holds rows 0\u20133 (top first), of .y rows 4\u20136.
+const ivec2 GLYPHS[10] = ivec2[10](
+  ivec2(0, 0),            // space
+  ivec2(0, 6336),         // .
+  ivec2(1015808, 0),      // -
+  ivec2(6336, 198),       // :
+  ivec2(1020032, 132),    // +
+  ivec2(31744, 31),       // =
+  ivec2(1030816, 686),    // *
+  ivec2(139875, 25378),   // %
+  ivec2(359754, 10591),   // #
+  ivec2(718382, 30781)    // @
+);
+
+// Whether glyph g has ink at column x (0\u20134), row y (0\u20136, top first).
+float glyphBit(ivec2 g, int x, int y) {
+  if (x < 0 || x > 4 || y < 0 || y > 6) return 0.0;
+  int bits = y < 4 ? (g.x >> (x + 5 * y)) : (g.y >> (x + 5 * (y - 4)));
+  return float(bits & 1);
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  // Cells are 7 \xD7 9 units: the 5 \xD7 7 glyph and a unit of margin around it.
+  vec2 cell = vec2(uCell, uCell * 9.0 / 7.0);
+  vec2 id = floor(fragCoord / cell);
+  vec2 local = fract(fragCoord / cell);
+  vec3 src = picture(uImage, (id + 0.5) * cell / iResolution.xy);
+  float l = pow(clamp(dot(src, vec3(0.2126, 0.7152, 0.0722)), 0.0, 1.0), 0.8);
+  int level = int(min(l * 10.0, 9.0));
+  int gx = int(floor(local.x * 7.0)) - 1;
+  int gy = int(floor((1.0 - local.y) * 9.0)) - 1;
+  float ink = glyphBit(GLYPHS[level], gx, gy);
+  vec3 tint = uColourMode == 1 ? src * 1.25 : uInk;
+  fragColor = vec4(mix(uBackground, tint, ink), 1.0);
+}`
+  ),
+  presets: [
+    { name: "Terminal", values: { uColourMode: 0, uInk: [0.64, 0.9, 0.21], uBackground: [0.04, 0.06, 0.04] } },
+    { name: "Colour", values: { uColourMode: 1, uBackground: [0.02, 0.02, 0.03] } },
+    { name: "Typewriter", values: { uColourMode: 0, uInk: [0.1, 0.1, 0.12], uBackground: [0.96, 0.94, 0.88], uCell: 7 } }
+  ]
+};
+var imageShatter = {
+  kind: "shader",
+  id: "image-shatter",
+  name: "Shatter",
+  description: "An image breaking into glass-like shards that fly apart, spin and reassemble in a loop.",
+  category: "image",
+  tags: ["image", "shatter", "transition", "voronoi", "explode"],
+  loop: 5,
+  source: glsl(
+    `// Shatter: Voronoi shards of the image fly apart, spin and come back together.
+uniform sampler2D uImage;  // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.landscape} label="Image"
+uniform bool uAuto;        // @control default=true label="Animate"
+uniform float uProgress;   // @control min=0 max=1 default=0.5 label="Progress (when still)"
+uniform float uCount;      // @control min=3 max=30 default=8 label="Shards (across height)"
+uniform float uSpread;     // @control min=0 max=2 default=0.6 label="Spread"
+uniform float uSpin;       // @control min=0 max=6.28 default=1.5 label="Spin"
+uniform vec3 uBackground;  // @control color default=#0B0B12 label="Background"`,
+    HASH,
+    ROTATE,
+    PICTURE,
+    `vec2 shardSite(vec2 cell) {
+  return cell + 0.15 + 0.7 * hash22(cell);
+}
+
+// The shard (cell) under grid point q, and how far q is from its edge (xy: cell, z: edge gap).
+vec3 shardAt(vec2 q) {
+  vec2 base = floor(q);
+  float d1 = 1e9;
+  float d2 = 1e9;
+  vec2 id = base;
+  for (int j = -1; j <= 1; j++) {
+    for (int i = -1; i <= 1; i++) {
+      vec2 c = base + vec2(float(i), float(j));
+      float d = distance(q, shardSite(c));
+      if (d < d1) {
+        d2 = d1;
+        d1 = d;
+        id = c;
+      } else if (d < d2) {
+        d2 = d;
+      }
+    }
+  }
+  return vec3(id, d2 - d1);
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float k = uAuto ? smoothstep(0.2, 0.8, 0.5 - 0.5 * cos(iTime * 6.28318 / 5.0)) : uProgress;
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y * uCount;
+  // Shard centres move out from the middle; shards keep their size, so gaps open between them.
+  float grow = 1.0 + uSpread * k;
+  vec2 base = floor(p / grow);
+  vec3 col = uBackground;
+  float top = -1.0;
+  for (int j = -2; j <= 2; j++) {
+    for (int i = -2; i <= 2; i++) {
+      vec2 c = base + vec2(float(i), float(j));
+      vec2 site = shardSite(c);
+      vec2 h = hash22(c + 41.7);
+      vec2 centre = site * grow + (h - 0.5) * 1.2 * k;
+      float a = (h.x - 0.5) * 2.0 * uSpin * k;
+      // Back to where this pixel would sit in the unbroken image, if it is on this shard.
+      vec2 q = rot(-a) * (p - centre) + site;
+      vec3 s = shardAt(q);
+      if (s.x == c.x && s.y == c.y && h.y > top) {
+        top = h.y;
+        vec2 uv = q / uCount * iResolution.y / iResolution.xy + 0.5;
+        vec3 shard = picture(uImage, uv);
+        shard *= 1.0 - 0.35 * k * abs(sin(a));
+        shard += k * 0.35 * smoothstep(0.06, 0.0, s.z);
+        col = shard;
+      }
+    }
+  }
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Burst", values: { uCount: 6, uSpread: 1.4, uSpin: 3 } },
+    { name: "Crackle", values: { uCount: 18, uSpread: 0.15, uSpin: 0.4 } }
+  ]
+};
+var imageMelt = {
+  kind: "shader",
+  id: "image-melt",
+  name: "Melt",
+  description: "An image melting and dripping downwards in slow, noisy runs.",
+  category: "image",
+  tags: ["image", "melt", "drip", "psychedelic", "distortion"],
+  source: glsl(
+    `// Melt: noise-driven runs drag the image downwards.
+uniform sampler2D uImage;  // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.landscape} label="Image"
+uniform float uAmount;     // @control min=0 max=0.6 default=0.18 label="Amount"
+uniform float uSpeed;      // @control min=0 max=2 default=0.35 label="Flow speed"
+uniform float uScale;      // @control min=1 max=20 default=6 label="Scale"`,
+    HASH,
+    NOISE,
+    FBM,
+    PICTURE,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  float t = iTime * uSpeed;
+  // Columns run at different lengths; thin drips ride on top; runs grow towards the bottom.
+  float runs = fbm(vec2(uv.x * uScale, t * 0.5), 4);
+  float drips = pow(vnoise(vec2(uv.x * uScale * 5.0, t * 0.3 + 7.0)), 3.0);
+  float drop = uAmount * (0.7 * runs + 0.6 * drips) * (0.35 + 0.65 * (1.0 - uv.y));
+  float wobble = (vnoise(vec2(uv.y * uScale * 2.0 - t, uv.x * uScale)) - 0.5) * uAmount * 0.12;
+  vec2 st = clamp(uv + vec2(wobble, drop), 0.0, 1.0);
+  vec3 col = picture(uImage, st);
+  // A little sheen along the leading edges of the runs.
+  col += 0.12 * smoothstep(0.55, 0.9, drips) * uAmount * 4.0;
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Slow ooze", values: { uAmount: 0.12, uSpeed: 0.15, uScale: 4 } },
+    { name: "Meltdown", values: { uAmount: 0.45, uSpeed: 0.8, uScale: 9 } }
+  ]
+};
+var imageRisograph = {
+  kind: "shader",
+  id: "image-risograph",
+  name: "Risograph",
+  description: "An image printed in two posterized, slightly misregistered inks on grainy paper.",
+  category: "image",
+  tags: ["image", "print", "riso", "editorial", "poster"],
+  source: glsl(
+    `// Risograph: two posterized ink layers, out of register, on grainy paper.
+uniform sampler2D uImage;  // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.landscape} label="Image"
+uniform int uLevels;       // @control min=2 max=8 default=4 label="Levels"
+uniform vec3 uInkA;        // @control color default=#FF48B0 label="Ink A"
+uniform vec3 uInkB;        // @control color default=#0078BF label="Ink B"
+uniform float uOffset;     // @control min=0 max=20 default=4 label="Misregistration (px)"
+uniform float uGrain;      // @control min=0 max=1 default=0.4 label="Grain"
+uniform vec3 uPaper;       // @control color default=#F5EFE0 label="Paper"`,
+    HASH,
+    NOISE,
+    PICTURE,
+    `// Ink density stepped to a few levels, with grain dithering the steps.
+float posterize(float d, float levels, float grain) {
+  return clamp(floor(d * (levels - 1.0) + 0.5 + grain) / (levels - 1.0), 0.0, 1.0);
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec2 shift = vec2(uOffset, uOffset * 0.6) / iResolution.xy;
+  float levels = float(uLevels);
+  float fibre = hash12(fragCoord);
+  float mottle = vnoise(fragCoord / 6.0);
+  // Two separations: ink A where the picture lacks green, ink B where it lacks red.
+  vec3 a = picture(uImage, uv + shift);
+  vec3 b = picture(uImage, uv - shift);
+  float dA = posterize(1.0 - a.g, levels, (hash12(fragCoord + 17.0) - 0.5) * uGrain * 0.6);
+  float dB = posterize(1.0 - b.r, levels, (hash12(fragCoord + 53.0) - 0.5) * uGrain * 0.6);
+  // Ink never lays down evenly: mottled, with paper showing through.
+  float cover = 0.9 * (1.0 - uGrain * 0.35 * mottle);
+  vec3 col = uPaper * (1.0 - uGrain * 0.08 * fibre);
+  col *= mix(vec3(1.0), uInkA, dA * cover);
+  col *= mix(vec3(1.0), uInkB, dB * cover);
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Pink & blue", values: { uInkA: [1, 0.28, 0.69], uInkB: [0, 0.47, 0.75] } },
+    { name: "Sunflower & teal", values: { uInkA: [1, 0.71, 0], uInkB: [0, 0.51, 0.54], uLevels: 3 } },
+    { name: "Red & black", values: { uInkA: [1, 0.25, 0.25], uInkB: [0.15, 0.15, 0.17], uOffset: 2, uGrain: 0.6 } }
+  ]
+};
+var imageThermal = {
+  kind: "shader",
+  id: "image-thermal",
+  name: "Thermal",
+  description: "An image seen through a heat camera or night-vision goggles.",
+  category: "image",
+  tags: ["image", "thermal", "night-vision", "surveillance", "colour"],
+  source: glsl(
+    `// Thermal: brightness mapped to a heat palette, or to green night-vision phosphor.
+uniform sampler2D uImage;  // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.landscape} label="Image"
+uniform int uMode;         // @control min=0 max=1 default=0 label="Palette (0 thermal, 1 night vision)"
+uniform float uNoise;      // @control min=0 max=0.5 default=0.04 label="Noise"
+uniform float uContrast;   // @control min=0.5 max=3 default=1.3 label="Contrast"`,
+    HASH,
+    PICTURE,
+    `vec3 heat(float t) {
+  vec3 c = mix(vec3(0.0, 0.0, 0.08), vec3(0.15, 0.0, 0.55), smoothstep(0.0, 0.2, t));
+  c = mix(c, vec3(0.75, 0.0, 0.55), smoothstep(0.2, 0.4, t));
+  c = mix(c, vec3(1.0, 0.25, 0.0), smoothstep(0.4, 0.6, t));
+  c = mix(c, vec3(1.0, 0.8, 0.0), smoothstep(0.6, 0.8, t));
+  return mix(c, vec3(1.0, 1.0, 0.9), smoothstep(0.8, 1.0, t));
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  // Heat spreads, so take a soft average around the pixel.
+  vec2 px = 2.0 / iResolution.xy;
+  vec3 src = 0.4 * picture(uImage, uv) + 0.15 * (picture(uImage, uv + vec2(px.x, 0.0)) + picture(uImage, uv - vec2(px.x, 0.0)) +
+             picture(uImage, uv + vec2(0.0, px.y)) + picture(uImage, uv - vec2(0.0, px.y)));
+  float l = dot(src, vec3(0.2126, 0.7152, 0.0722));
+  l = clamp((l - 0.5) * uContrast + 0.5, 0.0, 1.0);
+  float frame = floor(iTime * 24.0);
+  float grain = hash12(fragCoord + frame * 37.1) - 0.5;
+  vec3 col;
+  if (uMode == 0) {
+    col = heat(clamp(l + grain * uNoise, 0.0, 1.0));
+  } else {
+    float g = clamp(l * 1.2 + grain * uNoise * 2.0, 0.0, 1.0);
+    col = vec3(0.12, 1.0, 0.25) * g + vec3(0.02, 0.06, 0.02);
+    col *= 0.94 + 0.06 * sin(fragCoord.y * 2.0);
+    col *= 0.97 + 0.03 * hash12(vec2(frame, 3.0));
+    vec2 d = (uv - 0.5) * vec2(iResolution.x / iResolution.y, 1.0);
+    col *= smoothstep(0.75, 0.3, length(d));
+  }
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Thermal", values: { uMode: 0, uNoise: 0.04, uContrast: 1.3 } },
+    { name: "Night vision", values: { uMode: 1, uNoise: 0.2, uContrast: 1.8 } }
+  ]
+};
+var imageEdgeGlow = {
+  kind: "shader",
+  id: "image-edge-glow",
+  name: "Edge glow",
+  description: "An image's edges traced as glowing neon lines over a dimmed picture, with a travelling pulse.",
+  category: "image",
+  tags: ["image", "neon", "edges", "outline", "cyber"],
+  loop: 2,
+  source: glsl(
+    `// Edge glow: Sobel edges as neon lines and a soft halo over the dimmed image.
+uniform sampler2D uImage;  // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.landscape} label="Image"
+uniform float uThreshold;  // @control min=0 max=1 default=0.15 label="Threshold"
+uniform vec3 uGlow;        // @control color default=#22D3EE label="Glow colour"
+uniform float uWidth;      // @control min=0.5 max=4 default=1.5 label="Glow width (px)"
+uniform float uDim;        // @control min=0 max=1 default=0.75 label="Dim image"
+uniform float uPulse;      // @control min=0 max=1 default=0.4 label="Pulse"`,
+    PICTURE,
+    `float luma(vec2 uv) {
+  return dot(picture(uImage, uv), vec3(0.2126, 0.7152, 0.0722));
+}
+
+// Sobel edge strength, sampling d apart (in uv).
+float sobel(vec2 uv, vec2 d) {
+  float tl = luma(uv + vec2(-d.x, d.y));
+  float t = luma(uv + vec2(0.0, d.y));
+  float tr = luma(uv + d);
+  float l = luma(uv - vec2(d.x, 0.0));
+  float r = luma(uv + vec2(d.x, 0.0));
+  float bl = luma(uv - d);
+  float b = luma(uv - vec2(0.0, d.y));
+  float br = luma(uv + vec2(d.x, -d.y));
+  float gx = tr + 2.0 * r + br - tl - 2.0 * l - bl;
+  float gy = tl + 2.0 * t + tr - bl - 2.0 * b - br;
+  return length(vec2(gx, gy));
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec2 d = uWidth / iResolution.xy;
+  float line = smoothstep(uThreshold, uThreshold + 0.15, sobel(uv, d));
+  float halo = smoothstep(uThreshold, uThreshold + 0.5, sobel(uv, d * 3.0));
+  vec2 c = (uv - 0.5) * vec2(iResolution.x / iResolution.y, 1.0);
+  float pulse = 1.0 - uPulse * (0.5 + 0.5 * sin(iTime * 3.14159265 - length(c) * 12.0));
+  vec3 col = picture(uImage, uv) * (1.0 - uDim);
+  col += uGlow * (line + 0.45 * halo) * pulse;
+  col += vec3(1.0) * line * line * 0.35 * pulse;
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Cyan", values: { uGlow: [0.13, 0.83, 0.93] } },
+    { name: "Magenta blackout", values: { uGlow: [0.93, 0.28, 0.6], uDim: 1, uThreshold: 0.1 } }
+  ]
+};
+var imageTiltShift = {
+  kind: "shader",
+  id: "image-tilt-shift",
+  name: "Tilt-shift",
+  description: "An image blurred outside a sharp horizontal band, with punchy colour, so it looks like a miniature.",
+  category: "image",
+  tags: ["image", "blur", "miniature", "photography", "depth"],
+  source: glsl(
+    `// Tilt-shift: blur away from a focus band, plus saturation, for the miniature look.
+uniform sampler2D uImage;  // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.city} label="Image"
+uniform float uFocus;      // @control min=0 max=1 default=0.45 label="Focus position"
+uniform float uBand;       // @control min=0 max=0.6 default=0.12 label="Focus band width"
+uniform float uBlur;       // @control min=0 max=30 default=12 label="Blur (px)"
+uniform float uSaturation; // @control min=0 max=2 default=1.4 label="Saturation"`,
+    PICTURE,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  float away = smoothstep(uBand * 0.5, uBand * 0.5 + 0.3, abs(uv.y - uFocus));
+  float radius = away * uBlur;
+  // A 24-tap golden-angle disc.
+  vec3 sum = vec3(0.0);
+  for (int i = 0; i < 24; i++) {
+    float fi = float(i);
+    float r = sqrt((fi + 0.5) / 24.0) * radius;
+    float a = fi * 2.39996;
+    sum += picture(uImage, uv + r * vec2(cos(a), sin(a)) / iResolution.xy);
+  }
+  vec3 col = sum / 24.0;
+  float l = dot(col, vec3(0.2126, 0.7152, 0.0722));
+  col = mix(vec3(l), col, uSaturation);
+  col = clamp((col - 0.5) * 1.08 + 0.5, 0.0, 1.0);
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Model village", values: { uFocus: 0.4, uBand: 0.1, uBlur: 16, uSaturation: 1.6 } },
+    { name: "Subtle", values: { uBand: 0.25, uBlur: 6, uSaturation: 1.15 } }
+  ]
+};
+var imageSlitScan = {
+  kind: "shader",
+  id: "image-slit-scan",
+  name: "Slit-scan",
+  description: "An image smeared into time-stretched streaks, like a slit-scan photograph.",
+  category: "image",
+  tags: ["image", "slit-scan", "smear", "experimental", "distortion"],
+  source: glsl(
+    `// Slit-scan: rows (or columns) squeeze towards a moving slit and smear into streaks.
+uniform sampler2D uImage;  // @control filter=linear wrap=mirror default=${SAMPLE_IMAGES.landscape} label="Image"
+uniform int uDirection;    // @control min=0 max=1 default=0 label="Direction (0 horizontal, 1 vertical)"
+uniform float uStretch;    // @control min=0 max=1 default=0.45 label="Stretch"
+uniform float uSpeed;      // @control min=0 max=3 default=0.6 label="Speed"`,
+    HASH,
+    NOISE,
+    PICTURE,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  // along: the axis the streaks run along; across: the axis the delay varies over.
+  vec2 a = uDirection == 0 ? uv : uv.yx;
+  float t = iTime * uSpeed;
+  float delay = vnoise(vec2(a.y * 7.0, t)) * 0.7 + vnoise(vec2(a.y * 31.0, t * 1.7)) * 0.3;
+  float slit = 0.5 + 0.35 * sin(t * 0.7 + delay * 2.0);
+  // Squeeze towards the slit (stretching what is there) and drift with the delay.
+  float along = slit + (a.x - slit) * (1.0 - uStretch * delay);
+  along += uStretch * 0.15 * (delay - 0.5);
+  // Smear: average a few taps along the streak.
+  vec3 col = vec3(0.0);
+  for (int i = 0; i < 8; i++) {
+    float s = along - float(i) * uStretch * 0.006;
+    vec2 st = uDirection == 0 ? vec2(s, a.y) : vec2(a.y, s);
+    col += picture(uImage, st);
+  }
+  fragColor = vec4(col / 8.0, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Drift", values: { uDirection: 0, uStretch: 0.3, uSpeed: 0.3 } },
+    { name: "Waterfall", values: { uDirection: 1, uStretch: 0.7, uSpeed: 1.2 } }
+  ]
+};
+var imageMosaic = {
+  kind: "shader",
+  id: "image-mosaic",
+  name: "Mosaic flip",
+  description: "Hexagonal or triangular tiles flipping over from the left to reveal an image, then back.",
+  category: "image",
+  tags: ["image", "reveal", "transition", "tiles", "hexagon"],
+  loop: 6,
+  source: glsl(
+    `// Mosaic flip: tiles turn over in a wave from the left, background on one face, image on the other.
+uniform sampler2D uImage;  // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.landscape} label="Image"
+uniform int uShape;        // @control min=0 max=1 default=0 label="Tile shape (0 hexagon, 1 triangle)"
+uniform float uSize;       // @control min=10 max=160 default=48 label="Tile size (px)"
+uniform bool uAuto;        // @control default=true label="Animate"
+uniform float uProgress;   // @control min=0 max=1 default=1 label="Progress (when still)"
+uniform vec3 uBackground;  // @control color default=#0F172A label="Background"`,
+    HASH,
+    PICTURE,
+    `// Hexagon tiles 1 unit across the flats: h is the offset from the tile's centre.
+void hexTile(vec2 p, out vec2 h, out vec2 centre) {
+  vec2 s = vec2(1.0, 1.7320508);
+  vec2 a = (floor(p / s) + 0.5) * s;
+  vec2 b = (floor((p - 0.5 * s) / s) + 1.0) * s;
+  centre = dot(p - a, p - a) < dot(p - b, p - b) ? a : b;
+  h = p - centre;
+}
+
+// 0 at a hexagon's centre, 1 on its edge.
+float hexEdge(vec2 h) {
+  h = abs(h);
+  return max(h.x, dot(h, vec2(0.5, 0.8660254))) * 2.0;
+}
+
+// Triangle tiles with sides of 1 unit; up is 1 for upward-pointing tiles, -1 for downward.
+void triTile(vec2 p, out vec2 h, out vec2 centre, out float up) {
+  vec2 q = vec2(p.x - p.y * 0.5773503, p.y * 1.1547005);
+  vec2 cell = floor(q);
+  vec2 f = q - cell;
+  up = f.x + f.y < 1.0 ? 1.0 : -1.0;
+  vec2 cq = cell + (up > 0.0 ? vec2(1.0 / 3.0) : vec2(2.0 / 3.0));
+  centre = vec2(cq.x + cq.y * 0.5, cq.y * 0.8660254);
+  h = p - centre;
+}
+
+// 0 at a triangle's centre, 1 on its edge.
+float triEdge(vec2 h, float up) {
+  h *= up;
+  float e = max(-h.y, max(dot(h, vec2(0.8660254, 0.5)), dot(h, vec2(-0.8660254, 0.5))));
+  return e / 0.2886751;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float k = uAuto ? smoothstep(0.05, 0.95, 0.5 - 0.5 * cos(iTime * 6.28318 / 6.0)) : uProgress;
+  vec2 p = fragCoord / uSize;
+  vec2 h;
+  vec2 centre;
+  float up = 1.0;
+  if (uShape == 0) {
+    hexTile(p, h, centre);
+  } else {
+    triTile(p, h, centre, up);
+  }
+  // Each tile turns over in its own moment, sweeping left to right with a little jitter.
+  float start = centre.x * uSize / iResolution.x * 0.75 + hash12(centre * 7.31) * 0.15;
+  float flip = smoothstep(0.0, 1.0, clamp((k * 1.35 - start) / 0.35, 0.0, 1.0));
+  float squash = abs(cos(flip * 3.14159265));
+  vec2 hf = vec2(h.x / max(squash, 0.001), h.y);
+  float e = uShape == 0 ? hexEdge(hf) : triEdge(hf, up);
+  float gap = 0.1 * (1.0 - flip);
+  vec3 col = uBackground * 0.6;
+  if (e < 1.0 - gap + 0.001) {
+    vec3 face = flip < 0.5
+      ? uBackground * (0.9 + 0.2 * hash12(centre * 3.17)) + 0.04
+      : picture(uImage, (centre + hf) * uSize / iResolution.xy);
+    col = face * (0.5 + 0.5 * squash);
+  }
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Hexagons", values: { uShape: 0, uSize: 48 } },
+    { name: "Triangles", values: { uShape: 1, uSize: 64 } }
+  ]
+};
+var imageChromaticLens = {
+  kind: "shader",
+  id: "image-chromatic-lens",
+  name: "Chromatic lens",
+  description: "An image through a cheap wide lens: barrel distortion and colour fringes growing towards the edges.",
+  category: "image",
+  tags: ["image", "lens", "aberration", "distortion", "vintage"],
+  source: glsl(
+    `// Chromatic lens: barrel distortion with red, green and blue bent by different amounts.
+uniform sampler2D uImage;   // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.landscape} label="Image"
+uniform float uDistortion;  // @control min=-0.5 max=1 default=0.25 label="Distortion"
+uniform float uAberration;  // @control min=0 max=0.1 default=0.025 label="Aberration"
+uniform float uVignette;    // @control min=0 max=1 default=0.4 label="Vignette"`,
+    PICTURE,
+    `// Where a lens with barrel strength k shows the point c (centred, aspect-corrected) from.
+vec2 lens(vec2 c, float k, vec2 aspect) {
+  float r2 = dot(c, c);
+  // Zoom in to keep the corners filled when barrelling.
+  float fill = 1.0 + max(k, 0.0) * 0.3;
+  return 0.5 + c * (1.0 + k * r2) / fill / aspect;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec2 aspect = vec2(iResolution.x / iResolution.y, 1.0);
+  vec2 c = (uv - 0.5) * aspect;
+  vec3 col = vec3(
+    picture(uImage, lens(c, uDistortion + uAberration, aspect)).r,
+    picture(uImage, lens(c, uDistortion, aspect)).g,
+    picture(uImage, lens(c, uDistortion - uAberration, aspect)).b
+  );
+  col *= 1.0 - uVignette * smoothstep(0.25, 0.95, length(c));
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Fisheye", values: { uDistortion: 0.7, uAberration: 0.04, uVignette: 0.6 } },
+    { name: "Fringe only", values: { uDistortion: 0, uAberration: 0.05, uVignette: 0.2 } }
+  ]
+};
+var imageOilPaint = {
+  kind: "shader",
+  id: "image-oil-paint",
+  name: "Oil paint",
+  description: "An image repainted in flat, edge-keeping brush dabs, like an oil painting.",
+  category: "image",
+  tags: ["image", "painterly", "artistic", "kuwahara", "filter"],
+  source: glsl(
+    `// Oil paint: a four-sector Kuwahara filter, each pixel takes the calmest neighbourhood's colour.
+uniform sampler2D uImage;  // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.portrait} label="Image"
+uniform int uRadius;       // @control min=1 max=8 default=4 label="Brush radius (px)"
+uniform float uSharpness;  // @control min=0.5 max=8 default=4 label="Sharpness"
+uniform float uSaturation; // @control min=0 max=2 default=1.15 label="Saturation"`,
+    PICTURE,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec2 px = 1.0 / iResolution.xy;
+  // Sums of colour and colour\xB2 over four overlapping squares: down-left, down-right, up-left, up-right.
+  vec3 m0 = vec3(0.0), m1 = vec3(0.0), m2 = vec3(0.0), m3 = vec3(0.0);
+  vec3 s0 = vec3(0.0), s1 = vec3(0.0), s2 = vec3(0.0), s3 = vec3(0.0);
+  for (int j = 0; j <= 8; j++) {
+    if (j > uRadius) break;
+    for (int i = 0; i <= 8; i++) {
+      if (i > uRadius) break;
+      vec2 o = vec2(float(i), float(j)) * px;
+      vec3 c = picture(uImage, uv + vec2(-o.x, -o.y));
+      m0 += c;
+      s0 += c * c;
+      c = picture(uImage, uv + vec2(o.x, -o.y));
+      m1 += c;
+      s1 += c * c;
+      c = picture(uImage, uv + vec2(-o.x, o.y));
+      m2 += c;
+      s2 += c * c;
+      c = picture(uImage, uv + o);
+      m3 += c;
+      s3 += c * c;
+    }
+  }
+  float n = float((uRadius + 1) * (uRadius + 1));
+  m0 /= n; m1 /= n; m2 /= n; m3 /= n;
+  // Weight each square by how calm (low-variance) it is; sharpness sets how strongly the calmest wins.
+  vec4 v = vec4(
+    dot(abs(s0 / n - m0 * m0), vec3(1.0)),
+    dot(abs(s1 / n - m1 * m1), vec3(1.0)),
+    dot(abs(s2 / n - m2 * m2), vec3(1.0)),
+    dot(abs(s3 / n - m3 * m3), vec3(1.0))
+  );
+  vec4 w = pow(v * 100.0 + 1e-3, vec4(-uSharpness));
+  vec3 col = (m0 * w.x + m1 * w.y + m2 * w.z + m3 * w.w) / (w.x + w.y + w.z + w.w);
+  float l = dot(col, vec3(0.2126, 0.7152, 0.0722));
+  col = mix(vec3(l), col, uSaturation);
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Broad strokes", values: { uRadius: 7, uSharpness: 6, uSaturation: 1.3 } },
+    { name: "Watercolour", values: { uRadius: 3, uSharpness: 1.5, uSaturation: 0.9 } }
+  ]
+};
+var imageTreatments = [
+  imageKenBurns,
+  imageAscii,
+  imageShatter,
+  imageMelt,
+  imageRisograph,
+  imageThermal,
+  imageEdgeGlow,
+  imageTiltShift,
+  imageSlitScan,
+  imageMosaic,
+  imageChromaticLens,
+  imageOilPaint
+];
+
+// src/catalog/text.ts
+var r1 = (n2) => Math.round(n2 * 10) / 10;
+function fit(text, width, max, ems = textWidthEm(text)) {
+  const e = Math.max(0.6, ems);
+  const size = Math.min(max, width / e);
+  return { size: r1(size), length: r1(e * size), left: r1(200 - e * size / 2) };
+}
+var lettersOf = (text) => Array.from(String(text));
+var mixHex = (a, b, t) => {
+  const x = Array.isArray(a) ? a : [1, 1, 1];
+  const y = Array.isArray(b) ? b : [1, 1, 1];
+  return rgbToHex([0, 1, 2].map((i) => x[i] + (y[i] - x[i]) * t));
+};
+var holds = (id, attr, keys) => keys.map(([delay, value]) => ({ id, attrs: { [attr]: [value, value] }, delay, ms: 0 }));
+var n = (name) => `{{${name}}}`;
+var MONO = `ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace`;
+var MONO_EM = 0.6;
+var HEAVY = `'Arial Black', 'Helvetica Neue', Impact, system-ui, sans-serif`;
+var SANS = `system-ui, 'Helvetica Neue', Arial, sans-serif`;
+var BLINKS = 7;
+var typewriter = {
+  kind: "vector",
+  id: "typewriter",
+  name: "Typewriter",
+  description: "Letters typed out one at a time behind a block caret, which then blinks.",
+  category: "text",
+  tags: ["text", "title", "typing", "terminal", "caption"],
+  hold: 300,
+  presets: [
+    { name: "Terminal", values: { paper: [0.03, 0.05, 0.04], ink: [0.3, 1, 0.45] } },
+    { name: "Paper", values: { paper: [0.98, 0.95, 0.88], ink: [0.15, 0.13, 0.12], pace: 120 } }
+  ],
+  // Monospace, so the caret lands after the last letter however long the text is.
+  derived: (v) => {
+    const count = Math.max(1, lettersOf(v.text).length);
+    const size = r1(Math.min(44, 340 / ((count + 1) * MONO_EM)));
+    const left = r1(200 - (count + 1) * MONO_EM * size / 2);
+    const typing = Math.round(count * Number(v.pace));
+    return {
+      size,
+      left,
+      base: r1(100 + size * 0.35),
+      end: r1(left + count * MONO_EM * size),
+      typing,
+      ...Object.fromEntries(Array.from({ length: BLINKS }, (_, k) => [`blink${k}`, typing + k * 500]))
+    };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 400 200"><!-- {{text: text default='Hello, world.' label='Text'}} {{paper: color default=#111827 label='Background'}} {{ink: color default=#F9FAFB label='Text colour'}} {{pace: float min=30 max=300 default=90 step=5 label='Ms per letter'}} --><rect width="400" height="200" fill="{{paper}}"/><text id="typed" x="{{left}}" y="{{base}}" font-family="${MONO}" font-size="{{size}}" fill="{{ink}}" xml:space="preserve">{{text}}</text><text id="caret" x="{{end}}" y="{{base}}" font-family="${MONO}" font-size="{{size}}" fill="{{ink}}" opacity="0">\u258C</text></svg>`,
+    animate: [
+      { id: "typed", write: "{{text}}", caret: "\u258C", ms: n("typing"), ease: "linear" },
+      // Hidden while the writer shows its own caret, then blinking where it stopped.
+      ...holds("caret", "opacity", [[0, 0], ...Array.from({ length: BLINKS }, (_, k) => [n(`blink${k}`), k % 2 ? 0 : 1])])
+    ]
+  }
+};
+var scrambleText = {
+  kind: "vector",
+  id: "scramble-text",
+  name: "Scramble text",
+  description: "Random glyphs flickering, then settling into the real word letter by letter, left to right.",
+  category: "text",
+  tags: ["text", "title", "decode", "hacker", "cyber", "reveal"],
+  hold: 1200,
+  presets: [
+    { name: "Matrix", values: { background: [0, 0.03, 0.01], ink: [0.4, 1, 0.5], accent: [0.1, 0.7, 0.25], glyphs: "01" } },
+    { name: "Amber", values: { background: [0.08, 0.04, 0], ink: [1, 0.72, 0.2], accent: [0.9, 0.4, 0.05] } }
+  ],
+  derived: (v) => {
+    const count = Math.max(1, lettersOf(v.text).length);
+    const size = r1(Math.min(60, 360 / (count * MONO_EM)));
+    const width = r1(count * MONO_EM * size);
+    const base = r1(100 + size * 0.35);
+    return { size, base, barX: r1(200 - width / 2), barY: r1(base + size * 0.3), barW: width, decode: Math.round(count * Number(v.pace)), glowWide: Number(v.glow) * 2 };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 400 200"><!-- {{text: text default='ACCESS GRANTED' label='Text'}} {{glyphs: text default='ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&@$*+' label='Scramble glyphs'}} {{background: color default=#05070D label='Background'}} {{ink: color default=#E2E8F0 label='Text colour'}} {{accent: color default=#22D3EE label='Accent'}} {{pace: float min=20 max=250 default=70 step=5 label='Ms per letter'}} {{glow: float min=0 max=6 default=2 step=0.5 label='Glow'}} --><defs><filter id="glow" x="-20%" y="-50%" width="140%" height="200%"><feGaussianBlur stdDeviation="{{glowWide}}" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><rect width="400" height="200" fill="{{background}}"/><text id="word" x="200" y="{{base}}" text-anchor="middle" font-family="${MONO}" font-size="{{size}}" font-weight="700" fill="{{ink}}" filter="url(#glow)" xml:space="preserve">{{text}}</text><rect id="bar" x="{{barX}}" y="{{barY}}" width="0" height="3" fill="{{accent}}"/></svg>`,
+    animate: [
+      // Pure noise for a moment (the scramble runs before the change starts), then it decodes.
+      { id: "word", write: "{{text}}", scramble: "{{glyphs}}", delay: 500, ms: n("decode"), ease: "linear" },
+      { id: "bar", attrs: { width: [0, n("barW")] }, delay: 500, ms: n("decode"), ease: "linear" }
+    ]
+  }
+};
+var SLOTS = 20;
+var kineticStagger = {
+  kind: "vector",
+  id: "kinetic-stagger",
+  name: "Kinetic stagger",
+  description: "Each letter springs up into place in turn, rising, turning and overshooting, then an underline sweeps beneath.",
+  category: "text",
+  tags: ["text", "title", "kinetic", "typography", "headline", "intro"],
+  hold: 1200,
+  presets: [
+    { name: "Poster", values: { background: [0.98, 0.87, 0.2], ink: [0.07, 0.07, 0.07], accent: [0.9, 0.15, 0.2] } },
+    { name: "Midnight", values: { background: [0.04, 0.05, 0.12], ink: [0.95, 0.96, 1], accent: [0.55, 0.45, 1], stagger: 80 } }
+  ],
+  // Up to SLOTS letters, each centred in its estimated advance; unused slots stay empty.
+  derived: (v) => {
+    const letters = lettersOf(v.text).slice(0, SLOTS);
+    const widths = letters.map((c) => textWidthEm(c));
+    const ems = Math.max(0.6, widths.reduce((a, b) => a + b, 0));
+    const size = Math.min(92, 370 / ems);
+    const base = 100 + size * 0.35;
+    const stagger = Number(v.stagger);
+    const out = {
+      size: r1(size),
+      base: r1(base),
+      rise: r1(base - size * 0.1),
+      drop: r1(base + size * 0.6),
+      lineX: r1(200 - ems * size / 2),
+      lineY: r1(base + size * 0.2),
+      lineW: r1(ems * size),
+      lineAt: Math.round(letters.length * stagger + 400)
+    };
+    let x = 200 - ems * size / 2;
+    for (let i = 0; i < SLOTS; i++) {
+      const w = (widths[i] ?? 0) * size;
+      out[`c${i}`] = letters[i]?.trim() ?? "";
+      out[`x${i}`] = r1(x + w / 2);
+      out[`d${i}`] = Math.round(i * stagger);
+      out[`e${i}`] = Math.round(i * stagger + 380);
+      x += w;
+    }
+    return out;
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 400 200"><!-- {{text: text default='Kinetic' label='Text'}} {{background: color default=#F8FAFC label='Background'}} {{ink: color default=#0F172A label='Text colour'}} {{accent: color default=#F43F5E label='Underline'}} {{stagger: float min=20 max=200 default=55 step=5 label='Ms between letters'}} --><rect width="400" height="200" fill="{{background}}"/>${Array.from(
+      { length: SLOTS },
+      (_, i) => `<text id="l${i}" text-anchor="middle" transform="translate({{x${i}}} {{drop}}) rotate(-28) scale(0.3)" opacity="0" font-family="${HEAVY}" font-size="{{size}}" font-weight="900" fill="{{ink}}">{{c${i}}}</text>`
+    ).join("")}<rect id="line" x="{{lineX}}" y="{{lineY}}" width="0" height="6" rx="3" fill="{{accent}}"/></svg>`,
+    animate: [
+      ...Array.from({ length: SLOTS }, (_, i) => [
+        {
+          id: `l${i}`,
+          attrs: { transform: [`translate({{x${i}}} {{drop}}) rotate(-28) scale(0.3)`, `translate({{x${i}}} {{rise}}) rotate(5) scale(1.12)`], opacity: [0, 1] },
+          delay: n(`d${i}`),
+          ms: 380,
+          ease: "out"
+        },
+        { id: `l${i}`, attrs: { transform: [`translate({{x${i}}} {{rise}}) rotate(5) scale(1.12)`, `translate({{x${i}}} {{base}}) rotate(0) scale(1)`] }, delay: n(`e${i}`), ms: 260, ease: "in-out" }
+      ]).flat(),
+      { id: "line", attrs: { width: [0, n("lineW")] }, delay: n("lineAt"), ms: 500, ease: "in-out" }
+    ]
+  }
+};
+var neonSign = {
+  kind: "vector",
+  id: "neon-sign",
+  name: "Neon sign",
+  description: "Glowing neon tube lettering that stutters on, then keeps one faulty letter buzzing.",
+  category: "text",
+  tags: ["text", "neon", "glow", "sign", "night", "retro"],
+  hold: 400,
+  presets: [
+    { name: "Hot pink", values: { tube: [1, 0.2, 0.65], wall: [0.06, 0.02, 0.07] } },
+    { name: "Ice", values: { tube: [0.35, 0.85, 1], wall: [0.02, 0.04, 0.08], glow: 5 } },
+    { name: "Lime", values: { tube: [0.6, 1, 0.2], wall: [0.03, 0.05, 0.02] } }
+  ],
+  // The word in three runs, so the buzzing letter can flicker on its own.
+  derived: (v) => {
+    const letters = lettersOf(v.text);
+    const k = Math.min(Math.max(0, Math.round(Number(v.faulty)) - 1), Math.max(0, letters.length - 1));
+    const { size, length } = fit(String(v.text), 340, 84);
+    return {
+      head: letters.slice(0, k).join(""),
+      mid: letters[k] ?? "",
+      tail: letters.slice(k + 1).join(""),
+      size,
+      length,
+      base: r1(100 + size * 0.3),
+      far: Number(v.glow) * 3,
+      core: mixHex(v.tube, [1, 1, 1], 0.6)
+    };
+  },
+  motion: (() => {
+    const word = `x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="'Pacifico', 'Brush Script MT', 'Segoe Script', 'Snell Roundhand', cursive" font-size="{{size}}"`;
+    const runs = (id) => `<tspan>{{head}}</tspan><tspan id="${id}">{{mid}}</tspan><tspan>{{tail}}</tspan>`;
+    const startUp = [[0, 0], [150, 0.85], [210, 0], [330, 1], [390, 0.15], [450, 1], [620, 0.35], [680, 1]];
+    const buzz = [[0, 1], [1300, 0.15], [1350, 1], [1420, 0.2], [1520, 1], [2100, 0.1], [2160, 1], [2230, 0.25], [2280, 1]];
+    return {
+      svg: `<svg viewBox="0 0 400 200"><!-- {{text: text default='Open late' label='Text'}} {{tube: color default=#FF3DA5 label='Tube'}} {{wall: color default=#120612 label='Wall'}} {{glow: float min=0.5 max=8 default=3.5 step=0.5 label='Glow'}} {{faulty: int min=1 max=24 default=6 label='Buzzing letter'}} --><defs><filter id="neon" x="-30%" y="-80%" width="160%" height="260%"><feGaussianBlur in="SourceGraphic" stdDeviation="{{glow}}" result="near"/><feGaussianBlur in="SourceGraphic" stdDeviation="{{far}}" result="far"/><feMerge><feMergeNode in="far"/><feMergeNode in="far"/><feMergeNode in="near"/><feMergeNode in="SourceGraphic"/></feMerge></filter><filter id="haze" x="-50%" y="-100%" width="200%" height="300%"><feGaussianBlur stdDeviation="30"/></filter></defs><rect width="400" height="200" fill="{{wall}}"/><g id="sign" opacity="0"><ellipse cx="200" cy="100" rx="170" ry="55" fill="{{tube}}" opacity="0.18" filter="url(#haze)"/><text ${word} fill="{{tube}}" stroke="{{tube}}" stroke-width="1.5" filter="url(#neon)">${runs("buzzGlow")}</text><text ${word} fill="{{core}}">${runs("buzzCore")}</text></g></svg>`,
+      animate: [
+        ...holds("sign", "opacity", startUp),
+        // fill-opacity rather than opacity: browsers ignore opacity on a <tspan>.
+        ...["buzzGlow", "buzzCore"].flatMap((id) => [...holds(id, "fill-opacity", buzz), ...holds(id, "stroke-opacity", buzz)])
+      ]
+    };
+  })()
+};
+var strokeDrawText = {
+  kind: "vector",
+  id: "stroke-draw-text",
+  name: "Stroke draw text",
+  description: "A word's outline traced on along every letter, then its fill fading in.",
+  category: "text",
+  tags: ["text", "title", "draw-on", "outline", "reveal", "handwriting"],
+  hold: 1200,
+  presets: [
+    { name: "Blueprint", values: { background: [0.05, 0.2, 0.45], outline: [0.85, 0.93, 1], fill: [0.85, 0.93, 1], fillOpacity: 0.15 } },
+    { name: "Gold", values: { background: [0.07, 0.06, 0.05], outline: [1, 0.8, 0.35], fill: [0.85, 0.6, 0.15] } }
+  ],
+  // <text> takes no pathLength, so `draw` cannot measure it: the dash grows instead, longer than any letter's outline.
+  derived: (v) => {
+    const { size, length } = fit(String(v.text), 360, 100);
+    return { size, length, base: r1(100 + size * 0.35), dash: Math.round(size * 6) };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 400 200"><!-- {{text: text default='Draw' label='Text'}} {{background: color default=#FFFBF5 label='Background'}} {{outline: color default=#1E293B label='Outline'}} {{fill: color default=#F97316 label='Fill'}} {{width: float min=0.5 max=6 default=2 step=0.5 label='Outline width'}} {{fillOpacity: float min=0 max=1 default=1 label='Fill opacity'}} --><rect width="400" height="200" fill="{{background}}"/><text id="word" x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="${HEAVY}" font-size="{{size}}" font-weight="900" fill="{{fill}}" fill-opacity="0" stroke="{{outline}}" stroke-width="{{width}}" stroke-linejoin="round" stroke-dasharray="0 {{dash}}">{{text}}</text></svg>`,
+    animate: [
+      { id: "word", attrs: { "stroke-dasharray": ["0 {{dash}}", "{{dash}} 0"] }, ms: 2e3, ease: "in-out" },
+      { id: "word", attrs: { "fill-opacity": [0, n("fillOpacity")] }, delay: 1500, ms: 700, ease: "out" }
+    ]
+  }
+};
+var splitReveal = {
+  kind: "vector",
+  id: "split-reveal",
+  name: "Split reveal",
+  description: "A line draws across, then the title's top half rises out from behind it while the bottom half drops down.",
+  category: "text",
+  tags: ["text", "title", "reveal", "mask", "editorial", "intro"],
+  hold: 1400,
+  presets: [
+    { name: "Light", values: { background: [0.97, 0.96, 0.94], ink: [0.08, 0.08, 0.1], line: [0.85, 0.2, 0.15] } },
+    { name: "Gold on black", values: { background: [0.02, 0.02, 0.02], ink: [0.96, 0.84, 0.55], line: [0.96, 0.84, 0.55] } }
+  ],
+  derived: (v) => {
+    const { size, length, left } = fit(String(v.text), 360, 88);
+    return {
+      size,
+      length,
+      base: r1(100 + size * 0.36),
+      shift: r1(size * 0.8),
+      lineX1: r1(left - 10),
+      lineX2: r1(400 - left + 10),
+      captionY: r1(100 + size * 0.36 + 30)
+    };
+  },
+  motion: (() => {
+    const word = `<text x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="${SANS}" font-size="{{size}}" font-weight="800" fill="{{ink}}">{{text}}</text>`;
+    return {
+      svg: `<svg viewBox="0 0 400 200"><!-- {{text: text default='Chapter One' label='Text'}} {{caption: text default='The beginning' label='Caption'}} {{background: color default=#0F172A label='Background'}} {{ink: color default=#F8FAFC label='Text colour'}} {{line: color default=#38BDF8 label='Line'}} --><defs><clipPath id="above"><rect width="400" height="100"/></clipPath><clipPath id="below"><rect y="100" width="400" height="100"/></clipPath></defs><rect width="400" height="200" fill="{{background}}"/><g clip-path="url(#above)"><g id="top" transform="translate(0 {{shift}})">${word}</g></g><g clip-path="url(#below)"><g id="bottom" transform="translate(0 -{{shift}})">${word}</g></g><path id="line" d="M{{lineX1}} 100 H{{lineX2}}" stroke="{{line}}" stroke-width="2.5" stroke-linecap="round"/><text id="caption" x="200" y="{{captionY}}" text-anchor="middle" font-family="${SANS}" font-size="13" letter-spacing="3" fill="{{ink}}" opacity="0">{{caption}}</text></svg>`,
+      animate: [
+        { id: "line", draw: true, ms: 600, ease: "in-out" },
+        { id: "top", attrs: { transform: ["translate(0 {{shift}})", "translate(0 0)"] }, delay: 450, ms: 800, ease: "out" },
+        { id: "bottom", attrs: { transform: ["translate(0 -{{shift}})", "translate(0 0)"] }, delay: 450, ms: 800, ease: "out" },
+        { id: "line", attrs: { opacity: [1, 0] }, delay: 1100, ms: 400 },
+        { id: "caption", attrs: { opacity: [0, 0.75] }, delay: 1100, ms: 500, ease: "out" }
+      ]
+    };
+  })()
+};
+var highlighter = {
+  kind: "vector",
+  id: "highlighter",
+  name: "Highlighter",
+  description: "A marker swipe drawn left to right behind a phrase, rough-edged like a real highlighter pen.",
+  category: "text",
+  tags: ["text", "highlight", "marker", "emphasis", "explainer", "callout"],
+  hold: 1400,
+  presets: [
+    { name: "Pink", values: { marker: [1, 0.55, 0.78] } },
+    { name: "Mint", values: { marker: [0.55, 0.95, 0.7] } },
+    { name: "Dark", values: { background: [0.07, 0.08, 0.1], ink: [0.97, 0.97, 0.98], marker: [0.55, 0.2, 0.95] } }
+  ],
+  // The swipe runs a little past the phrase at both ends, across its lower half, with a ragged second pass.
+  derived: (v) => {
+    const { size, length, left } = fit(String(v.text), 330, 56);
+    const base = 100 + size * 0.35;
+    const x0 = left - size * 0.25;
+    const x1 = 400 - left + size * 0.2;
+    const y = base - size * 0.3;
+    return {
+      size,
+      length,
+      base: r1(base),
+      swipe: `M${r1(x0)} ${r1(y + size * 0.05)} Q${r1((x0 + x1) / 2)} ${r1(y - size * 0.06)} ${r1(x1)} ${r1(y - size * 0.02)}`,
+      ragged: `M${r1(x0 + size * 0.15)} ${r1(y + size * 0.3)} L${r1(x1 - size * 0.1)} ${r1(y + size * 0.26)}`,
+      thick: r1(size * 0.72),
+      thin: r1(size * 0.16)
+    };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 400 200"><!-- {{text: text default='Ship it faster' label='Phrase'}} {{background: color default=#FFFFFF label='Background'}} {{ink: color default=#111827 label='Text colour'}} {{marker: color default=#FDE047 label='Marker'}} --><rect width="400" height="200" fill="{{background}}"/><g transform="rotate(-1.2 200 100)" opacity="0.9"><path id="swipe" d="{{swipe}}" fill="none" stroke="{{marker}}" stroke-width="{{thick}}"/><path id="ragged" d="{{ragged}}" fill="none" stroke="{{marker}}" stroke-width="{{thin}}" stroke-linecap="round"/></g><text id="phrase" x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="${SANS}" font-size="{{size}}" font-weight="700" fill="{{ink}}" opacity="0">{{text}}</text></svg>`,
+    animate: [
+      { id: "phrase", attrs: { opacity: [0, 1] }, ms: 300, ease: "out" },
+      { id: "swipe", draw: true, delay: 350, ms: 650, ease: "in-out" },
+      { id: "ragged", draw: true, delay: 420, ms: 620, ease: "in-out" }
+    ]
+  }
+};
+var SHOW_MS = 1e3;
+var ROLL_MS = 450;
+var CYCLE_WORDS = 4;
+var wordCycle = {
+  kind: "vector",
+  id: "word-cycle",
+  name: "Word cycle",
+  description: "A fixed lead-in with the last word rolling through alternatives like a slot machine, an underline resizing to each.",
+  category: "text",
+  tags: ["text", "headline", "rotating", "hero", "marketing", "slot"],
+  hold: 0,
+  presets: [
+    { name: "Dark", values: { background: [0.05, 0.06, 0.1], ink: [0.95, 0.96, 1], accent: [0.4, 0.85, 0.65] } },
+    { name: "Warm", values: { background: [1, 0.96, 0.9], ink: [0.2, 0.12, 0.08], accent: [0.93, 0.35, 0.15] } }
+  ],
+  // The lead-in and the longest word share the line; the reel ends with word 1 again, so the loop is seamless.
+  derived: (v) => {
+    const words = Array.from({ length: CYCLE_WORDS }, (_, i) => String(v[`word${i + 1}`]));
+    const lead = textWidthEm(String(v.prefix));
+    const ems = words.map((w) => Math.max(0.6, textWidthEm(w)));
+    const total = lead + 0.3 + Math.max(...ems);
+    const size = Math.min(52, 370 / total);
+    const left = 200 - total * size / 2;
+    const base = 100 + size * 0.35;
+    const step = size * 1.3;
+    const wx = left + (lead + 0.3) * size;
+    return {
+      size: r1(size),
+      base: r1(base),
+      px: r1(left),
+      plen: r1(Math.max(0.6, lead) * size),
+      wx: r1(wx),
+      clipX: r1(wx - 4),
+      clipY: r1(base - size * 1),
+      clipW: r1(Math.max(...ems) * size + 8),
+      clipH: r1(size * 1.32),
+      underY: r1(base + size * 0.18),
+      ...Object.fromEntries(
+        [...words, words[0]].flatMap((_, k) => [
+          [`y${k}`, r1(base + k * step)],
+          [`o${k}`, r1(k * step)],
+          [`len${k}`, r1(ems[k % CYCLE_WORDS] * size)]
+        ])
+      ),
+      ...Object.fromEntries(words.map((w, k) => [`w${k}`, w]))
+    };
+  },
+  motion: {
+    svg: `<svg viewBox="0 0 400 200"><!-- {{prefix: text default='We build' label='Lead-in'}} {{word1: text default=apps label='Word 1'}} {{word2: text default=brands label='Word 2'}} {{word3: text default=websites label='Word 3'}} {{word4: text default=games label='Word 4'}} {{background: color default=#FFFFFF label='Background'}} {{ink: color default=#0F172A label='Text colour'}} {{accent: color default=#6366F1 label='Accent'}} --><defs><clipPath id="window"><rect x="{{clipX}}" y="{{clipY}}" width="{{clipW}}" height="{{clipH}}"/></clipPath></defs><rect width="400" height="200" fill="{{background}}"/><text x="{{px}}" y="{{base}}" textLength="{{plen}}" lengthAdjust="spacingAndGlyphs" font-family="${SANS}" font-size="{{size}}" font-weight="700" fill="{{ink}}">{{prefix}}</text><g clip-path="url(#window)"><g id="reel" transform="translate(0 -0)">${Array.from(
+      { length: CYCLE_WORDS + 1 },
+      (_, k) => `<text x="{{wx}}" y="{{y${k}}}" textLength="{{len${k}}}" lengthAdjust="spacingAndGlyphs" font-family="${SANS}" font-size="{{size}}" font-weight="800" fill="{{accent}}">{{w${k % CYCLE_WORDS}}}</text>`
+    ).join("")}</g></g><rect id="under" x="{{wx}}" y="{{underY}}" width="{{len0}}" height="4" rx="2" fill="{{accent}}"/></svg>`,
+    animate: Array.from({ length: CYCLE_WORDS }, (_, i) => {
+      const at = { delay: (i + 1) * SHOW_MS + i * ROLL_MS, ms: ROLL_MS, ease: "in-out" };
+      return [
+        { id: "reel", attrs: { transform: [`translate(0 -{{o${i}}})`, `translate(0 -{{o${i + 1}}})`] }, ...at },
+        { id: "under", attrs: { width: [n(`len${i}`), n(`len${i + 1}`)] }, ...at }
+      ];
+    }).flat()
+  }
+};
+var WAVE = `M-200 0${" q25 -8 50 0 t50 0".repeat(8)} V320 H-200Z`;
+var liquidFill = {
+  kind: "vector",
+  id: "liquid-fill",
+  name: "Liquid fill",
+  description: "A title filling up with liquid, its wavy surface rising through the letters.",
+  category: "text",
+  tags: ["text", "title", "liquid", "water", "progress", "fill"],
+  hold: 900,
+  presets: [
+    { name: "Gradient sweep", values: { liquid: [0.98, 0.25, 0.55], liquid2: [0.35, 0.4, 1], empty: [0.93, 0.93, 0.96] } },
+    { name: "Lava", values: { liquid: [1, 0.35, 0.05], liquid2: [1, 0.8, 0.1], empty: [0.15, 0.08, 0.06], background: [0.06, 0.03, 0.02] } },
+    { name: "Juice", values: { liquid: [1, 0.6, 0.1], liquid2: [1, 0.75, 0.25] } }
+  ],
+  // The surface starts under the letters and ends above their caps.
+  derived: (v) => {
+    const { size, length } = fit(String(v.text), 360, 110);
+    const base = 100 + size * 0.36;
+    return { size, length, base: r1(base), low: r1(base + 12), high: r1(base - size * 0.82 - 12) };
+  },
+  motion: (() => {
+    const word = `x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="${HEAVY}" font-size="{{size}}" font-weight="900"`;
+    return {
+      svg: `<svg viewBox="0 0 400 200"><!-- {{text: text default='FILL' label='Text'}} {{background: color default=#FFFFFF label='Background'}} {{empty: color default=#E0F2FE label='Empty'}} {{liquid: color default=#0284C7 label='Liquid'}} {{liquid2: color default=#38BDF8 label='Liquid sweep'}} --><defs><clipPath id="letters"><text ${word}>{{text}}</text></clipPath><linearGradient id="liq" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="400" y2="0" spreadMethod="repeat"><stop offset="0" stop-color="{{liquid}}"/><stop offset="0.5" stop-color="{{liquid2}}"/><stop offset="1" stop-color="{{liquid}}"/></linearGradient></defs><rect width="400" height="200" fill="{{background}}"/><text ${word} fill="{{empty}}" stroke="{{liquid}}" stroke-width="1.5" stroke-opacity="0.5">{{text}}</text><g clip-path="url(#letters)"><g id="level" transform="translate(0 {{low}})"><path id="back" d="${WAVE}" fill="{{liquid}}" opacity="0.45" transform="translate(-50 -5)"/><path id="wave" d="${WAVE}" fill="url(#liq)" transform="translate(0 0)"/></g></g></svg>`,
+      animate: [
+        { id: "level", attrs: { transform: ["translate(0 {{low}})", "translate(0 {{high}})"] }, ms: 2800, ease: "out" },
+        { id: "wave", attrs: { transform: ["translate(0 0)", "translate(-200 0)"] }, ms: 3e3, ease: "linear" },
+        { id: "back", attrs: { transform: ["translate(-50 -5)", "translate(150 -5)"] }, ms: 3e3, ease: "linear" },
+        // The sweep: the repeating gradient slides along, visible when the two liquid colours differ.
+        { id: "liq", attrs: { x1: [0, 400], x2: [400, 800] }, ms: 3e3, ease: "linear" }
+      ]
+    };
+  })()
+};
+var BANDS = [0.3, 0.55, 0.8];
+var GLITCH = (() => {
+  let seed = 7;
+  const rand = () => (seed = seed * 16807 % 2147483647) / 2147483647 * 2 - 1;
+  const rest = { red: [-0.02, 0], cyan: [0.02, 0], bands: [0, 0, 0, 0] };
+  const keys = [{ at: 0, ...rest }];
+  for (const [start, count] of [[250, 6], [1050, 3], [1650, 8]]) {
+    for (let k = 0; k < count; k++)
+      keys.push({
+        at: start + k * 55,
+        red: [rand() * 0.12, rand() * 0.04],
+        cyan: [rand() * 0.12, rand() * 0.04],
+        bands: [0, 1, 2, 3].map(() => rand() > 0.1 ? rand() * 0.25 : 0)
+      });
+    keys.push({ at: start + count * 55, ...rest });
+  }
+  return keys;
+})();
+var glitchText = {
+  kind: "vector",
+  id: "glitch-text",
+  name: "Glitch text",
+  description: "A title breaking up in bursts: red and cyan copies split apart and slices of the letters jump sideways.",
+  category: "text",
+  tags: ["text", "title", "glitch", "cyber", "rgb-split", "error"],
+  hold: 400,
+  presets: [
+    { name: "Classic", values: { left: [1, 0, 0.2], right: [0, 1, 1] } },
+    { name: "Vapor", values: { left: [1, 0.3, 0.85], right: [0.4, 0.6, 1], background: [0.08, 0.02, 0.12], amount: 1.4 } }
+  ],
+  derived: (v) => {
+    const { size, length } = fit(String(v.text), 340, 100);
+    const base = 100 + size * 0.36;
+    const top = base - size * 0.78;
+    const cuts = [0, ...BANDS.map((f) => r1(top + f * (base - top))), 200];
+    const unit = size * Number(v.amount);
+    const shift = ([x, y]) => `translate(${r1(x * unit)} ${r1(y * unit)})`;
+    return {
+      size,
+      length,
+      base: r1(base),
+      ...Object.fromEntries([0, 1, 2, 3].flatMap((b) => [[`cut${b}`, cuts[b]], [`band${b}`, r1(cuts[b + 1] - cuts[b])]])),
+      ...Object.fromEntries(
+        GLITCH.flatMap((key, k) => [
+          [`red${k}`, shift(key.red)],
+          [`cyan${k}`, shift(key.cyan)],
+          ...key.bands.map((x, b) => [`b${b}_${k}`, shift([x, 0])])
+        ])
+      )
+    };
+  },
+  motion: (() => {
+    const word = (paint) => `<text x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="${HEAVY}" font-size="{{size}}" font-weight="900" ${paint}>{{text}}</text>`;
+    const jumps = (id, value) => GLITCH.map((key, k) => ({ id, attrs: { transform: [value(k), value(k)] }, delay: key.at, ms: 0 }));
+    return {
+      svg: `<svg viewBox="0 0 400 200"><!-- {{text: text default='GLITCH' label='Text'}} {{background: color default=#07070B label='Background'}} {{ink: color default=#F5F5F5 label='Text colour'}} {{left: color default=#FF0040 label='Red copy'}} {{right: color default=#00F0FF label='Cyan copy'}} {{amount: float min=0 max=3 default=1 step=0.1 label='Intensity'}} --><defs>${[0, 1, 2, 3].map((b) => `<clipPath id="slice${b}"><rect x="-100" y="{{cut${b}}}" width="600" height="{{band${b}}}"/></clipPath>`).join("")}</defs><rect width="400" height="200" fill="{{background}}"/><g id="red" style="mix-blend-mode:screen">${word(`fill="{{left}}"`)}</g><g id="cyan" style="mix-blend-mode:screen">${word(`fill="{{right}}"`)}</g>${[0, 1, 2, 3].map((b) => `<g clip-path="url(#slice${b})"><g id="s${b}">${word(`fill="{{ink}}"`)}</g></g>`).join("")}</svg>`,
+      animate: [
+        ...jumps("red", (k) => `{{red${k}}}`),
+        ...jumps("cyan", (k) => `{{cyan${k}}}`),
+        ...[0, 1, 2, 3].flatMap((b) => jumps(`s${b}`, (k) => `{{b${b}_${k}}}`))
+      ]
+    };
+  })()
+};
+var LAYERS = 12;
+var EXTRUDE_FROM = 40;
+var EXTRUDE_TO = 140;
+var extrudedText = {
+  kind: "vector",
+  id: "extruded-text",
+  name: "Extruded text",
+  description: "Retro 3D block lettering: stacked shaded layers extrude out of the title and swing as the light moves.",
+  category: "text",
+  tags: ["text", "title", "3d", "retro", "extrude", "80s"],
+  hold: 600,
+  presets: [
+    { name: "Arcade", values: { face: [0.2, 0.95, 1], side: [0.85, 0.2, 0.75], shade: [0.2, 0.05, 0.3], background: [0.05, 0.02, 0.12] } },
+    { name: "Diner", values: { face: [1, 1, 1], side: [0.9, 0.15, 0.2], shade: [0.35, 0.03, 0.06], background: [0.98, 0.9, 0.75], outline: [0.1, 0.1, 0.12] } }
+  ],
+  // Each layer sits a step further back along the extrude direction, shaded from the side colour to the shadow.
+  derived: (v) => {
+    const { size, length } = fit(String(v.text), 320, 96);
+    const step = size * 0.03 * Number(v.depth);
+    const at = (deg, i) => {
+      const a = deg * Math.PI / 180;
+      return `translate(${r1(Math.cos(a) * step * i)} ${r1(Math.sin(a) * step * i)})`;
+    };
+    return {
+      size,
+      length,
+      base: r1(92 + size * 0.35),
+      ...Object.fromEntries(
+        Array.from({ length: LAYERS }, (_, k) => {
+          const i = LAYERS - k;
+          return [
+            [`fill${i}`, mixHex(v.side, v.shade, i / LAYERS)],
+            [`a${i}`, at(EXTRUDE_FROM, i)],
+            [`b${i}`, at(EXTRUDE_TO, i)]
+          ];
+        }).flat()
+      )
+    };
+  },
+  motion: (() => {
+    const word = (paint) => `x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="${HEAVY}" font-size="{{size}}" font-weight="900" stroke-linejoin="round" ${paint}`;
+    const layers = Array.from({ length: LAYERS }, (_, k) => LAYERS - k);
+    return {
+      svg: `<svg viewBox="0 0 400 200"><!-- {{text: text default='RETRO' label='Text'}} {{background: color default=#FFE8C2 label='Background'}} {{face: color default=#FFD23F label='Face'}} {{outline: color default=#1A1423 label='Outline'}} {{side: color default=#EE4266 label='Extrude'}} {{shade: color default=#3B1F2B label='Shadow'}} {{depth: float min=0.2 max=2 default=1 step=0.1 label='Depth'}} --><rect width="400" height="200" fill="{{background}}"/>${layers.map((i) => `<text id="e${i}" transform="translate(0 0)" ${word(`fill="{{fill${i}}}" stroke="{{fill${i}}}" stroke-width="2"`)}>{{text}}</text>`).join("")}<text ${word(`fill="{{face}}" stroke="{{outline}}" stroke-width="2.5" paint-order="stroke"`)}>{{text}}</text></svg>`,
+      animate: layers.flatMap((i) => [
+        { id: `e${i}`, attrs: { transform: ["translate(0 0)", `{{a${i}}}`] }, ms: 700, ease: "out" },
+        { id: `e${i}`, attrs: { transform: [`{{a${i}}}`, `{{b${i}}}`] }, delay: 1200, ms: 1500, ease: "in-out" },
+        { id: `e${i}`, attrs: { transform: [`{{b${i}}}`, `{{a${i}}}`] }, delay: 3200, ms: 1500, ease: "in-out" }
+      ])
+    };
+  })()
+};
+var textEffects = [
+  typewriter,
+  scrambleText,
+  kineticStagger,
+  neonSign,
+  strokeDrawText,
+  splitReveal,
+  highlighter,
+  wordCycle,
+  liquidFill,
+  glitchText,
+  extrudedText
+];
+
+// src/catalog/types.ts
+var EFFECT_CATEGORIES = [
+  "gradient",
+  "organic",
+  "pattern",
+  "light",
+  "space",
+  "retro",
+  "image",
+  "overlay",
+  "text",
+  "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 };
 }
@@ -2089,7 +3873,7 @@ var dripText = {
   id: "drip-text",
   name: "Drip text",
   description: "A chunky outlined title popping in, then oozing slime drips from its letters.",
-  category: "icon",
+  category: "text",
   tags: ["title", "text", "drip", "slime", "y2k", "headline"],
   hold: 1200,
   presets: [
@@ -2147,6 +3931,32 @@ var dripText = {
     };
   })()
 };
+var VIEWFINDER_SECONDS = 10;
+var viewfinder = {
+  kind: "vector",
+  id: "viewfinder",
+  name: "Viewfinder",
+  description: "A camera viewfinder over the picture: corner brackets, a blinking REC light and a running timecode.",
+  category: "overlay",
+  tags: ["overlay", "camera", "recording", "vlog", "frame"],
+  hold: 0,
+  presets: [
+    { name: "Night vision", values: { color: [0.45, 1, 0.45], rec: [0.45, 1, 0.45] } },
+    { name: "Live", values: { label: "LIVE", timecode: false } }
+  ],
+  derived: (v) => ({ timecodeOpacity: v.timecode ? 1 : 0 }),
+  motion: {
+    svg: `<svg viewBox="0 0 320 180" font-family="ui-monospace, Menlo, Consolas, monospace"><!-- {{color: color default=#FFFFFF label='Frame'}} {{rec: color default=#EF4444 label='Record light'}} {{timecode: bool default=true label='Timecode'}} --><g fill="none" stroke="{{color}}" stroke-width="2.5" stroke-linecap="square"><path d="M16 42 V16 H42"/><path d="M278 16 H304 V42"/><path d="M304 138 V164 H278"/><path d="M42 164 H16 V138"/><path d="M154 90 H166 M160 84 V96" stroke-width="1.5" opacity="0.8"/></g><circle id="dot" cx="34" cy="33" r="4.5" fill="{{rec}}"/><text x="44" y="37.5" font-size="12" font-weight="700" fill="{{color}}">{{label: text default=REC label='Label'}}</text><text x="296" y="37.5" text-anchor="end" font-size="12" fill="{{color}}" opacity="{{timecodeOpacity}}">00:00:<tspan id="sec">00</tspan>:<tspan id="ff">00</tspan></text></svg>`,
+    animate: Array.from({ length: VIEWFINDER_SECONDS }, (_, s) => [
+      { id: "sec", count: [s, s], format: s < 10 ? "0{n}" : "{n}", delay: s * 1e3, ms: 1 },
+      // Frames 00–24: the single digits padded with a zero, then the rest.
+      { id: "ff", count: [0, 9.49], format: "0{n}", delay: s * 1e3, ms: 400, ease: "linear" },
+      { id: "ff", count: [10, 24.49], format: "{n}", delay: s * 1e3 + 400, ms: 600, ease: "linear" },
+      { id: "dot", attrs: { opacity: [0, 1] }, delay: s * 1e3, ms: 1 },
+      { id: "dot", attrs: { opacity: [1, 0] }, delay: s * 1e3 + 600, ms: 1 }
+    ]).flat()
+  }
+};
 var vectorEffects = [
   spinner,
   bouncingDots,
@@ -2165,7 +3975,8 @@ var vectorEffects = [
   confetti,
   blobMorph,
   dripText,
-  flowNetwork
+  flowNetwork,
+  viewfinder
 ];
 
 // src/catalog/index.ts
@@ -2206,11 +4017,14 @@ var SHADER_EFFECTS = [
   imageDuotone,
   imageHalftone,
   imagePixelate,
+  ...imageTreatments,
   crt,
   filmGrain,
+  ...overlayEffects,
+  ...textShaders,
   ...transitions
 ];
-var EFFECTS = [...SHADER_EFFECTS, ...vectorEffects].sort(
+var EFFECTS = [...SHADER_EFFECTS, ...vectorEffects, ...textEffects].sort(
   (a, b) => EFFECT_CATEGORIES.indexOf(a.category) - EFFECT_CATEGORIES.indexOf(b.category)
 );
 var byId = new Map(EFFECTS.map((e) => [e.id, e]));
@@ -2246,6 +4060,7 @@ export {
   glsl,
   svgDataUrl,
   SAMPLE_IMAGES,
+  textImage,
   EFFECT_CATEGORIES,
   VECTOR_CONTROL_TYPES,
   vectorControls,
@@ -2262,4 +4077,4 @@ export {
   effectControls,
   effectDefaults
 };
-//# sourceMappingURL=chunk-WQYK64AA.js.map
+//# sourceMappingURL=chunk-FHXOMIQY.js.map