Backgrounds
Particle field
Thousands of iridescent motes drifting in a flow field — they part around the pointer, or swirl into it.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { ParticleField } from '@vizzele/react/gl';
<ParticleField mode="repel" count={2400} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
mode | 'repel' | 'attract' | 'repel' | Part around or swirl into the pointer. |
count | number | 2400 | Particles (halved on low-end). |
radius | number | 0.22 | Pointer influence radius. |
force | number | 1 | Pointer strength. |
size | number | 2 | Point size (px). |
flow | number | 1 | Ambient drift. |
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.