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.
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
Supports images & videos (JPG, PNG, WebP, MP4, WebM, etc.)
Auto-looping & muted videos
Per-item alt text for accessibility & SEO
Safe fallback media included
Smooth hover scale animation
Optional grayscale-on-hover desaturation
Adjustable animation speed
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)
Lightweight code
Optimized rendering using useMemo, useCallback, transitions
Responsive lightbox on mobile
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
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
Frame Craft
