ParticlesPro
A drifting constellation of dots on canvas that moves away from the pointer.
Everything, connected
Move your pointer through the field.
When to use
- Hero and section backgrounds for technical or AI products.
When not to use
- Behind dense content or forms.
- More than one per page.
Installation
Usage
Import it from @/components/ui/particles after installing.
example.tsx
import { Particles } from "@/components/ui/particles";
<section className="relative overflow-hidden">
<Particles />
<h1 className="relative">Everything, connected</h1>
</section>API reference
Particles
A canvas that fills its positioned parent.
| Prop | Type | Default | Description |
|---|---|---|---|
| density | number | 0.9 | Particles per 10,000 px². |
| color | string | currentColor | Dot and line color. |
| connect | boolean | true | Lines between nearby dots. |
| interactive | boolean | true | Dots drift away from the pointer. |
Accessibility
- Decorative: aria-hidden and ignores the pointer for clicks.
- Drawn once, without motion, under reduced motion.
Motion
- Dots drift with slight randomness and damping; nearby dots link with fading lines.
Responsive behavior
- Particle count follows the area, so phones get fewer.
Performance
- Pauses when scrolled off screen; capped at 2× pixel ratio.
Notes for AI
- Give the parent position: relative and overflow: hidden; put content above it with position: relative.
This page as Markdown, for assistants and coding agents:
/components/particles/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt