Remotion: cómo hicimos un video promocional de producto con código

Qué es Remotion

Remotion es un framework para hacer videos con React. Su página de inicio lo resume en una frase: “Make videos programmatically” (haz videos con código). En vez de poner keyframes en una línea de tiempo, escribes componentes. Remotion le pasa a cada render un número de fotograma, y lo que el componente dibuja para ese fotograma es la imagen (Remotion: la idea central).

Un video es una composición: un componente más cuatro números, su ancho, su alto, su duración en fotogramas y sus fotogramas por segundo. El primer fotograma es el 0 y el último es la duración menos uno. Las composiciones se previsualizan en Remotion Studio, en el navegador, y se renderizan a un archivo desde la línea de comandos o desde Node.js.

Las piezas que usas en cada video

• useCurrentFrame() devuelve el fotograma que se está dibujando. Todo lo que se mueve es una función de ese número.
• <Sequence> y <Series> ubican las escenas en la línea de tiempo. Dentro de una secuencia el conteo vuelve a empezar en 0, así que cada escena se escribe como si abriera el video (Sequence, Series).
• interpolate() convierte el fotograma en un valor: una opacidad de 0 a 1 en 20 fotogramas, una posición, un precio. Con clamp el valor se detiene al final de su rango, y una curva de easing da forma al movimiento intermedio (interpolate()).
• spring() es una animación basada en física que se pasa un poco y se asienta, el tipo de movimiento que usan las interfaces (spring()).
• @remotion/transitions aporta las transiciones entre escenas (transiciones).
• Las props llevan los datos: textos, precios, colores, idioma. Las props por defecto permiten diseñar sin datos, y las input props las reemplazan al renderizar (videos parametrizados).

Como los fotogramas se dibujan con React y tecnología web, en un fotograma cabe todo lo que un navegador puede dibujar: CSS, SVG, canvas, fuentes web y los componentes de un producto que ya está hecho en React.

El ejemplo: el comercial de 28,8 segundos de Superame

Superame (superame.lol) es un ranking público de proyectos donde la posición se compra en dólares enteros: el total verificado más alto ocupa el #1. En Dardo diseñamos y construimos el producto (caso Superame), y también hicimos su comercial, el ejemplo de este artículo.

Dura 28,8 segundos, está en español, sobre fondo blanco, y está hecho con la interfaz de Superame: las tarjetas de proyecto, el panel de oferta con su botón “Superar” y la lista del ranking. Lo subimos a dardo.studio el 14 de septiembre de 2026, y una versión sin sonido de 1280 × 720 se reproduce en la tarjeta de Superame de nuestro portafolio.

El propio archivo dice cómo se hizo. Remotion escribe “Made with Remotion” y su versión en el campo de comentario de los archivos que renderiza (Remotion: metadatos de video), y en este se lee “Made with Remotion 4.0.520”.

Escena por escena

Medimos los tiempos con fotogramas extraídos del archivo, dos por segundo y diez por segundo alrededor de la oferta, así que cada corte tiene un margen de medio segundo.

Las demás tarjetas del video son proyectos de relleno.

El archivo entregado

Fuente: ffprobe sobre el archivo publicado (superame-your-project-v33.mp4), leído el 29 de octubre de 2026.

Por qué este comercial se presta para código

Tres rasgos de este video hacen que el código encaje. También son las preguntas que vale la pena hacerse sobre tu propio video de lanzamiento.

Está hecho de interfaz

Cada escena es una tarjeta, un panel, una lista o una línea de texto, que es justo de lo que está hecho el producto. Si el producto está construido en React, Remotion puede renderizar sus componentes reales, con sus fuentes y colores, en vez de capturas redibujadas. Si no, una interfaz sigue siendo cajas, texto y números, que HTML y CSS dibujan con precisión. Un video de caras, manos o personajes ilustrados no tiene componentes que reutilizar.

Sus números tienen que cuadrar

La oferta sube de $650 a $781, y dos escenas después ese mismo $781 aparece en la tarjeta del #1, por encima de los $742 que tenían el primer puesto. El comercial respeta la regla del producto: el total más alto ocupa el #1. En código, un solo valor puede alimentar todas las escenas, así que un precio nuevo cambia todas las escenas en el siguiente render, y el orden de la lista se puede calcular en vez de acomodarlo a mano.

