5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/00zhqb0zqgnk3.js","/creators-assets/_next/static/immutable/chunks/0jb7r9vkvbp9b.js","/creators-assets/_next/static/immutable/chunks/3_vedwwik9kwx.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3y8qjjd_v0fjc.js","/creators-assets/_next/static/immutable/chunks/0_aohzx8_x6oa.js","/creators-assets/_next/static/immutable/chunks/2e6uhasjhfbil.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/0ccg8j7qcn1bd.js","/creators-assets/_next/static/immutable/chunks/1o0ogv90oxalc.js","/creators-assets/_next/static/immutable/chunks/0a1gpscfztyde.js","/creators-assets/_next/static/immutable/chunks/0t3q4gzvfui5n.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/41lhc7ix2xugk.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/30smfjlh8o71p.js","/creators-assets/_next/static/immutable/chunks/3-aog2q7la1hs.js","/creators-assets/_next/static/immutable/chunks/2a2w_2tavj0_e.js","/creators-assets/_next/static/immutable/chunks/3f-jmjjx_9lv_.js","/creators-assets/_next/static/immutable/chunks/10ydirfi9qu21.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/0lmmu21lg5-zj.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/05jm9t-fm5ei_.js","/creators-assets/_next/static/immutable/chunks/1pd9j9dvaikmb.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/2jl0sg8984bmg.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2q-c5-h7837do.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/2k4fp8uwg758i.js","/creators-assets/_next/static/immutable/chunks/1dzckq15yxafa.js","/creators-assets/_next/static/immutable/chunks/0g9mmnya96tz6.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T7fe,

Animated Grid – Interactive, Customizable Backgrounds

The Animated Grid component generates a responsive grid of shapes or images that animate with noise-driven flow and smooth hover reactions. Whether you’re building a hero section, a dynamic background, a creative footer, or an interactive portfolio, Animated Grid adds a layer of depth and energy that feels modern and polished.

Engaging Motion & Interaction

Organic noise animation: Add flowing, natural movement with fully adjustable amplitude, scale, and speed.
Hover effects: Shapes smoothly grow and react to cursor proximity with customizable boost, radius, and easing.
Dynamic control: Enable or disable noise for either a lively animated look or a clean, static grid.

Full Customization Controls

Animated Grid includes property controls so you can easily match your design style:

Grid layout: Adjust cell size and base shape size for density and scale.
Shapes or custom images: Choose from preset shapes (circle, square, triangle, diamond) or upload your own.
Colors & styling: Define shape colors, opacity, and cursor visibility.
Performance-friendly: Preview toggle ensures smooth editing inside Framer while running full animation on live sites.

Perfect For Modern Web Experiences

Use Animated Grid to:

Create subtle animated backgrounds for hero sections.
Add interactive texture to landing pages and SaaS websites.
Enhance portfolio showcases with reactive visuals.
Design creative footers with engaging motion.

5a:[["$","$L5d",null,{"post":{"id":"0199a933-84b4-73e3-a52c-4fc6e6096a36","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"e7589fb9-3011-41a6-8822-ba05b7f74cd0","name":"Brice Deguigne","slug":"brice-deguigne","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1226062/avatar-NzwFi5duHIm2y18KywmPbPHSlrRQJ2.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"EC69DhIEfQhhCRIbZrxK","resolved":true,"title":"Animated Grid","body":"$5e","bodyJson":null,"introduction":"Living backgrounds, zero effort.","slug":"animated-grid","author":{"framerUserId":"e7589fb9-3011-41a6-8822-ba05b7f74cd0","name":"Brice Deguigne","slug":"brice-deguigne","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1226062/avatar-NzwFi5duHIm2y18KywmPbPHSlrRQJ2.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/EC69DhIEfQhhCRIbZrxK/animated-grid-uXkcsAXrNWBoUeyoTllgrtimORPCDt","metadata":{"tint":{"h":240,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-09-24T18:02:54.644Z","updatedAt":"2026-03-09T07:28:25.570Z","publishedAt":"2025-10-03T08:32:29.876Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/AnimatedGrid-qSs3.js@NY2cFwyGwTNe5h1i5SvX","previewUrl":"https://heavenly-type-157874.framer.app/","price":null,"paymentUrl":null,"workshop":true,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"NY2cFwyGwTNe5h1i5SvX","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":12,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-10-03T08:32:29.876Z","updatedAt":"2025-10-03T08:32:29.876Z","reported":false}}],"$L5f"]

Suggested for you