Expanding Cards Grid

Expanding hover bento card layout

This component introduces a fluid, interaction-driven bento card layout designed to guide attention and create hierarchy without adding visual clutter. When a user hovers over a card, it expands while adjacent cards compress, creating a smooth focus effect. The component is structured for flexibility. You can easily replace content, adjust spacing, and styling. It works well for showcasing features, case studies, portfolios, or product highlights. On mobile devices, the interaction replaces hover behavior with a touch-based pattern. Copy the Component Link : Locate the component in your Framer assets and drag it onto your canvas. Top-Level Editing : Click the component once to access all content controls in the right-hand sidebar. Swap Media : Use the right-hand sidebar component properties to upload your own visuals directly to the grid.

Expanding hover bento card layout