Guía

Videos Programáticos con Remotion y Codex CLI: Setup en un Comando

Crear videos con código en lugar de una herramienta de edición visual tiene una barrera inicial: configurar el entorno desde cero. Un bootstrap de un solo comando instala todo lo necesario — Node, Remotion, Codex CLI — y lanza una preview en vivo para empezar a iterar de inmediato. Ideal para founders o developers que quieren producir contenido en video sin depender de editores manuales.

1 fuente30 de junio de 2026

Videos Programáticos con Remotion y Codex CLI: Setup en un Comando

Remotion convierte componentes de React en videos exportables. En lugar de arrastrar clips en una línea de tiempo, defines cada escena como código: animaciones, tipografía, timing, transiciones. El resultado es reproducible, versionable con git y modificable con un prompt.

El problema es la configuración inicial. Para llegar al primer frame renderizado necesitas: Node en la versión correcta, el proyecto de Remotion inicializado, Codex CLI autenticado, y un servidor de preview corriendo. Con un bootstrap automatizado todo eso sucede en un solo comando.

Qué instala el bootstrap

El script de instalación cubre el entorno completo sin intervención manual:

  • Git, Node, npm: dependencias base del sistema. Si ya existen en la versión correcta, el script las omite — es idempotente.
  • cloudflared: crea un túnel público para acceder a la preview desde cualquier dispositivo o compartirla con un cliente sin exponer el puerto directamente.
  • Codex CLI: el agente de OpenAI que opera en terminal y puede generar, modificar y revisar el código de las escenas en lenguaje natural.
  • Skills de Codex: instala video-generator y remotion-best-practices como contexto especializado para que el agente entienda la API de Remotion sin necesidad de instrucciones manuales en cada prompt.
  • Proyecto inicial: clona un starter de Remotion en output/agent-video-starter listo para editar.
  • Preview en vivo: levanta el servidor de desarrollo y genera una URL pública via cloudflared.

Al terminar la instalación, Codex se lanza automáticamente con un prompt inicial que guía la primera interacción.

Ejecutar el bootstrap

macOS, Linux o WSL

bash <(curl -fsSL https://raw.githubusercontent.com/Hainrixz/tododeia-animaciones/main/install.sh)

Windows (PowerShell como administrador)

irm https://raw.githubusercontent.com/Hainrixz/tododeia-animaciones/main/install.ps1 | iex

En Windows es importante abrir PowerShell con privilegios de administrador antes de correr el comando, de lo contrario la instalación de dependencias del sistema falla sin un error claro.

Modo manual (si preferís control granular)

# Bash
bash scripts/bootstrap.sh

# PowerShell
powershell -ExecutionPolicy Bypass -File .\scripts\bootstrap.ps1

Flujo de trabajo con Codex

Una vez que el entorno está corriendo, el ciclo de producción de un video tiene cuatro pasos:

  1. Describir el video: en lenguaje natural, decirle a Codex qué debe mostrar cada escena — duración, texto, animaciones, colores, ritmo. Cuanto más específico, menos iteraciones.
  2. Revisar la preview: el servidor de Remotion actualiza en tiempo real. Ver cada cambio en el navegador sin recargar manualmente.
  3. Iterar escena por escena: marcar en el prompt cuáles escenas están aprobadas y cuáles necesitan ajuste. Codex mantiene el contexto de la conversación.
  4. Exportar: cuando la narrativa completa está aprobada, el render final genera el archivo de video.

Remotion renderiza cada frame como si fuera un screenshot del componente React, por lo que la calidad del output es igual a la calidad del código — sin compresión por edición manual.

Solución de problemas frecuentes

Síntoma Causa probable Solución
Error de permisos en la instalación Terminal sin privilegios de administrador Ejecutar como administrador (Windows) o agregar sudo donde corresponda
Puerto 3000 ocupado Otro proceso usando ese puerto Pasar el flag --port 3001 al iniciar la preview
Codex no autentica Sesión expirada o primer uso Ejecutar codex login y volver a correr el comando principal
Falla el pull del repositorio Cambios locales sin commitear en el proyecto starter Hacer git stash o commitear los cambios antes de actualizar

Por qué Remotion para video programático

La alternativa habitual para video automatizado es una API de renderizado en la nube (como Shotstack o Bannerbear). Remotion corre localmente, lo que significa cero costo por render durante desarrollo y sin latencia de red en cada iteración. La desventaja es que necesita CPU/GPU local para renders largos.

Para contenido corto — menos de dos minutos, tipografía animada, data visualizations — Remotion local con Codex como interfaz conversacional es la combinación más rápida de setup a primer video funcional sin tocar una herramienta de edición manual.

📎