@pixerate/flair 0.11.0 → 0.12.0

package/dist/{chunk-36OCXXPY.js → chunk-L4NFQM5N.js}

@@ -316,6 +316,7 @@ var LOGO = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width=
 var HEART = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
 <path fill="#f43f5e" d="M256 452C120 352 40 272 40 172C40 102 95 58 160 58C205 58 238 84 256 118C274 84 307 58 352 58C417 58 472 102 472 172C472 272 392 352 256 452Z"/>
 </svg>`;
+var ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20C5 15.5 3 12 3 8.5a4.5 4.5 0 0 1 9 0a4.5 4.5 0 0 1 9 0c0 3.5-2 7-9 11.5Z"/></svg>`;
 var SAMPLE_IMAGES = {
   landscape: svgDataUrl(LANDSCAPE),
   city: svgDataUrl(CITY),
@@ -325,7 +326,8 @@ var SAMPLE_IMAGES = {
   /** A ring-and-dot mark, indigo on transparent. */
   logo: svgDataUrl(LOGO),
   /** A heart, rose on transparent. */
-  heart: svgDataUrl(HEART)
+  heart: svgDataUrl(HEART),
+  icon: svgDataUrl(ICON)
 };
 function charWidth(c) {
   if (/[iIjl.,:;'!|`]/.test(c)) return 0.3;
@@ -353,7 +355,19 @@ function textImage(text, options = {}) {
 }
 
 // src/catalog/shaders/image.ts
+var BACKDROP_CONTROLS = `
+uniform vec3 uBackdrop;          // @control color default=#FFFFFF label="Backdrop"
+uniform float uBackdropAlpha;    // @control min=0 max=1 default=1 label="Backdrop opacity"`.trim();
+var BACKDROP = `
+// The sample is read as premultiplied: filtering a straight-alpha image whose clear pixels are
+// black (as browsers decode them) premultiplies it, and the clamp clears colour a clear pixel kept.
+vec4 overBackdrop(vec4 s) {
+  vec3 colour = min(s.rgb, vec3(s.a)) + uBackdrop * uBackdropAlpha * (1.0 - s.a);
+  float alpha = s.a + uBackdropAlpha * (1.0 - s.a);
+  return vec4(colour / max(alpha, 1e-4), alpha);
+}`.trim();
 var PICTURE = `
+${BACKDROP}
 vec3 testCard(vec2 uv) {
   vec3 sky = mix(vec3(0.98, 0.62, 0.42), vec3(0.24, 0.32, 0.72), uv.y);
   float sun = smoothstep(0.16, 0.15, length((uv - vec2(0.65, 0.58)) * vec2(1.6, 1.0)));
@@ -364,8 +378,11 @@ vec3 testCard(vec2 uv) {
   col += 0.04 * step(0.48, max(grid.x, grid.y));
   return col;
 }
+vec4 pictureRGBA(sampler2D tex, vec2 uv) {
+  return textureSize(tex, 0).x > 1 ? overBackdrop(texture(tex, uv)) : vec4(testCard(fract(uv)), 1.0);
+}
 vec3 picture(sampler2D tex, vec2 uv) {
-  return textureSize(tex, 0).x > 1 ? texture(tex, uv).rgb : testCard(fract(uv));
+  return pictureRGBA(tex, uv).rgb;
 }`.trim();
 var imageRipple = {
   kind: "shader",
@@ -379,7 +396,8 @@ var imageRipple = {
 uniform sampler2D uImage;  // @control filter=linear wrap=mirror default=${SAMPLE_IMAGES.landscape} label="Image"
 uniform float uAmplitude;  // @control min=0 max=0.05 default=0.012 label="Amplitude"
 uniform float uFrequency;  // @control min=5 max=80 default=30 label="Frequency"
-uniform float uSpeed;      // @control min=0 max=6 default=2 label="Speed"`,
+uniform float uSpeed;      // @control min=0 max=6 default=2 label="Speed"
+${BACKDROP_CONTROLS}`,
     PICTURE,
     `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   vec2 uv = fragCoord / iResolution.xy;
@@ -389,9 +407,9 @@ uniform float uSpeed;      // @control min=0 max=6 default=2 label="Speed"`,
   float r = length(d);
   float wave = sin(r * uFrequency - iTime * uSpeed) * smoothstep(0.9, 0.0, r);
   vec2 offset = normalize(d + 1e-5) * wave * uAmplitude;
-  vec3 col = picture(uImage, uv + offset);
-  col += 0.6 * max(wave, 0.0) * uAmplitude * 8.0;
-  fragColor = vec4(col, 1.0);
+  vec4 pic = pictureRGBA(uImage, uv + offset);
+  vec3 col = pic.rgb + 0.6 * max(wave, 0.0) * uAmplitude * 8.0;
+  fragColor = vec4(col, pic.a);
 }`
   )
 };
@@ -407,7 +425,8 @@ var imageGlitch = {
 uniform sampler2D uImage;  // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.landscape} label="Image"
 uniform float uAmount;     // @control min=0 max=1 default=0.5 label="Amount"
 uniform float uSplit;      // @control min=0 max=0.05 default=0.012 label="RGB split"
-uniform float uRate;       // @control min=0.5 max=12 default=4 label="Bursts per second"`,
+uniform float uRate;       // @control min=0.5 max=12 default=4 label="Bursts per second"
+${BACKDROP_CONTROLS}`,
     HASH,
     PICTURE,
     `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
@@ -421,14 +440,13 @@ uniform float uRate;       // @control min=0.5 max=12 default=4 label="Bursts pe
   vec2 st = uv + vec2(shift, 0.0);
   st = mix(st, floor(st * 24.0) / 24.0, corrupt);
   float split = uSplit * (0.3 + burst);
-  vec3 col = vec3(
-    picture(uImage, st + vec2(split, 0.0)).r,
-    picture(uImage, st).g,
-    picture(uImage, st - vec2(split, 0.0)).b
-  );
+  vec4 r = pictureRGBA(uImage, st + vec2(split, 0.0));
+  vec4 g = pictureRGBA(uImage, st);
+  vec4 b = pictureRGBA(uImage, st - vec2(split, 0.0));
+  vec3 col = vec3(r.r, g.g, b.b);
   col = mix(col, col.bgr, corrupt);
   col *= 0.92 + 0.08 * sin(fragCoord.y * 2.0);
-  fragColor = vec4(col, 1.0);
+  fragColor = vec4(col, max(max(r.a, g.a), b.a));
 }`
   )
 };
@@ -445,16 +463,17 @@ uniform sampler2D uImage;  // @control filter=linear wrap=clamp default=${SAMPLE
 uniform vec3 uShadow;      // @control color default=#1E1B4B label="Shadows"
 uniform vec3 uHighlight;   // @control color default=#FB7185 label="Highlights"
 uniform float uContrast;   // @control min=0.5 max=3 default=1.2 label="Contrast"
-uniform float uSweep;      // @control min=0 max=1 default=0.3 label="Light sweep"`,
+uniform float uSweep;      // @control min=0 max=1 default=0.3 label="Light sweep"
+${BACKDROP_CONTROLS}`,
     PICTURE,
     `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   vec2 uv = fragCoord / iResolution.xy;
-  vec3 src = picture(uImage, uv);
-  float l = dot(src, vec3(0.2126, 0.7152, 0.0722));
+  vec4 src = pictureRGBA(uImage, uv);
+  float l = dot(src.rgb, vec3(0.2126, 0.7152, 0.0722));
   l = clamp((l - 0.5) * uContrast + 0.5, 0.0, 1.0);
   float sweep = exp(-pow((uv.x + uv.y * 0.4 - fract(iTime * 0.15) * 2.0 + 0.4) * 6.0, 2.0));
   vec3 col = mix(uShadow, uHighlight, l) + sweep * uSweep;
-  fragColor = vec4(col, 1.0);
+  fragColor = vec4(col, src.a);
 }`
   ),
   presets: [
@@ -475,14 +494,14 @@ var imagePixelate = {
 uniform sampler2D uImage;  // @control filter=nearest wrap=clamp default=${SAMPLE_IMAGES.landscape} label="Image"
 uniform float uMaxBlock;   // @control min=4 max=128 default=48 label="Largest block (px)"
 uniform bool uAnimate;     // @control default=true label="Animate"
-uniform float uProgress;   // @control min=0 max=1 default=1 label="Detail (when still)"`,
+uniform float uProgress;   // @control min=0 max=1 default=1 label="Detail (when still)"
+${BACKDROP_CONTROLS}`,
     PICTURE,
     `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   float k = uAnimate ? 0.5 - 0.5 * cos(iTime * 6.28318 / 4.0) : uProgress;
   float block = max(1.0, floor(mix(uMaxBlock, 1.0, k)));
   vec2 cell = (floor(fragCoord / block) + 0.5) * block;
-  vec3 col = picture(uImage, cell / iResolution.xy);
-  fragColor = vec4(col, 1.0);
+  fragColor = pictureRGBA(uImage, cell / iResolution.xy);
 }`
   )
 };
@@ -499,7 +518,8 @@ uniform sampler2D uImage;  // @control filter=linear wrap=clamp default=${SAMPLE
 uniform vec3 uInk;         // @control color default=#111827 label="Ink"
 uniform vec3 uPaper;       // @control color default=#FEF3C7 label="Paper"
 uniform float uSpacing;    // @control min=3 max=30 default=8 label="Dot spacing (px)"
-uniform float uAngle;      // @control min=0 max=90 default=45 label="Screen angle (\xB0)"`,
+uniform float uAngle;      // @control min=0 max=90 default=45 label="Screen angle (\xB0)"
+${BACKDROP_CONTROLS}`,
     PICTURE,
     `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   float a = radians(uAngle);
@@ -507,11 +527,12 @@ uniform float uAngle;      // @control min=0 max=90 default=45 label="Screen ang
   vec2 q = r * fragCoord / uSpacing;
   vec2 cell = floor(q) + 0.5;
   vec2 centre = transpose(r) * cell * uSpacing;
-  float l = dot(picture(uImage, centre / iResolution.xy), vec3(0.2126, 0.7152, 0.0722));
+  vec4 pic = pictureRGBA(uImage, centre / iResolution.xy);
+  float l = dot(pic.rgb, vec3(0.2126, 0.7152, 0.0722));
   float radius = sqrt(1.0 - l) * 0.62 * (0.95 + 0.05 * sin(iTime * 2.0));
   float d = length(q - cell);
   float ink = smoothstep(radius + 0.06, radius - 0.06, d);
-  fragColor = vec4(mix(uPaper, uInk, ink), 1.0);
+  fragColor = vec4(mix(uPaper, uInk, ink), pic.a);
 }`
   )
 };
@@ -528,7 +549,8 @@ uniform sampler2D uImage;   // @control filter=linear wrap=clamp default=${SAMPL
 uniform float uCurve;       // @control min=0 max=0.5 default=0.15 label="Curvature"
 uniform float uScanlines;   // @control min=0 max=1 default=0.5 label="Scanlines"
 uniform float uMask;        // @control min=0 max=1 default=0.35 label="Shadow mask"
-uniform float uFlicker;     // @control min=0 max=0.2 default=0.03 label="Flicker"`,
+uniform float uFlicker;     // @control min=0 max=0.2 default=0.03 label="Flicker"
+${BACKDROP_CONTROLS}`,
     HASH,
     PICTURE,
     `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
@@ -536,10 +558,11 @@ uniform float uFlicker;     // @control min=0 max=0.2 default=0.03 label="Flicke
   uv *= 1.0 + uCurve * dot(uv.yx, uv.yx) * 0.5;
   vec2 st = uv * 0.5 + 0.5;
   if (st.x < 0.0 || st.x > 1.0 || st.y < 0.0 || st.y > 1.0) {
-    fragColor = vec4(0.0, 0.0, 0.0, 1.0);
+    fragColor = vec4(0.0, 0.0, 0.0, uBackdropAlpha);
     return;
   }
-  vec3 col = picture(uImage, st);
+  vec4 pic = pictureRGBA(uImage, st);
+  vec3 col = pic.rgb;
   col += 0.25 * picture(uImage, st + vec2(0.003, 0.0)) * col;
   float scan = 1.0 - uScanlines * 0.5 * (1.0 - cos(st.y * iResolution.y * 3.14159));
   float m = mod(fragCoord.x, 3.0);
@@ -547,7 +570,7 @@ uniform float uFlicker;     // @control min=0 max=0.2 default=0.03 label="Flicke
   col *= scan * mask;
   col *= 1.0 - uFlicker * hash12(vec2(floor(iTime * 24.0), 0.0));
   col *= smoothstep(1.0, 0.7, max(abs(uv.x), abs(uv.y)) * 0.98 + 0.02 * length(uv));
-  fragColor = vec4(col, 1.0);
+  fragColor = vec4(col, pic.a);
 }`
   )
 };
@@ -565,7 +588,8 @@ uniform float uGrain;       // @control min=0 max=0.3 default=0.08 label="Grain"
 uniform float uWeave;       // @control min=0 max=0.01 default=0.0015 label="Gate weave"
 uniform float uHalation;    // @control min=0 max=1 default=0.3 label="Halation"
 uniform float uVignette;    // @control min=0 max=1 default=0.45 label="Vignette"
-uniform vec3 uTint;         // @control color default=#FFF1DC label="Print tint"`,
+uniform vec3 uTint;         // @control color default=#FFF1DC label="Print tint"
+${BACKDROP_CONTROLS}`,
     HASH,
     NOISE,
     PICTURE,
@@ -573,7 +597,8 @@ uniform vec3 uTint;         // @control color default=#FFF1DC label="Print tint"
   vec2 uv = fragCoord / iResolution.xy;
   float frame = floor(iTime * 24.0);
   uv += uWeave * (vec2(vnoise(vec2(frame * 0.3, 0.0)), vnoise(vec2(0.0, frame * 0.3))) - 0.5);
-  vec3 col = picture(uImage, uv);
+  vec4 pic = pictureRGBA(uImage, uv);
+  vec3 col = pic.rgb;
   vec3 blur = (picture(uImage, uv + vec2(0.006, 0.0)) + picture(uImage, uv - vec2(0.006, 0.0)) +
                picture(uImage, uv + vec2(0.0, 0.006)) + picture(uImage, uv - vec2(0.0, 0.006))) * 0.25;
   float bright = smoothstep(0.6, 1.0, dot(blur, vec3(0.333)));
@@ -581,7 +606,7 @@ uniform vec3 uTint;         // @control color default=#FFF1DC label="Print tint"
   col *= uTint;
   col += (hash12(fragCoord + frame * 31.7) - 0.5) * uGrain;
   col *= 1.0 - uVignette * smoothstep(0.3, 0.9, length(uv - 0.5) * 1.3);
-  fragColor = vec4(col, 1.0);
+  fragColor = vec4(col, pic.a);
 }`
   )
 };
