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.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
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 #EEEEF2. Shows deployment URL or status text. Positioned to the right of the dot.
6. Secondary info: 11px, color #6E6E84. 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.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.