Interaction Design
Tokenize state feedback, microinteractions, and motion behavior.
Key takeaways
- Interaction quality lives in the details, so hover, focus, pressed, loading, disabled, error, and success states belong in the component contract.
- Motion should be tokenized for duration and easing so agents reuse named values instead of arbitrary timings.
- Hover, focus, and loading states must never change component dimensions, and motion must clarify state rather than decorate.
- Respect reduced-motion preferences and never animate critical information in a way that hides it.
- Verify with a keyboard-only pass, a reduced-motion pass, loading/disabled screenshots, and a no-layout-shift check on hover and focus.
Interaction quality is determined by details: focus, hover, pressed, loading, disabled, error, success, and transition states. Agents need these states defined as part of the component contract.
Interaction State Matrix
| State | Required behavior |
|---|---|
| Hover | Visual affordance without layout shift. |
| Focus | Visible focus ring and keyboard support. |
| Pressed | Immediate feedback for action controls. |
| Loading | Prevent duplicate work and preserve layout. |
| Disabled | Communicate unavailable action and reason when needed. |
| Error | Tie visual message to accessible announcement. |
| Success | Confirm completion without blocking flow. |
Motion Tokens
export const motion = {
duration: {
instant: '80ms',
fast: '150ms',
normal: '220ms',
},
easing: {
standard: 'cubic-bezier(0.2, 0, 0, 1)',
emphasized: 'cubic-bezier(0.2, 0, 0, 1.2)',
},
}Agent Rules
- Motion must clarify state, not decorate the page.
- Hover, focus, and loading states cannot change component dimensions.
- Respect reduced-motion preferences.
- Do not animate critical information in a way that hides it.
- Keep complex animation inside tested primitives.
Verification
- Keyboard-only interaction pass.
- Reduced-motion pass.
- Loading and disabled state screenshots.
- No layout shift on hover or focus.