Render Remotion

¿Qué hace Render Remotion?

Impulsa el bucle de renderizado e iteración: convierte una composición en MP4, recibe retroalimentación en lenguaje natural, realiza la edición más pequeña que la satisfaga y vuelve a renderizar. El modo de fallo costoso es el bucle opuesto: reescribir archivos de escena completos para un ajuste de copia, o re-renderizar a máxima calidad en cada verificación, lo que destruye el trabajo aprobado y la velocidad de iteración que hace que Remotion valga la pena.

Procedimiento operativo

Paso 1: Recopilar entradas

• ID de composición (el id en el <Composition> en src/Root.tsx, no un nombre de archivo) y el punto de entrada (el archivo que llama a registerRoot, típicamente src/index.ts).
• Objetivo: plataforma/aspecto (apaisado 16:9, vertical 9:16, cuadrado), resolución (1080p predeterminado; 4K solo bajo petición), y si se necesita transparencia.
• Núcleos de la máquina (para concurrencia) y si esto es un solo render, una sesión de iteración o un lote.

Paso 2: El render base

npx remotion render src/index.ts <CompositionId> out/video.mp4

La salida predeterminada es MP4 H.264 con el ancho/alto/fps de la propia composición; Remotion crea out/ si es necesario.

Paso 3: Resolución, fps y preajustes de códec

La resolución y los fps residen en el <Composition> (width/height/fps): cámbialos en la fuente. Usa banderas solo para escala y contenedor:

# 1080p apaisado - Composición creada 1920x1080@30
npx remotion render src/index.ts ProductDemo out/1080p.mp4

# 4K - escalar el lienzo 1080p sin tocar el diseño
npx remotion render src/index.ts ProductDemo out/4k.mp4 --scale=2

# 9:16 vertical - renderizar una Composición creada en 1080x1920
npx remotion render src/index.ts ProductDemoVertical out/vertical.mp4

Reglas de códec:

• La entrega social/web se queda en H.264 MP4 (el predeterminado): máxima compatibilidad.
• Transparencia: --codec=vp8 o vp9 (WebM), o --codec=prores con alfa para flujos de edición. H.264 no puede transportar alfa.
• 60 fps reales significa fps={60} en la Composición con recuentos de fotogramas escalados para que coincidan: un cambio de fps solo con banderas desincroniza cada animación temporizada en fotogramas.

Paso 4: Ajustar la concurrencia

El renderizado tiene uso intensivo de CPU (cada fotograma es una captura de pantalla de Chromium sin cabeza). El valor predeterminado es aproximadamente la mitad de los núcleos; el ajuste explícito es la forma más fácil de acelerar localmente:

npx remotion render src/index.ts ProductDemo out/video.mp4 --concurrency=8

Empieza con el número de núcleos físicos (--concurrency=50% acepta un porcentaje); retrocede si la máquina intercambia o se estrangula térmicamente - más allá del punto óptimo, más pestañas de Chromium lo hacen más lento, no más rápido.

Paso 5: Ejecutar el bucle de refinamiento iterativo

