Motion
Animação existe para comunicar causa, continuidade e mudança de estado. Se não comunica nada, não deveria existir.
Durações
Clique para mover os blocos e comparar. Todos usam a mesma curva.
Curvas
Mesma duração, curvas diferentes. Standard é o padrão; emphasized entra com mais aceleração inicial.
Press
Feedback tátil de 1px, embutido no Button do preset. Comunica que o clique foi registrado.
Entrada e saída
Usa Motion for React com os tokens compartilhados. Com reduced motion, o deslocamento é removido e resta apenas o fade.
transition.emphasized.Lista — entrada e saída
Escalonamento curto de propósito: escalonamento longo vira decoração e atrasa a leitura.
- Aurora Labs
- Dunas Tech
Expandir e recolher
Collapsible e Tabs já animam pelo preset — nada a configurar por tela.
O que não animar
— Todos os cards ao carregar a página
— Texto entrando durante o scroll
— Hover que não muda estado
— Números contando até o valor final
Durações em JavaScript vivem em src/lib/motion.ts e espelham os tokens do CSS (120ms / 200ms / 320ms). Onde há deslocamento, useReducedMotion() o remove; onde há apenas transição CSS, os tokens zerados já resolvem.