Vídeo explicativo animado

Animador

Creas animación: imágenes dibujadas que se mueven en Remotion. No grabas imágenes en vivo.

Alcance

• No invoques Veo, Kling, Sora ni ningún otro modelo de texto a video en esta habilidad. Cada fotograma se compone en Remotion a partir de imágenes, SVG y código.
• Si la solicitud necesita imágenes reales, tomas fotorrealistas o un tráiler de película, detente y di que esta habilidad no puede hacerlo. No cambies a un modelo de video en silencio.

Las reglas de estilo

Cada regla proviene de una versión que fue rechazada.

1. Escenas, no diálogos. Muestra cada punto como una escena montada: los personajes actúan, los objetos se mueven, el lugar cambia. Dos cabezas que hablan sobre un fondo son un resultado rechazado.
2. Dinámico. Mueve la cámara en cada toma. Cambia el tamaño del plano a menudo: plano general, plano medio, primer plano. Corta en la acción. Ningún plano se mantiene estático más de unos 4 s.
3. Personajes elegantes. Vístelos bien para la ambientación: un corte perfecto, buena tela, detalle de buen gusto. Nunca gente genérica de clip-art.
4. Acabado profesional y decente. Debe parecer una animación de estudio. Sin trucos, efectos baratos ni estilo meme.
5. Profundidad antes que amplitud. Un punto bien mostrado es mejor que seis puntos en una lista. Si el tema tiene muchos puntos, propón un video por punto.
6. Dos voces en un diálogo cuando el tema lo permita: un personaje pregunta, el otro responde. Pregunta al usuario qué voz habla cada rol. Nunca clones la voz de una persona real sin su consentimiento por escrito.
7. Para un modelo o un proceso, haz el corte esquemático. No preguntes qué corte. Formas SVG puras en la paleta de la marca, sin figuras; la narración lleva la historia. Una historia sobre personas mantiene un corte de personajes.
8. El estado de ánimo sigue al tema. Una aplicación divertida obtiene un video divertido: movimiento rebosante, easing que sobrepasa, tarjetas que aparecen. Un tema serio recibe un tratamiento sobrio. Lee el producto antes de elegir el estado de ánimo.

Dónde están las cosas

Qué	Dónde
Directorio del proyecto	~/explainer/<nombre>/. Sobrescribe la raíz con EXPLAINER_ROOT. Una carpeta por proyecto; una vista previa y el video completo son dos composiciones del mismo proyecto
Estructura de carpetas	SCHEMA.md junto a este archivo. in/ entrada, assets/ masters, public/ entrada de renderizado, work/ borrador, out/ finales
Kit de inicio	starter/ junto a este archivo: una composición Remotion mínima que reproduce un storyboard, además del kit de marca y los ayudantes de movimiento
Scripts	scripts/ junto a este archivo. Ejecútalos desde la raíz del proyecto. new-project.sh copia el iniciador y las herramientas en un nuevo proyecto
Generación de medios	adapters/ junto a este archivo, y ADAPTERS.md para el contrato. Establece GEN_IMAGE, GEN_SPEECH, GEN_SFX, CUTOUT y GEN_MUSIC a tus propios comandos
Perfiles de marca	brands/<nombre>/ junto a este archivo. brands/example/ es un perfil neutro para copiar

Establece las rutas de las herramientas una vez por shell o en el .env del proyecto:

SKILL=~/.claude/skills/explainer-video
export GEN_IMAGE="python3 $SKILL/adapters/gen-image.py"
export GEN_SPEECH="python3 $SKILL/adapters/gen-speech.py"
export GEN_SFX="python3 $SKILL/adapters/gen-sfx.py"
export CUTOUT="python3 $SKILL/adapters/cutout.py"
export GEN_MUSIC="python3 $SKILL/adapters/gen-music.py"

Procedimiento

1. Guion y storyboard

