---
title: "HeroMediaGrid — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Dulaj Design · Sections. Dynamic media grid for Framer site"
canonical: "https://framer.elliotli.dev/component/heromediagrid"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/HeroMediaGrid

# HeroMediaGrid

Dynamic media grid for Framer site

[View on Framer](https://framer.com/marketplace/components/heromediagrid/?via=elliot-li)

![HeroMediaGrid preview image 1](https://framer.elliotli.dev/og/component/heromediagrid/0a03c8f0d9ed9b4f/1600x1200.jpg)

## Summary

Dynamic media grid for Framer site

## Description

**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](mailto:dulajdilshan766@gmail.com) or on X @Dulajweb.

## Rank history [How rankings work →](/terms#rankings)

-   All · #8505

## Details

- **Author**: Dulaj Design
- **Price**: $15.00
- **Published**: 2026-07-26
- **Updated**: 2026-09-03
- **Added**: 2026-07-26
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes