@code-of-chaos/dither 0.1.0 → 0.3.0

package/README.md

@@ -1,12 +1,13 @@
 # Dither.Js
 
-Animated bitmap-dithered gradient backgrounds for React, with a tileable
-Perlin/fBm noise engine for generating your own dither tiles.
+Framework-agnostic animated bitmap-dithered gradient backgrounds - plain
+TypeScript, DOM and CSS - with a tileable Perlin/fBm noise engine for
+generating your own dither tiles.
 
 The texture is a real Bayer-dithered noise bitmap (Perlin islands + fine
 detail), generated once on a canvas and scrolled with a GPU-friendly CSS
-transform. Everything visual - colors, grid, fade, speed, direction - is a
-prop, driven through CSS custom properties so it can be animated at runtime.
+transform. Everything visual - colors, grid, fade, speed, direction - is an
+option, driven through CSS custom properties so it can be animated at runtime.
 
 ## Install
 
@@ -16,8 +17,31 @@ npm install @code-of-chaos/dither
 
 ## Usage
 
+```ts
+import { DitherBackground } from "@code-of-chaos/dither";
+import "@code-of-chaos/dither/style.css";
+
+const background = new DitherBackground({ noiseColor: "var(--accent)" });
+background.mount(document.getElementById("root")!);
+
+// Animate at runtime - cheap, the tile only rebuilds for tile inputs:
+background.update({ gridSize: 64, noiseOpacity: 0.4 });
+
+// Revert the element to its unmounted state:
+background.destroy();
+```
+
+`mount()` decorates the element: it prepends the hidden background layers
+and applies the CSS custom properties. Anything else in the element renders
+above the layers, so frameworks keep rendering their children normally.
+
+### Framework recipes
+
+React (and Next.js) ship as an adapter entry - `"use client"` is baked in, so
+it drops into the Next.js App Router unchanged:
+
 ```tsx
-import { DitherGridBackground } from "@code-of-chaos/dither";
+import { DitherGridBackground } from "@code-of-chaos/dither/react";
 import "@code-of-chaos/dither/style.css";
 
 export function Page() {
@@ -29,9 +53,82 @@ export function Page() {
 }
 ```
 
-Every visual property is optional (defaults in parentheses):
+`DitherGridBackground` accepts every `DitherBackgroundOptions` key as a prop
+plus normal div attributes and children. It is client-side only (the tile
+needs a canvas) - in Next.js keep it inside client components.
+
+Angular (standalone directive):
+
+```ts
+@Directive({ selector: "[ditherBackground]" })
+export class DitherBackgroundDirective
+    implements AfterViewInit, OnChanges, OnDestroy
+{
+    @Input() ditherBackground: DitherBackgroundOptions = {};
+
+    private background?: DitherBackground;
+
+    constructor(private el: ElementRef<HTMLElement>) {}
+
+    ngAfterViewInit(): void {
+        this.background = new DitherBackground(this.ditherBackground);
+        this.background.mount(this.el.nativeElement);
+    }
+
+    ngOnChanges(): void {
+        this.background?.update(
+            new DitherBackgroundView(this.ditherBackground).options,
+        );
+    }
+
+    ngOnDestroy(): void {
+        this.background?.destroy();
+    }
+}
+```
+
+Vue (composable):
+
+```ts
+export function useDitherBackground(
+    el: Ref<HTMLElement | null>,
+    options: Ref<DitherBackgroundOptions>,
+) {
+    let background: DitherBackground | undefined;
+
+    onMounted(() => {
+        background = new DitherBackground(options.value);
+        background.mount(el.value!);
+    });
+    watch(
+        options,
+        (next) => background?.update(new DitherBackgroundView(next).options),
+        { deep: true },
+    );
+    onBeforeUnmount(() => background?.destroy());
+}
+```
+
+Svelte (action):
+
+```ts
+export function dither(
+    node: HTMLElement,
+    options: DitherBackgroundOptions = {},
+) {
+    const background = new DitherBackground(options);
+    background.mount(node);
+    return {
+        update: (next: DitherBackgroundOptions) =>
+            background.update(new DitherBackgroundView(next).options),
+        destroy: () => background.destroy(),
+    };
+}
+```
+
+Every visual option is optional (defaults in parentheses):
 
-| Prop                                                            | Purpose                                                                     |
+| Option                                                          | Purpose                                                                     |
 | --------------------------------------------------------------- | --------------------------------------------------------------------------- |
 | `backgroundColor`                                               | Base fill, any CSS color or gradient                                        |
 | `gridColor`, `gridSize`, `gridOpacity`                          | Structural grid lines (steel, 41px, 0.23)                                   |
@@ -43,7 +140,7 @@ Every visual property is optional (defaults in parentheses):
 | `noiseClampLow`, `noiseClampHigh`                               | Soft-clamp the noise: clean voids low, no saturation high                   |
 | `noiseTileCells`, `noiseSeed`                                   | Tile resolution and reproducible randomness                                 |
 | `noiseSpeed`, `noiseAngle`, `noiseTravel`                       | Scroll animation: seconds per loop, direction in degrees, distance in tiles |
-| `fadeStart`, `fadeEnd`                                          | Vertical fade of the dither layer (35%, 82%)                                |
+| `fadeStart`, `fadeEnd`                                          | Vertical fade of the dither layer (0%, 90%)                                 |
 | `animateNoise`, `animateGlow`                                   | Enable the scroll / ambient glow (both on)                                  |
 
 Colors accept `var(--token, fallback)` references; they are resolved against
@@ -53,6 +150,8 @@ the document root, so theme variables work as parameters.
 
 - `DitherTile` - generates a seamless Bayer-dithered PNG data URL from the
   noise fields; use it for static overlays and textures.
+- `DitherBackgroundView` - resolves options to defaults and computes the CSS
+  custom properties; useful when writing a thin framework wrapper.
 - `PerlinNoise` / `FractalBrownianNoise` - tileable gradient noise.
 - `MathUtils` / `RgbColor` - helpers used by the engine.
 
@@ -95,10 +194,11 @@ Notes:
 
 ## Notes
 
-- The tile is generated in the browser (canvas), so the component is
-  client-side only.
+- The tile is generated in the browser (canvas), so mounting is client-side
+  only.
 - `prefers-reduced-motion` disables the animations.
-- React 18+; class component, no runtime dependencies besides React.
+- Zero runtime dependencies; `react` (18+) is an optional peer dependency,
+  needed only for the `./react` entry.
 
 ## License
 

package/dist/DitherBackground-CrFqrwp8.js

