fabrica-videos-reels

/fabrica-videos-reels — du script au MP4

Skill de la Fábrica de Vídeos Agêntica (voir la skill fabrica-videos). C'est le chemin "script d'abord" : le client approuve le script et le storyboard avant d'enregistrer. S'il a déjà enregistré sans script, utilisez la skill fabrica-videos-rapido.

Parlez en français, dans un langage simple (celui qui demande la vidéo ne programme presque jamais). Montrez la progression avec des aperçus rendus, pas avec du code. Avant d'écrire du code Remotion, lisez CLAUDE.md (règles du design system, où se trouve chaque fichier et les commandes) et, si les skills officielles de Remotion sont installées, la remotion-best-practices. L'exemple complet et approuvé est la vidéo Exemple : scripts/exemple*.{md,json} + src/videos/Exemple.tsx. Copiez sa structure.

Toutes les commandes s'exécutent dans le terminal, à la racine du projet. Dans les tableaux ci-dessous, TRAVAIL = le dossier travail (hors git).

0. Découvrez à quelle étape la vidéo se trouve

Choisissez un slug court (ex. : mon-idee) et voyez ce qui existe déjà :

Il existe…	Alors allez vers
rien	1. Script
scripts/<slug>.md approuvé, sans -animations.md	2. Storyboard
storyboard, sans src/videos/<Nom>.tsx	3. Construire
composition prête + nouvel enregistrement (il indique où il l'a sauvegardé)	4. Enregistrement
TRAVAIL\out\<slug>-final.mp4	5. Livraison

Dites en une ligne à quelle étape vous êtes et suivez. Les étapes 1 et 2 sont des conversations : proposez, écoutez, affinez ; n'avancez qu'avec son approbation.

1. Script → scripts/<slug>.md

• Construisez le script ici, en conversation avec le client. Demandez : thème (ou liens/vidéo de référence), pilier (un des thèmes de la marque), durée cible (30–60 s ≈ 2,5 mots/s).
• Structure identique à scripts/exemple.md : blocs avec début estimé, parole, carte ; dictionnaire d'analogies si le public est novice ; texte continu à enregistrer ; captures d'écran nécessaires ; faits vérifiés avec liens.
• Voix (ajustez à la personne ; ses règles restent avec la marque) : première personne, phrases courtes, chiffres concrets ; accroche dans les 3 premières secondes ; jamais "révolutionnaire"/"l'avenir est arrivé" ; termine par une question + CTA. L'alarme devient une question, pas une affirmation. N'inventez pas de nouvelle.

2. Storyboard → scripts/<slug>-animations.md + scripts/<slug>.ancres.json

• Par battement (changement visuel toutes les 2–3 s) : temps, phrase, ce qui apparaît en haut (zone 1080×960).
• Réutilisez les pièces de src/pecas/ avant d'en créer de nouvelles : ReseauNeuronal + Bistouri (le "cerveau" de l'IA), GrilleConnexions, BouclePensee, Loupe, BarreCompteur, EchangeCaptures, TexteBarre (modes barrer/ajouter), OeilBarre, LigneVersions ; helpers TitreScene, Halo, EtiquetteMono, apparait dans util.tsx.
• ancres.json : { "scene": "premiers mots prononcés dans celle-ci" } dans l'ordre de la parole. Évitez les noms propres dans les ancres (Whisper se trompe : "Qwen" → "quen", "Claude" → "clou", "OpenAPI" → "OpenAI", et aussi "Vercel", "MCP", "JSON"). Les battements internes d'une scène (ex. : le moment de barrer) deviennent aussi des ancres.

3. Construire → src/videos/<Nom>.tsx

1. Copiez le squelette de Exemple.tsx : schéma zod (pilier, video, cadrage, montrerGuide, nom, poste, captures, fin, temps), EcranDivise à l'extérieur, une <Sequence> + <Scene> (fondu de 6 images) par scène, Fin de 2 s à la fin. Enregistrez dans src/videos/index.tsx, dans <Folder name="Videos"> avec calculateMetadata (durée = dureeParole + 2 s).
2. Chaque scène est un composant propre qui appelle useCurrentFrame() (n'appelez jamais de hooks dans des fonctions d'un objet/tableau dans le composant parent : l'image sort erronée). Importez useCurrentFrame, useVideoConfig et Sequence de src\horloge.tsx, pas de remotion : les images sont écrites à 30 par seconde et l'horloge s'occupe du reste lorsque la vidéo sort à 60.
3. Les nouvelles pièces vont dans src/pecas/ (génériques, avec props), en suivant les jetons de src/animations/theme.ts.
4. Captures d'écran et images de la pièce (petits fichiers) : sauvegardez dans public\<slug>\ de ce dossier et exécutez npm run preparer.
5. Parole provisoire pour tester avant l'enregistrement : enregistrez le texte continu dans scripts/<slug>.parole.txt (UTF-8) et exécutez npm run parole -- <slug> scripts\<slug>.parole.txt → TRAVAIL\public\apercu\parole-<slug>.mp4 (voix système, 1080×960). Ensuite npm run sous-titrer + npm run battements (section 4) pour générer src/videos/<slug>.temps.json, avec la prop video = "apercu/parole-<slug>.mp4".
6. Vérifiez : npx tsc et la feuille de contact avec le guide activé : npm run feuille -- <Id> src\videos\<slug>.temps.json → TRAVAIL\out\feuille-<Id>.jpg (1 image de la fin de chaque scène). Regardez l'image : rien en rouge (haut 270, bas 320, côtés 96, boutons à droite), rien de superposé, les textes tiennent.
7. Rendez l'aperçu : npm run renderiser -- <Id> "travail\out\apercu-<slug>.mp4" apercu (léger, 540×960 ; dites que c'est un aperçu) et envoyez-le-lui.

