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
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
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.
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
Related posts
🔥 New addition to my portfolio 🔥
Previously I had an SVG mask of my logo in the center with my showreel behind it, but this had a couple of issues. So yesterday I pushed it further and I created a 3D variation, video playing inside it, glass refraction and it's even more beautiful when you click into it.
Take a look; www.grilledpixels.com
the glass refraction on the 3d mark is a cool touch. did you build the interaction with three.js?
This is how a clean cybersecurity website should look 👌
Our work for Netability.
www.netability.ch
looks great
Team Sections: Professional Only or Professional + Personal?
A team section can build trust in different ways.
Version A - Professional. Focuses on the coaches’ professional experience - their expertise, years of practice, and approach to working with clients.
Version B - Professional + Personal. Keeps this information but adds a Weekend Mode with personal photos, interests, and small stories about life outside work.
For a coaching website, both sides matter: expertise shows competence, while personality helps visitors feel a human connection.
Which version would make you more likely to choose a coach?
22 voted
61%
14 voted
39%
36 votes
Closed
Upgoating version B