Send Part 1

Basics: stage 470×222px, background #13131C, all coordinates in px from the stage's top-left, everything clipped to the stage (its two top corners are rounded with radius 40px); 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 video start (0–12), and u = T mod 4. T is used only for idle motion: the caret blink (period 1s), the clock hands in 02, the letter's bob in 04 (period 2s), the red dot blink and the pink rings in 06 (period 1s); all of these periods divide 4 (the clock in 02 is only visible between 0.6s and 0.95s), so you may also use u instead of T, and 12s → 0s is seamless too. The finger taps at u = 0.5s (in 05 at 1.6s), and everything goes back to the start state from 3.4s on. Colors: violet #6E5BFF, cyan #38C6FF, pink #FF5CA8. "violet→cyan" is a horizontal linear gradient from the shape's own left edge (violet) to its right edge (cyan). Text: font stack "Segoe UI Variable Display","Segoe UI",sans-serif, weight and size as given (weights used: 500, 600, 700, 800); x is the left edge unless "centered" or "right-aligned"; y is the alphabetic baseline unless "baseline middle" is 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). lerp(a, b, k) = a + (b−a)·k. 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). 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) (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)); the pressed element scales by it around its own center. 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); it keeps growing for its full 0.4s. Hold indicator holdMark(x, y, T0, T1) (a finger that presses at T0 and lifts at T1; 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. Same circle as the tap indicator. Its ripple is the same as the tap's and depends only on a: it is drawn whenever u ≥ T0 and 0 ≤ a < 0.4, so it keeps growing for its full 0.4s even if the finger lifts earlier. Composer (the input field) composer(x0, yc, w, h): rr(x0, yc − h/2, w, h, h/2) filled #1C1B2B with a 2px border rgba(255,255,255,0.08). Bubble bubble(x, y, w, h, mine, label): rr(x, y, w, h, min(h/2, 17.2)); mine = violet→cyan from x to x + w, theirs = #2A2840; the label at x + 15.05, baseline y + h/2 + 5.59, size 15.48px, mine 600 #FFFFFF, theirs 500 #E9E8F5. Input font = 500 15.48px; the input text starts at x0 + 19.35 (x0 = the composer's left edge), baseline yc + 5.59; placeholder "Message" in #6D6B88. Send button sendBtn(x, y, r, pk): scaled by pk around (x, y), a circle of radius r filled violet→cyan across the circle with glow rgba(110,91,255,0.5) blur 10; then a white send arrow of size 1.1·r·pk, line width 2.6 (not scaled). Icons (stroked, round caps and joins; coordinates in units of the icon size s from its center; line width as given): send arrow = shaft (0, 0.38) → (0, −0.38), head (−0.30, −0.08) → (0, −0.38) → (0.30, −0.08). mic = capsule rr(−0.15, −0.45, 0.30, 0.55, 0.15) (stroked); cradle = the lower arc of a circle centered (0, −0.05) with radius 0.30, from angle 0.15 to π − 0.15 rad (canvas angles, through the bottom); stem (0, 0.25) → (0, 0.45). 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)). Check mark check(x, y, s, p, lw, color): a round-capped, round-joined polyline through (−0.30, 0.02) → (−0.09, 0.23) → (0.32, −0.20) × s from (x, y); "drawn by p" means only the first p (0–1) of its total length is drawn. Typing typed(text, n, x, y): n may be fractional; draw the first floor(n) characters at (x, y), then the next character at opacity frac(n), right after them and 4·(1 − frac(n))px lower (it rises into place); its width w = width(first floor(n) characters) + frac(n)·width(next character). Caret caret(x, yc, h): ph = T mod 1; on = 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) at opacity on. Rolling word rollDigits(x, y, from, to, k, font, color, h): text centered with baseline middle, clipped to the rect (x − 2h, y − 0.62h, 4h, 1.24h); e = ease(k); the old word at opacity (1 − e) at y − 1.05h·e (moves up and out), the new word at opacity e at y + 1.05h·(1 − e) (comes up from below); both opacities multiply with the surrounding opacity. Avatar of the person P0 (made-up) "Mia Park", color #8F7BFF: a circle of radius r filled with a linear gradient from its top-left (x − r, y − r) #8F7BFF to its bottom-right (x + r, y + r) #5A4EA2 (= mix(#8F7BFF, #1A1830, 0.45)), with "M" (700, 0.95·r px, white, centered, baseline middle) at y + 1. Envelope (04 only; local coordinates from its center, width w, height h, flap value fl from 1 = open upward to −1 = closed): back flap (only if fl > 0) = triangle (−w/2, −h/2), (0, −h/2 − 0.55h·fl), (w/2, −h/2) filled #5B48E8; front = polygon (−w/2, −h/2), (0, 0.08h), (w/2, −h/2), (w/2, h/2), (−w/2, h/2) filled with a horizontal gradient #8F7BFF (x = −w/2) → #5B48E8 (x = w/2); two fold lines, 2px white 18% with butt (flat) caps, (−w/2, h/2) → (−0.08w, 0.02h) and (w/2, h/2) → (0.08w, 0.02h); closed flap (only if fl ≤ 0) = triangle (−w/2, −h/2), (0, −h/2 + 0.6h·(−fl)), (w/2, −h/2) filled #A08FFF (= mix(#8F7BFF, white, 0.15)). Anything drawn between the back flap and the front is "inside" the envelope. The envelope has no back panel.

