# The Close (Odometer Pagination)

> A pure CSS compact pagination styled as the markets page of a financial broadsheet. Each page is one section — AI, semiconductors, data centres, power, oil & gas — with a serif lead story, ranked movers with sparklines and cited sources. Hidden radios drive an odometer counter; token-driven.

- Category: Pagination
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Inkpage
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: editorial, navigation
- Page: https://builder.atheros.ai/components/compact
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_compact/preview-007b93d1eb7b.webp

## Features

- Compact pagination scaled up to full masthead width: generous tactile arrow buttons under a heavy rule, with the open section's running title beneath
- Odometer digit counter — the page number rolls on a masked vertical reel with neighbouring digits faintly peeking through the fade window
- Hidden-radio page switching with per-page arrow swaps via `:has()` and a single live section heading
- Broadsheet masthead: hairline topline with date, edition and a standing "illustrative quotes" marker, a centered serif nameplate, the signature heavy double rule, and a six-cell market tape
- One edition section per page: a display-serif lead story with dek, a full-width sparkline instrument strip and quote, then two secondary stories divided by hairlines
- Ranked movers table in the rail — ticker, company, sparkline, last and change in tabular-lining numerals over hairline row rules
- "By the numbers" ledger of real reported figures, each attributed to its outlet
- Real July 2026 reporting: every story carries its outlet as a visible source link (`src` URL per story in `js/data.js`); all prices, changes and sparklines are illustrative and marked as such in the chrome and footer
- Gain/loss inks derived from `--success`/`--error` via `color-mix` toward the live text ink, so they clear contrast floors on every design system in both modes
- Direction-aware page-turn animation (slide + fade, ~320ms) that respects prefers-reduced-motion
- Keyboard navigation with arrow keys
- Responsive layout that drops the rail below the stories, stacks the secondary pair and wraps the tape

## Accessibility

- **ARIA labels** — All interactive elements have `aria-label`
- **Keyboard nav** — `ArrowLeft`/`ArrowRight`/`Home`/`End` for page navigation
- **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 edition 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 The Close (Odometer Pagination) available in?**

The Close (Odometer 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 The Close (Odometer Pagination) free?**

The Close (Odometer Pagination) is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does The Close (Odometer Pagination) support dark mode?**

Yes. The Close (Odometer Pagination) ships light and dark themes, both drawn from the Inkpage design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview The Close (Odometer 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/compact

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