Foundations
Motion and interaction feedback
Short changes support continuity; reduced motion removes nonessential movement.
On this page
Implemented behavior
The global reduced-motion rule sets scroll behavior to auto, transition and animation durations to 0.01ms, and animation iteration count to one. Components otherwise use short transitions for hover, selection, and opacity. ProjectsWorkspace also animates reordered positions with the Web Animations API.
Observed transitions
| Interaction | Source behavior | Constraint |
|---|---|---|
| Project card hover | Translate upward and strengthen shadow, about 200ms | Not an essential signal; preserve focus and link naming. |
| Task completion | Indicator/opacity transition; compact agenda task leaves after 150ms | Use completion semantics and announcements in addition to animation. |
| Popover trigger | Chevron rotation and selected surface | Do not make animation necessary to identify the chosen state. |
| Project reordering | Explicit element.animate call | A CSS reduced-motion rule does not automatically govern this JavaScript animation. Audit separately. |
| Current time navigation | Scrolls to the current block/marker | Honor user context and test reduced-motion behavior separately. |
Known gap
Reduced-motion support is present globally, but the imperative reordering animation needs an explicit review of matchMedia handling. This pilot does not claim that every JavaScript-driven movement is already suppressed.
Recommendations
- Use movement to preserve orientation, not to decorate a routine save.
- Keep status text available when feedback is animated or short-lived.
- Verify pointer, keyboard, and touch interactions independently.
- Test reduced-motion settings in the actual product, including drag and reorder flows.
Examples from the app
Actual Radarist components with fictional data. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision 0103e2549959 · Documentation v0.1