O que é reanimate?
reanimate é um skill de agente para copiar movimento. Você aponta o Claude Code para uma página ao vivo, uma gravação de tela, um mp4, um gif ou um arquivo Lottie e informa o elemento e o arquivo de destino; o skill grava a referência num Chromium headless com viewport e taxa de quadros fixos, escreve uma especificação com uma linha por elemento e propriedade (início, duração, de e para, easing, escalonamento), constrói a animação com o que o projeto já usa (CSS, Framer Motion, GSAP ou three.js) e depois grava a cópia do mesmo jeito e compara tempo, easing e pixels. Repete, em geral de 2 a 5 rodadas, e lista o que ainda não bate depois de 5.
Para canvas, WebGL e WebGPU, ele rastreia as chamadas de GPU em vez de ler pixels: código dos shaders, uniforms, passes de renderização, texturas e o grafo de cena de three.js, Pixi, PlayCanvas, Babylon ou OGL, num relógio virtual com Math.random semeado para que duas capturas saiam idênticas. A fidelidade padrão é só de movimento (tempo dentro de 80 ms, mesma família de easing e mesma ordem); pedir pixel-perfect acrescenta fontes, cores, espaçamento e uma diferença média de pixels de 2 % ou menos.
O repositório é de Niaz Morshed, com licença MIT, criado em 29 de outubro de 2026 e alterado pela última vez em 31 de outubro. Tem cerca de 1.570 estrelas, 137 forks, um único colaborador, nenhuma release marcada e um site com 14 exemplos clonados de Vercel, Stripe, Clerk, Resend e outros, cada um medido contra o original.
reanimate vale a pena?
A contribuição do reanimate é um ciclo de feedback, não um prompt. Um agente que recebe a tarefa de reconstruir uma animação a partir de um link faz uma passada e declara vitória, porque não tem como ver o tempo. Este skill lhe dá olhos: um script de captura que registra quadros, keyframes declarados de CSS e Web Animations, estilos calculados e a posição dos elementos em cada quadro, e um script de comparação que relata erro de tempo, diferença de pixels e folhas de diferença para a referência e a cópia. O SKILL.md manda o Claude ler cada folha de contato e continuar iterando contra critérios de aprovação fixos, em vez de parar em "parece certo". Quando a fonte declara os próprios keyframes, o skill tira deles as durações e os easings exatos em vez de estimá-los.
As evidências publicadas são incomumente concretas. No clone da barra de ferramentas da Vercel, 417 de 417 quadros batem; as rotações do cubo do hero da Resend são exatas ao longo de 25 s com 0,11 % de pixels diferentes; o cartão inclinável da Stripe assenta dentro de 0,4 px, e sua curva de inclinação em WebGL bate dentro de 33 ms. São execuções do próprio autor em 14 exemplos, a maioria de 30 a 90 minutos, não um benchmark independente, mas o método é reproduzível e os artefatos de cada rodada ficam em .reanimate/ no seu projeto como prova.
É uma ferramenta mais estreita e mais rigorosa que os skills de movimento ao redor. motionmaxxing e bang-motion ajudam um agente a criar movimento novo com bom gosto; reanimate só copia movimento existente, e seu valor está em conseguir mostrar o quão perto a cópia chegou.
O porém: tem duas semanas, um colaborador e nenhuma release, e o próprio propósito atrai problemas. Capturar significa rodar páginas arbitrárias de terceiros num navegador headless local, e uma issue aberta em 10 de novembro de 2026 mostra que uma página pode nomear arquivos de rastreamento com ../ para gravar fora da pasta de captura; o patch sugerido não foi incorporado. Páginas atrás de login, YouTube e Loom não podem ser capturados diretamente, o Windows não foi testado, a primeira execução baixa cerca de 250 MB e a GPU por software padrão é lenta. O README também lembra que fontes, imagens e código copiados de outro site continuam pertencendo aos donos.
Nossa opinião: reanimate é o instrumento certo para um desenvolvedor front-end encarregado de fazer o novo hero parecer exatamente uma referência, e o errado para criar movimento do zero. Rode-o apenas em sites confiáveis, revise o diff que ele escreve e reserve uma hora de agente por animação.
Onde ele se destaca
Um desenvolvedor front-end de uma startup que está redesenhando o site de marketing
Reconstruir o hover de um card a partir de uma referência de design nos nossos componentes Framer Motion
Rode /reanimate com a URL de referência e o arquivo de destino; o skill lê os keyframes declarados, escreve o movimento em Framer Motion e para quando o tempo fica dentro de 80 ms. Conte com duas a cinco rodadas de captura.
Um desenvolvedor criativo portando um hero WebGL que ele tem licença para reutilizar
Recuperar os shaders, uniforms e o tempo de uma cena three.js
Capture com --clock virtual --gl --assets para extrair o código dos shaders, os uniforms constantes e os canais animados, e compare o clone canal a canal com gl.ts compare.
Uma engenheira de design system transformando em código a gravação de tela de um motion designer
Igualar quadro a quadro um loader de 2 segundos de um mp4
Passe o arquivo e o intervalo de tempo; frames.ts extrai e recorta os quadros, o skill constrói o loader em CSS e compara a gravação da cópia com o vídeo até a diferença ficar abaixo da meta.
Antes de decidir
- Configuração
- npx skills add NiazMorshed2007/reanimate -g (adicione -a claude-code para pular a pergunta do agente) e depois /reanimate <o quê> de <onde>, em <arquivo>. Precisa do Bun 1.1 ou mais recente no macOS ou Linux; a primeira execução instala um ffmpeg estático e o Chromium do Playwright, cerca de 250 MB.
- Integrações
- Feito e testado para o Claude Code; outros agentes que leem SKILL.md podem carregá-lo sem testes. Scripts Bun para captura, quadros, comparação, ajuste de easing, folhas de contato e rastros de GPU; conecta-se a three.js, Pixi, PlayCanvas, Babylon e OGL.
- Dados e privacidade
- Roda localmente, sem chaves de API nem telemetria descrita; capturas, quadros e folhas de diferença vão para .reanimate/<name>/ no seu projeto. Ele carrega páginas de terceiros num Chromium headless, e uma issue aberta relata que ids de rastreamento controlados pela página podem gravar arquivos fora da pasta de captura. MIT; fontes, imagens e código copiados continuam com os direitos dos donos.
- Custo em escala
- Gratuito. O custo real é o tempo de agente: os exemplos do autor levaram, na maioria, de 30 a 90 minutos cada no Claude Code, então o uso regular pede um plano do Claude ou um orçamento de API generosos. O modo de GPU por hardware é mais rápido que o SwiftShader padrão.
- Limites
- Sem páginas com login, YouTube ou Loom a não ser por gravação de tela; molas são ajustadas, não lidas; os relógios dos workers correm em tempo real; canvas dentro de iframes precisam da URL do iframe; as correções para Windows estão em pull requests abertos.
O que é bom
- Mede a cópia contra o original a cada rodada em vez de chutar
- Lê keyframes e easings exatos quando a página os declara
- Rastreia cenas WebGL, WebGPU e three.js num relógio virtual determinístico
- Constrói na stack que o projeto já usa: CSS, Framer Motion, GSAP ou three.js
- Sem chaves de API; licença MIT
O que não é
- Um colaborador, nenhuma release, duas semanas de vida
- Issue aberta de path traversal ao capturar páginas não confiáveis
- Não captura diretamente páginas com login, YouTube ou Loom
- Windows não testado; cerca de 250 MB de downloads na primeira execução
- Execuções longas, de 30 a 90 minutos, consomem tokens do agente
Ideal para
Desenvolvedores front-end que usam o Claude Code e precisam reproduzir de perto um hover, uma entrada ou um efeito WebGL específico, com prova de quão perto a cópia chegou.
Alternativas ao reanimate
reanimate: perguntas frequentes
- reanimate vale a pena?
- reanimate resolve o verdadeiro motivo de os agentes errarem ao clonar animações (eles não enxergam movimento) fazendo o agente medir a cópia contra o original até os números baterem. Damos nota 3.8 de 5.
- Quanto custa reanimate?
- Gratuito (MIT). Sem chaves de API; o custo é o uso do Claude Code em execuções que muitas vezes duram de 30 a 90 minutos.
- Quais são as desvantagens de reanimate?
- Um colaborador, nenhuma release, duas semanas de vida; issue aberta de path traversal ao capturar páginas não confiáveis; não captura diretamente páginas com login, YouTube ou Loom; windows não testado; cerca de 250 MB de downloads na primeira execução; execuções longas, de 30 a 90 minutos, consomem tokens do agente.
- Para quem reanimate é indicado?
- Desenvolvedores front-end que usam o Claude Code e precisam reproduzir de perto um hover, uma entrada ou um efeito WebGL específico, com prova de quão perto a cópia chegou.
- Quanto custa reanimate para uma equipe ou em produção?
- Gratuito. O custo real é o tempo de agente: os exemplos do autor levaram, na maioria, de 30 a 90 minutos cada no Claude Code, então o uso regular pede um plano do Claude ou um orçamento de API generosos. O modo de GPU por hardware é mais rápido que o SwiftShader padrão.
- reanimate é seguro para dados da empresa?
- Roda localmente, sem chaves de API nem telemetria descrita; capturas, quadros e folhas de diferença vão para .reanimate/<name>/ no seu projeto. Ele carrega páginas de terceiros num Chromium headless, e uma issue aberta relata que ids de rastreamento controlados pela página podem gravar arquivos fora da pasta de captura. MIT; fontes, imagens e código copiados continuam com os direitos dos donos.
- Quais são as melhores alternativas ao reanimate?
- As alternativas mais próximas que analisamos são motionmaxxing, Bang Motion e Playwright Test Agents.
Respostas verificadas em 11 de nov. de 2026.