5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Tb37,

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.

5a:[["$","$L5d",null,{"post":{"id":"01989ec0-72e8-784d-b9fc-12a23ed47216","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"421e26d7-a6eb-4c8d-a5f5-f41e1754c366","name":"Weblr Studio","slug":"weblr","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/421e26d7-a6eb-4c8d-a5f5-f41e1754c366/o5oj2zbo","followed":false,"followsYou":false},"media":[],"resources":[{"id":"wlkE7etGNvrY6O8pRIWl","resolved":true,"title":"Image Ripple Effect","body":"$5e","bodyJson":null,"introduction":"","slug":"image-ripple-effect","author":{"framerUserId":"421e26d7-a6eb-4c8d-a5f5-f41e1754c366","name":"Weblr Studio","slug":"weblr","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/421e26d7-a6eb-4c8d-a5f5-f41e1754c366/o5oj2zbo","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/wlkE7etGNvrY6O8pRIWl/image-ripple-effect-l4qyqH2MqFg5YMfjzfENdCpA4TeIeL","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-08-07T20:50:46.667Z","updatedAt":"2025-10-22T06:17:48.746Z","publishedAt":"2025-08-12T14:47:49.224Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/Image-Ripple-Effect-1oqv.js@upfLuU4VKe46VEhFbj1W","previewUrl":"https://imageripple.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"upfLuU4VKe46VEhFbj1W","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-08-12T14:47:49.224Z","updatedAt":"2025-08-12T14:47:49.224Z","reported":false}}],"$L5f"]

Suggested for you