@@ -608,12 +633,14 @@ var transitions = TRANSITIONS.map(({ type, id, name, description }) => ({
 uniform sampler2D uFrom;   // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.landscape} label="From image"
 uniform sampler2D uTo;     // @control filter=linear wrap=clamp default=${SAMPLE_IMAGES.city} label="To image"
 uniform bool uAnimate;     // @control default=true label="Animate"
-uniform float uProgress;   // @control min=0 max=1 default=0.5 label="Progress (when still)"`,
+uniform float uProgress;   // @control min=0 max=1 default=0.5 label="Progress (when still)"
+${BACKDROP_CONTROLS}`,
+    BACKDROP,
     getTransitionGLSL(type),
     `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   vec2 uv = fragCoord / iResolution.xy;
   float p = uAnimate ? smoothstep(0.1, 0.9, 0.5 - 0.5 * cos(iTime * 6.28318 / 4.0)) : uProgress;
-  fragColor = vec4(flair_transition(uFrom, uTo, uv, p).rgb, 1.0);
+  fragColor = overBackdrop(flair_transition(uFrom, uTo, uv, p));
 }`
   )
 }));
@@ -2433,7 +2460,8 @@ uniform int uPalette;      // @control min=0 max=5 default=0 label="Palette (0 G
 uniform float uPixel;      // @control min=1 max=16 default=4 step=1 label="Pixel size"
 uniform float uDither;     // @control min=0 max=1 default=0.7 label="Dither"
 uniform bool uBayer8;      // @control default=true label="8 \xD7 8 Bayer matrix"
-uniform float uContrast;   // @control min=0.5 max=2 default=1.1 label="Contrast"`,
+uniform float uContrast;   // @control min=0.5 max=2 default=1.1 label="Contrast"
+${BACKDROP_CONTROLS}`,
     PICTURE,
     BAYER,
     paletteArray("GAMEBOY", GAMEBOY),
@@ -2466,8 +2494,8 @@ vec3 nearest(vec3 c, int pal) {
 
 void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   vec2 cell = floor(fragCoord / uPixel);
-  vec3 src = picture(uImage, (cell + 0.5) * uPixel / iResolution.xy);
-  src = clamp((src - 0.5) * uContrast + 0.5, 0.0, 1.0);
+  vec4 pic = pictureRGBA(uImage, (cell + 0.5) * uPixel / iResolution.xy);
+  vec3 src = clamp((pic.rgb - 0.5) * uContrast + 0.5, 0.0, 1.0);
   float threshold = (uBayer8 ? bayer8(cell) + 0.5 / 64.0 : bayer4(cell) + 0.5 / 16.0) - 0.5;
   vec3 col;
   if (uPalette == 0 || uPalette == 5) {
@@ -2480,7 +2508,8 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
     float spread = uPalette == 3 ? 0.55 : 0.22;
     col = nearest(src + threshold * uDither * spread, uPalette);
   }
-  fragColor = vec4(col, 1.0);
+  // Pixels are whole, so alpha is cut at a half rather than blended.
+  fragColor = vec4(col, step(0.5, pic.a));
 }`
   ),
   presets: [
@@ -2510,7 +2539,8 @@ uniform bool uDither;      // @control default=true label="Dither"
 uniform vec3 uDark;        // @control color default=#0F380F label="Darkest shade"
 uniform vec3 uLight;       // @control color default=#9BBC0F label="Lightest shade"
 uniform vec3 uBezel;       // @control color default=#4E5236 label="Bezel"
-uniform vec3 uCase;        // @control color default=#C9C6BC label="Case"`,
+uniform vec3 uCase;        // @control color default=#C9C6BC label="Case"
+${BACKDROP_CONTROLS}`,
     PICTURE,
     BAYER,
     `// The LCD shade (0 darkest \u2013 3 lightest) of the picture at uv, for screen pixel cell.
@@ -3132,7 +3162,8 @@ uniform sampler2D uFrom;   // @control filter=nearest wrap=clamp default=${SAMPL
 uniform sampler2D uTo;     // @control filter=nearest wrap=clamp default=${SAMPLE_IMAGES.city} label="To image"
 uniform bool uAnimate;     // @control default=true label="Animate"
 uniform float uProgress;   // @control min=0 max=1 default=0.5 label="Progress (when still)"
-uniform float uMaxBlock;   // @control min=4 max=96 default=40 step=1 label="Largest block (px)"`,
+uniform float uMaxBlock;   // @control min=4 max=96 default=40 step=1 label="Largest block (px)"
+${BACKDROP_CONTROLS}`,
     HASH,
     PICTURE,
     `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
@@ -3148,8 +3179,7 @@ uniform float uMaxBlock;   // @control min=4 max=96 default=40 step=1 label="Lar
   vec2 big = floor(fragCoord / uMaxBlock);
   float swap = clamp((p - 0.35) / 0.3, 0.0, 1.0);
   bool showTo = p >= 0.65 || (p > 0.35 && hash12(big + 0.5) < swap);
-  vec3 col = showTo ? picture(uTo, uv) : picture(uFrom, uv);
-  fragColor = vec4(col, 1.0);
+  fragColor = showTo ? pictureRGBA(uTo, uv) : pictureRGBA(uFrom, uv);
 }`
   )
 };
@@ -4192,7 +4222,8 @@ uniform sampler2D uImage;  // @control filter=linear wrap=mirror default=${SAMPL
 uniform float uStrength;   // @control min=0 max=1 default=0.6 label="Strength"
 uniform float uRadius;     // @control min=0.05 max=0.8 default=0.3 label="Radius"
 uniform float uWobble;     // @control min=0 max=1 default=0.5 label="Wobble"
-uniform bool uDemo;        // @control default=true label="Demo when idle"`,
+uniform bool uDemo;        // @control default=true label="Demo when idle"
+${BACKDROP_CONTROLS}`,
     HASH,
     NOISE,
     HOVER,
@@ -4212,11 +4243,11 @@ uniform bool uDemo;        // @control default=true label="Demo when idle"`,
   off += dir * wave * uWobble * s * 0.02;
   vec2 churn = vec2(vnoise(d * 6.0 + iTime * 0.7), vnoise(d * 6.0 - iTime * 0.6 + 5.0)) - 0.5;
   off += churn * fall * s * uWobble * 0.05;
-  vec3 col = picture(uImage, uv + off * vec2(iResolution.y / iResolution.x, 1.0));
+  vec4 pic = pictureRGBA(uImage, uv + off * vec2(iResolution.y / iResolution.x, 1.0));
   // Light catching the swell's upper-left slope.
   float slope = dot(dir, normalize(vec2(-0.6, 0.8))) * r / uRadius;
-  col += 0.12 * s * fall * slope + 0.06 * s * wave * uWobble;
-  fragColor = vec4(col, 1.0);
+  vec3 col = pic.rgb + 0.12 * s * fall * slope + 0.06 * s * wave * uWobble;
+  fragColor = vec4(col, pic.a);
 }`
   ),
   presets: [
@@ -4238,7 +4269,8 @@ uniform sampler2D uReveal; // @control filter=linear wrap=clamp default=${SAMPLE
 uniform float uRadius;     // @control min=0.05 max=0.6 default=0.22 label="Lens radius"
 uniform float uSoftness;   // @control min=0 max=1 default=0.35 label="Softness"
 uniform vec3 uRim;         // @control color default=#A5F3FC label="Rim"
-uniform bool uDemo;        // @control default=true label="Demo when idle"`,
+uniform bool uDemo;        // @control default=true label="Demo when idle"
+${BACKDROP_CONTROLS}`,
     HASH,
     NOISE,
     CLICKS,
@@ -4262,10 +4294,11 @@ uniform bool uDemo;        // @control default=true label="Demo when idle"`,
   d += (vnoise(fragCoord * px * 9.0 + iTime * 0.6) - 0.5) * 0.25 * R;
   float soft = max(uSoftness * R * 0.6, 1.5 * px);
   float m = 1.0 - smoothstep(R - soft, R, d);
