Foundations
Motion and interaction feedback
Use modest transitions to explain state without making timing the only source of information.
On this page
Existing motion
Components use Tailwind transition classes for focus, hover, toggles and progress. SaveButton updates relative time every 30 seconds. FormField’s copied feedback lasts two seconds. FeedbackForm clears its local thanks state after 1.5 seconds. Sorting uses dnd-kit transforms and transition values. These timings are observed behavior, not a complete motion specification.
Usage rules
- Keep persistent text for saving, failure, completion and disabled reasons.
- Respect reduced motion when reviewing new transitions, sorting and masks.
- Do not assume a screenshot verifies animation or that dependency defaults ensure equivalent keyboard operation.
- Test time-limited messages with assistive technology and slow interaction; avoid relying on them as the sole proof that a save succeeded.
Examples from the app
Actual TeachKit UI with Thomas McGee’s course content. Session, progress and connection specimens are simulated; no student data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision d8cf23d0a329 · Documentation v0.1