Custom Cursor

1"use client";
2 
3import React, { useState, useCallback } from "react";
4import { motion, AnimatePresence, useMotionValue } from "motion/react";
5import { cn } from "@/lib/utils";
6 
7// Default pointer SVG component
8const DefaultPointerSVG = ({ className }: { className?: string }) => (
9  <svg
10    stroke="currentColor"
11    fill="currentColor"
12    strokeWidth="1"
13    viewBox="0 0 16 16"
14    className={className}
15    height="1em"
16    width="1em"
17    xmlns="http://www.w3.org/2000/svg"
18  >
19    <path d="M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103z"></path>
20  </svg>
21);
22 
23export const Cursor = ({
24  children,
25  className,
26  name,
27  customSVG,
28  svgClassName,
29  cursorColor = "sky",
30}: {
31  children: React.ReactNode;
32  className?: string;
33  name: string;
34  customSVG?: React.ReactNode;
35  svgClassName?: string;
36  cursorColor?:
37    | "sky"
38    | "red"
39    | "green"
40    | "blue"
41    | "purple"
42    | "pink"
43    | "yellow"
44    | "indigo"
45    | string;
46}) => {
47  const posX = useMotionValue(0);
48  const posY = useMotionValue(0);
49  const containerRef = React.useRef<HTMLDivElement>(null);
50  const [mouseInside, setMouseInside] = useState<boolean>(false);
51 
52  const handleMouseMove = useCallback(
53    (e: React.MouseEvent<HTMLDivElement>) => {
54      if (containerRef.current) {
55        const rect = containerRef.current.getBoundingClientRect();
56        const x = e.clientX - rect.left;
57        const y = e.clientY - rect.top;
58        requestAnimationFrame(() => {
59          posX.set(x);
60          posY.set(y);
61        });
62      }
63    },
64    [posX, posY],
65  );
66 
67  const handleMouseEnter = useCallback(() => {
68    setMouseInside(true);
69  }, []);
70 
71  const handleMouseLeave = useCallback(() => {
72    setMouseInside(false);
73  }, []);
74 
75  return (
76    <div
77      onMouseLeave={handleMouseLeave}
78      onMouseEnter={handleMouseEnter}
79      onMouseMove={handleMouseMove}
80      style={{
81        cursor: "none",
82      }}
83      ref={containerRef}
84      className={cn("relative", className)}
85    >
86      {children}
87      <AnimatePresence>
88        {mouseInside && (
89          <FollowCursor
90            x={posX}
91            y={posY}
92            name={name}
93            customSVG={customSVG}
94            svgClassName={svgClassName}
95            cursorColor={cursorColor}
96          />
97        )}
98      </AnimatePresence>
99    </div>
100  );
101};
102 
103export const FollowCursor = ({
104  x,
105  y,
106  name,
107  customSVG,
108  svgClassName,
109// … truncated