Interactive Glass Lens Video Distortion Effect (No Code + WebGL)

In this tutorial, we’re building an interactive video distortion effect in Webflow that transforms your mouse cursor into a virtual glass lens using WebGL and a surprisingly simple setup. As users move across the section, the video bends, stretches, and separates its colors into a beautiful chromatic aberration effect, all while remaining smooth, responsive, and GPU accelerated. And the best part? You don’t need to build the effect from scratch. We’ll simply integrate a ready-to-use code snippet, configure it using a handful of custom attributes, and customize every parameter directly from the Webflow Designer. By the end of the tutorial, you’ll not only have a fully customizable interactive hero section, but you’ll also understand the architectural decisions behind the implementation and why this approach delivers such smooth performance across devices. 👉 Watch on YouTube: https://youtu.be/KrDSPub2Wj0