¿Qué es line-art-animation?
line-art-animation son dos cosas en un mismo repositorio. La skill (SKILL.md y seis guías de referencia) le explica a Claude cómo crear dibujos de línea animados en el navegador: copiar la biblioteca en tu proyecto, enseñar una figura para que la apruebes y comprobar el movimiento fotograma a fotograma. La biblioteca son cuatro módulos TypeScript sin dependencias: ink.ts con primitivas de trazo de pluma, gait.ts con un solucionador de caminar y correr, motion.ts con muelles, péndulos y viento, y daynight.ts con una paleta de color según la hora del día.
Incluye dos ejemplos: un caminante de unas 150 líneas que se quita el sombrero al hacer clic, y una calle japonesa junto a un canal con vecinos que siguen horarios, un gato, pájaros, un barquero y una docena de interacciones. Un script de captura controla Chrome sin interfaz fotograma a fotograma, y FFmpeg convierte los fotogramas en vídeo. Otros scripts miden un clip de referencia para que puedas igualar su ritmo.
El repositorio tiene licencia MIT, necesita Node 22.18 o posterior para los ejemplos y se publicó en un único commit el 10 de noviembre de 2026.
¿Merece la pena line-art-animation?
La mayoría de las skills de animación dan al modelo una guía de estilo y cruzan los dedos. Esta le da una respuesta física. El solucionador de la marcha calcula las piernas en lugar de animarlas con fotogramas clave: el pie apoyado se desliza hacia atrás exactamente a la velocidad de avance, el pie que oscila sigue una trayectoria de mínimo tirón, el talón se levanta antes que la punta y la altura de la cadera sale de lo que alcanzan las piernas, así que el cuerpo sube en cada paso. Abrigos y kimonos se dibujan alrededor de las rodillas, de modo que se abren con la zancada. Por eso los ejemplos parecen entintados y no interpolados.
El método de trabajo también es sensato. Se le pide a Claude que enseñe una figura para aprobarla antes de construir la escena y que verifique el movimiento fotograma a fotograma antes de entregarlo. La captura de vídeo avanza la escena exactamente un fotograma por captura de pantalla, así que un render de 30 segundos a 1080p sale igual en un portátil lento que en uno rápido, y la documentación explica por qué los clips de redes deben remuestrearse por tiempo, ya que casi todos tienen tasa de fotogramas variable.
La pega: es un único commit del 10 de noviembre de 2026, cuatro días antes de esta reseña, con 727 estrellas y 118 forks y sin historial con el que juzgar el mantenimiento. No hay paquete npm; la skill copia lib/ en tu proyecto, así que los arreglos de origen no te llegan. Y hace un solo estilo, tinta sobre papel con ciclo de día y noche. Para motion graphics, promos de producto o cualquier cosa que no sea una figura de línea, encajan mejor Motionmaxxing o Bang Motion.
Nuestra opinión: un desarrollador front-end que quiera una ilustración viva en una landing, una figura que camina o un pueblo al atardecer, llegará más lejos en una tarde con esto que con una biblioteca de animación general. Trata lib/ como código que ahora es tuyo.
Dónde se gana su sitio
Un desarrollador front-end en un pequeño estudio de diseño
Poner en la cabecera del portfolio una figura de tinta que camina y reacciona a los clics
Clona la skill en ~/.claude/skills, pide la figura a Claude y aprueba la primera pose. El ejemplo del caminante muestra el patrón en unas 150 líneas; el coste es tu plan de Claude.
La desarrolladora web de una panadería
Crear una escena en bucle del amanecer con un panadero y un horno para la portada de la tienda
Pide la escena con ciclo de día y noche; daynight.ts cambia el color de la tinta y el papel según la hora y enciende las ventanas de noche. Funciona en vivo en el navegador como SVG, así que se ve nítida en cualquier pantalla.
Un motion designer que debe igualar un vídeo de referencia del cliente
Recrear en dibujo de línea un ciclo de caminar de un clip de redes y exportarlo a 1080p
Usa clip.ts para medir la duración del bucle y la posición de los pies, haz que Claude ajuste la marcha, captura 900 fotogramas con el script de captura y codifica con FFmpeg.
Antes de decidirte
- Puesta en marcha
- Haz git clone del repositorio en ~/.claude/skills/line-art-animation o en la carpeta .claude/skills de un proyecto; npm install y npm run dev para ver los ejemplos con Node 22.18 o posterior.
- Integraciones
- Claude Code mediante la skill; Vite para los ejemplos; Chrome sin interfaz a través del protocolo DevTools y FFmpeg para el vídeo.
- Datos y privacidad
- Todo se ejecuta en local; lo único que sale de tu máquina es lo que envías a Claude, incluido cualquier clip de referencia que adjuntes.
- Límites
- Las figuras se dibujan en un espacio fijo de unas 95 unidades de alto; un solo estilo de tinta; la captura necesita Chrome o Chromium en local; no hay paquete publicado ni versiones.
Lo bueno
- El solucionador de la marcha da pies apoyados y balanceo natural sin fotogramas clave
- La biblioteca son cuatro módulos TypeScript sin dependencias en ejecución
- Paso de aprobación con una figura antes de construir la escena completa
- La captura determinista da renders de vídeo repetibles
- Herramientas para igualar el ritmo de un clip de referencia
Lo malo
- Un solo commit, con cuatro días en el momento de la reseña
- Un único estilo visual: dibujo de línea en tinta
- Sin paquete; el código copiado no recibe arreglos de origen
- Renderizar vídeo exige Chrome y FFmpeg en local
Ideal para
Desarrolladores front-end y diseñadores que usan Claude Code y quieren figuras o escenas SVG interactivas con aspecto dibujado a mano en una página web.
Alternativas a line-art-animation
line-art-animation: preguntas frecuentes
- ¿Merece la pena line-art-animation?
- Una rara skill de animación con ingeniería de verdad debajo, sobre todo el solucionador de la marcha, pero con cuatro días de vida y hecha para un solo estilo. Le damos un 3.6 sobre 5.
- ¿Cuánto cuesta line-art-animation?
- Gratis con MIT. Usar la skill cuesta lo que cueste tu plan de Claude; para renderizar vídeo hacen falta Chrome y FFmpeg en local.
- ¿Qué inconvenientes tiene line-art-animation?
- Un solo commit, con cuatro días en el momento de la reseña; un único estilo visual: dibujo de línea en tinta; sin paquete; el código copiado no recibe arreglos de origen; renderizar vídeo exige Chrome y FFmpeg en local.
- ¿Para quién es line-art-animation?
- Desarrolladores front-end y diseñadores que usan Claude Code y quieren figuras o escenas SVG interactivas con aspecto dibujado a mano en una página web.
- ¿Es line-art-animation seguro para los datos de la empresa?
- Todo se ejecuta en local; lo único que sale de tu máquina es lo que envías a Claude, incluido cualquier clip de referencia que adjuntes.
- ¿Cuáles son las mejores alternativas a line-art-animation?
- Las alternativas más cercanas que hemos analizado son motionmaxxing, Bang Motion y reanimate.
Respuestas comprobadas el 14 nov 2026.