Resources

Liquid Distortion Component for Framer

View demo

Copy component

Remix project

Copy component

Remix project

Resources

Liquid Distortion Component for Framer

View demo

Copy component

Remix project

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

How to Make $10K+ with Framer in 60 days

Get the course

How to Make $10K+ with Framer in 60 days

Get the course

Component

Liquid Distortion Component for Framer

This is a liquid distortion effect recreated in Framer, based on Ksenia’s work. Upload any image, adjust the distortion power, resolution, and cursor interaction, and add a smooth, fluid motion to your visuals.

image of Nandi Muzsik
profile image of Emanuele
image of Prianca S.
Image of Ksenia

Created by

Nandi

,

Emanuele

,

Prianca

,

and

Ksenia

Liquid distortion effect applied to glowing blue jellyfish image

About the resource

To use the liquid distortion component, upload any image of your choice and adjust the resolution to control the clarity and smoothness of the distortion. The cursor setting lets you define how the distortion reacts to mouse movement, while the power property controls the intensity of the liquid effect. Finally, the distortion property fine-tunes the overall flow and texture of the animation, letting you create anything from subtle ripples to strong, fluid warps.

About the resource

To use the liquid distortion component, upload any image of your choice and adjust the resolution to control the clarity and smoothness of the distortion. The cursor setting lets you define how the distortion reacts to mouse movement, while the power property controls the intensity of the liquid effect. Finally, the distortion property fine-tunes the overall flow and texture of the animation, letting you create anything from subtle ripples to strong, fluid warps.

About the resource

To use the liquid distortion component, upload any image of your choice and adjust the resolution to control the clarity and smoothness of the distortion. The cursor setting lets you define how the distortion reacts to mouse movement, while the power property controls the intensity of the liquid effect. Finally, the distortion property fine-tunes the overall flow and texture of the animation, letting you create anything from subtle ripples to strong, fluid warps.

Liquid hover effect settings panel in Framer

The properties of the liquid distortion component in Framer.

Liquid hover effect settings panel in Framer

The properties of the liquid distortion component in Framer.

Liquid hover effect settings panel in Framer

The properties of the liquid distortion component in Framer.

Learn how can one go from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Get access now

Nandi portrait's background

More resources

More resources

View all

  • Music app playlist created screen with artist avatars

    Playlist Generation Circular Animation in Framer

    Component

    Music app playlist created screen with artist avatars

    Playlist Generation Circular Animation in Framer

    Component

  • Customer testimonials section with review letter card

    3D Letter Testimonials in Framer

    Component

    Customer testimonials section with review letter card

    3D Letter Testimonials in Framer

    Component