---
title: "Liquid Lens — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Artem Kireev · Effects. A liquid lens for any image"
canonical: "https://framer.elliotli.dev/component/liquid-lens"
---

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

# Liquid Lens

A liquid lens for any image

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

![Liquid Lens preview image 1](https://framer.elliotli.dev/og/component/liquid-lens/b08c4ae20f7906c6/1600x1243.jpg)

## Summary

A liquid lens for any image

## Description

LiquidLens is a WebGL shader component that turns any image — or, with no image at all, a generated two-color gradient — into an interactive liquid-glass surface. A ripple distortion moves across the content with chromatic aberration and animated film grain layered on top, driven by whichever trigger fits the layout: cursor hover, a click pulse, scroll velocity, or a self-animating ambient drift.

It solves the "every shader background looks the same" problem by working with real content instead of only decorative backdrops: drop it over a hero photo, a portfolio thumbnail, or a product shot and it behaves like a lens on that image, not a fixed animation loop sitting behind it. With no image supplied it still looks intentional out of the box, thanks to the built-in gradient fallback.

## Customizations available in Framer

-   **Image** — the photo or artwork the effect distorts. Optional; leave empty to use the gradient colors instead.
    
-   **Gradient Start / Gradient End** — the two colors used to build the default animated background when no image is set.
    
-   **Trigger** — what drives the ripple: Hover, Click Pulse, Scroll Reactive, or Ambient (auto).
    
-   **Intensity** — overall strength of the liquid distortion.
    
-   **Ripple Density** — how many ripple rings appear across the surface.
    
-   **Speed** — animation speed of the ripple wave.
    
-   **Color Fringe** — amount of chromatic (RGB) aberration at the ripple edges.
    
-   **Grain** — amount of animated film grain layered over the effect.
    
-   **Overlay Tint** — an optional color wash; the color's own alpha sets the opacity.
    
-   **Corner Radius** — rounds the component's corners.
    
-   **Enable Effect** — toggles the shader off in favor of a plain static image/gradient.
    

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

-   All · #5253

## Details

- **Author**: Artem Kireev
- **Price**: $5.00
- **Published**: 2026-09-03
- **Updated**: 2026-09-03
- **Added**: 2026-09-03
- **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