Pagination Part 1

Basics: stage 470×222px, background #13131C, all coordinates in px from the stage's top-left, everything clipped to the stage (its two top corners are rounded with radius 40px; the bottom corners are square). The animation is a 4s loop that plays by itself and is seamless; the video is 12s = three loops. T = seconds since the video start; u = (T + 0.25) mod 4 (loop time 0–4; the first frame is already 0.25s after a tap). One tap every second, at u = 0, 1, 2, 3. Pages are numbered 0–4 (shown as 1–5). Page after each tap SEL = [2, 3, 0, 4]; tapped button TAPB = [3, 6, 1, 5] (button 0 = "‹", 1–5 = the numbers, 6 = "›"), i.e. u = 0 taps "3" (page 5 → 3), u = 1 taps "›" (3 → 4), u = 2 taps "1" (4 → 1), u = 3 taps "5" (1 → 5). lastTap(u): k = floor(u) (0–3), from = SEL[(k + 3) mod 4], to = SEL[k], dt = u − k (0–1), dir = sign(to − from). Every value depends only on u, so 4.0s equals 0s. Each reaction is finished before the next tap (by dt ≈ 0.85 at the latest).

The highlight springs to the new number and stretches while moving; the old page slides out and the new page slides in. 
- Springs: fa = springF(21, 0.6)(dt) (leading), fb = springF(13, 0.78)(dt) (trailing), fc = springF(15, 0.82)(dt) (page).
- Panel: drawPage(from, dx = −dir·440·fc) and drawPage(to, dx = dir·440·(1 − fc)) (both full opacity, clipped to the panel).
- Highlight: pa = from + (to − from)·fa, pb = from + (to − from)·fb; xl = min(PX(pa), PX(pb)) − 25, xr = max(PX(pa), PX(pb)) + 25; hiBox((xl + xr)/2, 172, xr − xl, 48).
- Numbers: amt[q] = 1 − |mid − PX(q)|/45, mid = (xl + xr)/2.