Slider 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 animation is a 4s loop that plays by itself and is seamless (the state at 4.0s equals the state at 0s; u = loop time 0–4 in seconds, and all times below are values of u). The video is 12s = three loops; T = seconds since the video start (0–12). T is used only in 02, through the loop index k12 = floor((T mod 12)/4) (0 in the first loop, 1 in the second, 2 in the third); 02's values at the end of each loop equal its values at the start of the next one (also loop 2 → loop 0), so 12s → 0s is seamless too. Everything else depends only on u. The finger makes two drags in every loop: it presses at 0.5s, moves the value during 0.6–1.4s and lifts at 1.5s; it presses again at 2.3s, moves the value back during 2.4–3.2s and lifts at 3.3s; 3.3–4.0s is still. Colors: violet #6E5BFF, cyan #38C6FF. "violet→cyan from x = a to b" is a horizontal linear gradient with violet at x = a and cyan at x = b (in the current drawing frame). Text: font stack "Segoe UI Variable Display","Segoe UI",sans-serif, weight and size as given (weights used: 500, 600, 700); x is the left edge unless "centered" or "right-aligned"; y is the alphabetic baseline. mix(A, B, k) = per-channel linear RGB blend (k clamped to 0–1, channels rounded). "Glow" = a canvas shadow (that shadowColor and shadowBlur, no offset). rr(x, y, w, h, r) = rounded rect with top-left (x, y), corner radius max(0, min(r, w/2, h/2)). clamp(x) = x limited to 0–1; lerp(a, b, k) = a + (b − a)·k. Easing (k is clamped to 0–1 first): 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)² (0 → 1, overshooting to about 1.12). seg(x, a, b) = clamp((x − a)/(b − a)); seg(a, b) with two arguments applies it to u. 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). Drag value drag2(a, b) = lerp(a, b, easeIO(seg(0.6, 1.4))) for u < 1.9, else lerp(b, a, easeIO(seg(2.4, 3.2))) (a → b with the first drag, b → a with the second). Held amount held = max(seg(0.5, 0.62)·(1 − seg(1.5, 1.65)), seg(2.3, 2.42)·(1 − seg(3.3, 3.45))) (0 → 1 in 0.12s after each press, 1 → 0 in 0.15s after each lift). Track track(x0, x1, y, h, k, from = 0): rr(x0, y − h/2, x1 − x0, h, h/2) filled #2A2840; then, from xs = x0 + (x1 − x0)·from to xe = x0 + (x1 − x0)·min(k, 1.5) (k below 0 counts as 0), only if xe − xs > 0.5: rr(xs, y − h/2, xe − xs, h, h/2) filled violet→cyan from x0 to x1 (the gradient spans the whole track, so its colors stay in place while the fill grows). Knob knob(x, y, r, sc, ring): in a frame translated to (x, y) and scaled by sc around it: if ring > 0, a disc of radius 1.9r filled rgba(110,91,255,0.28) at opacity ring (no shadow); then a white disc of radius r with a shadow rgba(0,0,0,0.45), shadowBlur 8, shadowOffsetY 2 (shadow sizes are screen px and do not scale). Hold indicator holdMark(x, y, T0, T1) (a finger that presses at T0 and lifts at T1, drawn on top of everything at the finger's current point, so it moves with the drag; a = u − T0 wrapped into −2…+2 (negative before T0), b = u − T1 wrapped into 0…4): while T0 ≤ u < T1 it has opacity 1 and scale lerp(0.8, 0.86, ease(a/0.2)) (0.86 after 0.2s); else if b < 0.4 (after the lift): opacity clamp(1 − (b − 0.12)/0.25) (gone at b = 0.37), scale lerp(0.86, 1, ease(b/0.2)); else if −0.42 ≤ a < 0 (approach): opacity clamp((a + 0.42)/0.18), scale lerp(1.25, 1, ease((a + 0.42)/0.32)) for a < −0.1, then lerp(1, 0.8, (a + 0.1)/0.1) for −0.1 ≤ a < 0; otherwise it is hidden. The circle: radius 22.575px, fill rgba(215,215,230,0.38) with a soft shadow (black 35%, shadowBlur 10, fill only), then a 3.5px border white 92% (no shadow); fill and border are drawn in the circle's scaled frame, so the border width scales with the circle. Ripple (drawn under the circle, not scaled, at the finger's current point): whenever u ≥ T0 and 0 ≤ a < 0.4, a 3px white ring of radius 22.575·(1 + 3.2a) (22.6 → 51.5px) at opacity 0.7·(1 − a/0.4) (its own opacity, not multiplied by the circle's); it keeps growing for its full 0.4s. fingers(x, y) = holdMark(x, y, 0.5, 1.5) then holdMark(x, y, 2.3, 3.3), both at the same point. Speaker speaker(x, y, s, w, mute, col) (04 only): in a frame translated to (x, y), fill and stroke color col, round caps and joins. Body = filled polygon (−0.5s, −0.18s), (−0.25s, −0.18s), (0.02s, −0.42s), (0.02s, 0.42s), (−0.25s, 0.18s), (−0.5s, 0.18s) (the cone opens to the right). Waves, line width 0.085s: for k = 0, 1, 2, a = clamp(w − k); if a > 0, at opacity a, stroke an arc centered (0.02s, 0) with radius (0.22 + 0.17k)·s·(0.85 + 0.15a) from angle −0.75 to +0.75 rad (canvas angles, on the right side). Mute cross, if mute > 0: at opacity mute, c = 0.42s, d = 0.15s·mute, strokes (c − d, −d) → (c + d, d) and (c + d, −d) → (c − d, d), same line width. Sun sun(x, y, s, v, col) (05 only): in a frame translated to (x, y), a disc of radius 0.2s filled col; 8 rays, k = 0…7 at angle k·45° (k = 0 points right), each a line from radius 0.3s to 0.3s + (0.06 + 0.16v)·s, line width 0.08s, round caps, color col.

A slider whose thumb, while held, shows a rounded value bubble above it that follows the drag and pops away on release. 
- v = drag2(0.2, 0.8) (0.2 → 0.8 → 0.2); kx = lerp(70, 400, v) (136 → 334).
- Labels: "Opacity" (600 19px, #E9E8F5) at x = 70, baseline 58; round(100v) + "%" (500 18px, #9D9BBB) right-aligned at x = 400, baseline 58.
- Track: track(70, 400, 150, 8, v). Under it: "0" (500 15px, #6D6B88) at x = 70, baseline 186; "100" (same font and color) right-aligned at x = 400, baseline 186.
- Thumb: knob(kx, 150, 15, 1 + 0.22·held, ring = held).
- Bubble size b = max(b1, b2): b1 = 0 before 0.5; easeBack(seg(0.5, 0.75)) for 0.5 ≤ u < 1.5; 1 − easeIn(seg(1.5, 1.68)) for 1.5 ≤ u < 1.9; 0 from 1.9. b2 = 0 before 2.3; easeBack(seg(2.3, 2.55)) for 2.3 ≤ u < 3.3; 1 − easeIn(seg(3.3, 3.48)) from 3.3.
- Bubble (only if b > 0.001), scaled by b around (kx, 124) (the tip of its tail): rr(kx − 33, 74, 66, 42, 14) filled violet→cyan from kx − 33 to kx + 33 with glow rgba(110,91,255,0.5) blur 12; then the tail triangle (kx − 8, 115), (kx + 8, 115), (kx, 124) filled #5391FF (= mix(violet, cyan, 0.5)) with the same glow; then, without glow, round(100v) (700 21px, white) centered at x = kx, baseline 102. It moves with the thumb.
- Hold indicator: fingers(kx, 150).
- Draw order: "Opacity", percent, track, "0", "100", thumb, bubble, hold indicator.