Status should be felt, not read. A deployment indicator that breathes — an 8px circle pulses with a soft glow when building, snaps to solid teal on success, or trembles red on failure. The 1.5-second pulse cadence was not chosen randomly: it matches human resting breath rate, creating an unconscious sense of calm during the most stressful 30 seconds of a developer's day. The radar-ring that expands outward says 'I'm still working' without demanding attention.
Build a Vercel-style deployment status pulse micro-interaction. Design philosophy — ambient awareness: 1. Status dot: 8px circle. Three states: Building (amber #f5a623), Ready (teal #50e3c2), Error (red #ee5a5a). 2. Pulse animation (building): The dot scales between 1x and 1.4x with opacity fading from 1 to 0.4, over 1.5 seconds with ease-in-out. A second ring (16px) pulses outward simultaneously with opacity 0.3→0, creating a radar-like effect. 3. Success transition: Pulse stops immediately. Dot snaps to solid teal with a brief scale(1.2)→scale(1) bounce (200ms, cubic-bezier(0.34, 1.56, 0.64, 1)). A checkmark fades in inside the dot. 4. Error transition: Three rapid flashes (opacity 1→0.3, 100ms each), then solid red with a subtle shake animation (translateX ±2px, 300ms). 5. Label: 13px, font-weight 500, color #ededed. Shows deployment URL or status text. Positioned to the right of the dot. 6. Secondary info: 11px, color #888888. Shows time elapsed or commit hash. 7. Container: Inline-flex, items-center, gap-2. The dot should be vertically centered with the label. The animation should make deployment feel like a heartbeat — alive and monitored.