Threshold revealPro
A 1 bit stencil of the image rises out of the paper as its threshold lowers, then tone floods in from the shadows until the image is fully toned, with a CSS filter fallback.
On this page
ProA generation job with uneven steps: a 1 bit stencil rises out of the paper, then tone floods in from the shadows.
Installation
Usage
import { ThresholdReveal } from "@/components/ui/chatcn/pro/threshold-reveal"
<ThresholdReveal src={job.url} alt={job.prompt} progress={job.progress} aspectRatio="4:5" />Both sweeps measure distance from the paper: darkness on a light paper, lightness on a dark one. In light mode shadows print first; in dark mode the lights do, and a night photo arrives light by light. Pass real progress and the reveal follows it through the progress driver, or leave it out for a timer.
Examples
States
ProWaiting, running at 40%, no numbers, held, revealed, a missing file, a timer, and the CSS filter fallback.
Props
| Prop | Type | Notes |
|---|---|---|
src, alt | string | alt is required and announced when revealed |
progress | number | null | Real progress, 0 to 1. null runs with no numbers |
revealed, duration | boolean, number | Timer mode. Default 1600 ms |
softness | number | Edge of the threshold in tone. 0 is a hard 1 bit edge. Default 0.025 |
ink, paper | string | Stencil colors |
contrast | number | Default 1.15 |
renderer | "auto" | "webgl" | "css" | css forces the filter fallback |
onRevealed, onStatusChange | As every reveal |
Accessibility
- The real
<img>keeps the accessible name; a polite live region announces it once revealed, not per step. - Under forced colors the plain image shows at once. Under
prefers-contrast: morethe stencil is hard edged and the photo replaces it whole. - A missing file says how to fix it and offers a reload button.
Motion
- One shader pass per frame, only while the threshold moves and the frame is on screen.
- Under reduced motion it holds the finished stencil, then the photo crossfades in over 200 ms.