Navigation
Pagination
Pages are domes sitting on a shared ground line. Selecting one extrudes it upward while the previous one sinks back.
Usage
<Pagination
count={4}
restHeight={26}
activeHeight={58}
archWidth={44}
intensity="normal"
spring="smooth"
/>How the motion works
Each arch owns its own height spring, so when selection moves the outgoing dome is still settling while the incoming one is already growing — that overlap is what produces the wave. The silhouette is a rectangle with fully rounded top corners and square bottoms, so springing the height alone reads as a dome extruding from the baseline rather than a box scaling.
useSpringValue
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | — | Total number of pages. |
| page / defaultPage | number | — | Controlled or initial page. |
| onChange | (page: number) => void | — | Fires on page change. |
| siblings | number | 1 | Pages shown either side of the current one before collapsing to an ellipsis. |
| restHeight / activeHeight | number | — | Arch height at rest and when current, in px. |