Search Part 2

Basics: stage 470×222px, background #13131C, all coordinates in px from the stage's top-left; the drawing center is (235, 108). Everything is 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–4s, and all times below are values of u. Idle motion uses T = video time in seconds (0–12 in the video); every idle period used here is 1s or 2s, which divides 4, so for a standalone loop T = u gives the same picture. Taps happen at 0.5s (and a second one where stated), and everything is back in its start state well before 4.0s. Colors: violet #6E5BFF, cyan #38C6FF, pink #FF5CA8. "A→B" for a fill or stroke is a linear gradient between the two given points (horizontal across the shape's own width unless points are given), defined in the shape's current (transformed) coordinates, stops evenly spaced. mix(A, B, k) = per-channel linear RGB blend, rounded. Font: "Segoe UI Variable Display","Segoe UI",sans-serif for all text, weight and size as given (500 = medium, 600 = semibold, 700 = bold, 800 = heavy). Text x is the left edge unless "centered"; y is the alphabetic baseline unless stated. "Glow" = canvas shadow with that shadowColor and shadowBlur, no offset (blur in screen px, not scaled by transforms). Rounded rects: corner radius r, clamped to half the width/height. Easing (k 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)² (overshoots to about 1.12). seg(x, a, b) = clamp((x−a)/(b−a), 0, 1); seg(a, b) with two arguments applies it to u. bump(x, a, b) = sin(π·seg(x, 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−ζ²). For a tap at time T₀, a = u − T₀ wrapped into −2…+2 (negative before the tap). Press press(a, d) (a scale factor): 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 past 1). Tap indicator (drawn on top of everything, at the given point): a circle of radius 22.58px, fill rgba(215,215,230,0.38) with a soft shadow (black 35%, shadowBlur 10, on the fill only), then a 3.5px border rgba(255,255,255,0.92); circle and border are drawn inside the scale. 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, 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.58·(1 + 3.2a), opacity 0.7·(1 − a/0.4) (its own value, not multiplied by the circle's opacity). Search bar sbar(x0, yc, w, h, focus): a fully rounded pill (corner h/2) from x0 to x0 + w, vertically centered on yc, fill #1C1B2B, 2px border rgba(255,255,255,0.1); if focus > 0, the same pill outline stroked again 2.5px with violet→cyan (from x0 to x0 + w), glow rgba(110,91,255,0.5) blur 12, at opacity focus. Caret caret(x, yc, h, a): a cyan rect 2.5px wide and h tall, from x + 1 to x + 3.5, vertically centered on yc; blink with ph = T mod 1: on = seg(ph, 0, 0.08) for ph < 0.5, else 1 − seg(ph, 0.5, 0.58) (on half a second, off half, 0.08s fades); opacity a·on (a = 1 if not given). typed(s, n, x, y): types the first n characters of s (n may be fractional) left-aligned at x, baseline y: the first floor(n) characters normally, then the next character at opacity f = n − floor(n), drawn (1 − f)·4 px lower; its width = width of the full characters + f × width of the partial one. Icons (stroked, round caps and joins, around the center (x, y), size s, line width lw): icoSearch = one path: a circle of radius 0.3s centered at (−0.08s, −0.08s) plus a handle line from (0.14s, 0.14s) to (0.4s, 0.4s); icoX = 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 hand from the center to (sin(ang)·0.28s, −cos(ang)·0.28s) and a hand from the center to (sin(ang/12 + 2.1)·0.2s, −cos(ang/12 + 2.1)·0.2s).

A grid of six item cards with a magnifying lens gliding over it in a figure-8 and showing the cards enlarged inside. 
- Cards (the "content"): 2 rows × 3 columns, each 129×86px, corner 10.75px, fill #1C1B2B. Card left edges x = 28.6, 170.5, 312.4; top edges y = 15.55 (row 1), 114.45 (row 2). Items in reading order: Lamp #6E5BFF, Chair #38C6FF, Rug #FF5CA8 (row 1); Sofa #3DDBB0, Vase #FFD166, Clock #8F7BFF (row 2).
- Inside each card (x, y = its top-left): a dot of radius 16.13px at (x + 25.8, y + 43), filled with a linear gradient from (x, y) to (x + 34.4, y + 34.4), item color → mix(item color, #1A1830, 0.5) (Lamp #443A98, Chair #296F98, Rug #8D3A6C, Sofa #2C7A70, Vase #8D754B, Clock #554A98); the name (700, 13.98px, #F4F4F8) at x + 51.6, baseline y + 40.85; "In stock" (500, 9.68px, #77758F) at x + 51.6, baseline y + 58.05.
- Lens path: center lx = 235 + 133.3·sin(2πu/4), ly = 108 + 36.55·sin(πu) (a figure-8; at 0s it is at (235, 108) moving right and down). Lens radius R = 40.85px.
- Handle (drawn before the lens): a line from (lx + 29.41, ly + 29.41) to (lx + 57.36, ly + 57.36), 10.75px wide, round caps, stroked with a gradient from (lx, ly) to (lx + 64.5, ly + 64.5), #8F7BFF → #5B48E8.
- Lens inside: clip to the circle (lx, ly) radius 40.85, fill it #13131C, then draw the whole card grid again with the transform translate(lx, ly) · scale(1.8) · translate(−lx, −ly) (every point p is drawn at lens + 1.8·(p − lens); sizes, text and gradients are enlarged with it). Where the enlarged grid does not reach, the lens shows #13131C.
- Rim: circle (lx, ly) radius 40.85, 5.38px stroke, horizontal gradient violet → cyan from x = lx − 40.85 to lx + 40.85, glow rgba(110,91,255,0.6) blur 14.
- Highlight: white ellipse at opacity 0.18, center (lx − 15.52, ly − 17.16), radii 13.07×5.72px, rotated −0.6 rad.
- No tap. Draw order: card grid, handle, lens inside (background + enlarged grid), rim, highlight.