Skip to main content
A performant canvas-based particle system that responds to mouse movement with customizable colors, quantities, and physics.

​
Installation

    ​
    Usage

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

export default function Example() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden">
      <Particles />
    </div>
  )
}

    ​
    Custom Color

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

export default function Example() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden bg-black">
      <Particles color="#3b82f6" quantity={150} />
    </div>
  )
}

    ​
    Props

    PropTypeDefaultDescription
    classNamestring-Additional CSS classes for the container
    quantitynumber100Number of particles to render
    staticitynumber50How static the particles are (lower = more movement)
    easenumber50Easing factor for particle movement
    sizenumber0.4Base size of particles in pixels
    refreshbooleanfalseTrigger to regenerate particles
    colorstring"#ffffff"Color of particles (hex format)
    vxnumber0X-axis velocity for particle drift
    vynumber0Y-axis velocity for particle drift
    Particles automatically follow mouse movement and have magnetic attraction behavior. The component uses canvas for optimal performance.
    Adjust staticity and ease to control how particles respond to mouse movement. Lower staticity makes particles move more freely, while higher ease creates smoother transitions.

    Build docs developers (and LLMs) love

    Get started for freeTalk to us