Particles

Dynamic 3D particle system with customizable properties

Installation

npx shadcn@latest add @scrollxui/particles

Usage

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

<div className='relative bg-black w-full h-100'>
  <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.