"use client"; import { useEffect, useRef, useState } from "react"; import { createPortal } from "react-dom"; import gsap from "gsap"; export interface CrosshairCursorProps extends React.ComponentPropsWithoutRef<"div"> { containerRef?: React.RefObject; color?: string; borderColor?: string; } export function CrosshairCursor({ containerRef, color = "#ff5c71", borderColor = "#1a1a1a", className = "", style, ...props }: CrosshairCursorProps) { const cursorRef = useRef(null); const hLineRef = useRef(null); const vLineRef = useRef(null); const labelRef = useRef(null); const previewRef = useRef(null); const posRef = useRef({ x: 0, y: 0 }); const [isInside, setIsInside] = useState(false); const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); useEffect(() => { const container = containerRef ? containerRef.current : previewRef.current; if (!container) return; const originalCursor = container.style.cursor; const originalPosition = container.style.position; if (containerRef) { container.style.cursor = "none"; const computedStyle = window.getComputedStyle(container); if (computedStyle.position === "static") { container.style.position = "relative"; } } const onMove = (e: MouseEvent) => { const rect = container.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; posRef.current = { x, y }; gsap.to(hLineRef.current, { top: y, duration: 0.1, ease: "none" }); gsap.to(vLineRef.current, { left: x, duration: 0.1, ease: "none" }); gsap.to(cursorRef.current, { x: x - 6, y: y - 6, duration: 0.08, ease: "none" }); if (labelRef.current) { labelRef.current.textContent = `${Math.round(x)}, ${Math.round(y)}`; gsap.to(labelRef.current, { x: x + 14, y: y - 22, duration: 0.1, ease: "none" }); } }; const onEnter = () => { setIsInside(true); }; const onLeave = () => { setIsInside(false); }; container.addEventListener("mousemove", onMove); container.addEventListener("mouseenter", onEnter); container.addEventListener("mouseleave", onLeave); setIsInside(true); return () => { container.removeEventListener("mousemove", onMove); container.removeEventListener("mouseenter", onEnter); container.removeEventListener("mouseleave", onLeave); if (containerRef) { container.style.cursor = originalCursor; container.style.position = originalPosition; } }; }, [containerRef, mounted]); const crosshairElements = (

{/* Crosshair lines */}

{/* Center dot */}

{/* Coordinates label */} 0, 0 {/* Grid overlay */}

); // If containerRef is provided, render elements via Portal if (containerRef) { if (!mounted || !containerRef.current) return null; return createPortal(crosshairElements, containerRef.current); } // Default localized preview return (

{crosshairElements}

Move cursor inside

); }

Component Showcase

Choose Installation Method

AI Automation Agent Prompt