Cursor

Custom cursor follower inside a container. Hides the default cursor and tracks mouse with useSpring for smooth follow.

Use and inspectUse this when the motion supports the surrounding content. Connect callbacks and state to your app, keep the reset preview as a local demonstration, and add a reduced-motion fallback for movement or looping. The preview is synthetic; it does not call a backend.Next: inspect the source below and replace the demo inputs with your own data.

CursorCustom cursor follower inside a container. Hides the default cursor and tracks mouse with useSpring for smooth follow.

"use client";
import { useState } from "react";
import { motion, useMotionValue, useSpring } from "framer-motion";

type CursorProps = {
  children: React.ReactNode;
  size?: number;
  color?: string;
};

export function Cursor({ children, size = 12, color = "#ffffff" }: CursorProps) {
  const [visible, setVisible] = useState(false);
  const rawX = useMotionValue(0);
  const rawY = useMotionValue(0);
  const x = useSpring(rawX, { stiffness: 400, damping: 30 });
  const y = useSpring(rawY, { stiffness: 400, damping: 30 });

  function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {
    const rect = e.currentTarget.getBoundingClientRect();
    rawX.set(e.clientX - rect.left - size / 2);
    rawY.set(e.clientY - rect.top - size / 2);
  }

  return (
    <div
      className="mp-cursor-container"
      onMouseMove={handleMouseMove}
      onMouseEnter={() => setVisible(true)}
      onMouseLeave={() => setVisible(false)}
    >
      {children}
      {visible && (
        <motion.div
          className="mp-cursor-dot"
          style={{
            x,
            y,
            width: size,
            height: size,
            background: color,
          }}
        />
      )}
    </div>
  );
}

Installnpm install framer-motion

Props

Prop	Type	Default	Description
childrenrequired	ReactNode	—	Container content
size	number	12	Cursor dot size in px
color	string	"#ffffff"	Cursor dot color