Comparison Lens
ProInspect an aligned image through a movable lens. Pin the view, blend layers, or inspect an application-supplied difference image.
Lens: The same lake with its color graded.
View
pnpm dlx shadcn@latest add @latheui/comparison-lensPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Comparison Lens is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
- lathe/button
- lathe/select
- lathe/slider
- lathe/interaction-math
- lathe/use-controllable-state
- lathe/use-touch-hold
API reference
ComparisonLens
| Prop | Type | Default | Description |
|---|---|---|---|
| before / after* (required) | { src: string; alt: string } | — | Aligned images with matching dimensions. Their descriptions identify the original and the lens layer. |
| difference | { src: string; alt: string } | — | Optional precomputed difference image. Lathe does not calculate pixel differences. |
| value / defaultValue | { x: number; y: number } | { x: 50, y: 50 } (defaultValue) | Controlled or initial position in percentages. Values are clamped to the image. |
| onValueChange | (position: LensPosition) => void | — | Receives pointer and slider position changes. |
| disabled | boolean | false | Disable pointer tracking and controls. |
| controls | boolean | true | Show the caption, sliders, pin button and view picker. Turn off for just the image and its lens. |
| defaultRadius | number | 80 | Starting lens radius in pixels. |
| className | string | — | Classes for the outer wrapper. |
Keyboard
- Arrow keys
- Move the focused horizontal, vertical or lens-size slider.
- Tab
- Move through the enabled controls. Focus remains visible.
Accessibility
- Lathe controls expose accessible names, states and keyboard behavior. Layouts wrap at narrow widths and use semantic theme tokens.
- Pointer tracking is optional: position and size are also keyboard-accessible Lathe sliders. The lens image is decorative; its description is exposed in text.
Motion
- Selection and direct manipulation do not require animated movement.
Customization
Connect your own data
Use the typed props to connect application state. The source is installed into your project.
"use client"
import { ComparisonLens } from "@/components/ui/comparison-lens"
export default function LensDemo() {
return <ComparisonLens className="max-w-lg" before={{ src: "/demo/photos/compare-flat.webp", alt: "An autumn lake before color grading" }} after={{ src: "/demo/photos/compare-graded.webp", alt: "The same lake with its color graded" }} />
}