The Particles component draws a drifting field of specks on a canvas and scatters them away from the pointer, holding positions as fractions of the frame so a resize redraws the field instead of reshuffling it.
Sixty specks on a canvas, scattering out of the way wherever the pointer goes.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/particles.jsonEverything Particles accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| quantity | number | 60 | How many particles to draw |
| color | string | 'currentColor' | Colour of the particles. Any CSS colour, or currentColor |
| speed | number | 0.03 | How far they drift, as a fraction of the frame per second |
| size | number | 2 | Largest particle radius, in pixels |
| repel | number | 90 | Radius around the pointer that pushes particles away, in pixels |
| className | string | '' | Additional CSS classes. Set the colour here when using currentColor |