Slider 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 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 for idle motion: the wave in 02 (period 1s) and the moving parts of the small picture in 05 (period 4s); both periods divide 4 (and the 05 picture is only visible while the finger holds), so you may use u instead of T, and 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 (pink #FF5CA8, gold #FFD166 and mint #3DDBB0 appear only inside the 05 picture). "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, 800); 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)). Lines have butt (flat) caps unless "round caps" is stated. 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)³, easeIO = 4k³ for k < 0.5, else 1 − (−2k+2)³/2. seg(x, a, b) = clamp((x − a)/(b − a)); seg(a, b) with two arguments applies it to u. 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): rr(x0, y − h/2, x1 − x0, h, h/2) filled #2A2840; then, with xe = x0 + (x1 − x0)·k, only if xe − x0 > 0.5: rr(x0, y − h/2, xe − x0, 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. Picture scenery(x, y, w, h, r, kind, t) (05 only; a made-up stand-in for a video frame): clipped to rr(x − w/2, y − h/2, w, h, r), in a frame translated to its top-left (x − w/2, y − h/2), with ph = t·π/2. kind 0 (sunset mountains): fillRect(0, 0, w, h) with a vertical linear gradient from y = 0 to h: #3B2E86 (0), #7E5BD6 (0.5), #F3A5C8 (1); a sun disc #FFD8A8 at (0.7w, 0.42h), radius 0.13h; mountains = filled polygon #2A2266 through (0, h), (0.32w, 0.48h), (0.55w, 0.78h), (0.75w, 0.58h), (w, 0.85h), (w, h). kind 1 (sea): fillRect with a vertical gradient #1B3F7A (y = 0) → #38C6FF (y = h); a disc rgba(255,255,255,0.85) at (0.3w, 0.3h), radius 0.08h; three wave layers m = 0, 1, 2 (back to front) filled #2C6FC0, #1F55A0, #173F80: a polygon from (0, h) through the points (j/20·w, h·(0.62 + 0.12m) + sin(0.9j + ph + m)·0.03h) for j = 0…20, then (w, h). kind 2 (flowers): fillRect with a diagonal linear gradient from (0, 0) #183A33 to (w, h) #2E7A63; three flowers j = 0, 1, 2 with (a, b, rad, color) = (0.3, 0.55, 0.12, #FF5CA8), (0.66, 0.4, 0.15, #FFD166), (0.55, 0.75, 0.1, #FF9CCB), drawn in that order; for each, sway sw = sin(ph + j)·0.02h; a stem line #3DDBB0, line width max(2, 0.03h), from (a·w, h) to (a·w + sw, b·h); five petals p = 0…4, each a disc of radius 0.5·rad·h filled with the flower's color, centered at (a·w + sw + cos(A)·0.6·rad·h, b·h + sin(A)·0.6·rad·h) with A = p·2π/5 + 0.2·ph (in 4s the flower turns exactly one petal, so it loops); then a center disc #FFF3C4 of radius 0.4·rad·h at (a·w + sw, b·h).

A hue slider on a rainbow track: the thumb's center, a big color swatch and its hex code all take the hue under the thumb. 
- v = drag2(0.7, 0.16) (0.7 → 0.16 → 0.7); hue H = 360v (252 → 57.6 → 252); kx = lerp(70, 400, v) (301 → 122.8).
- hsl(H) = the CSS color hsl(H′, 85%, 62%) with H′ = round(H) wrapped into 0–359.
- Hex code hex(H) (computed from the unrounded H): a = 0.85·min(0.62, 1 − 0.62) = 0.323; f(n): k = (n + H/30) mod 12, channel = round(255·(0.62 − a·max(−1, min(k − 3, 9 − k, 1)))); R = f(0), G = f(8), B = f(4); written "#" + each channel as two uppercase hex digits (H = 252 → "#6D4CF0", H = 57.6 → "#F0EA4C").
- Track: rr(70, 143, 330, 14, 7) filled with a horizontal linear gradient from x = 70 to 400 with 13 stops: at k/12 the color hsl(30k), k = 0…12 (red → yellow → green → cyan → blue → magenta → red).
- Swatch: rr(70, 40, 58, 58, 16) filled hsl(H), with a glow of the same color hsl(H), shadowBlur 18·(0.4 + 0.6·held) (it glows stronger while held).
- Labels: "Accent" (500 16px, #9D9BBB) at x = 146, baseline 62; hex(H) (700 22px, white) at x = 146, baseline 90.
- Thumb (its own drawing, not knob()): in a frame translated to (kx, 150) and scaled by 1 + 0.3·held: a white disc of radius 15 with a shadow rgba(0,0,0,0.45), shadowBlur 8, no offset; then, without shadow, a disc of radius 10.5 filled hsl(H) (a white ring around the current color).
- Hold indicator: fingers(kx, 150).
- Draw order: track, swatch, "Accent", hex code, thumb, hold indicator.