Color Dithering
Colorful image dithering with adjustable RGB channel separation.
JPEG, PNG, or WebP. Your image stays in this browser.
Customize
Pixel Size
2
Spread
0.3
Levels
5
Dot Scale
0.95
Scale
1
API reference
The component applies Shader Lab's source-color Dithering effect to an image. It does not animate or add a text overlay.
| 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 image container. |
fit | "cover" | "contain" | "cover" | Fits and centers the image within the container. |
scale | number | 1 | Image zoom. The playground provides a range of 0.1–4. |
onError | (error: Error) => void | — | Reports initialization or image-loading failure. The component hides the failed canvas and supplies no replacement image. |
algorithm | "bayer-2x2" | "bayer-4x4" | "bayer-8x8" | "noise" | "bayer-4x4" | Ordered matrix or noise pattern. |
pixelSize | number | 2 | Logical pixel size, 1–24. |
spread | number | 0.3 | Dithering strength, 0–1. |
levels | number | 5 | Quantization levels per RGB channel, 2–16. |
dotScale | number | 0.95 | Dot coverage inside each cell, 0.1–1. |
chromaticSplit | boolean | true | Offsets the RGB threshold patterns to create colored dots. |
Chromatic is the Vivid Layer configuration used in the reviewed sample. Classic uses the upstream Dithering defaults. Both retain the source image colors; these are not limited custom palettes.
Credits
Rendering uses the unmodified Shader Lab 3.0.2 runtime by basement.studio, licensed under Apache-2.0. Vivid Layer's adapter and examples use the Vivid Layer Community License; the upstream implementation retains its own license.
The default photograph is Jeremy Bishop's Monument Valley, used under the Unsplash License.