Wildside Zoo Stories (Dot Pagination)
AI Pass+pagination#cards#navigation
design.md
Preview
1280 px
AI Assistant
Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Code
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Pagination component
About Wildside Zoo Stories (Dot Pagination)
A token-driven dots pagination presented as an editorial wildlife field journal.
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
Customise it with AI
Open Wildside Zoo Stories (Dot 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.
Explore Other Components
View all
Deep-Sky Observatory (Classic Pagination)
VanillaReact
A classic numbered pagination presenting 15 sourced deep-sky objects in five pages of three cards, with object-specific imagery, observing details, and keyboard navigation.
#pagination#cards#navigation
Record Archive (Numbered Pagination)
ReactVanilla
A paginated album-release gallery with individually bordered page controls, save-to-library toggles, and keyboard navigation — fully token-driven and design-system agnostic.
#pagination#cards#navigation
The Close (Odometer Pagination)
VanillaReact
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.
#pagination#editorial#navigation
Luxury Property Register (Bordered Pagination)
VanillaReact
A narrow bordered pagination presenting fifteen fictional luxury-property listings as a photo-hero bento: one featured tile plus two compact tiles sharing the same full-bleed photograph, scrim and on-image editorial anatomy.
#pagination#bento#navigation
Cosmic Atlas (Multi-Mode Pagination)
VanillaReact
A planets-themed paginated card gallery with three pagination modes (Classic, Counter, Dots), skeleton loading, bookmarkable celestial cards, and keyboard navigation — carried by a cosmic gradient identity.
#pagination#cards
Luxury Hotels (Editorial Pagination)
VanillaReact
An editorial luxury-hotel card gallery paginated with an elegant serif control bar — a warm canvas, high-contrast typography, fine detail marks, a soft atmosphere, an accented active folio, ellipsis-collapsed ranges, and keyboard navigation.
#pagination#cards#editorial
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