El contador pasa por $651, $655, $673, $702, $741, $770 y $780 antes de detenerse: rápido en el medio, lento en los extremos. En Remotion, ese tipo de conteo es una llamada a interpolate() sobre el número de fotograma con una curva de easing, redondeada a dólares enteros.

Puede necesitar versiones

Superame funciona en español, portugués e inglés, y el comercial existe en español, como un solo archivo 16:9. Con los textos, los precios y el nombre del proyecto como props, una versión en inglés o en portugués es otro juego de props y otro render, más una revisión de que las líneas más largas sigan cabiendo. Una versión 4:5 o 9:16 funciona igual, con una diferencia: su composición visual hay que diseñarla para el nuevo formato (ver los formatos más abajo).

Cómo se traduce cada momento a Remotion

No vamos a publicar el código del proyecto, así que esta tabla no es una copia de nuestros archivos. Muestra la herramienta documentada de Remotion para cada tipo de momento del comercial.

¿Código o After Effects?

After Effects y las demás herramientas de motion design no son una forma vieja de hacer lo mismo: son mejores para otro tipo de trabajo. También resuelven versiones: quien anima en After Effects puede exponer textos, colores y números en una plantilla de gráficos animados (Motion Graphics template) que un editor cambia en Premiere Pro. After Effects puede animar a partir de archivos JSON, CSV y TSV, y las plantillas basadas en datos reciben hojas de cálculo en Premiere (animación basada en datos en After Effects, plantillas basadas en datos en Premiere). La diferencia está en de qué está hecho el video y dónde vive.

Nuestra regla práctica: si los fotogramas son sobre todo interfaz, texto y números, se escriben; si son sobre todo personas, dibujos o texturas, se animan a mano. Y se pueden combinar. Remotion puede renderizar ProRes 4444 con canal alfa, que abren Premiere Pro, Final Cut Pro y DaVinci Resolve, así que una secuencia de interfaz hecha con código puede entrar en un video editado a mano (Remotion: videos transparentes).

Renderizar: en una máquina o en la nube

La línea de comandos renderiza una composición a un archivo. Sin opciones codifica en H.264, el códec con mejor compatibilidad en navegadores según la guía de codificación de Remotion. La opción --crf cambia peso por calidad, --props pasa datos desde un archivo JSON y --scale renderiza más grande o más pequeño que la composición (opciones del render por CLI).

npx remotion render src/index.ts LaunchVideo out/lanzamiento-es.mp4 --props=./props/es.json

Para muchas versiones, las APIs de Node.js de Remotion recorren un conjunto de datos: seleccionan la composición para cada entrada y la renderizan con esa entrada como input props (renderizar desde un dataset).

Remotion Lambda renderiza en AWS: divide el video en partes pequeñas que muchas funciones Lambda renderizan en paralelo, las une y sube el resultado a S3. Remotion la describe como la forma más rápida y escalable de renderizar sus videos; entre sus límites documentados están unos 80 minutos de video Full HD por render y la falta de AV1. Remotion Cloud Run, el equivalente en Google Cloud, está en alfa y, según su documentación, “not actively being developed” (sin desarrollo activo), así que no empezaríamos un flujo nuevo sobre él.

Para un solo video de lanzamiento de unos 30 segundos, renderizar en una máquina con la CLI es el punto de partida documentado. El render en la nube compensa su configuración cuando renderizas muchas versiones o renderizas bajo demanda.

Sonido, subtítulos y formatos

Audio

Los archivos de audio van en la carpeta public del proyecto y suenan con el componente <Audio>. Más etiquetas mezclan más pistas, el volumen puede seguir al fotograma con interpolate() (el ejemplo documentado es un fade-in de un segundo) y trimBefore toma un tramo del archivo (importar audio, controlar el volumen). El archivo de Superame lleva una pista AAC estéreo a 48 kHz.

Subtítulos

@remotion/captions trabaja con transcripciones de Whisper.cpp en un servidor, de Whisper en el navegador o de las APIs de OpenAI y ElevenLabs (transcribir audio). Los subtítulos se pueden quemar en la imagen o exportar como archivo .srt junto al render (exportar subtítulos).

