O que Animação faz?
O movimento em uma interface explica o que aconteceu: de onde um elemento veio, para onde foi, se um clique foi registrado. Tudo que não faz isso é decoração, e decoração tem seu próprio orçamento pequeno. Esta skill ajuda a gastar esse orçamento com precisão: sem ela, o modelo anima tudo com o mesmo fade-up.
A skill é autocontida. Se ui-ux (regras de estilo e interface) e front (código e stack) estiverem instalados junto com ela, eles se complementam.
Três perguntas primeiro
- Para que serve este movimento? Feedback de uma ação, uma ligação entre estados, chamar atenção para uma coisa importante, o caráter da marca. Se não houver resposta, não anime.
- Com que frequência a pessoa verá? O orçamento depende da resposta (próxima seção).
- O que já existe no projeto? Veja as durações, curvas e biblioteca de animação em uso e continue no mesmo espírito. Uma nova biblioteca por causa de um único efeito é quase sempre um erro.
Quanta animação é apropriada
A regra principal: quanto mais frequente a ação, menos animação. O que encanta na primeira visualização irrita na centésima.
| Com que frequência o usuário vê | O que fazer |
|---|---|
| Centenas de vezes ao dia (atalhos de teclado, paleta de comandos, troca de abas) | Sem animação |
| Dezenas de vezes ao dia (menus, tooltips, hover) | Muito rápido, até 150 ms, ou sem animação |
| Ocasionalmente (diálogo, painel lateral, notificação) | Uma transição normal de 200–300 ms |
| Raramente ou uma vez (onboarding, tela de sucesso, a primeira tela de uma landing page) | Pode ser expressivo |
Nível por tipo de projeto:
- Aplicativo (usado todo dia): contido. Estados de controle, camadas entrando e saindo, mudanças suaves de layout. Tudo abaixo de 300 ms. Nada se move sem uma ação do usuário.
- Vitrine (landing page, site, promoção): perceptível. Um momento orquestrado na primeira tela, blocos aparecendo ao scroll, detalhes vivos no hover. O resto é calmo.
Um momento expressivo por tela, silêncio em todo o resto. Animação em tudo ao mesmo tempo é tão sinal de template quanto não ter nenhuma.
Não anime: ações acionadas por teclado, troca de tema, menus de contexto, qualquer coisa que o usuário faça muitas vezes seguidas.
Gosto padrão
O dono da skill pode editar esta seção para adequar às suas próprias preferências. As palavras do usuário na solicitação atual têm precedência.
Bem-vindo em superfícies de vitrine:
- Revelar ao scroll — seções e objetos grandes surgem suavemente quando rolados até eles. Uma vez, sem repetições.
- Cenas vinculadas ao scroll — uma seção fixa onde o scroll impulsiona a animação e explica algo sobre o produto. Uma ou duas por página; o scroll em si permanece normal, sua velocidade e direção nunca são sequestradas.
Não use a menos que explicitamente solicitado:
- Brilho e bordas degradê — contornos cintilantes, brilho neon, fundos degradês animados. A ênfase vem do movimento e da tipografia, não da luz.
Bibliotecas: CSS primeiro; quando não for suficiente em React — Motion; GSAP apenas para cenas complexas de scroll. Detalhes em references/tools.md.
**O caráter do movimento é