Cursor

1'use client';
2import React, { useEffect, useState, useRef } from 'react';
3import {
4  motion,
5  SpringOptions,
6  useMotionValue,
7  useSpring,
8  AnimatePresence,
9  Transition,
10  Variant,
11} from 'motion/react';
12import { cn } from '@/lib/utils';
13 
14export type CursorProps = {
15  children: React.ReactNode;
16  className?: string;
17  springConfig?: SpringOptions;
18  attachToParent?: boolean;
19  transition?: Transition;
20  variants?: {
21    initial: Variant;
22    animate: Variant;
23    exit: Variant;
24  };
25  onPositionChange?: (x: number, y: number) => void;
26};
27 
28export function Cursor({
29  children,
30  className,
31  springConfig,
32  attachToParent,
33  variants,
34  transition,
35  onPositionChange,
36}: CursorProps) {
37  const cursorX = useMotionValue(0);
38  const cursorY = useMotionValue(0);
39  const cursorRef = useRef<HTMLDivElement>(null);
40  const [isVisible, setIsVisible] = useState(!attachToParent);
41 
42  useEffect(() => {
43    if (typeof window !== 'undefined') {
44      cursorX.set(window.innerWidth / 2);
45      cursorY.set(window.innerHeight / 2);
46    }
47  }, []);
48 
49  useEffect(() => {
50    if (!attachToParent) {
51      document.body.style.cursor = 'none';
52    } else {
53      document.body.style.cursor = 'auto';
54    }
55 
56    const updatePosition = (e: MouseEvent) => {
57      cursorX.set(e.clientX);
58      cursorY.set(e.clientY);
59      onPositionChange?.(e.clientX, e.clientY);
60    };
61 
62    document.addEventListener('mousemove', updatePosition);
63 
64    return () => {
65      document.removeEventListener('mousemove', updatePosition);
66    };
67  }, [cursorX, cursorY, onPositionChange]);
68 
69  const cursorXSpring = useSpring(cursorX, springConfig || { duration: 0 });
70  const cursorYSpring = useSpring(cursorY, springConfig || { duration: 0 });
71 
72  useEffect(() => {
73    const handleVisibilityChange = (visible: boolean) => {
74      setIsVisible(visible);
75    };
76 
77    if (attachToParent && cursorRef.current) {
78      const parent = cursorRef.current.parentElement;
79      if (parent) {
80        parent.addEventListener('mouseenter', () => {
81          parent.style.cursor = 'none';
82          handleVisibilityChange(true);
83        });
84        parent.addEventListener('mouseleave', () => {
85          parent.style.cursor = 'auto';
86          handleVisibilityChange(false);
87        });
88      }
89    }
90 
91    return () => {
92      if (attachToParent && cursorRef.current) {
93        const parent = cursorRef.current.parentElement;
94        if (parent) {
95          parent.removeEventListener('mouseenter', () => {
96// … truncated