demo-video — URL→Remotion launch

Compétence de Création de Vidéo de Démonstration

Créez une vidéo de démonstration produit soignée à partir d'une URL d'entreprise ou d'actifs produit. La sortie par défaut est une vidéo 1080p+ de 60 à 90 secondes ; rendez en 4K lorsque la machine, les actifs et la cible de livraison le prennent en charge.

Norme de Fonctionnement

• Basez la vidéo sur la surface réelle du produit : pages web, écrans d'application, workflows connectés, captures d'écran, actifs fournis par l'utilisateur ou démos publiques vérifiées.
• Considérez une entrée de type URL uniquement comme suffisante pour démarrer. Déduisez le produit, le public, le workflow principal et le système de marque du site, puis demandez uniquement les accès manquants ou les préférences à fort impact.
• Privilégiez la narration de type chef de produit plutôt que le marketing générique. Montrez quel problème l'utilisateur rencontre, ce qu'il fait dans le produit, ce qui change à l'écran et pourquoi le résultat est important.
• Utilisez Remotion pour la composition animée lorsque c'est pratique et FFmpeg pour l'inspection, l'encodage, les feuilles de contact, le traitement audio et la conversion de livraison.
• Gardez les affirmations défendables. N'inventez pas de métriques, de logos clients, de résultats de détecteur, d'intégrations, de statut de conformité ou de prix à moins qu'ils ne soient vérifiés à partir du matériel source.
• Évitez de vous surajuster à un client précédent. Réutilisez le workflow, les contrôles de qualité et les schémas de mouvement ; ne réutilisez pas les captures d'écran, le texte, les couleurs, les prix, les personas ou les corrections version par version spécifiques au client.

Entrées

Si l'utilisateur fournit uniquement une URL de site web :

1. Ouvrez le site dans un navigateur, cartographiez la navigation, la proposition de valeur, les pages produit, les prix, les docs d'aide et les états interactifs visibles.
2. Capturez des captures d'écran haute résolution des pages et des surfaces UI qui expliquent le mieux le produit.
3. Construisez un récit autour de la boucle produit la plus forte découverte sur le site.
4. Indiquez toute limite d'accès si une zone produit connectée est requise.

Si l'utilisateur fournit plus de contexte, utilisez-le pour améliorer la qualité :

• Public cible, plateforme de campagne, rapport hauteur/largeur, durée préférée, CTA, objectif de lancement.
• Étapes du workflow produit, accès au compte de démonstration, échantillons d'entrée ou sortie avant/après attendue.
• Actifs de marque, captures d'écran, références vidéo, polices, direction musicale, affirmations interdites et notes juridiques.

Aiguillage vers les Références

• Lisez references/capture-workflow.md avant la recherche navigateur, la capture connectée ou le travail sur les captures d'écran.
• Lisez references/storytelling.md avant d'écrire le script, le storyboard, la liste des plans ou le récit produit.
• Lisez references/visual-system.md avant de choisir le langage du mouvement, la typographie, les transitions, la mise en page ou la musique.
• Lisez references/remotion-ffmpeg.md avant d'implémenter le projet vidéo ou de rendre les fichiers.
• Lisez references/qc-checklist.md avant de déclarer la vidéo terminée.

Workflow de Production

1. Délimitez le livrable

   • Confirmez la durée cible, le rapport hauteur/largeur, la résolution, la langue et la plateforme de livraison lorsqu'ils sont disponibles.
   • Par défaut : 16:9, 60-90 secondes, 30 ips, H.264 MP4, minimum 1080p.
   • Utilisez la 4K lorsqu'elle est demandée ou lorsque la vidéo sera utilisée pour un lancement, des investisseurs, une conférence ou une distribution publicitaire payante.

2. Recherchez le produit

   • Parcourez le site web et les pages produit assez en profondeur pour identifier la boucle principale, pas seulement la promesse de la page d'accueil.
   • Construisez une carte rapide des fonctionnalités : utilisateur principal, point douloureux, action principale, sortie produit visible, preuve, CTA.
   • Si le produit est derrière une connexion, utilisez la session navigateur active de l'utilisateur ou demandez-lui de se connecter, puis continuez à partir de l'interface authentifiée.

3. Capturez les preuves du produit

   • Capturez des captures d'écran de bureau à une échelle de périphérique 2x ou plus lorsque c'est possible.
   • Capturez les états remplis et vides s'ils expliquent la transformation.
   • Nommez les actifs par scène et état, par exemple dashboard-empty.png, workflow-result.png, pricing.png.
   • Conservez un manifeste avec l'URL, le titre de la page, l'heure de capture, la fenêtre d'affichage, le nom du fichier et les notes.

