Send Part 2

Basics: stage 470×222px, background #13131C, all coordinates in px from the stage's top-left; everything is clipped to the stage, whose two top corners are rounded with radius 40 (the stage is the top 222px of a 470×370 card with corner radius 40); nothing else is clipped unless stated. 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). The video is 12s = three loops; T = seconds since the video start (0–12). T is used only for small idle motions, always periodic: the letter's bob sin(π·T) (2s), the pictures' ph = π·T/2 (4s), the text caret T mod 1 (1s) and the clock hands (angle 2π·T: the minute hand turns once per second, the hour hand once per 12s; the clock is only visible in the middle of a loop), so 12s → 0s is seamless too. The finger taps at u = 0.5s, the action lands at about 1.0s, and things go back to the start state from 3.4s on (some earlier, as written). 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); "violet→cyan" without x values spans the shape's own width. Text: font stack FEN = "Segoe UI Variable Display", "Segoe UI", sans-serif for all text, except the postcard handwriting in 02, which uses "Segoe Print", "Segoe UI", sans-serif; weight and size as given (e.g. "600, 15.48px"). x is the left edge unless "centered" or "right-aligned"; y is the alphabetic baseline unless stated; a text's opacity multiplies the opacity already in effect. rr(x, y, w, h, r) = rounded rect with top-left (x, y), corner radius r (clamped to at most half the smaller side). "Shadow C blur B" = a canvas shadow with that shadowColor and shadowBlur, no offset. Rotations are canvas rotations (positive = clockwise on screen). All angles use the canvas convention: a point at angle A from a center is (x + r·cos A, y + r·sin A) with y pointing down, so positive angles go clockwise on screen (−π/2 is straight up). Lines in icons have round caps and round joins. lerp(a, b, k) = a + (b − a)·k; clamp(x) = clamp to 0–1. 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(a, b) = clamp((u − a)/(b − a)); seg(x, a, b) is the same on a value x. bump(a, b) = sin(π·seg(a, b)) (0 → 1 → 0). 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 to E" = u − E wrapped into −2…+2 (negative before it); "since E" = u − E wrapped into 0…4. Press pressK(a, d) (a = rel to the tap): 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 centered at (x, y), fill rgba(215,215,230,0.38) with shadow rgba(0,0,0,0.35) blur 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 too. 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). 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, 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, exactly like the tap indicator before its tap; otherwise hidden. Its ripple is the tap's ripple with a = rel to T0, drawn whenever u ≥ T0 and 0 ≤ a < 0.4. Send button sendBtn(x, y, r, pk): a circle of radius r·pk centered at (x, y) filled violet → cyan from x − r·pk to x + r·pk; on top, a white send arrow at (x, y) of size s = 1.1·r·pk with line width 2.6 (not scaled): lines (0, 0.38s) → (0, −0.38s) and (−0.30s, −0.08s) → (0, −0.38s) → (0.30s, −0.08s), relative to (x, y). Composer (the message input; 03, 04 and 06 use the same one): rr(30.75, 168.2, 408.5, 43, 21.5) filled #1C1B2B, then the same shape stroked 2px rgba(255,255,255,0.08); its center y is 189.7; the send button is sendBtn(417.75, 189.7, 16.125, pressK(rel to 0.5, 0.12)) and the tap indicator taps it at 0.5. Its text starts at x 50.1, baseline 195.29. Caret caret(x, yc, h): ph = T mod 1; opacity seg(ph, 0, 0.08) for ph < 0.5, else 1 − seg(ph, 0.5, 0.58); a cyan rect (x + 1, yc − h/2, 2.5, h). Typing typed(s, n, x, y, font, color): n = how many characters are shown (may be fractional); k = floor(n); draw the first k characters at (x, y); if n > k and k < length, draw character k at opacity n − k at (x + width of the first k characters, y + 4·(1 − (n − k))); its width w = width of the first k characters + (n − k)·width of character k. Clock icon icoClock(x, y, s, color, lw, A): stroked, one path: a circle of radius 0.42s; minute hand from (x, y) to (x + 0.28s·sin A, y − 0.28s·cos A); hour hand to (x + 0.20s·sin(A/12 + 2.1), y − 0.20s·cos(A/12 + 2.1)). Check check(x, y, s, p, lw, color): a stroked polyline through (x − 0.30s, y + 0.02s) → (x − 0.09s, y + 0.23s) → (x + 0.32s, y − 0.20s); only the first p (0–1) of its total length is drawn. Sparkle sparkle4(x, y, r, a, color): at opacity a (multiplied), a filled 8-point star: points k = 0…7 at angle k·2π/8 − π/2 from (x, y), distance r for even k and 0.28r for odd k. Rolling text rollDigits(x, y, from, to, k, font, color, h): text centered, textBaseline middle; clipped to the rect (x − 2h, y − 0.62h, 4h, 1.24h); e = ease(k), d = −1.05h; if k < 1, "from" at (x, y + d·e) with opacity a0·(1 − e); if k > 0, "to" at (x, y + d·(e − 1)) with opacity a0·e, where a0 is the opacity already in effect (so it multiplies). Envelope front (centered at the local origin, width w, height h, colors c1 → c2): polygon (−w/2, −h/2) → (0, 0.08h) → (w/2, −h/2) → (w/2, h/2) → (−w/2, h/2), filled c1 → c2 from x −w/2 to w/2; two 2px lines white 18% (butt caps): (−w/2, h/2) → (−0.08w, 0.02h) and (w/2, h/2) → (0.08w, 0.02h); then the closed flap = triangle (−w/2, −h/2), (0, 0.10h), (w/2, −h/2) (its tip lies just below the V of the front, so no gap shows) filled in c1 mixed 15% toward white. Pictures (stand-in photos) scenery(x, y, w, h, r, kind): clipped to rr(x − w/2, y − h/2, w, h, r), drawn with local origin at that rect's top-left; ph = π·T/2 (loops every 4s). Picture 1 (sea) = vertical gradient from y = 0 to h, #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 (flowers) = 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, in the flower color; then a center circle #FFF3C4 of radius 0.4·rad·h.

