De codigo a video, sin timeline
Crear video ya no tiene que empezar en un editor de timeline. Con Remotion, construyes videos como construyes apps: componentes, props y logica guiada por datos. Este post muestra como crear un video desde codigo con el setup de este proyecto. Vamos a cubrir la herramienta, el flujo de trabajo y los detalles practicos que hacen que el video programatico sea productivo.
Por que video programatico?
Los editores tradicionales son excelentes para piezas artesanales, pero no estan pensados para escala, automatizacion o datos dinamicos. El video por codigo brilla cuando necesitas: - Cientos o miles de renders personalizados - Integracion con APIs o pipelines de datos - Sistemas visuales y templates reutilizables - Control de versiones y trabajo colaborativo Remotion permite construir todo eso en React y renderizar archivos de video reales.
Las herramientas que usamos aqui
Este proyecto es una app de Next.js que integra Remotion para previsualizar y renderizar dentro de una interfaz web. Core stack: - Remotion para componer y renderizar videos con React - React + TypeScript para componentes, props y tipado - Next.js (App Router) para la UI y rutas de API - @remotion/player para previsualizar en el navegador - @remotion/lambda para render a escala en AWS - Tailwind CSS para estilos rapidos - Zod para definir y validar props - @remotion/google-fonts para cargar tipografias - Bun como package manager en desarrollo local
Estructura del proyecto
La parte de Remotion vive en src/remotion/ y se conecta con la app: - src/remotion/Root.tsx define las composiciones (templates) - src/remotion/MyComp/Main.tsx es la escena principal - src/app/page.tsx renderiza el Remotion Player y los controles - types/constants.ts contiene duracion, dimensiones, fps y esquema de props Esta separacion mantiene el template limpio y la UI rapida para iterar.
1) Definir una composicion
Todo video en Remotion empieza con un <Composition> en Root.tsx que define tamaño, fps, duracion y el componente que renderiza el video. Ideas clave: - durationInFrames es el largo total del timeline - fps controla la resolucion temporal - width / height definen la resolucion de salida - defaultProps te da un template reutilizable
2) Construir la escena en React
En Main.tsx, la composicion usa estructura React, pero todo el motion se controla por frame. Vas a ver: - useCurrentFrame() para saber en que frame estas - useVideoConfig() para fps y duracion - spring() para animaciones suaves - <Sequence> para controlar cuando aparece cada elemento Esto replica la logica de keyframes y layers, pero con codigo.
3) Parametrizar el video
La gran ventaja del video programatico son los inputs. En este repo: - Zod define CompositionProps para el title - La UI pasa un title distinto con Remotion Player - El mismo template puede renderizar infinitas variaciones Esto habilita personalizacion y automatizacion.
4) Preview en el navegador
src/app/page.tsx usa Remotion Player para playback en vivo, scrubbing y preview instantaneo cuando cambias inputs. Reemplaza el ciclo clasico de build-render-check por un loop rapido.
Resultado generado
Este es un render de ejemplo producido desde la composicion. Reemplaza el archivo con tu propio output cuando exportes una nueva version.
5) Render local o en la nube
Para render local, puedes usar la CLI de Remotion y obtener un archivo real. Para escala, el proyecto incluye Remotion Lambda, ideal para batch jobs o grandes volumenes.
Tips y trucos que importan
Patrones practicos que hacen el workflow mas predecible: 1) Mueve todo con frames, no con CSS. Remotion renderiza frame por frame; las transiciones CSS no son confiables. 2) Piensa en segundos y convierte a frames multiplicando por fps. 3) Usa Sequence para timing y Series para ordenar escenas. Usa premountFor para evitar jitter. 4) Usa spring() con damping 200 para un final suave. 5) Guarda assets en public/ y cargalos con staticFile(). 6) Reutiliza templates con defaultProps. 7) Separa escenas complejas en componentes para mantener claridad.
Consideraciones de produccion en 2026
El video programatico funciona de verdad cuando es estable a escala. Algunas practicas utiles: - Pre-carga tipografias y assets para evitar frames vacios. - Mantener animaciones deterministicas evita flicker entre renders. - Validar inputs con Zod evita data mala en produccion. - Reutiliza fondos y capas pesadas cuando sea posible. - Define tokens de color y tipografia para consistencia visual.
Workflow comun
Un flujo practico se ve asi: 1. Crea o ajusta una composicion en Root.tsx. 2. Construye la escena en un componente separado con sequences y animaciones. 3. Define props con Zod y pasalas desde la UI. 4. Previsualiza en Remotion Player e itera. 5. Render local, luego escala con Lambda.
Conclusion
El video programatico es poderoso para automatizacion y escala, pero no es magia. No creas todo lo que ves; aunque los resultados son ok, todavia falta mucho para reemplazar a motion designers o editores. El punto ideal hoy es usar codigo para visuals repetibles y guiados por datos, con criterio humano en la direccion de arte. Ese mix es donde realmente brilla.