¿Qué hace Remotion Video Pro?
Alcance
Este skill posee todo lo necesario para producir videos programáticos con Remotion:
- Andamiaje de proyectos y arquitectura de composiciones
- Matemáticas de animación basadas en fotogramas (interpolate, spring, measureSpring)
- Pensamiento de diseño temporal (áreas seguras, ventanas de enganche, sincronización)
- Sincronización de audio (narración, subtítulos, detección de ritmo)
- Sistema de diseño visual (tipografía, color, principios de movimiento)
- Optimización de rendimiento (memoización, OffthreadVideo, tamaño del bundle)
- Pipelines de renderizado (Lambda, CloudRun, CI/CD)
- Video basado en webhooks (CRM → cola → Lambda → S3)
- Renderizado por lotes a gran escala (más de 10,000 videos personalizados)
- Validación de composiciones (hooks de pre-commit, puertas CI)
Referencia rápida
| Problema | Regla de carga |
|---|---|
| Configuración del proyecto, esquemas Zod, estructura de composición | 01-scaffolding.md |
| interpolate, spring, transiciones, sincronización | 02-animation-physics.md |
| Áreas seguras móviles, sincronización de fotogramas, diseño responsivo | 03-temporal-design.md |
| Sincronización de narración, subtítulos, detección de ritmo, espectro | 04-audio-sync.md |
| Tipografía, color, patrones prohibidos, principios de movimiento | 05-anti-slop-aesthetics.md |
| Renderizados lentos, memoización, tamaño del bundle, Lambda | 06-performance.md |
| Prompts listos para redes sociales, demos, explicativos | 07-prompt-templates.md |
| CI/CD, Lambda, CloudRun, pruebas de instantáneas | 08-rendering-pipeline.md |
| Pipeline webhook CRM → Lambda → S3 | 09-webhook-integration.md |
| Expansión de renderizado masivo, /api/render/batch | 10-batch-rendering.md |
| Hooks de pre-commit, puertas CI, linting de composiciones | 11-validation-pipeline.md |
Reglas de oro
- El Fotograma es el Rey. Cada animación deriva de
useCurrentFrame(). Sin animaciones CSS, sin temporizadores. - Solo Determinismo. No uses
Math.random(). Usarandom(seed)de Remotion. - Spring > Lineal. Por defecto usa
spring()para movimiento. Lo lineal se siente robótico. - OffthreadVideo para todo video de entrada. Nunca uses
<Video>para entradas MP4. - Los Datos Asíncronos Deben Bloquear el Renderizado. Usa
delayRender()/continueRender()para fuentes, datos, activos externos. - Zod en Cada Composición. La validación en tiempo de ejecución evita fallos de renderizado por props incorrectas.
- React.memo en Cada Escena. Las re-renderizaciones innecesarias cuestan tiempo de renderizado y dinero en Lambda.
- Validar Antes de Confirmar. El hook de pre-commit detecta todos los 7 pecados capitales. Nunca lo desactives.
- Probar Antes de Desplegar. El entorno de pruebas se ejecuta antes de crear el sitio Lambda. Las composiciones rotas nunca llegan a Lambda.
- El Video es una Fila de Base de Datos. El video personalizado a gran escala significa tratar los renderizados como salida de un pipeline de datos.
- Anti-Slop o Nada. Inter por defecto, degradados púrpura e iconos emoji están prohibidos. Punto.
- Versiona tus Composiciones. Despliega v2, pruébala, actívala. Los webhooks antiguos renderizan versiones antiguas. Nunca rompas producción.
Árbol de decisión
¿Creando un video?
├── Formato corto para redes sociales (TikTok/Reels) → Cargar 03, 04, 05, 07
├── Demo de producto / explicativo → Cargar 02, 03, 04, 05
├── Personalizado a gran escala → Cargar 06, 08, 09, 10
├── Pipeline CI/CD → Cargar 08, 11
└── Solo conceptos básicos → Cargar 01, 02, 06, 11