"use client" import { useEffect, useRef, useState } from "react" import { AnimatePresence, motion, useMotionValue, type HTMLMotionProps, } from "motion/react" import { cn } from "@/lib/utils" /** * A custom pointer component that displays an animated cursor. * Add this as a child to any component to enable a custom pointer when hovering. * You can pass custom children to render as the pointer. * * @component * @param {HTMLMotionProps<"div">} props - The component props */ export function Pointer({ className, style, children, ...props }: HTMLMotionProps<"div">): React.ReactNode { const x = useMotionValue(0) const y = useMotionValue(0) const [isActive, setIsActive] = useState(false) const containerRef = useRef(null) useEffect(() => { const parentElement = typeof window !== "undefined" ? (containerRef.current?.parentElement ?? null) : null const handleMouseMove = (e: MouseEvent) => { x.set(e.clientX) y.set(e.clientY) setIsActive(true) } const handleMouseEnter = (e: MouseEvent) => { x.set(e.clientX) y.set(e.clientY) setIsActive(true) } const handleMouseLeave = () => { setIsActive(false) } if (parentElement) { parentElement.style.cursor = "none" parentElement.addEventListener("mousemove", handleMouseMove) parentElement.addEventListener("mouseenter", handleMouseEnter) parentElement.addEventListener("mouseleave", handleMouseLeave) } return () => { if (parentElement) { parentElement.style.cursor = "" parentElement.removeEventListener("mousemove", handleMouseMove) parentElement.removeEventListener("mouseenter", handleMouseEnter) parentElement.removeEventListener("mouseleave", handleMouseLeave) } } }, [x, y]) return ( <>

{isActive && ( {children || ( )} )} ) }

Pointer

Instalação

Dependências