Progress Steps 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 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 = ["Cart", "Address", "Payment", "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). Drawing order: the ripple first (under the circle, with its own opacity, not scaled), then the circle, translated to (x, y) and scaled (the scale also applies to its 3.5px border). "Before" means a < 0, "after" means a ≥ 0. 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). Skip a ring, outline or arc when its amount is ≤ 0.01. Done sparkles (cards 03 and 04): 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 (dx, dy, r) is sparkle4 at the card's center point + (dx·mx, dy·my) 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 with a gradient that spans the pill's own width (from its left edge to its right edge) (rr with radius h/2), shadow rgba(110,91,255,0.45) blur 14; the label is drawn at the pill's center, inside the squash scale.

Four numbered circles joined by a line; each Next fills the line to the next circle and the finished circle turns into a check. 
- Line at y = 64 from x 70 to 400, 4px round caps, #2A2840. Fill: i0 = min(2, floor(p)); fx = NX[i0] + 110·seg(p − i0, 0.1, 0.85); the filled part from 70 to fx in violet→cyan (gradient from x 70 to 400).
- Circle i at (NX[i], 64), R = 20: reach = 1 for i = 0, else seg(p, i − 0.2, i); done = seg(p, i, i + 0.3) for i < 3, D for i = 3; the whole circle is scaled by 1 + 0.16·bump(p, i − 0.25, i) (only i > 0); cur = reach·(1 − done).
- Draw per circle: if cur > 0, a 3px #6E5BFF ring of radius R + 5 + 3·pulse(u) at opacity cur·(0.25 + 0.3·pulse(u)); a #1C1B2B disk with a 2.5px #3A3852 border; at opacity reach a 3px violet→cyan ring (gradient from −R to +R in the circle's own frame) of radius R − 0.25 with glow rgba(110,91,255,0.6) blur 12; the number i+1 (700 17px, centered, baseline +6) in mix(#7F7D9C, #FFFFFF, reach) at opacity 1 − done; if done > 0: a filled disk of radius R scaled by easeBack(seg(done, 0, 0.7)), gradient from −R to +R violet→cyan (mint→cyan for the last circle); then, after the disk and outside its easeBack scale (scaled only by the circle's pop), check(0, 1, 23, seg(done, 0.3, 1), 3.2, white).
- Labels STEPS[i] (600 15px, centered) at (NX[i], 112) in mix(#7F7D9C, #F4F4F8, reach).
- Done ring: for 0 ≤ u − 2.3 < 0.5, e = ease((u − 2.3)/0.5): a 3px mint ring of radius 24 + 22e around the last circle at opacity 0.7(1 − e).
- Button pillButton(170, 152, 130, 40), squash = min of pressK(a, 0.08) over the four actions; its text rolls (700 16px white, h 18, cw 58, up): "Next" → "Restart" with k = seg(u, 2.3, 2.55) for u < 3, "Restart" → "Next" with k = seg(u, 3.25, 3.5) for u ≥ 3.
- Finger: tapMark(235, 172) at u = 0, 1, 2, 3 (the fourth tap presses "Restart" and starts the rewind).