Turn any photo into a living, interactive piece of design. On hover, your image crossfades into a halftone dot-art rendition — the same technique used in editorial print design and concert posters — rendered in real time directly in the browser.
What makes it different from a CSS filter: Most hover effects simply darken or blur the image. HalftoneHover actually reads each pixel's brightness and draws a proportionally sized dot in its place. Bright areas produce large dots; shadow areas produce finer ones. Facial contours and texture survive the transformation because shadows are never allowed to disappear completely — a technique called luminance lifting.
What you get:
Drop-in Framer code component, no custom code on your end
Connect any image via Framer's native image picker — drag and drop
Fully responsive — fills whatever frame you place it in
6 visual controls in the properties panel: dot spacing, dot color, background color, minimum dot size, fade duration, and corner radius
Smooth opacity crossfade on hover and mouse leave
Instant rendering — image is downsampled before processing so there is no visible delay
Turn any photo into a living, interactive piece of design. On hover, your image crossfades into a halftone dot-art rendition — the same technique used in editorial print design and concert posters — rendered in real time directly in the browser.
What makes it different from a CSS filter: Most hover effects simply darken or blur the image. HalftoneHover actually reads each pixel's brightness and draws a proportionally sized dot in its place. Bright areas produce large dots; shadow areas produce finer ones. Facial contours and texture survive the transformation because shadows are never allowed to disappear completely — a technique called luminance lifting.
What you get:
Drop-in Framer code component, no custom code on your end
Connect any image via Framer's native image picker — drag and drop
Fully responsive — fills whatever frame you place it in
6 visual controls in the properties panel: dot spacing, dot color, background color, minimum dot size, fade duration, and corner radius
Smooth opacity crossfade on hover and mouse leave
Instant rendering — image is downsampled before processing so there is no visible delay
