🦞 Corriendo en OpenClaw

Esta versión corre en un agente OpenClaw (servidor + Telegram), no en Claude Code. Antes de seguir, lee la skill f100k-puente: traduce herramientas y rutas. Lo específico de esta skill:

• Todo corre en el servidor, sin créditos: necesita node, ffmpeg y Chrome (/usr/bin/google-chrome-stable, el .deb del taller). La primera vez: cd skills/animacion-dibujada-f100k && npm i (playwright-core). Si falta algo, dilo en una línea y ofrece instalarlo con el prompt del taller.
• Los MP4 y las hojas de contacto van a entregables/animaciones/. Antes de renderizar un clip, genera la hoja (--hoja .5), MÍRALA y corrige; luego manda el MP4 por Telegram.
• Recortar fotos y detectar la cara (recortar.swift, cara.swift, preparar-foto.mjs) son SOLO de Mac: en el servidor no corren. Para el sticker o el títere con foto, pide a la usuaria su foto YA recortada (PNG con fondo transparente, p. ej. desde «Copiar sujeto» del iPhone) y, si quiere parpadeo, escribe tú la posición de ojos y boca en el JSON de cara mirando la foto.
• La voz de prueba de armar-corto.mjs usa say (Mac). En el servidor pide la voz grabada de la usuaria (nota de voz de Telegram → ffmpeg a .m4a) y úsala como voz del plan con el inicio de cada escena; sin voz, arma el corto con dur fija por escena.
• Subtítulos por palabra: mlx-whisper es solo de Mac. En el servidor, si existe whisper (openai-whisper) lo usa; si no, deja "sincronia": "largo".
• La ficha del personaje la escribes tú MIRANDO las fotos de la usuaria (cerebro/fotos/): pelo, piel, ropa, accesorios. Nunca pixeles la foto.

Animación dibujada (cada cuadro en código)

Cada cuadro es una función de su número: draw(frame) pinta en un canvas y un Chrome sin ventana lo fotografía cuadro por cuadro hasta armar el MP4. No hay imágenes, ni modelo de video, ni créditos. La pieza no es decoración: dice la frase que vende del guion, en el momento en que se dice.

Técnica adaptada de iart-ai/javascript-animation-skills (MIT, scripts/LICENSE-iart-ai.txt). El render y todos los estilos son propios.

El camino (siempre este)

1. Elige el estilo por lo que dice el guion en ese momento (tabla abajo). Un reel lleva 1 o 2 clips, no más: son el golpe visual, no el reel.
2. Ármalo en la carpeta del proyecto (un solo archivo, con el núcleo adentro): node skills/animacion-dibujada-f100k/scripts/armar.mjs <estilo> "$DEST/animaciones/<nombre>.html"
3. Cambia SOLO el bloque «LO QUE PUEDES CAMBIAR»: la frase, los colores y la duración. Nada más. Si la marca tiene paleta (DESIGN.md o el manual), úsala ahí.
4. Revisa antes de renderizar (esto lo haces tú, no la persona): node skills/animacion-dibujada-f100k/scripts/renderizar.mjs <pieza>.html /tmp/hoja.jpg --hoja .5 y mira la imagen. Luego 2 cuadros a tamaño completo (--cuadros 2s,5.5s) para leer el texto. Checklist abajo. Corrige y vuelve a mirar. Pasa el criterio anti-deformación (sección de abajo) en cada cuadro grande.
5. Renderiza: node .../renderizar.mjs <pieza>.html "$DEST/animaciones/<nombre>.mp4" (~3 s por clip).
6. Entrega la ruta del MP4 y la fila del MANIFEST (sección de abajo).

Primera vez en una máquina: cd skills/animacion-dibujada-f100k && npm i (instala playwright-core). Necesita Node 18+, ffmpeg y Google Chrome (Mac, Windows o Linux). Opcionales: recortar fotos y detectar la cara (recortar.swift, cara.swift) solo en macOS 14+; subtítulos por palabra con mlx-whisper (Mac con Apple Silicon) u openai-whisper.

Qué estilo elegir

📷 = usa fotos reales. Copia las fotos a $DEST/animaciones/fotos/ (achícalas antes: sips -Z 1400 foto.jpg --out fotos/foto-1.jpg) y pon la ruta relativa en FOTOS/FOTO. Las fotos son de la persona dueña de la cuenta, nunca de bancos de imágenes ni de otra gente. Si una foto no carga, el render se detiene y te dice cuál: nunca sale un cuadro vacío.

La frase del clip sale del guion literal: la línea que dice la persona en ese momento, recortada. Nunca inventes cifras ni promesas que el guion no dice.

El sistema: tu personaje, tu rubro y cortos completos

