About Spotlight Bento Grid
The Spotlight Bento Grid is an interactive bento-style feature section designed for product pages, landing pages, and premium visual storytelling. In its default state, the grid stays clean and restrained with desaturated image cards. On hover, the selected card expands across the full row, restores its color, and reveals a heading with supporting text. At the same time, the neighboring card is pushed into the opposite row, joining the other inactive cards in a clean, uniform layout. This creates a smooth “spotlight” effect that gives users more detail only when they want it.
Layout System
The component uses a three-column bento grid with alternating row structure.
Top row: one wider card spanning two columns, paired with one smaller card
Bottom row: the opposite structure, creating visual balance
On hover, the active card expands across the entire row
The displaced card moves into the other row and aligns with the inactive cards
Inactive cards become uniform in width when grouped together
Motion and Transitions
The Spotlight Bento Grid uses carefully tuned spring-based motion for a smooth, premium feel.
The motion controls:
Card expansion
Card repositioning
Image color restoration
Text reveal
The transitions are designed to feel controlled and refined, not bouncy or gimmicky. The active card expands with enough speed to feel responsive, while the supporting layout changes smoothly enough to keep the grid readable.
Visual Design
The visual language is image-heavy, minimal, and product-focused.
Each card follows the same design system:
Consistent corner radius
Consistent internal paddings
Consistent text placement and spacing
Consistent image behavior
Consistent spacing between cards
Unified typography settings
Perfect contrast between text and image
Customization
You can customize each card separately:
Card image
Heading
Supporting text
This means each card can represent a different feature, service, category, project, or content item.
The default version uses four AI-generated smartphone feature images, but you can replace them with you own product imagery, brand visuals, screenshots, photography, or abstract visuals.
Great For
The Spotlight Bento Grid is ideal for product pages, feature sections, startup landing pages, SaaS websites, hardware launches, app showcases, portfolio case studies, and premium service pages. It works especially well when you want to present multiple features without overwhelming the user immediately—the grid stays clean at first, then reveals more detail through interaction when a specific card is hovered.
Responsiveness
The Spotlight Bento Grid is built with desktop interaction and smaller-screen usability in mind.
On desktop, the full spotlight interaction is active: cards expand across the row, the surrounding layout shifts, the hovered image restores its color, and the heading + supporting text reveal.
On tablet and mobile, the layout switches to a clean single-column stack where cards sit one above the other. Since row-based expansion is not practical on smaller screens, the expanding layout behavior is removed. Instead, each card keeps the key visual interaction: on hover or press, the image restores its color and the heading + supporting text appear.