@@ -0,0 +1,304 @@
+// src/MathUtils.ts
+var e = class e {
+	static clamp(e, t, n) {
+		return Math.min(Math.max(e, t), n);
+	}
+	static lerp(e, t, n) {
+		return e + (t - e) * n;
+	}
+	static smoothstep(t, n, r) {
+		let i = e.clamp((r - t) / (n - t), 0, 1);
+		return i * i * (3 - 2 * i);
+	}
+	static mod(e, t) {
+		return (e % t + t) % t;
+	}
+	static hash2(e, t, n) {
+		let r = Math.imul(e, 374761393) ^ Math.imul(t, 668265263) ^ Math.imul(n, 2246822519);
+		return r = Math.imul(r ^ r >>> 13, 1274126177), r ^= r >>> 16, (r >>> 0) / 4294967296;
+	}
+}, t = class t {
+	period;
+	seed;
+	static GRADIENTS = Array.from({ length: 16 }, (e, t) => {
+		let n = t / 16 * Math.PI * 2;
+		return [Math.cos(n), Math.sin(n)];
+	});
+	constructor(e, t) {
+		this.period = e, this.seed = t;
+	}
+	sample(t, n) {
+		let r = Math.floor(t), i = Math.floor(n), a = t - r, o = n - i, s = a * a * a * (a * (a * 6 - 15) + 10), c = o * o * o * (o * (o * 6 - 15) + 10), l = e.mod(r, this.period), u = e.mod(i, this.period), d = e.mod(r + 1, this.period), f = e.mod(i + 1, this.period), p = this.gradientDot(l, u, a, o), m = this.gradientDot(d, u, a - 1, o), h = this.gradientDot(l, f, a, o - 1), g = this.gradientDot(d, f, a - 1, o - 1);
+		return e.lerp(e.lerp(p, m, s), e.lerp(h, g, s), c);
+	}
+	gradientDot(n, r, i, a) {
+		let o = t.GRADIENTS, s = o[Math.floor(e.hash2(n, r, this.seed) * o.length) % o.length];
+		return s[0] * i + s[1] * a;
+	}
+}, n = class {
+	noise;
+	frequency;
+	amplitude;
+	constructor(e, t, n) {
+		this.noise = e, this.frequency = t, this.amplitude = n;
+	}
+}, r = class {
+	octaves = [];
+	totalAmplitude;
+	constructor(e, r, i, a) {
+		let o = 1, s = 0;
+		for (let c = 0; c < i; c++) {
+			let i = Math.max(1, Math.round(e / (r * 2 ** c)));
+			this.octaves.push(new n(new t(i, a + c * 1013), i / e, o)), s += o, o *= .5;
+		}
+		this.totalAmplitude = s;
+	}
+	sample(t, n) {
+		let r = 0;
+		for (let e of this.octaves) r += e.amplitude * e.noise.sample(t * e.frequency, n * e.frequency);
+		return e.clamp(r / this.totalAmplitude * .6 + .5, 0, 1);
+	}
+}, i = class e {
+	r;
+	g;
+	b;
+	constructor(e, t, n) {
+		this.r = e, this.g = t, this.b = n;
+	}
+	static fromCss(t, n) {
+		let r = e.resolveVariable(n);
+		t.fillStyle = "#000000", t.fillStyle = r;
+		let i = t.fillStyle;
+		if (i.startsWith("#")) {
+			let t = i.slice(1), n = t.length === 3 ? t.split("").map((e) => e + e).join("") : t;
+			return new e(parseInt(n.slice(0, 2), 16), parseInt(n.slice(2, 4), 16), parseInt(n.slice(4, 6), 16));
+		}
+		let a = i.match(/rgba?\(([^)]+)\)/);
+		if (a) {
+			let [t, n, r] = a[1].split(/[,/\s]+/).filter(Boolean).map(Number);
+			return new e(t, n, r);
+		}
+		return new e(255, 255, 255);
+	}
+	static resolveVariable(e) {
+		let t = e.match(/^\s*var\(\s*(--[\w-]+)\s*(?:,\s*([^()]+))?\s*\)\s*$/);
+		return t && (getComputedStyle(document.documentElement).getPropertyValue(t[1]).trim() || t[2]?.trim()) || e;
+	}
+}, a = class t {
+	options;
+	static DEFAULT_CELLS = 512;
+	static BAYER_4X4 = [
+		[
+			0,
+			8,
+			2,
+			10
+		],
+		[
+			12,
+			4,
+			14,
+			6
+		],
+		[
+			3,
+			11,
+			1,
+			9
+		],
+		[
+			15,
+			7,
+			13,
+			5
+		]
+	].map((e) => e.map((e) => (e + .5) / 16));
+	islands;
+	detail;
+	constructor(e) {
+		this.options = e, this.islands = new r(e.cells, e.scale, e.octaves, e.seed), this.detail = new r(e.cells, e.detailScale, e.detailOctaves, e.seed + 31337);
+	}
+	toDataURL() {
+		let { cells: n, color: r, density: a, contrast: o, detailStrength: s, clampLow: c, clampHigh: l, seed: u, maxFill: d, jitter: f } = this.options, p = document.createElement("canvas");
+		p.width = n, p.height = n;
+		let m = p.getContext("2d");
+		if (!m) return "";
+		let h = i.fromCss(m, r), g = m.createImageData(n, n), _ = g.data;
+		for (let r = 0; r < n; r++) for (let i = 0; i < n; i++) {
+			let p = this.islands.sample(i, r), m = this.detail.sample(i, r), g = e.clamp(p + (m - .5) * s, 0, 1), v = e.smoothstep(c, Math.max(l, c + .001), g), y = e.clamp((v - .5) * o + a, 0, d);
+			if (t.BAYER_4X4[r % 4][i % 4] * (1 - f) + e.hash2(i, r, u + 991) * f < y) {
+				let t = (r * n + i) * 4;
+				_[t] = h.r, _[t + 1] = h.g, _[t + 2] = h.b, _[t + 3] = Math.round(255 * e.clamp(.4 + .6 * v, 0, 1));
+			}
+		}
+		return m.putImageData(g, 0, 0), p.toDataURL("image/png");
+	}
+}, o = class e {
+	static DEFAULTS = {
+		backgroundColor: "linear-gradient(to bottom, var(--color-wine-950) 0%, var(--color-ink-950) 65%)",
+		gridColor: "var(--color-steel-500)",
+		gridSize: 41,
+		gridOpacity: .23,
+		noiseColor: "var(--color-scarlet-600)",
+		noiseOpacity: .5,
+		noiseSize: 3,
+		noiseTileCells: a.DEFAULT_CELLS,
+		noiseDensity: .55,
+		noiseContrast: 1.8,
+		noiseScale: 32,
+		noiseOctaves: 3,
+		noiseDetailScale: 5,
+		noiseDetailOctaves: 3,
+		noiseDetailStrength: .2,
+		noiseClampLow: 0,
+		noiseClampHigh: .9,
+		noiseSeed: 69,
+		noiseMaxFill: .6,
+		noiseJitter: .3,
+		noiseSpeed: 180,
+		noiseAngle: 100,
+		noiseTravel: 1,
+		fadeStart: 0,
+		fadeEnd: 90,
+		animateNoise: !0,
+		animateGlow: !0
+	};
+	static TILE_INPUTS = [
+		"noiseTileCells",
+		"noiseColor",
+		"noiseDensity",
+		"noiseContrast",
+		"noiseScale",
+		"noiseOctaves",
+		"noiseDetailScale",
+		"noiseDetailOctaves",
+		"noiseDetailStrength",
+		"noiseClampLow",
+		"noiseClampHigh",
+		"noiseSeed",
+		"noiseMaxFill",
+		"noiseJitter"
+	];
+	options;
+	constructor(t = {}) {
+		this.options = {
+			...e.DEFAULTS,
+			...e.defined(t)
+		};
+	}
+	merge(t) {
+		return new e({
+			...this.options,
+			...e.defined(t)
+		});
+	}
+	rebuildsTile(t) {
+		return e.TILE_INPUTS.some((e) => this.options[e] !== t.options[e]);
+	}
+	tileOptions() {
+		let e = this.options;
+		return {
+			cells: e.noiseTileCells,
+			color: e.noiseColor,
+			density: e.noiseDensity,
+			contrast: e.noiseContrast,
+			scale: e.noiseScale,
+			octaves: e.noiseOctaves,
+			detailScale: e.noiseDetailScale,
+			detailOctaves: e.noiseDetailOctaves,
+			detailStrength: e.noiseDetailStrength,
+			clampLow: e.noiseClampLow,
+			clampHigh: e.noiseClampHigh,
+			seed: e.noiseSeed,
+			maxFill: e.noiseMaxFill,
+			jitter: e.noiseJitter
+		};
+	}
+	get tileSize() {
+		return this.options.noiseTileCells * this.options.noiseSize;
+	}
+	get travelX() {
+		let e = this.options.noiseAngle * Math.PI / 180;
+		return Math.round(Math.cos(e) * this.options.noiseTravel) * this.tileSize;
+	}
+	get travelY() {
+		let e = this.options.noiseAngle * Math.PI / 180;
+		return Math.round(Math.sin(e) * this.options.noiseTravel) * this.tileSize;
+	}
+	get overscan() {
+		return Math.max(Math.abs(this.travelX), Math.abs(this.travelY)) + this.tileSize;
+	}
+	cssVars(e) {
+		let t = this.options;
+		return {
+			"--background-color": t.backgroundColor,
+			"--grid-color": t.gridColor,
+			"--grid-size": `${t.gridSize}px`,
+			"--grid-opacity": String(t.gridOpacity),
+			"--noise-image": `url("${e}")`,
+			"--noise-tile-size": `${this.tileSize}px`,
+			"--noise-color": t.noiseColor,
+			"--noise-opacity": String(t.noiseOpacity),
+			"--noise-speed": `${t.noiseSpeed}s`,
+			"--noise-x": `${this.travelX}px`,
+			"--noise-y": `${this.travelY}px`,
+			"--noise-overscan": `${this.overscan}px`,
+			"--fade-start": `${t.fadeStart}%`,
+			"--fade-end": `${t.fadeEnd}%`
+		};
+	}
+	static defined(e) {
+		let t = Object.entries(e).filter(([, e]) => e !== void 0);
+		return Object.fromEntries(t);
+	}
+}, s = class e {
+	static ROOT_CLASS = "dither-grid-background";
+	static ANIMATED_CLASS = "dither-grid-background--animated";
+	static GLOW_CLASS = "dither-grid-background--glow";
+	view;
+	noiseImage = "";
+	root = null;
+	layers = [];
+	constructor(e = {}) {
+		this.view = new o(e);
+	}
+	mount(e) {
+		if (this.root) throw Error("DitherBackground is already mounted");
+		this.root = e;
+		let t = document.createElement("div");
+		t.className = "dither-grid-background__noise-texture";
+		let n = document.createElement("div");
+		n.className = "dither-grid-background__noise", n.setAttribute("aria-hidden", "true"), n.append(t);
+		let r = document.createElement("div");
+		r.className = "dither-grid-background__grid", r.setAttribute("aria-hidden", "true"), this.layers = [n, r], e.prepend(...this.layers), this.noiseImage = this.createNoiseImage(), this.apply();
+	}
+	update(e) {
+		let t = this.view.merge(e), n = this.view.rebuildsTile(t);
+		this.view = t, n && (this.noiseImage = this.createNoiseImage()), this.apply();
+	}
+	destroy() {
+		let t = this.root;
+		if (t) {
+			for (let e of this.layers) e.remove();
+			this.layers = [], t.classList.remove(e.ROOT_CLASS, e.ANIMATED_CLASS, e.GLOW_CLASS);
+			for (let e of Object.keys(this.view.cssVars(""))) t.style.removeProperty(e);
+			this.root = null, this.noiseImage = "";
+		}
+	}
+	get element() {
+		return this.root;
+	}
+	apply() {
+		let t = this.root;
+		if (!t) return;
+		t.classList.add(e.ROOT_CLASS), t.classList.toggle(e.ANIMATED_CLASS, this.view.options.animateNoise), t.classList.toggle(e.GLOW_CLASS, this.view.options.animateGlow);
+		let n = this.view.cssVars(this.noiseImage);
+		for (let [e, r] of Object.entries(n)) t.style.setProperty(e, r);
+	}
+	createNoiseImage() {
+		return new a(this.view.tileOptions()).toDataURL();
+	}
+};
+export { r as a, i, o as n, t as o, a as r, e as s, s as t };
+
+//# sourceMappingURL=DitherBackground-CrFqrwp8.js.map

