Hello my gorgeous friends of Webflow! 👋
I’ve just published a new tutorial showing how to build an interactive WebGL-powered video distortion effect in Webflow.
The idea is simple:
As your mouse moves across the hero section, it becomes a virtual glass lens that bends the video beneath it while creating a subtle chromatic aberration effect.
The implementation is intentionally straightforward.
After adding a canvas element to your layout, you simply drop in the provided code snippet, configure a few custom attributes, and fine-tune the effect through a built-in control panel before switching to production mode.
Behind the scenes, the code also includes a few optimizations to keep everything smooth and efficient:
✔ GPU-powered rendering using custom shaders
✔ Lazy loading of the required libraries
✔ Visibility detection to pause rendering off-screen
✔ Automatic mobile fallbacks for touch devices
I hope this can be a useful starting point for anyone looking to bring more immersive interactions into their Webflow projects.
As always, feedback, ideas, and suggestions are more than welcome!
Have an awesome Webflow journey y'all,
Francesco