-  vec3 col = mix(picture(uImage, uv), picture(uReveal, uv), m);
+  vec4 pic = mix(pictureRGBA(uImage, uv), pictureRGBA(uReveal, uv), m);
   float rim = exp(-pow((d - R + soft * 0.5) / max(soft * 0.5, 2.0 * px), 2.0)) * step(0.001, R);
-  col += uRim * rim * 0.6;
-  fragColor = vec4(col, 1.0);
+  // The rim is light added over the picture, so it also shows where the picture is clear.
+  float alpha = max(pic.a, clamp(rim * 0.6, 0.0, 1.0));
+  fragColor = vec4((pic.rgb * pic.a + uRim * rim * 0.6) / max(alpha, 1e-4), alpha);
 }`
   ),
   presets: [
@@ -4287,39 +4320,39 @@ uniform float uZoom;         // @control min=1 max=5 default=2 label="Zoom"
 uniform float uRadius;       // @control min=0.05 max=0.5 default=0.18 label="Radius"
 uniform float uAberration;   // @control min=0 max=1 default=0.35 label="Colour fringe"
 uniform vec3 uRim;           // @control color default=#FFFFFF label="Rim"
-uniform bool uDemo;          // @control default=true label="Demo when idle"`,
+uniform bool uDemo;          // @control default=true label="Demo when idle"
+${BACKDROP_CONTROLS}`,
     HOVER,
     PICTURE,
     `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   vec2 uv = fragCoord / iResolution.xy;
   vec3 hp = hoverPoint(uDemo, 1.0);
   float s = hp.z;
-  vec3 col = picture(uImage, uv);
+  vec4 col = pictureRGBA(uImage, uv);
   float R = uRadius * (0.75 + 0.25 * s) * iResolution.y;
   vec2 d = fragCoord - hp.xy;
   float r = length(d);
   float k = r / R;
   // A soft shadow under the glass.
   float shadow = 1.0 - smoothstep(R * 0.9, R * 1.3, length(d - vec2(R * 0.08, -R * 0.12)));
-  col *= 1.0 - 0.35 * shadow * s;
+  col.rgb *= 1.0 - 0.35 * shadow * s;
   if (k < 1.05) {
     // More magnified at the centre, squeezed towards the rim like real glass.
     vec2 q = d / uZoom * (1.0 + 0.4 * k * k * k * k);
     float fr = uAberration * 0.08 * k * k * k;
-    vec3 lens = vec3(
-      picture(uImage, (hp.xy + q * (1.0 + fr)) / iResolution.xy).r,
-      picture(uImage, (hp.xy + q) / iResolution.xy).g,
-      picture(uImage, (hp.xy + q * (1.0 - fr)) / iResolution.xy).b
-    );
-    lens += 0.16 * exp(-pow(length(d / R - vec2(-0.35, 0.4)) * 2.6, 2.0));
-    lens *= 1.0 - 0.25 * pow(k, 6.0);
+    vec4 lr = pictureRGBA(uImage, (hp.xy + q * (1.0 + fr)) / iResolution.xy);
+    vec4 lg = pictureRGBA(uImage, (hp.xy + q) / iResolution.xy);
+    vec4 lb = pictureRGBA(uImage, (hp.xy + q * (1.0 - fr)) / iResolution.xy);
+    vec4 lens = vec4(lr.r, lg.g, lb.b, max(max(lr.a, lg.a), lb.a));
+    lens.rgb += 0.16 * exp(-pow(length(d / R - vec2(-0.35, 0.4)) * 2.6, 2.0));
+    lens.rgb *= 1.0 - 0.25 * pow(k, 6.0);
     col = mix(col, lens, (1.0 - smoothstep(R - 1.5, R, r)) * s);
   }
   float rimW = max(R * 0.035, 2.0);
   float lit = 0.6 + 0.4 * dot(d / max(r, 1e-4), normalize(vec2(-1.0, 1.0)));
   float rim = exp(-pow((r - R) / rimW, 2.0));
-  col = mix(col, uRim * lit, rim * s * 0.9);
-  fragColor = vec4(col, 1.0);
+  col = mix(col, vec4(uRim * lit, 1.0), rim * s * 0.9);
+  fragColor = col;
 }`
   ),
   presets: [
@@ -4343,7 +4376,8 @@ uniform float uGlare;      // @control min=0 max=1 default=0.6 label="Glare"
 uniform float uTilt;       // @control min=0 max=1 default=0.6 label="Tilt"
 uniform float uCorner;     // @control min=0 max=0.25 default=0.06 label="Corner radius"
 uniform vec3 uBorder;      // @control color default=#E2E8F0 label="Border"
-uniform bool uDemo;        // @control default=true label="Demo when idle"`,
+uniform bool uDemo;        // @control default=true label="Demo when idle"
+${BACKDROP_CONTROLS}`,
     HASH,
     NOISE,
     HOVER,
@@ -4494,7 +4528,8 @@ uniform sampler2D uTo;     // @control filter=linear wrap=clamp default=${SAMPLE
 uniform vec3 uEdge;        // @control color default=#FFB86B label="Edge glow"
 uniform float uEdgeWidth;  // @control min=0 max=0.3 default=0.08 label="Edge width"
 uniform float uGrain;      // @control min=1 max=20 default=6 label="Noise scale"
-uniform bool uDemo;        // @control default=true label="Demo when idle"`,
+uniform bool uDemo;        // @control default=true label="Demo when idle"
+${BACKDROP_CONTROLS}`,
     HASH,
     NOISE,
     FBM,
@@ -4516,10 +4551,9 @@ uniform bool uDemo;        // @control default=true label="Demo when idle"`,
   float w = max(uEdgeWidth, 0.005);
   float t = progress * (1.0 + w);
   float m = 1.0 - smoothstep(t - w, t, f);
-  vec3 col = mix(picture(uFrom, uv), picture(uTo, uv), m);
+  vec4 col = mix(pictureRGBA(uFrom, uv), pictureRGBA(uTo, uv), m);
   float edge = m * (1.0 - m) * 4.0 * step(0.001, uEdgeWidth);
-  col = mix(col, uEdge, edge * 0.85);
-  fragColor = vec4(col, 1.0);
+  fragColor = mix(col, vec4(uEdge, 1.0), edge * 0.85);
 }`
   ),
   presets: [
@@ -5279,7 +5313,8 @@ uniform sampler2D uImage;  // @control filter=linear wrap=clamp default=${SAMPLE
 uniform vec3 uColor;       // @control color default=#8FD8FF label="Arc colour"
 uniform float uPeriod;     // @control min=1.5 max=8 default=3.5 label="Seconds between surges"
 uniform float uStrength;   // @control min=0 max=1.5 default=1 label="Strength"
-uniform float uGlitch;     // @control min=0 max=1 default=0.6 label="Glitch"`,
+uniform float uGlitch;     // @control min=0 max=1 default=0.6 label="Glitch"
+${BACKDROP_CONTROLS}`,
     HASH,
     ZIGZAG,
     ARC,
@@ -5298,7 +5333,10 @@ uniform float uGlitch;     // @control min=0 max=1 default=0.6 label="Glitch"`,
   float tear = (hash12(vec2(rows, tick)) - 0.5) * step(0.55, hash12(vec2(rows, tick + 5.0))) * 0.12 * surge * uGlitch;
   vec2 st = uv + vec2(tear, 0.0);
   float split = 0.012 * surge * uGlitch;
