Interactive Cursor

Spring-smoothed cursor overlay with magnetic hover states, click ripples, optional particles, and support for full-page or container-scoped interactions.

UniqueUI CLI

npx uniqueui add interactive-cursor

shadcn CLI

npx shadcn@latest add https://uniqueui.com/r/interactive-cursor.json -y

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

Preview

Spring Physics · Magnetic Snap · Click Particles

Interactive Cursor

Move inside this card. Hover buttons to see magnetic pull. Click anywhere for burst particles.

Pass hideSystemCursor to fully replace the native cursor

Usage

"use client";
import { useRef } from "react";
import { InteractiveCursor } from "@/components/ui/interactive-cursor";

export default function Example() {
  const containerRef = useRef<HTMLDivElement>(null);

  return (
    <div
      ref={containerRef}
      className="relative h-[400px] w-full overflow-hidden rounded-xl border border-neutral-800 bg-neutral-950"
    >
      <div className="relative z-10 flex h-full items-center justify-center">
        <button
          type="button"
          data-magnetic="true"
          className="rounded-full bg-white px-6 py-3 font-semibold text-black"
        >
          Hover me
        </button>
      </div>

      <InteractiveCursor
        containerRef={containerRef}
        color="#a855f7"
        clickColor="#b280ff"
        trailColor="rgba(168, 85, 247, 0.35)"
      />
    </div>
  );
}

Props

Prop	Type	Description
`color`	`string`	Primary color for the cursor dot.
`clickColor`	`string`	Ripple and particle color used on click.
`glow`	`boolean`	Enables the trailing glow around the cursor.
`trailColor`	`string`	Color of the outer ring and trailing glow.
`particleEffect`	`boolean`	Whether click interactions emit particles.
`magneticPull`	`boolean`	Snaps the cursor toward interactive elements such as buttons and links.
`hideSystemCursor`	`boolean`	Hides the native cursor while the component is mounted.
`containerRef`	`RefObject<HTMLElement \| null>`	Optional ref limiting the interaction area to a specific container instead of the full window.
`className`	`string`	Additional classes applied to the overlay root.