interactive-bg 0.1.0 → 0.2.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","names":[],"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,KAAK,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/definition.cjs

@@ -0,0 +1,14 @@
+// src/styles/fluid/definition.ts
+/**
+* A GPU fluid simulation: pointer movement injects velocity and dye, the dye is
+* advected into curling plumes, and clicks send out a burst. A gentle splash
+* plays when the background appears; otherwise it is still until stirred.
+*/
+var fluidStyle = {
+	name: "fluid",
+	defaults: require("./options.cjs").fluidDefaults,
+	animates: () => false
+};
+exports.fluidStyle = fluidStyle;
+
+//# sourceMappingURL=definition.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"definition.cjs","names":["fluidDefaults"],"sources":["../../../src/styles/fluid/definition.ts"],"sourcesContent":["import type { StyleBase } from '../../core/style';\nimport { fluidDefaults, type FluidOptions } from './options';\n\n/**\n * A GPU fluid simulation: pointer movement injects velocity and dye, the dye is\n * advected into curling plumes, and clicks send out a burst. A gentle splash\n * plays when the background appears; otherwise it is still until stirred.\n */\nexport const fluidStyle: StyleBase<FluidOptions> = {\n  name: 'fluid',\n  defaults: fluidDefaults,\n  // Nothing animates on its own: the initial burst and every reaction keep the\n  // engine awake by returning true from render() until the smoke has settled.\n  animates: () => false,\n};\n"],"mappings":";;;;;;AAQA,IAAa,aAAsC;CACjD,MAAM;CACN,U,uBAAUA,CAAAA,CAAAA;CAGV,gBAAgB;AAClB"}

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

@@ -0,0 +1,8 @@
+import type { StyleBase } from '../../core/style.cjs';
+import { type FluidOptions } from './options.cjs';
+/**
+ * A GPU fluid simulation: pointer movement injects velocity and dye, the dye is
+ * advected into curling plumes, and clicks send out a burst. A gentle splash
+ * plays when the background appears; otherwise it is still until stirred.
+ */
+export declare const fluidStyle: StyleBase<FluidOptions>;

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

@@ -0,0 +1,8 @@
+import type { StyleBase } from '../../core/style.js';
+import { type FluidOptions } from './options.js';
+/**
+ * A GPU fluid simulation: pointer movement injects velocity and dye, the dye is
+ * advected into curling plumes, and clicks send out a burst. A gentle splash
+ * plays when the background appears; otherwise it is still until stirred.
+ */
+export declare const fluidStyle: StyleBase<FluidOptions>;

package/dist/styles/fluid/definition.js

@@ -0,0 +1,15 @@
+import { fluidDefaults } from "./options.js";
+// src/styles/fluid/definition.ts
+/**
+* A GPU fluid simulation: pointer movement injects velocity and dye, the dye is
+* advected into curling plumes, and clicks send out a burst. A gentle splash
+* plays when the background appears; otherwise it is still until stirred.
+*/
+var fluidStyle = {
+	name: "fluid",
+	defaults: fluidDefaults,
+	animates: () => false
+};
+export { fluidStyle };
+
+//# sourceMappingURL=definition.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"definition.js","names":[],"sources":["../../../src/styles/fluid/definition.ts"],"sourcesContent":["import type { StyleBase } from '../../core/style';\nimport { fluidDefaults, type FluidOptions } from './options';\n\n/**\n * A GPU fluid simulation: pointer movement injects velocity and dye, the dye is\n * advected into curling plumes, and clicks send out a burst. A gentle splash\n * plays when the background appears; otherwise it is still until stirred.\n */\nexport const fluidStyle: StyleBase<FluidOptions> = {\n  name: 'fluid',\n  defaults: fluidDefaults,\n  // Nothing animates on its own: the initial burst and every reaction keep the\n  // engine awake by returning true from render() until the smoke has settled.\n  animates: () => false,\n};\n"],"mappings":";;;;;;;AAQA,IAAa,aAAsC;CACjD,MAAM;CACN,UAAU;CAGV,gBAAgB;AAClB"}

package/dist/styles/fluid/options.cjs

