Text Field 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 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 idle motion: the caret blink (period 1s) and the rotating light in 03 (half a turn per second, period 2s); both periods divide 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 05 it taps the eye button at 0.5s and again at 2.4s); typing starts right after, and everything goes back to the start state from 3.4s on (the typed text is deleted 3.4–3.62s, 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)). Typed count typeN(len, a, b) = len·seg(a, b) for u < 3.4, else len·(1 − seg(3.4, 3.62)) (typed in from a to b, deleted from the end at 3.4–3.62). 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 unless another color is given. x is the left edge unless "centered" or "right-aligned"; y is the alphabetic baseline. 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. 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). 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. Field box fieldBox(x, y, w, h, r, f): rr(x, y, w, h, r) filled #1C1B2B (skipped when "no fill" is stated), 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 (or the glow color given). 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). 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). "The caret at x + w" means x + w when n > 0.01, else x. 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.

Tapping an outlined email field makes the "Email" label shrink and float up into a gap cut in the outline, the border glows violet→cyan and the address is typed. 
- Field: fieldBox(60, 72, 350, 58, 12, f) with no fill (outline only; the stage background shows inside).
- up = ease(seg(0.5, 0.75)) for u < 3.65, else 1 − ease(seg(3.65, 3.9)).
- Label "Email": weight 600, size ls = lerp(17, 13, up) px, x lx = lerp(80, 76, up), baseline ly = lerp(107, 77, up), color mix(#9D9BBB, cyan, f). lw = width of "Email" at the current size (≈ 40.8px at 17px, ≈ 31.2px at 13px).
- Gap: if up > 0, before the label, fill the rect (lx − 5, 69, (lw + 10)·up, 6) with #13131C (the stage background), which erases the outline under the label (it opens from the left as up grows).
- Text "mia@mail.com" typed (input font, #F4F4F8) at (80, 108); n = typeN(12, 0.8, 1.6) (15 characters per second; full width ≈ 120.8px).
- Caret: caret(80 + w, 101, 22, a = f).
- Helper "We'll never share it." (500, 14px, #77758F) at x = 76, baseline 160, opacity f.
- Tap at (320, 101) at 0.5s.
- Draw order: outline, gap, label, typed text, caret, helper, tap indicator.