package/dist/DitherBackground-CrFqrwp8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DitherBackground-CrFqrwp8.js","names":["MathUtils","value","min","max","a","b","t","x","edge0","edge1","period","h","y","seed","PerlinNoise","angle","i","x0","y0","fx","fy","u","v","ix0","iy0","ix1","iy1","n00","n10","n01","n11","gradients","g","ix","iy","dx","dy","Octave","noise","frequency","amplitude","FractalBrownianNoise","total","o","octaves","cells","scale","sum","octave","RgbColor","r","resolved","css","normalized","ctx","hex","full","c","match","DitherTile","row","options","canvas","rgb","color","image","data","island","detail","combined","detailStrength","n","clampLow","clampHigh","p","contrast","density","maxFill","jitter","DitherBackgroundView","partial","key","other","noiseImage","entries","DitherBackground","container","texture","grid","next","rebuildTile","root","layer","name","vars"],"sources":["../src/MathUtils.ts","../src/PerlinNoise.ts","../src/FractalBrownianNoise.ts","../src/RgbColor.ts","../src/DitherTile.ts","../src/DitherBackgroundView.ts","../src/DitherBackground.ts"],"sourcesContent":["/**\n * Small math helpers used by the noise and dither pipeline.\n * The standard Math library has no clamp/lerp/smoothstep/mod equivalents.\n */\nexport class MathUtils {\n    static clamp(value: number, min: number, max: number): number {\n        return Math.min(Math.max(value, min), max);\n    }\n\n    static lerp(a: number, b: number, t: number): number {\n        return a + (b - a) * t;\n    }\n\n    static smoothstep(edge0: number, edge1: number, x: number): number {\n        const t = MathUtils.clamp((x - edge0) / (edge1 - edge0), 0, 1);\n        return t * t * (3 - 2 * t);\n    }\n\n    static mod(value: number, period: number): number {\n        return ((value % period) + period) % period;\n    }\n\n    static hash2(x: number, y: number, seed: number): number {\n        let h =\n            Math.imul(x, 374761393)\n            ^ Math.imul(y, 668265263)\n            ^ Math.imul(seed, 2246822519);\n        h = Math.imul(h ^ (h >>> 13), 1274126177);\n        h ^= h >>> 16;\n        return (h >>> 0) / 4294967296;\n    }\n}\n","import { MathUtils } from \"./MathUtils\";\n\n/**\n * Tileable 2D Perlin gradient noise. Lattice coordinates wrap at `period`,\n * so sampling the [0, period) cell range produces a seamless tile.\n * Raw output is roughly in [-1, 1] (see FractalBrownianNoise for normalized values).\n */\nexport class PerlinNoise {\n    private static readonly GRADIENTS: ReadonlyArray<\n        readonly [number, number]\n    > = Array.from({ length: 16 }, (_, i) => {\n        const angle = (i / 16) * Math.PI * 2;\n        return [Math.cos(angle), Math.sin(angle)] as const;\n    });\n\n    constructor(\n        private readonly period: number,\n        private readonly seed: number,\n    ) {}\n\n    sample(x: number, y: number): number {\n        const x0 = Math.floor(x);\n        const y0 = Math.floor(y);\n        const fx = x - x0;\n        const fy = y - y0;\n\n        const u = fx * fx * fx * (fx * (fx * 6 - 15) + 10);\n        const v = fy * fy * fy * (fy * (fy * 6 - 15) + 10);\n\n        const ix0 = MathUtils.mod(x0, this.period);\n        const iy0 = MathUtils.mod(y0, this.period);\n        const ix1 = MathUtils.mod(x0 + 1, this.period);\n        const iy1 = MathUtils.mod(y0 + 1, this.period);\n\n        const n00 = this.gradientDot(ix0, iy0, fx, fy);\n        const n10 = this.gradientDot(ix1, iy0, fx - 1, fy);\n        const n01 = this.gradientDot(ix0, iy1, fx, fy - 1);\n        const n11 = this.gradientDot(ix1, iy1, fx - 1, fy - 1);\n\n        return MathUtils.lerp(\n            MathUtils.lerp(n00, n10, u),\n            MathUtils.lerp(n01, n11, u),\n            v,\n        );\n    }\n\n    private gradientDot(\n        ix: number,\n        iy: number,\n        dx: number,\n        dy: number,\n    ): number {\n        const gradients = PerlinNoise.GRADIENTS;\n        const g =\n            gradients[\n                Math.floor(\n                    MathUtils.hash2(ix, iy, this.seed) * gradients.length,\n                ) % gradients.length\n            ];\n        return g[0] * dx + g[1] * dy;\n    }\n}\n","import { MathUtils } from \"./MathUtils\";\nimport { PerlinNoise } from \"./PerlinNoise\";\n\nclass Octave {\n    constructor(\n        readonly noise: PerlinNoise,\n        readonly frequency: number,\n        readonly amplitude: number,\n    ) {}\n}\n\n/**\n * Fractal Brownian motion: stacks PerlinNoise octaves with halved amplitude\n * and doubled frequency per octave. Coordinates are expressed in tile cells,\n * keeping every octave (and therefore the whole field) seamlessly tileable.\n * Output is normalized to [0, 1].\n */\nexport class FractalBrownianNoise {\n    private readonly octaves: Octave[] = [];\n    private readonly totalAmplitude: number;\n\n    constructor(cells: number, scale: number, octaves: number, seed: number) {\n        let amplitude = 1;\n        let total = 0;\n\n        for (let o = 0; o < octaves; o++) {\n            const period = Math.max(1, Math.round(cells / (scale * 2 ** o)));\n            this.octaves.push(\n                new Octave(\n                    new PerlinNoise(period, seed + o * 1013),\n                    period / cells,\n                    amplitude,\n                ),\n            );\n            total += amplitude;\n            amplitude *= 0.5;\n        }\n\n        this.totalAmplitude = total;\n    }\n\n    sample(x: number, y: number): number {\n        let sum = 0;\n\n        for (const octave of this.octaves) {\n            sum +=\n                octave.amplitude\n                * octave.noise.sample(\n                    x * octave.frequency,\n                    y * octave.frequency,\n                );\n        }\n\n        return MathUtils.clamp((sum / this.totalAmplitude) * 0.6 + 0.5, 0, 1);\n    }\n}\n","/** Immutable RGB triple with CSS color parsing. */\nexport class RgbColor {\n    constructor(\n        readonly r: number,\n        readonly g: number,\n        readonly b: number,\n    ) {}\n\n    /**\n     * Parses any CSS color (named, hex, rgb()/rgba()) by letting the canvas\n     * resolve it: assigning to fillStyle normalizes the value to a canonical\n     * string which is then read back. Falls back to white on invalid input.\n     *\n     * A single var(--token, fallback) reference is resolved against the\n     * document root first, so theme variables can be used as color parameters.\n     */\n    static fromCss(ctx: CanvasRenderingContext2D, css: string): RgbColor {\n        const resolved = RgbColor.resolveVariable(css);\n        ctx.fillStyle = \"#000000\";\n        ctx.fillStyle = resolved;\n        const normalized = ctx.fillStyle;\n\n        if (normalized.startsWith(\"#\")) {\n            const hex = normalized.slice(1);\n            const full =\n                hex.length === 3\n                    ? hex\n                          .split(\"\")\n                          .map((c) => c + c)\n                          .join(\"\")\n                    : hex;\n            return new RgbColor(\n                parseInt(full.slice(0, 2), 16),\n                parseInt(full.slice(2, 4), 16),\n                parseInt(full.slice(4, 6), 16),\n            );\n        }\n\n        const match = normalized.match(/rgba?\\(([^)]+)\\)/);\n        if (match) {\n            const [r, g, b] = match[1]\n                .split(/[,/\\s]+/)\n                .filter(Boolean)\n                .map(Number);\n            return new RgbColor(r, g, b);\n        }\n\n        return new RgbColor(255, 255, 255);\n    }\n\n    private static resolveVariable(css: string): string {\n        const match = css.match(\n            /^\\s*var\\(\\s*(--[\\w-]+)\\s*(?:,\\s*([^()]+))?\\s*\\)\\s*$/,\n        );\n        if (!match) return css;\n\n        const value = getComputedStyle(document.documentElement)\n            .getPropertyValue(match[1])\n            .trim();\n        return value || match[2]?.trim() || css;\n    }\n}\n","import { FractalBrownianNoise } from \"./FractalBrownianNoise\";\nimport { MathUtils } from \"./MathUtils\";\nimport { RgbColor } from \"./RgbColor\";\n\n/**\n * All visual knobs of the tile. `scale`/`octaves` shape the large island\n * field, `detail*` the fine detail field; `clampLow`/`clampHigh` soft-clip\n * the blend (clean voids at the low end, no saturation at the high end),\n * `maxFill` caps how dense the dither can get, and `jitter` blends the\n * Bayer threshold with per-pixel random values for an organic look.\n */\nexport type DitherTileOptions = {\n    cells: number;\n    color: string;\n    density: number;\n    contrast: number;\n    scale: number;\n    octaves: number;\n    detailScale: number;\n    detailOctaves: number;\n    detailStrength: number;\n    clampLow: number;\n    clampHigh: number;\n    seed: number;\n    maxFill: number;\n    jitter: number;\n};\n\n/**\n * Renders a seamless dithered noise tile as a PNG data URL.\n *\n * Per pixel: the island and detail noise fields are blended into a density\n * value, soft-clamped, then thresholded against a Bayer matrix mixed with\n * per-pixel jitter to decide whether the pixel is inked. Because the noise\n * fields tile seamlessly, the resulting image can be repeated and scrolled\n * forever without visible seams.\n */\nexport class DitherTile {\n    static readonly DEFAULT_CELLS = 512;\n\n    private static readonly BAYER_4X4 = [\n        [0, 8, 2, 10],\n        [12, 4, 14, 6],\n        [3, 11, 1, 9],\n        [15, 7, 13, 5],\n    ].map((row) => row.map((v) => (v + 0.5) / 16));\n\n    private readonly islands: FractalBrownianNoise;\n    private readonly detail: FractalBrownianNoise;\n\n    constructor(private readonly options: DitherTileOptions) {\n        this.islands = new FractalBrownianNoise(\n            options.cells,\n            options.scale,\n            options.octaves,\n            options.seed,\n        );\n        this.detail = new FractalBrownianNoise(\n            options.cells,\n            options.detailScale,\n            options.detailOctaves,\n            options.seed + 31337,\n        );\n    }\n\n    toDataURL(): string {\n        const {\n            cells,\n            color,\n            density,\n            contrast,\n            detailStrength,\n            clampLow,\n            clampHigh,\n            seed,\n            maxFill,\n            jitter,\n        } = this.options;\n\n        const canvas = document.createElement(\"canvas\");\n        canvas.width = cells;\n        canvas.height = cells;\n\n        const ctx = canvas.getContext(\"2d\");\n        if (!ctx) return \"\";\n\n        const rgb = RgbColor.fromCss(ctx, color);\n        const image = ctx.createImageData(cells, cells);\n        const data = image.data;\n\n        for (let y = 0; y < cells; y++) {\n            for (let x = 0; x < cells; x++) {\n                const island = this.islands.sample(x, y);\n                const detail = this.detail.sample(x, y);\n                const combined = MathUtils.clamp(\n                    island + (detail - 0.5) * detailStrength,\n                    0,\n                    1,\n                );\n                const n = MathUtils.smoothstep(\n                    clampLow,\n                    Math.max(clampHigh, clampLow + 0.001),\n                    combined,\n                );\n                const p = MathUtils.clamp(\n                    (n - 0.5) * contrast + density,\n                    0,\n                    maxFill,\n                );\n                const bayer = DitherTile.BAYER_4X4[y % 4][x % 4];\n                const threshold =\n                    bayer * (1 - jitter)\n                    + MathUtils.hash2(x, y, seed + 991) * jitter;\n\n                if (threshold < p) {\n                    const i = (y * cells + x) * 4;\n                    data[i] = rgb.r;\n                    data[i + 1] = rgb.g;\n                    data[i + 2] = rgb.b;\n                    data[i + 3] = Math.round(\n                        255 * MathUtils.clamp(0.4 + 0.6 * n, 0, 1),\n                    );\n                }\n            }\n        }\n\n        ctx.putImageData(image, 0, 0);\n        return canvas.toDataURL(\"image/png\");\n    }\n}\n","import type { DitherTileOptions } from \"./DitherTile\";\nimport { DitherTile } from \"./DitherTile\";\n\n/**\n * Every visual knob of a dither background. All fields are optional and fall\n * back to `DitherBackgroundView.DEFAULTS`. Values are applied as CSS custom\n * properties, so they can be animated at runtime without rebuilding the\n * background; only `DitherBackgroundView.TILE_INPUTS` regenerate the dither\n * bitmap itself.\n */\nexport type DitherBackgroundOptions = {\n    backgroundColor?: string;\n\n    gridColor?: string;\n    gridSize?: number;\n    gridOpacity?: number;\n\n    noiseColor?: string;\n    noiseOpacity?: number;\n    noiseSize?: number;\n    noiseTileCells?: number;\n    noiseDensity?: number;\n    noiseContrast?: number;\n    noiseScale?: number;\n    noiseOctaves?: number;\n    noiseDetailScale?: number;\n    noiseDetailOctaves?: number;\n    noiseDetailStrength?: number;\n    noiseClampLow?: number;\n    noiseClampHigh?: number;\n    noiseSeed?: number;\n    noiseMaxFill?: number;\n    noiseJitter?: number;\n    noiseSpeed?: number;\n    noiseAngle?: number;\n    noiseTravel?: number;\n\n    fadeStart?: number;\n    fadeEnd?: number;\n\n    animateNoise?: boolean;\n    animateGlow?: boolean;\n};\n\nexport type DitherBackgroundCssVars = Record<`--${string}`, string>;\n\n/**\n * Resolves `DitherBackgroundOptions` against the defaults and computes the\n * derived values (tile geometry, scroll travel, CSS custom properties). Used\n * internally by `DitherBackground`; framework wrappers can use it standalone.\n */\nexport class DitherBackgroundView {\n    static readonly DEFAULTS: Required<DitherBackgroundOptions> = {\n        backgroundColor:\n            \"linear-gradient(to bottom, var(--color-wine-950) 0%, var(--color-ink-950) 65%)\",\n\n        gridColor: \"var(--color-steel-500)\",\n        gridSize: 41,\n        gridOpacity: 0.23,\n\n        noiseColor: \"var(--color-scarlet-600)\",\n        noiseOpacity: 0.5,\n        noiseSize: 3,\n        noiseTileCells: DitherTile.DEFAULT_CELLS,\n        noiseDensity: 0.55,\n        noiseContrast: 1.8,\n        noiseScale: 32,\n        noiseOctaves: 3,\n        noiseDetailScale: 5,\n        noiseDetailOctaves: 3,\n        noiseDetailStrength: 0.2,\n        noiseClampLow: 0,\n        noiseClampHigh: 0.9,\n        noiseSeed: 69,\n        noiseMaxFill: 0.6,\n        noiseJitter: 0.3,\n        noiseSpeed: 180,\n        noiseAngle: 100,\n        noiseTravel: 1,\n\n        fadeStart: 0,\n        fadeEnd: 90,\n\n        animateNoise: true,\n        animateGlow: true,\n    };\n\n    /** Options that affect the generated tile; all others only set CSS variables. */\n    static readonly TILE_INPUTS: ReadonlyArray<keyof DitherBackgroundOptions> =\n        [\n            \"noiseTileCells\",\n            \"noiseColor\",\n            \"noiseDensity\",\n            \"noiseContrast\",\n            \"noiseScale\",\n            \"noiseOctaves\",\n            \"noiseDetailScale\",\n            \"noiseDetailOctaves\",\n            \"noiseDetailStrength\",\n            \"noiseClampLow\",\n            \"noiseClampHigh\",\n            \"noiseSeed\",\n            \"noiseMaxFill\",\n            \"noiseJitter\",\n        ];\n\n    readonly options: Required<DitherBackgroundOptions>;\n\n    constructor(options: DitherBackgroundOptions = {}) {\n        this.options = {\n            ...DitherBackgroundView.DEFAULTS,\n            ...DitherBackgroundView.defined(options),\n        };\n    }\n\n    /** Returns a new view with `partial` merged in; `undefined` values are ignored. */\n    merge(partial: DitherBackgroundOptions): DitherBackgroundView {\n        return new DitherBackgroundView({\n            ...this.options,\n            ...DitherBackgroundView.defined(partial),\n        });\n    }\n\n    /** True when the two views would produce different dither tiles. */\n    rebuildsTile(other: DitherBackgroundView): boolean {\n        return DitherBackgroundView.TILE_INPUTS.some(\n            (key) => this.options[key] !== other.options[key],\n        );\n    }\n\n    tileOptions(): DitherTileOptions {\n        const o = this.options;\n        return {\n            cells: o.noiseTileCells,\n            color: o.noiseColor,\n            density: o.noiseDensity,\n            contrast: o.noiseContrast,\n            scale: o.noiseScale,\n            octaves: o.noiseOctaves,\n            detailScale: o.noiseDetailScale,\n            detailOctaves: o.noiseDetailOctaves,\n            detailStrength: o.noiseDetailStrength,\n            clampLow: o.noiseClampLow,\n            clampHigh: o.noiseClampHigh,\n            seed: o.noiseSeed,\n            maxFill: o.noiseMaxFill,\n            jitter: o.noiseJitter,\n        };\n    }\n\n    get tileSize(): number {\n        return this.options.noiseTileCells * this.options.noiseSize;\n    }\n\n    /** Horizontal scroll distance in px, snapped to whole tiles (seamless loop). */\n    get travelX(): number {\n        const angle = (this.options.noiseAngle * Math.PI) / 180;\n        return (\n            Math.round(Math.cos(angle) * this.options.noiseTravel)\n            * this.tileSize\n        );\n    }\n\n    /** Vertical scroll distance in px, snapped to whole tiles (seamless loop). */\n    get travelY(): number {\n        const angle = (this.options.noiseAngle * Math.PI) / 180;\n        return (\n            Math.round(Math.sin(angle) * this.options.noiseTravel)\n            * this.tileSize\n        );\n    }\n\n    /** Oversizes the texture wrapper so the scroll never exposes its edges. */\n    get overscan(): number {\n        return (\n            Math.max(Math.abs(this.travelX), Math.abs(this.travelY))\n            + this.tileSize\n        );\n    }\n\n    cssVars(noiseImage: string): DitherBackgroundCssVars {\n        const o = this.options;\n        return {\n            \"--background-color\": o.backgroundColor,\n\n            \"--grid-color\": o.gridColor,\n            \"--grid-size\": `${o.gridSize}px`,\n            \"--grid-opacity\": String(o.gridOpacity),\n\n            \"--noise-image\": `url(\"${noiseImage}\")`,\n            \"--noise-tile-size\": `${this.tileSize}px`,\n            \"--noise-color\": o.noiseColor,\n            \"--noise-opacity\": String(o.noiseOpacity),\n            \"--noise-speed\": `${o.noiseSpeed}s`,\n            \"--noise-x\": `${this.travelX}px`,\n            \"--noise-y\": `${this.travelY}px`,\n            \"--noise-overscan\": `${this.overscan}px`,\n\n            \"--fade-start\": `${o.fadeStart}%`,\n            \"--fade-end\": `${o.fadeEnd}%`,\n        };\n    }\n\n    private static defined(\n        options: DitherBackgroundOptions,\n    ): DitherBackgroundOptions {\n        const entries = Object.entries(options).filter(\n            ([, value]) => value !== undefined,\n        );\n        return Object.fromEntries(entries) as DitherBackgroundOptions;\n    }\n}\n","import \"./DitherBackground.css\";\nimport { DitherTile } from \"./DitherTile\";\nimport type {\n    DitherBackgroundCssVars,\n    DitherBackgroundOptions,\n} from \"./DitherBackgroundView\";\nimport { DitherBackgroundView } from \"./DitherBackgroundView\";\n\n/**\n * Framework-agnostic layered background: a scrolling Bayer-dithered noise\n * texture, a static grid and an optional ambient glow. Plain DOM — mount it\n * on any element from any framework (or none).\n *\n * `mount()` decorates the container: it prepends the hidden layer elements\n * and applies the base class plus the CSS custom properties. Anything else\n * in the container renders above the layers, so frameworks keep rendering\n * their children normally. Options map 1:1 to the CSS custom properties and\n * can be changed at any time via `update()`; the dither bitmap is only\n * regenerated when one of the tile inputs changes.\n *\n * The tile is generated on a canvas, so `mount()` requires a browser DOM.\n */\nexport class DitherBackground {\n    static readonly ROOT_CLASS = \"dither-grid-background\";\n    static readonly ANIMATED_CLASS = \"dither-grid-background--animated\";\n    static readonly GLOW_CLASS = \"dither-grid-background--glow\";\n\n    private view: DitherBackgroundView;\n    private noiseImage = \"\";\n    private root: HTMLElement | null = null;\n    private layers: HTMLElement[] = [];\n\n    constructor(options: DitherBackgroundOptions = {}) {\n        this.view = new DitherBackgroundView(options);\n    }\n\n    /** Decorates `container` with the background layers. Idempotent per instance. */\n    mount(container: HTMLElement): void {\n        if (this.root) {\n            throw new Error(\"DitherBackground is already mounted\");\n        }\n        this.root = container;\n\n        const texture = document.createElement(\"div\");\n        texture.className = \"dither-grid-background__noise-texture\";\n        const noise = document.createElement(\"div\");\n        noise.className = \"dither-grid-background__noise\";\n        noise.setAttribute(\"aria-hidden\", \"true\");\n        noise.append(texture);\n\n        const grid = document.createElement(\"div\");\n        grid.className = \"dither-grid-background__grid\";\n        grid.setAttribute(\"aria-hidden\", \"true\");\n\n        this.layers = [noise, grid];\n        container.prepend(...this.layers);\n\n        this.noiseImage = this.createNoiseImage();\n        this.apply();\n    }\n\n    /** Merges new options; regenerates the tile only when tile inputs change. */\n    update(partial: DitherBackgroundOptions): void {\n        const next = this.view.merge(partial);\n        const rebuildTile = this.view.rebuildsTile(next);\n        this.view = next;\n        if (rebuildTile) {\n            this.noiseImage = this.createNoiseImage();\n        }\n        this.apply();\n    }\n\n    /** Removes the layers and reverts the container to its unmounted state. */\n    destroy(): void {\n        const root = this.root;\n        if (!root) return;\n\n        for (const layer of this.layers) layer.remove();\n        this.layers = [];\n\n        root.classList.remove(\n            DitherBackground.ROOT_CLASS,\n            DitherBackground.ANIMATED_CLASS,\n            DitherBackground.GLOW_CLASS,\n        );\n        for (const name of Object.keys(this.view.cssVars(\"\"))) {\n            root.style.removeProperty(name);\n        }\n\n        this.root = null;\n        this.noiseImage = \"\";\n    }\n\n    /** The decorated container element, or `null` before mount / after destroy. */\n    get element(): HTMLElement | null {\n        return this.root;\n    }\n\n    private apply(): void {\n        const root = this.root;\n        if (!root) return;\n\n        root.classList.add(DitherBackground.ROOT_CLASS);\n        root.classList.toggle(\n            DitherBackground.ANIMATED_CLASS,\n            this.view.options.animateNoise,\n        );\n        root.classList.toggle(\n            DitherBackground.GLOW_CLASS,\n            this.view.options.animateGlow,\n        );\n\n        const vars: DitherBackgroundCssVars = this.view.cssVars(\n            this.noiseImage,\n        );\n        for (const [name, value] of Object.entries(vars)) {\n            root.style.setProperty(name, value);\n        }\n    }\n\n    private createNoiseImage(): string {\n        return new DitherTile(this.view.tileOptions()).toDataURL();\n    }\n}\n"],"mappings":"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"}

