Renderización de Remotion

¿Qué hace Renderización de Remotion?

Impulsa el ciclo de renderizado e iteración: convierte una composición en un 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 ciclo inverso: reescribir archivos de escena completos para un ajuste de copia, o volver a renderizar a máxima calidad para 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 la 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 (horizontal 16:9, vertical 9:16, cuadrado), resolución (1080p por defecto; 4K solo si se solicita), y si se necesita transparencia.
• Núcleos de la máquina (para concurrencia) y si es una sola renderización, una sesión de iteración, o un lote.

Paso 2: La renderización 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 composición; Remotion crea out/ si es necesario.

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

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

# 1080p horizontal - Composición creada a 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 a 1080x1920
npx remotion render src/index.ts ProductDemoVertical out/vertical.mp4

Reglas de códec:

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

Paso 4: Ajustar concurrencia

La renderización consume mucha 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

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

Paso 5: Ejecutar el ciclo de refinamiento iterativo

Mantén Studio abierto (npx remotion studio, http://localhost:3000) para que el usuario pueda previsualizar al instante; reserva las renderizaciones completas para la aprobación final.

1. El usuario previsualiza en Studio y da retroalimentación en lenguaje sencillo.
2. Tradúcelo a una edición quirúrgica: cambia solo el valor relevante:
   • "Demasiado rápido" → amplía el rango de entrada de interpolate o aumenta el damping del resorte.
   • "El logo debería resaltar más" → baja el damping del resorte / añade sobrepaso.
   • "Cambia el texto del CTA" → edita el prop / defaultProps, no toques nada más.
   • "Color de acento diferente" → cambia un hex en el objeto de colores.
   • "Mantén la última característica más tiempo" → aumenta el durationInFrames de esa <Sequence> Y vuelve a derivar el durationInFrames total de la Composición.
3. Vuelve a renderizar, o deja 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 el tiempo de una escena; reescribe solo cuando la estructura de la escena cambie (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, por lo que N variantes = N conjuntos de props en un archivo JSON:

[
  { "out": "out/acme.mp4",   "props": { "logoText": "Acme",   "colors": { "accent": "#6C5CE7" }, "cta": "Prueba Acme" } },
  { "out": "out/globex.mp4", "props": { "logoText": "Globex", "colors": { "accent": "#00B894" }, "cta": "Prueba 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 entrada, o usa renderMedia() de @remotion/renderer para un bucle tipado. Localiza o prueba A/B copias y colores editando únicamente el JSON.

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

Recurre a Lambda cuando una sola renderización tome minutos localmente o el lote sea grande: distribuye los fotogramas entre trabajadores serverless. De lo contrario, lo local es más simple y gratuito.

npx remotion lambda functions deploy            # único 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 en el recuento de fotogramas: la animación se corta antes de tiempo o el clip tiene una cola muerta. Causa: la duración de una <Sequence> cambió, 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 tiempo. Esta es la sorpresa número 1 en las renderizaciones.
2. Referencia staticFile() faltante: la renderización falla o un activo aparece 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. Parpadeo/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; la renderización entonces espera la fuente.

Entregable

Un archivo renderizado en out/ con el ajuste preestablecido solicitado, más - para sesiones de iteración - la oferta de bucle: nombra las dimensiones ajustables (ritmo, copia, color, tiempo) 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 completamente cada iteración: la recarga en caliente de Studio es el bucle de previsualización; renderiza al aprobar.
• NO forzar la concurrencia más allá de los núcleos físicos en una máquina que esté intercambiando o limitando.
• NO recurrir a Lambda cuando las renderizaciones locales terminan en segundos: añade configuración y costos de AWS sin beneficio.
• NO crear nuevas escenas ni reestructurar la composición aquí: eso es remotion-compose.

Nivel de calidad

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

Escalado

La autoría 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 sincronización de audio a sound-and-music-sync.