About this Component
Turn any image into a striking retro-dithered visual — rendered live on the GPU, no pre-processed exports or heavy video files needed. Image Dither brings a classic halftone/dithering look to Framer, giving your site that gritty, print-inspired texture on demand.
Features
4 dithering patterns — Random, 2x2, 4x4, and 8x8 grid modes
Original Colors — sample colors straight from your source image, or override with custom ones
3-point color system — Background, Foreground, and Highlight colors for full control over the palette
Color Steps — dial the number of color bands from a hard 2-tone look up to a richer multicolor gradient
Grid Size — scale the dithering pattern from fine grain to bold, chunky pixels
Built in Paper style, running on a lightweight, zero-dependency shader engine for smooth performance
Controls
Image – Upload or link the source image
Dithering Type – Random / 2x2 / 4x4 / 8x8
Original Colors – Toggle to sample from the image or use custom colors
Background Color – Sets the base color
Foreground Color – Sets the primary dither color
Highlight Color – Sets the secondary dither color (match it to Foreground for classic 2-color dithering)
Size – Adjusts the pixel size of the dithering grid
Color Steps – Number of color bands (1–7)
Scale / Rotation / Offset – Fine-tune the position and zoom of the effect
How to use
Add the Image Dither component onto your canvas
Upload the image you want to apply the effect to
Toggle Original Colors on for a natural palette, or off to set your own Background, Foreground, and Highlight colors
Adjust Dithering Type, Size, and Color Steps from the properties panel until you get the look you want
Shader powered by Paper Shaders.
