@pixerate/flair 0.28.0 → 0.29.0

package/dist/{chunk-4LKAPRFM.js → chunk-6GFOLHCT.js}

@@ -15,8 +15,8 @@ import {
 } from "./chunk-ORAFCHX3.js";
 
 // src/catalog/inputs.ts
-var EFFECT_INPUTS = ["image", "video", "svg", "text", "mask", "path"];
-var EFFECT_INTERACTIONS = ["hover", "press", "click", "trail", "pointer"];
+var EFFECT_INPUTS = ["image", "video", "svg", "text", "mask", "path", "audio"];
+var EFFECT_INTERACTIONS = ["hover", "press", "click", "trail", "pointer", "scroll"];
 function isTextImage(url) {
   if (!url.startsWith("data:image/svg+xml;charset=utf-8,")) return false;
   try {
@@ -31,14 +31,16 @@ function textSlot(control) {
   const holds2 = control.name === "font" || /\bfont\b/i.test(control.label) ? "font" : PATH_DATA.test(value) ? "path" : control.name === "glyphs" ? "glyphs" : "copy";
   return { name: control.name, label: control.label, holds: holds2, default: value };
 }
+var codeOf = (source) => source.replace(/\/\*[\s\S]*?\*\/|\/\/[^\n]*/g, "");
 function shaderInteractions(source) {
-  const code = source.replace(/\/\*[\s\S]*?\*\/|\/\/[^\n]*/g, "");
+  const code = codeOf(source);
   const found = /* @__PURE__ */ new Set();
   if (/\biClicks\b/.test(code)) found.add("click");
   if (/\biTrail\b/.test(code)) found.add("trail");
   if (/\biPointer\s*\.\s*z\b/.test(code)) found.add("hover");
   if (/\biPointer\s*\.\s*w\b/.test(code) || /\biMouse\s*\.\s*z\b/.test(code)) found.add("press");
   if (/\biPointer\s*\.\s*xy?\b/.test(code) || /\biMouse\s*\.\s*xy?\b/.test(code)) found.add("pointer");
+  if (/\biScroll\b/.test(code)) found.add("scroll");
   return EFFECT_INTERACTIONS.filter((i) => found.has(i));
 }
 function inputsOf(effect, controls) {
@@ -64,6 +66,7 @@ function inputsOf(effect, controls) {
       if (slot.holds === "path") accepts.add("path");
     }
   }
+  if (effect.kind === "shader" && /\bi(Audio|Spectrum|Beat)\b/.test(codeOf(effect.source))) accepts.add("audio");
   const interactions = effect.kind === "vector" ? effect.trigger ? [effect.trigger] : [] : shaderInteractions(effect.source);
   return {
     accepts: EFFECT_INPUTS.filter((i) => accepts.has(i)),
@@ -4655,8 +4658,8 @@ function packGlyph(rows) {
   return `ivec2(${a}, ${b})`;
 }
 var vec3Hex = (hex) => {
-  const n11 = parseInt(hex.slice(1), 16);
-  const c = [n11 >> 16, n11 >> 8 & 255, n11 & 255].map((v) => +(v / 255).toFixed(3));
+  const n12 = parseInt(hex.slice(1), 16);
+  const c = [n12 >> 16, n12 >> 8 & 255, n12 & 255].map((v) => +(v / 255).toFixed(3));
   return `vec3(${c.map((v) => Number.isInteger(v) ? `${v}.0` : String(v)).join(", ")})`;
 };
 var paletteArray = (name, hexes) => `const vec3 ${name}[${hexes.length}] = vec3[${hexes.length}](
@@ -5714,7 +5717,7 @@ var chompLoader = {
 var pixelEffects = [pixelText, coinSpin, spaceInvader, pixelHeartHealth, chompLoader];
 
 // src/catalog/pyro.ts
-var round = (n11) => Math.round(n11 * 10) / 10;
+var round = (n12) => Math.round(n12 * 10) / 10;
 var fireworkBurst = {
   kind: "vector",
   id: "firework-burst",
@@ -5769,7 +5772,7 @@ var fireworkBurst = {
 var pyroEffects = [fireworkBurst];
 
 // src/catalog/timewarp.ts
-var r19 = (n11) => Math.round(n11 * 10) / 10;
+var r19 = (n12) => Math.round(n12 * 10) / 10;
 var at2 = (degrees, radius) => {
   const a = degrees * Math.PI / 180;
   return [r19(100 + radius * Math.sin(a)), r19(100 - radius * Math.cos(a))];
@@ -18439,26 +18442,26 @@ float coverage(vec2 p, float radius) {
   }
   return sum / 16.0;
 }`.trim();
-function goldenTaps(n11) {
-  const taps = Array.from({ length: n11 }, (_, i) => {
-    const r = Math.sqrt((i + 0.5) / n11);
+function goldenTaps(n12) {
+  const taps = Array.from({ length: n12 }, (_, i) => {
+    const r = Math.sqrt((i + 0.5) / n12);
     const a = i * 2.39996;
     return `vec2(${(r * Math.cos(a)).toFixed(5)}, ${(r * Math.sin(a)).toFixed(5)})`;
   });
-  return `const vec2 GOLDEN${n11}[${n11}] = vec2[${n11}](${taps.join(", ")});`;
+  return `const vec2 GOLDEN${n12}[${n12}] = vec2[${n12}](${taps.join(", ")});`;
 }
-function coverageTaps(name, n11, blur) {
+function coverageTaps(name, n12, blur) {
   return `
-${goldenTaps(n11)}
+${goldenTaps(n12)}
 float ${name}(vec2 p, float radius) {
   float sum = 0.0;
   if (gMaskPlace.w < 0.5) {
-    for (int i = 0; i < ${n11}; i++) sum += shapeAt(p + radius * GOLDEN${n11}[i], radius * ${blur.toFixed(2)});
+    for (int i = 0; i < ${n12}; i++) sum += shapeAt(p + radius * GOLDEN${n12}[i], radius * ${blur.toFixed(2)});
   } else {
     float lod = log2(max(radius * ${blur.toFixed(2)} * gMaskPlace.z, 1.0));
-    for (int i = 0; i < ${n11}; i++) sum += shapeLod(p + radius * GOLDEN${n11}[i], lod);
+    for (int i = 0; i < ${n12}; i++) sum += shapeLod(p + radius * GOLDEN${n12}[i], lod);
   }
-  return sum / ${n11}.0;
+  return sum / ${n12}.0;
 }`.trim();
 }
 var LITE_TAPS = 10;
@@ -20624,6 +20627,885 @@ var lightingShaders = [
   partyLights
 ];
 
+// src/catalog/shaders/audio.ts
+var SOUND = `
+bool soundDemo() { return uDemo && iBeat == 0.0 && dot(iAudio, iAudio) == 0.0; }
+// The demo: a kick every half second, a hat between, and a gently wandering pink-ish spectrum.
+float demoKick() { return exp(-mod(iTime, 0.5) * 7.0); }
+float demoHat() { return exp(-mod(iTime + 0.25, 0.5) * 16.0); }
+vec4 sound() {
+  if (!soundDemo()) return iAudio;
+  float k = demoKick();
+  float mid = 0.4 + 0.12 * sin(iTime * 1.7) + 0.1 * sin(iTime * 3.1);
+  return vec4(0.45 + 0.3 * k + 0.1 * mid, 0.3 + 0.65 * k, mid, 0.25 + 0.4 * demoHat() + 0.08 * sin(iTime * 5.3));
+}
+float beat() { return soundDemo() ? mod(iTime, 0.5) : iBeat; }
+float spectrum(float x) {
+  x = clamp(x, 0.0, 1.0);
+  if (soundDemo()) {
+    float tilt = 0.8 - 0.5 * x;
+    float wander = 0.6 + 0.25 * sin(iTime * 0.7 + x * 5.0) + 0.1 * sin(x * 23.0 + iTime * 2.3) + 0.07 * sin(x * 47.0 - iTime * 3.7);
+    return clamp(tilt * wander + 0.55 * demoKick() * exp(-x * 7.0) + 0.35 * demoHat() * smoothstep(0.55, 0.9, x), 0.0, 1.0);
+  }
+  float f = x * 63.0;
+  int i = int(f);
+  int j = min(i + 1, 63);
+  return mix(iSpectrum[i / 4][i % 4], iSpectrum[j / 4][j % 4], f - float(i));
+}`.trim();
+var GLOW8 = `
+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 DEMO = `uniform bool uDemo;         // @control default=true label="Demo when silent"`;
+var spectrumBars = {
+  kind: "shader",
+  id: "spectrum-bars",
+  name: "Spectrum bars",
+  description: "Classic equaliser bars dancing to the music, with peak caps kicked up on each beat and an optional mirrored layout.",
+  category: "audio",
+  tags: ["audio", "music", "equalizer", "spectrum", "bars", "visualizer", "beat"],
+  source: glsl(
+    `// Spectrum bars: the spectrum as bars, low to high, coloured by height, with caps that jump on beats.
+uniform int uBars;           // @control min=8 max=64 default=32 label="Bars"
+uniform float uGap;          // @control min=0 max=0.8 default=0.3 label="Gap"
+uniform float uGain;         // @control min=0.3 max=2.5 default=1.1 label="Gain"
+uniform vec3 uColorLow;      // @control color default=#22D3EE label="Low colour"
+uniform vec3 uColorHigh;     // @control color default=#F43F5E label="High colour"
+uniform vec3 uBackground;    // @control color default=#070B16 label="Background"
+uniform bool uMirror;        // @control default=false label="Mirrored"
+uniform bool uPeaks;         // @control default=true label="Peak caps"
+uniform float uRound;        // @control min=0 max=1 default=0.5 label="Rounded"
+${DEMO}`,
+    SOUND,
+    `float box(vec2 p, vec2 hs, float r) {
+  vec2 q = abs(p) - hs + r;
+  return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - r;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  float px = 1.0 / iResolution.y;
+  float n = float(uBars);
+  // Margins round the bars, and a floor a little up from the bottom (the middle when mirrored).
+  float x = (uv.x - 0.06) / 0.88;
+  float base = uMirror ? 0.5 : 0.12;
+  float room = uMirror ? 0.4 : 0.78;
+  float cell = floor(x * n);
+  float within = fract(x * n);
+  vec3 col = uBackground * (1.0 + 0.25 * (1.0 - uv.y));
+  if (x >= 0.0 && x < 1.0) {
+    float v = clamp(spectrum((cell + 0.5) / n) * uGain, 0.0, 1.0);
+    float h = max(v * room, 2.0 * px);
+    // The bar, in pixels from its centre, so corners round alike at any size.
+    float barW = (1.0 - uGap) * 0.88 * iResolution.x / n;
+    vec2 p = vec2((within - 0.5) * 0.88 * iResolution.x / n, (uv.y - base) * iResolution.y);
+    float sideY = uMirror ? abs(p.y) : p.y;
+    float r = uRound * barW * 0.5;
+    float d = box(vec2(p.x, sideY - h * 0.5 * iResolution.y), vec2(barW * 0.5, h * 0.5 * iResolution.y), r);
+    float body = clamp(0.5 - d, 0.0, 1.0);
+    float along = clamp(sideY / (room * iResolution.y), 0.0, 1.0);
+    vec3 bar = mix(uColorLow, uColorHigh, along);
+    // A soft glow under each bar, brighter as it rises.
+    float halo = exp(-max(d, 0.0) / (barW * 0.6)) * 0.25 * v;
+    col += bar * halo;
+    col = mix(col, bar * (0.85 + 0.3 * v), body);
+    if (uPeaks) {
+      // The cap rides just above the bar, kicked up on each beat and falling back under gravity.
+      float b = beat();
+      float kick = b >= 0.0 ? max(0.0, 1.0 - b * 3.0) : 0.0;
+      float lift = 0.035 + 0.12 * v * kick * kick;
+      float capY = (h + lift * room) * iResolution.y;
+      float cap = box(vec2(p.x, sideY - capY), vec2(barW * 0.5, max(2.0, 0.008 * iResolution.y)), r * 0.4);
+      col = mix(col, mix(bar, vec3(1.0), 0.6), clamp(0.5 - cap, 0.0, 1.0));
+    }
+    // A faint reflection on the floor.
+    if (!uMirror && p.y < 0.0) {
+      float rd = box(vec2(p.x, -p.y - h * 0.5 * iResolution.y), vec2(barW * 0.5, h * 0.5 * iResolution.y), r);
+      col = mix(col, bar, clamp(0.5 - rd, 0.0, 1.0) * 0.18 * exp(p.y / (0.06 * iResolution.y)));
+    }
+  }
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Mirrored neon", values: { uMirror: true, uBars: 48, uGap: 0.4, uColorLow: [0.6, 0.2, 1], uColorHigh: [0.2, 1, 0.8] } },
+    { name: "Retro LED", values: { uBars: 16, uGap: 0.15, uRound: 0, uColorLow: [0.2, 1, 0.3], uColorHigh: [1, 0.2, 0.1], uBackground: [0, 0, 0] } },
+    { name: "Minimal", values: { uBars: 64, uGap: 0.5, uRound: 1, uPeaks: false, uColorLow: [1, 1, 1], uColorHigh: [1, 1, 1], uBackground: [0.06, 0.06, 0.07] } }
+  ]
+};
+var circularSpectrum = {
+  kind: "shader",
+  id: "circular-spectrum",
+  name: "Circular spectrum",
+  description: "A ring of spectrum bars radiating round a centre picture or colour, which swells on the bass.",
+  category: "audio",
+  video: "filter",
+  tags: ["audio", "music", "spectrum", "radial", "ring", "visualizer", "album art"],
+  source: glsl(
+    `// Circular spectrum: bars radiating from a ring, the spectrum mirrored round it, a picture in the middle.
+uniform sampler2D uImage;    // @control filter=mipmap wrap=clamp default=${SAMPLE_IMAGES.portrait} label="Centre picture"
+uniform bool uShowImage;     // @control default=true label="Show the picture"
+uniform vec3 uCenter;        // @control color default=#1E1B4B label="Centre colour"
+uniform float uRadius;       // @control min=0.1 max=0.4 default=0.22 label="Radius"
+uniform int uBars;           // @control min=24 max=180 default=96 label="Bars"
+uniform float uLength;       // @control min=0.05 max=0.4 default=0.2 label="Bar length"
+uniform vec3 uColorA;        // @control color default=#38BDF8 label="Colour 1"
+uniform vec3 uColorB;        // @control color default=#E879F9 label="Colour 2"
+uniform vec3 uBackground;    // @control color default=#05060F label="Background"
+uniform float uBackgroundAlpha; // @control min=0 max=1 default=1 label="Background opacity"
+uniform float uSpin;         // @control min=-1 max=1 default=0.1 label="Spin"
+${BACKDROP_CONTROLS}
+${DEMO}`,
+    PICTURE,
+    SOUND,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float px = 1.0 / iResolution.y;
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) * px;
+  vec4 s = sound();
+  float pulse = 1.0 + 0.12 * s.y * s.y;
+  float r0 = uRadius * pulse;
+  float r = length(p);
+  float a = atan(p.x, p.y) + iTime * uSpin;
+  // Bars round the ring: the spectrum low to high from the top down each side, so it is symmetric.
+  float n = float(uBars);
+  float t = fract(a / 6.28318);
+  float cell = floor(t * n);
+  float mirrored = abs((cell + 0.5) / n * 2.0 - 1.0);
+  float v = spectrum(1.0 - mirrored);
+  float len = uLength * (0.08 + v);
+  float within = abs(fract(t * n) - 0.5) * 6.28318 * r / n;
+  float width = 0.45 * 6.28318 * r0 / n;
+  float radial = max(r0 + 0.01 - r, r - (r0 + 0.01 + len));
+  float bar = clamp(0.5 - max(radial, within - width) / px, 0.0, 1.0);
+  vec3 tint = mix(uColorA, uColorB, mirrored);
+  vec4 acc = vec4(uBackground, uBackgroundAlpha);
+  // Glow round the ring with the level.
+  float halo = exp(-abs(r - r0 - 0.02) / (0.04 + 0.06 * s.x)) * (0.3 + 0.7 * s.x);
+  vec3 glowCol = tint * halo * 0.6;
+  acc.rgb += glowCol;
+  acc.a = max(acc.a, clamp(halo * 0.6, 0.0, 1.0));
+  acc = mix(acc, vec4(tint * (0.8 + 0.5 * v), 1.0), bar);
+  // The centre: the picture (or the colour) in a disc, with a thin ring.
+  float disc = clamp((r0 - r) / px, 0.0, 1.0);
+  if (disc > 0.0) {
+    vec2 uv = p / (2.0 * r0) + 0.5;
+    vec4 pic = uShowImage ? pictureRGBA(uImage, vec2(uv.x, uv.y)) : vec4(uCenter, 1.0);
+    vec3 c = mix(uCenter, pic.rgb, pic.a) * (0.9 + 0.2 * s.y);
+    acc = mix(acc, vec4(c, 1.0), disc);
+  }
+  float rim = clamp(1.0 - abs(r - r0) / (1.5 * px), 0.0, 1.0);
+  acc = mix(acc, vec4(mix(tint, vec3(1.0), 0.5), 1.0), rim * 0.8);
+  fragColor = acc;
+}`
+  ),
+  presets: [
+    { name: "Colour disc", values: { uShowImage: false, uCenter: [0.95, 0.3, 0.45], uColorA: [1, 0.8, 0.3], uColorB: [1, 0.3, 0.5] } },
+    { name: "Overlay", values: { uBackgroundAlpha: 0, uShowImage: false, uCenter: [0, 0, 0], uBars: 140, uLength: 0.3 } },
+    { name: "Dense", values: { uBars: 180, uLength: 0.32, uRadius: 0.18, uColorA: [0.3, 1, 0.7], uColorB: [0.2, 0.5, 1] } }
+  ]
+};
+var waveformLine = {
+  kind: "shader",
+  id: "waveform-line",
+  name: "Waveform line",
+  description: "A smooth glowing oscilloscope line drawn from the music's spectrum, with fainter echoes trailing it.",
+  category: "audio",
+  tags: ["audio", "music", "waveform", "oscilloscope", "line", "visualizer", "overlay"],
+  transparent: true,
+  source: glsl(
+    `// Waveform line: a line built from sines whose sizes are the spectrum's bands, glowing, with echoes.
+uniform vec3 uColor;         // @control color default=#5EEAD4 label="Colour"
+uniform vec3 uEcho;          // @control color default=#A78BFA label="Echo colour"
+uniform float uAmplitude;    // @control min=0.05 max=0.5 default=0.22 label="Height"
+uniform float uThickness;    // @control min=0.5 max=8 default=2.5 label="Thickness (px)"
+uniform float uGlow;         // @control min=0 max=2 default=1 label="Glow"
+uniform int uEchoes;         // @control min=0 max=3 default=2 label="Echoes"
+uniform float uSpeed;        // @control min=0 max=3 default=1 label="Speed"
+uniform vec3 uBackground;    // @control color default=#03050C label="Background"
+uniform float uBackgroundAlpha; // @control min=0 max=1 default=0 label="Background opacity"
+${DEMO}`,
+    SOUND,
+    GLOW8,
+    `// The line's height at x (0\u20131) and its slope, from 12 bands of the spectrum, fading out at the ends.
+vec2 wave(float x, float t) {
+  float y = 0.0;
+  float dy = 0.0;
+  for (int k = 0; k < 12; k++) {
+    float fk = float(k);
+    float amp = spectrum((fk + 0.5) / 12.0) / (1.0 + fk * 0.35);
+    float freq = 6.28318 * (1.5 + fk * 1.7);
+    float ph = t * (1.3 + fk * 0.6) * (mod(fk, 2.0) < 0.5 ? 1.0 : -1.0) + fk * 1.7;
+    y += amp * sin(freq * x + ph);
+    dy += amp * freq * cos(freq * x + ph);
+  }
+  float env = sin(3.14159 * clamp(x, 0.0, 1.0));
+  float denv = 3.14159 * cos(3.14159 * clamp(x, 0.0, 1.0));
+  return vec2(y * env, dy * env + y * denv) * 0.35;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  float aspect = iResolution.x / iResolution.y;
+  vec4 s = sound();
+  vec3 light = vec3(0.0);
+  for (int e = 3; e >= 0; e--) {
+    if (e > uEchoes) continue;
+    float lag = float(e) * 0.12;
+    vec2 w = wave(uv.x, iTime * uSpeed - lag) * uAmplitude * (1.0 + 0.6 * s.y) * (1.0 - 0.18 * float(e));
+    // Distance to the line in pixels, corrected for its slope.
+    float slope = w.y / aspect;
+    float d = abs(uv.y - 0.5 - w.x) * iResolution.y / sqrt(1.0 + slope * slope);
+    float core = clamp(uThickness * 0.5 + 0.5 - d, 0.0, 1.0);
+    float halo = exp(-d / (6.0 + 18.0 * s.x)) * uGlow * 0.5;
+    vec3 c = e == 0 ? uColor : uEcho;
+    float fade = e == 0 ? 1.0 : 0.45 / float(e);
+    light += c * (core * 1.6 + halo) * fade;
+  }
+  vec4 g = glow(light);
+  vec3 col = mix(uBackground, g.rgb, g.a);
+  float alpha = max(g.a, uBackgroundAlpha);
+  fragColor = vec4(mix(g.rgb, col, uBackgroundAlpha), alpha);
+}`
+  ),
+  presets: [
+    { name: "On black", values: { uBackgroundAlpha: 1 } },
+    { name: "Laser", values: { uColor: [1, 0.15, 0.25], uEcho: [1, 0.6, 0.2], uThickness: 1.5, uGlow: 1.8 } },
+    { name: "Clean", values: { uEchoes: 0, uGlow: 0.3, uColor: [1, 1, 1], uThickness: 3 } }
+  ]
+};
+var bassPulse = {
+  kind: "shader",
+  id: "bass-pulse",
+  name: "Bass pulse",
+  description: "A picture or logo thumping to the bass: it swells and glows on every kick, with a colour split on the beat.",
+  category: "audio",
+  video: "filter",
+  tags: ["audio", "music", "bass", "pulse", "logo", "beat", "glow"],
+  source: glsl(
+    `// Bass pulse: the picture scaled by the bass, a glow from its edges, a quick colour split on each beat.
+uniform sampler2D uImage;    // @control filter=mipmap wrap=clamp default=${SAMPLE_IMAGES.portrait} label="Picture or logo"
+uniform float uSize;         // @control min=0.2 max=1 default=0.55 label="Size"
+uniform float uPulse;        // @control min=0 max=0.5 default=0.14 label="Pulse"
+uniform vec3 uGlowColor;     // @control color default=#F472B6 label="Glow"
+uniform float uGlow;         // @control min=0 max=2 default=1 label="Glow strength"
+uniform float uSplit;        // @control min=0 max=0.03 default=0.012 label="Colour split on the beat"
+uniform float uCorner;       // @control min=0 max=0.5 default=0.08 label="Corner rounding"
+uniform vec3 uBackground;    // @control color default=#0B0614 label="Background"
+uniform float uBackgroundAlpha; // @control min=0 max=1 default=1 label="Background opacity"
+${BACKDROP_CONTROLS}
+${DEMO}`,
+    PICTURE,
+    SOUND,
+    `// The picture's coverage at p (centred, in heights), and its colour: inside a rounded box, through its own alpha.
+vec4 card(vec2 p, vec2 hs) {
+  float corner = uCorner * min(hs.x, hs.y);
+  vec2 q = abs(p) - hs + corner;
+  float d = length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - corner;
+  float inside = clamp(0.5 - d * iResolution.y, 0.0, 1.0);
+  if (inside <= 0.0) return vec4(0.0);
+  vec4 c = pictureRGBA(uImage, p / (2.0 * hs) + 0.5);
+  return vec4(c.rgb, c.a * inside);
+}
+
+// The glow reaching p: falling off from the picture's box, shaped by its alpha blurred (a coarse mip) nearby.
+float glowAt(vec2 p, vec2 hs, float spread) {
+  float corner = uCorner * min(hs.x, hs.y);
+  vec2 q = abs(p) - hs + corner;
+  float d = length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - corner;
+  float box = exp(-max(d, 0.0) / spread);
+  if (textureSize(uImage, 0).x <= 1 || uBackdropAlpha >= 1.0) return box;
+  // A logo on a clear backdrop: two coarse mips of its alpha, a soft halo round its own shape.
+  vec2 uv = p / (2.0 * hs) + 0.5;
+  float lod = log2(float(textureSize(uImage, 0).x));
+  float blurred = min(1.0, 0.6 * textureLod(uImage, uv, lod - 4.5).a + 0.8 * textureLod(uImage, uv, lod - 3.0).a);
+  float inside = step(abs(uv.x - 0.5), 0.5) * step(abs(uv.y - 0.5), 0.5);
+  return mix(blurred * inside, box, uBackdropAlpha);
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
+  vec4 s = sound();
+  float b = beat();
+  float hit = b >= 0.0 ? exp(-b * 6.0) : 0.0;
+  float bass = s.y * s.y;
+  float scale = 1.0 + uPulse * (bass * 0.7 + hit * 0.5);
+  // The picture's own shape: square for a 1 \xD7 1 placeholder, else its aspect.
+  vec2 size = vec2(textureSize(uImage, 0));
+  float aspect = size.x > 1.0 ? size.x / size.y : 16.0 / 9.0;
+  vec2 hs = 0.5 * uSize * scale * vec2(aspect, 1.0);
+  // Narrower than the frame, whatever the picture's shape.
+  hs *= min(1.0, 0.45 * iResolution.x / iResolution.y / hs.x);
+  // A colour split along x on the beat.
+  vec2 off = vec2(uSplit * hit, 0.0);
+  vec4 c = card(p, hs);
+  vec4 cr = card(p - off, hs);
+  vec4 cb = card(p + off, hs);
+  vec3 pic = vec3(cr.r, c.g, cb.b);
+  float cover = max(c.a, max(cr.a, cb.a));
+  // Glow round the picture, wider and brighter with the bass.
+  float spread = 0.02 + 0.05 * bass + 0.03 * hit;
+  float g = glowAt(p, hs, spread) * (0.45 + 0.9 * bass + 0.6 * hit) * uGlow;
+  vec3 col = uBackground + uGlowColor * g * (1.0 - cover);
+  float alpha = max(uBackgroundAlpha, clamp(g, 0.0, 1.0));
+  col = mix(col, pic * (1.0 + 0.25 * hit), cover);
+  fragColor = vec4(col, max(alpha, cover));
+}`
+  ),
+  presets: [
+    { name: "Logo", values: { uImage: SAMPLE_IMAGES.logo, uBackdropAlpha: 0, uCorner: 0, uSize: 0.6, uGlowColor: [0.5, 0.5, 1] } },
+    { name: "Heart beat", values: { uImage: SAMPLE_IMAGES.heart, uBackdropAlpha: 0, uCorner: 0, uPulse: 0.3, uGlowColor: [1, 0.3, 0.4] } },
+    { name: "Overlay", values: { uBackgroundAlpha: 0, uSplit: 0.02 } }
+  ]
+};
+var audioParticles = {
+  kind: "shader",
+  id: "audio-particles",
+  name: "Audio particles",
+  description: "Sparks bursting outward from the centre on every beat, trailing and fading, over a core that breathes with the level.",
+  category: "audio",
+  tags: ["audio", "music", "particles", "beat", "burst", "overlay", "visualizer"],
+  transparent: true,
+  source: glsl(
+    `// Audio particles: a burst of sparks on each beat, flying out and slowing, plus a core glowing with the level.
+uniform int uCount;          // @control min=8 max=64 default=40 label="Particles"
+uniform float uSpeed;        // @control min=0.2 max=2 default=0.9 label="Burst speed"
+uniform float uSize;         // @control min=0.002 max=0.02 default=0.007 label="Size"
+uniform float uLife;         // @control min=0.2 max=2 default=0.9 label="Lifetime"
+uniform vec3 uColorA;        // @control color default=#FDE047 label="Colour 1"
+uniform vec3 uColorB;        // @control color default=#FB7185 label="Colour 2"
+uniform vec3 uColorC;        // @control color default=#60A5FA label="Colour 3"
+uniform float uCore;         // @control min=0 max=1 default=0.6 label="Core glow"
+${DEMO}`,
+    HASH,
+    SOUND,
+    GLOW8,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
+  vec4 s = sound();
+  float b = beat();
+  vec3 light = vec3(0.0);
+  // The core breathes with the level.
+  float r = length(p);
+  light += mix(uColorA, uColorB, 0.5) * uCore * (0.2 + 0.8 * s.x) * exp(-r / (0.04 + 0.08 * s.y)) * 0.8;
+  if (b >= 0.0 && b < uLife) {
+    // Each burst is seeded by when it began (the beat's time on the iTime clock), so bursts differ.
+    float seed = floor((iTime - b) * 8.0);
+    float life = b / uLife;
+    float fade = (1.0 - life) * (1.0 - life);
+    float energy = 0.6 + 0.6 * s.y;
+    for (int i = 0; i < 64; i++) {
+      if (i >= uCount) break;
+      vec2 h = hash22(vec2(float(i) * 1.91 + 0.3, seed));
+      float ang = 6.28318 * (float(i) + h.x) / float(uCount);
+      float v = uSpeed * energy * (0.35 + 0.65 * h.y);
+      // Out fast, slowed by drag, the slow ones drooping a little.
+      float dist = v * (1.0 - exp(-b * 3.5)) / 3.5;
+      vec2 at = vec2(sin(ang), cos(ang)) * dist - vec2(0.0, 0.08 * b * b);
+      vec2 dir = normalize(vec2(sin(ang), cos(ang)) + 1e-4);
+      // A short streak behind each spark, along its direction.
+      vec2 d = p - at;
+      float along = clamp(dot(d, -dir), 0.0, 0.04 * exp(-b * 3.0) + 0.002);
+      float dd = length(d + dir * along);
+      float size = uSize * (1.0 - 0.5 * life);
+      float spark = exp(-dd * dd / (size * size)) + 0.25 * exp(-dd / (size * 4.0));
+      vec3 c = h.x < 0.33 ? uColorA : h.x < 0.66 ? uColorB : uColorC;
+      light += c * spark * fade * 1.4;
+    }
+  }
+  // Fine glitter that shimmers with the treble.
+  vec2 cell = floor(p * 40.0);
+  float g = hash12(cell + floor(iTime * 12.0));
+  float twinkle = step(0.985, g) * s.w * exp(-length(fract(p * 40.0) - 0.5) * 8.0);
+  light += uColorC * twinkle;
+  fragColor = glow(light);
+}`
+  ),
+  presets: [
+    { name: "Gold", values: { uColorA: [1, 0.85, 0.4], uColorB: [1, 0.6, 0.2], uColorC: [1, 1, 0.8], uCount: 56 } },
+    { name: "Ice", values: { uColorA: [0.6, 0.9, 1], uColorB: [0.3, 0.6, 1], uColorC: [1, 1, 1], uSpeed: 1.3, uLife: 1.2 } }
+  ]
+};
+var audioPlasma = {
+  kind: "shader",
+  id: "audio-plasma",
+  name: "Audio plasma",
+  description: "A flowing plasma whose swirl, scale and colours follow the bass, mids and highs, flaring on each beat.",
+  category: "audio",
+  tags: ["audio", "music", "plasma", "gradient", "psychedelic", "background", "visualizer"],
+  source: glsl(
+    `// Audio plasma: layered sines warped by noise; the bass pushes the flow, the mids tilt the palette, the highs add grain.
+uniform float uScale;        // @control min=0.5 max=6 default=2.4 label="Scale"
+uniform float uFlow;         // @control min=0 max=2 default=0.5 label="Flow"
+uniform float uReact;        // @control min=0 max=2 default=1 label="Reactivity"
+uniform vec3 uPhase;         // @control color default=#1A66B3 label="Palette phase"
+uniform float uContrast;     // @control min=0.5 max=2 default=1.1 label="Contrast"
+${DEMO}`,
+    HASH,
+    NOISE,
+    PALETTE,
+    SOUND,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
+  vec4 s = sound() * uReact;
+  float b = beat();
+  float hit = b >= 0.0 ? exp(-b * 5.0) * uReact : 0.0;
+  float t = iTime * uFlow;
+  // The bass pushes the pattern on (a nudge that settles back, not a jump in time).
+  float push = 0.8 * s.y + 0.5 * hit;
+  vec2 q = p * uScale * (1.0 - 0.1 * s.y);
+  vec2 w = vec2(vnoise(q * 0.7 + t * 0.3), vnoise(q * 0.7 - t * 0.27 + 5.0)) - 0.5;
+  q += w * (1.2 + 1.5 * s.z);
+  float v = sin(q.x + t + push);
+  v += sin(q.y * 1.3 - t * 0.8 + push * 0.7);
+  v += sin((q.x + q.y) * 0.8 + t * 0.6);
+  v += sin(length(q + vec2(sin(t * 0.4), cos(t * 0.3))) * 2.0 - t * 1.2 - push * 1.5);
+  v = v * 0.25 * uContrast;
+  // The mids turn the palette; the highs add a fine shimmer.
+  vec3 col = palette(v * 0.7 + 0.15 * s.z + 0.05 * t, vec3(0.45, 0.4, 0.5), vec3(0.4, 0.35, 0.4), vec3(0.8, 0.7, 0.6), uPhase + vec3(0.0, 0.1 * s.w, 0.2 * s.y));
+  col *= 0.75 + 0.35 * s.x + 0.4 * hit;
+  col += (hash12(fragCoord + floor(iTime * 30.0)) - 0.5) * 0.06 * s.w;
+  fragColor = vec4(clamp(col, 0.0, 1.0), 1.0);
+}`
+  ),
+  presets: [
+    { name: "Sunset", values: { uPhase: [0, 0.15, 0.3], uScale: 1.6 } },
+    { name: "Acid", values: { uPhase: [0.3, 0.6, 0.1], uScale: 4, uContrast: 1.6, uFlow: 1 } },
+    { name: "Calm", values: { uReact: 0.4, uFlow: 0.25, uScale: 1.2 } }
+  ]
+};
+var vinyl = {
+  kind: "shader",
+  id: "vinyl",
+  name: "Vinyl",
+  description: "A record spinning on a turntable, its label a picture, its grooves catching the light with the music, the tonearm riding the beat.",
+  category: "audio",
+  video: "stills",
+  tags: ["audio", "music", "vinyl", "record", "turntable", "retro", "album art"],
+  source: glsl(
+    `// Vinyl: a spinning record; each groove's sheen follows the spectrum at its radius, the label is a picture.
+uniform sampler2D uLabel;    // @control filter=mipmap wrap=clamp default=${SAMPLE_IMAGES.portrait} label="Label picture"
+uniform float uRpm;          // @control min=0 max=78 default=33.3 label="Speed (rpm)"
+uniform vec3 uRecord;        // @control color default=#101014 label="Record"
+uniform vec3 uSheen;         // @control color default=#C4B5FD label="Sheen"
+uniform float uShimmer;      // @control min=0 max=2 default=1 label="Shimmer"
+uniform vec3 uBackground;    // @control color default=#2A211C label="Platter"
+uniform float uBackgroundAlpha; // @control min=0 max=1 default=1 label="Platter opacity"
+uniform bool uArm;           // @control default=true label="Tonearm"
+${BACKDROP_CONTROLS}
+${DEMO}`,
+    PICTURE,
+    SOUND,
+    ROTATE,
+    `float segment(vec2 p, vec2 a, vec2 b) {
+  vec2 ab = b - a;
+  float t = clamp(dot(p - a, ab) / dot(ab, ab), 0.0, 1.0);
+  return length(p - a - ab * t);
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  float px = 1.0 / iResolution.y;
+  vec2 p = (fragCoord - 0.5 * iResolution.xy) * px;
+  vec2 c = p + vec2(0.12, 0.0);
+  vec4 s = sound();
+  float b = beat();
+  float hit = b >= 0.0 ? exp(-b * 8.0) : 0.0;
+  float R = 0.44;
+  float r = length(c);
+  float spin = iTime * uRpm / 60.0 * 6.28318;
+  vec2 q = rot(spin) * c;
+  float ang = atan(q.y, q.x);
+  // The platter, with a soft shadow under the record.
+  vec3 col = uBackground * (0.85 + 0.15 * smoothstep(0.9, 0.0, length(p)));
+  float shadow = 0.5 * exp(-max(r - R, 0.0) / 0.02) * step(R, r);
+  col *= 1.0 - shadow;
+  float alpha = max(uBackgroundAlpha, shadow);
+  float disc = clamp((R - r) / px, 0.0, 1.0);
+  if (disc > 0.0) {
+    // Grooves: fine rings; their sheen is the spectrum at that radius (bass outside, treble in), in two
+    // bright wedges opposite the light, as on a real record.
+    float band = clamp((R - r) / (R - 0.14), 0.0, 1.0);
+    float level = spectrum(band);
+    float grooves = 0.5 + 0.5 * sin(r * 900.0);
+    float wedge = pow(abs(cos(atan(c.y, c.x) - 0.8)), 24.0);
+    float sheen = wedge * (0.25 + uShimmer * level) * (0.6 + 0.4 * grooves);
+    vec3 rec = uRecord * (0.9 + 0.2 * grooves) + uSheen * sheen;
+    // A faint swirl that shows the spin.
+    rec += 0.03 * sin(ang * 2.0 + r * 40.0);
+    // Lead-in and run-out rings.
+    rec *= 1.0 - 0.4 * (smoothstep(0.004, 0.0, abs(r - R + 0.012)) + smoothstep(0.004, 0.0, abs(r - 0.15)));
+    col = mix(col, rec, disc);
+    // The label: the picture, turning with the record.
+    float label = clamp((0.13 - r) / px, 0.0, 1.0);
+    vec4 pic = pictureRGBA(uLabel, q / 0.26 + 0.5);
+    vec3 lab = mix(uRecord, pic.rgb, pic.a) * (0.95 + 0.1 * s.y);
+    col = mix(col, lab, label);
+    // The spindle.
+    col = mix(col, vec3(0.8), clamp((0.008 - r) / px, 0.0, 1.0));
+  }
+  if (uArm) {
+    // The tonearm: from a pivot at the top right to the stylus on the outer grooves, nudged by the beat.
+    vec2 pivot = vec2(0.42, 0.34);
+    float swing = 0.32 + 0.004 * hit;
+    vec2 head = pivot + vec2(-sin(swing + 0.9), -cos(swing + 0.9)) * 0.5;
+    float arm = segment(p, pivot, head);
+    float shade = clamp((0.009 - arm) / px, 0.0, 1.0);
+    col = mix(col * (1.0 - 0.35 * exp(-segment(p + vec2(-0.01, 0.015), pivot, head) / 0.015)), vec3(0.78, 0.78, 0.82), shade);
+    float cart = segment(p, head, head + vec2(-0.03, -0.012));
+    col = mix(col, vec3(0.15), clamp((0.016 - cart) / px, 0.0, 1.0));
+    float base = length(p - pivot);
+    float foot = clamp((0.035 - base) / px, 0.0, 1.0);
+    col = mix(col, vec3(0.6), foot);
+    col = mix(col, vec3(0.3), clamp((0.015 - base) / px, 0.0, 1.0));
+    alpha = max(alpha, max(shade, max(foot, clamp((0.016 - cart) / px, 0.0, 1.0))));
+  }
+  fragColor = vec4(col, max(alpha, disc));
+}`
+  ),
+  presets: [
+    { name: "Red vinyl", values: { uRecord: [0.45, 0.04, 0.06], uSheen: [1, 0.6, 0.6] } },
+    { name: "45 rpm", values: { uRpm: 45, uLabel: SAMPLE_IMAGES.logo, uBackdrop: [0.95, 0.9, 0.8] } }
+  ]
+};
+var audioShaders = [spectrumBars, circularSpectrum, waveformLine, bassPulse, audioParticles, audioPlasma, vinyl];
+
+// src/catalog/shaders/scroll.ts
+var SCROLL = `
+bool scrollDemo() { return uDemo && dot(iScroll, iScroll) == 0.0; }
+vec4 scroll() {
+  if (!scrollDemo()) return iScroll;
+  // Down and back up every 6 s, resting a moment at each end.
+  float ph = fract(iTime / 6.0);
+  float u = clamp(ph < 0.5 ? ph * 2.4 - 0.1 : (1.0 - ph) * 2.4 - 0.1, 0.0, 1.0);
+  float x = u * u * (3.0 - 2.0 * u);
+  float moving = u > 0.0 && u < 1.0 ? 1.0 : 0.0;
+  // dx/dt in viewport heights a second (progress 0 to 1 being about two viewport heights): u moves 2.4 per 6 s.
+  float v = moving * 6.0 * u * (1.0 - u) * (2.4 / 6.0) * 2.0 * (ph < 0.5 ? 1.0 : -1.0);
+  return vec4(x, x, v, moving);
+}`.trim();
+var DEMO2 = `uniform bool uDemo;         // @control default=true label="Demo when not scrolled"`;
+var scrollReveal = {
+  kind: "shader",
+  id: "scroll-reveal",
+  name: "Scroll reveal",
+  description: "A picture revealed by a soft wipe, dissolve, iris or blinds as it scrolls into view, settling from a slight zoom.",
+  category: "scroll",
+  video: "filter",
+  transparent: true,
+  tags: ["interactive", "scroll", "reveal", "wipe", "dissolve", "image", "landing page"],
+  source: glsl(
+    `// Scroll reveal: the picture's coverage follows how far the canvas has come into view.
+uniform sampler2D uImage;    // @control filter=mipmap wrap=clamp default=${SAMPLE_IMAGES.landscape} label="Image"
+uniform int uStyle;          // @control min=0 max=3 default=0 label="Style (wipe, dissolve, iris, blinds)"
+uniform float uStart;        // @control min=0 max=1 default=0.1 label="Starts at"
+uniform float uEnd;          // @control min=0 max=1 default=0.5 label="Done at"
+uniform float uSoftness;     // @control min=0 max=0.4 default=0.12 label="Edge softness"
+uniform float uZoom;         // @control min=0 max=0.3 default=0.08 label="Settle zoom"
+uniform vec3 uEdge;          // @control color default=#FFFFFF label="Edge glow"
+uniform float uEdgeGlow;     // @control min=0 max=1 default=0.35 label="Edge glow strength"
+${BACKDROP_CONTROLS}
+${DEMO2}`,
+    PICTURE,
+    HASH,
+    NOISE,
+    SCROLL,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec4 s = scroll();
+  float r = smoothstep(uStart, max(uEnd, uStart + 1e-3), s.x);
+  // The field the reveal sweeps across, 0\u20131, and how far it has swept.
+  float field;
+  if (uStyle == 0) field = 1.0 - uv.y + 0.04 * (vnoise(vec2(uv.x * 9.0, 0.0)) - 0.5);
+  else if (uStyle == 1) field = vnoise(fragCoord / iResolution.y * 18.0) * 0.6 + vnoise(fragCoord / iResolution.y * 60.0) * 0.4;
+  else if (uStyle == 2) field = length((uv - 0.5) * vec2(iResolution.x / iResolution.y, 1.0)) / 0.9;
+  else field = fract(uv.y * 8.0) * 0.9 + uv.y * 0.1;
+  float soft = max(uSoftness, 1e-3);
+  float edge = r * (1.0 + soft) - soft;
+  float shown = smoothstep(edge + soft, edge, field);
+  float rim = exp(-pow((field - edge - soft * 0.5) / (soft * 0.35 + 0.01), 2.0)) * (1.0 - step(0.999, r)) * step(0.001, r);
+  // The picture settles from a slight zoom as it is revealed.
+  vec2 at = (uv - 0.5) / (1.0 + uZoom * (1.0 - r)) + 0.5;
+  vec4 pic = pictureRGBA(uImage, at);
+  vec3 col = pic.rgb + uEdge * rim * uEdgeGlow;
+  float alpha = pic.a * shown;
+  fragColor = vec4(col, clamp(max(alpha, rim * uEdgeGlow * pic.a), 0.0, 1.0));
+}`
+  ),
+  presets: [
+    { name: "Dissolve", values: { uStyle: 1, uSoftness: 0.2 } },
+    { name: "Iris", values: { uStyle: 2, uSoftness: 0.05, uImage: SAMPLE_IMAGES.portrait } },
+    { name: "Blinds", values: { uStyle: 3, uSoftness: 0.05, uEdgeGlow: 0, uImage: SAMPLE_IMAGES.city } }
+  ]
+};
+var parallaxLayers = {
+  kind: "shader",
+  id: "parallax-layers",
+  name: "Parallax layers",
+  description: "Layered hills under a sky, the near ones sliding further than the far ones as the page scrolls, for depth.",
+  category: "scroll",
+  tags: ["interactive", "scroll", "parallax", "landscape", "hills", "depth", "hero", "background"],
+  source: glsl(
+    `// Parallax layers: five ridgelines, each shifted by the scroll in proportion to how near it is.
+uniform vec3 uSkyTop;        // @control color default=#1E3A8A label="Sky top"
+uniform vec3 uSkyBottom;     // @control color default=#FDBA74 label="Sky horizon"
+uniform vec3 uFar;           // @control color default=#A78BFA label="Far hills"
+uniform vec3 uNear;          // @control color default=#1E1B4B label="Near hills"
+uniform vec3 uSun;           // @control color default=#FFF7D6 label="Sun"
+uniform float uDepth;        // @control min=0 max=1.5 default=0.6 label="Parallax depth"
+uniform float uRough;        // @control min=0 max=1 default=0.5 label="Ruggedness"
+uniform float uDrift;        // @control min=0 max=0.2 default=0.02 label="Drift"
+${DEMO2}`,
+    HASH,
+    NOISE,
+    SCROLL,
+    `float ridge(float x, float seed) {
+  float h = vnoise(vec2(x * 1.3, seed)) * 0.6 + vnoise(vec2(x * 3.1, seed + 7.0)) * 0.3 * (0.5 + uRough) + vnoise(vec2(x * 8.0, seed + 3.0)) * 0.1 * uRough;
+  return h;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  float aspect = iResolution.x / iResolution.y;
+  vec4 s = scroll();
+  float shift = (s.x - 0.5) * uDepth;
+  // The sky (and sun) move least: further away.
+  float skyY = uv.y + shift * 0.15;
+  vec3 col = mix(uSkyBottom, uSkyTop, smoothstep(0.1, 1.0, skyY));
+  vec2 sun = vec2(0.68 * aspect, 0.62 - shift * 0.2);
+  float d = length(vec2(uv.x * aspect, uv.y) - sun);
+  col = mix(col, uSun, smoothstep(0.075, 0.07, d));
+  col += uSun * exp(-d * 6.0) * 0.25;
+  for (int i = 0; i < 5; i++) {
+    float k = float(i) / 4.0;
+    // Nearer layers sit lower, rise higher with the scroll, and drift faster.
+    float base = 0.55 - 0.1 * float(i) + shift * (0.15 + 0.85 * k * k) ;
+    float x = uv.x * aspect * (0.6 + 0.5 * k) + iTime * uDrift * (0.3 + k) + float(i) * 11.3;
+    float top = base + ridge(x, float(i) * 5.0) * (0.18 + 0.05 * k);
+    float layer = smoothstep(top + 1.5 / iResolution.y, top, uv.y);
+    vec3 tint = mix(mix(uFar, uSkyBottom, 0.35), uNear, k);
+    // Mist at each layer's foot.
+    tint = mix(tint, uSkyBottom, 0.25 * (1.0 - k) * smoothstep(top - 0.25, top, uv.y) * 0.5);
+    col = mix(col, tint, layer);
+  }
+  fragColor = vec4(col, 1.0);
+}`
+  ),
+  presets: [
+    { name: "Night", values: { uSkyTop: [0.02, 0.03, 0.1], uSkyBottom: [0.15, 0.2, 0.4], uFar: [0.2, 0.25, 0.45], uNear: [0.02, 0.02, 0.06], uSun: [0.9, 0.92, 1] } },
+    { name: "Forest", values: { uSkyTop: [0.55, 0.78, 0.95], uSkyBottom: [0.9, 0.95, 0.9], uFar: [0.45, 0.65, 0.55], uNear: [0.05, 0.2, 0.12], uRough: 0.9 } },
+    { name: "Desert", values: { uSkyTop: [0.95, 0.55, 0.3], uSkyBottom: [1, 0.85, 0.6], uFar: [0.85, 0.55, 0.4], uNear: [0.45, 0.2, 0.12], uRough: 0.2 } }
+  ]
+};
+var scrollProgressGlow = {
+  kind: "shader",
+  id: "scroll-progress-glow",
+  name: "Scroll progress glow",
+  description: "A reading-progress bar along the top of the page, filling as you scroll, its glowing head flaring while you move.",
+  category: "scroll",
+  transparent: true,
+  tags: ["interactive", "scroll", "progress", "reading", "bar", "overlay", "ui"],
+  source: glsl(
+    `// Scroll progress glow: a bar as long as the page's scroll, with a glow under it and a bright head.
+uniform vec3 uColorA;        // @control color default=#22D3EE label="Start colour"
+uniform vec3 uColorB;        // @control color default=#A855F7 label="End colour"
+uniform float uHeight;       // @control min=1 max=16 default=4 label="Thickness (px)"
+uniform float uGlow;         // @control min=0 max=2 default=1 label="Glow"
+uniform bool uBottom;        // @control default=false label="Along the bottom"
+uniform vec3 uTrack;         // @control color default=#FFFFFF label="Track"
+uniform float uTrackAlpha;   // @control min=0 max=1 default=0.08 label="Track opacity"
+${DEMO2}`,
+    SCROLL,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec4 s = scroll();
+  float progress = clamp(s.y, 0.0, 1.0);
+  float x = fragCoord.x;
+  // Pixels from the bar's edge, into the page.
+  float y = uBottom ? fragCoord.y : iResolution.y - fragCoord.y;
+  float end = progress * iResolution.x;
+  float inBar = clamp(uHeight - y + 0.5, 0.0, 1.0);
+  float filled = clamp(end - x + 0.5, 0.0, 1.0);
+  vec3 tint = mix(uColorA, uColorB, x / iResolution.x);
+  float lit = 0.35 + 0.65 * s.w;
+  // A glow spilling down from the filled part, and a flare round the head while scrolling.
+  float under = filled * exp(-max(y - uHeight, 0.0) / (6.0 + 10.0 * s.w)) * 0.5 * uGlow * lit;
+  float head = exp(-length(vec2(x - end, max(y - uHeight * 0.5, 0.0))) / (8.0 + 20.0 * s.w)) * uGlow * (0.4 + 0.9 * s.w) * step(0.001, progress);
+  vec3 light = tint * (under + head * 1.4);
+  vec4 bar = vec4(mix(uTrack, tint * (1.0 + 0.3 * s.w), filled), inBar * mix(uTrackAlpha, 1.0, filled));
+  // Light over the bar, as straight colour with alpha.
+  vec3 g = 1.0 - exp(-light);
+  float ga = max(g.r, max(g.g, g.b));
+  float alpha = bar.a + ga * (1.0 - bar.a);
+  vec3 col = (bar.rgb * bar.a + g * (1.0 - bar.a)) / max(alpha, 1e-4);
+  fragColor = vec4(col, alpha);
+}`
+  ),
+  presets: [
+    { name: "Fire", values: { uColorA: [1, 0.8, 0.2], uColorB: [1, 0.2, 0.1], uHeight: 3 } },
+    { name: "Thick, bottom", values: { uBottom: true, uHeight: 10, uGlow: 0.5, uTrackAlpha: 0.15 } }
+  ]
+};
+var scrollVelocityBlur = {
+  kind: "shader",
+  id: "scroll-velocity-blur",
+  name: "Scroll velocity blur",
+  description: "A picture smeared with motion blur and a colour split as fast as the page scrolls, sharp again when it stops.",
+  category: "scroll",
+  video: "filter",
+  tags: ["interactive", "scroll", "motion blur", "speed", "image", "chromatic"],
+  source: glsl(
+    `// Scroll velocity blur: samples along the scroll direction, as many viewport heights as it is moving per second.
+uniform sampler2D uImage;    // @control filter=mipmap wrap=clamp default=${SAMPLE_IMAGES.city} label="Image"
+uniform float uAmount;       // @control min=0 max=0.3 default=0.08 label="Blur per speed"
+uniform float uMax;          // @control min=0.01 max=0.4 default=0.15 label="Most blur"
+uniform float uSplit;        // @control min=0 max=1 default=0.4 label="Colour split"
+uniform float uStretch;      // @control min=0 max=0.2 default=0.04 label="Stretch"
+${BACKDROP_CONTROLS}
+${DEMO2}`,
+    PICTURE,
+    SCROLL,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec4 s = scroll();
+  float v = s.z;
+  float len = clamp(abs(v) * uAmount, 0.0, uMax) * sign(v);
+  // A slight stretch along the scroll while moving.
+  uv.y = (uv.y - 0.5) / (1.0 + uStretch * abs(len) / max(uMax, 1e-3)) + 0.5;
+  vec4 acc = vec4(0.0);
+  vec3 split = vec3(0.0);
+  for (int i = 0; i < 16; i++) {
+    float t = (float(i) + 0.5) / 16.0 - 0.5;
+    float w = 1.0 - abs(t) * 1.2;
+    vec4 c = pictureRGBA(uImage, uv + vec2(0.0, t * len));
+    acc += c * w;
+    // Red trails, blue leads: a colour split along the motion.
+    split += vec3(c.r * max(-t, 0.0), 0.0, c.b * max(t, 0.0)) * w;
+  }
+  acc /= 6.4;
+  split /= 6.4;
+  vec3 col = acc.rgb + (split * 2.0 - vec3(acc.r, 0.0, acc.b) * 0.5) * uSplit * clamp(abs(len) * 10.0, 0.0, 1.0);
+  fragColor = vec4(clamp(col, 0.0, 1.0), clamp(acc.a, 0.0, 1.0));
+}`
+  ),
+  presets: [
+    { name: "Subtle", values: { uAmount: 0.03, uSplit: 0.1, uStretch: 0 } },
+    { name: "Warp speed", values: { uAmount: 0.2, uMax: 0.35, uSplit: 1, uStretch: 0.15 } }
+  ]
+};
+var scrollZoom = {
+  kind: "shader",
+  id: "scroll-zoom",
+  name: "Scroll zoom",
+  description: "A picture zooming in (or out) and drifting as it passes through the viewport, with an optional turn and vignette.",
+  category: "scroll",
+  video: "filter",
+  tags: ["interactive", "scroll", "zoom", "ken burns", "image", "hero"],
+  source: glsl(
+    `// Scroll zoom: the picture's scale, pan and turn follow its progress through the viewport.
+uniform sampler2D uImage;    // @control filter=mipmap wrap=clamp default=${SAMPLE_IMAGES.landscape} label="Image"
+uniform float uFrom;         // @control min=0.5 max=3 default=1 label="Zoom entering"
+uniform float uTo;           // @control min=0.5 max=3 default=1.6 label="Zoom leaving"
+uniform vec2 uFocus;         // @control min=0 max=1 default=0.62,0.5 label="Zoom towards"
+uniform float uPan;          // @control min=-0.3 max=0.3 default=0.06 label="Vertical drift"
+uniform float uTurn;         // @control min=-30 max=30 default=0 label="Turn (degrees)"
+uniform float uVignette;     // @control min=0 max=1 default=0.3 label="Vignette"
+${BACKDROP_CONTROLS}
+${DEMO2}`,
+    PICTURE,
+    SCROLL,
+    `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec4 s = scroll();
+  float k = s.x * s.x * (3.0 - 2.0 * s.x);
+  float zoom = mix(uFrom, uTo, k);
+  float a = radians(uTurn) * (k - 0.5);
+  vec2 aspect = vec2(iResolution.x / iResolution.y, 1.0);
+  vec2 p = (uv - uFocus) * aspect;
+  p = mat2(cos(a), sin(a), -sin(a), cos(a)) * p / zoom;
+  vec2 at = p / aspect + uFocus + vec2(0.0, uPan * (k - 0.5));
+  vec4 pic = pictureRGBA(uImage, at);
+  float vig = 1.0 - uVignette * smoothstep(0.35, 0.95, length((uv - 0.5) * aspect) / length(aspect * 0.5));
+  fragColor = vec4(pic.rgb * vig, pic.a);
+}`
+  ),
+  presets: [
+    { name: "Zoom out", values: { uFrom: 1.8, uTo: 1 } },
+    { name: "Dramatic turn", values: { uTo: 2.2, uTurn: 18, uVignette: 0.6, uImage: SAMPLE_IMAGES.city } }
+  ]
+};
+var scrollShaders = [scrollReveal, parallaxLayers, scrollProgressGlow, scrollVelocityBlur, scrollZoom];
+
+// src/catalog/scroll.ts
+var n10 = (name) => `{{${name}}}`;
+var SANS7 = `system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`;
+var scrollDraw = {
+  kind: "vector",
+  id: "scroll-draw",
+  name: "Scroll draw",
+  description: "A line drawing itself along its path as the page scrolls, a dot riding its tip, and undrawing as you scroll back.",
+  category: "scroll",
+  trigger: "scroll",
+  tags: ["interactive", "scroll", "line", "path", "draw", "route", "storytelling"],
+  motion: {
+    svg: `<svg viewBox="0 0 400 200" fill="none"><!-- {{accent: color default=#6366F1 label='Line'}} {{track: color default=#CBD5E1 label='Track'}} {{width: float min=1 max=16 default=6 step=1 label='Width'}} --><path d="{{path: text default='M24 160 C84 20 150 24 196 100 S318 186 376 44' label='Path'}}" stroke="{{track}}" stroke-width="2" stroke-dasharray="2 8" stroke-linecap="round"/><path id="scrollDrawLine" d="{{path}}" stroke="{{accent}}" stroke-width="{{width}}" stroke-linecap="round" stroke-linejoin="round" pathLength="1" stroke-dasharray="1 1" stroke-dashoffset="1"/><circle id="scrollDrawDot" cx="0" cy="0" r="{{dot}}" fill="{{accent}}" stroke="#FFFFFF" stroke-width="3"/></svg>`,
+    animate: [
+      { id: "scrollDrawLine", draw: true, ms: 1e3, ease: "linear" },
+      { id: "scrollDrawDot", along: "scrollDrawLine", ms: 1e3, ease: "linear" }
+    ]
+  },
+  derived: (v) => ({ dot: Math.round((Number(v.width) * 0.9 + 4) * 10) / 10 }),
+  presets: [
+    { name: "Signature", values: { path: "M30 140 C60 60 90 60 100 120 C110 170 140 70 170 90 C200 110 190 150 220 130 C250 110 270 80 300 110 C320 130 350 120 370 90", width: 4, accent: [0.07, 0.09, 0.15] } },
+    { name: "Bold", values: { width: 12, accent: [0.93, 0.27, 0.27] } }
+  ]
+};
+var scrollCounter = {
+  kind: "vector",
+  id: "scroll-counter",
+  name: "Scroll counter",
+  description: "A big number counting up as it scrolls into view, with its label and a line growing under it.",
+  category: "scroll",
+  trigger: "scroll",
+  tags: ["interactive", "scroll", "counter", "number", "stat", "kpi", "landing page"],
+  motion: {
+    svg: `<svg viewBox="0 0 400 200" font-family="${SANS7}"><!-- {{accent: color default=#0EA5E9 label='Accent'}} {{ink: color default=#0F172A label='Number'}} {{muted: color default=#64748B label='Label colour'}} {{value: float min=0 max=1000000 default=2400 step=1 label='Number'}} {{decimals: int min=0 max=3 default=0 label='Decimals'}} --><text id="scrollCounterValue" x="200" y="112" text-anchor="middle" font-size="76" font-weight="800" fill="{{ink}}" style="font-variant-numeric: tabular-nums">0</text><rect id="scrollCounterLine" x="140" y="132" width="0" height="6" rx="3" fill="{{accent}}"/><text x="200" y="170" text-anchor="middle" font-size="20" font-weight="500" fill="{{muted}}">{{label: text default='happy customers' label='Label'}}</text></svg>`,
+    animate: [
+      { id: "scrollCounterValue", count: [0, n10("value")], format: "{{prefix: text default='' label='Before the number'}}{n}{{suffix: text default='+' label='After the number'}}", decimals: n10("decimals"), ms: 1e3, ease: "out" },
+      { id: "scrollCounterLine", attrs: { width: [0, 120] }, ms: 1e3, ease: "out" }
+    ]
+  },
+  presets: [
+    { name: "Revenue", values: { value: 12.5, decimals: 1, prefix: "$", suffix: "M", label: "raised so far" } },
+    { name: "Percent", values: { value: 98, suffix: "%", label: "uptime", accent: [0.13, 0.77, 0.37] } }
+  ]
+};
+var STEP_X = [60, 160, 260, 360];
+var scrollSteps = {
+  kind: "vector",
+  id: "scroll-steps",
+  name: "Scroll steps",
+  description: "Four step markers joined by a line that fills as you scroll, each marker lighting up as the line reaches it.",
+  category: "scroll",
+  trigger: "scroll",
+  tags: ["interactive", "scroll", "steps", "progress", "timeline", "onboarding", "ui"],
+  motion: {
+    svg: `<svg viewBox="0 0 420 160" font-family="${SANS7}"><!-- {{accent: color default=#8B5CF6 label='Accent'}} {{track: color default=#E2E8F0 label='Track'}} {{text: color default=#334155 label='Text'}} --><line x1="60" y1="64" x2="360" y2="64" stroke="{{track}}" stroke-width="6" stroke-linecap="round"/><line id="scrollStepsLine" x1="60" y1="64" x2="360" y2="64" stroke="{{accent}}" stroke-width="6" stroke-linecap="round" pathLength="1" stroke-dasharray="1 1" stroke-dashoffset="1"/>${STEP_X.map(
+      (x, i) => `<circle cx="${x}" cy="64" r="20" fill="#FFFFFF" stroke="{{track}}" stroke-width="4"/><circle id="scrollStepsDot${i}" cx="${x}" cy="64" r="0" fill="{{accent}}"/><text id="scrollStepsNum${i}" x="${x}" y="71" text-anchor="middle" font-size="19" font-weight="700" fill="#94A3B8">${i + 1}</text><text x="${x}" y="118" text-anchor="middle" font-size="15" font-weight="600" fill="{{text}}">{{step${i + 1}: text default='${["Sign up", "Connect", "Customise", "Launch"][i]}' label='Step ${i + 1}'}}</text>`
+    ).join("")}</svg>`,
+    animate: [
+      { id: "scrollStepsLine", draw: true, ms: 1e3, ease: "linear" },
+      ...STEP_X.flatMap((_, i) => [
+        { id: `scrollStepsDot${i}`, attrs: { r: [0, 22] }, delay: Math.round(i * 1e3 / 3) - (i ? 60 : 0), ms: 160, ease: "out" },
+        { id: `scrollStepsNum${i}`, attrs: { fill: ["#94A3B8", "#FFFFFF"] }, delay: Math.round(i * 1e3 / 3) - (i ? 60 : 0), ms: 160, ease: "out" }
+      ])
+    ]
+  },
+  presets: [
+    { name: "Checkout", values: { step1: "Cart", step2: "Details", step3: "Payment", step4: "Done", accent: [0.06, 0.73, 0.51] } }
+  ]
+};
+var scrollEffects = [scrollDraw, scrollCounter, scrollSteps];
+
 // src/catalog/types.ts
 var EFFECT_CATEGORIES = [
   "gradient",
@@ -20654,6 +21536,8 @@ var EFFECT_CATEGORIES = [
   "glow",
   "shadow",
   "distortion",
+  "audio",
+  "scroll",
   "transition",
   "loader",
   "data",
@@ -20771,7 +21655,7 @@ function numberControl(name, value, min, max, label, step) {
 }
 
 // src/catalog/text.ts
-var r110 = (n11) => Math.round(n11 * 10) / 10;
+var r110 = (n12) => Math.round(n12 * 10) / 10;
 function fit5(text, width, max, ems = textWidthEm(text)) {
   const e = Math.max(0.6, ems);
   const size = Math.min(max, width / e);
@@ -20788,11 +21672,11 @@ var mixHex3 = (a, b, t) => {
   return rgbToHex([0, 1, 2].map((i) => x[i] + (y[i] - x[i]) * t));
 };
 var holds = (id, attr, keys2) => keys2.map(([delay, value]) => ({ id, attrs: { [attr]: [value, value] }, delay, ms: 0 }));
-var n10 = (name) => `{{${name}}}`;
+var n11 = (name) => `{{${name}}}`;
 var MONO = `ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace`;
 var MONO_EM = 0.6;
 var HEAVY2 = `'Arial Black', 'Helvetica Neue', Impact, system-ui, sans-serif`;
-var SANS7 = `system-ui, 'Helvetica Neue', Arial, sans-serif`;
+var SANS8 = `system-ui, 'Helvetica Neue', Arial, sans-serif`;
 var SCRIPT = `'Pacifico', 'Brush Script MT', 'Segoe Script', 'Snell Roundhand', cursive`;
 var CAP = 0.72;
 var typeface = (font, weight) => `{{font: text default="${font}" label='Font'}} {{weight: int min=100 max=900 default=${weight} step=100 label='Weight'}} {{inline: bool default=false label='Inline'}}`;
@@ -20836,9 +21720,9 @@ var typewriter = {
   motion: {
     svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='Hello, world.' label='Text'}} {{paper: color default=#111827 label='Background'}} {{ink: color default=#F9FAFB label='Text colour'}} {{pace: float min=30 max=300 default=90 step=5 label='Ms per letter'}} ${typeface(MONO, 400)} --><rect width="400" height="200" fill="{{paper}}" opacity="{{backdrop}}"/><text id="typed" x="{{left}}" y="{{base}}" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}" xml:space="preserve">{{text}}</text><text id="caret" x="{{end}}" y="{{base}}" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}" opacity="0">\u258C</text></svg>`,
     animate: [
-      { id: "typed", write: "{{text}}", caret: "\u258C", ms: n10("typing"), ease: "linear" },
+      { id: "typed", write: "{{text}}", caret: "\u258C", ms: n11("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) => [n10(`blink${k}`), k % 2 ? 0 : 1])])
+      ...holds("caret", "opacity", [[0, 0], ...Array.from({ length: BLINKS }, (_, k) => [n11(`blink${k}`), k % 2 ? 0 : 1])])
     ]
   }
 };
@@ -20865,8 +21749,8 @@ var scrambleText = {
     svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='ACCESS GRANTED' label='Text'}} {{glyphs: text default='ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&@$*+' label='Scramble glyphs'}} {{background: color default=#05070D label='Background'}} {{ink: color default=#E2E8F0 label='Text colour'}} {{accent: color default=#22D3EE label='Accent'}} {{pace: float min=20 max=250 default=70 step=5 label='Ms per letter'}} {{glow: float min=0 max=6 default=2 step=0.5 label='Glow'}} ${typeface(MONO, 700)} --><defs><filter id="glow" x="-20%" y="-50%" width="140%" height="200%"><feGaussianBlur stdDeviation="{{glowWide}}" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><text id="word" x="200" y="{{base}}" text-anchor="middle" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}" filter="url(#glow)" xml:space="preserve">{{text}}</text><rect id="bar" x="{{barX}}" y="{{barY}}" width="0" height="3" fill="{{accent}}"/></svg>`,
     animate: [
       // Pure noise for a moment (the scramble runs before the change starts), then it decodes.
-      { id: "word", write: "{{text}}", scramble: "{{glyphs}}", delay: 500, ms: n10("decode"), ease: "linear" },
-      { id: "bar", attrs: { width: [0, n10("barW")] }, delay: 500, ms: n10("decode"), ease: "linear" }
+      { id: "word", write: "{{text}}", scramble: "{{glyphs}}", delay: 500, ms: n11("decode"), ease: "linear" },
+      { id: "bar", attrs: { width: [0, n11("barW")] }, delay: 500, ms: n11("decode"), ease: "linear" }
     ]
   }
 };
@@ -20923,13 +21807,13 @@ var kineticStagger = {
         {
           id: `l${i}`,
           attrs: { transform: [`translate({{x${i}}} {{drop}}) rotate(-28) scale(0.3)`, `translate({{x${i}}} {{rise}}) rotate(5) scale(1.12)`], opacity: [0, 1] },
-          delay: n10(`d${i}`),
+          delay: n11(`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: n10(`e${i}`), ms: 260, ease: "in-out" }
+        { id: `l${i}`, attrs: { transform: [`translate({{x${i}}} {{rise}}) rotate(5) scale(1.12)`, `translate({{x${i}}} {{base}}) rotate(0) scale(1)`] }, delay: n11(`e${i}`), ms: 260, ease: "in-out" }
       ]).flat(),
-      { id: "line", attrs: { width: [0, n10("lineW")] }, delay: n10("lineAt"), ms: 500, ease: "in-out" }
+      { id: "line", attrs: { width: [0, n11("lineW")] }, delay: n11("lineAt"), ms: 500, ease: "in-out" }
     ]
   }
 };
@@ -21001,7 +21885,7 @@ var strokeDrawText = {
     svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='Draw' label='Text'}} {{background: color default=#FFFBF5 label='Background'}} {{outline: color default=#1E293B label='Outline'}} {{fill: color default=#F97316 label='Fill'}} {{width: float min=0.5 max=6 default=2 step=0.5 label='Outline width'}} {{fillOpacity: float min=0 max=1 default=1 label='Fill opacity'}} ${typeface(HEAVY2, 900)} --><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><text id="word" x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{fill}}" fill-opacity="0" stroke="{{outline}}" stroke-width="{{width}}" stroke-linejoin="round" stroke-dasharray="0 {{dash}}">{{text}}</text></svg>`,
     animate: [
       { id: "word", attrs: { "stroke-dasharray": ["0 {{dash}}", "{{dash}} 0"] }, ms: 2e3, ease: "in-out" },
-      { id: "word", attrs: { "fill-opacity": [0, n10("fillOpacity")] }, delay: 1500, ms: 700, ease: "out" }
+      { id: "word", attrs: { "fill-opacity": [0, n11("fillOpacity")] }, delay: 1500, ms: 700, ease: "out" }
     ]
   }
 };
@@ -21033,7 +21917,7 @@ var splitReveal = {
   motion: (() => {
     const word = `<text x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}">{{text}}</text>`;
     return {
-      svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='Chapter One' label='Text'}} {{caption: text default='The beginning' label='Caption'}} {{background: color default=#0F172A label='Background'}} {{ink: color default=#F8FAFC label='Text colour'}} {{line: color default=#38BDF8 label='Line'}} ${typeface(SANS7, 800)} --><defs><clipPath id="above"><rect x="-5000" y="-5000" width="10400" height="5100"/></clipPath><clipPath id="below"><rect x="-5000" y="100" width="10400" height="5100"/></clipPath></defs><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><g clip-path="url(#above)"><g id="top" transform="translate(0 {{shift}})">${word}</g></g><g clip-path="url(#below)"><g id="bottom" transform="translate(0 -{{shift}})">${word}</g></g><path id="line" d="M{{lineX1}} 100 H{{lineX2}}" stroke="{{line}}" stroke-width="2.5" stroke-linecap="round"/><text id="caption" x="200" y="{{captionY}}" text-anchor="middle" font-family="{{font}}" font-size="13" letter-spacing="3" fill="{{ink}}" opacity="0">{{caption}}</text></svg>`,
+      svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='Chapter One' label='Text'}} {{caption: text default='The beginning' label='Caption'}} {{background: color default=#0F172A label='Background'}} {{ink: color default=#F8FAFC label='Text colour'}} {{line: color default=#38BDF8 label='Line'}} ${typeface(SANS8, 800)} --><defs><clipPath id="above"><rect x="-5000" y="-5000" width="10400" height="5100"/></clipPath><clipPath id="below"><rect x="-5000" y="100" width="10400" height="5100"/></clipPath></defs><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><g clip-path="url(#above)"><g id="top" transform="translate(0 {{shift}})">${word}</g></g><g clip-path="url(#below)"><g id="bottom" transform="translate(0 -{{shift}})">${word}</g></g><path id="line" d="M{{lineX1}} 100 H{{lineX2}}" stroke="{{line}}" stroke-width="2.5" stroke-linecap="round"/><text id="caption" x="200" y="{{captionY}}" text-anchor="middle" font-family="{{font}}" font-size="13" letter-spacing="3" fill="{{ink}}" opacity="0">{{caption}}</text></svg>`,
       animate: [
         { id: "line", draw: true, ms: 600, ease: "in-out" },
         { id: "top", attrs: { transform: ["translate(0 {{shift}})", "translate(0 0)"] }, delay: 450, ms: 800, ease: "out" },
@@ -21076,7 +21960,7 @@ var highlighter = {
     };
   },
   motion: {
-    svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='Ship it faster' label='Phrase'}} {{background: color default=#FFFFFF label='Background'}} {{ink: color default=#111827 label='Text colour'}} {{marker: color default=#FDE047 label='Marker'}} ${typeface(SANS7, 700)} --><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><g transform="rotate(-1.2 200 100)" opacity="0.9"><path id="swipe" d="{{swipe}}" fill="none" stroke="{{marker}}" stroke-width="{{thick}}"/><path id="ragged" d="{{ragged}}" fill="none" stroke="{{marker}}" stroke-width="{{thin}}" stroke-linecap="round"/></g><text id="phrase" x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}" opacity="0">{{text}}</text></svg>`,
+    svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{text: text default='Ship it faster' label='Phrase'}} {{background: color default=#FFFFFF label='Background'}} {{ink: color default=#111827 label='Text colour'}} {{marker: color default=#FDE047 label='Marker'}} ${typeface(SANS8, 700)} --><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><g transform="rotate(-1.2 200 100)" opacity="0.9"><path id="swipe" d="{{swipe}}" fill="none" stroke="{{marker}}" stroke-width="{{thick}}"/><path id="ragged" d="{{ragged}}" fill="none" stroke="{{marker}}" stroke-width="{{thin}}" stroke-linecap="round"/></g><text id="phrase" x="200" y="{{base}}" text-anchor="middle" textLength="{{length}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}" opacity="0">{{text}}</text></svg>`,
     animate: [
       { id: "phrase", attrs: { opacity: [0, 1] }, ms: 300, ease: "out" },
       { id: "swipe", draw: true, delay: 350, ms: 650, ease: "in-out" },
@@ -21134,7 +22018,7 @@ var wordCycle = {
     };
   },
   motion: {
-    svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{prefix: text default='We build' label='Lead-in'}} {{word1: text default=apps label='Word 1'}} {{word2: text default=brands label='Word 2'}} {{word3: text default=websites label='Word 3'}} {{word4: text default=games label='Word 4'}} {{background: color default=#FFFFFF label='Background'}} {{ink: color default=#0F172A label='Text colour'}} {{accent: color default=#6366F1 label='Accent'}} ${typeface(SANS7, 700)} --><defs><clipPath id="window"><rect x="{{clipX}}" y="{{clipY}}" width="{{clipW}}" height="{{clipH}}"/></clipPath></defs><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><text x="{{px}}" y="{{base}}" textLength="{{plen}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}">{{prefix}}</text><g clip-path="url(#window)"><g id="reel" transform="translate(0 -0)">${Array.from(
+    svg: `<svg viewBox="{{viewBox}}" overflow="{{overflow}}" data-overhang="{{overhang}}"><!-- {{prefix: text default='We build' label='Lead-in'}} {{word1: text default=apps label='Word 1'}} {{word2: text default=brands label='Word 2'}} {{word3: text default=websites label='Word 3'}} {{word4: text default=games label='Word 4'}} {{background: color default=#FFFFFF label='Background'}} {{ink: color default=#0F172A label='Text colour'}} {{accent: color default=#6366F1 label='Accent'}} ${typeface(SANS8, 700)} --><defs><clipPath id="window"><rect x="{{clipX}}" y="{{clipY}}" width="{{clipW}}" height="{{clipH}}"/></clipPath></defs><rect width="400" height="200" fill="{{background}}" opacity="{{backdrop}}"/><text x="{{px}}" y="{{base}}" textLength="{{plen}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{weight}}" fill="{{ink}}">{{prefix}}</text><g clip-path="url(#window)"><g id="reel" transform="translate(0 -0)">${Array.from(
       { length: CYCLE_WORDS + 1 },
       (_, k) => `<text x="{{wx}}" y="{{y${k}}}" textLength="{{len${k}}}" lengthAdjust="spacingAndGlyphs" font-family="{{font}}" font-size="{{size}}" font-weight="{{bold}}" fill="{{accent}}">{{w${k % CYCLE_WORDS}}}</text>`
     ).join("")}</g></g><rect id="under" x="{{wx}}" y="{{underY}}" width="{{len0}}" height="4" rx="2" fill="{{accent}}"/></svg>`,
@@ -21142,7 +22026,7 @@ var wordCycle = {
       const at3 = { delay: (i + 1) * SHOW_MS + i * ROLL_MS, ms: ROLL_MS, ease: "in-out" };
       return [
         { id: "reel", attrs: { transform: [`translate(0 -{{o${i}}})`, `translate(0 -{{o${i + 1}}})`] }, ...at3 },
-        { id: "under", attrs: { width: [n10(`len${i}`), n10(`len${i + 1}`)] }, ...at3 }
+        { id: "under", attrs: { width: [n11(`len${i}`), n11(`len${i + 1}`)] }, ...at3 }
       ];
     }).flat()
   }
@@ -21760,7 +22644,7 @@ var dripText = {
     const left = 200 - width / 2;
     const runs = Math.min(DRIP_RUNS, Math.max(1, Math.round(width / DRIP_RUN)));
     const run = width / runs;
-    const r111 = (n11) => Math.round(n11 * 10) / 10;
+    const r111 = (n12) => Math.round(n12 * 10) / 10;
     const edge = Number(v.stroke) / 2 / DRIP_SIZE;
     const tip = (DRIP_TOP + Math.max(...DRIPS2.map((d) => d.length)) * Number(v.drip) + 13 * 0.72 - DRIP_BASELINE) / DRIP_SIZE;
     const overhang = [edge, edge, Math.max(0.05, tip) + edge, edge].map((e) => Math.round(e * 100) / 100).join(" ");
@@ -21991,9 +22875,11 @@ var SHADER_EFFECTS = [
   ...glowShaders,
   ...shadowShaders,
   ...distortionShaders,
+  ...audioShaders,
+  ...scrollShaders,
   ...transitions
 ];
-var EFFECTS = [...SHADER_EFFECTS, ...vectorEffects, ...textEffects, ...morphEffects, ...interactionEffects, ...pyroEffects, ...timewarpEffects, ...meltEffects, ...electricEffects, ...pixelEffects, ...splatterEffects, ...bubbleEffects, ...stickerEffects, ...trailEffects, ...impactEffects, ...comicEffects, ...glowEffects, ...shadowEffects, ...lightingEffects].sort(
+var EFFECTS = [...SHADER_EFFECTS, ...vectorEffects, ...textEffects, ...morphEffects, ...interactionEffects, ...pyroEffects, ...timewarpEffects, ...meltEffects, ...electricEffects, ...pixelEffects, ...splatterEffects, ...bubbleEffects, ...stickerEffects, ...trailEffects, ...impactEffects, ...comicEffects, ...glowEffects, ...shadowEffects, ...lightingEffects, ...scrollEffects].sort(
   (a, b) => EFFECT_CATEGORIES.indexOf(a.category) - EFFECT_CATEGORIES.indexOf(b.category)
 );
 var byId = new Map(EFFECTS.map((e) => [e.id, e]));
@@ -22069,4 +22955,4 @@ export {
   effectControls,
   effectDefaults
 };
-//# sourceMappingURL=chunk-4LKAPRFM.js.map
+//# sourceMappingURL=chunk-6GFOLHCT.js.map