UniqueUI

Particle Field

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

UniqueUI CLI

npx uniqueui add particle-field

shadcn CLI

npx shadcn@latest add https://uniqueui.com/r/particle-field.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Single Color

Variant 1 of 2

Interactive
Particle Field

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>
  );
}

Multi Color

Variant 2 of 2

Interactive
Particle Field

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", "#06b6d4", "#f472b6"]}
        speed={0.5}
      />
    </div>
  );
}

Props

PropTypeDescription
particleCountnumberThe number of particles rendered dynamically.
particleColorstring | string[]One hex color or an array of hex colors for particles and connecting lines.
speednumberThe base movement speed multiplier.
interactionRadiusnumberThe pixel radius for the mouse repulsion event.