Effects gallery

Every algorithm, palette, and pixel-size setting ditherkit ships, rendered on a single source image via @ditherkit/next. This page is generated server-side and cached by ISR — the same pipeline your production app would use.

Play with it →Read the algorithm docs →

§ 1

Seven algorithms

Same image, same black-and-white palette. The differences are purely in how each algorithm decides where to place the dots.

Floyd-Steinberg dithering of the sample image — Floyd-Steinberg
Classic error diffusion. The default for photographs — sharp detail, smooth gradients.

Atkinson dithering of the sample image — Atkinson
Early-Mac look. Only diffuses 6/8 of the error, so shadows darken and highlights blow out.

Jarvis-Judice-Ninke dithering of the sample image — Jarvis-Judice-Ninke
A wider kernel than Floyd-Steinberg. Smoother gradients, slightly softer edges.

Stucki dithering of the sample image — Stucki
JJN-shaped, tuned weights. Sharper midtones; often the best-looking error diffusion on portraits.

Burkes dithering of the sample image — Burkes
Stucki with the bottom row removed — about twice as fast for very similar output.

Bayer dithering of the sample image — Bayer
Ordered dithering. Deterministic per pixel, tiles cleanly, gives the crosshatched printer/Game Boy look.

Threshold dithering of the sample image — Threshold
1-bit hard cut. No diffusion, no noise — great for stamps and stencils, bands badly on photos.

…and in colour

The same seven algorithms rendered through palettes.gameboy. Every algorithm in the library is colour-capable — pick a palette with 3+ entries and the nearest-colour lookup preserves hue, not just luminance.

Floyd-Steinberg dithering of the sample image on the Game Boy palette — Floyd-Steinberg

Atkinson dithering of the sample image on the Game Boy palette — Atkinson

Jarvis-Judice-Ninke dithering of the sample image on the Game Boy palette — Jarvis-Judice-Ninke

Stucki dithering of the sample image on the Game Boy palette — Stucki

Burkes dithering of the sample image on the Game Boy palette — Burkes

Bayer dithering of the sample image on the Game Boy palette — Bayer

Threshold dithering of the sample image on the Game Boy palette — Threshold

§ 2

Five built-in palettes

Same image, Floyd-Steinberg throughout. Only the palette changes. import { palettes } from '@ditherkit/core' gets you these as ready-to-use Color[] values.

Sample image rendered with the Black & white palette — Black & white
The classic 1-bit target. Two entries — use it for print, stamps, or anything Macintosh-era.
`palettes.bw`

Sample image rendered with the Game Boy palette — Game Boy
Four shades of the original DMG LCD. Ordered dark → light.
`palettes.gameboy`

Sample image rendered with the CGA mode 4 palette — CGA mode 4
High-intensity blue/magenta/cyan. 1980s PC games looked like this whether they wanted to or not.
`palettes.cga`

Sample image rendered with the NES (curated) palette — NES (curated)
A perceptually-spaced subset of the 54-colour NES hardware palette.
`palettes.nes`

Sample image rendered with the PICO-8 palette — PICO-8
The fantasy console's 16-colour palette — bright, balanced, friendly to photos.
`palettes.pico8`

§ 3

Pixel size

Floyd-Steinberg on the black-and-white palette. The pixelSize prop downsamples before dithering and upscales the result with nearest-neighbour, so the dither pattern stays crisp at the display resolution.