-  vec3 col = vec3(picture(uImage, st + vec2(split, 0.0)).r, picture(uImage, st).g, picture(uImage, st - vec2(split, 0.0)).b);
+  vec4 r = pictureRGBA(uImage, st + vec2(split, 0.0));
+  vec4 g = pictureRGBA(uImage, st);
+  vec4 b2 = pictureRGBA(uImage, st - vec2(split, 0.0));
+  vec3 col = vec3(r.r, g.g, b2.b);
   // Brightness spikes, dips in a brownout, then comes back.
   float brownout = 1.0 - 0.3 * min(uStrength, 1.0) * smoothstep(0.25, 0.5, since) * (1.0 - smoothstep(0.7, 1.5, since));
   col = col * brownout * (1.0 + surge * 1.4) + surge * 0.2 * mix(uColor, vec3(1.0), 0.5);
@@ -5317,7 +5355,9 @@ uniform float uGlitch;     // @control min=0 max=1 default=0.6 label="Glitch"`,
     light *= on;
   }
   col = 1.0 - (1.0 - clamp(col, 0.0, 1.0)) * exp(-light);
-  fragColor = vec4(col, 1.0);
+  // The arc shows where the picture is clear too.
+  float arc = 1.0 - exp(-max(light.r, max(light.g, light.b)));
+  fragColor = vec4(col, max(max(max(r.a, g.a), b2.a), arc));
 }`
   ),
   presets: [
@@ -5458,7 +5498,8 @@ uniform float uViscosity;   // @control min=0.004 max=0.04 default=0.02 label="V
 uniform float uGloss;       // @control min=0 max=1.5 default=0.8 label="Gloss"
 uniform vec3 uBackground;   // @control color default=#17121F label="Behind"
 uniform bool uAnimate;      // @control default=true label="Animate"
-uniform float uProgress;    // @control min=0 max=1 default=0.7 label="Melt (when still)"`,
+uniform float uProgress;    // @control min=0 max=1 default=0.7 label="Melt (when still)"
+${BACKDROP_CONTROLS}`,
     HASH,
     NOISE,
     FBM,
@@ -5514,13 +5555,13 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   float h = clamp(uv.y / e, 0.0, 1.0);
   float ys = 1.0 - pow(1.0 - h, 1.0 + m * 1.3);
   float xs = uv.x + m * 0.006 * sin(uv.y * 40.0 + uv.x * 13.0);
-  vec3 col = picture(uImage, vec2(xs, ys));
-  vec3 behind = uBackground * (0.75 + 0.5 * uv.y);
+  vec4 col = pictureRGBA(uImage, vec2(xs, ys));
+  vec4 behind = vec4(uBackground * (0.75 + 0.5 * uv.y), uBackdropAlpha);
   col = mix(col, behind, smoothstep(e - px, e + px, uv.y));
 
   // The liquid's shadow, down and to the right.
   float shadow = liquid(uv + vec2(-0.004, 0.009), m);
-  col *= 1.0 - 0.4 * smoothstep(0.012, -0.004, shadow) * smoothstep(0.0, 0.1, m);
+  col.rgb *= 1.0 - 0.4 * smoothstep(0.012, -0.004, shadow) * smoothstep(0.0, 0.1, m);
 
   float d = liquid(uv, m);
   if (d < 4.0 * px) {
@@ -5530,15 +5571,16 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
     float thick = sqrt(clamp(-d / 0.018, 0.0, 1.0));
     vec3 nrm = normalize(vec3(g * (1.0 - thick) * 1.6, 0.4 + thick));
     // Drips carry the colour of the top edge down; the puddle is everything mixed.
-    vec3 top = picture(uImage, vec2(uv.x + 0.01 * sin(uv.y * 25.0), 0.965));
+    vec4 top = pictureRGBA(uImage, vec2(uv.x + 0.01 * sin(uv.y * 25.0), 0.965));
     float sx = uv.x + 0.04 * sin(uv.x * 11.0 + uv.y * 30.0);
-    vec3 pool = (picture(uImage, vec2(sx - 0.06, 0.25)) + picture(uImage, vec2(sx + 0.06, 0.4)) + picture(uImage, vec2(sx, 0.9))) / 3.0;
+    vec4 pool = (pictureRGBA(uImage, vec2(sx - 0.06, 0.25)) + pictureRGBA(uImage, vec2(sx + 0.06, 0.4)) + pictureRGBA(uImage, vec2(sx, 0.9))) / 3.0;
     float inPool = smoothstep(poolY(uv.x, m) + 0.04, poolY(uv.x, m) - 0.01, uv.y);
-    vec3 base = mix(top, pool, inPool) * (0.9 + 0.12 * vnoise(vec2(uv.x * 90.0, uv.y * 3.0)));
-    vec3 wet = liquidShade(base * 1.05, nrm, uGloss);
-    col = mix(col, wet, smoothstep(px, -px, d));
+    vec4 base = mix(top, pool, inPool);
+    base.rgb *= 0.9 + 0.12 * vnoise(vec2(uv.x * 90.0, uv.y * 3.0));
+    vec3 wet = liquidShade(base.rgb * 1.05, nrm, uGloss);
+    col = mix(col, vec4(wet, base.a), smoothstep(px, -px, d));
   }
-  fragColor = vec4(col, 1.0);
+  fragColor = col;
 }`
   ),
   presets: [
@@ -5562,7 +5604,8 @@ uniform float uScale;      // @control min=1 max=20 default=7 label="Scale"
 uniform float uSpeed;      // @control min=0 max=3 default=1 label="Speed"
 uniform float uHeight;     // @control min=0.1 max=1 default=0.8 label="Height"
 uniform vec3 uTint;        // @control color default=#FFB070 label="Warm tint"
-uniform float uWarmth;     // @control min=0 max=1 default=0.3 label="Tint amount"`,
+uniform float uWarmth;     // @control min=0 max=1 default=0.3 label="Tint amount"
+${BACKDROP_CONTROLS}`,
     HASH,
     NOISE,
     FBM,
@@ -5582,16 +5625,21 @@ uniform float uWarmth;     // @control min=0 max=1 default=0.3 label="Tint amoun
   vec2 st = uv + off;
   // A touch of colour fringing where the air bends light the most.
   float fringe = 0.25 * length(off);
-  vec3 col = vec3(picture(uImage, st + vec2(fringe, 0.0)).r, picture(uImage, st).g, picture(uImage, st - vec2(fringe, 0.0)).b);
+  vec4 r = pictureRGBA(uImage, st + vec2(fringe, 0.0));
+  vec4 g = pictureRGBA(uImage, st);
+  vec4 b2 = pictureRGBA(uImage, st - vec2(fringe, 0.0));
+  vec3 col = vec3(r.r, g.g, b2.b);
+  float alpha = max(max(r.a, g.a), b2.a);
   // An inferior mirage: just above the ground, what sits above it shows again, flipped and shimmering.
   float y0 = 0.05 + 0.15 * uHeight;
   float below = smoothstep(y0, 0.0, uv.y) * (0.6 + 0.4 * b);
-  vec3 mirage = picture(uImage, vec2(st.x, y0 + (y0 - uv.y) * 1.4 + off.y * 2.0));
-  col = mix(col, mirage, below * uStrength * 0.55);
+  vec4 mirage = pictureRGBA(uImage, vec2(st.x, y0 + (y0 - uv.y) * 1.4 + off.y * 2.0));
+  col = mix(col, mirage.rgb, below * uStrength * 0.55);
+  alpha = mix(alpha, mirage.a, below * uStrength * 0.55);
   // Warm, slightly hazy air.
   col = mix(col, col * mix(vec3(1.0), uTint * 1.35, uWarmth), heat);
   col = mix(col, uTint, heat * uWarmth * 0.12 * (0.7 + 0.6 * a));
-  fragColor = vec4(col, 1.0);
+  fragColor = vec4(col, alpha);
 }`
   ),
   presets: [
@@ -5830,7 +5878,8 @@ uniform sampler2D uImage;  // @control filter=linear wrap=mirror default=${SAMPL
 uniform float uBrush;      // @control min=0.05 max=0.5 default=0.17 label="Brush size"
 uniform float uStrength;   // @control min=0 max=2 default=0.8 label="Strength"
 uniform float uRelax;      // @control min=0.2 max=5 default=1.2 label="Relax"
-uniform float uSpeed;      // @control min=0 max=2 default=1 label="Brush speed"`,
+uniform float uSpeed;      // @control min=0 max=2 default=1 label="Brush speed"
+${BACKDROP_CONTROLS}`,
     PICTURE,
     `// The brush at time t (frame units, height 1): a Lissajous path, or stirring round the pointer while it hovers.
 vec2 brush(float t) {
@@ -5860,11 +5909,11 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
     wet += f * fade;
   }
   vec2 uv = (p - disp) * vec2(iResolution.y / iResolution.x, 1.0) + 0.5;
-  vec3 col = picture(uImage, uv);
+  vec4 pic = pictureRGBA(uImage, uv);
   // Wet paint catches a little light along the smears.
   float sheen = clamp(dot(disp, normalize(vec2(-0.6, 0.8))) * 12.0, -1.0, 1.0);
-  col *= 1.0 + 0.05 * sheen * min(wet, 1.0) * min(uStrength, 1.0);
-  fragColor = vec4(col, 1.0);
+  vec3 col = pic.rgb * (1.0 + 0.05 * sheen * min(wet, 1.0) * min(uStrength, 1.0));
+  fragColor = vec4(col, pic.a);
 }`
   ),
   presets: [
@@ -6907,26 +6956,29 @@ uniform float uSpacing;     // @control min=0.02 max=0.6 default=0.18 label="Spa
 uniform float uDecay;       // @control min=0.1 max=0.95 default=0.65 label="Decay"
 uniform float uMotion;      // @control min=0 max=2 default=1.2 label="Motion"
 uniform vec3 uTint;         // @control color default=#38BDF8 label="Echo tint"
-uniform float uTintAmount;  // @control min=0 max=1 default=0.5 label="Tint strength"`,
+uniform float uTintAmount;  // @control min=0 max=1 default=0.5 label="Tint strength"
+${BACKDROP_CONTROLS}`,
     PICTURE,
     COVER,
     SWAY,
     `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   vec2 uv = fragCoord / iResolution.xy;
