Explainer animado

Este skill produce una página HTML autocontenida. La página se reproduce sola, escena por escena. Cada escena acompaña un bloque del guion. Quien narra graba su voz encima o graba la pantalla en modo grabación. El mismo HTML exporta un MP4 cuadro por cuadro.

Archivos

En los comandos, SKILL_DIR es la carpeta de este archivo.

Paso 0: entender el estilo

El mismo motor sirve para estilos muy distintos. Preguntá antes de investigar o escribir.

Perfil guardado

1. Buscá perfil.md en SKILL_DIR.
2. Si existe, resumilo en una línea. Por ejemplo: "Vertical, Noche, la narrás vos, 60–90 s, karaoke".
3. Preguntá "¿Uso este perfil?". Si la respuesta es sí, salteá las preguntas.

Preguntas

• Hacé todas las preguntas en una sola tanda.
• No preguntes lo que el pedido ya responde.
• Si tenés una herramienta de preguntas con opciones, como AskUserQuestion, usala. Admite 4 preguntas por llamada: usá dos llamadas.
• Sin esa herramienta, escribí un solo mensaje con preguntas numeradas, opciones y un default marcado. Aclará: "Respondé solo lo que quieras cambiar".

Ronda 1:

Describí cada estilo en una línea con los datos de references/estilos.md. Si la herramienta admite 4 opciones, nombrá Plano técnico y Tu marca en el texto de la pregunta: el usuario las elige con "Otro".

Ronda 2, solo lo que falte:

Si elige "Imitá un texto mío", pedí que pegue un texto suyo. Si el usuario tiene un skill propio de escritura en su voz, usalo para el guion.

Defaults si responde "elegí vos": vertical 9:16, la grabo yo, Noche, 60–90 s, claro y neutro, karaoke, idioma del pedido.

Guardar el perfil

Escribí SKILL_DIR/perfil.md con las respuestas:

formato: 9:16
voz: la grabo yo
estilo: Noche
duracion: 60–90 s
tono: cercano y con humor
subtitulos: karaoke
idioma: español rioplatense, voseo
referencia_de_voz: (texto pegado o nombre de un skill de escritura, opcional)

Si la carpeta es de solo lectura, mostrá el perfil en un bloque. Así el usuario lo pega la próxima vez.

Qué cambia según la voz

La regla central: la pantalla acompaña la voz

La gente escucha la voz. La pantalla no repite lo que dice la voz.

• No pongas títulos, rótulos, leyendas, chips de estado ni listas.
• Convertí cada concepto en un ícono o en una acción animada.
• Dejá solo el texto que funciona como ícono: años en una línea de tiempo, una fecha en un calendario, un nombre de archivo en una ventana.
• Usá como máximo 4 palabras en pantalla por escena, sin contar los subtítulos.
• Los subtítulos son el único texto real.

Por qué: un título compite con la voz. Nadie lee y escucha a la vez.

En un video sin voz, los subtítulos simples cumplen el papel de la voz. La regla sigue igual: el dibujo no repite el texto.

Excepción: un prompt o un texto para copiar

Cuando la voz dicta un texto que el público va a copiar, ese texto va en pantalla.

• Escribilo dentro de una barra, palabra por palabra, cuando la voz lo dice. F.words trae cada palabra con su segundo.
• Pintá la palabra dicha con el color de acento.
• Ocultá los subtítulos de esa escena con noSubs: true.
• Debajo del texto, animá lo que hace cada instrucción.

Cuadro completo

El dibujo toca los cuatro bordes del cuadro. Nunca lo encierres en una franja o en una caja con el resto vacío.

• El lado corto del cuadro mide 100 unidades de mundo. El origen es el punto de la cámara.
• F.area es la zona de acción. Ahí van el héroe y el evento de la palabra clave.
• Seguí dibujando detrás de los subtítulos hasta el borde: el suelo, el cuerpo, la continuación del objeto.
• Detrás de los subtítulos usá tonos oscuros. Si el dibujo es claro o cargado, llamá a scrim().
• En vertical, apilá el sujeto de arriba abajo. En horizontal, repartilo de izquierda a derecha.

Las zonas exactas y la composición de cada formato están en references/formatos.md.

El gancho: los primeros segundos

El gancho es lo más importante. Los primeros 10 segundos llevan el movimiento más fuerte.

