Island Carousel

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

Customise it with AI

Open Island 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.