Dynamic Bento

Dynamic Bento Grid

Bring your visuals to life with a powerful, highly customizable bento-style grid. Whether you're showcasing photography, product visuals, mood boards, case studies, or creative content, this component gives you complete control — from grid structure to animations, interactions, and popup lightbox behavior.

With Auto, Preset, and Custom layout modes, you can build anything from simple clean grids to complex asymmetric bento layouts with spanning hero items. Hover interactions, desaturation effects, scaling, rounded corners, borders, and a beautiful fullscreen popup viewer make this component suitable for modern, premium websites.

⭐ Key Features

Layout & Structure

• Auto grid mode (uniform cells)

• 6 prebuilt presets (Masonry, Spotlight, Hero layouts)

• Custom layout mode (define your own column/row spans)

• Up to 10 columns and 10 rows

• Adjustable spacing, radius, borders, and canvas background

Media Support

• Supports images & videos (JPG, PNG, WebP, MP4, WebM, etc.)

• Auto-looping & muted videos

• Per-item alt text for accessibility & SEO

• Safe fallback media included

Interactions & Hover Effects

• Smooth hover scale animation

• Optional grayscale-on-hover desaturation

• Adjustable animation speed

Full-screen Popup / Lightbox

• Optional lightbox with fade + scaling animation

• Keyboard navigation (← → Esc)

• Customizable backdrop color & opacity

• Closable with click or button

• Fully customizable close button (size, position, color, radius)

Performance & Quality

• Lightweight code

• Optimized rendering using useMemo, useCallback, transitions

• Responsive lightbox on mobile

🎯 Best For

Perfect for designers, creators, and brands building:

• Portfolio sections

• Showcase galleries

• Photography grids

• Case study layouts

• Featured project bento grids

• Moodboards & inspiration walls

• Product image collections

• Blog or editorial media layouts

🚀 Use It When You Need

• A beautiful, modern, Pinterest-style bento grid

• Highlighting hero images or asymmetric layouts

• A gallery with premium hover and popup effects

• A customizable lightbox viewer built into the component

• Simple setup but advanced layout control