PIN Keypad 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 just after the first tap). Code CODE = [1, 8, 5, 0]: one tap every second, tap k (k = 0–3) presses the key CODE[k] at u = k (the first tap seen in the video, at T = 0.75, is tap 1 = digit 8; tap 0 = digit 1 falls at T = 3.75, 7.75, 11.75, and its first instance is just before the video starts, at T = −0.25). For a key, a = time since its tap, wrapped to −2…+2 (rel(u, k) = d − 4 if d > 2 else d, with d = (u − k) mod 4); keys that are not in the code never react. lastTap(u) = {k = floor(u), a = u − k, digit CODE[k]} (the newest tap). Dots: dot k has a = u − k (u in 0–4; a < 0 means "not entered yet"). Success su = 0 for u < 3, else ease(seg(u, 3.32, 3.48)) (all four dots turn mint). Clear cl_k = ease(seg(u, 3.66 + 0.05k, 3.82 + 0.05k)) (the dots empty again from left to right, the last one by u = 3.97, so u = 4 equals u = 0). Success hop sb_k = bump(u, 3.34 + 0.05k, 3.58 + 0.05k) for u ≥ 3, else 0.

Each tap sends a ring of cyan light across the whole keypad (only inside the keys); the dot fills and throws a small ring. 
- Keys: sx = sy = pressK(a, 0.05); tint = 0.75·(1 − ease(seg(a, 0, 0.5))) for 0 ≤ a < 1, else 0.
- Wave (newest tap, while its a < 0.75), centered on the tapped key's center: e = ease(a/0.75), R = lerp(12, 300, e), al = 1 − seg(a, 0.15, 0.75), r0 = max(0, R − 46). Clipped by clipKeys: (1) a radial gradient r0 → R with stops 0 rgba(56,198,255,0), 0.75 rgba(56,198,255,0.32·al), 1 rgba(110,91,255,0), filling the rect (0, 60, 470, 162); (2) a second radial gradient r0 → R with stops 0 rgba(140,220,255,0), 0.8 rgba(140,220,255,0.9·al), 1 rgba(140,220,255,0), used to stroke (3px) every key outline rr(x + 0.75, y + 0.75, 76.5, 62.5, 16) — the key edges light up as the ring passes.
- Dot (a ≥ 0): sc = ease(seg(a, 0, 0.22)); empty ring at opacity 1 − sc; fullDot(sc, su); for a < 0.5, e = ease(a/0.5): a 2px cyan ring of radius 10 + 14e at opacity 0.65·(1 − e).