Before After Card
Drag the handle to wipe between before and after images with absolutely zero lag.
elite micro interactionsbeforeaftercardframer motion
Props
| Prop | Type | Default | Description |
|---|---|---|---|
afterSrc | string | - | Fully revealed after image URL. |
beforeSrc | string | - | Optional before image. When omitted, afterSrc is shown desaturated. |
beforeLabel | string | "Before" | Corner label on the before side. |
afterLabel | string | "After" | Corner label on the after side. |
caption | string | - | Optional line under the frame. |
orientation | "horizontal" | "vertical" | "horizontal" | Wipe axis. |
defaultPosition | number | 50 | Uncontrolled start position, 0–100. |
position | number | - | Controlled position, 0–100. |
onPositionChange | (position: number) => void | - | Fired when the wipe position changes. |
showPercent | boolean | true | Show a live percent near the handle. |
autoDemo | boolean | true | One-shot idle scrub on first mount. |