Any image drawn in a few colors with a dither, that dissolves in pixel by pixel and shows the original under a lens.
pnpm dlx shadcn@latest add @latheui/dither-imagePart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Dither Image is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
Also accepts native canvas attributes. The width follows the container; the height follows the image.
| Prop | Type | Default | Description |
|---|---|---|---|
| src* (required) | string | — | The image. Same-origin or served with CORS headers, so its pixels can be read. |
| alt* (required) | string | — | Describes the image. |
| palette | string[] | background and foreground | Colors to draw with, darkest first. Any CSS color, theme variables included. |
| algorithm | "bayer" | "floyd-steinberg" | "atkinson" | "bayer" | An ordered pattern, or error diffusion that spreads each pixel's error to its neighbours. |
| pixelSize | number | 3 | Size of one dither pixel, in CSS pixels. |
| contrast | number | 1 | Multiplies the image's contrast before dithering. |
| brightness | number | 0 | Added to every pixel's lightness, from -1 to 1. |
| reveal | "none" | "dissolve" | "dissolve" | Dissolve brings the image in pixel by pixel, in the dither's own order. |
| revealDuration | number | 1400 | Milliseconds the reveal takes. |
| lens | number | 0 | Radius in px of a lens showing the original under the pointer. 0 is off. |
| replayKey | React.Key | — | Change it to play the reveal again. |
<DitherImage src="/photo.jpg" alt="Portrait" palette={["#0f380f", "#306230", "#8bac0f", "#9bbc0f"]} algorithm="atkinson" pixelSize={4} /><DitherImage src="/photo.jpg" alt="Portrait" reveal="none" palette={["var(--muted)", "var(--chart-1)"]} />