---
title: "Liquid Image Effect — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Ahmet Loca · Effects. Liquid Image Effect LiquidImageEffect is a WebGL-powered interactive image distortion component for Framer."
canonical: "https://framer.elliotli.dev/component/liquid-image-effect"
---

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

# Liquid Image Effect

Liquid WebGL Image Distortion

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

![Liquid Image Effect preview image 1](https://framer.elliotli.dev/og/component/liquid-image-effect/9a1c715152f51f80/1600x1200.jpg)

## Summary

Liquid Image Effect LiquidImageEffect is a WebGL-powered interactive image distortion component for Framer.

## Description

**MORE FRAMER COMPONENTS LIKE THIS**

**✦ Browse +38 FREE + 85 premium components:** [**https://frameze.com/components**](https://frameze.com/components)

**✦ Card Bundle:** [**https://frameze.com/components/category/card?ref=bundles**](https://frameze.com/components/category/card?ref=bundles)

## **About Liquid Image Effect**

LiquidImageEffect is a WebGL-powered interactive image distortion component for Framer. Images come alive with fluid, real-time effects triggered by mouse movement and touch — no setup, no coding required. Choose from four distinct distortion styles and drop it anywhere on your canvas.

Ripple — fluid wave ripples that spread from your cursor Melt — gravity-defying drip effect that follows your mouse Bulge — a magnetic lens that pushes and pulls the image Glitch — chromatic slice distortion for a raw digital aesthetic Smooth easing — cursor tracking with adjustable lag and inertia Touch support — tap and drag on mobile and tablet Demo Mode — on-canvas controls panel for live previewing effects Adjustable strength, radius, speed and easing per instance Corner radius control for seamless integration in any layout

**What's Included**

4 real-time WebGL distortion effects Smooth mouse & touch interaction with easing On-canvas Demo Mode with live controls 10+ property controls across layout, animation and style Built-in static & WebGL fallback handling Works out of the box

**Use Cases**

Portfolio & personal branding hero sections

Creative agency & studio showcase pages

Fashion & lifestyle product landing pages

Photography & visual storytelling websites

Music, film & entertainment microsites

SaaS marketing & interactive feature highlights

Architecture & interior design portfolios

Luxury brand & high-end product pages

Editorial & magazine-style feature sections

**Keywords**

liquid image effect, webgl framer component, image distortion, hover distortion effect, ripple image effect, melt effect, glitch image, bulge lens effect, interactive image, mouse hover image effect, webgl canvas, fluid animation, cursor image distortion, touch image effect

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

-   All · #1699

## Details

- **Author**: Ahmet Loca
- **Price**: $4.00
- **Published**: 2026-06-26
- **Updated**: 2026-09-30
- **Added**: 2026-06-26
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows