# <motion-image-compare>

Before/after image comparison slider with a draggable, spring-damped handle.
Slot two children with `slot="before"` and `slot="after"`. Keyboard-accessible:
focus the handle and use arrow keys to nudge the split.

**Use it for:** before and after views of the same scene, such as a photo
edit or a redesign, with two images of the same size.

**Avoid it for:** more than two images, or two images with different
framing. For a set of images, use `motion-gallery` or `motion-slider`.

**Accessibility:** the round knob takes keyboard focus. The arrow keys move
the split by 2% (Left and Right, or Up and Down when
`orientation="vertical"`), and Shift with an arrow key moves it by 10%.
Home and End move it to 0% and 100%. The knob has `role="slider"`, the
label "Image comparison" and a value from 0 to 100, so screen readers
announce it. Write `alt` text that says which image is before and which is
after.

**Reduced motion:** a click or a key press moves the split at once, with
no spring. Dragging follows the pointer directly, as it always does.

**Common mistakes:** leaving the element without a size; both images are
positioned on top of each other, so it has no height of its own. Set a CSS
height or aspect ratio on `motion-image-compare`. On touch screens a swipe
that starts on it moves the split and does not scroll the page, so leave
room around it on phones.

Docs: https://www.motion-components.dev/docs/components/motion-image-compare/

## Install

```js
import 'motion-components/motion-image-compare'
```

Or without a build step:

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/motion-components@1/dist/motion-image-compare.js/+esm"></script>
```

## Example

```html
<motion-image-compare start="50">
  <img slot="before" src="before.jpg" alt="Before" />
  <img slot="after"  src="after.jpg"  alt="After"  />
</motion-image-compare>
```

## Attributes

| Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| `start` | `number` | `50` | Initial split position as a percentage (0–100). |
| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Drag axis. |
| `bounce` | `number` | `0.25` | Spring bounciness of the snap-to-cursor animation. |
| `duration` | `number` | `0.45` | Spring duration of the snap-to-cursor animation, in seconds. |

## Properties

| Property | Type | Description |
| --- | --- | --- |
| `position` | `number` | Split position as a percentage (0–100), where the split is going. Setting it springs the split there without firing `motion-change`; before the first render it sets the position the split starts at. |

## Events

The `motion-*` events bubble and are composed.

| Event | Description |
| --- | --- |
| `motion-change` | When a drag, click or key moves the split. `detail: { position }`, the percentage it moves to. |

## Slots

| Slot | Description |
| --- | --- |
| `before` | The left/top image (visible behind the clip). |
| `after` | The right/bottom image (revealed by dragging). |

## CSS custom properties

| Property | Description |
| --- | --- |
| `--mc-color-accent` | Color of the keyboard focus ring on the knob. |