Drifting dots joined by faint lines when they are close, gently pushed away by the pointer. Constellation style.
npx shadcn@latest add https://hyperblur.dev/r/particles.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/particles.tsx.
import { Particles } from "@/components/hyperblur/particles"
<div className="relative"><Particles /><h1>...</h1></div>| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | 80 | Number of particles (max 600). |
| color | string | "#ffffff" | Particle color. |
| lineColor | string | "#2f7bff" | Color of the links between neighbors. |
| linkDistance | number | 120 | Max distance in pixels at which two particles are linked. |
| speed | number | 1 | Drift speed multiplier. |
| size | number | 2 | Average particle radius in pixels. |
| seed | number | 1 | Same seed, same starting layout. |