anidoodle (animación dibujada en código)

anidoodle

Imágenes, películas y piezas interactivas dibujadas enteramente en código. Una función pura pinta cada fotograma; otra compone y sintetiza cada muestra de audio. La misma fuente reconstruye los mismos píxeles y el mismo sonido en cualquier máquina, a cualquier tamaño, a cualquier duración.

El motor es la parte fácil. El trabajo se desecha porque no tenía sentido, porque el tema era un icono de sí mismo, porque un estilo era solo un cambio de paleta, porque la música no tenía forma, o porque la persona agotó su paciencia aprobando fragmentos. Este skill lleva el oficio que evita cada una de esas cosas.

Empieza preguntando, luego construye

Lee references/workflows/start-here.md y ejecuta su ingesta: una pregunta a la vez, solo lo que la solicitud deja abierto, tu recomendación primero. Qué están haciendo, en qué estilo (muestra la hoja de galería, https://github.com/alexgreensh/anidoodle/blob/main/skills/anidoodle/assets/styles.jpg; la lista está en references/styles/INDEX.md), qué forma (1x1, 9x16, 16x9, 4x5 o cualquier W x H), cuánto tiempo (cualquier duración; nunca limites), qué sonido (silencioso o un estilo musical y ambiente), qué personajes. "Tú eliges" significa elige y di por qué en una línea. Escribe las respuestas en un breve resumen antes de dibujar.

¿Qué estás haciendo?

Haciendo	Leer
Una imagen fija: heroína, spot, portada, tarjeta, póster, una serie	Flujo de imagen fija abajo, references/formats.md
Una imagen que se dibuja a sí misma (lapse de tiempo, making-of)	references/workflows/drawing-process.md
Un bucle, sticker, logo animado, cabecera ambiental	Flujo de bucle abajo, references/formats.md
Una película narrativa, cualquier duración	Flujo de película abajo, references/workflows/long-film.md
Un explicador o infografía	references/workflows/explainer.md
Un video de lanzamiento o producto (sus capturas de pantalla son bienvenidas)	references/workflows/launch-video.md; constrúyelo sobre references/workflows/launch-video-kit.md
Una animación web interactiva que reacciona a la UI	references/workflows/interactive.md
Una lección de dibujo, o "¿cómo dibujo esto?"	references/workflows/teach-drawing.md
Un personaje mantenido idéntico en cualquier estilo (grabado en madera a ladrillo de juguete)	references/workflows/character-consistency.md, references/anatomy.md
Un estilo adaptado de su imagen	references/workflows/adapt-a-style.md
Una banda sonora o pista musical	references/music/README.md

• Música: escribe tu propia banda sonora para la película (references/music/README.md); node tools/music.mjs check <score.ts#export> debe PASAR antes de que un humano escuche.
• Efectos de sonido: references/music/sound-design.md. 14 efectos en capas y con semilla, sincronizados por fotograma de la película (filmSfx); la banda sonora se atenúa, y cada señal debe estar dentro de 6 dB de ella. Efectos solo en cambios de dirección reales, un ascensor + un impacto por película.
• Películas de lanzamiento: launchTemplate.ts renderiza el lanzamiento de un producto a partir de datos: indicaciones, placas dibujadas para ello, una banda sonora escrita para ello, palabras, líneas de instalación; los hábitos que ahorran tokens están en references/working-method.md.

Las siete leyes

1. Toda pieza tiene un sentido. Una imagen fija: una idea, un sujeto focal, una luz. Una película: una transformación, un desenlace, un token que regresa. → references/storytelling.md
2. Declara el realismo. Nombra la anatomía, la vista y la referencia que abriste, tanto para animales, objetos como personas. → references/realism-and-craft.md, references/anatomy.md
3. Un estilo es una forma de hacer marcas. Cambia el medio, el borde y el orden de las marcas, más allá de la paleta. → references/styles.md
4. Prueba el aspecto en UNA imagen fija, luego construye de principio a fin. Después de eso, los puntos de control cuestan más de lo que ahorran. → references/working-method.md
5. El contrato es absoluto. Puro en (fotograma, env) (y el registro de entrada, para piezas interactivas), solo rng(semilla), sin reloj, sin ctx.filter. Nada generado o descargado; las imágenes que la persona trae pueden ser incrustadas, fijadas por hash. → references/determinism-and-contract.md
6. La música obtiene un plan, nunca un adjetivo. Un estilo, un ambiente por sección, las notas como datos, luego mediciones. No puedes oírlo, así que un humano escucha antes de que se envíe. → references/music/
7. Uno dirige, uno construye, ambos escriben todo. Cuando una sesión se degrada, reinicia; los archivos son la memoria. → references/working-method.md

Flujos de trabajo

Imagen fija. (1) Di la idea en una oración; nombra el sujeto focal y la luz. (2) Abre una referencia real para cualquier cosa que exista, y anota cuál. (3) Elige el estilo y lee primero el encabezado de su placa. (4) Dibuja en el orden de ese medio. (5) Renderiza con still.mjs a tamaño completo, ejecuta el pase de detalle en recortes (rostros, manos, pies, uniones; references/craft-bar.md), critica por escrito. ✋ Una aprobación. (6) Entrega cada tamaño y forma solicitados desde la misma fuente, y di que se imprimió reproducible.

Bucle. Como una imagen fija, más: cada movimiento es periódico a lo largo del bucle, el sujeto nunca se detiene, algo se mueve cada segundo. Verifica la costura (último fotograma contra fotograma 0). ✋ Una aprobación, sobre el archivo en movimiento.

Película. (1) La historia en tres oraciones (planteamiento, transformación, desenlace) y el token; para películas más largas, una columna vertebral más una línea por capítulo. Si no puedes escribirlo, detente. (2) La cuadrícula: un pulso es 60 x fps / bpm fotogramas, el bpm proviene de la banda sonora del resumen; una tabla de señales contiene cada número de fotograma y un verificador se ejecuta en la carga. (3) Referencia real para cualquier cosa que exista. (4) UNA imagen fija de prueba, el fotograma más difícil, criticada por escrito. ✋ Aprobación. (5) UNA muestra musical de 8 segundos. ✋ Aprobación. (6) Construye toda la película; las comprobaciones mecánicas se ejecutan continuamente. (7) Revisa una vez desde el archivo renderizado: una hoja de contactos por pulso, cada corte como un par, los números de silencio. Una lista ordenada de correcciones, una reconstrucción. (8) ✋ Aprobación final. Di lo que verificaste y lo que no puedes.

Como máximo tres puntos de aprobación. La aprobación es un presupuesto; gástalo donde equivocarse es costoso.

La barra de oficio

La prueba: ¿un ilustrador humano orgulloso enviaría esto, o es un ensamblaje mecánico de formas? La tabla completa de señales está en references/craft-bar.md. Las que hunden la mayoría del trabajo: sujetos construidos a partir de elipses, un estilo recolorido en otro, cosas que se desvanecen en lugar de ser dibujadas, personas con articulaciones de goma, y un personaje dibujado de manera diferente de toma a toma.

Sin silencio muerto en nada que se mueva: algo cambia visiblemente cada segundo. Una película que se dibuja a sí misma declara kind: "drawing" y se juzga con un estándar más fino; una congelación sigue siendo un fallo.

El motor

engine/ es el núcleo de arte portátil más las herramientas. engine/src/canvas-core no sabe nada sobre el DOM ni ningún backend. W, H, fps y durationFrames provienen de los metadatos de la película. Los movimientos de cámara (paneos, zooms, paralaje, sacudidas) provienen de engine/src/canvas-core/camera.ts: references/camera.md. render.mjs --blur N renderiza con desenfoque de movimiento (N subfotogramas promediados en luz lineal por fotograma); la ruta predeterminada no se toca.

node <skill>/engine/tools/scaffold.mjs ~/art --film intro --format 9x16 --duration 12   # segundos
cd ~/art && npm install && npx playwright-core install chromium
node tools/still.mjs intro --frame 0 --out out/look.png --scale 2   # una imagen fija, con su hash
node tools/render.mjs intro                                        # MP4; --out x.gif|x.webm|x.apng
node tools/gate.mjs intro                                          # determinismo, contrato, silencio muerto
node tools/emit.mjs intro --out out/intro.html                     # un reproductor offline autocontenido

Herramienta	Qué hace
scaffold.mjs	un proyecto con una imagen fija y/o película; --duration, --format o --size, --fps, --bpm
still.mjs / render.mjs	fotogramas dibujados dos veces con hashes (--frames a,b,c --sheet en un navegador) / la pieza en cualquier formato (--from/--to, --poster-frame, --hashes)
gate.mjs	determinismo, contrato, silencio muerto, artefacto; --self-test prueba que puede fallar
registry.mjs / gallery.mjs	la lista de estilos desde las propias placas / la hoja de galería
docs-check.mjs	falla cuando el recuento de estilos, duración o ruta de cualquier doc no coincide con el código
verify-export.mjs	QA en el archivo renderizado: fotogramas, duración, banda sonora; primer fotograma opcional, costura del bucle, --delivery
test.mjs (npm test)	suites de prueba unitaria en engine/test/, sin navegador
music.mjs	renderiza y mide una banda sonora; check la bloquea (tonalidad, máster, guardas, stems, novedad)
sfx.mjs	el kit de efectos de sonido: list, one, kit <dir>, test

Cuatro backends, un núcleo de arte: playwright, html-player, remotion, hyperframes. → references/backends-and-adapters.md

Ejemplos trabajados

• Las placas de estilo en engine/src/canvas-core/: cada mano tiene una imagen fija y una película de cómo se dibuja, con la receta en el encabezado y references/styles/<id>.md.
• MECHANICAL LEPIDOPTERA en example/: una película con banda sonora de 47 s. scaffold.mjs ~/study --example.

Estúdialos. No los copies. La barra de oficio no se satisface con herencia.

Límites honestos

No puedes oír la banda sonora, ver la película en movimiento ni usar la pieza interactiva. Cada afirmación sobre ellas proviene de una medición o de un humano; di cuál. Una marca de verificación verde es una afirmación hasta que la vuelvas a ejecutar. Renderiza un fotograma a --scale 2 antes de confiar en una imagen fija: una capa combinada a través de la transformación incorrecta se ve bien a 1x y se rompe a 2x.