@@ -0,0 +1,29 @@
+// src/styles/fluid/options.ts
+var fluidDefaults = Object.freeze({
+	color: null,
+	colorSpeed: 10,
+	opacity: .85,
+	curl: 10,
+	force: 6e3,
+	radius: 75,
+	fade: .3,
+	resolution: 128,
+	shading: true
+});
+var clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+function resolveFluidOptions(options) {
+	return {
+		...options,
+		colorSpeed: Math.max(0, options.colorSpeed),
+		opacity: clamp(options.opacity, 0, 1),
+		curl: clamp(options.curl, 0, 100),
+		force: Math.max(0, options.force),
+		radius: Math.max(2, options.radius),
+		fade: Math.max(.2, options.fade),
+		resolution: Math.round(clamp(options.resolution, 48, 192))
+	};
+}
+exports.fluidDefaults = fluidDefaults;
+exports.resolveFluidOptions = resolveFluidOptions;
+
+//# sourceMappingURL=options.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"options.cjs","names":[],"sources":["../../../src/styles/fluid/options.ts"],"sourcesContent":["export interface FluidOptions {\n  /**\n   * Colour of the smoke, as any CSS colour. `null` (the default) cycles through\n   * hues over time; set a colour to keep every splat that colour.\n   */\n  color: string | null;\n  /** How many times per second the smoke picks a new hue while `color` is `null`. */\n  colorSpeed: number;\n  /** Opacity of the smoke, from `0` to `1`. Multiplies any alpha in `color`. */\n  opacity: number;\n  /** How strongly the fluid curls back on itself: vorticity confinement. `0` = no swirl. */\n  curl: number;\n  /** How hard pointer movement stirs the fluid. `0` = the pointer only adds dye. */\n  force: number;\n  /** Radius of each splash, in CSS pixels. */\n  radius: number;\n  /** Roughly how long the smoke takes to fade out, in seconds. */\n  fade: number;\n  /**\n   * Simulation grid size: the longer side of the velocity/dye field, in cells.\n   * Higher is smoother and more detailed, at more CPU or GPU cost. The Canvas 2D\n   * fallback runs the whole simulation at this resolution.\n   */\n  resolution: number;\n  /** Light the smoke from the dye's own gradients, for a sense of depth. */\n  shading: boolean;\n}\n\nexport const fluidDefaults: Readonly<FluidOptions> = Object.freeze({\n  color: null,\n  colorSpeed: 10,\n  opacity: 0.85,\n  curl: 10,\n  force: 6000,\n  radius: 75,\n  fade: 0.3,\n  resolution: 128,\n  shading: true,\n});\n\n/** Options after clamping: what the simulation and the renderers consume. */\nexport type ResolvedFluidOptions = FluidOptions;\n\nconst clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n\nexport function resolveFluidOptions(options: FluidOptions): ResolvedFluidOptions {\n  return {\n    ...options,\n    colorSpeed: Math.max(0, options.colorSpeed),\n    opacity: clamp(options.opacity, 0, 1),\n    curl: clamp(options.curl, 0, 100),\n    force: Math.max(0, options.force),\n    radius: Math.max(2, options.radius),\n    fade: Math.max(0.2, options.fade),\n    resolution: Math.round(clamp(options.resolution, 48, 192)),\n  };\n}\n"],"mappings":";AA4BA,IAAa,gBAAwC,OAAO,OAAO;CACjE,OAAO;CACP,YAAY;CACZ,SAAS;CACT,MAAM;CACN,OAAO;CACP,QAAQ;CACR,MAAM;CACN,YAAY;CACZ,SAAS;AACX,CAAC;AAKD,IAAM,SAAS,OAAe,KAAa,QAAgB,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC;AAE7F,SAAgB,oBAAoB,SAA6C;CAC/E,OAAO;EACL,GAAG;EACH,YAAY,KAAK,IAAI,GAAG,QAAQ,UAAU;EAC1C,SAAS,MAAM,QAAQ,SAAS,GAAG,CAAC;EACpC,MAAM,MAAM,QAAQ,MAAM,GAAG,GAAG;EAChC,OAAO,KAAK,IAAI,GAAG,QAAQ,KAAK;EAChC,QAAQ,KAAK,IAAI,GAAG,QAAQ,MAAM;EAClC,MAAM,KAAK,IAAI,IAAK,QAAQ,IAAI;EAChC,YAAY,KAAK,MAAM,MAAM,QAAQ,YAAY,IAAI,GAAG,CAAC;CAC3D;AACF"}

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

@@ -0,0 +1,31 @@
+export interface FluidOptions {
+    /**
+     * Colour of the smoke, as any CSS colour. `null` (the default) cycles through
+     * hues over time; set a colour to keep every splat that colour.
+     */
+    color: string | null;
+    /** How many times per second the smoke picks a new hue while `color` is `null`. */
+    colorSpeed: number;
+    /** Opacity of the smoke, from `0` to `1`. Multiplies any alpha in `color`. */
+    opacity: number;
+    /** How strongly the fluid curls back on itself: vorticity confinement. `0` = no swirl. */
+    curl: number;
+    /** How hard pointer movement stirs the fluid. `0` = the pointer only adds dye. */
+    force: number;
+    /** Radius of each splash, in CSS pixels. */
+    radius: number;
+    /** Roughly how long the smoke takes to fade out, in seconds. */
+    fade: number;
+    /**
+     * Simulation grid size: the longer side of the velocity/dye field, in cells.
+     * Higher is smoother and more detailed, at more CPU or GPU cost. The Canvas 2D
+     * fallback runs the whole simulation at this resolution.
+     */
+    resolution: number;
+    /** Light the smoke from the dye's own gradients, for a sense of depth. */
+    shading: boolean;
+}
+export declare const fluidDefaults: Readonly<FluidOptions>;
+/** Options after clamping: what the simulation and the renderers consume. */
+export type ResolvedFluidOptions = FluidOptions;
+export declare function resolveFluidOptions(options: FluidOptions): ResolvedFluidOptions;

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

@@ -0,0 +1,31 @@
+export interface FluidOptions {
+    /**
+     * Colour of the smoke, as any CSS colour. `null` (the default) cycles through
+     * hues over time; set a colour to keep every splat that colour.
+     */
+    color: string | null;
+    /** How many times per second the smoke picks a new hue while `color` is `null`. */
+    colorSpeed: number;
+    /** Opacity of the smoke, from `0` to `1`. Multiplies any alpha in `color`. */
+    opacity: number;
+    /** How strongly the fluid curls back on itself: vorticity confinement. `0` = no swirl. */
+    curl: number;
+    /** How hard pointer movement stirs the fluid. `0` = the pointer only adds dye. */
+    force: number;
+    /** Radius of each splash, in CSS pixels. */
+    radius: number;
+    /** Roughly how long the smoke takes to fade out, in seconds. */
+    fade: number;
+    /**
+     * Simulation grid size: the longer side of the velocity/dye field, in cells.
+     * Higher is smoother and more detailed, at more CPU or GPU cost. The Canvas 2D
+     * fallback runs the whole simulation at this resolution.
+     */
+    resolution: number;
+    /** Light the smoke from the dye's own gradients, for a sense of depth. */
+    shading: boolean;
+}
+export declare const fluidDefaults: Readonly<FluidOptions>;
+/** Options after clamping: what the simulation and the renderers consume. */
+export type ResolvedFluidOptions = FluidOptions;
+export declare function resolveFluidOptions(options: FluidOptions): ResolvedFluidOptions;

package/dist/styles/fluid/options.js

