Dither Gradient
A gradient rendered with ordered Bayer dithering in two or three token colours, slowly shifting, with pixel size options.
Preview
Zine · issue 07
Small press, printed slowly, read twice
Dusk · 8 × 8 · 4 px
Night edition
Mono · 4 × 4 · 7 px
Chunky print
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| preset | "ember" | "dusk" | "mono" | "ember" | Colour set of 2 or 3 token colours. |
| colors | string[] | — | 2 or 3 CSS colours, from the low to the high end of the gradient. |
| pixelSize | number | 4 | Size of one dither pixel in CSS px. |
| angle | number | 35 | Gradient direction in degrees (0 = left to right). |
| matrix | 4 | 8 | 8 | Bayer matrix: 4 x 4 (chunky) or 8 x 8 (smoother). |
| speed | number | 1 | Speed of the slow shift. 0 holds still. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.