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

Turn static images and background videos into tactile fluid surfaces with physics-based liquid ripples, light-bending refraction, and cinematic chromatic aberration.

Features

Real-time Navier-Stokes fluid simulation
GPU-accelerated WebGL shader performance
Dynamic refraction and chromatic aberration
Specular liquid highlights with directional light
Supports both image and looping video media
Intelligent auto-pause when out of viewport
Clean canvas resizing and responsive scaling
Canvas editor preview mode toggle
Mobile touch and desktop hover interaction
Built-in fallback rendering for static export

Customization Options

Media type (Image or Video)
Background source asset URL
Liquid refraction intensity
Chromatic aberration color spread
Specular highlight brightness
Fluid return and fade speed
Motion dissipation and velocity drag
Curl and vorticity swirl intensity
Interaction radius and touch size
Hover vs click interaction trigger

How to Use

Drop the component onto your Framer canvas
Choose your media type and upload an image or video
Fine-tune the liquid refraction and chromatic spread
Adjust the fluid fade speed and swirl intensity
Choose whether to trigger on hover or click
Publish to deliver a fluid liquid interaction

Use Cases

Interactive hero image backgrounds
Creative agency portfolio showcases
E-commerce product visualizers
Dynamic SaaS landing page banners
Interactive album artwork and posters
Engaging cursor-following hover sections
Video backdrop distortions
Modern editorial web designs
High-impact splash headers
Immersive WebGL storytelling blocks

5a:[["$","$L5d",null,{"post":{"id":"01a0e94e-59af-73d0-8a90-146a4ab79853","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"682fc11e-0644-4920-8b94-8b794b0ece9e","name":"Saadat Ali","slug":"saadat-ali-designsbysadat","avatar":"https://framerusercontent.com/avatars/users/682fc11e-0644-4920-8b94-8b794b0ece9e/OrcFwpGK4","followed":false,"followsYou":false},"media":[],"resources":[{"id":"oHjlNvfRAK4Zjm6cBa4Q","resolved":true,"title":"Hover Water Effect","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Turn static images and background videos into tactile fluid surfaces with physics-based liquid ripples, light-bending refraction, and cinematic chromatic aberration."}]},{"type":"customHeading","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Real-time Navier-Stokes fluid simulation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"GPU-accelerated WebGL shader performance"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dynamic refraction and chromatic aberration"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Specular liquid highlights with directional light"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Supports both image and looping video media"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Intelligent auto-pause when out of viewport"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Clean canvas resizing and responsive scaling"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Canvas editor preview mode toggle"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Mobile touch and desktop hover interaction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Built-in fallback rendering for static export"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Customization Options","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Media type (Image or Video)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background source asset URL"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Liquid refraction intensity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Chromatic aberration color spread"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Specular highlight brightness"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fluid return and fade speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Motion dissipation and velocity drag"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Curl and vorticity swirl intensity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interaction radius and touch size"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hover vs click interaction trigger"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How to Use","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop the component onto your Framer canvas"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose your media type and upload an image or video"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fine-tune the liquid refraction and chromatic spread"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust the fluid fade speed and swirl intensity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose whether to trigger on hover or click"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Publish to deliver a fluid liquid interaction"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Use Cases","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive hero image backgrounds"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative agency portfolio showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"E-commerce product visualizers"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dynamic SaaS landing page banners"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive album artwork and posters"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Engaging cursor-following hover sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Video backdrop distortions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Modern editorial web designs"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"High-impact splash headers"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Immersive WebGL storytelling blocks"}]}]}]}]},"introduction":"Interactive WebGL water distortion","slug":"hover-water-effect","author":{"framerUserId":"682fc11e-0644-4920-8b94-8b794b0ece9e","name":"Saadat Ali","slug":"saadat-ali-designsbysadat","avatar":"https://framerusercontent.com/avatars/users/682fc11e-0644-4920-8b94-8b794b0ece9e/OrcFwpGK4","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/682fc11e-0644-4920-8b94-8b794b0ece9e/01a0e94d-7850-701e-a47e-aa2a682f7129.webp","metadata":{"tint":{"h":0,"s":0,"l":3},"width":640,"height":480}}],"post":null,"createdAt":"2026-09-28T18:37:00.583Z","updatedAt":"2026-10-05T04:28:33.266Z","publishedAt":"2026-09-28T18:37:00.580Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://real-result-504144.framer.app","price":"8","paymentUrl":"https://designsbysadat.lemonsqueezy.com/checkout/buy/dd7891f6-86d0-4771-b41e-a9a4c2f604ab","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"VS96pfhRtVEA1Wk9A5pa","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-28T18:37:01.231Z","updatedAt":"2026-09-28T18:37:01.231Z","reported":false}}],"$L5f"]

Suggested for you