Play Button 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 0.25s after a tap); c = floor((T + 0.25)/4) mod 3 (loop number 0–2). One tap every second, on the play button: at u = 0 Play, at u = 1 Pause, at u = 2 Play, at u = 3 Pause (in video time T = 0.75, 1.75, … 11.75). lastTap = {k = floor(u) (0–3), dt = u − k (seconds since that tap), play = (k is 0 or 2)}. "old icon" = the icon before the tap, "new icon" = after it: while playing the button shows the pause icon, while paused the play icon. Play amount playK(f) = f(dt) if play, else 1 − f(dt); the default P = playK(d → ease(d/0.35)). Scrolling: one play run moves the waveform by runD(s) (s = seconds since the Play tap; 0 for s ≤ 0; s²/0.3 for s < 0.15; 0.075 + (s − 0.15) for s < 1; with q = s − 1: 0.925 + q − q²/0.5 for s < 1.25; 1.05 after) — the speed ramps 0 → 1 in 0.15s and back to 0 in 0.25s after the Pause tap. off = 2.1c + runD(u) + runD(u − 2) (units); offPx = off·288/6.3 (≈45.71px per unit). Over 12s off grows by 6.3 = 288px = exactly one pattern of 36 bars, so the loop has no seam. Shared UI (identical in all six at rest): (1) Track text: "Paper Comets" (800 30px #F4F4F8) at (206, 62); "Nova Lane" (500 19px #9D9BBB) at (206, 92). (2) Waveform: bars 5px wide every 8px, centered on y = 152; for every integer n, x = 206 + 8n − offPx (draw only 201 ≤ x ≤ 448); opacity a = clamp((x − 206)/22)·clamp((443 − x)/22) (skip a ≤ 0.001; bars fade in and out at both ends); half-height h(n) = 6 + 24·clamp(v) with j = n mod 36 (0–35) and v = 0.5 + 0.28·sin(1.7j + 0.4) + 0.22·sin(0.69j + 1.3)·cos(2.9j); each bar rr(x, 152 − h, 5, 2h, 2.5). Played side, clipped to x 196–300: each bar #5A5680 at opacity a, then again with a horizontal violet→cyan gradient from x 206 to 300 at opacity a·(0.35 + 0.65P) (so the played side glows while playing and dims when paused). Unplayed side, clipped to x 300–458: #3A3852 at opacity a. Playhead: rr(299, 116, 2, 72, 1) white 90% plus a dot of radius 4.5 at (300, 116). (3) Play button: center (110, 111), radius 66; a disk with a linear gradient from (−66, −66) to (66, 66) in the button's own frame (violet → cyan), shadow rgba(110,91,255, 0.35 + 0.35P) blur 14 + 18P. Icons in the button's frame, white: play = triangle (−13, −24), (29, 0), (−13, 24), filled and also stroked 5px with round joins (soft corners); pause = rr(−19, −25, 13, 50, 4) and rr(6, −25, 13, 50, 4). Drawing order: type extras that sit behind (if stated), track text, waveform, type extras in front (if stated), button (disk, then icon), finger. Colors: violet #6E5BFF, cyan #38C6FF, lilac #B9AEFF. Text: font stack "Segoe UI Variable Display","Segoe UI",sans-serif; x is the left edge; y is the alphabetic baseline. rr(x, y, w, h, r) = rounded rect from its top-left. mix(A, B, k) = per-channel linear RGB blend. 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)). Spring springF(ω₀, ζ)(t) = 0 for t ≤ 0, else 1 − e^(−ζω₀t)(cos ω_d t + (ζω₀/ω_d) sin ω_d t), ω_d = ω₀√(1−ζ²). Press squash pressK(a, depth) (a = time since a tap, wrapped to −2…+2) = 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. Button squash sc(depth) = the minimum of pressK over the four taps. Tap indicator tapMark at (110, 111) for each of the four taps (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) on the fill only (no shadow on the border), 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), drawn first, not scaled, and not multiplied by the circle opacity; then the circle, translated to (110, 111) and scaled. Every tap reaction below settles within the 1s before the next tap.

The play triangle is two shapes that morph on a spring into the two pause bars (and back), with a small twist. 
- Button: translate (110, 111), scale sc(0.06); disk; then rotate by (play ? +1 : −1)·0.42·bump(dt, 0, 0.5) rad (the icon only).
- Morph amount M = clamp(playK(springF(17, 0.48)), −0.12, 1.12) (0 = play triangle, 1 = pause bars; it overshoots a little).
- Two quads, each point lerped by M: left quad (−13, −24), (8, −12), (8, 12), (−13, 24) → (−19, −25), (−6, −25), (−6, 25), (−19, 25); right quad (8, −12), (29, 0), (29, 0), (8, 12) → (6, −25), (19, −25), (19, 25), (6, 25). Each filled white and stroked 4px white with round joins (this replaces the normal icon).