Clone Project

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

Created by
Francesco Castronuovo
Similar Projects
Oops! Something went wrong while submitting the form.

0 Comments

Be the first to leave a comment.
Loading
User is typing...
No Name
Set
4 years ago
Moderator
This is the actual comment. It's can be long or short. And must contain only text information.
(Edited)
No Name
Set
2 years ago
Moderator
This is the actual comment. It's can be long or short. And must contain only text information.
(Edited)
Load More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Load More
Description:  
AI Description

This component creates an interactive video distortion effect in Webflow, transforming the mouse cursor into a virtual glass lens using WebGL. As users move their cursor across the section, the video bends and separates its colors, creating a chromatic aberration effect. The setup is straightforward, requiring only the integration of a code snippet and configuration through custom attributes in the Webflow Designer.

Key Features:

  • Interactive video distortion effect that responds to mouse movements.
  • Utilizes WebGL for GPU-accelerated performance.
  • Customizable parameters such as distortion radius, strength, and color offsets.
  • Ready-to-use code snippet for easy integration.
  • Smooth performance across devices.

Design Elements:

  • Dynamic video background that reacts to user interaction.
  • Color separation effect reminiscent of chromatic aberration.
  • Overlay text and buttons that enhance user engagement.
  • Modern visual style suitable for creative and tech-oriented websites.

Potential Use Cases:

  • Creative agencies showcasing portfolios with interactive elements.
  • Event websites that want to create immersive experiences.
  • Product landing pages for tech gadgets or software.
  • Artistic websites that aim to captivate visitors with unique visuals.
  • Promotional campaigns for nightlife or entertainment venues.

Conclusion: The Chromatic Video Distortion component offers an engaging way to enhance user interaction with video content, making it suitable for various creative applications.

Description from Webflow:  
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
Tags from Webflow: 
cloneable,  madeinwebflow,  webgl,  threejs,  distortion
.