Skip to main content
  • Location: sabo/src/components/ui/particles.tsx

​
When to use

  • Lightweight decorative particles behind hero or section headers.
  • Keep density/contrast low; avoid interfering with text legibility.

​
Usage

sabo/src/components/ui/particles.tsx
import { Particles } from "@/components/ui/particles";

export function Example() {
  return (
    <div className="relative rounded-xl border p-8 overflow-hidden">
      <Particles className="absolute inset-0" quantity={80} color="#111827" />
      <div className="relative z-10">Content over particles</div>
    </div>
  );
}

​
Key props

​
quantity
number
default:"100"
How many particles to render.
​
color
string
default:"#ffffff"
Particle color (hex).
​
size
number
default:"0.4"
Base particle radius.
​
vx
number
default:"0"
Constant velocity offset on X axis.
​
vy
number
default:"0"
Constant velocity offset on Y axis.
​
staticity
number
default:"50"
Mouse interaction strength (lower = stronger attraction).
​
ease
number
default:"50"
Particle movement smoothness.
​
className
string
Additional CSS classes applied to the container div.

​
Styling tip

  • Mount as an absolutely positioned layer; keep pointer-events: none.
  • Test light/dark themes to ensure contrast is appropriate.