// BowCursor.jsx — a cute ribbon bow that follows the pointer with a soft trail.
// Replaces the native cursor on fine-pointer devices; grows over clickable things.
(function () {
// A delicate lace bow — ivory openwork, fine gold-taupe thread, picot edges.
function Bow({ size = 40, pressed, hot }) {
const thread = "#b39a78";
const fill = "#fdf8f1";
// openwork eyelets + picot dots for one loop (left half, mirrored for right)
const eyelets = [[12, 13], [8.6, 17], [13, 18.5], [16.5, 14.5], [10, 21.5]];
const picots = [[16, 6.4], [10.5, 7.8], [6, 10.4], [3.9, 14.6], [4.4, 19.4], [7, 23.6], [12, 26.6], [18, 27]];
const Loop = () => (
{eyelets.map(([x, y], i) => (
))}
{picots.map(([x, y], i) => (
))}
);
const Tail = () => (
{[15.2, 17.5, 19.6].map((x, i) => (
))}
);
return (
);
}
function BowCursor() {
const ref = React.useRef(null);
const [enabled, setEnabled] = React.useState(false);
const [pressed, setPressed] = React.useState(false);
const [hot, setHot] = React.useState(false);
const state = React.useRef({ tx: -100, ty: -100, x: -100, y: -100, rot: 0, px: -100 });
React.useEffect(() => {
if (!window.matchMedia || !window.matchMedia("(pointer: fine)").matches) return;
setEnabled(true);
const style = document.createElement("style");
style.textContent = `* { cursor: none !important; }`;
document.head.appendChild(style);
function onMove(e) {
const s = state.current;
s.tx = e.clientX; s.ty = e.clientY;
const el = e.target;
const interactive = el && (el.closest && el.closest('a,button,figure,input,[role="button"]'));
setHot(!!interactive);
}
function onDown() { setPressed(true); }
function onUp() { setPressed(false); }
window.addEventListener("mousemove", onMove, { passive: true });
window.addEventListener("mousedown", onDown);
window.addEventListener("mouseup", onUp);
let raf;
function tick() {
const s = state.current;
s.px = s.x;
s.x += (s.tx - s.x) * 0.22;
s.y += (s.ty - s.y) * 0.22;
const vel = s.x - s.px;
s.rot += ((Math.max(-22, Math.min(22, vel * 1.4)) - s.rot)) * 0.18;
if (ref.current) {
ref.current.style.transform =
`translate(${s.x}px, ${s.y}px) translate(-50%, -52%) rotate(${s.rot}deg)`;
}
raf = requestAnimationFrame(tick);
}
raf = requestAnimationFrame(tick);
return () => {
cancelAnimationFrame(raf);
window.removeEventListener("mousemove", onMove);
window.removeEventListener("mousedown", onDown);
window.removeEventListener("mouseup", onUp);
style.remove();
};
}, []);
if (!enabled) return null;
return (
);
}
window.BowCursor = BowCursor;
})();