following-pointer

1import React, { useEffect, useState } from "react";
2 
3import { motion, AnimatePresence, useMotionValue } from "motion/react";
4import { cn } from "@/lib/utils";
5 
6export const FollowerPointerCard = ({
7  children,
8  className,
9  title,
10}: {
11  children: React.ReactNode;
12  className?: string;
13  title?: string | React.ReactNode;
14}) => {
15  const x = useMotionValue(0);
16  const y = useMotionValue(0);
17  const ref = React.useRef<HTMLDivElement>(null);
18  const [rect, setRect] = useState<DOMRect | null>(null);
19  const [isInside, setIsInside] = useState<boolean>(false); // Add this line
20 
21  useEffect(() => {
22    if (ref.current) {
23      setRect(ref.current.getBoundingClientRect());
24    }
25  }, []);
26 
27  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
28    if (rect) {
29      const scrollX = window.scrollX;
30      const scrollY = window.scrollY;
31      x.set(e.clientX - rect.left + scrollX);
32      y.set(e.clientY - rect.top + scrollY);
33    }
34  };
35  const handleMouseLeave = () => {
36    setIsInside(false);
37  };
38 
39  const handleMouseEnter = () => {
40    setIsInside(true);
41  };
42  return (
43    <div
44      onMouseLeave={handleMouseLeave}
45      onMouseEnter={handleMouseEnter}
46      onMouseMove={handleMouseMove}
47      style={{
48        cursor: "none",
49      }}
50      ref={ref}
51      className={cn("relative", className)}
52    >
53      <AnimatePresence>
54        {isInside && <FollowPointer x={x} y={y} title={title} />}
55      </AnimatePresence>
56      {children}
57    </div>
58  );
59};
60 
61export const FollowPointer = ({
62  x,
63  y,
64  title,
65}: {
66  x: any;
67  y: any;
68  title?: string | React.ReactNode;
69}) => {
70  const colors = [
71    "#0ea5e9",
72    "#737373",
73    "#14b8a6",
74    "#22c55e",
75    "#3b82f6",
76    "#ef4444",
77    "#eab308",
78  ];
79  return (
80    <motion.div
81      className="absolute z-50 h-4 w-4 rounded-full"
82      style={{
83        top: y,
84        left: x,
85        pointerEvents: "none",
86      }}
87      initial={{
88        scale: 1,
89        opacity: 1,
90      }}
91      animate={{
92        scale: 1,
93        opacity: 1,
94      }}
95      exit={{
96        scale: 0,
97        opacity: 0,
98      }}
99    >
100      <svg
101        stroke="currentColor"
102        fill="currentColor"
103        strokeWidth="1"
104        viewBox="0 0 16 16"
105        className="h-6 w-6 -translate-x-[12px] -translate-y-[10px] -rotate-[70deg] transform stroke-sky-600 text-sky-500"
106        height="1em"
107        width="1em"
108        xmlns="http://www.w3.org/2000/svg"
109      >
110// … truncated