package/dist/DitherBackground.d.ts

@@ -0,0 +1,37 @@
+import "./DitherBackground.css";
+import type { DitherBackgroundOptions } from "./DitherBackgroundView";
+/**
+ * Framework-agnostic layered background: a scrolling Bayer-dithered noise
+ * texture, a static grid and an optional ambient glow. Plain DOM — mount it
+ * on any element from any framework (or none).
+ *
+ * `mount()` decorates the container: it prepends the hidden layer elements
+ * and applies the base class plus the CSS custom properties. Anything else
+ * in the container renders above the layers, so frameworks keep rendering
+ * their children normally. Options map 1:1 to the CSS custom properties and
+ * can be changed at any time via `update()`; the dither bitmap is only
+ * regenerated when one of the tile inputs changes.
+ *
+ * The tile is generated on a canvas, so `mount()` requires a browser DOM.
+ */
+export declare class DitherBackground {
+    static readonly ROOT_CLASS = "dither-grid-background";
+    static readonly ANIMATED_CLASS = "dither-grid-background--animated";
+    static readonly GLOW_CLASS = "dither-grid-background--glow";
+    private view;
+    private noiseImage;
+    private root;
+    private layers;
+    constructor(options?: DitherBackgroundOptions);
+    /** Decorates `container` with the background layers. Idempotent per instance. */
+    mount(container: HTMLElement): void;
+    /** Merges new options; regenerates the tile only when tile inputs change. */
+    update(partial: DitherBackgroundOptions): void;
+    /** Removes the layers and reverts the container to its unmounted state. */
+    destroy(): void;
+    /** The decorated container element, or `null` before mount / after destroy. */
+    get element(): HTMLElement | null;
+    private apply;
+    private createNoiseImage;
+}
+//# sourceMappingURL=DitherBackground.d.ts.map

package/dist/DitherBackground.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DitherBackground.d.ts","sourceRoot":"","sources":["../src/DitherBackground.ts"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAC;AAEhC,OAAO,KAAK,EAER,uBAAuB,EAC1B,MAAM,wBAAwB,CAAC;AAGhC;;;;;;;;;;;;;GAaG;AACH,qBAAa,gBAAgB;IACzB,MAAM,CAAC,QAAQ,CAAC,UAAU,4BAA4B;IACtD,MAAM,CAAC,QAAQ,CAAC,cAAc,sCAAsC;IACpE,MAAM,CAAC,QAAQ,CAAC,UAAU,kCAAkC;IAE5D,OAAO,CAAC,IAAI,CAAuB;IACnC,OAAO,CAAC,UAAU,CAAM;IACxB,OAAO,CAAC,IAAI,CAA4B;IACxC,OAAO,CAAC,MAAM,CAAqB;IAEnC,YAAY,OAAO,GAAE,uBAA4B,EAEhD;IAED,iFAAiF;IACjF,KAAK,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,CAsBlC;IAED,6EAA6E;IAC7E,MAAM,CAAC,OAAO,EAAE,uBAAuB,GAAG,IAAI,CAQ7C;IAED,2EAA2E;IAC3E,OAAO,IAAI,IAAI,CAkBd;IAED,+EAA+E;IAC/E,IAAI,OAAO,IAAI,WAAW,GAAG,IAAI,CAEhC;IAED,OAAO,CAAC,KAAK;IAsBb,OAAO,CAAC,gBAAgB;CAG3B"}

package/dist/DitherBackgroundView.d.ts

@@ -0,0 +1,65 @@
+import type { DitherTileOptions } from "./DitherTile";
+/**
+ * Every visual knob of a dither background. All fields are optional and fall
+ * back to `DitherBackgroundView.DEFAULTS`. Values are applied as CSS custom
+ * properties, so they can be animated at runtime without rebuilding the
+ * background; only `DitherBackgroundView.TILE_INPUTS` regenerate the dither
+ * bitmap itself.
+ */
+export type DitherBackgroundOptions = {
+    backgroundColor?: string;
+    gridColor?: string;
+    gridSize?: number;
+    gridOpacity?: number;
+    noiseColor?: string;
+    noiseOpacity?: number;
+    noiseSize?: number;
+    noiseTileCells?: number;
+    noiseDensity?: number;
+    noiseContrast?: number;
+    noiseScale?: number;
+    noiseOctaves?: number;
+    noiseDetailScale?: number;
+    noiseDetailOctaves?: number;
+    noiseDetailStrength?: number;
+    noiseClampLow?: number;
+    noiseClampHigh?: number;
+    noiseSeed?: number;
+    noiseMaxFill?: number;
+    noiseJitter?: number;
+    noiseSpeed?: number;
+    noiseAngle?: number;
+    noiseTravel?: number;
+    fadeStart?: number;
+    fadeEnd?: number;
+    animateNoise?: boolean;
+    animateGlow?: boolean;
+};
+export type DitherBackgroundCssVars = Record<`--${string}`, string>;
+/**
+ * Resolves `DitherBackgroundOptions` against the defaults and computes the
+ * derived values (tile geometry, scroll travel, CSS custom properties). Used
+ * internally by `DitherBackground`; framework wrappers can use it standalone.
+ */
+export declare class DitherBackgroundView {
+    static readonly DEFAULTS: Required<DitherBackgroundOptions>;
+    /** Options that affect the generated tile; all others only set CSS variables. */
+    static readonly TILE_INPUTS: ReadonlyArray<keyof DitherBackgroundOptions>;
+    readonly options: Required<DitherBackgroundOptions>;
+    constructor(options?: DitherBackgroundOptions);
+    /** Returns a new view with `partial` merged in; `undefined` values are ignored. */
+    merge(partial: DitherBackgroundOptions): DitherBackgroundView;
+    /** True when the two views would produce different dither tiles. */
+    rebuildsTile(other: DitherBackgroundView): boolean;
+    tileOptions(): DitherTileOptions;
+    get tileSize(): number;
+    /** Horizontal scroll distance in px, snapped to whole tiles (seamless loop). */
+    get travelX(): number;
+    /** Vertical scroll distance in px, snapped to whole tiles (seamless loop). */
+    get travelY(): number;
+    /** Oversizes the texture wrapper so the scroll never exposes its edges. */
+    get overscan(): number;
+    cssVars(noiseImage: string): DitherBackgroundCssVars;
+    private static defined;
+}
+//# sourceMappingURL=DitherBackgroundView.d.ts.map

package/dist/DitherBackgroundView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DitherBackgroundView.d.ts","sourceRoot":"","sources":["../src/DitherBackgroundView.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGtD;;;;;;GAMG;AACH,MAAM,MAAM,uBAAuB,GAAG;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC,KAAK,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC;AAEpE;;;;GAIG;AACH,qBAAa,oBAAoB;IAC7B,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC,uBAAuB,CAAC,CAiCzD;IAEF,iFAAiF;IACjF,MAAM,CAAC,QAAQ,CAAC,WAAW,EAAE,aAAa,CAAC,MAAM,uBAAuB,CAAC,CAgBnE;IAEN,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,uBAAuB,CAAC,CAAC;IAEpD,YAAY,OAAO,GAAE,uBAA4B,EAKhD;IAED,mFAAmF;IACnF,KAAK,CAAC,OAAO,EAAE,uBAAuB,GAAG,oBAAoB,CAK5D;IAED,oEAAoE;IACpE,YAAY,CAAC,KAAK,EAAE,oBAAoB,GAAG,OAAO,CAIjD;IAED,WAAW,IAAI,iBAAiB,CAkB/B;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,gFAAgF;IAChF,IAAI,OAAO,IAAI,MAAM,CAMpB;IAED,8EAA8E;IAC9E,IAAI,OAAO,IAAI,MAAM,CAMpB;IAED,2EAA2E;IAC3E,IAAI,QAAQ,IAAI,MAAM,CAKrB;IAED,OAAO,CAAC,UAAU,EAAE,MAAM,GAAG,uBAAuB,CAqBnD;IAED,OAAO,CAAC,MAAM,CAAC,OAAO;CAQzB"}

