Dither Grain Overlay is a WebGL2 shader component that generates an animated dithered grain or halftone texture and lays it over (or behind) any section of a site. Most shader backgrounds on the Framer marketplace are locked to one look and one placement — a hero, a full-page fill. This one is built as a general-purpose texture layer: drop it on a card, a footer, a full section, or the whole page, and it adapts to whatever sits beneath it because it can render as a transparent overlay or an opaque background.
It solves the "every shader site looks the same" problem by giving four distinct dithering algorithms (Bayer ordered dither, fine noise grain, blue-noise-style grain, and halftone dots), each with independently tunable density, animation speed, distortion, and color, so two sites using this component rarely look alike.
Pattern — switches between Bayer Dither, Noise Grain, Blue Noise, and Halftone Dots algorithms.
Layer Mode — Overlay (transparent, stacks on top of other layers) or Background (opaque fill).
Intensity — overall strength/density of the dither or grain.
Scale — size of the pattern cells, from fine grain to chunky dots.
Speed — animation speed; 0 fully freezes the effect and stops the render loop.
Distortion — amount of animated warp applied to the pattern field.
Color Mode — Monochrome or Duotone.
Color A — primary color, and the static-render fallback fill.
Color B — secondary color for Duotone blending and the fallback gradient (hidden unless Duotone is selected).
Opacity — overall layer opacity.
Blend Mode — CSS blend mode (normal, multiply, screen, overlay, soft-light, difference) against whatever sits beneath it.
Pause Offscreen — stops rendering when scrolled out of view, for performance.
Dither Grain Overlay is a WebGL2 shader component that generates an animated dithered grain or halftone texture and lays it over (or behind) any section of a site. Most shader backgrounds on the Framer marketplace are locked to one look and one placement — a hero, a full-page fill. This one is built as a general-purpose texture layer: drop it on a card, a footer, a full section, or the whole page, and it adapts to whatever sits beneath it because it can render as a transparent overlay or an opaque background.
It solves the "every shader site looks the same" problem by giving four distinct dithering algorithms (Bayer ordered dither, fine noise grain, blue-noise-style grain, and halftone dots), each with independently tunable density, animation speed, distortion, and color, so two sites using this component rarely look alike.
Pattern — switches between Bayer Dither, Noise Grain, Blue Noise, and Halftone Dots algorithms.
Layer Mode — Overlay (transparent, stacks on top of other layers) or Background (opaque fill).
Intensity — overall strength/density of the dither or grain.
Scale — size of the pattern cells, from fine grain to chunky dots.
Speed — animation speed; 0 fully freezes the effect and stops the render loop.
Distortion — amount of animated warp applied to the pattern field.
Color Mode — Monochrome or Duotone.
Color A — primary color, and the static-render fallback fill.
Color B — secondary color for Duotone blending and the fallback gradient (hidden unless Duotone is selected).
Opacity — overall layer opacity.
Blend Mode — CSS blend mode (normal, multiply, screen, overlay, soft-light, difference) against whatever sits beneath it.
Pause Offscreen — stops rendering when scrolled out of view, for performance.
Artem Kireev
