Guide
- Liquify
- Elements
Guide
- Liquify
- Elements
Guide
- Liquify
- Elements
How to Liquify Any Element in Framer
There’s something undeniably satisfying about liquid motion. The way elements ripple, stretch, and flow feels alive — and now, thanks to the Liquid Distortion Component for Framer, you can bring that same organic energy to your own designs.
Whether you want subtle movement behind a hero image or a bold, interactive visual that reacts to your cursor, this component gives you total control over that silky, fluid distortion effect — no code required.
Posted by
Nandi
Table of contents
Getting started
Essentially I’m going to show you how to take any image and transform it into a dynamic, fluid surface. Think of it as turning a still visual into a living, breathing piece of your website.
And the good news is it’s as easy as dropping the Liquid Distortion Component into your Framer project, you can upload any image, from textures and illustrations to photography, and instantly see it come to life with smooth, liquid motion.
Getting started
Essentially I’m going to show you how to take any image and transform it into a dynamic, fluid surface. Think of it as turning a still visual into a living, breathing piece of your website.
And the good news is it’s as easy as dropping the Liquid Distortion Component into your Framer project, you can upload any image, from textures and illustrations to photography, and instantly see it come to life with smooth, liquid motion.
Getting started
Essentially I’m going to show you how to take any image and transform it into a dynamic, fluid surface. Think of it as turning a still visual into a living, breathing piece of your website.
And the good news is it’s as easy as dropping the Liquid Distortion Component into your Framer project, you can upload any image, from textures and illustrations to photography, and instantly see it come to life with smooth, liquid motion.
Liquid distortion component.
Liquid distortion component.
Liquid distortion component.
Here’s where the fun begins: you can adjust how that liquid behaves with a few key properties.
The key
Let’s break down the main controls that make this component so versatile:
Power
This controls the intensity of the distortion. Turn it up for dramatic, jelly-like movement, or dial it down for a gentle, watery ripple. It’s your main handle for determining how “liquid” your element feels.
Resolution
Higher resolution gives you a smoother, more refined distortion. Lower it for a chunkier, glitchier texture. It’s perfect if you want to fine-tune the visual fidelity based on your website’s style or performance needs.
Cursor Interaction
This setting makes the effect react to mouse movement. Move your cursor across the image and watch the surface respond in real time, an instant way to add interactivity and depth to your visuals.
Distortion
This property lets you refine the overall flow and texture of the liquid animation. It’s what allows you to craft anything from subtle undulations to powerful, wave-like deformations.
Here’s where the fun begins: you can adjust how that liquid behaves with a few key properties.
The key
Let’s break down the main controls that make this component so versatile:
Power
This controls the intensity of the distortion. Turn it up for dramatic, jelly-like movement, or dial it down for a gentle, watery ripple. It’s your main handle for determining how “liquid” your element feels.
Resolution
Higher resolution gives you a smoother, more refined distortion. Lower it for a chunkier, glitchier texture. It’s perfect if you want to fine-tune the visual fidelity based on your website’s style or performance needs.
Cursor Interaction
This setting makes the effect react to mouse movement. Move your cursor across the image and watch the surface respond in real time, an instant way to add interactivity and depth to your visuals.
Distortion
This property lets you refine the overall flow and texture of the liquid animation. It’s what allows you to craft anything from subtle undulations to powerful, wave-like deformations.
Here’s where the fun begins: you can adjust how that liquid behaves with a few key properties.
The key
Let’s break down the main controls that make this component so versatile:
Power
This controls the intensity of the distortion. Turn it up for dramatic, jelly-like movement, or dial it down for a gentle, watery ripple. It’s your main handle for determining how “liquid” your element feels.
Resolution
Higher resolution gives you a smoother, more refined distortion. Lower it for a chunkier, glitchier texture. It’s perfect if you want to fine-tune the visual fidelity based on your website’s style or performance needs.
Cursor Interaction
This setting makes the effect react to mouse movement. Move your cursor across the image and watch the surface respond in real time, an instant way to add interactivity and depth to your visuals.
Distortion
This property lets you refine the overall flow and texture of the liquid animation. It’s what allows you to craft anything from subtle undulations to powerful, wave-like deformations.
The properties of the liquid distortion component in Framer.
The properties of the liquid distortion component in Framer.
The properties of the liquid distortion component in Framer.
Use cases: when to go liquid
There are tons of creative ways to use this component in Framer, but here are a few ideas to get your imagination going:
Hero Sections: Add a touch of movement to background visuals to make your site’s first impression unforgettable.
Hover Effects: Apply liquid distortion to product images or buttons for interactive, eye-catching feedback.
Portfolio Previews: Showcase images or projects in a way that feels tactile and premium.
Dynamic Backgrounds: Layer multiple instances with different settings to create an ambient, evolving background animation.
And the best part? You can mix it with Framer’s native scroll or motion features to sync the effect with your site’s flow.
Why designers love it
It’s smooth. It’s customizable. And it turns even the simplest visual into something mesmerizing.
The Liquid Distortion Component brings that perfect balance of technical control and organic chaos you can make your visuals feel alive without needing a single line of code.
Drop it into your Framer project, upload your image, tweak the sliders, and watch your design transform into a fluid masterpiece.
Use cases: when to go liquid
There are tons of creative ways to use this component in Framer, but here are a few ideas to get your imagination going:
Hero Sections: Add a touch of movement to background visuals to make your site’s first impression unforgettable.
Hover Effects: Apply liquid distortion to product images or buttons for interactive, eye-catching feedback.
Portfolio Previews: Showcase images or projects in a way that feels tactile and premium.
Dynamic Backgrounds: Layer multiple instances with different settings to create an ambient, evolving background animation.
And the best part? You can mix it with Framer’s native scroll or motion features to sync the effect with your site’s flow.
Why designers love it
It’s smooth. It’s customizable. And it turns even the simplest visual into something mesmerizing.
The Liquid Distortion Component brings that perfect balance of technical control and organic chaos you can make your visuals feel alive without needing a single line of code.
Drop it into your Framer project, upload your image, tweak the sliders, and watch your design transform into a fluid masterpiece.
Use cases: when to go liquid
There are tons of creative ways to use this component in Framer, but here are a few ideas to get your imagination going:
Hero Sections: Add a touch of movement to background visuals to make your site’s first impression unforgettable.
Hover Effects: Apply liquid distortion to product images or buttons for interactive, eye-catching feedback.
Portfolio Previews: Showcase images or projects in a way that feels tactile and premium.
Dynamic Backgrounds: Layer multiple instances with different settings to create an ambient, evolving background animation.
And the best part? You can mix it with Framer’s native scroll or motion features to sync the effect with your site’s flow.
Why designers love it
It’s smooth. It’s customizable. And it turns even the simplest visual into something mesmerizing.
The Liquid Distortion Component brings that perfect balance of technical control and organic chaos you can make your visuals feel alive without needing a single line of code.
Drop it into your Framer project, upload your image, tweak the sliders, and watch your design transform into a fluid masterpiece.
