Image Compare Slider

Image Compare Slider is an image interaction in the UI HUB image interactions collection. A before/after slider: a full-size after image sits on top of a clip-path-inset masked before copy; the divider edge and grip follow the pointer (or arrow keys) through a stiffness-900/damping-55 spring, so the reveal decelerates into place instead of snapping.

The component is driven by 11 documented props (before, after, initialPosition, orientation, showLabels, labelBefore and 5 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.

Implementation notes: clip-path inset() reveal, no image re-layout; stiff 900/55 spring on divider + edge; pointer + arrow-key control, Home/End jump.

Preview the image interaction in the browser above, copy the source, and paste it into your project. Image Interactions components in UI HUB are grouped by category so you can compare effects side by side before choosing one.