Lottie Animation skill

A animação que o designer fez no After Effects roda leve no site ou no app, acompanha a rolagem da página e troca de cor sem exportar de novo.

por iart-ai

instalações: 2.200
estrelas no GitHub: 57
No skills.sh desde: junho de 2026
Licença: MIT

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

iart-ai
lottie-animation
A animação que o designer fez no After Effects roda leve no site ou no app, acompanha a rolagem da página e troca de cor sem exportar de novo.Auditada2.200 instalações, grátis

O que ela faz

A skill ensina o Claude a pôr animações Lottie (o formato que sai do After Effects pelo Bodymovin, em .json ou no .lottie compactado) num site ou num app iOS, Android ou React Native. Na web, ela usa o player dotLottie, com versão pra JavaScript puro e pra React.

Com a animação carregada, o Claude controla tudo pelo código: tocar, pausar, mudar a velocidade, ir e voltar, repetir só um trecho, avançar quadro a quadro conforme a pessoa rola a página e reagir ao mouse ou ao clique. As cores mudam pelos temas guardados no próprio .lottie, sem reexportar o arquivo.

Pra demo, ela entrega um único HTML que abre direto no navegador, tira print do primeiro, do meio e do último quadro pra conferir e respeita quem pediu menos movimento. Traz também o checklist pra exportar do After Effects sem perder efeito.

Nas palavras de quem fez

This skill should be used when the user asks to "add a Lottie animation", "play a .lottie or .json animation", "integrate a Bodymovin/After Effects animation…

iart-ai, no SKILL.md

Quando usar

Colocar no site a animação de abertura que o designer mandou
Fazer um ícone animado ou uma ilustração em loop numa landing page
Animar uma seção conforme a pessoa rola a página
Trocar as cores da animação pro tema escuro ou pra outra marca
Deixar a página leve, tocando a animação só quando ela aparece na tela

Depois de instalar, é só pedir assim

Coloca esse arquivo hero.lottie no topo da landing page, em loop, tocando só quando aparecer na tela
Faz essa animação Lottie avançar conforme a pessoa rola a seção de benefícios
Cria um botão de curtir que toca o trecho de 'curtido' da animação e depois fica parado

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 Lottie Animation 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 Lottie Animation, 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 lottie-animation skill precisa pra funcionar?

De um arquivo de animação em .json ou .lottie e de um projeto web ou mobile. Na web, o player se instala pelo npm ou entra por CDN num HTML simples. Pra tirar print dos quadros, usa um navegador sem janela, como o Playwright. Não pede chave de API nem conta paga.

Roda no Codex e no Antigravity?

Roda. É um SKILL.md com referência, exemplos de código e dois scripts de apoio pra tirar print dos quadros, que qualquer agente que lê arquivos e roda comandos consegue usar.

Ela cria a animação do zero?

Não. Ela integra, controla e otimiza uma animação que já existe, e traz o checklist de exportação. O desenho e a animação em si continuam sendo feitos no After Effects ou em outra ferramenta que exporte Lottie.

Levar essa skill

1x lottie-animationR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/iart-ai/web-animation-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.