A floating letter is tapped, flies in an arc into the slot of a mailbox, the mailbox squashes and its flag springs up. 
- Post: rr(309.175, 146.7, 15.05, 107.5, 4.3) filled #3A3360 (it runs off the bottom of the stage).
- Flag: pivot at (387.65, 120.9) (4.3px right of the body), rotated by (π/2)·(1 − fA) (fA = 0: the pole points right, lowered; fA = 1: straight up). In that rotated frame: pole rr(−2.58, −55.9, 5.16, 55.9, 2.15) #8F87C0, then the flag plate rr(2.58, −55.9, 25.8, 17.2, 3.225) pink. fA = 0 before 1.0; 1.0–3.4: springF(14, 0.45)(u − 1.0) (it overshoots about 20%, i.e. tips about 18° past upright, then settles); from 3.4: 1 − easeIO(seg(3.4, 3.75)).
- Body, squashed by jolt = bump(0.95, 1.2): scale x by 1 + 0.06·jolt and y by 1 − 0.08·jolt around its bottom center (316.7, 151) (body, slot and highlight only). Path: moveTo(250.05, 151); lineTo(250.05, 105.85); arc centered (316.7, 105.85), radius 66.65, from angle π to 0 clockwise (a dome; its top is at y 39.2); lineTo(383.35, 151); close; fill #8F7BFF → #5B48E8 from x 250.05 to 383.35. Slot rr(278, 95.1, 77.4, 9.675, 4.3) #1A1428. Highlight rr(260.8, 101.55, 10.75, 43, 5.375) white 14%.
- Sparkles, only for 1.05 ≤ u < 1.6, k = seg(1.05, 1.6), ka = (1 − k)·seg(k, 0, 0.1) (a quick fade-in, then out): sparkle4 at (419.9, 52.1), r 8.6·(1 − 0.5k), opacity ka, gold; sparkle4 at (437.1, 80.05), r 6.45, opacity 0.8·ka, white.
- Letter path: start P0 = (101.7, 97.25 + 3.225·sin(π·T)) (it bobs), control point (213.5, −10.25), end (316.7, 99.4) (the slot). fly = 0 before 0.55, else seg(0.55, 0.95); e = easeIO(fly); position = (1−e)²·P0 + 2e(1−e)·control + e²·end (a quadratic Bézier; its highest point is about y 44). back = 0 before 3.4, else seg(3.5, 3.9).
  - Before 3.4 (drawn only while u < 0.95): translate to the position, rotate −0.3·sin(π·e), scale (1 − 0.6e)·pressK(rel to 0.5, 0.1), opacity 1 − seg(fly, 0.85, 1).
  - From 3.4 (drawn when back > 0): at P0, no rotation, scale 1, opacity back (it fades back in at its start).
  - Letter shape: envelope front with w 90.3, h 58.05, colors #F4F2FF → #C9C3F0 (front polygon (−45.15, −29.025) → (0, 4.644) → (45.15, −29.025) → (45.15, 29.025) → (−45.15, 29.025); fold lines (−45.15, 29.025) → (−7.224, 1.161) and (45.15, 29.025) → (7.224, 1.161); flap triangle (−45.15, −29.025), (0, 5.805), (45.15, −29.025), filled rgb(246,244,255)); then a pink seal, a circle of radius 5.375 at (0, 2.9025).
- Tap at 0.5 on P0 (the letter's start point, bobbing with it).
- Draw order: post, flag, body (fill, slot, highlight), sparkles, letter, tap indicator.