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

Add dynamic liquid motion, flowing silk folds, and interactive shader depth to hero sections, modern landing pages, and web apps with real-time WebGL rendering.

Features

Real-time WebGL liquid wave physics
Shader-powered multi-point color gradient blending
Directional wave folding and customizable spiral twirl
Curated color palettes plus complete custom color support
Automatic frame-budgeted GPU resolution scaling
Built-in film grain filter to eliminate color banding
Battery-saving viewport and visibility throttling
Native accessibility support with reduced-motion detection
Non-blocking fallback rendering for unsupported browsers
Zero external asset or image texture dependencies

Customization Options

Animation speed
Wave direction angle
Wave bend height
Twirl spiral intensity
Motion phase offset
Curated color presets (Ocean, Orchid, Ice, Aurora, Showreel)
Custom color array or hex palette inputs
Overall shader scale
Edge softness blur
Film grain overlay intensity
Corner radius
GPU quality mode (Auto, High, Economy)
Live preview toggle

How to Use

Drop the Wave Gradient component onto your Framer canvas
Set width and height to 100% or pin across your section
Select a curated color preset or input custom brand hex codes
Tune wave scale, twist strength, and direction angle
Set performance quality to Auto for instant mobile optimization
Publish your site for high-frame-rate fluid liquid visuals

Use Cases

Premium SaaS hero sections
AI startup landing pages
Fintech background panels
Modern design portfolio headers
Interactive card and banner backgrounds
Mobile app product launch sites
Conference and event teasers
Waitlist landing pages
Ambient dark-mode section backdrops
Product feature highlight blocks

5a:[["$","$L5d",null,{"post":{"id":"01a0e905-641b-76e9-8b4f-29561c87fb59","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":"mcjLhJxQ50TDMu9Y3shV","resolved":true,"title":"Wave Gradient","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Add dynamic liquid motion, flowing silk folds, and interactive shader depth to hero sections, modern landing pages, and web apps with real-time WebGL rendering."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Real-time WebGL liquid wave physics"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Shader-powered multi-point color gradient blending"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Directional wave folding and customizable spiral twirl"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Curated color palettes plus complete custom color support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Automatic frame-budgeted GPU resolution scaling"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Built-in film grain filter to eliminate color banding"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Battery-saving viewport and visibility throttling"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Native accessibility support with reduced-motion detection"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Non-blocking fallback rendering for unsupported browsers"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Zero external asset or image texture dependencies"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Customization Options"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animation speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Wave direction angle"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Wave bend height"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Twirl spiral intensity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Motion phase offset"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Curated color presets (Ocean, Orchid, Ice, Aurora, Showreel)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom color array or hex palette inputs"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Overall shader scale"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Edge softness blur"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Film grain overlay intensity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Corner radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"GPU quality mode (Auto, High, Economy)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Live preview 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 Wave Gradient component onto your Framer canvas"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set width and height to 100% or pin across your section"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Select a curated color preset or input custom brand hex codes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tune wave scale, twist strength, and direction angle"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set performance quality to Auto for instant mobile optimization"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Publish your site for high-frame-rate fluid liquid visuals"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Use Cases"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Premium SaaS hero sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"AI startup landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fintech background panels"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Modern design portfolio headers"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive card and banner backgrounds"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Mobile app product launch sites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Conference and event teasers"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Waitlist landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Ambient dark-mode section backdrops"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product feature highlight blocks"}]}]}]}]},"introduction":"Fluid WebGL mesh background animat","slug":"wave-gradient","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/01a0e905-3bb7-760f-aeb0-d05a047e3b70.webp","metadata":{"tint":{"h":234,"s":67,"l":27},"width":640,"height":480}}],"post":null,"createdAt":"2026-09-28T17:17:18.930Z","updatedAt":"2026-09-28T17:17:18.930Z","publishedAt":"2026-09-28T17:17:18.926Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.com/m/Wave-Gradient-7nhOCR.js@Yu6oqGrgb08sxbvk713x","previewUrl":"https://capable-someone-866308.framer.app","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"Yu6oqGrgb08sxbvk713x","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-28T17:17:19.771Z","updatedAt":"2026-09-28T17:17:19.771Z","reported":false}}],"$L5f"]

Suggested for you