Bento Hover Expand

Turn a flat feature grid into a living one. Hover (or tap) any tile and it smoothly grows and reveals a second layer — description, tag, and an optional link — while its neighbours shrink to make room. The trick: it redistributes the grid's track weights instead of resizing one cell, so the **outer section never changes size** — zero layout shift, nothing on the page jumps. Edit tiles like a list (icon or image, title, details, tag, accent, link), tune the columns, gap, radius, and how far tiles expand, and it just works on every screen — collapsing to a single column on phones. Self-contained: nothing to host, no packages to add.

Features:

• Hover-to-expand tiles that reveal a second content layer (details + tag + link)

• Constant-size grid reflow — track-weight redistribution means no layout shift

• Works by mouse hover, touch tap, and keyboard (focusable, aria-expanded, Enter/Space) — accessible and mobile-safe

• Per-tile icon (emoji), image, or color fill with an automatic legibility gradient

• Per-tile fills with separate normal + hover states (solid / gradient / animated flowing gradient) that cross-fade — e.g. plain at rest, vivid background on hover

• Two image layers per tile, each with Cover/Contain fit and hover FX (Zoom / Pan / Tilt / Parallax / Rise / Reveal) — or Advanced manual transforms (x, y, scale, rotate, opacity)

• Configurable border (width + color, or off)

• Two content modes: author tiles in the panel, or drop your own frames/components into Slots and have the bento lay them out + animate them (bring-your-own content)

• Fully responsive — auto-reduces columns to a single column on phones (no h-scroll)

• Static-render poster for the Framer canvas/export (first tile pre-expanded)

• Self-contained — only framer + react, no libraries, nothing to install

• 13 property controls + per-tile editor — designed for non-coders