Progress Steps 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 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 in the middle of the first move). One action every second: at u = 0 step 1 → 2, at u = 1 step 2 → 3, at u = 2 step 3 → 4 (complete), at u = 3 a quick rewind 4 → 1. Step position p (fractional, 0 = step 1 … 3 = step 4): SEQ = [0, 1, 2, 3, 0]; k = floor(u) (0–3); from = SEQ[k], to = SEQ[k+1]; d = 0.45 for k = 0, 1, 2 and 0.5 for k = 3; p = from + (to − from)·easeIO((u − k)/d) (each move takes 0.45s, the rewind sweeps back through 3, 2, 1 in 0.5s; then p rests until the next second). lastAct = {k, dt = u − k, from, to}. Done amount D = ease(seg(u, 2.3, 2.55)) for u < 3, else 1 − seg(u, 3.0, 3.15). pulse(u) = 0.5 − 0.5·cos(2πu) (a 1s breathing value, 0 at whole seconds). Steps STEPS = ["Account", "Profile", "Plan", "Done"]; four x positions NX = [70, 180, 290, 400]. Because every value depends only on u, the rewind plays every fill, check and label backwards, and 4.0s equals 0s. Colors: violet #6E5BFF, cyan #38C6FF, pink #FF5CA8, gold #FFD166, mint #3DDBB0, track #2A2840, dark fill #1C1B2B, edge #3A3852, gray text #7F7D9C. "violet→cyan" is a horizontal linear gradient from the given left x (violet) to right x (cyan); grad(stops) = a linear gradient with evenly spaced stops. 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. Easing (k clamped to 0–1): ease = 1 − (1−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)). Check mark check(cx, cy, s, prog, lw, color): a round-capped, round-joined polyline through (cx − 0.30s, cy + 0.02s), (cx − 0.09s, cy + 0.23s), (cx + 0.32s, cy − 0.20s), drawn from the start up to the fraction prog of its length. Rolling word rollDigits(x, y, from, to, k, font, color, h, up, align, cw): baseline middle, clipped to a rect of height 1.24h around y and width 2cw (centered on x; for align left it starts at x − 8, for align right it ends at x + 8); e = ease(k); D = −1.05h if up else +1.05h; the old word at opacity 1 − e at y + D·e, the new word at opacity e at y + D·(e − 1). rollP(x, y, p, words, up, …) follows the position: a = floor(p), b = a + 1 (max 3), f = p − a; if up: rollDigits(words[a] → words[b], k = f, up); else rollDigits(words[b] → words[a], k = 1 − f, down) — so on the rewind the word counts back 4 → 3 → 2 → 1 quickly; up = (lastAct.to > lastAct.from). Tap indicator tapMark(x, y, a) (a = time since the tap, wrapped to −2…+2; drawn on top): visible only for −0.42 ≤ a < 0.4; circle of radius 22.575, fill rgba(215,215,230,0.38) with a shadow (black 35%, blur 10), border 3.5px white 92%; scale lerp(1.25, 1, ease((a+0.42)/0.32)) for a < −0.1, lerp(1, 0.8, (a+0.1)/0.1) for −0.1 ≤ a < 0, lerp(0.8, 1, ease(a/0.2)) after; opacity clamp((a+0.42)/0.18) before, clamp(1 − (a−0.12)/0.25) after; for 0 ≤ a < 0.4 a 3px white ripple ring of radius 22.575·(1 + 3.2a) at opacity 0.7·(1 − a/0.4) (the ring is drawn under the circle, is not scaled, and has its own opacity). Press squash pressK(a, depth) = 1 for a < −0.1 or a > 0.6; 1 − depth·(a+0.1)/0.1 just before the tap; 1 − depth·(1 − springF(22, 0.45)(a)) after; springF(ω₀, ζ)(t) = 1 − e^(−ζω₀t)(cos ω_d t + (ζω₀/ω_d) sin ω_d t), ω_d = ω₀√(1−ζ²). A button's scale = the minimum over its taps of pressK(a, depth) (it never exceeds 1). Done sparkles (cards 04–06): a = seg(u, 2.45, 2.95), b = bump(u, 2.45, 2.95) = sin(π·a) (they start when the last move has ended, grow in and fade out); each sparkle j with (dx, dy, r) is sparkle4 at the card's center point + (dx·m, dy·m) with radius 1.4·r·b and opacity b. Sparkle sparkle4(x, y, r, alpha, color) = an 8-point star (points alternating radius r and 0.28r, the first pointing up). Pill button pillButton(x, y, w, h): drawn around its center, scaled by the press squash; filled violet→cyan (rr with radius h/2) with a shadow rgba(110,91,255,0.45) blur 14; the outline variant is a 2px border rr(x+1, y+1, w−2, h−2, h/2) with no fill.

A glowing white bead travels along the connector with a short cyan trail, the line fills behind it, and the next node pops and ripples when it arrives. 
- Line at y = 98 from 70 to 400, 4px round caps #2A2840; bead x bx(q) = 70 + 110q; filled part from 70 to bx(p), with one violet→cyan gradient fixed from x 70 to 400 (not stretched with the fill), glow rgba(56,198,255,0.5) blur 8.
- Node i at (NX[i], 98), R = 11: #1C1B2B disk with a 2.5px #3A3852 border; reach = 1 for i = 0, else seg(p, i − 0.06, i); if reach > 0, translate to the node and scale by easeBack(reach), then a disk of radius R filled with a gradient from x −R (violet) to x +R (cyan) in that scaled frame; for the last node, at opacity D and inside the same scale, the same disk in mint→cyan; then check(NX[3], 99, 13.2, D, 2.6, white). Label STEPS[i] (600 15px centered) at (NX[i], 144), mix(#7F7D9C, #F4F4F8, reach).
- Arrival ripple: a = lastAct.dt − 0.45; for 0 ≤ a < 0.5, e = ease(a/0.5): a 2.5px ring of radius 14 + 20e around node lastAct.to, cyan (mint for the last node), opacity 0.75(1 − e) (the rewind also ripples on the first node).
- Trail: for j = 7 down to 1: q = p at time u − 0.022j; skip if it is within 1px of the bead; a cyan disk of radius 6.5(1 − j/10) at bx(q) at opacity 0.55(1 − j/8).
- Bead: fin = D·(1 − |p − 3|); a white disk of radius 6.5 + 1.5·pulse(u) at bx(p) with glow rgba(56,198,255,0.95) blur 20, opacity 1 − 0.85·fin (it melts into the finished last node).
- Draw order: line, fill, nodes (with labels), ripple, trail, bead.