Search Part 1

Basics: stage 470×222px, background #13131C, all coordinates in px from the stage's top-left; the drawing center is (cx, cy) = (235, 108). Everything is clipped to the stage. The animation is a 4s loop that plays by itself and is seamless (the state at 4.0s equals the state at 0s). T = video time in seconds (the video is 12s = 3 loops) and u = T mod 4 = loop time 0–4; all times in the prompts are values of u. The tap happens at u = 0.5, and everything is back in its start state before the loop ends. Idle motions (caret blink, halo pulse, mic rings, voice wave, spinner, shimmer, moving pictures) are computed from T, not u; every one of their periods divides 4s, so computing them from u gives exactly the same frames and the loop stays seamless. Colors: violet #6E5BFF, cyan #38C6FF, pink #FF5CA8, gold #FFD166, mint #3DDBB0. "A→B" for a fill or stroke is a linear gradient between the two points given (evenly spaced stops). lerp(a, b, k) = a + (b − a)k; clamp(x) = clamp to 0–1. mix(A, B, k) = per-channel linear RGB blend (rounded to whole numbers). "Glow" means a canvas shadow (that shadowColor and shadowBlur, no offset). A "pill" is a rounded rect whose corner is half its height; corners are always limited to half the width and half the height. Text: font "Segoe UI Variable Display","Segoe UI",sans-serif, weight and size as given; x is the left edge unless "centered"; y is the alphabetic baseline. 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 near k = 0.56). 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−ζ²). For a tap at time T₀, a = u − T₀ wrapped into −2…+2 (negative before the tap). Press pressK(a, d): 1 for a < −0.1 or a > 0.6; for −0.1 ≤ a < 0 it is 1 − d·(a + 0.1)/0.1 (linear); for 0 ≤ a ≤ 0.6 it is 1 − d·(1 − springF(22, 0.45)(a)) (a small overshoot). Tap indicator tapMark(x, y, a) (draw it on top of everything, at the given point): a circle of radius 22.6px, fill rgba(215,215,230,0.38) with a soft shadow (black 35%, shadowBlur 10, fill only), then a 3.5px border white 92% stroked centered on that same r = 22.6 circle path (circle and border are drawn inside the scale, so the border width scales with the circle). Visible only for −0.42 ≤ a < 0.4. Scale: from a = −0.42 to −0.1 it goes 125% → 100% with ease((a+0.42)/0.32); from −0.1 to 0 it presses to 80% (linear); from 0 it grows back with lerp(80%, 100%, ease(a/0.2)). Opacity: clamp((a+0.42)/0.18) before the tap (fade-in over 0.18s), clamp(1 − (a−0.12)/0.25) after (1 until a = 0.12, 0 at a = 0.37). Ripple (drawn under the circle, only for 0 ≤ a < 0.4, not scaled): a 3px white ring of radius 22.6·(1 + 3.2a) (22.6 → 51.5px), opacity 0.7·(1 − a/0.4) — its own value, not multiplied by the circle's opacity. Halo halo(x, y, w, h, r, a) (a slow idle pulse, period 2s): p = 0.5 + 0.5·sin(πT), g = 3 + 4p; a 3px violet outline of the rounded rect w×h centered at (x, y), grown by g on every side (corner r + g), opacity a·(0.25 + 0.3p); nothing when a ≤ 0. Search bar sbar(x0, yc, w, h, focus): a pill with left edge x0, vertical center yc, width w, height h, filled #1C1B2B, stroked 2px rgba(255,255,255,0.1); if focus > 0, the same pill is stroked again at opacity focus with 2.5px violet→cyan (from x0 to x0 + w) and glow rgba(110,91,255,0.5) blur 12. Caret caret(x, yc, h, a = 1): ph = T mod 1; on = seg(ph, 0, 0.08) if ph < 0.5, else 1 − seg(ph, 0.5, 0.58) (1s blink: fades in over 0.08s, on for half a second, fades out over 0.08s); a cyan rect from x+1 to x+3.5 (2.5px wide), from yc − h/2 to yc + h/2, opacity a·on (nothing when 0). Typing typed(s, n, x, y, font, color): n = how many characters are typed (may be fractional); k = floor(n); draw the first k characters at (x, y); if n > k (and k < length) draw the next character at x + width(first k), y + 4·(1 − f), opacity f = n − k (it fades in while rising 4px); it returns w = width(first k) + f·width(next character), which places the caret. Icons (stroked, round caps and joins, size s, centered at (x, y), color and line width as given): icoSearch = one path with a circle of radius 0.3s centered at (x − 0.08s, y − 0.08s) and a handle line from (x + 0.14s, y + 0.14s) to (x + 0.4s, y + 0.4s). icoMic (relative to (x, y)) = a capsule outline (rounded rect from (−0.15s, −0.45s), 0.3s × 0.55s, corner 0.15s), a U-shaped arc of radius 0.3s centered at (0, −0.05s) from angle 0.15 to π − 0.15 rad (canvas angles, so it passes through the bottom), and a stem from (0, 0.25s) to (0, 0.45s). icoX = two lines (−0.3s, −0.3s) → (0.3s, 0.3s) and (0.3s, −0.3s) → (−0.3s, 0.3s). icoClock(ang) = a circle of radius 0.42s, a long hand from the center to (0.28s·sin ang, −0.28s·cos ang) and a short hand to (0.2s·sin(ang/12 + 2.1), −0.2s·cos(ang/12 + 2.1)). Picture scenery(x, y, w, h, r, kind): clipped to the rounded rect w×h (corner r) centered at (x, y); local coordinates from its top-left; ph = πT/2 (period 4s). kind 0 (sunset): vertical gradient (0,0)→(0,h) #3B2E86 → #7E5BD6 → #F3A5C8; a #FFD8A8 sun, circle at (0.7w, 0.42h) radius 0.13h; #2A2266 mountains, a filled polygon (0, h), (0.32w, 0.48h), (0.55w, 0.78h), (0.75w, 0.58h), (w, 0.85h), (w, h). kind 1 (sea): vertical gradient (0,0)→(0,h) #1B3F7A → #38C6FF; a white 85% circle at (0.3w, 0.3h) radius 0.08h; three wave layers k = 0, 1, 2 (#2C6FC0, #1F55A0, #173F80, drawn in that order), each a filled shape from (0, h) through 21 points j = 0…20 at x = jw/20, y = h·(0.62 + 0.12k) + 0.03h·sin(0.9j + ph + k), then (w, h). kind 2 (flowers): diagonal gradient (0,0)→(w,h) #183A33 → #2E7A63; three flowers j = 0, 1, 2 with (a, b, rad, color) = (0.3, 0.55, 0.12, pink), (0.66, 0.4, 0.15, gold), (0.55, 0.75, 0.1, #FF9CCB); sway sw = 0.02h·sin(ph + j); a mint stem (butt caps, width max(2, 0.03h)) from (aw, h) to (aw + sw, bh); five petals p = 0…4, circles of radius 0.5·rad·h in the flower color, at angle p·72° + 0.2·ph (radians) and distance 0.6·rad·h from the flower center (aw + sw, bh); then a #FFF3C4 center circle of radius 0.4·rad·h.

