Cursor

Component 93

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 CursorWithComponent() {
  return (
    <div className="py-12">
      <div className="overflow-hidden rounded-[12px] bg-white p-2 shadow-md dark:bg-black">
        <Cursor
          attachToParent
          variants={{
            initial: { scale: 0.3, opacity: 0 },
            animate: { scale: 1, opacity: 1 },
            exit: { scale: 0.3, opacity: 0 },
          }}
          transition={{
            ease: "easeInOut",
            duration: 0.15,
          }}
          className="left-12 top-4"
        >
          <div>
            <MouseIcon className="h-6 w-6" />
            <div className="ml-4 mt-1 rounded-[4px] bg-green-500 px-2 py-0.5 text-neutral-50">
              The city below
            </div>
          </div>
        </Cursor>
        <img
          src="https://cdn.21st.dev/assets/mirror/eb/ebd33ecb7e7ba3089291925cf8b502a09632a915a915e678bd8dbfee84223264.jpg"
          alt="Green herbs"
          className="h-40 w-full max-w-32 rounded-[8px] object-cover"
        />
      </div>
    </div>
  );
}

export { CursorWithComponent };