Cursor Follower

Utility

Custom cursor-following element.

Preview

CursorFollower attaches an element to follow the mouse cursor. Useful for custom cursors and interactive effects.

Usage

example.jsx

import { CursorFollower } from "@/components/ui/cursor-follower";

export default function Example() {
  return <CursorFollower />;
}

Source Code

Copy this file into components/ui/cursor-follower.jsx in your project.

cursor-follower.jsx

"use client";

import { useEffect, useState } from "react";

function CursorFollower({ size = 20, color = "rgba(var(--primary), 0.3)", delay = 50 }) {
  const [pos, setPos] = useState({ x: -100, y: -100 });
  useEffect(() => {
    let raf;
    const handler = (e) => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => setPos({ x: e.clientX, y: e.clientY }));
    };
    window.addEventListener("mousemove", handler);
    return () => { window.removeEventListener("mousemove", handler); cancelAnimationFrame(raf); };
  }, []);

  return (
    <div className="pointer-events-none fixed inset-0 z-[9999]">
      <div
        style={{
          position: "absolute", left: pos.x - size / 2, top: pos.y - size / 2,
          width: size, height: size, borderRadius: "50%",
          backgroundColor: color, transition: `all ${delay}ms ease-out`,
        }}
      />
    </div>
  );
}

export { CursorFollower };

Quick Install

Make sure you have the cn() utility set up. It requires clsx and tailwind-merge.

npm install clsx tailwind-merge