Rating Part 1

Basics: stage 470×222px, background #13131C, all coordinates in px from the stage's top-left; everything is clipped to the stage (its two top corners are rounded with radius 40px). 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; u = loop time 0–4 in seconds, and all times below are values of u). T = seconds since the animation started (T = 0 at the start of the video, which is also a loop start; it keeps counting across loops and only drives the idle motion; every idle motion has a period of 2s, so T mod 2 = u mod 2 and the loop stays seamless). The first touch happens at 0.5s, and everything goes back to the start state from 3.4s on. Colors: violet #6E5BFF, cyan #38C6FF, pink #FF5CA8, gold #FFD166. Face colors FACE_COL[0…4] = #8F7BFF, #7FA8FF, #38C6FF, #3DDBB0, #FFD166 (sad → happy). A gradient "A→B" is linear between the given points (or across the shape's own width if none are given), in the shape's own coordinates, so it moves and scales with the shape. 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 unless stated. mix(A, B, k) = per-channel linear RGB blend of two colors (k clamped to 0–1, channels rounded). "Glow" means a canvas shadow (that shadowColor and shadowBlur, no offset; the blur is in screen px and is not scaled by transforms). lerp(a, b, k) = a + (b − a)·k; clamp(x) = x limited to 0–1. 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). 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); bump(x, a, b) applies it to the value x. 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 P, a = seconds relative to it, wrapped into −2…+2 (a = (u − P) mod 4, minus 4 if it is more than 2; negative before the tap). Press pressK(a, d), a scale around the element's own center: 1 for a < −0.1 or a > 0.6; 1 − d·(a + 0.1)/0.1 for −0.1 ≤ a < 0 (linear); 1 − d·(1 − springF(22, 0.45)(a)) for 0 ≤ a ≤ 0.6 (a small overshoot). Tap indicator (drawn on top of everything, at the given point): 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%; the circle and border are scaled around the point. Visible only for −0.42 ≤ a < 0.4. Scale: from a = −0.42 to −0.1 it goes 1.25 → 1 with ease((a + 0.42)/0.32); from −0.1 to 0 it goes 1 → 0.8 linearly; from 0 it goes 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 it (1 until a = 0.12, 0 at a = 0.37). 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). Hold indicator (the same circle for a press held from T0 to T1, drawn at the finger's current point, which moves with a drag; a = time relative to T0 as above, b = (u − T1) mod 4): while T0 ≤ u < T1 it has opacity 1 and scale lerp(0.8, 0.86, ease(a/0.2)) (0.86 after 0.2s), with the same ripple as the tap for 0 ≤ a < 0.4 (the ripple, drawn at the finger's current point, keeps growing for its full 0.4s after touch-down even if the finger is released earlier); else if b < 0.4 (after the release) opacity clamp(1 − (b − 0.12)/0.25) and scale lerp(0.86, 1, ease(b/0.2)); else if −0.42 ≤ a < 0 it approaches exactly like the tap indicator; otherwise it is hidden. Star star(x, y, r, f, glow, edge, lw): the path is a closed polygon of 10 points, point j (j = 0…9) at angle −90° + 36°·j from (x, y) (the first point straight up), radius r for even j and 0.48r for odd j; line join round; line width lw = max(2, 0.12r) unless given. (1) Stroke the path in the edge color (default #5E5B7E). (2) If f > 0 (f = filled part, 0–1, filled from the left): clip to the rect with left x − 2.4r, top y − 2.4r, height 4.8r, and right edge x + 2.4r when f ≥ 1, else x − 1.3r + 2.6r·(0.86f + 0.07) (= x + r·(2.236f − 1.118), so the fill grows from the left edge of the star to past its right edge; the wide clip leaves room for the glow); inside the clip, fill the same path with a vertical gradient #FFE08A at (x, y − r) → #FFB547 at (x, y + r), with a glow rgba(255,200,90, 0.7·glow) blur 16·glow if glow > 0 (the glow is cut by the same clip, so on a partly filled star it stops at the fill edge); then stroke the path again in #FFD166, same width, no glow. Face face(x, y, r, m, col, b) (m = mood from −1 sad to 1 happy, b = blink 0–1): (1) a circle of radius r filled col; (2) a highlight ellipse at (x − 0.35r, y − 0.45r), radii 0.28r × 0.16r, rotated −0.5 rad, fill white 18%; (3) all features in #2A1E4A, round caps, line width max(2, 0.09r); for each side s = −1 (left) then +1: eye center ex = x + 0.33r·s, ey = y − 0.15r, a filled ellipse with radii 0.09r × (0.12r·(1 − b) + 0.01r); brow = a line from (ex − 0.14r·s, ey − 0.28r − 0.1r·max(0, −m)) to (ex + 0.14r·s, ey − 0.28r + 0.06r·max(0, −m)) stroked at opacity max(0, −m) (so the inner ends rise when sad, and there are no brows when m ≥ 0); (4) mouth: my = y + 0.35r − 0.05r·m, mw = 0.38r + 0.1r·max(0, m), c = 0.32r·m; a stroked quadratic curve from (x − mw, my − 0.3c) with control point (x, my + c) to (x + mw, my − 0.3c) (a smile for m > 0, a frown for m < 0); (5) if m > 0.6, two pink (#FF5CA8) cheek ellipses at (x ± 0.55r, y + 0.15r), radii 0.13r × 0.08r, at opacity 0.5·(m − 0.6)/0.4. Blink: b = bump(T mod 2, 1.82, 1.94), so the eyes close briefly every 2s (around T mod 2 = 1.88, i.e. at u ≈ 1.88 and 3.88). rollDigits(x, y, from, to, k, font, color, h, up) (a label that rolls): text centered at x with text baseline "middle" at y, clipped to the rect x − 2h…x + 2h, y − 0.62h…y + 0.62h; e = ease(k), d = −1.05h if up (the new text comes from below), +1.05h if down; if k < 1 the old text is drawn at y + d·e with opacity 1 − e; if k > 0 the new text at y + d·(e − 1) with opacity e; both in the given color, and both opacities are multiplied by the surrounding opacity (so the whole label can be faded). With k = 1 it simply shows the new text at y (used for resting labels, so they sit on the same "middle" baseline as the roll). sparkle4(x, y, r, a, color): a filled 8-point star, vertices at angles j·45° − 90° (j = 0…7, the first straight up), radius r for even j and 0.28r for odd j, opacity a; nothing when a ≤ 0.

