GSAPMouse Tracker

Mouse Tracker

A smooth GSAP-powered cursor follower that renders a glowing ball tracking your mouse, fully customizable via props.

Installation

$ npx @nehal712521/inprogress add mouse-tracker

Preview

Move your cursor anywhere inside the preview card to see the tracker follow with a smooth GSAP animation.

Mouse Tracker

Hover here and follow the glow

Fully customizable size, color, blur, and easing.

Usage

The tracker is rendered above your content and listens to window.addEventListener("mousemove") under the hood. You can control size, color, blur, easing and more with props.

import { MouseTracker } from "@/components/ui/mouse-tracker";

export default function Page() {
  return (
    <main className="min-h-screen bg-black text-white">
      <MouseTracker
        size={22}
        color="rgba(56, 189, 248, 1)"
        blur={36}
        duration={0.3}
        ease="power3.out"
        className="h-screen"
      >
        <div className="flex h-full items-center justify-center">
          <h1 className="text-3xl font-semibold text-zinc-100">
            Follow the cursor
          </h1>
        </div>
      </MouseTracker>
    </main>
  );
}