product-video — Vidéo produit par le code

product-video — Créer une vidéo produit avec du code

Reconstruisez l'interface de votre produit en HTML, écrivez les animations de manière à ce qu'elles soient uniquement déterminées par le temps, puis photographiez chaque image dans un navigateur headless pour créer une vidéo. La musique et les effets sonores sont également générés dans le navigateur. Vous n'avez besoin que de Node.js, ffmpeg et Chromium.

Cette compétence inclut un modèle prêt à l'emploi (dans assets/template/). Il contient les outils de capture, de son et de vérification, ainsi qu'un exemple de vidéo de 30 secondes. Ainsi, vous n'avez pas à construire le mécanisme à partir de zéro : il vous suffit de dupliquer le modèle et de remplacer le contenu.

Principe important : vous ne voyez ni n'entendez la vidéo

Vous ne pouvez pas lire la vidéo pour vérifier sa qualité. Celle-ci dépend donc du nombre de fois où vous exportez des images fixes pour les vérifier visuellement et des vérifications numériques. Si vous avancez simplement après avoir écrit le code, vous laisserez inévitablement des problèmes comme du texte coupé, des superpositions ou des tremblements passagers. Après avoir écrit une scène, examinez-la image par image, corrigez-la, puis passez à la suivante. Vous n'entendez pas le son, alors indiquez les mesures numériques et demandez à un humain de confirmer l'audition.

Règles à respecter (avec justifications)

1. L'apparence dépend uniquement du temps. Les animations doivent être écrites avec tl.* pour spécifier « à quelle seconde » ou avec onFrame((t) => …) en utilisant directement t. N'utilisez pas les animations/transitions CSS, setTimeout, Math.random() ou l'heure courante. Comme à un instant donné l'image est toujours la même, vous pouvez effectuer le rendu en parallèle et refaire uniquement une partie.
2. Écrire puis vérifier. Après chaque scène, exécutez --sheet pour disposer les images, puis ouvrez-les et examinez-les. Vérifiez les transitions scène par scène avec un pas de 0,1 à 0,2 seconde. Ne passez pas à la scène suivante sans avoir vérifié.
3. Ne pas animer lentement les éléments contenant du texte. Le navigateur aligne la position du texte sur les pixels. Si vous déplacez lentement un élément textuel sur plusieurs secondes, le texte tremblera. Déplacez le conteneur ou le titre en une seconde environ, puis animez le contenu à l'intérieur une fois arrêté. Seule la lumière de fond peut être animée lentement.
4. Utilisez tl.in pour l'apparition, tl.out / tl.hide pour la disparition. tl.fromTo conserve la valeur originale avant l'heure de début, ce qui peut rendre l'élément visible brièvement avant son entrée.
5. Écrivez le CSS des écrans du produit sous la classe racine de l'écran (par exemple .ui-chat .row). L'utilisation de noms courts comme .row ou .title nus peut entrer en conflit avec les composants du template ou d'autres écrans, provoquant des défauts difficiles à détecter.
6. Assurez-vous que le texte est lisible. La vidéo sera visionnée sur smartphone. Les titres doivent faire au moins 68px, et le corps du texte dans les conteneurs au moins 18px sur l'écran (taille de police × facteur d'échelle). Pour les petits écrans, agrandissez le conteneur entier ou rapprochez-vous de la zone à mettre en valeur.
7. Ne déformez pas la réalité. N'incluez rien que les sources ne puissent confirmer. Ne montrez pas quelque chose comme « possible » si ce ne l'est pas. N'insérez pas de chiffres non vérifiés, de comparaisons avec des concurrents ou de recommandations. Ne dessinez pas les logos des concurrents ; écrivez leurs noms en texte. Sur la dernière carte, ajoutez en petit caractère que l'écran a été reconstruit (brand.fine).
8. Placez les transitions de scène et les grands mouvements sur le début des mesures. Le moment où le logo s'ajuste, le changement de scène et la dernière carte doivent coïncider avec le début d'une measure de la musique (hit: true). Cela améliore la cohérence visuelle.
9. Ne modifiez pas le volume ou le timbre sonore. Les valeurs de kit/audio.js ont été mesurées pour être équilibrées. Les modifier sans entendre le résultat peut casser l'équilibre. Modifiez uniquement les sections de la musique (plan.js) et les signaux sonores.
10. N'écrivez pas « vérifié » si vous n'avez pas mesuré. Vous devez toujours indiquer que vous n'avez pas écouté l'audio dans le rapport.

Procédure

À la fin de chaque étape, il y a une vérification. Ne sautez pas d'étape (les corrections ultérieures coûteront plus cher).

Le travail est long. Si vous perdez le contexte et oubliez des détails, relisez ce fichier et les fichiers references/ de l'étape courante. Notez dans un commentaire en haut de src/js/plan.js la structure décidée (le tableau des scènes). Cela vous permettra de reprendre facilement après une interruption.

0. Préparation

