Pull to Refresh Part 2

Pull-to-refresh demo where a little rocket launches. 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 and is drawn over the rocket. Rows are 50px tall, the first one starts 8px below the panel's top: a 14px-radius circle centered 34px from the left on the row's center line (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. Rows persist across loops: at the very start the top row is violet, and each loop's new row stays on top, so the list looks the same again every 3 loops. "ease-out" = 1 − (1 − k)³, "ease-in-out" = cubic in-out; anything without a named easing (fades, color changes, levels) is linear.
- 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). Let p = d / (0.92·118), clamped to 1 (p reaches 1 at 1.16s and stays 1 after release).
- 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 fades in 0.18–0.3s (opacity 0→1, scaling 0.7→1), moves down with the list, and at 1.5–1.62s fades out while growing to 1.5×. It is drawn on top of everything.
- Rocket: its base stands on a "launch pad" 10px above the list's top edge, centered horizontally, scaled 0.6→1.15 from its base as p goes 0→1. Shape at scale 1 (origin = base center, up is negative y): body #ECEBFF from the nose (0, −52) with a cubic curve (controls (15, −40), (13, −14)) to (10, −2), straight to (−10, −2) and mirrored back up; a cyan #38C6FF window, radius 5.5, at (0, −29); two violet #6E5BFF fins, triangles (−10, −18) (−20, 2) (−10, −3) and the mirror. Flame under it: from (−7, −2) a quadratic curve (control (−6, f/2)) to (0, f) and mirrored back to (7, −2), filled with a vertical gradient from y = 0 to y = f: white → gold #FFD166 at 30% → transparent pink. Draw order: flame, fins, body, window. f = 4 + 18·p while pulling, always flickering ×(1 + 0.15·sin(70·t)).
- 1.16–1.5s: the rocket shakes sideways by 1.6·sin(95·t) px.
- 1.5–2.0s: blast-off. With k going 0→1 over 0.5s, the rocket moves up 270·k³ px and the flame grows to 22 + 34·k³; then it is gone.
- Smoke at 1.5s: 9 soft puffs (radial gradient from rgba(214,210,240, 0.38·(1 − a)^1.3) to clear). Each starts after a random delay of 0–0.12s and ends at 2.7s; a = its progress 0→1, e = ease-out(a). Puff: x = center + dir·(8 + 80·e) with a random dir in −1…1, y = pad − 4 − (6 + random·16)·e, radius 8 + 20·e. The pad follows the list (live d).
- Speed lines 1.8–3.2s (fade in 1.8–2.0s, out 3.0–3.2s): 10 vertical streaks, 3px round caps, rgba(214,210,255,0.55), each 12–34px long, line k (0…9) at x = 30 + (k + 0.5)/10·(stage width − 60) plus a random ±11px; its top is at y = −30 + ((t·speed + random·300) mod (d + 60)) from the stage top, speed a random 160–320px/s. They pass behind the list.
- 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) behind it (full width, 50px tall, from 4px above the new row's top) that fades out 3.45–3.95s.