# ImageCompare

Reveal two versions with a divider that follows your hand.

- Family: Interaction, imported from `mizu-ui` or `mizu-ui/interaction`
- Docs: https://mizu.user64bit.world/components/image-compare
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/interaction/ImageCompare.tsx

## Usage

```tsx
"use client";

import { useState } from "react";
import { ImageCompare } from "mizu-ui";

export function Example() {
  const field = (ground: string, mark: string) =>
    `data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="720" height="360"><pattern id="d" width="36" height="36" patternUnits="userSpaceOnUse"><path d="M18 13l5 5-5 5-5-5z" fill="${mark}"/></pattern><rect width="720" height="360" fill="${ground}"/><rect width="720" height="360" fill="url(#d)"/></svg>`)}`;
  const [value, setValue] = useState(50);
  return (
    <ImageCompare
      label="Surface study"
      before={{
        src: field("#141413", "#7e776b"),
        alt: "Ink surface with muted diamonds",
      }}
      after={{
        src: field("#f4f0e8", "#93877a"),
        alt: "Paper surface with warm diamonds",
      }}
      value={value}
      onValueChange={setValue}
      beforeLabel="Ink"
      afterLabel="Paper"
    />
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/image-compare
```

## Props

- `before / after`: `{src: string; alt: string}`. Images with matching composition and dimensions.
- `value / onValueChange`: `number / function`. Controlled reveal percentage, 0–100.
- `label / beforeLabel / afterLabel`: `string`. Figure and version names.

## Accessibility

Pointer capture enables direct dragging; a labelled native range gives keyboard and touch control. Both images retain descriptions. Load failure disables the reveal with an explained state.

## Motion

Direct clipping with no decorative loop.