Pagination
Page numbers as compact tabs on one rule, with cells either side.
States
-
First page
aria-current="true" on 1
The current page is an ink fill.
-
Hovering a page
hover
Its segment of the rule develops; the next cell heats as a cell does.
Anatomy
| Pages | compact tabs (32px) on one ink rule, half a module of padding |
|---|---|
| Current | aria-current="true": the tabs’ ink fill |
| Moving | a pulse along the rule from the old page to the new in 200ms; the fill lands with a flare (280ms) |
| Either side | the previous and next pages as icon cells, half a module from the numbers |
| Keyboard | the arrow keys move between pages |
Timings are read from the engine at build time (rule.ts, ui.ts).
Decisions
-
Tabs, not boxes
A page number is a tab on the shared rule, so moving pages reads like any other choice between peers: a pulse along the line.
-
Not for a run
Something you step through one at a time (a carousel, a slideshow) has cells and no numbers: the site dropped counters like “01 / 05” in October 2026, since the picture already says which one you are on.