Film de lancement en code

Vidéo de lancement

Réalisez une vidéo de lancement comme le ferait un petit studio d’animation. Décidez d’abord de l’objectif de la vidéo et planifiez-la étape par étape. Ensuite, construisez chaque image en code, de sorte que chaque partie puisse être modifiée et rendue à nouveau en une minute.

Le résultat est un court-métrage du produit réel : son interface utilisateur reconstruite en HTML, animée sur une grille de temps, synchronisée sur la musique, en 60 images par seconde avec un flou de mouvement.

Prérequis

• Node 18+, ffmpeg avec libx264, Python 3.9+. Les scripts Python n’utilisent que la bibliothèque standard.
• Playwright avec Chromium, installé dans le dossier vidéo : npm i -D playwright && npx playwright install chromium.
• Les scripts scripts/ et le modèle assets/template.html de cette compétence.

Dans les commandes, $SKILL correspond au dossier de cette compétence (par exemple ~/.claude/skills/launch-video). Définissez-le une fois dans le shell : SKILL=~/.claude/skills/launch-video. Exécutez les commandes depuis le dossier vidéo.

Le processus

Travaillez à travers les phases dans l’ordre. Chacune produit un fichier utilisé par la suivante.

Phase	Résultat	Lecture
1. Brief	brief.md	references/1-brief.md
2. Format	format, durée, ratios d’aspect, plateformes (dans le brief)	references/2-formats.md
3. Histoire	beatmap.md	references/3-story.md
4. Style	notes de style (dans le brief)	references/4-look-and-motion.md
5. Construction	film.html : 4 images clés pour validation utilisateur, puis le film complet	references/5-build.md, assets/template.html
6. Musique et son	options de chansons, points de coupe, MP4 mixé	references/6-music-and-sound.md
7. Rendu et vérification	le MP4 et les résultats de vérification	references/7-render-and-check.md
8. Livraison	fichiers finaux, versions réduites, notes de publication	references/8-platforms.md

Lisez une référence lorsque vous atteignez sa phase, pas tout à la fois.

1. Brief

Découvrez ce qu’est le produit, à qui la vidéo est destinée, la chose principale à retenir, et le moment magique : le point où le produit fait visiblement son travail. Lisez d’abord le dépôt, le site et la documentation. Ensuite, posez au maximum 5 questions à l’utilisateur en un seul lot. Pour tout le reste, inscrivez votre réponse par défaut dans les questions ouvertes du brief et continuez. Rédigez brief.md.

2. Format

Choisissez le type de vidéo en fonction du type de produit, de l’objectif et de la plateforme : teaser, film de lancement, démo, vidéo explicative, présentation de fonctionnalité, vidéo fondateur, démo de hackathon. Définissez la durée et les ratios d’aspect. Un film de lancement de 15 à 30 secondes pour X et LinkedIn est le défaut habituel pour un logiciel. En cas de conflit entre les conseils, les mots de l’utilisateur priment, puis la plateforme principale. Les autres plateformes reçoivent des versions réduites.

3. Histoire

Rédigez la carte des temps sur un tempo fixe ; 120 BPM donne un temps de 0,5 s. Pour chaque temps, décrivez ce qui se passe, à quel élément précédent il se rattache, où va la caméra, quel texte s’affiche et ce que l’on entend. Placez le moment magique sur le drop de la musique.

4. Style

Utilisez la marque du produit : ses couleurs, polices, logo, icônes et composants. Lisez les tokens de design et le CSS. Sans marque, utilisez un style 2D clair : toile blanc chaud, UI quasi noir, une couleur d’accent, une police sans-serif propre, une police mono pour le code. Assurez-vous que le texte soit suffisamment grand pour être lu sur un téléphone.

5. Construction

Copiez $SKILL/assets/template.html vers video/film.html. Conservez son moteur, remplacez son film. Chaque style provient du temps à l’intérieur de seek(t) : pas de transitions CSS, de minuteries ou d’états entre les images. Les formes se transforment les unes dans les autres au lieu de s’estomper.

Construisez d’abord les 4 moments clés : l’accroche, le moment magique, la récompense et la carte de fin. Rendez-les sous forme d’images fixes et montrez-les à l’utilisateur avec la carte des temps. Obtenez son accord ici : modifier une phrase est peu coûteux, modifier une scène terminée ne l’est pas. Ensuite, construisez le reste.

