Claude Code
com o Claudinho
O Claude no terminal: o que o Vagner usa nos vídeos.
Animejs skill
As animações de Anime.js entram no seu vídeo HyperFrames e saem iguais em toda renderização, porque quem manda no tempo é o HyperFrames.
- instalações
- 70 mil
- estrelas no GitHub
- 72,3 mil
- No skills.sh desde
- abril de 2026
- Licença
- Apache-2.0
Atualizada no GitHub em 26 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.
O que ela faz
O HyperFrames monta vídeo a partir de uma composição em HTML, e esta skill ensina o Claude a pôr animações de Anime.js nela do jeito que o HyperFrames consegue controlar. A regra é simples: a composição cria a animação e o HyperFrames manda no relógio, levando cada uma ao ponto exato do vídeo.
Na prática, o Claude cria cada animação ou timeline logo na abertura da composição, desliga o autoplay, registra tudo em window.__hfAnime e usa duração e repetição com fim. Funciona com o Anime.js por script ou por módulo, com animação simples, timeline em sequência e várias microanimações juntas.
Também adapta exemplos de Anime.js achados por aí pro formato do HyperFrames e, no fim, roda npx hyperframes lint e npx hyperframes validate pra conferir a composição. Pra cenas mais complexas, a própria skill recomenda GSAP, o caminho principal do HyperFrames.
Nas palavras de quem fez
Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on…
Quando usar
- Animar um ícone ou um detalhe em SVG num vídeo do HyperFrames
- Aproveitar num vídeo uma animação de Anime.js que você já tem
- Corrigir animação que sai diferente a cada renderização
- Colocar várias microanimações independentes na mesma cena
Depois de instalar, é só pedir assim
- Na composição do HyperFrames, faz o título subir e a linha de destaque crescer com Anime.js
- Adapta essa animação de Anime.js que eu achei no CodePen pra funcionar no HyperFrames
- Confere a composição com o lint e o validate depois de colocar as animações
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
- SnykAlerta
Perguntas
Como instalar a Animejs 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 Animejs, 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.
Ainda dá pra instalar essa skill?
Em junho de 2026 a HeyGen tirou a skill animejs do repositório do HyperFrames. As regras principais (autoplay desligado, registro em window.__hfAnime) agora vêm resumidas no guia de runtimes da skill hyperframes, que é a que se instala hoje.
O que ela precisa pra funcionar?
Um projeto do HyperFrames, que roda com Node.js (a conferência usa npx hyperframes lint e validate), e o Anime.js carregado na composição. Não pede chave de API e roda no Codex e no Antigravity, desde que o agente consiga rodar os comandos do HyperFrames no terminal.
Serve pra animar site?
Não. As regras dela (autoplay desligado, registro em window.__hfAnime, duração com fim) existem pra o HyperFrames controlar o tempo do vídeo. Ela é feita só pra composições do HyperFrames.
Levar essa skill
1x animejsR$ 0,00
TotalR$ 0,00
Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/heygen-com/hyperframes
Aprenda a usar
- Social media: o que faz, curso e o pacote com IA
Social media cuida das redes sociais de empresas. Veja o que faz, qual curso vale a pena e como sair do post barato para pacotes de R$ 2.500 a R$ 6.000.
Na mesma prateleira
Ver as 1.296 skills do corredorAnthropic
algorithmic-
Você descreve uma ideia e o Claude entrega uma arte que muda a cada semente, com controles pra ajustar e baixar em PNG.OficialAuditada89,5 mil instalações, grátisart prime-skills
gpt-
O Claude cria e edita imagens de produto, anúncio e placa com o texto que você pediu escrito certo, sem precisar de chave da OpenAI.Auditada84,2 mil instalações, grátisimage- 2 slack-
Você descreve a animação e o Claude desenha quadro a quadro, monta o GIF e confere se ele cabe no Slack como emoji ou como mensagem.OficialAuditada75,6 mil instalações, grátisgif- creator HeyGen
tailwind
Vídeos feitos em HTML no HyperFrames com classes do Tailwind v4 que aparecem iguais na prévia e no MP4 final, quadro a quadro.Auditada70,6 mil instalações, grátislottie
Logos animados e ícones exportados do After Effects entram no seu vídeo HyperFrames sincronizados com a cena, quadro a quadro.69,1 mil instalações, grátisjimliu
baoyu-
O Claude lê seu conteúdo, sugere o formato e o estilo do infográfico e gera a imagem em PNG, com os números e as citações do original.32,8 mil instalações, grátisinfographic baoyu-
Você entrega um tema, um texto ou uma biografia e recebe um quadrinho original, com roteiro de quadros, páginas em imagem e o PDF montado.29,9 mil instalações, grátiscomic baoyu-
Você traduz um artigo ou documento inteiro e recebe um texto que parece escrito na língua de destino, com os seus termos sempre iguais.25,6 mil instalações, grátistranslate
Mais da loja HeyGen
Ver a loja HeyGenhyperframes
Você pede o vídeo em português, o Claude monta as cenas em HTML, mostra a prévia pra você ajustar e entrega o MP4 renderizado na sua máquina.Auditada1,2 milhão de instalações, grátishyperframes-
Cria, confere, visualiza e renderiza projetos de vídeo HyperFrames pela linha de comandoAuditada1,2 milhão de instalações, grátiscli media-
O Claude acha ou cria a trilha, a locução, as imagens e o tratamento de cor do seu vídeo HyperFrames e guarda tudo na pasta do projeto.1,1 milhão de instalações, grátisuse hyperframes-
Reúne regras de animação, transições de cena e técnicas de motion pra vídeos HyperFramesAuditada1 milhão de instalações, grátisanimation hyperframes-
Instala cerca de 450 blocos prontos de vídeo HyperFrames: transições, títulos, legendas e gráficosAuditada1 milhão de instalações, grátisregistry hyperframes-
Ensina a estrutura de um projeto HyperFrames: composição, atributos de tempo, trilhas e clipesAuditada930,4 mil instalações, grátiscore hyperframes-
Orienta a direção criativa de vídeos HyperFrames: paleta, tipografia, narração e ritmo das cenasAuditada916,5 mil instalações, grátiscreative hyperframes-
Cria zoom, punch-in, Ken Burns e movimentos de câmera em vídeos HyperFramesAuditada754,2 mil instalações, grátiskeyframes hyperframes-
Mixa o áudio de vídeos HyperFrames: fade, volume, crossfade e música que abaixa quando há vozAuditada663,2 mil instalações, grátisaudio general-
Monta composições HyperFrames sob medida, de vídeos longos ou com várias cenasAuditada661,1 mil instalações, grátisvideo product-
Você cola o link do produto e recebe um vídeo promocional montado com as cores, as fontes e as telas reais do site, aprovado quadro a quadro.538,7 mil instalações, grátislaunch- video faceless-
Transforma um texto, artigo ou tema num vídeo explicativo sem apresentador na telaAuditada521,4 mil instalações, grátisexplainer