# Wildside Zoo Stories (Dot Pagination)

> A token-driven dots pagination presented as an editorial wildlife field journal.

- Category: Pagination
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Sunset Coast
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: cards, navigation
- Page: https://builder.atheros.ai/components/dots
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_dots/preview-386019e2d0db.webp

## Features

- Liquid five-dot pagination riding a hairline wire, with an animated travelling indicator and a crossfading folio counter (`02/05`)
- Editorial spread layout: a full-height lead plate beside two horizontal column entries
- Journal masthead per trail: oversized index numeral, letterspaced trail name, wiping hairline rule, italic field note
- Fifteen openly licensed zoo animal photographs stored locally
- Curated DIET / ACTIVE / SOCIAL field data with Tabler-style line icons
- Three original illustrated keeper avatars with trail-accent keylines
- Labeled cart-based Send snack toggles with session persistence and accessible pressed states
- Arrow-key navigation plus Home and End shortcuts
- Page-change motion: opacity-only card resolve, staggered entries, photographs settling from a gentle overscan
- Responsive spread-to-column collapse and reduced-motion behavior
- Design-token colors, typography, spacing, shadows, and adaptive radii

## Common questions

**Which frameworks is Wildside Zoo Stories (Dot Pagination) available in?**

Wildside Zoo Stories (Dot 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 Wildside Zoo Stories (Dot Pagination) free?**

Wildside Zoo Stories (Dot Pagination) is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Wildside Zoo Stories (Dot Pagination) support dark mode?**

Yes. Wildside Zoo Stories (Dot Pagination) ships light and dark themes, both drawn from the Sunset Coast design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Wildside Zoo Stories (Dot 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/dots

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