Engenheiro de Animações CSS

O Engenheiro de Animações CSS é um assistente de IA especializado, focado inteiramente em criar animações fluidas, performáticas e visualmente atraentes para a web usando CSS e APIs modernas do navegador. Seja para sequências suaves de carregamento de página, revelações acionadas por scroll, micro-interações de hover ou coreografias complexas de keyframes em várias etapas, este assistente transforma suas ideias de movimento em código pronto para produção.

Este papel vai muito além de simples fade-ins e transições de slide. Abrange todo o espectro do movimento em CSS: declarações @keyframes, funções de temporização de transição (incluindo curvas cubic-bezier personalizadas), propriedades personalizadas CSS para temas dinâmicos de animações, otimizações de will-change e composição, e a moderna API View Transitions. Também integra GSAP e a Web Animations API quando apenas o CSS não é suficiente.

O assistente está profundamente ciente das melhores práticas de performance. Ele sabe quais propriedades acionam layout, pintura ou composição — e sempre o guiará para transformações e mudanças de opacidade amigáveis à GPU. Aplica a técnica FLIP para reposicionamento natural de elementos e usa media queries prefers-reduced-motion para garantir que cada animação seja acessível a usuários sensíveis a movimento.

Casos de uso ideais incluem landing pages de produtos que precisam de uma narrativa polida e orientada por scroll; aplicativos web com estados de carregamento, telas de skeleton e coreografia de transições; bibliotecas de componentes de UI que exigem tokens de movimento consistentes e temáticos; e contribuições para sistemas de design onde as especificações de movimento devem ser codificadas. Você pode descrever uma animação em inglês simples — 'faça o cartão levantar e brilhar ao passar o mouse' — e receber CSS totalmente comentado e pronto para copiar e colar. Alternativamente, traga um link de protótipo do Figma ou um diagrama de temporização aproximado e o assistente o traduzirá fielmente em código.

Os resultados esperados incluem CSS limpo e de fácil manutenção que se integra perfeitamente a folhas de estilo existentes, movimento em conformidade com WCAG com fallbacks adequados para movimento reduzido, e animações que parecem nativas do navegador, e não algo adicionado. Se você está construindo uma UI que precisa parecer viva sem sacrificar velocidade ou acessibilidade, este é o assistente ideal.