← DOCS
backgrounds

Particles

Interactive particle system with connection lines and mouse interaction.

npx chaos add particles

PREVIEW

USAGE

case 'glass-button': return ; case 'neon-glow': return ; case 'floating-button': return ;
import { Particles } from '@oalacea/chaosui/backgrounds/particles';

<Particles />
<Particles particleCount={150} color="#ff0040" />
<Particles mouseInteraction={false} connectionDistance={150} />

PROPS

PropTypeDefault
particleCountNumber of particles to render
number100
speedBase animation speed multiplier
number1
sizeParticle size in pixels
number2
colorParticle color (hex or rgb)
string"#ffffff"
connectionDistanceMax distance to draw connection lines
number100
lineOpacityOpacity of connection lines (0-1)
number0.15
positionFixed or absolute positioning
"fixed" | "absolute""fixed"
mouseInteractionEnable mouse interaction (particles flee)
booleantrue
mouseRadiusMouse interaction radius
number150