All projects · UI Components & Interactions
ProofSlide — Before & After
An interactive before/after image comparison slider that stacks two images and reveals the 'before' layer through a draggable divider.
An interactive before/after image comparison slider that stacks two images and reveals the 'before' layer through a draggable divider. Built for showcasing project transformations (the demo renders a full garden renovation using inline SVG art).
- clip-path-driven reveal controlled by a single --pos CSS variable
- Unified Pointer Events path handling mouse, touch, and pen with pointer capture
- Fully keyboard-accessible ARIA slider (arrow keys, Shift for larger steps, Home/End)
- Self-contained SVG before/after illustrations so it demos with zero assets
Built with: HTML, CSS clip-path, Vanilla JavaScript, Pointer Events API, Inline SVG, Google Fonts