vidéo-produit

Vidéo produit

Construisez une vidéo narrative de 60 à 120 secondes qui présente un produit en utilisant ses écrans réels. Le livrable est un projet HyperFrames (un index.html généré plus les assets) et un MP4 rendu.

Rédigez chaque livrable (script, texte à l’écran, README) dans la langue du public. Ce fichier est en anglais uniquement car ce sont des instructions.

Structure du livrable

Créez un dossier par vidéo, en dehors de tout dépôt de code sauf indication contraire de l’utilisateur :

<Product>-video/
  ROTEIRO.md | SCRIPT.md     script, tableau des revendications, points à confirmer
  LEIA-ME.md | README.md     ce qui est réel, ce qui est reconstruit, limites, comment relancer
  01-.. 0N-..                assets capturés, un dossier par source
  voz/ | voice/              segments de narration (texte et audio par scène)
  ferramentas/ | tools/      configurations et gen.js (le générateur de composition)
  hyperframes/
    index.html               GÉNÉRÉ. Ne jamais modifier à la main.
    assets/{img,video,audio,fonts}
    renders/

Flux de travail

Exécutez les phases dans l’ordre. Chacune se termine par une vérification ; ne commencez pas la phase suivante tant que la vérification n’est pas réussie.

P1. Sources

1. Localisez chaque source nommée par l’utilisateur. Un chemin d’une autre machine n’existera pas : recherchez le même projet sous les dossiers de l’utilisateur actuel et indiquez lequel vous avez utilisé.
2. Classez comment le produit peut être montré :
   • Application live, accessible : capturez-la (P3, site-capture.cjs, record-interaction.cjs).
   • Fichier Figma public : capturez les trames via la vue prototype (P3, figma-frames.cjs). Aucun jeton nécessaire.
   • Derrière un accès protégé sans accès : demandez des captures d’écran ou un compte de test. Ne reconstruisez pas les écrans de mémoire.
3. Extrayez les propres mots du produit : contenu de la page d’accueil, noms des fonctionnalités, chiffres, FAQ, conditions. Ce sont les seules sources autorisées pour les revendications.

Vérification : vous pouvez nommer le public, les modules du produit et la source de chaque fait que vous prévoyez d’utiliser.

P2. Script

Lisez references/script.md et rédigez le fichier script à partir de son modèle. Les règles les plus importantes :

• Budget de 2,3 à 2,6 mots parlés par seconde. 250 mots font environ 100 secondes.
• Une idée par scène, 8 à 16 secondes par scène, 6 à 9 scènes.
• Chaque revendication dans la narration a une ligne dans le tableau des revendications avec sa source. Laissez de côté tout ce que les sources ne peuvent pas étayer.
• Écrivez pour la voix : noms de marques tels qu’ils sont prononcés, nombres épelés, pas d’abréviations que la voix épellerait lettre par lettre.

Vérification : le tableau des revendications n’a aucune cellule de source vide, et la liste « points à confirmer » nomme chaque nombre provenant du texte marketing.

P3. Assets

Lisez references/capture.md pour des exemples de configuration.

Source	Script	Sortie
Application web live, statique	scripts/site-capture.cjs	premier écran, page entière, captures d’étapes, vidéos de défilement, découpes
Application web live, flux	scripts/record-interaction.cjs	clips d’interaction avec curseur ou superposition tactile
Fichier Figma public	scripts/figma-frames.cjs	un PNG par trame, recadré à la trame

Collectez également la marque : logo (vectoriel s’il existe), les fichiers de police de la marque avec leur licence, et les tokens de couleur du CSS du produit. Lisez les styles que les propres pages du produit utilisent avec scripts/page-styles.cjs <url> : famille de titres, graisse, interlignage, espacement des lettres, styles de boutons et toute surface en verre dépoli. La vidéo les copie au lieu de les deviner.

Vérification : ouvrez quelques captures et regardez-les. Une capture qui montre un écran de connexion, une bannière de cookies ou une superposition de développement est une capture échouée.

P4. Voix

Lisez references/voice.md. Demandez quelle voix l’utilisateur a avant de générer quoi que ce soit : un service payant accessible via MCP ou une clé API vient en premier, une narration fournie en deuxième. Un modèle local gratuit est uniquement pour un utilisateur qui le demande, car il installe un modèle sur sa machine.

• Service vocal via MCP : générez toute la narration en une seule prise continue (un paragraphe par scène, une balise de livraison au début). Alignez-la avec scripts/voice.py --existing, découpez-la aux pauses avec scripts/split-take.py --level, puis assemblez les fichiers de scène avec scripts/voice.py --parts "voz/cena-{id}.wav". Les limites de scène sont exactes et le ton reste le même de la première à la dernière scène. Une narration demandée scène par scène change d’humeur entre les requêtes.
• Service vocal via une clé API : scripts/voice.py --provider elevenlabs --el-voice <id> génère et assemble. scripts/elevenlabs.py vérifie la connexion, classe les voix et compose la musique.
• Narration fournie : passez --existing. Les limites de scène viennent de l’alignement de la transcription sur le script.