Mantén Studio abierto (npx remotion studio, http://localhost:3000) para que el usuario obtenga vistas previas al instante; reserva los renders completos para la aprobación final.

1. El usuario previsualiza en Studio y da retroalimentación en lenguaje natural.
2. Tradúcela a una edición quirúrgica: cambia solo el valor relevante:
   • "Demasiado rápido" → ampliar el rango de entrada de interpolate o aumentar damping del muelle.
   • "El logo debería resaltar más" → bajar damping del muelle / añadir sobreimpulso.
   • "Cambiar el texto de CTA" → editar la prop / defaultProps, no tocar nada más.
   • "Color de acento diferente" → cambiar un hex en el objeto de colores.
   • "Mantener la última característica más tiempo" → aumentar el durationInFrames de esa <Sequence> Y volver a derivar el durationInFrames total de la Composición.
3. Re-renderizar, o dejar que Studio recargue en caliente para la verificación visual.

Edición quirúrgica vs reescritura: edita en el lugar cuando el cambio sea un valor, prop, color o la temporización de una escena; reescribe solo cuando cambie la estructura de la escena (añadir/eliminar/reordenar escenas - y dirige la autoría estructural a remotion-compose). Por defecto, opta por lo quirúrgico: preserva todo lo ya aprobado.

Paso 6: Variantes por lotes

La composición está basada en datos, así que N variantes = N conjuntos de props en un archivo JSON:

[
  { "out": "out/acme.mp4",   "props": { "logoText": "Acme",   "colors": { "accent": "#6C5CE7" }, "cta": "Try Acme" } },
  { "out": "out/globex.mp4", "props": { "logoText": "Globex", "colors": { "accent": "#00B894" }, "cta": "Try Globex" } }
]

--props acepta JSON en línea o una ruta de archivo; para más de un par de variantes, escribe un pequeño script de Node que lea el JSON y ejecute comandos por cada entrada, o usa @remotion/renderer's renderMedia() para un bucle tipado. Localiza o prueba A/B copia y colores editando completamente el JSON.

Paso 7: Lambda cuando lo local es el cuello de botella

Recurre a Lambda cuando un solo render tarde minutos localmente o el lote sea grande: distribuye fotogramas entre trabajadores sin servidor. De lo contrario, lo local es más simple y gratuito.

npx remotion lambda functions deploy            # una vez por cuenta/región de AWS
npx remotion lambda sites create src/index.ts --site-name=product-demo
npx remotion lambda render product-demo ProductDemo --props='{"logoText":"Acme"}'

Requiere credenciales de AWS y permisos IAM según la configuración de Lambda de Remotion.

Paso 8: Solucionar los tres fallos comunes

1. Desajuste de recuento de fotogramas: la animación se corta antes de tiempo o el clip tiene una cola muerta. Causa: cambió la duración de una <Sequence> pero el total de la Composición no. Solución: haz que el total sea igual a la suma de sus secuencias; recalcula después de cada edición de temporización. Esta es la sorpresa de renderizado número uno.
2. Referencia staticFile() faltante: el render falla o un activo está en blanco. Causa: un activo importado por ruta o fuera de public/. Solución: colócalo en public/assets/ y referencia staticFile("assets/<nombre>").
3. Destello/fallback de fuente: el texto se renderiza con la fuente incorrecta o se desplaza. Causa: loadFont() de @remotion/google-fonts falta o se llama demasiado tarde. Solución: llama a loadFont() al nivel superior del módulo y aplica el fontFamily devuelto; el render entonces espera a la fuente.

Entregable

Un archivo renderizado en out/ con el preajuste solicitado, más -para sesiones de iteración- la oferta de bucle: nombra las dimensiones ajustables (ritmo, copia, color, temporización) y vuelve a renderizar según la retroalimentación. Para lotes, el JSON de variantes y las salidas por variante.

NO hacer

• NO reescribir un archivo de escena para un cambio a nivel de valor: las ediciones quirúrgicas preservan el trabajo aprobado.
• NO cambiar fps solo con banderas: establécelo en la Composición y reescala los recuentos de fotogramas.
• NO cambiar la duración de una Secuencia sin volver a derivar el durationInFrames total de la Composición.
• NO renderizar completo en cada iteración: la recarga en caliente de Studio es el bucle de vista previa; renderiza en la aprobación final.
• NO aumentar la concurrencia más allá de los núcleos físicos en una máquina que esté intercambiando o estrangulándose.
• NO recurrir a Lambda cuando los renders locales terminen en segundos: añade configuración de AWS y costo sin beneficio.
• NO crear nuevas escenas ni reestructurar la composición aquí: eso es responsabilidad de remotion-compose.

Nivel de calidad

• La salida se reproduce en la resolución/aspecto/fps solicitados sin cola muerta ni corte prematuro (el total de la Composición coincide con la suma de las secuencias).
• Los activos y fuentes se renderizan correctamente en el primer fotograma: sin destello de fuente de respaldo, sin activos en blanco.
• Una iteración cambió solo las líneas que la retroalimentación requería; todo lo previamente aprobado no se tocó.
• Las salidas del lote difieren solo por sus conjuntos de props.

Escalada

La creación de escenas, el diseño de animaciones y la estructura de componentes van a remotion-compose; el andamiaje del proyecto a remotion-setup; la puntuación y la sincronización de audio a sound-and-music-sync.