Cursor

Component 102

About

A custom cursor component with optional spring animations. It can be globally applied to the page or attached specifically to a parent element.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Cursor to your project and fits it to your theme.

Code

How Cursor is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { useRef, useState, SVGProps } from "react";
import { Cursor } from "@/components/ui/cursor";
import { AnimatePresence, motion } from "framer-motion";
import { PlusIcon, } from "lucide-react";

const MouseIcon = (props: SVGProps<SVGSVGElement>) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={26}
      height={31}
      fill="none"
      {...props}
    >
      <g clipPath="url(#a)">
        <path
          fill={"#22c55e"}
          fillRule="evenodd"
          stroke={"#fff"}
          strokeLinecap="square"
          strokeWidth={2}
          d="M21.993 14.425 2.549 2.935l4.444 23.108 4.653-10.002z"
          clipRule="evenodd"
        />
      </g>
      <defs>
        <clipPath id="a">
          <path fill={"#22c55e"} d="M0 0h26v31H0z" />
        </clipPath>
      </defs>
    </svg>
  );
};
export function CursorWithSpring() {
  return (
    <div>
      <div className="p-4">
        <Cursor
          attachToParent
          variants={{
            initial: { height: 0, opacity: 0, scale: 0.3 },
            animate: { height: "auto", opacity: 1, scale: 1 },
            exit: { height: 0, opacity: 0, scale: 0.3 },
          }}
          transition={{
            type: "spring",
            duration: 0.3,
            bounce: 0.1,
          }}
          className="overflow-hidden"
          springConfig={{
            bounce: 0.01,
          }}
        >
          <img
            src="https://cdn.21st.dev/assets/mirror/37/376115cfa6d319221beee9a840594a1ae8b0b70ba272251f796590e5220813f9.jpg"
            alt="Christian Church, Eastern Europe"
            className="h-40 w-40"
          />
        </Cursor>
        Christian Church, Eastern Europe
      </div>
    </div>
  );
}

export { CursorWithSpring };