Just published a free Webflow component — a WebGL lens blur effect built with Three.js and GLSL Signed Distance Fields, ported from a Codrops tutorial by Guillaume Lanier.
A circle stroke reacts to mouse proximity — the blur expands and the stroke thickens as the cursor passes over the edge. A subtle heartbeat animation pulses the radius continuously. The interior displays a customizable image loaded directly from a Webflow Image element, no code required to swap it.
Free to use in any Webflow project.
webflow.com/made-in-webflow/website/lens-blur (https://webflow.com/made-in-webflow/website/lens-blur)
1
1
284
