instantshader 0.4.1 → 0.6.0

package/dist/index.js

@@ -187,10 +187,74 @@ float grain(vec2 uv, float time) {
   return fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453);
 }
 `;
+/**
+* Isotropic frame helpers, shared by every look whose composition is a SHAPE
+* rather than a frame-filling field. worldUv() is 0-1 on both axes of a 16:9
+* world, so raw uv stretches x by 1.78 -- circles render as ellipses and a
+* rotated stripe changes thickness with its angle. isoCoord() scales x by the
+* world aspect so a unit circle is a screen circle (frame half-height = 0.5),
+* and isoHalf() is the frame's visible half-extents in that space, mirroring
+* worldUv()'s cover fit so a square tile and a 16:9 export agree on where the
+* edges are.
+*/
+const ISO = `
+const float WORLD_ASPECT = 1000.0 / 562.5;
+vec2 isoCoord(vec2 uv) { return (uv - 0.5) * vec2(WORLD_ASPECT, 1.0); }
+vec2 isoHalf() {
+  float canvasAspect = u_resolution.x / u_resolution.y;
+  return vec2(0.5 * min(1.0, canvasAspect / WORLD_ASPECT),
+              0.5 * min(1.0, WORLD_ASPECT / canvasAspect))
+       * vec2(WORLD_ASPECT, 1.0);
+}
+`;
+/**
+* A phase angle that advances at ~w rad/s and is exactly periodic over the
+* loop -- for HEADLINE motions (a travelling wave, an orbiting colour) that
+* must never freeze. This is the opposite trade to loopFreq, which rounds to
+* zero on short loops to protect slow secondary swells from turning into a
+* throb: here the cycle count is floored at one, so a short loop simply runs
+* the motion faster.
+*
+* The count is also forced ODD. With an even count the phase at half-cycle is
+* a whole number of turns, i.e. the frame at loop/2 would be identical to the
+* frame at 0 for anything driven by this angle alone -- the loop would
+* secretly be half as long as asked for.
+*
+* Not looping, w is snapped to a whole number of turns per 1000s, because
+* u_time itself wraps there (see renderer.ts) and an unsnapped phase would
+* jump once every ~16.7 minutes.
+*/
+const LOOP_ANGLE = `
+float loopAngle(float w) {
+  if (u_loop <= 0.0) return TAU * floor(w * 1000.0 / TAU + 0.5) * (u_time / 1000.0);
+  float n = 2.0 * floor(w * u_loop / TAU * 0.5) + 1.0;
+  return TAU * n * (u_time / u_loop);
+}
+`;
+/**
+* Seed decorrelation. Adding u_seed straight onto a noise coordinate makes
+* the seed a PAN: neighbouring seeds show the same field slid sideways, so a
+* seed slider reads as "moves the picture a bit" instead of "new picture".
+* seedOffset() hashes the seed into an unrelated point of the noise plane, so
+* any change of seed lands on a composition with nothing in common with the
+* last one. seedHash(i) is the scalar version, one independent 0-1 value per
+* channel i, for seeded angles and phases.
+*
+* The offset stays inside [8, 72), far below the ~1000 ceiling where snoise's
+* float precision gives out (see the note at the top of this file).
+*/
+const SEED = `
+float seedHash(float i) {
+  return fract(sin(u_seed * 12.9898 + i * 78.233) * 43758.5453);
+}
+vec2 seedOffset() {
+  return vec2(seedHash(11.0), seedHash(23.0)) * 64.0 + 8.0;
+}
+`;
 
 //#endregion
 //#region src/shaders/flow.ts
-const FRAGMENT$2 = `
+const FRAGMENT$6 = `
 uniform float u_scale;
 uniform float u_curl;
 uniform float u_drift;
@@ -327,7 +391,7 @@ void main() {
 const flow = {
 	id: "flow",
 	label: "Flow",
-	fragment: FRAGMENT$2,
+	fragment: FRAGMENT$6,
 	params: [
 		{
 			key: "scale",
@@ -383,7 +447,7 @@ const flow = {
 
 //#endregion
 //#region src/shaders/beam.ts
-const FRAGMENT$1 = `
+const FRAGMENT$5 = `
 uniform float u_scale;
 uniform float u_width;
 uniform float u_glow;
@@ -637,7 +701,7 @@ void main() {
 const beam = {
 	id: "beam",
 	label: "Beam",
-	fragment: FRAGMENT$1,
+	fragment: FRAGMENT$5,
 	params: [
 		{
 			key: "scale",
@@ -693,7 +757,7 @@ const beam = {
 
 //#endregion
 //#region src/shaders/bloom.ts
-const FRAGMENT = `
+const FRAGMENT$4 = `
 uniform float u_scale;
 uniform float u_petals;
 uniform float u_pinch;
@@ -852,7 +916,7 @@ void main() {
 const bloom = {
 	id: "bloom",
 	label: "Bloom",
-	fragment: FRAGMENT,
+	fragment: FRAGMENT$4,
 	params: [
 		{
 			key: "scale",
@@ -925,128 +989,2074 @@ const bloom = {
 };
 
 //#endregion
-//#region src/registry.ts
-const shaders = [
-	flow,
-	beam,
-	bloom
-];
-function getShader(id) {
-	return shaders.find((s) => s.id === id);
+//#region src/shaders/halo.ts
+const FRAGMENT$3 = `
+uniform float u_radius;
+uniform float u_x;
+uniform float u_y;
+uniform float u_glow;
+uniform float u_crescent;
+uniform float u_flares;
+uniform float u_grain;
+
+${SIMPLEX_2D}
+${PERIODIC_2D}
+${GRAIN}
+${ISO}
+${LOOP_ANGLE}
+${SEED}
+
+const float PI = 3.14159265;
+const vec3 LUMA = vec3(0.2126, 0.7152, 0.0722);
+
+void main() {
+  vec2 uv = worldUv();
+  vec2 p = isoCoord(uv);
+  vec2 halfIso = isoHalf();
+
+  vec2 so = seedOffset();
+  vec2 drift = loopDrift(0.04, vec2(1.0, 0.0));
+
+  // ---- the disc -----------------------------------------------------------
+  float R = u_radius;
+  vec2 c = vec2(u_x, u_y) * (halfIso + R);
+
+  vec2 rel = p - c;
+  float r = length(rel);
+  float theta = atan(rel.y, rel.x);
+  float d = r - R;
+
+  // ---- streamers ----------------------------------------------------------
+  // A = 14 angular periods; radial tile 4. The second octave doubles both
+  // the frequency and the tile, and travels twice as far per loop, so it
+  // lands on a whole tile too.
+  float A = 14.0;
+  // 0.7: radial features ~6x longer than they are wide at A = 14, which is
+  // the anisotropy that reads as RAYS. At 2.2 the cells were near-square in
+  // log-polar space and the corona rendered as cloud.
+  float rho = log(max(r, 0.001) / R) * 0.7;
+  float flowOut = loopTravel(0.04, vec2(0.0, 1.0), 4.0).y;
+  vec2 sp = vec2((theta / TAU + 0.5) * A, rho - flowOut + so.x);
+  float fl = pnoise(sp, vec2(A, 4.0)) + 0.5 * pnoise(sp * 2.0, vec2(2.0 * A, 8.0));
+
+  float len = (0.03 + 0.3 * u_glow) * max(1.0 + 1.5 * u_flares * fl, 0.15);
+  float outside = max(d, 0.0);
+  float corona = exp(-outside / len);
+  float veil = 0.18 * exp(-outside / (3.5 * len));
+  float inner = 0.4 * exp(min(d, 0.0) / (0.025 + 0.09 * u_glow));
+  float limb = exp(-abs(d) / 0.007);
+
+  // One-pixel soft disc edge, in frame units.
+  float pixel = 2.0 * halfIso.y / u_resolution.y;
+  float isOut = smoothstep(-pixel, pixel, d);
+
+  // ---- crescent -----------------------------------------------------------
+  // Light direction as a VECTOR blend (no angle wrap to worry about): the
+  // seeded direction for a centred disc, handing over to "toward the frame
+  // centre" as the disc moves off it, plus a slow sway.
+  float aSeed = seedHash(1.0) * TAU;
+  float off = length(c);
+  float sway = 0.35 * snoise(vec2(so.y, 1.0) + drift);
+  vec2 inward = -c / max(off, 0.0001);
+  inward = vec2(inward.x * cos(sway) - inward.y * sin(sway),
+                inward.x * sin(sway) + inward.y * cos(sway));
+  vec2 seedDir = vec2(cos(aSeed + sway), sin(aSeed + sway));
+  vec2 dirL = normalize(mix(seedDir, inward, smoothstep(0.05, 0.5, off)) + seedDir * 0.0001);
+  float facing = 0.5 + 0.5 * dot(rel / max(r, 0.0001), dirL);
+  float arc = mix(1.0, 0.03 + 0.97 * facing * facing * facing, u_crescent);
+
+  // ---- palette by azimuth -------------------------------------------------
+  float theta0 = loopAngle(0.1) + seedHash(2.0) * TAU;
+  float tA = 0.5 + 0.5 * cos(theta - theta0 + 0.7 * u_flares * fl);
+  float t = clamp(tA * 0.85 + 0.15 * (1.0 - exp(-outside * 3.0)), 0.0, 1.0);
+  vec3 col = palette(t);
+  float lum = dot(col, LUMA);
+
+  // ---- background: the ramp's darkest stop, crushed (as in beam) ----------
+  vec3 cA = palette(0.0);
+  vec3 cB = palette(0.5);
+  vec3 cC = palette(1.0);
+  float lA = dot(cA, LUMA);
+  float lB = dot(cB, LUMA);
+  float lC = dot(cC, LUMA);
+  vec3 dk = mix(cA, cB, step(lB, lA));
+  dk = mix(dk, cC, step(lC, min(lA, lB)));
+  vec3 color = dk * 0.1;
+
+  // ---- additive light -----------------------------------------------------
+  // gain/boost: see beam.ts -- bright banks are divided down before they can
+  // clip, dark banks are multiplied up (chroma-preserving) before they vanish.
+  float gain = 1.0 / (1.0 + 1.2 * lum * lum);
+  float boost = 1.0 + 2.0 * (1.0 - lum) * (1.0 - lum) * (1.0 - lum);
+  float radiance = mix(inner, corona + veil, isOut);
+  color += col * radiance * arc * gain * boost * 1.35;
+  // The limb is the hottest thing in frame: palette colour plus a dark-gated
+  // white lift, so it still reads as a filament on near-black banks.
+  color += (col * 0.8 + vec3(0.35 * (1.0 - lum))) * limb * arc;
+
+  float g = grain(uv, u_time) - 0.5;
+  color += g * u_grain;
+
+  gl_FragColor = vec4(clamp(color, 0.0, 1.0), 1.0);
 }
+`;
+const halo = {
+	id: "halo",
+	label: "Halo",
+	fragment: FRAGMENT$3,
+	params: [
+		{
+			key: "radius",
+			label: "Radius",
+			min: .12,
+			max: 1.6,
+			step: .01,
+			default: 1
+		},
+		{
+			key: "x",
+			label: "X",
+			min: -1,
+			max: 1,
+			step: .01,
+			default: 0
+		},
+		{
+			key: "y",
+			label: "Y",
+			min: -1,
+			max: 1,
+			step: .01,
+			default: -.78
+		},
+		{
+			key: "glow",
+			label: "Glow",
+			min: 0,
+			max: 1,
+			step: .01,
+			default: .5
+		},
+		{
+			key: "crescent",
+			label: "Crescent",
+			min: 0,
+			max: 1,
+			step: .01,
+			default: .35
+		},
+		{
+			key: "flares",
+			label: "Flares",
+			min: 0,
+			max: 1,
+			step: .01,
+			default: .5
+		},
+		{
+			key: "grain",
+			label: "Grain",
+			min: 0,
+			max: .3,
+			step: .01,
+			default: .08
+		}
+	],
+	randomParams(rand) {
+		const horizon = rand() < .6;
+		return {
+			radius: horizon ? .7 + rand() * .8 : .18 + rand() * .24,
+			x: horizon ? -.3 + rand() * .6 : -.4 + rand() * .8,
+			y: horizon ? -.86 + rand() * .16 : -.2 + rand() * .4,
+			glow: .3 + rand() * .6000000000000001,
+			crescent: rand() * .9,
+			flares: .2 + rand() * .7,
+			grain: .08
+		};
+	}
+};
 
 //#endregion
-//#region src/palette.ts
-/** Number of texels in the output ramp. Matches a typical 1D LUT texture size:
-* large enough that per-texel banding is invisible, small enough to upload
-* as a single texture row every time colors change. */
-const RAMP_SIZE = 1024;
-/**
-* Converts one sRGB channel (0-1, gamma-encoded) to linear light.
-* Piecewise per the sRGB spec: a linear segment near black avoids the
-* infinite slope a pure power curve would have at 0.
-*/
-function linearize(c) {
-	return c <= .04045 ? c / 12.92 : Math.pow((c + .055) / 1.055, 2.4);
-}
-/** Inverse of linearize(): linear light back to gamma-encoded sRGB (0-1). */
-function delinearize(c) {
-	return c <= .0031308 ? c * 12.92 : 1.055 * Math.pow(c, 1 / 2.4) - .055;
-}
-/**
-* sRGB -> OKLab, Björn Ottosson's method (https://bottosson.github.io/posts/oklab/).
-* Coefficients copied verbatim from that reference implementation —
-* do not hand-retype these, they are fitted constants, not derivable values.
-*
-* The two 3x3 matrices convert linear sRGB to an LMS-like cone response
-* space and then to the final Lab-like OKLab space; the cube root in
-* between is what makes the space perceptually uniform.
-*/
-function rgbToOklab(r, g, b) {
-	const lr = linearize(r), lg = linearize(g), lb = linearize(b);
-	const l_ = Math.cbrt(.4122214708 * lr + .5363325363 * lg + .0514459929 * lb);
-	const m_ = Math.cbrt(.2119034982 * lr + .6806995451 * lg + .1073969566 * lb);
-	const s_ = Math.cbrt(.0883024619 * lr + .2817188376 * lg + .6299787005 * lb);
-	return [
-		.2104542553 * l_ + .793617785 * m_ - .0040720468 * s_,
-		1.9779984951 * l_ - 2.428592205 * m_ + .4505937099 * s_,
-		.0259040371 * l_ + .7827717662 * m_ - .808675766 * s_
-	];
-}
-/**
-* OKLab -> sRGB, inverse of rgbToOklab. Same fitted-constant caveat as
-* above — do not hand-retype these coefficients.
-*/
-function oklabToRgb(L, a, b) {
-	const l_ = L + .3963377774 * a + .2158037573 * b;
-	const m_ = L - .1055613458 * a - .0638541728 * b;
-	const s_ = L - .0894841775 * a - 1.291485548 * b;
-	const l = l_ * l_ * l_, m = m_ * m_ * m_, s = s_ * s_ * s_;
-	return [
-		delinearize(4.0767416621 * l - 3.3077115913 * m + .2309699292 * s),
-		delinearize(-1.2684380046 * l + 2.6097574011 * m - .3413193965 * s),
-		delinearize(-.0041960863 * l - .7034186147 * m + 1.707614701 * s)
-	];
+//#region src/shaders/strata.ts
+const FRAGMENT$2 = `
+uniform float u_scale;
+uniform float u_layers;
+uniform float u_warp;
+uniform float u_ridges;
+uniform float u_stretch;
+uniform float u_depth;
+uniform float u_blend;
+uniform float u_angle;
+uniform float u_grain;
+
+${SIMPLEX_2D}
+${FBM}
+${SHAPE}
+${GRAIN}
+${ISO}
+${SEED}
+
+const float PI = 3.14159265;
+
+float field(vec2 q) {
+  float n = fbm2(q);
+  // Ridged transform of the SAME sample (free): constants chosen so its mean
+  // and spread roughly match the fbm's, keeping spread()'s equal-area promise
+  // approximately true at any mix.
+  float ridge = 0.55 - 1.6 * abs(n);
+  return spread(mix(n, ridge, u_ridges), 0.35); // 0.35 = fbm2's standard deviation
 }
