Dithering
Turns any image or video into two colours of little dots, with a lens that follows your cursor and fills the dots back in with the real colours underneath. A retro, 1-bit print look for hero images and video backdrops.
One of 58 GSAP components in React, Vue and HTML.
On mobile
Take the free components with you.
In React, Vue and HTML, in your inbox, ready when you're back at your desk.
How it's built.
The cursor lens was the part that took the work. My first version had it as a clean circle and it looked bad, kinda like a sticker on top of the image. So I made the edge wobble as it moves, and what made it work is the wobble moves in a small circle instead of drifting one way, so the edge shifts in place instead of sliding across. The dark parts also have a small flicker so they don't look flat.
After that it's yours. Point it at any image or video, pick the two colours, make the dots big or small and if you set the background colour to nothing you get just the dots over whatever's behind them. You can also open a soft hole in the middle to keep the centre clear.
What you'll need.
Install
- GSAP
- three
Concepts
Attributes, tips, use cases and full code are part of access.
The preview and provenance stay public. Tune-it docs, the data-anm-* attribute table, real-world use cases and the copy-ready code unlock the moment you sign in.
