Animations/Particle Field
ParticleField
A canvas-based particle system that draws connection lines between nearby particles and responds to mouse movement. Perfect for hero section backgrounds.
import { ParticleField } from "@animui/ui"Live demo
Place ParticleField absolutely inside a relative container. Stack your content above it with relative z-10. Move your cursor over the canvas to see it react.
Your headline here
Props
| Prop | Type | Default | Description |
|---|---|---|---|
count | number | 80 | Number of particles to render. |
color | string | "99,102,241" | Particle and connection line color as an RGB string (e.g. "99,102,241"). |
speed | number | 0.4 | Base movement speed of particles. Higher values are more energetic. |
connectionDistance | number | 120 | Maximum pixel distance between particles before a connection line is drawn. |
interactive | boolean | true | Whether particles react to mouse movement. |
className | string | — | Classes on the canvas wrapper — use to set width and height. |
Performance
ParticleField uses a single <canvas> element with requestAnimationFrame for smooth 60fps rendering. Particle count above 150 may impact performance on low-end devices — the default of 80 is a good balance. The component automatically pauses when the tab is hidden.