-/**
-* OKLab -> OKLCh: rectangular (L, a, b) to polar (L, C, h). C is just the
-* distance of (a, b) from the achromatic origin; h is the angle, in
-* radians, measured the same way atan2 always does (range (-pi, pi]).
-*/
-function oklabToOklch(L, a, b) {
-	return [
-		L,
-		Math.hypot(a, b),
-		Math.atan2(b, a)
-	];
+
+// Frame-space vector -> field-space vector: rotate onto the seeded stretch
+// axis, then compress along it. Used for positions AND for the tap offsets,
+// so shadows keep their true on-screen length however stretched the field is.
+vec2 toField(vec2 v, vec2 axis) {
+  return vec2(dot(v, axis) / (1.0 + 3.0 * u_stretch), dot(v, vec2(-axis.y, axis.x)));
 }
-/**
-* OKLCh -> OKLab: polar back to rectangular, so the existing oklabToRgb
-* matrices can be reused unchanged instead of duplicating the LMS math for
-* a polar input.
-*/
-function oklchToOklab(L, C, h) {
-	return [
-		L,
-		C * Math.cos(h),
-		C * Math.sin(h)
-	];
+
+void main() {
+  vec2 uv = worldUv();
+  vec2 iso = isoCoord(uv);
+
+  vec2 drift = loopDrift(0.03, vec2(1.0, 0.0));
+  float freq = 0.8 * u_scale;
+
+  // Domain warp, evaluated ONCE and shared by every tap below. The taps are
+  // at most ~0.07 frame units apart, over which a 0.5x-frequency warp is
+  // effectively constant -- re-evaluating it per tap would cost 6 more
+  // snoise calls to move each tap by a fraction of a pixel.
+  float axisAngle = seedHash(5.0) * PI;
+  vec2 axis = vec2(cos(axisAngle), sin(axisAngle));
+  vec2 fp = toField(iso, axis);
+  vec2 so = seedOffset();
+  vec2 wq = fp * (0.5 * u_scale) + so.yx + 40.0 - drift.yx;
+  vec2 warp = u_warp * 0.45 * vec2(snoise(wq), snoise(wq + vec2(13.1, 7.7)));
+  vec2 q = fp * freq + so + drift + warp;
+
+  float L = floor(u_layers + 0.5);
+
+  // Direction TOWARD the light, and the shadow length in frame units.
+  float ang = u_angle * PI / 180.0;
+  vec2 toLight = vec2(cos(ang), sin(ang));
+  vec2 side = vec2(-toLight.y, toLight.x);
+  float reach = 0.012 + 0.06 * u_depth;
+  vec2 qLight = toField(toLight * reach, axis) * freq;
+  vec2 qSide = toField(side * reach, axis) * freq;
+
+  float v      = field(q) * L;
+  float vFar   = field(q + qLight) * L;        // shadow tap
+  float vNear  = field(q + qLight * 0.3) * L;  // rim tap
+  float vSide  = field(q + qSide) * L;           // gradient only
+
+  float band = min(floor(v), L - 1.0);
+  float f = v - band;
+
+  // ---- analytic edge AA ---------------------------------------------------
+  // |grad v| per frame unit, from the two orthogonal taps, times the size of
+  // a pixel in frame units (frame height is 2*isoHalf().y over resolution.y).
+  float gradV = length(vec2(vFar - v, vSide - v)) / reach;
+  float pixel = 2.0 * isoHalf().y / u_resolution.y;
+  float aa = clamp(gradV * pixel * 1.5, 0.002, 0.5);
+  float toNext = smoothstep(1.0 - aa, 1.0, f) * step(band, L - 1.5);
+
+  // ---- colour -------------------------------------------------------------
+  float denom = max(L - 1.0, 1.0);
+  float tHere = mix(band / denom, v / L, u_blend);
+  float tNext = mix((band + 1.0) / denom, v / L, u_blend);
+  vec3 color = mix(palette(tHere), palette(tNext), toNext);
+
+  // ---- shadow + rim -------------------------------------------------------
+  // Both fade out across the AA band so the shadow ends exactly where the
+  // upper sheet begins instead of printing a dark fringe onto its edge.
+  float shadow = smoothstep(band + 0.85, band + 1.4, vFar) * (1.0 - toNext);
+  color *= 1.0 - shadow * 0.6 * u_depth;
+
+  float rim = smoothstep(band, band - 0.45, vNear) * step(0.5, band);
+  color += (vec3(1.0) - clamp(color, 0.0, 1.0)) * rim * 0.22 * u_depth;
+
+  float g = grain(uv, u_time) - 0.5;
+  color += g * u_grain;
+
+  gl_FragColor = vec4(clamp(color, 0.0, 1.0), 1.0);
 }
-/**
-* Chroma below which a hue angle is noise rather than signal. Near a=b=0,
-* atan2 is numerically unstable (its output can swing wildly for a tiny
-* change in a near-zero a or b), and perceptually a near-gray stop simply
-* doesn't have a hue to speak of. Below this threshold a stop is treated as
-* achromatic for interpolation purposes: see lerpHue().
-*
-* ~0.005 in OKLCh chroma units is comfortably below any stop actually used
-* for color (the lab palettes' least-saturated non-neutral stops sit at
-* 0.075+) and comfortably above float rounding noise from the hex -> OKLab
-* round trip.
-*/
-const ACHROMATIC_CHROMA = .005;
-const TAU = Math.PI * 2;
-/**
-* Interpolates hue from h0 toward h1 by fraction t, taking the SHORTER way
-* around the circle (e.g. 350deg -> 10deg moves +20deg through 0, not -340deg
-* backward through 180deg) instead of a plain linear lerp, which would sweep
-* through every intermediate hue on the long way round.
-*
-* Two edge cases handled explicitly:
-*
-* - Achromatic endpoint: if one side's chroma is below ACHROMATIC_CHROMA,
-*   its "hue" is meaningless (see the constant's comment), so it inherits
-*   the other endpoint's hue instead of contributing its own noisy angle.
-*   Concretely this means a gray-to-color segment holds a constant hue
-*   while only chroma ramps up, rather than spiraling through unrelated
-*   hues the gray's atan2 noise happened to produce. If both endpoints are
-*   achromatic the chosen hue is never visible: C stays near zero for the
-*   whole segment (it's lerped independently, from ~0 to ~0), so whatever
-*   angle comes out of cos/sin gets multiplied by ~0.
-* - Exact opposition (180 degrees apart): both directions around the circle
-*   are equally short, so "shorter arc" is ambiguous. The wrap below always
-*   normalizes a signed delta of exactly +-pi to -pi (see the comment on
-*   the wrap), which picks one direction consistently rather than depending
+`;
+const strata = {
+	id: "strata",
+	label: "Strata",
+	fragment: FRAGMENT$2,
+	params: [
+		{
+			key: "scale",
+			label: "Scale",
+			min: .4,
+			max: 2.5,
+			step: .05,
+			default: 1
+		},
+		{
+			key: "layers",
+			label: "Layers",
+			min: 3,
+			max: 16,
+			step: 1,
+			default: 7
+		},
+		{
+			key: "warp",
+			label: "Warp",
+			min: 0,
+			max: 1,
+			step: .01,
+			default: .5
+		},
+		{
+			key: "ridges",
+			label: "Ridges",
+			min: 0,
+			max: 1,
+			step: .01,
+			default: .25
+		},
+		{
+			key: "stretch",
+			label: "Stretch",
+			min: 0,
+			max: 1,
+			step: .01,
+			default: .2
+		},
+		{
+			key: "depth",
+			label: "Depth",
+			min: 0,
+			max: 1,
+			step: .01,
+			default: .6
+		},
+		{
+			key: "blend",
+			label: "Blend",
+			min: 0,
+			max: 1,
+			step: .01,
+			default: .15
+		},
+		{
+			key: "angle",
+			label: "Light",
+			min: 0,
+			max: 360,
+			step: 1,
+			default: 125
+		},
+		{
+			key: "grain",
+			label: "Grain",
+			min: 0,
+			max: .3,
+			step: .01,
+			default: .06
+		}
+	],
+	randomParams(rand) {
+		return {
+			scale: .6 + rand() * 1.2000000000000002,
+			layers: Math.floor(4 + rand() * 9),
+			warp: rand() * 1,
+			ridges: rand() * 1,
+			stretch: rand() * rand(),
+			depth: .35 + rand() * .65,
+			blend: rand() * .6,
+			angle: Math.floor(rand() * 360),
+			grain: .06
+		};
+	}
+};
+
+//#endregion
+//#region src/shaders/dune.ts
+const FRAGMENT$1 = `
+uniform float u_layers;
+uniform float u_swell;
+uniform float u_waves;
+uniform float u_fade;
+uniform float u_soft;
+uniform float u_angle;
+uniform float u_grain;
+
+${GRAIN}
+${ISO}
+${LOOP_ANGLE}
+${SEED}
+
+const float PI = 3.14159265;
+
+void main() {
+  vec2 uv = worldUv();
+  vec2 iso = isoCoord(uv);
+  vec2 halfIso = isoHalf();
+
+  // Layer frame: x runs along the crests, y is "up", normalised so the
+  // visible frame spans y = -1..1 at every angle and aspect.
+  float ang = u_angle * PI / 180.0;
+  vec2 ax = vec2(cos(ang), sin(ang));
+  vec2 ay = vec2(-ax.y, ax.x);
+  float spanY = halfIso.x * abs(ay.x) + halfIso.y * abs(ay.y);
+  float x = dot(iso, ax);
+  float y = dot(iso, ay) / spanY;
+
+  float n = floor(u_layers + 0.5);
+  float a1 = loopAngle(0.22);
+  float a2 = loopAngle(0.36);
+  float k = PI * u_waves;
+
+  float pixel = 2.0 * halfIso.y / u_resolution.y / spanY;
+  float w = pixel + u_soft * 0.22;
+
+  // Sky: the first stop, itself graded a little so it is not a flat fill.
+  vec3 color = palette(0.04 * (1.0 - y));
+
+  for (int li = 0; li < 12; li++) {
+    float i = float(li);
+    if (i >= n) break;
+
+    float h1 = seedHash(i * 3.0 + 1.0);
+    float h2 = seedHash(i * 3.0 + 2.0);
+    float h3 = seedHash(i * 3.0 + 3.0);
+
+    // Crest baselines spread from near the top to near the bottom.
+    float base = mix(0.72, -0.8, i / max(n - 1.0, 1.0));
+    float fi = k * (0.75 + 0.5 * h1);
+    float dir = h3 < 0.5 ? -1.0 : 1.0;
+    float edge = base + u_swell * 0.5 * (0.6 * sin(fi * x + h2 * TAU + dir * a1)
+                                       + 0.4 * sin(fi * 1.7 * x + h3 * TAU - a2));
+
+    float depth = edge - y;
+    float coverage = smoothstep(-w, w, depth);
+
+    float ti = (i + 1.0) / n;
+    float body = 1.0 - exp(-max(depth, 0.0) / 0.3);
+    // Lengthwise drift: the crest colour wanders a third of a stop along x.
+    float along = 0.35 * sin(x * 1.1 + h1 * TAU + dir * a2);
+    float t = ti + (along - u_fade * 1.15 * body) / n;
+
+    color = mix(color, palette(clamp(t, 0.0, 1.0)), coverage);
+  }
+
+  float g = grain(uv, u_time) - 0.5;
+  color += g * u_grain;
+
+  gl_FragColor = vec4(clamp(color, 0.0, 1.0), 1.0);
+}
+`;
+const dune = {
+	id: "dune",
+	label: "Dune",
+	fragment: FRAGMENT$1,
+	params: [
+		{
+			key: "layers",
+			label: "Layers",
+			min: 2,
+			max: 12,
+			step: 1,
+			default: 6
+		},
+		{
+			key: "swell",
+			label: "Swell",
+			min: 0,
+			max: 1.6,
+			step: .01,
+			default: .7
+		},
+		{
+			key: "waves",
+			label: "Waves",
+			min: .3,
+			max: 5,
+			step: .05,
+			default: 1.4
+		},
+		{
+			key: "fade",
+			label: "Fade",
+			min: 0,
+			max: 1.5,
+			step: .01,
+			default: .9
+		},
+		{
+			key: "soft",
+			label: "Soft",
+			min: 0,
+			max: 1,
+			step: .01,
+			default: .02
+		},
+		{
+			key: "angle",
+			label: "Angle",
+			min: 0,
+			max: 360,
+			step: 1,
+			default: 352
+		},
+		{
+			key: "grain",
+			label: "Grain",
+			min: 0,
+			max: .3,
+			step: .01,
+			default: .05
+		}
+	],
+	randomParams(rand) {
+		return {
+			layers: Math.floor(4 + rand() * 6),
+			swell: .4 + rand() * .7999999999999999,
+			waves: .7 + rand() * 2.0999999999999996,
+			fade: .6 + rand() * .7000000000000001,
+			soft: rand() < .75 ? rand() * .06 : .2 + rand() * .5,
+			angle: Math.floor((rand() < .7 ? -25 + rand() * 50 : rand() * 360) + 360) % 360,
+			grain: .05
+		};
+	}
+};
+
+//#endregion
+//#region src/shaders/whorl.ts
+const FRAGMENT = `
+uniform float u_blades;
+uniform float u_twist;
+uniform float u_depth;
+uniform float u_scale;
+uniform float u_wobble;
+uniform float u_x;
+uniform float u_y;
+uniform float u_grain;
+
+${SIMPLEX_2D}
+${GRAIN}
+${ISO}
+${LOOP_ANGLE}
+${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.0001);
+  float theta = atan(rel.y, rel.x);
+
+  float k = floor(u_blades + 0.5);
+  float rot = loopAngle(0.5) / k + seedHash(1.0) * TAU;
+
+  vec2 drift = loopDrift(0.035, vec2(1.0, 0.0));
+  float wob = u_wobble * 0.45 * snoise(p * 0.9 + seedOffset() + drift);
+
+  float u = k * ((theta - rot) + u_twist * log(r)) / TAU + wob;
+  float s = u - floor(u);
+
+  // One-pixel blend across the sawtooth's drop (see header, point 3).
+  float pixel = 2.0 * halfIso.y / u_resolution.y;
+  float aa = clamp(k * sqrt(1.0 + u_twist * u_twist) / (TAU * r) * pixel * 1.5, 0.0, 0.5);
+  s *= 1.0 - smoothstep(1.0 - aa, 1.0, s);
+
+  float core = smoothstep(0.0, 0.08, r);
+  float t = (1.0 - exp(-r / (0.6 * u_scale))) + u_depth * 0.5 * (s - 0.5) * core;
+  vec3 color = palette(clamp(t, 0.0, 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 whorl = {
+	id: "whorl",
+	label: "Whorl",
+	fragment: FRAGMENT,
+	params: [
+		{
+			key: "blades",
+			label: "Blades",
+			min: 2,
+			max: 24,
+			step: 1,
+			default: 9
+		},
+		{
+			key: "twist",
+			label: "Twist",
+			min: -3,
+			max: 3,
+			step: .05,
+			default: 1.1
+		},
+		{
+			key: "depth",
+			label: "Depth",
+			min: 0,
+			max: 1.5,
+			step: .01,
+			default: .8
+		},
+		{
+			key: "scale",
+			label: "Scale",
+			min: .3,
+			max: 3,
+			step: .05,
+			default: 1.2
+		},
+		{
+			key: "wobble",
+			label: "Wobble",
+			min: 0,
+			max: 1,
+			step: .01,
+			default: .4
+		},
+		{
+			key: "x",
+			label: "X",
+			min: -1.5,
+			max: 1.5,
+			step: .01,
+			default: -.55
+		},
+		{
+			key: "y",
+			label: "Y",
+			min: -1.5,
+			max: 1.5,
+			step: .01,
+			default: -.7
+		},
+		{
+			key: "grain",
+			label: "Grain",
+			min: 0,
+			max: .3,
+			step: .01,
+			default: .06
+		}
+	],
+	randomParams(rand) {
+		return {
+			blades: Math.floor(5 + rand() * 12),
+			twist: (rand() < .5 ? -1 : 1) * (.5 + rand() * 2),
+			depth: .5 + rand() * .7,
+			scale: .8 + rand() * 1.2,
+			wobble: rand() * .8,
+			x: -1.1 + rand() * 2.2,
+			y: -1.1 + rand() * 2.2,
+			grain: .06
+		};
+	}
+};
+
+//#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
+* light: a fine black/white checkerboard averaged in gamma space comes out
+* sRGB 128 where the eye (and a downscaled export) sees 188. */
+const COLOR_MATH = `
+vec3 toLinear(vec3 c) {
+  c = max(c, vec3(0.0));
+  return mix(c / 12.92, pow((c + 0.055) / 1.055, vec3(2.4)), step(vec3(0.04045), c));
+}
+vec3 toSrgb(vec3 c) {
+  c = max(c, vec3(0.0));
+  return mix(c * 12.92, 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055, step(vec3(0.0031308), c));
+}
+`;
+/**
+* Available to every effect stage.
+*
+* - `loopStep(rate)`: integer step counter for motion that jumps instead of
+*   gliding. Exactly periodic when looping, because it counts a whole number
+*   of steps per loop and u_time itself wraps at u_loop.
+* - `hash12` / `hash22`: Dave Hoskins' sine-free hashes. The classic
+*   fract(sin(x) * 43758.5) returns different values on different GPUs,
+*   which would make a saved design animate differently per machine.
+* - `luma`: Rec.709 weights on GAMMA-ENCODED sRGB, on purpose. Thresholding
+*   in gamma space is what every dither tool does and what users compare
+*   against; see SPEC-effects.md 9.1.
+*/
+const EFFECT_COMMON = `
+uniform vec2 u_refSize;       // frame size in reference pixels (16:9 = 1920x1080)
+uniform float u_outputScale;  // device pixels per reference pixel
+${COLOR_MATH}
+float loopStep(float rate) {
+  if (rate <= 0.0) return 0.0;
+  if (u_loop <= 0.0) return floor(u_time * rate);
+  float n = max(1.0, floor(rate * u_loop + 0.5));
+  return min(floor(u_time / u_loop * n), n - 1.0);
+}
+float hash12(vec2 p) {
+  vec3 p3 = fract(vec3(p.xyx) * 0.1031);
+  p3 += dot(p3, p3.yzx + 33.33);
+  return fract((p3.x + p3.y) * p3.z);
+}
+vec2 hash22(vec2 p) {
+  vec3 p3 = fract(vec3(p.xyx) * vec3(0.1031, 0.1030, 0.0973));
+  p3 += dot(p3, p3.yzx + 33.33);
+  return fract((p3.xx + p3.yz) * p3.zy);
+}
+float luma(vec3 c) {
+  return dot(c, vec3(0.2126, 0.7152, 0.0722));
+}
+`;
+/** Soft effects: one fragment per output pixel, reading the layer below. */
+const SOFT_PREAMBLE = `
+uniform sampler2D u_source;   // the layer below, frame size
+vec4 source(vec2 uv) { return texture2D(u_source, uv); }
+// This pixel in reference pixels, origin at the frame centre.
+vec2 refCoord() { return (gl_FragCoord.xy - 0.5 * u_resolution) / u_outputScale; }
+// Reference pixels back to 0-1 frame UV, for sampling u_source.
+vec2 refToUv(vec2 r) { return r * u_outputScale / u_resolution + 0.5; }
+`;
+/** Cell stage of a grid effect: one fragment per CELL. */
+const CELL_PREAMBLE = `
+uniform sampler2D u_source;   // cell source: one texel per cell, already averaged
+uniform vec2 u_gridSize;      // cols, rows
+uniform vec2 u_cellRef;       // cell size in reference pixels
+uniform float u_gridAngle;    // radians; 0 unless the effect uses a lattice
+// Integer cell coordinates with the origin at the grid (= frame) centre.
+// Index patterns by this, never by gl_FragCoord of the output.
+vec2 cellIndex() { return floor(gl_FragCoord.xy) - 0.5 * u_gridSize; }
+// The input picture averaged over this cell.
+vec4 cellSource() { return texture2D(u_source, (floor(gl_FragCoord.xy) + 0.5) / u_gridSize); }
+`;
+/**
+* Draw stage of a grid effect: one fragment per output pixel, reading the
+* cell buffer.
+*
+* coverage() is the default draw stage: exact area coverage of this output
+* pixel's footprint over the cells it touches, blended in linear light. It
+* is libretro's "pixellate" filter with gamma-correct blending. When a cell
+* spans a whole number of output pixels the footprint sits inside one cell
+* and the texel is returned untouched, so 1080p and 4K exports are exact
+* nearest-neighbour. 3x3 taps cover footprints up to 3 cells wide, i.e.
+* down to 0.5 output pixels per cell.
+*/
+const DRAW_PREAMBLE = `
+uniform sampler2D u_cells;    // cell buffer, NEAREST, sRGB-encoded
+uniform vec2 u_gridSize;
+uniform vec2 u_cellRef;
+uniform float u_gridAngle;    // radians; 0 unless the effect uses a lattice
+vec2 cellPx() { return u_cellRef * u_outputScale; }
+// Continuous cell coordinate of this output pixel: integer part is the cell
+// (0-based from the grid's bottom-left), fraction is the position inside it.
+// The angle branch is skipped for ordinary grids so their arithmetic, and
+// with it the exactness of whole-pixel cells, is untouched.
+vec2 cellCoordAt(vec2 fragCoord) {
+  vec2 p = fragCoord - 0.5 * u_resolution;
+  if (u_gridAngle != 0.0) {
+    float c = cos(u_gridAngle);
+    float s = sin(u_gridAngle);
+    p = vec2(c * p.x + s * p.y, -s * p.x + c * p.y);
+  }
+  return p / cellPx() + 0.5 * u_gridSize;
+}
+vec2 cellCoord() { return cellCoordAt(gl_FragCoord.xy); }
+vec2 cellIndexAt() { return floor(cellCoord()) - 0.5 * u_gridSize; }
+vec2 cellLocal() { return fract(cellCoord()); }
+// Raw cell-buffer texel for a centred cell index (as cellIndexAt returns).
+vec4 cellValue(vec2 index) {
+  vec2 k = clamp(index + 0.5 * u_gridSize, vec2(0.0), u_gridSize - 1.0);
+  return texture2D(u_cells, (k + 0.5) / u_gridSize);
+}
+vec3 coverage() {
+  vec2 c = cellCoord();
+  vec2 h = 0.5 / cellPx();
+  vec2 lo = c - h;
+  vec2 hi = c + h;
+  vec2 base = floor(c);
+  vec3 acc = vec3(0.0);
+  float wsum = 0.0;
+  vec3 best = vec3(0.0);
+  float bestW = -1.0;
+  for (int j = -1; j <= 1; j++) {
+    for (int i = -1; i <= 1; i++) {
+      vec2 k = base + vec2(float(i), float(j));
+      vec2 ov = max(vec2(0.0), min(hi, k + 1.0) - max(lo, k));
+      float w = ov.x * ov.y;
+      if (w <= 0.0) continue;
+      vec2 kk = clamp(k, vec2(0.0), u_gridSize - 1.0);
+      vec3 v = texture2D(u_cells, (kk + 0.5) / u_gridSize).rgb;
+      if (w > bestW) { bestW = w; best = v; }
+      acc += w * toLinear(v);
+      wsum += w;
+    }
+  }
+  // Footprint (almost) entirely inside one cell: return the texel itself
+  // rather than a decode/encode round trip of it.
+  if (bestW >= 0.9999 * 4.0 * h.x * h.y) return best;
+  return toSrgb(acc / wsum);
+}
+`;
+/** Draw stage used when a grid effect does not supply its own. */
+const COVERAGE_DRAW = `
+void main() {
+  gl_FragColor = vec4(coverage(), 1.0);
+}
+`;
+/**
+* Color modes, shared by Dither, Halftone and ASCII so the params and the
+* behaviour are identical across them:
+*
+* - source:  keep the source's colors (the effect still quantizes/masks them)
+* - duotone: tone 0 -> ink, tone 1 -> paper
+* - palette: tone -> the stack's palette ramp
+*
+* toneOf() is what "tone" means. Normally it is luma. In palette mode
+* directly over a GENERATOR it is instead the color's position on the
+* palette ramp, recovered by nearest-color search. A generator's colors came
+* from that ramp, so this hands each cell back the exact ramp coordinate the
+* generator used and the effect reproduces the gradient's own color layout.
+* Luma would only do that for palettes that happen to run dark to light; a
+* pink -> blue -> yellow palette would come out rearranged. Over media, or
+* over another effect, there is no ramp coordinate to recover and tone stays
+* luma (a gradient map).
+*
+* 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
+* large flat areas sit at an end stop, and 8-bit rounding would otherwise
+* leave them a hair inside the ramp and sprinkle them with the next level.
+*/
+const COLOR_MODE = `
+uniform float u_colorMode;
+uniform vec3 u_ink;
+uniform vec3 u_paper;
+uniform float u_invert;
+uniform float u_sourceIsRamp;   // 1 when this layer reads a generator directly
+float rampPosition(vec3 c) {
+  float best = 0.0;
+  float bd = 1e9;
+  for (int i = 0; i <= 32; i++) {
+    float t = float(i) / 32.0;
+    vec3 d = palette(t) - c;
+    float dd = dot(d, d);
+    if (dd < bd) { bd = dd; best = t; }
+  }
+  float lo = best - 1.0 / 32.0;
+  for (int i = 0; i <= 16; i++) {
+    float t = clamp(lo + float(i) / 256.0, 0.0, 1.0);
+    vec3 d = palette(t) - c;
+    float dd = dot(d, d);
+    if (dd < bd) { bd = dd; best = t; }
+  }
+  if (best > 1.0 - 1.5 / 256.0) return 1.0;
+  if (best < 1.5 / 256.0) return 0.0;
+  return best;
+}
+bool toneIsRamp() { return u_colorMode > 1.5 && u_sourceIsRamp > 0.5; }
+float toneOf(vec3 c) {
+  float t = toneIsRamp() ? rampPosition(c) : luma(c);
+  return u_invert > 0.5 ? 1.0 - t : t;
+}
+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). */
+function colorModeParams(opts) {
+	return [
+		{
+			key: "colorMode",
+			label: "Colors",
+			type: "enum",
+			options: [
+				{
+					value: "source",
+					label: "Source"
+				},
+				{
+					value: "duotone",
+					label: "Duotone"
+				},
+				{
+					value: "palette",
+					label: "Palette"
+				}
+			],
+			default: opts.mode
+		},
+		{
+			key: "ink",
+			label: "Ink",
+			type: "color",
+			default: opts.ink ?? "#111111",
+			when: {
+				key: "colorMode",
+				in: ["duotone"]
+			}
+		},
+		{
+			key: "paper",
+			label: "Paper",
+			type: "color",
+			default: opts.paper ?? "#f4f1ea",
+			...opts.paperAlways ? {} : { when: {
+				key: "colorMode",
+				in: ["duotone"]
+			} }
+		},
+		{
+			key: "invert",
+			label: "Invert",
+			type: "bool",
+			default: false
+		}
+	];
+}
+
+//#endregion
+//#region src/effects/blueNoise.ts
+const BLUE_NOISE_SIZE = 128;
+const BASE64 = "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";
+let cached = null;
+/** The tile's bytes, row-major, decoded once. */
+function blueNoiseBytes() {
+	if (cached) return cached;
+	const bin = atob(BASE64);
+	const out = new Uint8Array(bin.length);
+	for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i);
+	cached = out;
+	return out;
+}
+
+//#endregion
+//#region src/effects/dither.ts
+const CELL_FRAGMENT$2 = `
+uniform float u_pattern;
+uniform float u_levels;
+uniform float u_bias;
+uniform float u_linear;
+uniform float u_shimmer;
+uniform sampler2D u_noise;
+${COLOR_MODE}
+
+// Recursive Bayer matrices without bit operations (GLSL ES 1.0 has none).
+// bayer2 yields M/4 for the canonical 2x2 matrix [0 2; 3 1]; each larger
+// size interleaves a half-resolution copy. Verified against the canonical
+// 4x4 and 8x8 matrices value for value. The mod() keeps the square term
+// exact at any cell index and makes negative indices (the grid is centred on
+// the frame) tile correctly.
+float bayer2(vec2 a) {
+  a = mod(floor(a), 2.0);
+  return fract(a.x / 2.0 + a.y * a.y * 0.75);
+}
+#define bayer4(a) (bayer2(0.5 * (a)) * 0.25 + bayer2(a))
+#define bayer8(a) (bayer4(0.5 * (a)) * 0.25 + bayer2(a))
+
+// Centred thresholds: (M + 0.5) / N^2, strictly inside (0,1). The noise
+// texture gets the same treatment, since its raw 0 would otherwise never
+// fire and its raw 255 (= 1.0) would light pure black.
+float threshold(vec2 idx) {
+  if (u_pattern < 0.5) return bayer2(idx) + 0.5 / 4.0;
+  if (u_pattern < 1.5) return bayer4(idx) + 0.5 / 16.0;
+  if (u_pattern < 2.5) return bayer8(idx) + 0.5 / 64.0;
+  float v = texture2D(u_noise, (mod(idx, ${BLUE_NOISE_SIZE}.0) + 0.5) / ${BLUE_NOISE_SIZE}.0).r;
+  return (floor(v * 255.0 + 0.5) + 0.5) / 256.0;
+}
+
+// gammaTone: v is a gamma-encoded brightness, so the linear-light option
+// applies. A ramp position (see toneOf) is not a brightness and skips it.
+float quantize(float v, float t, bool gammaTone) {
+  float n = max(u_levels, 2.0) - 1.0;
+  v = clamp(v + u_bias, 0.0, 1.0);
+  // Optional linear-light thresholding: physically correct brightness, at
+  // the cost of starving dark gradients (sRGB 0-0.25 is linear 0-0.05, where
+  // a 4x4 matrix has no level at all). Off by default; see SPEC 9.1.
+  bool lin = gammaTone && u_linear > 0.5;
+  if (lin) v = toLinear(vec3(v)).r;
+  float q = floor(v * n + t) / n;
+  if (lin) q = toSrgb(vec3(q)).r;
+  return q;
+}
+
+void main() {
+  vec3 c = cellSource().rgb;
+
+  // Shimmer: every step, slide the whole pattern by a hashed whole number of
+  // cells. Each frame stays spatially identical (still Bayer, still blue
+  // noise); only its position jumps, which reads as film grain rather than
+  // as a crawling pattern. loopStep makes it exactly periodic.
+  vec2 idx = cellIndex();
+  if (u_shimmer > 0.0) {
+    idx += floor(hash22(vec2(loopStep(u_shimmer), u_seed) + 0.5) * ${BLUE_NOISE_SIZE}.0);
+  }
+  float t = threshold(idx);
+
+  vec3 color;
+  if (u_colorMode < 0.5) {
+    // Source colors: one shared threshold, quantized per channel.
+    if (u_invert > 0.5) c = 1.0 - c;
+    color = vec3(quantize(c.r, t, true), quantize(c.g, t, true), quantize(c.b, t, true));
+  } else {
+    color = colorize(quantize(toneOf(c), t, !toneIsRamp()), c);
+  }
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+const dither = {
+	id: "dither",
+	label: "Dither",
+	grid: {
+		cell: (p) => [p.size, p.size],
+		fragment: CELL_FRAGMENT$2
+	},
+	textures: [{
+		uniform: "u_noise",
+		key: () => "blue-noise",
+		build: () => ({
+			source: {
+				data: blueNoiseBytes(),
+				width: BLUE_NOISE_SIZE,
+				height: BLUE_NOISE_SIZE
+			},
+			filter: "nearest",
+			wrap: "repeat"
+		})
+	}],
+	params: [
+		{
+			key: "pattern",
+			label: "Pattern",
+			type: "enum",
+			options: [
+				{
+					value: "bayer2",
+					label: "Bayer 2x2"
+				},
+				{
+					value: "bayer4",
+					label: "Bayer 4x4"
+				},
+				{
+					value: "bayer8",
+					label: "Bayer 8x8"
+				},
+				{
+					value: "blueNoise",
+					label: "Blue noise"
+				}
+			],
+			default: "bayer4"
+		},
+		{
+			key: "size",
+			label: "Size",
+			min: 1,
+			max: 16,
+			step: 1,
+			default: 4
+		},
+		{
+			key: "levels",
+			label: "Levels",
+			min: 2,
+			max: 8,
+			step: 1,
+			default: 2
+		},
+		{
+			key: "bias",
+			label: "Bias",
+			min: -.5,
+			max: .5,
+			step: .01,
+			default: 0
+		},
+		{
+			key: "linear",
+			label: "Linear light",
+			type: "bool",
+			default: false
+		},
+		{
+			key: "shimmer",
+			label: "Shimmer",
+			min: 0,
+			max: 12,
+			step: 1,
+			default: 0
+		},
+		...colorModeParams({ mode: "source" })
+	],
+	randomParams(rand) {
+		const patterns = [
+			"bayer2",
+			"bayer4",
+			"bayer8",
+			"blueNoise"
+		];
+		const modes = [
+			"source",
+			"duotone",
+			"palette"
+		];
+		return {
+			pattern: patterns[Math.floor(rand() * patterns.length)],
+			size: Math.round(2 + rand() * 6),
+			levels: Math.round(2 + rand() * 3),
+			bias: 0,
+			linear: false,
+			shimmer: 0,
+			colorMode: modes[Math.floor(rand() * modes.length)],
+			ink: "#111111",
+			paper: "#f4f1ea",
+			invert: false
+		};
+	}
+};
+
+//#endregion
+//#region src/effects/halftone.ts
+const ROW = .8660254;
+const CELL_FRAGMENT$1 = `
+uniform float u_contrast;
+${COLOR_MODE}
+
+void main() {
+  vec3 sc = cellSource().rgb;
+
+  // 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.
+  vec3 color = sc;
+  if (u_colorMode > 1.5) color = palette(toneIsRamp() ? rampPosition(sc) : luma(sc));
+  else if (u_colorMode > 0.5) color = u_ink;
+
+  gl_FragColor = vec4(color, ink);
+}
+`;
+const DRAW_FRAGMENT$1 = `
+uniform float u_grid;
+uniform float u_shape;
+uniform float u_radius;
+uniform float u_softness;
+uniform float u_pulse;
+${COLOR_MODE}
+
+const float ROW = ${ROW};
+
+vec4 lattice(vec2 k) {
+  vec2 kk = clamp(k, vec2(0.0), u_gridSize - 1.0);
+  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) {
+  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).
+  vec2 unit = hex ? vec2(0.5, ROW) : vec2(1.0);
+  float stride = hex ? 2.0 : 1.0;
+  float j0 = floor(g.y);
+  float bestMask = 0.0;
+  vec3 bestInk = vec3(0.0);
+
+  for (int dj = -1; dj <= 1; dj++) {
+    float j = j0 + float(dj);
+    // Hex: lattice points sit where column + row is even.
+    float par = hex ? mod(j, 2.0) : 0.0;
+    float dy = (g.y - (j + 0.5)) * unit.y;
+
+    if (line) {
+      // Lines run along the lattice rows. Their width is interpolated between
+      // the two lattice points that bracket this pixel, so it varies smoothly
+      // instead of stepping once per cell.
+      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 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; }
+      continue;
+    }
+
+    float k0 = stride * floor((g.x - 0.5 - par) / stride + 0.5) + par;
+    for (int di = -1; di <= 1; di++) {
+      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;
+      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);
+      } else {
+        dist = max(abs(d.x), abs(d.y));
+        extent = 0.5 * sqrt(v.a);
+      }
+      extent = min(extent * u_radius * swell, 1.0);
+
+      // Coverage of a straight edge by a box is linear in the distance to
+      // it. Softness widens that ramp into a blur.
+      float ramp = aa + u_softness * extent;
+      float mask = extent <= 0.0 ? 0.0 : clamp((extent - dist) / ramp + 0.5, 0.0, 1.0);
+      if (mask > bestMask) { bestMask = mask; bestInk = v.rgb; }
+    }
+  }
+  return mix(toLinear(u_paper), toLinear(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
+  // edge pixel is curved and diagonal, and the error showed up as the
+  // preview disagreeing with its own downscaled export. Small shapes get
+  // 4x4 (they are the ones that need it, and a frame of small shapes is a
+  // small frame or a cheap one); large shapes get 2x2. Averaged in linear
+  // light, so fine dots in a small preview have the brightness of the export
+  // seen from afar.
+  float n = pitchRef * u_outputScale < 20.0 ? 4.0 : 2.0;
+  vec3 acc = vec3(0.0);
+  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);
+    }
+  }
+  gl_FragColor = vec4(toSrgb(acc / (n * n)), 1.0);
+}
+`;
+function cellOf$1(p) {
+	const size = p.size;
+	return p.grid === "hex" ? [size / 2, size * ROW] : [size, size];
+}
+const halftone = {
+	id: "halftone",
+	label: "Halftone",
+	fragment: DRAW_FRAGMENT$1,
+	grid: {
+		cell: cellOf$1,
+		lattice: (p) => ({ angle: p.angle }),
+		fragment: CELL_FRAGMENT$1
+	},
+	params: [
+		{
+			key: "grid",
+			label: "Grid",
+			type: "enum",
+			options: [{
+				value: "square",
+				label: "Square"
+			}, {
+				value: "hex",
+				label: "Hex"
+			}],
+			default: "square"
+		},
+		{
+			key: "shape",
+			label: "Shape",
+			type: "enum",
+			options: [
+				{
+					value: "dot",
+					label: "Dot"
+				},
+				{
+					value: "line",
+					label: "Line"
+				},
+				{
+					value: "square",
+					label: "Square"
+				}
+			],
+			default: "dot"
+		},
+		{
+			key: "size",
+			label: "Size",
+			min: 6,
+			max: 160,
+			step: .5,
+			default: 28
+		},
+		{
+			key: "angle",
+			label: "Angle",
+			min: 0,
+			max: 180,
+			step: 1,
+			default: 45
+		},
+		{
+			key: "radius",
+			label: "Radius",
+			min: .2,
+			max: 1.5,
+			step: .01,
+			default: 1
+		},
+		{
+			key: "softness",
+			label: "Softness",
+			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
+		},
+		...colorModeParams({
+			mode: "duotone",
+			paperAlways: true
+		})
+	],
+	randomParams(rand) {
+		const shapes = [
+			"dot",
+			"dot",
+			"line",
+			"square"
+		];
+		const modes = [
+			"source",
+			"duotone",
+			"palette"
+		];
+		return {
+			grid: rand() < .5 ? "square" : "hex",
+			shape: shapes[Math.floor(rand() * shapes.length)],
+			size: Math.round(14 + rand() * 50),
+			angle: Math.round(rand() * 180),
+			radius: .8 + rand() * .5,
+			softness: rand() < .7 ? 0 : rand() * .5,
+			contrast: 1,
+			pulse: 0,
+			colorMode: modes[Math.floor(rand() * modes.length)],
+			ink: "#111111",
+			paper: "#f4f1ea",
+			invert: false
+		};
+	}
+};
+
+//#endregion
+//#region src/effects/asciiAtlas.ts
+/** Cell width / height. Close to a monospace font's advance at line-height 1.2. */
+const CELL_ASPECT = .6;
+/** Glyphs are measured, and by default rasterized, at this cell height. */
+const MEASURE_HEIGHT = 64;
+const MAX_GLYPH_HEIGHT = 256;
+const CHARSETS = {
+	standard: " .:-=+*#%@",
+	dense: " .'`^\",:;Il!i><~+_-?][}{1)(|\\/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$",
+	minimal: " .:oO@",
+	binary: " 01",
+	katakana: " ｦｧｨｩｪｫｬｭｮｯｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝ",
+	blocks: "012345"
+};
+const BLOCK_LEVELS = [
+	0,
+	.12,
+	.28,
+	.48,
+	.72,
+	1
+];
+function cellWidth(height) {
+	return Math.max(2, Math.round(height * CELL_ASPECT));
+}
+/** Font size and baseline that fit the font's full line box (not any single
+* glyph's bounding box) into a cell. One shared baseline for every glyph:
+* centring each glyph on its own bounds would float "." and "_" to mid-cell. */
+function fitFont(ctx, fontFamily, width, height) {
+	ctx.font = `100px ${fontFamily}`;
+	const m = ctx.measureText("M");
+	const ascent = (m.fontBoundingBoxAscent || 80) / 100;
+	const descent = (m.fontBoundingBoxDescent || 20) / 100;
+	const advance = (m.width || 60) / 100;
+	const fontPx = Math.min(height / (ascent + descent), width / advance);
+	return {
+		fontPx,
+		baseline: (height - (ascent + descent) * fontPx) / 2 + ascent * fontPx
+	};
+}
+/** Draws one glyph, white on transparent, into the cell at (x, y). A glyph
+* wider than the cell (a fallback font for katakana, say) is squeezed to fit
+* rather than clipped. */
+function drawGlyph(ctx, info, index, x, y, w, h, metrics) {
+	ctx.fillStyle = "#ffffff";
+	if (info.procedural) {
+		const k = Math.sqrt(BLOCK_LEVELS[index]);
+		ctx.fillRect(x + w * (1 - k) / 2, y + h * (1 - k) / 2, w * k, h * k);
+		return;
+	}
+	const ch = info.glyphs[index];
+	const advance = ctx.measureText(ch).width;
+	ctx.save();
+	ctx.beginPath();
+	ctx.rect(x, y, w, h);
+	ctx.clip();
+	ctx.translate(x + w / 2, y + metrics.baseline);
+	if (advance > w) ctx.scale(w / advance, 1);
+	ctx.textAlign = "center";
+	ctx.textBaseline = "alphabetic";
+	ctx.fillText(ch, 0, 0);
+	ctx.restore();
+}
+/** A transparent canvas. Text drawn on an OPAQUE canvas can get LCD subpixel
+* antialiasing, which would bake color fringes into the atlas; on a
+* transparent one browsers fall back to grayscale, and we read alpha only. */
+function makeCanvas(width, height) {
+	const canvas = document.createElement("canvas");
+	canvas.width = width;
+	canvas.height = height;
+	const ctx = canvas.getContext("2d", { willReadFrequently: true });
+	if (!ctx) throw new Error("[instantshader] 2D context unavailable for the ASCII atlas");
+	return [canvas, ctx];
+}
+/** Sorts by coverage, drops near-duplicates, normalizes to the densest.
+* Exported for tests. */
+function orderByCoverage(glyphs, raw) {
+	const order = glyphs.map((g, i) => ({
+		g,
+		c: raw[i]
+	})).sort((a, b) => a.c - b.c);
+	const max = Math.max(order[order.length - 1]?.c ?? 0, 1e-6);
+	const out = [];
+	for (const e of order) {
+		const c = e.c / max;
+		if (out.length > 0 && c - out[out.length - 1].c < .004) continue;
+		out.push({
+			g: e.g,
+			c
+		});
+	}
+	return {
+		glyphs: out.map((e) => e.g),
+		coverage: out.map((e) => e.c)
+	};
+}
+const infoCache = /* @__PURE__ */ new Map();
+/** The charset's glyphs ordered by measured ink coverage. Cached per
+* charset + font: this is the frozen ordering the spec asks for. */
+function charsetInfo(charset, fontFamily) {
+	const key = `${charset}|${fontFamily}`;
+	const hit = infoCache.get(key);
+	if (hit) return hit;
+	let info;
+	if (charset === "blocks") info = {
+		glyphs: CHARSETS.blocks.split(""),
+		coverage: BLOCK_LEVELS.slice(),
+		procedural: true
+	};
+	else {
+		const chars = Array.from(new Set(Array.from(CHARSETS[charset] ?? CHARSETS.standard)));
+		const h = MEASURE_HEIGHT;
+		const w = cellWidth(h);
+		const [, ctx] = makeCanvas(w, h);
+		const metrics = fitFont(ctx, fontFamily, w, h);
+		ctx.font = `${metrics.fontPx}px ${fontFamily}`;
+		const probe = {
+			glyphs: chars,
+			coverage: [],
+			procedural: false
+		};
+		const alphaOf = (index) => {
+			ctx.clearRect(0, 0, w, h);
+			drawGlyph(ctx, probe, index, 0, 0, w, h, metrics);
+			const rgba = ctx.getImageData(0, 0, w, h).data;
+			const a = new Uint8ClampedArray(w * h);
+			for (let i = 0; i < a.length; i++) a[i] = rgba[i * 4 + 3];
+			return a;
+		};
+		probe.glyphs = [...chars, "￿"];
+		const tofu = alphaOf(chars.length);
+		probe.glyphs = chars;
+		const kept = [];
+		const raw = [];
+		chars.forEach((ch, i) => {
+			const a = alphaOf(i);
+			let sum = 0;
+			let same = true;
+			for (let p = 0; p < a.length; p++) {
+				sum += a[p];
+				if (a[p] !== tofu[p]) same = false;
+			}
+			if (same && ch !== " " && sum > 0) return;
+			kept.push(ch);
+			raw.push(sum / (255 * a.length));
+		});
+		if (kept.length < 2) info = charset === "standard" ? {
+			glyphs: [" ", "#"],
+			coverage: [0, 1],
+			procedural: false
+		} : charsetInfo("standard", fontFamily);
+		else info = {
+			...orderByCoverage(kept, raw),
+			procedural: false
+		};
+	}
+	infoCache.set(key, info);
+	return info;
+}
+/**
+* The tone -> glyph lookup: 256x1 RGBA, one texel per 8-bit tone.
+* R = index of the densest glyph not denser than the tone, G = the next
+* glyph up, B = how far the tone sits between the two. Placing glyphs by
+* their measured coverage, not by their position in the list, is what keeps
+* tone even when a ramp's steps are not. Exported for tests.
+*/
+function toneLookup(coverage) {
+	const out = new Uint8Array(256 * 4);
+	const last = coverage.length - 1;
+	let lo = 0;
+	for (let i = 0; i < 256; i++) {
+		const v = i / 255;
+		while (lo < last && coverage[lo + 1] <= v) lo++;
+		const hi = Math.min(lo + 1, last);
+		const span = coverage[hi] - coverage[lo];
+		const f = span > 0 ? Math.min(1, Math.max(0, (v - coverage[lo]) / span)) : 0;
+		out[i * 4] = lo;
+		out[i * 4 + 1] = hi;
+		out[i * 4 + 2] = Math.round(f * 255);
+		out[i * 4 + 3] = 255;
+	}
+	return out;
+}
+/** Height glyphs are rasterized at for a given output cell height. Cells
+* under 64px all share the 64px atlas and the shader minifies it with a box
+* of taps, so a small preview shows the SAME letterforms as the export,
+* filtered, instead of separately hinted 11px ones. */
+function atlasGlyphHeight(cellPxHeight) {
+	if (cellPxHeight <= MEASURE_HEIGHT) return MEASURE_HEIGHT;
+	return Math.min(MAX_GLYPH_HEIGHT, Math.round(cellPxHeight));
+}
+function buildAtlas(charset, fontFamily, glyphHeight$1) {
+	const info = charsetInfo(charset, fontFamily);
+	const count = info.glyphs.length;
+	const gh = glyphHeight$1;
+	const gw = cellWidth(gh);
+	const cw = gw + 2;
+	const chh = gh + 2;
+	const cols = Math.ceil(Math.sqrt(count));
+	const rows = Math.ceil(count / cols);
+	const [canvas, ctx] = makeCanvas(cols * cw, rows * chh);
+	const metrics = fitFont(ctx, fontFamily, gw, gh);
+	ctx.font = `${metrics.fontPx}px ${fontFamily}`;
+	for (let i = 0; i < count; i++) {
+		const x = i % cols * cw + 1;
+		const y = Math.floor(i / cols) * chh + 1;
+		drawGlyph(ctx, info, i, x, y, gw, gh, metrics);
+	}
+	return {
+		source: canvas,
+		filter: "linear",
+		wrap: "clamp",
+		uniforms: {
+			u_atlasGrid: [cols, rows],
+			u_atlasSize: [canvas.width, canvas.height],
+			u_glyphPx: [gw, gh],
+			u_glyphCount: count
+		}
+	};
+}
+
+//#endregion
+//#region src/effects/ascii.ts
+const CELL_FRAGMENT = `
+uniform float u_smooth;
+uniform float u_cycle;
+uniform float u_cycleAmount;
+uniform float u_glyphCount;
+uniform sampler2D u_lut;
+${COLOR_MODE}
+
+void main() {
+  vec3 sc = cellSource().rgb;
+  float tone = luma(sc);
+  if (u_invert > 0.5) tone = 1.0 - tone;
+
+  // 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.
+  vec4 l = texture2D(u_lut, vec2((floor(tone * 255.0 + 0.5) + 0.5) / 256.0, 0.5));
+  float lo = floor(l.r * 255.0 + 0.5);
+  float hi = floor(l.g * 255.0 + 0.5);
+  // Smooth: dither between the two neighbouring glyphs, so a gradient does
+  // not band into flat fields of one character. The threshold is a per-cell
+  // hash, not a Bayer matrix: with only ~10 glyphs an ordered pattern shows
+  // up as mechanical "%=%=%=" stripes, where noise reads as hand-set type.
+  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
+  // 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);
+  }
+
+  // Glyph color. Tone already lives in the glyph's density, so source colors
+  // are lifted most of the way to full brightness; using them as they are
+  // would darken every dark area twice.
+  vec3 color = sc;
+  if (u_colorMode < 0.5) {
+    float peak = max(max(sc.r, sc.g), max(sc.b, 1e-3));
+    color = mix(sc, sc / peak, 0.75);
+  } else if (u_colorMode < 1.5) {
+    color = u_ink;
+  } else {
+    color = palette(toneIsRamp() ? rampPosition(sc) : luma(sc));
+  }
+
+  gl_FragColor = vec4(color, glyph / 255.0);
+}
+`;
+const DRAW_FRAGMENT = `
+uniform sampler2D u_atlas;
+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}
+
+void main() {
+  vec4 cell = cellValue(cellIndexAt());
+  float glyph = floor(cell.a * 255.0 + 0.5);
+  vec2 slot = vec2(mod(glyph, u_atlasGrid.x), floor(glyph / u_atlasGrid.x));
+  // Top-left texel of the glyph, inside its one-texel gutter. The atlas is a
+  // canvas uploaded unflipped, so its row 0 is the top.
+  vec2 origin = slot * (u_glyphPx + 2.0) + 1.0;
+
+  // The atlas is rasterized at 64px or more and minified here by a box of
+  // LINEAR taps sized to this output pixel's footprint: a small preview sees
+  // the same letterforms as the export, filtered, rather than separately
+  // hinted tiny ones. One tap per atlas texel the pixel spans, up to 6x6.
+  vec2 local = cellLocal();
+  vec2 texelsPerPx = u_glyphPx / cellPx();
+  float n = clamp(ceil(max(texelsPerPx.x, texelsPerPx.y)), 1.0, 6.0);
+  float a = 0.0;
+  for (int j = 0; j < 6; j++) {
+    for (int i = 0; i < 6; i++) {
+      if (float(i) >= n || float(j) >= n) continue;
+      vec2 o = ((vec2(float(i), float(j)) + 0.5) / n - 0.5) / cellPx();
+      vec2 q = clamp(local + o, 0.0, 1.0);
+      vec2 texel = origin + vec2(q.x, 1.0 - q.y) * u_glyphPx;
+      a += texture2D(u_atlas, texel / u_atlasSize).a;
+    }
+  }
+  a /= n * n;
+
+  vec3 color = toSrgb(mix(toLinear(u_paper), toLinear(cell.rgb), a));
+  gl_FragColor = vec4(color, 1.0);
+}
+`;
+function cellOf(p) {
+	const size = p.size;
+	return [Math.max(1, Math.round(size * CELL_ASPECT)), size];
+}
+function glyphHeight(env) {
+	return atlasGlyphHeight(cellOf(env.params)[1] * env.outputScale);
+}
+const ascii = {
+	id: "ascii",
+	label: "ASCII",
+	fragment: DRAW_FRAGMENT,
+	grid: {
+		cell: cellOf,
+		fragment: CELL_FRAGMENT
+	},
+	textures: [{
+		uniform: "u_atlas",
+		key: (env) => `${env.params.charset}|${env.fontFamily}|${glyphHeight(env)}`,
+		build: (env) => buildAtlas(env.params.charset, env.fontFamily, glyphHeight(env))
+	}, {
+		uniform: "u_lut",
+		key: (env) => `${env.params.charset}|${env.fontFamily}`,
+		build: (env) => ({
+			source: {
+				data: toneLookup(charsetInfo(env.params.charset, env.fontFamily).coverage),
+				width: 256,
+				height: 1
+			},
+			filter: "nearest",
+			wrap: "clamp"
+		})
+	}],
+	params: [
+		{
+			key: "charset",
+			label: "Characters",
+			type: "enum",
+			options: [
+				{
+					value: "standard",
+					label: "Standard"
+				},
+				{
+					value: "dense",
+					label: "Dense"
+				},
+				{
+					value: "blocks",
+					label: "Blocks"
+				},
+				{
+					value: "minimal",
+					label: "Minimal"
+				},
+				{
+					value: "binary",
+					label: "Binary"
+				},
+				{
+					value: "katakana",
+					label: "Katakana"
+				}
+			],
+			default: "standard"
+		},
+		{
+			key: "size",
+			label: "Size",
+			min: 8,
+			max: 96,
+			step: 1,
+			default: 24
+		},
+		{
+			key: "smooth",
+			label: "Smooth",
+			type: "bool",
+			default: true
+		},
+		{
+			key: "cycle",
+			label: "Cycle",
+			min: 0,
+			max: 12,
+			step: 1,
+			default: 0
+		},
+		{
+			key: "cycleAmount",
+			label: "Cycle amount",
+			min: 0,
+			max: 1,
+			step: .01,
+			default: .3
+		},
+		...colorModeParams({
+			mode: "source",
+			ink: "#e8ffe8",
+			paper: "#000000",
+			paperAlways: true
+		})
+	],
+	randomParams(rand) {
+		const sets = [
+			"standard",
+			"dense",
+			"blocks",
+			"minimal",
+			"binary"
+		];
+		const modes = [
+			"source",
+			"duotone",
+			"palette"
+		];
+		return {
+			charset: sets[Math.floor(rand() * sets.length)],
+			size: Math.round(14 + rand() * 30),
+			smooth: true,
+			cycle: 0,
+			cycleAmount: .3,
+			colorMode: modes[Math.floor(rand() * modes.length)],
+			ink: "#e8ffe8",
+			paper: "#000000",
+			invert: false
+		};
+	}
+};
+
+//#endregion
+//#region src/registry.ts
+const shaders = [
+	flow,
+	beam,
+	bloom,
+	halo,
+	strata,
+	dune,
+	whorl
+];
+function getShader(id) {
+	return shaders.find((s) => s.id === id);
+}
+
+//#endregion
+//#region src/effectRegistry.ts
+const effects = [
+	pixelate,
+	dither,
+	halftone,
+	ascii
+];
+function getEffect(id) {
+	return effects.find((e) => e.id === id);
+}
+
+//#endregion
+//#region src/palette.ts
+/** Number of texels in the output ramp. Matches a typical 1D LUT texture size:
+* large enough that per-texel banding is invisible, small enough to upload
+* as a single texture row every time colors change. */
+const RAMP_SIZE = 1024;
+/**
+* Converts one sRGB channel (0-1, gamma-encoded) to linear light.
+* Piecewise per the sRGB spec: a linear segment near black avoids the
+* infinite slope a pure power curve would have at 0.
+*/
+function linearize(c) {
+	return c <= .04045 ? c / 12.92 : Math.pow((c + .055) / 1.055, 2.4);
+}
+/** Inverse of linearize(): linear light back to gamma-encoded sRGB (0-1). */
+function delinearize(c) {
+	return c <= .0031308 ? c * 12.92 : 1.055 * Math.pow(c, 1 / 2.4) - .055;
+}
+/**
+* sRGB -> OKLab, Björn Ottosson's method (https://bottosson.github.io/posts/oklab/).
+* Coefficients copied verbatim from that reference implementation —
+* do not hand-retype these, they are fitted constants, not derivable values.
+*
+* The two 3x3 matrices convert linear sRGB to an LMS-like cone response
+* space and then to the final Lab-like OKLab space; the cube root in
+* between is what makes the space perceptually uniform.
+*/
+function rgbToOklab(r, g, b) {
+	const lr = linearize(r), lg = linearize(g), lb = linearize(b);
+	const l_ = Math.cbrt(.4122214708 * lr + .5363325363 * lg + .0514459929 * lb);
+	const m_ = Math.cbrt(.2119034982 * lr + .6806995451 * lg + .1073969566 * lb);
+	const s_ = Math.cbrt(.0883024619 * lr + .2817188376 * lg + .6299787005 * lb);
+	return [
+		.2104542553 * l_ + .793617785 * m_ - .0040720468 * s_,
+		1.9779984951 * l_ - 2.428592205 * m_ + .4505937099 * s_,
+		.0259040371 * l_ + .7827717662 * m_ - .808675766 * s_
+	];
+}
+/**
+* OKLab -> sRGB, inverse of rgbToOklab. Same fitted-constant caveat as
+* above — do not hand-retype these coefficients.
+*/
+function oklabToRgb(L, a, b) {
+	const l_ = L + .3963377774 * a + .2158037573 * b;
+	const m_ = L - .1055613458 * a - .0638541728 * b;
+	const s_ = L - .0894841775 * a - 1.291485548 * b;
+	const l = l_ * l_ * l_, m = m_ * m_ * m_, s = s_ * s_ * s_;
+	return [
+		delinearize(4.0767416621 * l - 3.3077115913 * m + .2309699292 * s),
+		delinearize(-1.2684380046 * l + 2.6097574011 * m - .3413193965 * s),
+		delinearize(-.0041960863 * l - .7034186147 * m + 1.707614701 * s)
+	];
+}
+/**
+* OKLab -> OKLCh: rectangular (L, a, b) to polar (L, C, h). C is just the
+* distance of (a, b) from the achromatic origin; h is the angle, in
+* radians, measured the same way atan2 always does (range (-pi, pi]).
+*/
+function oklabToOklch(L, a, b) {
+	return [
+		L,
+		Math.hypot(a, b),
+		Math.atan2(b, a)
+	];
+}
+/**
+* OKLCh -> OKLab: polar back to rectangular, so the existing oklabToRgb
+* matrices can be reused unchanged instead of duplicating the LMS math for
+* a polar input.
+*/
+function oklchToOklab(L, C, h) {
+	return [
+		L,
+		C * Math.cos(h),
+		C * Math.sin(h)
+	];
+}
+/**
+* Chroma below which a hue angle is noise rather than signal. Near a=b=0,
+* atan2 is numerically unstable (its output can swing wildly for a tiny
+* change in a near-zero a or b), and perceptually a near-gray stop simply
+* doesn't have a hue to speak of. Below this threshold a stop is treated as
+* achromatic for interpolation purposes: see lerpHue().
+*
+* ~0.005 in OKLCh chroma units is comfortably below any stop actually used
+* for color (the lab palettes' least-saturated non-neutral stops sit at
+* 0.075+) and comfortably above float rounding noise from the hex -> OKLab
+* round trip.
+*/
+const ACHROMATIC_CHROMA = .005;
+const TAU = Math.PI * 2;
+/**
+* Interpolates hue from h0 toward h1 by fraction t, taking the SHORTER way
+* around the circle (e.g. 350deg -> 10deg moves +20deg through 0, not -340deg
+* backward through 180deg) instead of a plain linear lerp, which would sweep
+* through every intermediate hue on the long way round.
+*
+* Two edge cases handled explicitly:
+*
+* - Achromatic endpoint: if one side's chroma is below ACHROMATIC_CHROMA,
+*   its "hue" is meaningless (see the constant's comment), so it inherits
+*   the other endpoint's hue instead of contributing its own noisy angle.
+*   Concretely this means a gray-to-color segment holds a constant hue
+*   while only chroma ramps up, rather than spiraling through unrelated
+*   hues the gray's atan2 noise happened to produce. If both endpoints are
+*   achromatic the chosen hue is never visible: C stays near zero for the
+*   whole segment (it's lerped independently, from ~0 to ~0), so whatever
+*   angle comes out of cos/sin gets multiplied by ~0.
+* - Exact opposition (180 degrees apart): both directions around the circle
+*   are equally short, so "shorter arc" is ambiguous. The wrap below always
+*   normalizes a signed delta of exactly +-pi to -pi (see the comment on
+*   the wrap), which picks one direction consistently rather than depending
 *   on float rounding to break the tie.
 */
 function lerpHue(h0, c0, h1, c1, t) {
@@ -1056,7 +3066,7 @@ function lerpHue(h0, c0, h1, c1, t) {
 	return start + delta * t;
 }
 /** Parses a "#rrggbb" (or "rrggbb") hex string into 0-1 sRGB components. */
-function hexToRgb(hex) {
+function hexToRgb$1(hex) {
 	const h = hex.replace("#", "");
 	return [
 		parseInt(h.substring(0, 2), 16) / 255,
@@ -1082,7 +3092,7 @@ function buildPaletteRamp(colors) {
 	const stops = colors.length === 1 ? [colors[0], colors[0]] : colors;
 	const stopCount = stops.length;
 	const stopsOklch = stops.map((hex) => {
-		const [r, g, b] = hexToRgb(hex);
+		const [r, g, b] = hexToRgb$1(hex);
 		return oklabToOklch(...rgbToOklab(r, g, b));
 	});
 	const breakpoints = [];
@@ -1115,7 +3125,7 @@ function clamp255(v) {
 }
 
 //#endregion
-//#region src/renderer.ts
+//#region src/preamble.ts
 /**
 * GLSL preamble prepended to every shader's fragment source. Declares the
 * uniforms/varying every InstantShader shader can rely on, plus two helpers:
@@ -1231,35 +3241,29 @@ float loopFreq(float w) {
 }
 `;
 /** Fullscreen-triangle-strip vertex shader. Four vertices covering [-1,1]^2,
-* with v_uv carrying the matching 0-1 UV for the fragment shader. */
+* with v_uv carrying the matching 0-1 UV for the fragment shader.
+*
+* v_uv = u_uvMatrix * a_position + u_uvOffset. For every ordinary pass that
+* is (0.5, 0, 0, 0.5) and (0.5, 0.5), i.e. exactly the a_position * 0.5 + 0.5
+* this shader always computed. The stack changes it only while rendering a
+* source straight into a grid effect's cell buffer: that grid can overhang
+* the frame (partial cells at the edges) or be rotated (a halftone lattice),
+* and each cell has to see its own centre as v_uv. See gridUvTransform(). */
 const VERTEX_SHADER = `attribute vec2 a_position;
+uniform vec4 u_uvMatrix;
+uniform vec2 u_uvOffset;
 varying vec2 v_uv;
 void main() {
-  v_uv = a_position * 0.5 + 0.5;
+  v_uv = mat2(u_uvMatrix.xy, u_uvMatrix.zw) * a_position + u_uvOffset;
   gl_Position = vec4(a_position, 0.0, 1.0);
 }
 `;
-const QUAD_VERTICES = new Float32Array([
-	-1,
-	-1,
-	1,
-	-1,
-	-1,
-	1,
-	1,
-	1
-]);
-/** Non-negative modulo. JS's `%` is a remainder operator, not a mathematical
-* mod — `-5 % 100` is `-5`, not `95`. u_time/u_seed are documented to land
-* in [0, m), so a negative timeMs (e.g. from an out-of-range seek) or a
-* negative seed must still floor into that range rather than going negative
-* on the GPU. */
-function floorMod(value, m) {
-	return (value % m + m) % m;
-}
+
+//#endregion
+//#region src/gl.ts
 /** Compiles one shader stage, logging the info log and throwing on failure
-* so a broken ShaderDef fails loudly at mount time instead of rendering a
-* blank canvas. */
+* so a broken def fails loudly at mount time instead of rendering a blank
+* canvas. */
 function compileShader(gl, type, source) {
 	const shader = gl.createShader(type);
 	if (!shader) throw new Error("[instantshader] gl.createShader returned null");
@@ -1280,6 +3284,7 @@ function linkProgram(gl, vertexShader, fragmentShader) {
 	if (!program) throw new Error("[instantshader] gl.createProgram returned null");
 	gl.attachShader(program, vertexShader);
 	gl.attachShader(program, fragmentShader);
+	gl.bindAttribLocation(program, 0, "a_position");
 	gl.linkProgram(program);
 	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
 		const info = gl.getProgramInfoLog(program);
@@ -1291,6 +3296,323 @@ function linkProgram(gl, vertexShader, fragmentShader) {
 	}
 	return program;
 }
+function createProgram(gl, vertexSource, fragmentSource) {
+	const vs = compileShader(gl, gl.VERTEX_SHADER, vertexSource);
+	const fs = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
+	const program = linkProgram(gl, vs, fs);
+	gl.deleteShader(vs);
+	gl.deleteShader(fs);
+	const locs = /* @__PURE__ */ new Map();
+	return {
+		program,
+		loc(name) {
+			let l = locs.get(name);
+			if (l === void 0) {
+				l = gl.getUniformLocation(program, name);
+				locs.set(name, l);
+			}
+			return l;
+		},
+		dispose() {
+			gl.deleteProgram(program);
+		}
+	};
+}
+/**
+* Creates an RGBA8 render target. RGBA8 is the one format WebGL1 guarantees
+* is renderable. NPOT sizes are the norm here, which WebGL1 only allows with
+* CLAMP_TO_EDGE and no mipmaps.
+*/
+function createTarget(gl, width, height, filter) {
+	const maxTex = gl.getParameter(gl.MAX_TEXTURE_SIZE);
+	const maxRb = gl.getParameter(gl.MAX_RENDERBUFFER_SIZE);
+	const limit = Math.min(maxTex, maxRb);
+	if (width > limit || height > limit) throw new Error(`[instantshader] a ${width}x${height} render target exceeds this GPU's limit of ${limit}px (MAX_TEXTURE_SIZE ${maxTex}, MAX_RENDERBUFFER_SIZE ${maxRb})`);
+	const texture = gl.createTexture();
+	const framebuffer = gl.createFramebuffer();
+	if (!texture || !framebuffer) throw new Error("[instantshader] failed to allocate a render target");
+	const f = filter === "nearest" ? gl.NEAREST : gl.LINEAR;
+	gl.bindTexture(gl.TEXTURE_2D, texture);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, f);
+	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, f);
+	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+	gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+	gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+	const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
+	gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+	if (status !== gl.FRAMEBUFFER_COMPLETE) {
+		gl.deleteTexture(texture);
+		gl.deleteFramebuffer(framebuffer);
+		throw new Error(`[instantshader] ${width}x${height} framebuffer incomplete (status 0x${status.toString(16)})`);
+	}
+	return {
+		texture,
+		framebuffer,
+		width,
+		height
+	};
+}
+function deleteTarget(gl, target) {
+	if (!target) return;
+	gl.deleteTexture(target.texture);
+	gl.deleteFramebuffer(target.framebuffer);
+}
+
+//#endregion
+//#region src/grid.ts
+const REF_WIDTH = 1920;
+const REF_HEIGHT = 1080;
+/** Device pixels per reference pixel. 1 at 1920x1080, 2 at 3840x2160. */
+function outputScale(width, height) {
+	return Math.max(width / REF_WIDTH, height / REF_HEIGHT);
+}
+/**
+* The frame's size in reference pixels. The dominant axis is returned as the
+* exact constant rather than as width / (width / 1920): that round trip can
+* land on 1919.9999999 or 1920.0000001, and gridFor() takes a ceil of it.
+*/
+function refSize(width, height) {
+	if (width * REF_HEIGHT >= height * REF_WIDTH) return [REF_WIDTH, height * REF_WIDTH / width];
+	return [width * REF_HEIGHT / height, REF_HEIGHT];
+}
+/**
+* The grid a cell size produces on a frame. Centred on the frame with a cell
+* boundary at the centre, so cols and rows are always even and a different
+* aspect ratio crops the grid evenly. Depends on the frame's aspect ratio
+* and the cell size only, never on its pixel dimensions.
+*
+* Two flavours:
+*
+* - default: cells are whole reference pixels and axis-aligned, so that
+*   1080p-class and 4K-class exports get whole output pixels per cell.
+* - `lattice`: for effects that draw soft, antialiased shapes (halftone).
+*   The grid may be rotated and its pitch need not be whole, since nothing
+*   snaps to pixels; it is sized to cover the rotated frame plus a margin of
+*   two cells, because a shape can spill into its neighbours' cells.
+*/
+function gridFor(width, height, cell, lattice) {
+	const ref = refSize(width, height);
+	const s = outputScale(width, height);
+	if (!lattice) {
+		const nx$1 = Math.max(1, Math.round(cell[0]));
+		const ny$1 = Math.max(1, Math.round(cell[1]));
+		const cols$1 = 2 * Math.max(1, Math.ceil(ref[0] / (2 * nx$1) - 1e-6));
+		const rows$1 = 2 * Math.max(1, Math.ceil(ref[1] / (2 * ny$1) - 1e-6));
+		return {
+			cols: cols$1,
+			rows: rows$1,
+			cell: [nx$1, ny$1],
+			ref,
+			pxPerCell: [nx$1 * s, ny$1 * s],
+			angle: 0,
+			extent: [cols$1 * nx$1 / ref[0], rows$1 * ny$1 / ref[1]]
+		};
+	}
+	const nx = Math.max(.5, cell[0]);
+	const ny = Math.max(.5, cell[1]);
+	const angle = lattice.angle * Math.PI / 180;
+	const c = Math.abs(Math.cos(angle));
+	const sn = Math.abs(Math.sin(angle));
+	const hx = (c * ref[0] + sn * ref[1]) / 2;
+	const hy = (sn * ref[0] + c * ref[1]) / 2;
+	const cols = 2 * (Math.ceil(hx / nx - 1e-6) + 2);
+	const rows = 2 * (Math.ceil(hy / ny - 1e-6) + 2);
+	return {
+		cols,
+		rows,
+		cell: [nx, ny],
+		ref,
+		pxPerCell: [nx * s, ny * s],
+		angle,
+		extent: [cols * nx / ref[0], rows * ny / ref[1]]
+	};
+}
+/**
+* How the vertex shader must map the fullscreen quad so that, while rendering
+* INTO a grid's cell buffer, v_uv is each cell's centre in 0-1 frame UV:
+* v_uv = matrix * a_position + offset, with a_position in [-1,1]^2.
+* `cellU` / `cellV` are one cell's edge vectors in frame UV, for passes that
+* spread taps across the cell.
+*/
+function gridUvTransform(grid) {
+	const c = Math.cos(grid.angle);
+	const s = Math.sin(grid.angle);
+	const [nx, ny] = grid.cell;
+	const [rx, ry] = grid.ref;
+	const hx = grid.cols * nx / 2;
+	const hy = grid.rows * ny / 2;
+	return {
+		matrix: [
+			c * hx / rx,
+			s * hx / ry,
+			-s * hy / rx,
+			c * hy / ry
+		],
+		offset: [.5, .5],
+		cellU: [c * nx / rx, s * nx / ry],
+		cellV: [-s * ny / rx, c * ny / ry]
+	};
+}
+
+//#endregion
+//#region src/effectParams.ts
+const warned = /* @__PURE__ */ new Set();
+/** Logs once per distinct problem. A bad value arrives on every slider
+* drag and every frame otherwise. */
+function warnOnce(message) {
+	if (warned.has(message)) return;
+	warned.add(message);
+	console.warn(`[instantshader] ${message}`);
+}
+const HEX = /^#?[0-9a-fA-F]{6}$/;
+/** "#rrggbb" to gamma-encoded sRGB in 0-1, or null when malformed. */
+function hexToRgb(hex) {
+	if (!HEX.test(hex)) return null;
+	const h = hex.replace("#", "");
+	return [
+		parseInt(h.substring(0, 2), 16) / 255,
+		parseInt(h.substring(2, 4), 16) / 255,
+		parseInt(h.substring(4, 6), 16) / 255
+	];
+}
+function isValid(def, value) {
+	switch (def.type) {
+		case "enum": return typeof value === "string" && def.options.some((o) => o.value === value);
+		case "bool": return typeof value === "boolean";
+		case "color": return typeof value === "string" && HEX.test(value);
+		default: return typeof value === "number" && Number.isFinite(value);
+	}
+}
+/**
+* Builds a full param record (every key present) from a possibly partial
+* override map. A value of the wrong type, an unknown enum value or a
+* malformed color falls back to the param's default and warns once, so a
+* stale saved design degrades instead of throwing.
+*/
+function resolveEffectParams(def, overrides) {
+	const resolved = {};
+	for (const p of def.params) {
+		const value = overrides?.[p.key];
+		if (value === void 0) resolved[p.key] = p.default;
+		else if (isValid(p, value)) resolved[p.key] = value;
+		else {
+			warnOnce(`${def.id}.${p.key}: ignoring invalid value ${JSON.stringify(value)}`);
+			resolved[p.key] = p.default;
+		}
+	}
+	return resolved;
+}
+/**
+* What a resolved param becomes on the GPU: one float for float/enum/bool,
+* three for a color. Enums upload the option's index, which is what lets
+* their stored value stay a stable string.
+*/
+function paramUniform(def, value) {
+	switch (def.type) {
+		case "enum": return Math.max(0, def.options.findIndex((o) => o.value === value));
+		case "bool": return value ? 1 : 0;
+		case "color": return hexToRgb(value) ?? [
+			0,
+			0,
+			0
+		];
+		default: return value;
+	}
+}
+
+//#endregion
+//#region src/params.ts
+/** Builds a full param record (every ParamDef.key present) from a possibly
+* partial override map, falling back to each param's declared default. */
+function resolveParams(def, overrides) {
+	const resolved = {};
+	for (const paramDef of def.params) {
+		const value = overrides?.[paramDef.key];
+		resolved[paramDef.key] = value === void 0 ? paramDef.default : value;
+	}
+	return resolved;
+}
+
+//#endregion
+//#region src/stack.ts
+const QUAD_VERTICES = new Float32Array([
+	-1,
+	-1,
+	1,
+	-1,
+	-1,
+	1,
+	1,
+	1
+]);
+/** Media wider or taller than this is scaled down through a 2D canvas before
+* upload. 4096 is the texture size ~99.9% of WebGL1 devices support. */
+const MAX_MEDIA_SIZE = 4096;
+/**
+* Maps a 0-1 frame UV to the media and returns its color flattened over the
+* background. Y is flipped here instead of with UNPACK_FLIP_Y_WEBGL, and
+* alpha is flattened here instead of with UNPACK_PREMULTIPLY_ALPHA_WEBGL:
+* both pixel-store flags are unspecified for VideoFrame and deprecated for
+* non-DOM sources in Firefox.
+*/
+const MEDIA_SAMPLER = `
+uniform sampler2D u_media;
+uniform vec2 u_mediaScale;   // frame UV -> media UV, about the centre
+uniform vec3 u_background;
+vec3 pictureAt(vec2 uv) {
+  vec2 m = (uv - 0.5) * u_mediaScale + 0.5;
+  float inside = step(0.0, m.x) * step(m.x, 1.0) * step(0.0, m.y) * step(m.y, 1.0);
+  vec4 c = texture2D(u_media, vec2(m.x, 1.0 - m.y));
+  return mix(u_background, c.rgb, c.a * inside);
+}
+`;
+const FRAME_SAMPLER = `
+uniform sampler2D u_source;
+vec3 pictureAt(vec2 uv) { return texture2D(u_source, uv).rgb; }
+`;
+const MEDIA_FRAME_FRAGMENT = `precision highp float;
+varying vec2 v_uv;
+${MEDIA_SAMPLER}
+void main() { gl_FragColor = vec4(pictureAt(v_uv), 1.0); }
+`;
+/**
+* Averages a picture over each cell of a grid: the CELL SOURCE for a grid
+* effect that sits on media or on another effect. v_uv is remapped by the
+* vertex shader to span the grid's extent, so it is the cell's centre in
+* frame UV. The taps form a fixed pattern in picture space that does not
+* depend on the output size, which is what keeps the averages (and therefore
+* every threshold decision made from them) identical between preview and
+* export. Averaged in linear light.
+*/
+function cellAverageFragment(sampler, taps) {
+	return `precision highp float;
+varying vec2 v_uv;
+uniform vec2 u_cellU;        // one cell's edge vectors in frame UV (the grid
+uniform vec2 u_cellV;        // may be rotated, so they need not be axis-aligned)
+${COLOR_MATH}
+${sampler}
+void main() {
+  vec3 acc = vec3(0.0);
+  for (int j = 0; j < ${taps}; j++) {
+    for (int i = 0; i < ${taps}; i++) {
+      vec2 o = (vec2(float(i), float(j)) + 0.5) / ${taps}.0 - 0.5;
+      acc += toLinear(pictureAt(v_uv + o.x * u_cellU + o.y * u_cellV));
+    }
+  }
+  gl_FragColor = vec4(toSrgb(acc / ${taps * taps}.0), 1.0);
+}
+`;
+}
+/** Non-negative modulo. JS's `%` is a remainder operator, not a mathematical
+* mod — `-5 % 100` is `-5`, not `95`. u_time/u_seed are documented to land
+* in [0, m), so a negative timeMs (e.g. from an out-of-range seek) or a
+* negative seed must still floor into that range rather than going negative
+* on the GPU. */
+function floorMod(value, m) {
+	return (value % m + m) % m;
+}
 /** Normalizes a loop period to the "off" sentinel the GLSL side expects.
 * Non-finite and non-positive values all mean "don't loop", so callers can
 * pass through user input without pre-validating it. */
@@ -1298,30 +3620,32 @@ function normalizeLoop(seconds) {
 	if (seconds === void 0 || !Number.isFinite(seconds) || seconds <= 0) return 0;
 	return seconds;
 }
-function createRenderer(opts) {
-	const { canvas, shader } = opts;
+function mediaSize(media) {
+	const m = media;
+	return [m.videoWidth || m.naturalWidth || m.displayWidth || m.width || 1, m.videoHeight || m.naturalHeight || m.displayHeight || m.height || 1];
+}
+function createStackRenderer(opts) {
+	const { canvas } = opts;
 	let colors = opts.colors;
-	let params = opts.params;
-	const seed = opts.seed;
+	const seed = opts.seed ?? 0;
 	let loopSeconds = normalizeLoop(opts.loopSeconds);
+	const background = hexToRgb(opts.background ?? "#000000") ?? [
+		0,
+		0,
+		0
+	];
+	const fontFamily = opts.fontFamily ?? "ui-monospace, Menlo, Consolas, monospace";
 	const glOrNull = canvas.getContext("webgl", {
 		preserveDrawingBuffer: true,
 		antialias: false
 	});
 	if (!glOrNull) throw new Error("[instantshader] failed to acquire a WebGL context");
 	const gl = glOrNull;
-	const vertexShader = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
-	const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, BASE_UNIFORMS + shader.fragment);
-	const program = linkProgram(gl, vertexShader, fragmentShader);
-	gl.deleteShader(vertexShader);
-	gl.deleteShader(fragmentShader);
-	gl.useProgram(program);
 	const quadBuffer = gl.createBuffer();
 	gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
 	gl.bufferData(gl.ARRAY_BUFFER, QUAD_VERTICES, gl.STATIC_DRAW);
-	const positionLoc = gl.getAttribLocation(program, "a_position");
-	gl.enableVertexAttribArray(positionLoc);
-	gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);
+	gl.enableVertexAttribArray(0);
+	gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
 	const paletteTexture = gl.createTexture();
 	gl.bindTexture(gl.TEXTURE_2D, paletteTexture);
 	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
@@ -1334,85 +3658,444 @@ function createRenderer(opts) {
 		gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1024, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, ramp);
 	}
 	uploadPalette(colors);
-	const resolutionLoc = gl.getUniformLocation(program, "u_resolution");
-	const timeLoc = gl.getUniformLocation(program, "u_time");
-	const seedLoc = gl.getUniformLocation(program, "u_seed");
-	const loopLoc = gl.getUniformLocation(program, "u_loop");
-	const paletteLoc = gl.getUniformLocation(program, "u_palette");
-	const paramLocs = /* @__PURE__ */ new Map();
-	for (const paramDef of shader.params) paramLocs.set(paramDef.key, gl.getUniformLocation(program, `u_${paramDef.key}`));
-	function applyParams() {
-		for (const paramDef of shader.params) {
-			const loc = paramLocs.get(paramDef.key);
-			if (loc == null) continue;
-			const value = params[paramDef.key] ?? paramDef.default;
-			gl.uniform1f(loc, value);
+	let source = opts.source;
+	let generatorProgram = null;
+	let generatorParams = {};
+	let mediaTexture = null;
+	let mediaDims = [1, 1];
+	let mediaFrameProgram = null;
+	let mediaCellProgram = null;
+	let downsampleProgram = null;
+	function uploadMedia() {
+		if (source.kind !== "media") return;
+		let media = source.media;
+		let [w, h] = mediaSize(media);
+		if (Math.max(w, h) > MAX_MEDIA_SIZE) {
+			const k = MAX_MEDIA_SIZE / Math.max(w, h);
+			const scaled = document.createElement("canvas");
+			scaled.width = Math.max(1, Math.round(w * k));
+			scaled.height = Math.max(1, Math.round(h * k));
+			const ctx = scaled.getContext("2d");
+			if (!ctx) throw new Error("[instantshader] 2D context unavailable for media downscale");
+			ctx.drawImage(media, 0, 0, scaled.width, scaled.height);
+			media = scaled;
+			w = scaled.width;
+			h = scaled.height;
+		}
+		mediaDims = [w, h];
+		if (!mediaTexture) {
+			mediaTexture = gl.createTexture();
+			gl.bindTexture(gl.TEXTURE_2D, mediaTexture);
+			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
 		}
+		gl.bindTexture(gl.TEXTURE_2D, mediaTexture);
+		gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0);
+		gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 0);
+		gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, media);
 	}
-	function renderAt(timeMs) {
-		gl.viewport(0, 0, canvas.width, canvas.height);
-		gl.useProgram(program);
-		gl.uniform2f(resolutionLoc, canvas.width, canvas.height);
-		const timeSec = floorMod(timeMs / 1e3, loopSeconds > 0 ? loopSeconds : 1e3);
-		gl.uniform1f(timeLoc, timeSec);
-		gl.uniform1f(seedLoc, floorMod(seed, 100));
-		gl.uniform1f(loopLoc, loopSeconds);
-		gl.activeTexture(gl.TEXTURE0);
-		gl.bindTexture(gl.TEXTURE_2D, paletteTexture);
-		gl.uniform1i(paletteLoc, 0);
-		applyParams();
-		gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
-		gl.enableVertexAttribArray(positionLoc);
-		gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);
+	function applySource(next) {
+		const prev = source;
+		source = next;
+		if (next.kind === "generator") {
+			if (!generatorProgram || prev.kind !== "generator" || prev.shader !== next.shader) {
+				generatorProgram?.dispose();
+				generatorProgram = createProgram(gl, VERTEX_SHADER, BASE_UNIFORMS + next.shader.fragment);
+			}
+			generatorParams = resolveParams(next.shader, next.params);
+		} else uploadMedia();
+	}
+	applySource(opts.source);
+	let layers = [];
+	function effectSource(preamble, fragment) {
+		return BASE_UNIFORMS + EFFECT_COMMON + preamble + fragment;
+	}
+	function disposeLayer(state) {
+		state.soft?.dispose();
+		state.cell?.dispose();
+		state.draw?.dispose();
+		for (const t of state.textures) gl.deleteTexture(t.texture);
+	}
+	function buildLayer(layer) {
+		const def = layer.effect;
+		const state = {
+			def,
+			params: resolveEffectParams(def, layer.params),
+			enabled: layer.enabled ?? true,
+			soft: null,
+			cell: null,
+			draw: null,
+			textures: (def.textures ?? []).map((t) => ({
+				def: t,
+				key: "",
+				texture: null,
+				uniforms: {}
+			}))
+		};
+		if ((def.textures?.length ?? 0) > 4) throw new Error(`[instantshader] effect "${def.id}" declares more than 4 textures`);
+		if (def.grid) {
+			state.cell = createProgram(gl, VERTEX_SHADER, effectSource(CELL_PREAMBLE, def.grid.fragment));
+			state.draw = createProgram(gl, VERTEX_SHADER, effectSource(DRAW_PREAMBLE, def.fragment ?? COVERAGE_DRAW));
+		} else if (def.fragment) state.soft = createProgram(gl, VERTEX_SHADER, effectSource(SOFT_PREAMBLE, def.fragment));
+		else throw new Error(`[instantshader] effect "${def.id}" has neither a fragment nor a grid`);
+		return state;
+	}
+	function applyEffects(next) {
+		const built = [];
+		for (let i = 0; i < next.length; i++) {
+			const old = layers[i];
+			if (old && old.def === next[i].effect) {
+				old.params = resolveEffectParams(old.def, next[i].params);
+				old.enabled = next[i].enabled ?? true;
+				built.push(old);
+			} else built.push(buildLayer(next[i]));
+		}
+		for (let i = 0; i < layers.length; i++) if (!built.includes(layers[i])) disposeLayer(layers[i]);
+		layers = built;
+	}
+	applyEffects(opts.effects ?? []);
+	let frameTargets = [null, null];
+	const cellTargets = /* @__PURE__ */ new Map();
+	const cellTargetsUsed = /* @__PURE__ */ new Set();
+	function frameTarget(i) {
+		const t = frameTargets[i];
+		if (t && t.width === canvas.width && t.height === canvas.height) return t;
+		deleteTarget(gl, t);
+		const created = createTarget(gl, canvas.width, canvas.height, "linear");
+		frameTargets[i] = created;
+		return created;
+	}
+	function cellTargetPair(grid) {
+		const key = `${grid.cols}x${grid.rows}`;
+		cellTargetsUsed.add(key);
+		let pair = cellTargets.get(key);
+		if (!pair) {
+			pair = [createTarget(gl, grid.cols, grid.rows, "nearest"), createTarget(gl, grid.cols, grid.rows, "nearest")];
+			cellTargets.set(key, pair);
+		}
+		return pair;
+	}
+	/** Frees cell buffers the frame just rendered did not use, so dragging a
+	* size slider does not accumulate one pair per grid size visited. */
+	function pruneCellTargets() {
+		for (const [key, pair] of cellTargets) {
+			if (cellTargetsUsed.has(key)) continue;
+			deleteTarget(gl, pair[0]);
+			deleteTarget(gl, pair[1]);
+			cellTargets.delete(key);
+		}
+		cellTargetsUsed.clear();
+	}
+	let timeSec = 0;
+	function bindOutput(target) {
+		gl.bindFramebuffer(gl.FRAMEBUFFER, target ? target.framebuffer : null);
+		gl.viewport(0, 0, target ? target.width : canvas.width, target ? target.height : canvas.height);
+	}
+	function bindTexture(unit, texture) {
+		gl.activeTexture(gl.TEXTURE0 + unit);
+		gl.bindTexture(gl.TEXTURE_2D, texture);
+	}
+	const IDENTITY_UV = {
+		matrix: [
+			.5,
+			0,
+			0,
+			.5
+		],
+		offset: [.5, .5]
+	};
+	function useProgram(p, resolution, uv = IDENTITY_UV) {
+		gl.useProgram(p.program);
+		gl.uniform2f(p.loc("u_resolution"), resolution[0], resolution[1]);
+		gl.uniform1f(p.loc("u_time"), timeSec);
+		gl.uniform1f(p.loc("u_seed"), floorMod(seed, 100));
+		gl.uniform1f(p.loc("u_loop"), loopSeconds);
+		gl.uniform4f(p.loc("u_uvMatrix"), uv.matrix[0], uv.matrix[1], uv.matrix[2], uv.matrix[3]);
+		gl.uniform2f(p.loc("u_uvOffset"), uv.offset[0], uv.offset[1]);
+		bindTexture(0, paletteTexture);
+		gl.uniform1i(p.loc("u_palette"), 0);
+	}
+	function draw() {
 		gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 	}
-	function setColors(next) {
-		colors = next;
-		uploadPalette(colors);
+	function setMediaUniforms(p) {
+		if (source.kind !== "media") return;
+		const frameAspect = canvas.width / canvas.height;
+		const mediaAspect = mediaDims[0] / mediaDims[1];
+		const scale = ((source.fit ?? "cover") === "cover" ? frameAspect > mediaAspect : frameAspect < mediaAspect) ? [1, mediaAspect / frameAspect] : [frameAspect / mediaAspect, 1];
+		bindTexture(1, mediaTexture);
+		gl.uniform1i(p.loc("u_media"), 1);
+		gl.uniform2f(p.loc("u_mediaScale"), scale[0], scale[1]);
+		gl.uniform3f(p.loc("u_background"), background[0], background[1], background[2]);
+	}
+	function applyGeneratorParams(p) {
+		if (source.kind !== "generator") return;
+		for (const paramDef of source.shader.params) {
+			const loc = p.loc(`u_${paramDef.key}`);
+			if (loc == null) continue;
+			gl.uniform1f(loc, generatorParams[paramDef.key] ?? paramDef.default);
+		}
+	}
+	/** Source at frame size, into a frame target or (null) the canvas. */
+	function renderSourceToFrame(target) {
+		bindOutput(target);
+		if (source.kind === "generator") {
+			const p = generatorProgram;
+			useProgram(p, [canvas.width, canvas.height]);
+			applyGeneratorParams(p);
+		} else {
+			mediaFrameProgram ??= createProgram(gl, VERTEX_SHADER, MEDIA_FRAME_FRAGMENT);
+			useProgram(mediaFrameProgram, [canvas.width, canvas.height]);
+			setMediaUniforms(mediaFrameProgram);
+		}
+		draw();
+	}
+	/**
+	* Source straight into a cell buffer, skipping the frame-size render.
+	*
+	* A generator is simply evaluated once per cell. It is told the frame is
+	* `ref / cell` pixels large: the aspect ratio is unchanged, so the
+	* composition is identical, and generators that antialias an edge over
+	* "one pixel" now antialias over one cell, which is the correct area
+	* average. That resolution depends on the grid alone, so the cell values
+	* are the same at every output size. Grain is switched off for this pass.
+	*/
+	function renderSourceToCells(grid, target) {
+		bindOutput(target);
+		const uv = gridUvTransform(grid);
+		if (source.kind === "generator") {
+			const p = generatorProgram;
+			const n = Math.max(grid.cell[0], grid.cell[1]);
+			useProgram(p, [grid.ref[0] / n, grid.ref[1] / n], uv);
+			applyGeneratorParams(p);
+			gl.uniform1f(p.loc("u_grain"), 0);
+		} else {
+			mediaCellProgram ??= createProgram(gl, VERTEX_SHADER, cellAverageFragment(MEDIA_SAMPLER, 8));
+			const p = mediaCellProgram;
+			useProgram(p, [canvas.width, canvas.height], uv);
+			setMediaUniforms(p);
+			gl.uniform2f(p.loc("u_cellU"), uv.cellU[0], uv.cellU[1]);
+			gl.uniform2f(p.loc("u_cellV"), uv.cellV[0], uv.cellV[1]);
+		}
+		draw();
+	}
+	/** A frame-size layer output averaged into a cell buffer. */
+	function downsampleToCells(input, grid, target) {
+		bindOutput(target);
+		downsampleProgram ??= createProgram(gl, VERTEX_SHADER, cellAverageFragment(FRAME_SAMPLER, 4));
+		const p = downsampleProgram;
+		const uv = gridUvTransform(grid);
+		useProgram(p, [canvas.width, canvas.height], uv);
+		bindTexture(1, input.texture);
+		gl.uniform1i(p.loc("u_source"), 1);
+		gl.uniform2f(p.loc("u_cellU"), uv.cellU[0], uv.cellU[1]);
+		gl.uniform2f(p.loc("u_cellV"), uv.cellV[0], uv.cellV[1]);
+		draw();
 	}
-	function setParams(next) {
-		params = next;
+	function uploadTextureData(texture, data) {
+		gl.bindTexture(gl.TEXTURE_2D, texture);
+		const wrap = data.wrap === "repeat" ? gl.REPEAT : gl.CLAMP_TO_EDGE;
+		const filter = data.filter === "nearest" ? gl.NEAREST : gl.LINEAR;
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, wrap);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, wrap);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter);
+		gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
+		gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 0);
+		gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 0);
+		const src = data.source;
+		if ("data" in src && src.data instanceof Uint8Array) {
+			const format = src.data.length === src.width * src.height ? gl.LUMINANCE : gl.RGBA;
+			gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
+			gl.texImage2D(gl.TEXTURE_2D, 0, format, src.width, src.height, 0, format, gl.UNSIGNED_BYTE, src.data);
+			gl.pixelStorei(gl.UNPACK_ALIGNMENT, 4);
+		} else gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, src);
 	}
-	function setLoopSeconds(seconds) {
-		loopSeconds = normalizeLoop(seconds);
+	function layerGrid(state) {
+		const g = state.def.grid;
+		return gridFor(canvas.width, canvas.height, g.cell(state.params), g.lattice?.(state.params));
 	}
-	function resize(width, height) {
-		canvas.width = width;
-		canvas.height = height;
+	/** Rebuilds any of the layer's effect textures whose cache key changed. */
+	function syncTextures(state) {
+		if (state.textures.length === 0) return;
+		const env = {
+			params: state.params,
+			width: canvas.width,
+			height: canvas.height,
+			outputScale: outputScale(canvas.width, canvas.height),
+			fontFamily
+		};
+		for (const t of state.textures) {
+			const key = t.def.key(env);
+			if (t.texture && key === t.key) continue;
+			const data = t.def.build(env);
+			t.texture ??= gl.createTexture();
+			uploadTextureData(t.texture, data);
+			t.key = key;
+			t.uniforms = data.uniforms ?? {};
+		}
+	}
+	/** Effect uniforms: reference-frame info, the layer's params, its effect
+	* textures (units 3+) and whatever uniforms those textures declared. */
+	function applyEffectUniforms(p, state, grid, overGenerator) {
+		const ref = refSize(canvas.width, canvas.height);
+		gl.uniform1f(p.loc("u_sourceIsRamp"), overGenerator ? 1 : 0);
+		gl.uniform2f(p.loc("u_refSize"), ref[0], ref[1]);
+		gl.uniform1f(p.loc("u_outputScale"), outputScale(canvas.width, canvas.height));
+		if (grid) {
+			gl.uniform2f(p.loc("u_gridSize"), grid.cols, grid.rows);
+			gl.uniform2f(p.loc("u_cellRef"), grid.cell[0], grid.cell[1]);
+			gl.uniform1f(p.loc("u_gridAngle"), grid.angle);
+		}
+		for (const paramDef of state.def.params) {
+			const loc = p.loc(`u_${paramDef.key}`);
+			if (loc == null) continue;
+			const v = paramUniform(paramDef, state.params[paramDef.key]);
+			if (typeof v === "number") gl.uniform1f(loc, v);
+			else gl.uniform3f(loc, v[0], v[1], v[2]);
+		}
+		state.textures.forEach((t, i) => {
+			bindTexture(3 + i, t.texture);
+			gl.uniform1i(p.loc(t.def.uniform), 3 + i);
+			for (const [name, value] of Object.entries(t.uniforms)) {
+				const loc = p.loc(name);
+				if (loc == null) continue;
+				if (typeof value === "number") gl.uniform1f(loc, value);
+				else if (value.length === 2) gl.uniform2f(loc, value[0], value[1]);
+				else if (value.length === 3) gl.uniform3f(loc, value[0], value[1], value[2]);
+				else gl.uniform4f(loc, value[0], value[1], value[2], value[3]);
+			}
+		});
+	}
+	function renderAt(timeMs) {
+		timeSec = floorMod(timeMs / 1e3, loopSeconds > 0 ? loopSeconds : 1e3);
+		const active = layers.filter((l) => l.enabled);
+		if (active.length === 0) {
+			renderSourceToFrame(null);
+			return;
+		}
+		const frameSize = [canvas.width, canvas.height];
+		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) {
+				const grid = layerGrid(state);
+				const [cellIn, cellOut] = cellTargetPair(grid);
+				if (input === null) renderSourceToCells(grid, cellIn);
+				else downsampleToCells(input, grid, cellIn);
+				const cellProgram = state.cell;
+				bindOutput(cellOut);
+				useProgram(cellProgram, frameSize);
+				applyEffectUniforms(cellProgram, state, grid, overGenerator);
+				bindTexture(1, cellIn.texture);
+				gl.uniform1i(cellProgram.loc("u_source"), 1);
+				draw();
+				const out = last ? null : frameTarget(outIndex);
+				const drawProgram = state.draw;
+				bindOutput(out);
+				useProgram(drawProgram, frameSize);
+				applyEffectUniforms(drawProgram, state, grid, overGenerator);
+				bindTexture(2, cellOut.texture);
+				gl.uniform1i(drawProgram.loc("u_cells"), 2);
+				draw();
+				input = out;
+			} else {
+				if (input === null) {
+					input = frameTarget(0);
+					renderSourceToFrame(input);
+				}
+				const out = last ? null : frameTarget(input === frameTargets[0] ? 1 : 0);
+				const p = state.soft;
+				bindOutput(out);
+				useProgram(p, frameSize);
+				applyEffectUniforms(p, state, null, overGenerator);
+				bindTexture(1, input.texture);
+				gl.uniform1i(p.loc("u_source"), 1);
+				draw();
+				input = out;
+			}
+		});
+		pruneCellTargets();
 	}
 	function dispose() {
+		for (const state of layers) disposeLayer(state);
+		layers = [];
+		generatorProgram?.dispose();
+		mediaFrameProgram?.dispose();
+		mediaCellProgram?.dispose();
+		downsampleProgram?.dispose();
+		deleteTarget(gl, frameTargets[0]);
+		deleteTarget(gl, frameTargets[1]);
+		frameTargets = [null, null];
+		for (const pair of cellTargets.values()) {
+			deleteTarget(gl, pair[0]);
+			deleteTarget(gl, pair[1]);
+		}
+		cellTargets.clear();
+		gl.deleteTexture(mediaTexture);
 		gl.deleteTexture(paletteTexture);
-		gl.deleteProgram(program);
 		gl.deleteBuffer(quadBuffer);
 		gl.getExtension("WEBGL_lose_context")?.loseContext();
 	}
 	return {
 		renderAt,
-		setColors,
-		setParams,
-		setLoopSeconds,
-		resize,
+		setColors(next) {
+			colors = next;
+			uploadPalette(colors);
+		},
+		setSource(next) {
+			applySource(next);
+		},
+		setSourceParams(next) {
+			if (source.kind === "generator") generatorParams = next;
+		},
+		refreshMedia() {
+			uploadMedia();
+		},
+		setEffects(next) {
+			applyEffects(next);
+		},
+		setEffectParams(index, params) {
+			const state = layers[index];
+			if (!state) return;
+			state.params = resolveEffectParams(state.def, {
+				...state.params,
+				...params
+			});
+		},
+		setLoopSeconds(seconds) {
+			loopSeconds = normalizeLoop(seconds);
+		},
+		resize(width, height) {
+			canvas.width = width;
+			canvas.height = height;
+		},
+		getGridInfo() {
+			const info = [];
+			layers.forEach((state, index) => {
+				if (!state.enabled || !state.def.grid) return;
+				const grid = layerGrid(state);
+				info.push({
+					index,
+					cols: grid.cols,
+					rows: grid.rows,
+					pxPerCell: grid.pxPerCell
+				});
+			});
+			return info;
+		},
 		dispose
 	};
 }
 