node "${CLAUDE_SKILL_DIR}/scripts/new.mjs" video     # Duplique le modèle dans video/ (ajustez l'emplacement selon la demande)
cd video && npm install --ignore-scripts
node render.mjs --sheet 0:29:2                       # Si la liste d'images du modèle s'affiche dans out/sheet.png, la préparation est terminée

${CLAUDE_SKILL_DIR} correspond au dossier contenant ce SKILL.md. Si vous voyez ce texte littéral, remplacez-le par le chemin absolu du dossier contenant ce fichier.

Si le navigateur est manquant, exécutez npx playwright install chromium. Si cela n'est pas possible, utilisez Chrome ou Edge déjà installé (en définissant la variable d'environnement CHROME_CHANNEL=chrome ou CHROME_CHANNEL=msedge). Si ffmpeg est absent, installez-le.

Commencez par examiner src/js/scenes.js du modèle et l'image out/sheet.png. L'exemple est plus rapide qu'une explication pour comprendre l'utilisation des composants.

1. Recherche

Tous les faits présentés dans la vidéo doivent avoir une source. Lisez le README, la documentation, les règles de design (couleurs, polices, espacements) et les textes réels de l'interface. Notez :

• Quel problème le produit résout-il, pour qui, et comment (en une phrase)
• Les fonctionnalités à mettre en avant et leur justification (source documentaire)
• Les textes réels qui apparaissent à l'écran (noms des boutons, états, notifications). Les textes inventés seront immédiatement remarqués par ceux qui connaissent le produit
• L'aspect visuel réel de l'interface. Ouvrez des captures d'écran ou maquettes pour copier la disposition, les couleurs, les espacements et les tailles de police. Sinon, lisez le code de l'UI (composants, styles, tokens de design)
• L'environnement supporté, les contraintes et les prérequis (pour éviter les exagérations)

