Fluid Image Morph

Make images melt into each other.

Liquid Image Hover is a premium WebGL image hover effect for Framer that transforms one image into another through a smooth, fluid liquid morph, distortion and displacement transition.

Upload two images, drop the component onto your Framer canvas, and hover.

No code required.

✦ Features

Two-image morph Transition between a primary image and a second image with an organic liquid effect.

WebGL image distortion Hardware-accelerated rendering creates a more fluid visual than a standard CSS hover animation.

Cursor-reactive interaction Movement influences the distortion so the transition feels alive rather than simply fading.

Fully responsive Resize the Framer component freely and the effect adapts to the frame.

Framer controls Change your images, distortion strength, transition speed, cursor influence and corner radius directly from the properties panel.

Touch support Tap to trigger the interaction on touch devices.

No coding required Drop it in, choose your images, and you're done.

Perfect for

Creative portfolios Architecture websites Interior design Photography Fashion Luxury brands Product showcases Creative agencies Case studies Landing pages Editorial websites Interactive galleries

How it works

1. Add the component Drag Liquid Image Hover into your Framer project.

2. Choose two images Set Image A and Image B from the properties panel.

3. Tune the effect Adjust liquid distortion, transition speed and cursor influence.

4. Hover.

Watch one image melt into the next.

Built for Framer

Responsive · WebGL · Interactive · Touch-ready · Zero code

Free during the launch period.