DESCRIPTION
Webflow's late 2025 site redesign & rebuild features a custom fluted glass shader running across hero sections, backgrounds, feature blocks, and the navbar. Built as a reusable component that designers can configure without code. I was brought in by N4 Studio as a creative dev specialist to build a shader performant enough to run multiple instances simultaneously. Designed by Metalab, developed by N4 Studio.
MY ROLE
Developed the WebGL shader and built it as a Webflow-native component. Handled the full pipeline: shader math, Three.js setup, performance optimization, Webflow integration, and Safari compatibility. Also built custom GSAP animations and a slider that interacts with the shader. Worked alongside N4's dev team, led by Nikola Djurišić, on integration and final delivery.
CONCLUSION
Built and delivered the shader system within N4's 11-week sprint to launch Webflow's most ambitious site to date.
Built with N4 Studio - check out their work at n4.studio and read the full case study here
Thanks to Corey Moen who led the project from Webflow's side, and Nikola Djurišić for bringing me onto the team.
MeTHOD
The shader is fully configurable via data attributes for colors, shapes, columns, distortion, hover parallax. Menaing that the designers and devs can tweak everything in Webflow's UI without touching the code. CSS variables are parsed with fallback support, respecting the site's design tokens.
Performance was critical since the shader runs in multiple instances simultaneously. Built a render budget system that caps frame time, lazy initialization via IntersectionObserver, hardware detection for mobile degradation, and resolution scaling. Safari required a manual blur fallback, handled with an in-shader blur loop.
Built for speed: in stress testing, 13 instances running simultaneously in different configurations (with/without background images, blur variations) hit 100 Lighthouse performance. Ships at 60fps on desktop, gracefully degrades on low-end devices, and respects prefers-reduced-motion.
View more
Baked Graphics
