Text To Lottie skill

Você descreve a animação e o Claude entrega o arquivo Lottie pronto: logo animado, loader, título, gráfico ou chamada pra rede social.

por diffusionstudio

instalações: 10,7 mil
estrelas no GitHub: 5.630
No skills.sh desde: junho de 2026
Licença: MIT

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

diffusionstudio
text-to-lottie
Você descreve a animação e o Claude entrega o arquivo Lottie pronto: logo animado, loader, título, gráfico ou chamada pra rede social.10,7 mil instalações, grátis

O que ela faz

A skill escreve animações Lottie, o formato de animação em JSON usado em sites e apps. Ela cobre logo animado, tipografia, lower thirds (a tarja com nome no vídeo), loaders e ícones, telas de sucesso e erro, microinterações, diagramas, números e gráficos, promo de produto, câmera com pan e zoom, e efeitos como brilho e vidro.

Ela usa o player oficial do projeto, que roda no navegador com o Skia Skottie. Cada animação vira uma cena em public/projects/<projeto>/<cena>/lottie.json e atualiza ao vivo enquanto o Claude edita. Antes de entregar, ele valida o JSON e confere os quadros do começo, do meio e do fim.

Ela vem com regras de gosto: premium quer dizer tirar, não pôr; nada de card, borda ou sombra sem função; um tom de fundo só; movimento com easing pensado, nunca linear. Logos e ícones saem com fundo transparente. Valores importantes, como a cor de fundo, viram controles editáveis no painel do player.

Nas palavras de quem fez

Create, edit, or fix Lottie/Bodymovin JSON animations for the local Skia Skottie player. Use for text-to-Lottie, SVG/logo/type animation, loaders/icons, state…

diffusionstudio, no SKILL.md

Quando usar

Animar o logo pra abertura de vídeo ou pro site
Fazer um loader ou um ícone animado pro app
Transformar um SVG parado em animação
Animar números e gráficos de resultado pra um post
Criar a tarja com nome e cargo pra um vídeo

Depois de instalar, é só pedir assim

Anima esse logo em SVG com uma entrada suave e fundo transparente
Faz uma animação do faturamento do mês subindo num gráfico de barras
Cria um loader animado com as cores da minha marca pra usar no site

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 Text To Lottie 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 Text To Lottie, 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 text-to-lottie precisa pra funcionar?

Do Node instalado. Na primeira vez, o Claude baixa o player do projeto (npx degit diffusionstudio/lottie), instala as dependências e abre o player no navegador, em geral na porta 3030. Não pede chave de API nem conta.

Roda no Codex e no Antigravity?

Roda. O projeto foi feito pro Claude Code, o Codex e outros agentes que usam skills, e a própria skill evita comandos presos a um agente só.

Ela exporta vídeo MP4 ou GIF?

Não é o foco. O que ela entrega é o arquivo Lottie em JSON, conferido no player local, pronto pra rodar em site, app ou qualquer player de Lottie. A skill não traz passo pra exportar MP4 ou GIF.

Levar essa skill

1x text-to-lottieR$ 0,00

TotalR$ 0,00

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

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.