Live Status Dot

Create a service status list with live status dots. A card with 3 service rows (name + status) separated by hairlines. Each row has a 10px status dot that emits a breathing pulse: a copy of the dot scales from 1 to 2.4x while fading from 60% to 0 opacity, over 1.3s on an infinite ease-out loop. States and colors: Operational (green), Degraded (amber), Down (red). When a state changes: the dot's fill color morphs over 400ms, the pulse restarts in the new color, and the status label crossfades vertically (old slides up 5px and fades, new slides in from below, 220ms). For an ambient demo, script one row through an incident and recovery (ok → degraded → down → degraded → ok) on a fixed cycle; in production, drive it from real health checks. The status label is small monospace text in the state color; give it a fixed min-width so rows don't shift when the word changes. Accessibility: wrap each status label in aria-live="polite" so changes are announced. If prefers-reduced-motion is set, show static dots (no pulse) and instant label swaps. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.