$ man how-to/build-remotion-video-system

Remotion es un framework de React que renderiza video frame por frame. Escribes componentes JSX. Remotion evalúa cada frame a tu FPS objetivo y codifica el resultado a MP4, WebM o GIF. No se requiere GPU. No hay editor de timeline. No hay After Effects. Todo el pipeline se ejecuta en Node.js en una laptop estándar. La ventaja clave para una configuración monorepo es que los componentes de video pueden importar los mismos paquetes compartidos que tus sitios web. Design tokens, objetos de datos, paletas de colores y definiciones de tipos se comparten a través de todo el codebase. Cambia un valor hex en el paquete compartido y los sitios web y los videos se actualizan en el siguiente build.

PATTERN

Define presets de aspect ratio como un objeto constante: linkedin (1080x1350, 4:5), reels (1080x1920, 9:16), landscape (1920x1080, 16:9). Crea un hook useScale() que normaliza todo el renderizado a una resolución base (1080x1350) y escala proporcionalmente. Cada marca obtiene tres composiciones en Root.tsx - una por aspect ratio - compartiendo el mismo árbol de componentes. Nueve composiciones totales de un solo codebase: tres marcas por tres formatos. El registro de composiciones es la única fuente de verdad para lo que se renderiza. Agregar una nueva marca significa agregar tres líneas a Root.tsx, no reconstruir ningún componente.

CODE

Cada video es una secuencia de escenas conectadas por TransitionSeries de @remotion/transitions. Cada escena es un componente React con un conteo de frames fijo definido en un archivo de configuración de timing central. La configuración de timing V3 define cuatro escenas totalizando 310 frames a 30fps (aproximadamente 10 segundos): Hook (36 frames), BootWikiBlitz (110 frames), Progression (100 frames), CtaNetwork (94 frames), con superposiciones de 10 frames entre escenas para transiciones suaves. El archivo de timing es el único punto de control para el ritmo del video. Cambiar un número cambia todo el ritmo sin tocar ningún código de componente.

PATTERN

Remotion requiere renderizado determinista. Math.random() produce valores diferentes por frame y rompe el render. La solución es ruido Perlin de @remotion/noise. La función noise2D toma una cadena de semilla, coordenadas x e y y devuelve un float determinista. Alimenta el ruido por instancia de componente (índice de columna, índice de partícula) y condúcelo con el número de frame. MatrixRain usa ruido para selección de caracteres, deriva de columna y brillo de opacidad. ParticleField usa dos streams de ruido independientes para deriva x e y más un tercero para pulso. TypewriterText usa matemáticas simples de frame para revelación de caracteres. Misma semilla, misma salida, cada render. Animación orgánica que es completamente reproducible.

PATTERN

Un componente SceneWrapper aplica tratamiento visual consistente a cada escena: fondo de lienzo oscuro, viñeta radial para oscurecimiento de bordes, lavado de color de acento a baja opacidad, campo de partículas ambientales, grano de película vía SVG feTurbulence y superposición de scanlines para una estética CRT. El wrapper acepta un prop de color de acento que tiñe toda la escena. La escena BootWikiBlitz cicla a través de la paleta de la marca mientras las tarjetas wiki giran - verde, teal, ámbar, púrpura - dándole a cada tarjeta una sensación distinta mientras mantiene consistencia visual. Los design tokens viven en un archivo tokens.ts que mapea nombres de marca a colores y define la familia de fuentes compartida.

PRO TIP

Ejecuta npm run render:all para generar las nueve variantes. Remotion renderiza cada composición a frames y luego codifica a MP4. Las salidas van a website/apps/video/out/ y se despliegan al directorio public/video/ de cada sitio. El índice de contenido SQLite rastrea todos los archivos de video con su marca, aspect ratio, formato y estado de despliegue. Todo el pipeline se ejecuta localmente en un MacBook. Sin granja de render en la nube. Sin servicio externo. El CI del monorepo puede disparar renders en push si es necesario, pero para velocidad de iteración, el renderizado local a 30fps para videos de 10 segundos toma segundos, no minutos.