Animação com as telas reais do seu produto: o passo a passo do animate e os pedidos prontos
O animate é uma habilidade aberta e de graça (licença MIT) para o Claude Code: você passa o link do seu site, ela tira print das suas telas e anima as telas reais num dos 7 estilos prontos (recorte de papel, nanquim, riso, caderno, matemática, pixel e isométrico) ou num visual copiado das suas referências. Antes de animar, ela te mostra o roteiro, o visual e o storyboard pra você aprovar, e entrega o vídeo em MP4 no formato vertical, quadrado ou horizontal. A animação do reel foi feita com ela, usando as telas da automação de DM do Ciro. Atenção: precisa do Claude Code, que vem nos planos pagos do Claude (Pro, Max, Team e Enterprise), e do Node, do Playwright e do ffmpeg instalados no computador.
O que é
O repositório oficial do animate no GitHub, com a galeria dos estilos, as instruções em inglês e um exemplo completo de 60 segundos.
Passo a passo (siga na ordem)
Não pule etapas. Tá escrito do jeito que você só precisa seguir.
- 1
ANTES DE TUDO: o animate roda dentro do Claude Code, que vem nos planos pagos do Claude (Pro, Max, Team e Enterprise). No computador você precisa do Node 18 ou mais novo e do ffmpeg instalado. Nós testamos no Windows em 11/10/2026.
- 2
COMO INSTALAR:
- 3
1. No terminal, instale o navegador que a habilidade usa para gravar: npm i -g playwright && npx playwright install chromium
- 4
2. Abra o Claude Code na pasta do seu projeto e digite: /plugin marketplace add cth9191/animate
- 5
3. Depois digite: /plugin install animate@animate
- 6
4. Peça o vídeo com /animate e a descrição (os pedidos prontos estão logo abaixo). A habilidade faz algumas perguntas e para em três aprovações: o roteiro, o visual e o storyboard. Só depois disso ela anima.
- 7
5. O vídeo fica na pasta pieces/<nome-do-vídeo>/renders/ do seu projeto, em MP4.
- 8
PEDIDOS PRONTOS:
- 9
Mostrar o seu produto com as telas reais: /animate um vídeo de 15 segundos mostrando como funciona o meu produto, com as telas reais do site https://[SEU SITE], no estilo isométrico com fundo escuro, vertical para Reels
- 10
Explicar o seu serviço em etapas: /animate um explicativo de 30 segundos de como funciona o meu serviço de [SERVIÇO], em 4 etapas: [ETAPA 1], [ETAPA 2], [ETAPA 3] e [ETAPA 4], no estilo recorte de papel, vertical e quadrado
- 11
Comercial na batida da sua música: /animate um comercial de 20 segundos do meu produto em https://[SEU SITE], cortado na batida da música [./audio/minha-musica.mp3], vertical
- 12
No visual da sua marca: /animate um vídeo curto sobre [ASSUNTO] no estilo destas referências: [./referencias/], vertical
- 13
DICA: o que deixa o vídeo com cara de produto, e não de desenho genérico, são as telas reais. Mande o link do seu próprio site (a habilidade só deve tirar print do que é seu) e, se quiser, a pasta com o seu logo. Música só se ela for sua ou licenciada.
Tags
Gostou desse prompt?
Me marca quando publicar no Instagram — adoro ver o que vocês criam. Pedidos de prompt? Manda DM com a palavra prompt.
