Cursor Trail

Glowing trail that follows the cursor with decay physics, like a sparkler or comet tail.

npx uniqueui add cursor-trail

Preview

Interactive Cursor Trail

Move your mouse inside this block to see the effect.

Usage

import { CursorTrail } from "@/components/ui/cursor-trail";

export default function Example() {
  return (
    <div className="h-[400px] w-full relative bg-neutral-950 overflow-hidden flex items-center justify-center">
      <h3 className="text-white text-2xl font-bold uppercase tracking-widest pointer-events-none">
        Move your mouse
      </h3>
      
      {/* Ensures it captures pointer events across the block but doesn't block the content */}
      <CursorTrail 
        color="#a855f7"
        size={14}
        trailLength={25}
        decayDuration={0.6}
      />
    </div>
  );
}

Props

Prop	Type	Description
`color`	`string`	The color of the trail particles.
`trailLength`	`number`	Maximum number of particles rendering concurrently.
`size`	`number`	Base size of the trailing particle dots.
`decayDuration`	`number`	How long it takes for a drawn particle to fade and shrink out.