-  vec3 sum = picture(uImage, swayUv(uImage, uv, iTime, uMotion));
+  // Summed premultiplied, so clear parts of the picture do not darken the echoes.
+  vec4 now = pictureRGBA(uImage, swayUv(uImage, uv, iTime, uMotion));
+  vec4 sum = vec4(now.rgb * now.a, now.a);
   float total = 1.0;
   float weight = 1.0;
   for (int k = 1; k <= 8; k++) {
     if (k > uEchoes) break;
     weight *= uDecay;
     float age = float(k) / float(uEchoes);
-    vec3 echo = picture(uImage, swayUv(uImage, uv, iTime - float(k) * uSpacing, uMotion));
+    vec4 echo = pictureRGBA(uImage, swayUv(uImage, uv, iTime - float(k) * uSpacing, uMotion));
     // Older echoes take on more of the tint.
-    echo = mix(echo, uTint * dot(echo, ${LUMA}) * 1.8, uTintAmount * age);
-    sum += echo * weight;
+    echo.rgb = mix(echo.rgb, uTint * dot(echo.rgb, ${LUMA}) * 1.8, uTintAmount * age);
+    sum += vec4(echo.rgb * echo.a, echo.a) * weight;
     total += weight;
   }
-  fragColor = vec4(sum / total, 1.0);
+  fragColor = vec4(sum.rgb / max(sum.a, 1e-4), sum.a / total);
 }`
   ),
   presets: [
@@ -6948,7 +7000,8 @@ var chronoSplit = {
 uniform sampler2D uImage;  // @control filter=linear wrap=mirror default=${SAMPLE_IMAGES.city} label="Image"
 uniform float uLag;        // @control min=0 max=0.6 default=0.15 label="Lag per channel (s)"
 uniform float uMotion;     // @control min=0 max=2 default=1.4 label="Motion"
-uniform int uOrder;        // @control min=0 max=1 default=0 label="Leading channel (0 red, 1 blue)"`,
+uniform int uOrder;        // @control min=0 max=1 default=0 label="Leading channel (0 red, 1 blue)"
+${BACKDROP_CONTROLS}`,
     PICTURE,
     COVER,
     SWAY,
@@ -6956,12 +7009,10 @@ uniform int uOrder;        // @control min=0 max=1 default=0 label="Leading chan
   vec2 uv = fragCoord / iResolution.xy;
   float lagR = uOrder == 0 ? 0.0 : 2.0 * uLag;
   float lagB = uOrder == 0 ? 2.0 * uLag : 0.0;
-  vec3 col = vec3(
-    picture(uImage, swayUv(uImage, uv, iTime - lagR, uMotion)).r,
-    picture(uImage, swayUv(uImage, uv, iTime - uLag, uMotion)).g,
-    picture(uImage, swayUv(uImage, uv, iTime - lagB, uMotion)).b
-  );
-  fragColor = vec4(col, 1.0);
+  vec4 r = pictureRGBA(uImage, swayUv(uImage, uv, iTime - lagR, uMotion));
+  vec4 g = pictureRGBA(uImage, swayUv(uImage, uv, iTime - uLag, uMotion));
+  vec4 b = pictureRGBA(uImage, swayUv(uImage, uv, iTime - lagB, uMotion));
+  fragColor = vec4(r.r, g.g, b.b, max(max(r.a, g.a), b.a));
 }`
   ),
   presets: [
@@ -6985,7 +7036,8 @@ uniform float uDelay;      // @control min=0 max=0.6 default=0.12 label="Delay p
 uniform int uDirection;    // @control min=0 max=1 default=0 label="Bands (0 horizontal, 1 vertical)"
 uniform int uPattern;      // @control min=0 max=2 default=0 label="Order (0 stepped, 1 from centre, 2 random)"
 uniform float uMotion;     // @control min=0 max=2 default=1.5 label="Motion"
-uniform float uSeams;      // @control min=0 max=1 default=0.4 label="Seams"`,
+uniform float uSeams;      // @control min=0 max=1 default=0.4 label="Seams"
+${BACKDROP_CONTROLS}`,
     HASH,
     PICTURE,
     COVER,
@@ -6998,13 +7050,14 @@ uniform float uSeams;      // @control min=0 max=1 default=0.4 label="Seams"`,
   float order = band;
   if (uPattern == 1) order = abs(band - (bands - 1.0) * 0.5);
   if (uPattern == 2) order = floor(hash12(vec2(band, 4.7)) * bands);
-  vec3 col = picture(uImage, swayUv(uImage, uv, iTime - order * uDelay, uMotion));
+  vec4 pic = pictureRGBA(uImage, swayUv(uImage, uv, iTime - order * uDelay, uMotion));
+  vec3 col = pic.rgb;
   // A thin dark seam between bands, a pixel or two wide.
   float px = (uDirection == 0 ? iResolution.y : iResolution.x) / bands;
   float f = fract(across * bands);
   float edge = min(f, 1.0 - f) * px;
   col *= 1.0 - uSeams * (1.0 - smoothstep(0.0, 1.5, edge));
-  fragColor = vec4(col, 1.0);
+  fragColor = vec4(col, pic.a);
 }`
   ),
   presets: [
@@ -7046,7 +7099,8 @@ uniform float uNoise;      // @control min=0 max=1 default=0.6 label="Tracking n
 uniform float uJitter;     // @control min=0 max=1 default=0.5 label="Line jitter"
 uniform float uBleed;      // @control min=0 max=0.03 default=0.008 label="Chroma bleed"
 uniform bool uOsd;         // @control default=true label="On-screen display"
-uniform vec3 uOsdColor;    // @control color default=#F8FAFC label="Display colour"`,
+uniform vec3 uOsdColor;    // @control color default=#F8FAFC label="Display colour"
+${BACKDROP_CONTROLS}`,
     HASH,
     PICTURE,
     COVER,
@@ -7105,11 +7159,11 @@ float osd(vec2 fragCoord, float phase, float tau) {
   st.y += rw * 0.01 * (hash12(vec2(frame, 5.0)) - 0.5);
   float bleed = uBleed * (1.0 + 2.0 * rw);
   float t = tau * 1.5;
-  vec3 col = vec3(
-    picture(uImage, swayUv(uImage, st + vec2(bleed, 0.0), t, 1.4)).r,
-    picture(uImage, swayUv(uImage, st, t, 1.4)).g,
-    picture(uImage, swayUv(uImage, st - vec2(bleed, 0.0), t, 1.4)).b
-  );
+  vec4 r = pictureRGBA(uImage, swayUv(uImage, st + vec2(bleed, 0.0), t, 1.4));
+  vec4 g = pictureRGBA(uImage, swayUv(uImage, st, t, 1.4));
+  vec4 b = pictureRGBA(uImage, swayUv(uImage, st - vec2(bleed, 0.0), t, 1.4));
+  vec3 col = vec3(r.r, g.g, b.b);
+  float alpha = max(max(r.a, g.a), b.a);
   // Static in the bars, a few white dropouts, and a washed-out tape look.
   float grain = hash12(fragCoord + frame * 17.0);
   col = mix(col, vec3(grain), bar * 0.75);
@@ -7122,10 +7176,12 @@ float osd(vec2 fragCoord, float phase, float tau) {
   col *= 1.0 - 0.35 * dot(v, v);
   if (uOsd) {
     float shadow = osd(fragCoord + vec2(-2.0, 2.0), phase, tau);
+    float text = osd(fragCoord, phase, tau);
     col = mix(col, vec3(0.0), shadow * 0.5);
-    col = mix(col, uOsdColor, osd(fragCoord, phase, tau));
+    col = mix(col, uOsdColor, text);
+    alpha = max(alpha, max(shadow * 0.5, text));
   }
-  fragColor = vec4(clamp(col, 0.0, 1.0), 1.0);
+  fragColor = vec4(clamp(col, 0.0, 1.0), alpha);
 }`
   ),
   presets: [
@@ -7150,7 +7206,8 @@ uniform float uHold;        // @control min=0.5 max=3 default=2.2 label="Freeze
 uniform float uDesaturate;  // @control min=0 max=1 default=0.85 label="Desaturate"
 uniform float uZoom;        // @control min=0 max=0.25 default=0.08 label="Zoom"
 uniform vec3 uRing;         // @control color default=#A5F3FC label="Shockwave"
-uniform float uMotion;      // @control min=0 max=2 default=1.4 label="Motion"`,
+uniform float uMotion;      // @control min=0 max=2 default=1.4 label="Motion"
+${BACKDROP_CONTROLS}`,
     PICTURE,
     COVER,
     SWAY,
@@ -7173,17 +7230,18 @@ uniform float uMotion;      // @control min=0 max=2 default=1.4 label="Motion"`,
   float front = (dist - radius) / (0.045 * iResolution.y);
   float ring = exp(-front * front) * (1.0 - release);
   vec2 warp = d / max(dist, 1.0) * ring * 0.018;
-  vec3 live = picture(uImage, swayUv(uImage, uv - warp, iTime, uMotion));
+  vec4 live = pictureRGBA(uImage, swayUv(uImage, uv - warp, iTime, uMotion));
   // Behind the wave: the moment the freeze began, zooming in towards the centre the longer it is held.
   vec2 c = centre / iResolution.xy;
   float zoom = 1.0 + uZoom * smoothstep(0.0, 1.0, since / max(uHold, 0.1));
-  vec3 frozen = picture(uImage, swayUv(uImage, c + (uv - warp - c) / zoom, start, uMotion));
-  float grey = dot(frozen, ${LUMA});
-  frozen = mix(frozen, vec3(grey) * vec3(0.9, 0.98, 1.1), uDesaturate);
-  frozen *= 1.0 + 0.025 * sin(dist / iResolution.y * 60.0 - since * 4.0) * inside;
-  vec3 col = mix(live, frozen, inside);
-  col += uRing * ring * 0.7;
-  fragColor = vec4(col, 1.0);
+  vec4 frozen = pictureRGBA(uImage, swayUv(uImage, c + (uv - warp - c) / zoom, start, uMotion));
+  float grey = dot(frozen.rgb, ${LUMA});
+  frozen.rgb = mix(frozen.rgb, vec3(grey) * vec3(0.9, 0.98, 1.1), uDesaturate);
+  frozen.rgb *= 1.0 + 0.025 * sin(dist / iResolution.y * 60.0 - since * 4.0) * inside;
+  vec4 pic = mix(live, frozen, inside);
+  // The ring is light added over the picture, so it also shows where the picture is clear.
+  float alpha = max(pic.a, clamp(ring * 0.7, 0.0, 1.0));
+  fragColor = vec4((pic.rgb * pic.a + uRing * ring * 0.7) / max(alpha, 1e-4), alpha);
 }`
   ),
   presets: [
@@ -7206,7 +7264,8 @@ uniform float uTwist;      // @control min=0 max=4 default=1.2 label="Twist"
 uniform float uSpeed;      // @control min=0 max=2 default=0.5 label="Speed"
 uniform vec3 uColor;       // @control color default=#3B82F6 label="Tunnel colour"
 uniform float uTint;       // @control min=0 max=1 default=0.55 label="Colour strength"
-uniform vec3 uCore;        // @control color default=#F0F9FF label="Core"`,
+uniform vec3 uCore;        // @control color default=#F0F9FF label="Core"
+${BACKDROP_CONTROLS}`,
     HASH,
     PICTURE,
     `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
