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.
What is Image Compare Slider?
A draggable divider that peels between before/after image states with spring physics and ARIA slider semantics.
Image Compare Slider at a glance
- Category
- Image Interactions
- Pricing
- Free to use
- Libraries
- React and Framer Motion
- Language
- TypeScript
- Styling
- Tailwind CSS
- Configurable props
- 11
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Image Compare Slider works
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.
Technical information for Image Compare Slider
| Category | Image Interactions |
|---|---|
| Libraries | React and Framer Motion |
| Styling | Tailwind CSS |
| Language | TypeScript |
| Rendering | spring physics |
| State change | divider at start position over a still image to divider slides to reveal the other state |
| Props | 11 configurable |
| Usage example | Not published yet |
What Image Compare Slider requires
- clip-path inset() reveal, no image re-layout
- stiff 900/55 spring on divider + edge
- pointer + arrow-key control, Home/End jump
- role=slider with live aria-valuenow
- prefers-reduced-motion jumps instead of springs
- no state writes per pointer frame
Image Compare Slider questions
What is Image Compare Slider?
A draggable divider that peels between before/after image states with spring physics and ARIA slider semantics.
How does Image Compare Slider work?
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.
Which category does Image Compare Slider belong to?
Image Compare Slider is listed under Image Interactions in the UI HUB catalog. Image components that respond to the pointer: 3D tilt cards, cursor-following image trails, distortion and ripple transitions, draggable collages and hover-reveal stacks. These are built to sit inside real content grids, so they accept standard image props and keep alt text intact. Each one lists its transform maths in the props table.
What does the before prop do in Image Compare Slider?
"Before" image { src, alt? } shown under the reveal layer. It defaults to IMAGE_COMPARE_DEFAULTS.before.
What does the after prop do in Image Compare Slider?
"After" image { src, alt? } shown as the base layer. It defaults to IMAGE_COMPARE_DEFAULTS.after.
Is Image Compare Slider free to use?
Image Compare Slider is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Image Compare Slider use?
Image Compare Slider uses React and Framer Motion and is styled with Tailwind CSS.
What does Image Compare Slider need to run?
Image Compare Slider needs clip-path inset() reveal, no image re-layout, stiff 900/55 spring on divider + edge, pointer + arrow-key control, Home/End jump and role=slider with live aria-valuenow.