Overview
How might we design ambient presence displays so people can trust and act on AI output?
When this pattern fits
- Essential for voice assistants, smart-home agents, and ambient AI surfaces where users need peripheral awareness of agent state without having to focus attention on a screen.
When to skip or lighten it
- Critical alerts that need interruption, not ambience.
- Dense data tools where subtle motion would be missed.
- Accessibility contexts where motion must be reduced (offer static equivalents).
States
State model coming soon
Key UX elements
Key UX elements coming soon
Anti-patterns to avoid
Ambient motion that looks decorative and means nothing.
No text or ARIA equivalent for state changes.
Flashing or high-contrast pulses for routine states.
Identical ambience for listening, processing, and error.
How products use it
| Product | Implementation |
|---|---|
| Apple Siri | Orb and glow states for listening and thinking. |
| macOS | Menu bar indicators for system and AI-adjacent activity. |
| Tesla | Cabin graphics for assistance state. |
| Nest Hub | Ambient displays for assistant readiness. |
Implementation
Copy this prompt to generate a production-ready implementation in Cursor, Claude Code, Lovable, or any AI coding agent.
Generate a production-ready implementation of the "Ambient Presence Displays" AI interface design pattern.
Pattern Definition:Frequently asked questions
What is an ambient presence display?
It is a low-attention visual (and accessible text) cue for agent state—listening, thinking, idle—meant to be glanced at, not studied.
When should ambience become a full panel?
On error, permission request, or when the user taps the ambient control. Escalate from ambient to explicit UI.
How do you keep it accessible?
Pair color/motion with text or icon changes, respect reduced-motion preferences, and expose state to assistive tech.
How does this relate to voice visualizers?
Voice visualizers react to audio levels in voice mode. Ambient presence covers broader agent states beyond voice.