Custom Cursor

Create a custom dot-and-ring cursor. On devices that support hover with a fine pointer only (check with matchMedia '(hover: hover) and (pointer: fine)'): hide the native cursor (cursor: none on body and interactive elements) and render two fixed-position elements: a 7px accent-colored dot that follows the cursor exactly, and a 34px ring (1.5px border, ~35% opacity) that trails behind it, updated in a requestAnimationFrame loop where the ring moves ~18% of the remaining distance each frame. When the cursor is over any interactive element (a, button, input, or anything marked data-cursor), the ring grows to 56px, becomes fully opaque, and takes the accent color, transitioning over 300ms with cubic-bezier(0.22, 1, 0.36, 1). Hide both elements when the cursor leaves the window. On touch devices render nothing and leave the native cursor untouched. Move everything with transform only, and set pointer-events: none on both elements. 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.