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.