Dither & ASCII

Three steps

1. Drop your image. A photo, a logo, a screenshot — or just type a word. It never leaves your browser: it is downscaled and dithered right here.
2. Pick a look. Newspaper, Game Boy, Terminal, Neon, Vaporwave, Blueprint… then fine-tune: the algorithm, the cell size, the palette, the contrast, the animation, and what happens under the pointer — reveal the sharp image, repel the dots, send a ripple.
3. Take it with you. The PNG is free, no account needed. The code ships with a subscription: one block to paste, the engine is inside, nothing to upload next to it.

Put the effect on your site

The block to paste

The Copy the block button puts a complete HTML block in your clipboard: the container, the engine (about 20 KB) and your settings, image included. Paste it wherever you want — a hero, a section, a card — and reload. There is nothing else to install, no file to upload, no library to load.

The standalone page

A single file that works on its own, offline too. To embed it untouched, call it in a frame:

<iframe src="effect-labs-dither.html" style="width:100%;height:420px;border:0"
        title="animated dither" loading="lazy"></iframe>

Editing afterwards

The settings are written in clear at the end of the block: change the palette, the mode or the animation directly in the code, without coming back here.

How it is made

Dithering comes from print: to reproduce a photograph with black ink, you break it into dots whose size or density follows the light. The principle never changed; only the screen did.

Two families live in the tool. Ordered dithering (the Bayer matrix) compares each cell's brightness to a threshold that varies along a fixed pattern — the regular texture of the Game Boy. Error diffusion (Floyd–Steinberg, Atkinson) rounds each cell and pushes the difference onto its neighbours — the organic texture of the first Macintosh. Halftone, lines and ASCII are three ways of drawing the same information.

// Bayer 4 × 4, the heart of it: a different threshold for every cell
const M = [[0,8,2,10],[12,4,14,6],[3,11,1,9],[15,7,13,5]];
for (let y = 0; y < rows; y++) for (let x = 0; x < cols; x++) {
  const threshold = (M[y % 4][x % 4] + 0.5) / 16;   // between 0 and 1
  const light = brightness[y * cols + x] > threshold; // true or false: ink or not
  if (light) ctx.fillRect(x * cell, y * cell, cell, cell);
}

The animation never touches the image: it slides the matrix, makes the brightness breathe or sweeps a light band. Under the pointer, the tool redraws the sharp image inside a circle, or displaces the cells. Everything happens in a 2D canvas — no WebGL, no library.

What works, what doesn't

• Logos and portraits render best: strong contrast, shapes that stay readable even in big dots.
• A very detailed photo needs a small cell (3 to 5 px) and a bit more contrast, or it drowns.
• ASCII mostly reads brightness: on a light image, invert light and dark, or lower the brightness.
• On phones hover becomes touch: the effect follows the finger. Visitors who reduced motion get a still image.

Frequently asked questions

Is the tool free?

The preview, every setting and the PNG export are free, no account needed. Only the code export needs a subscription.

Is my image sent anywhere?

Not while you tweak: everything happens in your browser. It is only transmitted when you export the code, downscaled to 640 px, to be embedded in the block — and it is not kept.

How heavy is the effect on my page?

The engine is about 20 KB, plus your downscaled image — usually 30 to 80 KB in total. Nothing is loaded from a third-party server.

Does it work on WordPress, Webflow or Framer?

Yes: the block pastes into any HTML module. It needs no file next to it.

Can I change the colours afterwards?

Yes. The settings are written in clear at the end of the delivered block.

See also: animated backgrounds, text effects and the other generators.