Sin sonido

Facebook deja que cada persona elija si los videos del feed empiezan con sonido (Ayuda de Facebook), y la especificación de video para el feed de Facebook marca los subtítulos como opcionales pero recomendados (guía de anuncios de Meta). LinkedIn los marca como opcionales (especificaciones de video de LinkedIn). Un video de lanzamiento tiene que entenderse sin sonido. El de Superame se entiende: su mensaje va en texto en pantalla, “Lo lanzaste.”, “¿Y el resto?”, “Sí. El tuyo.”, “Que te vean.”, y la misma versión se reproduce sin sonido en nuestro portafolio.

Formatos

El propio ejemplo de Remotion registra el mismo componente dos veces, en 1920 × 1080 y en 1080 × 1920 (la idea central). Eso hace fácil renderizar una versión vertical, no diseñarla: las tarjetas de Superame son anchas, así que una versión 4:5 o 9:16 necesitaría su propia composición visual.

Quién necesita licencia de Remotion

El código de Remotion es público, pero no es gratis para todas las empresas. Su licencia tiene dos niveles:

• Licencia gratuita: personas, empresas con ánimo de lucro de hasta 3 empleados, organizaciones sin ánimo de lucro, y quien esté evaluando Remotion sin usarlo todavía de forma comercial. El uso comercial está permitido.
• Licencia de empresa (Company License): todos los demás, que en la práctica son las empresas de 4 o más personas.

Precios de remotion.pro.

Si un estudio hace tu video

Las preguntas frecuentes de la licencia de Remotion lo responden directamente. Si solo recibes el archivo terminado, por ejemplo un MP4, tu empresa no es usuaria de Remotion y su número de personas no cuenta: el estudio necesita licencia de empresa si tiene 4 o más personas, y si no, lo cubre la licencia gratuita. Si el proyecto de Remotion es tuyo o lo operas tú, por ejemplo para renderizar versiones nuevas por tu cuenta, se suman las personas de ambas empresas, y la licencia la compra quien tenga la propiedad intelectual del proyecto; el estudio puede administrarla por ti.

El archivo de licencia también avisa que los términos cambian con Remotion 5.0. El pull request con el texto nuevo menciona dos cambios: los contratistas cuentan para el tamaño del equipo, y la licencia de empresa queda sujeta a los términos y condiciones de Remotion. Esto es un resumen, no asesoría legal; lee la licencia y las preguntas frecuentes para tu caso.

Qué tener listo antes de pedir un video de lanzamiento

• La interfaz que quieres mostrar, tal como sale: pantallas, componentes, el sistema de diseño.
• La historia en cinco a ocho momentos, con la línea de texto de cada uno.
• Los números que deben coincidir entre escenas, y la regla del producto que siguen.
• Todas las versiones que vas a necesitar (idiomas, formatos, duraciones), decididas antes del primer render, no después.
• El plan de sonido: licencia de la música, voz, subtítulos.
• Dónde se va a publicar el video, y la especificación de cada plataforma.
• Quién se queda con el proyecto después de la entrega, que define quién necesita la licencia de Remotion.

Lo que este ejemplo no muestra

Publicamos el archivo terminado, no el proyecto detrás. Este artículo no describe su código ni cómo están organizadas sus composiciones, cuánto tomó, qué contiene su pista de audio, cuánto costó ni cuántas personas lo vieron, y no le atribuye resultados. Los tiempos de cada escena salen de fotogramas que extrajimos, con un margen de medio segundo. El comercial existe en español y en 16:9; las demás versiones de las que hablamos son lo que el código hace posible, no archivos que existan.

Cómo te puede ayudar Dardo

Diseñamos y construimos productos, y los videos con que se lanzan: videos de lanzamiento hechos con código a partir de tu interfaz real, y diseño de producto para la interfaz misma. El caso Superame muestra el producto detrás de este comercial. Si el video es parte de un lanzamiento más grande, nuestro checklist para lanzar tu página web y tu nueva marca cubre lo que pasa alrededor, y las buenas prácticas para páginas web SaaS cubren las páginas de producto que necesita un sitio SaaS. Cuéntanos de tu lanzamiento.