demo-video — URL→corte Remotion

Habilidad de Creación de Video Demostrativo

Crea un video de demostración de producto pulido a partir de una URL de empresa o activos del producto. La salida predeterminada es un video de 60-90 segundos en 1080p+; renderiza en 4K cuando la máquina, los activos y el objetivo de entrega lo soporten.

Estándar Operativo

• Basa el video en la superficie real del producto: páginas web, pantallas de aplicaciones, flujos de trabajo iniciados sesión, capturas de pantalla, activos proporcionados por el usuario o demostraciones públicas verificadas.
• Trata la entrada de solo URL como suficiente para comenzar. Infiere el producto, la audiencia, el flujo de trabajo principal y el sistema de marca a partir del sitio, luego pregunta solo por la falta de acceso o preferencias de alto impacto.
• Prioriza la narración de un gerente de producto sobre el marketing genérico. Muestra qué problema tiene el usuario, qué hace dentro del producto, qué cambia en la pantalla y por qué importa el resultado.
• Usa Remotion para la composición de movimiento cuando sea práctico y FFmpeg para inspección, codificación, hojas de contacto, manejo de audio y conversión de entrega.
• Mantén las afirmaciones defendibles. No inventes métricas, logotipos de clientes, resultados de detectores, integraciones, estado de cumplimiento o precios a menos que se verifiquen a partir del material fuente.
• Evita el sobreajuste a un cliente anterior. Reutiliza el flujo de trabajo, los controles de calidad y los patrones de movimiento; no reutilices capturas de pantalla, copias, colores, precios, personas o correcciones versión por versión específicas del cliente.

Entradas

Si el usuario proporciona solo una URL del sitio web:

1. Abre el sitio en un navegador, mapea la navegación, la propuesta de valor, las páginas de producto, los precios, los documentos de ayuda y los estados interactivos visibles.
2. Captura capturas de pantalla de alta resolución de las páginas y superficies de UI que mejor explican el producto.
3. Construye una narrativa en torno al bucle de producto más fuerte descubierto en el sitio.
4. Indica cualquier límite de acceso si se requiere un área de producto con inicio de sesión.

Si el usuario proporciona más contexto, úsalo para elevar la calidad:

• Audiencia objetivo, plataforma de campaña, relación de aspecto, duración preferida, CTA, objetivo de lanzamiento.
• Pasos del flujo de trabajo del producto, acceso a la cuenta de demostración, entradas de muestra o salida esperada antes/después.
• Activos de marca, capturas de pantalla, referencias de video, fuentes, dirección musical, afirmaciones prohibidas y notas legales.

Enrutamiento de Referencias

• Lee references/capture-workflow.md antes de la investigación en el navegador, la captura con inicio de sesión o el trabajo de captura de pantalla.
• Lee references/storytelling.md antes de escribir el guion, el storyboard, la lista de tomas o la narrativa del producto.
• Lee references/visual-system.md antes de elegir el lenguaje de movimiento, la tipografía, las transiciones, el diseño o la música.
• Lee references/remotion-ffmpeg.md antes de implementar el proyecto de video o renderizar archivos.
• Lee references/qc-checklist.md antes de dar por terminado el video.

Flujo de Trabajo de Producción

1. Define el alcance del entregable

   • Confirma la duración objetivo, la relación de aspecto, la resolución, el idioma y la plataforma de entrega cuando estén disponibles.
   • Por defecto, 16:9, 60-90 segundos, 30fps, H.264 MP4, mínimo 1080p.
   • Usa 4K cuando se solicite o cuando el video se utilice para lanzamiento, inversores, conferencias o distribución de anuncios pagados.

2. Investiga el producto

   • Navega por el sitio web y las páginas del producto lo suficiente como para identificar el bucle principal, no solo la promesa de la página de inicio.
   • Construye un mapa rápido de características: usuario principal, punto débil, acción principal, salida visible del producto, prueba, CTA.
   • Si el producto está detrás de un inicio de sesión, usa la sesión activa del navegador del usuario o pídele que inicie sesión, luego continúa desde la IU autenticada.

3. Captura evidencia del producto

   • Captura capturas de pantalla de escritorio a 2x o más escala de dispositivo cuando sea posible.
   • Captura estados llenos y vacíos si explican la transformación.
   • Nombra los activos por escena y estado, como dashboard-empty.png, workflow-result.png, pricing.png.
   • Mantén un manifiesto con URL, título de página, hora de captura, viewport, nombre de archivo y notas.

