5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3jpuro209qqra.js","/creators-assets/_next/static/immutable/chunks/077g_l9cwe8hz.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ouyrs2yz196q.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3orcs6a8eyfvz.js","/creators-assets/_next/static/immutable/chunks/3-tcb9ouhlqkm.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/1p31g3z3kho5v.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/2885u7skzba5_.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/1fo1h_o5odhhk.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v-er0xp5q011.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2rwbpl35w01v4.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/0djs9po3g19ek.js","/creators-assets/_next/static/immutable/chunks/1_ej2mmnwnp37.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2_qutx8yar-up.js","/creators-assets/_next/static/immutable/chunks/0bcmpcsc4ih7d.js"],"PostDetailCard"] 5d:T770,

About MediaGrid Pro adds an interactive, high impact media gallery directly to your Framer projects. Drop it into a hero section, portfolio showcase, or creative gallery to display dynamic images and autoplaying videos with fluid animations and hover focus effects.

What it does Renders a custom responsive media grid that smoothly reveals your images and videos with staggered loading effects. It handles interactive hover zoom, automatically dims surrounding elements to focus on hovered media, supports video autoplay, and offers smooth scrolling easing. It also includes an optional fixed UI menu bar and customizable preloader animations.

What you can customize

Layout and spacing: Set column counts independently for desktop, tablet, and mobile, customize grid gap, inner padding, corner radius, image fit modes, and specify wide spanning items.
Animations and reveals: Adjust stagger timings, reveal durations, flash speed, hover zoom intensity, sibling dimming opacity, and preloader load times.
Controls and UI: Toggle smooth scroll easing, video autoplay options, fixed UI navigation controls, menu toggle settings, copyright details, background shades, and UI colors.

Great for

Hero sections and landing pages
Creative agency portfolios and photo galleries
Product showcases and media showcases
Modern studio websites and interactive showcases

Share your build If you ship something cool with it, post it on X and tag me @Dulajweb, or send it over. I would love to see what you create.

Need help? Questions or feedback? Reach me anytime at dulajdilshan766@gmail.com or on X @Dulajweb.

59:[["$","$L5c",null,{"post":{"id":"019f9d16-49cd-7529-8cf6-94a43cc59de0","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0bce05c0-4760-4da5-b2f4-851230a1db47","name":"Dulaj dilshan","slug":"dulaj-dilshan-gy7b4j","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/132150/avatar-ZgETawWJyCuMuzgHBdPTUADcWJAJWn.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"UWRfaD8ae5wyl43wLBgu","resolved":true,"title":"HeroMediaGrid","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"About","marks":[{"type":"bold"}]},{"type":"text","text":" MediaGrid Pro adds an interactive, high impact media gallery directly to your Framer projects. Drop it into a hero section, portfolio showcase, or creative gallery to display dynamic images and autoplaying videos with fluid animations and hover focus effects."}]},{"type":"paragraph","content":[{"type":"text","text":"What it does","marks":[{"type":"bold"}]},{"type":"text","text":" Renders a custom responsive media grid that smoothly reveals your images and videos with staggered loading effects. It handles interactive hover zoom, automatically dims surrounding elements to focus on hovered media, supports video autoplay, and offers smooth scrolling easing. It also includes an optional fixed UI menu bar and customizable preloader animations."}]},{"type":"paragraph","content":[{"type":"text","text":"What you can customize","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Layout and spacing: Set column counts independently for desktop, tablet, and mobile, customize grid gap, inner padding, corner radius, image fit modes, and specify wide spanning items."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animations and reveals: Adjust stagger timings, reveal durations, flash speed, hover zoom intensity, sibling dimming opacity, and preloader load times."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Controls and UI: Toggle smooth scroll easing, video autoplay options, fixed UI navigation controls, menu toggle settings, copyright details, background shades, and UI colors."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Great for","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero sections and landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative agency portfolios and photo galleries"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product showcases and media showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Modern studio websites and interactive showcases"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Share your build","marks":[{"type":"bold"}]},{"type":"text","text":" If you ship something cool with it, post it on X and tag me @Dulajweb, or send it over. I would love to see what you create."}]},{"type":"paragraph","content":[{"type":"text","text":"Need help?","marks":[{"type":"bold"}]},{"type":"text","text":" Questions or feedback? Reach me anytime at "},{"type":"text","text":"dulajdilshan766@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:dulajdilshan766@gmail.com","target":"_blank"}}]},{"type":"text","text":" or on X @Dulajweb."}]}]},"introduction":"Dynamic media grid for Framer site","slug":"heromediagrid","author":{"framerUserId":"0bce05c0-4760-4da5-b2f4-851230a1db47","name":"Dulaj dilshan","slug":"dulaj-dilshan-gy7b4j","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/132150/avatar-ZgETawWJyCuMuzgHBdPTUADcWJAJWn.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0bce05c0-4760-4da5-b2f4-851230a1db47/019f9d16-3219-76e0-b952-68ad7ecdb10e.png"}],"post":null,"createdAt":"2026-07-26T06:21:51.023Z","updatedAt":"2026-08-24T03:55:22.109Z","publishedAt":"2026-07-26T06:21:51.018Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://heromediagrid.framer.website/","price":"8","paymentUrl":"https://buy.polar.sh/polar_cl_iiw4174v4H1oQjtJrIhqmi2LP1h6GOIMgzm153sPsVl","workshop":false,"categories":[{"id":"4fdfe3ed-ecd1-4761-a9df-b36c0c38e974","name":"Layout","slug":"layout"}],"lastSaveId":"BMAzLL21Ogedye5MZA7y"}}],"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-26T06:21:51.437Z","updatedAt":"2026-07-26T06:21:51.437Z","reported":false}}],"$L5e"]

Suggested for you