@@ -7219,7 +7278,8 @@ uniform vec3 uCore;        // @control color default=#F0F9FF label="Core"`,
   // Round the tube (seamless: twice round the mirrored image), twisting with depth; along it, rushing closer.
   float u = a / 6.28318 + uTwist * 0.15 * z + iTime * 0.125;
   float v = z * 0.5 + iTime * uSpeed;
-  vec3 img = picture(uImage, vec2(u * 2.0, v));
+  vec4 pic = pictureRGBA(uImage, vec2(u * 2.0, v));
+  vec3 img = pic.rgb;
   float l = dot(img, vec3(0.2126, 0.7152, 0.0722));
   vec3 col = mix(img, uColor * l * 2.2, uTint);
   // Rings where the tube's sections meet.
@@ -7231,13 +7291,14 @@ uniform vec3 uCore;        // @control color default=#F0F9FF label="Core"`,
   // Thin in screen space at any distance from the core.
   float across = abs(fract(u * 64.0) - 0.5) / 64.0 * 6.28318 * r;
   float thin = 1.0 - smoothstep(0.0015, 0.005, across);
-  col += mix(uCore, uColor, 0.4) * dash * step(0.75, h) * thin * smoothstep(0.05, 0.25, r);
+  float streak = dash * step(0.75, h) * thin * smoothstep(0.05, 0.25, r);
+  col += mix(uCore, uColor, 0.4) * streak;
   // Depth haze into the glowing core; the near rim darkens.
   float haze = 1.0 - smoothstep(0.0, 0.2, r);
   col = mix(col, uCore, haze);
   col += uCore * 0.002 / (r * r + 0.01);
   col *= 1.0 - 0.45 * smoothstep(0.5, 0.95, r);
-  fragColor = vec4(clamp(col, 0.0, 1.0), 1.0);
+  fragColor = vec4(clamp(col, 0.0, 1.0), clamp(max(pic.a, max(haze, streak)), 0.0, 1.0));
 }`
   ),
   presets: [
@@ -7259,7 +7320,8 @@ var speedRamp = {
 uniform sampler2D uImage;  // @control filter=linear wrap=mirror default=${SAMPLE_IMAGES.landscape} label="Image"
 uniform float uRamp;       // @control min=0 max=0.95 default=0.9 label="Ramp strength"
 uniform float uBlur;       // @control min=0 max=0.25 default=0.1 label="Motion blur (shutter s)"
-uniform float uPan;        // @control min=0.1 max=1 default=0.5 label="Pan speed"`,
+uniform float uPan;        // @control min=0.1 max=1 default=0.5 label="Pan speed"
+${BACKDROP_CONTROLS}`,
     PICTURE,
     COVER,
     `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
@@ -7274,15 +7336,17 @@ uniform float uPan;        // @control min=0.1 max=1 default=0.5 label="Pan spee
   vec2 base = 0.5 + (uv - 0.5) * cover / zoom + vec2(uPan * tau, 0.02 * sin(w * 2.0 * tau));
   // Blur along the pan, as long as the picture moves while the shutter is open (16 taps at most).
   float len = min(uPan * speed * uBlur, 0.25);
-  vec3 col = vec3(0.0);
+  // Summed premultiplied, so clear parts of the picture do not darken the blur.
+  vec4 sum = vec4(0.0);
   for (int i = 0; i < 16; i++) {
     float k = float(i) / 15.0 - 0.5;
-    col += picture(uImage, base - vec2(len * k, 0.0));
+    vec4 c = pictureRGBA(uImage, base - vec2(len * k, 0.0));
+    sum += vec4(c.rgb * c.a, c.a);
   }
-  col /= 16.0;
+  vec3 col = sum.rgb / max(sum.a, 1e-4);
   vec2 v = uv - 0.5;
   col *= 1.0 - (0.2 + 0.25 * max(speed - 1.0, 0.0)) * dot(v, v) * 2.0;
-  fragColor = vec4(col, 1.0);
+  fragColor = vec4(col, sum.a / 16.0);
 }`
   ),
   presets: [
@@ -7303,7 +7367,8 @@ uniform sampler2D uImage;  // @control filter=linear wrap=mirror default=${SAMPL
 uniform float uRate;       // @control min=0.2 max=4 default=1 label="Bursts per second"
 uniform float uHold;       // @control min=0 max=1 default=0.55 label="Hold length"
 uniform float uFlash;      // @control min=0 max=1 default=0.6 label="Flash"
-uniform float uMotion;     // @control min=0 max=2 default=1.6 label="Motion"`,
+uniform float uMotion;     // @control min=0 max=2 default=1.6 label="Motion"
+${BACKDROP_CONTROLS}`,
     HASH,
     PICTURE,
     COVER,
@@ -7328,13 +7393,14 @@ uniform float uMotion;     // @control min=0 max=2 default=1.6 label="Motion"`,
     kick = exp(-since * 10.0);
   }
   vec2 st = 0.5 + (uv - 0.5) / (1.0 + 0.04 * kick);
-  vec3 col = picture(uImage, swayUv(uImage, st, t * 2.0, uMotion));
+  vec4 pic = pictureRGBA(uImage, swayUv(uImage, st, t * 2.0, uMotion));
+  vec3 col = pic.rgb;
   if (frozen) {
     col = mix(col, vec3(dot(col, ${LUMA})), 0.25);
     col = (col - 0.5) * 1.1 + 0.5;
   }
   col = mix(col, vec3(1.0), kick * uFlash * 0.85);
-  fragColor = vec4(clamp(col, 0.0, 1.0), 1.0);
+  fragColor = vec4(clamp(col, 0.0, 1.0), max(pic.a, kick * uFlash * 0.85));
 }`
   ),
   presets: [
@@ -7362,8 +7428,12 @@ vec2 coverScale(sampler2D tex) {
   return frameAspect > imageAspect ? vec2(1.0, imageAspect / frameAspect) : vec2(frameAspect / imageAspect, 1.0);
 }
 
+vec4 coverRGBA(sampler2D tex, vec2 uv) {
+  return pictureRGBA(tex, 0.5 + (uv - 0.5) * coverScale(tex));
+}
+
 vec3 cover(sampler2D tex, vec2 uv) {
-  return picture(tex, 0.5 + (uv - 0.5) * coverScale(tex));
+  return coverRGBA(tex, uv).rgb;
 }
 
 float luma(vec3 c) {
@@ -7390,7 +7460,8 @@ uniform vec2 uToB;         // @control min=0 max=1 default=0.725,0.514 label="To
 uniform vec2 uToC;         // @control min=0 max=1 default=0.672,0.364 label="To: mouth"
 uniform vec2 uToD;         // @control min=0 max=1 default=0.672,0.25 label="To: chin"
 uniform vec2 uToE;         // @control min=0 max=1 default=0.672,0.778 label="To: hairline"
-uniform bool uShowPoints;  // @control default=false label="Show points"`,
+uniform bool uShowPoints;  // @control default=false label="Show points"
+${BACKDROP_CONTROLS}`,
     PICTURE,
     COMMON,
     `// Points are given in image uv; the warp works in frame space (height 1, x scaled by the aspect).
@@ -7445,18 +7516,23 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   vec2 m[5];
   for (int i = 0; i < 5; i++) m[i] = mix(a[i], b[i], t);
   vec2 x = fragCoord / iResolution.y;
-  vec3 colA = picture(uFrom, toImage(warp(x, m, a), scaleA));
-  vec3 colB = picture(uTo, toImage(warp(x, m, b), scaleB));
-  vec3 col = mix(colA, colB, smoothstep(0.2, 0.8, t));
+  vec4 colA = pictureRGBA(uFrom, toImage(warp(x, m, a), scaleA));
+  vec4 colB = pictureRGBA(uTo, toImage(warp(x, m, b), scaleB));
+  vec4 pic = mix(colA, colB, smoothstep(0.2, 0.8, t));
+  vec3 col = pic.rgb;
+  float marks = 0.0;
   if (uShowPoints) {
     float px = 1.0 / iResolution.y;
     for (int i = 0; i < 5; i++) {
       float d = length(x - m[i]);
-      col = mix(col, vec3(0.0), smoothstep(px * 1.5, 0.0, abs(d - 0.012)) * 0.6);
-      col = mix(col, vec3(1.0, 0.85, 0.2), smoothstep(px, 0.0, abs(d - 0.012)));
+      float shadow = smoothstep(px * 1.5, 0.0, abs(d - 0.012)) * 0.6;
+      float ring = smoothstep(px, 0.0, abs(d - 0.012));
+      col = mix(col, vec3(0.0), shadow);
+      col = mix(col, vec3(1.0, 0.85, 0.2), ring);
+      marks = max(marks, max(shadow, ring));
     }
   }
