About this Component
Turn any image into a living, retro-print artwork. The photo renders as an animated dither that gently waves and ripples, while a soft flashlight follows the cursor, revealing the original colors underneath. Click anywhere to send out an expanding water ripple.
Ships with 9 dither styles (Bayer 2×2 / 4×4 / 8×8, Halftone Dots, Lines, Crosshatch, Blue Noise, Threshold, Posterize) and an optional Duotone mode with 6 curated palettes (Midnight, Noir, Blueprint, Ember, Acid, Orchid) plus fully custom colors and adjustable intensity.
It's built to be lightweight: rendered in raw WebGL (no Three.js), the animation pauses automatically when scrolled out of view to save GPU and battery, and renders a clean static frame for thumbnails and exports.
How to use
Drag Dither Reveal onto the canvas (set it to fill its frame, or stretch it fullscreen).
Pick your image.
Choose a Dither Style and tune the Dot Size.
(Optional) Turn on Duotone and pick a palette — or set your own colors.
Adjust Reveal Size, Softness, and the Wave controls to taste.
Features
Real-time WebGL dither — smooth on any modern device
9 dither styles: ordered Bayer, halftone, lines, crosshatch, blue-noise grain, threshold, posterize
Cursor reveal of the original colors (adjustable size & softness)
Living waves + cursor-following ripple, plus a click ripple burst
Duotone mode: 6 palettes + custom colors with intensity control
Auto-pauses off-screen; static preview for thumbnails & export
Responsive, retina-aware, works at any size or aspect ratio
