Interactive Glass Lens Video Distortion in Webflow

Turn the hero section of your Webflow site into an interactive glass lens. As a visitor moves their cursor across the video, the image bends and stretches while its colors split apart like light through a prism — then eases back to normal as they move away. It’s a WebGL effect that looks expensive and runs buttery-smooth.

The best part is how little you actually build. There’s no editing JavaScript: you add a canvas to your layout, point it at a video, paste in a ready-made script, and dial in the look with a handful of custom attributes. And because the heavy lifting happens on the GPU, it stays fast and scales well — even before you think about performance, the component already has your back.

How it works

The effect draws your video onto an HTML canvas and distorts it in real time, which means the code needs direct access to every frame. That’s the catch with YouTube or Vimeo: they serve a protected player, and browsers deliberately block outside code from reading its pixels. So instead of an embed you need a raw MP4 file — and the neat trick is that Webflow will host one for you. Drop a background video element on the page, upload your clip, and Webflow puts the original MP4 on its CDN with a direct URL you can grab.

On the layout side there are only a couple of moving parts. The section becomes the positioning reference (position: relative), and inside it lives a canvas that fills the whole section absolutely. In Webflow you create it as a custom element, give it the class canvas, then change its tag to canvas so it becomes a real drawing surface. One gotcha: an absolutely-positioned canvas sits on top of your content, so your text and buttons stop being clickable — the fix is to set the main container to position: relative too, which lifts the content back above the canvas.

Everything visual runs as custom GPU shaders, so the distortion is calculated on your graphics card rather than the browser’s main thread — that’s why it holds a stable 60fps. The script is also quietly considerate: it pauses the video and all rendering when the section scrolls out of view, detects touch devices and falls back to the native mobile player instead of loading heavy 3D libraries, and only downloads those libraries at all if the current page actually uses the effect.

For tuning, a test attribute turns on a live control panel where you can drag sliders for the lens radius, distortion strength, color separation (the RGB offsets), and easing until it feels right. Those changes are temporary — a refresh resets them — so once you’re happy you write the values back as attributes and switch test off. Anything you don’t set simply keeps its default.

How to use it

1. Clone the project. Grab the Webflow cloneable — it includes the layout and the fully documented script. You don’t need to understand the code to use the effect.

2. Build the layout. Set your section to position: relative. Add a custom element inside it, give it the class canvas, set all padding to 0, position: absolute, and width/height to 100% so it fills the section. Then change its tag to canvas.

3. Get a direct video URL. Temporarily add a background video element to the body and upload your video. When it’s done, click the little arrow icon to open the hosted file in a new tab and copy that URL — it’s your direct MP4 link. Delete the background video element afterward; the file stays on the CDN.

4. Restore interactivity. Because the canvas now sits over your content, set the main container to position: relative so your text and buttons are clickable again.

5. Paste the code. Inspect the cloneable, copy everything inside its before </body> section (page settings), and paste it into the same place in your own project.

6. Wire up the three attributes on the canvas. Add fc-video-distortion-element="canvas", fc-video-distortion-video set to the URL you copied, and fc-video-distortion-test="1" to open the control panel. See the configuration reference above for what each one does.

7. Tune, then make it permanent. Publish, open the live site, and play with the control panel until you love the look. For every parameter you changed, add a matching custom attribute on the canvas (any you skip keep their defaults). Finally set fc-video-distortion-test to 0, publish again, and the panel disappears — the production effect now runs only on hover.

8. (Optional) Add a readability overlay. Drop a div right after the canvas, give it a class like section_overlay, set position: absolute and cover the full section, then apply a 90° linear gradient: a dark color at 50% opacity at 0%, the same color at 0% opacity at 50%, and the dark color at 50% opacity again at 100%. Your content stays clean and legible over any footage.