Hover Transitions

WebGL image transitions on hover

Wave Transition FX is a premium WebGL image transition component designed for modern Framer projects. It delivers smooth, cinematic hover and click transitions using real-time displacement effects powered by Three.js and GSAP. Features 8 handcrafted transition presets Real-time hover, click, or auto playback modes True image-accurate rendering (no color shifts or contrast changes) Fill, Fit, Crop, and Tile image modes Adjustable transition strength, angles, timing, and easing High-performance rendering with quality controls Works perfectly in both Framer Canvas and Preview How to Use Upload Image A and Image B Select a transition preset Click a number to switch effects Hover the image to preview the transition Perfect For Hero sections Portfolio showcases Product reveals Interactive galleries Premium landing pages Built for creators who want visually rich interactions without compromising performance or image quality. Controls Quality – Adjust rendering quality (Low / Medium / High) Image A – Primary image Image B – Secondary image for transition Transition – Choose from 8 handcrafted transition effects Trigger – Start animation on Hover, Click, or Auto Mode – Forward or Toggle behavior Duration – Control transition speed Ease – Animation easing style Delay – Add delay before animation starts Reverse – Automatically reverse on hover out Strength – Transition distortion intensity Angle 1 – Direction angle for first displacement vector Angle 2 – Direction angle for second displacement vector Fit – Image layout mode (Crop / Fit / Fill / Tile) Scale – Zoom level of the image Pos X – Horizontal image offset Pos Y – Vertical image offset

WebGL image transitions on hover