Foundations
Motion and feedback timing
Keep transitions subordinate to conversation work and expose timing boundaries honestly.
On this page
Native behavior
| Effect | Source |
|---|---|
| Hover/focus colors | transition-colors on buttons and controls |
| Participant hover | Small upward translate with transition-transform |
| Draft feedback | 500ms saving/saved fingerprint timer |
| AI demo | HelpdeskApp resolves a canned draft after 850ms |
| Toast | Dismisses after 3200ms |
| Dialog backdrop | Animation explicitly disabled in globals.css |
Reduced motion
The screenshots use prefers-reduced-motion: reduce to remove unstable animation timing during capture. The source has no global prefers-reduced-motion override in globals.css, so this setting does not establish complete reduced-motion compliance. Native transition behavior needs separate review.
Team guidance
- Do not make a transient toast the only record of a consequential action.
- Do not interpret a timer as a backend acknowledgement.
- Capture stable selected/error states after their rendering settles.
- When adding motion, provide an equivalent reduced-motion path and preserve focus.
Source references
| File | Responsibility |
|---|---|
| app/globals.css | Backdrop policy |
| components/inbox/thread-participants.tsx | Hover movement |
| components/inbox/composer.tsx | Draft timer |
| components/helpdesk-app.tsx | AI sample and toast timers |
Interface examples
Actual Sonarist components with fictional conversations, people, example.com addresses and simulated operational states. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-08 · Revision 10f45d1377b5 · Documentation v1.0.0