Date 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). One tap every second at u = 0, 1, 2, 3 (video T = 0.75, 1.75, … 11.75). Day indices 0–6 = Sun–Sat. SEL = [5, 1, 3, 6] (the day selected by the tap at u = k). lastTap(u): k = floor(u) (0–3), from = SEL[(k+3) mod 4], to = SEL[k], dt = u − k (seconds since the last tap, 0–1). So the selection goes Sat → Fri → Mon → Wed → Sat. Every reaction is finished by dt ≈ 0.85, so the picture rests briefly before the next tap. Because every value depends only on u, 4.0s equals 0s. Colors: violet #6E5BFF, cyan #38C6FF, gray text #7F7D9C. mix(A, B, k) = per-channel linear RGB blend. Text: font stack "Segoe UI Variable Display","Segoe UI",sans-serif, weight and size as given; x is the left edge unless "centered" or "right-aligned"; y is the alphabetic baseline unless "middle" is stated. rr(x, y, w, h, r) = rounded rect from its top-left, with r clamped to min(r, w/2, h/2). Easing (k clamped to 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)² (overshoots about 10%). lerp(a, b, k) = a + (b−a)k; clamp(x) to 0–1; seg(x, a, b) = clamp((x−a)/(b−a)); bump(x, a, b) = sin(π·seg(x, a, b)). Spring springF(ω₀, ζ)(t) = 1 − e^(−ζω₀t)(cos ω_d t + (ζω₀/ω_d) sin ω_d t), ω_d = ω₀√(1−ζ²), 0 for t ≤ 0.

A glowing ring draws itself around the tapped day, the capsule fills in, then the ring fades; the old day's ring unwinds as its fill fades. 
- Ring geometry around day x (5px outside the capsule): w = 62, h = 104, r = 31, top = 51, bottom = 155, straight part 42; path starts at the top center (x, 51) and goes clockwise: arc center (x, 82) from −π/2 to 0, line down to (x + 31, 124), arc center (x, 124) from 0 to π, line up to (x − 31, 82), arc center (x, 82) from π to 3π/2. Length L = 62π + 84 ≈ 278.8.
- traceRing(x, k, alpha): skip if k ≤ 0.003; 3.5px round caps, stroke = linear gradient (x − 31, 51) violet → (x + 31, 155) cyan, shadow rgba(56,198,255,0.75) blur 10, line dash [L·k, 2L] (only the first fraction k is drawn). If k < 0.999, a white head dot r 4.5 at the point at length L·k along the path, opacity alpha·min(1, 8k)·min(1, 8(1 − k)), shadow rgba(255,255,255,0.9) blur 12.
- fo = 1 − ease(seg(dt, 0, 0.22)); fn = ease(seg(dt, 0.3, 0.58)).
- Draw order: traceRing(xo, 1 − easeIO(seg(dt, 0, 0.36)), opacity bump(dt, 0, 0.36)) (the old ring unwinds); capsule(xo, 103, 52, 94, fo); capsuleT(xn, 103, 0.8 + 0.2fn, same, 0, fn); traceRing(xn, easeIO(seg(dt, 0, 0.42)), opacity 1 − seg(dt, 0.6, 0.85)); days with on = fn for the new day, fo for the old day.