Communitygithub.com

hozanBaydu/vídeos-explicativos-animados

Reglas para escribir y animar videos explicativos cortos (YouTube Shorts, Reels, TikTok y explicativos más largos) que la gente realmente vea. Úsalo al planificar, escribir guiones, storyboard, animar o revisar un video explicativo animado, su gancho, ritmo, cámara, personajes, subtítulos o voz en off.

¿Qué es vídeos-explicativos-animados?

Esta habilidad establece un conjunto completo de reglas para crear videos explicativos animados efectivos, desde el guion hasta la animación final. Prioriza la narrativa sobre la estética visual: un video hermoso con un guion plano sigue siendo un fracaso. La habilidad divide el proceso en etapas: escritura del guion (historias con un personaje que quiere algo, un obstáculo, un giro y una recompensa), estructura de escenas (una idea por escena), encuadre para video vertical (1080x1920), técnicas de cámara (movimientos con motivo, revelaciones y choques), animación de personajes (aplastar y estirar, anticipación, seguimiento), edición (cortes de coincidencia, ritmo), subtítulos (2-5 palabras sincronizadas) y voz en off (170-200 palabras por minuto). También incluye instrucciones técnicas para generar el video final usando Remotion y Three.js, con pasos para configurar el proyecto, agregar voz, sincronizar subtítulos y renderizar. Es ideal para desarrolladores y creadores que quieran automatizar la producción de videos animados de alta calidad con un flujo de trabajo basado en código, compatible con Node.js 18+, ffmpeg y Remotion (que descarga su propio Chrome sin cabeza).

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/hozanBaydu/animated-explainer-shorts/tree/HEAD/plugins/animated-explainer-shorts/skills/animated-explainer-shorts

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Videos explicativos animados

Aplica estas reglas cuando planifiques, escribas, animes o revises un video. Las reglas de la historia vienen primero: un video hermoso con un guion plano sigue siendo un fracaso.

Hacer el video

Cuando el usuario quiera un archivo de video real, constrúyelo con Remotion (y Three.js para 3D) a partir de la plantilla en esta habilidad.

  1. Historia primero. Escribe el guion como compases (una idea por compás) usando las reglas de Historia a continuación. Revisa la primera frase y los segundos iniciales antes que cualquier otra cosa.
  2. Proyecto. Copia template/ a una nueva carpeta, ejecuta npm install. Lee reference/remotion.md antes de escribir código, y reference/threejs.md antes de cualquier escena 3D.
  3. Voz. Si el usuario proporciona una voz en off (su grabación o cualquier archivo de texto a voz), ponlo en public/ y establece "voice" en public/plan.json. Si no lo hace, pon cada línea en el "text" de su escena y ejecuta npm run voice (voz Kokoro gratuita, inglés): escribe public/voice.wav y establece el inicio y fin de cada escena. Elige una voz con node scripts/voice.mjs am_michael (masculino) o el predeterminado af_heart (femenino).
  4. Tiempo. Ejecuta npm run captions para las marcas de tiempo de las palabras. Con tu propio archivo de voz, inicia cada escena en la primera palabra de la línea que muestra; con npm run voice esto ya está hecho.
  5. Escenas. Escribe un componente por escena en src/scenes/, regístralo y enumera las escenas en plan.json. Cada línea hablada tiene su propio visual.
  6. Revisa. Renderiza imágenes fijas (npx remotion still Main out/still.png --frame=N) al inicio, mitad y final de cada escena, míralas y corrige cualquier cosa que viole las reglas a continuación.
  7. Renderiza. npm run render escribe out/video.mp4. Vuelve a ver los primeros 3 segundos antes de darlo por terminado.

Requisitos: Node.js 18+ y ffmpeg. Remotion descarga su propio Chrome sin cabeza en el primer renderizado.

Historia

  1. Cada video es una pequeña historia: un personaje quiere algo, algo lo bloquea, ocurre un giro, hay una recompensa. Una lista de hechos no es una historia.
  2. La primera frase es una afirmación audaz, una contradicción de algo que la gente cree, o un personaje con un problema.
    • Bueno: "Algo en tu cocina te está matando." / "Siempre pensé que las computadoras eran mejores que las personas en matemáticas." / "Este es el tío Don, y tiene un gran problema."
    • Malo: "¿Cómo funciona X?" / "Aquí hay 3 herramientas que..." / "Hoy veremos...". Si el video responde a una pregunta de "cómo", mueve esa pregunta a la segunda frase.
  3. Abre una pregunta o una tensión en los primeros 3 segundos y guarda la respuesta para más tarde. No gastes el giro en el gancho.
  4. Elige temas amplios o de actualidad. Un tema de nicho necesita un ángulo cotidiano que cualquiera pueda sentir.
  5. Un buen comienzo no salva un tema débil. Decide el tema primero, luego escribe el gancho.
  6. Cada video se sostiene por sí mismo. No "Parte 2", no comienzos que continúen un video anterior, no listas genéricas de utilidades.
  7. Muestra, no cuentes: cada línea hablada tiene su propio visual. Si el video tiene sentido en silencio, las escenas funcionan.
  8. Una idea por escena. Si una línea contiene dos ideas, divídela en dos escenas.
  9. Escala: cada compás aumenta un poco más las apuestas o la sorpresa que el anterior.
  10. Termina con una línea que el espectador pueda repetir o usar (una pregunta para hacer, una regla práctica), no con un resumen.
  11. La duración es una elección libre: usa la duración que la historia necesite. En videos largos, da una pequeña recompensa al menos cada 60-90 segundos.

