Verification Code 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). 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 …). Taps at u = 0, 1, 2 each type two digits of the made-up code "274851"; the tap at u = 3 presses Verify; then everything clears and the loop starts again.

Each digit falls into its box from above; on landing the box squashes and wobbles back; on success the boxes hop one after another and turn mint. 
- Per box j: act = actK(j), mk = succK(0.05j), hop = −8·bump(u, 3.04 + 0.05j, 3.34 + 0.05j).
- Squash after landing: t2 = a − 0.16; s = e^(−6·t2)·sin(17·t2) for 0 ≤ t2 < 1 (else 0). Transform the whole box: translate(bcx, 116 + hop), scale(1 + 0.08s, 1 − 0.16s), translate(−bcx, −116) (pivot = box bottom center).
- boxBase({act, mk}). Digit, clipped to clipBox: y = 81 − 50·(1 − easeIn(a/0.16)) while a < 0.16, else 81 (it enters through the top edge); opacity (1 − c)·clamp(a/0.05); y + 8c; mk as above.
- Caret in the active box: a 3×30 rounded bar (radius 1.5) at (bcx − 1.5, 66), vertical gradient #6E5BFF → #38C6FF, opacity act·(0.55 + 0.45·cos(2π·2u)) (blinks twice a second).