interactive-bg 0.1.1 → 0.2.0

package/dist/shimmer/canvas2d.cjs

@@ -0,0 +1,14 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_canvas2d_renderer = require("../core/canvas2d-renderer.cjs");
+const require_style = require("../core/style.cjs");
+const require_canvas2d = require("../styles/shimmer/canvas2d.cjs");
+const require_definition = require("../styles/shimmer/definition.cjs");
+// src/shimmer/canvas2d.ts
+/** Iridescent light bands, drawn with Canvas 2D only. */
+var shimmer = require_style.defineStyle({
+	...require_definition.shimmerStyle,
+	renderers: [require_canvas2d_renderer.canvas2dRenderer(require_canvas2d.createShimmerCanvas2D)]
+});
+exports.shimmer = shimmer;
+
+//# sourceMappingURL=canvas2d.cjs.map

package/dist/shimmer/canvas2d.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas2d.cjs","names":["defineStyle","shimmerStyle","canvas2dRenderer","createShimmerCanvas2D"],"sources":["../../src/shimmer/canvas2d.ts"],"sourcesContent":["import { canvas2dRenderer } from '../core/canvas2d-renderer';\nimport { defineStyle, type StyleFactory } from '../core/style';\nimport { createShimmerCanvas2D } from '../styles/shimmer/canvas2d';\nimport { shimmerStyle } from '../styles/shimmer/definition';\nimport type { ShimmerOptions } from '../styles/shimmer/options';\n\nexport type { ShimmerOptions };\n\n/** Iridescent light bands, drawn with Canvas 2D only. */\nexport const shimmer: StyleFactory<ShimmerOptions> = defineStyle({\n  ...shimmerStyle,\n  renderers: [canvas2dRenderer(createShimmerCanvas2D)],\n});\n"],"mappings":";;;;;;;AASA,IAAa,UAAwCA,cAAAA,YAAY;CAC/D,GAAGC,mBAAAA;CACH,WAAW,CAACC,0BAAAA,iBAAiBC,iBAAAA,qBAAqB,CAAC;AACrD,CAAC"}

package/dist/shimmer/canvas2d.d.cts

@@ -0,0 +1,5 @@
+import { type StyleFactory } from '../core/style.cjs';
+import type { ShimmerOptions } from '../styles/shimmer/options.cjs';
+export type { ShimmerOptions };
+/** Iridescent light bands, drawn with Canvas 2D only. */
+export declare const shimmer: StyleFactory<ShimmerOptions>;

package/dist/shimmer/canvas2d.d.ts

@@ -0,0 +1,5 @@
+import { type StyleFactory } from '../core/style.js';
+import type { ShimmerOptions } from '../styles/shimmer/options.js';
+export type { ShimmerOptions };
+/** Iridescent light bands, drawn with Canvas 2D only. */
+export declare const shimmer: StyleFactory<ShimmerOptions>;

package/dist/shimmer/canvas2d.js

@@ -0,0 +1,13 @@
+import { canvas2dRenderer } from "../core/canvas2d-renderer.js";
+import { defineStyle } from "../core/style.js";
+import { createShimmerCanvas2D } from "../styles/shimmer/canvas2d.js";
+import { shimmerStyle } from "../styles/shimmer/definition.js";
+// src/shimmer/canvas2d.ts
+/** Iridescent light bands, drawn with Canvas 2D only. */
+var shimmer = defineStyle({
+	...shimmerStyle,
+	renderers: [canvas2dRenderer(createShimmerCanvas2D)]
+});
+export { shimmer };
+
+//# sourceMappingURL=canvas2d.js.map

package/dist/shimmer/canvas2d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas2d.js","names":[],"sources":["../../src/shimmer/canvas2d.ts"],"sourcesContent":["import { canvas2dRenderer } from '../core/canvas2d-renderer';\nimport { defineStyle, type StyleFactory } from '../core/style';\nimport { createShimmerCanvas2D } from '../styles/shimmer/canvas2d';\nimport { shimmerStyle } from '../styles/shimmer/definition';\nimport type { ShimmerOptions } from '../styles/shimmer/options';\n\nexport type { ShimmerOptions };\n\n/** Iridescent light bands, drawn with Canvas 2D only. */\nexport const shimmer: StyleFactory<ShimmerOptions> = defineStyle({\n  ...shimmerStyle,\n  renderers: [canvas2dRenderer(createShimmerCanvas2D)],\n});\n"],"mappings":";;;;;;AASA,IAAa,UAAwC,YAAY;CAC/D,GAAG;CACH,WAAW,CAAC,iBAAiB,qBAAqB,CAAC;AACrD,CAAC"}

package/dist/shimmer/index.cjs

@@ -0,0 +1,16 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_canvas2d_renderer = require("../core/canvas2d-renderer.cjs");
+const require_style = require("../core/style.cjs");
+const require_webgl_renderer = require("../core/webgl-renderer.cjs");
+const require_canvas2d = require("../styles/shimmer/canvas2d.cjs");
+const require_definition = require("../styles/shimmer/definition.cjs");
+const require_webgl = require("../styles/shimmer/webgl.cjs");
+// src/shimmer/index.ts
+/** Iridescent light bands, drawn with WebGL2 where available and Canvas 2D otherwise. */
+var shimmer = require_style.defineStyle({
+	...require_definition.shimmerStyle,
+	renderers: [require_webgl_renderer.webglRenderer(require_webgl.createShimmerWebGL), require_canvas2d_renderer.canvas2dRenderer(require_canvas2d.createShimmerCanvas2D)]
+});
+exports.shimmer = shimmer;
+
+//# sourceMappingURL=index.cjs.map