A row of five stars: tap the 4th and stars 1–4 fill one after another with a pop and a gold glow. 
- Stars: five stars of radius 25.8px at y = 92.95, centers x = 88.8, 161.9, 235, 308.1, 381.2 (73.1px apart; i = 0…4 from the left). Each is drawn with star(fill f_i, glow f_i, edge color mix(#4E4B6E, #8F87C0, wv·(1 − f_i))), wv = 0.5 + 0.5·sin(πT − 0.7i) (a slow wave of light that runs left to right across the empty outlines, period 2s). Line width 3.1px (0.12r).
- Tap the 4th star at (308.1, 92.95) at 0.5s; it presses with pressK(a, 0.12).
- Fill: stars 0–3 only (the 5th never fills). Start Ti = 0.55 + 0.07i (0.55, 0.62, 0.69, 0.76s); f = 0 before Ti, then seg(Ti, Ti + 0.06) (linear, 0.06s each). Reset from Ri = 3.4 + 0.06·(3 − i) (3.58, 3.52, 3.46, 3.40s, so right to left): f = 1 − seg(Ri, Ri + 0.1).
- Pop: each of stars 0–3 is scaled around its center by 1 + 0.32·bump(Ti, Ti + 0.28) (the 4th also multiplied by its press). The 5th star is never scaled. The star (outline, fill and line width) is drawn inside this scale.
- Twinkle: while f_i > 0, a sparkle4 at (star x + 23.22, 71.02) (not scaled with the star), radius 7.525·sin(π·ph)·f_i, opacity 0.9·sin(π·ph)·f_i (so it grows and fades with the fill), color #FFF3C4, ph = (T/2 + 0.23i) mod 1 (each star twinkles every 2s, offset per star).
- Labels: lp = 0 before 0.85s, easeBack(seg(0.85, 1.1)) until 3.4s, then 1 − ease(seg(3.4, 3.6)). "Tap to rate" (500, 16.125px, #77758F, centered at x = 235, baseline 172.5) with opacity 1 − clamp(2·lp). While lp > 0: "Great!" (800, 21.5px, gold #FFD166, centered) scaled by lp around the point (235, 166.05), its baseline 7.525px below that point (173.6 at full size).
- Draw order: for each star from left to right: the star, then its twinkle; "Tap to rate", "Great!", tap indicator.