# Cosmic Atlas (Multi-Mode Pagination)

> A planets-themed paginated card gallery with three pagination modes (Classic, Counter, Dots), skeleton loading, bookmarkable celestial cards, and keyboard navigation — carried by a cosmic gradient identity.

- Category: Pagination
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Ember Studio
- Dark mode: yes
- Access: free (sign in to copy the code)
- Tags: cards
- Page: https://builder.atheros.ai/components/pagination-planets
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_pagination_planets/preview-acc68acd3a8d.webp

## Features

- Three pagination modes, each with a celestial signature:
- Mode switcher with an animated sliding gradient indicator
- Celestial card gallery with hero gradients, NASA imagery, orbital-zone badges, and fact grids
- Starfield skeleton loading — twinkling crisp stars plus a tinted comet sweep between page changes
- Bookmark toggle with animated feedback
- Keyboard navigation with ArrowLeft/ArrowRight and Home/End, announced via a polite live region
- Responsive flex-wrap card layout; orbital motion parks under `prefers-reduced-motion`

## Accessibility

- **ARIA labels** — All interactive nodes and arrows have `aria-label`
- **Mode tabs** — `role="tab"`, roving `tabindex`, and `aria-selected` on mode buttons
- **Current page** — `aria-current="page"` on the active pagination node
- **Keyboard nav** — `ArrowLeft`/`ArrowRight` for page navigation; arrows plus Home/End within mode tabs
- **Focus indicators** — `:focus-visible` with `--ring` outline on all interactive elements
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations
- **Live regions** — `aria-live="polite"` on the card container for page changes
- **Bookmark state** — Native buttons expose an accessible label and `aria-pressed` state
- **Number formatting** — Planet diameters use locale-aware compact formatting via `Intl.NumberFormat`
- **Viewport** — `100dvh` for mobile-safe viewport height

## Keyboard shortcuts

- `ArrowLeft` — Previous page
- `ArrowRight` — Next page

## Common questions

**Which frameworks is Cosmic Atlas (Multi-Mode Pagination) available in?**

Cosmic Atlas (Multi-Mode Pagination) 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 Cosmic Atlas (Multi-Mode Pagination) free?**

Yes. Cosmic Atlas (Multi-Mode Pagination) is a free component: preview it without an account, and sign in with a free Atheros account to copy or download the full source and customise it with AI.

**Does Cosmic Atlas (Multi-Mode Pagination) support dark mode?**

Yes. Cosmic Atlas (Multi-Mode Pagination) ships light and dark themes, both drawn from the Ember Studio design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Cosmic Atlas (Multi-Mode Pagination) 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/pagination-planets

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