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:T942,

Ripple Shader is a high-performance WebGL background component that combines fluid-like water simulation with dynamic gradient shader rendering to create visually rich, interactive experiences. It uses a real-time shader system powered by multiple gradient algorithms and a ripple-based distortion layer that reacts instantly to user input.

The component features 19 unique gradient shader themes, each designed with distinct color behaviors such as plasma, aurora, liquid crystal, and chromatic flows. These gradients are not static—they evolve over time using procedural math, giving a continuous, organic motion feel.

A built-in water simulation layer drives the ripple effect, where mouse movement generates subtle waves and clicks trigger stronger ripple bursts. These interactions distort the gradient surface in real time, creating a natural fluid response that enhances depth and immersion.

Ripple Shader is fully customizable, allowing control over animation speed, water strength, mouse intensity, and click impact. It adapts seamlessly to different screen sizes and maintains smooth performance using optimized rendering techniques.

This component is ideal for modern websites, hero sections, creative portfolios, and experimental UI designs where you want a premium, interactive visual background that feels alive and responsive.

Key Features

19 unique gradient shader themes with dynamic motion
Real-time water simulation with smooth ripple effects
Interactive mouse movement and click-based distortions
Fully customizable controls (speed, strength, intensity)
High-performance WebGL rendering using shaders
Seamless responsive scaling across screen sizes
Procedural animations for organic, non-repeating visuals
Clean UI dropdown for instant theme switching

Best For

Hero sections with premium visual impact
SaaS and startup landing pages
Creative portfolios and personal websites
Interactive backgrounds for modern UI design
WebGL experiments and visual showcases
Product demos and feature highlights
Agencies and designers showcasing motion work

5a:[["$","$L5d",null,{"post":{"id":"019dbf1e-a56d-75ac-8b40-54ce98c0192b","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"f1605d16-3738-4772-8b1f-960f69e43c1f","name":"Mohd Qasim","slug":"mohd-qasim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1578570/avatar-vEAMaKseGusvLs3cBK3fTMKwFnWzh1.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"LASP6hfNlAgOEJyLQmY1","resolved":true,"title":"Ripple Shader","body":"$5e","bodyJson":null,"introduction":"Ripple Shader with 19 shader themes","slug":"ripple-shader","author":{"framerUserId":"f1605d16-3738-4772-8b1f-960f69e43c1f","name":"Mohd Qasim","slug":"mohd-qasim","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1578570/avatar-vEAMaKseGusvLs3cBK3fTMKwFnWzh1.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/LASP6hfNlAgOEJyLQmY1/ripple-shader-T5TxN0VcJjs329iuWqqHB0813rCfWE","metadata":{"tint":{"h":245,"s":92,"l":20},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-08T13:49:27.938Z","updatedAt":"2026-06-16T12:29:15.558Z","publishedAt":"2026-04-24T10:52:29.933Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://rippleshader.framer.website/","price":"10","paymentUrl":"https://buy.polar.sh/polar_cl_G9ZRPmXXewoa9ac88ee8Vr7Vih0qnTo5q8s9b3Y4pag","workshop":true,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"O595cddYNOYLqoICHYyn","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-24T10:52:29.933Z","updatedAt":"2026-04-24T10:52:29.933Z","reported":false}}],"$L5f"]

Suggested for you