Remotion Promo Video Factory

Fábrica de Videos Promocionales Remotion

Usa esta habilidad para producir videos promocionales de aplicaciones repetibles y de alta calidad en Remotion. Esta habilidad es intencionadamente agnóstica en cuanto al tipo de aplicación y funciona tanto para productos con mucho énfasis en la interfaz de usuario (UI) como para productos sin UI.

Reglas Fundamentales

1. Usa las reglas oficiales de la habilidad Remotion como autoridad principal.
2. Impulsa todo el movimiento usando useCurrentFrame() con interpolate() y spring().
3. Diseña el tiempo en segundos, luego convierte con sec().
4. Primero elige una plantilla según el tipo de aplicación; no uses por defecto solo demos de UI.
5. Prefiere primitivas visuales reutilizables sobre grabaciones únicas.
6. Aplica las reglas de tamaño de tipografía antes de pulir las animaciones.
7. Valida cada edición importante con capturas de fotogramas, luego ejecuta typecheck y render.
8. No afirmes éxito de calidad sin evidencia fotograma a fotograma.
9. Nunca confirmes cambios, subas (push) ni marques tareas como completadas sin la aprobación explícita del usuario.

Interoperabilidad con la Habilidad Oficial

Siempre lee primero references/official-skill-integration.md.

Grupos de reglas oficiales requeridos por etapa:

1. Etapa de composición: compositions, parameters, calculate-metadata
2. Etapa de movimiento: animations, timing, sequencing, transitions
3. Etapa de activos: assets, images, fonts
4. Etapa opcional: audio, videos, subtitles, text-animations

Referencias

• Selección de tipo de aplicación y plantillas de escenas: references/app-type-blueprints.md
• Mapeo de reglas oficiales de Remotion: references/official-skill-integration.md
• Patrones de línea de tiempo y movimiento: references/timeline-and-motion.md
• Presupuestos de tiempo y bucle de depuración: references/timing-and-debug-loop.md
• Reglas de tipografía y legibilidad: references/typography-and-readability.md
• Bloques de construcción visuales reutilizables: references/visual-primitives.md
• Lista de verificación de control de calidad: references/qa-checklist.md
• Guía de resolución de problemas: references/troubleshooting.md

Flujo de Trabajo

Paso 1: Recopilar Entradas

Recopila del contexto del proyecto local (README, documentación, página de aterrizaje, UI existente, ejemplos de CLI/API):

1. Audiencia objetivo
2. Promesa principal en una oración
3. Activos de prueba disponibles (UI, código, registros, métricas, testimonios)
4. Activos multimedia disponibles (logotipo, capturas de pantalla, clips, audio)

Paso 2: Seleccionar Plantilla de Tipo de Aplicación

Lee references/app-type-blueprints.md y selecciona una:

1. Aplicación centrada en UI
2. Aplicación de API/SDK
3. Herramienta de desarrollador / aplicación de infraestructura
4. Aplicación de IA/automatización

Crea una lista de tomas basada en la plantilla seleccionada.

Paso 3: Narrativa y Duración

1. Define el arco narrativo: Enganche -> Problema -> Mecanismo -> Prueba -> Llamada a la acción
2. Elige la duración objetivo: 15s, 30s, 45s o 60s
3. Asigna duraciones de escena antes de la implementación

Paso 4: Configuración de la Composición

1. Define una Composition en src/Root.tsx
2. Añade schema y defaultProps
3. Calcula la duración en calculateMetadata
4. Conecta las escenas en src/Video.tsx usando TransitionSeries

Paso 5: Construcción de Escenas

1. Primero construye componentes reutilizables en src/components
2. Ensambla las escenas en src/scenes usando esos componentes
3. Usa posicionamiento absoluto con constantes para diseño y sincronización
4. Mantén los archivos de escena enfocados en la orquestación, no en detalles de UI de bajo nivel

Paso 6: Pasada de Tipografía

Lee references/typography-and-readability.md y establece primero todos los tamaños de texto principales.

1. Aplica los rangos de tamaño recomendados para 1920x1080
2. Respeta los mínimos estrictos a menos que se justifique explícitamente
3. Confirma la legibilidad en móvil/iOS antes del pulido de animaciones

Paso 7: Pasada de Movimiento

1. Usa fundidos trapezoidales para legibilidad
2. Usa springs para entradas y movimientos similares a cursores
3. Añade exitOpacity por escena para evitar artefactos de superposición durante las transiciones
4. Usa superposiciones/títulos para hacer explícitos los cambios de fase

Paso 8: Pasada de Verificación de Tiempos

Lee references/timing-and-debug-loop.md y valida los presupuestos de tiempo:

1. Verifica el tiempo de permanencia del texto y las ventanas de lectura
2. Verifica las duraciones de procesamiento y de mantenimiento de resultados
3. Verifica la superposición de transiciones y el tiempo de entrega
4. Corrige las constantes de la línea de tiempo antes del trabajo de pulido

Paso 9: Bucle de Control de Calidad (Se Requiere Evidencia)

1. Captura fotogramas clave después de cada cambio sustancial
2. Revisa claridad visual, sincronización, superposición y equilibrio de composición
3. Registra evidencia de aprobado/fallo en un registro de depuración
4. Itera hasta que todos los puntos de control críticos pasen

Usa scripts/capture-frames.sh cuando sea útil.

Si las herramientas de lectura de imágenes fallan o no devuelven contenido útil, recaptura y vuelve a intentar. No continúes con verificaciones que no se pueden verificar.

Paso 10: Validación Final

1. npx tsc --noEmit
2. npm run -s build
3. npm run -s build:gif si está disponible
4. Renderiza el mp4 final y verifica el tiempo de ejecución y el tamaño de salida
5. Vuelve a verificar las marcas de tiempo clave contra el comportamiento previsto de la escena

Usa scripts/verify-build.sh cuando sea útil.

Paso 11: Entrega y Aprobación

1. Informa un resumen de control de calidad basado en evidencia (qué pasó/falló y por qué)
2. Enumera compromisos conocidos o riesgos residuales
3. Solicita aprobación explícita antes de confirmar cambios/subir/completar la tarea

Formato de Salida

Al informar el trabajo, incluye:

1. Tipo de aplicación y plantilla seleccionados
2. Estructura de escenas y duración final
3. Componentes principales implementados
4. Decisiones clave de animación
5. Verificaciones de presupuesto de tiempo y resultados
6. Comandos de validación y resultados
7. Riesgos restantes o tareas de seguimiento

Barreras de Seguridad

1. Usa Img + staticFile() para imágenes locales.
2. Carga las fuentes a nivel de módulo, no dentro de efectos.
3. Mantén la disposición de Sequence y los ajustes de premontaje compatibles.
4. Usa los mínimos estrictos de tipografía de references/typography-and-readability.md.
5. Concentra los efectos complejos en un área focal.
6. No optimices para demasiados objetivos en un solo corte; mantén un único mensaje principal.
7. Nunca describas la salida como "perfecta" sin evidencia explícita.
8. No omitas la evidencia de control de calidad incluso cuando los comandos de render tengan éxito.