Rating Part 2

Basics: stage 470×222px, background #13131C, all coordinates in px from the stage's top-left; the drawing center is (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; times are seconds from the loop start, and anything that "wraps" continues into the next loop). The first tap or press happens at 0.5s, and everything goes back to the start state from about 3.3–3.4s on (exact times are in each prompt). T = seconds since the animation started (the video is 12s = 3 loops); it is used only for idle motion whose period divides 4s. Colors: violet #6E5BFF, cyan #38C6FF, pink #FF5CA8, gold #FFD166, mint #3DDBB0. "violet→cyan" is a horizontal linear gradient across the shape's own width. mix(a, b, k) = a per-channel linear RGB blend from a to b (k clamped to 0–1, channels rounded). Font: the stack "Segoe UI Variable Display","Segoe UI",sans-serif; "bold" = 700, "heavy" = 800 (weight 800 on Segoe UI Variable Display; plain Segoe UI without a Black face looks fatter). Texts use the alphabetic baseline at the given y unless said otherwise. Sizes written as "A×B" for an ellipse are its two radii. Easing (k is clamped to 0–1 first): easeOut = 1−(1−k)³, easeIn = k³, easeInOut = 4k³ for k < 0.5, else 1 − (2 − 2k)³/2, back = 1 + 2.9(k−1)³ + 1.9(k−1)² (overshoots past 1, ends at 1); seg(a,b) = (time−a)/(b−a) clamped to 0–1; seg(x, a, b) with three arguments is the same clamp((x − a)/(b − a), 0, 1) applied to the value x; bump(a,b) = sin(π·seg(a,b)). Spring x(t) = 0 for t ≤ 0, else 1 − e^(−ζω₀t)·(cos ω_d t + (ζω₀/ω_d)·sin ω_d t), ω_d = ω₀√(1−ζ²). Press (with a press size such as 88%): the tapped element (around its own center) stays at 100% until 0.1s before the tap, scales to its press size linearly during that 0.1s, then returns with 1 − (1 − press size)·(1 − x(t)), spring ω₀ = 22, ζ = 0.45 (a small overshoot); from 0.6s after the tap it is 1 again. Tap indicator (draw it on top of everything): a 22.6px-radius circle, fill rgba(215,215,230,0.38), 3.5px white border (92%), soft shadow on the fill only (black 35%, canvas shadowBlur 10). With a = seconds relative to the tap: from a = −0.42 to −0.1 it scales 125% → 100% (easeOut over that 0.32s) while fading in linearly over the first 0.18s; from −0.1 to 0 it presses to 80% (linear); from 0 to 0.2 it grows back to 100% (easeOut); opacity 1 until a = 0.12, then linearly to 0 at a = 0.37; not drawn from a = 0.4. Ripple (drawn under the circle): from a = 0 to 0.4 a 3px white ring grows linearly from radius 22.6 to 51.5px (r·(1 + 3.2a)) while its opacity goes linearly 0.7 → 0. The indicator is drawn at its target's current position. Hold indicator (for a press that is held or dragged from T0 to T1): before T0 it behaves exactly like the tap indicator (appears, presses to 80%); the ripple starts at T0 and always runs its full 0.4s (even after a quick release), centered on the indicator's current position; while held it scales toward 86%: lerp(80%, 86%, easeOut(a/0.2)) with a = seconds since T0, then 86% (so a hold shorter than 0.2s is released slightly before reaching 86%) and stays at opacity 1, following the finger position; at release T1 it grows from 86% back to 100% in 0.2s (easeOut), its opacity stays 1 until 0.12s after T1, then goes linearly to 0 by 0.37s after T1; it is not drawn once 0.4s after T1 has passed. Star (center, outer radius r, fill f 0–1, glow g, rotation rot): a closed 10-point path, point k = 0…9 at angle −π/2 + rot + k·π/5 with radius r for even k and 0.48r for odd k (the first tip points up), round line joins, line width max(2, 0.12r) unless given. First stroke the outline in #5E5B7E. If f > 0: clip to an axis-aligned rect from x − 2.4r to xr and from y − 2.4r, 4.8r tall, where xr = x + 2.4r when f ≥ 1, else xr = x − 1.3r + 2.6r·(0.86f + 0.07) (large enough that the glow is not cut; a partial fill reveals the star from the left); inside that clip fill the same path with a vertical gradient #FFE08A (at y − r) → #FFB547 (at y + r) with a glow (shadow rgba(255,200,90, 0.7g), shadowBlur 16g), then stroke the path again in #FFD166 without shadow. Face (center, radius r, mood m from −1 sad to +1 happy, color, blink b from 0 open to 1 closed; offsets from the face center): a filled circle in the color; a highlight ellipse white 18% at (−0.35r, −0.45r), radii 0.28r×0.16r, rotated −0.5 rad; then everything else in #2A1E4A, round caps, line width max(2, 0.09r): two eyes = filled ellipses at (±0.33r, −0.15r), radii 0.09r × (0.12r·(1 − b) + 0.01r); two brows only when m < 0, at opacity min(1, −m): for the eye at (ex, ey) on side sg (−1 left, +1 right) a line from (ex − sg·0.14r, ey − 0.28r − 0.1r·(−m)) to (ex + sg·0.14r, ey − 0.28r + 0.06r·(−m)) (the inner ends rise when sad); mouth = a quadratic curve from (−mw, my − 0.3c) with control point (0, my + c) to (mw, my − 0.3c), where my = 0.35r − 0.05r·m, mw = 0.38r + 0.1r·max(0, m), c = 0.32r·m (smile when m > 0, frown when m < 0); blush only when m > 0.6: two pink ellipses at (±0.55r, 0.15r), radii 0.13r×0.08r, opacity 0.5·(m − 0.6)/0.4. Face colors FACE_COL = [#8F7BFF, #7FA8FF, #38C6FF, #3DDBB0, #FFD166] (sad → happy). Rolling text (old text A → new text B, progress k 0–1, band height h, centered at (x, y), textAlign center, textBaseline "middle"): clip to the rect from (x − 2h, y − 0.62h), 4h wide, 1.24h tall; e = easeOut(k); d = −1.05h when rolling up (the new text comes from below) or +1.05h when rolling down; draw A at y + d·e with opacity 1 − e (while k < 1) and B at y + d·(e − 1) with opacity e (while k > 0); these opacities are multiplied by any surrounding opacity. A resting text B is drawn the same way with k = 1 (B centered at (x, y), textBaseline "middle", same clip), so it does not move when a roll starts or ends. Check mark: a round-capped, round-joined polyline through (−0.30, 0.02) → (−0.09, 0.23) → (0.32, −0.20) × its size; "drawing" it means revealing that length from the start. Product thumbnail (size s): a rounded square, corner 0.2s, diagonal gradient #2E2A5A (top-left) → #1A1830 (bottom-right), 2px border white 8%, its content clipped to it. Mug (center, size s; no steam here): handle first = an arc of radius 0.13s, stroke 0.07s #B7A9FF (butt caps), centered at (0.26s, 0.02s), from −1.2 to +1.2 rad; body = a rounded rect from (−0.26s, −0.26s), 0.52s wide, 0.54s tall, corner 0.09s, horizontal gradient #8F7BFF (left edge) → #6E5BFF (right edge); highlight = rounded rect from (−0.2s, −0.2s), 0.08s×0.4s, corner 0.04s, white 18%; rim = ellipse at (0, −0.26s), radii 0.26s×0.05s, #C9BFFF; on it an inner ellipse centered on the rim center (0, −0.26s), radii 0.21s×0.032s, #3A2F8A.

