JDhruv14/line-art-animation

Animación line-art

Componentes de ilustración animada: todo está dibujado con un solo plumín fino sobre papel, construido en vivo en SVG desde TypeScript, por lo que se mantiene nítido a cualquier tamaño, responde al puntero y se puede avanzar fotograma a fotograma para revisión o exportación a video.

Este skill incluye una pequeña biblioteca (lib/), dos ejemplos (examples/walker, una sola figura en ~150 líneas; examples/village, una escena completa) y herramientas (scripts/). Lee el ejemplo más cercano a la solicitud antes de escribir nada.

Cómo se juzga este trabajo

Lo miran como lo haría un animador: fotograma a fotograma, con zoom, comparándolo con la realidad o con una referencia. Todos estos fueron rechazados en la práctica, y cada uno tiene una regla a continuación:

• marchas que suben y bajan con una onda sinusoidal, pies que se arrastran, zancadas aceleradas para ajustarse a un time-lapse
• extremidades dibujadas como tubos cerrados; líneas rectas como una regla; ropa rígida que ignora las piernas
• un conjunto completo de componentes construidos de una sola vez que todos se parecen ("slop de IA")
• interacciones que parecen de interfaz de usuario en lugar de reacciones del mundo
• una página cuyo fondo cambia con la escena ("parece un vídeo, no un componente")
• reutilizar personajes de un clip de referencia cuando se pide algo nuevo
• accesorios sobrantes que nadie pidió (pidieron quitar la ropa tendida)

Flujo de trabajo

1. Fijar el aspecto antes de que nada se mueva. Lee references/style.md. Decide el grosor del trazo, el color del papel, las proporciones de la figura y los uno o dos colores planos de acento.
2. Configurar el proyecto. Copia lib/ en el proyecto (son cuatro archivos .ts sin dependencias) y usa Vite + TypeScript (package.json, tsconfig.json y vite.config.ts en este repositorio muestran la configuración). Los componentes son DOM/SVG simples — no se necesita framework.
3. Construir primero una figura o una esquina y muéstrala (captura de pantalla o un clip corto, junto a la referencia si la hay). Obtén un visto bueno antes de construir el resto. Un conjunto completo construido de una vez resulta genérico; una pieza buena muestra el nivel.
4. Hacer que se mueva con references/motion.md: gait() para caminar y correr, spring() / pendulum() para cualquier cosa unida o colgante, poses clave con curve() o sequence() para gestos. Nunca animes una figura con senos libres.
5. Componer la escena con references/scenes.md: una tarjeta autocontenida sobre un fondo de página fijo, capas, una paleta según la hora del día de lib/daynight.ts, luces, viento, personas que llegan según horarios, interacciones que son reacciones.
6. Verificar con references/verify.md antes de mostrar nada: verificación de tipos, avance con ?debug, tiras de fotogramas ampliadas de todo lo que se mueve, interacciones disparadas y recorridas paso a paso, 60 fps en una pestaña real.
7. Si hay un clip de referencia para igualar, sigue references/matching.md — mide el tiempo y las poses del clip en lugar de adivinar, y comprueba con una superposición.
8. Si quieren un vídeo, sigue references/video.md (captura headless determinista con scripts/capture.ts, luego ffmpeg).

Reglas que lo hacen funcionar

• Las extremidades son dos trazos abiertos. limb() dibuja una banda rellena de papel entre dos líneas de pluma que se detienen antes de tocarse en el extremo opuesto. Esta es la seña de identidad del estilo.
• Las líneas se curvan. Las articulaciones son redondeadas, los bordes se comban ligeramente, nada es recto como una regla.
• Dibuja cada figura en su propio espacio — ~95 unidades de alto, pies en y = 120, mirando hacia +x, de pie en x = 40 — y colócala con place(g, x, y, dir, scale). Las proporciones, el grosor del trazo y los ajustes de marcha presuponen este espacio.
• La ropa se dibuja alrededor del esqueleto. Resuelve las piernas (aunque estén ocultas), luego dibuja el borde del abrigo o kimono desde la rodilla que avanza y los tobillos para que la tela se abra y cierre con la zancada. Mangas, bufandas y bolsos oscilan con resortes.
• Los pies están fijos. Mueve a un caminante exactamente gait.speed × scale por segundo y el pie de apoyo permanece quieto en el suelo. No aceleres una marcha para ajustarla a un reloj comprimido; comprime las llegadas en su lugar.
• La tinta es currentColor, el papel es .pp. Cambia el color de todo el dibujo con applyPalette() (día: tinta oscura sobre papel cálido; noche: tinta pálida sobre añil, ventanas cálidas). Los rellenos de extremidades de color sólido deben usar solid(), o el CSS del papel ganará.
• El componente es una tarjeta. La página que lo rodea nunca cambia de color.
• Las interacciones son el mundo reaccionando: una persona se inclina o toca el sombrero, un gato se despierta y estira, una linterna oscila, los pájaros se dispersan, un pez salta. El movimiento del puntero es viento. No hay botones dentro de la escena; una sola línea tenue de indicación es suficiente.
• Nuevo significa nuevo. Si el brief es "como esto pero nuevo", mantén el medio, el trazo, las proporciones y la sensación de tiempo; inventa los personajes, actividades y accesorios.

Biblioteca de un vistazo

módulo	qué te da
lib/ink.ts	pen shape blot paint limb solid joint hang curve shoe place toScene inkDefs run
lib/gait.ts	`gait({ kind: 'walk'
lib/motion.ts	spring pendulum pointerWind sequence seeded wobble ease minJerk …
lib/daynight.ts	palette(τ) → cielo, papel, tinta, lamp, night, sunset; applyPalette nightTint

run(draw) lo maneja todo con draw(t, dt). Dos parámetros de URL son importantes para verificar: ?t=1.25 congela el tiempo; ?debug desactiva rAF y expone window.__step(seconds) para un avance exacto (el fondo y las pestañas headless limitan rAF, así que verifica siempre en modo debug).

Scripts

• scripts/capture.ts <url?debug> <outDir> <frames> <fps> [w] [h] [setupJs] [frameJs] — fotogramas PNG deterministas desde Chrome headless
• scripts/clip.ts period|blobs … — duración del bucle de una región; seguimiento de manchas oscuras por fotograma
• scripts/frames.sh <clip> x y w h outDir — fotogramas con cuadrícula superpuesta para leer poses de un clip

Todos se ejecutan con Node ≥ 22.18 (TypeScript se elimina de forma nativa) más ffmpeg; capture.ts encuentra un Chrome/Chromium local o usa $CHROME.