Swipe Actions Part 2

Basics: stage 470×222px, background #13131C, all coordinates in px from the stage's top-left, everything clipped to the stage; the drawing center is (cx, cy) = (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; u = loop time 0–4 in seconds, and anything that "wraps" continues into the next loop). The video is 12s = three loops; T = seconds since the start (0–12). k12 = floor(T / 4) (0, 1 or 2) tells which 4s loop is playing; animations 01 and 02 use it to rotate their content (which card or which names are where) every loop, so their full cycle is 12s: the end state of loop k12 is exactly the start state of loop k12 + 1, and every use is mod 3, so 12s → 0s is seamless too. The finger presses at u = 0.5s, the action is done by about 1.0–1.2s, and everything goes back to the start state from 3.4s on. Colors: violet #6E5BFF, cyan #38C6FF, pink #FF5CA8, gold #FFD166, mint #3DDBB0. "A → B from x1 to x2" is a horizontal linear gradient (A at x1, B at x2, the end colors continue outside). Text: font Segoe UI (fallback sans-serif), weight and size as given; x is the left edge unless "centered" or "right-aligned"; y is the alphabetic baseline unless stated. mix(A, B, k) = per-channel linear RGB blend, rounded. "Glow" = a canvas shadow (that shadowColor and shadowBlur, no offset). rr(x, y, w, h, r) = rounded rect with top-left (x, y), corner radius r (at most half the smaller side). Rotations are canvas rotations (positive = clockwise on screen). 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)² (0→1, overshooting to about 1.12). seg(x, a, b) = clamp((x−a)/(b−a), 0, 1); seg(a, b) with two arguments applies it to u. bump(a, b) = sin(π·seg(a, b)) (0→1→0); bump(v, a, b) is the same on a value v. Spring springF(ω₀, ζ)(t) = 0 for t ≤ 0, else 1 − e^(−ζω₀t)·(cos ω_d t + (ζω₀/ω_d)·sin ω_d t), ω_d = ω₀√(1−ζ²) (rises 0 → 1 with an overshoot). For an event at time E: rel = u − E wrapped into −2…+2 (negative before it), since = u − E wrapped into 0…4. Press pressK(a, d): 1 for a < −0.1 or a > 0.6; for −0.1 ≤ a < 0, 1 − d·(a+0.1)/0.1; for 0 ≤ a ≤ 0.6, 1 − d·(1 − springF(22, 0.45)(a)). Tap indicator tapMark(x, y, a) (a = rel to the tap; drawn on top of everything): visible only for −0.42 ≤ a < 0.4. A circle of radius 22.575px, fill rgba(215,215,230,0.38) with a soft shadow (black 35%, shadowBlur 10, fill only), then a 3.5px border white 92% (no shadow); fill and border are drawn in the circle's scaled frame, so the border width scales with the circle. Scale: for a < −0.1, lerp(1.25, 1, ease((a+0.42)/0.32)); for −0.1 ≤ a < 0, lerp(1, 0.8, (a+0.1)/0.1); for a ≥ 0, lerp(0.8, 1, ease(a/0.2)). Opacity: clamp((a+0.42)/0.18) before the tap, clamp(1 − (a−0.12)/0.25) after. Ripple (drawn under the circle, not scaled, only for 0 ≤ a < 0.4): a 3px white ring of radius 22.575·(1 + 3.2a) (22.6 → 51.5px), opacity 0.7·(1 − a/0.4) (its own opacity, not multiplied by the circle's opacity). Hold indicator holdMark(x, y, T0, T1) (a finger that presses at T0, drags, and lifts at T1; drawn at the finger's current point; a = rel to T0, b = since T1): while T0 ≤ u < T1 it has opacity 1 and scale lerp(0.8, 0.86, ease(a/0.2)) (0.86 after 0.2s); else if b < 0.4 (after the lift): opacity clamp(1 − (b−0.12)/0.25), scale lerp(0.86, 1, ease(b/0.2)); else if −0.42 ≤ a < 0 it approaches exactly like the tap indicator before its tap; otherwise it is hidden. Its ripple is the same as the tap's and depends only on a: it is drawn (under the circle, at the finger's current point) whenever u ≥ T0 and 0 ≤ a < 0.4, so it keeps growing for its full 0.4s even if the finger lifts earlier. List layout listY(hk₀, hk₁, …): rows are 60.2px tall times their height factor hk (1 = full), with an 8.6px gap times hk after each; y starts at 9.1; for each row: center = y + 30.1·hk, then y += 68.8·hk. With all hk = 1 the centers are 39.2, 108, 176.8 (and 245.6 for a fourth row). Every row is 408.5px wide, centered at x = 235 (left x0 = 30.75, right 439.25). Message row msgRow (row center yc, full height 60.2): rr(30.75, yc − 30.1, 408.5, 60.2, 12.9) filled #1C1B2B; avatar = a circle of radius 18.275 at (63, yc) filled with a linear gradient from its top-left (x − r, y − r) to its bottom-right (x + r, y + r), person color → mix(person color, #1A1830, 0.45), with the first letter of the name (700, 17.36px, white, centered, textBaseline middle, at y + 1); name (600, 17.2px, #C4C2E0) at x = 95.25, baseline yc − 2.58; message (500, 14.19px, #77758F) at x = 95.25, baseline yc + 16.77; time (500, 12.47px, #6D6B88) right-aligned at x = 424.2, baseline yc − 2.58; a "badge" (if the animation gives one) is drawn last with its anchor at (417.75, yc + 12.9). PEOPLE (made-up): P0 "Mia Park", "See you at 7?", #8F7BFF, "9:41"; P1 "Leo Cruz", "Sent the files", #38C6FF, "9:12"; P2 "Ava Stone", "Lunch tomorrow?", #FF5CA8, "8:30"; P3 "Kai Ito", "Thanks a lot!", #3DDBB0, "Mon"; P4 "Zoe Lane", "Look at this 👀", #FFD166, "Sun" (avatar gradient ends: P0 #5A4EA2, P1 #2B78A2, P2 #983D72, P3 #2D8376, P4 #987E4E). Sliding row swipeRow(yc, dx, person, under, hk = 1, alpha = 1): hh = 60.2·hk; if hh < 1 draw nothing. Shape = rr(30.75, yc − hh/2, 408.5, hh, min(12.9, hh/2)). At opacity alpha, clip to the shape; only if |dx| > 0.5: first fill the rect (30.75, yc − hh/2, 408.5, hh) with #1C1B2B (so an overshoot past 0 never shows an empty gap), then, if an under layer is given, call under(x0 = 30.75, y0 = yc − hh/2, w = 408.5, h = hh) (the colored layer behind the row; for |dx| ≤ 0.5 neither the fill nor under() is drawn); then draw the msgRow (with its badge) at full height, centered at yc, shifted right by dx (a negative dx slides the row left and uncovers the right part of the under layer). Both are clipped to the shape, so a shrinking row keeps its content at full size and is cut. Icons (stroked, round caps and joins; coordinates in units of the icon size s from its center; line width max(2, 0.1s) 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); two lines (−0.08, −0.05) → (−0.06, 0.30) and (0.08, −0.05) → (0.06, 0.30). pin = the whole icon rotated 0.6 rad around its center: bar (−0.20, −0.45) → (0.20, −0.45); body (−0.13, −0.45) → (−0.15, −0.10) → (−0.32, 0.08) → (0.32, 0.08) → (0.15, −0.10) → (0.13, −0.45); needle (0, 0.08) → (0, 0.48). clock(angle A) = circle radius 0.42; minute hand (0, 0) → (0.28·sin A, −0.28·cos A); hour hand (0, 0) → (0.20·sin(A/12 + 2.1), −0.20·cos(A/12 + 2.1)). Pictures (stand-in photos, drawn in a w×h rect with local origin at its top-left, clipped to it; ph = π·T/2, so they loop every 4s): picture 0 = vertical gradient from y = 0 to h with stops #3B2E86 at 0, #7E5BD6 at 0.5, #F3A5C8 at 1; a sun circle #FFD8A8 at (0.7w, 0.42h) radius 0.13h; mountains #2A2266 = polygon (0, h), (0.32w, 0.48h), (0.55w, 0.78h), (0.75w, 0.58h), (w, 0.85h), (w, h). picture 1 = vertical gradient #1B3F7A → #38C6FF; a moon circle white 85% at (0.3w, 0.3h) radius 0.08h; three waves k = 0, 1, 2 in #2C6FC0, #1F55A0, #173F80 (drawn in that order), each a filled polygon (0, h), then for j = 0…20 the points (j/20·w, h·(0.62 + 0.12k) + 0.03h·sin(0.9j + ph + k)), then (w, h). picture 2 = diagonal gradient from (0, 0) to (w, h) #183A33 → #2E7A63; three flowers j = 0, 1, 2 with (a, b, rad, color) = (0.30, 0.55, 0.12, pink), (0.66, 0.40, 0.15, gold), (0.55, 0.75, 0.10, #FF9CCB), each drawn completely before the next: sw = 0.02h·sin(ph + j); stem = mint line of width max(2, 0.03h), butt caps, from (a·w, h) to (a·w + sw, b·h); five petals p = 0…4 = circles of radius 0.5·rad·h, centered 0.6·rad·h from the flower center (a·w + sw, b·h) at angle p·2π/5 + 0.2·ph (one petal step per 4s, so it loops), in the flower color; then a center circle #FFF3C4 of radius 0.4·rad·h.