A round search button that stretches left into a full search bar, then a query types in. 
- Geometry: the full bar is x 30.75–439.25 (408.5px wide), 64.5px tall, centered at y = 99.4. At rest only its right end exists: a 64.5px circle centered at (407, 99.4).
- Expansion e: 0 before 0.5; easeBack(seg(0.52, 0.9)) until 3.55; then 1 − easeIO(seg(3.55, 3.9)). ec = clamp(e). Current width = (64.5 + 344·min(e, 1))·(1 + 0.02·max(0, e − 1)) (so the overshoot only adds a tiny stretch, up to about 409.5px); the right edge stays at 439.25, left = 439.25 − width.
- Press: tap at 0.5 on (407, 99.4). The shape and the search icon are scaled by pressK(a, 0.12) around (407, 99.4) (the text layer and the tap indicator are not).
- Shape (inside the press scale): if ec > 0, sbar(left, 99.4, width, 64.5, focus = ec). Then, if ga = 1 − seg(ec, 0, 0.4) > 0, on top at opacity ga: a pill (left, y 67.15, width, 64.5 tall) filled violet→cyan from x = left to left + width, glow rgba(110,91,255,0.55) blur 16 (the colored button fades into the dark bar, glow and all).
- Search icon (inside the press scale): icoSearch(407 − 341.85·ec, 99.4, s = 27.95, color mix(#FFFFFF, #A9A7C4, ec), 4.73px) — it slides from the button to x = 65.15 and turns from white to grey.
- Halo around the button: halo(407, 99.4, 64.5, 64.5, 32.25, a = 1 − seg(0.5, 0.65) + seg(3.75, 4.0)).
- Text layer, only while ec > 0.6, clipped to the current (unpressed) pill: n = 0 before 1.0; 13·seg(1.0, 1.75) until 3.3; then 13·(1 − seg(3.3, 3.5)). Placeholder "Search" (500, 17.2px, #6D6B88) at x = 95.25, baseline 105.42, opacity seg(ec, 0.9, 1)·(1 − clamp(3n)) (it fades out over the first third of a letter and back in as the last one goes). Then typed("running shoes", n, 95.25, 105.42, 500 17.2px, #F4F4F8) → w, and caret(95.25 + w, 99.4, 23.65, a = seg(ec, 0.8, 1)). Clear button at opacity seg(n, 1, 3): a #2C2A42 circle of radius 12.9 at (402.7, 99.4) with icoX(402.7, 99.4, 12.9, #C4C2E0, 2.2px).
- Tap indicator at (407, 99.4).
- Draw order: halo, press group (shape, icon), text layer (placeholder, typed text, caret, clear button), tap indicator.