4. Enregistrement réel → synchroniser et cadrer

1. Trouvez le nouvel enregistrement (demandez où il l'a sauvegardé). Copiez l'original dans TRAVAIL\originaux\ (ne déplacez ni modifiez jamais) et convertissez : npm run convertir -- "travail\originaux\<fichier>" <slug> → TRAVAIL\public\enregistrement-<slug>.mp4 (en portrait, H.264, couleurs normales, à la résolution et aux images par seconde de l'enregistrement : 4K à 60 reste 4K à 60, et la vidéo finale sort également ainsi. Le HDR est l'exception : il devient SDR, et le convertisseur prévient. Avec jusqua=12 à la fin de la commande, convertissez seulement les 12 premières secondes, pour un test rapide). Le convertisseur vérifie le fichier avec ffprobe et, s'il s'agit d'un 4K HDR (iPhone récent), traite le HDR avec zscale + tonemap (sans cela, la couleur sort délavée). Lors du premier enregistrement HDR de chaque session, extrayez une image du converti et montrez-la-lui pour comparer avec le téléphone.
2. npm run sous-titrer -- "travail\public\enregistrement-<slug>.mp4" (en arrière-plan, ~1–2 min) → sous-titres/enregistrement-<slug>.json. Si l'enregistrement comporte de longues pauses, des erreurs ou des prises répétées, nettoyez avant de continuer (la skill fabrica-videos-coupe) : à partir de là, la vidéo est enregistrement-<slug>-propre.mp4 et la transcription est celle de la vidéo propre.
3. npm run battements -- sous-titres\enregistrement-<slug>.json scripts\<slug>.ancres.json src\videos\<slug>.temps.json "<vidéo>". S'il manque une ancre, lisez la transcription et ajustez la phrase. S'il a changé le sens d'une parole, adaptez l'animation (ex. : "pas seulement par une personne" → TexteBarre mode="ajouter" au lieu de barrer) et dites-le-lui.
4. dureeParole ≤ durée de la vidéo (sinon il reste un instant sans image en dessous) : avec la vidéo à la fin de la commande ci-dessus, battements limite déjà tout seul ; sans elle, corrigez à la main.
5. Cadrage (le visage doit rester entre la bande du sous-titre, y 985–1125, et la zone basse, y 1600) : testez le recadrage à ~12 moments avec ffmpeg -ss <t> -i <vidéo> -frames:v 1 -vf "crop=1080:960:0:<offset>" "travail\out\cadr-<t>.png" et regardez chaque image. cadrage = "50% <offset/960*100>%" (pour source 1080×1920). Tête entière dans le cadre toute la vidéo. Le menton peut toucher la zone basse ; la bouche jamais. Testez même lorsqu'il s'approche de la caméra et utilisez le plus grand offset où le haut de la tête ne sort jamais.
6. Vérifiez la bande de nom : si elle couvre le visage, elle reste dans la moitié supérieure (c'est déjà le comportement par défaut de EcranDivise).
7. Rendu final en arrière-plan : npm run renderiser -- <Id> "travail\out\<slug>-final.mp4" ; vérifiez durée/résolution avec ffprobe et envoyez la vidéo.
   • La qualité qui entre est celle qui sort. Le renderiser lit la résolution et les images par seconde de l'enregistrement et le final sort à ces valeurs : enregistré en 4K à 60, sort en 2160×3840 à 60. N'utilisez pas npx remotion render directement pour le final : il sort toujours en 1080×1920 à 30.
   • Réduisez seulement avec paramètre, et seulement lorsqu'il le demande dans l'appel de la skill (ex. : /fabrica-videos-reels <slug> 1080p) : 1080p réduit la résolution et 30fps réduit les images par seconde (npm run renderiser -- <Id> "<sortie>.mp4" 1080p 30fps). Sans paramètre, ne réduisez pas.
   • Le HDR n'entre pas dans la règle : Remotion ne dessine qu'en couleurs normales. Si l'enregistrement est venu en HDR, dites-lui que le final sort en SDR.
   • Le rendu en 4K à 60 a huit fois plus d'image à dessiner qu'en 1080p à 30. Prévenez-le à l'avance que cela va prendre du temps.

5. Livraison

• Terminez par la skill fabrica-videos-livraison (vérification technique, couverture, feuille d'images et NOTES.md). Les points ci-dessous sont propres à ce flux.
• S'il doit sous-titrer ensuite, dans une application de montage, expliquez où mettre le sous-titre : juste en dessous de la barre de division (dans la couleur du pilier) (bande verte du guide), au maximum 2 lignes. S'il préfère le sous-titre déjà incrusté dans la vidéo, voir la skill fabrica-videos-sous-titres (demandez SousTitreIncruste, position bande).
• Prévenez des noms que la transcription a tendance à mal orthographier.
• Description de la publication : S'il le demande, écrivez une suggestion dans NOTES.md (accroche, 2–3 phrases avec les chiffres exacts, une question + le même CTA parlé, source, jusqu'à 3 emojis, 4–6 hashtags, sans exagérations que l'étude ne soutient pas).
• Enregistrement dans livraisons\AAAA-MM-JJ-<slug>\ : NOTES.md (Id de la composition, commandes utilisées, chemin de l'enregistrement et du final, durée, cadrage, ce qu'il a modifié dans la parole), couverture.jpg et la feuille de contact. La vidéo finale reste dans TRAVAIL\out\.
• Après approbation, retirez l'enregistrement de TRAVAIL\public\ et stockez-le dans travail\archive\AAAA-MM-JJ-<slug>\ (Remotion copie tout le dossier public à chaque rendu ; un dossier plein rend tout lent). Notez le nouveau chemin dans NOTES.md.
• Ne publie, ne planifie ni n'envoie jamais. Celui qui publie, c'est le client.

Pièges déjà résolus (ne répétez pas)

• Halo : utilisez <Halo> (div avec filter: blur), pas box-shadow sur un élément transparent (devient une "pilule" sombre).
• Mise en évidence de plusieurs mots : *10 tâches* doit être traité comme un extrait, pas mot par mot (voir TexteImpact/Surligner).
• Les étiquettes centrées sur des points (ex. : v1) ont besoin d'un jeu supplémentaire pour ne pas envahir la marge de 96 px.
• PowerShell : le JSON direct dans --props='{...}' perd les guillemets. Enregistrez dans un fichier et utilisez --props=fichier.json.
• Un enregistrement ou une vidéo dans le projet va finir dans le dépôt : toujours dans TRAVAIL.
• Le port du Studio est le 3210.

Séries (plusieurs reels sur le même sujet)

• Un slug par épisode (<série>-<n>-<sujet>) et, si le client le demande, une session par épisode. Les sessions en parallèle partagent le même dossier : chacune ne touche qu'aux fichiers de son slug ; dans src/videos/index.tsx, relisez avant d'éditer et ajoutez seulement votre <Composition> ; ne modifiez pas les pièces partagées.
• Les faits et décisions qui valent pour tous (un nombre qui a changé, le CTA, le pilier) doivent être transmis à toutes les sessions immédiatement. Sans cela, chaque vidéo aura une règle différente.
• Écran final de série : src/pecas/EcranFinalReels.tsx à la place de la Fin, 4 s après la parole (durée = dureeParole + ecranFinalSec). Deux espaces 9:16 vides (400×711) qu'il recouvre avec des reels dans l'application de montage : un pour le chapitre suivant (le dernier revient au premier), un autre pour le reels à l'origine de la série.

Sons (optionnel, seulement s'il le demande ou s'il a déjà approuvé)

• Quatre sons courts dans un dossier de sons à l'intérieur de public (apportez les vôtres, avec une licence claire : le dépôt n'inclut pas de sons) : ouverture.mp3 (riser sur l'accroche, volume ~0,35), touche.mp3 (à chaque élément qui entre, ~0,3), whoosh.mp3 (au virage/zoom, ~0,2), blip.mp3 (quand arrive le nombre ou la réponse finale, ~0,3).
• Chaque son est une <Sequence> courte avec <Audio> de @remotion/media, attachée aux mêmes temps que les scènes ; le chemin et le volume sont dans les props du schéma (chaîne vide désactive).
• Après le rendu, mesurez le pic avec ffmpeg -i <vidéo> -af volumedetect -vn -f null - (doit rester en dessous de 0 dB et les sons en dessous de la voix). Vous ne pouvez pas entendre : dites-lui que la vérification auditive lui appartient.

Leçons d'enregistrement

• Celui qui enregistre sans script a tendance à parler phrase par phrase, avec de longues pauses, à s'échauffer avant de commencer, à répéter la phrase qui ne lui plaît pas et à sortir du cadre à la fin. La skill fabrica-videos-coupe résout tout cela.
• Il est fréquent que la personne modifie sa parole en enregistrant. Lisez la transcription entière avant de vous fier aux ancres et adaptez l'écran et le sous-titre de la publication à ce qui a été réellement dit.
• Lorsque la parole est plus courte que le script, les détails et les chiffres qui en sont sortis restent écrits à l'écran.
• Lorsque vous modifiez un fait (ex. : un nombre qui a été mis à jour), modifiez-le partout : parole, écran, titre, sous-titre de la publication et couverture.