Vibeset

Cursor crosshair

Two lines crossing the zone where the pointer is, with coordinates, a frame that closes on what is pointed at and a pulse on press. It is decoration over the mouse and behaves like it: its layer is aria-hidden and takes no events, so it covers nothing, and what is beneath is normal HTML with or without the crosshair. It does not hide the system cursor unless asked, because anyone who needs to see where it is loses it. It follows with smoothing and the loop only exists while there is distance to cover, corrected with real time between frames. For locking, mark an element with data-mira and a name: the crosshair centres on it and the label says it instead of the coordinates. On touch it does nothing, so nothing can depend on it.

And the React Bits original: Crosshair

This piece is written from scratch in Vibeset: nothing was copied or ported from React Bits. It does something similar to their Crosshair, and this is what we saw in theirs in case you prefer to use the original.

When to use it

For the landing of a technical tool, a mapping product or a game, where aiming is part of the experience. Not for a content site.

Watch out for

With hideCursor it hides the real cursor, and anyone who needs to see it clearly loses it: leave it off. It only reacts to the mouse: on touch it does nothing, so it cannot be the only way to reach anything.

Accessibility

It respects the system reduced-motion setting. It deliberately ignores non-mouse pointers. It is decorative.