Text Field Part 2

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 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), and u = T mod 4. T is used only for the caret blink (period 1s); 1s divides 4, so you may also use u instead of T, and 12s → 0s is seamless too (the 12s cycle index k12 is not used). The finger taps once at u = 0.5s (this focuses the field; in 06 it also taps the Tab hint at 1.7s); typing starts at 0.7s, and everything goes back to the start state from 3.4s on (the focus fades 3.65–3.9s). Focus f = ease(seg(0.5, 0.7)) for u < 3.65, else 1 − ease(seg(3.65, 3.9)). Colors: violet #6E5BFF, cyan #38C6FF, pink #FF5CA8, gold #FFD166, mint #3DDBB0; text #F4F4F8, muted #9D9BBB, placeholder #6D6B88, field fill #1C1B2B. "violet→cyan" is a horizontal linear gradient from the shape's own left edge (violet) to its right edge (cyan), unless other x values are given. Text: font stack "Segoe UI Variable Display","Segoe UI",sans-serif, weight and size as given (weights used: 500, 600, 700); the input font is 500 18px; a "field label" is 600 15px in #9D9BBB. x is the left edge unless "centered" or "right-aligned"; y is the alphabetic baseline. Opacities multiply with the surrounding opacity. 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). Easing (k is clamped to 0–1 first): ease = 1−(1−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. clamp(x) = x clamped to 0–1. seg(x, a, b) = clamp((x−a)/(b−a)); seg(a, b) with two arguments applies it to u. 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). 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. Field box fieldBox(x, y, w, h, r, f): rr(x, y, w, h, r) filled #1C1B2B, stroked 2px rgba(255,255,255,0.14); then, if f > 0, at opacity f, the same rr stroked 2.5px with violet→cyan from x to x + w (or a solid color when one is given) and glow rgba(110,91,255,0.45) blur 12. Typing typed(text, n, x, y, font, color): 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) (widths measured with canvas measureText in that font). Unless stated, typed text uses the input font in #F4F4F8, and a placeholder uses the input font in #6D6B88. Caret caret(x, yc, h, a): 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 a·on (not drawn when a·on ≤ 0). 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. 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); × = (−0.3, −0.3) → (0.3, 0.3) and (0.3, −0.3) → (−0.3, 0.3).

A six-box one-time-code field: the digits pop in one by one while a glowing focus ring moves from box to box, then all boxes turn mint in a left-to-right wave and a "Verified" badge pops in below. 
- Label "Enter the code we sent" (field label) at x = 66, baseline 42.
- Boxes k = 0–5: rr(66 + 58k, 58, 48, 58, 12) (48×58, gap 10; box centers (90 + 58k, 87)). ok_k = ease(seg(1.7 + 0.05k, 1.9 + 0.05k)) before 3.4, then 1 − seg(3.4, 3.6). Fill #1C1B2B if ok_k = 0, else mix(#1C1B2B, #16352F, ok_k). Border 2px: rgba(255,255,255,0.14) if ok_k = 0, else mix(#3A3852, mint, ok_k).
- Digits "482913" (digit k in box k, 700 26px, centered): digit k arrives at t_k = 0.7 + 0.15k (0.7, 0.85, 1.0, 1.15, 1.3, 1.45). pin = 0 before t_k, easeBack(seg(t_k, t_k + 0.2)) from t_k until 3.4, 1 from 3.4. out_k = 0 before 3.4, then ease(seg(3.4 + 0.04k, 3.62 + 0.04k)). Drawn only if pin > 0 and out_k < 1: at opacity 1 − out_k, scaled by pin around (90 + 58k, 87 + 18·out_k), with its baseline 9px below that point (inside the scaled frame); color mint if ok_k > 0.5, else #F4F4F8. (At the reset the digits drop 18px and fade out one after another.)
- Each box is drawn completely (fill, border, digit) in order k = 0–5.
- Active box: act = −1 before 0.7, else (u − 0.7)/0.15; fl = floor(act); box = 0 if fl < 0, 5 if fl ≥ 5, else fl + ease(seg(act − fl, 0, 0.6)); ring x ax = 66 + 58·box (as soon as a digit lands in box k, the ring slides on to box k + 1 during the first 60% of that 0.15s slot, about 0.09s; from 1.45 it stays on box 5).
- Focus ring: fa = f·(1 − seg(1.6, 1.75)). If fa > 0: at opacity fa, rr(ax, 58, 48, 58, 12) stroked 2.5px violet→cyan from ax to ax + 48, glow rgba(110,91,255,0.5) blur 12. Then, only while u < 1.45 (fewer than 6 digits), caret(ax + 22, 87, 24, fa).
- Verified: v = easeBack(seg(1.95, 2.2)) before 3.4, 1 − seg(3.4, 3.55) from 3.4. If v > 0: at opacity clamp(v), scaled by v around (235, 154): a mint circle of radius 10 at (189, 149) with check(189, 149, 18, 1, 2.4, #13131C) on it, and "Verified" (700 17px, mint) at x = 205, baseline 155 (≈ 62px wide) (positions given unscaled).
- Tap at (90, 87) at 0.5s (on the first box).
- Draw order: label, boxes, focus ring, caret, Verified, tap indicator.