Vista Carousel

Features

• One wide two-column glass panel (about 52rem): a translucent smoky fill with a 24px backdrop blur and 140% saturation, a hairline of white at 8% and white ink
• Left column: a vertical tablist of five rows, each a 20px medium-weight title over a two-line description in white at 62%; the active row sits on a single soft white plate (about 9%, menu radius, no border, no accent) that glides between rows, and its title brightens from 80% to full white
• Right column: a rounded preview of the active slide; the incoming photo fades in over 0.7s above the held outgoing one, drifting 2% from the side it travels from, and settles from scale 1.04 to 1 over 1.2s
• The backdrop fills the whole page edge to edge: a still fluted-glass field in golden-hour travel colours: dusk lavender, sunset rose, coral and apricot pools with a sea-teal glow over a dusk-blue base, seen through vertical ribs (a soft-light highlight-to-shadow ramp every 22–40px) under a fine SVG film grain, toned down to 82% saturation and 86% brightness; it never changes with the slide, so only the panel moves
• Stacked below 720px, the panel narrows to at most 34rem and the preview is capped at 40dvh, so the carousel fits a phone-height frame
• WAI-ARIA tabbed carousel: role="tablist" of buttons with roving tabindex, one role="tabpanel" per slide, inactive panels aria-hidden and inert
• ArrowUp / ArrowDown / ArrowLeft / ArrowRight / Home / End move focus with automatic activation and wrap-around; hovering a row with a mouse selects it and clicking selects it
• Autoplay every 5s with a quiet 2px progress line (white at 35%) filling along the active row; hovering the glass panel, focus-within and a hidden tab suspend it and resume the remaining time, while the glass pause control over the preview is a sticky userPaused that survives focus-out
• prefers-reduced-motion: starts paused with the control reading Play, instant swaps, no zoom settle and no progress line
• Own identity in design-systems/vista-carousel/DESIGN.md (smoky glass, white ink, Inter); fonts, radii and spacing follow any other design system, whose primary only reaches the focus ring and the progress line

Accessibility

Carousel region

<section aria-roledescription="carousel"> with aria-label

Tabbed carousel

role="tablist" (aria-orientation="vertical") of role="tab" buttons with aria-selected, aria-controls and roving tabindex; each slide is a role="tabpanel" labelled by its tab

Inactive slides

Inactive tabpanels get aria-hidden="true", inert and tabindex="-1"; the backdrop is aria-hidden

Rotation control

First in tab order; aria-pressed and a Pause / Play label; paused under reduced motion. One click pauses even though focusing it already suspended rotation

Live region

aria-live="off" while autoplay rotates, polite when it is paused or suspended

Keyboard nav

Arrow keys, Home and End on the tablist move focus and activate the tab

Focus indicators

:focus-visible outline in white at 85% on the glass (the design system's readable dark primary under another system); rows and the preview take an inset outline

Touch targets

Rows are full-width buttons; the pause control is 32px

Contrast

The backdrop field is deep and still, so the white-at-62% descriptions stay above 4.5:1 on the glass wherever the panel sits

Reduced motion

prefers-reduced-motion: reduce makes swaps instant, removes the zoom settle and the progress line, and turns autoplay off

Customise it with AI

Open Vista Carousel in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the carousel 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.