Split Mosaic

Features

• grid-template-areas split mosaic — a tall main panel, a top context strip, and a three-tile mosaic that re-composes across breakpoints
• Five distinct regions, each a card role (main hero-detail, top strip, analytics, activity feed, captioned gallery)
• Skeleton wireframe placeholders with color-mixed accents derived from design tokens
• Rows grow to content with minmax(<min>, auto) so nothing clips and the page scrolls
• Mosaic recomposes at 560px (stacked → two-column) and 900px (main splits to a full-height left column)
• All colors, spacing, and radii driven by design-system tokens
• Prefers-reduced-motion support for accessibility
• Per-region accent colors computed via oklch color-mix from semantic palette tokens

Accessibility

ARIA label

.bento grid has aria-label="Split mosaic layout"

Busy state

.bento starts aria-busy="true" and is cleared to false by markReady() once rendered

Reduced motion

prefers-reduced-motion: reduce kills all animations and transitions

Focus-visible

Interactive focus styling relies on :focus-visible from the design tokens

Dynamic viewport

Uses 100dvh for proper mobile viewport height

Customise it with AI

Open Split Mosaic 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.