Particles Background
A canvas particle network that reacts to the mouse and pauses when off-screen or the tab is hidden.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
ParticlesBackgroundProps
Also accepts all props of React.ComponentProps<"div">
| Prop | Type | Default | Description |
|---|---|---|---|
| density | number | 1.1 | Particles per 10,000 px² of area |
| linkDistance | number | 120 | Max distance in px at which two dots are linked |
| speed | number | 1 | Drift speed multiplier |
| color | string | "currentColor" | Dot and line color, any CSS color. Defaults to the inherited text color |
| mouseRadius | number | 160 | Radius in px of the pointer's attract/link zone. 0 disables it |
Install
$ npx shadcn@latest add https://chromotion.dev/r/particles-background.json