---
title: "Liquid Water Effect — Framer component · Best of Framer"
description: "$8.00 · Framer component · by 9dm · Effects. Props - Liquid Water Effect Key Features Image & Video support — upload any image or paste a direct video URL (.mp4 /.webm)."
canonical: "https://framer.elliotli.dev/component/liquid-water-effect"
---

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

# Liquid Water Effect

WebGL water ripples: video & blend modes

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

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

## Summary

Props - Liquid Water Effect Key Features Image & Video support — upload any image or paste a direct video URL (.mp4 /.webm).

## Description

Water Ripple Effect brings your images and videos to life with physics-based cursor-driven ripples — built on the exact algorithm from the award-winning OpenGL. The secret is the shadow trick canvas technique: each ripple is drawn outside the canvas and projected back in as a Gaussian-blurred shadow, giving that organic, liquid-edge feel no other component replicates. Dual easing (easeOutSine + easeOutQuad) and moving trail points make every movement feel genuinely fluid.

![Props - Liquid Water Effect ](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-ea21z92y-fpS5CHVwfrLkXau46AcjVKG8pN3EIb)Props - Liquid Water Effect

### Key Features

-   Image & Video support — upload any image or paste a direct video URL (.mp4 / .webm). Video plays looped, muted, and auto-plays.
    
-   Blend Modes — Multiply, Screen, and Overlay applied in the GPU shader. Pick a color and opacity to stylize your media in real time.
    
-   Object Fit — Cover, Contain, Fill, and Center. Your media always fits the frame correctly, never stretched.
    
-   Physics-based ripples — fast cursor = strong ripple, slow = gentle. Force-sensitive exactly like real water.
    
-   Mouse & Touch — works on desktop and mobile via Pointer Events.
    
-   GPU-accelerated — WebGL rendering at 60fps, even on mobile.
    
-   Full property controls — Strength, Ripple Radius, Trail Length, Quality, Corner Radius, and more. All with descriptions.
    
-   Default canvas size — drops onto the canvas at 600×400px, ready to use.
    

### Perfect For

Hero sections, portfolio galleries, product showcases, creative agencies, photographer portfolios, and any site that needs a premium interactive feel.

### How to Use

1.  Drag the component onto your canvas
    
2.  Upload your image via the Image property
    
3.  Choose your Fit mode (Cover recommended)
    
4.  Set Strength to taste (default 0.2 matches the original)
    
5.  Publish — the effect activates on mouse move
    

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

-   All · #8556

## Details

- **Author**: 9dm
- **Price**: $8.00
- **Published**: 2026-04-01
- **Updated**: 2026-04-24
- **Added**: 2026-03-19
- **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