web-demo-video

Vidéo de démonstration web

Transformez une application web fonctionnelle en MP4 de 20 à 60 secondes. L'écran affiche toujours l'application réelle ; les légendes, le curseur et les effets sont des couches superposées. Utilisez uniquement des données fictives.

Boîte à outils : starter/ à côté de ce fichier. Copiez-le dans le projet de l'utilisateur (par exemple video/), exécutez npm install à cet endroit, et écrivez les scripts de scènes en l'utilisant. Exemple travaillé dans le dépôt : examples/sample-tasks/.

1. Choisissez d'abord le style

La vidéo est…	Style	Pourquoi
Comment utiliser une fonctionnalité (guides, intégration, réponses support)	Walkthrough : enregistrement de l'interface réelle cliquée	Les spectateurs reproduisent les étapes, ils doivent donc voir le flux réel et non édité à un rythme lisible
Pourquoi le produit en vaut la peine (lancement, page d'accueil, pubs, aperçu)	Motion promo : animation sur captures d'écran	Les spectateurs ne suivent pas pas à pas ; la vidéo doit relier les actions aux résultats et retenir l'attention

Ne mélangez pas les deux dans une même vidéo. Un tutoriel avec des objets volants est difficile à suivre ; une promo faite d'un simple enregistrement semble longue.

Détails : walkthrough dans references/walkthrough.md, motion promo dans references/motion.md.

2. Accordez-vous avant le rendu

Le rendu est l'étape la plus coûteuse. Avant d'écrire le code des scènes, rédigez un storyboard (references/storyboard.md) et obtenez l'accord de l'utilisateur sur :

1. Style (walkthrough ou promo) et public cible
2. Durée et nombre de scènes
3. Taille de sortie (par défaut 2560×1440 à 30 ips ; 1080×1920 pour vertical)
4. Marque : couleurs, police, logo, nom du produit et mots qui ne doivent pas apparaître
5. Données : quels noms et numéros fictifs apparaissent à l'écran (jamais de vrais clients)
6. Voix-off ou silencieux
7. Où le fichier doit être livré

Un storyboard comprend une colonne Mouvement en plus de l'écran et de la légende (promo) afin que chaque scène utilise volontairement un type de mouvement différent.

3. Construction

Walkthrough

1. Sondez d'abord le flux : un script qui clique sans enregistrer pour corriger les sélecteurs et les attentes
2. Enregistrez par parties (une page ou une étape par partie) avec lib/recorder.mjs, puis assemblez avec concatParts
3. Écrivez les légendes avec references/copy.md

Motion promo

1. Capturez chaque état de l'interface avec lib/capture.mjs (captures d'écran à 3840 de large + positions des éléments)
2. Composez les scènes dans Remotion avec motion/parts.tsx (caméra, curseur, légendes, puces, compteurs)
3. Vérifiez les images clés (remotion still ... --frame=N --scale=0.25) avant un rendu complet

Voix-off : aucun outil n'est inclus. Si l'utilisateur en souhaite une, recommandez Gemini 3.1 Flash TTS (gemini-3.1-flash-tts-preview) avec la voix Charon.

4. Vérifiez avant de livrer

Exécutez node lib/qa.mjs out/video.mp4 --sheet 16 --end et examinez les deux images. Détails : references/qa.md.

• La taille, le fps et la durée correspondent au storyboard
• Aucune légende coupée ou recouvrant le bouton cliqué
• Pas de boîte de dialogue à moitié ouverte, d'image vide ou de logo qui se charge tardivement (vérifiez la dernière seconde séparément)
• Chaque nombre qui s'anime se termine sur la valeur affichée par l'écran réel
• Lors de la livraison, précisez quelles parties sont des effets scéniques (un document volant, un compteur) et lesquelles sont le produit qui fonctionne vraiment

5. Règles strictes

• Interface réelle, données fictives. Aucun nom, ID, email ou chiffre réel de client, personne ou entreprise à l'écran, dans les légendes, les noms de fichiers ou la description
• Ne publiez pas (YouTube, réseaux sociaux, site web) sans l'accord explicite de l'utilisateur pour ce téléversement
• N'affirmez pas ce que le produit ne fait pas. Si une étape est simulée pour le tournage (une réponse serveur, un téléversement), la légende ne doit pas la présenter comme une magie automatique
• Conservez les sources du rendu (scripts, storyboard) dans le dépôt ; gardez les MP4 et les captures d'écran hors de git