Password Strength Part 1

Basics: stage 470×222px, background #13131C, all coordinates in px from the stage's top-left, everything clipped to the stage (top corners rounded 40px). Font "Segoe UI Variable Display","Segoe UI",sans-serif. 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 (the first frame is already 0.25s after a tap). A tap every second at u = 0, 1, 2, 3 (video T = 0.75, 1.75, 2.75 …). tapInfo(u): k = floor(u) (0–3), dt = u − k (seconds since the last tap), from = k + 1, to = k + 2 for k < 3; for k = 3 it is a "clear" tap with from = 4, to = 1. Strength levels L (color, name, hint): 0 empty (#2A2840, "", ""); 1 Weak #FF5C7A "Add more characters"; 2 Fair #FFB547 "Add a number"; 3 Good #38C6FF "Add a symbol"; 4 Strong #3DDBB0 "Great password". So the loop is Weak → Fair (u 0) → Good (u 1) → Strong (u 2) → clear and retype → Weak (u 3). Level L has 3L dots in the field.

One continuous liquid fill glides from the old level to the new one, passing through the gaps, while its color blends to the new level. 
- Fill amount f (in segments): adding: f = lerp(from, to, easeIO(seg(dt, 0.22, 0.62))), color = blend(from, to, ease(seg(dt, 0.22, 0.5))), motion m = bump(dt, 0.22, 0.62). Clear, dt < 0.4: f = 4·(1 − ease(seg(dt, 0.04, 0.3))) in Strong's color, m = bump(dt, 0.04, 0.3); dt ≥ 0.4: f = easeIO(seg(dt, 0.5, 0.82)) in Weak's color, m = bump(dt, 0.5, 0.82).
- Fill edge X = 24 + 108f; each segment i gets segPiece(SX(i), clamp(X − SX(i), 0, 98)) (so the fill grows as a pill inside each segment and jumps the 10px gaps).
- Head light (if m > 0.01 and X > 26): hx = min(X, 446) − 5; radial gradient at (hx, 132) from rgba(255,255,255, 0.85m) to transparent at radius 20.