Segmented Control Part 2

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 card behind the stage has a 2px rgba(255,255,255,0.07) border on rr(0, 0, 470, 370, 40); about 1px of it shows at the stage's top, left and right edges. A segmented control with four segments, labels SEGS = ["S", "M", "L", "XL"] (index 0–3 from the left). The animation is a seamless 4s loop that plays by itself (u = loop time 0–4 s); the video is 12s = three identical loops, video time T, u = (T + 0.25) mod 4 (so the first frame is 0.25s after a tap and already moving). A tap lands every 1.0s, at u = 0, 1, 2, 3 (video T = 0.75, 1.75, …, 11.75), selecting the segments SEL = [3, 1, 2, 0] in that order (the k-th tap, k = floor(u), selects SEL[k]), so the moves are 3, 2, 1 and 2 segments long and the loop ends where it started. Last tap: k = floor(u), from = SEL[(k + 3) mod 4], to = SEL[k], dt = u − k (0–1 s since that tap). Treat it as an endless cycle: at u = 0.25 the move from 0 to 3 is still running. Position helper posAt(f) = from + (to − from)·f(dt) (a fractional segment index; f is the easing or spring named in each prompt). Spring springF(ω₀, ζ)(t) = 0 for t ≤ 0, else 1 − e^(−ζω₀t)·(cos ω_d t + (ζω₀/ω_d)·sin ω_d t), ω_d = ω₀√(1−ζ²) (rises 0 → 1 with an overshoot). Geometry segGeo(x0, y0, w, h) (pad = 5 unless given): segment width sw = (w − 10)/4; the center x of segment i (i may be fractional) is sx(i) = x0 + 5 + sw·(i + 0.5); cy = y0 + h/2. Track drawTrack: rr(x0, y0, w, h, h/2) filled #1B1A28 with a shadow rgba(0,0,0,0.45), blur 16, offset (0, 5); then (no shadow) a 1.5px border rgba(255,255,255,0.08) stroked on rr(x0 + 0.75, y0 + 0.75, w − 1.5, h − 1.5, h/2 − 0.75). A "clamped thumb" of width sw at position p has left x = clamp(sx(p) − sw/2, x0 + 5, x0 + w − 5 − sw) (so a spring overshoot at the end segments stops at the inner edge instead of leaving the track) and the label position is p′ = (x + sw/2 − sx(0))/sw. Raised thumb raisedThumb(x, y, w, h, r): rr filled with a vertical linear gradient from y #4A4672 to y + h #34314F, with a shadow rgba(0,0,0,0.55), blur 12, offset (0, 3); then (no shadow) a 1.5px border rgba(255,255,255,0.16) on rr(x + 0.75, y + 0.75, w − 1.5, h − 1.5, r − 0.75). Gradient thumb gradThumb(x, y, w, h, r, glow = 18): rr filled violet→cyan with a shadow rgba(110,91,255,0.6), blur glow, no offset. Labels segLabels(p′, fs) (fs = font size): for each i, c = clamp(1 − |p′ − i|); centered at x = sx(i), baseline cy + 0.36·fs; if c < 1 draw the label in 500 fs px #8C8AA8 at opacity 1 − c; if c > 0 draw it again in 700 fs px, color mix(#8C8AA8, #FFFFFF, c), at opacity c (the regular gray word crossfades into the bold white word as the thumb arrives). Tap indicator tapMark(xOf, y, rs = 3.2) (drawn last, on top; rs = ripple spread, 3.2 unless a prompt gives another value): for the next tap with time-to-tap d < 0.42 use a = −d and the segment it will select; else, if the last tap's dt < 0.4, use a = dt and the selected segment; otherwise hidden. Position (xOf(segment), y). A circle of radius 23, fill rgba(215,215,230,0.38) with a shadow (black 35%, blur 10, no offset, fill only), then a 3.5px border white 92% (no shadow), both drawn in the circle's scaled frame. Scale: for a < −0.1, lerp(1.25, 1, ease((a+0.42)/0.32)); for −0.1 ≤ a < 0, lerp(1, 0.8, (a+0.1)/0.1); for a ≥ 0, lerp(0.8, 1, ease(a/0.2)). Opacity clamp((a+0.42)/0.18) before the tap, clamp(1 − (a−0.12)/0.25) after. Ripple (under the circle, not scaled, 0 ≤ a < 0.4): a 3px white ring of radius 23·(1 + rs·a), opacity 0.7·(1 − a/0.4). The ripple's opacity is its own (0.7·(1 − a/0.4)); it is not multiplied by the circle's opacity. Rolling text rollText(x, y, from, to, k, font, color, h, up, cw): centered, baseline middle, clipped to the rect (x − cw/2, y − 0.62h, cw, 1.24h); e = ease(k); D = −1.05h if up, else +1.05h; if k < 1 the old text at opacity 1 − e at y + D·e; if k > 0 the new text at opacity e at y + D·(e − 1) (with up the old text leaves upward and the new one rises from below). Colors: violet #6E5BFF, cyan #38C6FF, pink #FF5CA8, gold #FFD166, mint #3DDBB0, gray #8C8AA8. "violet→cyan" is a horizontal linear gradient from the shape's own left edge (violet) to its right edge (cyan) unless end points are given. Text: font stack "Segoe UI Variable Display","Segoe UI",sans-serif; x is the left edge unless "centered"; y is the alphabetic baseline unless "baseline middle". tw(s, font) = the measured width of s. mix(A, B, k) = per-channel linear RGB blend, rounded. rr(x, y, w, h, r) = rounded rect, top-left (x, y), radius clamped to 0…half the smaller side. Easing (k clamped to 0–1 first): ease = 1−(1−k)³, easeIO = 4k³ for k < 0.5 else 1 − (−2k+2)³/2. lerp(a, b, k) = a + (b−a)·k; clamp(x) clamps to 0–1; seg(x, a, b) = clamp((x−a)/(b−a)); bump(x, a, b) = sin(π·seg(x, a, b)). Opacities multiply with the surrounding opacity.

The thumb is only a glowing violet→cyan outline that glides with a spring, leaving two faint outline echoes behind it. 
- G = segGeo(30, 79, 410, 60) (centers x 85, 185, 285, 385, cy 109). drawTrack with fill #16151F.
- Thumb left X(v) = the clamped thumb x for p = posAt(springF(14, 0.6)) evaluated at loop time v (thumb 100×50 at y 84).
- Echoes (behind): for (delay, opacity) = (0.10, 0.16) then (0.05, 0.32): x = X(u − delay); at that opacity stroke rr(x + 1, 85, 98, 48, 24) 2px violet→cyan (across that rect).
- Main: x = X(u); fill rr(x, 84, 100, 50, 25) rgba(110,91,255,0.10); then stroke rr(x + 1.25, 85.25, 97.5, 47.5, 23.75) 2.5px violet→cyan with shadow rgba(110,91,255,0.75) blur 14.
- Labels: segLabels(p′, fs = 20) with p′ from the main thumb.
- Finger: tapMark(sx, 109).
- Draw order: track, echoes, main outline, labels, finger.