flucas96/ui-review

Crear Video de Demostración de Producto

Produce una historia de producto coherente que parezca operada por una persona. Prefiere grabar la interfaz real y añadir solo la capa de presentación necesaria para claridad.

Elegir el corte

• Usa 1920×1080 a 30 o 60 fps para un repositorio, página de inicio o flujo de trabajo detallado.
• Usa 1080×1350 para un corte de feed social 4:5 y 1080×1920 para un story/reel vertical.
• Por defecto, usa 45–90 segundos para un flujo de trabajo completo y 8–15 segundos para un teaser social.
• Crea ediciones separadas para duraciones significativamente diferentes; no te limites a acelerar el corte largo.

Construir la historia

Inspecciona la aplicación, los activos disponibles, los guiones existentes y el tratamiento de la marca antes de escribir. Redacta una hoja de ritmos breve que contenga: gancho, problema, acción, resultado visible y llamado a la acción. Mantén una acción significativa por ritmo. Deja que los estados importantes reposen lo suficiente como para ser leídos.

Para un flujo de trabajo completo, muestra la intención humana, la acción del agente, el resultado revisado y la resolución. Para un teaser, comienza con el resultado y usa solo la interfaz mínima necesaria para demostrarlo.

Animar la interacción humana

Lee motion-language.md antes de implementar animaciones de puntero, escritura o cámara. Usa human-motion.mjs para generar trayectorias deterministas del puntero y líneas de tiempo de escritura, luego adapta su salida al sistema de grabación.

Aplica estos requisitos:

• Mantén la posición del cursor continua dentro de una escena. Nunca lo teletransportes entre acciones visibles.
• Muévelo a lo largo de un camino suavemente curvado con aceleración, desaceleración y una pequeña corrección final.
• Varía la duración según la distancia y el tamaño del objetivo. Evita una velocidad global única del cursor.
• Pausa brevemente después de llegar, anima el puntero hacia abajo más una ondulación de clic, luego realiza el clic.
• Escribe carácter por carácter con retrasos variables y pausas ligeramente más largas en espacios y puntuación.
• Renderiza un cursor de inserción parpadeante siempre que un campo de texto esté enfocado, incluyendo pausas antes, durante y después de escribir.
• Evita errores de escritura sintéticos a menos que apoyen la historia.
• Desvanece el puntero durante cambios de escena difíciles si no se puede preservar la posición continua.

Grabar y componer

Usa la habilidad de Playwright cuando se requiera automatización del navegador. Graba a la resolución final objetivo o superior. Prefiere la aplicación real, el diseño real y las transiciones de estado reales sobre una maqueta recreada. Si es necesario usar un entorno de prueba, preserva claramente la identidad visual del producto.

Usa movimiento de cámara contenido:

• Desplaza o acerca para dirigir la atención, no solo para añadir movimiento.
• Anima un contenedor de cámara estable; no hagas transiciones de varios elementos hijos de la página de forma independiente.
• Mantén un origen de transformación fijo y continúa desde la transformación actualmente renderizada para evitar saltos.
• Suaviza la entrada y salida de los zooms, mantén la imagen en el destino, y dale al movimiento de retorno su propia suavización.
• Evita mover la cámara, el cursor y los elementos principales de la interfaz en direcciones que compitan al mismo tiempo.
• Mantén las superposiciones de texto dentro de los márgenes seguros y legibles sin audio.
• Anima los subtítulos e indicadores de progreso de manera coherente con el lenguaje visual del producto.

Codificar

Prefiere H.264 MP4 con yuv420p y faststart para una amplia compatibilidad de reproducción. Conserva el master de alta resolución y deriva cortes de entrega más pequeños a partir de él. Mantén el texto nítido y evita la compresión excesiva alrededor de los bordes de la interfaz.

Revisar e iterar

Inspecciona el video completo, no solo el primer fotograma. Extrae una hoja de contactos y fotogramas en cada clic, transición, punto final de zoom, finalización de texto escrito y CTA final. Verifica:

• el recorrido del cursor se siente intencional pero imperfecto;
• cada clic tiene retroalimentación visible y aterriza en el objetivo;
• la velocidad del puntero y el ritmo de escritura varían de forma natural;
• el cursor parpadea en los campos de texto enfocados;
• los zooms permanecen continuos en su inicio, enfoque, reversión y punto final;
• las etiquetas permanecen legibles el tiempo suficiente;
• ningún cursor, tooltip, modal o subtítulo está recortado;
• las transiciones preservan la continuidad espacial;
• las dimensiones, duración, códec y tamaño de archivo coinciden con el corte elegido.

Revisa cualquier acción apresurada antes de la entrega. Proporciona el video final, el fotograma de póster, la duración, las dimensiones y la ruta local o del repositorio. Actualiza la documentación del repositorio solo cuando se solicite.