Bento Skyline

Features

• Eight named cells (hero, chart, stat-a, stat-b, image, list, quote, cta), each carrying its own authored region hue — amber, rose, cyan, lime, violet, green, blue, magenta
• Five responsive layouts driven by viewport media queries: a single column, a two-column bento at 480px, a four-column grid with a 2×2 hero at 768px, a six-column skyline at 1024px and a twelve-column ultra-wide at 1280px with a tall stat A
• Skeleton placeholders sized in em off one root unit so every bar, ring and chart column scales with the viewport without reflow jumps
• Skyline chart whose twelve columns keep fixed percentage heights; the last four columns and a fourth list row only appear at 1280px with a rise-in animation
• Hero brand row with the Atheros AI Builder mark and gradient wordmark; the wordmark hides with hysteresis when it cannot fit beside the mark and never renders clipped
• Product URL that scales with the hero's container width via cqw units
• Skeleton / content switch in a fixed top-right toolbar: a role="switch" button cross-fades every cell between placeholders and real copy, chart, stats, list, quote and CTA without changing any cell size
• Real content mode: headline and copy, a labelled bar chart with a peak callout, a gradient illustration with caption, stat values with a trend pill and a 68% ring, a feature list, an attributed quote and a CTA button
• CSS-only dark mode (body.dark) with lifted region-hue twins, no built-in theme toggle
• Prefers-reduced-motion support for the cross-fade and the rise-in animation

Accessibility

Landmark

The bento is a <section aria-label="Bento skyline layout"> inside <main>; the switch lives in a separate fixed toolbar outside <main>

Headings

Each cell is a <section> whose region tag is an <h2 class="bsk-tag">; the hero headline is an <h3>

Switch

<button id="bsk-skeleton-toggle" role="switch" aria-checked> with a visible "Skeleton" label, aria-label, keyboard activation and a :focus-visible ring

Layers

The inactive layer carries aria-hidden="true" and visibility: hidden, so only the visible mode reaches assistive technology

Decorative skeleton

Every skeleton shape is inside an aria-hidden layer; the live chart and ring carry role="img" with a full text alternative

Brand mark

Mounted from a data-src slot with alt="Atheros AI Builder"

Busy state

The bento starts aria-busy="true" and is cleared to false by markReady() on load

Reduced motion

prefers-reduced-motion: reduce collapses the cross-fade, the rise-in and every transition

Dynamic viewport

Uses 100dvh for proper mobile viewport height

Customise it with AI

Open Bento Skyline 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.