instantshader 0.7.0 → 0.8.0

package/dist/index.js

@@ -254,7 +254,7 @@ vec2 seedOffset() {
 
 //#endregion
 //#region src/shaders/flow.ts
-const FRAGMENT$10 = `
+const FRAGMENT$11 = `
 uniform float u_scale;
 uniform float u_curl;
 uniform float u_drift;
@@ -391,7 +391,7 @@ void main() {
 const flow = {
 	id: "flow",
 	label: "Flow",
-	fragment: FRAGMENT$10,
+	fragment: FRAGMENT$11,
 	params: [
 		{
 			key: "scale",
@@ -447,7 +447,7 @@ const flow = {
 
 //#endregion
 //#region src/shaders/beam.ts
-const FRAGMENT$9 = `
+const FRAGMENT$10 = `
 uniform float u_scale;
 uniform float u_width;
 uniform float u_glow;
@@ -701,7 +701,7 @@ void main() {
 const beam = {
 	id: "beam",
 	label: "Beam",
-	fragment: FRAGMENT$9,
+	fragment: FRAGMENT$10,
 	params: [
 		{
 			key: "scale",
@@ -709,7 +709,7 @@ const beam = {
 			min: .5,
 			max: 2,
 			step: .05,
-			default: 1
+			default: .75
 		},
 		{
 			key: "width",
@@ -717,7 +717,7 @@ const beam = {
 			min: .04,
 			max: .6,
 			step: .005,
-			default: .14
+			default: .4
 		},
 		{
 			key: "glow",
@@ -757,7 +757,7 @@ const beam = {
 
 //#endregion
 //#region src/shaders/bloom.ts
-const FRAGMENT$8 = `
+const FRAGMENT$9 = `
 uniform float u_scale;
 uniform float u_petals;
 uniform float u_pinch;
@@ -916,7 +916,7 @@ void main() {
 const bloom = {
 	id: "bloom",
 	label: "Bloom",
-	fragment: FRAGMENT$8,
+	fragment: FRAGMENT$9,
 	params: [
 		{
 			key: "scale",
@@ -990,7 +990,7 @@ const bloom = {
 
 //#endregion
 //#region src/shaders/halo.ts
-const FRAGMENT$7 = `
+const FRAGMENT$8 = `
 uniform float u_radius;
 uniform float u_x;
 uniform float u_y;
@@ -1103,7 +1103,7 @@ void main() {
 const halo = {
 	id: "halo",
 	label: "Halo",
-	fragment: FRAGMENT$7,
+	fragment: FRAGMENT$8,
 	params: [
 		{
 			key: "radius",
@@ -1178,7 +1178,7 @@ const halo = {
 
 //#endregion
 //#region src/shaders/strata.ts
-const FRAGMENT$6 = `
+const FRAGMENT$7 = `
 uniform float u_scale;
 uniform float u_layers;
 uniform float u_warp;
@@ -1283,7 +1283,7 @@ void main() {
 const strata = {
 	id: "strata",
 	label: "Strata",
-	fragment: FRAGMENT$6,
+	fragment: FRAGMENT$7,
 	params: [
 		{
 			key: "scale",
@@ -1375,7 +1375,7 @@ const strata = {
 
 //#endregion
 //#region src/shaders/dune.ts
-const FRAGMENT$5 = `
+const FRAGMENT$6 = `
 uniform float u_layers;
 uniform float u_swell;
 uniform float u_waves;
@@ -1452,7 +1452,7 @@ void main() {
 const dune = {
 	id: "dune",
 	label: "Dune",
-	fragment: FRAGMENT$5,
+	fragment: FRAGMENT$6,
 	params: [
 		{
 			key: "layers",
@@ -1526,7 +1526,7 @@ const dune = {
 
 //#endregion
 //#region src/shaders/whorl.ts
-const FRAGMENT$4 = `
+const FRAGMENT$5 = `
 uniform float u_blades;
 uniform float u_twist;
 uniform float u_depth;
@@ -1579,7 +1579,7 @@ void main() {
 const whorl = {
 	id: "whorl",
 	label: "Whorl",
-	fragment: FRAGMENT$4,
+	fragment: FRAGMENT$5,
 	params: [
 		{
 			key: "blades",
@@ -1619,7 +1619,7 @@ const whorl = {
 			min: 0,
 			max: 1,
 			step: .01,
-			default: .4
+			default: 0
 		},
 		{
 			key: "x",
@@ -1662,7 +1662,7 @@ const whorl = {
 
 //#endregion
 //#region src/shaders/silk.ts
-const FRAGMENT$3 = `
+const FRAGMENT$4 = `
 uniform float u_scale;
 uniform float u_folds;
 uniform float u_depth;
@@ -1751,7 +1751,7 @@ void main() {
 const silk = {
 	id: "silk",
 	label: "Silk",
-	fragment: FRAGMENT$3,
+	fragment: FRAGMENT$4,
 	params: [
 		{
 			key: "scale",
@@ -1825,7 +1825,7 @@ const silk = {
 
 //#endregion
 //#region src/shaders/nacre.ts
-const FRAGMENT$2 = `
+const FRAGMENT$3 = `
 uniform float u_scale;
 uniform float u_flow;
 uniform float u_crease;
@@ -1902,7 +1902,7 @@ void main() {
 const nacre = {
 	id: "nacre",
 	label: "Nacre",
-	fragment: FRAGMENT$2,
+	fragment: FRAGMENT$3,
 	params: [
 		{
 			key: "scale",
@@ -1976,7 +1976,7 @@ const nacre = {
 
 //#endregion
 //#region src/shaders/burst.ts
-const FRAGMENT$1 = `
+const FRAGMENT$2 = `
 uniform float u_rays;
 uniform float u_sharp;
 uniform float u_glow;
@@ -2040,7 +2040,7 @@ void main() {
 const burst = {
 	id: "burst",
 	label: "Burst",
-	fragment: FRAGMENT$1,
+	fragment: FRAGMENT$2,
 	params: [
 		{
 			key: "rays",
@@ -2114,7 +2114,7 @@ const burst = {
 
 //#endregion
 //#region src/shaders/glint.ts
-const FRAGMENT = `
+const FRAGMENT$1 = `
 uniform float u_size;
 uniform float u_density;
 uniform float u_bend;
@@ -2237,7 +2237,7 @@ void main() {
 const glint = {
 	id: "glint",
 	label: "Glint",
-	fragment: FRAGMENT,
+	fragment: FRAGMENT$1,
 	params: [
 		{
 			key: "size",
@@ -2300,94 +2300,6 @@ const glint = {
 	}
 };
 
-//#endregion
-//#region src/effects/pixelate.ts
-const CELL_FRAGMENT$3 = `
-uniform float u_levels;
-
-void main() {
-  vec3 c = cellSource().rgb;
-  // Posterize per channel. Rounds to the nearest level, so black and white
-  // stay put. levels = 1 would divide by zero and means nothing; 0 is "off".
-  if (u_levels >= 2.0) {
-    float n = u_levels - 1.0;
-    c = floor(c * n + 0.5) / n;
-  }
-  gl_FragColor = vec4(c, 1.0);
-}
-`;
-const DRAW_FRAGMENT$2 = `
-uniform float u_gap;
-uniform vec3 u_gapColor;
-
-void main() {
-  vec3 color = coverage();
-  if (u_gap > 0.0) {
-    // A gap line is u_gap of a cell wide, centred on every cell boundary.
-    // Its weight is the exact share of this output pixel it covers, and the
-    // blend happens in linear light, for the same reason coverage() works
-    // that way: a smoothstep edge in gamma space draws sub-pixel lines far
-    // too heavy, so a small preview would look darker than its own export.
-    vec2 px = cellPx();
-    vec2 d = min(cellLocal(), 1.0 - cellLocal()) * px;   // px to nearest boundary
-    vec2 hw = 0.5 * u_gap * px;                           // line half-width in px
-    vec2 cov = clamp(min(hw, d + 0.5) - max(-hw, d - 0.5), 0.0, 1.0);
-    float m = 1.0 - (1.0 - cov.x) * (1.0 - cov.y);
-    color = toSrgb(mix(toLinear(color), toLinear(u_gapColor), m));
-  }
-  gl_FragColor = vec4(color, 1.0);
-}
-`;
-const pixelate = {
-	id: "pixelate",
-	label: "Pixelate",
-	fragment: DRAW_FRAGMENT$2,
-	grid: {
-		cell: (p) => [p.size, p.size],
-		fragment: CELL_FRAGMENT$3
-	},
-	params: [
-		{
-			key: "size",
-			label: "Size",
-			min: 2,
-			max: 160,
-			step: 1,
-			default: 24
-		},
-		{
-			key: "levels",
-			label: "Levels",
-			min: 0,
-			max: 16,
-			step: 1,
-			default: 0
-		},
-		{
-			key: "gap",
-			label: "Gap",
-			min: 0,
-			max: .4,
-			step: .01,
-			default: 0
-		},
-		{
-			key: "gapColor",
-			label: "Gap color",
-			type: "color",
-			default: "#000000"
-		}
-	],
-	randomParams(rand) {
-		return {
-			size: Math.round(10 + rand() * 50),
-			levels: rand() < .5 ? 0 : Math.round(3 + rand() * 5),
-			gap: rand() < .6 ? 0 : .05 + rand() * .15,
-			gapColor: "#000000"
-		};
-	}
-};
-
 //#endregion
 //#region src/effects/chunks.ts
 /** sRGB transfer functions. Blending and averaging must happen in linear
@@ -2608,8 +2520,7 @@ vec3 colorize(float tone, vec3 src) {
   return palette(tone);
 }
 `;
-/** The param defs that go with COLOR_MODE. `paperAlways` is for effects
-* where paper is a visible ground in every mode (ASCII, Halftone). */
+/** The param defs that go with COLOR_MODE. */
 function colorModeParams(opts) {
 	return [
 		{
@@ -2623,7 +2534,7 @@ function colorModeParams(opts) {
 				},
 				{
 					value: "duotone",
-					label: "Duotone"
+					label: opts.singleColour ? "Single colour" : "Duotone"
 				},
 				{
 					value: "palette",
@@ -2634,7 +2545,7 @@ function colorModeParams(opts) {
 		},
 		{
 			key: "ink",
-			label: "Ink",
+			label: opts.singleColour ? "Colour" : "Ink",
 			type: "color",
 			default: opts.ink ?? "#111111",
 			when: {
@@ -2647,10 +2558,10 @@ function colorModeParams(opts) {
 			label: "Paper",
 			type: "color",
 			default: opts.paper ?? "#f4f1ea",
-			...opts.paperAlways ? {} : { when: {
+			when: opts.paperWhen ?? {
 				key: "colorMode",
 				in: ["duotone"]
-			} }
+			}
 		},
 		{
 			key: "invert",
@@ -2660,6 +2571,341 @@ function colorModeParams(opts) {
 		}
 	];
 }
+/**
+* Blend modes, W3C Compositing and Blending Level 1, computed on
+* gamma-encoded sRGB like CSS and every image editor. b is the backdrop, s
+* the source (the mark or the filter's colour). Overlay is hard light with
+* the roles swapped. Color dodge: 0 where b is 0, else min(1, b / (1 - s)).
+*/
+const BLEND = `
+uniform float u_blend;
+vec3 blendScreen(vec3 b, vec3 s) { return b + s - b * s; }
+vec3 blendHardLight(vec3 b, vec3 s) {
+  return mix(b * 2.0 * s, blendScreen(b, 2.0 * s - 1.0), step(0.5, s));
+}
+vec3 blendSoftLight(vec3 b, vec3 s) {
+  vec3 d = mix(sqrt(b), ((16.0 * b - 12.0) * b + 4.0) * b, step(b, vec3(0.25)));
+  return mix(b - (1.0 - 2.0 * s) * b * (1.0 - b), b + (2.0 * s - 1.0) * (d - b), step(0.5, s));
+}
+vec3 blendColorDodge(vec3 b, vec3 s) {
+  return min(vec3(1.0), b / max(1.0 - s, vec3(1e-5))) * step(1e-5, b);
+}
+vec3 blendOf(vec3 b, vec3 s) {
+  if (u_blend < 0.5) return s;
+  if (u_blend < 1.5) return b * s;
+  if (u_blend < 2.5) return blendScreen(b, s);
+  if (u_blend < 3.5) return blendHardLight(s, b);
+  if (u_blend < 4.5) return blendSoftLight(b, s);
+  return blendColorDodge(b, s);
+}
+`;
+/** Draw stage: the layer below and the blend-then-fade composite. The
+* blended colour is faded in by coverage x opacity in linear light, so an
+* antialiased edge keeps its true weight. */
+const COMPOSITE = `
+uniform float u_opacity;
+uniform sampler2D u_picture;
+vec3 pictureAt(vec2 fc) { return texture2D(u_picture, fc / u_resolution).rgb; }
+vec3 compositeLinear(vec3 b, vec3 s, float a) {
+  return mix(toLinear(b), toLinear(blendOf(b, s)), clamp(a * u_opacity, 0.0, 1.0));
+}
+`;
+/** Mark effects: what the marks are drawn on. */
+const GROUND = `
+uniform float u_ground;
+vec3 backdropAt(vec2 fc) { return u_ground < 0.5 ? pictureAt(fc) : u_paper; }
+`;
+/** Filter effects (a whole replacement picture per cell) over the layer
+* below. Normal at full opacity hands the colour back untouched: no linear
+* round trip, so whole-pixel cells stay exact at 1080p and 4K. */
+const FILTER_COMPOSITE = `
+vec3 overPicture(vec3 s) {
+  if (u_blend < 0.5 && u_opacity >= 1.0) return s;
+  return toSrgb(compositeLinear(pictureAt(gl_FragCoord.xy), s, 1.0));
+}
+`;
+/**
+* Cell stage of a mark effect: the cell's tone becomes a mark strength in
+* 0..1. See SPEC-marks.md, Response.
+*
+* Direction: marks grow where they show. On an image ground a darkening
+* blend (multiply) grows them in the darks and every other blend in the
+* brights; on paper they grow away from the paper. Invert flips it.
+*
+* Motion multiplies the strength, so blank cells stay blank. Its angular
+* speed is snapped to whole cycles per loop and floored at one: it is the
+* effect's own motion, and freezing it on a short loop would read as broken.
+*
+* No shipped effect declares motion, motionSpeed or motionAmount yet (see
+* motionParams() below), so these uniforms are unset and read as 0: motion
+* is "none" and the strength above is unmodulated. The GLSL stays wired up
+* because motion ships later, once effects get a clock independent of the
+* source's own speed and pause; see SPEC-marks.md.
+*/
+const RESPONSE = `
+uniform float u_style;
+uniform float u_exposure;
+uniform float u_contrast;
+uniform float u_density;
+uniform float u_ground;
+uniform float u_blend;
+uniform float u_motion;
+uniform float u_motionSpeed;
+uniform float u_motionAmount;
+
+bool growsInBrights() {
+  if (u_ground > 0.5) return luma(u_paper) < 0.5;
+  return abs(u_blend - 1.0) > 0.5;
+}
+
+float motionAt(vec2 cell) {
+  if (u_motion < 0.5) return 0.0;
+  float w = TAU * u_motionSpeed;
+  if (u_loop > 0.0) w = TAU * max(1.0, floor(u_motionSpeed * u_loop + 0.5)) / u_loop;
+  float ph = w * u_time;
+  if (u_motion < 1.5) return sin(ph);
+  if (u_motion < 2.5) {
+    // 1.5 waves per frame height, travelling along a fixed diagonal.
+    vec2 pos = cell * u_cellRef / u_refSize.y;
+    return sin(ph - TAU * 1.5 * dot(pos, vec2(0.857, 0.514)));
+  }
+  return sin(ph + TAU * hash12(cell + 13.1));
+}
+
+float markStrength(vec3 c) {
+  float tone = u_style < 0.5 ? luma(c) : 0.5;
+  tone = clamp(tone * exp2(2.0 * u_exposure), 0.0, 1.0);
+  float s = growsInBrights() ? tone : 1.0 - tone;
+  if (u_invert > 0.5) s = 1.0 - s;
+  s = clamp((s - 0.5) * u_contrast + 0.5, 0.0, 1.0);
+  s = clamp(s * (1.0 + u_motionAmount * motionAt(cellIndex())), 0.0, 1.0);
+  if (hash12(cellIndex() + vec2(71.3, 19.7)) >= u_density) s = 0.0;
+  return s;
+}
+`;
+/** Append only: the uniform is the option's index. */
+const BLEND_OPTIONS = [
+	{
+		value: "normal",
+		label: "Normal"
+	},
+	{
+		value: "multiply",
+		label: "Multiply"
+	},
+	{
+		value: "screen",
+		label: "Screen"
+	},
+	{
+		value: "overlay",
+		label: "Overlay"
+	},
+	{
+		value: "softLight",
+		label: "Soft light"
+	},
+	{
+		value: "colorDodge",
+		label: "Color dodge"
+	}
+];
+function blendParams(d) {
+	return [{
+		key: "blend",
+		label: "Blend",
+		type: "enum",
+		options: BLEND_OPTIONS,
+		default: d.blend
+	}, {
+		key: "opacity",
+		label: "Opacity",
+		min: 0,
+		max: 1,
+		step: .01,
+		default: d.opacity
+	}];
+}
+function groundParams(d) {
+	return [
+		{
+			key: "ground",
+			label: "Ground",
+			type: "enum",
+			options: [{
+				value: "image",
+				label: "Image"
+			}, {
+				value: "paper",
+				label: "Paper"
+			}],
+			default: d.ground
+		},
+		...blendParams(d),
+		{
+			key: "blur",
+			label: "Blur",
+			min: 0,
+			max: 40,
+			step: .5,
+			default: 0,
+			when: {
+				key: "ground",
+				in: ["image"]
+			}
+		}
+	];
+}
+function responseParams(d) {
+	return [
+		{
+			key: "style",
+			label: "Style",
+			type: "enum",
+			options: [{
+				value: "filled",
+				label: "Filled"
+			}, {
+				value: "uniform",
+				label: "Uniform"
+			}],
+			default: "filled"
+		},
+		{
+			key: "exposure",
+			label: "Exposure",
+			min: -1,
+			max: 1,
+			step: .01,
+			default: 0
+		},
+		{
+			key: "contrast",
+			label: "Contrast",
+			min: 0,
+			max: 2,
+			step: .01,
+			default: d.contrast
+		},
+		{
+			key: "density",
+			label: "Density",
+			min: 0,
+			max: 1,
+			step: .01,
+			default: 1
+		}
+	];
+}
+/** grid.picture for mark effects. A paper ground never reads the picture,
+* so it gets none; blur only applies to an image ground. */
+function groundPicture(p) {
+	return p.ground === "image" ? { blur: p.blur } : null;
+}
+/** grid.picture for filter effects (pixelate, dither). Normal at full
+* opacity replaces the picture outright (FILTER_COMPOSITE), so it is not
+* read and the stack skips rendering it. */
+function filterPicture(p) {
+	return p.blend === "normal" && p.opacity >= 1 ? null : { blur: 0 };
+}
+
+//#endregion
+//#region src/effects/pixelate.ts
+const CELL_FRAGMENT$3 = `
+uniform float u_levels;
+
+void main() {
+  vec3 c = cellSource().rgb;
+  // Posterize per channel. Rounds to the nearest level, so black and white
+  // stay put. levels = 1 would divide by zero and means nothing; 0 is "off".
+  if (u_levels >= 2.0) {
+    float n = u_levels - 1.0;
+    c = floor(c * n + 0.5) / n;
+  }
+  gl_FragColor = vec4(c, 1.0);
+}
+`;
+const DRAW_FRAGMENT$3 = `
+uniform float u_gap;
+uniform vec3 u_gapColor;
+${BLEND}
+${COMPOSITE}
+${FILTER_COMPOSITE}
+
+void main() {
+  vec3 color = coverage();
+  if (u_gap > 0.0) {
+    // A gap line is u_gap of a cell wide, centred on every cell boundary.
+    // Its weight is the exact share of this output pixel it covers, and the
+    // blend happens in linear light, for the same reason coverage() works
+    // that way: a smoothstep edge in gamma space draws sub-pixel lines far
+    // too heavy, so a small preview would look darker than its own export.
+    vec2 px = cellPx();
+    vec2 d = min(cellLocal(), 1.0 - cellLocal()) * px;   // px to nearest boundary
+    vec2 hw = 0.5 * u_gap * px;                           // line half-width in px
+    vec2 cov = clamp(min(hw, d + 0.5) - max(-hw, d - 0.5), 0.0, 1.0);
+    float m = 1.0 - (1.0 - cov.x) * (1.0 - cov.y);
+    color = toSrgb(mix(toLinear(color), toLinear(u_gapColor), m));
+  }
+  gl_FragColor = vec4(overPicture(color), 1.0);
+}
+`;
+const pixelate = {
+	id: "pixelate",
+	label: "Pixelate",
+	fragment: DRAW_FRAGMENT$3,
+	grid: {
+		cell: (p) => [p.size, p.size],
+		fragment: CELL_FRAGMENT$3,
+		picture: filterPicture
+	},
+	params: [
+		{
+			key: "size",
+			label: "Size",
+			min: 2,
+			max: 160,
+			step: 1,
+			default: 13
+		},
+		{
+			key: "levels",
+			label: "Levels",
+			min: 0,
+			max: 16,
+			step: 1,
+			default: 0
+		},
+		{
+			key: "gap",
+			label: "Gap",
+			min: 0,
+			max: .4,
+			step: .01,
+			default: .08
+		},
+		{
+			key: "gapColor",
+			label: "Gap color",
+			type: "color",
+			default: "#000000"
+		},
+		...blendParams({
+			blend: "normal",
+			opacity: 1
+		})
+	],
+	randomParams(rand) {
+		return {
+			size: Math.round(10 + rand() * 50),
+			levels: rand() < .5 ? 0 : Math.round(3 + rand() * 5),
+			gap: rand() < .6 ? 0 : .05 + rand() * .15,
+			gapColor: "#000000",
+			blend: "normal",
+			opacity: 1
+		};
+	}
+};
 
 //#endregion
 //#region src/effects/blueNoise.ts
@@ -2750,12 +2996,23 @@ void main() {
   gl_FragColor = vec4(color, 1.0);
 }
 `;
+/** Coverage upscale, then over the picture (FILTER_COMPOSITE). */
+const DRAW_FRAGMENT$2 = `
+${BLEND}
+${COMPOSITE}
+${FILTER_COMPOSITE}
+void main() {
+  gl_FragColor = vec4(overPicture(coverage()), 1.0);
+}
+`;
 const dither = {
 	id: "dither",
 	label: "Dither",
+	fragment: DRAW_FRAGMENT$2,
 	grid: {
 		cell: (p) => [p.size, p.size],
-		fragment: CELL_FRAGMENT$2
+		fragment: CELL_FRAGMENT$2,
+		picture: filterPicture
 	},
 	textures: [{
 		uniform: "u_noise",
@@ -2833,7 +3090,15 @@ const dither = {
 			step: 1,
 			default: 0
 		},
-		...colorModeParams({ mode: "source" })
+		...colorModeParams({
+			mode: "duotone",
+			ink: "#000000",
+			paper: "#ffffff"
+		}),
+		...blendParams({
+			blend: "screen",
+			opacity: .6
+		})
 	],
 	randomParams(rand) {
 		const patterns = [
@@ -2847,7 +3112,13 @@ const dither = {
 			"duotone",
 			"palette"
 		];
-		return {
+		const blends = [
+			"normal",
+			"screen",
+			"overlay",
+			"softLight"
+		];
+		const p = {
 			pattern: patterns[Math.floor(rand() * patterns.length)],
 			size: Math.round(2 + rand() * 6),
 			levels: Math.round(2 + rand() * 3),
@@ -2857,8 +3128,15 @@ const dither = {
 			colorMode: modes[Math.floor(rand() * modes.length)],
 			ink: "#111111",
 			paper: "#f4f1ea",
-			invert: false
+			invert: false,
+			blend: blends[Math.floor(rand() * blends.length)],
+			opacity: .6 + rand() * .4
 		};
+		if (p.blend === "screen" || p.blend === "colorDodge") {
+			p.ink = "#000000";
+			p.paper = "#ffffff";
+		}
+		return p;
 	}
 };
 
@@ -2866,26 +3144,27 @@ const dither = {
 //#region src/effects/halftone.ts
 const ROW = .8660254;
 const CELL_FRAGMENT$1 = `
-uniform float u_contrast;
 ${COLOR_MODE}
+${RESPONSE}
 
 void main() {
   vec3 sc = cellSource().rgb;
+  float ink = markStrength(sc);
 
-  // Ink amount. Halftone sizes its shapes by brightness in every color mode,
-  // so this is luma even where toneOf() would return a ramp position.
-  float tone = luma(sc);
-  if (u_invert > 0.5) tone = 1.0 - tone;
-  float ink = clamp((1.0 - tone - 0.5) * u_contrast + 0.5, 0.0, 1.0);
-
-  // Ink color. Duotone inks every shape with u_ink (colorize() would mix
-  // toward paper by tone, which is dither's meaning of duotone). Palette
-  // inks each dot with the nearest palette STOP to the un-inverted tone, so
-  // Invert flips sizes and leaves colors, and the dots are flat palette
-  // colors rather than a copy of the source.
+  // Ink color. Duotone inks every shape with u_ink. Palette inks each dot
+  // with the nearest palette STOP to the un-inverted tone, so Invert flips
+  // sizes and leaves colors, and the dots are flat palette colors rather
+  // than a copy of the source.
   vec3 color = sc;
   if (u_colorMode > 1.5) color = paletteStop(toneIsRamp() ? rampPosition(sc) : luma(sc));
   else if (u_colorMode > 0.5) color = u_ink;
+  else if (u_ground < 0.5) {
+    // Over the picture, a shape in the picture's own colour blends into
+    // itself and vanishes. Lift it most of the way to full brightness, as
+    // ASCII does, so it reads as a vivid version of what is under it.
+    float peak = max(max(sc.r, sc.g), max(sc.b, 1e-3));
+    color = mix(sc, sc / peak, 0.75);
+  }
 
   gl_FragColor = vec4(color, ink);
 }
@@ -2895,8 +3174,10 @@ uniform float u_grid;
 uniform float u_shape;
 uniform float u_radius;
 uniform float u_softness;
-uniform float u_pulse;
 ${COLOR_MODE}
+${BLEND}
+${COMPOSITE}
+${GROUND}
 
 const float ROW = ${ROW};
 
@@ -2905,9 +3186,10 @@ vec4 lattice(vec2 k) {
   return texture2D(u_cells, (kk + 0.5) / u_gridSize);
 }
 
-// The shape covering lattice coordinate g most, blended over paper, in
-// linear light. \`aa\` is the width, in lattice units, edges are ramped over.
-vec3 shade(vec2 g, float aa, float w) {
+// The shape covering lattice coordinate g most, composited onto backdrop b
+// (sRGB), returned in linear light. \`aa\` is the width, in lattice units,
+// edges are ramped over.
+vec3 shade(vec2 g, float aa, vec3 b) {
   bool hex = u_grid > 0.5;
   bool line = u_shape > 0.5 && u_shape < 1.5;
   // Texel units -> lattice units (1 = the pitch the user set as Size).
@@ -2930,8 +3212,7 @@ vec3 shade(vec2 g, float aa, float w) {
       float kl = stride * floor((g.x - 0.5 - par) / stride) + par;
       float f = (g.x - 0.5 - kl) / stride;
       vec4 v = mix(lattice(vec2(kl, j)), lattice(vec2(kl + stride, j)), f);
-      float swell = 1.0 + 0.25 * u_pulse * sin(w * u_time + 0.22 * (j - 0.5 * u_gridSize.y) + u_seed);
-      float extent = min(0.5 * v.a * unit.y * u_radius * swell, 1.0);
+      float extent = min(0.5 * v.a * unit.y * u_radius, 1.0);
       float ramp = aa + u_softness * extent;
       float mask = extent <= 0.0 ? 0.0 : clamp((extent - abs(dy)) / ramp + 0.5, 0.0, 1.0);
       if (mask > bestMask) { bestMask = mask; bestInk = v.rgb; }
@@ -2943,20 +3224,23 @@ vec3 shade(vec2 g, float aa, float w) {
       vec2 k = vec2(k0 + stride * float(di), j);
       vec4 v = lattice(k);
       vec2 d = vec2((g.x - (k.x + 0.5)) * unit.x, dy);
-      vec2 id = k - 0.5 * u_gridSize;
-      float swell = 1.0 + 0.25 * u_pulse * sin(w * u_time + dot(id * unit, vec2(0.35, 0.22)) + u_seed);
-
       float dist;
       float extent;
+      // On paper, shape AREA follows ink: the print rule that reproduces
+      // tone. Over the picture there is no tone to reproduce, and area
+      // sizing squeezes the visible size range (half the ink is still 71%
+      // of the full width), so there the width follows strength directly:
+      // empty cells stay empty and full ones fill.
+      float grow = u_ground < 0.5 ? v.a : sqrt(v.a);
       if (u_shape < 0.5) {
         // Dot: area pi * rho^2 out of a cell of area 1 (square) or ROW (hex).
         dist = length(d);
-        extent = sqrt(v.a * (hex ? ROW : 1.0) / 3.14159265);
+        extent = grow * sqrt((hex ? ROW : 1.0) / 3.14159265);
       } else {
         dist = max(abs(d.x), abs(d.y));
-        extent = 0.5 * sqrt(v.a);
+        extent = 0.5 * grow;
       }
-      extent = min(extent * u_radius * swell, 1.0);
+      extent = min(extent * u_radius, 1.0);
 
       // Coverage of a straight edge by a box is linear in the distance to
       // it. Softness widens that ramp into a blur.
@@ -2965,22 +3249,12 @@ vec3 shade(vec2 g, float aa, float w) {
       if (mask > bestMask) { bestMask = mask; bestInk = v.rgb; }
     }
   }
-  return mix(toLinear(u_paper), toLinear(bestInk), bestMask);
+  return compositeLinear(b, bestInk, bestMask);
 }
 
 void main() {
   float pitchRef = u_grid > 0.5 ? u_cellRef.x * 2.0 : u_cellRef.x;
-  // One output pixel, in lattice units.
   float px = 1.0 / (pitchRef * u_outputScale);
-
-  // Pulse: every shape swells and shrinks, phase-shifted across the lattice
-  // so the swell travels through the frame instead of throbbing in lockstep.
-  // Snapped to whole cycles per loop and floored at one: unlike a generator's
-  // slow secondary swell, this is the effect's only motion, so freezing it at
-  // short loops (loopFreq's choice) would read as the knob being broken.
-  float w = 0.8;
-  if (u_loop > 0.0) w = TAU * max(1.0, floor(w * u_loop / TAU + 0.5)) / u_loop;
-
   // Supersampled: n x n samples per pixel, each ramping its edges over 1/n
   // of a pixel. One sample with a one-pixel linear ramp is exact only for a
   // straight edge parallel to the pixel grid; on a 5px preview dot every
@@ -2995,8 +3269,8 @@ void main() {
   for (int sy = 0; sy < 4; sy++) {
     for (int sx = 0; sx < 4; sx++) {
       if (float(sx) >= n || float(sy) >= n) continue;
-      vec2 o = (vec2(float(sx), float(sy)) + 0.5) / n - 0.5;
-      acc += shade(cellCoordAt(gl_FragCoord.xy + o), px / n, w);
+      vec2 fc = gl_FragCoord.xy + (vec2(float(sx), float(sy)) + 0.5) / n - 0.5;
+      acc += shade(cellCoordAt(fc), px / n, backdropAt(fc));
     }
   }
   gl_FragColor = vec4(toSrgb(acc / (n * n)), 1.0);
@@ -3013,9 +3287,15 @@ const halftone = {
 	grid: {
 		cell: cellOf$1,
 		lattice: (p) => ({ angle: p.angle }),
+		picture: groundPicture,
 		fragment: CELL_FRAGMENT$1
 	},
 	params: [
+		...groundParams({
+			ground: "image",
+			blend: "screen",
+			opacity: 1
+		}),
 		{
 			key: "grid",
 			label: "Grid",
@@ -3047,7 +3327,7 @@ const halftone = {
 					label: "Square"
 				}
 			],
-			default: "dot"
+			default: "square"
 		},
 		{
 			key: "size",
@@ -3055,7 +3335,7 @@ const halftone = {
 			min: 6,
 			max: 160,
 			step: .5,
-			default: 10
+			default: 20
 		},
 		{
 			key: "angle",
@@ -3071,7 +3351,7 @@ const halftone = {
 			min: .2,
 			max: 1.5,
 			step: .01,
-			default: 1.4
+			default: .75
 		},
 		{
 			key: "softness",
@@ -3081,25 +3361,14 @@ const halftone = {
 			step: .01,
 			default: .1
 		},
-		{
-			key: "contrast",
-			label: "Contrast",
-			min: 0,
-			max: 2,
-			step: .01,
-			default: 1.15
-		},
-		{
-			key: "pulse",
-			label: "Pulse",
-			min: 0,
-			max: 1,
-			step: .01,
-			default: 0
-		},
+		...responseParams({ contrast: 1.15 }),
 		...colorModeParams({
-			mode: "palette",
-			paperAlways: true
+			mode: "source",
+			paperWhen: {
+				key: "ground",
+				in: ["paper"]
+			},
+			singleColour: true
 		})
 	],
 	randomParams(rand) {
@@ -3114,17 +3383,34 @@ const halftone = {
 			"duotone",
 			"palette"
 		];
+		const ground = rand() < .8 ? "image" : "paper";
+		const blends = ground === "paper" ? ["normal", "multiply"] : [
+			"normal",
+			"multiply",
+			"screen",
+			"screen",
+			"overlay",
+			"softLight",
+			"colorDodge"
+		];
+		const blend = blends[Math.floor(rand() * blends.length)];
 		return {
+			ground,
+			blend,
+			opacity: .6 + rand() * .4,
+			blur: 0,
 			grid: rand() < .5 ? "square" : "hex",
 			shape: shapes[Math.floor(rand() * shapes.length)],
 			size: Math.round(8 + rand() * 30),
 			angle: Math.round(rand() * 180),
-			radius: 1.2 + rand() * .3,
+			radius: .7 + rand() * .7,
 			softness: rand() < .7 ? .1 : rand() * .5,
+			style: "filled",
+			exposure: 0,
 			contrast: 1.15,
-			pulse: 0,
+			density: 1,
 			colorMode: modes[Math.floor(rand() * modes.length)],
-			ink: "#111111",
+			ink: blend === "screen" || blend === "colorDodge" ? "#ffffff" : "#111111",
 			paper: "#f4f1ea",
 			invert: false
 		};
@@ -3362,11 +3648,13 @@ uniform float u_cycleAmount;
 uniform float u_glyphCount;
 uniform sampler2D u_lut;
 ${COLOR_MODE}
+${RESPONSE}
 
 void main() {
   vec3 sc = cellSource().rgb;
-  float tone = luma(sc);
-  if (u_invert > 0.5) tone = 1.0 - tone;
+  // Glyph weight is the shared mark strength: a stronger mark is a denser
+  // glyph, and a cell the density knob empties gets the blank glyph.
+  float tone = markStrength(sc);
 
   // The lookup places glyphs by measured ink coverage: R = the glyph just
   // below this tone, G = the one just above, B = how far between them.
@@ -3380,13 +3668,22 @@ void main() {
   float t = u_smooth > 0.5 ? 0.02 + 0.96 * hash12(cellIndex() + 0.5) : 0.5;
   float glyph = l.b > t ? hi : lo;
 
-  // Cycle: every step each cell re-rolls its glyph among neighbours of
-  // similar weight, so the picture flickers but stays readable. Blank cells
+  // Cycle: every step a share of the cells re-rolls its glyph among
+  // neighbours of similar weight, so the picture flickers but stays
+  // readable. cycleAmount is that share, and also how far a cell may move
+  // (one glyph at small amounts, up to a quarter of the set at 1): a small
+  // amount must flicker a few cells, not round every move down to nothing,
+  // which is what a pure distance scale did on a 10-glyph set. Blank cells
   // stay blank, or dark areas would fill with sparks.
   if (u_cycle > 0.0 && glyph > 0.5) {
-    float h = hash12(cellIndex() + vec2(37.0, 17.0) * loopStep(u_cycle) + u_seed);
-    float span = u_cycleAmount * u_glyphCount * 0.25;
-    glyph = clamp(glyph + floor((h * 2.0 - 1.0) * span + 0.5), 1.0, u_glyphCount - 1.0);
+    float st = loopStep(u_cycle);
+    float pick = hash12(cellIndex() + vec2(11.0, 53.0) * st + u_seed + 3.1);
+    if (pick < u_cycleAmount) {
+      float h = hash12(cellIndex() + vec2(37.0, 17.0) * st + u_seed);
+      float reach = max(1.0, floor(u_cycleAmount * u_glyphCount * 0.25));
+      float move = (h < 0.5 ? -1.0 : 1.0) * (1.0 + floor(fract(h * 2.0) * reach));
+      glyph = clamp(glyph + move, 1.0, u_glyphCount - 1.0);
+    }
   }
 
   // Glyph color. Tone already lives in the glyph's density, so source colors
@@ -3412,6 +3709,9 @@ uniform vec2 u_atlasGrid;    // glyph columns, rows
 uniform vec2 u_atlasSize;    // atlas size in texels
 uniform vec2 u_glyphPx;      // one glyph's size in atlas texels (without gutter)
 ${COLOR_MODE}
+${BLEND}
+${COMPOSITE}
+${GROUND}
 
 void main() {
   vec4 cell = cellValue(cellIndexAt());
@@ -3440,8 +3740,7 @@ void main() {
   }
   a /= n * n;
 
-  vec3 color = toSrgb(mix(toLinear(u_paper), toLinear(cell.rgb), a));
-  gl_FragColor = vec4(color, 1.0);
+  gl_FragColor = vec4(toSrgb(compositeLinear(backdropAt(gl_FragCoord.xy), cell.rgb, a)), 1.0);
 }
 `;
 function cellOf(p) {
@@ -3457,7 +3756,8 @@ const ascii = {
 	fragment: DRAW_FRAGMENT,
 	grid: {
 		cell: cellOf,
-		fragment: CELL_FRAGMENT
+		fragment: CELL_FRAGMENT,
+		picture: groundPicture
 	},
 	textures: [{
 		uniform: "u_atlas",
@@ -3477,6 +3777,11 @@ const ascii = {
 		})
 	}],
 	params: [
+		...groundParams({
+			ground: "image",
+			blend: "colorDodge",
+			opacity: 1
+		}),
 		{
 			key: "charset",
 			label: "Characters",
@@ -3515,7 +3820,7 @@ const ascii = {
 			min: 8,
 			max: 96,
 			step: 1,
-			default: 24
+			default: 10
 		},
 		{
 			key: "smooth",
@@ -3529,7 +3834,7 @@ const ascii = {
 			min: 0,
 			max: 12,
 			step: 1,
-			default: 0
+			default: 2
 		},
 		{
 			key: "cycleAmount",
@@ -3537,13 +3842,18 @@ const ascii = {
 			min: 0,
 			max: 1,
 			step: .01,
-			default: .3
+			default: .2
 		},
+		...responseParams({ contrast: 1.2 }),
 		...colorModeParams({
 			mode: "source",
 			ink: "#e8ffe8",
 			paper: "#000000",
-			paperAlways: true
+			paperWhen: {
+				key: "ground",
+				in: ["paper"]
+			},
+			singleColour: true
 		})
 	],
 	randomParams(rand) {
@@ -3559,12 +3869,28 @@ const ascii = {
 			"duotone",
 			"palette"
 		];
+		const ground = rand() < .8 ? "image" : "paper";
+		const blends = ground === "paper" ? ["normal"] : [
+			"normal",
+			"screen",
+			"screen",
+			"overlay",
+			"colorDodge"
+		];
 		return {
+			ground,
+			blend: blends[Math.floor(rand() * blends.length)],
+			opacity: .7 + rand() * .3,
+			blur: 0,
 			charset: sets[Math.floor(rand() * sets.length)],
 			size: Math.round(14 + rand() * 30),
 			smooth: true,
-			cycle: 0,
-			cycleAmount: .3,
+			cycle: 2,
+			cycleAmount: .2,
+			style: "filled",
+			exposure: 0,
+			contrast: 1,
+			density: 1,
 			colorMode: modes[Math.floor(rand() * modes.length)],
 			ink: "#e8ffe8",
 			paper: "#000000",
@@ -3573,6 +3899,77 @@ const ascii = {
 	}
 };
 
+//#endregion
+//#region src/effects/tint.ts
+const FRAGMENT = `
+uniform float u_mode;
+uniform vec3 u_dark;
+uniform vec3 u_light;
+uniform float u_amount;
+void main() {
+  vec3 c = source(v_uv).rgb;
+  float t = luma(c);
+  vec3 mapped = u_mode < 0.5 ? mix(u_dark, u_light, t) : palette(t);
+  gl_FragColor = vec4(toSrgb(mix(toLinear(c), toLinear(mapped), u_amount)), 1.0);
+}
+`;
+const tint = {
+	id: "tint",
+	label: "Tint",
+	fragment: FRAGMENT,
+	params: [
+		{
+			key: "mode",
+			label: "Mode",
+			type: "enum",
+			options: [{
+				value: "duotone",
+				label: "Duotone"
+			}, {
+				value: "palette",
+				label: "Palette"
+			}],
+			default: "duotone"
+		},
+		{
+			key: "dark",
+			label: "Dark",
+			type: "color",
+			default: "#1b1a4a",
+			when: {
+				key: "mode",
+				in: ["duotone"]
+			}
+		},
+		{
+			key: "light",
+			label: "Light",
+			type: "color",
+			default: "#f2c6a0",
+			when: {
+				key: "mode",
+				in: ["duotone"]
+			}
+		},
+		{
+			key: "amount",
+			label: "Amount",
+			min: 0,
+			max: 1,
+			step: .01,
+			default: 1
+		}
+	],
+	randomParams(rand) {
+		return {
+			mode: rand() < .5 ? "duotone" : "palette",
+			dark: "#1b1a4a",
+			light: "#f2c6a0",
+			amount: .6 + rand() * .4
+		};
+	}
+};
+
 //#endregion
 //#region src/registry.ts
 const shaders = [
@@ -3598,7 +3995,8 @@ const effects = [
 	pixelate,
 	dither,
 	halftone,
-	ascii
+	ascii,
+	tint
 ];
 function getEffect(id) {
 	return effects.find((e) => e.id === id);
@@ -4196,6 +4594,41 @@ function resolveParams(def, overrides) {
 
 //#endregion
 //#region src/stack.ts
+/** Backdrop blur, pass 1: box-average the frame down by k (4x4 LINEAR taps
+* spread over one small texel). */
+const BLUR_DOWN_FRAGMENT = `
+uniform sampler2D u_source;
+uniform vec2 u_span;
+void main() {
+  vec3 acc = vec3(0.0);
+  for (int j = 0; j < 4; j++) {
+    for (int i = 0; i < 4; i++) {
+      vec2 o = ((vec2(float(i), float(j)) + 0.5) / 4.0 - 0.5) * u_span;
+      acc += toLinear(texture2D(u_source, v_uv + o).rgb);
+    }
+  }
+  gl_FragColor = vec4(toSrgb(acc / 16.0), 1.0);
+}
+`;
+/** Backdrop blur, passes 2 and 3: one axis of a 25-tap Gaussian, in linear
+* light. Sigma is at most 4 small texels (below 2 only when blurPx < 2),
+* so +-12 taps reach 3 sigma. */
+const BLUR_PASS_FRAGMENT = `
+uniform sampler2D u_source;
+uniform vec2 u_step;
+uniform float u_sigma;
+void main() {
+  vec3 acc = vec3(0.0);
+  float wsum = 0.0;
+  for (int i = -12; i <= 12; i++) {
+    float x = float(i);
+    float w = exp(-0.5 * x * x / (u_sigma * u_sigma));
+    acc += w * toLinear(texture2D(u_source, v_uv + x * u_step).rgb);
+    wsum += w;
+  }
+  gl_FragColor = vec4(toSrgb(acc / wsum), 1.0);
+}
+`;
 const QUAD_VERTICES = new Float32Array([
 	-1,
 	-1,
@@ -4447,6 +4880,69 @@ function createStackRenderer(opts) {
 		}
 		cellTargetsUsed.clear();
 	}
+	const blurTargets = /* @__PURE__ */ new Map();
+	const blurTargetsUsed = /* @__PURE__ */ new Set();
+	let blurDownProgram = null;
+	let blurPassProgram = null;
+	/**
+	* `input` blurred by `blurRef` reference px. Done at 1/k resolution with
+	* k chosen so sigma is at most 4 small texels (below 2 only when blurPx
+	* < 2, where k floors to 1): the cost is the same at every output size,
+	* and the small target is ~2 * ref / blur texels whatever the output
+	* scale, so preview and export blur alike.
+	*/
+	function blurred(input, blurRef) {
+		const blurPx = blurRef * outputScale(canvas.width, canvas.height);
+		const k = Math.max(1, Math.floor(blurPx / 2));
+		const w = Math.max(1, Math.round(canvas.width / k));
+		const h = Math.max(1, Math.round(canvas.height / k));
+		const key = `${w}x${h}`;
+		blurTargetsUsed.add(key);
+		let pair = blurTargets.get(key);
+		if (!pair) {
+			pair = [createTarget(gl, w, h, "linear"), createTarget(gl, w, h, "linear")];
+			blurTargets.set(key, pair);
+		}
+		const [a, b] = pair;
+		blurDownProgram ??= createProgram(gl, VERTEX_SHADER, BASE_UNIFORMS + COLOR_MATH + BLUR_DOWN_FRAGMENT);
+		blurPassProgram ??= createProgram(gl, VERTEX_SHADER, BASE_UNIFORMS + COLOR_MATH + BLUR_PASS_FRAGMENT);
+		bindOutput(a);
+		useProgram(blurDownProgram, [w, h]);
+		bindTexture(1, input.texture);
+		gl.uniform1i(blurDownProgram.loc("u_source"), 1);
+		gl.uniform2f(blurDownProgram.loc("u_span"), k / canvas.width, k / canvas.height);
+		draw();
+		const passes = [[
+			a,
+			b,
+			1 / w,
+			0
+		], [
+			b,
+			a,
+			0,
+			1 / h
+		]];
+		for (const [src, dst, dx, dy] of passes) {
+			bindOutput(dst);
+			useProgram(blurPassProgram, [w, h]);
+			bindTexture(1, src.texture);
+			gl.uniform1i(blurPassProgram.loc("u_source"), 1);
+			gl.uniform2f(blurPassProgram.loc("u_step"), dx, dy);
+			gl.uniform1f(blurPassProgram.loc("u_sigma"), blurPx / k);
+			draw();
+		}
+		return a;
+	}
+	function pruneBlurTargets() {
+		for (const [key, pair] of blurTargets) {
+			if (blurTargetsUsed.has(key)) continue;
+			deleteTarget(gl, pair[0]);
+			deleteTarget(gl, pair[1]);
+			blurTargets.delete(key);
+		}
+		blurTargetsUsed.clear();
+	}
 	let timeSec = 0;
 	function bindOutput(target) {
 		gl.bindFramebuffer(gl.FRAMEBUFFER, target ? target.framebuffer : null);
@@ -4639,7 +5135,6 @@ function createStackRenderer(opts) {
 		let input = null;
 		active.forEach((state, i) => {
 			const last = i === active.length - 1;
-			const outIndex = input === frameTargets[0] ? 1 : 0;
 			const overGenerator = input === null && source.kind === "generator";
 			syncTextures(state);
 			if (state.def.grid) {
@@ -4647,6 +5142,15 @@ function createStackRenderer(opts) {
 				const [cellIn, cellOut] = cellTargetPair(grid);
 				if (input === null) renderSourceToCells(grid, cellIn);
 				else downsampleToCells(input, grid, cellIn);
+				const pic = state.def.grid.picture;
+				const want = pic === true ? { blur: 0 } : pic ? pic(state.params) : null;
+				if (want && input === null) {
+					input = frameTarget(0);
+					renderSourceToFrame(input);
+				}
+				let picture = want ? input : null;
+				if (picture && want && want.blur > 0) picture = blurred(picture, want.blur);
+				const outIndex = input === frameTargets[0] ? 1 : 0;
 				const cellProgram = state.cell;
 				bindOutput(cellOut);
 				useProgram(cellProgram, frameSize);
@@ -4661,6 +5165,10 @@ function createStackRenderer(opts) {
 				applyEffectUniforms(drawProgram, state, grid, overGenerator);
 				bindTexture(2, cellOut.texture);
 				gl.uniform1i(drawProgram.loc("u_cells"), 2);
+				if (picture) {
+					bindTexture(1, picture.texture);
+					gl.uniform1i(drawProgram.loc("u_picture"), 1);
+				}
 				draw();
 				input = out;
 			} else {
@@ -4680,6 +5188,7 @@ function createStackRenderer(opts) {
 			}
 		});
 		pruneCellTargets();
+		pruneBlurTargets();
 	}
 	function dispose() {
 		for (const state of layers) disposeLayer(state);
@@ -4688,6 +5197,8 @@ function createStackRenderer(opts) {
 		mediaFrameProgram?.dispose();
 		mediaCellProgram?.dispose();
 		downsampleProgram?.dispose();
+		blurDownProgram?.dispose();
+		blurPassProgram?.dispose();
 		deleteTarget(gl, frameTargets[0]);
 		deleteTarget(gl, frameTargets[1]);
 		frameTargets = [null, null];
@@ -4696,6 +5207,11 @@ function createStackRenderer(opts) {
 			deleteTarget(gl, pair[1]);
 		}
 		cellTargets.clear();
+		for (const pair of blurTargets.values()) {
+			deleteTarget(gl, pair[0]);
+			deleteTarget(gl, pair[1]);
+		}
+		blurTargets.clear();
 		gl.deleteTexture(mediaTexture);
 		gl.deleteTexture(paletteTexture);
 		gl.deleteBuffer(quadBuffer);
@@ -5024,4 +5540,4 @@ function createRenderer(opts) {
 }
 
 //#endregion
-export { ascii, beam, bloom, buildPaletteRamp, burst, createRenderer, createStackRenderer, dither, dune, effects, flow, getEffect, getShader, glint, gridFor, halftone, halo, mountGradient, mountStack, nacre, pixelate, renderGradientFrame, renderStackFrame, shaders, silk, strata, whorl };
+export { ascii, beam, bloom, buildPaletteRamp, burst, createRenderer, createStackRenderer, dither, dune, effects, flow, getEffect, getShader, glint, gridFor, halftone, halo, mountGradient, mountStack, nacre, pixelate, renderGradientFrame, renderStackFrame, shaders, silk, strata, tint, whorl };