Halftone Dot Shader

Halftone shading for any image.

Customizations available in Framer Source — switch between a built-in animated gradient and your own image as the input the halftone reads luminance from. Image — the image to run the effect over (only shown when Source is set to Image). Ink (dark) — dot color used for the darkest areas of the source. Ink (light) — dot color used for lighter areas; blended with Ink (dark) across the luminance range. Background — the color behind the dots. Shape — dot grid mark: Circle, Square, or Line screen. Density — grid cell size in pixels; lower values pack the dots tighter. Angle — rotation of the dot grid, in degrees. Contrast — pushes source luminance toward pure black/white before it drives dot size, for punchier or softer results. Animate — toggles the gentle time-based drift on or off (also automatically respects the visitor's OS-level reduced-motion setting). Speed — playback speed of the animation (shown only when Animate is on). Wave amount — how much the source and grid ripple/drift over time (shown only when Animate is on). Mouse reactive — toggles a soft cursor-follow highlight in the pattern. Mouse strength — intensity of the cursor highlight (shown only when Mouse reactive is on). Use cases A portfolio or agency site hero section that turns a plain brand-color gradient into a textured, print-inspired backdrop instead of a flat fill. A photography or editorial site that runs a hero or case-study image through the effect for a stylized, art-directed treatment rather than showing the raw photo. A product landing page section background that stays subtly alive (slow drift, cursor reaction) without competing with foreground text, using low Density/Wave/Contrast settings for a quiet effect.

Halftone shading for any image.