package/dist/index.d.ts

@@ -1,5 +1,6 @@
-export type { DitherGridBackgroundProps } from "./DitherGridBackground";
-export { DitherGridBackground } from "./DitherGridBackground";
+export { DitherBackground } from "./DitherBackground";
+export type { DitherBackgroundCssVars, DitherBackgroundOptions, } from "./DitherBackgroundView";
+export { DitherBackgroundView } from "./DitherBackgroundView";
 export type { DitherTileOptions } from "./DitherTile";
 export { DitherTile } from "./DitherTile";
 export { FractalBrownianNoise } from "./FractalBrownianNoise";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EACR,uBAAuB,EACvB,uBAAuB,GAC1B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -1,225 +1 @@
-import { Component as e } from "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-// src/MathUtils.ts
-var r = class e {
-	static clamp(e, t, n) {
-		return Math.min(Math.max(e, t), n);
-	}
-	static lerp(e, t, n) {
-		return e + (t - e) * n;
-	}
-	static smoothstep(t, n, r) {
-		let i = e.clamp((r - t) / (n - t), 0, 1);
-		return i * i * (3 - 2 * i);
-	}
-	static mod(e, t) {
-		return (e % t + t) % t;
-	}
-	static hash2(e, t, n) {
-		let r = Math.imul(e, 374761393) ^ Math.imul(t, 668265263) ^ Math.imul(n, 2246822519);
-		return r = Math.imul(r ^ r >>> 13, 1274126177), r ^= r >>> 16, (r >>> 0) / 4294967296;
-	}
-}, i = class e {
-	period;
-	seed;
-	static GRADIENTS = Array.from({ length: 16 }, (e, t) => {
-		let n = t / 16 * Math.PI * 2;
-		return [Math.cos(n), Math.sin(n)];
-	});
-	constructor(e, t) {
-		this.period = e, this.seed = t;
-	}
-	sample(e, t) {
-		let n = Math.floor(e), i = Math.floor(t), a = e - n, o = t - i, s = a * a * a * (a * (a * 6 - 15) + 10), c = o * o * o * (o * (o * 6 - 15) + 10), l = r.mod(n, this.period), u = r.mod(i, this.period), d = r.mod(n + 1, this.period), f = r.mod(i + 1, this.period), p = this.gradientDot(l, u, a, o), m = this.gradientDot(d, u, a - 1, o), h = this.gradientDot(l, f, a, o - 1), g = this.gradientDot(d, f, a - 1, o - 1);
-		return r.lerp(r.lerp(p, m, s), r.lerp(h, g, s), c);
-	}
-	gradientDot(t, n, i, a) {
-		let o = e.GRADIENTS, s = o[Math.floor(r.hash2(t, n, this.seed) * o.length) % o.length];
-		return s[0] * i + s[1] * a;
-	}
-}, a = class {
-	noise;
-	frequency;
-	amplitude;
-	constructor(e, t, n) {
-		this.noise = e, this.frequency = t, this.amplitude = n;
-	}
-}, o = class {
-	octaves = [];
-	totalAmplitude;
-	constructor(e, t, n, r) {
-		let o = 1, s = 0;
-		for (let c = 0; c < n; c++) {
-			let n = Math.max(1, Math.round(e / (t * 2 ** c)));
-			this.octaves.push(new a(new i(n, r + c * 1013), n / e, o)), s += o, o *= .5;
-		}
-		this.totalAmplitude = s;
-	}
-	sample(e, t) {
-		let n = 0;
-		for (let r of this.octaves) n += r.amplitude * r.noise.sample(e * r.frequency, t * r.frequency);
-		return r.clamp(n / this.totalAmplitude * .6 + .5, 0, 1);
-	}
-}, s = class e {
-	r;
-	g;
-	b;
-	constructor(e, t, n) {
-		this.r = e, this.g = t, this.b = n;
-	}
-	static fromCss(t, n) {
-		let r = e.resolveVariable(n);
-		t.fillStyle = "#000000", t.fillStyle = r;
-		let i = t.fillStyle;
-		if (i.startsWith("#")) {
-			let t = i.slice(1), n = t.length === 3 ? t.split("").map((e) => e + e).join("") : t;
-			return new e(parseInt(n.slice(0, 2), 16), parseInt(n.slice(2, 4), 16), parseInt(n.slice(4, 6), 16));
-		}
-		let a = i.match(/rgba?\(([^)]+)\)/);
-		if (a) {
-			let [t, n, r] = a[1].split(/[,/\s]+/).filter(Boolean).map(Number);
-			return new e(t, n, r);
-		}
-		return new e(255, 255, 255);
-	}
-	static resolveVariable(e) {
-		let t = e.match(/^\s*var\(\s*(--[\w-]+)\s*(?:,\s*([^()]+))?\s*\)\s*$/);
-		return t && (getComputedStyle(document.documentElement).getPropertyValue(t[1]).trim() || t[2]?.trim()) || e;
-	}
-}, c = class e {
-	options;
-	static DEFAULT_CELLS = 512;
-	static BAYER_4X4 = [
-		[
-			0,
-			8,
-			2,
-			10
-		],
-		[
-			12,
-			4,
-			14,
-			6
-		],
-		[
-			3,
-			11,
-			1,
-			9
-		],
-		[
-			15,
-			7,
-			13,
-			5
-		]
-	].map((e) => e.map((e) => (e + .5) / 16));
-	islands;
-	detail;
-	constructor(e) {
-		this.options = e, this.islands = new o(e.cells, e.scale, e.octaves, e.seed), this.detail = new o(e.cells, e.detailScale, e.detailOctaves, e.seed + 31337);
-	}
-	toDataURL() {
-		let { cells: t, color: n, density: i, contrast: a, detailStrength: o, clampLow: c, clampHigh: l, seed: u, maxFill: d, jitter: f } = this.options, p = document.createElement("canvas");
-		p.width = t, p.height = t;
-		let m = p.getContext("2d");
-		if (!m) return "";
-		let h = s.fromCss(m, n), g = m.createImageData(t, t), _ = g.data;
-		for (let n = 0; n < t; n++) for (let s = 0; s < t; s++) {
-			let p = this.islands.sample(s, n), m = this.detail.sample(s, n), g = r.clamp(p + (m - .5) * o, 0, 1), v = r.smoothstep(c, Math.max(l, c + .001), g), y = r.clamp((v - .5) * a + i, 0, d);
-			if (e.BAYER_4X4[n % 4][s % 4] * (1 - f) + r.hash2(s, n, u + 991) * f < y) {
-				let e = (n * t + s) * 4;
-				_[e] = h.r, _[e + 1] = h.g, _[e + 2] = h.b, _[e + 3] = Math.round(255 * r.clamp(.4 + .6 * v, 0, 1));
-			}
-		}
-		return m.putImageData(g, 0, 0), p.toDataURL("image/png");
-	}
-}, l = [
-	"noiseTileCells",
-	"noiseColor",
-	"noiseDensity",
-	"noiseContrast",
-	"noiseScale",
-	"noiseOctaves",
-	"noiseDetailScale",
-	"noiseDetailOctaves",
-	"noiseDetailStrength",
-	"noiseClampLow",
-	"noiseClampHigh",
-	"noiseSeed",
-	"noiseMaxFill",
-	"noiseJitter"
-], u = class extends e {
-	constructor(e) {
-		super(e), this.state = { noiseImage: this.createNoiseImage() };
-	}
-	componentDidUpdate(e) {
-		l.some((t) => e[t] !== this.props[t]) && this.setState({ noiseImage: this.createNoiseImage() });
-	}
-	createNoiseImage() {
-		return new c({
-			cells: this.props.noiseTileCells ?? c.DEFAULT_CELLS,
-			color: this.props.noiseColor ?? "var(--color-scarlet-600)",
-			density: this.props.noiseDensity ?? .55,
-			contrast: this.props.noiseContrast ?? 1.8,
-			scale: this.props.noiseScale ?? 32,
-			octaves: this.props.noiseOctaves ?? 3,
-			detailScale: this.props.noiseDetailScale ?? 5,
-			detailOctaves: this.props.noiseDetailOctaves ?? 3,
-			detailStrength: this.props.noiseDetailStrength ?? .2,
-			clampLow: this.props.noiseClampLow ?? 0,
-			clampHigh: this.props.noiseClampHigh ?? .9,
-			seed: this.props.noiseSeed ?? 69,
-			maxFill: this.props.noiseMaxFill ?? .6,
-			jitter: this.props.noiseJitter ?? .3
-		}).toDataURL();
-	}
-	render() {
-		let { backgroundColor: e = "linear-gradient(to bottom, var(--color-wine-950) 0%, var(--color-ink-950) 65%)", gridColor: r = "var(--color-steel-500)", gridSize: i = 41, gridOpacity: a = .23, noiseColor: o = "var(--color-scarlet-600)", noiseOpacity: s = .5, noiseSize: l = 3, noiseTileCells: u = c.DEFAULT_CELLS, noiseDensity: d = .55, noiseContrast: f = 1.8, noiseScale: p = 32, noiseOctaves: m = 3, noiseDetailScale: h = 5, noiseDetailOctaves: g = 3, noiseDetailStrength: _ = .2, noiseClampLow: v = 0, noiseClampHigh: y = .9, noiseSeed: b = 69, noiseMaxFill: x = .6, noiseJitter: S = .3, noiseSpeed: C = 180, noiseAngle: w = 100, noiseTravel: T = 1, fadeStart: E = 0, fadeEnd: D = 90, animateNoise: O = !0, animateGlow: k = !0, children: A, className: j = "", style: M, ...N } = this.props, P = u * l, F = w * Math.PI / 180, I = Math.round(Math.cos(F) * T) * P, L = Math.round(Math.sin(F) * T) * P, R = Math.max(Math.abs(I), Math.abs(L)) + P, z = {
-			"--background-color": e,
-			"--grid-color": r,
-			"--grid-size": `${i}px`,
-			"--grid-opacity": a,
-			"--noise-image": `url("${this.state.noiseImage}")`,
-			"--noise-tile-size": `${P}px`,
-			"--noise-color": o,
-			"--noise-opacity": s,
-			"--noise-speed": `${C}s`,
-			"--noise-x": `${I}px`,
-			"--noise-y": `${L}px`,
-			"--noise-overscan": `${R}px`,
-			"--fade-start": `${E}%`,
-			"--fade-end": `${D}%`,
-			...M
-		};
-		return /* @__PURE__ */ n("div", {
-			className: [
-				"dither-grid-background",
-				O && "dither-grid-background--animated",
-				k && "dither-grid-background--glow",
-				j
-			].filter(Boolean).join(" "),
-			style: z,
-			...N,
-			children: [
-				/* @__PURE__ */ t("div", {
-					className: "dither-grid-background__noise",
-					"aria-hidden": "true",
-					children: /* @__PURE__ */ t("div", { className: "dither-grid-background__noise-texture" })
-				}),
-				/* @__PURE__ */ t("div", {
-					className: "dither-grid-background__grid",
-					"aria-hidden": "true"
-				}),
-				/* @__PURE__ */ t("div", {
-					className: "dither-grid-background__content",
-					children: A
-				})
-			]
-		});
-	}
-};
-export { u as DitherGridBackground, c as DitherTile, o as FractalBrownianNoise, r as MathUtils, i as PerlinNoise, s as RgbColor };
-
-//# sourceMappingURL=index.js.map
+export { t as DitherBackground, n as DitherBackgroundView, r as DitherTile, a as FractalBrownianNoise, s as MathUtils, o as PerlinNoise, i as RgbColor } from "./DitherBackground-CrFqrwp8.js";

