Ecoupdigital/video-animado

/video-animado

Hace video narrado con animación 2D dibujada en código (SVG + Remotion). Regla inquebrantable: ninguna herramienta externa de imagen o video por IA (nada de Kling, Veo, Flow, Magnific, generadores de imagen). Personaje, escenario y objetos nacen de formas, caminos SVG y texto. Esto mantiene al personaje idéntico en cada escena y el proceso copiable.

Estado: creada el 08/11/2026, aún no probada de punta a punta. En la primera ejecución real, anota en "Trampas" lo que falle.

Cómo hablar con la persona

• Portugués de Brasil, tono de profesor práctico, tratamiento "tú" si la persona usa "tú", sino "usted". Sin guion.
• La persona puede no ser técnica. Di lo que sucedió y qué cambia para ella. Código y rutas solo si ella lo pide.
• Cada pregunta usa AskUserQuestion, una por vez, con 2 a 4 opciones, la recomendada primero y marcada "(Recomendado)". Cuando la persona diga "decide por mí", "da igual" o algo similar, elige la recomendada y sigue, diciendo lo que elegiste.
• Nunca preguntes lo que se puede descubrir mirando los archivos.

Dónde viven las cosas

• Estudio: la carpeta de trabajo de video de la persona. Busca ~/mi-estudio/; si no existe, pregunta dónde está, o usa la carpeta actual.
• Brandbooks de animación: <estudio>/animacion/<nombre-del-universo>/
  • BRANDBOOK-ANIMACION.html: versión bonita, para ver y compartir
  • BRANDBOOK-ANIMACION.md: la versión que lee Claude (mismas reglas; si una cambia, cambia en las dos)
  • personajes/<nombre>/: FICHA.md, Personaje.tsx (el dibujo en código) y expresiones.png
  • escenarios/: un componente por escenario (Casa.tsx, Calle.tsx…)
  • pronuncias.md (opcional): cómo debe sonar cada término en la voz y aparecer en el subtítulo
• Videos: <estudio>/animacion/<nombre-del-universo>/videos/AAAA-MM-DD-slug/
• Entrega: ~/Descargas/AAAA-MM-DD_<slug>_animado.mp4

Un brandbook es un universo (un "mundo" con nombre propio). Dentro de él hay 0, 1 o varios personajes.

Flujo

0. Encontrar el brandbook

Busca por tu cuenta: carpeta animacion/ en el estudio y en la carpeta actual, y archivos BRANDBOOK-ANIMACION.*. Lista lo que encuentres y pregunta:

• Usar uno de estos (uno por universo encontrado)
• Señalar otra ruta (incluso un brandbook recibido de otra persona)
• Crear uno nuevo

Si no encuentras nada, dilo y ve directo a crear. Si usas uno existente, lee el .md y las fichas y salta a la Parte B.

Parte A. Crear el brandbook (primera vez)

Avisa al principio: "voy a hacer unas 25 a 35 preguntas, una por vez, y en cualquier momento puedes decir 'decide por mí'". Entre los bloques, haz un resumen corto de lo que quedó decidido y pregunta si está correcto. Banco de preguntas y opciones en references/preguntas.md (léelo antes de empezar).

Los 7 bloques, en este orden:

1. Universo: nombre (sugiere 3 nombres), tema de los videos, público, tono.
2. Personajes: cuántos (0, 1 o varios). Para cada uno, la ficha completa (género, edad, rostro, cabello, ropa, personalidad, acompañantes como perro, bebé o planta, voz).
3. Escenarios: cuáles existen (casa, oficina, calle, naturaleza, espacio abstracto…), qué habitaciones o lugares, hora del día, objetos fijos.
4. Narrativa: qué hace cada personaje, cómo se comporta, dónde frecuenta, cómo habla, qué nunca haría, cómo se relacionan los personajes.
5. Visual: estilo del dibujo posible en código, paleta (hex exactos con proporción de uso), fuentes, nivel de detalle.
6. Movimiento: entrada y salida de escena, expresiones, ritmo, respiración y parpadeo, reglas de animación, qué no hacer nunca.
7. Cierre: resumen general, voz de la narración (ver abajo), nombre final del brandbook.

Sin personaje también vale: video solo de escenarios, texto y formas. En ese caso salta el bloque 2 y los bloques 3 a 6 hablan solo del mundo y del ritmo.

Voz de la narración, guardada en el brandbook para no preguntar de nuevo, con 3 caminos:

1. voz clonada de la persona en ElevenLabs;
2. voz predefinida de ElevenLabs, que la skill sugiere según el personaje;
3. la persona ya tiene el audio grabado y la skill solo lo usa. Con varios personajes, cada ficha guarda la voz del personaje.

Entregas de la Parte A:

