// Custom cursor — comic pointing-finger on hover
const { useEffect, useRef, useState } = React;
const HAND_SVG = (
);
function CustomCursor({ style = "dot", accent = "#C7411E" }) {
const dotRef = useRef(null);
const ringRef = useRef(null);
const handRef = useRef(null);
const labelRef = useRef(null);
const [mode, setMode] = useState("default");
const [label, setLabel] = useState("");
useEffect(() => {
let mx = window.innerWidth / 2, my = window.innerHeight / 2;
let rx = mx, ry = my;
let rafId;
const onMove = (e) => {
mx = e.clientX; my = e.clientY;
const dotT = `translate3d(${mx}px, ${my}px, 0) translate(-50%, -50%)`;
if (dotRef.current) dotRef.current.style.transform = dotT;
// Center the small reticle on the actual cursor point
const handT = `translate3d(${mx - 11}px, ${my - 11}px, 0)`;
if (handRef.current) handRef.current.style.transform = handT;
if (labelRef.current) {
labelRef.current.style.transform = `translate3d(${mx + 18}px, ${my + 18}px, 0)`;
}
};
const tick = () => {
rx += (mx - rx) * 0.18;
ry += (my - ry) * 0.18;
if (ringRef.current) {
ringRef.current.style.transform = `translate3d(${rx}px, ${ry}px, 0) translate(-50%, -50%)`;
}
rafId = requestAnimationFrame(tick);
};
tick();
const onOver = (e) => {
const t = e.target.closest("[data-cursor]");
if (t) {
setMode(t.dataset.cursor || "link");
setLabel(t.dataset.cursorLabel || "");
} else {
setMode("default");
setLabel("");
}
};
window.addEventListener("mousemove", onMove);
window.addEventListener("mouseover", onOver);
return () => {
window.removeEventListener("mousemove", onMove);
window.removeEventListener("mouseover", onOver);
cancelAnimationFrame(rafId);
};
}, []);
if (typeof window !== "undefined" && "ontouchstart" in window && navigator.maxTouchPoints > 0) {
return null;
}
const isView = mode === "view";
const isLink = mode === "link";
const showHand = isView || isLink;
return (
<>
{HAND_SVG}
{isView && label && {label}}
{label && (
{label}
)}
);
}
window.CustomCursor = CustomCursor;