4. Escribe la historia del producto

   • Abre con el problema del usuario o el resultado deseado en lenguaje sencillo.
   • Recorre el bucle del producto en este orden: configuración, acción, transformación, revisión/prueba, flujo de trabajo más amplio, CTA.
   • Mantén el texto lo suficientemente corto para un video en movimiento. Usa subtítulos como anclajes, no párrafos.
   • Usa una copia con sonido nativo para la audiencia; evita frases genéricas de IA como "desbloquear productividad" a menos que el producto realmente lo diga.

5. Diseña el sistema de movimiento

   • Usa los colores y la tipografía reales de la marca como base, luego agrega una fuente de visualización o rostro de acento sobrio si mejora la jerarquía.
   • Usa capturas de pantalla del producto como activos principales. Agrega marcos de navegador, rutas del cursor, zooms, máscaras, líneas de escaneo, paneles de comparación o tipografía cinética solo cuando aclaren el flujo de trabajo.
   • Elige transiciones que coincidan con el producto: líquido/ondulante para transformación fluida, barrido de escaneo para análisis, revelación con foco para prueba, empuje espacial para navegación, comparación dividida para antes/después.
   • Mantén el movimiento continuo. Los cambios de escena deben sentirse como si la cámara o la interfaz se moviera a través de una historia del producto, no diapositivas separadas.

6. Construye y renderiza

   • Usa la plantilla inicial en assets/remotion-starter/ cuando un andamiaje del proyecto sea útil.
   • Renderiza vistas previas o una hoja de contacto antes de renderizar el video final.
   • Renderiza primero en 1080p para control de calidad, luego en 4K final si se solicita.
   • Usa FFmpeg o ffprobe para verificar duración, resolución, códec, velocidad de fotogramas y flujo de audio.

7. Control de calidad antes de la entrega

   • Verifica que ningún texto se superponga, se recorte de manera incómoda o se vuelva ilegible en cortes rápidos.
   • Verifica que los botones, cursores, llamadas y máscaras se alineen con la UI subyacente.
   • Verifica que todas las capturas de pantalla sean lo suficientemente nítidas a la escala final.
   • Verifica que la música sea instrumental, segura de derechos y equilibrada debajo de cualquier locución o SFX.
   • Proporciona el MP4 final junto con los artefactos de producción útiles: storyboard, manifiesto de activos, hoja de contacto y proyecto fuente cuando sea relevante.

Scripts Reutilizables

• scripts/create_demo_brief.py crea un brief estructurado a partir de una URL y contexto opcional del producto.
• scripts/qc_video.py inspecciona los metadatos del video final con ffprobe y señala problemas de resolución, duración, códec y audio.
• scripts/make_contact_sheet.py crea una hoja de contacto visual con FFmpeg para una revisión rápida.

Ejecuta los scripts desde una carpeta de proyecto o con rutas absolutas. Son ayudantes, no un reemplazo para el juicio visual.

Plantilla Inicial

Copia assets/remotion-starter/ dentro del proyecto de trabajo al comenzar un nuevo video. Reemplaza la configuración del marcador de posición en src/demoConfig.ts, agrega capturas de pantalla a public/ o activos estáticos de Remotion, y adapta las escenas a la narrativa del producto.

El iniciador es intencionalmente genérico:

• Incluye una composición de historia de producto con escenas de apertura, flujo de trabajo, prueba y CTA.
• Utiliza espacios de captura de pantalla reales, pero recurre a marcadores de posición de UI limpios.
• Incluye primitivas de movimiento para desvanecimientos, zooms, movimiento de riel, énfasis del cursor y paneles de comparación.
• Evita el texto, colores o activos específicos del cliente.

Barra de Finalización

No des por terminado el video hasta que se cumplan estas condiciones:

• La historia del producto se deriva de evidencia real del producto.
• El render final es al menos 1080p, o el usuario aceptó explícitamente un objetivo inferior.
• El video ha sido inspeccionado visualmente a través de imágenes fijas, render de vista previa o hoja de contacto.
• Los metadatos de FFmpeg/ffprobe confirman la resolución, duración, códec de video y estado del audio.
• Cualquier límite de licencia o fuente para música, fuentes, material de archivo o páginas de terceros está documentado.
• El usuario recibe un archivo de video concreto, no solo un plan o guion.