Foundations
Motion and feedback timing
Use short transitions to explain state without delaying the task.
On this page
Source behavior
| Surface | Timing or response |
|---|---|
| Theme thumb | 150ms transform |
| Course progress | 300ms width transition |
| Section selector | 100ms leaving transition |
| Global app reduced motion | Transitions and animations reduced to .01ms; smooth scrolling disabled |
| Marketing feature image | 700ms opacity reveal after load |
| Marketing FAQ | 300ms max-height animation |
| Feedback and saved text | Follow actual response/state; a delay alone does not establish success |
Capture and interaction rules
Wait for the intended control state and loaded fonts. For saving examples, an artificial delay holds the real pending UI; the documentation labels that simulation. Marketing has smooth scrolling and transitions without the app’s global reduced-motion override, so parity there remains a finding.
Source references
| File | Responsibility |
|---|---|
| src/app/globals.css | App transitions and reduced-motion rule |
| marketing/src/components/FeatureBlock.tsx | Image reveal |
| marketing/src/components/FAQ.tsx | Disclosure animation |
Interface examples
Native TeachKit interfaces with fictional course, account, and learner records. Service responses and media are isolated demonstrations; no customer data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-22 · Revision 903bbf05ca9d · Documentation v2.0.0