Si la demande ne les précise pas, décidez par vous-même et indiquez-le dans le rapport : durée (60 à 90 secondes, 30 secondes pour une demande courte), langue (celle de l'interface et des sources), utilisation des scènes claires et sombres. Ne demandez au demandeur que si vous ne trouvez pas les couleurs, le logo ou les polices de la marque dans les sources.

2. Définir la structure

Créez un tableau des scènes avant de commencer à coder. Les modèles de construction, la manière d'écrire les titres et la détermination des temps sont décrits dans references/direction.md. Lisez-le impérativement.

• Transmettez un seul message. Un seul titre par scène. Ne faites pas une liste de fonctionnalités
• Commencez par le « problème », pas par le produit
• Placez les transitions de scène sur le début d'une mesure (120 BPM : toutes les 2 secondes)
• Écrivez dans src/js/plan.js les valeurs de T (temps de début de scène) et music (sections musicales) conformément à ce tableau

Présentez brièvement la structure au demandeur. Vous pouvez commencer la réalisation sans attendre de réponse (si la direction est erronée, vous le saurez rapidement).

3. Préparer la marque et l'interface

• src/js/brand.js : nom, description courte, couleurs, polices, logo. Prenez les valeurs du produit réel
• src/css/app.css et HTML de scenes.js : reconstruction de l'interface produit. Adaptez couleurs, dimensions et textes à l'original
• Avant d'animer, exécutez --shot à l'état fixe et comparez avec l'original. Si cela ne ressemble pas alors, l'animation ne corrigera pas le problème

Ne collez pas de capture d'écran ; reconstruisez l'interface en HTML. Ainsi vous pouvez animer chaque composant, zoomer sans perte de qualité et changer les couleurs par scène.

4. Créer chaque scène une par une

Écrivez dans scenes.js une fonction par scène. Les composants et leur syntaxe sont décrits dans references/kit.md. Lisez-le avant de commencer à écrire.

Pour chaque scène, répétez :

node render.mjs --sheet 14:26:1        # Dispose les images de la scène toutes les secondes → ouvrez out/sheet.png et vérifiez
node render.mjs --shot 16.6,22.5       # Affiche une image à échelle 1:1 à des instants précis → out/shots/
node render.mjs --sheet 13.4:14.6:0.1 --cols 7 --w 420   # Vérifiez les transitions avec un pas de 0,1 à 0,2 seconde
node render.mjs --lint                 # Détecte automatiquement les textes coupés, superpositions, polices trop petites

Lors de la vérification : le texte est-il coupé, superposé, lisible ? Les espacements sont-ils équilibrés ? La scène indique-t-elle en un coup d'œil ce qu'il faut regarder ? Des composants de la scène précédente sont-ils encore visibles ?

En règle générale, vérifiez chaque scène 3 fois (juste après l'écriture, après la correction, lors de la transition avec la précédente/suivante). Pour les détails illisibles en vue d'ensemble, utilisez --shot pour une vérification à échelle 1:1.

5. Ajouter le son

La musique est générée automatiquement à partir des sections de plan.js. Les effets sonores sont joués aux moments où vous avez placé cue("type", temps) lors de la construction des scènes. Pour plus de détails, voir references/audio.md.

node render.mjs --audio                # out/audio-master.wav. Affiche le volume et les crêtes.

6. Prévisualisation complète et vérification

node render.mjs                        # Rendu complet à échelle 1:1 (quelques minutes pour 30 secondes). out/video.mp4
node tools/qa.mjs                      # Vérifie le format, le volume, les images déformées, les pertes de trame, les images noires, le silence
node render.mjs --sheet 0:90:1.5 --cols 6     # Visualise toute la vidéo (ajustez les secondes à la durée)

Corrigez tous les ✗. La lecture des résultats de la vérification et les solutions aux problèmes courants sont dans references/qa.md.

C'est maintenant la phase de finalisation. La première version fonctionnelle n'est souvent « pas cassée, mais pas assez intéressante ». Visualisez l'ensemble et listez au moins 5 points à améliorer avant de les corriger. Recherchez :

• Des plages de plus de 2 secondes sans rien d'intéressant
• De grands espaces vides, des éléments déséquilibrés, des conteneurs vides (par exemple, la moitié inférieure d'un smartphone blanche)
• Des moments où il est difficile de comprendre ce qui cause quoi (appui → changement)
• Des textes, couleurs ou dispositions différents de l'original

Si vous ne trouvez pas 5 points, votre pas de visualisation est trop grand. Re-vérifiez avec un pas d'une seconde, et de 0,25 seconde pour les zones critiques.

7. Rendu final

node render.mjs --scale 2 --keep-frames     # Rendu à 2x, puis réduit (3 à 4 fois plus long qu'à 1x). Exécutez en arrière-plan.
node tools/qa.mjs
node tools/extras.mjs web                   # Version légère (<10 Mo), idéale pour chat ou GitHub
node tools/extras.mjs poster 15.9           # Image statique pour la vignette (au moment le plus représentatif)

Le rendu à 2x lisse les contours et réduit de moitié les tremblements de texte. Si le rendu s'arrête, utilisez --resume --reuse-audio pour reprendre. Si vous ne modifiez qu'une partie, supprimez les trames correspondantes dans out/frames/ et exécutez --resume pour ne refaire que cette section.

8. Rapport

Écrivez brièvement et honnêtement (le modèle est à la fin de references/qa.md) :

• Ce qui est produit (emplacement du fichier, durée, résolution) et un résumé de la structure
• Ce qui a été vérifié (résultats de la vérification) et ce qui n'a pas été vérifié. Comme vous n'avez pas écouté l'audio, écrivez impérativement : « Les mesures sont dans les limites. Veuillez confirmer l'audition. »
• Ce que vous avez décidé par vous-même (durée, langue, gestion des couleurs, etc.) et les éléments que vous n'avez pas pu confirmer par les sources
• L'interface est une reconstruction. Comment demander des modifications

Lors d'une demande de modification

Pour modifier une vidéo créée avec ce modèle, ne recommencez pas la procédure depuis le début.

1. Lisez references/kit.md et le code concerné. Les titres et textes d'interface sont dans scenes.js, le texte de la dernière carte dans brand.js, le planning et la musique dans plan.js, l'apparence de l'interface dans app.css.
2. Apportez les modifications
3. Vérifiez la scène modifiée et ses transitions avec --shot / --sheet. Lancez aussi --lint.
4. Si vous modifiez la durée des scènes ou les sections musicales, exécutez node render.mjs --audio et assurez-vous qu'aucun avertissement n'apparaît.
5. Si l'on vous demande le fichier vidéo, effectuez les étapes 6 à 7 pour le produire. Sinon, indiquez dans le rapport ce que vous avez vérifié et demandez si vous devez produire la vidéo.

Exécuter node render.mjs sans option lance le rendu complet (plusieurs minutes). Pour une simple vérification, utilisez impérativement --shot, --sheet ou --lint. Consultez node render.mjs --help pour plus d'informations.

Critères de qualité

Avant de livrer, vérifiez par vous-même :

• Sans le son, les titres suffisent à comprendre le message
• Les 3 premières secondes présentent un problème que le spectateur peut s'approprier
• Chaque scène a un seul point focal (ne pas animer deux éléments simultanément)
• Quelqu'un qui connaît le produit ne voit aucune incohérence entre l'interface et le texte
• --lint et tools/qa.mjs n'affichent aucun ✗
• Toutes les transitions de scène ont été vérifiées avec un pas de 0,1 à 0,2 seconde

Références

Fichier	Contenu	Quand le lire
references/direction.md	Modèles de structure, planning, écriture des titres, placement et animation des écrans	Avant de définir la structure (obligatoire)
references/kit.md	Rôles des fichiers du modèle, utilisation du moteur et des composants	Avant d'écrire les scènes (obligatoire)
references/audio.md	Sections musicales, liste des signaux sonores, mesure	Lors de l'ajout du son
references/qa.md	Lecture des résultats de vérification, problèmes courants et corrections, modèle de rapport	Lors de la prévisualisation et du rendu final
assets/template/src/js/scenes.js	Vidéo exemple, utilisation pratique des composants	Au tout début