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

The most powerful and complete masonry grid component for Framer – Display your videos, images, and custom components in a stunning, fully customizable masonry layout with advanced features that give you total control. If you need to only display Images only in Masonry grid, please see our other masonry Grid component.

🎯 What It Does

Create beautiful, Pinterest-style masonry grids that automatically organize your content into columns with varying heights. Perfect for portfolios, galleries, video showcases, and media-rich websites.

🔌 Flexible Data Sources

CMS Collection List – Connect to a single Framer CMS collection
Multiple Collections – Mix content from up to 10 different collections - to display Images, Videos & Components, all together in the grid !
Static Content – Manually link videos, images, or custom components to the masonry grid

✨ Powerful Video Features

Video Autoplay – Priority setting that controls automatic playback (overrides all other settings)
Play on Hover – Videos play only when user hovers over them (works when autoplay is OFF)
Sound on Hover – Unmute videos on mouse hover for interactive experiences
Reset on Hover Out – Restart videos from beginning when hover ends
Video Controls in Lightbox – Full playback controls when viewing in expanded mode

🎨 Advanced Layout Options

Keep Image Ratio – Maintains original aspect ratios for both videos and images
Responsive/Fixed Columns – Auto-adjusts (2-4 columns) or set custom column count (1-10)
Randomize Order – Shuffle content randomly for dynamic layouts
Custom Heights – Set min/max heights or let aspect ratios determine sizing
Adjustable Gap – Control spacing between items (0-100px)

🌀 Stunning Visual Effects

Vertical Parallax – Column-specific parallax with NO top gaps at any intensity (1-10x)
Hover Scale – Smooth zoom effect on mouse hover (1-1.5x)
Staggered Fade-In – Items appear with customizable delays (0-200ms)
Smooth Transitions – Adjustable animation duration (0.1-1s)

🔍 Professional Lightbox

Click to Expand – Open videos/images in full-screen overlay
Navigation Arrows – Browse through content with keyboard or mouse
Custom Icons – Upload your own SVG icons for controls
Styled Buttons – Customize colors, radius, and blur effects
Keyboard Support – ESC to close, arrow keys to navigate

🎛️ Ultra Customizable

Border radius control for videos and lightbox
Custom background colors for all control buttons
Object-fit options for images (cover, contain, fill, scale-down)
Backdrop blur effects on lightbox controls
Full control over lightbox appearance and behavior

💡 Perfect For

Video portfolios and showreels
Photography and design galleries
Product showcases with mixed media
Blog post grids with featured images
Creative agency websites
E-commerce visual displays

🚀 Easy Setup

Add the component to your Framer canvas
Choose your data source (Collection List, Multiple Collections, or Static)
Connect your CMS or add static content
Customize layout, animations, and interactions
Publish and enjoy your stunning masonry grid !

For any question about the setup of the component, updates or improvements, please send us a mail at framermaster1@gmail.com. If you encounter an issue with your purchase, please contact us within 7 days and we’ll do our best to resolve it. Because this is a digital product, all sales are considered final. Once you complete your purchase, you'll get instant access to the Framer component. Since digital items can't be returned, we're not able to offer refunds, exchanges, or cancellations. Refunds are only issued in cases of duplicate charges.Please make sure to review the features and preview materials before buying. If you're unsure or have any questions, feel free to reach out — we're happy to help before you commit.

By completing your purchase, you're confirming you understand and accept these terms.

5a:[["$","$L5d",null,{"post":{"id":"019a186d-c737-7a7c-8600-58f18805e801","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"a0731dc2-e627-4a50-81d2-75a7b5791669","name":"Product Dude","slug":"product-dude","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/76312/avatar-SsuYbAXh9sy2AoOnT4NCMkJApE2lG6.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"qzQj9GI3OziaK3qqX4ef","resolved":true,"title":"CMS VideoImg Masonry","body":"$5e","bodyJson":null,"introduction":"","slug":"cms-video-img-masonr","author":{"framerUserId":"a0731dc2-e627-4a50-81d2-75a7b5791669","name":"Product Dude","slug":"product-dude","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/76312/avatar-SsuYbAXh9sy2AoOnT4NCMkJApE2lG6.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/qzQj9GI3OziaK3qqX4ef/cms-video-img-masonr-xb3d5xXFJSc7FJBAv86FxaYM7rHKPA","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-18T00:29:05.743Z","updatedAt":"2025-12-05T15:31:38.151Z","publishedAt":"2025-10-24T22:53:58.967Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://refreshed-department-879045.framer.app/","price":"9","paymentUrl":"https://buy.polar.sh/polar_cl_jWW9NrcUA2l4d6w04vLpMLmv978vo9CXRl0PL3SLcQy","workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"ZDhs2jAKvOnsQlXILnxS","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-10-24T22:53:58.967Z","updatedAt":"2025-10-24T22:53:58.967Z","reported":false}}],"$L5f"]

Suggested for you