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

🎯 What It Does

A powerful, ultra-customizable Bento Grid component that displays your static and dynamic media (Videos/Images/Components) in a beautiful layout with automatic or manual spanning for visual variety, amazing lightbox feature, external/internal linking and hover interactions.

🔌 Flexible Data Sources

Multiple Collection Lists - Connect one or multiple CMS Collection Lists simultaneously
Gallery Fields - Perfect for CMS page galleries with image/video content
Static Items - Manually add any images, videos, or custom components
Content Modes - Display pure media (images/videos) OR custom Framer components (cards, buttons, etc.)

📐 Smart Grid Layouts

Responsive Mode - Auto 3-column layout that shows ALL items dynamically
Fixed Mode - Custom columns/rows with precise control
Automatic Spanning - Items randomly span across cells (2x1, 1x2, 2x2) for bento effect
Manual Spanning - Configure specific items to span (Fixed mode only)
Min Height Control - Set minimum height (25-1000px) for consistent proportions
Smart Row Calculation - Automatically calculates required rows based on item count and spanning

🎬 Video Control Mastery

Autoplay Priority - Videos play automatically on grid or trigger on hover
Play on Hover - Interactive video playback when hovering
Sound on Hover - Unmute audio on hover for engagement
Reset on Exit - Return video to start when hover ends
Loop Control - Continuous playback in grid view

🖼️ Advanced Lightbox

Full-Screen Viewer - Click any item to expand in beautiful lightbox
Navigation Controls - Arrow buttons and keyboard navigation (← →)
Close Button - Customizable position (top/right) with custom icons
Control Display - Internal (overlay) or External (outside with 8px gap)
Video Controls - Toggle native controls in lightbox
Autoplay Options - Choose if videos play automatically when opened
Custom Styling - Background color, border radius, button colors & blur effects
Custom Icons - Upload SVG icons for arrows and close button

✨ Hover Animations

Zoom Effect - Scale media inside tile (1.0-1.5x) without affecting layout
Color Filters - Apply black & white, sepia, or blur effects on hover
Smooth Transitions - Configurable duration (0.1-1s)
Transform Origin - Perfectly centered scaling

🎨 Visual Customization

Gap Control - Spacing between grid items (0-100px)
Border Radius - Rounded corners for items and lightbox (0-50px)
Fade-In Animation - Staggered entrance with delay control (0-200ms)
Randomize Order - Shuffle items for variety on each load

🎯 Perfect For

Portfolio galleries with mixed media
Product showcases with CMS integration
Team member grids with custom cards
Video galleries with playback control
Dynamic landing page sections
Blog post galleries
Case study presentations

⚙️ Easy Setup

Add component to your Framer canvas
Choose Data Source (Collections/Gallery/Static)
Connect your CMS or drag in media
Select Display Mode (Responsive/Fixed)
Enable Spanning for bento effect
Customize hover, lightbox, and video settings
Adjust styling to match your brand

🚀 Key Features

Connects to multiple data sources simultaneously
Shows ALL items with smart row calculation
Professional lightbox with keyboard support
Granular video playback control
Non-intrusive hover zoom (media only, not tile)
Distributed spanning (top, middle, bottom)
Responsive out-of-the-box
Zero layout shift on hover
Custom component support (not just media)
Professional-grade animations

⚠️ Commercial use restrictions :* - Sharing with third parties who haven't bought the component on Framer Marketplace, nor on LemonSqueezy's FramerMaster's account is PROHIBITED

* - Use of this component in templates, direct resell or shared link without payment is strictly PROHIBITEDRefund policy :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":"019a6e1f-ae6a-7133-8865-adfbe52bc565","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":"eWuvqLbuxTR4d1Dm7CcX","resolved":true,"title":"CMS Bento Video/Img","body":"$5e","bodyJson":null,"introduction":"","slug":"cms-bento-video-img","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/eWuvqLbuxTR4d1Dm7CcX/cms-bento-video-img-NdJ4okrGafF6BBOsftvpgL0XFwYuL5","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-31T16:02:46.882Z","updatedAt":"2025-12-05T15:36:58.645Z","publishedAt":"2025-11-10T14:16:01.386Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://frequent-start-925196.framer.app/","price":"8","paymentUrl":"https://buy.polar.sh/polar_cl_W9nRYKzJKXPjVj05s0eGTZv3qYwwo09M3cnw43FRiAy","workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"41CEZhZl2DiaVBZrJxCB","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-11-10T14:16:01.386Z","updatedAt":"2025-11-10T14:16:01.386Z","reported":false}}],"$L5f"]

Suggested for you