A stack of picture cards: the finger drags the top card right, it tilts, a LIKE stamp fades in, the card flies off and the next card moves up. 
- Cards: w = 204.25, h = 172; a card at rest is centered at (235, 105.85) (top 19.85, bottom 191.85). k = k12. CARDS (made-up), card i uses picture i: 0 "Sunset Hike" / "5 km away", 1 "Lake Day" / "2 km away", 2 "Flower Shop" / "1 km away".
- Drag: dx = 0 before 0.5; 0.5–0.95: 96.75·easeIO(seg(0.52, 0.95)); 0.95–1.3: lerp(96.75, 365.5, easeIn(seg(0.95, 1.3))) (it flies off to the right); from 1.3: 0 (the top card is gone). adv = 0 before 0.95, then ease(seg(0.95, 1.3)) (the cards behind move forward). like = seg(dx, 25.8, 68.8).
- Buttons (drawn first, under the cards): "nope" = circle radius 25.8 at (67.3, 114.45), fill #1C1B2B, with an X of two 4.73px lines #FF8FA3, round caps: (58.7, 105.85) → (75.9, 123.05) and (75.9, 105.85) → (58.7, 123.05); it never changes. "like" = circle radius 25.8 at (402.7, 114.45), scaled around its center by hb = 1 + 0.25·bump(like, 0.6, 1) + 0.1·bump(0.95, 1.2); lm = seg(like, 0.4, 0.6) before 0.95, then 1 − seg(1.3, 1.45) (so the colors blend over a few frames both ways); circle fill mix(#1C1B2B, mint, lm); the heart filled mix(mint, #08302A, lm). Heart (relative to the button center): moveTo(0, 11.29); bezierCurveTo(−21.07, −3.01, −8.28, −17.31, 0, −6.77); bezierCurveTo(8.28, −17.31, 21.07, −3.01, 0, 11.29); fill.
- card(i, sc, yo, rot, ddx, alpha, lk, ta): everything at opacity alpha. Unscaled, the card is centered at (235 + ddx, 105.85 + yo); it is rotated by rot and scaled by sc around its bottom center (235 + ddx, 191.85 + yo). In the card's own frame (only step 2 is clipped to the card shape; steps 3–5 are not clipped, they simply lie inside the card):
  1. rr of the card (corner 17.2) filled #1C1B2B with shadow rgba(0,0,0,0.5) blur 18;
  2. clipped to the card: picture i in the top 72% of the card (full width 204.25, 123.84px tall, from the card's top edge);
  3. if ta > 0, at opacity ta: the name (700, 16.125px, #F4F4F8) at 15.05px right of the card's left edge, baseline 21.5px above its bottom edge; the distance (500, 11.825px, #9D9BBB) at the same x, baseline 7.525px above the bottom edge;
  4. if ta < 1: the card shape filled rgba(7,7,11, 0.4·(1 − ta)) (dims the cards behind);
  5. if lk > 0, at opacity lk: a LIKE stamp centered 51.6px right of the card's left edge and 30.1px below its top edge, rotated −0.3 rad: a 3.87px mint outline of rr 68.8×27.95 (corner 6.45) centered there, and "LIKE" (800, 17.2px, mint) centered, baseline 6.45px below the stamp center.
- Cards, back to front:
  - if u ≥ 1.3: card(k mod 3, sc 0.88, yo 25.8, rot 0, ddx 0, alpha seg(1.3, 1.7), lk 0, ta 0) (a new card fades in at the back);
  - card((k+2) mod 3, lerp(0.88, 0.94, adv), lerp(25.8, 12.9, adv), 0, 0, 1, 0, ta 0);
  - card((k+1) mod 3, lerp(0.94, 1, adv), lerp(12.9, 0, adv), 0, 0, 1, 0, ta = adv);
  - if u < 1.3: the top card card(k mod 3, 1, 0, rot = dx·0.28/215, ddx = dx, alpha = 1 before 0.95, then 1 − seg(1.1, 1.3), lk = like, ta = 1).
- Finger: holdMark from 0.5 to 0.95 at (256.5 + dx, 116.6 + 0.15·dx) while u < 0.95, then fixed at (353.25, 131.11) (= the drag's end point, no jump).
- Draw order: nope button, like button, cards (back to front), finger.