Color Dithering
Ordered colour dithering with palettes, blue noise and coloured dots on transparent paper.
JPEG, PNG, or WebP. Your image stays in this browser.
Customize
API reference
The component dithers an image on a WebGL2 canvas in linear light: every cell is averaged from the source, quantised to display tones or a palette, and the choice between the two nearest tones follows the threshold pattern, so mixed areas average to the tone they stand in for. It renders once per change.
| Prop | Type | Default | Description |
|---|---|---|---|
image | string | required | A project image URL, data URL, or local blob URL. Remote servers must allow anonymous CORS image loading. |
width / height | number | string | "100%" | CSS dimensions. Give the parent an explicit height. |
className / style | string / CSSProperties | — | Styles the outer container. |
fit | "cover" | "contain" | "cover" | Fits and centers the image within the container. |
scale | number | 1 | Image zoom around the centre. The playground provides a range of 0.1–4. |
algorithm | "bayer-2x2" | "bayer-4x4" | "bayer-8x8" | "blue-noise" | "white-noise" | "bayer-4x4" | The threshold pattern. Bayer matrices give the classic regular screen; blue noise (void-and-cluster, three independent 64×64 maps) is even and free of patterns; white noise is grainy. |
pixelSize | number | 2 | Cell size in CSS pixels, 1–24. Cells are aligned to whole device pixels. |
spread | number | 0.5 | Dither strength, 0–1: 0 posterizes, 1 is full ordered dithering. |
levels | number | 4 | Tones per RGB channel, 2–16, when no palette is set. |
colors | string[] | [] | Up to 16 palette colours. Each pixel is dithered between its two nearest palette colours in Oklab; an empty list keeps the source colours. |
chromaticSplit | boolean | false | Offsets the threshold pattern per channel to produce coloured dots. Ignored with a palette. |
dotScale | number | 1 | Dot coverage inside each cell, 0.1–1. Below 1, paper shows between the dots. |
paperColor | string | "#000000" | Colour of the paper between dots. |
paperOpacity | number | 0 | Paper opacity, 0–1. At 0 the gaps are transparent and show what sits behind the canvas. |
brightness / contrast / saturation | number | 0 / 1 / 1 | Adjustments applied before dithering. |
onError | (error: Error) => void | — | Reports a missing WebGL2 context or an image-loading failure. The component hides the failed canvas and supplies no replacement image. |
Newsprint is the print look from the Vivid Layer footer: a fine coloured screen with paper between the dots. Chromatic keeps the source colours with split RGB dots, Blue Noise the same tones without a visible pattern. Risograph and Game Boy are palette presets; swap in your own colours.
Credits
The default photograph is Jeremy Bishop's Monument Valley, used under the Unsplash License.