Precision Crosshair Cursor

Create a precision crosshair cursor. Replace the native cursor with a small plus sign (two 2px bars, 14px long, centered) that tracks the pointer one-to-one with zero easing or lag: the crispness is the point. Over interactive elements (a, button, [data-cursor-hot]) the plus rotates 45 degrees into an X, scales to 1.35, and recolors to the accent. Implementation: hide the native cursor with cursor: none on the root (and cursor: inherit on interactive children so they don't restore it). Render one fixed-position 14x14px div (pointer-events: none, high z-index) containing a horizontal and a vertical bar. On mousemove, set left/top directly to clientX/clientY minus 7px with NO transition on position, so it never trails. Track hover state via event.target.closest('a, button, [data-cursor-hot]'); when hot, apply transform: rotate(45deg) scale(1.35) with transition transform 200ms cubic-bezier(0.22, 1, 0.36, 1) and switch both bars to the accent color over 150ms. Hide the crosshair when the pointer leaves the window. Accessibility: the crosshair div is aria-hidden; keyboard focus styles must remain intact since this only affects mouse users; gate behind (hover: hover) and (pointer: fine); under prefers-reduced-motion keep the native cursor and skip the effect entirely. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.