↔️ BeforeAfter Component
Create interactive before/after comparisons with a draggable divider. Perfect for showcasing product improvements, image editing results, design iterations, and quality comparisons. Built with CSS clip-path for smooth GPU-accelerated reveals and zero external dependencies.
Basic Image Comparison
Simple before/after with two images. Drag the divider or use arrow keys to compare. Default 16:9 aspect ratio with center-positioned divider.
<BeforeAfter
beforeImage="https://example.com/before.jpg"
afterImage="https://example.com/after.jpg"
/>Labeled Comparison
Images with "Before" and "After" labels. Custom divider styling with thicker line and larger handle for better mobile interaction.
<BeforeAfter
beforeImage="https://example.com/before.jpg"
afterImage="https://example.com/after.jpg"
beforeLabel="Before"
afterLabel="After"
dividerWidth={3}
handleSize={56}
/>Initial Position Preset
Divider starts at 25% (mostly showing "after"). Useful for highlighting improvements. onChange callback tracks current position: 50%
<BeforeAfter
beforeImage="https://example.com/before.jpg"
afterImage="https://example.com/after.jpg"
beforeLabel="Original"
afterLabel="Enhanced"
aspectRatio="1/1"
initialPosition={25}
onChange={(pos) => console.log('Position:', pos)}
/>Styled Variant
Custom colours for divider and handle. Square aspect ratio perfect for product photos. Demonstrates full customisation capabilities.
<BeforeAfter
beforeImage="https://example.com/before.jpg"
afterImage="https://example.com/after.jpg"
beforeLabel="Low Quality"
afterLabel="High Quality"
aspectRatio="1/1"
dividerColor="#3b82f6"
dividerWidth={4}
handleColor="#3b82f6"
handleSize={60}
/>Key Features
CSS-Based Clipping
GPU-accelerated clip-path for smooth image reveals. No Canvas manipulation required.
Unified Input
Pointer Events API handles mouse, touch, and pen input seamlessly.
Keyboard Navigation
Arrow keys for precise control. Full ARIA labels for screen readers.
Customisable
Aspect ratio, divider styling, labels, and handle size all configurable.
Responsive
Works perfectly on mobile with touch support. Adapts to viewport size.
Zero Dependencies
Pure CSS and Svelte. No external libraries. Copy-paste ready.
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
beforeImage | string | required | URL for before image |
afterImage | string | required | URL for after image |
beforeAlt | string | 'Before' | Alt text for before image |
afterAlt | string | 'After' | Alt text for after image |
beforeLabel | string | - | Optional label shown on before side |
afterLabel | string | - | Optional label shown on after side |
aspectRatio | string | '16/9' | CSS aspect ratio (e.g., '1/1', '4/3') |
width | number | string | '100%' | Container width (px or %) |
initialPosition | number | 50 | Initial divider position (0-100) |
disabled | boolean | false | Disable dragging interaction |
dividerColor | string | '#ffffff' | Divider line colour (hex) |
dividerWidth | number | 2 | Divider line width in pixels |
handleSize | number | 48 | Handle circle size in pixels |
handleColor | string | '#ffffff' | Handle background colour (hex) |
onChange | (pos: number) => void | - | Callback fired when position changes |
class | string | '' | Additional CSS classes |
Use Cases
🛠️ Product Improvements
Show product evolution by comparing old vs. new versions. Perfect for highlighting upgrades and improvements.
🎨 Image Editing
Demonstrate before/after photo editing or filter effects. Showcase your editing skills or filter presets.
💎 Design Iterations
Compare design versions to visualize changes. Great for presenting redesigns to clients or stakeholders.
⚖️ Quality Comparisons
Show differences between standard vs. premium versions, compression levels, or quality tiers.
🔬 A/B Testing
Visual comparison of variants for marketing campaigns, landing pages, or UI changes.
🏡 Real Estate
Renovation before/after photos. Perfect for showcasing property transformations and improvements.
Technical Implementation
CSS Clip-Path
Uses CSS clip-path: inset() for GPU-accelerated clipping. No Canvas
manipulation required for smooth 60fps performance.
Pointer Events API
Unified handling for mouse, touch, and pen input. Pointer capture ensures smooth dragging even when cursor leaves element.
Svelte 5 Runes
Uses $state() and $derived() for reactive state management.
Automatic reactivity with minimal boilerplate.
Accessibility
Full keyboard support with arrow keys. ARIA roles, labels, and live regions for screen readers. Respects reduced motion preferences.