Swipe Actions Part 1

Basics: stage 470×222px, background #13131C, all coordinates in px from the stage's top-left; everything is clipped to the stage (a list row partly cut by the bottom edge is intended). The drawing center is (235, 108). The animation is a 4s loop that plays by itself and is seamless (the state at 4.0s equals the state at 0s; times are seconds from the loop start). The finger touches down at 0.5s, and everything goes back to the start state from 3.4s on. Colors: violet #6E5BFF, cyan #38C6FF, pink #FF5CA8, gold #FFD166, mint #3DDBB0. "violet→cyan" is a horizontal linear gradient across the shape's own width. Font for all text: "Segoe UI Variable Display", "Segoe UI", sans-serif (weights 500, 600, 700 and 800 are used; 800 is the extra-bold weight of that font); text is left-aligned on the given baseline unless said otherwise. Easing (k is clamped to 0–1 first): 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)²; lerp(a,b,k) = a + (b−a)·k; clamp(x) = x limited to 0–1; seg(a,b) = clamp((time−a)/(b−a)); seg(x,a,b) with three arguments is the same applied to the value x instead of time; bump(a,b) = sin(π·seg(a,b)) (and bump(x,a,b) likewise). springF(ω₀, ζ)(t) = 0 for t ≤ 0, else 1 − e^(−ζω₀t)·(cos ω_d t + (ζω₀/ω_d)·sin ω_d t), ω_d = ω₀√(1−ζ²) (with ζ < 1 it overshoots a little). pressK(a, d), a = seconds relative to a tap: 1 when a < −0.1 or a > 0.6; 1 − d·(a+0.1)/0.1 for −0.1 ≤ a < 0; 1 − d·(1 − springF(22, 0.45)(a)) for 0 ≤ a ≤ 0.6. mix(c1, c2, k) = per-channel RGB interpolation, rounded. Finger mark (the same disc for taps and drags): a circle of radius 22.6px, fill rgba(215,215,230,0.38) with a soft shadow (black 35%, canvas shadowBlur 10), then a 3.5px border white 92% (no shadow), stroked centered on the circle's radius (half inside, half outside); it is scaled by sc around its center (border included) and drawn at opacity op; drawn on top of everything. Ripple (drawn under the disc, not scaled): with r = seconds since touch-down, from r = 0 to 0.4 a 3px white ring of radius 22.6·(1 + 3.2r) (to 51.5px) at opacity 0.7·(1 − r/0.4). Tap mark (tapMark), a = seconds relative to the tap, shown only for −0.42 ≤ a < 0.4: opacity rises linearly 0 → 1 from a = −0.42 to −0.24, stays 1 until a = 0.12, then falls linearly to 0 at a = 0.37; scale 1.25 → 1 from −0.42 to −0.1 with ease((a+0.42)/0.32), 1 → 0.8 linearly from −0.1 to 0, 0.8 → 1 from 0 to 0.2 with ease(a/0.2); ripple from a = 0. Hold mark (holdMark, a press-and-drag finger) with touch-down T0 and release T1, drawn at the position each animation gives (it follows the drag): before T0 it comes in exactly like the tap mark (from T0 − 0.42); while held (T0 ≤ time < T1) opacity 1 and scale lerp(0.8, 0.86, ease((time−T0)/0.2)), then 0.86; after release, with b = time − T1 < 0.4: opacity 1 until b = 0.12 then linearly to 0 at b = 0.37, scale lerp(0.86, 1, ease(b/0.2)). The ripple runs for its full 0.4s from T0 (r = time − T0, 0 ≤ r < 0.4), even if the finger is released earlier; it is drawn at the finger's current position. List rows: each row is 408.5px wide (left x0 = 30.75, right 439.25) and 60.2px tall. Row layout (listY): rows are stacked from y = 9.1 with an 8.6px gap; each row i has a height factor hk_i (1 = full, 0 = collapsed); it takes (60.2 + 8.6)·hk_i of vertical space and its center is its top + 30.1·hk_i. With all factors 1 the centers are 39.2, 108, 176.8 and 245.6 (the 4th row shows only its top 6.5px). When a row collapses, the rows below move up. Row content (msgRow) for a row centered at yc (u = the row's unread amount 0–1, 0 unless given): rounded rect (x0, yc − 30.1, 408.5×60.2, corner 12.9) #1C1B2B; avatar = circle center (63, yc), radius 18.3, diagonal gradient from its bounding box's top-left (person color) to bottom-right (darker color), with the person's initial (bold 700, 17.4px, white, centered, text baseline "middle", 1px below the center); name at x 95.25, baseline yc − 2.6, 17.2px, weight 800 if u > 0.5 else 600, color mix(#C4C2E0, #F4F4F8, u); message at x 95.25, baseline yc + 16.8, 500 14.2px, color mix(#77758F, #A9A7C4, u); time right-aligned at x 424.2, baseline yc − 2.6, 500 12.5px, #9FE3FF if u > 0.5 else #6D6B88; if u > 0, an unread dot: cyan circle radius 5.6·u at (417.75, yc + 12.9) with a cyan glow (rgba(56,198,255,0.7), blur 8). People (name, message, color, darker color, time): Mia Park "See you at 7?" #8F7BFF → #5A4EA2 9:41; Leo Cruz "Sent the files" #38C6FF → #2B78A2 9:12; Ava Stone "Lunch tomorrow?" #FF5CA8 → #983D72 8:30; Kai Ito "Thanks a lot!" #3DDBB0 → #2D8376 Mon; Zoe Lane "Look at this 👀" #FFD166 → #987E4E Sun. Sliding row (swipeRow) with offset dx, height factor hk and opacity al (1 unless given): visible height hh = 60.2·hk (skip the row if hh < 1); clip to the rounded rect (30.75, yc − hh/2, 408.5×hh, corner min(12.9, hh/2)); inside the clip, at opacity al: if |dx| > 0.5, first fill that rect with the row color #1C1B2B, then draw the action layer on top (so an overshoot to the other side never shows a dark gap), then draw the row content full height (not squashed) centered at yc and shifted right by dx. Icons (round caps and joins; points in units of the icon size s from its center; line width max(2, 0.1·s) px unless given): trash = lid (−0.42, −0.28) → (0.42, −0.28); handle (−0.14, −0.28) → (−0.12, −0.44) → (0.12, −0.44) → (0.14, −0.28); body (−0.32, −0.18) → (−0.25, 0.44) → (0.25, 0.44) → (0.32, −0.18) (open at the top); two lines (−0.08, −0.05) → (−0.06, 0.30) and (0.08, −0.05) → (0.06, 0.30). Archive = a stroked rounded rect from (−0.44, −0.38), 0.88 wide, 0.24 tall, corner 0.05; box (−0.36, −0.14) → (−0.36, 0.40) → (0.36, 0.40) → (0.36, −0.14) (open); slot (−0.12, 0.05) → (0.12, 0.05). Flag = pole (−0.3, 0.45) → (−0.3, −0.42) (stroked); cloth: from (−0.3, −0.4) quadratic curve (control (0, −0.52)) to (0.1, −0.38), quadratic (control (0.22, −0.26)) to (0.4, −0.36), line to (0.4, 0.06), quadratic (control (0.22, 0.16)) to (0.1, 0.04), quadratic (control (0, −0.08)) to (−0.3, 0.02), stroked (open) or, for the filled flag, filled. More = three filled dots of radius 0.09 at x = −0.32, 0, 0.32. Open envelope = closed path (−0.45, −0.05) → (0, −0.42) → (0.45, −0.05) → (0.45, 0.40) → (−0.45, 0.40), plus the flap (−0.45, −0.05) → (0, 0.20) → (0.45, −0.05). Clock = circle radius 0.42; a minute hand from the center to (sin A·0.28, −cos A·0.28) and an hour hand to (sin(A/12 + 2.1)·0.2, −cos(A/12 + 2.1)·0.2), A = hand angle. Reply = arrow head (−0.05, −0.38) → (−0.42, −0.05) → (−0.05, 0.28); shaft (−0.4, −0.05) → (0.12, −0.05), then a quadratic curve (control (0.42, −0.05)) to (0.42, 0.38).

