Difference Cursor

Create a difference-blend cursor. Replace the native cursor with a 30px disc that inverts the colors of everything underneath it, using pure CSS blend modes: over a light background it reads as dark, over dark sections it glows light, and it slices through text for a boutique-studio feel. No canvas or WebGL involved. Implementation: hide the native cursor (cursor: none on the container, cursor: inherit on interactive children). Render one fixed-position 30px circle with background: #fff and mix-blend-mode: difference, pointer-events: none, z-index above all content. On mousemove set left/top directly to clientX/clientY minus 15px, with no easing (a laggy inversion disc feels broken; instant tracking feels surgical). Optionally scale to 1.6 over interactive elements with transition transform 200ms. Critical detail: mix-blend-mode only blends within the nearest stacking context that has isolation. Make sure no ancestor of the disc creates an isolated stacking context (isolation: isolate, opacity < 1, transform, filter) between the disc and the page background, or the inversion silently stops at that ancestor. Test over both your lightest and darkest surfaces. Accessibility: the disc is aria-hidden decoration; keyboard focus indicators must remain visible and un-inverted (the disc only follows the mouse); gate behind (hover: hover) and (pointer: fine); under prefers-reduced-motion keep the native cursor and skip the effect. 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.