• Hacé del cuadro 0 una composición terminada y llamativa. Es la miniatura.
• Usá movimientos de cámara grandes: un plano cerrado que se aleja, un foco, una implosión, una construcción en vivo.
• Cambiá de plano en cada palabra fuerte de la voz.
• Evitá íconos chicos quietos y diagramas de lado a lado en el gancho.
• Revisá el gancho con --fotos gancho antes que el resto.

Prueba de cada escena

Antes de construir, pasá cada escena por dos preguntas:

1. ¿Se entiende mirando la animación y leyendo solo los subtítulos?
2. ¿Hay texto en pantalla que repite la voz?

Una escena que es una lista, un número grande, una cuenta regresiva o una leyenda falla la prueba. Rediseñala como una acción. references/escenas.md tiene los patrones.

Flujo en dos pasos

Reconstruir una animación cuesta mucho más que corregir un texto. Por eso se aprueba primero el plan.

Paso 1: investigación, guion y storyboard

1. Investigá. Buscá fuentes primarias. Verificá cada cifra. Distinguí lo confirmado de lo reportado. Guardá los links para el panel de fuentes. Sin búsqueda web, trabajá con el material del usuario y marcá cada dato dudoso con [VERIFICAR].
2. Escribí el guion con el tono del perfil. Si el usuario trajo su guion, respetalo y solo partilo en bloques.
   • Primera frase: un gancho. Un dato con fecha, una paradoja, una pregunta que pica o una confesión.
   • Una idea por bloque. Cada bloque tiene de 1 a 3 frases.
   • Números concretos en lugar de "mucho" o "poco".
   • Una analogía física por cada concepto abstracto. Esa analogía se dibuja literal.
   • Un cierre que no resume: una imagen, un giro o una frase que vuele sola.
   • Evitá las fórmulas gastadas, como "no es X, es Y".
   • Escribilo para decirlo en voz alta. Leelo en voz baja antes de entregarlo.

3. Calculá el largo. La voz rinde unas 2,5 palabras por segundo.

   Duración	Bloques	Palabras
   30–45 s	5–6	80–110
   60–90 s	7–9	160–220
   2–3 min	12–18	300–450

   Para más de 3 minutos, proponé partirlo en capítulos de un explainer cada uno.

4. Armá el storyboard. Escribí una línea por escena con la acción visual. Cada línea responde cinco preguntas:
   • Héroe: ¿cuál es el único movimiento principal?
   • Palabra clave: ¿con qué palabra de la voz coincide?
   • Escala: ¿qué magnitud se compara con otra?
   • Continuidad: ¿qué elemento viene de la escena anterior y cómo se transforma?
   • Imagen final: ¿qué cuadro queda quieto y legible al terminar?
5. Presentá guion y storyboard en el chat. Esperá el OK. Si el usuario dice "hacelo directo", salteá la espera.

Paso 2: construcción

1. Copiá assets/plantilla.html a la carpeta de trabajo con un nombre nuevo.
2. Completá CONFIG: formato, subtitulos y ritmo, según el perfil.
3. Aplicá el estilo: tokens de :root, link de fuentes y reglas de trazo de references/estilos.md.
4. Reemplazá el contenido. La sección "Qué tocar del motor" dice qué cambia.
5. Sincronizá cada evento clave con F.at('palabra'). Seguí la sección "Sincronía".
6. Aplicá los números de references/movimiento.md. Un héroe por plano. Los secundarios arrancan 150 ms después.
7. Simulá la reproducción:

   node SKILL_DIR/scripts/simular.cjs explainer.html

   El resultado tiene que ser OK sin avisos. Un aviso de at() indica una palabra que no está en la escena.
8. Corré el laboratorio de fotos, si hay Playwright:

   node SKILL_DIR/scripts/render.mjs explainer.html --fotos gancho
   node SKILL_DIR/scripts/render.mjs explainer.html --fotos finales

   • La primera vez, instalá las dependencias: cd SKILL_DIR/scripts && npm install && npx playwright install chromium.
   • Abrí out/hoja.png con Read. Describí cada cuadro como un espectador.
   • Comparalo con el storyboard. Pasá la lista de references/formatos.md.
   • Corregí con notas que nombran escena y segundo. Repetí hasta que cada escena pase.
   • Sin Playwright, salteá este paso y pedile al usuario que revise el resultado.
