https://github.com/user-attachments/assets/1cf7f75c-b040-4c00-bf0c-cf1885f8b8da
La película de lanzamiento, 77 segundos. Cada fotograma y cada sonido se hizo con anidoodle, en código.
anidoodle
Arte dibujado a mano, escrito en código.
Ilustraciones, timelapses de dibujo, películas, vídeos explicativos y arte web interactivo en 32 estilos.
Cada trazo es una función y cada nota es aritmética, así que la misma fuente
redibuja la misma imagen en cualquier máquina, a cualquier tamaño, para siempre.
Funciona en Claude Code · Codex · Grok Build · y cualquier agente que lea skills.
English · 日本語 · 简体中文 · 한국어 · Français · Español
Estilos ·
Películas del dibujo ·
Música ·
Qué puedes crear ·
Qué trae dentro ·
Movimiento ·
Empieza aquí
## 32 estilos entre los que elegir
Cada estilo es su propia forma de dejar una marca: el afilado de una plumilla, el sangrado de una aguada, el rozado de la tiza sobre la pizarra, el borde rasgado del papel recortado, la trama de un tambor de risografía, una sola línea grabada que se enrosca hasta convertirse en luna. El motivo cambia de forma según la mano que lo dibuje, igual que le pasaría con 32 ilustradores distintos. Cada estilo incluye además una película en la que su imagen se dibuja trazo a trazo, siguiendo el orden de trabajo de un artista de ese medio. Elige uno para tu marca y cada imagen que venga después llegará de la misma mano. Cada lámina de arriba, y la propia hoja de contactos, está dibujada por código en este repositorio.
Los 32 estilos y cómo se hace cada uno
| Estilo | Cómo se hace |
|---|---|
| **Bolígrafo** | Un solo boli; las tramas cruzadas crean los tonos |
| **Color fragmentado** | Toques separados de color sin mezclar, a la manera impresionista |
| **Tiza sobre pizarra** | El lateral de la tiza frota y deja polvo |
| **Carboncillo borrado** | Carboncillo dibujado, borrado y vuelto a dibujar, con sus fantasmas |
| **Lápiz de color** | Rayado direccional sobre papel crema con textura |
| **Cera** | Garabatos cerosos que dejan libres los surcos del papel |
| **Collage de papel recortado** | Papel rasgado y cortado, sin líneas dibujadas |
| **Plano cianotipo** | Dibujo técnico a plumilla sobre una hoja de cianotipia |
| **Veladura de ensueño** | Finas veladuras de óleo, sin pincelada visible, todos los bordes duros |
| **Bordado** | Hilo cosido sobre lino tensado en un bastidor |
| **Vectorial plano** | Formas geométricas nítidas con grano y sombras largas |
| **Cuento popular ilustrado** | Un primer plano pintado se funde con líneas de lápiz sobre papel crema |
| **Tinta y aguada** | Primero las aguadas, después una plumilla flexible |
| **Isométrico** | Un corte isométrico 2:1 con planos de color plano |
| **3D de pocos polígonos** | Triángulos de color plano dibujados con código |
| **Cómic con rotulador** | Rellenos lisos y un único contorno grueso |
| **Gouache de mediados de siglo** | Formas mates y opacas, bordes a pincel seco y trazo suelto |
| **Trama de periódico** | Una trama negra y una tinta plana sobre papel de periódico |
| **Óleo** | Pinceladas de cerda y empaste sobre un lienzo entonado |
| **Artesanía en papel** | Capas de papel cortado y recortes pintados, animados a doses |
| **Lápiz y acuarela** | Aguadas que nunca llenan del todo el contorno a lápiz |
| **Pixel art** | Una paleta fija de 16 colores sobre una cuadrícula de baja resolución |
| **Risografía** | Tambores de tinta sobreimpresos con ligeros desajustes |
| **Animación rubber hose** | Tinta de dibujos animados de los años treinta, extremidades flexibles y grano de película |
| **Esgrafiado** | Líneas blancas rascadas sobre una capa negra de arcilla |
| **Grabado de una línea** | Una espiral ininterrumpida cuyo grosor crea los tonos |
| **Punteado** | Puntos de pluma cuya densidad crea los tonos |
| **Libro ilustrado** | Personajes a lápiz y acuarela |
| **Sumi-e** | Un solo pincel cargado de tinta sobre papel absorbente |
| **Bloques de juguete** | Bloques de plástico con tetones, montados capa a capa |
| **Álbum de recortes vintage** | Grabados, títulos de letras recortadas y tarjetas pegadas sobre papel envejecido |
| **Xilografía / ukiyo-e** | Una plancha maestra tallada y planchas de color sobre washi |
## Cada estilo se dibuja solo
Cada estilo entrega la imagen terminada y, de la misma fuente, una película de cómo se hizo, siguiendo el orden de trabajo de un artista de ese medio. La acuarela empieza con lápiz y luego aplica las aguadas de claro a oscuro. La xilografía imprime primero la plancha maestra y después cada plancha de color. El pixel art bloquea formas lisas antes de sombrear grupos de píxeles. Nada aparece con un fundido: cada trazo crece, cada aguada se extiende desde donde tocó el pincel y el último fotograma coincide con la imagen fija, píxel por píxel. Es a la vez un timelapse, un proceso de creación y un diagrama explicativo.
## Música compuesta con código
Sin muestras ni grabaciones. Las notas se escriben como datos y cada sonido se sintetiza con código. Un estilo musical es un vocabulario con el que el modelo compone, nunca una plantilla: hay 21, del lo-fi electrónico, el house y el synthwave a la orquesta, el jazz, el folk y el piano solo. Cada uno aporta el sonido, los ritmos y el lenguaje armónico; los acordes, el motivo y la forma se escriben nuevos, así que cada película tiene su propia banda sonora.
- **Teclados:** un piano modelado sobre un Steinway de cola real, pianos eléctricos Rhodes y Wurlitzer, órganos de ruedas fónicas y de tubos, láminas y campanas.
- **Conjunto:** secciones de cuerda con músicos independientes, metales, flauta y clarinete, un coro que canta sus vocales, guitarras de nailon, acero y eléctricas, arpa y cuatro tipos de bajo.
- **Batería:** kits reales hechos con código (acústico, 808, 909, polvoriento, escobillas, orquestal con timbales), cada golpe un poco distinto.
- **Lo-fi de verdad:** un sampler de 12 bits, vaivén y soplido de cinta, crepitar de vinilo y un bombo que hace respirar la mezcla.
- **Mezcla y sala:** ecualización por parte, bus de batería, reverbs de sala, placa y convolución, y un máster al volumen de las plataformas de streaming.
`node tools/music.mjs check` aprueba una partitura antes de que nadie la escuche: tonalidad y modo, sonoridad, enmascaramiento, el equilibrio de cada parte y la novedad, que rechaza una partitura que suene como una conocida o la cite.
| Escucha | |
|---|---|
| [Un nocturno en la bemol](assets/audio/nocturne-45s.mp3) | 45 s de piano: crece, llega a la cima y vuelve al susurro |
| [El piano interpretado](assets/audio/piano-8s.mp3) · [las mismas notas tocadas sin expresión](assets/audio/piano-flat-baseline-8s.mp3) | La diferencia está en la interpretación: voces, fraseo y pedal |
| [Cinemático, asombro](assets/audio/sampler-cinematic-awe-8s.mp3) · [Lo-fi](assets/audio/sampler-lofi-nostalgic-8s.mp3) · [Marimba](assets/audio/sampler-marimba-curious-8s.mp3) · [Electrónica](assets/audio/sampler-drive-electronic-8s.mp3) | más estados de ánimo e instrumentos |
| [El tema del nocturno en 15 segundos](assets/audio/fit-theme-15s.mp3) | El compositor elige la forma que cabe en ese tiempo |
Y además: un **kit de efectos de sonido**, catorce efectos en capas y con semilla, sincronizados con el fotograma exacto, con la música bajando bajo cada uno ([diseño de sonido](skills/anidoodle/references/music/sound-design.md)). Cómo se compone una partitura: [`compose.md`](skills/anidoodle/references/music/compose.md) · [todos los vocabularios](skills/anidoodle/references/music/styles/vocabularies.md).
## Páginas web que se fijan en ti
Ilustraciones interactivas para webs reales: una mascota que sigue el cursor y reacciona a los botones, una imagen de cabecera que se dibuja al desplazarte, un compañero de formulario que se tapa los ojos ante el campo de contraseña. Basta un pequeño módulo ES y un elemento ``, sin framework, con opciones de movimiento reducido y uso por teclado. Cada fotograma queda determinado por las entradas que lo preceden.
## Lanza tu producto, dibujado con código
El vídeo al principio de esta página se hizo con anidoodle, y el kit con el que se hizo viene incluido. `launch.mjs new ` te da una especificación para rellenar: el nombre de tu producto, las peticiones que escribiría un usuario, las respuestas (una imagen dibujada, las pantallas de tu propio producto o una película), unas pocas palabras y tus líneas de instalación. Monta un vídeo de lanzamiento al ritmo de la música: un chat que se escribe solo, respuestas que se abren como tinta, rótulos a pantalla completa y una tarjeta final que mantiene tus líneas de instalación el tiempo suficiente para copiarlas.
- **Cuatro formatos, una línea de tiempo:** 16:9, 1:1, 4:5 y 9:16, cada uno recompuesto para su encuadre con texto legible en un móvil.
- **Tu producto en pantalla:** su interfaz dibujada a partir de datos, con elementos que saltan del estado anterior al nuevo.
- **Sonido que sale de la imagen:** cada tecla, pulsación y aterrizaje tiene su efecto, situado donde ocurre en pantalla, sobre una banda sonora compuesta para el vídeo.
- **Listo para publicar:** `launch.mjs ship ` renderiza cada formato con su fotograma de portada y sus subtítulos (.srt y .vtt), comprueba la sincronía de audio y vídeo y el nivel de pico en el archivo que entregas, y falla cualquier fotograma cuyo borde corte un texto.
Dos acabados (tinta dibujada, o limpio para un producto centrado en su interfaz), a 30 o 60 fps, con desenfoque de movimiento ajustado a la velocidad de cada fotograma.
Las reglas salen de cuatro montajes de nuestro propio lanzamiento y del oficio de los mejores: di qué es en cinco segundos, nunca pongas texto sobre la ilustración, corta en el tiempo fuerte, haz que el primer fotograma sea la miniatura. → [`launch-video.md`](skills/anidoodle/references/workflows/launch-video.md) · [el kit](skills/anidoodle/references/workflows/launch-video-kit.md)
## Trae tu propia imagen
- **Reproducir un estilo.** Enséñale una imagen que te guste y estudiará su trazo, sus bordes, su paleta y su papel para dibujar algo nuevo con ese estilo. Toma prestado el estilo, nunca la imagen.
- **Recrear una foto.** Una foto se convierte en un esgrafiado, una xilografía o una sola línea grabada: se miden los tonos y la dirección del pelo o la tela, y cada marca visible se dibuja con código.
- **Mantener un personaje.** Crea un personaje una vez y seguirá siendo el mismo en cada plano, pose y estilo, desde la xilografía hasta los bloques de juguete.
## Aprende a dibujar
Ver la lección completa con subtítulos (mp4, 95 s)
Pregunta cómo dibujar algo, o trae un dibujo, y anidoodle lo reconstruye como lección: una lámina paso a paso y un timelapse con subtítulos. Cada paso explica qué observar, cómo hacerlo y cuál es el error más común.
## Qué puedes crear
| Para | Obtienes |
|---|---|
| **Tu web** | Una ilustración de cabecera, ilustraciones para cada funcionalidad, estados vacíos y un 404, todo de la misma mano. PNG transparentes a cualquier tamaño desde una sola fuente, así que retina e impresión salen gratis. |
| **Explicativos e informes** | Diagramas de cómo funciona, vistas en sección e infografías animadas, rotuladas con letras trazadas a mano. La tiza, el plano técnico y el bolígrafo van bien para los más serios. Una idea puede convertirse en una máquina que funciona, se desmonta y vuelve a montarse, dibujada en cualquier estilo. |
| **Tu marca** | Un logo que se dibuja solo, una secuencia de títulos, una plantilla de tarjeta social que mantiene tu marca en cada publicación. |
| **Redes y chat** | Loops sin fin, GIFs y stickers animados transparentes, con el tamaño justo para el feed. |
| **Presentaciones y documentos** | Una familia de ilustraciones de sección desde un solo programa. Una nueva semilla da una imagen hermana en el mismo estilo. |
| **Historias** | Storyboards y animatics que crecen hasta convertirse en una película terminada de cualquier duración, con banda sonora original. |
| **Tu propia imagen** | Trae un dibujo para aplicar su estilo a otro motivo, o una foto para recrearla en cualquiera de las 32 formas de dibujar, con cada trazo hecho en código. |
| **Páginas web** | Ilustraciones interactivas que siguen el cursor, reaccionan a clics y formularios, o se dibujan al desplazarte por la página. Arte de portada y spots junto a tu titular, en el color y la marca de tu página, en claro u oscuro. |
| **Aprendizaje** | Lecciones de dibujo con láminas paso a paso y timelapses que enseñan cómo se construye una imagen, qué observar y qué errores evitar. |
| **Personajes** | Un personaje creado una sola vez que se mantiene idéntico entre planos, poses y estilos. |
| **Tu lanzamiento** | Un vídeo de lanzamiento para tu producto a partir de una plantilla: tus peticiones, tus imágenes, tus palabras y tus líneas de instalación, montado sobre una banda sonora. |
Pídelo con tus propias palabras, *«un faro en risografía para nuestra página de empleo, 1600×900»* o *«un explicativo en tiza de cómo se comparan nuestros planes de precios»*, y anidoodle lo dirige al flujo de trabajo y la receta de estilo adecuados, preguntando solo por lo que la petición deje abierto.
## Qué trae dentro
El motor es la mitad fácil. El oficio es la parte que anidoodle carga por ti: seis lecciones, cada una ganada a base de equivocarse primero con una pieza y anotarlo todo, para que tú empieces donde terminó el último proyecto:
- **Historia** le da un sentido a cada pieza. Una idea y un motivo central para una imagen fija; una transformación, una recompensa y un elemento recurrente para una película. → [`storytelling.md`](skills/anidoodle/references/storytelling.md)
- **Realismo** viene de nombrarlo todo. La anatomía, el punto de vista y la referencia que abriste, para que una mariposa se lea como una criatura con cuerpo y venas. → [`realism-and-craft.md`](skills/anidoodle/references/realism-and-craft.md)
- **Estilo** vive en el trazo. Treinta y una recetas completas, una guía para elegir una según el encargo, y los pasos para inventar la tuya propia. → [`styles.md`](skills/anidoodle/references/styles.md)
- **Música** se compone para cada pieza a partir del vocabulario de un género y se sintetiza con código: 21 géneros, una banda y una orquesta completas, todas las tonalidades mayores y menores, un ánimo para cada sección y un tema que se adapta a cualquier duración. → [`music/README.md`](skills/anidoodle/references/music/README.md)
- **Determinismo** es la garantía. Funciones puras y un aleatorio con semilla, para que cualquiera con la fuente reconstruya exactamente la misma pieza. → [`determinism-and-contract.md`](skills/anidoodle/references/determinism-and-contract.md)
- **Método** te mantiene rápido. Demuestra el look en una sola imagen fija, construye de un tirón, y gasta las aprobaciones donde equivocarse sale caro. → [`working-method.md`](skills/anidoodle/references/working-method.md)
Cada formato sale de la misma fuente: PNG, MP4 con su banda sonora, GIF, WebM y PNG animado con transparencia, y un archivo HTML autónomo. → [`formats.md`](skills/anidoodle/references/formats.md)
## Primero dibuja, luego se mueve
 |
 |
