Denoise revealPro

The honest picture of diffusion: gray noise mixed into the image by 1 - t, a blur that falls as t rises, and color that settles last.

Markdown

On this page

ProNoise falls and detail rises with each reported diffusion step.

Installation

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

Usage

tsx

import { DenoiseReveal } from "@/components/ui/chatcn/pro/denoise-reveal"

<DenoiseReveal src={job.previewUrl} alt={job.prompt} progress={job.step / job.steps} steps={job.steps} />

The noise reseeds once per diffusion step, so it changes when your job does, not on a clock. Match steps to your sampler. Noise tones mix between ink and paper, so it stays monochrome in both themes; the image itself is untouched at the end.

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 denoise 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 2400
`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
`steps`	`number`	Diffusion steps; the noise reseeds once per step. Default 30
`grain`	`number`	CSS px per noise grain. Default 1
`blur`	`number`	Widest blur at the start, in CSS px. Default 24
`ink`	`string`	Noise tones mix between ink and paper. Default `var(--chatcn-fg)`
`maxPixels`, `renderer`		As in Dither reveal

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

Noise weight falls as (1 - t) to the power 1.6, blur as (1 - t) squared, and saturation arrives between 25% and 90% of the run. No blur radius is animated in CSS; it is a shader mip level.
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.