"use client"; import type { HTMLAttributes, PointerEvent } from "react"; import { useEffect, useRef, useState } from "react"; export type DragHintCursorProps = HTMLAttributes & { /** Attribute read from the nearest hovered element, for example data-cursor-hint="Drag". */ attribute?: string; /** Hides the native cursor while a hint pill is visible. */ hideNativeCursor?: boolean; /** 0 to 1. Lower values trail further behind the pointer. */ smoothing?: number; /** Removes the trailing ease; the pill follows the pointer exactly. */ reducedMotion?: boolean; }; export function DragHintCursor({ children, attribute = "data-cursor-hint", hideNativeCursor = false, smoothing = 0.22, reducedMotion = false, className = "", onPointerMove, onPointerLeave, ...props }: DragHintCursorProps) { const root = useRef(null); const pill = useRef(null); const target = useRef({ x: 0, y: 0 }); const current = useRef({ x: 0, y: 0 }); const frame = useRef(0); const [enabled, setEnabled] = useState(false); const [prefersReduced, setPrefersReduced] = useState(false); const [hint, setHint] = useState(null); const [lastHint, setLastHint] = useState(""); useEffect(() => { const fine = window.matchMedia("(pointer: fine)"); const reduce = window.matchMedia("(prefers-reduced-motion: reduce)"); const sync = () => { setEnabled(fine.matches); setPrefersReduced(reduce.matches); }; sync(); fine.addEventListener("change", sync); reduce.addEventListener("change", sync); return () => { fine.removeEventListener("change", sync); reduce.removeEventListener("change", sync); cancelAnimationFrame(frame.current); }; }, []); const instant = reducedMotion || prefersReduced; function place(x: number, y: number) { if (pill.current) pill.current.style.transform = "translate3d(" + x + "px, " + y + "px, 0) translate(-50%, -50%)"; } function step() { const dx = target.current.x - current.current.x; const dy = target.current.y - current.current.y; current.current = { x: current.current.x + dx * smoothing, y: current.current.y + dy * smoothing }; place(current.current.x, current.current.y); frame.current = Math.abs(dx) + Math.abs(dy) > 0.2 ? requestAnimationFrame(step) : 0; } function handlePointerMove(event: PointerEvent) { onPointerMove?.(event); if (!enabled || event.pointerType === "touch") return; const container = root.current; if (!container) return; const hit = event.target instanceof Element ? event.target.closest("[" + attribute + "]") : null; const nextHint = hit && container.contains(hit) ? hit.getAttribute(attribute) : null; if (nextHint !== hint) { if (nextHint && !hint) { const bounds = container.getBoundingClientRect(); current.current = { x: event.clientX - bounds.left, y: event.clientY - bounds.top }; } setHint(nextHint); if (nextHint) setLastHint(nextHint); } const bounds = container.getBoundingClientRect(); target.current = { x: event.clientX - bounds.left, y: event.clientY - bounds.top }; if (instant) { current.current = target.current; place(target.current.x, target.current.y); return; } if (!frame.current) frame.current = requestAnimationFrame(step); } function handlePointerLeave(event: PointerEvent) { onPointerLeave?.(event); setHint(null); } const visible = enabled && hint !== null; return (

{children}

); }