Tapping send lifts the typed text out of the input into a new chat bubble, the old bubble moves up, then the input is typed again. 
- Composer: composer(30.75, 189.7, 408.5, 43) (rr(30.75, 168.2, 408.5, 43, 21.5)). Text in it at x = 50.1, baseline 195.29. In this animation the typed text uses 600 15.48px (the same as the bubble text, so nothing changes when it lifts out); the placeholder "Message" uses the input font (500 15.48px).
- Timing values: e = 0 before 0.5; springF(14, 0.62)(u − 0.52) from 0.5 to 3.4 (0 until 0.52; it overshoots about 8%); 1 from 3.4. fade = 1 before 3.4, then 1 − seg(3.4, 3.6). down = 0 before 3.4, then easeIO(seg(3.45, 3.85)). up = clamp(1.15·e)·(1 − down).
- Old bubble (theirs): bubble(30.75, 65 − 47.3·up, 176.3, 36.55, theirs, "Where are you?") (it moves up 47.3px after the send and comes back down from 3.45s).
- Input text "On my way!" (600 15.48px, #F4F4F8, typed): n = 10 (all) before 0.52; 0 from 0.52 to 3.5; 10·seg(3.5, 3.9) from 3.5 (typed again, 25 characters per second). If n < 0.01, show the placeholder "Message" at the same place at opacity seg(0.6, 0.75) before 3.5, 1 from 3.5.
- Caret: caret(50.1 + w, 189.7, 19.35) where w = the typed width when n > 0.01, else 0.
- New bubble (only if u ≥ 0.52 and fade > 0): tw = the width of "On my way!" at 600 15.48px (≈ 82px); fw = tw + 30.1; X = lerp(35.05, 439.25 − fw, e), Y = lerp(171.425, 103.7, e); sa = seg(0.52, 0.66). At opacity fade·sa: rr(X, Y, fw, 36.55, 17.2) filled violet→cyan from X to X + fw. Then at opacity fade (not sa): "On my way!" (600, 15.48px) at x = X + 15.05, baseline Y + 23.865, color mix(#F4F4F8, #FFFFFF, sa). At e = 0 this text sits exactly where the input text was, in the same font, so the words seem to lift out of the input and the bubble color fades in under them; it flies with the spring to the right end (its right edge at 439.25).
- "Delivered" (500, 11.825px, #77758F) right-aligned at x = 439.25, baseline 157.45, opacity seg(1.05, 1.25)·fade (drawn only together with the new bubble).
- Send button: sendBtn(417.75, 189.7, 16.125, pressK(rel to 0.5, 0.12)). Tap at (417.75, 189.7) at 0.5s.
- From 3.4s the new bubble and "Delivered" fade out in place (0.2s), the old bubble comes back down, and "On my way!" is typed again, so 4.0s equals 0s.
- Draw order: old bubble, composer, new bubble (fill, then its text), "Delivered", input text or placeholder, caret, send button, tap indicator.