Gerador de Animação
Crie vídeos animados e motion graphics a partir de uma descrição em linguagem natural. Gera um projeto autônomo Vite + React + Framer Motion que é reproduzido no navegador.
Fluxo de Trabalho
Etapa 1: Interpretar a Solicitação
Divida a descrição do usuário em um plano de cenas:
- 3 a 7 cenas, cada uma com duração de 3 a 5 segundos
- Identifique o arco narrativo: herói/intro, problema, solução, funcionalidades, CTA/outro
- Escolha uma paleta de cores e tipografia que combine com a marca/estilo
- Use
$ARGUMENTSpara a descrição da animação fornecida pelo usuário
Etapa 2: Escolher a Pilha de Animação
Detecte automaticamente a melhor abordagem com base na solicitação:
| Tipo de Solicitação | Pilha | Quando Usar |
|---|---|---|
| Intro de produto, apresentação, marketing | Framer Motion (padrão) | Cenas baseadas em texto, ícones, transições |
| Arte generativa, partículas, padrões | p5.js | Visuais criativos/algorithmicos |
| Objetos 3D, ambientes, renders de produto | Three.js + react-three-fiber | Cenas 3D necessárias |
| Animação simples de texto/logo | Apenas animações CSS | Mínimo, sem dependências pesadas |
Use Framer Motion como padrão, a menos que a solicitação claramente exija outra opção.
Etapa 3: Estruturar o Projeto
- Crie um diretório:
~/animations/[nome-do-projeto]/ - Execute o script de estrutura:
bash ~/.claude/skills/animate/scripts/scaffold.sh [nome-do-projeto] [pilha] - Copie os arquivos de modelo de
~/.claude/skills/animate/assets/template-files/para o projeto
Etapa 4: Gerar os Componentes das Cenas
Leia as referências de predefinições de animação e padrões de cena:
references/animation-presets.md— todas as transições, molas, easing disponíveisreferences/scene-patterns.md— exemplos de padrões de código para cenas
Para cada cena, crie um componente React em client/src/components/video/video_scenes/:
- Use
motion.divcom predefinições de transição de cena (fadeBlur, scaleFade, slideLeft, splitHorizontal, morphExpand, etc.) - Use
containerVariantseitemVariantspara revelações escalonadas de conteúdo - Use unidades
vwpara dimensionamento responsivo (funciona em qualquer resolução) - Use variáveis CSS para temas (
var(--color-accent),var(--color-bg-dark), etc.) - Use ícones Lucide para elementos visuais
- Use a classe
.glass-panelpara cartões com efeito vidro - Use as classes
.text-gradiente.text-gradient-accentpara texto gradiente
Etapa 5: Gerar o VideoTemplate
Crie client/src/components/video/VideoTemplate.tsx:
- Importe todos os componentes de cena
- Defina o objeto
SCENE_DURATIONS(nome da cena -> milissegundos) - Use o hook
useVideoPlayerpara gerenciar o avanço das cenas - Envolva as cenas com
AnimatePresence mode="wait"para transições suaves - Cada cena é renderizada condicionalmente com base no índice
currentScene
Etapa 6: Personalizar o Tema
Atualize client/src/index.css com as cores corretas:
- Se o usuário especificou cores da marca, atualize as variáveis CSS
- Escolha fontes que combinem com o estilo (Space Grotesk para tecnologia, Playfair Display para elegância, etc.)
- Atualize os estilos de gradiente e brilho para combinar com a paleta
Etapa 7: Aprimoramento com Gemini 3.1 Pro (Opcional)
Se a variável de ambiente GEMINI_API_KEY estiver disponível:
- Leia
references/gemini-integration.mdpara detalhes da API - Envie a descrição do usuário para o Gemini 3.1 Pro solicitando:
- Divisão das cenas com descrições e transições sugeridas
- Paleta de cores como variáveis CSS
- Textos/headlines para cada cena
- Gráficos SVG, se aplicável
- Use a saída do Gemini para orientar a geração das cenas
- Se não houver chave de API, pule esta etapa — o Claude toma todas as decisões criativas diretamente
Etapa 8: Compilar e Visualizar
cd ~/animations/[nome-do-projeto]
npm install
npm run dev
Informe ao usuário que a animação está rodando em http://localhost:5173 e abra-a no navegador.
Referência Rápida de Transições de Cena
Escolha transições que combinem com o ritmo da história:
- fadeBlur — Intro/outro suave, revelações oníricas
- scaleFade — Revelações confiantes, showcases de produto
- slideLeft/slideRight — Progressão sequencial, fluxo de linha do tempo
- splitHorizontal/splitVertical — Revelações dramáticas, antes/depois
- morphExpand — Grande final, telas de CTA
- clipCircle — Foco de atenção, efeito spotlight
- perspectiveFlip — Viradas de cartão, mudanças de perspectiva
- wipe — Transições limpas, fluxo direcional
- zoomThrough — Imersivo, momentum para frente
- crossDissolve — Transições suaves e emotivas
Referência Rápida de Animações de Elementos
- popIn — Entrada elástica com escala para ícones/badges
- fadeUp/fadeDown — Revelações sutis de conteúdo
- slideInLeft/slideInRight — Conteúdo direcional
- blurIn — Revelações suaves com desfoque
- elasticScale — Entradas lúdicas e energéticas
- perspectiveRotateIn — Revelações de cartões 3D
- pulse — Chamada de atenção em loop
- float — Efeito flutuante suave
Regras Importantes
- Sempre use unidades
vwpara dimensionamento, para que as animações fiquem boas em qualquer resolução - Mantenha as cenas entre 3 e 5 segundos cada — vídeo total de 15 a 30 segundos
- Use
AnimatePresence mode="wait"para que uma cena saia antes da próxima entrar - Toda cena deve ter um tratamento de fundo (gradiente, imagem ou forma animada)
- Use animações escalonadas para listas e grids (staggerChildren: 0.1-0.2)
- Inclua um estado de carregamento se os assets forem pesados
- O projeto deve ser completamente autocontido — sem dependências externas além de pacotes npm
- NÃO use emojis em nenhum lugar do código ou conteúdo gerado