Particles

A highly customizable interactive particle background, featuring smooth fluid animations, real-time mouse reactivity, and a sleek modern motion feel.

Preview

Install the component using the CLI.

$npx shadcn@latest add https://ankurz.me/r/particles.json

Import the component:

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

Use it in your code:

<Particles
  className="absolute inset-0"
  quantity={100}
  ease={80}
  color="#ffffff"
  refresh
/>

Property	Type	Default	Description
`className`	`string`	`""`	Additional CSS classes.
`quantity`	`number`	`100`	Number of particles.
`staticity`	`number`	`50`	Resistance to mouse movement. Higher = less reactive.
`ease`	`number`	`50`	Smoothing of particle movement.
`refresh`	`boolean`	`false`	Whether to refresh particles on re-render.