package/dist/react.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { Component } from "react";
+import type { DitherBackgroundOptions } from "./DitherBackgroundView";
+export interface DitherGridBackgroundProps extends Omit<HTMLAttributes<HTMLDivElement>, "color">, DitherBackgroundOptions {
+    children?: ReactNode;
+}
+/**
+ * React wrapper around the framework-agnostic `DitherBackground`. Renders a
+ * decorated div with the layered background and its children on top; every
+ * visual prop maps 1:1 to `DitherBackgroundOptions` and is forwarded as CSS
+ * custom properties, so it can be animated at runtime without regenerating
+ * the texture. The tile is built on mount (client-side), so this component is
+ * client-only - in Next.js the `"use client"` entry makes it App Router safe.
+ */
+export declare class DitherGridBackground extends Component<DitherGridBackgroundProps> {
+    private readonly ref;
+    private background?;
+    componentDidMount(): void;
+    componentDidUpdate(prev: DitherGridBackgroundProps): void;
+    componentWillUnmount(): void;
+    private options;
+    render(): import("react").JSX.Element;
+}
+//# sourceMappingURL=react.d.ts.map

package/dist/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAE7C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAGtE,MAAM,WAAW,yBACb,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACjD,uBAAuB;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAgCD;;;;;;;GAOG;AACH,qBAAa,oBAAqB,SAAQ,SAAS,CAAC,yBAAyB,CAAC;IAC1E,OAAO,CAAC,QAAQ,CAAC,GAAG,CAA+B;IACnD,OAAO,CAAC,UAAU,CAAC,CAAmB;IAE7B,iBAAiB,IAAI,IAAI,CAKjC;IAEQ,kBAAkB,CAAC,IAAI,EAAE,yBAAyB,GAAG,IAAI,CAMjE;IAEQ,oBAAoB,IAAI,IAAI,CAGpC;IAED,OAAO,CAAC,OAAO;IAQN,MAAM,gCA+Bd;CACJ"}

package/dist/react.js

@@ -0,0 +1,45 @@
+"use client";
+import { n as e, t } from "./DitherBackground-CrFqrwp8.js";
+import { Component as n, createRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+// src/react.tsx
+var a = /* @__PURE__ */ "backgroundColor.gridColor.gridSize.gridOpacity.noiseColor.noiseOpacity.noiseSize.noiseTileCells.noiseDensity.noiseContrast.noiseScale.noiseOctaves.noiseDetailScale.noiseDetailOctaves.noiseDetailStrength.noiseClampLow.noiseClampHigh.noiseSeed.noiseMaxFill.noiseJitter.noiseSpeed.noiseAngle.noiseTravel.fadeStart.fadeEnd.animateNoise.animateGlow".split("."), o = class extends n {
+	ref = r();
+	background;
+	componentDidMount() {
+		let e = this.ref.current;
+		e && (this.background = new t(this.options(this.props)), this.background.mount(e));
+	}
+	componentDidUpdate(t) {
+		t !== this.props && this.background?.update(new e(this.options(this.props)).options);
+	}
+	componentWillUnmount() {
+		this.background?.destroy(), this.background = void 0;
+	}
+	options(e) {
+		let t = {};
+		for (let n of a) t[n] = e[n];
+		return t;
+	}
+	render() {
+		let { children: e, className: t = "", animateNoise: n, animateGlow: r, ...o } = this.props, s = { ...o };
+		for (let e of a) delete s[e];
+		return /* @__PURE__ */ i("div", {
+			ref: this.ref,
+			className: [
+				"dither-grid-background",
+				n !== !1 && "dither-grid-background--animated",
+				r !== !1 && "dither-grid-background--glow",
+				t
+			].filter(Boolean).join(" "),
+			...s,
+			children: /* @__PURE__ */ i("div", {
+				className: "dither-grid-background__content",
+				children: e
+			})
+		});
+	}
+};
+export { o as DitherGridBackground };
+
+//# sourceMappingURL=react.js.map

package/dist/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","names":["DitherBackgroundView","OPTION_KEYS","DitherGridBackground","Component","createRef","container","DitherBackground","prev","options","key","props","rest","domProps","animateNoise","animateGlow","className"],"sources":["../src/react.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { Component, createRef } from \"react\";\nimport { DitherBackground } from \"./DitherBackground\";\nimport type { DitherBackgroundOptions } from \"./DitherBackgroundView\";\nimport { DitherBackgroundView } from \"./DitherBackgroundView\";\n\nexport interface DitherGridBackgroundProps\n    extends Omit<HTMLAttributes<HTMLDivElement>, \"color\">,\n        DitherBackgroundOptions {\n    children?: ReactNode;\n}\n\nconst OPTION_KEYS: ReadonlyArray<keyof DitherBackgroundOptions> = [\n    \"backgroundColor\",\n    \"gridColor\",\n    \"gridSize\",\n    \"gridOpacity\",\n    \"noiseColor\",\n    \"noiseOpacity\",\n    \"noiseSize\",\n    \"noiseTileCells\",\n    \"noiseDensity\",\n    \"noiseContrast\",\n    \"noiseScale\",\n    \"noiseOctaves\",\n    \"noiseDetailScale\",\n    \"noiseDetailOctaves\",\n    \"noiseDetailStrength\",\n    \"noiseClampLow\",\n    \"noiseClampHigh\",\n    \"noiseSeed\",\n    \"noiseMaxFill\",\n    \"noiseJitter\",\n    \"noiseSpeed\",\n    \"noiseAngle\",\n    \"noiseTravel\",\n    \"fadeStart\",\n    \"fadeEnd\",\n    \"animateNoise\",\n    \"animateGlow\",\n];\n\n/**\n * React wrapper around the framework-agnostic `DitherBackground`. Renders a\n * decorated div with the layered background and its children on top; every\n * visual prop maps 1:1 to `DitherBackgroundOptions` and is forwarded as CSS\n * custom properties, so it can be animated at runtime without regenerating\n * the texture. The tile is built on mount (client-side), so this component is\n * client-only - in Next.js the `\"use client\"` entry makes it App Router safe.\n */\nexport class DitherGridBackground extends Component<DitherGridBackgroundProps> {\n    private readonly ref = createRef<HTMLDivElement>();\n    private background?: DitherBackground;\n\n    override componentDidMount(): void {\n        const container = this.ref.current;\n        if (!container) return;\n        this.background = new DitherBackground(this.options(this.props));\n        this.background.mount(container);\n    }\n\n    override componentDidUpdate(prev: DitherGridBackgroundProps): void {\n        if (prev !== this.props) {\n            this.background?.update(\n                new DitherBackgroundView(this.options(this.props)).options,\n            );\n        }\n    }\n\n    override componentWillUnmount(): void {\n        this.background?.destroy();\n        this.background = undefined;\n    }\n\n    private options(props: DitherGridBackgroundProps): DitherBackgroundOptions {\n        const options: Record<string, unknown> = {};\n        for (const key of OPTION_KEYS) {\n            options[key] = props[key];\n        }\n        return options as DitherBackgroundOptions;\n    }\n\n    override render() {\n        const {\n            children,\n            className = \"\",\n            animateNoise,\n            animateGlow,\n            ...rest\n        } = this.props;\n\n        const domProps: Record<string, unknown> = { ...rest };\n        for (const key of OPTION_KEYS) delete domProps[key];\n\n        return (\n            <div\n                ref={this.ref}\n                className={[\n                    \"dither-grid-background\",\n                    animateNoise !== false\n                        && \"dither-grid-background--animated\",\n                    animateGlow !== false && \"dither-grid-background--glow\",\n                    className,\n                ]\n                    .filter(Boolean)\n                    .join(\" \")}\n                {...(domProps as HTMLAttributes<HTMLDivElement>)}\n            >\n                <div className=\"dither-grid-background__content\">\n                    {children}\n                </div>\n            </div>\n        );\n    }\n}\n"],"mappings":";;;;;AAYA,IAAMC,IAA4D,mXA4BlE,GAUaC,IAAb,cAA0CC,EAAqC;CAC3E,MAAuBC,EAA0B;CACjD;CAEA,oBAAmC;EAC/B,IAAMC,IAAY,KAAK,IAAI;EAC3B,AAAKA,MACL,KAAK,aAAa,IAAIC,EAAiB,KAAK,QAAQ,KAAK,KAAK,CAAC,GAC/D,KAAK,WAAW,MAAMD,CAAS;CACnC;CAEA,mBAA4B,GAAuC;EAC/D,AAAIE,MAAS,KAAK,SACd,KAAK,YAAY,OACb,IAAIP,EAAqB,KAAK,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,OACvD;CAER;CAEA,uBAAsC;EAElC,AADA,KAAK,YAAY,QAAQ,GACzB,KAAK,aAAa,KAAA;CACtB;CAEA,QAAgB,GAA2D;EACvE,IAAMQ,IAAmC,CAAC;EAC1C,KAAK,IAAMC,KAAOR,GACd,EAAQQ,KAAOC,EAAMD;EAEzB,OAAOD;CACX;CAEA,SAAkB;EACd,IAAM,EACF,aACA,eAAY,IACZ,iBACA,gBACA,GAAGG,MACH,KAAK,OAEHC,IAAoC,EAAE,GAAGD,EAAK;EACpD,KAAK,IAAMF,KAAOR,GAAa,OAAOW,EAASH;EAE/C,OACI,kBAAC,OAAD;GACI,KAAK,KAAK;GACV,WAAW;IACP;IACAI,MAAiB,MACV;IACPC,MAAgB,MAAS;IACzBC;GACJ,CAAC,CACI,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;GACb,GAAKH;GAEL,UAAA,kBAAC,OAAD;IAAK,WAAU;IACV;GACA,CAAA;EACJ,CAAA;CAEb;AACJ"}

package/dist/style.css

