Communitygithub.com

Vidéo de lancement : montage Remotion voix off, calé sur le beat

Planifie et produit en code, avec Remotion, une vidéo de lancement motion design de 30 à 75 secondes : questions de cadrage, storyboard, écrans du produit reconstruits en composants React, script et voix off IA phrase par phrase, musique avec chaque coupe calée sur le beat, typographie cinétique, revue, rendu, miniature et déclinaisons sociales 16:9, 1:1 et 9:16.

Qu'est-ce que Vidéo de lancement : montage Remotion voix off, calé sur le beat ?

Recette Vidéo de lancement, étape 2 (le montage voix off et tous les formats), par harish-anumula/launch-video-skill. Fonctionne avec Claude Code, Codex et tout agent qui lit SKILL.md et lance des commandes shell. Il pose quelques questions, propose une structure (du problème à la preuve, cold open, flux héros, avant/après, teaser), capture les écrans avec des données fictives, enregistre la voix off ligne par ligne avec horodatage des mots et garde la meilleure prise par correspondance de transcription (vo_lines.py, vo_pick.py), mesure la musique et cale le timing sur le beat (music_qa.py, build_timing.py), puis rend scènes et déclinaisons.

Compatible avec✓Claude Code✓Codex CLI✓Cursor
npx skills add harish-anumula/launch-video-skill

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Vidéo de lancement

Vous dirigez et construisez de bout en bout une courte vidéo de lancement : questions de découverte → storyboard → captures du produit → script et voix off → musique → scènes Remotion → révision → rendu → vignette et déclinaisons. La personne apporte le goût et la connaissance du produit ; vous apportez le pipeline et le savoir-faire. Posez les questions ci-dessous, prenez toutes les autres décisions vous-même et dites ce que vous avez choisi.

Tout ici est générique. Apportez la marque, les écrans, les clés API et la licence musicale du produit.

Installation (tout agent)

  • Claude Code : copiez ce dossier dans ~/.claude/skills/launch-video/ (personnel) ou <repo>/.claude/skills/launch-video/ (projet).
  • Codex : copiez-le dans ~/.codex/skills/launch-video/, ou référencez SKILL.md depuis votre AGENTS.md.
  • Autres agents : placez-le n'importe où et dites à l'agent de lire d'abord SKILL.md. Les chemins, versions et API évoluent ; si une commande ou une forme d'API a changé, consultez la documentation actuelle et adaptez-vous plutôt que de vous arrêter.

Contenu de ce skill

CheminCe que c'est
references/storyboard-template.mdFormes de récit, types d'accroche, utilisation de vidéos de référence, feuille de beats et recette beat-fonctionnalité
references/visual-catalog.mdLes blocs visuels de construction, ce que chacun montre, et à quels produits/fonctionnalités chacun convient
references/motion-cheatsheet.mdAssouplissements, ressorts, rythme, familles de style et typographie, transitions, caméra sur UI, texture, curseur
references/audio.mdVoix off vs musique, formes des API TTS et musique, mixage, volume sonore
references/review-checklist.mdQuoi vérifier par scène, sur le montage complet, et avant de partager
references/gotchas.mdModes d'échec et leurs correctifs
scripts/Analyse de référence, classement des voix, VO par ligne avec timings de mots, sélection de prise, génération/QA/options/étirement de la musique, timing sur le beat, feuilles de contact, finalisation
template/Starter Remotion : jetons de marque, helpers de timing, titre cinétique, curseur, grain, HUD, assemblage de logo, scènes génériques Accroche/Révélation/Fonctionnalité/Paiement/Fin/Vignette, une bibliothèque de visuels, un aperçu du catalogue, et video.config.tsx (le storyboard en code)

Outils

  • Node 20+, ffmpeg, Python 3.11 via uv/uvx (les scripts déclarent leurs propres dépendances).
  • Remotion : npx create-video@latest --yes --blank --no-tailwind video. Installez les skills officiels de l'agent (npx skills add remotion-dev/skills) et lisez remotion-best-practices avant d'écrire des scènes.
  • Optionnel : rubberband (étirement temporel propre), demucs et Whisper via uvx (analyse et QA), un compte ElevenLabs (ou autre TTS/musique).
  • Licences : Remotion est gratuit pour les particuliers et les entreprises de moins de 3 personnes ; les grandes entreprises ont besoin d'une licence d'entreprise Remotion. Vérifiez les conditions commerciales de votre fournisseur TTS/musique. Les logos tiers sont des marques déposées ; ne les montrez que pour des intégrations réelles.

1. Questions de découverte (à poser avant la planification)

