Dithering Hover
An image component with a dithering effect that follows your cursor. Move over the image to reveal a pixelated, high-contrast zone with ragged, ink-like edges.
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.