4. Écrivez l'histoire du produit

   • Commencez par le problème de l'utilisateur ou le résultat souhaité en langage simple.
   • Parcourez la boucle produit dans cet ordre : configuration, action, transformation, révision/preuve, workflow plus large, CTA.
   • Gardez le texte suffisamment court pour une vidéo en mouvement. Utilisez les légendes comme des ancres, pas des paragraphes.
   • Utilisez un texte qui sonne naturel pour le public ; évitez les phrases génériques d'IA comme « débloquez la productivité » à moins que le produit ne le dise vraiment.

5. Concevez le système de mouvement

   • Utilisez les vraies couleurs et la typographie de la marque comme base, puis ajoutez une police d'affichage ou un accent de visage sobre s'il améliore la hiérarchie.
   • Utilisez les captures d'écran du produit comme actifs principaux. Ajoutez des cadres de navigateur, des chemins de curseur, des zooms, des masques, des lignes de balayage, des panneaux de comparaison ou une typographie cinétique uniquement lorsqu'ils clarifient le workflow.
   • Choisissez des transitions qui correspondent au produit : liquide/ondulation pour une transformation fluide, balayage pour l'analyse, projecteur pour la preuve, poussée spatiale pour la navigation, comparaison fractionnée pour l'avant/après.
   • Gardez le mouvement continu. Les changements de scène doivent donner l'impression que la caméra ou l'interface se déplace à travers une seule histoire de produit, pas des diapositives séparées.

6. Construisez et rendez

   • Utilisez le modèle de démarrage dans assets/remotion-starter/ lorsqu'un échafaudage de projet est utile.
   • Rendez des aperçus ou une feuille de contact avant de rendre la vidéo finale.
   • Rendez d'abord en 1080p pour l'AC, puis en 4K final si demandé.
   • Utilisez FFmpeg ou ffprobe pour vérifier la durée, la résolution, le codec, la fréquence d'images et le flux audio.

7. AQ avant la livraison

   • Vérifiez qu'aucun texte ne se chevauche, ne se recadre mal ou ne devient illisible sur des coupes rapides.
   • Vérifiez que les boutons, les curseurs, les annotations et les masques sont alignés avec l'interface sous-jacente.
   • Vérifiez que toutes les captures d'écran sont suffisamment nettes à l'échelle finale.
   • Vérifiez que la musique est instrumentale, sans risque de droits et équilibrée sous toute voix off ou effets sonores.
   • Fournissez le MP4 final ainsi que les artefacts de production utiles : storyboard, manifeste des actifs, feuille de contact et projet source le cas échéant.

Scripts Réutilisables

• scripts/create_demo_brief.py crée un brief structuré à partir d'une URL et d'un contexte produit optionnel.
• scripts/qc_video.py inspecte les métadonnées de la vidéo finale avec ffprobe et signale les problèmes de résolution, durée, codec et audio.
• scripts/make_contact_sheet.py crée une feuille de contact visuelle avec FFmpeg pour une révision rapide.

Exécutez les scripts depuis un dossier de projet ou avec des chemins absolus. Ce sont des aides, pas un remplacement du jugement visuel.

Modèle de Démarrage

Copiez assets/remotion-starter/ dans le projet de travail lors du démarrage d'une nouvelle vidéo. Remplacez la configuration placeholder dans src/demoConfig.ts, ajoutez des captures d'écran dans public/ ou les actifs statiques de Remotion, et adaptez les scènes au récit du produit.

Le modèle de démarrage est intentionnellement générique :

• Il comprend une composition d'histoire produit avec des scènes d'ouverture, de workflow, de preuve et de CTA.
• Il utilise des emplacements de captures d'écran réelles mais revient à des placeholders d'interface propres.
• Il inclut des primitives de mouvement pour les fondus, les zooms, le mouvement de rail, l'accentuation du curseur et les panneaux de comparaison.
• Il évite le texte, les couleurs ou les actifs spécifiques au client.

Barre d'Achèvement

Ne considérez pas la vidéo comme terminée tant que ces conditions ne sont pas remplies :

• L'histoire du produit est dérivée de preuves produit réelles.
• Le rendu final est au moins en 1080p, ou l'utilisateur a explicitement accepté une cible inférieure.
• La vidéo a été inspectée visuellement via des images fixes, un rendu d'aperçu ou une feuille de contact.
• Les métadonnées FFmpeg/ffprobe confirment la résolution, la durée, le codec vidéo et l'état audio.
• Toute licence ou limite de source pour la musique, les polices, les images d'archives ou les pages tierces est documentée.
• L'utilisateur reçoit un fichier vidéo concret, pas seulement un plan ou un script.