Posez-les en un seul lot (utilisez l'outil de questions/choix multiples si votre client en a un ; sinon une courte liste numérotée). Proposez une valeur par défaut recommandée pour chaque question afin que la personne puisse simplement confirmer.

  1. Produit : son nom exact tel qu'il doit apparaître, et une phrase sur ce qu'il fait et pour qui.
  2. Public et objectif : qui regarde (clients, prospects, investisseurs, équipe interne) et ce qu'ils doivent faire après (s'inscrire, réserver une démo, essayer une fonctionnalité).
  3. Que montrer, par ordre de priorité : les 3–6 fonctionnalités ou moments les plus importants. Le temps d'écran suit cet ordre.
  4. Durée et format : par ex. 45–75s pour le montage principal en 16:9 ; quelles déclinaisons (15–20s, 1:1, 9:16) et où elles seront publiées.
  5. Son : voix off + musique (recommandé quand le produit doit être expliqué), ou musique seulement. Préférence vocale (genre, accent, énergie) ou « correspondre à cet exemple ».
  6. Récit et look : la forme du récit et le type d'accroche (voir references/storyboard-template.md ; recommandez-en un avec une raison), clair ou sombre, la famille de style (natif produit, éditorial, showreel, ludique, cinématographique ; references/motion-cheatsheet.md), et toutes vidéos qu'ils aiment. Actifs de marque : logo (SVG), couleurs, polices, ou où les lire (le CSS du produit).
  7. Écrans : pouvez-vous exécuter le produit avec un compte de démonstration et des données fictives, ou fourniront-ils des captures d'écran ? Tout ce qui ne doit pas apparaître.
  8. Carte de fin : texte et URL du CTA ; date de lancement / formulation « maintenant en bêta ».
  9. Clés : où se trouve la clé API TTS/musique (variable d'environnement ou .env ignoré par git). Ne demandez jamais de coller des clés dans le chat.

S'ils ont déjà répondu à certaines de ces questions, ne les reposez pas.

2. Planifier le storyboard

  • Choisissez une forme de récit et un type d'accroche dans references/storyboard-template.md (problème → produit → preuve n'est qu'une parmi plusieurs). Les beats de fonctionnalité suivent l'ordre de priorité.
  • Si la personne partage des vidéos de référence, empruntez leur savoir-faire (rythme, coupes, caméra, typographie), jamais leurs répliques, ouvertures ou séquences ; vérifiez le script par rapport aux transcriptions de référence avant d'enregistrer.
  • Écrivez la VO comme une courte ligne par scène (≈2,5 mots/s ; 60s ≈ 140 mots). Chaque ligne doit tomber sur le moment visuel de sa scène.
  • Pour chaque beat de fonctionnalité, choisissez un visuel dans references/visual-catalog.md qui convient à ce produit (une application mobile pourrait utiliser Phone → Steps → Notifications ; un outil de développement ComposerAnswer → BeforeAfter → Device). Variez les mouvements entre les beats consécutifs.
  • Partagez le storyboard sous forme de tableau court et confirmez-le avant de construire.

3. Capturer le produit

  • Exécutez le produit avec un compte de démonstration et des données fictives. Ne montrez jamais de vrais clients, collègues, e-mails ou données de production.
  • Capturez des captures d'écran de référence (Playwright, 2x DPR) de chaque écran utilisé dans le storyboard et notez le texte visible exact. Reconstruisez ces écrans en composants React simplifiés à l'intérieur de Device/Phone/cartes pour qu'ils restent nets et animés. Les captures d'écran réelles peuvent aller directement dans Device/Phone quand une reconstruction n'en vaut pas la peine.
  • Si un état ne peut pas être atteint honnêtement, stylisez-le et dites-le.

4. Voix off (si choisie)

  • Mettez les lignes dans config/script.json. scripts/vo_lines.py crée 3 prises par ligne avec des timings de mots ; scripts/vo_pick.py choisit la meilleure en fonction de la correspondance de transcription (et de la similarité avec une voix de référence, si fournie).
  • Générez ligne par ligne, jamais tout le script en une fois : les lectures en un seul passage mélangent les lignes et vous ne pouvez pas commencer chaque ligne sur sa coupe.
  • Utilisez des voix préfabriquées/stock. Pour ressembler à une voix d'un exemple, classez les voix stock avec scripts/voice_match.py ; ne clonez jamais une personne réelle sans consentement.

5. Musique

  • Générez 3–4 options instrumentales (scripts/music.py) ou licenciez des pistes. Créez un fichier d'extraits A/B/C/D (scripts/music_options.sh) et laissez la personne choisir à l'oreille.
  • Mesurez la piste choisie (scripts/music_qa.py) ; les pistes générées suivent rarement le tempo ou les sections demandés, alors accrochez les coupes aux beats détectés (scripts/build_timing.py). Si la fin naturelle tombe au mauvais endroit, étirez le temps de quelques pourcents (scripts/stretch_music.sh).

6. Construction

  • Configurez le modèle (template/README.md), définissez les jetons de marque, le logo et le CTA, et écrivez le storyboard dans video.config.tsx.
  • Avant l'existence de la VO, scripts/draft_timing.py donne un timing d'animatique pour que les scènes puissent être construites ; après, build_timing.py le remplace par les temps de mots réels.
  • Construisez une scène à la fois. Après chacune, rendez 6 à 10 images fixes à travers la scène à moitié échelle et regardez-les comme une feuille de contact (scripts/sheet.py).
  • Rendez et envoyez la composition StyleTest (accroche, révélation, première fonctionnalité) pour approbation avant de construire le reste.

7. Révision et itération

  • Rendez le montage complet, exécutez scripts/finalize.sh (−14 LUFS, illustration de couverture, feuille de contact à 1 image/s, transcription du mix final) et parcourez references/review-checklist.md.
  • Pour chaque série de commentaires, ne modifiez que ce qui a été demandé, refaites le rendu et dites exactement ce qui a changé par rapport à la version précédente. Validez chaque version.
  • Vous ne pouvez pas regarder en temps réel : dites quelles vérifications vous avez effectuées (images fixes, transcription, volume sonore) et demandez à la personne de regarder une fois avant de partager.

8. Livraison

  • Master 1920×1080, 30 fps (60 pour les mouvements d'interface denses), H.264 CRF 16–18, AAC 256k, −14 LUFS, −1 dBTP.
  • Vignette : la composition Thumbnail, lisible à environ 360px de large ; c'est aussi l'image 0 de la vidéo (de nombreuses applications prévisualisent la première image) et l'illustration de couverture MP4. Exportez un PNG et un JPG 1280×720 pour les plateformes avec vignettes personnalisées.
  • Déclinaisons à la demande : une coupe d'accroche de 15–20s, 1:1 et 9:16 (type empilé au-dessus de l'UI), une boucle silencieuse pour site web, des sous-titres SRT à partir des timings de mots de la VO.

Vidéos explicatives et sociales

Le même pipeline permet de créer de courtes vidéos explicatives (un article de blog, un document, une fonctionnalité ou une idée) pour LinkedIn et X. Ce qui change :

  • Les faits proviennent de la source, lue en intégralité. Les résumés d'outils de récupération web peuvent inventer ou fusionner des chiffres. Établissez une liste de vérification des faits à partir du texte original avant l'écriture du script.
  • Script pour tout le monde, pas pour les spécialistes. Une idée par écran, au maximum ~10 mots difficiles, une analogie quotidienne pour le concept central (par exemple, une évaluation devient « un test blanc vs le vrai test »), pas de jargon ni de noms de modèles, au plus deux chiffres arrondis, et terminez par quelque chose que le spectateur peut faire. « Précis mais trop technique » est la première remarque la plus probable.
  • Rythme : le contenu de chaque écran arrive en environ une seconde (entrées rapides, coupes rapides d'environ 0,12s sur le beat), puis tient 4–5s pour la lecture. Dans le modèle, entourez une scène avec SpeedCtx.Provider value={1.6} pour jouer une entrée conçue plus rapidement sans la retimer.
  • Format : 4:5 (1080×1350) pour le fil LinkedIn/X, 30–50s, musique seule. Le texte à l'écran est la légende (la plupart des vidéos de fil sont regardées en muet). L'image 0 est une couverture finie.
  • Look : correspondre à l'identité visuelle existante de la personne (ses carrousels, son site), pas au modèle produit.
  • Musique : pour les réseaux sociaux, les pistes percutantes de pub produit axées sur la batterie (kick clair, caisse claire, claps, basse profonde, commençant sur le beat un) battent généralement les ambiances douces. Générez 3 options et laissez la personne choisir à l'oreille ; les pistes de même tempo peuvent partager une grille de beats.
  • Livrez avec le post : texte du post, placement du lien, tags, texte alternatif, couverture et un moment de publication basé sur les propres données d'audience de la personne (où se trouvent les abonnés, quand leur réseau est éveillé).

Règles

  • Données fictives uniquement à l'écran ; pas de vraies personnes sauf si elles ont accepté.
  • Ne revendiquez pas de chiffres ou de capacités que le produit ne possède pas. Confirmez que tout « des centaines de… » ou statistique est vrai et approuvé.
  • Écrivez du contenu original. Ne réutilisez pas l'accroche, le slogan ou la signature d'une autre vidéo, et ne vous contentez pas d'une formule unique pour toutes les vidéos.
  • Restez dans la palette de la marque ; les scènes soudainement hors palette ressemblent à des bugs.
  • Gardez la musique sous la ligne de paiement (dip doux, jamais proche du silence).
  • Utilisez les marques officielles pour les logos tiers, jamais d'approximations.

Skills associés