Pull to Refresh Part 3

Basics: stage 470×222px, background #13131C, all coordinates in px from the stage's top-left, everything clipped to the stage (top corners rounded 40px). 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. A pull every second: the finger touches at u = 0, 1, 2, 3 (video T = 0.75, 1.75, 2.75 …). k = floor(u) (0–3), dt = u − k (seconds since the touch, 0–1); tap k brings in feed item k as the new top row, so 4 pulls return to the start. Timeline inside each second: pullP(dt) = easeIO(seg(dt, 0.02, 0.34)); list offset L = 90·pullP for dt < 0.36 (release at 0.36), else 58 + 32·(1 − spring(dt − 0.36)) with spring = springF(24, 0.55) (02 uses springF(18, 0.3)); then L is multiplied by 1 − easeIO(seg(dt, 0.68, 0.90)) (the gap closes). gap = 8 + L (the list's top edge; the space above it is where the indicator lives). Phases: pp = pullP(dt) (pull progress, stays 1 after 0.34); lp = seg(dt, 0.36, 0.56) (refreshing); dn = seg(dt, 0.56, 0.68) (done); cp = seg(dt, 0.68, 0.90) (closing); s = easeIO(cp) (new-row insertion). Indicator center y icy = max(gap/2, 33); fadeOut = 1 − seg(cp, 0, 0.5). Feed items (q = 0–3: name, message, initial, avatar gradient, thumbnail gradient, glyph): 0 "Mira Hale", "posted 3 new photos", M, #6E5BFF → #38C6FF, #7B6BFF → #38C6FF, photo; 1 "Theo Park", "shared a new playlist", T, #FF5CA8 → #6E5BFF, #FF5CA8 → #7B5BFF, note; 2 "Juno Vega", "started a live room", J, #3DDBB0 → #38C6FF, #2FD1A8 → #38A8FF, live; 3 "Kai Rowe", "liked your post", K, #FFD166 → #FF5CA8, #FFC85A → #FF6A9A, heart. Row at top y (row height 70): card rr(16, y+5, 438, 60, radius 18) fill #1C1B2B, stroke rgba(255,255,255,0.06) 1.5px; avatar(52, y+35, r 20, q) = circle filled with a diagonal gradient (x−r, y−r) → (x+r, y+r) of the avatar colors, initial in 800 {r}px "Segoe UI Variable Display","Segoe UI",sans-serif, white, centered, textBaseline middle at y + 0.06r; name 700 21px #F4F4F8 at (84, y+31) (alphabetic baseline); message 500 17px #8E8CAB at (84, y+54); thumbnail rr(392, y+12, 46, 46, 12) filled with a diagonal gradient (0,0) → (46,46) of the thumbnail colors, glyph in white 92% (thumbnail-local coords): photo = polygon (4,40) (18,22) (27,32) (33,26) (46,40) (46,46) (0,46) clipped to the thumbnail + sun circle (33,14) r 5; note = filled ellipse center (18,32) radii 6 × 4.6 rotated −0.4 rad, plus a 3px round polyline (23,31) → (23,12) → (32,16); live = dot (23,24) r 4.5 and 3px arcs of radius 9 and 15 around (23,24) from −0.7 to 0.7 rad and from π−0.7 to π+0.7; heart = heart(23, 24, 22) filled, where heart(x, y, s) = moveTo(x, y+0.35s), bezierCurveTo(x−0.55s, y−0.05s, x−0.4s, y−0.55s, x, y−0.22s), bezierCurveTo(x+0.4s, y−0.55s, x+0.55s, y−0.05s, x, y+0.35s). Render each row once into an offscreen 470×70 canvas and drawImage it at the (fractional) y so text glides smoothly. List: if s > 0, the new row (item k) at y = gap + 70(s − 1), opacity seg(s, 0, 0.6), drawn into an offscreen 470×222 canvas and then masked (destination-in) with a vertical alpha ramp: alpha 0 at y ≤ gap rising linearly to 1 at y = gap + 14 (so it fades in under the list's top edge instead of a hard cut); then rows j = 1, 2, 3 = item (k − j) mod 4 at y = gap + 70s + 70(j − 1) (the 4th row is pushed out at the bottom). New-row glow: since = (u − (q + 0.68)) mod 4, hl = 1 − seg(since, 0.3, 0.85); over the row: rr(16, y+5, 438, 60, 18) filled rgba(110,91,255,0.14·hl) and stroked rgba(150,135,255,0.75·hl) 2px. Draw order: indicator (clipped to y < gap + 3, so the list covers it), the list, the over-layer (05 only), the finger. At rest all six cells look identical (no indicator visible). Finger for each of the 4 touches (a = seconds since that touch, wrapped to −2…+2; visible for −0.3 ≤ a < 0.6), touch point (330, 100), radius R = 22.575: a < 0: opacity clamp((a+0.3)/0.14), scale lerp(1.25, 1, ease((a+0.3)/0.24)) until a = −0.06, then lerp(1, 0.86, ease((a+0.06)/0.06)); 0 ≤ a < 0.36: scale 0.86, y = 100 + 90·pullP(a); a ≥ 0.36: r = seg(a, 0.36, 0.58), opacity 1 − r, scale lerp(0.86, 1.12, ease(r)), y = 190. Drag trace: for a > 0, a 7px round white line from (330, 100) to the finger at opacity 0.22·(1 − seg(a, 0.36, 0.5)). Touch ring: for 0 ≤ a < 0.3, a 3px white circle at (330, 100) radius R(1 + 2.6a), opacity 0.6(1 − a/0.3). Finger body: circle radius R filled rgba(215,215,230,0.38) with shadow rgba(0,0,0,0.35) blur 10, border 3.5px rgba(255,255,255,0.92). Easing (k clamped 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)². seg(x, a, b) = clamp((x−a)/(b−a)); bump(x, a, b) = sin(π·seg). springF(ω₀, ζ)(t) = 0 for t ≤ 0, else 1 − e^(−ζω₀t)(cos ω_d t + (ζω₀/ω_d) sin ω_d t), ω_d = ω₀√(1−ζ²). mix = per-channel RGB blend. Check mark check(cx, cy, s, prog, lw, color): round-capped 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. Colors: violet #6E5BFF, cyan #38C6FF, mint #3DDBB0, gray #8E8CAB, dim #4A4766, card #1C1B2B. All text (names, messages, initials) uses "Segoe UI Variable Display","Segoe UI",sans-serif. Draw the drag trace only once the finger is more than 1px below the touch point. Finger draw order: drag trace, then touch ring, then body. The scale applies to the whole body (circle and border) around its centre. Every value depends only on u, so 4.0s equals 0s.

