Dithering Hover

Dithered Hover applies a classic Bayer-matrix ordered dithering effect to images, triggered by cursor movement.

The effect renders in real time on a canvas element, sampling the image's pixel data and converting it to a high-contrast black-and-white dot pattern within a circular zone.

The zone edges are intentionally ragged - radial streaks extend outward from the core with randomized gaps and fade.

Features:

• Customize image - any image from your assets;

• Zone size - diameter of the dithered area (60–500px);

• Dot size - size of each pixel block (1–16px).

Usage tips:

• Works best on high-contrast photography;

• Smaller dot sizes (2–4px) feel editorial; larger (8–16px) feel graphic and bold.