Pill Pagination

Features

• Rounded pill pagination items with a contrast-safe, design-system-derived active state
• Animated ellipsis windowing across 9 pages — out-of-window pills collapse (width, gap and opacity) while incoming ones expand, so the window slides fluidly and the ellipsis morphs into numbers instead of popping
• Active-pill selection fill grows from the pill centre on a pseudo-element, handing off between neighbours
• Previous/next arrow navigation with disabled first and last states
• Collectible lifestyle field-note cards with local photography, three distinct issue/badge treatments, curated routes, and fixed page geometry
• “Explore” toggle that becomes “Active” while selected, with stateful aria-pressed
• Keyboard navigation with arrow keys plus Home/End jumps
• Responsive layout that stacks to a single column on mobile
• Readable heading emphasis and keyboard hints across every light and dark theme
• Stateful Explore buttons, visible radio focus, and concise page-change announcements

Accessibility

Pagination state

Native named radio inputs expose the selected page; their visible pill receives the focus ring

Keyboard nav

Native radio ArrowLeft/ArrowRight behavior, Home/End jumps on the radio group, plus document-level Arrow/Home/End navigation when focus is outside an interactive control

Ellipses

Decorative ... separators are aria-hidden and not focusable; the live region announces the page instead

Explore state

Real buttons expose the Active state through aria-pressed and an action label

Focus indicators

:focus-visible with --ring outlines pagination and Explore controls

Reduced motion

prefers-reduced-motion: reduce disables all animations

Live regions

A concise polite status announces page number and result count without re-announcing every card

Viewport

100dvh for mobile-safe viewport height

Customise it with AI

Open Pill Pagination in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the navigation 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.