npm install @caustics/flowfield <script> import { FlowField } from '@caustics/flowfield'; </script> <FlowField preset="ribbons" />
npm install @caustics/flowfield import { FlowField } from '@caustics/flowfield/react'; return <FlowField preset="ribbons" />;
npm install @caustics/flowfield import { mount } from '@caustics/flowfield'; mount(document.querySelector('#hero'), { preset: 'ribbons' });
| Prop | Type | Default | Description |
|---|---|---|---|
| preset | string | "ribbons" | Named preset. Overrides individual props when set. |
| colors | string[] | undefined | Override palette. Accepts hex, hsl, or CSS custom properties. |
| reducedMotion | 'pause' | 'static' | 'pause' | Behavior when prefers-reduced-motion is active. |
| class | string | undefined | Additional CSS classes applied to the root element. |
caustics-flowfield/ ├── svelte/ FlowField.svelte · index.ts · types.ts ├── react/ FlowField.tsx · index.ts · types.ts ├── vanilla/ flowfield.ts · compiled .js ├── docs/ README.md · API.md · CHANGELOG.md ├── LICENSE.md Caustics Commercial License └── package.json
Flow Field is the generative line’s flagship — a GPU particle system that advects hundreds of thousands of particles through a vector field and renders them as points, dye, or trail-feedback ribbons. It runs the simulation entirely on the GPU with WebGL2 float-texture ping-pong: positions, age, and seed live in texels, advected each frame in a fragment pass and drawn instanced. A float-tier probe and a graceful 2D-canvas fallback keep it honest on weaker hardware — never a blank canvas.
The moat is the field sourcing. Beyond curl/simplex noise, the field can be derived from an image (a luminance Sobel gradient, so particles trace a photo’s contours) or from an SDF text mask (an exact Euclidean distance transform that confines particles into letterforms) — the kind of effect that’s genuinely hard to reproduce from a CodePen snippet. Cover-fit is handled so a source image maps cleanly across any container aspect ratio. And it speaks audio: with the shared @caustics/audio-core contract, field: 'audio' lets a Sonogram instance modulate the flow — bass swells the swirl, treble shimmers — a no-op on silence.
It is built milestone by milestone against a stable surface and carries the full Caustics lifecycle: a pointer force (attract / repel / swirl) on fine pointers, film grain in the composite, fourteen presets across points / trails / dye / lines, OKLab color ramps, IntersectionObserver pause, reduced-motion handling, WebGL context-loss recovery, DPR capped at 2, and an idempotent destroy() that releases the float targets and programs. Ships for Svelte 5, React 18+, and vanilla JS through one mount().
Caustics Commercial License · lifetime updates within v1