// Blob cursor — morphs shape + color on hover over interactive elements
const { useEffect, useRef, useState } = React;
function BlobCursor({ palette }) {
const blobRef = useRef(null);
const dotRef = useRef(null);
const pos = useRef({ x: -100, y: -100 });
const target = useRef({ x: -100, y: -100 });
const [mode, setMode] = useState("default"); // default | hover | text
useEffect(() => {
const onMove = (e) => {
target.current.x = e.clientX;
target.current.y = e.clientY;
if (dotRef.current) {
dotRef.current.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
}
};
const onOver = (e) => {
const el = e.target;
if (!el.closest) return;
if (el.closest('a, button, [role="button"], .tiu-hit')) setMode("hover");
else if (el.closest('input, textarea, [contenteditable="true"]')) setMode("text");
else setMode("default");
};
window.addEventListener("mousemove", onMove, { passive: true });
window.addEventListener("mouseover", onOver, { passive: true });
let raf;
const tick = () => {
pos.current.x += (target.current.x - pos.current.x) * 0.18;
pos.current.y += (target.current.y - pos.current.y) * 0.18;
if (blobRef.current) {
blobRef.current.style.transform = `translate(${pos.current.x}px, ${pos.current.y}px)`;
}
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => {
window.removeEventListener("mousemove", onMove);
window.removeEventListener("mouseover", onOver);
cancelAnimationFrame(raf);
};
}, []);
// Scale based on mode
const scale = mode === "hover" ? 1.9 : mode === "text" ? 0.45 : 1;
const dotOpacity = mode === "default" ? 1 : 0;
return (
<>
{/* Big blobby follower */}
{/* Inner precise dot */}
);
}
window.BlobCursor = BlobCursor;