Remotion Video
Crea videos animados de formato corto (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 el código de forma nativa — cambiar una variable de opacidad es inequívoco, en lugar de decidir qué píxeles constituyen un "título" en un fotograma rasterizado. El código también significa: salida independiente de la resolución, componentes reutilizables, vista previa instantánea y control de versiones basado en git.
Prerrequisitos
Esta habilidad requiere la habilidad de mejores prácticas de Remotion. Antes de comenzar, verifica si las habilidades de Remotion están instaladas en el proyecto. Si no, indica al usuario que ejecute:
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 a partir de la entrada del usuario:
| El usuario proporciona | Tipo de video | Cargar referencia |
|---|---|---|
| Un tema para enseñar o explicar | Explicador educativo | education-explainer.md |
| Una URL de producto | Demostración de producto + lanzamiento | product-demo.md |
| Un enlace de Google Business / Maps | Testimonio / Prueba social | testimonial.md |
| Un archivo de video de persona hablando (9:16) | Avatar + superposiciones animadas | avatar-overlays.md |
| Un archivo CSV o de datos | Tablero 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. Cárgalos solo cuando la situación lo requiera:
- integrations.md — Cargar cuando el usuario necesite Playwright (raspado web), animaciones Lottie, activos 3D, voces en off o imágenes generadas por IA. Algunas integraciones requieren claves API — siempre pregunta 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 desde 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 / Raspar / Analizar
Recopila información según el tipo de video (investigar tema, raspar sitio web, raspar 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 spring (
damping: 200), sin movimiento lineal - Escalonar elementos relacionados por 8-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, voces en off, etc.
Vista previa
Después de construir, inicia 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éditos
Basado en indicaciones de video de Sabrina Ramonov y conocimientos de producción del tutorial de edición de video AI de Remotion. Adaptado a una habilidad de agente con valores predeterminados configurables y divulgación progresiva.