A line just above the list grows out from the middle as you pull, a white light runs across it while refreshing, it turns mint when done and shrinks back to the middle. 
- Opacity a = seg(pp, 0, 0.15)·(1 − seg(cp, 0.3, 0.75)); skip if a ≤ 0.01. y = max(gap − 16, 14), x from 40 to 430, middle 235, round caps.
- Track: line 40 → 430, 10px, rgba(255,255,255,0.08), opacity a.
- Half length hw = 195·pp·(1 − easeIO(seg(cp, 0, 0.75))); width lw = 10 + 4·bump(dt, 0.3, 0.46) (a short swell when the pull is full). If hw > 0.5: line (235 − hw) → (235 + hw), opacity a·(1 − 0.55·seg(lp, 0, 0.25)·(1 − seg(dn, 0, 0.5))), stroke = horizontal gradient x 40 → 430 from mix(violet, mint, seg(dn, 0, 0.5)) to mix(cyan, mint, seg(dn, 0, 0.5)).
- Running light: ra = seg(lp, 0, 0.12)·(1 − seg(dn, 0, 0.4)); if ra > 0.01, center hx = lerp(−40, 510, easeIO(lp)); the same line stroked again (width lw) with a horizontal gradient from hx − 80 to hx + 80: transparent white → white → transparent white, opacity a·ra.