# Particles

> A drifting constellation of dots on canvas that moves away from the pointer.

Component · Pro · https://lodeui.com/components/particles

## 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

```bash
npx shadcn@latest add @lode/particles
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

## Usage

```tsx title="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.

## Related

- [Meteors](https://lodeui.com/components/meteors) — Shooting stars streaking across a card or hero.
- [Grid pattern](https://lodeui.com/components/grid-pattern) — A technical grid background where a few cells gently light up.
- [Aurora background](https://lodeui.com/components/aurora-background) — Slow drifting northern-lights glow behind any section.