Custom cursor wrapper react component using Framer Motion and Tailwind CSS classes.

CustomCursor.tsx

import { m } from "framer-motion";
import React, { useEffect, useState } from "react";

const CustomCursor: React.FC<{ cursorElement: JSX.Element }> = ({
  cursorElement,
}) => {
  const [mousePosition, setMousePosition] = useState({ x: -100, y: -100 });

  const onMouseMove = (e: MouseEvent) => {
    if (!e.target) {
      return;
    }

    const newX = e.clientX;
    const newY = e.clientY;

    setMousePosition({ x: newX, y: newY });
  };

  useEffect(() => {
    const body = document.querySelector("body");
    if (!body) {
      return;
    }

    body.addEventListener("mousemove", onMouseMove);
    body.classList.add("cursor-none");
    return () => {
      body.removeEventListener("mousemove", onMouseMove);
      body.classList.remove("cursor-none");
    };
  }, []);

  return (
    <m.div
      className="fixed pointer-events-none"
      style={{
        left: mousePosition.x,
        top: mousePosition.y,
        zIndex: 1000,
      }}
    >
      {cursorElement}
    </m.div>
  );
};

export default CustomCursor;