Cosmic Atlas (Multi-Mode Pagination)
pagination#cards
Preview
1280 px
AI Assistant
Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Code
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Pagination component
About 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.
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", rovingtabindex, andaria-selectedon mode buttons- Current page
aria-current="page"on the active pagination node- Keyboard nav
ArrowLeft/ArrowRightfor page navigation; arrows plus Home/End within mode tabs- Focus indicators
:focus-visiblewith--ringoutline on all interactive elements- Reduced motion
prefers-reduced-motion: reducedisables all animations- Live regions
aria-live="polite"on the card container for page changes- Bookmark state
- Native buttons expose an accessible label and
aria-pressedstate - Number formatting
- Planet diameters use locale-aware compact formatting via
Intl.NumberFormat - Viewport
100dvhfor mobile-safe viewport height
Customise it with AI
Open Cosmic Atlas (Multi-Mode Pagination) in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the pagination 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.
Explore Other Components
View all
Deep-Sky Observatory (Classic Pagination)
VanillaReact
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.
#pagination#cards#navigation
Wildside Zoo Stories (Dot Pagination)
VanillaReact
A token-driven dots pagination presented as an editorial wildlife field journal.
#pagination#cards#navigation
Record Archive (Numbered Pagination)
ReactVanilla
A paginated album-release gallery with individually bordered page controls, save-to-library toggles, and keyboard navigation — fully token-driven and design-system agnostic.
#pagination#cards#navigation
World Hikes (Step Pagination)
VanillaReact
A five-region World Hikes stepper (Nordic, Alps, Americas, Asia, Oceania) paging 15 established trails.
#pagination#stepper#cards
Luxury Hotels (Editorial Pagination)
VanillaReact
An editorial luxury-hotel card gallery paginated with an elegant serif control bar — a warm canvas, high-contrast typography, fine detail marks, a soft atmosphere, an accented active folio, ellipsis-collapsed ranges, and keyboard navigation.
#pagination#cards#editorial
Component Guide (Compact Progress Pagination)
ReactVanilla
A compact pager that shows "Page X of N" with chevron Prev/Next controls and a thin progress bar that fills with page position — fully design-system agnostic.
#pagination
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
