Dither Grain Overlay

Description 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.

Description 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. Customizations available in Framer 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.

Animated dither & grain, anywhere