Fundamentos

Movimento

Animação serve para dar retorno, não para chamar atenção. Nada passa de 300ms.

Token	Valor	Uso
`transition-fast`	`100ms ease-out`	Hovers, toggles, micro-feedback.
`transition-base`	`200ms ease-in-out`	Expandir/recolher, troca de aba, hover de card.
`transition-slow`	`300ms ease-in-out`	Abrir/fechar modal e drawer.
`transition-enter`	`200ms ease-out`	Elemento entrando: fade-in com slide-up de 8px.
`transition-exit`	`150ms ease-in`	Elemento saindo: fade-out.

Prefira transição CSS. Animação com biblioteca só em troca de página e reordenação de lista.
Entrada: fade com subida de 8px em 200ms. Saída: só fade, em 150ms.
Respeite prefers-reduced-motion: com ele ativo, troque deslocamentos por fade ou remova a animação.