---
title: "Spotlight Bento Grid — Free Framer component · Best of Framer"
description: "Free Framer component · by Omer Mirza · Sections. The Spotlight Bento Grid is an interactive bento-style feature section designed for product pages, landing pages, and premium visual storytelling."
canonical: "https://framer.elliotli.dev/component/spotlight-bento-grid"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Spotlight Bento Grid

# Spotlight Bento Grid

Expanding Feature Cards

[View on Framer](https://framer.com/marketplace/components/spotlight-bento-grid/?via=elliot-li)

![Spotlight Bento Grid preview image 1](https://framer.elliotli.dev/og/component/spotlight-bento-grid/524b39e7d19a1b0c/1600x1200.jpg)

## Summary

The Spotlight Bento Grid is an interactive bento-style feature section designed for product pages, landing pages, and premium visual storytelling.

## Description

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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #388

## Details

- **Author**: Omer Mirza
- **Published**: 2026-05-12
- **Updated**: 2026-05-12
- **Added**: 2026-04-30
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove