Liquid Pagination

A numbered pagination whose current page is a drop of ink: it stretches to the page you pick, thins as it travels and lands with a liquid tail.

About this tool

A pagination row with a liquid indicator. Picking a page pulls the drop towards it, thins it while it travels, overshoots and bulges as it lands, and leaves a tail that is reabsorbed; the numbers under the drop take the active ink exactly where it covers them, and when the page window shifts the numbers roll through their slots. It is real navigation: native buttons with page labels, aria-current on the current page, previous and next arrows that leave the tab order when they are hidden, visible focus, 44 px targets and a plain swap under reduced motion. Page count, current page, visible slots, sizes, colours, liquid tail and autoplay are editable live, and the export is one HTML file with no dependencies.

In collections: Navigation Components: Tabs, Steppers & Menus Micro Interactions: UI Animation Examples

Guide: Feature Sections That Explain a Product: Grid, Tabs or Walkthrough? Tailwind Tooltip: Accessible CSS, Popover API and React

UI/UX · HTML / CSS / JS All tools

Layout

Scale %

Button size px

Button gap px

Track padding px

Pages

Current page

Visible slots

5 7 9

Liquid

Liquid tail

Palette

Track

Track border

Numbers

Hover

Drop

Drop shade

Number on the drop

Preview

Autoplay

off loop

Autoplay step ms

Stage

Stage colour

#ffffff