Error Part 2

A "no connection" animation, 4s loop that plays by itself, on a 470×260 stage with a dark #13131C background. Times are seconds from the loop start. Error red = #FF4D6A. Font: Segoe UI / Inter / system sans-serif. Fades without a named easing are linear. Glow blur values are canvas shadowBlur (not scaled by transforms).
- Wi-Fi icon: its base point is 22px below the stage center. Three concentric arcs around that point, radii 26, 52 and 77px, each spanning 90° straight up (from −135° to −45°, i.e. 10:30 to 1:30), 11px stroke, round caps. A dot (radius 7.5px) at the base point.
- Until 2.2s, "scanning": every 0.22s the state steps through none lit → inner arc lit → inner two lit → all three lit, then repeats. Lit arcs are cyan #38C6FF, unlit ones white at 16%. The dot is cyan.
- Below, baseline 71px below the stage center, "Searching" followed by 1, 2 or 3 dots (the count cycles every 0.33s): 21.5px semibold, #A9A7C4, left-aligned at 52px left of center.
- 2.2–2.3s: error. Scanning stops: at 2.2s every arc snaps to the unlit white 16% and then fades to white at 28%; the dot snaps to white at 40%; "Searching…" fades out and "No connection" (22.6px bold, red, centered at the same baseline) fades in.
- 2.2–2.4s: a red slash draws itself (cubic ease-out) from 58px left / 86px above the base point to 58px right / 17px below it: 11px red stroke, round caps, red glow (rgba(255,77,106,0.7), blur 17px). Under it, the same line in the background color #13131C at 24px wide (round caps), so it cuts a gap through the arcs.
- 2.2s: the icon (arcs, dot and slash) and "No connection" shake sideways ("Searching…" does not): x = 13px · sin(2π·9·t) · e^(−6t), t = seconds since 2.2, for 0.8s.
- 3.6–3.9s: the slash retracts (its length × (1 − k), k linear 0 → 1; the far end runs back to the start point), "No connection" fades out, "Searching…" fades back in (dot count still cycling), and the arcs fade from 28% back to 16%. At 3.9s the dot snaps back to cyan; at 4s the scanning restarts with no arcs lit.