-//#endregion
-//#region src/params.ts
-/** Builds a full param record (every ParamDef.key present) from a possibly
-* partial override map, falling back to each param's declared default. */
-function resolveParams(def, overrides) {
-	const resolved = {};
-	for (const paramDef of def.params) {
-		const value = overrides?.[paramDef.key];
-		resolved[paramDef.key] = value === void 0 ? paramDef.default : value;
-	}
-	return resolved;
-}
-
 //#endregion
 //#region src/mount.ts
 /**
-* Mounts a live, animated gradient into `container` and returns a handle to
+* Mounts a live, animated stack (a source plus effect layers) into `container` and returns a handle to
 * control it. Owns a canvas (sized to the container via ResizeObserver, DPR
 * capped at 2 to bound fill-rate cost on high-density displays) and a RAF
 * loop that runs ONLY while playing — the same lifecycle used by the
@@ -1427,24 +4110,23 @@ function resolveParams(def, overrides) {
 * callers may mount many simultaneously-paused instances (e.g. a screenshot
 * grid) that must never carry a perpetual 60fps draw loop each.
 */
-function mountGradient(container, opts) {
-	const def = opts.shader;
+function mountStack(container, opts) {
 	const canvas = document.createElement("canvas");
 	canvas.style.display = "block";
 	canvas.style.width = "100%";
 	canvas.style.height = "100%";
 	container.appendChild(canvas);
-	let colors = opts.colors;
-	let params = resolveParams(def, opts.params);
+	let source = opts.source;
 	let speed = opts.speed ?? 1;
-	const seed = opts.seed ?? 0;
-	const renderer = createRenderer({
+	const renderer = createStackRenderer({
 		canvas,
-		shader: def,
-		colors,
-		params,
-		seed,
-		loopSeconds: opts.loopSeconds
+		source,
+		effects: opts.effects,
+		colors: opts.colors,
+		seed: opts.seed ?? 0,
+		loopSeconds: opts.loopSeconds,
+		background: opts.background,
+		fontFamily: opts.fontFamily
 	});
 	let clockMs = 0;
 	let epoch = performance.now();
@@ -1471,36 +4153,71 @@ function mountGradient(container, opts) {
 		rafId = requestAnimationFrame(tick);
 	}
 	rafId = requestAnimationFrame(tick);
-	function applySize(cssWidth, cssHeight) {
-		const dpr = Math.min(window.devicePixelRatio || 1, 2);
-		const width = Math.max(1, Math.round(cssWidth * dpr));
-		const height = Math.max(1, Math.round(cssHeight * dpr));
+	/** Sets the backing store to an exact device-pixel size (DPR capped at 2). */
+	function applyDeviceSize(deviceWidth, deviceHeight) {
+		const dpr = window.devicePixelRatio || 1;
+		const cap = dpr > 2 ? 2 / dpr : 1;
+		const width = Math.max(1, Math.round(deviceWidth * cap));
+		const height = Math.max(1, Math.round(deviceHeight * cap));
 		if (canvas.width !== width || canvas.height !== height) {
 			renderer.resize(width, height);
 			if (!playing) renderOnce();
 		}
 	}
+	function applyCssSize(cssWidth, cssHeight) {
+		const dpr = window.devicePixelRatio || 1;
+		applyDeviceSize(cssWidth * dpr, cssHeight * dpr);
+	}
 	const initialRect = container.getBoundingClientRect();
-	applySize(initialRect.width || 1, initialRect.height || 1);
+	applyCssSize(initialRect.width || 1, initialRect.height || 1);
 	const resizeObserver = new ResizeObserver((entries) => {
-		for (const entry of entries) applySize(entry.contentRect.width, entry.contentRect.height);
+		for (const entry of entries) {
+			const device = entry.devicePixelContentBoxSize?.[0];
+			if (device) applyDeviceSize(device.inlineSize, device.blockSize);
+			else applyCssSize(entry.contentRect.width, entry.contentRect.height);
+		}
 	});
-	resizeObserver.observe(container);
+	try {
+		resizeObserver.observe(container, { box: "device-pixel-content-box" });
+	} catch {
+		resizeObserver.observe(container);
+	}
 	return {
 		canvas,
 		setColors(next) {
-			colors = next;
-			renderer.setColors(colors);
+			renderer.setColors(next);
+			if (!playing) renderOnce();
+		},
+		setSource(next) {
+			source = next;
+			renderer.setSource(next);
 			if (!playing) renderOnce();
 		},
-		setParams(next) {
-			params = {
-				...params,
-				...next
+		setSourceParams(next) {
+			if (source.kind !== "generator") return;
+			source = {
+				...source,
+				params: {
+					...resolveParams(source.shader, source.params),
+					...next
+				}
 			};
-			renderer.setParams(params);
+			renderer.setSourceParams(source.params);
 			if (!playing) renderOnce();
 		},
+		setEffects(next) {
+			renderer.setEffects(next);
+			if (!playing) renderOnce();
+		},
+		setEffectParams(index, next) {
+			renderer.setEffectParams(index, next);
+			if (!playing) renderOnce();
+		},
+		refreshMedia() {
+			renderer.refreshMedia();
+			if (!playing) renderOnce();
+		},
+		getGridInfo: renderer.getGridInfo,
 		setLoopSeconds(seconds) {
 			renderer.setLoopSeconds(seconds);
 			if (!playing) renderOnce();
@@ -1541,31 +4258,58 @@ function mountGradient(container, opts) {
 		}
 	};
 }
+/** mountStack() for the common case of one generator and no effects. */
+function mountGradient(container, opts) {
+	const handle = mountStack(container, {
+		source: {
+			kind: "generator",
+			shader: opts.shader,
+			params: opts.params
+		},
+		colors: opts.colors,
+		speed: opts.speed,
+		seed: opts.seed,
+		loopSeconds: opts.loopSeconds
+	});
+	return {
+		canvas: handle.canvas,
+		setColors: handle.setColors,
+		setParams: handle.setSourceParams,
+		setSpeed: handle.setSpeed,
+		setLoopSeconds: handle.setLoopSeconds,
+		pause: handle.pause,
+		resume: handle.resume,
+		seek: handle.seek,
+		getTimeMs: handle.getTimeMs,
+		dispose: handle.dispose
+	};
+}
 
 //#endregion
 //#region src/frame.ts
 /**
-* Renders a single frame into a detached (not-in-DOM) canvas at an exact
-* pixel size, for export/thumbnail use cases that need a synchronous
-* snapshot rather than a live animation.
+* Renders a single frame of a stack (a source plus effect layers) into a
+* detached (not-in-DOM) canvas at an exact pixel size, for export/thumbnail
+* use cases that need a synchronous snapshot rather than a live animation.
 *
 * The returned canvas is NOT disposed automatically — its GL context must
 * stay alive after this function returns so callers can scrape pixels from
 * it (toDataURL/toBlob/getImageData/drawImage). Once the caller is done
 * with it, release the GL context by calling the returned `dispose()`.
 */
-function renderGradientFrame(opts) {
-	const def = opts.shader;
+function renderStackFrame(opts) {
 	const canvas = document.createElement("canvas");
 	canvas.width = opts.width;
 	canvas.height = opts.height;
-	const renderer = createRenderer({
+	const renderer = createStackRenderer({
 		canvas,
-		shader: def,
+		source: opts.source,
+		effects: opts.effects,
 		colors: opts.colors,
-		params: resolveParams(def, opts.params),
 		seed: opts.seed ?? 0,
-		loopSeconds: opts.loopSeconds
+		loopSeconds: opts.loopSeconds,
+		background: opts.background,
+		fontFamily: opts.fontFamily
 	});
 	renderer.renderAt(opts.timeMs ?? 0);
 	const gl = canvas.getContext("webgl");
@@ -1578,6 +4322,46 @@ function renderGradientFrame(opts) {
 		dispose: renderer.dispose
 	};
 }
+/** renderStackFrame() for the common case of one generator and no effects. */
+function renderGradientFrame(opts) {
+	return renderStackFrame({
+		source: {
+			kind: "generator",
+			shader: opts.shader,
+			params: opts.params
+		},
+		colors: opts.colors,
+		seed: opts.seed,
+		timeMs: opts.timeMs,
+		loopSeconds: opts.loopSeconds,
+		width: opts.width,
+		height: opts.height
+	});
+}
+
+//#endregion
+//#region src/renderer.ts
+function createRenderer(opts) {
+	const stack = createStackRenderer({
+		canvas: opts.canvas,
+		source: {
+			kind: "generator",
+			shader: opts.shader,
+			params: opts.params
+		},
+		colors: opts.colors,
+		seed: opts.seed,
+		loopSeconds: opts.loopSeconds
+	});
+	return {
+		renderAt: stack.renderAt,
+		setColors: stack.setColors,
+		setParams: stack.setSourceParams,
+		setLoopSeconds: stack.setLoopSeconds,
+		resize: stack.resize,
+		dispose: stack.dispose
+	};
+}
 
 //#endregion
-export { beam, bloom, buildPaletteRamp, createRenderer, flow, getShader, mountGradient, renderGradientFrame, shaders };
+export { ascii, beam, bloom, buildPaletteRamp, createRenderer, createStackRenderer, dither, dune, effects, flow, getEffect, getShader, gridFor, halftone, halo, mountGradient, mountStack, pixelate, renderGradientFrame, renderStackFrame, shaders, strata, whorl };