Back to Motion Prompt examples
UI component names · #16
Pagination
Numbered buttons that move between pages. Clicking 2 and then 3 in the page numbers moves the blue circle and swaps the list above; finally it goes back to 1.
Choosing & switchingpaginationpagerpage-numberspagingnext-prevnavigation
Full motion specification
How the movement works
Use it to split a long list, such as search results or articles, into numbered pages.
- 014.5 s cycle on a 542×191 card. "‹ 1 2 3 4 5 ›" centred, each 36 in diameter with 8 px gaps, at y 160. A blue circle (radius 18) marks the current page, with white text.
- 02The cursor clicks 2 at 1.0 s, 3 at 2.1 s and 1 at 3.3 s.
- 03The blue circle moves 44 px per page over 0.2 s each with easeInOutCubic (88 px at once from 3 back to 1).
- 04The three-row list above dips in opacity 1 → 0 → 1 within 0.2 s either side of 1.05, 2.15 and 3.35 s, and its content changes at the dip.
Prompt
Add pagination under the search results: the current page is a blue circle that moves in 0.2 s on click, and the list is replaced.