import React, { useEffect, useState } from "react"; import { motion, AnimatePresence, useMotionValue } from "framer-motion"; import { cn } from "@/lib/utils"; export const FollowerPointerCard = ({ children, className, title, }: { children: React.ReactNode; className?: string; title?: string | React.ReactNode; }) => { const x = useMotionValue(0); const y = useMotionValue(0); const ref = React.useRef(null); const [rect, setRect] = useState(null); const [isInside, setIsInside] = useState(false); useEffect(() => { if (ref.current) { setRect(ref.current.getBoundingClientRect()); } }, []); const handleMouseMove = (e: React.MouseEvent) => { if (rect) { const scrollX = window.scrollX; const scrollY = window.scrollY; x.set(e.clientX - rect.left + scrollX); y.set(e.clientY - rect.top + scrollY); } }; const handleMouseLeave = () => { setIsInside(false); }; const handleMouseEnter = () => { setIsInside(true); }; return (

{isInside && } {children}

); }; export const FollowPointer = ({ x, y, title, }: { x: any; y: any; title?: string | React.ReactNode; }) => { // Using RGB values instead of CSS variables const colors = [ "rgb(14 165 233)", // sky-500 "rgb(115 115 115)", // neutral-500 "rgb(20 184 166)", // teal-500 "rgb(34 197 94)", // green-500 "rgb(59 130 246)", // blue-500 "rgb(239 68 68)", // red-500 "rgb(234 179 8)", // yellow-500 ]; return ( {title || `William Shakespeare`} ); };