# Island Carousel

> A scroll-snap carousel of six identically shaped island cards — Now Playing, Timer, Activity, Weather, Battery, Voice Memo — where arrows, dots, keyboard, and drag all land on the browser's own snap targets, and each card resolves from a skeleton the first time it snaps into view.

- Category: Carousel
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: skeleton, island-carousel, ios
- Page: https://builder.atheros.ai/components/island-carousel
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_island_carousel/preview-af87d7e8b13c.webp

## Features

- Real CSS scroll-snap: `scroll-snap-type: x mandatory` with one card per view and neighbours fully off-screen at rest
- Six self-contained widget cards (Now Playing, Timer, Activity, Weather, Battery, Voice Memo) built from tokens and Tabler icons — no images
- One glide path: arrows, pager dots, and keyboard all run the same rAF tween that suspends snap and lands exactly on the computed snap target
- Pointer drag releases snap while the pointer holds and lets the browser re-snap on release
- Skeleton ghosts that mirror each widget's own grid and resolve once, the first time a card settles on a snap point, with zero layout shift
- Fluid sizing from a single container-query unit — every length, radius, and font size derives from `--isl-u`
- Keyboard navigation (Arrow keys, Home, End) guarded by a blocklist of controls that own their arrow keys — never an allowlist
- Respects `prefers-reduced-motion` — glides become jumps, shimmer and pulse animations stop, skeletons are skipped

## Accessibility

- **Carousel region** — `<main>` landmark with `aria-roledescription="carousel"` and `aria-label`
- **Card track** — `role="group"` with `tabindex="0"` so the snapping scroller is keyboard reachable
- **Dot indicators** — `<button>` with `aria-label` and `aria-current="true"` on the active dot
- **Arrow buttons** — `<button>` with `aria-label`, disabled at the ends so state is exposed
- **Keyboard nav** — Document-level Arrow/Home/End with a blocklist guard, so keys keep working after any button takes focus
- **Focus indicators** — Concentric `:focus-visible` rings: outline on arrows, spread ring on the stage, halo on the visible dot
- **Touch targets** — Arrow hit area floored at `--buttons-height-small`, enlarged dot hit areas beyond the rendered dot
- **Decorative content** — Skeletons, equalizer, waveform, charts, and rings are `aria-hidden="true"`
- **Reduced motion** — `prefers-reduced-motion: reduce` collapses animations and skips skeletons

## Keyboard shortcuts

- `ArrowLeft` — Previous card
- `ArrowRight` — Next card
- `Home` — First card
- `End` — Last card

## Common questions

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

Island 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 Island Carousel free?**

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

**Does Island Carousel support dark mode?**

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

## Get the code

Preview Island 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/island-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