Color Picker 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); in a frame-based renderer use u = ((2·frame + 15) mod 240)/60 at 30 fps. One tap every second, at u = 0, 1, 2, 3. Colors COLS = [Violet #7C66FF, Sky #38C6FF, Rose #FF5CA8, Gold #FFD166], names NAMES = ["Violet", "Sky", "Rose", "Gold"]. Selection order SEL = [3, 1, 2, 0] (the tap at u = k selects swatch SEL[k]: Gold, Sky, Rose, Violet). lastTap(u): k = min(3, floor(u)); from = SEL[(k + 3) mod 4]; to = SEL[k]; dt = u − k (seconds since the last tap, 0–1). selAmt(i, f, g) = f(dt) if i = to, 1 − g(dt) if i = from, else 0 (f and g take seconds). colAt(f) = mixL(COLS[from], COLS[to], f(dt)). posAt(f) = from + (to − from)·f(dt) (a fractional swatch index); swatch x of a fractional index p = 242 + 58p. Because everything depends only on u, 4.0s equals 0s.

A white halo ring springs from the old swatch to the tapped one, stretching sideways while it moves; the tee cross-fades to the new color. 
- Tee color colAt(easeIO(seg(dt, 0, 0.4))); swatches plain (scale 1).
- Halo position p = posAt(springF(16, 0.62)); speed v = (p(u + 0.005) − p(u − 0.005))/0.01 (indices per second); stretch st = min(0.55, 0.035·|v|).
- Halo: an ellipse at (242 + 58p, 164) with radii 30·(1 + st) and 30/√(1 + st), stroked 3px white with glow rgba(255,255,255,0.55) blur 10. Drawn after the swatches, before the finger.