6. Musique et son

Trouvez 3 à 4 chansons candidates proches du tempo du film, chacune avec une partie calme et un drop clair. Demandez avant de télécharger quoi que ce soit. Mesurez chaque chanson avec scripts/beats.py, examinez scripts/loudness_plot.py, et confirmez le drop avec beats.py --around. Rendez le film à la vitesse = BPM de la chanson / BPM du film pour aligner les temps. Ensuite, coupez chaque chanson avec scripts/mux.py, de sorte que son drop tombe sur le moment magique. Laissez l’utilisateur choisir. Ajoutez des effets sonores réels pour les clics, les swoosh et les pops, placés à leur point le plus fort.

7. Rendu et vérification

Rendez d’abord les images fixes, puis la vidéo : node $SKILL/scripts/render.mjs film.html --out out/film.mp4. Ensuite, vérifiez et montrez la preuve à l’utilisateur :

• scripts/pops.py détecte les images qui clignotent pendant une seule image. Il doit signaler 0.
• scripts/contact_sheet.py --video montre des images toutes les 0,5 s. Examinez chaque vignette pour le cadrage, le texte coupé et les chevauchements.
• Vérifiez le timing du drop et la loudness (-14 LUFS).
• Regardez la vidéo en mode silencieux à la taille d’un téléphone.

8. Livraison

Exportez le master et les versions réduites nécessaires pour chaque plateforme, par exemple 16:9, 1:1 ou 4:5, et 9:16. Donnez à l’utilisateur les fichiers, le texte de publication avec l’accroche et le lien, et ce qu’il doit vérifier avant de publier. Ensuite, prenez des notes comme un réalisateur ("le milieu traîne", "le zoom devrait tomber sur le drop") et ne modifiez que ce que la note concerne.

Règles de travail

• Produit réel, affirmations vraies. Utilisez le vrai nom, l’interface utilisateur, les mots et les formes de données du produit. Les données d’exemple doivent être plausibles et cohérentes entre les scènes : si une commande de 120 $ arrive, le total augmente de 120 $. Ne montrez jamais une fonctionnalité qui n’existe pas ou un chiffre que vous ne pouvez pas justifier. Mentionnez "bêta" ou "testnet" lorsque cela s’applique.
• Un message par vidéo. Si le brief contient trois messages, créez trois vidéos ou choisissez-en un.
• Demandez avant de télécharger de la musique, des effets sonores ou des séquences. Nommez le fichier, la source, sa licence et sa taille.
• Vérifiez votre propre travail avant de le montrer. Les vérifications de la phase 7 détectent la plupart des problèmes avant que l’utilisateur ne les voie. Rapportez les résultats avec des chiffres, pas "ça a l'air bien".
• Montrez des options lorsque le goût décide. Notamment pour la musique : coupez 3 à 4 versions et laissez l’utilisateur choisir.
• Copiez la structure, pas l’art. Une vidéo de référence peut emprunter son rythme et sa structure de temps. Ne copiez pas ses personnages, son art, sa musique ou sa marque.

Dossier vidéo

Gardez la vidéo en dehors de l’arborescence source du produit, sauf si l’utilisateur le souhaite autrement.

video/
  brief.md        beatmap.md
  film.html       assets/      (logo, polices, icônes, captures d’écran)
  music/          sfx/         (téléchargements, avec leurs notes de licence)
  stills/         out/         (rendus ; jetables)
  package.json    node_modules/ (Playwright)

Scripts

Script	Fonction
scripts/render.mjs	Images fixes, ou le MP4 complet avec flou de mouvement, workers parallèles et --speed
scripts/contact_sheet.py	Assemble des images fixes ou des images vidéo en planches que vous pouvez examiner en une seule image
scripts/pops.py	Détecte les anomalies d’une seule image
scripts/beats.py	Tempo de la chanson, grille de temps, candidats pour le drop ; --around pour un examen rapproché
scripts/loudness_plot.py	Dessine la loudness des chansons avec la grille et les candidats pour le drop
scripts/mux.py	Coupe la musique sur le hit, place les effets sonores à leur pic, règle la loudness

Exécutez n’importe quel script sans arguments pour voir son utilisation.