5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rdgef59pv3cw.js","/creators-assets/_next/static/immutable/chunks/2obmdiyh47oqt.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/0gxswkth5mc6b.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/36invrtoq879v.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0j6nyijn0flqd.js","/creators-assets/_next/static/immutable/chunks/2b15v_9ruhnys.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3h1dt97hv5ik0.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/0w757zrv0hi6k.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/1h-r9oggqjick.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/2051y-i4b0nnm.js"],"PostDetailCard"] 5d:T895,

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.

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

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

59:[["$","$L5c",null,{"post":{"id":"019d498f-e6bc-7335-8f1f-e4b4f02427fb","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"339dc8ed-e165-46d2-9c91-e11c83e46c7f","name":"Fabrizzio Zampieri","slug":"fabrizzio-zampieri","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/339dc8ed-e165-46d2-9c91-e11c83e46c7f/x1uyg0sj","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"wVkIB30VLhU8UiE6hAKL","resolved":true,"title":"Liquid Water Effect","body":"$5d","bodyJson":null,"introduction":"WebGL water ripples: video & blend modes","slug":"liquid-water-effect","author":{"framerUserId":"339dc8ed-e165-46d2-9c91-e11c83e46c7f","name":"Fabrizzio Zampieri","slug":"fabrizzio-zampieri","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/339dc8ed-e165-46d2-9c91-e11c83e46c7f/x1uyg0sj","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/wVkIB30VLhU8UiE6hAKL/liquid-water-effect-GyisS5kGmeN4gFeCaO9zg06OiyLWP7","metadata":{"tint":"hsl(0 26% 63%)","aspectRatio":1.3333333333333333}}],"post":null,"createdAt":"2026-03-19T17:04:37.350Z","updatedAt":"2026-04-24T18:49:38.083Z","publishedAt":"2026-04-01T15:01:00.732Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://brave-premise-337469.framer.app/","price":"8","paymentUrl":"https://contra.com/payment-link/qW7gP6uT-water-ripple-interactive-web-gl-distortion","workshop":false,"categories":[{"id":"3a855006-6097-4489-b33b-8024cb26633e","name":"Interactions","slug":"interactions"}],"lastSaveId":"UREEEwwH9169jucnXTbL"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-01T15:01:00.732Z","updatedAt":"2026-04-01T15:01:00.732Z","reported":false}}],"$L5e"]

Suggested for you