How it works
The difference blend mode computes, per pixel, the absolute difference between the element's color and the backdrop's color. Pure white minus near-white yields near-black; white minus black stays white; white over mid-gray yields mid-gray. Because the compositing runs per frame on the GPU, an element sliding across a boundary inverts gradually at the exact pace of its own movement - the continuity is free, not simulated. The demo's moving stripes animate background-position only, so the backdrop scroll costs no layout either.
The JS half is a standard pointer drag: pointerdown records the offset, pointermove writes the disc position as a transform: translate, pointerup releases. setPointerCapture is guarded with try/catch because synthetic pointer events can throw on capture requests. The disc itself is a plain white circle with the blend mode applied; no color logic exists anywhere in the code.
How to use this prompt
Use it for floating action buttons, back-to-top controls, custom cursors, and floating sidebars - anything that persists across sections with different backgrounds. Send the prompt with your element and page structure, and include one instruction that amateurs miss: ask for isolation: isolate on the blending element's parent, or the mode may composite against layers outside your intended stacking context and produce wrong colors.
Tips for better results
Fill the element with pure white or pure black - colored fills shift hue under difference (white becomes black, red becomes cyan) and cannot be controlled. Skip outlines on the element; strokes participate in the blend and fringe at edges. Some nested transform containers create their own compositing layer and break the blend on Safari; promoting the blended element to a sibling of the scroll container fixes it. And design backgrounds with wide luminance gaps: over mid-gray the inverted result is also mid-gray, and contrast collapses.