Pro
Reveal lens
Two layers in one frame and a round lens that shows the second through the first. The lens trails the pointer on a spring, opens wider while pressed and closes when the pointer leaves.
pnpm dlx shadcn@latest add @caliper/reveal-lensPrint and photograph
Move over the print, or press to widen the lens.
When to use
Use it for
- Before and after, sketch and finish, wireframe and screen, print and photograph.
- Explaining what a filter, model or edit changed.
Skip it when
- Comparisons people need to measure; use the image compare slider.
- Layers that differ in size or framing.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Opens where it is aimed
- A closed lens appears at the pointer instead of sliding in from where it last was.
- Keyboard lens
- Focus opens the lens in the middle and arrow keys move it; both layers are real content and both are read.
Installation
pnpm dlx shadcn@latest add @caliper/reveal-lens
Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage
Import it from your copy of the source. The example behind the preview comes with the source.
import { RevealLens } from "@/components/ui/reveal-lens"
The worked example comes with Pro
The 26-line example behind the preview opens here, ready to copy.
- 576 Pro parts, blocks and page templates, all with source
- $199 once, with a year of updates. What you have stays yours
- A full refund within 14 days if it is not for you
API reference
RevealLens
component
Also accepts the native props of its root element and a ref.
Accessibility
It exposes group semantics, with aria-label and aria-hidden kept in step with state.
No custom key handling; Tab and the native activation keys do the work.
Motion
It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.
Related
- Image compareTwo images stacked with a draggable divider.
- Zoom lensA magnifier that follows the pointer, a finger or the arrow keys over an image to show detail.
- Ink spoilerText kept under a fine drifting ink until it is asked for. Press it and the ink blows outward from where you pressed while the words come through; press again to cover them.