Floating Button Part 2

Basics: stage 470×222px, 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 (u = loop time 0–4s; the state at 4.0 equals the state at 0). The video is 12s = three loops and starts 1s into the loop, already in motion: for video frame f (30fps), u = ((f + 30) mod 120)/30; T = f/30 = video seconds (0–12) is used only for slow idle effects with periods of 2s or 4s, so 12s → 0s is seamless. Two moments per loop: TA = 0.5 (open / press / scroll down) and TB = 2.5 (close / press again / scroll back) — in video time T = 3.5, 7.5, 11.5 and 1.5, 5.5, 9.5. Helpers: clamp(x) = x limited to 0–1; lerp(a, b, k) = a + (b − a)·k; seg(x, a, b) = clamp((x − a)/(b − a)); bump(x, a, b) = sin(π·seg(x, a, b)); ease = 1 − (1 − k)³; easeIn = k³; easeIO = 4k³ for k < 0.5, else 1 − (−2k + 2)³/2; flick(k) = 1 − (1 − k)³·(1 + 3k) (starts with zero speed, moves fast, then a long gentle stop, like a flicked list). In ease, easeIn, easeIO, flick and easeBack, k is clamped to 0–1 first; lerp is NOT clamped (it overshoots when k > 1). Spring springF(ω₀, ζ)(t) = 0 for t ≤ 0, else 1 − e^(−ζω₀t)·(cos ω_d t + (ζω₀/ω_d)·sin ω_d t), ω_d = ω₀√(1 − ζ²) (rises 0 → 1 with an overshoot). For a moment E: since(E) = (u − E) mod 4 (0…4); rel(E) = since(E), minus 4 when it is > 2 (−2…+2, negative before E). Toggle tog(fo, fc) = fo(u − TA) while TA ≤ u < TB, else 1 − fc(since(TB)) (fo and fc both rise 0 → 1; 0 = closed, 1 = open; both have finished long before the next moment, so the loop is seamless). Press squish pressK(a) (a = rel to a press): 1 for a < −0.1 or a > 0.6; for −0.1 ≤ a < 0: 1 − 0.08·(a + 0.1)/0.1; for a ≥ 0: 1 − 0.08·(1 − springF(22, 0.45)(a)) (squeezes to 92% just before the touch and springs back). Colors: violet #6E5BFF, cyan #38C6FF, pink #FF5CA8, gold #FFD166, mint #3DDBB0. "violet→cyan" = a linear gradient with violet at the first point and cyan at the second; mix(A, B, k) = per-channel linear RGB blend, rounded. rr(x, y, w, h, r) = rounded rect with top-left (x, y), radius r (limited to 0…min(w, h)/2). 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"; y is the alphabetic baseline. Opacities multiply with the surrounding opacity. All shadows have x offset 0, and y offset 0 unless given.

While the list is flicked down, a thin ring around the arrow FAB fills like a progress bar; a tap on the FAB sends the list flying back to the top, the arrow hops and the ring empties. 
- sy(u) = 190·flick(seg(u, 0.55, 1.75)) while TA ≤ u < TB, else 190·(1 − easeIO(seg(since(TB), 0.08, 0.62))) (a slow flick down, a quick ride back up). p = sy/190. appList(sy(u)).
- Ring: a circle of radius 33 centered (410, 176), 3.5px, rgba(255,255,255,0.12); if p > 0.004, an arc of the same circle from −π/2 to −π/2 + 2πp (clockwise from the top), 3.5px, round caps, with a linear gradient from (377, 143) violet to (443, 209) cyan.
- FAB: fab(410, 176, 26, sc = pressK(rel TB), icon = up arrow drawn at (0, hop), size 16.12, lw 2.6, white) with hop = −5·bump(since(TB), 0.05, 0.45). shine(384, 150, 52, 52, 26).
- Fingers: holdMark(232, 190 − sy(clamp(u, 0.5, 0.95)), 0.5, 0.95) (touches at y 190 and pushes the list up until it lifts at 0.95); tapMark(410, 176) at TB.
- Draw order: screen, ring track, ring arc, FAB, shine, fingers.