# World Hikes (Step Pagination)

> A five-region World Hikes stepper (Nordic, Alps, Americas, Asia, Oceania) paging 15 established trails.

- Category: Pagination
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Atlas
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: stepper, cards
- Page: https://builder.atheros.ai/components/steps
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_steps/preview-1690a84ef44a.webp

## Features

- Five named world regions on a dashed connector — hollow upcoming, ring-pulsing current and checkmark-filled completed states
- Discrete region advance: four solid segments land one after another on a 90ms stagger
- Micro-labels under every node name the region and use readable emphasis ink for the current selection
- Hike cards headed by unobstructed, route-specific photographs from official authorities and Wikimedia Commons, with a token-drawn loading/CDN-failure fallback
- Each location links to an official or authoritative trail source, carries a decorative country flag, and keeps a 24px minimum target height
- Three concise, plain-language trail notes replace synthetic `day`, `plan` and internal route-log copy
- Progress labels and rails are color-coded by state (success / warning / information); exactly one hike is in progress
- State-aware 5px trail bars use semantic success for completed hikes and warning for the active hike; the bottom bar separates locale-formatted high point/distance stats from a theme-aware difficulty badge
- Stable pin toggle: a real `<button>` with aria-pressed, a fixed Tabler pin icon and no blinking transition
- Streaming field-log skeleton loading state that preserves every loaded line box, so the stepper and footer never jump
- Keyboard navigation with arrow keys plus Home/End, focus rings relayed from the hidden radios, aria-current on the active region, and a polite status region
- Responsive layout that stacks to a single column and tightens the region captions on mobile

## Accessibility

- **Region semantics** — `aria-current="step"` on the active region label; each hidden radio carries "Region N, <name>"
- **Keyboard nav** — `ArrowLeft`/`ArrowRight` step by one, `Home`/`End` jump to the first/last region
- **Toggle semantics** — Pin is a real `<button type="button">` with `aria-pressed` and a label that flips between Pin/Unpin
- **Focus indicators** — `:focus-visible` outlines in `--ring` (`--primary-ink`), relayed onto the visible node from the hidden radios
- **Reduced motion** — `prefers-reduced-motion: reduce` snaps the cascade, the segment stagger, the pulse and the skeleton stream
- **Live regions** — `aria-live="polite"` on the hike grid plus a visually hidden `role="status"` announcing "Region N of 5, <name>"
- **Decorative graphics** — The map art and every generated icon carry `aria-hidden="true" focusable="false"`; the journal tail is `aria-hidden` since it is ambience beside labelled data
- **Viewport** — `100dvh` for mobile-safe viewport height, `color-scheme: dark` on `body.dark`

## Keyboard shortcuts

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

## Common questions

**Which frameworks is World Hikes (Step Pagination) available in?**

World Hikes (Step 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 World Hikes (Step Pagination) free?**

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

**Does World Hikes (Step Pagination) support dark mode?**

Yes. World Hikes (Step Pagination) ships light and dark themes, both drawn from the Atlas design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview World Hikes (Step 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/steps

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