-  fragColor = vec4(col, 1.0);
+  fragColor = vec4(col, max(pic.a, marks));
 }`
   ),
   presets: [{ name: "Show points", values: { uShowPoints: true, uAnimate: false, uProgress: 0.5 } }]
@@ -7554,7 +7630,8 @@ var transitionLiquidMorph = {
 ${pair(SAMPLE_IMAGES.landscape, SAMPLE_IMAGES.city)}
 uniform float uStrength;   // @control min=0 max=0.5 default=0.1 label="Strength"
 uniform float uScale;      // @control min=0.5 max=8 default=2.5 label="Scale"
-uniform float uFlow;       // @control min=0 max=2 default=0.4 label="Flow speed"`,
+uniform float uFlow;       // @control min=0 max=2 default=0.4 label="Flow speed"
+${BACKDROP_CONTROLS}`,
     HASH,
     NOISE,
     FBM,
@@ -7570,10 +7647,10 @@ uniform float uFlow;       // @control min=0 max=2 default=0.4 label="Flow speed
   vec2 flow = vec2(fbm(q + 4.0 * first + vec2(1.7, 9.2) + time * 0.5, 4), fbm(q + 4.0 * first + vec2(8.3, 2.8) - time * 0.5, 4)) - 0.5;
   vec2 d = flow * uStrength * s * 2.0;
   // From is carried downstream, To arrives from upstream; neither moves at the ends.
-  vec3 a = cover(uFrom, uv + d);
-  vec3 b = cover(uTo, uv - d);
+  vec4 a = coverRGBA(uFrom, uv + d);
+  vec4 b = coverRGBA(uTo, uv - d);
   float k = smoothstep(0.25, 0.75, t + (flow.x + flow.y) * 0.6 * s);
-  fragColor = vec4(mix(a, b, k), 1.0);
+  fragColor = mix(a, b, k);
 }`
   ),
   presets: [
@@ -7593,7 +7670,8 @@ var transitionDisplacement = {
     `// Displacement: From's luminance drives a directional warp out, To's luminance the same warp in reverse.
 ${pair(SAMPLE_IMAGES.city, SAMPLE_IMAGES.landscape)}
 uniform float uStrength;   // @control min=0 max=1 default=0.4 label="Strength"
-uniform float uAngle;      // @control min=0 max=360 default=0 label="Direction (\xB0)"`,
+uniform float uAngle;      // @control min=0 max=360 default=0 label="Direction (\xB0)"
+${BACKDROP_CONTROLS}`,
     PICTURE,
     COMMON,
     `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
@@ -7602,9 +7680,9 @@ uniform float uAngle;      // @control min=0 max=360 default=0 label="Direction
   vec2 dir = vec2(cos(radians(uAngle)), sin(radians(uAngle))) * vec2(iResolution.y / iResolution.x, 1.0);
   float la = luma(cover(uFrom, uv));
   float lb = luma(cover(uTo, uv));
-  vec3 a = cover(uFrom, uv + dir * t * uStrength * la);
-  vec3 b = cover(uTo, uv - dir * (1.0 - t) * uStrength * lb);
-  fragColor = vec4(mix(a, b, smoothstep(0.2, 0.8, t)), 1.0);
+  vec4 a = coverRGBA(uFrom, uv + dir * t * uStrength * la);
+  vec4 b = coverRGBA(uTo, uv - dir * (1.0 - t) * uStrength * lb);
+  fragColor = mix(a, b, smoothstep(0.2, 0.8, t));
 }`
   ),
   presets: [
@@ -7625,19 +7703,20 @@ var transitionLuma = {
 ${pair(SAMPLE_IMAGES.landscape, SAMPLE_IMAGES.city)}
 uniform float uSoftness;   // @control min=0.01 max=0.5 default=0.1 label="Softness"
 uniform bool uLightFirst;  // @control default=false label="Light first"
-uniform int uSource;       // @control min=0 max=1 default=0 label="Brightness of (0 From, 1 To)"`,
+uniform int uSource;       // @control min=0 max=1 default=0 label="Brightness of (0 From, 1 To)"
+${BACKDROP_CONTROLS}`,
     PICTURE,
     COMMON,
     `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   vec2 uv = fragCoord / iResolution.xy;
   float t = progress();
-  vec3 a = cover(uFrom, uv);
-  vec3 b = cover(uTo, uv);
-  float l = clamp(luma(uSource == 0 ? a : b), 0.0, 1.0);
+  vec4 a = coverRGBA(uFrom, uv);
+  vec4 b = coverRGBA(uTo, uv);
+  float l = clamp(luma(uSource == 0 ? a.rgb : b.rgb), 0.0, 1.0);
   if (uLightFirst) l = 1.0 - l;
   // The front sweeps from below the darkest pixel to above the lightest, so both ends are clean.
   float front = mix(-uSoftness, 1.0 + uSoftness, t);
-  fragColor = vec4(mix(a, b, smoothstep(l - uSoftness, l + uSoftness, front)), 1.0);
+  fragColor = mix(a, b, smoothstep(l - uSoftness, l + uSoftness, front));
 }`
   ),
   presets: [
@@ -7659,7 +7738,8 @@ ${pair(SAMPLE_IMAGES.landscape, SAMPLE_IMAGES.city)}
 uniform float uParticle;   // @control min=6 max=80 default=20 label="Particle size (px)"
 uniform float uScatter;    // @control min=0 max=0.8 default=0.45 label="Scatter"
 uniform float uSpin;       // @control min=0 max=2 default=0.6 label="Spin & curl"
-uniform vec3 uBackground;  // @control color default=#0B0B12 label="Background"`,
+uniform vec3 uBackground;  // @control color default=#0B0B12 label="Background"
+${BACKDROP_CONTROLS}`,
     HASH,
     ROTATE,
     PICTURE,
@@ -7680,7 +7760,7 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   vec2 p = fragCoord / uParticle;
   vec2 grid = iResolution.xy / uParticle;
   vec2 base = floor(p);
-  vec3 col = uBackground;
+  vec4 col = vec4(uBackground, uBackdropAlpha);
   float top = -1.0;
   vec2 hitFrom = vec2(0.0);
   vec2 hitTo = vec2(0.0);
@@ -7715,12 +7795,11 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
     }
   }
   if (top > -1.0) {
-    vec3 a = cover(uFrom, hitFrom / grid);
-    vec3 b = cover(uTo, hitTo / grid);
-    vec3 particle = mix(a, b, hitT) * (1.0 + 0.15 * sin(3.14159 * hitT));
+    vec4 particle = mix(coverRGBA(uFrom, hitFrom / grid), coverRGBA(uTo, hitTo / grid), hitT);
+    particle.rgb *= 1.0 + 0.15 * sin(3.14159 * hitT);
     col = mix(col, particle, hitCover);
   }
-  fragColor = vec4(col, 1.0);
+  fragColor = col;
 }`
   ),
   presets: [
@@ -7741,7 +7820,8 @@ var transitionInkBleed = {
 ${pair(SAMPLE_IMAGES.city, SAMPLE_IMAGES.landscape)}
 uniform float uScale;      // @control min=0.5 max=8 default=3 label="Scale"
 uniform float uEdge;       // @control min=0.005 max=0.2 default=0.05 label="Edge width"
-uniform vec3 uInk;         // @control color default=#1B1F3B label="Ink"`,
+uniform vec3 uInk;         // @control color default=#1B1F3B label="Ink"
+${BACKDROP_CONTROLS}`,
     HASH,
     NOISE,
     FBM,
@@ -7769,12 +7849,10 @@ uniform vec3 uInk;         // @control color default=#1B1F3B label="Ink"`,
   float soak = smoothstep(-2.0 * uEdge, 0.0, gap) * (1.0 - wet);
   float pool = wet * smoothstep(uEdge, 0.0, gap);
   vec2 bleed = vec2(soak - pool) * 0.004;
-  vec3 a = cover(uFrom, uv + bleed);
-  vec3 b = cover(uTo, uv - bleed);
-  vec3 col = mix(a, b, wet);
-  col = mix(col, col * 0.82, soak * 0.6);
-  col = mix(col, uInk, pool * 0.85);
-  fragColor = vec4(col, 1.0);
+  vec4 col = mix(coverRGBA(uFrom, uv + bleed), coverRGBA(uTo, uv - bleed), wet);
+  col.rgb = mix(col.rgb, col.rgb * 0.82, soak * 0.6);
+  col = mix(col, vec4(uInk, 1.0), pool * 0.85);
+  fragColor = col;
 }`
   ),
   presets: [
@@ -8531,7 +8609,8 @@ uniform sampler2D uImage;  // @control filter=linear wrap=clamp default=${SAMPLE
 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)"`,
+uniform float uDuration;   // @control min=2 max=30 default=6 label="Duration (s)"
+${BACKDROP_CONTROLS}`,
     PICTURE,
     `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   vec2 uv = fragCoord / iResolution.xy;
@@ -8547,8 +8626,7 @@ uniform float uDuration;   // @control min=2 max=30 default=6 label="Duration (s
   // 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);
+  fragColor = pictureRGBA(uImage, 0.5 + (uv - 0.5) * window + pan);
 }`
   ),
   presets: [
@@ -8570,7 +8648,8 @@ uniform sampler2D uImage;  // @control filter=linear wrap=clamp default=${SAMPLE
 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"`,
