Components
ParticleField
The ParticleField component is an interactive visual effect built with Three.js that renders a field of animated particles connected by lines. Each particle moves with smooth motion, and when particles come within a defined distance, they dynamically connect, creating a lively network-like structure. The effect becomes more engaging as it reacts to mouse movement, causing nearby particles to subtly shift and follow the cursor’s influence. With customizable parameters like particle count, size, color, speed, and connection distance, the component can be tuned for minimal, elegant backdrops or vibrant, energetic visuals. It works especially well in hero sections, landing pages, or interactive showcases where motion and depth can enhance user engagement.
Loading preview...
import ParticleField from "@/components/ui/particle-field";
export default function DemoOne() {
return (
<div className="w-screen h-screen flex flex-col items-center justify-center bg-background text-white gap-6">
<div className="w-[800px] h-[500px] rounded-2xl overflow-hidden shadow-lg border border-gray-700">
<ParticleField
particleCount={120}
particleSize={2}
particleColor="white"
backgroundColor="black"
speed={1}
connectDistance={150}
/>
</div>
</div>
);
}