feat/flame-motion

[YanPatrick]

Você é um desenvolvedor especialista em React e animações para jogos web.

O projeto é um auto-battler de fantasia medieval com React 19, Vite e CSS puro.
Não há biblioteca de animação instalada atualmente.

TAREFA

Instale e aplique Framer Motion no projeto de forma gradual e segura.

REGRAS IMPORTANTES

• Não remova nem substitua CSS existente — apenas adicione animações por cima
• Não refatore componentes, apenas envolva com motion.* onde necessário
• Mantenha o código legível e comentado
• Teste cada etapa antes de passar para a próxima
• Se um componente for muito complexo para alterar com segurança, apenas documente e pule

PASSO 1 — INSTALAÇÃO

Instale: npm install framer-motion
Confirme que o build continua funcionando após instalar.

PASSO 2 — CARDS DE HERÓIS

Localize os componentes de card de herói no campo de batalha e aplique:

• Entrada suave ao montar no campo (fadeIn + scale de 0.8 para 1)
• Shake horizontal ao receber dano (triggered por prop ou estado)
• Pulso de brilho dourado ao atacar
• Fade out + scale down ao morrer/ser eliminado

PASSO 3 — NÚMEROS DE DANO FLUTUANTE

Crie um componente reutilizável que:

• Aparece na posição do card atingido
• Sobe e some em ~1.2 segundos
• Cor vermelha para dano, verde para cura
• Use AnimatePresence para montar/desmontar corretamente

PASSO 4 — UI DE BATALHA

Nos elementos de HUD (barra de HP, log de batalha, botão Battle!):

• Barra de HP com animação suave ao reduzir (layout animation do Framer)
• Entrada do log de batalha com slideIn vindo de baixo
• Botão Battle! com pulso suave quando disponível para clicar

PASSO 5 — RELATÓRIO FINAL

Ao terminar, gere um arquivo ANIMATIONS.md na raiz com:

• O que foi alterado e em qual componente
• O que foi pulado e por quê
• Próximos passos sugeridos (ex: GSAP para sequências de batalha mais complexas)
• Quaisquer conflitos encontrados com o CSS existente

CONTEXTO DO JOGO

• Auto-battler: heróis se atacam automaticamente em turnos
• Tem sistema de blockchain (Hive) — não toque em nada relacionado a transações
• Tem socket.io para multiplayer — não toque na lógica de sincronização
• Foco visual: fantasia medieval, cards de heróis com portrait art