• BRANDBOOK-ANIMACION.md y BRANDBOOK-ANIMACION.html (estructura en references/brandbook-html.md).
• Para cada personaje: FICHA.md, Personaje.tsx con propiedades expresion, hablando, mirando, escala (la boca acompaña el volumen de la narración) y expresiones.png, una imagen con todas las expresiones lado a lado.
• Un componente por escenario.
• Una imagen de prueba con el personaje dentro de un escenario.

Solo sigue cuando la persona apruebe visualmente las expresiones y la imagen de prueba. Si el dibujo en código no sale bueno, simplifica el dibujo (menos detalle, más forma). Nunca cambies por herramienta externa.

Parte B. Hacer el video

1. Pregunta única (solo lo que falte): tema, duración (30 a 60 s por defecto), formato (vertical 1080x1920 por defecto, 30 fps), qué personajes y escenarios entran.
2. Gancho y guion para ser ESCUCHADO (lee references/guion.md). Primero 3 opciones de gancho de tipos diferentes, la persona elige. Luego el guion: frases cortas, número escrito como se habla, sin paréntesis ni sigla difícil, sin las frases prohibidas de la lista. Al lado de cada frase: la escena, quién aparece, la expresión y qué surge en la pantalla. Respeta la narrativa del brandbook. Al final, lista por separado las afirmaciones de hecho que la persona necesita confirmar. Guarda en videos/<fecha-slug>/guion.md y solo sigue con la aprobación de la persona.
3. Narración, por el camino de voz guardado en el brandbook. Muestra el audio y espera aprobación. Frase extraña: genera de nuevo solo esa frase. Usa el pronuncias.md si existe. Guarda narracion.mp3.
4. Tiempo de cada palabra. Transcribe la narración con marcas de tiempo por palabra (la herramienta de transcripción que el estudio ya tiene, la del curso de edición: mlx-whisper en Mac). Corrige errores típicos de Whisper en nombres de productos y términos técnicos. Si la persona no tiene transcriptor instalado, dilo y ayuda a instalar antes de seguir.
5. Proyecto Remotion en videos/<fecha-slug>/ (usa la skill remotion-best-practices). Un audio de fondo (narracion.mp3). Cada escena importa los componentes del brandbook, nunca redibuja personaje o escenario. Boca: extrae el volumen del audio por fotograma y úsalo como hablando, con un suelo para que no tiemble en el silencio. Cada elemento nace en la palabra que lo cita. Subtítulo palabra por palabra en el estilo del brandbook. Hooks de React nunca dentro de if o después de return anticipado.
6. Revisar antes de renderizar. npx tsc --noEmit, luego un fotograma de cada escena. Mira la imagen: personaje entero e igual a la ficha, texto sin superponer ni exceder el ancho, dentro del área segura, boca sincronizada con la voz, expresión y escena correctas en el tiempo correcto. Detalles en references/revisiones.md.
7. Renderizar, revisar y entregar. mp4 (H.264, audio AAC) en ~/Descargas/. Ejecuta scripts/checar_video.py (volumen, tamaño, silencio), genera un contact sheet y llama al revisor independiente (subagente que no vio el montaje, briefing en references/revisiones.md). Corrige lo que sea grave o medio y renderiza de nuevo. Entrega también la portada y el subtítulo del post, y ofrece los formatos 1:1 y 16:9 (references/guion.md). Di qué hay en cada escena, la duración, qué opinó el revisor y qué cambió, qué debe revisar la persona de oído (tú no oyes audio) y dónde está el proyecto.
8. Ajustes. La persona pide en palabras comunes ("el muñeco está muy serio", "aparece más rápido") o por el tiempo ("cambia el título en 0:12"). Convierte tiempo en fotograma, toca solo la escena afectada y muestra el fragmento antes de renderizar todo. Si la regla vale para los próximos videos, actualiza el brandbook (las dos versiones); si vale solo para este, el proyecto.

Sugerencia de nombre

Siempre que se cree el brandbook, sugiere 3 nombres de universo (cortos, fáciles de pronunciar) y deja que la persona elija o escriba otro. El nombre se convierte en el nombre de la carpeta (kebab-case) y el título del HTML.

Trampas

• Personaje fuera del brandbook: cada escena importa el mismo componente.
• Boca moviéndose sin hablar, o parada con habla: sincronizar por amplitud, con suelo.
• Herramienta externa por pereza: si el dibujo no sale, simplifica.
• Gastar crédito de voz sin el guion aprobado. Antes de generar la narración, di cuántos caracteres se usarán para la voz y espera el sí.
• Entregar sin pasar por el revisor independiente: quien montó no ve sus propios errores.
• Guardar el brandbook solo en HTML: Claude lee el .md, mantén los dos iguales.
• (Rellenar en la primera ejecución real.)