instantshader 0.4.0 → 0.5.0

package/README.md

@@ -1,8 +1,10 @@
+![InstantShader](https://raw.githubusercontent.com/ugolbck/instantshader/main/.github/assets/banner.jpg)
+
 # 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
-for export pipelines. Built by [InstantGradient](https://instantgradient.com/shaders).
+for export pipelines. Built by [InstantGradient](https://instantgradient.com/app).
 
 ## Install
 
@@ -23,6 +25,43 @@ const handle = mountGradient(document.getElementById("bg")!, {
 // handle.pause() / handle.resume() / handle.dispose() when done
 ```
 
+## Shaders
+
+Each shader is a separate named export, so the ones you don't import
+tree-shake away.
+
+| Shader | Look | Params |
+| --- | --- | --- |
+| `flow` | Isotropic swirling currents. A curl-noise field advects the sample point before it hits fbm, so colour masses travel in continuous, fluid-like eddies with defined luminous edges and generous calm negative space. | `scale`, `curl`, `drift`, `openness`, `grain` |
+| `beam` | One wide beam of soft light crossing a near-black frame. The palette walks the beam's length, thin brighter filaments crawl inside it, and most of the frame is dark negative space. | `scale`, `width`, `glow`, `angle`, `grain` |
+| `bloom` | A fan of huge, ultra-soft petals radiating from the frame's bottom edge. One analytic rose-curve field, so the palette reads as concentric scalloped bands from a hot core out to a dark background, with thin dark creases between the petals. | `scale`, `petals`, `pinch`, `bend`, `sway`, `colorflow`, `grain` |
+| `halo` | An eclipse: one dark disc with a razor-bright limb and a corona of streamers flowing outward, the palette wrapped around the ring. `x` / `y` place the disc; the default sinks it below the frame for a glowing horizon arc. | `radius`, `x`, `y`, `glow`, `crescent`, `flares`, `grain` |
+| `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` |
+
+Previews of every look, with full param ranges, are in the
+[repository README](https://github.com/ugolbck/instantshader#readme).
+
+Every shader takes the same mount options; `params` is where they differ:
+
+```ts
+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,
+  // 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`
+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).
+
 ## Seamless loops
 
 Set `loopSeconds` and the animation repeats exactly, with no visible seam at
@@ -68,5 +107,13 @@ Notes:
 - **`beam` freezes its width swell below ~29s.** Its natural cycle is ~57s and
   cannot be squeezed into a short loop without becoming a throb, so under that
   threshold the swell holds still instead. Everything else still animates.
+- **`bloom` sheds parts of its sway on short loops.** Its `sway` is several
+  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
+  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.
 - 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

@@ -126,6 +126,18 @@ declare const beam: ShaderDef;
 //#region src/shaders/bloom.d.ts
 declare const bloom: ShaderDef;
 //#endregion
+//#region src/shaders/halo.d.ts
+declare const halo: ShaderDef;
+//#endregion
+//#region src/shaders/strata.d.ts
+declare const strata: ShaderDef;
+//#endregion
+//#region src/shaders/dune.d.ts
+declare const dune: ShaderDef;
+//#endregion
+//#region src/shaders/whorl.d.ts
+declare const whorl: ShaderDef;
+//#endregion
 //#region src/registry.d.ts
 declare const shaders: readonly ShaderDef[];
 declare function getShader(id: string): ShaderDef | undefined;
@@ -191,4 +203,4 @@ declare function renderGradientFrame(opts: {
 */
 declare function buildPaletteRamp(colors: string[]): Uint8Array;
 //#endregion
-export { type MountHandle, type MountOptions, type ParamDef, type RenderFrameResult, type Renderer, type RendererOptions, type ShaderDef, beam, bloom, buildPaletteRamp, createRenderer, flow, getShader, mountGradient, renderGradientFrame, shaders };
+export { type MountHandle, type MountOptions, type ParamDef, type RenderFrameResult, type Renderer, type RendererOptions, type ShaderDef, beam, bloom, buildPaletteRamp, createRenderer, dune, flow, getShader, halo, mountGradient, renderGradientFrame, shaders, strata, whorl };

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",
@@ -924,12 +988,688 @@ const bloom = {
 	}
 };
 
+//#endregion
+//#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/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
+}
+
+// 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)));
+}
+
+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);
+}
+`;
+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/registry.ts
 const shaders = [
 	flow,
 	beam,
-	bloom
+	bloom,
+	halo,
+	strata,
+	dune,
+	whorl
 ];
 function getShader(id) {
 	return shaders.find((s) => s.id === id);
@@ -1580,4 +2320,4 @@ function renderGradientFrame(opts) {
 }
 
 //#endregion
-export { beam, bloom, buildPaletteRamp, createRenderer, flow, getShader, mountGradient, renderGradientFrame, shaders };
+export { beam, bloom, buildPaletteRamp, createRenderer, dune, flow, getShader, halo, mountGradient, renderGradientFrame, shaders, strata, whorl };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "instantshader",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Animated WebGL gradient shaders. Zero dependencies.",
   "type": "module",
   "license": "MIT",
@@ -9,7 +9,7 @@
     "url": "git+https://github.com/ugolbck/instantshader.git",
     "directory": "packages/core"
   },
-  "homepage": "https://instantgradient.com/shaders",
+  "homepage": "https://instantgradient.com/app",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",