Création de vidéos promotionnelles en code
Aperçu
Un film promotionnel réalisé en code (Remotion : composants React rendus image par image). Il fonctionne selon quatre principes :
- Une carte de synchronisation unique coordonne tout. L'image, la caméra, la musique et les effets sonores lisent tous des repères nommés, de sorte que modifier le timing d'un élément les modifie tous.
- Choisir avant de monter. Le directeur entend et voit les options avant que le film ne change.
- Les prévisualisations avant les versions finales.
- Chaque affirmation est fidèle au produit.
Règles maison d'abord : lisez les propres règles du dépôt vidéo avant toute chose : son README, son CLAUDE.md ou un fichier house-rules.md à la racine du dépôt. Elles remplacent les valeurs par défaut ci-dessous. Le fichier house-rules.example.md dans ce dossier est un modèle pour en rédiger une.
Configuration d'un nouveau film
- Un film par branche ou répertoire de travail, dans un dépôt dédié aux vidéos, jamais dans l'application produit. Chaque film possède son propre dossier :
src/videos/<nom>/. - Copiez le dossier
templates/de cette compétence dans ce dossier :sections.ts: la carte de synchronisation,HITS,TRACK_BPMfilm-camera.tsx: la caméra 2.5Dshots.ts: la liste des plansFilm.tsx: le squelette de la composition, avec l'enregistrementRoot.tsxdans son en-tête
- Copiez
templates/render.shetscripts/*.pydans le dossierscripts/du dépôt. - Dépendances, épinglées à une version exacte ensemble :
remotion,@remotion/cli,@remotion/motion-blur. Pour les scripts audio :ffmpeg, plusnumpyetsoundfile. - Une composition génère les deux formats à partir d'une propriété
format(horizontal 1920x1080, vertical 1080x1920). Chaque format est mis en page indépendamment et n'est jamais letterboxé.
Flux de travail
- Cahier des charges du storyboard (utilisez la compétence superpowers:brainstorming si elle est installée). Écrivez-le dans
docs/.../YYYY-MM-JJ-<nom>-design.md. Vérifiez chaque affirmation à l'écran par rapport au code produit et aux fonctionnalités en direct, et formulez-la comme le produit le fait. - Casting board avant toute édition du film. Présentez les voix (avec les lignes lues à voix haute), les sons de frappe, plusieurs options musicales, et les brouillons d'apparence ou de personnage, chacun avec un code (A1, B4, M1…). Rendez les brouillons visuels sous forme de petites compositions de board, publiez la page en privé, et attendez les choix du directeur. Ne choisissez jamais une voix, une piste ou une apparence en silence.
- Construction.
- La copie et le timing résident dans la configuration.
- Les scènes, plans et sons référencent des noms
HITS, jamais des nombres bruts. - Travail de caméra : lisez
camera.md.
- Prévisualisation en 720p (
scripts/render.sh <Comp> <format> preview <nom>-preview-vN-720p). Rapportez ce que vous avez vérifié, ce que vous n'avez pas pu tester, et tout ce que vous avez modifié au-delà de la demande. - Versions finales uniquement après approbation : taille réelle, les deux formats. Les longs rendus échouent si la machine se met en veille, vérifiez donc l'alimentation d'abord.
- Commitez sur la branche du film. Fusionnez ou poussez uniquement sur demande. Les films antérieurs doivent rester inchangés.
Règles audio
| Règle | Pourquoi |
|---|---|
Rendre l'image muette, puis un fichier WAV séparé --codec=wav, puis scripts/mux.py (-15 LUFS avec un limiteur). | L'AAC intégré de Remotion retarde toute la bande sonore de 43 ms. |
La musique est sous licence commerciale ou générée, et chaque fichier est enregistré dans un CREDITS.md. | Certains packs d'effets sonores "gratuits" ne sont pas sous licence pour un usage commercial. |
Pour ajuster une piste choisie : scripts/beatgrid.py track [bars] [arc] donne le BPM et le temps fort. Définissez TRACK_BPM, puis coupez la piste avec music-edit.py (mesures entières, fondu enchaîné sur le temps fort) ou fit-track.py (une fenêtre droite). | Le film s'adapte à la piste, pas l'inverse. |
Les voix proviennent uniquement d'un TTS avec une licence commerciale (Kokoro-82M est sous licence Apache-2.0). N'utilisez jamais macOS say. | La licence de say est personnelle et non commerciale. |
| Les effets sonores sont générés de manière déterministe. Ajoutez chaque nouveau son à la fin avec son propre PRNG. | Sinon, chaque fichier ultérieur change. |
N'appelez jamais Math.random() dans un rendu. Utilisez hash() de film-camera.tsx. | Une image doit être rendue de manière identique à chaque fois. |
Assurance qualité avant toute remise
- Vérification de type.
- Niveau de bruit environ -15 LUFS et pic réel sous -1 dBTP (
ffmpeg -af ebur128). Le pic du WAV brut reste sous 0,99, donc rien n'écrête. - Les effets sonores arrivent sur leurs images repères.
- Tout code QR se décode à la fois en 1080p et en 720p.
- Rendez des images fixes de chaque section modifiée dans les deux formats (Remotion
renderStill) et regardez-les vous-même. Les agents de révision ratent les bords coupés, et une révision par un petit modèle rapide n'est pas une révision valide.
Erreurs courantes
| Erreur | Correction |
|---|---|
| Animation liée à une image, un temps ou une seconde brute | Ajoutez un repère nommé dans sections.ts et référencez-le. |
| Un roulis ou une inclinaison de caméra qui fuit dans les plans suivants | Les clés se propagent, donc réinitialisez le champ (roll: 0). |
| Versions finales rendues avant approbation | Envoyez d'abord une prévisualisation en 720p. |
| Une voix, piste ou apparence que le directeur n'a jamais entendue ou vue | Mettez-la d'abord sur le casting board. |
| Un mp4 à passage unique avec audio | Image muette, puis WAV, puis mux. |
Travail temporaire dans /tmp pour un film de plusieurs jours | Le système nettoie. Utilisez un vrai dossier de répertoire de travail. |
Commandes Shell avec $(...) ou boucles refusées en mode automatique | Mettez la logique dans un fichier de script. |