Component
Dither Component for Framer
This customizable Framer component, inspired by Brett’s work, lets you apply a dither effect to any image—no code needed. Choose from multiple algorithms, adjust pixel size, glow, and more to get the look you want. Just drop in your image and start tweaking right in Framer.
Created by
About the resource
To use the Dither component, start by adding your image—either upload one or pick from your Framer assets. You can choose from four dithering algorithms (Floyd-Steinberg, Ordered, Random, or Atkinson), each giving a different textured effect. Fine-tune how your image looks by adjusting the threshold, brightness, and midtones to control how light, dark, or detailed the dither appears. You can also set the pixel size for a more crisp or chunky look, and even add a soft glow around the pixels. Customize the colors used for light and dark areas with the background and pixel color options. If you want movement, turn on the animation, tweak its interval and intensity, and preview it directly in the editor. The component also supports rounded corners, and with one click, you can toggle the entire effect on or off to compare with the original image.
About the resource
To use the Dither component, start by adding your image—either upload one or pick from your Framer assets. You can choose from four dithering algorithms (Floyd-Steinberg, Ordered, Random, or Atkinson), each giving a different textured effect. Fine-tune how your image looks by adjusting the threshold, brightness, and midtones to control how light, dark, or detailed the dither appears. You can also set the pixel size for a more crisp or chunky look, and even add a soft glow around the pixels. Customize the colors used for light and dark areas with the background and pixel color options. If you want movement, turn on the animation, tweak its interval and intensity, and preview it directly in the editor. The component also supports rounded corners, and with one click, you can toggle the entire effect on or off to compare with the original image.
About the resource
To use the Dither component, start by adding your image—either upload one or pick from your Framer assets. You can choose from four dithering algorithms (Floyd-Steinberg, Ordered, Random, or Atkinson), each giving a different textured effect. Fine-tune how your image looks by adjusting the threshold, brightness, and midtones to control how light, dark, or detailed the dither appears. You can also set the pixel size for a more crisp or chunky look, and even add a soft glow around the pixels. Customize the colors used for light and dark areas with the background and pixel color options. If you want movement, turn on the animation, tweak its interval and intensity, and preview it directly in the editor. The component also supports rounded corners, and with one click, you can toggle the entire effect on or off to compare with the original image.
The dither component properties in Framer.
The dither component properties in Framer.
The dither component properties in Framer.
