Button Part 3

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 …). tapInfo(u): k = floor(u) (0–3), dt = u − k (seconds since the last tap, 0–1), from = k, to = (k+1) mod 4 — so each tap moves the button to the next state and 4 taps return to the start. States (label, icon, horizontal gradient left → right): 0 "Start", play, #6E5BFF → #38C6FF; 1 "Pause", pause, #FF5CA8 → #6E5BFF; 2 "Resume", play, #1EA7F0 → #20C79A; 3 "Finish", check, #F5A524 → #FF5CA8. The button (identical in all six): a pill rr(40, 57, 390, 108, radius 54), center (235, 111). Shadow (drawn first, same for every state): the pill shape filled #13131C with shadow rgba(0,0,0,0.55), blur 22, offsetY 8. The shadow is drawn before and outside any squash/pop scale (it never scales); only 02 moves it, because 02 transforms the whole button. Body pillBody(s, alpha): the pill filled with the state's gradient from x 40 to x 430, then the same pill filled with a vertical gloss gradient from y 57 to 165: rgba(255,255,255,0.16) → rgba(255,255,255,0) (middle) → rgba(0,0,0,0.10). Face pillFace(s, cx = 235, cy = 111, sc = 1, alpha = 1): icon + label as one centered group; label font 800 40px "Segoe UI Variable Display","Segoe UI",sans-serif, white; group width = 30 (icon box) + 14 (gap) + label width; x0 = cx − width/2; icon centered at (x0 + 15, cy); label left edge x0 + 44, alphabetic baseline cy + 14; the face is scaled by sc around (cx, cy); both icon and label have a shadow rgba(0,0,0,0.25), blur 6, offsetY 2. Icons (s = 30, white): play = triangle (−0.32s, −0.42s), (0.42s, 0), (−0.32s, 0.42s), filled and stroked 5px with round joins; pause = two filled rounded bars rr(−0.4s, −0.46s, 0.28s, 0.92s, 0.1s) and rr(0.12s, −0.46s, 0.28s, 0.92s, 0.1s); check = check(x, y, 34.5, 1, 6px, white). pill(s) = pillBody(s) then pillFace(s). Check mark check(cx, cy, s, prog, lw, color): round-capped polyline through (cx − 0.30s, cy + 0.02s), (cx − 0.09s, cy + 0.23s), (cx + 0.32s, cy − 0.20s), drawn up to the fraction prog of its length. Press squash pressK(a, depth) (a = seconds since a tap, wrapped to −2…+2): 1 for a < −0.1 or a > 0.6; 1 − depth·(a+0.1)/0.1 just before the tap; 1 − depth·(1 − springF(22, 0.45)(a)) after; the button's squash = min over the four taps; squashAt(k) scales around (235, 111). springF(ω₀, ζ)(t) = 0 for t ≤ 0, else 1 − e^(−ζω₀t)(cos ω_d t + (ζω₀/ω_d) sin ω_d t), ω_d = ω₀√(1−ζ²). Tap indicator at (372, 122) for each of the 4 taps (drawn last): visible for −0.42 ≤ a < 0.4; circle radius 22.575, fill rgba(215,215,230,0.38), shadow black 35% blur 10, border 3.5px white 92%; scale lerp(1.25, 1, ease((a+0.42)/0.32)) for a < −0.1, lerp(1, 0.8, (a+0.1)/0.1) for −0.1 ≤ a < 0, lerp(0.8, 1, ease(a/0.2)) after; opacity clamp((a+0.42)/0.18) before, clamp(1 − (a−0.12)/0.25) after; for 0 ≤ a < 0.4 a 3px white ring radius 22.575·(1 + 3.2a) at opacity 0.7(1 − a/0.4), drawn under the circle. Easing (k clamped 0–1): ease = 1 − (1−k)³; easeIn = k³; easeIO = 4k³ for k < 0.5 else 1 − (−2k+2)³/2; easeBack = 1 + 2.9(k−1)³ + 1.9(k−1)². seg(x, a, b) = clamp((x−a)/(b−a)); bump(x, a, b) = sin(π·seg). mix = per-channel RGB blend. hash(i) = fract(sin(127.1i + 311.7)·43758.5453). Every value depends only on u, so 4.0s equals 0s.

The next state's color rises inside the button as liquid with a wavy surface; below the surface you already see the new label. 
- Level f = 1 − (1 − k)² with k = seg(dt, 0.02, 0.64). Whole button squashed by pressK depth 0.05. If f ≥ 1 draw pill(to); otherwise pill(from), then (if f > 0), clipped to the pill:
- Wave amplitude A = 9·sin(πf); surface y ys = 179 − 136f (from 14px below the bottom to 14px above the top); phase ph = dt·2π·1.8; surface y(x) = yy + amp·sin(x/34 + ph + off). Wave shape = polygon from (28, 195) along the surface x = 28…442 every 6px to (442, 195).
- Back wave: off 2.1, amp 0.8A, yy = ys − 8·sin(πf); clipped to it, pillBody(to) at opacity 0.45.
- Front wave: off 0, amp A, yy = ys; clipped to it, pillBody(to) + pillFace(to), plus 6 bubbles j = 0–5: p = seg(dt, 0.04 + 0.04j, 0.40 + 0.04j) (skip if p ≤ 0 or ≥ 1; the last bubble ends at dt 0.60, before the liquid is full at 0.64), x = 88 + 60j + 6·sin(2πp + j), y = 171 − 104·ease(p), radius 3 + 1.6·(j mod 3), white at opacity 0.55·sin(πp).
- Surface line: the front surface curve stroked 2.5px rgba(255,255,255,0.6) (still clipped to the pill).