Installation
Usage
import ParticleField from "@/components/ruixen/particle-field";
export default function App() {
return (
<div className="relative h-screen w-full">
<ParticleField
particleCount={100}
particleSize={2}
particleColor="white"
backgroundColor="black"
speed={0.5}
connectDistance={120}
/>
<div className="relative z-10">{/* Your content here */}</div>
</div>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
particleCount | number | 100 | Number of particles to render |
particleSize | number | 2 | Size of individual particles |
particleColor | string | "white" | Color of the particles |
backgroundColor | string | "black" | Background color of the canvas |
speed | number | 0.5 | Movement speed of particles |
connectDistance | number | 120 | Distance at which particles connect with lines |
style | CSSProperties | {} | Additional inline styles |
className | string | "" | Additional CSS classes |
Features
- Interactive: Particles are attracted to mouse cursor
- Connected: Lines drawn between nearby particles
- Bouncing: Particles bounce off canvas edges
- Customizable: Full control over appearance and behavior
- Performance: Optimized canvas rendering