Producción de Videos con Remotion

Habilidad de producción de video programable usando Remotion. Genera videos automatizados a partir de instrucciones de texto y produce contenido de video consistente y alineado con la marca a escala.

Cuándo usar esta habilidad

Generación automatizada de videos: Genera videos a partir de instrucciones de texto
Producción de video de marca: Videos de alto volumen con estilo consistente
Contenido programable: Combina narración, visuales y animación
Contenido de marketing: Introducciones de productos, onboarding, videos promocionales

Instrucciones

Paso 1: Define la Especificación del Video

video_spec:
  audience: [audiencia objetivo]
  goal: [objetivo del video]
  duration: [duración total - 30s, 60s, 90s]
  aspect_ratio: "16:9" | "1:1" | "9:16"
  tone: "rápido" | "tranquilo" | "cinematográfico"
  voice:
    style: [estilo de narración]
    language: [idioma]

Paso 2: Esquematiza las Escenas

Plantilla de estructuración de escenas:

## Plan de Escenas

### Escena 1: Gancho (0:00 - 0:05)
- **Visual**: Fundido de entrada del logotipo del producto
- **Audio**: Introducción alegre
- **Texto**: "Transforma tu Flujo de Trabajo"
- **Transición**: Fundido → Escena 2

### Escena 2: Problema (0:05 - 0:15)
- **Visual**: Ilustración del estado del problema
- **Audio**: Comienza la narración
- **Texto**: Superposición de mensaje clave
- **Transición**: Deslizar a la izquierda

### Escena 3: Solución (0:15 - 0:30)
...

Paso 3: Prepara los Assets

# Lista de verificación de assets
assets/
├── logos/
│   ├── logo-main.svg
│   └── logo-white.svg
├── screenshots/
│   ├── dashboard.png
│   └── feature-1.png
├── audio/
│   ├── bgm.mp3
│   └── narration.mp3
└── fonts/
    └── brand-font.woff2

Reglas de preparación de assets:

Logotipo: SVG o PNG de alta resolución
Capturas de pantalla: Normalizar a la relación de aspecto objetivo
Audio: MP3 o WAV; normalizar volumen
Fuentes: Webfont o archivos de fuente locales

Paso 4: Implementa la Composición en Remotion

// src/Video.tsx
import { Composition } from 'remotion';
import { IntroScene } from './scenes/IntroScene';
import { ProblemScene } from './scenes/ProblemScene';
import { SolutionScene } from './scenes/SolutionScene';
import { CTAScene } from './scenes/CTAScene';

export const RemotionVideo: React.FC = () => {
  return (
    <>
      <Composition
        id="ProductIntro"
        component={ProductIntro}
        durationInFrames={1800} // 60s at 30fps
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};

// Ejemplo de componente de escena
const IntroScene: React.FC<{ frame: number }> = ({ frame }) => {
  const opacity = interpolate(frame, [0, 30], [0, 1]);

  return (
    <AbsoluteFill style={{ opacity }}>
      <Logo />
      <Title>Transforma tu Flujo de Trabajo</Title>
    </AbsoluteFill>
  );
};

Paso 5: Renderiza y Realiza QA

# 1. Vista previa del renderizado (baja calidad)
npx remotion preview src/Video.tsx

# 2. Verificaciones de QA
- [ ] Temporización
- [ ] Sincronización de audio
- [ ] Legibilidad del texto
- [ ] Transiciones suaves

# 3. Renderizado final
npx remotion render src/Video.tsx ProductIntro out/video.mp4

Ejemplos

Ejemplo 1: Video de Introducción de Producto

Instrucción:

Crea un video de introducción de producto de 60s con 6 escenas,
tono alegre y salida 16:9. Incluye un CTA al final.

Salida esperada:

## Desglose de Escenas
1. Gancho (0:00-0:05): Logotipo + eslogan
2. Problema (0:05-0:15): Visualización del punto de dolor
3. Solución (0:15-0:30): Demostración del producto
4. Características (0:30-0:45): Beneficios clave (3 elementos)
5. Prueba Social (0:45-0:55): Testimonio/estadísticas
6. CTA (0:55-1:00): Llamada a la acción + contacto

## Estructura Remotion
- src/scenes/HookScene.tsx
- src/scenes/ProblemScene.tsx
- src/scenes/SolutionScene.tsx
- src/scenes/FeaturesScene.tsx
- src/scenes/SocialProofScene.tsx
- src/scenes/CTAScene.tsx

Ejemplo 2: Tutorial de Onboarding

Instrucción:

Genera un tutorial de onboarding de 45s usando capturas de pantalla,
con indicaciones y formato 9:16 para móvil.

Salida esperada:

Plan de escenas con 5 pasos
Lista de assets (capturas de pantalla, flechas de indicación)
Superposiciones de texto y transiciones
Márgenes seguros para móvil aplicados

Mejores prácticas

Escenas cortas: Mantén cada escena clara de 5 a 10 segundos
Tipografía consistente: Define una escala tipográfica
Sincronización de audio: Alinea las señales de narración con los visuales
Reutilización de plantillas: Guarda composiciones reutilizables
Zonas seguras: Reserva márgenes para relaciones de aspecto móviles

Errores comunes

Sobrecarga de texto: Limita la cantidad de texto por escena
Ignorar las zonas seguras para móvil: Verifica los bordes para salidas 9:16
Renderizado final antes de QA: Siempre verifica primero en la vista previa

Solución de problemas

Problema: Audio y visuales desincronizados

Causa: Desajuste en la temporización de fotogramas Solución: Recalcula los fotogramas y alinea las marcas de tiempo

Problema: El renderizado es lento o falla

Causa: Assets o efectos pesados Solución: Comprime los assets y simplifica las animaciones

Problema: Texto ilegible

Causa: Tamaño de fuente demasiado pequeño o contraste insuficiente Solución: Usa fuentes de al menos 24px y colores de alto contraste

Formato de salida

## Informe de Producción de Video

### Especificación
- Duración: 60s
- Relación de Aspecto: 16:9
- FPS: 30

### Plan de Escenas
| Escena | Duración | Visual | Audio | Transición |
|--------|----------|--------|-------|------------|
| Gancho | 0:00-0:05 | Fundido de logotipo | Inicio BGM | Fundido |
| ...    | ...      | ...    | ...   | ...  |

### Assets
- [ ] logo.svg
- [ ] capturas de pantalla (3)
- [ ] bgm.mp3
- [ ] narration.mp3

### Lista de Verificación de Renderizado
- [ ] QA de vista previa aprobado
- [ ] Sincronización de audio verificada
- [ ] Zonas seguras verificadas
- [ ] Renderizado final completado

Flujo de Trabajo Multi-Agente

Validación y Retrospectivas

Ronda 1 (Orquestador): Integridad de la especificación, cobertura de escenas
Ronda 2 (Analista): Consistencia narrativa, revisión del ritmo
Ronda 3 (Ejecutor): Validar la lista de verificación de preparación para el renderizado

Roles de Agente

Agente	Rol
Claude	Planificación de escenas, escritura de guiones
Gemini	Análisis de assets, sugerencias de optimización
Codex	Generar código Remotion, ejecutar renderizados

Metadatos

Versión

Versión Actual: 1.0.0
Última Actualización: 2026-01-21
Plataformas Compatibles: Claude, ChatGPT, Gemini, Codex

Habilidades Relacionadas

Etiquetas

#video #remotion #animation #storytelling #automation #react

JEO-tech-ai/oh-my-unity3d

¿Qué es oh-my-unity3d?

Preguntar en tu IA favorita

Documentación