@code-of-chaos/dither 0.0.0-stage → 0.2.0

package/dist/index.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 { s as DitherBackground, o as DitherBackgroundView, a as DitherTile, r as FractalBrownianNoise, e as MathUtils, t as PerlinNoise, i as RgbColor };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"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","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/style.css

@@ -0,0 +1,2 @@
+.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,6 +1,59 @@
 {
-  "name": "@code-of-chaos/dither",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+    "name": "@code-of-chaos/dither",
+    "version": "0.2.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": [
+        "**/*.css"
+    ],
+    "files": [
+        "dist"
+    ],
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js"
+        },
+        "./style.css": "./dist/style.css"
+    },
+    "types": "./dist/index.d.ts",
+    "module": "./dist/index.js",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build && tsc -p tsconfig.build.json",
+        "test": "vitest run",
+        "test:watch": "vitest",
+        "lint": "biome lint .",
+        "format": "biome format --write .",
+        "prepublishOnly": "npm run build"
+    },
+    "keywords": [
+        "react",
+        "dither",
+        "bitmap",
+        "gradient",
+        "background",
+        "noise",
+        "perlin",
+        "bayer",
+        "animation"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/code-of-chaos/Dither.Js.git"
+    },
+    "engines": {
+        "node": ">=26"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "devDependencies": {
+        "@biomejs/biome": "^2.6.5",
+        "happy-dom": "^21.0.4",
+        "typescript": "~7.0.2",
+        "vite": "^8.3.6",
+        "vitest": "^5.1.0"
+    }
+}