Swipe Actions 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 6s loop that plays by itself and is seamless; the video is 12s = two loops. T = seconds since the video start; u = (T + 0.25) mod 6 (the first frame is already 0.25s after a swipe started). A swipe every second: at u = 0, 1, 2, 3, 4, 5 (video T = 0.75, 1.75, 2.75 …). swipeInfo(u): k = floor(u) (0–5), dt = u − k (seconds since this swipe started, 0–1), row(j) = MAIL[(k + j) mod 6]: j = 0 is the top row that gets deleted, j = 1 and 2 are the rows below it, j = 3 is the row that comes in from the bottom. Data MAIL (name, preview, time, avatar color): ("Nora Vale", "Trip photos are up!", "9:41", #8F7BFF), ("Theo Banks", "Meeting moved to 3 PM", "9:20", #38C6FF), ("Ivy Moss", "Dinner on Friday?", "8:55", #FF5CA8), ("Owen Hale", "Draft v2 attached", "8:02", #3DDBB0), ("Luna Reyes", "Call me when you can", "Tue", #F5B83D), ("Sam Ortiz", "Thanks for the help", "Mon", #FF8A5C). Row image (identical style in all six; pre-render each row once into an offscreen 430×62 canvas and drawImage it, so moving rows slide smoothly at fractional positions): rounded rect (0, 0, 430, 62, radius 16) filled #1C1B2B with a 1px stroke rgba(255,255,255,0.05) inset 0.5px; avatar circle center (38, 31) radius 21 filled with a diagonal gradient from the avatar color (top-left) to mix(color, #1A1830, 0.45) (bottom-right), with the name's first letter in white, 700 20px "Segoe UI Variable Display","Segoe UI",sans-serif, centered at (38, 32) with textBaseline middle; name at (72, 27) 700 22px #F4F4F8; preview at (72, 51) 500 18px #A9A7C4; time right-aligned at (412, 27) 500 16px #6D6B88. List layout: rows at x = 20, top y = 12 + 70j (j = 0, 1, 2 → 12, 82, 152), so the top row's center line is y = 43. listBelow(p) (p = how far the list has closed up, 0 → 1): for j = 1, 2, 3 draw row(j) at (20, 12 + 70j − 70p), skipped when that y ≥ 222; the incoming j = 3 row also has opacity clamp(p/0.5). At p = 1 the list looks exactly like the next second at p = 0, so the loop never jumps. springP(dt, t0, ω₀ = 15, ζ = 0.62) = lerp(springF(ω₀, ζ)(dt − t0), 1, seg(dt, 0.86, 1)) (a spring that overshoots a little, forced to exactly 1 by dt = 1). Finger (the same in all six, drawn last; it touches left of the time label so the label stays readable): fingerX(a) = 340 for a ≤ 0, else lerp(340, 100, easeIO(seg(a, 0, 0.30))) (a = seconds since the swipe started, wrapped to −3…+3); dragDX(dt) = fingerX(dt) − 340 (0 → −240). For each of the 6 swipes, visible for −0.28 ≤ a < 0.42 at (fingerX(a), 43): circle radius 22.575, fill rgba(215,215,230,0.38), shadow black 35% blur 10, border 3.5px white 92%; opacity clamp((a+0.28)/0.14) before the touch, clamp(1 − (a−0.26)/0.16) after; scale lerp(1.25, 1, ease((a+0.28)/0.22)) for a < −0.06, lerp(1, 0.82, (a+0.06)/0.06) for −0.06 ≤ a < 0, 0.82 while dragging (a < 0.26), then lerp(0.82, 1, ease((a−0.26)/0.16)). Trail (a > 0, drawn only when tail − x > 2): tail = lerp(340, fingerX(a), ease(seg(a, 0.06, 0.36))); a 12px round-capped line from the finger to the tail at y 43, horizontal gradient rgba(255,255,255,0.55·opacity) at the finger → transparent at the tail. Touch ring (0 ≤ a < 0.3): 3px white circle at (340, 43), radius 22.575·(1 + 2.4a), opacity 0.6(1 − a/0.3), drawn under the circle. Delete red: gradient #FF6A78 (left) → #D93160 (right); solid red #F2475E. Bin icon icoBin(x, y, s, lw, lid) (white, round caps and joins): body polyline (−0.32s, −0.16s) → (−0.25s, 0.44s) → (0.25s, 0.44s) → (0.32s, −0.16s) plus two inner lines (−0.08s, −0.02s)–(−0.06s, 0.3s) and (0.08s, −0.02s)–(0.06s, 0.3s); the lid is drawn after translate(−0.42s, −0.28s) and rotate(lid): line (0, 0)–(0.84s, 0) and handle (0.28s, 0) → (0.30s, −0.16s) → (0.54s, −0.16s) → (0.56s, 0) (negative lid = the right side lifts). 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. hash(n) = fract(sin(127.1n + 311.7)·43758.5453). Draw order: listBelow first, then the deleted row's effect, then the finger (except 02 and 03, see there). Every value depends only on u, so 6.0s equals 0s.

The row slides left with the finger over a red bar; a bin icon rides in the middle of the red area, its lid flips open, and when the row is gone the red bar closes up while the list moves up. 
- Row offset dx = dragDX(dt) for dt < 0.28, then lerp(dragDX(0.28), −438, ease(seg(dt, 0.28, 0.44))) (the row flies off to the left).
- Close-up p = easeIO(seg(dt, 0.46, 0.80)); listBelow(p). Red bar height h = 62(1 − p) (top stays at y 12; skip if h ≤ 0.5).
- Everything below is drawn at opacity (clamp(h/12))² (so the thin end of the closing bar fades out instead of leaving a red hairline), clipped to rr(20, 12, 430, h, min(16, h/2)). If dx < −0.5: fill the red gradient (from x 20 to 450) over x from max(20, 450 + dx − 16) to 450 (16px extra so the red shows behind the row's rounded corners).
- Bin: rw = min(−dx, 430); center (450 − rw/2, 12 + h/2); scale (1 − p)·(1 + 0.15·bump(dt, 0.44, 0.58))·(0.75 + 0.25·ease(seg(rw, 40, 160))); opacity clamp((rw − 24)/50) × the bar opacity; icoBin(0, 2, s = 32, lw 3.2) in that frame; lid = −0.6·(springF(20, 0.4)(dt − 0.12) − springF(26, 0.6)(dt − 0.46)) (opens with a wobble, snaps shut as the bar closes).
- Then the row image at (20 + dx, 12) inside the same clip (skip when dx ≤ −434).