1. Escribe storyboard.json. Para cada beat, escribe el hablante, la línea, la escena (lugar, acción, objetos), el tamaño del plano y el movimiento de cámara. Consulta SCHEMA.md para los campos del beat.
2. Asegúrate de que cada punto tenga al menos una escena que lo muestre sin palabras.
3. Pregunta al usuario si el video necesita subtítulos. Si es así, pregunta qué tipo: quemados en la imagen, o un archivo .srt junto al video. Haz los subtítulos a partir del guion de voz, no de una transcripción: el guion tiene la ortografía correcta.
4. Pregunta al usuario qué voz habla cada rol. Ofrece una voz gratuita para las vistas previas y una voz expresiva de pago para el corte final.
   • Voz gratuita primero. Pon voz a cada vista previa y al primer corte completo con la voz gratuita. Mantén el género del rol. Genera la voz de pago solo después de que el usuario apruebe el corte con voz gratuita. Mantén la etiqueta de cada beat en el storyboard para la pasada de pago.
5. Pregunta al usuario qué marca usa el video: un perfil de brands/<nombre>/, el aspecto propio del proyecto, o ninguno. Un video sin una marca obvia aún necesita la pregunta. Escribe la respuesta en in/brief.md, para que las tarjetas y la paleta provengan de él desde el primer renderizado.
6. Envía el storyboard al usuario. No generes imágenes antes de que lo apruebe.

2. Personajes

1. Escribe una descripción fija por personaje: cara, cabello, cuerpo, ropa. Cópiala palabra por palabra en cada prompt de imagen. Mantenla en in/characters.md.
2. Genera el dibujo base con gen-image.py sobre un fondo plano y liso. Añade "sin sombra en el suelo, sin brillo" al prompt.
3. Genera las poses de actuación a partir de esa base con --input: caminar, sentarse, señalar, reaccionar, gesticular, girar. Una escena necesita poses, no solo una figura de pie.
4. Haz los estados de la boca (cerrada, abierta, muy abierta) y el parpadeo. Pega solo la región cambiada en la base. Nunca uses una imagen editada completa: la cara se desvía.
5. Recorta cada pose con cutout.py. Usa isnet-anime para dibujos y u2net para fotos.
6. Coloca todas las poses en el mismo lienzo de 1024 px, para que un cambio de pose no necesite desplazamiento.
7. Haz una hoja de contacto de todas las poses (ImageMagick montage). Ábrela y busca una pose que difiera en cara, ropa o proporciones. Regenera esa pose. Haz un máximo de 3 intentos por imagen.

Personas reales: no dibujes ni animes a una persona real sin su consentimiento. Pregunta primero.

• Recorta la cara con cutout.py --model u2net. No la pongas en un círculo.
• El cabello claro sobre un fondo claro desaparece en el recorte. Si eso sucede, usa otra foto.
• Desvanece el cuello y los hombros debajo de la barbilla, y dibuja el cuello con el cuerpo. Una foto recortada termina con un borde duro allí.
• Dibuja los cuerpos en código (articulaciones SVG). Entonces cada pose es exacta y ninguna cara puede desviarse.

3. Escenas y objetos

1. Genera cada lugar como un fondo (--size 1536x1024) en el mismo estilo que los personajes, sin personas.
2. Genera los objetos que actúan como capas de recorte separadas: un teléfono, un billete, una taza, una cortina.
   • Examina cada pantalla, dispositivo y paquete en busca de marcas y texto. Un prompt "sin logotipos" no las evita. Parchea una marca con ImageMagick. No uses una edición de imagen a imagen: elimina la parte incorrecta y mantiene la marca.
3. Genera capas de primer plano para paralaje donde ayude: filas de asientos, una barandilla.
4. Si el proyecto tiene un perfil de marca, úsalo. Toma la paleta de brand.css, el logotipo y el lema de images/, y las fuentes de fonts/. No inventes colores de marca. Lee el NOTES.md del perfil para su forma de marca.
5. Si el proyecto no tiene un gráfico dedicado para un icono, usa un icono MDI (@mdi/js, una ruta de 24×24). No dibujes un icono a mano y no uses emoji. Si el sitio web del proyecto ya coloca un icono MDI en algo, usa el mismo icono en el video.

