Inpaint revealPro

Inpainting progress where it happens: only the masked region resolves, through a dither whose tone count climbs or grain that settles, while every pixel outside stays exactly as it was.

Markdown

On this page

ProOnly the lassoed sky resolves through a climbing dither while the mountain stays exactly as it was.

Installation

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

Usage

tsx

import { InpaintReveal } from "@/components/ui/chatcn/pro/inpaint-reveal"

<InpaintReveal
  src={image.url}
  result={edit.url}
  alt={edit.description}
  maskPath={selection.path}
  step={edit.step}
  totalSteps={edit.totalSteps}
/>

Give the region as SVG path data in percent of the frame (maskPath, the default maskViewBox is 0 0 100 100), straight from a lasso or brush tool, or as a white on black maskSrc image cropped like the photo. The seam is feathered. Before the job starts (status="idle") and during the first steps a dashed outline traces the selection.

When the edit lands, composite (on by default) keeps the original outside the mask instead of swapping to result, so drift a model adds outside the selection never shows. Both images need CORS for that; without it the plain result shows.

Examples

States

The selection before the job, dither and denoise mid way, a failed edit, the applied edit and right to left.

ProThe selection before the job, dither and denoise mid way, a failed edit and the applied edit.

Props

Prop	Type	Notes
`src`	`string`	Required. The image being edited
`result`	`string`	The edited image, same size. Setting it finishes the job
`alt`	`string`	Required. Describes the edited image; announced when it is in
`sourceAlt`	`string`	Describes the image before the edit
`maskPath`, `maskViewBox`	`string`	The region as path data. Default view box `0 0 100 100`
`maskSrc`	`string`	Or a mask image, white where the edit goes
`status`	`"idle" \| "generating" \| "done" \| "error"`	Default: `done` with a `result`, otherwise `generating`
`effect`	`"dither" \| "denoise"`	Default `dither`
`step`, `totalSteps`, `progress`	`number`	Real progress, as for the placeholders
`composite`	`boolean`	Keep the original outside the mask. Default true
`cellSize`	`number`	CSS px per cell of the working tones. Default 3
`ink`, `paper`	`string`	Working tones. Default `fg` and `bg` tokens
`aspectRatio`	`number \| "4:3"`	Default: the image's own ratio
`label`, `showStatus`		Status chip. Default "Repainting"
`errorMessage`, `onRetry`, `onRevealed`
`maxPixels`, `renderer`		Backing store cap and `"auto" \| "webgl" \| "2d"`

Keyboard

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

Accessibility

The source image keeps sourceAlt while the job runs; once the edit is applied the edited image carries alt and the source is hidden.
The frame is aria-busy while the job runs, with a progressbar named Repainting the selection. A polite live region says Edit applied: <alt> once.
The error says the image is unchanged and how to continue, with a real Retry button. An image that will not load says so and retries.
Under forced-colors: active the effect hides and the plain images show.

Motion

Dither steps up from 2 to 16 tones on an 8 by 8 Bayer screen as progress rises; denoise grain flickers at 24 fps and settles. The last 14% of progress blends into the real pixels.
Outside the mask nothing moves, ever.
Under reduced motion the grain changes only with progress.