# Deep-Sky Observatory (Classic Pagination)

> A classic numbered pagination presenting 15 sourced deep-sky objects in five pages of three cards, with object-specific imagery, observing details, and keyboard navigation.

- Category: Pagination
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Odyssey
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: cards, navigation
- Page: https://builder.atheros.ai/components/classic
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_classic/preview-0a7c6ee8e477.webp

## Features

- Editorial numeral row on a hairline baseline with a sliding ink indicator that glides to the active page
- Previous/next arrow navigation with disabled first and last states
- Five numbered pages with three catalog entries per page
- Deep-sky catalog plates served as optimized local assets that develop onto a dark plate ground once decoded
- Staggered card entrance on every page change — transform/opacity only, clamped by prefers-reduced-motion
- Compact centered night-glass observation reveal with reduced blur and no visible source badge
- Keyboard navigation with arrow keys plus Home/End
- Responsive layout that stacks to a single row-card column on mobile

## Accessibility

- **ARIA labels** — All interactive elements have `aria-label`
- **Keyboard nav** — `ArrowLeft`/`ArrowRight` for page navigation, `Home`/`End` for first/last page
- **Focus indicators** — `:focus-visible` with `--ring` outline on all elements
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations
- **Live regions** — `aria-live="polite"` on the card container for page changes
- **Viewport** — `100dvh` for mobile-safe viewport height

## Keyboard shortcuts

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

## Common questions

**Which frameworks is Deep-Sky Observatory (Classic Pagination) available in?**

Deep-Sky Observatory (Classic 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 Deep-Sky Observatory (Classic Pagination) free?**

Deep-Sky Observatory (Classic Pagination) is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Deep-Sky Observatory (Classic Pagination) support dark mode?**

Yes. Deep-Sky Observatory (Classic Pagination) ships light and dark themes, both drawn from the Odyssey design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Deep-Sky Observatory (Classic 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/classic

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