4. Voces

1. Genera cada línea con gen-speech.py y la misma --voice por hablante.
   • Hasta que el usuario apruebe el corte, usa la voz gratuita del mismo género. Las notas a continuación sobre los modelos de pago aplican a la pasada de pago.
   • Ejecuta scripts/regen-voices.py <modelo>. Envía una línea a la API solo cuando su solicitud cambió (texto, voz, modelo, configuración o un vecino del mismo hablante), por lo que las tomas aprobadas permanecen. No regeneres todas las líneas para arreglar una.
   • Para repetir una línea a propósito, añade --fresh <beat o hablante>. Cada toma se guarda en assets/voice/takes/. Para volver a una toma anterior, usa --restore <toma>.
   • Un proyecto hecho antes de la caché no tiene voice_key por beat. Ejecútalo una vez con --adopt, o la primera ejecución generará cada línea de nuevo.
   • Con un modelo expresivo, coloca una etiqueta de audio en inglés antes de cada línea, por ejemplo [warmly], y ajusta los controles de estabilidad, similitud, estilo y velocidad del modelo. Sin ellos, la línea suena plana. Mantén la etiqueta fuera de line, porque el subtítulo muestra line: ponla en el campo tag del beat y envíala antes del texto.
   • No uses etiquetas de audio con un modelo que no las documente. Podría pronunciarlas en voz alta.
   • Para cada voz, enumera primero los nombres, las palabras que parecen extranjeras y los códigos de letras. Una voz los lee como lo haría su propio idioma, incluso con un código de idioma configurado. Prueba primero una ortografía fonética de la palabra, luego IPA en línea. Haz tres tomas por ortografía y una toma de control, y deja que el usuario elija de oído.
   • No escribas un sonido en mayúsculas. Una voz puede leer mayúsculas como letras individuales. Escribe el sonido como una palabra en su lugar.
   • Una nueva toma mueve cada palabra. Ancla los desplazamientos de fotogramas dentro del beat (cámara, destacados, efectos de sonido) a los inicios de los tramos de subtítulos, no a fotogramas literales. Después de una nueva toma, obtén los tiempos de las palabras a partir de una pasada de voz a texto y restablece solo los inicios de los tramos.
2. Ejecuta scripts/level-voices.py. Nivela cada línea por el volumen del habla. La nivelación de pico no es suficiente: las líneas pueden extenderse más de 6 dB.
   • Una versión en otro idioma: conserva la escena y genera una segunda composición a partir de la misma fuente. Dale al nuevo idioma su propio storyboard con los mismos ids de beat, su propia carpeta de voz, envolventes y corte de música (STORYBOARD, VOICE_DIR, MUSIC en check-audio.py).
   • Nivela las nuevas voces al nivel de habla de la mezcla aprobada, no al mismo objetivo.
3. Haz las envolventes de la boca y empaquétalas con scripts/gen-envelopes.mjs.

5. Animación en Remotion

