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

Flux Grid is a premium interactive component designed to instantly elevate landing pages, portfolio headers, and dark-mode websites. Built with smooth WebGL performance and fully integrated into Framer's native properties panel, it brings cinematic, mathematical beauty directly onto your canvas—zero coding required.

Why Your Projects Need This Component

Immersive Cursor Physics: The rods don't just move—they react. Watch them dynamically pivot away from their fixed bases, lifting into a fluid 3D dome right around your visitor's cursor.
100% Native Framer Controls: Adjust colors, physics, and camera angles on the fly. You get total design freedom without ever touching a single line of code.
Silky-Smooth Performance: High-performance rendering ensures the animation remains incredibly responsive, loading instantly on modern browsers and mobile devices.

Infinite Customization at Your Fingertips

Every parameter of the Kinetic Wave is completely customizable directly from the Framer sidebar:

Interactive Physics: Fine-tune the cursor interaction with adjustable Hover Radius, Repulsion strength, and Mouse Snap speeds.
Rod Dynamics: Easily scale the density, Rod Height, and Rod Width. Give it a futuristic cyber-aesthetic with adjustable Tip Glow and custom Tip Size.
Dynamic Gradient Colors: Blend up to 4 distinct rod colors to create stunning, modern gradients that seamlessly match your brand’s palette.
Cinematic Vignette & Depth: Add depth of field and dramatic shadows with a customizable vignette (Vignette Strength, Vignette Color, and start/end boundaries) alongside flexible 3D Camera Angles.

5a:[["$","$L5d",null,{"post":{"id":"019f6a68-d767-7778-ae33-7c554dfeee23","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0fb72d5e-f512-4cde-b2ca-efbbf26bbf1a","name":"Milan Dragovic","slug":"milan-dragovic","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0fb72d5e-f512-4cde-b2ca-efbbf26bbf1a/tbtc8s0i","followed":false,"followsYou":false},"media":[],"resources":[{"id":"TBJJ8LcBgEEiyV5w650z","resolved":true,"title":"Flux Grid","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Flux Grid","marks":[{"type":"bold"}]},{"type":"text","text":" is a premium interactive component designed to instantly elevate landing pages, portfolio headers, and dark-mode websites. Built with smooth WebGL performance and fully integrated into Framer's native properties panel, it brings cinematic, mathematical beauty directly onto your canvas—"},{"type":"text","text":"zero coding required.","marks":[{"type":"bold"}]}]},{"type":"customHeading","content":[{"type":"text","text":"Why Your Projects Need This Component"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Immersive Cursor Physics:","marks":[{"type":"bold"}]},{"type":"text","text":" The rods don't just move—they react. Watch them dynamically pivot away from their fixed bases, lifting into a fluid 3D dome right around your visitor's cursor."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"100% Native Framer Controls:","marks":[{"type":"bold"}]},{"type":"text","text":" Adjust colors, physics, and camera angles on the fly. You get total design freedom without ever touching a single line of code."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Silky-Smooth Performance:","marks":[{"type":"bold"}]},{"type":"text","text":" High-performance rendering ensures the animation remains incredibly responsive, loading instantly on modern browsers and mobile devices."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Infinite Customization at Your Fingertips"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Every parameter of the "},{"type":"text","text":"Kinetic Wave","marks":[{"type":"bold"}]},{"type":"text","text":" is completely customizable directly from the Framer sidebar:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive Physics:","marks":[{"type":"bold"}]},{"type":"text","text":" Fine-tune the cursor interaction with adjustable "},{"type":"text","text":"Hover Radius","marks":[{"type":"code"}]},{"type":"text","text":", "},{"type":"text","text":"Repulsion","marks":[{"type":"code"}]},{"type":"text","text":" strength, and "},{"type":"text","text":"Mouse Snap","marks":[{"type":"code"}]},{"type":"text","text":" speeds."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Rod Dynamics:","marks":[{"type":"bold"}]},{"type":"text","text":" Easily scale the density, "},{"type":"text","text":"Rod Height","marks":[{"type":"code"}]},{"type":"text","text":", and "},{"type":"text","text":"Rod Width","marks":[{"type":"code"}]},{"type":"text","text":". Give it a futuristic cyber-aesthetic with adjustable "},{"type":"text","text":"Tip Glow","marks":[{"type":"code"}]},{"type":"text","text":" and custom "},{"type":"text","text":"Tip Size","marks":[{"type":"code"}]},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dynamic Gradient Colors:","marks":[{"type":"bold"}]},{"type":"text","text":" Blend up to "},{"type":"text","text":"4 distinct rod colors","marks":[{"type":"bold"}]},{"type":"text","text":" to create stunning, modern gradients that seamlessly match your brand’s palette."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cinematic Vignette & Depth:","marks":[{"type":"bold"}]},{"type":"text","text":" Add depth of field and dramatic shadows with a customizable vignette ("},{"type":"text","text":"Vignette Strength","marks":[{"type":"code"}]},{"type":"text","text":", "},{"type":"text","text":"Vignette Color","marks":[{"type":"code"}]},{"type":"text","text":", and start/end boundaries) alongside flexible 3D "},{"type":"text","text":"Camera Angles","marks":[{"type":"code"}]},{"type":"text","text":"."}]}]}]}]},"introduction":"3D interactive pattern","slug":"flux-grid","author":{"framerUserId":"0fb72d5e-f512-4cde-b2ca-efbbf26bbf1a","name":"Milan Dragovic","slug":"milan-dragovic","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0fb72d5e-f512-4cde-b2ca-efbbf26bbf1a/tbtc8s0i","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0fb72d5e-f512-4cde-b2ca-efbbf26bbf1a/019f6a68-ca8d-709e-950b-5415754851a0.jpg","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-07-16T10:11:23.328Z","updatedAt":"2026-07-16T14:55:43.681Z","publishedAt":"2026-07-16T10:11:23.313Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/FluxGrid-5QBjVW.js@frT6bJtQVpLJsmAkclRU","previewUrl":"https://flux-grid.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"frT6bJtQVpLJsmAkclRU","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":11,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-16T10:11:23.623Z","updatedAt":"2026-07-16T10:11:23.623Z","reported":false}}],"$L5f"]

Suggested for you