instantshader 0.6.1 → 0.8.0

package/dist/index.js

@@ -254,7 +254,7 @@ vec2 seedOffset() {
 
 //#endregion
 //#region src/shaders/flow.ts
-const FRAGMENT$6 = `
+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$6,
+	fragment: FRAGMENT$11,
 	params: [
 		{
 			key: "scale",
@@ -447,7 +447,7 @@ const flow = {
 
 //#endregion
 //#region src/shaders/beam.ts
-const FRAGMENT$5 = `
+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$5,
+	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$4 = `
+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$4,
+	fragment: FRAGMENT$9,
 	params: [
 		{
 			key: "scale",
@@ -990,7 +990,7 @@ const bloom = {
 
 //#endregion
 //#region src/shaders/halo.ts
-const FRAGMENT$3 = `
+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$3,
+	fragment: FRAGMENT$8,
 	params: [
 		{
 			key: "radius",
@@ -1178,7 +1178,7 @@ const halo = {
 
 //#endregion
 //#region src/shaders/strata.ts
-const FRAGMENT$2 = `
+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$2,
+	fragment: FRAGMENT$7,
 	params: [
 		{
 			key: "scale",
@@ -1375,7 +1375,7 @@ const strata = {
 
 //#endregion
 //#region src/shaders/dune.ts
-const FRAGMENT$1 = `
+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$1,
+	fragment: FRAGMENT$6,
 	params: [
 		{
 			key: "layers",
@@ -1526,7 +1526,7 @@ const dune = {
 
 //#endregion
 //#region src/shaders/whorl.ts
-const FRAGMENT = `
+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,
+	fragment: FRAGMENT$5,
 	params: [
 		{
 			key: "blades",
@@ -1619,7 +1619,7 @@ const whorl = {
 			min: 0,
 			max: 1,
 			step: .01,
-			default: .4
+			default: 0
 		},
 		{
 			key: "x",
@@ -1661,89 +1661,641 @@ const whorl = {
 };
 
 //#endregion
-//#region src/effects/pixelate.ts
-const CELL_FRAGMENT$3 = `
-uniform float u_levels;
+//#region src/shaders/silk.ts
+const FRAGMENT$4 = `
+uniform float u_scale;
+uniform float u_folds;
+uniform float u_depth;
+uniform float u_warp;
+uniform float u_sheen;
+uniform float u_light;
+uniform float u_grain;
+
+${SIMPLEX_2D}
+${FBM}
+${SHAPE}
+${GRAIN}
+${ISO}
+${SEED}
+
+const float PI = 3.14159265;
+
+vec2 toField(vec2 v, vec2 axis) {
+  return vec2(dot(v, axis) / (1.0 + 4.0 * u_folds), dot(v, vec2(-axis.y, axis.x)));
+}
+
+// Fold height at frame point p. The warp is passed in, computed once at the
+// pixel: it varies over ~2 frame units, the taps are 0.006 apart.
+float height(vec2 p, vec2 axis, float freq, vec2 so, vec2 drift, float warp) {
+  vec2 q = toField(p, axis) * freq + so + drift;
+  q.y += warp;
+  return fbm2(q);
+}
 
 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);
+  vec2 uv = worldUv();
+  vec2 p = isoCoord(uv);
+
+  vec2 so = seedOffset();
+  float axisAngle = seedHash(3.0) * PI;
+  vec2 axis = vec2(cos(axisAngle), sin(axisAngle));
+  float freq = 1.6 * u_scale;
+
+  vec2 drift = loopDrift(0.025, vec2(1.0, 0.0));
+  // Warp: one coarse octave, shifts the across-fold coordinate so ridges
+  // bend, converge and fork.
+  float warp = u_warp * 1.4 * snoise(toField(p, axis) * (0.45 * freq) + so.yx + 31.0 + drift.yx);
+
+  float eps = 0.006;
+  float hx1 = height(p + vec2(eps, 0.0), axis, freq, so, drift, warp);
+  float hx0 = height(p - vec2(eps, 0.0), axis, freq, so, drift, warp);
+  float hy1 = height(p + vec2(0.0, eps), axis, freq, so, drift, warp);
+  float hy0 = height(p - vec2(0.0, eps), axis, freq, so, drift, warp);
+  float h = 0.25 * (hx1 + hx0 + hy1 + hy0);
+
+  // Slope scale: fbm2 spans ~[-1, 1] over ~1/freq frame units, so its raw
+  // gradient is O(freq); 0.35 * depth brings the default to slopes near 1.
+  float amp = 0.35 * u_depth / eps;
+  vec3 n = normalize(vec3(-(hx1 - hx0) * amp * 0.5, -(hy1 - hy0) * amp * 0.5, 1.0));
+
+  // Light: azimuth measured from the ACROSS-fold direction, so u_light = 0
+  // always rakes across the folds whatever axis the seed picked (a light
+  // along the folds shows no relief at all). Slow sway; elevation 40.
+  float az = axisAngle + 0.5 * PI + u_light * PI / 180.0 + 0.14 * sin(loopFreq(0.12) * u_time + u_seed);
+  vec3 L = vec3(cos(az) * 0.766, sin(az) * 0.766, 0.643);
+  vec3 V = vec3(0.0, 0.0, 1.0);
+  vec3 H = normalize(L + V);
+  vec3 T = normalize(vec3(axis, 0.0) - n * dot(vec3(axis, 0.0), n));
+
+  float ndl = dot(n, L);
+  float diff = 0.5 + 0.5 * ndl;
+  float th = sqrt(max(1.0 - dot(T, H) * dot(T, H), 0.0));
+  float sheen = (0.55 * pow(th, 48.0) + 0.3 * pow(th, 7.0)) * max(ndl, 0.0);
+  // Valleys sit in shadow from the folds above them.
+  float cav = 0.75 + 0.25 * (0.5 + 0.5 * h);
+
+  // Colour: its own coarse field, drifting on its own path.
+  vec2 drift2 = loopDrift(0.02, vec2(0.0, 1.0));
+  float t = spread(fbm2(p * (0.55 * u_scale) + so + 17.0 + drift2), 0.35);
+  vec3 cloth = palette(t);
+
+  vec3 color = cloth * (0.35 + 0.65 * diff) * cav;
+  color += mix(cloth, vec3(1.0), 0.5) * sheen * u_sheen;
+
+  float g = grain(uv, u_time) - 0.5;
+  color += g * u_grain;
+
+  gl_FragColor = vec4(clamp(color, 0.0, 1.0), 1.0);
 }
 `;
-const DRAW_FRAGMENT$2 = `
-uniform float u_gap;
-uniform vec3 u_gapColor;
+const silk = {
+	id: "silk",
+	label: "Silk",
+	fragment: FRAGMENT$4,
+	params: [
+		{
+			key: "scale",
+			label: "Scale",
+			min: .3,
+			max: 2.5,
+			step: .05,
+			default: 1
+		},
+		{
+			key: "folds",
+			label: "Folds",
+			min: 0,
+			max: 1,
+			step: .01,
+			default: .6
+		},
+		{
+			key: "depth",
+			label: "Depth",
+			min: .2,
+			max: 2,
+			step: .01,
+			default: 1
+		},
+		{
+			key: "warp",
+			label: "Warp",
+			min: 0,
+			max: 1,
+			step: .01,
+			default: .5
+		},
+		{
+			key: "sheen",
+			label: "Sheen",
+			min: 0,
+			max: 1,
+			step: .01,
+			default: .6
+		},
+		{
+			key: "light",
+			label: "Light",
+			min: 0,
+			max: 360,
+			step: 1,
+			default: 20
+		},
+		{
+			key: "grain",
+			label: "Grain",
+			min: 0,
+			max: .5,
+			step: .01,
+			default: .06
+		}
+	],
+	randomParams(rand) {
+		return {
+			scale: .7 + rand() * 1.1,
+			folds: .3 + rand() * .7,
+			depth: .6 + rand() * 1,
+			warp: rand(),
+			sheen: .3 + rand() * .6000000000000001,
+			light: Math.floor((rand() < .5 ? 0 : 180) + (rand() - .5) * 100 + 360) % 360,
+			grain: .06
+		};
+	}
+};
+
+//#endregion
+//#region src/shaders/nacre.ts
+const FRAGMENT$3 = `
+uniform float u_scale;
+uniform float u_flow;
+uniform float u_crease;
+uniform float u_depth;
+uniform float u_iridescence;
+uniform float u_light;
+uniform float u_grain;
+
+${SIMPLEX_2D}
+${FBM}
+${SHAPE}
+${GRAIN}
+${ISO}
+${SEED}
+
+const float PI = 3.14159265;
+
+float tri(float x) {
+  return 1.0 - abs(1.0 - 2.0 * fract(0.5 * x));
+}
+
+// One smooth octave with a faint second: pooled lobes, not texture. The
+// creases are narrow ridges where the base field crosses a level, so they
+// are contours of the lobes themselves: they hug each lobe's edge and, as
+// level sets of one field, never cross each other or cut through a lobe.
+float height(vec2 p, float f, vec2 so, vec2 drift, vec2 warp) {
+  vec2 q = (p + warp) * f + so + drift;
+  float base = snoise(q) + 0.18 * snoise(q * 2.1 + 5.0);
+  float d0 = base;
+  float d1 = abs(base) - 0.6;
+  float crease = exp(-(d0 * d0) / 0.012) + 0.6 * exp(-(d1 * d1) / 0.01);
+  return base * 0.7 + crease * u_crease * 0.3;
+}
 
 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));
+  vec2 uv = worldUv();
+  vec2 p = isoCoord(uv);
+
+  vec2 so = seedOffset();
+  float f = 0.55 * u_scale;
+  vec2 drift = loopDrift(0.02, vec2(1.0, 0.0));
+
+  // One warp for every tap: it varies over ~2 frame units, the taps are
+  // 0.006 apart.
+  vec2 wq = p * (0.45 * f) + so.yx + 23.0 + drift.yx;
+  vec2 warp = u_flow * 0.5 * vec2(snoise(wq), snoise(wq + vec2(9.2, 4.1)));
+
+  float eps = 0.006;
+  float hx1 = height(p + vec2(eps, 0.0), f, so, drift, warp);
+  float hx0 = height(p - vec2(eps, 0.0), f, so, drift, warp);
+  float hy1 = height(p + vec2(0.0, eps), f, so, drift, warp);
+  float hy0 = height(p - vec2(0.0, eps), f, so, drift, warp);
+
+  float amp = 0.5 * u_depth / eps;
+  vec3 n = normalize(vec3(-(hx1 - hx0) * amp * 0.5, -(hy1 - hy0) * amp * 0.5, 1.0));
+  float tilt = 1.0 - n.z;
+
+  float az = u_light * PI / 180.0 + 0.12 * sin(loopFreq(0.1) * u_time + u_seed);
+  vec3 L = vec3(cos(az) * 0.643, sin(az) * 0.643, 0.766);
+  float diff = 0.7 + 0.3 * dot(n, L);
+  float rim = pow(tilt, 6.0) * 0.35;
+
+  vec2 drift2 = loopDrift(0.015, vec2(0.0, 1.0));
+  float t0 = spread(fbm2(p * (0.4 * f) + so + 17.0 + drift2), 0.35);
+  float t = tri(t0 + u_iridescence * 1.5 * tilt);
+  vec3 color = palette(t) * diff + vec3(rim);
+
+  float g = grain(uv, u_time) - 0.5;
+  color += g * u_grain;
+
+  gl_FragColor = vec4(clamp(color, 0.0, 1.0), 1.0);
+}
+`;
+const nacre = {
+	id: "nacre",
+	label: "Nacre",
+	fragment: FRAGMENT$3,
+	params: [
+		{
+			key: "scale",
+			label: "Scale",
+			min: .4,
+			max: 2,
+			step: .05,
+			default: .9
+		},
+		{
+			key: "flow",
+			label: "Flow",
+			min: 0,
+			max: 1,
+			step: .01,
+			default: .5
+		},
+		{
+			key: "crease",
+			label: "Crease",
+			min: 0,
+			max: 1,
+			step: .01,
+			default: .6
+		},
+		{
+			key: "depth",
+			label: "Depth",
+			min: .2,
+			max: 2,
+			step: .01,
+			default: 1
+		},
+		{
+			key: "iridescence",
+			label: "Iridescence",
+			min: 0,
+			max: 1,
+			step: .01,
+			default: .6
+		},
+		{
+			key: "light",
+			label: "Light",
+			min: 0,
+			max: 360,
+			step: 1,
+			default: 40
+		},
+		{
+			key: "grain",
+			label: "Grain",
+			min: 0,
+			max: .3,
+			step: .01,
+			default: .04
+		}
+	],
+	randomParams(rand) {
+		return {
+			scale: .5 + rand() * 1.1,
+			flow: rand(),
+			crease: .2 + rand() * .8,
+			depth: .6 + rand() * 1,
+			iridescence: .3 + rand() * .7,
+			light: Math.floor(rand() * 360),
+			grain: .04
+		};
+	}
+};
+
+//#endregion
+//#region src/shaders/burst.ts
+const FRAGMENT$2 = `
+uniform float u_rays;
+uniform float u_sharp;
+uniform float u_glow;
+uniform float u_twist;
+uniform float u_x;
+uniform float u_y;
+uniform float u_grain;
+
+${PERIODIC_2D}
+${GRAIN}
+${ISO}
+${SEED}
+
+void main() {
+  vec2 uv = worldUv();
+  vec2 p = isoCoord(uv);
+  vec2 halfIso = isoHalf();
+
+  vec2 c = vec2(u_x, u_y) * halfIso;
+  vec2 rel = p - c;
+  float r = max(length(rel), 0.0005);
+  float theta = atan(rel.y, rel.x);
+  float rho = log(r / 0.1) * 0.6;
+  float th = theta + u_twist * 1.2 * rho;
+
+  // Ray count: the angular period of the noise, integral so the field
+  // closes on itself around the centre.
+  float A = floor(8.0 + 72.0 * u_rays);
+  vec2 so = seedOffset();
+  float flowOut = loopTravel(0.05, vec2(0.0, 1.0), 4.0).y;
+  float flowPk = loopTravel(0.2, vec2(0.0, 1.0), 12.0).y;
+
+  vec2 sp = vec2(th / TAU * A, rho - flowOut + so.x);
+  float rays = pnoise(sp, vec2(A, 4.0)) + 0.5 * pnoise(sp * 2.0 + vec2(0.0, so.y), vec2(2.0 * A, 8.0));
+  // Packets: shorter along the ray and streaming out four times faster.
+  float pk = pnoise(vec2(sp.x, rho * 3.0 - flowPk + so.y), vec2(A, 12.0));
+  // Sector field: a few broad angular sectors that keep neighbouring rays
+  // in one family, and the mask's contrast.
+  float sector = pnoise(vec2(th / TAU * 6.0 + seedHash(3.0) * 6.0, 0.5), vec2(6.0, 1024.0));
+  // Softer toward the centre, where the rays converge.
+  float edge = mix(0.8, 0.2, u_sharp) + 0.4 * exp(-r / 0.3);
+  float mask = smoothstep(-edge, edge, rays + 0.4 * pk + 0.3 * sector);
+
+  float hole = 1.0 - exp(-(r * r) / (0.25 * 0.25));
+  float env = mix(hole, 1.0 + 0.6 * exp(-r / 0.35), u_glow) * exp(-0.3 * r);
+  float hot = u_glow * exp(-(r * r) / (0.16 * 0.16));
+
+  float sway = 0.35 * sin(loopFreq(0.08) * u_time + u_seed);
+  float theta0 = seedHash(2.0) * TAU + sway;
+  float t = 0.5 + 0.5 * cos(th - theta0 + 2.0 * rays + 1.5 * sector);
+  vec3 tint = palette(t);
+  vec3 color = tint * (0.15 + 0.85 * mask * env);
+  color = mix(color, vec3(1.0), hot * 0.85);
+
+  float g = grain(uv, u_time) - 0.5;
+  color += g * u_grain;
+
+  gl_FragColor = vec4(clamp(color, 0.0, 1.0), 1.0);
+}
+`;
+const burst = {
+	id: "burst",
+	label: "Burst",
+	fragment: FRAGMENT$2,
+	params: [
+		{
+			key: "rays",
+			label: "Rays",
+			min: 0,
+			max: 1,
+			step: .01,
+			default: .45
+		},
+		{
+			key: "sharp",
+			label: "Sharp",
+			min: 0,
+			max: 1,
+			step: .01,
+			default: .6
+		},
+		{
+			key: "glow",
+			label: "Glow",
+			min: 0,
+			max: 1,
+			step: .01,
+			default: .7
+		},
+		{
+			key: "twist",
+			label: "Twist",
+			min: 0,
+			max: 1,
+			step: .01,
+			default: .2
+		},
+		{
+			key: "x",
+			label: "X",
+			min: -1,
+			max: 1,
+			step: .01,
+			default: .1
+		},
+		{
+			key: "y",
+			label: "Y",
+			min: -1,
+			max: 1,
+			step: .01,
+			default: .05
+		},
+		{
+			key: "grain",
+			label: "Grain",
+			min: 0,
+			max: .3,
+			step: .01,
+			default: .14
+		}
+	],
+	randomParams(rand) {
+		return {
+			rays: .2 + rand() * .7,
+			sharp: .3 + rand() * .7,
+			glow: .3 + rand() * .7,
+			twist: rand() * .7,
+			x: -.7 + rand() * 1.4,
+			y: -.7 + rand() * 1.4,
+			grain: .14
+		};
+	}
+};
+
+//#endregion
+//#region src/shaders/glint.ts
+const FRAGMENT$1 = `
+uniform float u_size;
+uniform float u_density;
+uniform float u_bend;
+uniform float u_angle;
+uniform float u_speed;
+uniform float u_grain;
+
+${SIMPLEX_2D}
+${GRAIN}
+${ISO}
+${LOOP_ANGLE}
+${SEED}
+
+const float PI = 3.14159265;
+const vec3 LUMA = vec3(0.2126, 0.7152, 0.0722);
+
+float hash21(vec2 c) {
+  return fract(sin(dot(c, vec2(127.1, 311.7)) + u_seed * 0.37) * 43758.5453);
+}
+
+// Rhombus coverage at local offset d for half-extents a (along) and b
+// (across), edge ramped over aa.
+float rhombus(vec2 d, float a, float b, float aa) {
+  float s = abs(d.x) / a + abs(d.y) / b - 1.0;
+  return 1.0 - smoothstep(-aa, aa, s);
+}
+
+void main() {
+  vec2 uv = worldUv();
+  vec2 p = isoCoord(uv);
+  vec2 halfIso = isoHalf();
+  float pixel = 2.0 * halfIso.y / u_resolution.y;
+
+  float ang = u_angle * PI / 180.0;
+  vec2 q = vec2(p.x * cos(ang) + p.y * sin(ang), -p.x * sin(ang) + p.y * cos(ang));
+  vec2 so = seedOffset();
+  // The current: one slow bend, so the shoal arcs across the frame.
+  float bend = 0.35 * u_bend * snoise(vec2(q.x * 0.9 + so.x, so.y));
+  float across = q.y - bend;
+
+  // Background and haze.
+  vec3 c0 = palette(0.0);
+  vec3 c1 = palette(0.5);
+  vec3 c2 = palette(1.0);
+  float l0 = dot(c0, LUMA);
+  float l1 = dot(c1, LUMA);
+  float l2 = dot(c2, LUMA);
+  vec3 dk = mix(c0, c1, step(l1, l0));
+  dk = mix(dk, c2, step(l2, min(l0, l1)));
+  vec3 color = dk * 0.1;
+  color += palette(0.5) * 0.05 * exp(-(across * across) / 0.1);
+
+  float tw = loopFreq(1.2) * u_time;
+  // Hash period along the stream, in cells. The lattice travels one period
+  // per loop, so a short loop would race; halving the period halves that at
+  // the cost of the pattern repeating every 8 cells instead of 16.
+  float TILE = (u_loop > 0.0 && u_loop < 12.0) ? 8.0 : 16.0;
+
+  for (int layer = 0; layer < 3; layer++) {
+    float fl = float(layer);
+    float sizeMul = fl < 0.5 ? 0.5 : (fl < 1.5 ? 0.85 : 1.5);
+    float speedMul = fl < 0.5 ? 0.5 : (fl < 1.5 ? 0.8 : 1.2);
+    float bright = fl < 0.5 ? 0.45 : (fl < 1.5 ? 0.7 : 1.0);
+    float soft = fl < 0.5 ? 2.5 : (fl < 1.5 ? 1.5 : 1.0);
+
+    float shard = u_size * sizeMul;
+    float cs = shard * 3.2;
+    // The static u_speed term gives the knob a visible effect at t = 0.
+    float travel = loopTravel(0.08 * u_speed * speedMul, vec2(1.0, 0.0), cs * TILE).x + 0.3 * u_speed;
+    vec2 l = vec2(q.x + travel, across) / cs;
+    vec2 cell0 = floor(l);
+
+    for (int j = -1; j <= 1; j++) {
+      for (int i = -1; i <= 1; i++) {
+        vec2 cell = cell0 + vec2(float(i), float(j));
+        vec2 key = vec2(mod(cell.x, TILE), cell.y + fl * 100.0);
+        float h1 = hash21(key);
+        float h2 = hash21(key + 7.0);
+        float h3 = hash21(key + 19.0);
+        float h4 = hash21(key + 31.0);
+        float h5 = hash21(key + 47.0);
+
+        // Denser along the current, sparser off it.
+        float rowY = (cell.y + 0.5) * cs;
+        float present = step(h1, u_density * (0.12 + 0.88 * exp(-(rowY * rowY) / 0.05)));
+        if (present < 0.5) continue;
+
+        vec2 centre = (cell + vec2(0.15 + 0.7 * h2, 0.15 + 0.7 * h3)) * cs;
+        float sz = shard * (0.4 + 0.6 * h4);
+        float dir = h5 < 0.5 ? -1.0 : 1.0;
+        float ori = h5 * TAU + dir * loopAngle(0.25 + 0.5 * h4);
+        float ca = cos(ori);
+        float sa = sin(ori);
+
+        vec2 d = vec2(l.x * cs, across) - centre;
+        vec2 dl = vec2(d.x * ca + d.y * sa, -d.x * sa + d.y * ca);
+        float aa = pixel * soft / sz;
+        float fr = 0.08 * sz;
+        float covR = rhombus(vec2((d.x - fr) * ca + d.y * sa, -(d.x - fr) * sa + d.y * ca) / sz, 1.0, 0.35, aa);
+        float covG = rhombus(dl / sz, 1.0, 0.35, aa);
+        float covB = rhombus(vec2((d.x + fr) * ca + d.y * sa, -(d.x + fr) * sa + d.y * ca) / sz, 1.0, 0.35, aa);
+
+        float twinkle = 0.5 + 0.5 * sin(tw + h2 * TAU + ori * 2.0);
+        float flash = twinkle * twinkle * twinkle;
+        vec3 col = palette(fract(h3 + 0.13 * fl));
+        float lum = dot(col, LUMA);
+        col = col * (1.0 + 2.0 * (1.0 - lum) * (1.0 - lum)) * (0.5 + 0.5 * twinkle) + vec3(0.6) * flash;
+        col *= bright;
+        color += vec3(covR, covG, covB) * col;
+      }
+    }
   }
-  gl_FragColor = vec4(color, 1.0);
+
+  float g = grain(uv, u_time) - 0.5;
+  color += g * u_grain;
+
+  gl_FragColor = vec4(clamp(color, 0.0, 1.0), 1.0);
 }
 `;
-const pixelate = {
-	id: "pixelate",
-	label: "Pixelate",
-	fragment: DRAW_FRAGMENT$2,
-	grid: {
-		cell: (p) => [p.size, p.size],
-		fragment: CELL_FRAGMENT$3
-	},
+const glint = {
+	id: "glint",
+	label: "Glint",
+	fragment: FRAGMENT$1,
 	params: [
 		{
 			key: "size",
 			label: "Size",
-			min: 2,
-			max: 160,
-			step: 1,
-			default: 24
+			min: .01,
+			max: .06,
+			step: .001,
+			default: .03
 		},
 		{
-			key: "levels",
-			label: "Levels",
+			key: "density",
+			label: "Density",
+			min: .2,
+			max: 1,
+			step: .01,
+			default: .6
+		},
+		{
+			key: "bend",
+			label: "Bend",
 			min: 0,
-			max: 16,
-			step: 1,
-			default: 0
+			max: 1,
+			step: .01,
+			default: .5
 		},
 		{
-			key: "gap",
-			label: "Gap",
+			key: "angle",
+			label: "Angle",
 			min: 0,
-			max: .4,
+			max: 360,
+			step: 1,
+			default: 10
+		},
+		{
+			key: "speed",
+			label: "Speed",
+			min: .3,
+			max: 2,
 			step: .01,
-			default: 0
+			default: 1
 		},
 		{
-			key: "gapColor",
-			label: "Gap color",
-			type: "color",
-			default: "#000000"
+			key: "grain",
+			label: "Grain",
+			min: 0,
+			max: .3,
+			step: .01,
+			default: .06
 		}
 	],
 	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"
+			size: .015 + rand() * .03,
+			density: .4 + rand() * .6,
+			bend: rand(),
+			angle: Math.floor(rand() * 360),
+			speed: .6 + rand() * 1,
+			grain: .06
 		};
 	}
 };
@@ -1913,6 +2465,13 @@ void main() {
 * over another effect, there is no ramp coordinate to recover and tone stays
 * luma (a gradient map).
 *
+* paletteStop() snaps a tone to the nearest of the palette's stops
+* (u_paletteStops is the stop count). Halftone and ASCII use it in palette
+* mode: they do not quantize tone the way Dither's `levels` does, so
+* without the snap, palette mode over a generator handed back the exact
+* source color and looked identical to source mode. Snapped, each cell is
+* one of the palette's own colors, flat.
+*
 * The search is 33 coarse + 17 fine ramp samples. That is affordable
 * because tone is evaluated per cell or per lattice point, not per pixel.
 * The ends snap to exactly 0 and 1: generators clamp their coordinate, so
@@ -1925,6 +2484,7 @@ uniform vec3 u_ink;
 uniform vec3 u_paper;
 uniform float u_invert;
 uniform float u_sourceIsRamp;   // 1 when this layer reads a generator directly
+uniform float u_paletteStops;   // number of colors in the palette
 float rampPosition(vec3 c) {
   float best = 0.0;
   float bd = 1e9;
@@ -1950,14 +2510,17 @@ float toneOf(vec3 c) {
   float t = toneIsRamp() ? rampPosition(c) : luma(c);
   return u_invert > 0.5 ? 1.0 - t : t;
 }
+vec3 paletteStop(float tone) {
+  float n = max(u_paletteStops - 1.0, 1.0);
+  return palette(floor(tone * n + 0.5) / n);
+}
 vec3 colorize(float tone, vec3 src) {
   if (u_colorMode < 0.5) return src;
   if (u_colorMode < 1.5) return mix(u_ink, u_paper, tone);
   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 [
 		{
@@ -1971,7 +2534,7 @@ function colorModeParams(opts) {
 				},
 				{
 					value: "duotone",
-					label: "Duotone"
+					label: opts.singleColour ? "Single colour" : "Duotone"
 				},
 				{
 					value: "palette",
@@ -1981,33 +2544,368 @@ function colorModeParams(opts) {
 			default: opts.mode
 		},
 		{
-			key: "ink",
-			label: "Ink",
-			type: "color",
-			default: opts.ink ?? "#111111",
+			key: "ink",
+			label: opts.singleColour ? "Colour" : "Ink",
+			type: "color",
+			default: opts.ink ?? "#111111",
+			when: {
+				key: "colorMode",
+				in: ["duotone"]
+			}
+		},
+		{
+			key: "paper",
+			label: "Paper",
+			type: "color",
+			default: opts.paper ?? "#f4f1ea",
+			when: opts.paperWhen ?? {
+				key: "colorMode",
+				in: ["duotone"]
+			}
+		},
+		{
+			key: "invert",
+			label: "Invert",
+			type: "bool",
+			default: false
+		}
+	];
+}
+/**
+* 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: "colorMode",
-				in: ["duotone"]
+				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: "paper",
-			label: "Paper",
-			type: "color",
-			default: opts.paper ?? "#f4f1ea",
-			...opts.paperAlways ? {} : { when: {
-				key: "colorMode",
-				in: ["duotone"]
-			} }
+			key: "exposure",
+			label: "Exposure",
+			min: -1,
+			max: 1,
+			step: .01,
+			default: 0
 		},
 		{
-			key: "invert",
-			label: "Invert",
-			type: "bool",
-			default: false
+			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
@@ -2098,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",
@@ -2181,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 = [
@@ -2195,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),
@@ -2205,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;
 	}
 };
 
@@ -2214,24 +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
-  // colors by the un-inverted tone, so Invert flips sizes and leaves colors.
+  // 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 = palette(toneIsRamp() ? rampPosition(sc) : luma(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);
 }
@@ -2241,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};
 
@@ -2251,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).
@@ -2276,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; }
@@ -2289,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.
@@ -2311,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
@@ -2341,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);
@@ -2359,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",
@@ -2393,7 +3327,7 @@ const halftone = {
 					label: "Square"
 				}
 			],
-			default: "dot"
+			default: "square"
 		},
 		{
 			key: "size",
@@ -2401,7 +3335,7 @@ const halftone = {
 			min: 6,
 			max: 160,
 			step: .5,
-			default: 28
+			default: 20
 		},
 		{
 			key: "angle",
@@ -2417,7 +3351,7 @@ const halftone = {
 			min: .2,
 			max: 1.5,
 			step: .01,
-			default: 1
+			default: .75
 		},
 		{
 			key: "softness",
@@ -2425,27 +3359,16 @@ const halftone = {
 			min: 0,
 			max: 1,
 			step: .01,
-			default: 0
-		},
-		{
-			key: "contrast",
-			label: "Contrast",
-			min: 0,
-			max: 2,
-			step: .01,
-			default: 1
-		},
-		{
-			key: "pulse",
-			label: "Pulse",
-			min: 0,
-			max: 1,
-			step: .01,
-			default: 0
+			default: .1
 		},
+		...responseParams({ contrast: 1.15 }),
 		...colorModeParams({
-			mode: "duotone",
-			paperAlways: true
+			mode: "source",
+			paperWhen: {
+				key: "ground",
+				in: ["paper"]
+			},
+			singleColour: true
 		})
 	],
 	randomParams(rand) {
@@ -2460,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(14 + rand() * 50),
+			size: Math.round(8 + rand() * 30),
 			angle: Math.round(rand() * 180),
-			radius: .8 + rand() * .5,
-			softness: rand() < .7 ? 0 : rand() * .5,
-			contrast: 1,
-			pulse: 0,
+			radius: .7 + rand() * .7,
+			softness: rand() < .7 ? .1 : rand() * .5,
+			style: "filled",
+			exposure: 0,
+			contrast: 1.15,
+			density: 1,
 			colorMode: modes[Math.floor(rand() * modes.length)],
-			ink: "#111111",
+			ink: blend === "screen" || blend === "colorDodge" ? "#ffffff" : "#111111",
 			paper: "#f4f1ea",
 			invert: false
 		};
@@ -2708,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.
@@ -2726,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
@@ -2745,7 +3696,8 @@ void main() {
   } else if (u_colorMode < 1.5) {
     color = u_ink;
   } else {
-    color = palette(toneIsRamp() ? rampPosition(sc) : luma(sc));
+    // Nearest palette stop, flat: see paletteStop() in chunks.ts.
+    color = paletteStop(toneIsRamp() ? rampPosition(sc) : luma(sc));
   }
 
   gl_FragColor = vec4(color, glyph / 255.0);
@@ -2757,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());
@@ -2785,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) {
@@ -2802,7 +3756,8 @@ const ascii = {
 	fragment: DRAW_FRAGMENT,
 	grid: {
 		cell: cellOf,
-		fragment: CELL_FRAGMENT
+		fragment: CELL_FRAGMENT,
+		picture: groundPicture
 	},
 	textures: [{
 		uniform: "u_atlas",
@@ -2822,6 +3777,11 @@ const ascii = {
 		})
 	}],
 	params: [
+		...groundParams({
+			ground: "image",
+			blend: "colorDodge",
+			opacity: 1
+		}),
 		{
 			key: "charset",
 			label: "Characters",
@@ -2860,7 +3820,7 @@ const ascii = {
 			min: 8,
 			max: 96,
 			step: 1,
-			default: 24
+			default: 10
 		},
 		{
 			key: "smooth",
@@ -2874,7 +3834,7 @@ const ascii = {
 			min: 0,
 			max: 12,
 			step: 1,
-			default: 0
+			default: 2
 		},
 		{
 			key: "cycleAmount",
@@ -2882,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) {
@@ -2904,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",
@@ -2918,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 = [
@@ -2927,7 +3979,11 @@ const shaders = [
 	halo,
 	strata,
 	dune,
-	whorl
+	whorl,
+	silk,
+	nacre,
+	burst,
+	glint
 ];
 function getShader(id) {
 	return shaders.find((s) => s.id === id);
@@ -2939,7 +3995,8 @@ const effects = [
 	pixelate,
 	dither,
 	halftone,
-	ascii
+	ascii,
+	tint
 ];
 function getEffect(id) {
 	return effects.find((e) => e.id === id);
@@ -3537,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,
@@ -3788,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);
@@ -3941,6 +5096,7 @@ function createStackRenderer(opts) {
 	function applyEffectUniforms(p, state, grid, overGenerator) {
 		const ref = refSize(canvas.width, canvas.height);
 		gl.uniform1f(p.loc("u_sourceIsRamp"), overGenerator ? 1 : 0);
+		gl.uniform1f(p.loc("u_paletteStops"), colors.length);
 		gl.uniform2f(p.loc("u_refSize"), ref[0], ref[1]);
 		gl.uniform1f(p.loc("u_outputScale"), outputScale(canvas.width, canvas.height));
 		if (grid) {
@@ -3979,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) {
@@ -3987,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);
@@ -4001,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 {
@@ -4020,6 +5188,7 @@ function createStackRenderer(opts) {
 			}
 		});
 		pruneCellTargets();
+		pruneBlurTargets();
 	}
 	function dispose() {
 		for (const state of layers) disposeLayer(state);
@@ -4028,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];
@@ -4036,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);
@@ -4364,4 +5540,4 @@ function createRenderer(opts) {
 }
 
 //#endregion
-export { ascii, beam, bloom, buildPaletteRamp, createRenderer, createStackRenderer, dither, dune, effects, flow, getEffect, getShader, gridFor, halftone, halo, mountGradient, mountStack, pixelate, renderGradientFrame, renderStackFrame, shaders, 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 };