interactive-bg 0.1.1 → 0.2.0

package/README.md

@@ -1,15 +1,21 @@
 # interactive-bg
 
-Animated backgrounds that react to the pointer, for hero sections, cards and full pages. One `<canvas>`, no dependencies, under 7 kB gzipped for the style you use.
+[![npm](https://img.shields.io/npm/v/interactive-bg)](https://www.npmjs.com/package/interactive-bg)
+[![CI](https://github.com/bsh314/interactive-bg/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/bsh314/interactive-bg/actions/workflows/ci.yml)
+[![downloads](https://img.shields.io/npm/dm/interactive-bg)](https://www.npmjs.com/package/interactive-bg)
+[![types](https://img.shields.io/npm/types/interactive-bg)](https://www.npmjs.com/package/interactive-bg)
+[![license](https://img.shields.io/npm/l/interactive-bg)](LICENSE)
+
+Animated backgrounds that react to the pointer, for hero sections, cards and full pages. One `<canvas>`, no dependencies, under 10 kB gzipped for the style you use.
 
 **[Live demo](https://bsh314.github.io/interactive-bg/)**
 
-| `topo` | `dots` | `plus` |
-| --- | --- | --- |
-| ![topo](https://raw.githubusercontent.com/bsh314/interactive-bg/main/docs/topo.png) | ![dots](https://raw.githubusercontent.com/bsh314/interactive-bg/main/docs/dots.png) | ![plus](https://raw.githubusercontent.com/bsh314/interactive-bg/main/docs/plus.png) |
-| Topographic contour lines that drift slowly. The terrain rises under the pointer. | A grid of dots. The pointer pushes them aside; a click sends out a wave. | A grid of "+" signs that turn to point at the pointer; a click sends out a wave. |
+| `topo` | `dots` | `plus` | `fluid` | `shimmer` |
+| --- | --- | --- | --- | --- |
+| ![topo](https://raw.githubusercontent.com/bsh314/interactive-bg/main/docs/topo.png) | ![dots](https://raw.githubusercontent.com/bsh314/interactive-bg/main/docs/dots.png) | ![plus](https://raw.githubusercontent.com/bsh314/interactive-bg/main/docs/plus.png) | ![fluid](https://raw.githubusercontent.com/bsh314/interactive-bg/main/docs/fluid.png) | ![shimmer](https://raw.githubusercontent.com/bsh314/interactive-bg/main/docs/shimmer.png) |
+| Topographic contour lines that drift slowly. The terrain rises under the pointer. | A grid of dots. The pointer pushes them aside; a click sends out a wave. | A grid of "+" signs that turn to point at the pointer; a click sends out a wave. | A fluid simulation that follows the pointer in curling, smoke-like plumes. Clicks send out a burst. | Iridescent light bands from a warped sine field, split into rainbow fringes. The pointer bends them. |
 
-- **Small.** Import one style with one renderer and ship only that: 4.5–6.9 kB gzipped, engine included.
+- **Small.** Import one style with one renderer and ship only that: 4.5–9.4 kB gzipped, engine included.
 - **Cheap to run.** Idle animation renders at the lowest frame rate that still looks smooth, stops when nothing moves, and pauses off-screen and in background tabs. The grid styles idle on less CPU than an empty animated canvas.
 - **GPU first.** WebGL2, with Canvas 2D as a fallback or as a deliberate choice.
 - **Polite.** Respects `prefers-reduced-motion`, caps pixel density, never blocks clicks on your content.
@@ -60,9 +66,13 @@ What your app bundles, `createBackground` included (minified / gzipped):
 | `topo` | 20.0 / 8.1 kB   | 16.5 / 6.9 kB   | 12.5 / 5.3 kB   |
 | `dots` | 17.9 / 7.3 kB   | 14.4 / 6.0 kB   | 10.4 / 4.5 kB   |
 | `plus` | 19.3 / 8.0 kB   | 16.2 / 6.8 kB   | 11.7 / 5.0 kB   |
+| `fluid` | 27.5 / 9.4 kB   | 21.8 / 7.4 kB   | 12.7 / 5.3 kB   |
+| `shimmer` | 15.0 / 6.2 kB  | 11.9 / 5.0 kB   | 9.7 / 4.2 kB    |
 
 With a single renderer there is no fallback: if the browser can't provide it, the background stays empty, `bg.renderer` is `null`, and your page carries on.
 
+The `fluid` and `shimmer` styles are exceptions: their Canvas 2D builds compute the same effect on a small grid, so they are softer and coarser than the GPU versions, but keep working without WebGL2 (float render targets are only needed by `fluid`).
+
 ## Performance
 
 Full-screen 1920×1080 background in Chrome on an Apple M1 Pro.
@@ -75,10 +85,15 @@ Full-screen 1920×1080 background in Chrome on an Apple M1 Pro.
 | `dots`, Canvas 2D | 0.4%              | 1.7%                        | 4.3%      | 12%                 | ~70 MB  |
 | `plus`, WebGL     | 0.1%              | 0.9%                        | 3.6%      | 11%                 | ~90 MB  |
 | `plus`, Canvas 2D | 0.4%              | 2.5%                        | 3.9%      | 13%                 | ~70 MB  |
+| `fluid`, WebGL    | 0.6%              | 0.9%                        | 4.8%      | 16%                 | ~120 MB |
+| `fluid`, Canvas 2D | 8.9%             | 9.7%                        | 4.8%      | 17%                 | ~80 MB  |
+| `shimmer`, WebGL  | 0.2%              | 0.4%                        | 3.4%      | 10%                 | ~100 MB |
+| `shimmer`, Canvas 2D | 8.3%           | 10.2%                       | 11%       | 19%                 | ~85 MB  |
 | Empty canvas, 30 fps, for reference | — | —                    | 6.4%      | —                   | ~85 MB  |
 
 - **Main thread**: share of the page's main thread the background takes, so what's left for your app.
 - **CPU** and **Memory**: the browser's renderer and GPU processes, as % of one core and MB above a blank page. Most of the memory is the canvas itself, which the browser needs for any full-screen canvas.
+- **`fluid`** has no ambient animation: the idle figures cover the gentle burst after mount. After a few seconds without input the field is cleared, the last frame is empty, and the style stops until the pointer moves again.
 
 Reproduce with `npm run bench:memory` and `bench/realtime.html`; see [CONTRIBUTING.md](CONTRIBUTING.md#benchmarks).
 
@@ -186,13 +201,46 @@ Shared by every style.
 
 </details>
 
+<details>
+<summary><code>fluid</code></summary>
+
+| Option       | Default | What it does                                                                                     |
+| ------------ | ------- | ------------------------------------------------------------------------------------------------ |
+| `color`      | `null`  | Colour of the smoke, as any CSS colour. `null` picks a new hue several times a second; set a colour to keep it fixed. |
+| `colorSpeed` | `10`    | How many times per second the smoke picks a new hue while `color` is `null`.                      |
+| `opacity`    | `0.85`  | Opacity of the smoke, `0`–`1`. Multiplies any alpha in `color`.                                   |
+| `curl`       | `10`    | How strongly the fluid curls back on itself. `0` = no swirl.                                     |
+| `force`      | `6000`  | How hard pointer movement stirs the fluid. `0` = the pointer only adds dye.                       |
+| `radius`     | `75`    | Radius of each splash, in CSS pixels.                                                             |
+| `fade`       | `0.3`   | Roughly how long the smoke takes to fade out, in seconds.                                        |
+| `resolution` | `128`   | Simulation grid size (longer side, in cells). The Canvas 2D fallback runs the whole simulation at this size. |
+| `shading`    | `true`  | Light the smoke from its own gradients, for a sense of depth. WebGL only; the Canvas 2D fallback draws flat smoke. |
+
+</details>
+
+<details>
+<summary><code>shimmer</code></summary>
+
+| Option            | Default   | What it does                                                                                     |
+| ----------------- | --------- | ------------------------------------------------------------------------------------------------ |
+| `opacity`         | `1`       | Opacity of the field. `1` is the opaque reference canvas; lower it over a page colour to imitate a translucent veil. |
+| `speed`           | `1`       | Flow speed. `1` matches the reference's slow drift. `0` = still.                                 |
+| `frequency`       | `7`       | Sine frequency of the bands. Higher = more, narrower bands.                                      |
+| `colorScale`      | `10`      | Gamma applied to the bands. Higher = darker gaps and brighter crests.                            |
+| `baseColor`       | `#5735ff` | Colour mixed into the 20% base of the field.                                                     |
+| `chroma`          | `0.02`    | Separation between the red, green and blue warps: chromatic dispersion.                          |
+| `warp`            | `1`       | Strength of the sine/cosine distortion. `0` = straight bands.                                    |
+| `pointerStrength` | `0.35`    | Pointer lens that bends the bands locally. `0` keeps the reference's ambient field.              |
+
+</details>
+
 ## Your own style
 
 The engine handles the canvas, sizing, frame loop, pointer, visibility, reduced motion, background colour and edge fades. A style only says what to draw, in WebGL2, Canvas 2D or both. See [docs/custom-styles.md](docs/custom-styles.md).
 
 ## Browser support
 
-Current Chrome, Edge, Firefox and Safari (15+). WebGL2 is used where available; every built-in style also has a Canvas 2D renderer.
+Current Chrome, Edge, Firefox and Safari (15+). WebGL2 is used where available; every built-in style also has a Canvas 2D renderer. `fluid`'s WebGL2 renderer also needs floating-point render targets (`EXT_color_buffer_float`); without them, the Canvas 2D build runs the same simulation on the CPU.
 
 ## Contributing
 

package/dist/fluid/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/fluid/canvas2d.cjs");
+const require_definition = require("../styles/fluid/definition.cjs");
+// src/fluid/canvas2d.ts
+/** An interactive fluid simulation, solved on the CPU and drawn with Canvas 2D. */
+var fluid = require_style.defineStyle({
+	...require_definition.fluidStyle,
+	renderers: [require_canvas2d_renderer.canvas2dRenderer(require_canvas2d.createFluidCanvas2D)]
+});
+exports.fluid = fluid;
+
+//# sourceMappingURL=canvas2d.cjs.map

package/dist/fluid/canvas2d.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas2d.cjs","names":["defineStyle","fluidStyle","canvas2dRenderer","createFluidCanvas2D"],"sources":["../../src/fluid/canvas2d.ts"],"sourcesContent":["import { canvas2dRenderer } from '../core/canvas2d-renderer';\nimport { defineStyle, type StyleFactory } from '../core/style';\nimport { createFluidCanvas2D } from '../styles/fluid/canvas2d';\nimport { fluidStyle } from '../styles/fluid/definition';\nimport type { FluidOptions } from '../styles/fluid/options';\n\nexport type { FluidOptions };\n\n/** An interactive fluid simulation, solved on the CPU and drawn with Canvas 2D. */\nexport const fluid: StyleFactory<FluidOptions> = defineStyle({\n  ...fluidStyle,\n  renderers: [canvas2dRenderer(createFluidCanvas2D)],\n});\n"],"mappings":";;;;;;;AASA,IAAa,QAAoCA,cAAAA,YAAY;CAC3D,GAAGC,mBAAAA;CACH,WAAW,CAACC,0BAAAA,iBAAiBC,iBAAAA,mBAAmB,CAAC;AACnD,CAAC"}

package/dist/fluid/canvas2d.d.cts

@@ -0,0 +1,5 @@
+import { type StyleFactory } from '../core/style.cjs';
+import type { FluidOptions } from '../styles/fluid/options.cjs';
+export type { FluidOptions };
+/** An interactive fluid simulation, solved on the CPU and drawn with Canvas 2D. */
+export declare const fluid: StyleFactory<FluidOptions>;

package/dist/fluid/canvas2d.d.ts

@@ -0,0 +1,5 @@
+import { type StyleFactory } from '../core/style.js';
+import type { FluidOptions } from '../styles/fluid/options.js';
+export type { FluidOptions };
+/** An interactive fluid simulation, solved on the CPU and drawn with Canvas 2D. */
+export declare const fluid: StyleFactory<FluidOptions>;

package/dist/fluid/canvas2d.js

@@ -0,0 +1,13 @@
+import { canvas2dRenderer } from "../core/canvas2d-renderer.js";
+import { defineStyle } from "../core/style.js";
+import { createFluidCanvas2D } from "../styles/fluid/canvas2d.js";
+import { fluidStyle } from "../styles/fluid/definition.js";
+// src/fluid/canvas2d.ts
+/** An interactive fluid simulation, solved on the CPU and drawn with Canvas 2D. */
+var fluid = defineStyle({
+	...fluidStyle,
+	renderers: [canvas2dRenderer(createFluidCanvas2D)]
+});
+export { fluid };
+
+//# sourceMappingURL=canvas2d.js.map

package/dist/fluid/canvas2d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas2d.js","names":[],"sources":["../../src/fluid/canvas2d.ts"],"sourcesContent":["import { canvas2dRenderer } from '../core/canvas2d-renderer';\nimport { defineStyle, type StyleFactory } from '../core/style';\nimport { createFluidCanvas2D } from '../styles/fluid/canvas2d';\nimport { fluidStyle } from '../styles/fluid/definition';\nimport type { FluidOptions } from '../styles/fluid/options';\n\nexport type { FluidOptions };\n\n/** An interactive fluid simulation, solved on the CPU and drawn with Canvas 2D. */\nexport const fluid: StyleFactory<FluidOptions> = defineStyle({\n  ...fluidStyle,\n  renderers: [canvas2dRenderer(createFluidCanvas2D)],\n});\n"],"mappings":";;;;;;AASA,IAAa,QAAoC,YAAY;CAC3D,GAAG;CACH,WAAW,CAAC,iBAAiB,mBAAmB,CAAC;AACnD,CAAC"}

package/dist/fluid/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/fluid/canvas2d.cjs");
+const require_definition = require("../styles/fluid/definition.cjs");
+const require_webgl = require("../styles/fluid/webgl.cjs");
+// src/fluid/index.ts
+/** An interactive fluid simulation, drawn with WebGL2 where available and a CPU simulation otherwise. */
+var fluid = require_style.defineStyle({
+	...require_definition.fluidStyle,
+	renderers: [require_webgl_renderer.webglRenderer(require_webgl.createFluidWebGL), require_canvas2d_renderer.canvas2dRenderer(require_canvas2d.createFluidCanvas2D)]
+});
+exports.fluid = fluid;
+
+//# sourceMappingURL=index.cjs.map

package/dist/fluid/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["defineStyle","fluidStyle","webglRenderer","createFluidWebGL","canvas2dRenderer","createFluidCanvas2D"],"sources":["../../src/fluid/index.ts"],"sourcesContent":["import { canvas2dRenderer } from '../core/canvas2d-renderer';\nimport { defineStyle, type StyleFactory } from '../core/style';\nimport { webglRenderer } from '../core/webgl-renderer';\nimport { createFluidCanvas2D } from '../styles/fluid/canvas2d';\nimport { fluidStyle } from '../styles/fluid/definition';\nimport type { FluidOptions } from '../styles/fluid/options';\nimport { createFluidWebGL } from '../styles/fluid/webgl';\n\nexport type { FluidOptions };\n\n/** An interactive fluid simulation, drawn with WebGL2 where available and a CPU simulation otherwise. */\nexport const fluid: StyleFactory<FluidOptions> = defineStyle({\n  ...fluidStyle,\n  renderers: [webglRenderer(createFluidWebGL), canvas2dRenderer(createFluidCanvas2D)],\n});\n"],"mappings":";;;;;;;;;AAWA,IAAa,QAAoCA,cAAAA,YAAY;CAC3D,GAAGC,mBAAAA;CACH,WAAW,CAACC,uBAAAA,cAAcC,cAAAA,gBAAgB,GAAGC,0BAAAA,iBAAiBC,iBAAAA,mBAAmB,CAAC;AACpF,CAAC"}

package/dist/fluid/index.d.cts

@@ -0,0 +1,5 @@
+import { type StyleFactory } from '../core/style.cjs';
+import type { FluidOptions } from '../styles/fluid/options.cjs';
+export type { FluidOptions };
+/** An interactive fluid simulation, drawn with WebGL2 where available and a CPU simulation otherwise. */
+export declare const fluid: StyleFactory<FluidOptions>;

package/dist/fluid/index.d.ts

@@ -0,0 +1,5 @@
+import { type StyleFactory } from '../core/style.js';
+import type { FluidOptions } from '../styles/fluid/options.js';
+export type { FluidOptions };
+/** An interactive fluid simulation, drawn with WebGL2 where available and a CPU simulation otherwise. */
+export declare const fluid: StyleFactory<FluidOptions>;

package/dist/fluid/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 { createFluidCanvas2D } from "../styles/fluid/canvas2d.js";
+import { fluidStyle } from "../styles/fluid/definition.js";
+import { createFluidWebGL } from "../styles/fluid/webgl.js";
+// src/fluid/index.ts
+/** An interactive fluid simulation, drawn with WebGL2 where available and a CPU simulation otherwise. */
+var fluid = defineStyle({
+	...fluidStyle,
+	renderers: [webglRenderer(createFluidWebGL), canvas2dRenderer(createFluidCanvas2D)]
+});
+export { fluid };
+
+//# sourceMappingURL=index.js.map

package/dist/fluid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/fluid/index.ts"],"sourcesContent":["import { canvas2dRenderer } from '../core/canvas2d-renderer';\nimport { defineStyle, type StyleFactory } from '../core/style';\nimport { webglRenderer } from '../core/webgl-renderer';\nimport { createFluidCanvas2D } from '../styles/fluid/canvas2d';\nimport { fluidStyle } from '../styles/fluid/definition';\nimport type { FluidOptions } from '../styles/fluid/options';\nimport { createFluidWebGL } from '../styles/fluid/webgl';\n\nexport type { FluidOptions };\n\n/** An interactive fluid simulation, drawn with WebGL2 where available and a CPU simulation otherwise. */\nexport const fluid: StyleFactory<FluidOptions> = defineStyle({\n  ...fluidStyle,\n  renderers: [webglRenderer(createFluidWebGL), canvas2dRenderer(createFluidCanvas2D)],\n});\n"],"mappings":";;;;;;;;AAWA,IAAa,QAAoC,YAAY;CAC3D,GAAG;CACH,WAAW,CAAC,cAAc,gBAAgB,GAAG,iBAAiB,mBAAmB,CAAC;AACpF,CAAC"}

package/dist/fluid/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/fluid/definition.cjs");
+const require_webgl = require("../styles/fluid/webgl.cjs");
+// src/fluid/webgl.ts
+/** An interactive fluid simulation, drawn with WebGL2 only. */
+var fluid = require_style.defineStyle({
+	...require_definition.fluidStyle,
+	renderers: [require_webgl_renderer.webglRenderer(require_webgl.createFluidWebGL)]
+});
+exports.fluid = fluid;
+
+//# sourceMappingURL=webgl.cjs.map

package/dist/fluid/webgl.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"webgl.cjs","names":["defineStyle","fluidStyle","webglRenderer","createFluidWebGL"],"sources":["../../src/fluid/webgl.ts"],"sourcesContent":["import { defineStyle, type StyleFactory } from '../core/style';\nimport { webglRenderer } from '../core/webgl-renderer';\nimport { fluidStyle } from '../styles/fluid/definition';\nimport type { FluidOptions } from '../styles/fluid/options';\nimport { createFluidWebGL } from '../styles/fluid/webgl';\n\nexport type { FluidOptions };\n\n/** An interactive fluid simulation, drawn with WebGL2 only. */\nexport const fluid: StyleFactory<FluidOptions> = defineStyle({\n  ...fluidStyle,\n  renderers: [webglRenderer(createFluidWebGL)],\n});\n"],"mappings":";;;;;;;AASA,IAAa,QAAoCA,cAAAA,YAAY;CAC3D,GAAGC,mBAAAA;CACH,WAAW,CAACC,uBAAAA,cAAcC,cAAAA,gBAAgB,CAAC;AAC7C,CAAC"}

package/dist/fluid/webgl.d.cts

@@ -0,0 +1,5 @@
+import { type StyleFactory } from '../core/style.cjs';
+import type { FluidOptions } from '../styles/fluid/options.cjs';
+export type { FluidOptions };
+/** An interactive fluid simulation, drawn with WebGL2 only. */
+export declare const fluid: StyleFactory<FluidOptions>;

package/dist/fluid/webgl.d.ts

@@ -0,0 +1,5 @@
+import { type StyleFactory } from '../core/style.js';
+import type { FluidOptions } from '../styles/fluid/options.js';
+export type { FluidOptions };
+/** An interactive fluid simulation, drawn with WebGL2 only. */
+export declare const fluid: StyleFactory<FluidOptions>;

package/dist/fluid/webgl.js

@@ -0,0 +1,13 @@
+import { defineStyle } from "../core/style.js";
+import { webglRenderer } from "../core/webgl-renderer.js";
+import { fluidStyle } from "../styles/fluid/definition.js";
+import { createFluidWebGL } from "../styles/fluid/webgl.js";
+// src/fluid/webgl.ts
+/** An interactive fluid simulation, drawn with WebGL2 only. */
+var fluid = defineStyle({
+	...fluidStyle,
+	renderers: [webglRenderer(createFluidWebGL)]
+});
+export { fluid };
+
+//# sourceMappingURL=webgl.js.map

package/dist/fluid/webgl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"webgl.js","names":[],"sources":["../../src/fluid/webgl.ts"],"sourcesContent":["import { defineStyle, type StyleFactory } from '../core/style';\nimport { webglRenderer } from '../core/webgl-renderer';\nimport { fluidStyle } from '../styles/fluid/definition';\nimport type { FluidOptions } from '../styles/fluid/options';\nimport { createFluidWebGL } from '../styles/fluid/webgl';\n\nexport type { FluidOptions };\n\n/** An interactive fluid simulation, drawn with WebGL2 only. */\nexport const fluid: StyleFactory<FluidOptions> = defineStyle({\n  ...fluidStyle,\n  renderers: [webglRenderer(createFluidWebGL)],\n});\n"],"mappings":";;;;;;AASA,IAAa,QAAoC,YAAY;CAC3D,GAAG;CACH,WAAW,CAAC,cAAc,gBAAgB,CAAC;AAC7C,CAAC"}

package/dist/index.cjs

@@ -9,6 +9,8 @@ const require_noise = require("./shared/noise.cjs");
 const require_topo_index = require("./topo/index.cjs");
 const require_dots_index = require("./dots/index.cjs");
 const require_plus_index = require("./plus/index.cjs");
+const require_fluid_index = require("./fluid/index.cjs");
+const require_shimmer_index = require("./shimmer/index.cjs");
 exports.FULLSCREEN_VERTEX_SHADER = require_webgl.FULLSCREEN_VERTEX_SHADER;
 exports.canvas2dRenderer = require_canvas2d_renderer.canvas2dRenderer;
 exports.createBackground = require_engine.createBackground;
@@ -17,8 +19,10 @@ exports.createProgram = require_webgl.createProgram;
 exports.defineStyle = require_style.defineStyle;
 exports.dots = require_dots_index.dots;
 exports.engineDefaults = require_engine.engineDefaults;
+exports.fluid = require_fluid_index.fluid;
 exports.getUniforms = require_webgl.getUniforms;
 exports.parseColor = require_color.parseColor;
 exports.plus = require_plus_index.plus;
+exports.shimmer = require_shimmer_index.shimmer;
 exports.topo = require_topo_index.topo;
 exports.webglRenderer = require_webgl_renderer.webglRenderer;

package/dist/index.d.cts

@@ -6,6 +6,10 @@ export { dots } from './dots/index.cjs';
 export type { DotsOptions } from './dots/index.cjs';
 export { plus } from './plus/index.cjs';
 export type { PlusOptions } from './plus/index.cjs';
+export { fluid } from './fluid/index.cjs';
+export type { FluidOptions } from './fluid/index.cjs';
+export { shimmer } from './shimmer/index.cjs';
+export type { ShimmerOptions } from './shimmer/index.cjs';
 export { defineStyle } from './core/style.cjs';
 export type { Frame, Point, Pointer, RendererName, Style, StyleBase, StyleDefinition, StyleFactory, StyleRenderer, } from './core/style.cjs';
 export type { Fade, Renderer, Surface } from './core/surface.cjs';

package/dist/index.d.ts

@@ -6,6 +6,10 @@ export { dots } from './dots/index.js';
 export type { DotsOptions } from './dots/index.js';
 export { plus } from './plus/index.js';
 export type { PlusOptions } from './plus/index.js';
+export { fluid } from './fluid/index.js';
+export type { FluidOptions } from './fluid/index.js';
+export { shimmer } from './shimmer/index.js';
+export type { ShimmerOptions } from './shimmer/index.js';
 export { defineStyle } from './core/style.js';
 export type { Frame, Point, Pointer, RendererName, Style, StyleBase, StyleDefinition, StyleFactory, StyleRenderer, } from './core/style.js';
 export type { Fade, Renderer, Surface } from './core/surface.js';

package/dist/index.js

@@ -8,4 +8,6 @@ import { createNoise3D } from "./shared/noise.js";
 import { topo } from "./topo/index.js";
 import { dots } from "./dots/index.js";
 import { plus } from "./plus/index.js";
-export { FULLSCREEN_VERTEX_SHADER, canvas2dRenderer, createBackground, createNoise3D, createProgram, defineStyle, dots, engineDefaults, getUniforms, parseColor, plus, topo, webglRenderer };
+import { fluid } from "./fluid/index.js";
+import { shimmer } from "./shimmer/index.js";
+export { FULLSCREEN_VERTEX_SHADER, canvas2dRenderer, createBackground, createNoise3D, createProgram, defineStyle, dots, engineDefaults, fluid, getUniforms, parseColor, plus, shimmer, topo, webglRenderer };