Add to Cart Part 3

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 just after the first tap). One tap on the button every second, at u = 0, 1, 2, 3. k = floor(u) (0–3), dt = u − k (time since the last tap). Taps at u = 0, 1, 2 add one item each (the cart count goes 0 → 1 → 2 → 3); after the third, the button becomes "Checkout"; the tap at u = 3 places the order and empties the cart (count 3 → 0), and the button goes back to "Add to cart". In video time T the taps are at T = 0.75, 1.75, 2.75, 3.75 (+4, +8) = u 1, 2, 3, 0; the order tap is at T = 2.75, 6.75, 10.75. Every value depends only on u (and the steam on T), so 4.0s equals 0s. Colors: violet #6E5BFF, cyan #38C6FF, pink #FF5CA8, gold #FFD166, mint #3DDBB0, gray text #8E8CAB. "violet→cyan" is a horizontal linear gradient from the shape's own left edge (violet) to its right edge (cyan). 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"; 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)³; easeIn = 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 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 up to the fraction prog of its length. Rolling text roll(x, y, from, to, k, font, color, h, cw): centered, baseline middle, clipped to the rect (x − cw, y − 0.62h, 2cw, 1.24h); e = ease(k); the old text at opacity 1 − e at y − 1.05h·e, the new text at opacity e at y + 1.05h·(1 − e) (the new one comes up from below).

On each add, a glowing ball with a dotted trail arcs from the button up into the cart; the cart glows cyan as it lands. 
- ta = 0.45. Drawn in the "over" layer. Only on the adding taps (k < 3), and only for dt ≤ 0.6; nothing on the order tap.
- Path: quadratic Bézier from P0 (317, 150) with control (330, 6) to P1 (400, 60) (the cart center).
- 9 dots, j = 8 down to 0 (draw the head last): d = dt − 0.025j; s = easeIO(seg(d, 0.03, 0.45)); a = seg(d, 0.03, 0.09)·(1 − seg(s, 0.88, 1)) (each dot fades in at launch and fades out as it reaches the cart); skip if a ≤ 0.01.
- Head (j = 0) at opacity a: a radial gradient circle of radius 24 from rgba(56,198,255,0.75) (radius 2) to transparent, then a white disk of radius 8.
- Trail dots (j = 1–8) at opacity a·0.85·(1 − j/9): disk of radius 6·(1 − j/11) in mix(#B9EBFF, violet, j/8).
- Cart glow = bump(dt, 0.42, 0.8) (on adding taps only).