---
title: "Liquid Image FX — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Evixel Studio · Effects. SVG-powered image distortion effects"
canonical: "https://framer.elliotli.dev/component/liquid-image-fx"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Liquid Image FX

# Liquid Image FX

Interactive liquid image effects

[View on Framer](https://framer.com/marketplace/components/liquid-image-fx/?via=elliot-li)

![Liquid Image FX preview image 1](https://framer.elliotli.dev/og/component/liquid-image-fx/c6fff1a7f9c3f53f/1600x1200.jpg)

## Summary

SVG-powered image distortion effects

## Description

LiquidDistort brings organic, fluid image distortion to your Framer projects without any WebGL overhead. It uses native SVG feTurbulence and feDisplacementMap filters to create four distinct visual effects.

### Effects

-   **Heat Haze** — A subtle, shimmering distortion that drifts naturally over time, responding gently to cursor position.
    
-   **Melting** — A slow, viscous drip effect that intensifies as the element enters the interaction state.
    
-   **Ripple** — A pulsing, wave-like distortion that radiates uniformly across the image.
    
-   **Glitch** — A jittery, digital artifact effect with randomized seed bursts on interaction.
    

### Triggers

-   **Hover** — Effect activates on pointer enter, fades out on leave.
    
-   **Scroll** — Distortion fires only while the user is actively scrolling and the component is in the viewport.
    
-   **Auto** — Always on; great for ambient hero sections or looping backgrounds.
    

### Controls

-   _Image_ — Any Framer-compatible responsive image.
    
-   _Alt Text_ — Accessibility description for the image.
    
-   _Mode_ — Choose between Heat Haze, Melting, Ripple, or Glitch.
    
-   _Intensity_ — How strong the distortion is (0–200).
    
-   _Speed_ — Animation playback rate (0–5).
    
-   _Complexity_ — Number of noise octaves; higher = more detailed distortion (1–8).
    
-   _Fill_ — Cover or Contain image within the frame.
    
-   _Radius_ — Border radius for rounded corners.
    
-   _Shadow_ — Box shadow support.
    

### Quick Start

Drop the component onto your canvas and resize it to your desired dimensions. Add an image via the Image property control. Pick a distortion Mode and Trigger type, then preview in Framer's preview mode.

## Rank history [How rankings work →](/terms#rankings)

-   All · #6100

## Details

- **Author**: Evixel Studio
- **Price**: $5.00
- **Published**: 2026-04-28
- **Updated**: 2026-10-30
- **Added**: 2026-04-22
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo