Remotion: vídeo programático con componentes de React

Todo lo que hay que saber sobre remotion-dev/remotion: un marco de TypeScript para definir, previsualizar y renderizar vídeos reales a partir de componentes React.

Qué es Remotion

Remotion permite construir vídeos mediante React en lugar de editar una línea de tiempo manualmente. Una composición declara sus dimensiones, fotogramas por segundo y duración; el componente recibe el fotograma actual con useCurrentFrame() y se renderiza a MP4 u otros formatos mediante la interfaz de línea de comandos, una API de servidor o infraestructura en la nube.

El proyecto no es un editor de vídeo convencional ni un modelo generativo. Su propuesta es tratar el vídeo repetible, basado en datos o parametrizado como software: componentes, propiedades de entrada, control de versiones, pruebas y automatización. El mismo componente puede usarse en Remotion Studio, en <Player /> dentro de una aplicación y en renderizado del lado del servidor.

Ilustración cyberpunk de creación programática de vídeo con React: una interfaz holográfica de línea de tiempo flota en un estudio oscuro, con fragmentos de código de componentes React en paneles neón azul y rosa junto a un reproductor de vídeo central con una visualización dinámica basada en datos.

El origen: una biblioteca creada para el flujo web

El repositorio se creó el 23 de junio de 2020. La documentación y el podcast Syntax identifican a Jonny Burger como la figura entrevistada para explicar el producto y sus flujos de creación programática.

El contexto técnico que explica su aparición es una tensión habitual: HTML, CSS y React son herramientas cómodas para interfaces y datos, mientras que los editores tradicionales de vídeo son más adecuados para ajuste visual manual. Remotion toma deliberadamente el primer camino. Esto facilita generar muchas variantes —por ejemplo, un vídeo por cliente, idioma, episodio o conjunto de métricas— pero no elimina la necesidad de diseñar animaciones, probar el resultado visual y gestionar códecs, fuentes y recursos.

Espacio de trabajo digital en modo oscuro mostrando la transición de una línea de tiempo de edición de vídeo tradicional a un editor de código React: a la izquierda un editor no lineal gris y tosco, a la derecha un IDE neón con código limpio de componentes React definiendo una composición de vídeo.

Filosofía y principios

El vídeo como interfaz declarativa: una composición es un componente React con parámetros explícitos, no una secuencia opaca de acciones de ratón.
Reutilización entre vistas y renderizado: los componentes se pueden previsualizar en Studio, incrustar con <Player /> y renderizar en un proceso de servidor.
Automatización antes que repetición: las propiedades de entrada permiten producir variantes sin duplicar un proyecto de edición.
Control técnico del resultado: la CLI y remotion.config.ts exponen resolución, códec, concurrencia, CRF, escala y ruta de salida.

Cómo funciona

Una composición se registra con Composition y define id, component, durationInFrames, fps, width y height. Dentro del componente, useCurrentFrame() devuelve un contador cuyo primer valor es 0; las animaciones y transiciones se calculan a partir de ese valor.

Interfaz de Remotion Studio en tema oscuro cyberpunk: una ventana de previsualización futurista muestra un gráfico animado, rodeada de paneles flotantes para durationInFrames, fps y width, con flujos de datos luminosos conectando la interfaz a un icono de Chrome Headless Shell.

El flujo local es Studio → composición → renderizado. npx remotion studio abre la previsualización; npx remotion render procesa una composición con Chrome Headless Shell y genera un archivo, cuyo códec predeterminado es H.264. Para servicios, la API de Node/Bun sigue el recorrido bundle() → selectComposition() → renderMedia(); el paquete puede reutilizarse para muchos renderizados con inputProps.

Visualización abstracta de renderizado de vídeo del lado del servidor y automatización: un bastidor de servidor luminoso central procesa múltiples variantes de vídeo simultáneamente, con fotogramas de película delineados en neón cayendo como paquetes de datos, y flechas etiquetadas bundle(), selectComposition() y renderMedia().

Remotion ofrece además Lambda para dividir el trabajo de renderizado en AWS, Player para una aplicación React, plantillas para Next.js y otros entornos, y un flujo documentado para GitHub Actions. La documentación advierte que remotion.config.ts afecta a la CLI y Studio, no a las API SSR: en ese caso las opciones deben entregarse a la API.

Estado oficial y semioficial

El repositorio y remotion.dev son los canales de primera parte. El paquete se distribuye como una familia @remotion/* en npm y la organización mantiene plantillas, SDK para Lambda y plugins/Skills para agentes de código.

Hay integraciones con estado oficial, pero deben describirse con precisión:

Vercel: la documentación de Remotion indica que su plantilla está en el mercado de plantillas de Vercel y documenta @remotion/vercel. Es una integración y distribución visibles en ese catálogo; las fuentes recuperadas no prueban que Vercel sea propietario del proyecto ni una certificación de sus resultados.
Claude Code, Codex, Cursor y Kimi: la documentación oficial mantiene Skills y enumera plugins para esos entornos. La instalación desde el mercado de Remotion para Claude Code es una ruta de primera parte, no una homologación por cada proveedor.
Mediabunny: Remotion lo recomienda como proyecto independiente de Vanilagy, patrocina el proyecto como Gold Sponsor y está retirando progresivamente paquetes multimedia propios. Es una relación semioficial de patrocinio y recomendación, no un repositorio de Remotion.

No se recuperó una designación formal de «estándar». En la práctica, la presencia de Studio, CLI, paquetes npm, plantillas y SDKs convierte a Remotion en un marco integrado para el vídeo programático en React, sin que eso equivalga a una aprobación universal.

El ecosistema

Repositorios y productos de primera parte

remotion-dev/skills: Skills oficiales para crear, renderizar, marcar contenido, mapas, subtítulos y aplicaciones de vídeo; 4.252 estrellas y 489 bifurcaciones.
remotion-dev/claude-code-plugin, codex-plugin, cursor-plugin y kimi-code-plugin: conectores oficiales alrededor de esos Skills. Las cifras recuperadas fueron, respectivamente, 8, 21, 0 y 1 estrellas; son complementos pequeños, no alternativas al núcleo.
remotion-dev/lambda-php-sdk, lambda_go_sdk y lambda-ruby-sdk: SDK oficiales para invocar Remotion Lambda desde PHP, Go y Ruby. Sus README indican que proceden del código fuente del repositorio principal y se actualizan con las versiones de Remotion.
remotion-dev/vue-starter, angular-starter y svelte-starter: iniciadores oficiales para integrar Remotion con esos marcos, no puertos del renderer principal.
remotion-dev/trailer (1.119 estrellas) y remotion-dev/github-unwrapped (1.309 estrellas) son ejemplos/aplicaciones de la propia organización.
El catálogo oficial también incluye plantillas. Entre los repositorios recuperados están template-tiktok (273 estrellas), template-audiogram (266), template-code-hike (215) y template-three (107). La tienda de Remotion ofrece además productos de pago de primera parte.

Mapa de red futurista del ecosistema e integraciones de Remotion: un núcleo neón central con el símbolo de átomo de React se conecta mediante líneas de fibra óptica luminosas a nodos satélite que representan Vercel, Claude Code, Cursor y AWS Lambda.

Extensiones y adopciones comunitarias

av/remotion-bits (437 estrellas) reúne componentes de gráficos, transiciones y revelados de texto. No se recuperó una relación de soporte oficial.
stefanwittwer/remotion-animated (220 estrellas) se presenta como una extensión declarativa de animación para Remotion.
wshuyi/remotion-video-skill (333 estrellas) es un Skill comunitario orientado a Claude Code, con material bilingüe y chino; es distinto de remotion-dev/skills.
nyanko3141592/remotion-voicevox-template (279 estrellas) es una plantilla japonesa para VOICEVOX: una localización/plantilla comunitaria, no una traducción oficial del núcleo.
openvideodev/react-video-editor (1.768 estrellas) declara usar Remotion para un editor de vídeo React. calesthio/OpenMontage (46.467 estrellas) está etiquetado con Remotion y se presenta como sistema de producción de vídeo asistido por agentes. Ambos son adoptantes externos; no deben confundirse con repositorios oficiales.

La red del repositorio principal tenía 4.162 bifurcaciones al medirla. La inspección de bifurcaciones ordenadas por estrellas no reveló un puerto diferenciado prominente; tampoco se identificó un puerto mantenido del renderer central fuera de TypeScript. Sí se recuperaron SDKs oficiales y plantillas/localizaciones externas.

Números del repo

Medición: 10 de agosto de 2026, API de GitHub y npm.

Métrica	Valor
Estrellas	55.980
Bifurcaciones	4.162
Suscriptores reales	159
Incidencias abiertas indicadas por la API	205
Lenguaje principal	TypeScript
Creación	23 de junio de 2020
Última actividad `push`	10 de agosto de 2026
Última publicación recuperada	`v4.0.507`, 7 de agosto de 2026
Descargas npm de `remotion`, última semana	1.689.662

Panel de datos cyberpunk mostrando métricas impresionantes de GitHub y npm para un proyecto masivo de código abierto: gráficos holográficos neón muestran una línea ascendente para 55.980 estrellas y 1,6 millones de descargas semanales de npm.

Los paquetes oficiales también mostraron actividad de distribución: @remotion/cli registró 1.140.740 descargas semanales y @remotion/player, 1.463.060. Estas cifras cuentan descargas, no personas ni implementaciones únicas. La API general de GitHub replica las estrellas en watchers_count; por ello se informa subscribers_count como suscriptores reales. Su campo open_issues_count puede incluir solicitudes de cambios abiertas, así que no representa exclusivamente incidencias.

La versión actual pertenece a la línea v4. La guía v3 → v4 exige mantener remotion y todos los paquetes @remotion/* en la misma versión, mover Config a @remotion/cli/config y sustituir npx remotion preview por npx remotion studio.

Cómo contribuir

Remotion publica un proceso de contribución. Para cambios grandes, pide abrir primero una incidencia y acordar intención y arquitectura; los proyectos amplios se pueden coordinar por Discord o correo. El monorepo requiere Bun v1.3.3 o posterior:

git clone --depth=1 https://github.com/remotion-dev/remotion.git
cd remotion
bun i
bun run build
bun run watch

Terminal futurista de desarrollador en un entorno oscuro y sombrío, simbolizando el proceso de contribución de código abierto: una interfaz de línea de comandos holográfica muestra los comandos bun i, bun run build y git clone en texto neón verde y ámbar, con iconos 3D de TypeScript y Rust conectados por líneas de energía.

La documentación propone verificar con bun run test, ejecutar el ejemplo en packages/example y renderizar ten-frame-tester. Para nuevas opciones, prescribe la prioridad API de Node → Studio → flag de CLI → configuración → valor por defecto, además de documentar la API, la CLI y la versión que incorporó el cambio. El repositorio acepta TypeScript o Rust y exige nombres claros, unidades explícitas y compatibilidad hacia delante y atrás cuando corresponda.

Cómo lo recibió la comunidad

La evidencia recuperada combina tutoriales y casos de uso verificables con una conversación limitada en Hacker News:

El envío de Hacker News 26067498, «Remotion: crear gráficos en movimiento con React», fue publicado por tomduncalf el 8 de febrero de 2021 y tenía 9 puntos y 0 comentarios. Un reenvío al día siguiente, 26072767, tuvo 8 puntos y 0 comentarios. Acreditan difusión, no una reseña externa ni consenso.
En el hilo 47471601, el usuario TechSquidTV comentó que había usado Remotion en algunos casos como sustituto de After Effects para una plantilla o guion que generaba vídeos repetitivos, y lo calificó positivamente. El matiz importante es que seguía produciendo los recursos gráficos en After Effects: la experiencia respalda automatización y plantillas, no una sustitución completa del editor.
El vídeo de Fireship, «This video was made with code. But how?», identifica Remotion y registraba 882.247 visualizaciones al consultarlo. Es un tutorial de gran alcance, no una prueba de calidad independiente.
Mux Engineering publicó un tutorial de Dave Kiss que denomina a Remotion una biblioteca útil para crear vídeo con React y muestra un proyecto que visualiza datos de Mux. Es un caso de integración documentado, no una evaluación comparativa.
El episodio 1005 de Syntax, publicado el 18 de mayo de 2026, entrevistó a Jonny Burger sobre creación de vídeo programática y basada en Skills. La ficha del podcast es una fuente de difusión técnica; no convierte las afirmaciones del invitado en métricas independientes.

No se recuperaron datos verificables de Reddit por el desafío del sitio; X exigió autenticación y Product Hunt mostró verificación de Cloudflare. Esas limitaciones no prueban ausencia de publicaciones ni permiten adjudicar votos, comentarios o reacciones en esas plataformas.

Remotion frente a otras propuestas

Propuesta	Relación verificable	Diferencia verificable
After Effects	Un usuario de HN lo usó junto a Remotion para automatizar una plantilla repetitiva.	After Effects seguía siendo usado por ese usuario para crear recursos gráficos; la fuente no demuestra equivalencia funcional completa.
`openvideodev/react-video-editor`	Declara construir un editor de vídeo React con Remotion.	Es una aplicación de edición construida sobre Remotion, mientras que el repositorio principal es el marco y renderer.
OpenMontage	Está etiquetado con Remotion y aborda producción de vídeo asistida por agentes.	Es un sistema de producción adyacente; no se recuperó evidencia para convertirlo en una comparación de rendimiento o de arquitectura.
Mediabunny	Remotion lo recomienda para funciones multimedia y patrocina el proyecto.	Es un proyecto independiente y la documentación de Remotion plantea migrar hacia él desde paquetes multimedia concretos; no sustituye por sí mismo las composiciones React de Remotion.

Un límite práctico actual aparece en la incidencia #10235: un usuario solicita exportar EDL, FCPXML, Premiere XML u OTIO para un flujo «IA hace el corte → editor humano termina en DaVinci/Premiere». Según la incidencia, Remotion produce vídeo final como MP4 o ProRes, no una lista de decisiones de edición. Esto es una petición abierta de integración, no una promesa del proyecto.

Guía rápida de uso

Instalación y primer arranque

Se necesita un entorno Node compatible con npm. El iniciador oficial es:

npx create-video@latest

Para crear un proyecto vacío sin interacción, con Tailwind y Skills:

npx create-video@latest --yes --blank my-video
cd my-video
npm i
npx remotion skills add
npm run dev

El último comando abre Remotion Studio para previsualizar las composiciones. En Linux, Chrome Headless Shell requiere bibliotecas del sistema; Alpine y NixOS no están soportados y las distribuciones glibc necesitan al menos glibc 2.35.

Flujos de trabajo habituales

Previsualizar una composición local: ejecutar npx remotion studio src/remotion/index.ts. Studio carga el punto de entrada y permite inspeccionar la composición.
Renderizar un MP4: npx remotion render MyComposition out/video.mp4. Si se omite el identificador, la CLI lo solicita; si se omite la ruta de salida, escribe en out/.
Reutilizar el resultado en una aplicación: instalar remotion @remotion/cli @remotion/player y usar el componente con <Player />; Player recibe el componente, no la lista de composiciones.
Renderizar vídeos parametrizados en un servicio: empaquetar una vez con bundle(), calcular los metadatos con selectComposition() y llamar a renderMedia() con inputProps. Para cargas escalables, la documentación ofrece Lambda en AWS.

Configuración esencial

Crear remotion.config.ts en la raíz para las opciones de CLI/Studio:

import {Config} from '@remotion/cli/config';

Config.setConcurrency(8);
Config.setPixelFormat('yuv444p');
Config.setCodec('h265');

Config.setConcurrency(n): regula fotogramas paralelos; la guía sugiere partir de los núcleos disponibles y medir el efecto sobre el resto del equipo.
Config.setCodec(...): escoge H.264, H.265, VP8, VP9, AV1, ProRes u otros códecs disponibles.
Config.setScale(2) y Config.setCrf(16): controlan resolución efectiva y calidad; el argumento de CLI tiene prioridad sobre el archivo.
Config.setOutputLocation(...): establece una ruta de salida predeterminada.
src/Root.tsx: registra cada Composition con su id, tamaño, fps y duración; es el primer archivo que se modifica al añadir una salida.

Trampas frecuentes y soluciones

Propiedades JSON en Windows: --props no maneja de forma fiable JSON en línea por las comillas del intérprete. Usar un archivo JSON.
Calidad y aceleración: --crf y --video-bitrate no se combinan; con aceleración por hardware se debe usar bitrate, no CRF.
SSR ignora el archivo de configuración: pasar opciones a las API de empaquetado/renderizado, pues remotion.config.ts no se aplica allí.
Next.js: no usar @remotion/bundler dentro de una API route, porque intentaría empaquetar Webpack con Webpack. Crear el bundle fuera de la ruta o usar Lambda/Vercel.
Migración v3 → v4: actualizar todos los paquetes coordinadamente; FFmpeg y FFprobe ya vienen con @remotion/renderer, por lo que se deben retirar los flujos antiguos de instalación manual.

Integraciones y migración

La vía oficial para agentes es npx skills add remotion-dev/skills; la documentación asocia ese contenido con Claude Code, Codex, Cursor y Kimi. Para CI, el ejemplo oficial de GitHub Actions instala dependencias, ejecuta npx remotion render MyComp out/video.mp4 y publica el artefacto. Para servicios de Node/Bun, usar SSR; para renderización distribuida, Lambda; para una aplicación web, Player y las plantillas de Next.js, Vercel, Vue, Angular o Svelte.

La licencia no es MIT ni Apache: es gratuita para individuos, organizaciones sin ánimo de lucro y organizaciones de hasta tres empleados, incluso en uso comercial. Las organizaciones fuera de esos supuestos necesitan licencia de compañía; además, no permite derivar el código para vender, alquilar o relicenciar un producto derivado de Remotion. Conviene comprobarla antes de planear una integración comercial.

Casos de uso y a quién puede ayudar este repositorio

Equipos de producto y marketing con muchas variantes de un mismo vídeo pueden pasar propiedades —datos, idioma, marca, cifras o rutas de recursos— a una composición y renderizar resultados repetibles desde la CLI, CI o un servicio.
Desarrolladores React que necesitan una vista de vídeo dentro de una aplicación pueden reutilizar el componente con <Player /> y reservar el renderer para la exportación final, en vez de mantener dos implementaciones de la misma visualización.
Productos SaaS que generan entregables audiovisuales bajo demanda pueden empaquetar el proyecto una vez y renderizar con inputProps; Lambda es la opción documentada cuando se necesita distribuir el trabajo en AWS.
Equipos que automatizan informes de datos, resúmenes o plantillas pueden seguir el caso de Mux como referencia de integración: traducir datos a componentes y convertir el resultado en vídeo.
Personas que trabajan con agentes de código pueden usar los Skills y plugins oficiales para que un agente cree o modifique composiciones. Esto no elimina la revisión visual ni resuelve las limitaciones abiertas de interoperabilidad con editores de línea de tiempo.

Visualización dividida en pantalla comparando edición de vídeo tradicional con generación programática: a la izquierda una línea de tiempo compleja y manual de After Effects; a la derecha un componente React elegante y automatizado generando cientos de variantes de vídeo desde una sola propiedad de entrada.

Recursos

Repositorio: https://github.com/remotion-dev/remotion
Documentación e instalación: https://www.remotion.dev/docs
Fundamentos: https://www.remotion.dev/docs/the-fundamentals
CLI de renderizado: https://www.remotion.dev/docs/cli/render
Configuración: https://www.remotion.dev/docs/config
Skills oficiales: https://www.remotion.dev/docs/ai/skills
Plantillas: https://www.remotion.dev/templates
Contribuir: https://www.remotion.dev/docs/contributing
Vídeo tutorial: https://www.youtube.com/watch?v=deg8bOoziaE
Tutorial con Mux: https://www.mux.com/blog/visualize-mux-data-with-remotion
Conversaciones de Hacker News: https://news.ycombinator.com/item?id=26067498, https://news.ycombinator.com/item?id=47471601
Paquete npm: https://www.npmjs.com/package/remotion
Discord: https://www.remotion.dev/discord

Nota: este artículo combina documentación y repositorios de Remotion, API de GitHub, npm y fuentes comunitarias recuperadas el 10 de agosto de 2026. Las cifras cambian con el tiempo.