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

• 4h

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

Hardik Bhansali

max

• Jun 4

The NoCode Shader is nominated for the prestigious Awwwards product Honors. If you enjoyed the shaders and the library we’d appreciate your vote 🥂 Vote for NoCode Shader here - https://www.awwwards.com/honors/product

Web Design Unicorn Studio WebGL

Suheer Ghazyani

pro

• Jun 5

You nailed in man @Hardik Bhansali

Révolté

pro

• Jun 4

HELDER is live.

A cinematic digital experience built around a simple contradiction:

Chrome, not as technology. Chrome, as landscape.

Warm haze, dry grass, raw linen, terracotta dust, and reflective metal moving through a world that feels discovered rather than designed.

Slow. Material. Atmospheric.

Embrace the Chrome

Lovable Web Design experientialdesign

Sharon Olusanya

• Jun 5

Nice work!

Farook Maya

pro

• Jun 4

🎨 Design Poll: Which direction would you choose?

I've been exploring two distinct creative directions for this apparel landing page and would love to get feedback from fellow designers, founders, and marketers.

🅰️ Option A: — Aesthetic 🅱️ Option B: — Modern Both concepts are designed to appeal to the same audience, but they create very different first impressions.

Curious to hear your thoughts. Cast your vote! 👇

webdesign uiuxdesign aestheticdesign

38 voted

50%

38 voted

50%

76 votes

Closed

Farida Amin

pro

• Jun 4

Interesting comparison.

My vote goes to Option A 🙌. The typography, contrast, and overall composition create a much stronger emotional impact at first glance. It feels more premium and memorable, which is usually what helps a brand stand out in a crowded market. That said,...