---
title: "Image Ripple Effect — Free Framer component · Best of Framer"
description: "Free Framer component · by Weblr Studio · Effects. Image Ripple (WebGL) Transform any image into a living water scene with crisp, responsive ripples—built for mouse, touch, and pen."
canonical: "https://framer.elliotli.dev/component/image-ripple-effect"
---

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

# Image Ripple Effect

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

![Image Ripple Effect preview image 1](https://framer.elliotli.dev/og/component/image-ripple-effect/09c040126a078b79/1600x1200.jpg)

## Summary

Image Ripple (WebGL) Transform any image into a living water scene with crisp, responsive ripples—built for mouse, touch, and pen.

## Description

## Image Ripple (WebGL)

Transform any image into a living water scene with crisp, responsive ripples—built for mouse, touch, and pen. Enjoy smooth performance on mobile and broad WebGL1 compatibility. Accurate cover mapping keeps your visuals on-brand (no stretching or cropping), while adaptive timing delivers silky motion across devices. Perfect for hero banners, product imagery, and interactive sections that captivate and convert.

## Highlights

-   Realistic, responsive ripple simulation
    
-   Pointer Events support (mouse/touch/pen)
    
-   Mobile-friendly with smart DPR capping
    
-   WebGL1-ready for older GPUs
    
-   Adaptive timing for steady animation
    
-   Accurate **cover** UV mapping
    

## Quick controls

-   **Image:** choose the source/alt for your visual.
    
-   **Ripple Strength:** overall intensity of the effect.
    
-   **Ripple Speed:** how fast waves evolve.
    
-   **Ripple Density:** frequency/complexity of ripples.
    
-   **Liquid Line Density:** adds subtle flowing patterns.
    
-   **Distortion Strength:** push/pull of pixels around interaction.
    
-   **Distortion Radius:** area of influence.
    
-   **Distortion Falloff:** how quickly the effect fades outward.
    
-   **Mouse Offset:** slight drift following the pointer for depth.
    
-   **Effect Width / Height:** limit the active region (per-axis).
    
-   **Dampening:** controls trail fade-out and persistence.
    
-   **Quality (DPR cap):** balance clarity vs. speed on high-DPI screens.
    
-   **Max Trail:** adjust trail length for stability and style.
    

Make imagery feel alive—without heavy assets or video. Plug in, tweak, and ship experiences that stand out.

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

-   All · #5561

## Details

- **Author**: Weblr Studio
- **Published**: 2025-08-12
- **Updated**: 2025-10-22
- **Added**: 2025-08-07
- **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