Showpieces — the effects visitors talk about

Build a before/after comparison slider: stack two layers absolutely in one container — the "before" design filling it, and the "after" design on top clipped with clip-path: inset(0 X% 0 0) where X follows a draggable divider. Track dragging with pointerdown/pointermove/pointerup on the container (setPointerCapture so the drag survives leaving the element), converting clientX to a 4-96% position; render a thin divider line with a circular handle at that position. Add accessibility: role="slider" with aria-valuenow, keyboard left/right arrows moving the divider, touch-action: none so touch dragging works. No animation needed — the divider follows the pointer directly.