Aula 6: Movimento e Microinterações — Dosagem e Acessibilidade
Você adicionou um efeito de salto (bounce) de 600ms a cada botão, e parecia legal — até um usuário com sensibilidade a movimento relatar que a tela o deixava tonto. Esta aula ensina você a trabalhar com movimento baseado em tokens: transições sutis, microinterações com intenção, e o respeito a `pref
Movimento é como tempero: um pouco melhora o prato, demais o arruína, e algumas pessoas são sensíveis. Para quem pediu menos movimento, você não serve um prato pior — serve uma versão mais calma: troca o tempero forte por um suave, sem perder o sabor. A animação funciona do mesmo jeito: você remove o movimento grande, mas mantém o feedback.
- transition token
- Um valor fixo de duração (duration) e easing dentro de um conjunto reduzido — por exemplo `duration-200 ease-out` — para que todas as transições da interface pareçam uniformes, e não aleatórias.
- micro-interaction
- Um pequeno feedback visual para uma ação do usuário — uma leve mudança no hover, no clique ou no foco — que confirma que algo aconteceu, sem distrair.
- prefers-reduced-motion
- Uma preferência do sistema em que o usuário pede para reduzir o movimento (geralmente por sensibilidade vestibular). 'Reduzir' não é 'remover': uma interface acessível elimina o movimento grande, mas mantém o feedback — por exemplo, uma mudança de estado instantânea em vez de uma animação.
- motion-reduce variant
- A variante do Tailwind que aplica classes somente quando o usuário pediu para reduzir o movimento — por exemplo, `motion-reduce:transition-none`, que remove uma transição para ele.
