Motion por código con agente|INEMA.CLUB-PRO

Formación Cinema con IA · curso 3 de 6 · 8 clases

Motion por código con agente: el video que sale de la terminal, igual cada vez

HyperFrames y Remotion transforman HTML y React en MP4. Se lo pides al agente, lo verificas en cinco fotogramas, atas la pieza a un DESIGN.md, le pones voz y subtítulos locales y entregas una apertura de 15 s en 16:9 y 9:16. Todo se renderiza en tu máquina, sin créditos.

Empezar por la clase 1 Abrir el kit en GitHub
Mesa de edición oscura con un monitor de línea de tiempo, un teclado y una claqueta cerrada; a la izquierda el título del curso.
  • 8clases
  • 24ejercicios con salida esperada
  • 16bloques probados en el kit
  • 0créditos gastados: render local

Las clases

Del modelo mental al render en los dos formatos: determinismo, HyperFrames, el pedido al agente, la marca, Remotion, bibliotecas, audio y tu pieza.

  1. Clase 1 · 15 minEl video es código: composición con tiempo y render deterministaEn el motion por código, el video es una página que sabe dibujar cualquier instante. Un navegador sin pantalla pide el fotograma 0, el 1, el 2, y FFmpeg junta todo en un MP4. Si la misma entrada da siempre los mismos fotogramas, puedes rehacer, corregir y versionar el video como código. En esta lección lo compruebas en tu máquina.
  2. Clase 2 · 15 minHyperFrames desde cero: HTML con data-* se vuelve MP4HyperFrames es un motor abierto de HeyGen que renderiza HTML en video. Tres atributos dicen el tamaño y la duración, una timeline GSAP en pausa dice el movimiento, y el check lo revisa todo antes del render. En esta clase creas el proyecto, escribes la primera composición y sales con un MP4 verificado.
  3. Clase 3 · 15 minPedirle al agente: el método RISE y la prueba en cinco fotogramasUn pedido vago genera una animación genérica y diez rondas de corrección. RISE organiza el pedido en cuatro partes: Referencias, Idea, Estilo y Examinar. La última es la que más te salva: el agente revisa cinco fotogramas y corrige antes de que renderices. En esta clase escribes el pedido y verificas la respuesta con un comando.
  4. Clase 4 · 15 minSistema de marca y filosofía de movimiento: el DESIGN.md de tu videoSin una regla escrita, cada pedido al agente trae un color nuevo y un movimiento distinto, y las piezas no parecen de la misma marca. El DESIGN.md es el archivo que el agente lee antes de componer: colores, fuentes, cómo se mueven las cosas y qué está prohibido. En esta clase escribes el tuyo y reprueba el color fuera de la marca con un comando.
  5. Clase 5 · 15 minRemotion: frame, interpolate, spring y cuándo elegir ReactRemotion hace lo mismo que HyperFrames con otro lenguaje: cada fotograma es un componente React que recibe el número del fotograma. interpolate mapea fotogramas en valores y spring le da física a la entrada. En esta clase renderizas la misma idea de la clase 2 en React, lees la licencia y decides cuándo vale más cada motor.
  6. Clase 6 · 15 minGSAP, D3, Three.js o Lottie: qué biblioteca para cada piezaCada tipo de movimiento tiene una biblioteca que lo resuelve en pocas líneas y otra que pelea contigo. La coreografía de texto es GSAP; el gráfico que nace de datos es D3 dibujando y GSAP animando; la escena 3D es Three.js; la animación lista de After Effects es Lottie. En esta lección eliges con la pregunta correcta y renderizas un gráfico y una escena 3D.
  7. Clase 7 · 18 minAudio y subtítulos en el código: narración local, pista musical y karaokeEl mismo CLI que renderiza también habla y escucha, todo en tu máquina: genera la narración con una voz local, transcribe palabra por palabra con el tiempo de cada una y se lo entrega a la composición. En esta lección armas el lado técnico del sonido: narración, una pista de prueba y el subtítulo karaoke que ilumina cada palabra en el momento en que se dice.
  8. Clase 8 · 20 minTu pieza: apertura de 15 s en 16:9 y 9:16, renderizada y verificadaEs hora de juntar todo en una pieza que uses: una apertura de 15 s con tu DESIGN.md, en los dos formatos que piden las redes. El 9:16 no sale del 16:9 con una opción de render: es otra composición que reutiliza el CSS y la coreografía. En esta clase entregas las dos, verificadas por el kit, y armas el plan con fechas.

Para quién es

  1. 1Quien ya usa Claude Code o Codex en la terminal y quiere video, apertura o motion sin editor gráfico.
  2. 2Quien hace video para una empresa o un curso y necesita repetir la misma pieza con otro texto, otro color u otro formato.
  3. 3Dev que quiere saber cuándo elegir HTML (HyperFrames) y cuándo elegir React (Remotion).

Lo que sales haciendo

  1. 1Probar que tu render es determinista y encontrar lo que lo rompe.
  2. 2Pedirle una composición al agente con el método RISE y verificarla en cinco fotogramas antes del MP4.
  3. 3Escribir el DESIGN.md del video y reprobar un color fuera de la marca con un comando.
  4. 4Poner narración y subtítulos karaoke hechos en tu máquina y entregar 16:9 y 9:16 verificados.

Antes de empezar

  1. 1Linux o macOS con Node 22 o más nuevo, FFmpeg, Python 3 y git. En Windows, usa WSL.
  2. 2Unos 2 GB libres: el navegador del render (~240 MB), la voz local (~340 MB) y el modelo de transcripción (~490 MB) se descargan en el primer uso.
  3. 3Recomendado: el curso 0 (Dirección) para el lenguaje de plano y luz. Sonido, montaje y ética están en el curso 2.