A row of 5 stars: tapping the 5th star fills them one by one, each star hopping, and the last one spins and bursts. 
- Stars: outer radius 23.65px (outline 2.84px), centers x = 93.1, 164.05, 235, 305.95, 376.9 (70.95px apart), y = 120.9. Star i (0–4) starts at Ti = 0.55 + 0.09i (0.55, 0.64, 0.73, 0.82, 0.91).
- Fill f (also its glow): 0 before Ti; then seg(Ti + 0.06, Ti + 0.12) (it fills from the left during the hop); from 3.4s, 1 − seg(3.4 + 0.05·(4 − i), 3.52 + 0.05·(4 − i)) (the 5th star empties first, 3.40–3.52s, the 1st star last, 3.60–3.72s; the fill shrinks back to the left).
- Hop: p = seg(Ti, Ti + 0.32); from Ti until p = 1 the star moves up by jy = −43·4p(1 − p) px (up to 43px), otherwise jy = 0. Landing squash sq = 0.18·bump(Ti + 0.32, Ti + 0.44). Transform for each star: translate to (x, 120.9 + jy + 23.65) (a point 23.65px below the star center), scale (1 + sq, 1 − sq), translate up 23.65px, then draw the star at the origin.
- 5th star only: rotation rot = (2π/5)·easeInOut(seg(Ti, Ti + 0.45)) (a 72° spin; the star looks the same at 72° and at 0, so going back to 0 at the loop start does not show). It is tapped at 0.5s and presses to 88% around its own center (the press scale is applied after the squash transform).
- Shadow (drawn just before each star): black 30% ellipse at (x, 145.7), radii 18.9·(1 + jy/129) × 4.3px (it shrinks while the star is up).
- Dots (drawn just after each star): bk = seg(Ti + 0.08, Ti + 0.55); drawn only while 0 < bk < 1 (and before 3.4s). n = 5 dots (10 for the 5th star); dot q at angle q·2π/n − π/2 + i (radians; i is the star index); distance from the star's current center (x, 120.9 + jy): 26.0 + 23.65·easeOut(bk) px (5th star: 26.0 + 37.8·easeOut(bk)); dot radius 3.87·(1 − 0.5·bk) px; color [violet, cyan, pink, gold][(q + i) mod 4]; opacity seg(bk, 0, 0.12)·(1 − easeIn(bk)) (a quick fade-in, then out).
- "Tap to rate" (500, 15px, #77758F) centered at x = 235, baseline 39.2: opacity 1 until 0.55s, 1 − seg(0.55, 0.75) until 3.4s, then seg(3.6, 3.85).
- "Amazing!" (heavy 21.5px, gold, centered): lp = 0 before 1.0s, back(seg(1.0, 1.25)) until 3.4s, then 1 − easeOut(seg(3.4, 3.6)). Drawn while lp > 0, scaled by lp around (235, 34.9), its baseline 7.5px below that point (y = 42.4).
- Draw order: for each star in order (left to right): shadow, star, its dots; then "Tap to rate", "Amazing!", tap indicator at (376.9, 120.9) for the tap at 0.5s.