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 ComponentDrag WaveMotion WebGL from your Components panel into the canvas.

2. Match the Component Size to Your ImageFor 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 ImageUpload your image using the Image control.

4. If the Image Doesn’t Appear on CanvasFramer 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 EffectSelect 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

All sales are final.However, if you experience any technical issue that prevents the component from working as described, you can request a refund within 7 days of purchase by providing your order email and a brief description of the issue.I’ll review your case and issue a refund if the problem cannot be resolved.