# Vista Carousel

> A tabbed photo carousel on smoky glass: five places listed beside a rounded preview that fades in the direction of travel with a soft zoom settle, over a still fluted-glass field, with arrow-key tabs, hover selection and an autoplay pause.

- Category: Carousel
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: tabs, glass, autoplay, vertical-tabs, dark-mode, responsive
- Page: https://builder.atheros.ai/components/vista-carousel
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_vista_carousel/preview-232174e206b7.webp

## 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

## Keyboard shortcuts

- `ArrowUp / ArrowLeft` — Previous tab
- `ArrowDown / ArrowRight` — Next tab
- `Home` — First tab
- `End` — Last tab

## Common questions

**Which frameworks is Vista Carousel available in?**

Vista Carousel ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Vista Carousel free?**

Vista Carousel is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Vista Carousel support dark mode?**

Yes. Vista Carousel ships light and dark themes. Switch the preview to dark mode to compare them.

## Get the code

Preview Vista Carousel live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/vista-carousel

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt