Liquid Distortion Component for Framer

Copy component

Liquid Distortion Component for Framer

Copy component

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

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

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.

Liquid distortion effect applied to glowing blue jellyfish image
Liquid distortion effect applied to glowing blue jellyfish image
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.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Cancel button with red notification badge showing number ten

    Delete Button Interaction in Framer

    Component

    Cancel button with red notification badge showing number ten

    Delete Button Interaction in Framer

    Component

    Cancel button with red notification badge showing number ten

    Delete Button Interaction in Framer

    Component

  • Framer image unroll scroll component animation showcase

    Image Unroll Effect on Scroll in Framer

    Component

    Framer image unroll scroll component animation showcase

    Image Unroll Effect on Scroll in Framer

    Component

    Framer image unroll scroll component animation showcase

    Image Unroll Effect on Scroll in Framer

    Component