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: 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.
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: 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.
