Marve10s/Better-Fullstack

Producción de Video con Remotion

Habilidad de producción de video programable usando Remotion. Genera videos automatizados a partir de instrucciones de texto y produce videos coherentes y alineados con la marca a gran 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 coherente
• Contenido programable: Combina narración, imágenes y animación
• Contenido de marketing: Introducciones de productos, onboarding, videos promocionales

---

Instrucciones

Paso 1: Definir 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: Esbozar las Escenas

Plantilla de estructuración de escenas:

## Plan de Escenas

### Escena 1: Gancho (0:00 - 0:05)
- **Visual**: Aparición gradual 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: Preparar Activos

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

Reglas de preparación de activos:

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

Paso 4: Implementar la Composición de 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 a 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: Renderizar y Control de Calidad

# 1. Renderizado previo (baja calidad)
npx remotion preview src/Video.tsx

# 2. Controles de calidad
- [ ] Sincronizació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

Prompt:

Crea un video de introducción de producto de 60s con 6 escenas,
con un tono alegre y salida 16:9. Incluye una llamada a la acción 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 débil
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 de 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

Prompt:

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 activos (capturas, flechas de indicación)
• Superposiciones de texto y transiciones
• Márgenes seguros para móvil aplicados

---

Mejores prácticas

1. Escenas cortas: Mantén cada escena clara en 5-10 segundos
2. Tipografía coherente: Define una escala tipográfica
3. Sincronización de audio: Alinea las señales de narración con los elementos visuales
4. Reutilización de plantillas: Guarda composiciones reutilizables
5. Zonas seguras: Reserva márgenes para las relaciones de aspecto móvil

---

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 sin control de calidad: Siempre verifica primero en la vista previa

---

Solución de problemas

Problema: El audio y las imágenes están desincronizados

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

Problema: El renderizado es lento o falla

Causa: Activos o efectos pesados Solución: Comprime los activos 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 | Aparición gradual del logo | Inicio BGM | Fundido |
| ...    | ...      | ...    | ...   | ...  |

### Activos
- [ ] logo.svg
- [ ] capturas (3)
- [ ] bgm.mp3
- [ ] narration.mp3

### Lista de Verificación de Renderizado
- [ ] Vista previa de control de calidad superada
- [ ] 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): Coherencia narrativa, revisión del ritmo
• Ronda 3 (Ejecutor): Validar lista de verificación de preparación para el renderizado

Roles de los Agentes

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

---

Metadatos

Versión

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

Habilidades Relacionadas

• frontend-design

Etiquetas

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