Producción de video

# Guía de uso de Producción de video

## Descripción general

El plugin **Producción de video** está dirigido a creadores, desarrolladores y equipos de producto que desean producir rápidamente videos de alta calidad. Combina guías profesionales de diseño UI/UX con mejores prácticas de desarrollo de video en Remotion para ayudarte a establecer un flujo de producción de video claro, eficiente y reutilizable, desde el estilo visual, el ritmo de animación, la maquetación de subtítulos y la organización de recursos hasta el renderizado final.

Ya sea que necesites crear videos de presentación de producto, demostraciones de funciones, clips cortos para redes sociales, animaciones de visualización de datos o videos promocionales de marca, este plugin puede ayudarte a convertir tus ideas en planes de video ejecutables e implementaciones en Remotion con mayor rapidez.

## Casos de uso

- **Demostraciones de funciones de producto**: muestra las funciones clave con animaciones de interfaz claras y explicaciones con ritmo.
- **Videos promocionales de marca**: genera recomendaciones de estilo visual, paleta de colores, tipografía y composición según la personalidad de la marca.
- **Videos de visualización de datos**: diseña animaciones de gráficos, jerarquía de información y ritmo de transiciones.
- **Videos cortos para redes sociales**: planifica diseños verticales, estilos de subtítulos, puntos de ritmo e introducciones con alta retención.
- **Flujo de trabajo de video para desarrolladores**: usa Remotion para construir, previsualizar y renderizar videos de forma componentizada con React.

## Capacidades principales

### 1. Guía de diseño visual UI/UX

Mediante la capacidad `ui-ux-pro-max`, puedes obtener recomendaciones profesionales de diseño, incluyendo:

- Estilo visual general del video, como tecnológico, minimalista, dinámico, corporativo, futurista, entre otros.
- Paleta de colores y extensión de colores de marca.
- Jerarquía tipográfica, tamaños de fuente, interlineado y recomendaciones de legibilidad para subtítulos.
- Optimización visual de Landing Page, interfaces de producto, gráficos y componentes.
- Recomendaciones de implementación de UI en diferentes stacks frontend.

Solicitud de ejemplo:

“Diseña el estilo visual para un video de presentación de un producto AI SaaS, con un aspecto premium, limpio y adecuado para fondo oscuro.”

Puedes obtener una dirección completa que incluya fondo, color principal, color de énfasis, tipografía, estilo de botones, estilo de tarjetas y recomendaciones de transición.

### 2. Mejores prácticas de desarrollo de video en Remotion

Mediante la capacidad `remotion-best-practices`, puedes obtener recomendaciones prácticas para proyectos Remotion, incluyendo:

- Cómo organizar Composition, Scene y componentes.
- Cómo gestionar recursos como imágenes, videos, audio y fuentes.
- Cómo diseñar ritmos de animación basados en fotogramas.
- Cómo implementar subtítulos, efecto de máquina de escribir, barras de progreso, transiciones y movimientos de cámara.
- Cómo configurar resolución, FPS, duración y parámetros de renderizado.

Solicitud de ejemplo:

“Ayúdame a diseñar la estructura de componentes Remotion para un video de demostración de producto de 30 segundos y proporciona la línea de tiempo de cada escena.”

## Flujo de trabajo recomendado

### Paso uno: definir el objetivo del video

Primero define el uso, la audiencia, la plataforma y la duración del video. Por ejemplo:

- Plataforma: página de inicio del sitio oficial / Bilibili / 小红书 / YouTube / 抖音
- Relación de aspecto: 16:9, 9:16 o 1:1
- Duración: 15 segundos, 30 segundos, 60 segundos
- Objetivo: presentar el producto, aumentar la conversión, explicar funciones, mostrar datos

### Paso dos: establecer el estilo visual

Haz que el plugin genere una guía de estilo según el posicionamiento del producto, por ejemplo:

- Color: color principal, color secundario, color de fondo, color de énfasis
- Tipografía: recomendaciones de fuentes para títulos, texto principal y subtítulos
- Composición: márgenes seguros, jerarquía de información, diseño de tarjetas
- Animación: ease-in/ease-out, paralaje, escala, fade-in, deslizamiento, etc.

### Paso tres: dividir la estructura del video

Divide el video en varias escenas, por ejemplo:

1. Gancho inicial: plantea un punto de dolor o muestra la propuesta de valor principal
2. Presentación del producto: demostración de interfaz, función o flujo
3. Refuerzo de valor: datos, casos, comparaciones
4. Llamada a la acción: sitio oficial, descarga, registro o seguimiento

### Paso cuatro: implementar componentes Remotion

Usa componentes React para construir el video y mantener una estructura clara:

- `Root.tsx`: registra Composition
- `Video.tsx`: línea de tiempo principal
- `scenes/`: componentes de distintas escenas
- `components/`: componentes reutilizables como subtítulos, botones, tarjetas y gráficos
- `assets/`: imágenes, videos, audio y fuentes

### Paso cinco: previsualizar, optimizar y renderizar

Durante la previsualización, revisa principalmente:

- Si los subtítulos son claros y legibles
- Si las animaciones coinciden con el ritmo
- Si la pantalla está sobrecargada de información
- Si los recursos son nítidos y no están estirados
- Si la música y las transiciones encajan

Finalmente, elige la resolución, bitrate y formato adecuados según la plataforma de publicación para realizar el renderizado.

## Mejores prácticas

- Mantén la información de cada escena simple y evita mostrar demasiado texto al mismo tiempo.
- Usa un sistema de diseño coherente, incluyendo colores, radios de borde, sombras, tipografía y espaciado.
- Las animaciones deben servir a la comunicación de información, no aumentar la carga cognitiva solo por lucirse.
- Se recomienda colocar los subtítulos dentro del área segura y asegurar su legibilidad en móviles.
- En Remotion, prioriza una estructura componentizada para facilitar la reutilización y modificaciones posteriores.
- Define primero la línea de tiempo antes de producir, para evitar desorden en el ritmo por cambios durante el proceso.

## Prompts de ejemplo

- “Diseña un guion gráfico de 45 segundos y un estilo visual para un video de producto fintech.”
- “Con base en Remotion, ayúdame a planificar una estructura de video de 1920x1080, 30fps y 20 segundos.”
- “Optimiza este estilo de subtítulos para que sea adecuado para videos cortos verticales.”
- “Dame una idea de implementación para una animación de interfaz de producto que se deslice, haga zoom y resalte.”
- “Ayúdame a revisar si el ritmo de esta línea de tiempo de video es demasiado lento y propón mejoras.”