Avec un modèle expressif, définissez la livraison avec une [balise audio] au début de la prise. Chaque scène contient text (propre, pour les sous-titres) et peut contenir tts (ce que la voix reçoit, quand cela diffère).

Dans tous les modes, les timings des mots sont alignés sur le texte du script, donc les sous-titres n’affichent jamais d’erreur de transcription. Lisez la liste misheard qu’il imprime : tout ce qui n’est pas des nombres épelés et des homophones est un problème de prononciation. Corrigez le texte du script et régénérez.

Normalisez la narration à environ −18 LUFS avant de composer.

Vérification : voiceover.json existe, la durée totale est à moins de 10 % de la cible, misheard est expliqué, et scripts/voice-tone.py --scenes rapporte un écart de médiane de hauteur entre les scènes d’environ 3 demi-tons ou moins.

P5. Composition

Lisez references/hyperframes.md (les règles appliquées par le moteur de rendu) et partez de assets/gen-template.js.

• Générez index.html à partir d’un script. Les changements de timing se produisent à chaque changement de voix ; un générateur l’absorbe, les modifications manuelles non.
• Ancrez chaque animation sur une phrase de la narration (at(3, 'Dans le tableau')), jamais sur un seul mot court. « le », « et » et « un » apparaissent plusieurs fois par scène et la première correspondance est la mauvaise.
• Réservez le bas de 17 % du cadre pour les sous-titres. Rien d’autre n’entre dans cette bande.
• Montrez les écrans réels à l’intérieur d’une maquette de fenêtre de navigateur ou d’appareil. Mettez l’explication à côté, pas par-dessus.
• Préférez un seul surlignage clair par phrase (un cercle, un zoom, un déplacement de curseur) plutôt que plusieurs petits.
• Les titres reprennent le style de titre du produit et les balises reprennent son langage de surface, tous deux lus en P3. Ne prenez pas par défaut la graisse la plus lourde.
• Pour les stories, reels ou shorts, lisez references/vertical.md et construisez une deuxième composition verticale à partir de la même narration, en partant de assets/gen-vertical-template.js. Ne recadrez jamais la composition 16:9.

Vérification : npx hyperframes lint a 0 erreurs.

P6. Vérifier

1. npx hyperframes check doit se terminer par « Check passed » (lint, exécution, disposition, mouvement, contraste).
2. npx hyperframes snapshot --no-end --at <une heure par scène, plus chaque surlignage> et regardez chaque image. Construisez des feuilles de révision 2×2 avec ffmpeg pour revoir plus vite.
3. Comparez chaque image avec ce que la narration dit à cette seconde. Les défauts habituels : mauvais écran pour la phrase, un surlignage sur le mauvais élément, un retour à la ligne du texte, un élément dans la bande de sous-titres.
4. Rendez un brouillon (render -q draft), puis vérifiez le MP4 lui-même : ffprobe pour la durée et les flux, loudnorm pour le volume sonore (cible −16 à −17 LUFS avec la musique), et les images extraites avec ffmpeg.

Vérification : vous avez regardé une image de chaque scène tirée du MP4, pas seulement des instantanés.

P7. Livrer

Rédigez le README avec : ce qui est réel (capturé), ce qui a été reconstruit en HTML avec des données réelles, ce qui est conceptuel, les limites connues, les commandes pour prévisualiser, vérifier et rendre, et comment changer la voix. Ensuite, faites un rapport à l’utilisateur : ce qui a été fait, ce qui a été vérifié, et ce qui nécessite encore une décision humaine (chiffres non confirmés, musique, qualité vocale).

Pièges déjà payés