Los estilos de arriba son clips sueltos. Para cualquier persona y cualquier rubro, las piezas se combinan en 4 capas: LOOK (vector, pixel, papel…) × PROTAGONISTA × ESCENA × MONTAJE (clip, inserto o corto de 30-90 s).

Protagonista: de dónde sale el personaje

Las fichas viven junto al proyecto de la persona, no en la skill. En personajes/ solo hay ejemplos. Esquema y ejemplos: personajes/ejemplo-*.json. Personaje y títere tienen la MISMA API: p.dibujar(ctx, x, y, { accion, t, mira }) con las acciones quieto, caminar, saludar, señalar, saltar, hablar, festejar, pensar, presentar y contar (con n). (x, y) = los pies. El personaje suma expresion (feliz, sorpresa, duda, triste, guiño) y camina DE PERFIL: pásale velocidad (px/s) para que los pies no patinen y desdePerfil para que gire de frente al llegar (escena-personaje ya lo hace). El títere suma gestos dibujados alrededor (mitón que saluda, flecha con hacia, nube de pensar, destellos), estilo: 'foto'|'sticker'|'recorte-papel' y, si el dibujo tiene brazos separados, partes para rotarlos. Fotos → recorte y cara (gratis, local, macOS 14+): node scripts/preparar-foto.mjs foto.jpg carpeta/ deja <nombre>-recorte.png + <nombre>-cara.json (usa recortar.swift y cara.swift, del framework Vision de Apple).

Límites honestos: las criaturas caminan de frente (solo gira la cabeza). En pixel, contar no muestra la cifra. La boca de una FOTO es sutil (acompaña la voz, sin audio casi no se nota). En fotos no hay brazos que mover: el gesto lo cuentan los elementos gráficos. Personaje de 700 px o más.

Rubro: escenario y objetos

