About Halftone Dot Shader
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.