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
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
