Deep-Sky Observatory (Classic Pagination)

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

Customise it with AI

Open Deep-Sky Observatory (Classic 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.