Kit de Herramientas para Video con Remotion
Escribe componentes React, obtén videos MP4 reales. Este skill enseña a tu agente de IA cómo construir con Remotion, desde una primera animación hasta un pipeline de producción completo.
29 reglas. Cada característica importante de Remotion cubierta.
Lo que puedes construir con esto
Video personalizado a escala Introduce datos de usuario como props JSON, renderiza un video único por usuario. Piensa en Spotify Wrapped, GitHub Unwrapped, tutoriales de incorporación: una plantilla, miles de salidas.
Clips automatizados para redes sociales Extrae datos en vivo (estadísticas, tablas de clasificación, métricas de producto) y renderiza publicaciones de video diarias o semanales sin que nadie toque un editor de línea de tiempo.
Anuncios dinámicos y videos de marketing Intercambia el nombre del cliente, la imagen del producto, el precio. Misma plantilla, variaciones infinitas. Renderiza del lado del servidor mediante API o Lambda.
Visualizaciones de datos animadas Convierte paneles e informes de KPI en clips de video compartibles con gráficos animados y transiciones.
Subtítulos para TikTok y Reels Transcribe audio, muestra subtítulos resaltados palabra por palabra, exporta listo para subir.
Videos de demostración de productos Genera automáticamente desde tu base de datos: imágenes, especificaciones, precios, directamente a MP4.
Contenido educativo y explicativo Materiales de curso animados, videos de certificados, tutoriales paso a paso, todo impulsado por código.
Generación de video como servicio Expón el renderizado como un endpoint HTTP. Tu aplicación envía JSON, recibe un archivo de video.
Requisitos
- Node.js 18+
- React 18+ (Remotion renderiza componentes React fotograma a fotograma)
- Remotion — inicializa con
npx create-video@latest - FFmpeg — viene incluido con
@remotion/renderer, no es necesario instalarlo por separado - Para renderizado sin servidor: cuenta de AWS (Lambda) o GCP (Cloud Run)
Contenido
Núcleo
| Regla | Descripción |
|---|---|
| Composiciones | Define videos, imágenes fijas, carpetas, props predeterminados, metadatos dinámicos |
| Renderizado | CLI, API de Node.js, AWS Lambda, Cloud Run, patrones de servidor Express |
| Calcular metadatos | Establece duración, dimensiones y props dinámicamente en tiempo de renderizado |
Animación y temporización
| Regla | Descripción |
|---|---|
| Animaciones | Fundido, escalado, rotación, deslizamiento |
| Temporización | Curvas de interpolación, easing, física de resortes |
| Secuenciación | Retraso, encadenamiento y orquestación de escenas |
| Transiciones | Transiciones entre escenas |
| Recorte | Corta el inicio o el final de cualquier animación |
Texto y tipografía
| Regla | Descripción |
|---|---|
| Animaciones de texto | Efecto máquina de escribir, resaltado de palabras, revelación |
| Fuentes | Carga de Google Fonts y fuentes locales |
| Medición de texto | Ajusta texto a contenedores, detecta desbordamiento |
Medios
| Regla | Descripción |
|---|---|
| Videos | Insertar, recortar, velocidad, volumen, bucle, cambio de tono |
| Audio | Importar, recortar, fundido, control de volumen y velocidad |
| Imágenes | El componente Img |
| GIFs | Reproducción de GIF sincronizada con la línea de tiempo |
| Activos | Importar cualquier medio en las composiciones |
| Verificación de decodificación | Valida la compatibilidad del navegador |
Subtítulos y leyendas
| Regla | Descripción |
|---|---|
| Transcribir subtítulos | Audio a subtítulos mediante Whisper, Deepgram o AssemblyAI |
| Mostrar subtítulos | Resaltado palabra por palabra estilo TikTok |
| Importar SRT | Cargar archivos .srt existentes |
Visualización de datos
| Regla | Descripción |
|---|---|
| Gráficos | Gráficos de barras animados, gráficos de líneas, visualizaciones basadas en datos |
Avanzado
| Regla | Descripción |
|---|---|
| Contenido 3D | Three.js y React Three Fiber |
| Lottie | Animaciones de After Effects mediante Lottie |
| TailwindCSS | Estilizar composiciones con Tailwind |
| Medición del DOM | Mide las dimensiones de los elementos en tiempo de renderizado |
Utilidades de medios
| Regla | Descripción |
|---|---|
| Duración del video | Obtén la duración en segundos |
| Dimensiones del video | Obtén el ancho y el alto |
| Duración del audio | Obtén la duración del audio |
| Extraer fotogramas | Extrae fotogramas en marcas de tiempo específicas |
Inicio rápido
# Inicializa un proyecto
npx create-video@latest mi-video
# Vista previa en el navegador
cd mi-video && npm start
# Renderizar a MP4
npx remotion render src/index.ts MiComposicion out/video.mp4
# Pasar datos dinámicos
npx remotion render src/index.ts MiComposicion out.mp4 --props '{"title": "Hola"}'
Contribuir
Fuente: github.com/shreefentsar/remotion-video-toolkit
¿Falta algo? ¿Encontraste un enfoque mejor? Abre un PR: nuevas reglas, ejemplos mejorados, correcciones de errores, todo es bienvenido.
Construido por Zone 99