Remotion Video
Crea videos cortos animados (1080x1920) usando Remotion. Seis tipos de video, cada uno con un flujo de trabajo de investigación y luego animación.
Por qué Remotion
Remotion renderiza código, no píxeles. La IA entiende código de forma nativa — cambiar una variable de opacidad es inequívoco, vs. decidir qué píxeles constituyen un "título" en un fotograma rasterizado. El código también significa: salida independiente de resolución, componentes reutilizables, vista previa instantánea, y control de versiones basado en git.
Prerrequisitos
Este skill requiere el skill de mejores prácticas de Remotion. Antes de comenzar, verifica si los skills de Remotion están instalados en el proyecto. Si no, instruye al usuario para ejecutar:
npx skills add remotion-dev/skills
Consulta la documentación de Remotion Agent Skills para más detalles.
Selección de Tipo
Determina el tipo de video según la entrada del usuario:
| El usuario proporciona | Tipo de video | Cargar referencia |
|---|---|---|
| Un tema para enseñar o explicar | Explicación educativa | education-explainer.md |
| Una URL de producto | Demo de producto + Lanzamiento | product-demo.md |
| Un enlace de Google Business / Maps | Testimonio / Prueba social | testimonial.md |
| Un archivo de video con cabeza parlante (9:16) | Avatar + Superposiciones animadas | avatar-overlays.md |
| Un archivo CSV o de datos | Panel de visualización de datos | data-viz.md |
| Una URL de canal/marca/red social | Tercio inferior / Superposición | lower-thirds.md |
Carga solo el archivo de referencia del tipo relevante más defaults.md para la configuración compartida (zona segura, fuentes, reglas de animación, estilo visual).
Referencias adicionales (cargar bajo demanda)
Estos archivos no son necesarios para cada video. Carga solo cuando la situación lo requiera:
- integrations.md — Cargar cuando el usuario necesite Playwright (web scraping), animaciones Lottie, activos 3D, voz en off, o imágenes generadas por IA. Algunas integraciones requieren claves API — siempre preguntar primero al usuario.
- advanced-patterns.md — Cargar cuando el usuario quiera controles deslizantes de tiempo, controles para cada composición, generación de múltiples videos a partir de un catálogo, renderizado transparente, transiciones personalizadas, o flujo de trabajo de guardado basado en git.
Flujo de trabajo común
Todos los tipos siguen el mismo patrón de dos pasos:
Paso 1: Investigar / Scrapear / Analizar
Recopila información según el tipo de video (investigar tema, scrapear sitio web, scrapear reseñas, transcribir video, o analizar datos). Presenta los hallazgos y un esquema de escenas propuesto. Espera la aprobación del usuario antes de escribir código.
Paso 2: Diseñar y Animar
Después de la aprobación, construye todas las escenas como componentes React de Remotion. Sigue las reglas de animación de defaults.md:
- Entradas con resorte (
damping: 200), sin movimiento lineal - Escalar elementos relacionados de 8 a 12 fotogramas
TransitionSeriescon transiciones de fundido de 12 fotogramas entre escenasstroke-dashoffsetde SVG para dibujo de diagramas/flowchartsinterpolate()+tabular-numspara animaciones de conteo- Efectos de partículas para momentos de celebración/cierre
Paso 3: Pulir (opcional)
Después de que el video se reproduzca correctamente, ofrece agregar controles:
- Controles deslizantes de tiempo — consulta advanced-patterns.md para agregar controles en tiempo real a las composiciones
- Integraciones — consulta integrations.md para animaciones Lottie, efectos 3D, voz en off, etc.
Vista previa
Después de construir, lanza Remotion Studio:
npx remotion studio
Principios de diseño
- Cada escena necesita una metáfora visual clara — diagramas, flowcharts, iconos, animaciones paso a paso
- Sin muros de texto — información densa, movimiento hermoso, ritmo rápido
- Kurzgesagt se encuentra con Fireship: ideas complejas hechas visualmente intuitivas
- Todos los gráficos construidos como componentes SVG por defecto; Lottie y 3D disponibles a través de integrations.md
- Respeta la zona segura (consulta defaults.md) — nada importante cerca de los bordes
Crédito
Basado en prompts de video de Sabrina Ramonov y conocimientos de producción del tutorial de edición de video AI de Remotion. Adaptado como un Agent Skill con valores predeterminados configurables y divulgación progresiva.