Image Comparison

Installation

pnpm dlx @glinui/cli@latest add image-comparison

Credits. Adapted from Motion Primitives (MIT, (c) 2024 ibelick). motion/react and springs removed (pointer capture and CSS clip-path), slider role with keys, ReactNode slots, tokens, reduced motion, RTL Attribution details.

Prefer the package? npm install @glinui/ui @glinui/motion @glinui/tokens

Usage

The layers are any ReactNode, so you can compare images, screenshots, UI states or whole themes.

<ImageComparison orientation="vertical" before={a} after={b} />
<ImageComparison hover before={a} after={b} />

<ImageComparison orientation="vertical" before={a} after={b} />
<ImageComparison hover before={a} after={b} />

<ImageComparison beforeLabel="Light" afterLabel="Dark" before={light} after={dark} />

<ImageComparison beforeLabel="Light" afterLabel="Dark" before={light} after={dark} />

<section aria-labelledby="redesign">
  <h3 id="redesign">See the redesign</h3>
  <ImageComparison before={a} after={b} />

<section aria-labelledby="redesign">
  <h3 id="redesign">See the redesign</h3>
  <ImageComparison before={a} after={b} />
</section>

Accessibility

• The handle is role slider with aria-valuenow, aria-valuetext, aria-orientation and an accessible name.
• Everything a pointer can do works from the keyboard: arrows, Page keys, Home and End.
• touch-action is pan-y (pan-x when vertical) so a horizontal drag moves the handle while the page still scrolls the other way.
• Both layers are named groups, so their content stays readable.

Reduced Motion

The short clip-path glide on keyboard moves only runs at motion level full. Dragging is always immediate.

API Reference

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

import { ImageComparison } from "@glinui/ui"