pnpm add @caustics/fluid-canvas <!-- Svelte 5 --> <script> import FluidCanvas from '@caustics/fluid-canvas/svelte'; </script> <FluidCanvas preset="rainbow" />
pnpm add @caustics/fluid-canvas /* React */ import { FluidCanvas } from '@caustics/fluid-canvas/react'; return <FluidCanvas preset="plasma" />;
pnpm add @caustics/fluid-canvas /* Vanilla */ import { mount } from '@caustics/fluid-canvas'; const api = mount(document.querySelector('#hero'), { preset: 'flame', interaction: 'paint', }); /* api.splat(...), api.captureFrame(), api.startRecording(), api.destroy() */
| Prop | Type | Default | Description |
|---|---|---|---|
| preset | PresetName | — | One of six curated configurations (rainbow, ink, flame, plasma, ocean, smoke). User props override preset values. |
| interaction | 'paint' | 'splat' | 'none' | 'splat' | Pointer behaviour. 'paint' = continuous dye on drag; 'splat' = impulse on tap; 'none' = display-only. |
| colorMode | ColorMode | 'rainbow' | 'rainbow' · 'palette' · 'fixed' · 'position'. Drives how each splat is coloured. |
| palette | string[] | preset palette | 2–8 hex colours used when colorMode is 'palette'. Omit to use the active preset's palette. |
| curl / pressure | number | 30 / 0.8 | Vorticity confinement strength (0–50) and pressure influence scale (0–1). |
| splatRadius | number | 0.08 | Splat radius as a fraction of canvas width. Practical range 0.003–0.15. |
| autoSplats | boolean | true | Inject periodic ambient splats so an idle hero stays alive without pointer input. |
| paused | boolean | false | Freeze the simulation. State is preserved; clearing it resumes from the current frame. |
| reducedMotion | 'pause' | 'static' | 'ignore' | 'pause' | Behaviour under prefers-reduced-motion: reduce. |
caustics-fluid-canvas/ ├── svelte/ FluidCanvas.svelte · index.ts · types.ts ├── react/ FluidCanvas.tsx · index.ts · types.ts ├── vanilla/ fluid-canvas.ts · compiled .js ├── docs/ README.md · API.md · CHANGELOG.md ├── LICENSE.md Caustics Commercial License └── package.json
The most technically demanding instrument in the Caustics library, and the marquee demo on the storefront. A full GPU-accelerated Navier-Stokes solver — splat injection, semi-Lagrangian advection, vorticity confinement, Jacobi pressure solve, gradient subtract, dye advection — wrapped in a one-line API.
Ships every physics parameter as a first-class prop: viscosity-equivalent dissipation, pressure iterations, curl strength, splat radius and force. Twenty presets across six aesthetic personalities (ink & paper, fire & plasma, ocean & atmosphere, smoke & air, dye & pigment, experimental) so you can drop in with no configuration; configure freely if you want to drift away from the defaults.
Three things the free OSS alternatives don’t ship: image-as-dye seeding (drop a logo or photo into the simulation and stir it), obstacle masks (fluid flows around your headings, logos, photos), and a programmatic recording API — WebM clip capture with optional watermarking, driven from code instead of a screenshot button — so visitors can save and share their compositions.
Beyond the solver, a full reactivity layer makes the page itself the instrument: bind any DOM element so hovers, clicks, and scroll-entries ripple through the fluid, spawn autonomous agent swarms with twelve behaviors that paint as they move, or choreograph physics across page sections as the visitor scrolls.
Pavel Dobryakov’s reference implementation is the gold standard for real-time browser fluid simulation; ours matches his math and adds the wrapping that makes it shippable inside a $69 instrument.
Caustics Commercial License · lifetime updates within v1