package/dist/shimmer/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["defineStyle","shimmerStyle","webglRenderer","createShimmerWebGL","canvas2dRenderer","createShimmerCanvas2D"],"sources":["../../src/shimmer/index.ts"],"sourcesContent":["import { canvas2dRenderer } from '../core/canvas2d-renderer';\nimport { defineStyle, type StyleFactory } from '../core/style';\nimport { webglRenderer } from '../core/webgl-renderer';\nimport { createShimmerCanvas2D } from '../styles/shimmer/canvas2d';\nimport { shimmerStyle } from '../styles/shimmer/definition';\nimport type { ShimmerOptions } from '../styles/shimmer/options';\nimport { createShimmerWebGL } from '../styles/shimmer/webgl';\n\nexport type { ShimmerOptions };\n\n/** Iridescent light bands, drawn with WebGL2 where available and Canvas 2D otherwise. */\nexport const shimmer: StyleFactory<ShimmerOptions> = defineStyle({\n  ...shimmerStyle,\n  renderers: [webglRenderer(createShimmerWebGL), canvas2dRenderer(createShimmerCanvas2D)],\n});\n"],"mappings":";;;;;;;;;AAWA,IAAa,UAAwCA,cAAAA,YAAY;CAC/D,GAAGC,mBAAAA;CACH,WAAW,CAACC,uBAAAA,cAAcC,cAAAA,kBAAkB,GAAGC,0BAAAA,iBAAiBC,iBAAAA,qBAAqB,CAAC;AACxF,CAAC"}

package/dist/shimmer/index.d.cts

@@ -0,0 +1,5 @@
+import { type StyleFactory } from '../core/style.cjs';
+import type { ShimmerOptions } from '../styles/shimmer/options.cjs';
+export type { ShimmerOptions };
+/** Iridescent light bands, drawn with WebGL2 where available and Canvas 2D otherwise. */
+export declare const shimmer: StyleFactory<ShimmerOptions>;

package/dist/shimmer/index.d.ts

@@ -0,0 +1,5 @@
+import { type StyleFactory } from '../core/style.js';
+import type { ShimmerOptions } from '../styles/shimmer/options.js';
+export type { ShimmerOptions };
+/** Iridescent light bands, drawn with WebGL2 where available and Canvas 2D otherwise. */
+export declare const shimmer: StyleFactory<ShimmerOptions>;

package/dist/shimmer/index.js

@@ -0,0 +1,15 @@
+import { canvas2dRenderer } from "../core/canvas2d-renderer.js";
+import { defineStyle } from "../core/style.js";
+import { webglRenderer } from "../core/webgl-renderer.js";
+import { createShimmerCanvas2D } from "../styles/shimmer/canvas2d.js";
+import { shimmerStyle } from "../styles/shimmer/definition.js";
+import { createShimmerWebGL } from "../styles/shimmer/webgl.js";
+// src/shimmer/index.ts
+/** Iridescent light bands, drawn with WebGL2 where available and Canvas 2D otherwise. */
+var shimmer = defineStyle({
+	...shimmerStyle,
+	renderers: [webglRenderer(createShimmerWebGL), canvas2dRenderer(createShimmerCanvas2D)]
+});
+export { shimmer };
+
+//# sourceMappingURL=index.js.map

package/dist/shimmer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/shimmer/index.ts"],"sourcesContent":["import { canvas2dRenderer } from '../core/canvas2d-renderer';\nimport { defineStyle, type StyleFactory } from '../core/style';\nimport { webglRenderer } from '../core/webgl-renderer';\nimport { createShimmerCanvas2D } from '../styles/shimmer/canvas2d';\nimport { shimmerStyle } from '../styles/shimmer/definition';\nimport type { ShimmerOptions } from '../styles/shimmer/options';\nimport { createShimmerWebGL } from '../styles/shimmer/webgl';\n\nexport type { ShimmerOptions };\n\n/** Iridescent light bands, drawn with WebGL2 where available and Canvas 2D otherwise. */\nexport const shimmer: StyleFactory<ShimmerOptions> = defineStyle({\n  ...shimmerStyle,\n  renderers: [webglRenderer(createShimmerWebGL), canvas2dRenderer(createShimmerCanvas2D)],\n});\n"],"mappings":";;;;;;;;AAWA,IAAa,UAAwC,YAAY;CAC/D,GAAG;CACH,WAAW,CAAC,cAAc,kBAAkB,GAAG,iBAAiB,qBAAqB,CAAC;AACxF,CAAC"}

package/dist/shimmer/webgl.cjs

@@ -0,0 +1,14 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_style = require("../core/style.cjs");
+const require_webgl_renderer = require("../core/webgl-renderer.cjs");
+const require_definition = require("../styles/shimmer/definition.cjs");
+const require_webgl = require("../styles/shimmer/webgl.cjs");
+// src/shimmer/webgl.ts
+/** Iridescent light bands, drawn with WebGL2 only. */
+var shimmer = require_style.defineStyle({
+	...require_definition.shimmerStyle,
+	renderers: [require_webgl_renderer.webglRenderer(require_webgl.createShimmerWebGL)]
+});
+exports.shimmer = shimmer;
+
+//# sourceMappingURL=webgl.cjs.map

package/dist/shimmer/webgl.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"webgl.cjs","names":["defineStyle","shimmerStyle","webglRenderer","createShimmerWebGL"],"sources":["../../src/shimmer/webgl.ts"],"sourcesContent":["import { defineStyle, type StyleFactory } from '../core/style';\nimport { webglRenderer } from '../core/webgl-renderer';\nimport { shimmerStyle } from '../styles/shimmer/definition';\nimport type { ShimmerOptions } from '../styles/shimmer/options';\nimport { createShimmerWebGL } from '../styles/shimmer/webgl';\n\nexport type { ShimmerOptions };\n\n/** Iridescent light bands, drawn with WebGL2 only. */\nexport const shimmer: StyleFactory<ShimmerOptions> = defineStyle({\n  ...shimmerStyle,\n  renderers: [webglRenderer(createShimmerWebGL)],\n});\n"],"mappings":";;;;;;;AASA,IAAa,UAAwCA,cAAAA,YAAY;CAC/D,GAAGC,mBAAAA;CACH,WAAW,CAACC,uBAAAA,cAAcC,cAAAA,kBAAkB,CAAC;AAC/C,CAAC"}

package/dist/shimmer/webgl.d.cts

