Interlace revealPro

The image arrives like a progressive PNG: Adam7 passes, or every 8th, 4th and 2nd line, each pass filling top to bottom.

Markdown

On this page

ProSeven Adam7 passes or every 8th, 4th and 2nd line, each filling top to bottom.

Installation

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

Usage

tsx

import { InterlaceReveal } from "@/components/ui/chatcn/pro/interlace-reveal"

<InterlaceReveal src={image.url} alt={image.prompt} pattern="adam7" progress={download.progress} />

Every pixel copies the top left pixel of its block until a finer pass arrives, exactly how a progressive decoder fills the gaps. pixelSize sets how many CSS px one image pixel covers, so the passes stay visible on dense screens.

Examples

States

Waiting for the image, running at 40%, running with no numbers, held by revealed={false}, revealed, a missing file, a timer and right to left.

ProEvery state of the interlace reveal.

Props

Prop	Type	Notes
`src`, `alt`	`string`	`alt` is required: the accessible name, announced once the image is in
`progress`	`number \| null`	Real job progress, 0 to 1. `null` means running with no numbers. Leave it out for timer mode
`revealed`	`boolean`	Timer mode: `false` holds the first frame, `true` plays once the image loads. Default `true`
`duration`	`number`	Timer length in ms. Default 2000
`onRevealed`	`() => void`	Once per image, when the plain image shows
`onStatusChange`	`(status: "loading" \| "ready" \| "revealing" \| "revealed" \| "error") => void`
`aspectRatio`, `width`, `height`		Set the frame before the image loads, so nothing shifts
`paper`	`string`	The ground under the effect. Token or CSS color. Default `var(--chatcn-bg)`
`announcement`	`string \| false`	What the live region says once revealed. Default `Image ready: <alt>`
`errorText`, `retryLabel`		Copy for the error state and its reload button
`pattern`	`"adam7" \| "lines"`	Seven PNG passes, or every 8th, 4th, 2nd and then every line. Default `adam7`
`pixelSize`	`number`	CSS px per image pixel. Default 2
`maxPixels`	`number`	Default 1.5 MP

Keyboard

Key	Action
`Tab`	Reaches the Reload image button in the error state. The reveal itself takes no focus

Accessibility

The effect layer is aria-hidden. The real <img> with your alt is always there, and the frame is aria-busy until the reveal ends.
A polite live region says Image ready: <alt> once, when the plain image shows. Progress ticks are never announced.
Under forced-colors: active the effect hides and the plain image shows with system colors.
A broken file shows what happened and a Reload image button that retries the download.

Motion

Each pass fills top to bottom over an equal share of 88% of the run; a short resolve to full resolution closes it.
Under reduced motion one still frame holds while the job runs, then the image crossfades in over 200 ms. Nothing moves.
The timer only runs on screen in a visible tab; offscreen it waits where it was.