CMS VideoImg Masonry

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

1. Add the component to your Framer canvas

2. Choose your data source (Collection List, Multiple Collections, or Static)

3. Connect your CMS or add static content

4. Customize layout, animations, and interactions

5. 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.