¿Qué hace remotion?
Guía completa y mejores prácticas para Remotion: creación programática de videos en React con animaciones, composiciones y manejo de medios.
Introducción
Remotion te permite crear videos reales con React. Puedes usar componentes, props y estado para generar videos dinámicos. Este skill cubre las mejores prácticas para escribir código limpio, escalable y eficiente con Remotion.
Configuración Inicial
- Instala Remotion:
npm init video
- O en un proyecto existente:
npm install @remotion/cli
Principios Básicos
- Composiciones: Define la estructura de tu video con
<Composition>. - Fotogramas: Cada fotograma es una renderización de React. Usa
useCurrentFrame()para acceder al índice actual. - Props: Pasa datos a tus componentes para hacer videos personalizables.
Animaciones
Usa la función interpolate() para animar propiedades:
import { interpolate, useCurrentFrame } from 'remotion';
export const MiComponente: React.FC = () => {
const frame = useCurrentFrame();
const opacidad = interpolate(frame, [0, 30], [0, 1]);
return <div style={{ opacity: opacidad }}>Hola</div>;
};
Componentes Recomendados
<Video>: Reproduce un archivo de video.<Audio>: Reproduce audio.<Img>: Muestra imágenes estáticas.<Sequence>: Controla la temporización de los hijos.<TransitionSeries>: Crea transiciones entre escenas.
Mejores Prácticas
- Usa hooks nativos de Remotion como
useVideoConfig()para obtener duración, tamaño y FPS. - Mantén los componentes puros: Evita efectos secundarios dentro de componentes de video.
- Optimiza la memoria: Libera objetos de medios grandes después de usarlos.
- Divide en escenas: Usa múltiples composiciones para videos largos.
Renderizado
Renderiza tu video localmente o en la nube:
npx remotion render src/index.ts salida.mp4