Corner Brackets Cursor

Create a corner-brackets cursor treatment. The mouse itself stays native and nothing follows it around. Instead, when the cursor enters any interactive element (a, button, [data-cursor-target]), four small corner brackets snap around that element like a camera focus frame, and glide to the next element when the pointer moves on. Implementation: render one fixed-position frame div (pointer-events: none, opacity 0) holding four 9x9px spans, each drawing two 2px accent borders (top+right, top+left, bottom+right, bottom+left), absolutely pinned to its corner. Listen for mouseover/mouseout on document: on entering a matching element, measure its getBoundingClientRect, then set the frame's left/top/width/height to the rect expanded by 6px padding and fade opacity to 1. Transition all properties over 260ms with cubic-bezier(0.22, 1, 0.36, 1): because it is the same element moving, the frame visibly stretches and glides between targets instead of blinking. On leaving to a non-target, fade opacity to 0 in place. Details: re-measure on scroll/resize while visible (or hide on scroll); frame is aria-hidden decoration; gate behind (hover: hover) and (pointer: fine); under prefers-reduced-motion swap the glide for a 150ms opacity-only crossfade at the new position. 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.