Zoom insetPro

A magnified inset of one region of an image or live UI, joined to it by connector lines. Drag the region to move the zoom.

Markdown

On this page

ProA live chatcn app with its tool calls magnified from a second, sharp copy. Drag the region, click to move it, or use the arrow keys.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/zoom-inset

Usage

tsx

import { ZoomInset } from "@/components/ui/chatcn/pro/zoom-inset"

<ZoomInset
  src="/shots/skyline.webp"
  alt="Midtown from above"
  aspectRatio={16 / 9}
  defaultRegion={{ x: 0.45, y: 0.06, w: 0.11, h: 0.28 }}
  placement="end"
/>

The inset keeps the region's aspect ratio, so the zoom is the same both ways, and it shows the magnification. For live UI the inset is a second, inert copy rendered at the zoom, so text stays sharp instead of enlarging pixels.

The connectors are the two outer tangents of the region and the inset (the edges of the convex hull of their corners that join one to the other), so they never cross either box wherever the inset sits. Lines use the foreground color with a halo in the background color, so they read on a photo and on a UI screenshot in both themes.

Examples

Placement and direction

ProA photo with the inset beside it or in a corner. Auto keeps it clear of the region, and the corners follow the reading direction.

Props

Prop	Type	Notes
`src` / `alt`	`string`	An image
`children`	`ReactNode`	Live UI, laid out at `viewport` (default 1280 x 800)
`aspectRatio`	`number`	Width over height. Set it for images to avoid a shift
`region`	`{ x, y, w, h }`	Fractions of the source. Controlled. `defaultRegion`, `onRegionChange`
`placement`	`"auto" \| "top-start" \| "top-end" \| "bottom-start" \| "bottom-end" \| "end"`	`auto` picks the corner farthest from the region; `end` sits beside the source
`insetSize`	`number`	Inset width as a fraction of the source. Default 0.4
`movable`	`boolean`	Drag, click and arrow keys. Default true
`showZoom`	`boolean`	The magnification label. Default true
`label`	`string`	Names the source in the region's label. Default image

Keyboard

Key	Action
Arrow keys	Move the focused region by 1%
`Shift` + arrows	Move it by 10%

Accessibility

The region is a button named for what it moves, with the keys and the magnification in its description.
The inset and the connectors are decorative copies and hidden from assistive technology.
The magnification label stays left to right in any reading direction.

Motion

The region follows the pointer directly. Nothing animates.