FireAmun/remotion-dev-video-kit

Vidéo quotidienne : idée → recherche → approuver → construire → aperçu → rendu → Buffer

Lisez d'abord .claude/CLAUDE.md ; c'est la source de vérité (marque, règles vidéo, voix, zones de sécurité). Ce skill est le déroulement étape par étape. Il y a deux arrêts obligatoires pour l'approbation du créateur : la proposition (étape 2) et l'aperçu (étape 5). Ne les sautez jamais.

Les chemins ci-dessous utilisent <date> = aujourd'hui, YYYY-MM-DD (Asia/Riyadh). Dossier de l'épisode : public/episodes/<date>/.

Aspect et style : identiques pour chaque épisode

Chaque épisode doit ressembler à votre premier épisode - la série est reconnue par son apparence. Donc :

• Mêmes blocs de construction uniquement. Utilisez les décors existants, le personnage articulé, les poses, les mouvements, les accessoires et les objets. Ne modifiez pas src/theme.ts, les polices, les couleurs, l'art du personnage, la barre de chapitre, le style des légendes ou les effets sonores lors d'une exécution quotidienne. Les nouveaux visuels (un nouveau décor, pose, accessoire ou objet) sont une tâche distincte que le créateur demande ; quand il le fait, construisez-le dans le même style noir et or et ajoutez-le aux listes de ce skill.
• Même structure. 1080×1920, 30 ips, ≤ 60 s. Étiquette « EP NN » + barre des 7 chapitres en haut, légendes mot par mot en bas (mot parlé brillant, suivant atténué, un mot-clé doré par ligne). Une phrase = une scène ; le personnage joue chaque phrase ; les accessoires/objets atterrissent sur le mot parlé ; un changement visuel toutes les 1.5-3 s ; whoosh à chaque changement de scène.
• Mêmes temps forts. Accroche dans les 2 premières secondes → invite « Suivre » précoce (scène du bouton suivre) → chapitres de contenu → carte de fin avec votresite.com et la phrase de clôture exacte → bande-annonce « Demain : ».
• Même voix. Qwen3-TTS avec assets/voice/reference_energy.wav, même seed, ponctuation énergique.
• Même publication. 19:00 Riyadh, Instagram Reel (partager dans le fil) + TikTok + LinkedIn, étiquette générée par IA ACTIVÉE pour Instagram et TikTok (la voix est un clone IA ; l'étiquetage est honnête et protège le compte).
• Les numéros d'épisode comptent à partir de topics-log.json (suivant = dernier + 1).

1. Recherche

1. Lisez topics-log.json : ne répétez pas un sujet ; si le dernier épisode promettait un sujet « suivant », privilégiez-le.
2. Recherche web : 2 à 4 sources fiables (documentation officielle, README GitHub, articles, page du fournisseur). Vérifiez chaque chiffre, prix, version ou affirmation. Les éléments qui changent rapidement obtiennent « en date de ». N'inventez jamais de faits, de benchmarks ou de code.
3. Positionnement : un vrai développeur donnant un conseil utile, pas de battage médiatique et pas « regardez ce que l'IA a fait ». Cadrez les sujets d'outillage comme un conseil de développeur.

2. Proposition - ARRÊT pour approbation

Montrez au créateur, dans le chat, brièvement :

• Accroche (2 premières secondes) : un enjeu concret, un chiffre ou une affirmation. Pas de salutations.
• Tableau des scènes, une ligne par phrase (5-8 chapitres, ~12-16 scènes, 30-60 s au total, ~2.5-3.5 mots parlés/s) : # | chapitre | phrase | décor | ce que fait le personnage | objets atterrissant sur quel mot Chapitres : ACCROCHE, QUOI, POURQUOI C'EST IMPORTANT, COMMENT, ASTUCE, ESSAYEZ-LE, SUIVANT. Invite « Suivre » précoce juste après l'accroche. La dernière phrase est toujours exactement : « Visitez mon site web votresite.com et appuyez sur le bouton suivre pour en savoir plus. »
• Faits + sources (URLs), et tout ce que le créateur doit confirmer (opinions dites de sa voix, noms d'outils).
• Légendes pour Instagram/TikTok (ligne d'accroche, ligne d'enjeu, CTA, hashtags) et une légende LinkedIn distincte plus professionnelle (3 hashtags).

Attendez « go »/approbation ou des modifications. Appliquez les modifications et remontrez si elles sont substantielles.

3. Voix (tâche GPU ; rien d'autre sur le GPU pendant ce temps)

Écrivez public/episodes/<date>/narration.txt : un paragraphe par segment TTS (ligne vide entre), généralement 1 à 3 phrases par paragraphe. Écrivez-le tel qu'il est parlé : votre site orthographié comme parlé (ex. « mon site point com »), N P X create video, Qwen three T-T-S, pip install Qwen T-T-S, nombres en toutes lettres si ambigu. Utilisez ! sur les lignes d'accroche (le modèle lit la ponctuation comme de l'énergie).

.venv-qwen\Scripts\python scripts\tts_qwen.py public\episodes\<date>\narration.txt
.venv-qwen\Scripts\python scripts\timestamps.py public\episodes\<date>\narration.wav --hint "<5-10 termes techniques>"

• Voix = Qwen3-TTS 1.7B zero-shot, référence assets/voice/reference_energy.wav (+ transcription .txt). N'utilisez jamais un service vocal payant.
• Ne passez jamais tout le script à Whisper comme invite (il boucle) ; --hint avec seulement quelques termes.
• Vérifiez la longueur de la narration (doit être ≤ 60 s avec la queue de 1,5 s) et parcourez narration.json pour les erreurs d'écoute.
• tts_qwen.py nivelle automatiquement la voix (scripts/audio_level.py : compresseur → -16 LUFS → pic -1 dBFS). Les effets sonores dans src/components/Sfx.tsx sont réglés par rapport à ce niveau (~12 dB sous la voix) ; ne les augmentez pas. Si une narration a été réalisée d'une autre manière, exécutez d'abord scripts/audio_level.py dessus.

4. Construire l'épisode (données uniquement - pas de nouveau code de composant dans une exécution quotidienne)

Écrivez public/episodes/<date>/plan.json, puis :

.venv-qwen\Scripts\python scripts\build_episode.py public\episodes\<date>
npm run lint

Forme de plan.json (voir public/episodes/example/plan.json pour un exemple complet) :

{
  "episode": 2, "date": "<date>", "title": "...", "keywords": ["mot,", "..."], "tailMs": 1500,
  "sources": [{ "title": "...", "url": "https://..." }],
  "scenes": [{
    "chapter": "ACCROCHE",
    "display": "Phrase exactement comme les légendes doivent l'afficher (formes écrites : votresite.com, npx create-video).",
    "set": "stage", "setVariant": "", "zoom": 1.05,
    "actor": { "x": 540, "scale": 0.9, "facing": "right", "enterFrom": "right",
               "beats": [{ "atMs": 0, "pose": "talk" }, { "atWord": "build", "pose": "pointUp", "motion": "talk" }] },
    "items": [{ "kind": "label", "text": "...", "atWord": "camera!", "untilWord": "...", "x": 540, "y": 420 }]
  }]
}

• Le display de toutes les scènes concaténé doit être égal à la narration parlée mot pour mot (les formes écrites peuvent différer, ex. "Qwen3-TTS" pour "Qwen three T-T-S"). Une scène qui commence un paragraphe de narration est chronométrée à partir du TTS exactement ; les autres commencent sur leur premier mot parlé.
• Clés de timing : atWord / crossAtWord / untilWord (correspondance ignorant la casse et la ponctuation), occurrence pour les mots répétés, offsetMs pour ajuster, ou atMs simple.
• Poses (src/rig/poses.ts) : idle, talk, explain, shrug, wave, point, pointUp, pointViewer, celebrate, think, search, laptop, holdUp, thumbsUp, headScratch. Mouvements : talk (gestes suivant la voix), wave, shake, celebrate, search, type, still. Accessoires de main : magnifier, phone, trophy ; "laptop": true pour l'ordinateur portable tenu. facing: "left" le miroir (pointer à gauche sur les choses).
• Décors (src/sets/Sets.tsx) : stage, coderoom, desk (le bureau cache les jambes ; moniteur à droite), sky (setVariant "sunrise" ou "timelapse"), chalkboard (tableau à gauche), library, blueprint (dessin technique doré sur fond marine - utilisez-le pour COMMENT / « comment ça marche »), plain. Chaque scène a une poussière dorée flottante ("particles": false la désactive).
• Objets (src/scene/Items.tsx) : icon (caméra/timeline, crossAtWord), label (doré/clair), code (puce volante, fromX/fromY), window (terminal ou "style": "chalk", lignes avec kind command/code/output), counter, stamp, steps, waveform, calendar (de→à), banner, confetti, book, follow, end (url + cta, cadre art-déco), kinetic (gros mots s'écrasent un par un ; surlignez les mots en doré ; size, stagger frames - meilleur pour la ligne d'accroche), splitflap (statut de tableau d'aéroport, max 10 caractères, label optionnel - meilleur pour les chiffres d'accroche).
• Les cartes sont en verre dépoli (glassmorphisme) automatiquement. Aperçu du kit de style : la composition StyleTest.
• Remplissez les objets avec du contenu réel (code réel, sortie de terminal réelle, chiffres réels), jamais de remplissage.

Règles de mise en page apprises à la dure (1080×1920) :

• Barre du haut (étiquette EP + chapitres) se termine ~y 215 : le haut des objets doit rester en dessous de ~230 (rappelez-vous que le zoom de la scène pousse les objets vers le haut).
• Sol y 1440 ; légendes à y 1490 ; gardez des marges latérales de 60 px.
• Échelle de l'acteur 0.9 → haut de la tête ≈ y 570 ; 0.8 → ≈ 670 ; 0.7 → ≈ 760. Les grands objets (window, waveform, end card) nécessitent un acteur 0.58-0.8 ou l'acteur sur le côté (x≈790, faisant face à gauche).
• Les étiquettes font ~38 px par caractère à la taille par défaut : gardez-les courtes ou elles sortent de l'écran.
• Ne couvrez jamais son visage avec un objet ; placez les étiquettes à côté ou sous les fenêtres.

5. Aperçu - ARRÊT pour approbation

1. Studio : npx remotion studio → http://localhost:3000/Episode (il peut déjà être en cours d'exécution).
2. Rendez une image fixe par scène (échelle 0.4) et vérifiez-les d'abord vous-même : chevauchements, texte hors écran, visage couvert, timing des objets. Corrigez, reconstruisez, revérifiez.
3. Montrez au créateur le lien Studio (et mentionnez tout ce que vous n'avez pas pu vérifier, ex. prononciation). Attendez l'approbation ou les commentaires par capture d'écran - corrigez exactement ce qu'il souligne.

6. Rendu

npx remotion render Episode out/<date>/video.mp4 --codec=h264 --crf=18

(Définissez la prop par défaut episodeFile de la composition Episode dans src/Root.tsx sur le nouveau dossier, ou passez --props='{"episodeFile":"episodes/<date>/episode.json","episode":null}'.) Vérifiez : ≤ 60 s, 1080×1920, 30 ips, a du son, et la voix est clairement plus forte que tous les effets sonores (voix ≈ -16 LUFS). Écrivez out/<date>/caption.txt (IG/TikTok) et out/<date>/caption-linkedin.txt.

7. Brouillons Buffer (le créateur attache la vidéo)

L'API de Buffer n'accepte les vidéos que depuis une URL publique, créez donc des brouillons déjà programmés pour 19:00 Asia/Riyadh ; le créateur ouvre chaque brouillon dans Buffer, attache out/<date>/video.mp4, et appuie sur Planifier.

• Organisation <votre id d'organisation Buffer> (obtenez-la avec le Buffer MCP get_account ; le plan gratuit permet 10 publications planifiées).
• Chaînes : Instagram <id>, TikTok <id>, LinkedIn <id> (obtenez-les avec list_channels).
• create_post avec mode: "customScheduled", dueAt: "<date>T19:00:00+03:00", saveToDraft: true, schedulingType: "automatic".
  • Instagram : metadata.instagram = { type: "reel", shouldShareToFeed: true, isAiGenerated: true }.
  • TikTok : metadata.tiktok = { title: "<accroche courte>", isAiGenerated: true } (la voix est un clone IA - divulguez toujours).
  • LinkedIn : légende professionnelle, pas de métadonnées nécessaires.
• Si 19:00 est déjà passée, demandez l'heure au créateur au lieu de deviner. Ne publiez ou ne planifiez jamais quoi que ce soit sans son accord.

8. Conclusion

• Ajoutez l'épisode à topics-log.json (date, épisode, titre, sujets, promesse « suivant », sources).
• Dites au créateur : le chemin de la vidéo, les trois brouillons Buffer et qu'il doit attacher la vidéo, et le sujet promis du prochain épisode.