Expanding Bento

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 <main>, titled by a visually hidden <h1>

Tiles

Each tile is a <section aria-labelledby> whose full-size <button> toggle carries the tile name and aria-expanded

Keyboard

Tab reaches every tile; Enter or Space expands or collapses; Escape collapses from anywhere

Announcements

A polite live region says "<tile> expanded" / "<tile> collapsed"

Decorative marks

Charts, bars, lanes and the wave are aria-hidden; their meaning is repeated in text (sr-only schedule and breathing pattern)

Focus

A 2px accent outline at 2px offset follows the tile radius

Contrast

Tile text uses each accent's ink twin (≥ 4.5:1); marks use the mark twin (≥ 3:1)

Reduced motion

prefers-reduced-motion: reduce swaps instantly and parks the wave

Customise it with AI

Open Expanding Bento in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the layout is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.