Before-After Slider

Create a before-after comparison slider. Two images (or styled layers) stacked exactly on top of each other; a vertical divider that the user drags left and right reveals the 'after' layer using clip-path: inset(0 X% 0 0) on the top layer, where X follows the divider position. Implementation: on pointerdown, capture the pointer (setPointerCapture) and update the divider position from clientX relative to the container on every pointermove, clamped to 4-96%. Set touch-action: none and user-select: none on the container so dragging works cleanly on touch. Draw the divider as a 2-3px vertical line with a circular handle (24-30px, dark, with a left-right arrows glyph) centered on it. Both layers must be identically sized and positioned (absolute, inset 0) so the comparison is honest. Accessibility: give the container role='slider' with aria-valuenow, make it focusable, and support ArrowLeft/ArrowRight to move the divider in 4% steps. No transition on the clip-path while dragging: it must track the pointer exactly. 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.