Checkbox Part 1

Basics: stage 470×222px, background #13131C, all coordinates in px from the stage's top-left; 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; times are seconds from the loop start). T = seconds since the animation started (it keeps counting across loops and drives the idle motion). The tap happens at 0.5s, the result is "done" at 1.0s, and things go back to the start state from 3.4s on (unless the prompt says otherwise). Colors: violet #6E5BFF, cyan #38C6FF, pink #FF5CA8, gold #FFD166, mint #3DDBB0. "violet→cyan" is a linear gradient (violet at the start, cyan at the end) across the given x range, or across the shape's own width if none is given. mix(A → B, k) = per-channel linear RGB interpolation (rounded), k clamped to 0–1. Font: "Segoe UI Variable Display", "Segoe UI", sans-serif, weights as given; text is left-aligned with an alphabetic baseline at the given y unless stated. Easing (k clamped to 0–1): ease = 1−(1−k)³, easeIn = k³, easeIO = 4k³ for k < 0.5, else 1 − (−2k+2)³/2; back = 1 + 2.9(k−1)³ + 1.9(k−1)² (overshoots to about 1.12); seg(a,b) = (time−a)/(b−a) clamped to 0–1; seg(x, a, b) with three arguments = the same clamp applied to the value x instead of time; bump(a,b) = sin(π·seg(a,b)). Spring x(t) = 1 − e^(−ζω₀t)·(cos ω_d t + (ζω₀/ω_d)·sin ω_d t), ω_d = ω₀√(1−ζ²), x = 0 for t ≤ 0. Time relative to a tap at P: a = (time − P) mod 4, minus 4 if it is more than 2 (so a is negative before the tap, also across the loop point). Press with depth d (around the element's own center): scale 1 while a < −0.1; linearly 1 → 1 − d during −0.1 ≤ a < 0; then 1 − d·(1 − x(a)) with spring ω₀ = 22, ζ = 0.45 (a small overshoot); exactly 1 again when a > 0.6. Two presses on one element multiply. Tap indicator (drawn on top of everything, at the tapped point): a 22.6px-radius circle, fill rgba(215,215,230,0.38) with a soft shadow (black 35%, canvas shadowBlur 10), then a 3.5px border white 92% (no shadow). It is visible only for −0.42 ≤ a < 0.4. Scale: from a = −0.42 to −0.1 it goes 1.25 → 1 by ease((a+0.42)/0.32); from −0.1 to 0, 1 → 0.8 linearly; after 0, 0.8 → 1 by ease(a/0.2). Opacity: (a+0.42)/0.18 clamped before the tap; after it, 1 until a = 0.12, then linearly to 0 at a = 0.37. Ripple (drawn under the circle, not scaled) for 0 ≤ a < 0.4: a 3px white ring of radius 22.6·(1 + 3.2a) (22.6 → 51.5px), opacity 0.7·(1 − a/0.4) (its own opacity, not multiplied by the circle's opacity). Check mark of size s: a round-capped, round-joined polyline through (−0.30, 0.02) → (−0.09, 0.23) → (0.32, −0.20) × s from its center (y down); "drawn by p" means only the first p (0–1) of its total length is shown, starting from the first point. Checkbox of size s with fill f and check c, centered on its point: outline = a rounded square of side s − lw with the stroke centered on it (so its outer edge is the s×s square), corner radius 0.26s on that stroke-center path, stroke #5E5B7E, lw = max(2.5, 0.09s); if f > 0, a filled s×s rounded square (corner 0.26s), violet→cyan across x −s/2…+s/2, violet glow rgba(110,91,255,0.55) blur 14, scaled by back(f) around the center, drawn over the outline; if c > 0, a white check of size 0.95s, stroke max(3, 0.12s), drawn by c, on top. Idle halo around a rounded rect (width w, height h, corner r, centered on a point) with strength A: p = 0.5 + 0.5·sin(π·T) (one pulse every 2s), g = 3 + 4p; a 3px violet stroke centered on that rect grown by g on every side (corner r + g), opacity A·(0.25 + 0.3p); skip it when A = 0.

A round checkbox whose gray ring unwinds and flows into a check mark. 
- Path: one polyline. First 65 points on a circle of radius 43px centered at (93.1, 108): point k (k = 0…64) at angle π − k·2π/64 (canvas angles, y down), i.e. it starts at the leftmost point (50.1, 108) and goes down, right, up and back to the leftmost point (counter-clockwise on screen). Its length (a 64-sided polygon) is Lc = 270.07px. Then it continues straight to the three check points (73.1, 109.3) → (87.1, 123.3) → (114.4, 94.7) (a check of size 66.65px centered on the ring center). The connector from (50.1, 108) to (73.1, 109.3) is Lj = 23.04px; the total length is Lt = 352.51px (the check part is 59.39px).
- Morph m: 0 before 0.52s; easeIO(seg(0.52, 1.0)) until 3.4s; then 1 − easeIO(seg(3.4, 3.9)).
- Draw only the part of the path between the distances s0 = m·(Lc + Lj) and s1 = Lc + m·(Lt − Lc), measured along the path from its start (partial polyline: cut the first and last segments at those distances). Stroke 8.6px, round caps and joins. At m = 0 it is the full ring; at m = 1 only the check remains (the tail runs around the ring while the head runs through the connector into the check, and back the same way at the reset).
- The same partial path is stroked twice: gray #5E5B7E at opacity 1 − seg(m, 0, 0.25); then violet→cyan (x 50.1 → 136.1) with a violet glow (rgba(110,91,255,0.6), blur 14) at opacity seg(m, 0, 0.25).
- Tap the ring center (93.1, 108) at 0.5s: both strokes press with depth 0.1 (to 90%) around (93.1, 108).
- Halo around the ring: w = h = 86, r = 43 (so it is a circle of radius 43 + g), strength 1 − seg(m, 0, 0.2); it does not press.
- Ripple: from 1.0s to 1.5s, with p = (time − 1.0)/0.5, a 3px cyan ring centered at (93.1, 108), radius 43·(1 + 0.7·ease(p)) (43 → 73.1px), opacity 0.7·(1 − p). Not drawn at other times.
- Text, with dn = seg(m, 0.6, 1): "Water the plants" (bold 700, 22.6px) at x = 174.8, baseline 106.9, color mix(#F4F4F8 → #77758F, dn); "Today · 9:00" (500, 18.3px) at x = 174.8, baseline 132.7, color mix(#9D9BBB → #5D5B75, dn).
- Draw order: halo, gray stroke, gradient stroke, ripple, the two text lines, tap indicator (at the ring center).