Button Part 2

A round delete button that must be held down: a ring fills around it and it turns into a check mark, on a 470×240 stage with a dark #13131C background. Point C = (235, 108) from the stage's top-left is the center reference. 4s loop that plays by itself: the finger presses at 0.35s, holds, and lifts at 2.35s (times are seconds from the loop start). Let e = seconds since 0.35s (0 to 4, wrapping). The loop is seamless: everything is back at rest before 0.25s.
- Conventions: changes are linear unless an easing is named; ease-out cubic = 1 − (1 − k)³; seg(e, a, b) = (e − a)/(b − a) clamped to 0–1; bump(e, a, b) = sin(π·seg(e, a, b)). A damped spring is x(t) = 1 − e^(−ζω₀t)·(cos ω_d t + (ζω₀/ω_d)·sin ω_d t), ω_d = ω₀√(1−ζ²).
- Button: circle radius 52px centered at (C.x + shake, C.y − 14). The ring track, ring fill, done pulse, body and finger all move with the shake; only the body and its icons are scaled (the rings are not).
- Values over time:
  - Press depth pd: during the 0.1s before 0.35s it goes 0 → 1 (ease-out cubic); it stays 1 while held (e < 2.0); after the finger lifts, pd = 1 − x(e − 2.0) with ω₀ = 18 rad/s, ζ = 0.55 (clamp pd to −0.5…1).
  - Ring fill k: seg(e, 0.08, 2.0) while e < 2.0 (linear, about 1.9s to fill); 1 until e = 2.9; then 1 − ease-out cubic(seg(e, 2.9, 3.3)) (it retracts).
  - Done amount c: seg(e, 2.0, 2.14) until e = 2.9, then 1 − seg(e, 3.0, 3.35).
  - Shake (px, horizontal, only while e < 2.0): sin(70·e) × 2.2 × seg(k, 0.72, 1) — it trembles just before it completes.
  - Scale of the button body and icon: (1 − 0.08·pd) × (1 + 0.12·bump(e, 2.0, 2.3)) (a pop when done).
- Ring track: circle outline radius 67 (52 + 15), line width 8, white 8%, around the button.
- Ring fill: the same circle, an arc from 12 o'clock (−90°) clockwise for k × 360°, line width 8, round caps, stroked with a linear gradient violet #6E5BFF (at the button's top-left, −52, −52) → cyan #38C6FF (at +52, +52), cyan glow (canvas shadowBlur 12 + 14·c).
- Done pulse: for e = 2.0…2.6, q = ease-out cubic((e − 2.0)/0.6): a cyan circle outline, line width 4, radius 67 + 26·q, opacity 1 − q.
- Body (scaled): disc radius 52 with a violet glow (shadowColor rgba(110,91,255, 0.25 + 0.35·k), shadowBlur 16 + 16·k). Fill #24223A; once c > 0, a linear gradient from its top-left to bottom-right: mix(#24223A, #6E5BFF, c) → mix(#1B1A2C, #38C6FF, c).
- Trash icon (in the body, scaled by 1 − 0.3·c, opacity 1 − c), stroke color mix(#C9C6E8, #FFFFFF, k), line width 5, round caps and joins; coordinates in px from the button center (y down): lid line (−20, −13) → (20, −13); handle (−7, −13) → (−5, −20) → (5, −20) → (7, −13); can (−15, −7) → (−12, 20) → (12, 20) → (15, −7); two inner lines (−4, −1) → (−3, 13) and (4, −1) → (3, 13).
- Check (in the body, opacity c): white, line width 7.5, round caps and joins, a polyline through (−25.2, −0.3), (−7.6, 17.3), (26.9, −18.8) from the button center, drawn in proportion to seg(e, 2.0, 2.25) of its total length (fully drawn after that).
- Caption 40px below the circle's bottom edge (at y = button center + 92), centered on C.x, 24px: "Hold to delete" (semibold 600, #8C8AA8) with opacity la = clamp(1 − 2c) and moved up by 10·(1 − la) px; "Deleted" (bold 700, #9FE6FF) with opacity lb = clamp(2c − 1) and moved down by 10·(1 − lb) px. They never overlap: the old one leaves in the first half of the change, the new one arrives in the second half.
- Finger indicator (draw it on top) at the button center (including the shake): a 23px-radius circle, fill white 38%, 3.5px white border, soft dark shadow (black 35%, canvas shadowBlur 10). It fades in over 0.18s starting 0.42s before 0.35s while shrinking 125% → 100% (ease-out cubic over 0.32s), presses to 80% over the last 0.1s before 0.35s, stays at 80% while held, then at 2.35s grows back to 100% over 0.2s (ease-out cubic), stays opaque until 2.47s and fades out by 2.72s. No ripple ring. The 3.5px border scales with it; it is not scaled by the button's press.