@@ -0,0 +1,5 @@
+import { type StyleFactory } from '../core/style.cjs';
+import type { ShimmerOptions } from '../styles/shimmer/options.cjs';
+export type { ShimmerOptions };
+/** Iridescent light bands, drawn with WebGL2 only. */
+export declare const shimmer: StyleFactory<ShimmerOptions>;

package/dist/shimmer/webgl.d.ts

@@ -0,0 +1,5 @@
+import { type StyleFactory } from '../core/style.js';
+import type { ShimmerOptions } from '../styles/shimmer/options.js';
+export type { ShimmerOptions };
+/** Iridescent light bands, drawn with WebGL2 only. */
+export declare const shimmer: StyleFactory<ShimmerOptions>;

package/dist/shimmer/webgl.js

@@ -0,0 +1,13 @@
+import { defineStyle } from "../core/style.js";
+import { webglRenderer } from "../core/webgl-renderer.js";
+import { shimmerStyle } from "../styles/shimmer/definition.js";
+import { createShimmerWebGL } from "../styles/shimmer/webgl.js";
+// src/shimmer/webgl.ts
+/** Iridescent light bands, drawn with WebGL2 only. */
+var shimmer = defineStyle({
+	...shimmerStyle,
+	renderers: [webglRenderer(createShimmerWebGL)]
+});
+export { shimmer };
+
+//# sourceMappingURL=webgl.js.map

package/dist/shimmer/webgl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webgl.js","names":[],"sources":["../../src/shimmer/webgl.ts"],"sourcesContent":["import { defineStyle, type StyleFactory } from '../core/style';\nimport { webglRenderer } from '../core/webgl-renderer';\nimport { shimmerStyle } from '../styles/shimmer/definition';\nimport type { ShimmerOptions } from '../styles/shimmer/options';\nimport { createShimmerWebGL } from '../styles/shimmer/webgl';\n\nexport type { ShimmerOptions };\n\n/** Iridescent light bands, drawn with WebGL2 only. */\nexport const shimmer: StyleFactory<ShimmerOptions> = defineStyle({\n  ...shimmerStyle,\n  renderers: [webglRenderer(createShimmerWebGL)],\n});\n"],"mappings":";;;;;;AASA,IAAa,UAAwC,YAAY;CAC/D,GAAG;CACH,WAAW,CAAC,cAAc,kBAAkB,CAAC;AAC/C,CAAC"}

package/dist/styles/fluid/canvas2d.cjs

@@ -0,0 +1,155 @@
+const require_color = require("./color.cjs");
+const require_options = require("./options.cjs");
+const require_settings = require("./settings.cjs");
+const require_simulation = require("./simulation.cjs");
+const require_size = require("./size.cjs");
+// src/styles/fluid/canvas2d.ts
+var TAU = Math.PI * 2;
+/**
+* The CPU fallback: the same stable-fluids simulation as the WebGL renderer,
+* on a small grid, upscaled as one image. It is softer than the GPU version but
+* keeps the style working without WebGL2 (or the float render-target extension).
+*/
+function createFluidCanvas2D(ctx, initial) {
+	let options = require_options.resolveFluidOptions(initial);
+	let sim = null;
+	let image = null;
+	let target = null;
+	let targetCtx = null;
+	let builtWidth = 0;
+	let builtHeight = 0;
+	let builtResolution = -1;
+	let clock = 0;
+	let active = 0;
+	let idleTime = 0;
+	let lastX = 0;
+	let lastY = 0;
+	let wasInside = false;
+	let burstPending = true;
+	function allocate(width, height) {
+		const grid = require_size.simulationSize(options.resolution, width, height);
+		sim = require_simulation.createFluidSimulation(grid.width, grid.height);
+		target = document.createElement("canvas");
+		target.width = grid.width;
+		target.height = grid.height;
+		targetCtx = target.getContext("2d");
+		image = targetCtx?.createImageData(grid.width, grid.height) ?? null;
+		builtWidth = width;
+		builtHeight = height;
+		builtResolution = options.resolution;
+		burstPending = true;
+	}
+	function wake() {
+		active = Math.max(active, require_settings.IDLE_CLEAR + .5);
+		idleTime = 0;
+	}
+	function splatAt(frame, x, y, vx, vy, colour, radius) {
+		sim?.splat(x, y, vx, vy, colour, radius, frame.width, frame.height);
+	}
+	function burst(frame) {
+		const colour = require_color.splatColor(options, clock);
+		const dye = [
+			colour[0] * require_settings.BURST_DYE,
+			colour[1] * require_settings.BURST_DYE,
+			colour[2] * require_settings.BURST_DYE
+		];
+		const angle = Math.random() * TAU;
+		const speed = options.force * require_settings.BURST_FORCE;
+		splatAt(frame, frame.width * (.34 + Math.random() * .18), frame.height * (.4 + Math.random() * .2), Math.cos(angle) * speed, Math.sin(angle) * speed, dye, options.radius * require_settings.BURST_RADIUS);
+		wake();
+	}
+	function click(frame, x, y) {
+		const colour = require_color.splatColor(options, clock);
+		const dye = [
+			colour[0] * 10,
+			colour[1] * 10,
+			colour[2] * 10
+		];
+		splatAt(frame, x, y, 10 * (Math.random() - .5), 30 * (Math.random() - .5), dye, options.radius);
+		wake();
+	}
+	function draw(frame) {
+		if (!sim || !image || !target || !targetCtx) return;
+		const { dyeR, dyeG, dyeB } = sim;
+		const data = image.data;
+		for (let k = 0; k < dyeR.length; k++) {
+			const r = Math.min(1, Math.max(0, dyeR[k]));
+			const g = Math.min(1, Math.max(0, dyeG[k]));
+			const b = Math.min(1, Math.max(0, dyeB[k]));
+			const density = Math.max(r, Math.max(g, b));
+			const scale = density > 1e-4 ? 255 / density : 0;
+			const o = k * 4;
+			data[o] = Math.round(r * scale);
+			data[o + 1] = Math.round(g * scale);
+			data[o + 2] = Math.round(b * scale);
+			data[o + 3] = Math.round(density * 255);
+		}
+		targetCtx.putImageData(image, 0, 0);
+		ctx.globalAlpha = options.opacity;
+		ctx.imageSmoothingEnabled = true;
+		ctx.drawImage(target, 0, 0, frame.width, frame.height);
+		ctx.globalAlpha = 1;
+	}
+	return {
+		update(next) {
+			options = require_options.resolveFluidOptions(next);
+		},
+		render(frame) {
+			if (!sim || frame.width !== builtWidth || frame.height !== builtHeight || options.resolution !== builtResolution) allocate(frame.width, frame.height);
+			if (frame.reducedMotion) {
+				if (burstPending) {
+					burstPending = false;
+					burst(frame);
+				}
+				draw(frame);
+				return false;
+			}
+			const dt = Math.min(frame.dt, 1 / 60);
+			const { pointer } = frame;
+			if (burstPending) {
+				burstPending = false;
+				burst(frame);
+			}
+			if (pointer.influence > 0) {
+				if (wasInside) {
+					const moveX = pointer.x - lastX;
+					const moveY = pointer.y - lastY;
+					const dx = moveX / Math.max(1, frame.width);
+					const dy = moveY / Math.max(1, frame.height);
+					if (Math.hypot(moveX, moveY) > .5) {
+						const colour = require_color.splatColor(options, clock);
+						const strength = options.force * pointer.influence;
+						splatAt(frame, pointer.x, pointer.y, dx * strength, dy * strength, colour, options.radius);
+						wake();
+					}
+				}
+				lastX = pointer.x;
+				lastY = pointer.y;
+				wasInside = true;
+			} else wasInside = false;
+			for (const clickPoint of frame.clicks) click(frame, clickPoint.x, clickPoint.y);
+			if (dt > 0) {
+				idleTime += dt;
+				if (idleTime >= 3.5) {
+					sim?.clear();
+					idleTime = 0;
+					active = 0;
+					draw(frame);
+					return false;
+				}
+				const effective = idleTime > .5 ? {
+					...options,
+					fade: Math.min(options.fade, require_settings.IDLE_DECAY)
+				} : options;
+				sim?.step(dt, effective);
+				clock += dt;
+				active = Math.max(0, active - dt);
+			}
+			draw(frame);
+			return active > 0;
+		}
+	};
+}
+exports.createFluidCanvas2D = createFluidCanvas2D;
+
+//# sourceMappingURL=canvas2d.cjs.map