Encuadre (vertical 1080x1920 a menos que se indique lo contrario)

  1. Mantén el sujeto principal en la banda medio-superior, aproximadamente y = 500-1100.
  2. El ~20% inferior (y > 1500) está debajo de la interfaz de usuario de la plataforma: sin imágenes clave allí. Coloca los subtítulos justo encima.
  3. Mantén márgenes de ~60 px en los lados. Mantén el borde derecho (x > 960, y 900-1700) libre de información clave, porque los botones de "me gusta" y comentarios están allí.
  4. El encuadre centrado suele funcionar mejor en video vertical. Usa tercios para escenas con dos sujetos.
  5. Un elemento dominante por fotograma. Todo lo demás es más pequeño, más oscuro o menos saturado.
  6. La cara de un personaje debe ocupar al menos ~15% del ancho del fotograma en momentos clave.

Segundos iniciales

  1. Empieza a hablar en el fotograma 0. Sin introducción silenciosa, sin logotipo.
  2. Algo cambia visiblemente en los primeros 1-2 segundos: un nuevo objeto, un movimiento, una transformación. Sin tarjeta de título estática.
  3. Es opcional tener texto grande en el primer fotograma. Si lo usas, establece la afirmación; no es decoración.
  4. Una cara en el primer fotograma es opcional. Un personaje o imagen fuerte funciona igual de bien.

Cámara (2D y 3D)

  1. Cada movimiento de cámara tiene un motivo: sigue a un personaje, revela información o añade énfasis. Sin movimiento decorativo.
  2. Nunca te muevas linealmente: siempre suaviza la entrada y la salida.
  3. Revelación = zoom lento (escala 1.0 a 1.1-1.25 durante 1-3 s). Choque = zoom rápido (0.15-0.25 s) con un pequeño temblor.
  4. Nueva ubicación: plano general primero, luego más cerca.
  5. Ángulo bajo = poder o amenaza, ángulo alto = pequeño o indefenso, nivel de ojos = neutro.
  6. Si dos personajes se enfrentan, mantén a cada uno en su propio lado durante toda la escena.
  7. En 3D: FOV 35-50 grados, profundidad de capas de primer plano, medio y fondo. Mueve la cámara (dolly) en lugar de cambiar el FOV (zoom).
  8. En escenas 3D de dibujos animados, usa mapeo de tonos lineal y un ligero aumento de saturación; el mapeo de tonos cinematográfico desvanece los colores de dibujos animados.

Edición y ritmo

  1. Después del comienzo, el ritmo sigue el estilo. Un primer momento rápido importa más que un video completo rápido.
  2. Recorrido visual: el punto de interés en un nuevo plano comienza donde estaba en el plano anterior.
  3. Cortes de coincidencia: una forma o color del final de una escena se convierte en el inicio de la siguiente.
  4. Después de un chiste o un remate, espera 0.3-0.6 s antes de cortar.
  5. Reduce la velocidad antes del momento clave, acelera después.
  6. Corta en acción: cambia de plano en medio de un movimiento, no después de que se detenga.
  7. Sin destellos blancos ni transiciones de estroboscopio. Usa barridos de látigo, cortes de coincidencia y transiciones de barrido.

Animación de personajes

  1. Aplastar y estirar en cada impacto y salto (escala 0.8-1.25, volumen aproximadamente mantenido).
  2. Anticipación: un pequeño movimiento en dirección opuesta antes de un gran movimiento (0.1-0.2 s).
  3. Seguimiento: el cabello, las antenas y los brazos siguen moviéndose y se asientan después de que el cuerpo se detiene.
  4. Las extremidades y los objetos lanzados se mueven en arcos, nunca en líneas rectas.
  5. Parpadeo, respiración y balanceo inactivo nunca se detienen, incluso mientras una escena espera.
  6. El tiempo vende el peso: las cosas pesadas se mueven lentamente y aterrizan fuerte, las cosas ligeras se mueven rápido.
  7. Exagera las emociones: ojos enormes, formas de boca grandes, una gota de sudor voladora.
  8. Una silueta clara por pose. Si la pose no se lee como una forma negra, cámbiala.

Texto y subtítulos

  1. Subtítulos: 2-5 palabras por fragmento, sincronizados con la voz, apareciendo, alto contraste (blanco con un contorno oscuro).
  2. Palabras cinéticas grandes solo en momentos culminantes, y solo un grupo de palabras grandes en pantalla a la vez.
  3. Los números en pantalla coinciden exactamente con la narración y la fuente.

Voz

  1. Frases cortas, ritmo hablado, contracciones ("es", "no").
  2. Aproximadamente 170-200 palabras por minuto.
  3. 0.2-0.4 segundos de silencio entre compases, 0.6-1.0 segundos antes de la línea final.

Honestidad

  1. Cada número en pantalla tiene una fuente real y coincide con ella.
  2. Nunca pongas afirmaciones en primera persona en la narración que el creador no haya hecho realmente.
  3. Los titulares de parodia usan nombres claramente inventados, nunca imitaciones de medios reales.

Skills relacionados