nucleo/objetos.js + nucleo/kits/*.js: dibujarObjeto(nombre, x, y, tam, { t, estilo, anim: 'aparece'|'flota'|'late'|'brilla' }), escenario(nombre, t, { estilo, paleta }), kitDe(rubro), objetosDisponibles(). Todo en vector o en pixel. Kits hechos (12): pasteleria, psicologo, dentista, restaurante, nutricionista, tienda-ropa, inmobiliario, makeup, fitness, centro-estetico, joyeria, veterinaria, más 16 objetos genéricos de negocio (celular, calendario, bolsa, billete, estrella, lupa, regalo…). Extras de composición: anim: 'entra-izq'|'entra-der'|'cae', medidaObjeto(nombre), componerFila(nombres, {…}), sombraContacto(...). Un kit nuevo se carga agregando su <script src="../nucleo/kits/<rubro>.js"> en kit-de-rubro, escena-personaje y receta-paso-a-paso. ¿Rubro sin kit? Usa generico y dibuja los objetos que falten con registrarObjeto(...) siguiendo el estilo del catálogo (contorno oscuro, 2 tonos, sombra plana y un detalle característico). Si un niño de 8 años no lo reconoce, simplifícalo. Después agrégalo como kit nuevo en nucleo/kits/.

Montaje: cortos de 30-90 s

Lo más fácil: un PLAN. node scripts/armar-corto.mjs plan.json <carpeta> arma todas las escenas con sus cambios (texto, fichas, objetos), genera una voz de PRUEBA para medir tiempos si aún no hay voz grabada y deja el guion.json. Formato del plan: comentario al inicio de scripts/armar-corto.mjs. Regla de criterio: las escenas que YA muestran su texto (pizarra, ticket, post-its, notificaciones, kit, receta) van con "subtitulo": false; el subtítulo va donde aporta (chat, personaje sin globo) o se dobla lo que se lee.

node scripts/corto.mjs guion.json corto.mp4. Cada escena es una pieza armada. Los tiempos salen de la voz (inicio de cada escena), con transiciones (corte, fundido, barrido-izq, barrido-arriba, zoom, circulo, y dibujadas: tinta, pagina, pixel), subtítulos quemados ("sincronia": "palabra" los alinea con la voz real vía mlx-whisper local, con la palabra dicha resaltada; "posicion": "auto" busca la franja libre), música con ducking bajo la voz y la voz mezclada. "encajar": true acelera la escena (hasta 1,8×) para que termine a tiempo. Antes de renderizar: node scripts/hoja-corto.mjs guion.json hoja.jpg, y mírala. Formato completo y consejos: cortos/LEEME.md. 40 s de corto se renderizan en unos 18 s. La voz es la de la persona, grabada. say sirve SOLO como voz de prueba para medir tiempos: nunca se entrega.

Criterio anti-deformación (no se negocia)

Un clip con algo deforme no se entrega, aunque el texto esté perfecto. Lo que salga raro se quita o se cambia, no se entrega «así».

1. Nada de anatomía dibujada en vector: manos, brazos, dedos, muñecas ni caras realistas. En canvas salen como una bola de piel con un palo encima, que no sostiene nada. Lo que escribe (tiza, plumón, lápiz) va solo y flota: herramientaMagica(px, py, t, aparece, seVa, { tipo: 'tiza' | 'plumon' }) del núcleo, con brillo, chispas y destello al entrar y salir.
2. Excepción: personajes estilizados a propósito (el cuadrito con brazos de palito, el mago en pixel art). La anatomía es una convención del dibujo, no un intento de parecer real. Se declaran con // ANATOMIA: estilizada — <por qué> en la pieza.
3. El freno automático: renderizar.mjs lee el código antes de abrir Chrome. Si encuentra mano, brazo, dedo, piel, manga… sin la declaración de estilizada, se detiene y dice qué encontró. No lo esquives renombrando variables: cambia el dibujo.
4. Mirando los cuadros grandes (esto lo hace el ojo, no el freno), por cada objeto pregúntate:
   • ¿Se entiende qué es sin explicarlo? ¿Un niño de 8 años diría lo mismo?
   • ¿Se une bien con lo que toca (el objeto con la mano, el cartel con el palo, la tapa con el plumón)? ¿Nada flota por error?
   • ¿Tapa texto ya escrito? Nada puede cubrir la frase que vende, ni un cuadro.
   • ¿Es más grande que el texto? Lo que escribe es un acento chico, no el protagonista.
   • ¿Un marco, círculo o subrayado se come la letra de al lado? Si alguna respuesta es mala, simplifica: quita el objeto, hazlo más chico o cámbialo por una forma que no pueda salir mal.

Checklist (mirando la hoja de contacto y los cuadros grandes)

• Pasa el criterio anti-deformación (arriba).
• El texto se lee completo en un celular, sin salirse del cuadro ni de su caja.
• Nada importante fuera de la zona segura de Instagram (250 px arriba y 450 px abajo libres).
• El último cuadro está quieto y con el texto completo (el clip termina, no se corta).
• Tuteo y español neutro en todo texto visible. Tildes bien puestas (salvo en mago-pixel, que no las tiene).
• Nada de marcas ajenas: ningún personaje de otra empresa (tampoco el de Claude), ningún logo.

Meterlo al reel (editor-video-formula100k)

Cada clip es un MP4 1080×1920 sin audio: entra como B-roll de video a pantalla completa. Fila para el MANIFEST:

## B-roll
| Keyword | Archivo | Duración | Estilo |
|---|---|---|---|
| lo que nadie te dice | animaciones/gancho-libreta.mp4 | 4s | monitor-photo |

La keyword es una frase que la persona dice en la grabación (el editor la busca en la transcripción). La duración del B-roll puede ser menor que la del clip: el editor lo corta. Para CapCut: se pone en la pista de arriba en ese momento, sin croma (el clip ocupa toda la pantalla).

Estilo nuevo (si ninguno sirve)

Copia el estilo más parecido dentro de estilos/ con otro nombre y cambia el dibujo. Reglas del motor (nucleo/nucleo.js):

• Función pura del tiempo. Nada de Math.random, Date ni animaciones CSS: usa rng(semilla) y hash2(a,b). Si no, el render y la vista previa no coinciden y el video parpadea.
• Hervor, no temblor. La línea a mano cambia cada 3-4 cuadros (BOIL = Math.floor(frame/4)), no en cada cuadro.
• Cuerpos con formas redondeadas (circle, roundRect), nunca polígonos de pocos puntos.
• Sin anatomía realista: si algo escribe o señala, flota solo (herramientaMagica). Ver «Criterio anti-deformación».
• Pixel art de verdad: pinta en una grilla chica y agrándala con imageSmoothingEnabled = false (ver mago-pixel). Un solo tamaño de pixel en toda la escena.
• Texto medido: autoajuste() elige tamaño y renglones (prefiere menos renglones y parejos; un espacio duro \u00A0 no se corta). Si no cabe, avisa en consola y renderizar.mjs muestra el aviso: léelo siempre al final del render.
• Fotos reales: cargarFotos([...]) al inicio y fotoCover(img, x, y, w, h, fx, fy) para pintarlas recortadas sin deformar (ver scrapbook-fotos). Los filtros de canvas (ctx.filter) sirven para revelar o envejecer la foto: son deterministas.
• Fuentes solo del sistema (LETRA_MANO, LETRA_LIMPIA): cero descargas.
• Cuando el estilo nuevo pase el checklist en 2 piezas distintas, agrégalo a la tabla.

Lo que esta skill NO hace

Video realista o con personas (Higgsfield / storytelling-animado-f100k), editar el reel completo (editor-video-formula100k), overlays con fondo verde para CapCut (animaciones-para-tu-video-f100k), música. Si lo piden, dilo en una línea y manda a la skill que sí lo hace.