| Los trazos se hacen, en el orden en que los haría una mano. |
El plano despierta en acuarela y vuela hacia su prado. |
**▶ La película completa de 47 segundos**, con sonido. 1080×1080 con banda sonora original, cada fotograma y cada muestra de audio generados en código:
https://github.com/user-attachments/assets/019d46d3-536a-4843-9f68-8e8f5f5c3401
Una función pura pinta cada fotograma, así que una ilustración terminada es esa función llamada una vez, un sticker es la misma función en bucle, y una película es esa función con una historia y una banda sonora. Las mismas garantías valen para las tres.
## Paga una vez, dibuja para siempre
Un modelo de imágenes gasta tokens y cómputo en cada fotograma de cada render, y dibuja algo nuevo cada vez. El código los gasta una sola vez. La película de 47 segundos es un único programa: escrito una vez, renderiza los 1.410 fotogramas y una banda sonora estéreo completa, a cualquier tamaño, en cualquier máquina, gratis cada vez que se ejecuta. Eso sale a unos sesenta tokens de código por fotograma en la primera pasada, y cero en cada pasada siguiente. Una imagen fija son unos pocos cientos de líneas. Toda una familia de imágenes es una lista de semillas.
## Empieza aquí
**Claude Code:**
```bash
/plugin marketplace add alexgreensh/anidoodle
/plugin install anidoodle@alexgreensh-anidoodle
```
**Codex:**
```bash
codex plugin marketplace add alexgreensh/anidoodle
```
Después, en la interfaz de Codex, abre `/plugins` e instala anidoodle.
**Grok Build:**
```bash
grok plugin marketplace add alexgreensh/anidoodle
grok plugin install anidoodle --trust
```
`--trust` confirma la instalación; sin él, Grok muestra lo que el plugin puede ejecutar y se detiene. También puedes instalarlo desde la pestaña Marketplace de `/plugins`.
**Cualquier otro agente:** anidoodle es una carpeta de skill estándar (`skills/anidoodle/SKILL.md`), así que puedes copiarla a cualquier entorno que lea skills.
Luego pide lo que quieras: *«dibuja una pera en lápiz y acuarela para nuestra página de recetas»*. Para manejar el motor tú mismo:
```bash
node /engine/tools/scaffold.mjs ~/art --still hero --film intro --format 9x16 --duration 60
cd ~/art && npm install && npx playwright-core install chromium
node tools/still.mjs hero --out out/hero.png --scale 2 # a finished illustration, print size
node tools/render.mjs intro --out out/intro.gif # a loop; also .mp4 with score, .webm with alpha
node tools/emit.mjs intro --out out/intro.html # the whole piece as one offline file
node tools/gate.mjs hero # determinism, contract and dead air in one pass
node tools/verify-export.mjs intro --file out/intro.mp4 # the file you ship, decoded and checked
node tools/music.mjs check score.ts#myScore # your score: key, loudness, balance, novelty
node tools/launch.mjs new myLaunch # a launch film spec; then: launch.mjs ship myLaunch
```
Node 20 o más reciente. Las imágenes fijas solo necesitan el navegador de arriba; todo lo que se mueve también usa `ffmpeg`.
`emit` escribe un único archivo HTML, de unos 100 KB, que reproduce la pieza con sonido con un doble clic, sin conexión. Lleva la receta consigo y lo dibuja todo de nuevo desde cero cada vez que lo abres. Adjúntalo a un correo y habrás enviado todo un estudio.
Cuatro backends comparten un mismo núcleo de arte, y el núcleo vive felizmente ajeno a cuál de ellos está dibujando: `playwright`, `html-player`, `remotion`, `hyperframes`.
## La película de ejemplo
`skills/anidoodle/example/` contiene **Mechanical Lepidoptera**: 1.410 fotogramas, 47 segundos, una mariposa de relojería que se dibuja a sí misma, cobra vida en acuarela y deja su plano entre la hierba. Es el motor entero en una sola pieza: puntos de control colocados a mano sobre anatomía real, una clave de caché que nombra cada entrada de la que depende un píxel, una banda sonora compuesta para ella, y un movimiento continuo desde el boceto hasta la vida. Las láminas de estilo están junto al motor en `skills/anidoodle/engine/src/canvas-core/`, cada una con su receta escrita en la parte de arriba. Abre cualquiera de ellas, cambia un número, y mira qué se mueve.
## Honesto por diseño
El sonido y el movimiento se ganan lo que afirman. Cada afirmación sobre la banda sonora o el movimiento lleva detrás una medición o el ojo de una persona, y una marca verde solo cuenta cuando se ha vuelto a ejecutar. Esa disciplina es la razón por la que la misma pieza vuelve idéntica, byte a byte, cada vez, en cualquier máquina.
---
Publicado bajo la [Apache License 2.0](LICENSE). Copyright 2026 Alex Greenshpun.
Hecho con anidoodle, que aprendió todo lo que sabe dibujando la mariposa unas cuantas veces, con total honestidad.