@@ -0,0 +1,28 @@
+// src/styles/fluid/options.ts
+var fluidDefaults = Object.freeze({
+	color: null,
+	colorSpeed: 10,
+	opacity: .85,
+	curl: 10,
+	force: 6e3,
+	radius: 75,
+	fade: .3,
+	resolution: 128,
+	shading: true
+});
+var clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+function resolveFluidOptions(options) {
+	return {
+		...options,
+		colorSpeed: Math.max(0, options.colorSpeed),
+		opacity: clamp(options.opacity, 0, 1),
+		curl: clamp(options.curl, 0, 100),
+		force: Math.max(0, options.force),
+		radius: Math.max(2, options.radius),
+		fade: Math.max(.2, options.fade),
+		resolution: Math.round(clamp(options.resolution, 48, 192))
+	};
+}
+export { fluidDefaults, resolveFluidOptions };
+
+//# sourceMappingURL=options.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"options.js","names":[],"sources":["../../../src/styles/fluid/options.ts"],"sourcesContent":["export interface FluidOptions {\n  /**\n   * Colour of the smoke, as any CSS colour. `null` (the default) cycles through\n   * hues over time; set a colour to keep every splat that colour.\n   */\n  color: string | null;\n  /** How many times per second the smoke picks a new hue while `color` is `null`. */\n  colorSpeed: number;\n  /** Opacity of the smoke, from `0` to `1`. Multiplies any alpha in `color`. */\n  opacity: number;\n  /** How strongly the fluid curls back on itself: vorticity confinement. `0` = no swirl. */\n  curl: number;\n  /** How hard pointer movement stirs the fluid. `0` = the pointer only adds dye. */\n  force: number;\n  /** Radius of each splash, in CSS pixels. */\n  radius: number;\n  /** Roughly how long the smoke takes to fade out, in seconds. */\n  fade: number;\n  /**\n   * Simulation grid size: the longer side of the velocity/dye field, in cells.\n   * Higher is smoother and more detailed, at more CPU or GPU cost. The Canvas 2D\n   * fallback runs the whole simulation at this resolution.\n   */\n  resolution: number;\n  /** Light the smoke from the dye's own gradients, for a sense of depth. */\n  shading: boolean;\n}\n\nexport const fluidDefaults: Readonly<FluidOptions> = Object.freeze({\n  color: null,\n  colorSpeed: 10,\n  opacity: 0.85,\n  curl: 10,\n  force: 6000,\n  radius: 75,\n  fade: 0.3,\n  resolution: 128,\n  shading: true,\n});\n\n/** Options after clamping: what the simulation and the renderers consume. */\nexport type ResolvedFluidOptions = FluidOptions;\n\nconst clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n\nexport function resolveFluidOptions(options: FluidOptions): ResolvedFluidOptions {\n  return {\n    ...options,\n    colorSpeed: Math.max(0, options.colorSpeed),\n    opacity: clamp(options.opacity, 0, 1),\n    curl: clamp(options.curl, 0, 100),\n    force: Math.max(0, options.force),\n    radius: Math.max(2, options.radius),\n    fade: Math.max(0.2, options.fade),\n    resolution: Math.round(clamp(options.resolution, 48, 192)),\n  };\n}\n"],"mappings":";AA4BA,IAAa,gBAAwC,OAAO,OAAO;CACjE,OAAO;CACP,YAAY;CACZ,SAAS;CACT,MAAM;CACN,OAAO;CACP,QAAQ;CACR,MAAM;CACN,YAAY;CACZ,SAAS;AACX,CAAC;AAKD,IAAM,SAAS,OAAe,KAAa,QAAgB,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC;AAE7F,SAAgB,oBAAoB,SAA6C;CAC/E,OAAO;EACL,GAAG;EACH,YAAY,KAAK,IAAI,GAAG,QAAQ,UAAU;EAC1C,SAAS,MAAM,QAAQ,SAAS,GAAG,CAAC;EACpC,MAAM,MAAM,QAAQ,MAAM,GAAG,GAAG;EAChC,OAAO,KAAK,IAAI,GAAG,QAAQ,KAAK;EAChC,QAAQ,KAAK,IAAI,GAAG,QAAQ,MAAM;EAClC,MAAM,KAAK,IAAI,IAAK,QAAQ,IAAI;EAChC,YAAY,KAAK,MAAM,MAAM,QAAQ,YAAY,IAAI,GAAG,CAAC;CAC3D;AACF"}

package/dist/styles/fluid/settings.cjs

