Particles

Particle background component.

• 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.