Particles for React

Particles fills its container with specks of dust at three depths. Far ones are tiny, faint and a little cooler; middle ones are brighter; a few near ones are large and softly glowing. Each drifts slowly on its own and twinkles gently, and when the pointer moves over the box they all lean toward it, the near ones most and the far ones barely, so the field shifts in parallax. Specks that drift out of one edge fade and come back at the opposite one.

Use it behind a hero, a sign-up card or an empty state, where the motion should stay in the background. For points that sparkle in place rather than drift, use Sparkles; for lines drawn between nearby dots, Constellation; for dots flying toward you, Starfield. It's a small canvas that runs only while it's on screen, with no animation library, and draws a single still frame when reduced motion is on.

Installation

Usage

import { Particles } from "@/components/ui/particles";

<Particles className="min-h-[480px]">
  <h1 className="text-5xl font-semibold">Ship faster</h1>
</Particles>

Particles is a container: give it a size, put your content inside, and the specks sit behind it. For a background behind the whole page, pass className="fixed inset-0 -z-10" and no children.

Demos

Drift

driftX and driftY add a steady push in pixels per frame, on top of each speck's own wandering, scaled by depth so near specks fall faster than far ones. Here driftY={0.3} reads as dust settling through light. Specks that fall out of the bottom come back at the top, fading in.

Color

particleColor takes any CSS color, here the theme's primary, and the far specks take a cooler, fainter tint of it. intensity="strong" doubles how far the specks lean toward the pointer.

Accessibility

The canvas is decoration: it's hidden from assistive tech and never takes the pointer, so your content is read and clicked as usual. With reduced motion it draws the field once, still, and ignores the pointer. The specks are small and spread out, so text in the foreground color stays readable on top; keep copy in text-foreground. Nothing flashes: the twinkle is a slow, shallow swell, and specks fade in and out at the edges.

FAQ

API Reference