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

Interactive Grid Pattern Background

Interactive Grid Max brings your Framer projects to life with a responsive grid background that reacts to user interaction. As visitors move their cursor, grid cells illuminate with smooth, customizable glow effects—creating a modern, engaging visual experience that feels both polished and dynamic.

Key Features:

Real-time Mouse Interaction – Grid cells respond smoothly to cursor movement with animated glow effects
Highly Customizable – Control cell size, glow color, border color, and background to match any brand
Performance Optimized – Efficient rendering ensures smooth animations and responsive interactions
Fully Responsive – Adapts seamlessly to all screen sizes and layouts
Ambient Visual Enhancements – Optional center glow and vignette overlay for added depth
Lightweight & Dependency-Free – No external packages required

Customization Controls:

Cell Size – Adjust grid density from fine to bold layouts (20px–200px)
Glow Color – Choose any color with adjustable transparency
Border Color – Define subtle or high-contrast grid lines
Background Color – Set the base canvas color
Ambient Glow – Toggle a soft radial glow at the center
Vignette Effect – Enable or disable edge darkening for focus

How to Use:

Drag Interactive Grid Max onto your Framer canvas
Resize it to fit your layout (ideal for full-screen backgrounds)
Customize grid density, colors, and effects in the properties panel
Layer content on top for hero sections, feature blocks, or full-page layouts
Preview the page to experience the interactive hover effects

Ideal Use Cases:

Hero backgrounds for landing pages
Portfolio and agency website headers
Product and feature showcases
SaaS and tech marketing sites
Interactive presentations and demos
Modern dashboards and interfaces
Event and conference websites
Creative studio portfolios

5a:[["$","$L5d",null,{"post":{"id":"019ee33c-3008-74ca-a937-264c43c86d39","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2c5f95ef-4f5f-4aa7-b151-21f07e16c5cf","name":"Creativa Studio","slug":"creativa","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/857517/avatar-yHnk3Xc3hC2mIwD9TNxRyUcfa7qJ8E.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Yt9U3yxjAKY3id9h5Mmt","resolved":true,"title":"Interactive Grid Max","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Interactive Grid Pattern Background","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Interactive Grid Max brings your Framer projects to life with a responsive grid background that reacts to user interaction. As visitors move their cursor, grid cells illuminate with smooth, customizable glow effects—creating a modern, engaging visual experience that feels both polished and dynamic."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features:","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Real-time Mouse Interaction – Grid cells respond smoothly to cursor movement with animated glow effects"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Highly Customizable – Control cell size, glow color, border color, and background to match any brand"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Performance Optimized – Efficient rendering ensures smooth animations and responsive interactions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully Responsive – Adapts seamlessly to all screen sizes and layouts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Ambient Visual Enhancements – Optional center glow and vignette overlay for added depth"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Lightweight & Dependency-Free – No external packages required"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Customization Controls:","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cell Size – Adjust grid density from fine to bold layouts (20px–200px)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Glow Color – Choose any color with adjustable transparency"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Border Color – Define subtle or high-contrast grid lines"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background Color – Set the base canvas color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Ambient Glow – Toggle a soft radial glow at the center"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Vignette Effect – Enable or disable edge darkening for focus"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How to Use:","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag Interactive Grid Max onto your Framer canvas"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Resize it to fit your layout (ideal for full-screen backgrounds)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customize grid density, colors, and effects in the properties panel"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Layer content on top for hero sections, feature blocks, or full-page layouts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Preview the page to experience the interactive hover effects"}]}]}],"attrs":{"type":null,"start":1}},{"type":"customHeading","content":[{"type":"text","text":"Ideal Use Cases:","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero backgrounds for landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio and agency website headers"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product and feature showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SaaS and tech marketing sites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive presentations and demos"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Modern dashboards and interfaces"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Event and conference websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative studio portfolios"}]}]}]}]},"introduction":"Playful Grid Pattern Background","slug":"interactive-grid-max","author":{"framerUserId":"2c5f95ef-4f5f-4aa7-b151-21f07e16c5cf","name":"Creativa Studio","slug":"creativa","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/857517/avatar-yHnk3Xc3hC2mIwD9TNxRyUcfa7qJ8E.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2c5f95ef-4f5f-4aa7-b151-21f07e16c5cf/2ee001gc","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-06-20T04:13:52.997Z","updatedAt":"2026-06-20T04:13:52.997Z","publishedAt":"2026-06-20T04:13:52.994Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://interactive-grid-max.framer.website/","price":"5","paymentUrl":"https://buy.polar.sh/polar_cl_bUJHte0qSEGgBd7ni3zkPqj7gHXW8SoAYXvLA3ylWHW","workshop":true,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"2DWskZBhIyjE66S0W7BY","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-20T04:13:53.032Z","updatedAt":"2026-06-20T04:13:53.032Z","reported":false}}],"$L5f"]

Suggested for you