flucas96/ui-review

Créer une vidéo de démonstration produit

Produisez une histoire produit cohérente qui donne l'impression d'être opérée par une personne. Privilégiez l'enregistrement de l'interface réelle et n'ajoutez que la couche de présentation nécessaire à la clarté.

Choisir le format

• Utilisez 1920×1080 à 30 ou 60 ips pour un dépôt, une page d'accueil ou un workflow détaillé.
• Utilisez 1080×1350 pour un format carré 4:5 destiné aux réseaux sociaux et 1080×1920 pour une story/reel vertical.
• Par défaut, visez 45 à 90 secondes pour un workflow complet et 8 à 15 secondes pour un teaser social.
• Créez des montages séparés pour des durées significativement différentes ; ne vous contentez pas d'accélérer le montage long.

Construire l'histoire

Inspectez l'application, les ressources disponibles, les scripts existants et le traitement de la marque avant d'écrire. Rédigez une courte feuille de rythme contenant : accroche, problème, action, résultat visible et appel à l'action. Gardez une action significative par temps fort. Laissez les états importants reposer assez longtemps pour être lus.

Pour un workflow complet, montrez l'intention humaine, l'action de l'agent, le résultat examiné et la résolution. Pour un teaser, commencez par le résultat et n'utilisez que le minimum d'interface nécessaire pour le prouver.

Animer l'interaction humaine

Lisez motion-language.md avant d'implémenter une animation de pointeur, de frappe ou de caméra. Utilisez human-motion.mjs pour générer des chemins de pointeur et des chronologies de frappe déterministes, puis adaptez sa sortie au harnais d'enregistrement.

Appliquez ces exigences :

• Maintenez la position du curseur continue au sein d'une scène. Ne le téléportez jamais entre des actions visibles.
• Déplacez-vous le long d'un chemin légèrement courbe avec accélération, décélération et une petite correction finale.
• Variez la durée en fonction de la distance et de la taille de la cible. Évitez une vitesse de curseur globale unique.
• Faites une brève pause après l'arrivée, animez le pointeur vers le bas plus une ondulation de clic, puis effectuez le clic.
• Tapez caractère par caractère avec des délais variés et des pauses légèrement plus longues aux espaces et à la ponctuation.
• Affichez un curseur de saisie clignotant chaque fois qu'un champ de texte est actif, y compris les pauses avant, pendant et après la frappe.
• Évitez les fautes de frappe synthétiques sauf si elles servent l'histoire.
• Estompez le pointeur lors des changements de scène brusques si la position continue ne peut pas être préservée.

Enregistrer et composer

Utilisez la compétence Playwright lorsque l'automatisation du navigateur est nécessaire. Enregistrez à la résolution cible finale ou supérieure. Privilégiez l'application réelle, la mise en page réelle et les transitions d'état réelles plutôt qu'une maquette recréée. Si la mise en scène est nécessaire, préservez clairement l'identité visuelle du produit.

Utilisez des mouvements de caméra retenus :

• Pan ou zoom pour diriger l'attention, pas seulement pour ajouter du mouvement.
• Animez un seul conteneur de caméra stable ; ne transitionnez pas indépendamment plusieurs enfants de page.
• Gardez une origine de transformation fixe et continuez à partir de la transformation actuellement rendue pour éviter les sauts.
• Entrez et sortez des zooms en douceur, maintenez la destination, et donnez au mouvement de retour son propre amorti.
• Évitez de déplacer la caméra, le curseur et les éléments majeurs de l'interface dans des directions concurrentes en même temps.
• Gardez les superpositions de texte dans les marges de sécurité et lisibles sans audio.
• Animez les légendes et les indicateurs de progression de manière cohérente avec le langage visuel du produit.

Encoder

Privilégiez le H.264 MP4 avec yuv420p et faststart pour une large compatibilité de lecture. Conservez le master haute résolution et dérivez-en des petits formats de livraison. Gardez le texte net et évitez une compression excessive autour des bords de l'interface.

Réviser et itérer

Inspectez la vidéo complète, pas seulement la première image. Extrayez une planche contact ainsi que des images à chaque clic, transition, point final de zoom, achèvement de texte tapé et CTA final. Vérifiez :

• le déplacement du curseur semble intentionnel mais imparfait ;
• chaque clic a un retour visuel et atterrit sur la cible ;
• la vitesse du pointeur et la cadence de frappe varient naturellement ;
• le curseur clignote dans les champs de texte actifs ;
• les zooms restent continus à leur début, maintien du focus, inversion et point final ;
• les libellés restent lisibles assez longtemps ;
• aucun curseur, info-bulle, modal ou légende n'est rogné ;
• les transitions préservent la continuité spatiale ;
• les dimensions, la durée, le codec et la taille du fichier correspondent au format choisi.

Révisez toute action précipitée avant la livraison. Fournissez la vidéo finale, l'image d'affiche, la durée, les dimensions et le chemin local ou de dépôt. Mettez à jour la documentation du dépôt uniquement sur demande.