Particles

Dynamic 3D particle system with customizable properties

Installation

npx scrollx-ui@latest add particles

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

• color ( string , default: #ff3366) - Base particle color in HEX format
• particleCount ( number , default: 10000) - Total rendered particles
• particleSize ( number , default: 35) - Individual particle size
• animate ( boolean , default: true) - Toggle color transitions
• className ( string , default: '') - Container CSS classes

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.