flowfield · ribbons
@caustics/flowfield · v1.0.0
svelte · react · vanilla
60fps · 18KB gzipped
$129 →
component · 005
Flow Field
GPU particle advection — noise, image-gradient & SDF-text fields into trails, dye & lines.
Checkout coming soon Open the playground → The Everything Bundle →
Quick Start

That's it. Your site now has flow field.

npm install @caustics/flowfield

<script>
  import { FlowField } from '@caustics/flowfield';
</script>

<FlowField preset="ribbons" />
Configuration API

Sensible defaults. Documented types.

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.
What's Included

A zip. Everything else lives at caustics.dev.

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().

Ready to ship?

Checkout coming soon The Everything Bundle

Caustics Commercial License · lifetime updates within v1