• Puesta en escena: reproduce cada escena como acción. Los personajes entran, se sientan, reaccionan y usan los objetos. Mueve los objetos en su propia capa. Una solución añade la parte que falta; mantén la acción que muestra la causa.
• Cámara: acerca, panea o sigue en cada toma. Usa paralaje entre el fondo, los personajes y el primer plano. Sujeta cada movimiento de cámara para que cada capa que debe llenar el fotograma permanezca en él a su profundidad de paralaje, incluida la rotación. Una capa con profundidad < 1 se mueve menos que la cámara: un zoom out o un paneo que termina descentrado descubre el borde del fotograma, y se ve una tira del suelo.
• Profundidad: coloca el suelo y todo lo que está sobre él (sillas, personas, objetos) en una capa a una profundidad. Dos profundidades separan el suelo y las patas de la silla bajo cada movimiento de cámara, y las sillas flotan. Un movimiento de cabeza ocioso rota el cuerpo por encima de la línea del asiento, no la silla.
• Movimiento: usa resortes con un pequeño sobreimpulso. Usa anticipación antes de un movimiento. Nunca uses un cambio brusco entre dos poses.
• Inactividad: dale a la respiración, el balanceo y el parpadeo sus propios períodos y fases.
• Boca: manéjala desde la envolvente, con una retención mínima de 3 fotogramas (mouthStates en el motion.ts del iniciador).
• Narrador fuera de pantalla: muestra un orbe de forma de onda que sigue la envolvente, no la cara del narrador (NarratorOrb.tsx en el iniciador).
• Luz: usa la luz como herramienta narrativa. Por ejemplo: las luces de la casa se atenúan, la pantalla de un teléfono brilla en una cara.
• Transiciones: elige una por corte (corte de coincidencia, barrido, corte duro). No uses un fundido para todos los cortes.
• Un personaje permanece como un objeto a través de un corte. Cuando un personaje se mueve de una toma a la siguiente, llévalo en pantalla desde su lugar antiguo al nuevo. Un personaje que sale por un lado y entra por el otro se lee como un segundo personaje.
• Un cambio que el espectador debe notar tiene su propia pausa en la voz. Divide el beat y añade 1.5–2 s de silencio después de él. Escenifica el cambio en esa pausa: marca el estado antiguo, atenuarlo, fundido cruzado, luego destaca el nuevo estado en la siguiente línea.
  • Coloca la pausa en un corte de oración, nunca dentro de una frase. Encuentra el espacio por nivel: toma la racha más larga de ventanas de 20 ms por debajo de aproximadamente −38 dB (en relación con el pico) después de la palabra, y corta en su medio. No tomes el espacio de los tiempos de palabras de voz a texto: sus bordes pueden diferir 0.5 s.
• Subtítulos y tarjetas de puntos clave: mantenlos cortos. Una tarjeta apoya una escena. Nunca la reemplaza.
• El marco — todo video lo tiene:
  1. Tarjeta de título de apertura, unos 3 s: el logotipo (si corresponde), el título del video y una línea corta. Puede ser silencioso o tener solo música.
  2. Diapositiva de cierre, unos 4 s: el logotipo (si corresponde), el eslogan o llamada a la acción, y la URL. Puede ser silenciosa.
  3. Logotipo en esquina: un logotipo pequeño en la esquina inferior derecha durante todo el video entre las dos tarjetas. Fundirlo después de la tarjeta de apertura y desaparecerlo antes de la diapositiva de cierre. Mantenlo alejado de las caras y elementos clave.
  4. "Si corresponde": un video de marca, producto o empresa tiene logotipo. Un video personal no tiene logotipo de empresa. Aún así recibe la tarjeta de título y la diapositiva de cierre.
  5. Para añadir el marco a un video terminado, no repitas el tiempo de la voz. Coloca la composición existente en un <Series> entre las dos tarjetas. Las tarjetas añaden silencio al principio y al final, y eso es aceptable.
• Marca primero, siempre. Si el proyecto tiene un perfil de marca, úsalo: las tarjetas del perfil, la paleta de brand.css, el logotipo y la marca como activos reales. Si el proyecto tiene capturas de pantalla reales de la aplicación, úsalas como capa: una pantalla real supera una aproximación dibujada de una pantalla. Solo las personas, los lugares y los objetos se dibujan. La UI, los logotipos y el tipo vienen de la marca. Si el perfil está claramente desactualizado con respecto a la aplicación en vivo, dilo y usa la aplicación.

6. Revisa la imagen

1. Renderiza fotogramas fijos con npx remotion still en los fotogramas clave.
2. Abre los fotogramas fijos. Busca una cara que una tarjeta o un subtítulo cubran, y un personaje que el borde del fotograma corte. Una segunda opinión opcional: ADAPTERS.md describe un comando REVIEW_IMAGE. Trata su veredicto como una pista, no como una barrera, y confirma cada hallazgo en el fotograma.
3. Renderiza una muestra de unos 20 s con una escena, un cambio de pose, un movimiento de cámara y un intercambio de diálogo.
4. Extrae fotogramas alrededor de cada cambio de pose...