Upscale revealPro

Low to high resolution behind a scanning loupe band: everything the band has passed is upscaled, everything ahead is still the original, and inside it the gained detail is magnified.

Markdown

On this page

ProA loupe band sweeps across the frame: upscaled behind it, the original ahead, the gained detail inside at 2x.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/upscale-reveal

Usage

tsx

import { UpscaleReveal } from "@/components/ui/chatcn/pro/upscale-reveal"

<UpscaleReveal src={upscaled.url} lowSrc={original.url} alt={image.alt} factor={4} progress={job.progress} />

With progress the band follows the job and the frame is aria-busy with a status chip; without it, one timed pass plays once the image is decoded (duration, play). Without lowSrc the original is drawn from src at a quarter (or half) of the frame size, which is enough for a convincing before. The band travels in the reading direction, so it runs right to left in right to left pages.

For a finished job in history, mount it with status="done" and a progress: the upscaled image shows at once, with no pass.

Examples

States

Progress held mid pass, a soft original, a failed job, the finished image and right to left.

ProProgress held mid pass, a soft original, a failed job and the finished image.

Props

Prop	Type	Notes
`src`	`string`	Required. The upscaled image
`alt`	`string`	Required
`lowSrc`	`string`	The original. Default: `src` drawn down by `factor`
`factor`	`2 \| 4`	Shown on the band chip. Default 4
`sourceWidth`	`number`	Original width in px, for the chip: "1024 to 4096 px"
`status`	`"generating" \| "done" \| "error"`	Default: `done` without `progress`
`progress`	`number \| null`	Real progress. Leave it out for a timed pass
`zoom`	`number`	Loupe magnification inside the band. Default 2
`bandWidth`	`number`	Band width as a fraction of the frame. Default 0.2
`lowStyle`	`"pixelated" \| "soft"`	How the original reads. Default `pixelated`
`duration`, `play`		Timed pass length (default 2400 ms) and whether it runs
`aspectRatio`	`number \| "4:3"`	Default: the image's own ratio
`label`, `showStatus`		Status chip. Default "Upscaling"
`errorMessage`, `onRetry`, `onRevealed`

Keyboard

Key	Action
`Tab`	Reaches Retry in the error state. The frame takes no focus

Accessibility

The upscaled image carries your alt. The original and the loupe are aria-hidden.
With real progress the frame is aria-busy and holds a progressbar whose value text names the sizes, for example 40%, 360 to 720 px. A polite live region announces the end once.
Under forced-colors: active the band hides and the upscaled image shows whole.

Motion

The band moves by transform only, and the upscaled side is revealed with clip-path. Nothing changes layout.
A timed pass eases in and out over 2.4 s. Real progress is eased by the progress driver, so the band never runs backwards.
Under reduced motion a timed pass jumps to the upscaled image.