lens ruler

A pagination control on a light grey page. All 24 pages sit on one strip with tick marks that slides under a fixed glossy black lens in the centre. The number under the lens is large and white; its neighbours shrink and fade towards the edges and the spacing swells around the lens like a fisheye, while the ticks rise in a wave. Drag the strip to change page, or throw it and let it coast and settle on a page: at speed the numbers blur and stretch, the lens widens and lags a little behind and hops softly on every page it passes. A white card above holds a mechanical counter in big light digits: the units drum rolls with the strip and the tens carry over from 9 to 0, with a thin progress bar under it. It plays an 8-second seamless demo with a drawn cursor (a slow drag, a flick, a click on a far number, a hard throw back), and the first press on the ruler hands it over to you: drag, throw, tap a number, or use the arrow keys, Page Up, Page Down, Home and End on the focusable slider. Plain HTML elements and one small canvas, written each frame from the page position and speed; change the page count, the lens optics and the feel in a few lines. Every demo frame is a pure function of time, with window.__render(t) and a ?rec mode for frame-exact video export; reduced motion shows one still. The fonts are local, so it runs offline.