Animação Claude: como fazer animações com Claude e enviá-las para seu aplicativo
Como fazer animação com Claude: Claude Design, Claude Motion, artefatos e Claude Code, o que cada um produz e como transformar uma animação feita em Claude em um aplicativo real.
Ponto principal
Você pode fazer animação com Claude de três maneiras: Claude Design ou Claude Motion para saída visual, artefatos Claude para demonstrações HTML, CSS e JavaScript e Claude Code escrevendo código de animação ou conduzindo outras ferramentas sobre MCP. Cada um fornece um design, um arquivo de vídeo ou código que ainda precisa ser colocado em seu produto. Uma animação que precisa ser executada dentro de um aplicativo real precisa de um formato que o aplicativo possa executar, portanto, a maior parte dos movimentos feitos pelo Claude são entregues a um tempo de execução antes de serem enviados.
Sobre este guia
ExodeUI não é afiliado à Antrópico. Claude é uma marca registrada da Antrópica. Este guia descreve o que o Claude pode produzir para movimento, com base na documentação da própria Anthropic, e o que é necessário para colocar esse movimento em um aplicativo enviado.
Maneiras de fazer animações com Claude
Claude pode produzir movimento em algumas formas diferentes e não são intercambiáveis. Qual deles você usa decide o que você ganha e quanto trabalho resta.
- Claude Design: converse com Claude para obter designs e protótipos interativos em uma tela. Ele está incluído nos planos Free, Pro, Max, Team e Enterprise, e o site independente em claude.ai/design fecha em 14 de dezembro de 2026.
- Claude Motion: transforma seu prompt e arquivos em uma curta animação, construída como código que é reproduzido como um vídeo e exportado como MP4. Está em beta nos planos Team e Enterprise e não usa modelo de vídeo, portanto não pode fazer imagens ou pessoas realistas.
- Artefatos Claude: HTML, CSS e JavaScript executáveis que são visualizados dentro de uma conversa, o que é rápido para uma demonstração de movimento.
- Claude Code: escreve código de animação em seu repositório ou edita ferramentas em MCP, incluindo o servidor ExodeUI MCP.
Solicitando dicas que produzem melhor movimento
Avisos vagos geram movimentos vagos. Claude responde aos detalhes que um motion designer solicitaria de qualquer maneira: a propriedade, a quantidade, o tempo, o gatilho e os estados. Nomeie-os em vez de descrever um sentimento.
Nomeie a flexibilização e a duração
Diga "primavera com um salto leve" ou "atenuação ao longo de 200 ms" em vez de "suave". Um valor que o modelo pode usar é melhor do que um adjetivo.
Nomeie o gatilho
Diga o que inicia: "ao tocar", "ao passar o mouse" ou "quando a lista terminar de carregar". O movimento que possui um gatilho pode ser conectado a um evento real posteriormente.
Nomeie os estados
Liste-os, por exemplo, "idle, pressionado, carregando, sucesso, erro", para obter uma pequena máquina de estado em vez de uma única animação.
Nomeie a plataforma e os limites
Diga se a saída é React, SwiftUI ou uma demonstração da web e o que ela não deve fazer, por exemplo "apenas animar transformação e opacidade".
Por que uma animação de demonstração não está pronta para produção
Claude pode produzir código de animação que parece correto na visualização e ainda precisa de trabalho antes de ser enviado. A lacuna não é a qualidade, é a forma do resultado.
- Geralmente é um código único para uma tela, não um componente reutilizável
- Muitas vezes tem um único estado e nenhuma lógica para carregamento, erro, interações desabilitadas ou interrompidas
- Ele foi escrito para uma plataforma, portanto, uma versão React não será executada no iOS sem ser reescrita
- O tempo e a flexibilização estão dentro do código, de modo que um designer não pode alterá-los sem um desenvolvedor
- Qualquer coisa destinada a ser reutilizada precisa de um formato de arquivo que o aplicativo possa executar, não de um snippet colado em um componente
Envio de animações feitas por Claude com o servidor MCP de ExodeUI
ExodeUI é um navegador e ferramenta de desktop para interface de usuário interativa e animação. Uma animação reside em um arquivo .exode aberto que contém layout, linha do tempo, máquinas de estado, física de primavera e lógica. Os pacotes de tempo de execução reproduzem esse arquivo em React, Vue, Svelte, Angular, Solid, React Native, SwiftUI e Flutter, portanto, a mesma animação é executada dentro do aplicativo em vez de ser reconstruída para cada plataforma. ExodeUI expõe um servidor MCP com mais de 100 ferramentas (construir, animar, adicionar lógica e física, sincronizar com o editor ao vivo, exportar), para que Claude Code, Cursor, OpenCode e outros clientes MCP possam criar e editar o arquivo a partir de prompts em linguagem simples. A configuração reside no produto, não em um script, portanto não há comando para copiar: ative o MCP nas configurações do ExodeUI e conecte seu cliente da mesma forma que você conecta qualquer servidor MCP. Fazemos ExodeUI, então verifique também as alternativas.
1. Ligue MCP em ExodeUI
Nas configurações ExodeUI, habilite o servidor MCP. Ele publica as ferramentas que um cliente de codificação de IA usa para criar e editar o arquivo.
2. Conecte seu cliente
Aponte Claude Code, Cursor, OpenCode ou qualquer cliente MCP no servidor ExodeUI, da mesma forma que você o conecta a outros servidores MCP.
3. Descreva o movimento
Peça a animação em linguagem simples. O agente edita o arquivo .exode e a alteração aparece no editor ExodeUI.
4. Envie o mesmo arquivo
Renderize o arquivo .exode por meio do tempo de execução ExodeUI em React, SwiftUI, Flutter e mais, e direcione suas entradas e estados a partir de seu código.
Claude Design vs Claude Code + ExodeUI
Ambas as rotas começam com um prompt e terminam com movimento em seu produto. Eles diferem no que acontece entre eles: Claude Design mantém o trabalho em uma tela de design, enquanto Claude Code mais ExodeUI o mantém em um arquivo que é executado.
O que você ganha
Claude Design: um design ou protótipo clicável, além de um pacote de transferência para Claude Code. Claude Code + ExodeUI: um arquivo .exode que é reproduzido como componente.
Onde a animação é executada
Claude Design: na tela de design e em protótipos compartilhados. Claude Code + ExodeUI: no aplicativo, na web, iOS e Android, reagindo a entradas e dados.
Edição após transferência
Claude Design: altere o design e entregue novamente. Claude Code + ExodeUI: um designer edita o mesmo arquivo que o aplicativo executa, sem reconstrução.
Onde Claude Design vence
Explorar diversas direções visuais, apresentar às partes interessadas e produzir trabalhos estáticos ou protótipos em qualquer plano, incluindo o plano Gratuito.
Onde ExodeUI vence
Movimento que precisa ser enviado, com estados, física e entrada, reutilizado em plataformas a partir de um único arquivo.
Trecho de implementação em produção
import { ExodeUICanvas } from 'exodeui';
// Claude Code builds and edits /fluid_card.bexode through the ExodeUI
// MCP server. Your code passes inputs in and hears events back.
export function FluidCard() {
return (
<ExodeUICanvas
src="/fluid_card.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}Princípios-chave para lembrar
- Claude Design e Claude Motion produzem trabalho visual e Claude Code produz código, mas nenhum deles é um tempo de execução
- Uma animação só é enviada quando tem um formato que o aplicativo pode executar e está conectada a estados reais e entradas
- Nomeie a flexibilização, o gatilho e os estados em seu prompt para obter o movimento que você realmente pode usar
- O servidor MCP do ExodeUI permite que Claude Code crie e edite um arquivo .exode que roda em React, SwiftUI, Flutter e mais