Checkbox 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, u = loop time 0–4, and anything that "wraps" continues into the next loop). The first tap happens at 0.5s, the box is checked by about 1.0s, and everything goes back to the start state from 3.4s on. Colors: violet #6E5BFF, cyan #38C6FF, pink #FF5CA8, gold #FFD166. "A→B" for a fill is a horizontal linear gradient across the shape's own width (left edge A, right edge B, in the shape's own coordinates, so it scales and turns with the shape). Text: font Segoe UI (fallback sans-serif) unless stated, weight and size as given; x is the left edge unless "centered" or "right-aligned"; y is the alphabetic baseline unless stated. mix(A, B, k) = per-channel linear RGB blend of two colors. "Glow" means a canvas shadow (that shadowColor and shadowBlur, no offset; the blur is in screen px and is not scaled by transforms). 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), 0, 1); seg(a, b) with two arguments applies it to the loop time u. bump(a, b) = sin(π·seg(a, b)) (0→1→0); bump(v, 0, 1) = sin(π·v). 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 = seconds relative to it, wrapped into −2…+2 (negative before the tap). Press press(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 (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% (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. Hold indicator (a press held from T0 to T1, drawn at the finger's current point; a = time relative to T0 as above, b = seconds since T1, wrapped 0–4): while T0 ≤ u < T1 it has opacity 1 and scale lerp(80%, 86%, ease(a/0.2)) (86% after 0.2s), with the same ripple as the tap for a < 0.4; else if b < 0.4 (after the release) opacity clamp(1 − (b−0.12)/0.25) and scale lerp(86%, 100%, ease(b/0.2)), no ripple; else if −0.42 ≤ a < 0 it approaches exactly like the tap indicator; otherwise it is hidden. Check mark check(x, y, size, p, width, color): a stroked polyline (round caps and joins) through (−0.30, 0.02) → (−0.09, 0.23) → (0.32, −0.20) × size around (x, y); p = how much of its total length is drawn from the start (0–1; nothing at 0). drawSub(path, 0, L) = stroke only the first L px of a polyline. Checkbox cbox(x, y, s, f, c, sc): around (x, y), scaled by sc (default 1) if given: (1) the empty box = a rounded square stroked #5E5B7E, line width lw = max(2.5, 0.09s), drawn on the square inset by lw/2 (side s − lw, corner r = 0.26s — the same r as the filled square, not reduced by the inset); (2) if f > 0: a rounded square side s, corner r, filled violet→cyan with a violet glow rgba(110,91,255,0.55) blur 14, scaled around the center by easeBack(f) (it pops slightly past full size); (3) if c > 0: a white check(center, 0.95s, c, max(3, 0.12s)). Halo halo(x, y, w, h, r, a) (a slow idle pulse, period 2s; T = seconds since the start): 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. rollDigits(x, y, from, to, k, font, color, h, up) (a label that rolls): text centered at x with baseline "middle" at y, clipped to a rect 4h wide × 1.24h high centered on (x, y) (x−2h…x+2h, y−0.62h…y+0.62h); e = ease(k), d = −1.05h if up (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. 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.

A habit list where one press-and-drag down the boxes checks every row it passes, and a drag back up unchecks them. 
- Rows: four rows with center y = 43.5, 86.5, 129.5, 172.5 (j = 0…3). Each row background is a rounded rect 369.8×36.55px (corner 12.9px), fill #1C1B2B, centered at (235, y) (x 50.1–419.9).
- Labels per row (j = 0…3): left "Mon", "Tue", "Wed", "Thu" (600, 18.3px) at x = 127.5, baseline y + 6.45, color mix(#A9A7C4, #F4F4F8, v); right "Gym", "Run", "Yoga", "Swim" (500, 16.1px) right-aligned at x = 402.7, baseline y + 6.45, color mix(#6D6B88, #9FE3FF, v).
- Finger: x = 101.7 always. top = 37.05, bot = 178.95. Down finger fd (defined only from 0.5): lerp(top, bot, easeIO(seg(0.6, 1.4))) until 2.5, then bot. Up finger fu (defined only from 2.5): lerp(bot, top, easeIO(seg(2.6, 3.3))). Finger y = fu if defined, else fd if defined, else top.
- Row state: dn = 0 if fd is undefined, else seg(fd − y, −6.45, 4.3); up = 0 if fu is undefined, else seg(y − fu, −6.45, 4.3); v = clamp(dn − up, 0, 1). Checkbox: cbox(101.7, y, 23.65, f = v, c = seg(v, 0.3, 1), sc = 1 + 0.18·bump(v, 0, 1)) (so: edge 2.5px, corner 6.15px, check size 22.5px with 3px stroke). Each box fills and pops while the finger passes it; on the way up they uncheck from the bottom row up.
- Selection band: from 0.5 to 2.5 it spans top → fd, opacity 1 until 1.5, then 1 − seg(1.5, 1.8). From 2.5 it spans fu → bot, opacity 1 until 3.4, then 1 − seg(3.4, 3.7). Draw it only when that opacity > 0 and its bottom is below its top (span = bottom − top > 0): rounded rect x = 50.1, y = spanTop − 12.9, width 369.8, height span + 25.8, corner 12.9, fill rgba(110,91,255,0.16), 2px stroke rgba(140,125,255,0.55), all at opacity (band opacity)·seg(span, 0, 12.9) (so it fades in as it starts to open instead of popping).
- Two hold indicators at (101.7, finger y): held 0.5–1.5 and held 2.5–3.4 (the first appears at the top row before 0.5; the second appears at the bottom before 2.5, presses, drags up and is released at the top).
- Draw order: the 4 row backgrounds, band, then per row (checkbox, left label, right label), hold indicators.