FluidMorph

FluidMorph turns any image into a responsive liquid surface that bends, stretches, and flows with your cursor without making the rest of your Framer page feel heavy.

Most liquid distortion effects can look great in isolation but become expensive when used on large hero images. FluidMorph was built with performance in mind: the fluid simulation runs separately at a lightweight resolution while your image stays sharp, and the animation only runs while the effect is active.

The result is a much smoother liquid interaction that feels responsive to the cursor without constantly forcing the page to render an expensive full-resolution simulation.

Move across an image and the pixels are pulled through a real fluid-style displacement field, creating organic folds, stretches, swirls, and flowing distortion including through the center of the image, not just around its edges.

Why FluidMorph

• Performance focused WebGL liquid distortion

• Designed to avoid the page wide lag common with heavier liquid effects

• Fluid simulation is separated from final image quality

• Animation stops when the interaction settles instead of running continuously

• Smooth cursor driven pulling and liquifying

• Organic fluid movement, folding, and distortion

• Works well on large hero images

• Adjustable liquid strength, pull, hover area, speed, fluidity, and fold

• Adjustable simulation quality for balancing detail and performance

• Full image quality controls

• Cover and Contain modes

• Custom corner radius

• No setup required choose an image and customize directly in Framer

Perfect for portfolios, creative studio websites, hero sections, fashion and beauty sites, product showcases, experimental landing pages, and any design that needs a high-end interactive image moment.