Particles

Dynamic 3D particle system with customizable properties

Installation

npx shadcn@latest add https://scrollx-ui.vercel.app/registry/particles.json

Usage

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

<div className="relative bg-black w-full h-[400px]">
  <Particles
    color="#fffff"
    particleCount={25000}
    particleSize={5}
    animate={false}
    className="z-0"
  />
</div>

API Reference

Particles

Interactive particle visualization with mouse-responsive movement

Props

Property	Type	Default	Description
`color`	string	`"#ff3366"`	Base color of the particles (HEX).
`particleCount`	number	`10000`	Total number of particles rendered.
`particleSize`	number	`35`	Size of each individual particle.
`animate`	boolean	`true`	Whether particles animate color transitions.
`className`	string	`""`	Optional class for the outer container.

Type Notes : The included type declaration file is only necessary if using Stats.js performance monitoring. For basic particle functionality without performance stats, you can omit the type file.