9. Entregá con la sección "Entrega".

Qué tocar del motor

La plantilla está dividida en secciones numeradas.

Conservá: 3 Formatos, 4 Tokens y utilidades, 5 Lienzo y cámara, 6 Ayudantes, 7 Íconos, 10 a 12 Motor y contrato de render. También el CSS del cuadro, los subtítulos, el panel, el modo grabación y el interruptor de subtítulos.

Reemplazá:

• Sección 1 CONFIG: los valores del perfil.
• Sección 2: SCRIPT con un bloque por escena y SAY con la forma hablada de números y siglas. Por ejemplo, '2018': 'dos mil dieciocho'.
• Sección 8: los dibujos del tema. Borrá los del cielo.
• Sección 9 SCENES: un objeto por escena.
• El panel: <title>, título, "Qué es ilustración" y "Fuentes". Las aclaraciones de honestidad van ahí, nunca en el cuadro.
• Los tokens de :root y el link de fuentes, según el estilo.
• Los textos de la interfaz, al idioma del usuario.

Una escena

{
  alt: 'Descripción para lectores de pantalla.',
  cam: F => [[0, 0, 0, 1], [F.at('estadio'), 0, -20, 2.5]], // opcional: [t, x, y, zoom]
  noSubs: false,                                           // opcional
  draw(t, F) { /* dibujá en unidades de mundo */ }
}

draw recibe t, los segundos desde el inicio de la escena, y F:

Medí todo con F.area. Así la escena se adapta a cualquier formato. La plantilla muestra el patrón con axis(F) y viewer(F).

Ayudantes de dibujo: bleed(color o [arriba, abajo], a) pinta toda la pantalla. fixed(fn) dibuja sin cámara. scrim(a) oscurece la zona de subtítulos. txt, line, rrect y dot dibujan en unidades de mundo.

Sincronía

• Anclá cada evento clave a una palabra con F.at('palabra'). No escribas segundos fijos para esos eventos.
• F.at funciona con tiempos estimados y con audio real. Al cambiar el audio, todo se mueve solo.
• Para un movimiento, sumá duraciones cortas a ese ancla. Por ejemplo, seg(t, F.at('lamparita'), F.at('lamparita') + .4).
• La duración estimada de cada palabra es 0,1 s + 0,038 s por letra. Cada coma suma 0,17 s y cada punto 0,38 s.
• Dejá la última imagen de cada escena quieta y legible. Con prefers-reduced-motion, el motor muestra solo ese estado.
• Dentro de draw, nunca uses Date.now, performance.now ni Math.random sin semilla. Usá rng(semilla). Así cada cuadro sale igual en la página, en las fotos y en el MP4.

Con una voz ya grabada, seguí references/audio.md.

Entrega

1. Publicá o abrí el HTML.
   • Si tenés la herramienta Artifact, publicalo con icon: "video". Antes, seguí lo que pida la herramienta. Avisá que el artifact es privado hasta que el usuario lo comparta.
   • En claude.ai, entregalo como artifact HTML.
   • Si no, guardalo y abrilo en el navegador: open explainer.html en macOS, start explainer.html en Windows, xdg-open explainer.html en Linux.
2. Pegá el guion limpio en el chat, un bloque por escena, listo para grabar.
3. Explicá cómo grabar. Modo grabación oculta los controles y arranca de cero. La tecla S oculta los subtítulos. La tecla H sale del modo.
4. Exportá el MP4 si hay Node, Playwright y ffmpeg. Corré los dos renders en segundo plano:

   node SKILL_DIR/scripts/render.mjs explainer.html --fps 30
   node SKILL_DIR/scripts/render.mjs explainer.html --fps 30 --query bare=1 --nombre explainer-sin-subtitulos

   El lado corto sale en 1080 px. La versión sin subtítulos sirve para editar sobre la voz real. Para sumar la voz al MP4, seguí references/audio.md.
5. Ofrecé dos cosas en una línea: resincronizar con la voz grabada y armar otra versión en otro formato. Para previsualizar otro formato, agregá ?formato=16:9 a la URL. Después recomponé cada escena para ese formato.

Idioma

• El guion y los subtítulos van en el idioma y el tono del perfil.
• Las respuestas en el chat van en el idioma del usuario.
• Traducí los textos del panel y de los botones al idioma del usuario.