Free Webflow Component: Interactive WebGL Lens Blur Effect

Free Webflow Component: Interactive WebGL Lens Blur EffectFree Webflow Component: Interactive WebGL Lens Blur Effect

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Back to feedPost

Richard Segura

pro

• Jun 11

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

WebGL Motion Design Webflow Development Web Design three.js Webflow

MD Rafee Alam

• Jun 11

Signed Distance Fields for the stroke interaction is a clever choice. The proximity-based blur expansion feels very natural. Porting Codrops tutorials into reusable Webflow components is genuinely useful for the ecosystem.

Lynksen Digital

pro

• Jun 25

We just introduced Learnr - a sleek mobile app for booking driving lessons.

Smart UX, clean UI. Everything where it should be.

Now waiting on your feedback. Curious to see what you think! 👇

🐕 + 💬 = ❤️

Mobile Design Motion Design UI Design Cinema 4D LottieFiles mobileui Figma mobileappdesign

Nikita Vereshko

pro

• Jun 25

smoooothhh 💯

Denis Kaita

pro

• Jun 25

Very often, clients ask me to create an interactive mascot for their digital product. So, to take part in the #characterchallenge, I created a character who isn’t shy about showing his emotions. I decided to approach this with a sense of humor, so I used the old Addams Family movies as references. Ruby (that’s what I named him) can be happy, sad, or even angry - all controlled via inputs. The concept, character design, and animations - everything was created in Rive. Try it here: https://rive.app/s/Ufd7XrfbNkCKNgJ70U81Bg/?runtime=rive-renderer