O que é line-art-animation?
O line-art-animation são duas coisas num mesmo repositório. A skill (SKILL.md e seis guias de referência) ensina o Claude a criar desenhos de traço animados no navegador: copiar a biblioteca para o seu projeto, mostrar uma figura para aprovação e conferir o movimento quadro a quadro. A biblioteca são quatro módulos TypeScript sem dependências: ink.ts com primitivas de traço de pena, gait.ts com um solucionador de caminhada e corrida, motion.ts com molas, pêndulos e vento, e daynight.ts com uma paleta de cores conforme a hora do dia.
Vêm dois exemplos: um caminhante de cerca de 150 linhas que tira o chapéu quando clicado, e uma rua japonesa à beira de um canal com moradores em horários fixos, um gato, pássaros, um barqueiro e cerca de uma dúzia de interações. Um script de captura controla o Chrome headless quadro a quadro, e o FFmpeg transforma os quadros em vídeo. Outros scripts medem um clipe de referência para você acertar o ritmo dele.
O repositório tem licença MIT, precisa de Node 22.18 ou mais novo para os exemplos e foi publicado num único commit em 10 de novembro de 2026.
line-art-animation vale a pena?
A maioria das skills de animação entrega ao modelo um guia de estilo e torce. Esta entrega uma resposta física. O solucionador de caminhada calcula as pernas em vez de animá-las por keyframes: o pé apoiado desliza para trás exatamente na velocidade de deslocamento, o pé em balanço segue uma trajetória de mínimo solavanco, o calcanhar sobe antes da ponta, e a altura do quadril vem do que as pernas alcançam, então o corpo sobe a cada passo. Casacos e quimonos são desenhados em volta dos joelhos e abrem com a passada. É por isso que os exemplos parecem desenhados a nanquim e não interpolados.
O método de trabalho também é bom. O Claude deve mostrar uma figura para aprovação antes de montar a cena e verificar o movimento quadro a quadro antes de entregar. A captura de vídeo avança a cena exatamente um quadro por screenshot, então um render de 30 segundos em 1080p sai igual num notebook lento e num rápido, e a documentação explica por que clipes de redes sociais precisam ser reamostrados por tempo, já que a maioria tem taxa de quadros variável.
O porém: é um único commit de 10 de novembro de 2026, quatro dias antes desta análise, com 727 estrelas e 118 forks e nenhum histórico para avaliar a manutenção. Não há pacote npm; a skill copia lib/ para o seu projeto, então correções feitas na origem não chegam até você. E ela faz um só estilo, nanquim sobre papel com ciclo de dia e noite. Para motion graphics, promoções de produto ou qualquer coisa que não seja uma figura de traço, Motionmaxxing ou Bang Motion servem melhor.
Nossa opinião: um desenvolvedor front-end que queira uma ilustração viva numa landing page, uma figura andando ou uma cidadezinha ao entardecer, vai mais longe numa tarde com isto do que com uma biblioteca de animação genérica. Trate lib/ como código que agora é seu.
Onde ele se destaca
Um desenvolvedor front-end num pequeno estúdio de design
Colocar no topo de um portfólio uma figura a nanquim que anda e reage a cliques
Clone a skill em ~/.claude/skills, peça a figura ao Claude e aprove a primeira pose. O exemplo do caminhante mostra o padrão em cerca de 150 linhas; o custo é seu plano do Claude.
A desenvolvedora web de uma padaria
Fazer uma cena de amanhecer em loop com padeiro e forno para a página inicial da loja
Peça a cena com ciclo de dia e noite; o daynight.ts recolore nanquim e papel conforme a hora e acende as janelas à noite. Ela roda ao vivo no navegador como SVG e fica nítida em qualquer tela.
Um motion designer que precisa igualar o vídeo de referência de um cliente
Recriar em traço um ciclo de caminhada de um clipe de rede social e exportar em 1080p
Use o clip.ts para medir a duração do loop e a posição dos pés, faça o Claude ajustar a caminhada, capture 900 quadros com o script de captura e codifique com o FFmpeg.
Antes de decidir
- Configuração
- Faça git clone do repositório em ~/.claude/skills/line-art-animation ou na pasta .claude/skills de um projeto; npm install e npm run dev para ver os exemplos com Node 22.18 ou mais novo.
- Integrações
- Claude Code pela skill; Vite para os exemplos; Chrome headless pelo protocolo DevTools e FFmpeg para vídeo.
- Dados e privacidade
- Tudo roda localmente; só sai da sua máquina o que você envia ao Claude, inclusive qualquer clipe de referência anexado.
- Limites
- As figuras são desenhadas num espaço fixo de cerca de 95 unidades de altura; um só estilo de nanquim; a captura exige Chrome ou Chromium local; não há pacote publicado nem versões.
O que é bom
- O solucionador de caminhada gera pés apoiados e balanço natural sem keyframes
- A biblioteca são quatro módulos TypeScript sem dependências em tempo de execução
- Etapa de aprovação de uma figura antes de montar a cena inteira
- Captura determinística gera renders de vídeo repetíveis
- Ferramentas para acertar o ritmo de um clipe de referência
O que não é
- Commit único, com quatro dias na data da análise
- Um único estilo visual: traço a nanquim
- Sem pacote; o código copiado não recebe correções da origem
- Renderizar vídeo exige Chrome e FFmpeg locais
Ideal para
Desenvolvedores front-end e designers que usam o Claude Code e querem figuras ou cenas SVG interativas, com cara de desenho à mão, numa página web.
Alternativas ao line-art-animation
line-art-animation: perguntas frequentes
- line-art-animation vale a pena?
- Uma skill de animação rara, com engenharia de verdade por baixo, sobretudo o solucionador de caminhada, mas com quatro dias de vida e feita para um único visual. Damos nota 3.6 de 5.
- Quanto custa line-art-animation?
- Grátis sob MIT. Usar a skill custa o que custar seu plano do Claude; renderizar vídeo exige Chrome e FFmpeg locais.
- Quais são as desvantagens de line-art-animation?
- Commit único, com quatro dias na data da análise; um único estilo visual: traço a nanquim; sem pacote; o código copiado não recebe correções da origem; renderizar vídeo exige Chrome e FFmpeg locais.
- Para quem line-art-animation é indicado?
- Desenvolvedores front-end e designers que usam o Claude Code e querem figuras ou cenas SVG interativas, com cara de desenho à mão, numa página web.
- line-art-animation é seguro para dados da empresa?
- Tudo roda localmente; só sai da sua máquina o que você envia ao Claude, inclusive qualquer clipe de referência anexado.
- Quais são as melhores alternativas ao line-art-animation?
- As alternativas mais próximas que analisamos são motionmaxxing, Bang Motion e reanimate.
Respostas verificadas em 14 de nov. de 2026.