Design the micro-interactions for {{component: e.g. a primary CTA button / form input field / toggle switch / modal}}.
Context:
- Where it appears: {{page or flow context}}
- Brand personality: {{one or two words: e.g. "snappy and confident" / "calm and trustworthy"}}
- Framework: {{React + Tailwind / CSS / Framer Motion / etc., or "describe in CSS terms"}}
For each state, describe the visual behavior and provide the CSS/animation values:
1. **Default** — base appearance
2. **Hover** — what changes, animation type, duration (ms)
3. **Active / pressed** — confirmation the click registered
4. **Focus** — keyboard focus indicator (must be WCAG AA compliant)
5. **Loading** — if the action is async: what happens during the wait
6. **Success** — confirmation feedback and how it resolves
7. **Error** — how failure is communicated (shake? color change? inline message?)
8. **Disabled** — visual treatment and whether it intercepts interaction
For each state: specify `transition`, `duration`, `easing` (cubic-bezier or named value), and the animated properties.
After all states, add one sentence connecting each animation choice to the brand personality — the reasoning, not just the spec.
Skip states that don't apply to this component rather than writing placeholders.interaction-designanimationstateshandoff