A message list whose second row is dragged left, shows a red delete layer and flies off. 
- List: four rows with height factors [1, hk, 1, 1]: row 0 Mia, row 1 Leo (the swiped row), row 2 Ava, row 3 Kai (only its top shows at the bottom edge; it slides up into view when row 1 collapses). Rows 0, 2 and 3 never slide sideways.
- Drag dx of row 1 (negative = left): 0 until 0.5s; −245.1·easeIO(seg(0.52, 0.95)) until 0.95s (60% of the row width); then it flies off, lerp(−245.1, −428.9, easeIn(seg(0.95, 1.15))) until 1.15s; −428.9 until 3.4s; 0 from 3.4s.
- Collapse hk: 1 until 1.15s; 1 − easeIO(seg(1.15, 1.45)) until 3.4s; from 3.4s easeIO(seg(3.4, 3.75)) (the gap reopens while the row is still invisible). Row 1 opacity: 1 until 3.4s, then seg(3.5, 3.85) (it fades back in at its place).
- Action layer: a horizontal gradient #C2366F (x 30.75) → #FF5C7A (x 439.25) filling the row. A white trash icon at x = min(404.85, 439.25 + dx/2), y = the row center, size 23.65·sc (line width 2.37·sc), sc = 1 + 0.3·bump(−dx/408.5, 0.36, 0.5). So the trash waits 34.4px from the right end until the red opening is wider than 68.8px, then stays centered in the opening; it pops while −dx goes from 147 to 204px.
- Finger: hold mark, touch-down 0.5s, release 0.95s, at x = 353.25 + dx until 0.95s and 108.15 after, y = row 1's current center (77.9 + 30.1·hk).
- Draw order: rows 0, 2, 3, then row 1 (red layer, trash, row content), finger.