@@ -0,0 +1,32 @@
+// src/styles/fluid/settings.ts
+/** How much dye one splash adds at its centre. */
+var DYE_INTENSITY = .15;
+/** Seconds for the velocity field to lose about two thirds of its strength. */
+var VELOCITY_FADE = .5;
+/** How much of the previous pressure field is kept between frames, as in the reference. */
+var PRESSURE_RETENTION = .1;
+/** The initial burst is this fraction of the pointer force: just enough to set the smoke moving. */
+var BURST_FORCE = .003;
+/** The initial burst covers this many times the pointer splash radius. */
+var BURST_RADIUS = 2.2;
+/** The initial burst adds this many times the usual dye, so it reads on an otherwise empty canvas. */
+var BURST_DYE = 2.2;
+/** Seconds after the last splash before the extra idle fade begins. */
+var IDLE_DELAY = .5;
+/** Effective dye fade time while the pointer is idle, in seconds. */
+var IDLE_DECAY = .7;
+/** Seconds after the last splash when the field is cleared completely. */
+var IDLE_CLEAR = 3.5;
+var MAX_DYE_RESOLUTION = 1440;
+exports.BURST_DYE = BURST_DYE;
+exports.BURST_FORCE = BURST_FORCE;
+exports.BURST_RADIUS = BURST_RADIUS;
+exports.DYE_INTENSITY = DYE_INTENSITY;
+exports.IDLE_CLEAR = IDLE_CLEAR;
+exports.IDLE_DECAY = IDLE_DECAY;
+exports.IDLE_DELAY = IDLE_DELAY;
+exports.MAX_DYE_RESOLUTION = MAX_DYE_RESOLUTION;
+exports.PRESSURE_RETENTION = PRESSURE_RETENTION;
+exports.VELOCITY_FADE = VELOCITY_FADE;
+
+//# sourceMappingURL=settings.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"settings.cjs","names":[],"sources":["../../../src/styles/fluid/settings.ts"],"sourcesContent":["// Shared by the GPU and CPU simulations, so both produce the same kind of smoke.\n\n/** How much dye one splash adds at its centre. */\nexport const DYE_INTENSITY = 0.15;\n/** Seconds for the velocity field to lose about two thirds of its strength. */\nexport const VELOCITY_FADE = 0.5;\n/** How much of the previous pressure field is kept between frames, as in the reference. */\nexport const PRESSURE_RETENTION = 0.1;\n/** Pressure solve iterations (the CPU fallback uses fewer to stay cheap). */\nexport const PRESSURE_ITERATIONS = 20;\nexport const CPU_PRESSURE_ITERATIONS = 14;\n/** The initial burst is this fraction of the pointer force: just enough to set the smoke moving. */\nexport const BURST_FORCE = 0.003;\n/** The initial burst covers this many times the pointer splash radius. */\nexport const BURST_RADIUS = 2.2;\n/** The initial burst adds this many times the usual dye, so it reads on an otherwise empty canvas. */\nexport const BURST_DYE = 2.2;\n/** Seconds after the last splash before the extra idle fade begins. */\nexport const IDLE_DELAY = 0.5;\n/** Effective dye fade time while the pointer is idle, in seconds. */\nexport const IDLE_DECAY = 0.7;\n/** Seconds after the last splash when the field is cleared completely. */\nexport const IDLE_CLEAR = 3.5;\n\n/** The dye texture is this many times the simulation grid, up to a cap. */\nexport const DYE_SCALE = 8;\nexport const MAX_DYE_RESOLUTION = 1440;\n"],"mappings":";;AAGA,IAAa,gBAAgB;;AAE7B,IAAa,gBAAgB;;AAE7B,IAAa,qBAAqB;;AAKlC,IAAa,cAAc;;AAE3B,IAAa,eAAe;;AAE5B,IAAa,YAAY;;AAEzB,IAAa,aAAa;;AAE1B,IAAa,aAAa;;AAE1B,IAAa,aAAa;AAI1B,IAAa,qBAAqB"}

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

@@ -0,0 +1,24 @@
+/** How much dye one splash adds at its centre. */
+export declare const DYE_INTENSITY = 0.15;
+/** Seconds for the velocity field to lose about two thirds of its strength. */
+export declare const VELOCITY_FADE = 0.5;
+/** How much of the previous pressure field is kept between frames, as in the reference. */
+export declare const PRESSURE_RETENTION = 0.1;
+/** Pressure solve iterations (the CPU fallback uses fewer to stay cheap). */
+export declare const PRESSURE_ITERATIONS = 20;
+export declare const CPU_PRESSURE_ITERATIONS = 14;
+/** The initial burst is this fraction of the pointer force: just enough to set the smoke moving. */
+export declare const BURST_FORCE = 0.003;
+/** The initial burst covers this many times the pointer splash radius. */
+export declare const BURST_RADIUS = 2.2;
+/** The initial burst adds this many times the usual dye, so it reads on an otherwise empty canvas. */
+export declare const BURST_DYE = 2.2;
+/** Seconds after the last splash before the extra idle fade begins. */
+export declare const IDLE_DELAY = 0.5;
+/** Effective dye fade time while the pointer is idle, in seconds. */
+export declare const IDLE_DECAY = 0.7;
+/** Seconds after the last splash when the field is cleared completely. */
+export declare const IDLE_CLEAR = 3.5;
+/** The dye texture is this many times the simulation grid, up to a cap. */
+export declare const DYE_SCALE = 8;
+export declare const MAX_DYE_RESOLUTION = 1440;

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

@@ -0,0 +1,24 @@
+/** How much dye one splash adds at its centre. */
+export declare const DYE_INTENSITY = 0.15;
+/** Seconds for the velocity field to lose about two thirds of its strength. */
+export declare const VELOCITY_FADE = 0.5;
+/** How much of the previous pressure field is kept between frames, as in the reference. */
+export declare const PRESSURE_RETENTION = 0.1;
+/** Pressure solve iterations (the CPU fallback uses fewer to stay cheap). */
+export declare const PRESSURE_ITERATIONS = 20;
+export declare const CPU_PRESSURE_ITERATIONS = 14;
+/** The initial burst is this fraction of the pointer force: just enough to set the smoke moving. */
+export declare const BURST_FORCE = 0.003;
+/** The initial burst covers this many times the pointer splash radius. */
+export declare const BURST_RADIUS = 2.2;
+/** The initial burst adds this many times the usual dye, so it reads on an otherwise empty canvas. */
+export declare const BURST_DYE = 2.2;
+/** Seconds after the last splash before the extra idle fade begins. */
+export declare const IDLE_DELAY = 0.5;
+/** Effective dye fade time while the pointer is idle, in seconds. */
+export declare const IDLE_DECAY = 0.7;
+/** Seconds after the last splash when the field is cleared completely. */
+export declare const IDLE_CLEAR = 3.5;
+/** The dye texture is this many times the simulation grid, up to a cap. */
+export declare const DYE_SCALE = 8;
+export declare const MAX_DYE_RESOLUTION = 1440;

package/dist/styles/fluid/settings.js

