backgrounds

Particles

Floating particle field rendered on Canvas with optional connecting lines between nearby particles.

v1.0.0react >=18next >=14tailwind >=4

backgroundparticlescanvasnetworkconstellationdecorativeanimated

Preview

Loading preview...

Props

Prop	Type	Default	Description
`count`	`number`	`50`	Number of particles
`color`	`string`	`#ffffff`	Particle color (any CSS color value)
`speed`	`number`	`1`	Speed multiplier for particle movement
`size`	`number`	`2`	Particle radius in pixels
`connected`	`boolean`	`false`	Draw lines between nearby particles
`maxDistance`	`number`	`100`	Maximum distance for connected lines in pixels
`className`	`string`	`—`	Additional Tailwind classes
`id`	`string`	`—`	HTML id attribute

Layout

Display: block

Responsive: No

Fills container with absolute positioning. Canvas auto-resizes via ResizeObserver. Requires a relative-positioned parent.

Examples

Basic floating particles

<div className="relative h-96 bg-black">
  <Particles />
</div>

Connected network effect

<div className="relative h-screen bg-neutral-950">
  <Particles count={100} connected maxDistance={120} color="#8b5cf6" />
  <div className="relative z-10 flex items-center justify-center h-full">
    <h1 className="text-white text-4xl font-bold">Network</h1>
  </div>
</div>

Slow, large particles

<div className="relative h-96 bg-black">
  <Particles count={30} size={4} speed={0.3} color="rgba(255,255,255,0.5)" />
</div>

AI Usage Hint

Use Particles for atmospheric floating dots. Enable 'connected' for a network/constellation effect. Adjust count (50-200 typical), speed, and size. Great for hero backgrounds or empty states.

Works Well With

GradientMeshAurora