Backgrounds
Fluid simulation
A real-time fluid you stir with the pointer, leaving iridescent ink that swirls and fades.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { FluidBackground } from '@vizzele/react/gl';
<section style={{ position: 'relative' }}>
<FluidBackground curl={28} dissipation={0.92} />
<h1>Stir me</h1>
</section>Props
| Prop | Type | Default | Description |
|---|---|---|---|
curl | number | 18 | Vorticity — how much it swirls. |
dissipation | number | 0.92 | Ink lifetime (higher lasts longer). |
velocityDissipation | number | 0.2 | How fast motion calms down. |
splatRadius / splatForce | number | 0.22 / 5200 | Brush size and push. |
intensity | number | 0.65 | Ink brightness. |
ambient | boolean | true | Random drops when idle. |
simResolution / dyeResolution | number | 128 / 768 | Quality (halved on low-end). |
colors | string[] | iridescent palette | Four hex colors. |
Accessibility
- The canvas is aria-hidden and never takes pointer events — content on top stays fully interactive.
- Pauses when off-screen or in a background tab. Renders one still frame with reduced motion.
- Weak devices get a lower resolution automatically; without WebGL2 a static gradient is shown.