Code	Symptôme	Cause et correctif
X1	Les écrans changent une seconde trop tôt	at() a correspondu au premier « le » ou « et ». Ancrez sur des phrases.
X2	Un élément reste caché pendant des scènes entières	Deux fromTo sur le même élément ; le second rend immédiatement son état « from ». Utilisez un élément par apparition, ou to() à partir d’un état CSS initial.
X3	Le site répond 403 au script mais s’ouvre dans un navigateur	User agent sans tête. Utilisez lib/browser.cjs, qui envoie un UA de bureau.
X4	« L’exécutable n’existe pas » au lancement	La version du navigateur installée diffère de celle de Playwright. lib/browser.cjs utilise le Chromium local le plus récent, puis Chrome.
X5	La capture de page entière est coupée à un pli	L’application fait défiler un conteneur interne. Trouvez le plus grand élément défilable et agrandissez la zone d’affichage à sa hauteur.
X6	L’enregistrement du défilement saccade	La fréquence d’images du screencast est variable. Rendez les défilements image par image à la place.
X7	Vous vérifiez un fichier qui ne change jamais	L’enregistreur écrit dans un dossier différent de celui que vous inspectez. Affichez et vérifiez le chemin de sortie.
X8	Un compteur s’affiche minuscule à côté d’un énorme « % »	Un sélecteur descendant (.num span) a également correspondu au span du compteur interne. Utilisez des sélecteurs enfants pour les étiquettes.
X9	Les sous-titres montrent un mot erroné	Les sous-titres provenaient de la transcription brute. Alignez les timings sur le texte du script (voice.py le fait).
X10	La voix prononce mal la marque ou un terme	Écrivez-le tel qu’il est parlé (une marque écrite en un mot est narrée en deux, un terme étranger reçoit une phrase native), épeler les nombres, développez les abréviations.
X11	Une deuxième capture a effacé l’index de la première	Fusionnez les fichiers d’index entre les exécutions au lieu de les écraser.
X12	Une vidéo dans un wrapper temporisé échoue à la vérification	Les médias temporisés portent eux-mêmes class="clip" ; leur conteneur n’a pas de timing.
X13	La capture du prototype inclut un toast ou une barre de cookies	Fermez et cachez les superpositions avant la capture d’écran, puis recadrez à la trame.
X14	L’enregistrement montre des boutons réservés au prototype	Masquez les contrôles de test et de développement par sélecteur ou préfixe de texte avant l’enregistrement.
X15	Revendications que le produit ne peut pas prouver	« Premier », « total », « garanti » nécessitent une source. Laissez-les de côté ou déplacez-les dans « points à confirmer ».
X16	Un chiffre marketing n’a aucune base	Vérifiez d’où il vient avant de l’utiliser : recherchez dans la documentation et l’historique git de la page (git log -S'<chiffre>'). Un nombre ajouté manuellement dans une édition de copie n’est pas une preuve. Laissez-le tomber.
X17	Le montage vertical est illisible	Un écran de bureau en 9:16 a un texte de 9 px, et un recadrage ressemble toujours à un bureau. Montrez un élément adapté à la fois sur un panneau, comme le fait la page d’accueil mobile du produit (references/vertical.md).
X18	La narration sonne dramatique ou euphorique	Les balises non verbales ([soupirs]), [excité] et [sérieux] dépassent dans une vidéo produit. Utilisez [calme] et [chaleureux], régénérez uniquement les scènes nommées, et comparez les prises avec scripts/voice-tone.py.
X19	La mise en page ressemble à une page web	Colonne alignée à gauche, étiquettes de section au-dessus des titres, petit logo dans un coin. En vidéo verticale : centrez tout, supprimez les étiquettes, agrandissez le logo et centrez-le.
X20	L’accroche est loin du logo	L’export du logo a un remplissage transparent. Détourez le fichier et positionnez par rapport à la marque réelle.
X21	La narration est plate dans certaines scènes et excitée dans d’autres	Chaque scène était une requête séparée avec sa propre balise, donc chaque scène était une performance séparée. Générez une seule prise continue avec une seule balise, découpez-la aux pauses avec scripts/split-take.py et mesurez avec scripts/voice-tone.py --scenes. Un écart de 5 demi-tons entre les scènes a été perçu comme des sautes d’humeur, 2 comme égal.
X22	Les titres semblent lourds et différents du produit	La graisse a été supposée (800). Lisez le style de titre du produit avec scripts/page-styles.cjs et copiez la famille, la graisse, l’interlignage et l’espacement des lettres.
X23	Les mots se touchent dans un titre	L’espacement serré des lettres copié d’une page web ferme les espaces entre les mots aux tailles vidéo. Ajoutez word-spacing: .07em.
X24	Une étiquette en verre ressemble à du blanc uni, ou son flou apparaît après le fondu	L’arrière-plan est trop opaque (gardez la partie inférieure près de 0,6), ou le fondu est sur un parent : une opacité inférieure à 1 sur un ancêtre coupe l’élément de ce qui se trouve derrière lui. Animez l’élément qui a backdrop-filter.
X25	La vérification du contraste échoue sur un texte qui semble correct	La vérification a échantillonné une image au milieu d’un fondu. Prenez un instantané à l’heure signalée. Si l’élément est en entrée, déplacez l’entrée de quelques images et relancez la vérification. Les compositions très courtes rencontrent le plus souvent ce problème.

Fichiers de cette compétence

• references/script.md : modèle de script, rythme, tableau des revendications, table de prononciation.
• references/capture.md : configurations pour les trois scripts de capture, spécifications de capture, assets de marque.
• references/voice.md : configuration TTS, voix, alignement, volume sonore, musique, changement de narration.
• references/hyperframes.md : règles de composition, commandes CLI, zones de disposition.
• references/vertical.md : version 9:16 pour stories : zone de sécurité, caméra sur l’écran, sous-titres, division en parties.
• assets/gen-template.js : générateur de composition 16:9 à copier dans le dossier d’outils du projet.
• assets/gen-vertical-template.js : générateur vertical avec une édition complète et une édition courte.
• scripts/lib/browser.cjs, scripts/site-capture.cjs, scripts/record-interaction.cjs, scripts/figma-frames.cjs, scripts/element-shots.cjs, scripts/page-styles.cjs, scripts/voice.py, scripts/split-take.py, scripts/voice-tone.py, scripts/elevenlabs.py, scripts/lib/eleven.py.

Le code API ElevenLabs (--provider elevenlabs, elevenlabs.py) a été écrit sans clé à tester. Sa première exécution réelle peut nécessiter une correction ; la route --parts et la route locale sont testées.