LoupePro

A magnifier for inspecting generations at 2x to 8x: follows the pointer, moves with the arrow keys, opens on press and hold, and shows the source pixel grid from 8x.

Markdown

On this page

ProInspect a generation at 2x, 4x or 8x with the pointer, the arrow keys or press and hold.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/loupe

Usage

tsx

import { Loupe } from "@/components/ui/chatcn/pro/loupe"

<Loupe src={image.url} alt={image.prompt} defaultZoom={4} aspectRatio="3:2" />

Zoom is relative to the image as shown. The lens samples the full resolution source, so a 2048 px generation shown at 512 px gains real detail at 4x. Once a source pixel covers 3 screen pixels it stops smoothing, and at 8x it draws a grid on every pixel. It needs no CORS: it draws the image but never reads it.

Examples

Pixel grid

ProA 96 px thumbnail at 8x with a grid on every source pixel.

States

ProLoading, a missing file, a square lens and a small lens.

Props

Prop	Type	Notes
`src`, `alt`	`string`	Announced as "<alt>, magnifier"
`zoom`, `defaultZoom`, `onZoomChange`	`number`	Default 4
`zoomLevels`	`number[]`	Steps for + and -. Default `[2, 4, 8]`
`size`	`number`	Lens diameter in px. Default 176
`shape`	`"circle" \| "square"`	Default `circle`
`gridFrom`	`number`	Zoom where the pixel grid starts. Default 8
`aspectRatio`, `width`, `height`		Frame shape before the image loads
`hint`	`string`	Screen reader instructions

Keyboard

Key	Action
`Tab`	Focus the image; the lens opens in the center
`←` `→` `↑` `↓`	Move the lens 8 px
`Shift` + arrows	Move 40 px
`+`, `-`	Next or previous zoom level
`Esc`	Hide the lens; an arrow key brings it back

Accessibility

The frame is a focusable group with the image's alt and a described hint for the keys.
Zoom changes are announced politely while the lens is open.
On touch, hold for a moment to open the lens above your finger; a quick swipe still scrolls the page.
Hidden under forced colors; the image stays.

Motion

Opening with the pointer scales from 0.96 with a 150 ms fade; closing takes 100 ms. Opening and moving by keyboard is instant.
The lens follows the pointer directly with transforms, never with layout properties.
Under reduced motion only the fade remains.