Anime JS skill

O Claude anima seu site com Anime.js do jeito certo: movimento que não engasga, sequências bem amarradas e respeito a quem prefere menos animação.

por mindrally

instalações: 736
estrelas no GitHub: 286
No skills.sh desde: janeiro de 2026
Licença: Apache-2.0

Atualizada no GitHub em 8 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

mindrally
anime-js
O Claude anima seu site com Anime.js do jeito certo: movimento que não engasga, sequências bem amarradas e respeito a quem prefere menos animação.Auditada736 instalações, grátis

O que ela faz

A skill é um conjunto de boas práticas pra animar páginas com a biblioteca Anime.js. A regra principal é animar com transform (mover, girar, mudar a escala) e opacidade, que a placa de vídeo processa, em vez de mexer em posição, largura ou altura, que obrigam o navegador a recalcular a página.

Ela cobre timelines com sobreposição entre etapas e controle de tocar, pausar, voltar e pular, efeito em cascata (stagger) a partir do centro ou em grade, curvas de aceleração prontas e personalizadas, e animação de SVG: seguir um caminho, desenhar linhas e transformar uma forma em outra.

Também mostra como usar o Anime.js no React, limpando a animação quando o componente é desmontado, como seguir o mouse com o Animatable, como usar a Web Animations API do navegador e como zerar a animação pra quem ativou a opção de reduzir movimento.

Nas palavras de quem fez

Expert guidelines for building performant animations with Anime.js animation library…

mindrally, no SKILL.md

Quando usar

Animar a entrada dos blocos de uma página de vendas
Fazer um logo em SVG se desenhar na tela
Montar uma sequência de animação no topo do site
Corrigir uma animação que trava no celular

Depois de instalar, é só pedir assim

Usa Anime.js pra fazer os cards de depoimentos entrarem em cascata de baixo pra cima, respeitando quem prefere menos movimento
Faz o logo SVG se desenhar linha por linha quando a página abre
Essa animação do meu componente React engasga no celular, refaz com Anime.js usando transform

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

Gen Agent Trust HubPassou
SocketPassou
SnykPassou

Perguntas

Como instalar a Anime JS no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Anime JS, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

O que a anime-js skill precisa pra funcionar?

Só do pacote animejs no projeto (npm install animejs). A skill é texto de orientação: não pede chave de API, conta nem programa extra.

Roda no Codex e no Antigravity?

Roda: são instruções e exemplos de código JavaScript, que qualquer agente que escreve código consegue seguir.

Funciona com a versão 4 do Anime.js?

Em parte. Quase todos os exemplos da skill usam a sintaxe da versão 3 (anime({ targets }), anime.timeline), e o npm install animejs instala hoje a versão 4, que trocou essas funções por animate e createTimeline. Peça pro Claude adaptar o código pra versão do seu projeto ou fixar a 3 com npm install animejs@3.

Levar essa skill

1x anime-jsR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/mindrally/skills

Aprenda a usar

Claude Design: como usar, até no plano grátis
O Claude Design cria tela de site, protótipo e slide conversando, e agora vem até no plano grátis. Veja onde abrir, como usar e como levar pro Claude Code.