Image Hover Effects

Advanced WebGL image hover effects

WaveMotion WebGL is a high-quality hover-distortion and glitch-wave animation component for Framer.Built with Three.js + GSAP , it lets you apply cinematic distortion effects to any image - no coding required. Choose from 9 advanced effects (Actuator, Random, Uplinking, Half Time, Operator, Remote, Slurbt, Cybark, Alt Touch) and fine-tune them with controls for amplitude, speed, intensity, zoom, fit mode, and scroll-based animation .Perfect for hero sections, product reveals, portfolio shots, and premium UI interactions. How It Works 1. Add the Component Drag WaveMotion WebGL from your Components panel into the canvas. 2. Match the Component Size to Your Image For best results, set the component size equal to your image’s actual resolution.Example: If your image is 200×300 , set the component frame to 200×300 . 3. Add Your Image Upload your image using the Image control. 4. If the Image Doesn’t Appear on Canvas Framer canvas preview sometimes doesn’t refresh on the first instance.Just duplicate the component once (⌘D) - the second copy will display correctly. 5. Choose Your Effect Select from 9 glitch/wave effects and adjust settings as needed. 6. Enjoy the Interaction ✨ Hover or scroll to see the WebGL distortion in action. Refund Policy: Due to the nature of digital products, refunds are generally not available after purchase. Exceptions may be made for duplicate purchases or technical issues that cannot be resolved.

Advanced WebGL image hover effects