/setup-remotion.es

description: "Lesson command"
duration: "~10 min"
prerequisites: ["Node.js 18 o superior instalado"]
level: "beginner"
tags: ["setup", "remotion", "video", "react", "npm"]
nonInteractiveMode: deferred

Configuración de Remotion

Step 0: Verificar progreso de configuración

**Lo que la IA ejecuta automáticamente:** 1. Ejecutar `uv run python tools/setup_progress.py show --current setup-remotion` para mostrar el progreso 2. Detectar automáticamente el entorno existente:

• Verificar la versión de Node.js con `node --version` (se requiere 18 o superior)
• Verificar si existe `mv-composer/node_modules/remotion`
• Si ya está configurado, solo ejecutar Step 3 (prueba de operación) y marcar como completado

Lo que hará en esta sesión

| Elemento | Contenido | |----------|-----------| | Objetivo | Configurar Remotion (un framework de generación de video basado en React) en mv-composer/ y tener Remotion Studio listo para iniciar | | Duración | ~10 minutos | | Requisitos previos | Node.js 18 o superior instalado | | Nivel de operación | Todo lo ejecuta la IA automáticamente (solo confirmación) |

**¿Qué es Remotion?** Remotion es un framework que permite crear videos usando componentes de React. Puede generar videos animados de forma programática y se usa para crear MVs promocionales, TikTok/YouTube Shorts, videos de presentación de productos y más.

**Sobre el precio:** Remotion es de código abierto y el renderizado local es gratuito. Solo se necesita una licencia separada al usar Remotion Lambda (renderizado en la nube), que no usaremos en esta capacitación.

**Flujo de la sesión:** 1. Verificar la versión de Node.js 2. Instalar paquetes de dependencia con npm install 3. Prueba de inicio de Remotion Studio 4. Renderizado de prueba (opcional)

> **Consejo**: Si la IA deja de responder a mitad del proceso, escriba "por favor continúa" o "se detuvo" para reanudar.

---

Verificación de preparación

**Configuración de AskQuestion:**

{
  "title": "Confirmación previa a la sesión",
  "questions": [{
    "id": "readiness",
    "prompt": "¿Está listo?",
    "options": [
      {"id": "ready", "label": "¡Listo! Comencemos"},
      {"id": "check_prereq", "label": "Quiero verificar los requisitos previos"},
      {"id": "different_lesson", "label": "Ir a otra lección"}
    ]
  }]
}

(ready -> Ir al Step 1) (check_prereq -> Indicar: "Se requiere Node.js 18 o superior. Puede verificarlo con `node --version`. Si no está instalado, descárguelo de https://nodejs.org") (different_lesson -> Mostrar lista de módulos)

---

Step 1: Verificar Node.js

**Lo que hace la IA:** 1. Verificar la versión de Node.js:

node --version

2. Verificar la versión de npm:

npm --version

**Criterios:**

• Node.js 18.x o superior -> OK, ir al Step 2
• Node.js no instalado o inferior a 18 -> Guiar la instalación

**Si Node.js no está instalado:**

Se requiere Node.js 18 o superior. Instálelo desde:
  https://nodejs.org (se recomienda la versión LTS)

En Mac, también puede instalar con Homebrew:
  brew install node

**Comandos para abrir el navegador:**

# Mac:
open https://nodejs.org
# Windows:
start https://nodejs.org
# Linux:
xdg-open https://nodejs.org

Después de la instalación, pedir al usuario que escriba "listo", luego ejecutar `node --version` nuevamente para verificar.

---

Step 2: Instalar Remotion

**Lo que hace la IA:** 1. Navegar al directorio mv-composer y ejecutar npm install:

cd mv-composer && npm install

2. Verificar la instalación:

ls mv-composer/node_modules/remotion/package.json && echo "Remotion installed OK"

**Resultado esperado:**

• Se muestra un mensaje `added XX packages`
• Se muestra `Remotion installed OK`

**Solución de problemas:**

• Error `EACCES` -> No usar `sudo`. Evítelo con `npm config set prefix ~/.npm-global`
• Error `ERESOLVE` -> Probar `npm install --legacy-peer-deps`
• Error de red -> Verificar la configuración del proxy

---

Step 3: Prueba de inicio de Remotion Studio

**Lo que hace la IA:** 1. Iniciar Remotion Studio:

cd mv-composer && npx remotion studio

**Resultado esperado:**

• El navegador se abre automáticamente y muestra Remotion Studio
• Una lista de composiciones (ScreenExplainer, etc.) aparece en el panel izquierdo
• Un video se renderiza en el área de vista previa

**Indicación al usuario:**

¿Apareció Remotion Studio en su navegador?
Si puede ver la lista de composiciones en el panel izquierdo, ¡está funcionando!

Una vez confirmado, presione Ctrl+C para detener el servidor.

**Configuración de AskQuestion:**

{
  "title": "Verificación de Remotion Studio",
  "questions": [{
    "id": "studio_check",
    "prompt": "¿Apareció Remotion Studio en su navegador?",
    "options": [
      {"id": "success", "label": "¡Apareció!"},
      {"id": "no_browser", "label": "El navegador no se abrió"},
      {"id": "error", "label": "Obtuve un error"},
      {"id": "skip", "label": "Omitir"}
    ]
  }]
}

(success -> Ir al Step 4) (no_browser -> Indicar que ingrese `http://localhost:3000` manualmente en el navegador) (error -> Pedir que pegue el mensaje de error y resolver problemas) (skip -> Ir al Step 4)

---

Step 4: Renderizado de prueba (opcional)

**Configuración de AskQuestion:**

{
  "title": "Renderizado de prueba",
  "questions": [{
    "id": "render_test",
    "prompt": "¿Desea probar un renderizado de prueba? (~30 segundos a 1 minuto)",
    "options": [
      {"id": "yes", "label": "Probar"},
      {"id": "no", "label": "Omitir y finalizar"}
    ]
  }]
}

(yes -> Ejecutar renderizado de prueba) (no -> Ir a la verificación de finalización)

**Lo que hace la IA (si elige sí):** 1. Renderizar una composición corta:

cd mv-composer && npx remotion render src/index.ts ScreenExplainer --frames=0-30 --codec h264 out/test_render.mp4

2. Verificar el archivo de salida:

ls -lh mv-composer/out/test_render.m