Acompanhamento de Movimento Emil Kowalski

Use esta habilidade depois que um artefato de design já existir. O objetivo é fazer a interface parecer viva sem transformá-la em uma demonstração de movimento.

Fluxo de Trabalho

1. Inspecione o HTML atual, componente ou elemento de página selecionado antes de adicionar animação.
2. Escolha o menor conjunto de momentos de movimento que esclareçam o estado ou a hierarquia:
   • revelação de entrada para o conteúdo principal
   • feedback de hover / ativo para controles importantes
   • transição entre estados da UI
   • revelação de rolagem apenas quando ajuda a narrativa
3. Prefira transform e opacity. Evite animar propriedades de layout como top, left, width ou height.
4. Use uma linguagem de movimento em todo o artefato. Não misture easings, durações ou físicas não relacionadas.
5. Adicione fallbacks prefers-reduced-motion para qualquer movimento automático ou vinculado à rolagem.
6. Mantenha a cópia, os dados e a intenção do layout intactos, a menos que o usuário solicite explicitamente um redesenho.

Regras de Movimento

• As transições padrão da UI devem parecer rápidas e úteis: 140-220ms para a maioria dos controles.
• Revelações de página maiores podem ser mais lentas, mas não devem impedir a leitura.
• Evite loops decorativos infinitos, a menos que comuniquem status ou progresso.
• Não adicione cursores personalizados, efeitos de partículas barulhentos ou movimento que compita com o conteúdo.
• Faça o stagger apenas em pequenos grupos. Listas longas com stagger fazem as interfaces parecerem lentas.

Notas de Implementação

• Para HTML simples, keyframes CSS e pequenos observadores JavaScript são suficientes.
• Para código React ou de framework, use a pilha local já presente no repositório.
• Se o GSAP estiver disponível e o movimento precisar de sequenciamento, combine isso com gsap-core, gsap-timeline ou gsap-scrolltrigger.
• Sempre limpe observadores, timers e instâncias de animação.