package/dist/styles/fluid/canvas2d.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas2d.cjs","names":["resolveFluidOptions","simulationSize","createFluidSimulation","IDLE_CLEAR","splatColor","BURST_DYE","BURST_FORCE","BURST_RADIUS","IDLE_DECAY"],"sources":["../../../src/styles/fluid/canvas2d.ts"],"sourcesContent":["import type { Frame, StyleRenderer } from '../../core/style';\nimport { splatColor, type RGB } from './color';\nimport { resolveFluidOptions, type FluidOptions } from './options';\nimport { BURST_DYE, BURST_FORCE, BURST_RADIUS, IDLE_CLEAR, IDLE_DECAY, IDLE_DELAY } from './settings';\nimport { createFluidSimulation, type FluidSimulation } from './simulation';\nimport { simulationSize } from './size';\n\nconst TAU = Math.PI * 2;\n\n/**\n * The CPU fallback: the same stable-fluids simulation as the WebGL renderer,\n * on a small grid, upscaled as one image. It is softer than the GPU version but\n * keeps the style working without WebGL2 (or the float render-target extension).\n */\nexport function createFluidCanvas2D(ctx: CanvasRenderingContext2D, initial: FluidOptions): StyleRenderer<FluidOptions> {\n  let options = resolveFluidOptions(initial);\n  let sim: FluidSimulation | null = null;\n  let image: ImageData | null = null;\n  let target: HTMLCanvasElement | null = null;\n  let targetCtx: CanvasRenderingContext2D | null = null;\n  let builtWidth = 0;\n  let builtHeight = 0;\n  let builtResolution = -1;\n\n  let clock = 0;\n  let active = 0;\n  let idleTime = 0;\n  let lastX = 0;\n  let lastY = 0;\n  let wasInside = false;\n  let burstPending = true;\n\n  function allocate(width: number, height: number): void {\n    const grid = simulationSize(options.resolution, width, height);\n    sim = createFluidSimulation(grid.width, grid.height);\n    target = document.createElement('canvas');\n    target.width = grid.width;\n    target.height = grid.height;\n    targetCtx = target.getContext('2d');\n    image = targetCtx?.createImageData(grid.width, grid.height) ?? null;\n    builtWidth = width;\n    builtHeight = height;\n    builtResolution = options.resolution;\n    burstPending = true;\n  }\n\n  function wake(): void {\n    active = Math.max(active, IDLE_CLEAR + 0.5);\n    idleTime = 0;\n  }\n\n  function splatAt(\n    frame: Frame,\n    x: number,\n    y: number,\n    vx: number,\n    vy: number,\n    colour: RGB,\n    radius: number,\n  ): void {\n    sim?.splat(x, y, vx, vy, colour, radius, frame.width, frame.height);\n  }\n\n  function burst(frame: Frame): void {\n    const colour = splatColor(options, clock);\n    const dye: RGB = [colour[0] * BURST_DYE, colour[1] * BURST_DYE, colour[2] * BURST_DYE];\n    const angle = Math.random() * TAU;\n    const speed = options.force * BURST_FORCE;\n    splatAt(\n      frame,\n      frame.width * (0.34 + Math.random() * 0.18),\n      frame.height * (0.4 + Math.random() * 0.2),\n      Math.cos(angle) * speed,\n      Math.sin(angle) * speed,\n      dye,\n      options.radius * BURST_RADIUS,\n    );\n    wake();\n  }\n\n  function click(frame: Frame, x: number, y: number): void {\n    const colour = splatColor(options, clock);\n    const dye: RGB = [colour[0] * 10, colour[1] * 10, colour[2] * 10];\n    const dx = 10 * (Math.random() - 0.5);\n    const dy = 30 * (Math.random() - 0.5);\n    splatAt(frame, x, y, dx, dy, dye, options.radius);\n    wake();\n  }\n\n  function draw(frame: Frame): void {\n    if (!sim || !image || !target || !targetCtx) return;\n    const { dyeR, dyeG, dyeB } = sim;\n    const data = image.data;\n    for (let k = 0; k < dyeR.length; k++) {\n      const r = Math.min(1, Math.max(0, dyeR[k]));\n      const g = Math.min(1, Math.max(0, dyeG[k]));\n      const b = Math.min(1, Math.max(0, dyeB[k]));\n      const density = Math.max(r, Math.max(g, b));\n      const scale = density > 0.0001 ? 255 / density : 0;\n      const o = k * 4;\n      data[o] = Math.round(r * scale);\n      data[o + 1] = Math.round(g * scale);\n      data[o + 2] = Math.round(b * scale);\n      data[o + 3] = Math.round(density * 255);\n    }\n    targetCtx.putImageData(image, 0, 0);\n    ctx.globalAlpha = options.opacity;\n    ctx.imageSmoothingEnabled = true;\n    ctx.drawImage(target, 0, 0, frame.width, frame.height);\n    ctx.globalAlpha = 1;\n  }\n\n  return {\n    update(next) {\n      options = resolveFluidOptions(next);\n    },\n    render(frame) {\n      if (\n        !sim ||\n        frame.width !== builtWidth ||\n        frame.height !== builtHeight ||\n        options.resolution !== builtResolution\n      ) {\n        allocate(frame.width, frame.height);\n      }\n\n      if (frame.reducedMotion) {\n        // One static splash, then hold it: no simulation steps and no pointer splats.\n        if (burstPending) {\n          burstPending = false;\n          burst(frame);\n        }\n        draw(frame);\n        return false;\n      }\n\n      const dt = Math.min(frame.dt, 1 / 60);\n      const { pointer } = frame;\n\n      if (burstPending) {\n        burstPending = false;\n        burst(frame);\n      }\n\n      if (pointer.influence > 0) {\n        if (wasInside) {\n          const moveX = pointer.x - lastX;\n          const moveY = pointer.y - lastY;\n          const dx = moveX / Math.max(1, frame.width);\n          const dy = moveY / Math.max(1, frame.height);\n          // Like a real mousemove stream: don't keep adding dye to a resting pointer.\n          if (Math.hypot(moveX, moveY) > 0.5) {\n            const colour = splatColor(options, clock);\n            const strength = options.force * pointer.influence;\n            splatAt(frame, pointer.x, pointer.y, dx * strength, dy * strength, colour, options.radius);\n            wake();\n          }\n        }\n        lastX = pointer.x;\n        lastY = pointer.y;\n        wasInside = true;\n      } else {\n        wasInside = false;\n      }\n\n      for (const clickPoint of frame.clicks) click(frame, clickPoint.x, clickPoint.y);\n\n      if (dt > 0) {\n        idleTime += dt;\n        if (idleTime >= IDLE_CLEAR) {\n          sim?.clear();\n          idleTime = 0;\n          active = 0;\n          draw(frame);\n          return false;\n        }\n        const effective =\n          idleTime > IDLE_DELAY ? { ...options, fade: Math.min(options.fade, IDLE_DECAY) } : options;\n        sim?.step(dt, effective);\n        clock += dt;\n        active = Math.max(0, active - dt);\n      }\n\n      draw(frame);\n      return active > 0;\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/styles/fluid/canvas2d.d.cts

@@ -0,0 +1,8 @@
+import type { StyleRenderer } from '../../core/style.cjs';
+import { type FluidOptions } from './options.cjs';
+/**
+ * The CPU fallback: the same stable-fluids simulation as the WebGL renderer,
+ * on a small grid, upscaled as one image. It is softer than the GPU version but
+ * keeps the style working without WebGL2 (or the float render-target extension).
+ */
+export declare function createFluidCanvas2D(ctx: CanvasRenderingContext2D, initial: FluidOptions): StyleRenderer<FluidOptions>;

package/dist/styles/fluid/canvas2d.d.ts

@@ -0,0 +1,8 @@
+import type { StyleRenderer } from '../../core/style.js';
+import { type FluidOptions } from './options.js';
+/**
+ * The CPU fallback: the same stable-fluids simulation as the WebGL renderer,
+ * on a small grid, upscaled as one image. It is softer than the GPU version but
+ * keeps the style working without WebGL2 (or the float render-target extension).
+ */
+export declare function createFluidCanvas2D(ctx: CanvasRenderingContext2D, initial: FluidOptions): StyleRenderer<FluidOptions>;

package/dist/styles/fluid/canvas2d.js

@@ -0,0 +1,155 @@
+import { splatColor } from "./color.js";
+import { resolveFluidOptions } from "./options.js";
+import { BURST_DYE, BURST_FORCE, BURST_RADIUS, IDLE_CLEAR, IDLE_DECAY } from "./settings.js";
+import { createFluidSimulation } from "./simulation.js";
+import { simulationSize } from "./size.js";
+// src/styles/fluid/canvas2d.ts
+var TAU = Math.PI * 2;
+/**
+* The CPU fallback: the same stable-fluids simulation as the WebGL renderer,
+* on a small grid, upscaled as one image. It is softer than the GPU version but
+* keeps the style working without WebGL2 (or the float render-target extension).
+*/
+function createFluidCanvas2D(ctx, initial) {
+	let options = resolveFluidOptions(initial);
+	let sim = null;
+	let image = null;
+	let target = null;
+	let targetCtx = null;
+	let builtWidth = 0;
+	let builtHeight = 0;
+	let builtResolution = -1;
+	let clock = 0;
+	let active = 0;
+	let idleTime = 0;
+	let lastX = 0;
+	let lastY = 0;
+	let wasInside = false;
+	let burstPending = true;
+	function allocate(width, height) {
+		const grid = simulationSize(options.resolution, width, height);
+		sim = createFluidSimulation(grid.width, grid.height);
+		target = document.createElement("canvas");
+		target.width = grid.width;
+		target.height = grid.height;
+		targetCtx = target.getContext("2d");
+		image = targetCtx?.createImageData(grid.width, grid.height) ?? null;
+		builtWidth = width;
+		builtHeight = height;
+		builtResolution = options.resolution;
+		burstPending = true;
+	}
+	function wake() {
+		active = Math.max(active, IDLE_CLEAR + .5);
+		idleTime = 0;
+	}
+	function splatAt(frame, x, y, vx, vy, colour, radius) {
+		sim?.splat(x, y, vx, vy, colour, radius, frame.width, frame.height);
+	}
+	function burst(frame) {
+		const colour = splatColor(options, clock);
+		const dye = [
+			colour[0] * BURST_DYE,
+			colour[1] * BURST_DYE,
+			colour[2] * BURST_DYE
+		];
+		const angle = Math.random() * TAU;
+		const speed = options.force * BURST_FORCE;
+		splatAt(frame, frame.width * (.34 + Math.random() * .18), frame.height * (.4 + Math.random() * .2), Math.cos(angle) * speed, Math.sin(angle) * speed, dye, options.radius * BURST_RADIUS);
+		wake();
+	}
+	function click(frame, x, y) {
+		const colour = splatColor(options, clock);
+		const dye = [
+			colour[0] * 10,
+			colour[1] * 10,
+			colour[2] * 10
+		];
+		splatAt(frame, x, y, 10 * (Math.random() - .5), 30 * (Math.random() - .5), dye, options.radius);
+		wake();
+	}
+	function draw(frame) {
+		if (!sim || !image || !target || !targetCtx) return;
+		const { dyeR, dyeG, dyeB } = sim;
+		const data = image.data;
+		for (let k = 0; k < dyeR.length; k++) {
+			const r = Math.min(1, Math.max(0, dyeR[k]));
+			const g = Math.min(1, Math.max(0, dyeG[k]));
+			const b = Math.min(1, Math.max(0, dyeB[k]));
+			const density = Math.max(r, Math.max(g, b));
+			const scale = density > 1e-4 ? 255 / density : 0;
+			const o = k * 4;
+			data[o] = Math.round(r * scale);
+			data[o + 1] = Math.round(g * scale);
+			data[o + 2] = Math.round(b * scale);
+			data[o + 3] = Math.round(density * 255);
+		}
+		targetCtx.putImageData(image, 0, 0);
+		ctx.globalAlpha = options.opacity;
+		ctx.imageSmoothingEnabled = true;
+		ctx.drawImage(target, 0, 0, frame.width, frame.height);
+		ctx.globalAlpha = 1;
+	}
+	return {
+		update(next) {
+			options = resolveFluidOptions(next);
+		},
+		render(frame) {
+			if (!sim || frame.width !== builtWidth || frame.height !== builtHeight || options.resolution !== builtResolution) allocate(frame.width, frame.height);
+			if (frame.reducedMotion) {
+				if (burstPending) {
+					burstPending = false;
+					burst(frame);
+				}
+				draw(frame);
+				return false;
+			}
+			const dt = Math.min(frame.dt, 1 / 60);
+			const { pointer } = frame;
+			if (burstPending) {
+				burstPending = false;
+				burst(frame);
+			}
+			if (pointer.influence > 0) {
+				if (wasInside) {
+					const moveX = pointer.x - lastX;
+					const moveY = pointer.y - lastY;
+					const dx = moveX / Math.max(1, frame.width);
+					const dy = moveY / Math.max(1, frame.height);
+					if (Math.hypot(moveX, moveY) > .5) {
+						const colour = splatColor(options, clock);
+						const strength = options.force * pointer.influence;
+						splatAt(frame, pointer.x, pointer.y, dx * strength, dy * strength, colour, options.radius);
+						wake();
+					}
+				}
+				lastX = pointer.x;
+				lastY = pointer.y;
+				wasInside = true;
+			} else wasInside = false;
+			for (const clickPoint of frame.clicks) click(frame, clickPoint.x, clickPoint.y);
+			if (dt > 0) {
+				idleTime += dt;
+				if (idleTime >= 3.5) {
+					sim?.clear();
+					idleTime = 0;
+					active = 0;
+					draw(frame);
+					return false;
+				}
+				const effective = idleTime > .5 ? {
+					...options,
+					fade: Math.min(options.fade, IDLE_DECAY)
+				} : options;
+				sim?.step(dt, effective);
+				clock += dt;
+				active = Math.max(0, active - dt);
+			}
+			draw(frame);
+			return active > 0;
+		}
+	};
+}
+export { createFluidCanvas2D };
+
+//# sourceMappingURL=canvas2d.js.map

package/dist/styles/fluid/canvas2d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas2d.js","names":[],"sources":["../../../src/styles/fluid/canvas2d.ts"],"sourcesContent":["import type { Frame, StyleRenderer } from '../../core/style';\nimport { splatColor, type RGB } from './color';\nimport { resolveFluidOptions, type FluidOptions } from './options';\nimport { BURST_DYE, BURST_FORCE, BURST_RADIUS, IDLE_CLEAR, IDLE_DECAY, IDLE_DELAY } from './settings';\nimport { createFluidSimulation, type FluidSimulation } from './simulation';\nimport { simulationSize } from './size';\n\nconst TAU = Math.PI * 2;\n\n/**\n * The CPU fallback: the same stable-fluids simulation as the WebGL renderer,\n * on a small grid, upscaled as one image. It is softer than the GPU version but\n * keeps the style working without WebGL2 (or the float render-target extension).\n */\nexport function createFluidCanvas2D(ctx: CanvasRenderingContext2D, initial: FluidOptions): StyleRenderer<FluidOptions> {\n  let options = resolveFluidOptions(initial);\n  let sim: FluidSimulation | null = null;\n  let image: ImageData | null = null;\n  let target: HTMLCanvasElement | null = null;\n  let targetCtx: CanvasRenderingContext2D | null = null;\n  let builtWidth = 0;\n  let builtHeight = 0;\n  let builtResolution = -1;\n\n  let clock = 0;\n  let active = 0;\n  let idleTime = 0;\n  let lastX = 0;\n  let lastY = 0;\n  let wasInside = false;\n  let burstPending = true;\n\n  function allocate(width: number, height: number): void {\n    const grid = simulationSize(options.resolution, width, height);\n    sim = createFluidSimulation(grid.width, grid.height);\n    target = document.createElement('canvas');\n    target.width = grid.width;\n    target.height = grid.height;\n    targetCtx = target.getContext('2d');\n    image = targetCtx?.createImageData(grid.width, grid.height) ?? null;\n    builtWidth = width;\n    builtHeight = height;\n    builtResolution = options.resolution;\n    burstPending = true;\n  }\n\n  function wake(): void {\n    active = Math.max(active, IDLE_CLEAR + 0.5);\n    idleTime = 0;\n  }\n\n  function splatAt(\n    frame: Frame,\n    x: number,\n    y: number,\n    vx: number,\n    vy: number,\n    colour: RGB,\n    radius: number,\n  ): void {\n    sim?.splat(x, y, vx, vy, colour, radius, frame.width, frame.height);\n  }\n\n  function burst(frame: Frame): void {\n    const colour = splatColor(options, clock);\n    const dye: RGB = [colour[0] * BURST_DYE, colour[1] * BURST_DYE, colour[2] * BURST_DYE];\n    const angle = Math.random() * TAU;\n    const speed = options.force * BURST_FORCE;\n    splatAt(\n      frame,\n      frame.width * (0.34 + Math.random() * 0.18),\n      frame.height * (0.4 + Math.random() * 0.2),\n      Math.cos(angle) * speed,\n      Math.sin(angle) * speed,\n      dye,\n      options.radius * BURST_RADIUS,\n    );\n    wake();\n  }\n\n  function click(frame: Frame, x: number, y: number): void {\n    const colour = splatColor(options, clock);\n    const dye: RGB = [colour[0] * 10, colour[1] * 10, colour[2] * 10];\n    const dx = 10 * (Math.random() - 0.5);\n    const dy = 30 * (Math.random() - 0.5);\n    splatAt(frame, x, y, dx, dy, dye, options.radius);\n    wake();\n  }\n\n  function draw(frame: Frame): void {\n    if (!sim || !image || !target || !targetCtx) return;\n    const { dyeR, dyeG, dyeB } = sim;\n    const data = image.data;\n    for (let k = 0; k < dyeR.length; k++) {\n      const r = Math.min(1, Math.max(0, dyeR[k]));\n      const g = Math.min(1, Math.max(0, dyeG[k]));\n      const b = Math.min(1, Math.max(0, dyeB[k]));\n      const density = Math.max(r, Math.max(g, b));\n      const scale = density > 0.0001 ? 255 / density : 0;\n      const o = k * 4;\n      data[o] = Math.round(r * scale);\n      data[o + 1] = Math.round(g * scale);\n      data[o + 2] = Math.round(b * scale);\n      data[o + 3] = Math.round(density * 255);\n    }\n    targetCtx.putImageData(image, 0, 0);\n    ctx.globalAlpha = options.opacity;\n    ctx.imageSmoothingEnabled = true;\n    ctx.drawImage(target, 0, 0, frame.width, frame.height);\n    ctx.globalAlpha = 1;\n  }\n\n  return {\n    update(next) {\n      options = resolveFluidOptions(next);\n    },\n    render(frame) {\n      if (\n        !sim ||\n        frame.width !== builtWidth ||\n        frame.height !== builtHeight ||\n        options.resolution !== builtResolution\n      ) {\n        allocate(frame.width, frame.height);\n      }\n\n      if (frame.reducedMotion) {\n        // One static splash, then hold it: no simulation steps and no pointer splats.\n        if (burstPending) {\n          burstPending = false;\n          burst(frame);\n        }\n        draw(frame);\n        return false;\n      }\n\n      const dt = Math.min(frame.dt, 1 / 60);\n      const { pointer } = frame;\n\n      if (burstPending) {\n        burstPending = false;\n        burst(frame);\n      }\n\n      if (pointer.influence > 0) {\n        if (wasInside) {\n          const moveX = pointer.x - lastX;\n          const moveY = pointer.y - lastY;\n          const dx = moveX / Math.max(1, frame.width);\n          const dy = moveY / Math.max(1, frame.height);\n          // Like a real mousemove stream: don't keep adding dye to a resting pointer.\n          if (Math.hypot(moveX, moveY) > 0.5) {\n            const colour = splatColor(options, clock);\n            const strength = options.force * pointer.influence;\n            splatAt(frame, pointer.x, pointer.y, dx * strength, dy * strength, colour, options.radius);\n            wake();\n          }\n        }\n        lastX = pointer.x;\n        lastY = pointer.y;\n        wasInside = true;\n      } else {\n        wasInside = false;\n      }\n\n      for (const clickPoint of frame.clicks) click(frame, clickPoint.x, clickPoint.y);\n\n      if (dt > 0) {\n        idleTime += dt;\n        if (idleTime >= IDLE_CLEAR) {\n          sim?.clear();\n          idleTime = 0;\n          active = 0;\n          draw(frame);\n          return false;\n        }\n        const effective =\n          idleTime > IDLE_DELAY ? { ...options, fade: Math.min(options.fade, IDLE_DECAY) } : options;\n        sim?.step(dt, effective);\n        clock += dt;\n        active = Math.max(0, active - dt);\n      }\n\n      draw(frame);\n      return active > 0;\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/styles/fluid/color.cjs

@@ -0,0 +1,40 @@
+const require_color = require("../../core/color.cjs");
+// src/styles/fluid/color.ts
+/** HSL (all in 0–1) to straight RGB. */
+function hslToRgb(h, s, l) {
+	if (s === 0) return [
+		l,
+		l,
+		l
+	];
+	const q = l < .5 ? l * (1 + s) : l + s - l * s;
+	const p = 2 * l - q;
+	const channel = (t) => {
+		let k = t % 1;
+		if (k < 0) k += 1;
+		if (k < 1 / 6) return p + (q - p) * 6 * k;
+		if (k < 1 / 2) return q;
+		if (k < 2 / 3) return p + (q - p) * (2 / 3 - k) * 6;
+		return p;
+	};
+	return [
+		channel(h + 1 / 3),
+		channel(h),
+		channel(h - 1 / 3)
+	];
+}
+/** The colour of a splash made at `clock` seconds: the fixed colour, or the cycling hue. */
+function splatColor(options, clock) {
+	if (options.color) {
+		const [r, g, b, a] = require_color.parseColor(options.color);
+		return [
+			r * a,
+			g * a,
+			b * a
+		];
+	}
+	return hslToRgb(((.55 + Math.floor(clock * options.colorSpeed) * .61803398875) % 1 + 1) % 1, 1, .5);
+}
+exports.splatColor = splatColor;
+
+//# sourceMappingURL=color.cjs.map

package/dist/styles/fluid/color.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.cjs","names":["parseColor"],"sources":["../../../src/styles/fluid/color.ts"],"sourcesContent":["import { parseColor } from '../../core/color';\nimport type { ResolvedFluidOptions } from './options';\n\nexport type RGB = readonly [number, number, number];\n\n/** HSL (all in 0–1) to straight RGB. */\nfunction hslToRgb(h: number, s: number, l: number): RGB {\n  if (s === 0) return [l, l, l];\n  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;\n  const p = 2 * l - q;\n  const channel = (t: number) => {\n    let k = t % 1;\n    if (k < 0) k += 1;\n    if (k < 1 / 6) return p + (q - p) * 6 * k;\n    if (k < 1 / 2) return q;\n    if (k < 2 / 3) return p + (q - p) * (2 / 3 - k) * 6;\n    return p;\n  };\n  return [channel(h + 1 / 3), channel(h), channel(h - 1 / 3)];\n}\n\n/** The colour of a splash made at `clock` seconds: the fixed colour, or the cycling hue. */\nexport function splatColor(options: ResolvedFluidOptions, clock: number): RGB {\n  if (options.color) {\n    const [r, g, b, a] = parseColor(options.color);\n    return [r * a, g * a, b * a];\n  }\n  const step = Math.floor(clock * options.colorSpeed);\n  const hue = (((0.55 + step * 0.61803398875) % 1) + 1) % 1;\n  return hslToRgb(hue, 1, 0.5);\n}\n"],"mappings":";;;AAMA,SAAS,SAAS,GAAW,GAAW,GAAgB;CACtD,IAAI,MAAM,GAAG,OAAO;EAAC;EAAG;EAAG;CAAC;CAC5B,MAAM,IAAI,IAAI,KAAM,KAAK,IAAI,KAAK,IAAI,IAAI,IAAI;CAC9C,MAAM,IAAI,IAAI,IAAI;CAClB,MAAM,WAAW,MAAc;EAC7B,IAAI,IAAI,IAAI;EACZ,IAAI,IAAI,GAAG,KAAK;EAChB,IAAI,IAAI,IAAI,GAAG,OAAO,KAAK,IAAI,KAAK,IAAI;EACxC,IAAI,IAAI,IAAI,GAAG,OAAO;EACtB,IAAI,IAAI,IAAI,GAAG,OAAO,KAAK,IAAI,MAAM,IAAI,IAAI,KAAK;EAClD,OAAO;CACT;CACA,OAAO;EAAC,QAAQ,IAAI,IAAI,CAAC;EAAG,QAAQ,CAAC;EAAG,QAAQ,IAAI,IAAI,CAAC;CAAC;AAC5D;;AAGA,SAAgB,WAAW,SAA+B,OAAoB;CAC5E,IAAI,QAAQ,OAAO;EACjB,MAAM,CAAC,GAAG,GAAG,GAAG,KAAKA,cAAAA,WAAW,QAAQ,KAAK;EAC7C,OAAO;GAAC,IAAI;GAAG,IAAI;GAAG,IAAI;EAAC;CAC7B;CAGA,OAAO,WADQ,MADF,KAAK,MAAM,QAAQ,QAAQ,UAClB,IAAO,gBAAiB,IAAK,KAAK,GACnC,GAAG,EAAG;AAC7B"}

package/dist/styles/fluid/color.d.cts

@@ -0,0 +1,4 @@
+import type { ResolvedFluidOptions } from './options.cjs';
+export type RGB = readonly [number, number, number];
+/** The colour of a splash made at `clock` seconds: the fixed colour, or the cycling hue. */
+export declare function splatColor(options: ResolvedFluidOptions, clock: number): RGB;

package/dist/styles/fluid/color.d.ts

@@ -0,0 +1,4 @@
+import type { ResolvedFluidOptions } from './options.js';
+export type RGB = readonly [number, number, number];
+/** The colour of a splash made at `clock` seconds: the fixed colour, or the cycling hue. */
+export declare function splatColor(options: ResolvedFluidOptions, clock: number): RGB;

package/dist/styles/fluid/color.js

@@ -0,0 +1,40 @@
+import { parseColor } from "../../core/color.js";
+// src/styles/fluid/color.ts
+/** HSL (all in 0–1) to straight RGB. */
+function hslToRgb(h, s, l) {
+	if (s === 0) return [
+		l,
+		l,
+		l
+	];
+	const q = l < .5 ? l * (1 + s) : l + s - l * s;
+	const p = 2 * l - q;
+	const channel = (t) => {
+		let k = t % 1;
+		if (k < 0) k += 1;
+		if (k < 1 / 6) return p + (q - p) * 6 * k;
+		if (k < 1 / 2) return q;
+		if (k < 2 / 3) return p + (q - p) * (2 / 3 - k) * 6;
+		return p;
+	};
+	return [
+		channel(h + 1 / 3),
+		channel(h),
+		channel(h - 1 / 3)
+	];
+}
+/** The colour of a splash made at `clock` seconds: the fixed colour, or the cycling hue. */
+function splatColor(options, clock) {
+	if (options.color) {
+		const [r, g, b, a] = parseColor(options.color);
+		return [
+			r * a,
+			g * a,
+			b * a
+		];
+	}
+	return hslToRgb(((.55 + Math.floor(clock * options.colorSpeed) * .61803398875) % 1 + 1) % 1, 1, .5);
+}
+export { splatColor };
+
+//# sourceMappingURL=color.js.map