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

Add a premium interactive fluid simulation across cards, hero sections, and backgrounds with responsive cursor tracking, dynamic ripple physics, and custom shape masks.

Features

Real-time edge-following cursor fluid effect
High-performance WebGL and GLSL rendering
11 built-in shape masks including retro grid, dots, and hexagons
Custom SVG and PNG mask upload support
Smooth damped fluid velocity and dissipation physics
Dynamic rainbow cycling and custom brand color palettes
Smart off-screen viewport auto-pausing for top performance
Clean layered visual architecture
Works seamlessly as full-screen backgrounds or section overlays
Fully customizable grid resolution, curl, and splash radii

Customization Options

Shape type
Custom mask upload
Color mode
Custom color palette
Grid cell size
Liquid fade speed
Motion dissipation
Swirl curl intensity
Splash touch radius
Hover activation toggle

How to Use

Drop the component onto your Framer canvas
Set width and height to fill your section or canvas
Choose your shape mask and color palette to match your brand
Tune grid resolution, fade speed, and swirl intensity
Switch between hover tracking or click-and-drag interaction
Publish for an instant high-converting visual upgrade

Use Cases

Interactive SaaS hero backgrounds
Creative agency portfolio showcases
Web3 and crypto landing pages
Interactive dark-mode sections
High-engagement product feature blocks
Modern AI startup headers
Experimental creative portfolios
Interactive 404 error screens
Digital event landing pages
Visual media feature backdrops

5a:[["$","$L5d",null,{"post":{"id":"01a0a489-73c8-701b-8fe0-12e4e027cce5","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":"JO6KzGPhrpujNR043J2r","resolved":true,"title":"Dynamic Liquid BG","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Add a premium interactive fluid simulation across cards, hero sections, and backgrounds with responsive cursor tracking, dynamic ripple physics, and custom shape masks."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Real-time edge-following cursor fluid effect"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"High-performance WebGL and GLSL rendering"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"11 built-in shape masks including retro grid, dots, and hexagons"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom SVG and PNG mask upload support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth damped fluid velocity and dissipation physics"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dynamic rainbow cycling and custom brand color palettes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smart off-screen viewport auto-pausing for top performance"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Clean layered visual architecture"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Works seamlessly as full-screen backgrounds or section overlays"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully customizable grid resolution, curl, and splash radii"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Customization Options"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Shape type"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom mask upload"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Color mode"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom color palette"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Grid cell size"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Liquid fade speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Motion dissipation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Swirl curl intensity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Splash touch radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hover activation toggle"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How to Use"}],"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":"Set width and height to fill your section or canvas"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose your shape mask and color palette to match your brand"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tune grid resolution, fade speed, and swirl intensity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Switch between hover tracking or click-and-drag interaction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Publish for an instant high-converting visual upgrade"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Use Cases"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive SaaS hero backgrounds"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative agency portfolio showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Web3 and crypto landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive dark-mode sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"High-engagement product feature blocks"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Modern AI startup headers"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Experimental creative portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive 404 error screens"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Digital event landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Visual media feature backdrops"}]}]}]},{"type":"paragraph"}]},"introduction":"Interactive fluid hover effect","slug":"dynamic-liquid-bg","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/01a0a489-46c6-743b-bdf3-c265c41868c6.png","metadata":{"tint":{"h":240,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-15T10:07:46.070Z","updatedAt":"2026-09-15T10:30:31.113Z","publishedAt":"2026-09-15T10:07:46.063Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Fluid-Stimulation-P41eKV.js@ykqcs78gzgX7lSS9R4Vy","previewUrl":"https://inventive-spinach-998615.framer.app","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"ykqcs78gzgX7lSS9R4Vy","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-15T10:07:46.632Z","updatedAt":"2026-09-15T10:07:46.632Z","reported":false}}],"$L5f"]

Suggested for you