+uniform vec3 uBackground;  // @control color default=#0A0F0A label="Background"
+${BACKDROP_CONTROLS}`,
     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](
@@ -8598,14 +8677,15 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   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);
+  vec4 pic = pictureRGBA(uImage, (id + 0.5) * cell / iResolution.xy);
+  vec3 src = pic.rgb;
   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);
+  fragColor = vec4(mix(uBackground, tint, ink), pic.a);
 }`
   ),
   presets: [
@@ -8630,7 +8710,8 @@ uniform float uProgress;   // @control min=0 max=1 default=0.5 label="Progress (
 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"`,
+uniform vec3 uBackground;  // @control color default=#0B0B12 label="Background"
+${BACKDROP_CONTROLS}`,
     HASH,
     ROTATE,
     PICTURE,
@@ -8666,7 +8747,7 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   // 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;
+  vec4 col = vec4(uBackground, uBackdropAlpha);
   float top = -1.0;
   for (int j = -2; j <= 2; j++) {
     for (int i = -2; i <= 2; i++) {
@@ -8681,14 +8762,14 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
       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);
+        vec4 shard = pictureRGBA(uImage, uv);
+        shard.rgb *= 1.0 - 0.35 * k * abs(sin(a));
+        shard.rgb += k * 0.35 * smoothstep(0.06, 0.0, s.z);
         col = shard;
       }
     }
   }
-  fragColor = vec4(col, 1.0);
+  fragColor = col;
 }`
   ),
   presets: [
@@ -8708,7 +8789,8 @@ var imageMelt = {
 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"`,
+uniform float uScale;      // @control min=1 max=20 default=6 label="Scale"
+${BACKDROP_CONTROLS}`,
     HASH,
     NOISE,
     FBM,
@@ -8722,10 +8804,10 @@ uniform float uScale;      // @control min=1 max=20 default=6 label="Scale"`,
   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);
+  vec4 pic = pictureRGBA(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);
+  vec3 col = pic.rgb + 0.12 * smoothstep(0.55, 0.9, drips) * uAmount * 4.0;
+  fragColor = vec4(col, pic.a);
 }`
   ),
   presets: [
@@ -8748,7 +8830,8 @@ 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"`,
+uniform vec3 uPaper;       // @control color default=#F5EFE0 label="Paper"
+${BACKDROP_CONTROLS}`,
     HASH,
     NOISE,
     PICTURE,
@@ -8764,8 +8847,8 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   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);
+  vec4 a = pictureRGBA(uImage, uv + shift);
+  vec4 b = pictureRGBA(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.
@@ -8773,7 +8856,7 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   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);
+  fragColor = vec4(col, max(a.a, b.a));
 }`
   ),
   presets: [
@@ -8794,7 +8877,8 @@ var imageThermal = {
 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"`,
+uniform float uContrast;   // @control min=0.5 max=3 default=1.3 label="Contrast"
+${BACKDROP_CONTROLS}`,
     HASH,
     PICTURE,
     `vec3 heat(float t) {
@@ -8809,9 +8893,9 @@ 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));
+  vec4 src = 0.4 * pictureRGBA(uImage, uv) + 0.15 * (pictureRGBA(uImage, uv + vec2(px.x, 0.0)) + pictureRGBA(uImage, uv - vec2(px.x, 0.0)) +
+             pictureRGBA(uImage, uv + vec2(0.0, px.y)) + pictureRGBA(uImage, uv - vec2(0.0, px.y)));
+  float l = dot(src.rgb, 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;
@@ -8826,7 +8910,7 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
     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);
+  fragColor = vec4(col, src.a);
 }`
   ),
   presets: [
@@ -8849,25 +8933,28 @@ 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"`,
+uniform float uPulse;      // @control min=0 max=1 default=0.4 label="Pulse"
+${BACKDROP_CONTROLS}`,
     PICTURE,
-    `float luma(vec2 uv) {
-  return dot(picture(uImage, uv), vec3(0.2126, 0.7152, 0.0722));
+    `// Brightness and alpha: an edge is where either changes (an icon's outline is in its alpha).
+vec2 lumaAlpha(vec2 uv) {
+  vec4 c = pictureRGBA(uImage, uv);
+  return vec2(dot(c.rgb, vec3(0.2126, 0.7152, 0.0722)), c.a);
 }
 
 // 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));
+  vec2 tl = lumaAlpha(uv + vec2(-d.x, d.y));
+  vec2 t = lumaAlpha(uv + vec2(0.0, d.y));
+  vec2 tr = lumaAlpha(uv + d);
+  vec2 l = lumaAlpha(uv - vec2(d.x, 0.0));
+  vec2 r = lumaAlpha(uv + vec2(d.x, 0.0));
+  vec2 bl = lumaAlpha(uv - d);
+  vec2 b = lumaAlpha(uv - vec2(0.0, d.y));
+  vec2 br = lumaAlpha(uv + vec2(d.x, -d.y));
+  vec2 gx = tr + 2.0 * r + br - tl - 2.0 * l - bl;
+  vec2 gy = tl + 2.0 * t + tr - bl - 2.0 * b - br;
+  return max(length(vec2(gx.x, gy.x)), length(vec2(gx.y, gy.y)));
 }
 
 void mainImage(out vec4 fragColor, in vec2 fragCoord) {
@@ -8877,10 +8964,13 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   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);
+  vec4 pic = pictureRGBA(uImage, uv);
+  float glow = (line + 0.45 * halo) * pulse;
+  vec3 light = uGlow * glow + vec3(1.0) * line * line * 0.35 * pulse;
+  // The glow is light added over the picture, so it also shows where the picture is clear.
+  float alpha = max(pic.a, clamp(glow, 0.0, 1.0));
+  vec3 col = (pic.rgb * (1.0 - uDim) * pic.a + light) / max(alpha, 1e-4);
+  fragColor = vec4(col, alpha);
 }`
   ),
   presets: [
@@ -8901,25 +8991,28 @@ uniform sampler2D uImage;  // @control filter=linear wrap=clamp default=${SAMPLE
 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"`,
+uniform float uSaturation; // @control min=0 max=2 default=1.4 label="Saturation"
+${BACKDROP_CONTROLS}`,
     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);
+  // Summed premultiplied, so clear parts of the picture do not darken the blur.
+  vec4 sum = vec4(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);
+    vec4 c = pictureRGBA(uImage, uv + r * vec2(cos(a), sin(a)) / iResolution.xy);
+    sum += vec4(c.rgb * c.a, c.a);
   }
-  vec3 col = sum / 24.0;
+  vec3 col = sum.rgb / max(sum.a, 1e-4);
   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);
+  fragColor = vec4(col, sum.a / 24.0);
 }`
   ),
   presets: [
@@ -8939,7 +9032,8 @@ var imageSlitScan = {
 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"`,
+uniform float uSpeed;      // @control min=0 max=3 default=0.6 label="Speed"
+${BACKDROP_CONTROLS}`,
     HASH,
     NOISE,
     PICTURE,
@@ -8954,13 +9048,15 @@ uniform float uSpeed;      // @control min=0 max=3 default=0.6 label="Speed"`,
   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);
+  // Summed premultiplied, so clear parts of the picture do not darken the smear.
+  vec4 sum = vec4(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);
+    vec4 c = pictureRGBA(uImage, st);
+    sum += vec4(c.rgb * c.a, c.a);
   }
-  fragColor = vec4(col / 8.0, 1.0);
+  fragColor = vec4(sum.rgb / max(sum.a, 1e-4), sum.a / 8.0);
 }`
   ),
   presets: [
@@ -8983,7 +9079,8 @@ uniform int uShape;        // @control min=0 max=1 default=0 label="Tile shape (
 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"`,
+uniform vec3 uBackground;  // @control color default=#0F172A label="Background"
+${BACKDROP_CONTROLS}`,
     HASH,
     PICTURE,
     `// Hexagon tiles 1 unit across the flats: h is the offset from the tile's centre.
@@ -9037,14 +9134,14 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   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;
+  vec4 col = vec4(uBackground * 0.6, uBackdropAlpha);
   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);
+    vec4 face = flip < 0.5
+      ? vec4(uBackground * (0.9 + 0.2 * hash12(centre * 3.17)) + 0.04, uBackdropAlpha)
+      : pictureRGBA(uImage, (centre + hf) * uSize / iResolution.xy);
+    col = vec4(face.rgb * (0.5 + 0.5 * squash), face.a);
   }
-  fragColor = vec4(col, 1.0);
+  fragColor = col;
 }`
   ),
   presets: [
@@ -9064,7 +9161,8 @@ var imageChromaticLens = {
 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"`,
+uniform float uVignette;    // @control min=0 max=1 default=0.4 label="Vignette"
+${BACKDROP_CONTROLS}`,
     PICTURE,
     `// Where a lens with barrel strength k shows the point c (centred, aspect-corrected) from.
 vec2 lens(vec2 c, float k, vec2 aspect) {
@@ -9078,13 +9176,12 @@ 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
-  );
+  vec4 r = pictureRGBA(uImage, lens(c, uDistortion + uAberration, aspect));
+  vec4 g = pictureRGBA(uImage, lens(c, uDistortion, aspect));
+  vec4 b = pictureRGBA(uImage, lens(c, uDistortion - uAberration, aspect));
+  vec3 col = vec3(r.r, g.g, b.b);
   col *= 1.0 - uVignette * smoothstep(0.25, 0.95, length(c));
-  fragColor = vec4(col, 1.0);
+  fragColor = vec4(col, max(max(r.a, g.a), b.a));
 }`
   ),
   presets: [
@@ -9104,7 +9201,8 @@ var imageOilPaint = {
 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"`,
+uniform float uSaturation; // @control min=0 max=2 default=1.15 label="Saturation"
+${BACKDROP_CONTROLS}`,
     PICTURE,
     `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
   vec2 uv = fragCoord / iResolution.xy;
@@ -9144,7 +9242,7 @@ uniform float uSaturation; // @control min=0 max=2 default=1.15 label="Saturatio
   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);
+  fragColor = vec4(col, pictureRGBA(uImage, uv).a);
 }`
   ),
   presets: [
@@ -10444,4 +10542,4 @@ export {
   effectControls,
   effectDefaults
 };
-//# sourceMappingURL=chunk-36OCXXPY.js.map
+//# sourceMappingURL=chunk-L4NFQM5N.js.map