Pull to Refresh Part 1

Pull-to-refresh demo with an iOS-style spoke spinner. Plays by itself in a 4s loop (no real touch). Times are seconds from the loop start.
- Stage: 432×196px, rounded 24px, background #0B0B12, clip everything to it. A list panel (#1A1A29, top edge 1px white 8%) fills the stage from its top edge down. Rows are 50px tall, the first one starts 8px below the panel's top: a 14px-radius circle centered 34px from the left (gradient top-left → bottom-right, from violet #6E5BFF, cyan #38C6FF or pink #FF5CA8 to #2A2840), and to its right (from x=62) two round-capped bars: 10px tall, 150/112/176px long, white 55%, centered 8px above the row center; and 8px tall, 236/190/214px long, white 20%, centered 9px below it. The three row styles repeat in that order; the new row uses the style that comes before the current top row. Easing = cubic.
- Pull distance d (how far the panel's top edge is below the stage top): 0 until 0.3s; 0.3–1.5s: d = 118·(1 − (1 − s)²) with s going 0→1; at 1.5s it is released and springs back to 80: d = 80 + 38·e^(−11τ)·cos(2π·2.2τ) (τ = time since 1.5s); 3.0–3.35s it goes from 80 back to 0 (ease-in-out).
- Fake finger: a soft white glow (radius 27px, white 55% in the middle fading to clear) with a ring of radius 17px (2.5px, white 75%), at 66% of the stage width and 74px + d below the stage top. It appears 0.18–0.3s (scaling 0.7→1), moves down with the list, and at 1.5–1.62s fades out while growing to 1.5×.
- New row: at 3.05s a new row slides in from above the list (0.4s, ease-out), pushing the others down, with a violet highlight rgba(110,91,255,0.32) that fades out 3.45–3.95s.
- Spinner: 12 spokes from radius 13 to 28px, 6.5px wide, round caps, color rgb(214,210,240), spoke 0 at 12 o'clock, going clockwise. It is centered horizontally in the gap above the list; vertically it sits in the middle of the gap, but while the gap is under 70px it stays 35px above the list's top edge (so it rises in with the list).
- While pulling, let p = d / (0.92·118), clamped to 1. Spoke k has opacity clamp(12·p − k, 0, 1)·0.85, so spokes appear one by one and all 12 are there at 1.16s.
- From 1.5s it spins: the head spoke is number floor(13·t) mod 12 (t = seconds from the loop start), so it moves clockwise one step every 1/13s; the head has opacity 1, the spokes behind it fade linearly to 0.22 over 7 steps and stay at 0.22.
- 3.0–3.2s: the spinner shrinks to 40% and fades out while the list closes.