cursor-reveal-hero

Stack two pixel-aligned layers and mask the top one with a radial-gradient centered on CSS custom properties updated by pointer events. Batch updates into requestAnimationFrame and stop the loop once the mask catches up to avoid battery drain.

Touch devices have no hover, so park the mask at a designed anchor position as the resting state and let drag gestures move it. Never let mobile users see only the unrevealed base layer when the design intends a glimpse of the second state.

Yes, the reveal itself is fine at WCAG AA because it follows the user's own hand. Remove the easing lag under prefers-reduced-motion by snapping the mask to the pointer instead, and do not autoplay the video layer.

Misalignment is an asset problem, not a code problem. Generate the base image first, then create the second state via image-to-image from that exact image with instructions to keep the silhouette and camera, rather than generating both independently.

Drive a headless browser with Playwright, move the pointer, and sample actual pixels at the anchor and pointer positions via screenshots. Also test a deliberately broken copy with a pinned mask to prove the checks can fail.

Avoid it when the revealed layer carries information the page must communicate, since keyboard users, screen-reader users, and anyone who never moves the mouse over that spot will never see it. It is decoration on top of a complete page, never a content delivery mechanism.