@@ -0,0 +1,23 @@
+// src/styles/fluid/settings.ts
+/** How much dye one splash adds at its centre. */
+var DYE_INTENSITY = .15;
+/** Seconds for the velocity field to lose about two thirds of its strength. */
+var VELOCITY_FADE = .5;
+/** How much of the previous pressure field is kept between frames, as in the reference. */
+var PRESSURE_RETENTION = .1;
+/** The initial burst is this fraction of the pointer force: just enough to set the smoke moving. */
+var BURST_FORCE = .003;
+/** The initial burst covers this many times the pointer splash radius. */
+var BURST_RADIUS = 2.2;
+/** The initial burst adds this many times the usual dye, so it reads on an otherwise empty canvas. */
+var BURST_DYE = 2.2;
+/** Seconds after the last splash before the extra idle fade begins. */
+var IDLE_DELAY = .5;
+/** Effective dye fade time while the pointer is idle, in seconds. */
+var IDLE_DECAY = .7;
+/** Seconds after the last splash when the field is cleared completely. */
+var IDLE_CLEAR = 3.5;
+var MAX_DYE_RESOLUTION = 1440;
+export { BURST_DYE, BURST_FORCE, BURST_RADIUS, DYE_INTENSITY, IDLE_CLEAR, IDLE_DECAY, IDLE_DELAY, MAX_DYE_RESOLUTION, PRESSURE_RETENTION, VELOCITY_FADE };
+
+//# sourceMappingURL=settings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"settings.js","names":[],"sources":["../../../src/styles/fluid/settings.ts"],"sourcesContent":["// Shared by the GPU and CPU simulations, so both produce the same kind of smoke.\n\n/** How much dye one splash adds at its centre. */\nexport const DYE_INTENSITY = 0.15;\n/** Seconds for the velocity field to lose about two thirds of its strength. */\nexport const VELOCITY_FADE = 0.5;\n/** How much of the previous pressure field is kept between frames, as in the reference. */\nexport const PRESSURE_RETENTION = 0.1;\n/** Pressure solve iterations (the CPU fallback uses fewer to stay cheap). */\nexport const PRESSURE_ITERATIONS = 20;\nexport const CPU_PRESSURE_ITERATIONS = 14;\n/** The initial burst is this fraction of the pointer force: just enough to set the smoke moving. */\nexport const BURST_FORCE = 0.003;\n/** The initial burst covers this many times the pointer splash radius. */\nexport const BURST_RADIUS = 2.2;\n/** The initial burst adds this many times the usual dye, so it reads on an otherwise empty canvas. */\nexport const BURST_DYE = 2.2;\n/** Seconds after the last splash before the extra idle fade begins. */\nexport const IDLE_DELAY = 0.5;\n/** Effective dye fade time while the pointer is idle, in seconds. */\nexport const IDLE_DECAY = 0.7;\n/** Seconds after the last splash when the field is cleared completely. */\nexport const IDLE_CLEAR = 3.5;\n\n/** The dye texture is this many times the simulation grid, up to a cap. */\nexport const DYE_SCALE = 8;\nexport const MAX_DYE_RESOLUTION = 1440;\n"],"mappings":";;AAGA,IAAa,gBAAgB;;AAE7B,IAAa,gBAAgB;;AAE7B,IAAa,qBAAqB;;AAKlC,IAAa,cAAc;;AAE3B,IAAa,eAAe;;AAE5B,IAAa,YAAY;;AAEzB,IAAa,aAAa;;AAE1B,IAAa,aAAa;;AAE1B,IAAa,aAAa;AAI1B,IAAa,qBAAqB"}

package/dist/styles/fluid/simulation.cjs

