UniqueUI

Particle Field

Canvas-based floating particles with mouse-repulsion physics and responsive connecting lines.

npx uniqueui add particle-field

Preview

Interactive
Particle Field

Usage

import { ParticleField } from "@/components/ui/particle-field";

export default function Example() {
  return (
    <div className="rounded-xl overflow-hidden border border-neutral-800 h-[400px] w-full relative bg-neutral-950">
      <div className="absolute inset-0 z-10 pointer-events-none flex items-center justify-center">
        <h3 className="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-b from-white to-neutral-500">
          Hover Around
        </h3>
      </div>
      <ParticleField 
        particleCount={120}
        particleColor="#a855f7"
        speed={0.5}
      />
    </div>
  );
}

Props

PropTypeDescription
particleCountnumberThe number of particles rendered dynamically.
particleColorstringThe hex color code for the particles and connecting lines.
speednumberThe base movement speed multiplier.
interactionRadiusnumberThe pixel radius for the mouse repulsion event.