import React, { useEffect, useState } from "react"; import { motion, AnimatePresence, useMotionValue } from "motion/react"; 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); // Add this line 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; }) => { const colors = [ "#0ea5e9", "#737373", "#14b8a6", "#22c55e", "#3b82f6", "#ef4444", "#eab308", ]; return ( {title || `William Shakespeare`} ); };

Following Pointer

Instalação

Dependências