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

Wavy Grid Hero

Create futuristic, high-performance, and immersive backdrops with the Wavy Grid Hero visualizer. Built in raw, optimized WebGL2, this component renders an organic, glowing cybernetic grid that flows smoothly in real time and bends dynamically under the cursor.

Key Features

🌊 Dynamic Wave Terrain: Three distinct layers of sinusoidal waves (primary, secondary, and tertiary) combine to generate complex, flowing three-dimensional grid motions.
🖱 Fluid Cursor Interaction: Mesh vertices react dynamically to your pointer, warping lines as you move. Supports standard linear smoothing or customizable spring physics.
💡 Glowing Elevation Gradient: Grid lines shift color dynamically between customizable start and end values based on height, creating a vibrant elevation-glow effect.
🌀 Circular Vignette Fade: Smoothly blends the edges of the grid into your background using customizable inner and outer fade bounds.

Controls & Customization

Line Start / End: Define the color spectrum of the grid lines as they elevate.
Ambient Color & Intensity: Customize the background tint color behind the grid lines.
Grid Density: Adjust the spacing and count of horizontal/vertical lines.
Line Thickness & Sharpness: Control the thickness of the grid lines and the intensity of their neon glow.
Wave Parameters: Independently tune frequency and amplitude for all three wave layers.
Mouse Strength & Physics: Toggle mouse interaction, adjust cursor influence bounds, and fine-tune spring stiffness or damping settings.
Circular Fade: Control vignette inner/outer radius boundaries to control how the grid culls near edges.

5a:[["$","$L5d",null,{"post":{"id":"019f7935-92ab-77a9-ac4b-1a6406a3768a","title":null,"body":"

A grid shader hero with waves and interactivity.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A grid shader hero with waves and interactivity."}]}]},"author":{"framerUserId":"3a8c5e99-7683-4189-9006-b96792ab1ca9","name":"Shivani Das","slug":"shivanidas","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/3a8c5e99-7683-4189-9006-b96792ab1ca9/a26zvqqg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"rL0OilizRPZ3vaAUaYis","resolved":true,"title":"Wavy Grid","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Wavy Grid Hero","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Create futuristic, high-performance, and immersive backdrops with the "},{"type":"text","text":"Wavy Grid Hero","marks":[{"type":"bold"}]},{"type":"text","text":" visualizer. Built in raw, optimized WebGL2, this component renders an organic, glowing cybernetic grid that flows smoothly in real time and bends dynamically under the cursor."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"ocean","emoji":"🌊"}},{"type":"text","text":" "},{"type":"text","text":"Dynamic Wave Terrain:","marks":[{"type":"bold"}]},{"type":"text","text":" Three distinct layers of sinusoidal waves (primary, secondary, and tertiary) combine to generate complex, flowing three-dimensional grid motions."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"computer_mouse","emoji":"🖱"}},{"type":"text","text":" "},{"type":"text","text":"Fluid Cursor Interaction:","marks":[{"type":"bold"}]},{"type":"text","text":" Mesh vertices react dynamically to your pointer, warping lines as you move. Supports standard linear smoothing or customizable spring physics."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"bulb","emoji":"💡"}},{"type":"text","text":" "},{"type":"text","text":"Glowing Elevation Gradient:","marks":[{"type":"bold"}]},{"type":"text","text":" Grid lines shift color dynamically between customizable start and end values based on height, creating a vibrant elevation-glow effect."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"cyclone","emoji":"🌀"}},{"type":"text","text":" "},{"type":"text","text":"Circular Vignette Fade:","marks":[{"type":"bold"}]},{"type":"text","text":" Smoothly blends the edges of the grid into your background using customizable inner and outer fade bounds."}]},{"type":"paragraph"}]}]},{"type":"customHeading","content":[{"type":"text","text":"Controls & Customization","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Line Start / End:","marks":[{"type":"bold"}]},{"type":"text","text":" Define the color spectrum of the grid lines as they elevate."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Ambient Color & Intensity:","marks":[{"type":"bold"}]},{"type":"text","text":" Customize the background tint color behind the grid lines."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Grid Density:","marks":[{"type":"bold"}]},{"type":"text","text":" Adjust the spacing and count of horizontal/vertical lines."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Line Thickness & Sharpness:","marks":[{"type":"bold"}]},{"type":"text","text":" Control the thickness of the grid lines and the intensity of their neon glow."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Wave Parameters:","marks":[{"type":"bold"}]},{"type":"text","text":" Independently tune frequency and amplitude for all three wave layers."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Mouse Strength & Physics:","marks":[{"type":"bold"}]},{"type":"text","text":" Toggle mouse interaction, adjust cursor influence bounds, and fine-tune spring stiffness or damping settings."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Circular Fade:","marks":[{"type":"bold"}]},{"type":"text","text":" Control vignette inner/outer radius boundaries to control how the grid culls near edges."}]}]}]}]},"introduction":"An interactive grid shader","slug":"wavy-grid","author":{"framerUserId":"3a8c5e99-7683-4189-9006-b96792ab1ca9","name":"Shivani Das","slug":"shivanidas","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/3a8c5e99-7683-4189-9006-b96792ab1ca9/a26zvqqg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/3a8c5e99-7683-4189-9006-b96792ab1ca9/019f7932-d42b-74a8-8649-26255d075b06.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1441,"height":867}}],"post":null,"createdAt":"2026-07-19T07:09:41.649Z","updatedAt":"2026-07-19T11:18:49.034Z","publishedAt":"2026-07-19T07:09:41.647Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://better-toggle-330038.framer.app/","price":"12","paymentUrl":"https://vectorvesper.lemonsqueezy.com/checkout/buy/477c260f-b9f0-415a-a8dd-4ea857241088","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"D1OdZcbYlhd6evoESyKT","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-19T07:09:41.931Z","updatedAt":"2026-07-19T07:09:41.931Z","reported":false}}],"$L5f"]

Suggested for you