@@ -0,0 +1,183 @@
+const require_settings = require("./settings.cjs");
+// src/styles/fluid/simulation.ts
+var clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+function createFluidSimulation(width, height) {
+	const w = width;
+	const h = height;
+	const cells = w * h;
+	let u = new Float32Array(cells);
+	let v = new Float32Array(cells);
+	let uNext = new Float32Array(cells);
+	let vNext = new Float32Array(cells);
+	let dyeR = new Float32Array(cells);
+	let dyeG = new Float32Array(cells);
+	let dyeB = new Float32Array(cells);
+	let dyeRNext = new Float32Array(cells);
+	let dyeGNext = new Float32Array(cells);
+	let dyeBNext = new Float32Array(cells);
+	const divergence = new Float32Array(cells);
+	const curl = new Float32Array(cells);
+	let pressure = new Float32Array(cells);
+	let pressureNext = new Float32Array(cells);
+	/** Bilinear sample of a field at grid coordinates, clamped at the edges. */
+	function sample(field, x, y) {
+		const gx = clamp(x, 0, w - 1);
+		const gy = clamp(y, 0, h - 1);
+		const i0 = Math.floor(gx);
+		const j0 = Math.floor(gy);
+		const i1 = Math.min(i0 + 1, w - 1);
+		const j1 = Math.min(j0 + 1, h - 1);
+		const fx = gx - i0;
+		const fy = gy - j0;
+		const top = field[j0 * w + i0] * (1 - fx) + field[j0 * w + i1] * fx;
+		const bottom = field[j1 * w + i0] * (1 - fx) + field[j1 * w + i1] * fx;
+		return top * (1 - fy) + bottom * fy;
+	}
+	/** Zero the velocity along the walls, so the field doesn't leak. */
+	function walls() {
+		for (let i = 0; i < w; i++) {
+			u[i] = 0;
+			u[(h - 1) * w + i] = 0;
+			v[i] = 0;
+			v[(h - 1) * w + i] = 0;
+		}
+		for (let j = 0; j < h; j++) {
+			u[j * w] = 0;
+			u[j * w + w - 1] = 0;
+			v[j * w] = 0;
+			v[j * w + w - 1] = 0;
+		}
+	}
+	function addCurl(dt, amount) {
+		for (let j = 1; j < h - 1; j++) for (let i = 1; i < w - 1; i++) {
+			const k = j * w + i;
+			curl[k] = .5 * (v[k + 1] - v[k - 1] - (u[k + w] - u[k - w]));
+		}
+		for (let j = 1; j < h - 1; j++) for (let i = 1; i < w - 1; i++) {
+			const k = j * w + i;
+			const forceX = .5 * (Math.abs(curl[k + 1]) - Math.abs(curl[k - 1]));
+			const forceY = .5 * (Math.abs(curl[k - w]) - Math.abs(curl[k + w]));
+			const length = Math.hypot(forceX, forceY) + 1e-4;
+			const strength = amount * curl[k] * dt / length;
+			u[k] = clamp(u[k] + forceX * strength, -1e3, 1e3);
+			v[k] = clamp(v[k] + forceY * strength, -1e3, 1e3);
+		}
+	}
+	function project(dt, options) {
+		if (options.curl > 0) addCurl(dt, options.curl);
+		for (let j = 1; j < h - 1; j++) for (let i = 1; i < w - 1; i++) {
+			const k = j * w + i;
+			divergence[k] = .5 * (u[k + 1] - u[k - 1] + v[k + w] - v[k - w]);
+		}
+		pressure.fill(0);
+		for (let iteration = 0; iteration < 14; iteration++) {
+			for (let j = 1; j < h - 1; j++) for (let i = 1; i < w - 1; i++) {
+				const k = j * w + i;
+				pressureNext[k] = (pressure[k - 1] + pressure[k + 1] + pressure[k - w] + pressure[k + w] - divergence[k]) * .25;
+			}
+			[pressure, pressureNext] = [pressureNext, pressure];
+		}
+		for (let j = 1; j < h - 1; j++) for (let i = 1; i < w - 1; i++) {
+			const k = j * w + i;
+			u[k] -= .5 * (pressure[k + 1] - pressure[k - 1]);
+			v[k] -= .5 * (pressure[k + w] - pressure[k - w]);
+		}
+		walls();
+	}
+	function advectVelocity(dt, decay) {
+		for (let j = 0; j < h; j++) for (let i = 0; i < w; i++) {
+			const k = j * w + i;
+			const sx = i - u[k] * dt;
+			const sy = j - v[k] * dt;
+			uNext[k] = sample(u, sx, sy) * decay;
+			vNext[k] = sample(v, sx, sy) * decay;
+		}
+		[u, uNext] = [uNext, u];
+		[v, vNext] = [vNext, v];
+		walls();
+	}
+	function advectDye(dt, decay) {
+		for (let j = 0; j < h; j++) for (let i = 0; i < w; i++) {
+			const k = j * w + i;
+			const sx = i - u[k] * dt;
+			const sy = j - v[k] * dt;
+			dyeRNext[k] = sample(dyeR, sx, sy) * decay;
+			dyeGNext[k] = sample(dyeG, sx, sy) * decay;
+			dyeBNext[k] = sample(dyeB, sx, sy) * decay;
+		}
+		[dyeR, dyeRNext] = [dyeRNext, dyeR];
+		[dyeG, dyeGNext] = [dyeGNext, dyeG];
+		[dyeB, dyeBNext] = [dyeBNext, dyeB];
+	}
+	return {
+		width: w,
+		height: h,
+		get dyeR() {
+			return dyeR;
+		},
+		get dyeG() {
+			return dyeG;
+		},
+		get dyeB() {
+			return dyeB;
+		},
+		splat(x, y, vx, vy, color, radius, viewWidth, viewHeight) {
+			const aspect = Math.max(1, viewWidth) / Math.max(1, viewHeight);
+			const sigma = Math.max(5e-4, radius / viewHeight);
+			const cx = x / Math.max(1, viewWidth);
+			const cy = y / Math.max(1, viewHeight);
+			const reachX = sigma / aspect * w * 3;
+			const reachY = sigma * h * 3;
+			const x0 = Math.max(0, Math.floor(cx * w - reachX));
+			const x1 = Math.min(w - 1, Math.ceil(cx * w + reachX));
+			const y0 = Math.max(0, Math.floor(cy * h - reachY));
+			const y1 = Math.min(h - 1, Math.ceil(cy * h + reachY));
+			const velocityX = clamp(vx, -1e3, 1e3);
+			const velocityY = clamp(vy, -1e3, 1e3);
+			const sigma2 = sigma * sigma;
+			for (let j = y0; j <= y1; j++) {
+				const dy = (j + .5) / h - cy;
+				for (let i = x0; i <= x1; i++) {
+					const dx = ((i + .5) / w - cx) * aspect;
+					const distance = dx * dx + dy * dy;
+					if (distance > sigma2 * 9) continue;
+					const falloff = Math.exp(-distance / sigma2);
+					const k = j * w + i;
+					u[k] = clamp(u[k] + velocityX * falloff, -1e3, 1e3);
+					v[k] = clamp(v[k] + velocityY * falloff, -1e3, 1e3);
+					dyeR[k] += color[0] * require_settings.DYE_INTENSITY * falloff;
+					dyeG[k] += color[1] * require_settings.DYE_INTENSITY * falloff;
+					dyeB[k] += color[2] * require_settings.DYE_INTENSITY * falloff;
+				}
+			}
+		},
+		step(dt, options) {
+			const stepTime = Math.min(dt, 1 / 30);
+			if (stepTime <= 0) return;
+			project(stepTime, options);
+			advectVelocity(stepTime, 1 / (1 + stepTime / require_settings.VELOCITY_FADE));
+			advectDye(stepTime, 1 / (1 + stepTime / options.fade));
+		},
+		clear() {
+			for (const field of [
+				u,
+				v,
+				uNext,
+				vNext,
+				dyeR,
+				dyeG,
+				dyeB,
+				dyeRNext,
+				dyeGNext,
+				dyeBNext,
+				pressure,
+				pressureNext,
+				divergence,
+				curl
+			]) field.fill(0);
+		}
+	};
+}
+exports.createFluidSimulation = createFluidSimulation;
+
+//# sourceMappingURL=simulation.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"simulation.cjs","names":["DYE_INTENSITY","VELOCITY_FADE"],"sources":["../../../src/styles/fluid/simulation.ts"],"sourcesContent":["import type { RGB } from './color';\nimport type { ResolvedFluidOptions } from './options';\nimport { CPU_PRESSURE_ITERATIONS, DYE_INTENSITY, VELOCITY_FADE } from './settings';\n\n/**\n * The CPU fluid field: a stable-fluids solver at `resolution` cells on its longer\n * side. The Canvas 2D renderer draws it upscaled; the WebGL renderer runs the\n * same steps in shaders instead. Velocities are in grid cells per second; dye\n * channels are straight colour densities.\n */\nexport interface FluidSimulation {\n  readonly width: number;\n  readonly height: number;\n  readonly dyeR: Float32Array;\n  readonly dyeG: Float32Array;\n  readonly dyeB: Float32Array;\n  /** Add a splash of colour and velocity at `(x, y)`, in CSS pixels of a view of `viewWidth` × `viewHeight`. */\n  splat(\n    x: number,\n    y: number,\n    vx: number,\n    vy: number,\n    color: RGB,\n    radius: number,\n    viewWidth: number,\n    viewHeight: number,\n  ): void;\n  /** Advance the simulation by `dt` seconds. */\n  step(dt: number, options: ResolvedFluidOptions): void;\n  /** Clear the velocity and dye fields. */\n  clear(): void;\n}\n\nconst clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n\nexport function createFluidSimulation(width: number, height: number): FluidSimulation {\n  const w = width;\n  const h = height;\n  const cells = w * h;\n\n  let u = new Float32Array(cells);\n  let v = new Float32Array(cells);\n  let uNext = new Float32Array(cells);\n  let vNext = new Float32Array(cells);\n  let dyeR = new Float32Array(cells);\n  let dyeG = new Float32Array(cells);\n  let dyeB = new Float32Array(cells);\n  let dyeRNext = new Float32Array(cells);\n  let dyeGNext = new Float32Array(cells);\n  let dyeBNext = new Float32Array(cells);\n  const divergence = new Float32Array(cells);\n  const curl = new Float32Array(cells);\n  let pressure = new Float32Array(cells);\n  let pressureNext = new Float32Array(cells);\n\n  /** Bilinear sample of a field at grid coordinates, clamped at the edges. */\n  function sample(field: Float32Array, x: number, y: number): number {\n    const gx = clamp(x, 0, w - 1);\n    const gy = clamp(y, 0, h - 1);\n    const i0 = Math.floor(gx);\n    const j0 = Math.floor(gy);\n    const i1 = Math.min(i0 + 1, w - 1);\n    const j1 = Math.min(j0 + 1, h - 1);\n    const fx = gx - i0;\n    const fy = gy - j0;\n    const top = field[j0 * w + i0] * (1 - fx) + field[j0 * w + i1] * fx;\n    const bottom = field[j1 * w + i0] * (1 - fx) + field[j1 * w + i1] * fx;\n    return top * (1 - fy) + bottom * fy;\n  }\n\n  /** Zero the velocity along the walls, so the field doesn't leak. */\n  function walls(): void {\n    for (let i = 0; i < w; i++) {\n      u[i] = 0;\n      u[(h - 1) * w + i] = 0;\n      v[i] = 0;\n      v[(h - 1) * w + i] = 0;\n    }\n    for (let j = 0; j < h; j++) {\n      u[j * w] = 0;\n      u[j * w + w - 1] = 0;\n      v[j * w] = 0;\n      v[j * w + w - 1] = 0;\n    }\n  }\n\n  function addCurl(dt: number, amount: number): void {\n    for (let j = 1; j < h - 1; j++) {\n      for (let i = 1; i < w - 1; i++) {\n        const k = j * w + i;\n        curl[k] = 0.5 * (v[k + 1] - v[k - 1] - (u[k + w] - u[k - w]));\n      }\n    }\n    for (let j = 1; j < h - 1; j++) {\n      for (let i = 1; i < w - 1; i++) {\n        const k = j * w + i;\n        const forceX = 0.5 * (Math.abs(curl[k + 1]) - Math.abs(curl[k - 1]));\n        const forceY = 0.5 * (Math.abs(curl[k - w]) - Math.abs(curl[k + w]));\n        const length = Math.hypot(forceX, forceY) + 1e-4;\n        const strength = (amount * curl[k] * dt) / length;\n        u[k] = clamp(u[k] + forceX * strength, -1000, 1000);\n        v[k] = clamp(v[k] + forceY * strength, -1000, 1000);\n      }\n    }\n  }\n\n  function project(dt: number, options: ResolvedFluidOptions): void {\n    if (options.curl > 0) addCurl(dt, options.curl);\n    for (let j = 1; j < h - 1; j++) {\n      for (let i = 1; i < w - 1; i++) {\n        const k = j * w + i;\n        divergence[k] = 0.5 * (u[k + 1] - u[k - 1] + v[k + w] - v[k - w]);\n      }\n    }\n    pressure.fill(0);\n    for (let iteration = 0; iteration < CPU_PRESSURE_ITERATIONS; iteration++) {\n      for (let j = 1; j < h - 1; j++) {\n        for (let i = 1; i < w - 1; i++) {\n          const k = j * w + i;\n          pressureNext[k] =\n            (pressure[k - 1] + pressure[k + 1] + pressure[k - w] + pressure[k + w] - divergence[k]) * 0.25;\n        }\n      }\n      [pressure, pressureNext] = [pressureNext, pressure];\n    }\n    for (let j = 1; j < h - 1; j++) {\n      for (let i = 1; i < w - 1; i++) {\n        const k = j * w + i;\n        u[k] -= 0.5 * (pressure[k + 1] - pressure[k - 1]);\n        v[k] -= 0.5 * (pressure[k + w] - pressure[k - w]);\n      }\n    }\n    walls();\n  }\n\n  function advectVelocity(dt: number, decay: number): void {\n    for (let j = 0; j < h; j++) {\n      for (let i = 0; i < w; i++) {\n        const k = j * w + i;\n        const sx = i - u[k] * dt;\n        const sy = j - v[k] * dt;\n        uNext[k] = sample(u, sx, sy) * decay;\n        vNext[k] = sample(v, sx, sy) * decay;\n      }\n    }\n    [u, uNext] = [uNext, u];\n    [v, vNext] = [vNext, v];\n    walls();\n  }\n\n  function advectDye(dt: number, decay: number): void {\n    for (let j = 0; j < h; j++) {\n      for (let i = 0; i < w; i++) {\n        const k = j * w + i;\n        const sx = i - u[k] * dt;\n        const sy = j - v[k] * dt;\n        dyeRNext[k] = sample(dyeR, sx, sy) * decay;\n        dyeGNext[k] = sample(dyeG, sx, sy) * decay;\n        dyeBNext[k] = sample(dyeB, sx, sy) * decay;\n      }\n    }\n    [dyeR, dyeRNext] = [dyeRNext, dyeR];\n    [dyeG, dyeGNext] = [dyeGNext, dyeG];\n    [dyeB, dyeBNext] = [dyeBNext, dyeB];\n  }\n\n  return {\n    width: w,\n    height: h,\n    get dyeR() {\n      return dyeR;\n    },\n    get dyeG() {\n      return dyeG;\n    },\n    get dyeB() {\n      return dyeB;\n    },\n    splat(x, y, vx, vy, color, radius, viewWidth, viewHeight) {\n      const aspect = Math.max(1, viewWidth) / Math.max(1, viewHeight);\n      const sigma = Math.max(0.0005, radius / viewHeight);\n      const cx = x / Math.max(1, viewWidth);\n      const cy = y / Math.max(1, viewHeight);\n      const reachX = (sigma / aspect) * w * 3;\n      const reachY = sigma * h * 3;\n      const x0 = Math.max(0, Math.floor(cx * w - reachX));\n      const x1 = Math.min(w - 1, Math.ceil(cx * w + reachX));\n      const y0 = Math.max(0, Math.floor(cy * h - reachY));\n      const y1 = Math.min(h - 1, Math.ceil(cy * h + reachY));\n      // Velocities are in simulation texels per second, which is cells per second here.\n      const velocityX = clamp(vx, -1000, 1000);\n      const velocityY = clamp(vy, -1000, 1000);\n      const sigma2 = sigma * sigma;\n      for (let j = y0; j <= y1; j++) {\n        const ny = (j + 0.5) / h;\n        const dy = ny - cy;\n        for (let i = x0; i <= x1; i++) {\n          const nx = (i + 0.5) / w;\n          const dx = (nx - cx) * aspect;\n          const distance = dx * dx + dy * dy;\n          if (distance > sigma2 * 9) continue;\n          const falloff = Math.exp(-distance / sigma2);\n          const k = j * w + i;\n          u[k] = clamp(u[k] + velocityX * falloff, -1000, 1000);\n          v[k] = clamp(v[k] + velocityY * falloff, -1000, 1000);\n          dyeR[k] += color[0] * DYE_INTENSITY * falloff;\n          dyeG[k] += color[1] * DYE_INTENSITY * falloff;\n          dyeB[k] += color[2] * DYE_INTENSITY * falloff;\n        }\n      }\n    },\n    step(dt, options) {\n      const stepTime = Math.min(dt, 1 / 30);\n      if (stepTime <= 0) return;\n      project(stepTime, options);\n      advectVelocity(stepTime, 1 / (1 + stepTime / VELOCITY_FADE));\n      advectDye(stepTime, 1 / (1 + stepTime / options.fade));\n    },\n    clear() {\n      for (const field of [u, v, uNext, vNext, dyeR, dyeG, dyeB, dyeRNext, dyeGNext, dyeBNext, pressure, pressureNext, divergence, curl]) {\n        field.fill(0);\n      }\n    },\n  };\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,22 @@
+import type { RGB } from './color.cjs';
+import type { ResolvedFluidOptions } from './options.cjs';
+/**
+ * The CPU fluid field: a stable-fluids solver at `resolution` cells on its longer
+ * side. The Canvas 2D renderer draws it upscaled; the WebGL renderer runs the
+ * same steps in shaders instead. Velocities are in grid cells per second; dye
+ * channels are straight colour densities.
+ */
+export interface FluidSimulation {
+    readonly width: number;
+    readonly height: number;
+    readonly dyeR: Float32Array;
+    readonly dyeG: Float32Array;
+    readonly dyeB: Float32Array;
+    /** Add a splash of colour and velocity at `(x, y)`, in CSS pixels of a view of `viewWidth` × `viewHeight`. */
+    splat(x: number, y: number, vx: number, vy: number, color: RGB, radius: number, viewWidth: number, viewHeight: number): void;
+    /** Advance the simulation by `dt` seconds. */
+    step(dt: number, options: ResolvedFluidOptions): void;
+    /** Clear the velocity and dye fields. */
+    clear(): void;
+}
+export declare function createFluidSimulation(width: number, height: number): FluidSimulation;

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

@@ -0,0 +1,22 @@
+import type { RGB } from './color.js';
+import type { ResolvedFluidOptions } from './options.js';
+/**
+ * The CPU fluid field: a stable-fluids solver at `resolution` cells on its longer
+ * side. The Canvas 2D renderer draws it upscaled; the WebGL renderer runs the
+ * same steps in shaders instead. Velocities are in grid cells per second; dye
+ * channels are straight colour densities.
+ */
+export interface FluidSimulation {
+    readonly width: number;
+    readonly height: number;
+    readonly dyeR: Float32Array;
+    readonly dyeG: Float32Array;
+    readonly dyeB: Float32Array;
+    /** Add a splash of colour and velocity at `(x, y)`, in CSS pixels of a view of `viewWidth` × `viewHeight`. */
+    splat(x: number, y: number, vx: number, vy: number, color: RGB, radius: number, viewWidth: number, viewHeight: number): void;
+    /** Advance the simulation by `dt` seconds. */
+    step(dt: number, options: ResolvedFluidOptions): void;
+    /** Clear the velocity and dye fields. */
+    clear(): void;
+}
+export declare function createFluidSimulation(width: number, height: number): FluidSimulation;