@@ -1,2 +1,2 @@
-.dither-grid-background{isolation:isolate;background:var(--background-color);min-height:100%;position:relative;overflow:hidden}.dither-grid-background__noise{z-index:0;pointer-events:none;opacity:var(--noise-opacity);-webkit-mask-image:linear-gradient(to bottom, black 0%, black var(--fade-start), #000000b3 55%, transparent var(--fade-end));-webkit-mask-image:linear-gradient(to bottom, black 0%, black var(--fade-start), #000000b3 55%, transparent var(--fade-end));mask-image:linear-gradient(to bottom, black 0%, black var(--fade-start), #000000b3 55%, transparent var(--fade-end));position:absolute;inset:0;overflow:hidden}.dither-grid-background__noise-texture{inset:calc(-1 * var(--noise-overscan));background-image:var(--noise-image);background-size:var(--noise-tile-size) var(--noise-tile-size);image-rendering:pixelated;background-repeat:repeat;position:absolute}.dither-grid-background--animated .dither-grid-background__noise-texture{will-change:transform;animation:dither-noise-scroll var(--noise-speed) linear infinite}@keyframes dither-noise-scroll{0%{transform:translate(0,0)}to{transform:translate3d(var(--noise-x), var(--noise-y), 0)}}.dither-grid-background__grid{z-index:0;pointer-events:none;background-image:linear-gradient(to right, var(--grid-color) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);background-size:var(--grid-size) var(--grid-size);opacity:var(--grid-opacity);position:absolute;inset:0}.dither-grid-background--glow:before{content:"";z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 0%, var(--noise-color) 0%, transparent 65%);opacity:.15;animation:12s ease-in-out infinite alternate dither-glow;position:absolute;inset:-20%}@keyframes dither-glow{0%{opacity:.08;transform:translateY(-2%)}to{opacity:.22;transform:translateY(2%)}}.dither-grid-background__content{z-index:1;min-height:inherit;position:relative}@media (prefers-reduced-motion:reduce){.dither-grid-background--animated .dither-grid-background__noise-texture,.dither-grid-background--glow:before{animation:none}}
+.dither-grid-background{isolation:isolate;background:var(--background-color);min-height:100%;position:relative;overflow:hidden}.dither-grid-background__noise{z-index:-1;pointer-events:none;opacity:var(--noise-opacity);-webkit-mask-image:linear-gradient(to bottom, black 0%, black var(--fade-start), #000000b3 55%, transparent var(--fade-end));-webkit-mask-image:linear-gradient(to bottom, black 0%, black var(--fade-start), #000000b3 55%, transparent var(--fade-end));mask-image:linear-gradient(to bottom, black 0%, black var(--fade-start), #000000b3 55%, transparent var(--fade-end));position:absolute;inset:0;overflow:hidden}.dither-grid-background__noise-texture{inset:calc(-1 * var(--noise-overscan));background-image:var(--noise-image);background-size:var(--noise-tile-size) var(--noise-tile-size);image-rendering:pixelated;background-repeat:repeat;position:absolute}.dither-grid-background--animated .dither-grid-background__noise-texture{will-change:transform;animation:dither-noise-scroll var(--noise-speed) linear infinite}@keyframes dither-noise-scroll{0%{transform:translate(0,0)}to{transform:translate3d(var(--noise-x), var(--noise-y), 0)}}.dither-grid-background__grid{z-index:-1;pointer-events:none;background-image:linear-gradient(to right, var(--grid-color) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);background-size:var(--grid-size) var(--grid-size);opacity:var(--grid-opacity);position:absolute;inset:0}.dither-grid-background--glow:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 0%, var(--noise-color) 0%, transparent 65%);opacity:.15;animation:12s ease-in-out infinite alternate dither-glow;position:absolute;inset:-20%}@keyframes dither-glow{0%{opacity:.08;transform:translateY(-2%)}to{opacity:.22;transform:translateY(2%)}}.dither-grid-background__content{z-index:1;min-height:inherit;position:relative}@media (prefers-reduced-motion:reduce){.dither-grid-background--animated .dither-grid-background__noise-texture,.dither-grid-background--glow:before{animation:none}}
 /*$vite$:1*/

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@code-of-chaos/dither",
-    "version": "0.1.0",
-    "description": "Animated bitmap-dithered gradient backgrounds for React, with a tileable Perlin/fBm noise engine for generating custom dither tiles.",
+    "version": "0.3.0",
+    "description": "Framework-agnostic animated bitmap-dithered gradient backgrounds, with a tileable Perlin/fBm noise engine for generating custom dither tiles.",
     "license": "GPL-3.0-only",
     "type": "module",
     "sideEffects": [
@@ -15,6 +15,10 @@
             "types": "./dist/index.d.ts",
             "import": "./dist/index.js"
         },
+        "./react": {
+            "types": "./dist/react.d.ts",
+            "import": "./dist/react.js"
+        },
         "./style.css": "./dist/style.css"
     },
     "types": "./dist/index.d.ts",
@@ -52,12 +56,15 @@
     "peerDependencies": {
         "react": ">=18"
     },
+    "peerDependenciesMeta": {
+        "react": {
+            "optional": true
+        }
+    },
     "devDependencies": {
         "@biomejs/biome": "^2.6.5",
-        "@testing-library/dom": "^10.4.2",
         "@testing-library/react": "^16.3.3",
         "@types/react": "^19.3.0",
-        "@vitejs/plugin-react": "^6.2.1",
         "happy-dom": "^21.0.4",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",

package/dist/DitherGridBackground.d.ts

@@ -1,53 +0,0 @@
-import type { HTMLAttributes, ReactNode } from "react";
-import { Component } from "react";
-import "./DitherGridBackground.css";
-export interface DitherGridBackgroundProps extends Omit<HTMLAttributes<HTMLDivElement>, "color"> {
-    backgroundColor?: string;
-    gridColor?: string;
-    gridSize?: number;
-    gridOpacity?: number;
-    noiseColor?: string;
-    noiseOpacity?: number;
-    noiseSize?: number;
-    noiseTileCells?: number;
-    noiseDensity?: number;
-    noiseContrast?: number;
-    noiseScale?: number;
-    noiseOctaves?: number;
-    noiseDetailScale?: number;
-    noiseDetailOctaves?: number;
-    noiseDetailStrength?: number;
-    noiseClampLow?: number;
-    noiseClampHigh?: number;
-    noiseSeed?: number;
-    noiseMaxFill?: number;
-    noiseJitter?: number;
-    noiseSpeed?: number;
-    noiseAngle?: number;
-    noiseTravel?: number;
-    fadeStart?: number;
-    fadeEnd?: number;
-    animateNoise?: boolean;
-    animateGlow?: boolean;
-    children?: ReactNode;
-}
-interface DitherGridBackgroundState {
-    noiseImage: string;
-}
-/**
- * Layered page background: a scrolling dither texture, a static grid and an
- * optional ambient glow. Every visual property is forwarded as a CSS custom
- * property, so it can be animated at runtime (React state, CSS transitions)
- * without regenerating the texture.
- *
- * The dither tile is generated once and cached in state; it is only rebuilt
- * when one of the tile inputs (TILE_INPUTS) changes.
- */
-export declare class DitherGridBackground extends Component<DitherGridBackgroundProps, DitherGridBackgroundState> {
-    constructor(props: DitherGridBackgroundProps);
-    componentDidUpdate(prev: DitherGridBackgroundProps): void;
-    private createNoiseImage;
-    render(): import("react").JSX.Element;
-}
-export {};
-//# sourceMappingURL=DitherGridBackground.d.ts.map

package/dist/DitherGridBackground.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DitherGridBackground.d.ts","sourceRoot":"","sources":["../src/DitherGridBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,4BAA4B,CAAC;AAMpC,MAAM,WAAW,yBACb,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACrD,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,UAAU,yBAAyB;IAC/B,UAAU,EAAE,MAAM,CAAC;CACtB;AAoBD;;;;;;;;GAQG;AACH,qBAAa,oBAAqB,SAAQ,SAAS,CAC/C,yBAAyB,EACzB,yBAAyB,CAC5B;IACG,YAAY,KAAK,EAAE,yBAAyB,EAG3C;IAEQ,kBAAkB,CAAC,IAAI,EAAE,yBAAyB,GAAG,IAAI,CAIjE;IAED,OAAO,CAAC,gBAAgB;IAmBf,MAAM,gCAmGd;CACJ"}

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["MathUtils","value","min","max","a","b","t","x","edge0","edge1","period","h","y","seed","PerlinNoise","angle","i","x0","y0","fx","fy","u","v","ix0","iy0","ix1","iy1","n00","n10","n01","n11","gradients","g","ix","iy","dx","dy","Octave","noise","frequency","amplitude","FractalBrownianNoise","total","o","octaves","cells","scale","sum","octave","RgbColor","r","resolved","css","normalized","ctx","hex","full","c","match","DitherTile","row","options","canvas","rgb","color","image","data","island","detail","combined","detailStrength","n","clampLow","clampHigh","p","contrast","density","maxFill","jitter","TILE_INPUTS","DitherGridBackground","Component","props","prev","key","tileSize","noiseTileCells","noiseSize","noiseAngle","travelX","noiseTravel","travelY","overscan","variables","backgroundColor","gridColor","gridSize","gridOpacity","noiseColor","noiseOpacity","noiseSpeed","fadeStart","fadeEnd","style","animateNoise","animateGlow","className"],"sources":["../src/MathUtils.ts","../src/PerlinNoise.ts","../src/FractalBrownianNoise.ts","../src/RgbColor.ts","../src/DitherTile.ts","../src/DitherGridBackground.tsx"],"sourcesContent":["/**\n * Small math helpers used by the noise and dither pipeline.\n * The standard Math library has no clamp/lerp/smoothstep/mod equivalents.\n */\nexport class MathUtils {\n    static clamp(value: number, min: number, max: number): number {\n        return Math.min(Math.max(value, min), max);\n    }\n\n    static lerp(a: number, b: number, t: number): number {\n        return a + (b - a) * t;\n    }\n\n    static smoothstep(edge0: number, edge1: number, x: number): number {\n        const t = MathUtils.clamp((x - edge0) / (edge1 - edge0), 0, 1);\n        return t * t * (3 - 2 * t);\n    }\n\n    static mod(value: number, period: number): number {\n        return ((value % period) + period) % period;\n    }\n\n    static hash2(x: number, y: number, seed: number): number {\n        let h =\n            Math.imul(x, 374761393)\n            ^ Math.imul(y, 668265263)\n            ^ Math.imul(seed, 2246822519);\n        h = Math.imul(h ^ (h >>> 13), 1274126177);\n        h ^= h >>> 16;\n        return (h >>> 0) / 4294967296;\n    }\n}\n","import { MathUtils } from \"./MathUtils\";\n\n/**\n * Tileable 2D Perlin gradient noise. Lattice coordinates wrap at `period`,\n * so sampling the [0, period) cell range produces a seamless tile.\n * Raw output is roughly in [-1, 1] (see FractalBrownianNoise for normalized values).\n */\nexport class PerlinNoise {\n    private static readonly GRADIENTS: ReadonlyArray<\n        readonly [number, number]\n    > = Array.from({ length: 16 }, (_, i) => {\n        const angle = (i / 16) * Math.PI * 2;\n        return [Math.cos(angle), Math.sin(angle)] as const;\n    });\n\n    constructor(\n        private readonly period: number,\n        private readonly seed: number,\n    ) {}\n\n    sample(x: number, y: number): number {\n        const x0 = Math.floor(x);\n        const y0 = Math.floor(y);\n        const fx = x - x0;\n        const fy = y - y0;\n\n        const u = fx * fx * fx * (fx * (fx * 6 - 15) + 10);\n        const v = fy * fy * fy * (fy * (fy * 6 - 15) + 10);\n\n        const ix0 = MathUtils.mod(x0, this.period);\n        const iy0 = MathUtils.mod(y0, this.period);\n        const ix1 = MathUtils.mod(x0 + 1, this.period);\n        const iy1 = MathUtils.mod(y0 + 1, this.period);\n\n        const n00 = this.gradientDot(ix0, iy0, fx, fy);\n        const n10 = this.gradientDot(ix1, iy0, fx - 1, fy);\n        const n01 = this.gradientDot(ix0, iy1, fx, fy - 1);\n        const n11 = this.gradientDot(ix1, iy1, fx - 1, fy - 1);\n\n        return MathUtils.lerp(\n            MathUtils.lerp(n00, n10, u),\n            MathUtils.lerp(n01, n11, u),\n            v,\n        );\n    }\n\n    private gradientDot(\n        ix: number,\n        iy: number,\n        dx: number,\n        dy: number,\n    ): number {\n        const gradients = PerlinNoise.GRADIENTS;\n        const g =\n            gradients[\n                Math.floor(\n                    MathUtils.hash2(ix, iy, this.seed) * gradients.length,\n                ) % gradients.length\n            ];\n        return g[0] * dx + g[1] * dy;\n    }\n}\n","import { MathUtils } from \"./MathUtils\";\nimport { PerlinNoise } from \"./PerlinNoise\";\n\nclass Octave {\n    constructor(\n        readonly noise: PerlinNoise,\n        readonly frequency: number,\n        readonly amplitude: number,\n    ) {}\n}\n\n/**\n * Fractal Brownian motion: stacks PerlinNoise octaves with halved amplitude\n * and doubled frequency per octave. Coordinates are expressed in tile cells,\n * keeping every octave (and therefore the whole field) seamlessly tileable.\n * Output is normalized to [0, 1].\n */\nexport class FractalBrownianNoise {\n    private readonly octaves: Octave[] = [];\n    private readonly totalAmplitude: number;\n\n    constructor(cells: number, scale: number, octaves: number, seed: number) {\n        let amplitude = 1;\n        let total = 0;\n\n        for (let o = 0; o < octaves; o++) {\n            const period = Math.max(1, Math.round(cells / (scale * 2 ** o)));\n            this.octaves.push(\n                new Octave(\n                    new PerlinNoise(period, seed + o * 1013),\n                    period / cells,\n                    amplitude,\n                ),\n            );\n            total += amplitude;\n            amplitude *= 0.5;\n        }\n\n        this.totalAmplitude = total;\n    }\n\n    sample(x: number, y: number): number {\n        let sum = 0;\n\n        for (const octave of this.octaves) {\n            sum +=\n                octave.amplitude\n                * octave.noise.sample(\n                    x * octave.frequency,\n                    y * octave.frequency,\n                );\n        }\n\n        return MathUtils.clamp((sum / this.totalAmplitude) * 0.6 + 0.5, 0, 1);\n    }\n}\n","/** Immutable RGB triple with CSS color parsing. */\nexport class RgbColor {\n    constructor(\n        readonly r: number,\n        readonly g: number,\n        readonly b: number,\n    ) {}\n\n    /**\n     * Parses any CSS color (named, hex, rgb()/rgba()) by letting the canvas\n     * resolve it: assigning to fillStyle normalizes the value to a canonical\n     * string which is then read back. Falls back to white on invalid input.\n     *\n     * A single var(--token, fallback) reference is resolved against the\n     * document root first, so theme variables can be used as color parameters.\n     */\n    static fromCss(ctx: CanvasRenderingContext2D, css: string): RgbColor {\n        const resolved = RgbColor.resolveVariable(css);\n        ctx.fillStyle = \"#000000\";\n        ctx.fillStyle = resolved;\n        const normalized = ctx.fillStyle;\n\n        if (normalized.startsWith(\"#\")) {\n            const hex = normalized.slice(1);\n            const full =\n                hex.length === 3\n                    ? hex\n                          .split(\"\")\n                          .map((c) => c + c)\n                          .join(\"\")\n                    : hex;\n            return new RgbColor(\n                parseInt(full.slice(0, 2), 16),\n                parseInt(full.slice(2, 4), 16),\n                parseInt(full.slice(4, 6), 16),\n            );\n        }\n\n        const match = normalized.match(/rgba?\\(([^)]+)\\)/);\n        if (match) {\n            const [r, g, b] = match[1]\n                .split(/[,/\\s]+/)\n                .filter(Boolean)\n                .map(Number);\n            return new RgbColor(r, g, b);\n        }\n\n        return new RgbColor(255, 255, 255);\n    }\n\n    private static resolveVariable(css: string): string {\n        const match = css.match(\n            /^\\s*var\\(\\s*(--[\\w-]+)\\s*(?:,\\s*([^()]+))?\\s*\\)\\s*$/,\n        );\n        if (!match) return css;\n\n        const value = getComputedStyle(document.documentElement)\n            .getPropertyValue(match[1])\n            .trim();\n        return value || match[2]?.trim() || css;\n    }\n}\n","import { FractalBrownianNoise } from \"./FractalBrownianNoise\";\nimport { MathUtils } from \"./MathUtils\";\nimport { RgbColor } from \"./RgbColor\";\n\n/**\n * All visual knobs of the tile. `scale`/`octaves` shape the large island\n * field, `detail*` the fine detail field; `clampLow`/`clampHigh` soft-clip\n * the blend (clean voids at the low end, no saturation at the high end),\n * `maxFill` caps how dense the dither can get, and `jitter` blends the\n * Bayer threshold with per-pixel random values for an organic look.\n */\nexport type DitherTileOptions = {\n    cells: number;\n    color: string;\n    density: number;\n    contrast: number;\n    scale: number;\n    octaves: number;\n    detailScale: number;\n    detailOctaves: number;\n    detailStrength: number;\n    clampLow: number;\n    clampHigh: number;\n    seed: number;\n    maxFill: number;\n    jitter: number;\n};\n\n/**\n * Renders a seamless dithered noise tile as a PNG data URL.\n *\n * Per pixel: the island and detail noise fields are blended into a density\n * value, soft-clamped, then thresholded against a Bayer matrix mixed with\n * per-pixel jitter to decide whether the pixel is inked. Because the noise\n * fields tile seamlessly, the resulting image can be repeated and scrolled\n * forever without visible seams.\n */\nexport class DitherTile {\n    static readonly DEFAULT_CELLS = 512;\n\n    private static readonly BAYER_4X4 = [\n        [0, 8, 2, 10],\n        [12, 4, 14, 6],\n        [3, 11, 1, 9],\n        [15, 7, 13, 5],\n    ].map((row) => row.map((v) => (v + 0.5) / 16));\n\n    private readonly islands: FractalBrownianNoise;\n    private readonly detail: FractalBrownianNoise;\n\n    constructor(private readonly options: DitherTileOptions) {\n        this.islands = new FractalBrownianNoise(\n            options.cells,\n            options.scale,\n            options.octaves,\n            options.seed,\n        );\n        this.detail = new FractalBrownianNoise(\n            options.cells,\n            options.detailScale,\n            options.detailOctaves,\n            options.seed + 31337,\n        );\n    }\n\n    toDataURL(): string {\n        const {\n            cells,\n            color,\n            density,\n            contrast,\n            detailStrength,\n            clampLow,\n            clampHigh,\n            seed,\n            maxFill,\n            jitter,\n        } = this.options;\n\n        const canvas = document.createElement(\"canvas\");\n        canvas.width = cells;\n        canvas.height = cells;\n\n        const ctx = canvas.getContext(\"2d\");\n        if (!ctx) return \"\";\n\n        const rgb = RgbColor.fromCss(ctx, color);\n        const image = ctx.createImageData(cells, cells);\n        const data = image.data;\n\n        for (let y = 0; y < cells; y++) {\n            for (let x = 0; x < cells; x++) {\n                const island = this.islands.sample(x, y);\n                const detail = this.detail.sample(x, y);\n                const combined = MathUtils.clamp(\n                    island + (detail - 0.5) * detailStrength,\n                    0,\n                    1,\n                );\n                const n = MathUtils.smoothstep(\n                    clampLow,\n                    Math.max(clampHigh, clampLow + 0.001),\n                    combined,\n                );\n                const p = MathUtils.clamp(\n                    (n - 0.5) * contrast + density,\n                    0,\n                    maxFill,\n                );\n                const bayer = DitherTile.BAYER_4X4[y % 4][x % 4];\n                const threshold =\n                    bayer * (1 - jitter)\n                    + MathUtils.hash2(x, y, seed + 991) * jitter;\n\n                if (threshold < p) {\n                    const i = (y * cells + x) * 4;\n                    data[i] = rgb.r;\n                    data[i + 1] = rgb.g;\n                    data[i + 2] = rgb.b;\n                    data[i + 3] = Math.round(\n                        255 * MathUtils.clamp(0.4 + 0.6 * n, 0, 1),\n                    );\n                }\n            }\n        }\n\n        ctx.putImageData(image, 0, 0);\n        return canvas.toDataURL(\"image/png\");\n    }\n}\n","import type { CSSProperties, HTMLAttributes, ReactNode } from \"react\";\nimport { Component } from \"react\";\nimport { DitherTile } from \"./DitherTile\";\nimport \"./DitherGridBackground.css\";\n\ntype CSSVars = CSSProperties & {\n    [key: `--${string}`]: string | number | undefined;\n};\n\nexport interface DitherGridBackgroundProps\n    extends Omit<HTMLAttributes<HTMLDivElement>, \"color\"> {\n    backgroundColor?: string;\n\n    gridColor?: string;\n    gridSize?: number;\n    gridOpacity?: number;\n\n    noiseColor?: string;\n    noiseOpacity?: number;\n    noiseSize?: number;\n    noiseTileCells?: number;\n    noiseDensity?: number;\n    noiseContrast?: number;\n    noiseScale?: number;\n    noiseOctaves?: number;\n    noiseDetailScale?: number;\n    noiseDetailOctaves?: number;\n    noiseDetailStrength?: number;\n    noiseClampLow?: number;\n    noiseClampHigh?: number;\n    noiseSeed?: number;\n    noiseMaxFill?: number;\n    noiseJitter?: number;\n    noiseSpeed?: number;\n    noiseAngle?: number;\n    noiseTravel?: number;\n\n    fadeStart?: number;\n    fadeEnd?: number;\n\n    animateNoise?: boolean;\n    animateGlow?: boolean;\n\n    children?: ReactNode;\n}\n\ninterface DitherGridBackgroundState {\n    noiseImage: string;\n}\n\n/** Props that affect the generated tile; all others only set CSS variables. */\nconst TILE_INPUTS: ReadonlyArray<keyof DitherGridBackgroundProps> = [\n    \"noiseTileCells\",\n    \"noiseColor\",\n    \"noiseDensity\",\n    \"noiseContrast\",\n    \"noiseScale\",\n    \"noiseOctaves\",\n    \"noiseDetailScale\",\n    \"noiseDetailOctaves\",\n    \"noiseDetailStrength\",\n    \"noiseClampLow\",\n    \"noiseClampHigh\",\n    \"noiseSeed\",\n    \"noiseMaxFill\",\n    \"noiseJitter\",\n];\n\n/**\n * Layered page background: a scrolling dither texture, a static grid and an\n * optional ambient glow. Every visual property is forwarded as a CSS custom\n * property, so it can be animated at runtime (React state, CSS transitions)\n * without regenerating the texture.\n *\n * The dither tile is generated once and cached in state; it is only rebuilt\n * when one of the tile inputs (TILE_INPUTS) changes.\n */\nexport class DitherGridBackground extends Component<\n    DitherGridBackgroundProps,\n    DitherGridBackgroundState\n> {\n    constructor(props: DitherGridBackgroundProps) {\n        super(props);\n        this.state = { noiseImage: this.createNoiseImage() };\n    }\n\n    override componentDidUpdate(prev: DitherGridBackgroundProps): void {\n        if (TILE_INPUTS.some((key) => prev[key] !== this.props[key])) {\n            this.setState({ noiseImage: this.createNoiseImage() });\n        }\n    }\n\n    private createNoiseImage(): string {\n        return new DitherTile({\n            cells: this.props.noiseTileCells ?? DitherTile.DEFAULT_CELLS,\n            color: this.props.noiseColor ?? \"var(--color-scarlet-600)\",\n            density: this.props.noiseDensity ?? 0.55,\n            contrast: this.props.noiseContrast ?? 1.8,\n            scale: this.props.noiseScale ?? 32,\n            octaves: this.props.noiseOctaves ?? 3,\n            detailScale: this.props.noiseDetailScale ?? 5,\n            detailOctaves: this.props.noiseDetailOctaves ?? 3,\n            detailStrength: this.props.noiseDetailStrength ?? 0.2,\n            clampLow: this.props.noiseClampLow ?? 0,\n            clampHigh: this.props.noiseClampHigh ?? 0.9,\n            seed: this.props.noiseSeed ?? 69,\n            maxFill: this.props.noiseMaxFill ?? 0.6,\n            jitter: this.props.noiseJitter ?? 0.3,\n        }).toDataURL();\n    }\n\n    override render() {\n        const {\n            backgroundColor = \"linear-gradient(to bottom, var(--color-wine-950) 0%, var(--color-ink-950) 65%)\",\n\n            gridColor = \"var(--color-steel-500)\",\n            gridSize = 41,\n            gridOpacity = 0.23,\n\n            noiseColor = \"var(--color-scarlet-600)\",\n            noiseOpacity = 0.5,\n            noiseSize = 3,\n            noiseTileCells = DitherTile.DEFAULT_CELLS,\n            noiseDensity = 0.55,\n            noiseContrast = 1.8,\n            noiseScale = 32,\n            noiseOctaves = 3,\n            noiseDetailScale = 5,\n            noiseDetailOctaves = 3,\n            noiseDetailStrength = 0.2,\n            noiseClampLow = 0,\n            noiseClampHigh = 0.9,\n            noiseSeed = 69,\n            noiseMaxFill = 0.6,\n            noiseJitter = 0.3,\n            noiseSpeed = 180,\n            noiseAngle = 100, // Yes this is slightly higher than 90\n            noiseTravel = 1,\n\n            fadeStart = 0,\n            fadeEnd = 90,\n\n            animateNoise = true,\n            animateGlow = true,\n\n            children,\n            className = \"\",\n            style,\n            ...props\n        } = this.props;\n\n        const tileSize = noiseTileCells * noiseSize;\n        const angle = (noiseAngle * Math.PI) / 180;\n        const travelX = Math.round(Math.cos(angle) * noiseTravel) * tileSize;\n        const travelY = Math.round(Math.sin(angle) * noiseTravel) * tileSize;\n        const overscan =\n            Math.max(Math.abs(travelX), Math.abs(travelY)) + tileSize;\n\n        const variables: CSSVars = {\n            \"--background-color\": backgroundColor,\n\n            \"--grid-color\": gridColor,\n            \"--grid-size\": `${gridSize}px`,\n            \"--grid-opacity\": gridOpacity,\n\n            \"--noise-image\": `url(\"${this.state.noiseImage}\")`,\n            \"--noise-tile-size\": `${tileSize}px`,\n            \"--noise-color\": noiseColor,\n            \"--noise-opacity\": noiseOpacity,\n            \"--noise-speed\": `${noiseSpeed}s`,\n            \"--noise-x\": `${travelX}px`,\n            \"--noise-y\": `${travelY}px`,\n            \"--noise-overscan\": `${overscan}px`,\n\n            \"--fade-start\": `${fadeStart}%`,\n            \"--fade-end\": `${fadeEnd}%`,\n\n            ...style,\n        };\n\n        return (\n            <div\n                className={[\n                    \"dither-grid-background\",\n                    animateNoise && \"dither-grid-background--animated\",\n                    animateGlow && \"dither-grid-background--glow\",\n                    className,\n                ]\n                    .filter(Boolean)\n                    .join(\" \")}\n                style={variables}\n                {...props}\n            >\n                <div\n                    className=\"dither-grid-background__noise\"\n                    aria-hidden=\"true\"\n                >\n                    <div className=\"dither-grid-background__noise-texture\" />\n                </div>\n\n                <div\n                    className=\"dither-grid-background__grid\"\n                    aria-hidden=\"true\"\n                />\n\n                <div className=\"dither-grid-background__content\">\n                    {children}\n                </div>\n            </div>\n        );\n    }\n}\n"],"mappings":"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"}