# Expanding Bento > A seven-tile lifestyle bento on grid-template-areas: tap a tile and it takes the 2×2 hero slot while the others reflow, animated with View Transitions. Five container-query tiers from one to five columns, flat tinted tiles, light and dark. - Category: Layout - Frameworks: Vanilla, React + CSS, React + Tailwind - Dark mode: yes - Access: premium (Atheros AI Pass) - Tags: bento, grid, grid-template-areas, view-transitions, expand, container-queries, responsive, dark-mode - Page: https://builder.atheros.ai/components/expanding-bento - Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_expanding_bento/preview-2f0894a4cf60.webp ## Features - Seven tiles (sleep, activity, mood, weekend plan, breathe, place, heart rate), each tinted toward its own vibrant accent with a 1px inset accent edge and no drop shadow - Click, Enter or Space on a tile expands it into the 2×2 hero slot; the grid swaps to a second `grid-template-areas` map picked by `data-expanded` - View Transitions morph every tile: the shell group paints the tile's own fill, edge and radius while the content fades out (120ms) and back in (220ms after 40ms) over a 480ms morph; a WAAPI FLIP fallback without View Transitions and an instant swap under reduced motion - Escape or the corner collapse chip folds the open tile back; a second tap during a morph skips to its end - Five responsive tiers keyed off the component's own width with container queries (1 / 2 / 3 / 4 / 5 columns at 380 / 560 / 760 / 960px), tiles reordered by priority and every grid cell filled in every state - Tile content reads the tile's own box through container queries: compact, wide, tall and open (2×2) views reveal more, never truncating - Score ring, 4-lane hypnogram, step bars with a dashed goal, mood dots and sparkline, a weekend agenda on an 8–22h track, a 4-4-6 breathing wave with a riding dot, a real lake photo with a scrim caption, an ECG and a heart-rate day curve with zones - Concentric radii: the stage radius equals the tile radius plus the stage padding - Design-system ready: every surface, ink, border, focus ring, font and radius reads the shared design token first and the component's own value as the fallback; the seven tile accents stay the component's data colours - CSS-only dark mode (`body.dark`), no built-in theme toggle ## Accessibility - **Landmark** — The bento is a `role="group"` with an `aria-label` inside `
`, titled by a visually hidden `

` - **Tiles** — Each tile is a `
` whose full-size `