instantshader 0.6.0 → 0.7.0

package/README.md

@@ -3,7 +3,8 @@
 # instantshader
 
 Animated WebGL gradient shaders with zero dependencies. Mount a live, resizable
-gradient into any DOM element, or render a single frame to a detached canvas
+gradient into any DOM element, put dither, pixelate, halftone or ASCII effects
+over it or over your own image, or render a single frame to a detached canvas
 for export pipelines. Built by [InstantGradient](https://instantgradient.com/app).
 
 ## Install
@@ -39,6 +40,10 @@ tree-shake away.
 | `strata` | Stacked cut-paper sheets, one per palette step, each casting a soft shadow on the one below. `ridges` and `stretch` reshape the relief itself, from round islands to branching spines to long agate bands. | `scale`, `layers`, `warp`, `ridges`, `stretch`, `depth`, `blend`, `angle`, `grain` |
 | `dune` | Overlapping crests rolling across the frame, back to front. Each has one crisp top edge and airbrushes away below it; neighbouring crests slide against each other. | `layers`, `swell`, `waves`, `fade`, `soft`, `angle`, `grain` |
 | `whorl` | A logarithmic spiral of curved blades, each with one sharp leading edge and a soft fade behind it. `x` / `y` place the centre anywhere, including off-frame. | `blades`, `twist`, `depth`, `scale`, `wobble`, `x`, `y`, `grain` |
+| `silk` | Satin folds lit from one side, with an anisotropic sheen that streaks along the threads. The palette is printed on the cloth; light only reveals the relief. | `scale`, `folds`, `depth`, `warp`, `sheen`, `light`, `grain` |
+| `nacre` | Glassy liquid folds whose colour walks through the neighbouring palette stops on every slope, the way mother of pearl shifts with the viewing angle. Only ever shows the ramp's own colours. | `scale`, `flow`, `crease`, `depth`, `iridescence`, `light`, `grain` |
+| `burst` | Thin grainy rays out of one point, each ray its own stop, streaming outward in packets, from a dark tunnel to a white-hot star, straight or twisted into a pinwheel. | `rays`, `sharp`, `glow`, `twist`, `x`, `y`, `grain` |
+| `glint` | A shoal of small angular shards streaming along one curved current on dark, spinning and flashing, each edge fringed with colour. The only particle look. | `size`, `density`, `bend`, `angle`, `speed`, `grain` |
 
 Previews of every look, with full param ranges, are in the
 [repository README](https://github.com/ugolbck/instantshader#readme).
@@ -51,20 +56,22 @@ import { mountGradient, bloom } from "instantshader";
 mountGradient(el, {
   shader: bloom,
   colors: ["#ffd9e8", "#ffb300", "#ff8fc0", "#3d7bff", "#0a2e14"],
-  // bloom has two independent motion modes — petals that breathe and lean,
+  // bloom has two independent motion modes: petals that breathe and lean,
   // and colours that travel outward through a still pattern. Mix freely.
   params: { sway: 0.5, colorflow: 0.4 },
 });
 ```
 
-Ranges, defaults and labels are all discoverable at runtime — `shader.params`
+Ranges, defaults and labels are all discoverable at runtime. `shader.params`
 is an array of `ParamDef`, and `shader.randomParams(rand)` produces a full,
 sensible param set for "randomize" flows. `shaders` and `getShader(id)` expose
 the whole registry (importing either pulls every shader).
 
 ## Effects
 
-Effects redraw an existing picture: a generator's output or your own image, canvas or video frame.
+An effect redraws a picture: a shader's output, or an image, canvas or video
+frame you supply. Four are included: `pixelate`, `dither`, `halftone` and
+`ascii`.
 
 ```ts
 import { mountStack, bloom, dither } from "instantshader";
@@ -77,14 +84,30 @@ mountStack(el, {
 });
 ```
 
-`pixelate`, `dither`, `halftone` and `ascii` ship today; `effects` and `getEffect(id)` list them, and each `EffectDef.params` describes its controls (float, enum, bool and color, with a `when` hint for conditional ones). Use `{ kind: "media", media }` as the source for an image. `createStackRenderer` is the seekable renderer for export and `renderStackFrame` the one-shot.
-
-Effect sizes are in pixels at 1080p and effects work on a per-cell buffer that is identical at every output size, so an export matches its preview cell for cell. The [main README](../../README.md#effects) has the details.
+For an image, the source is `{ kind: "media", media: img }` with an optional
+`fit` of `"cover"` (default) or `"contain"`. `effects` is a list, bottom
+layer first. `mountStack` returns the `mountGradient` handle plus
+`setSource`, `setSourceParams`, `setEffects`, `setEffectParams(index, params)`,
+`refreshMedia()` and `getGridInfo()`. `renderStackFrame` renders one frame to
+a detached canvas and `createStackRenderer` is the seekable renderer for
+video export, both with the same options.
+
+Each effect's `params` array describes its controls the way `shader.params`
+does, with four kinds: float, enum (a string value from `options`), bool and
+colour (a `#rrggbb` string). A `when` field on a param says which other
+param's value makes it relevant, for building UI. `effects` and
+`getEffect(id)` expose the registry, and importing either pulls every effect.
+
+Effect sizes are in pixels at 1080p, and each effect computes one value per
+cell into a buffer that is the same at every output size, so a preview and a
+4K export contain identical cells. The [repository
+README](https://github.com/ugolbck/instantshader#effects) has images, every
+param with its range, and the details of how preview and export line up.
 
 ## Seamless loops
 
 Set `loopSeconds` and the animation repeats exactly, with no visible seam at
-the wrap — the frame at `t` and at `t + loopSeconds` are identical pixel for
+the wrap. The frame at `t` and at `t + loopSeconds` are identical pixel for
 pixel. Built for video export and for backgrounds that must not betray a
 restart.
 
@@ -119,7 +142,7 @@ Notes:
   light video file without slowing the animation down.
 - **`flow` ties its travel speed to the loop length.** It animates by
   translating in a straight line through a noise field that tiles, and it
-  covers exactly one tile per cycle — so a short loop flows fast and a long
+  covers exactly one tile per cycle, so a short loop flows fast and a long
   one flows slowly. The hand-tuned drift rate corresponds to a period around
   60–90s; below ~30s the currents move noticeably faster than the look was
   designed for. Compensate with `speed` rather than by shortening the loop.
@@ -130,9 +153,11 @@ Notes:
   slow oscillations (petal breathing ~20s, fan lean ~30s, petal flex ~42s)
   layered over a noise wander. Each oscillation holds still once the loop is
   shorter than about half its own period, so below ~10s the wander is the only
-  thing left moving. `colorflow` is unaffected — it always fits at least one
+  thing left moving. `colorflow` is unaffected. It always fits at least one
   full cycle into the loop, flowing faster on a short one.
-- `halo`, `dune` and `whorl` always complete at least one full cycle of their
-  main motion per loop, so a short loop simply runs them faster.
+- `halo`, `dune` and `whorl` always complete at least one full cycle of
+  their main motion per loop, so a short loop simply runs them faster.
+  `burst` never turns; its rays stream outward one tile per loop. `glint`
+  travels one pattern period per loop, half a period under 12 s.
 - Any loop necessarily revisits the same state every N seconds; a long period
   is what buys the impression of never repeating.

package/dist/index.d.ts

@@ -340,6 +340,18 @@ declare const dune: ShaderDef;
 //#region src/shaders/whorl.d.ts
 declare const whorl: ShaderDef;
 //#endregion
+//#region src/shaders/silk.d.ts
+declare const silk: ShaderDef;
+//#endregion
+//#region src/shaders/nacre.d.ts
+declare const nacre: ShaderDef;
+//#endregion
+//#region src/shaders/burst.d.ts
+declare const burst: ShaderDef;
+//#endregion
+//#region src/shaders/glint.d.ts
+declare const glint: ShaderDef;
+//#endregion
 //#region src/effects/pixelate.d.ts
 declare const pixelate: EffectDef;
 //#endregion
@@ -473,4 +485,4 @@ declare function gridFor(width: number, height: number, cell: [number, number],
 */
 declare function buildPaletteRamp(colors: string[]): Uint8Array;
 //#endregion
-export { type BoolParamDef, type ColorParamDef, type EffectDef, type EffectLayer, type EffectParamDef, type EffectTexture, type EnumParamDef, type FloatParamDef, type GeneratorDef, type Grid, type GridInfo, type MountHandle, type MountOptions, type ParamDef, type ParamValue, type RenderFrameResult, type Renderer, type RendererOptions, type ShaderDef, type Source, type StackHandle, type StackMountOptions, type StackOptions, type StackRenderer, type TextureData, type TextureEnv, ascii, beam, bloom, buildPaletteRamp, createRenderer, createStackRenderer, dither, dune, effects, flow, getEffect, getShader, gridFor, halftone, halo, mountGradient, mountStack, pixelate, renderGradientFrame, renderStackFrame, shaders, strata, whorl };
+export { type BoolParamDef, type ColorParamDef, type EffectDef, type EffectLayer, type EffectParamDef, type EffectTexture, type EnumParamDef, type FloatParamDef, type GeneratorDef, type Grid, type GridInfo, type MountHandle, type MountOptions, type ParamDef, type ParamValue, type RenderFrameResult, type Renderer, type RendererOptions, type ShaderDef, type Source, type StackHandle, type StackMountOptions, type StackOptions, type StackRenderer, type TextureData, type TextureEnv, ascii, beam, bloom, buildPaletteRamp, burst, createRenderer, createStackRenderer, dither, dune, effects, flow, getEffect, getShader, glint, gridFor, halftone, halo, mountGradient, mountStack, nacre, pixelate, renderGradientFrame, renderStackFrame, shaders, silk, strata, whorl };

package/dist/index.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "instantshader",
-  "version": "0.6.0",
-  "description": "Animated WebGL gradient shaders. Zero dependencies.",
+  "version": "0.7.0",
+  "description": "Animated WebGL gradient shaders, plus dither, pixelate, halftone and ASCII effects. Zero dependencies.",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -33,7 +33,11 @@
     "gradient",
     "mesh-gradient",
     "animated-gradient",
-    "background"
+    "background",
+    "dither",
+    "halftone",
+    "pixelate",
+    "ascii"
   ],
   "scripts": {
     "build": "tsdown",