TYY123-as/remotion-beat-video

Pipeline Remotion de vidéos courtes au rythme (beat video)

Objectif : À partir d'un sujet donné et d'une musique de fond, produire une vidéo finie de 88–90 secondes / 16:9 / sans voix off / sous-titres bilingues chinois/anglais / chaque scène coupée sur un temps fort de la phrase musicale, ainsi que trois variantes de couverture, un dossier de publication, une liste de vérification des faits. Le tout est du code : modifier des sous-titres, c'est changer des chaînes, un nouveau rendu prend environ 35 minutes.

Quand utiliser

• « Fais une vidéo de culture générale / d'analyse de jeu de société sur ce sujet »
• « Utilise telle musique pour faire une vidéo au rythme »
• « Transforme ce passage de roman en vidéo » (univers fictif, voir references/fact-check.md)
• Vous avez besoin d'une livraison complète : vidéo finie + couvertures + texte de publication + vérification des faits

Quand ne PAS utiliser

• Vous voulez une voix off (ce pipeline raconte l'histoire avec des sous-titres, pas de TTS ; si vous voulez une voix off, il faut d'abord générer l'audio TTS puis le synchroniser)
• Vous voulez un montage avec des séquences réelles ou AIGC (ce pipeline utilise uniquement des composants SVG)
• Vous voulez seulement du texte et des images, pas de vidéo

---

〇、ADN stylistique (à lire d'abord, tout est validé par des tests)

Dimension	Règle	Pourquoi
Format	1920×1080 / 30fps (version verticale via Composition séparée)	Le compte est verrouillé sur 16:9, les données montrent que c'est plus efficace
Durée	88–90 secondes (≈42 mesures)	Correspond à la fenêtre de test « 60–90s par épisode »
Son	Pas de voix off, BGM + effets sonores synthétisés	Exigence stylistique ; évite aussi le coût de synchronisation TTS
Sous-titres	Deux lignes, chinois/anglais, chinois ≤22 caractères, chaque phrase reste ≥2,2 secondes	Style du compte (la recommandation générale pour Douyin est une seule langue ; c'est un choix du compte)
Accroche	La 1ère seconde = une phrase complète créant un conflit + un objet concret	Le taux de rebond à 2 secondes est le principal point faible
Narration	Une personne + un problème + une chaîne de cause à effet	Éviter « encyclopédie de concepts » et « montage de groupe »
Structure	Accroche → titre → règles → piège → contre-attaque → retournement → révélation → conclusion	Voir references/script-template.md
Rythme	Chaque scène coupée sur un temps fort ; l'action clé tombe sur le temps fort	Le beat vient de la structure musicale, pas d'un alignement manuel
Visuel	Fond sombre + textures métal/bois/or + grandes polices + quelques étiquettes	Lisibilité sur un écran de téléphone
Zone de sécurité	Éléments de la scène y ≤ 850 ; sous-titres y≈870–1000 ; titre en haut à gauche y 50–95	C'est l'endroit où les erreurs sont les plus fréquentes
Fin	Doit donner une liste à capturer (point de favori) + une question qui incite à interagir	Le taux de favoris est la plus grande faiblesse
Rigueur	Univers fictifs doivent mentionner « illustration à titre indicatif » ; faits marqués par niveau	Voir references/fact-check.md

---

一、Processus en huit étapes (à exécuter dans l'ordre, ne pas sauter)

Étape 1 : Lancement (sujet + confirmation)

1. Si l'utilisateur n'a pas de sujet, proposez d'abord 3 candidats (chacun précisant : noyau en une phrase / accroche de la 1ère seconde / pourquoi ça peut être illustré / point de favori / risque), et laissez l'utilisateur choisir.
2. Les candidats doivent être vérifiés avant d'être soumis : pour un univers fictif, vérifiez qu'un nom de chapitre ou d'entrée existe ; pour un sujet de connaissance, vérifiez une source.
3. Une fois le choix fait, récupérez les documents originaux du sujet (de préférence le texte original ; si c'est une synthèse de seconde main, marquez la hiérarchie des sources, cf. étape 8).

Étape 2 : Piste audio et battements (détermine tout le timing)

# ① Extraction audio (mp4/mp3 ; s'il n'y a pas de ffmpeg système, utilise le binaire d'imageio-ffmpeg)
python scripts/extract_audio.py input.mp4 work/            # → work/audio.f32 + work/music.mp3
# ② Analyse des battements / temps forts / sections / tonalité
python scripts/analyze_beats.py work/audio.f32 src/beats.json
# ③ Analyse de l'énergie, sélection de la fenêtre (étape cruciale)
python scripts/scan_energy.py src/beats.json work/audio.f32 --seconds 89

• La sortie donne : START_BAR / END_BAR, graphique d'énergie par mesure, pourcentage de la fenêtre occupé par le silence.
• Placez le retournement après le premier temps fort qui suit le silence — c'est la seconde la plus précieuse de toute la vidéo.
• Ne coupez pas la fin de la décroissance finale (cela laisserait une queue morte).
• Si une chanson a déjà été utilisée par la série, privilégiez la seconde moitié non utilisée pour éviter la répétition visuelle.

Étape 3 : Écrire le script (src/script.ts)

• Chaque scène déclare bars (nombre de mesures qu'elle occupe), la somme des bars de toutes les scènes doit être égale à END_BAR − START_BAR (sinon placeScenes redimensionnera proportionnellement et émettra un avertissement).
• Les sous-titres sont écrits dans subs : {zh, en, at}, at étant le numéro du temps fort dans la scène (peut être un demi-temps comme 4.5). Une phrase occupe confortablement 4–5 temps.
• Les effets sonores sont écrits dans cues : {id, beat, sfx, vol, impact} ; impact:'big' = flash blanc + tremblement d'écran + dispersion chromatique + atténuation de la musique pendant 40 images.
• Budget rythme : nombre de phrases × 2,5–3 secondes ≈ durée totale. Pour 89 secondes, environ 30 phrases.

Étape 4 : Composants visuels et scènes (src/*/kit.tsx + src/*/scenes.tsx)

• Écrivez d'abord tous les composants avant d'écrire les scènes : un sujet a généralement 6–10 composants (exemple : boîte en fer/cadenas/clé/déchiqueteuse/micro-ondes/silhouette de personnage/statue/lampe/billet de loterie/comptoir/pièce de monnaie).
• Tous les composants sont en SVG pur, avec des coordonnées fixées sur 1920×1080, réutilisés via translate/scale.
• Le composant de la scène se contente de disposer les composants sur les temps forts : const bf = (n) => beatFrame(scene, n), pour les entrées, utilisez pp(f, bf(n), 8) pour une progression avec easing.
• Liste de vérification dans references/visual-kit.md.

Étape 5 : Configuration du projet

Un projet contient plusieurs vidéos : src/<episode>/{script.ts,timeline.ts,fx.tsx,kit.tsx,scenes.tsx,Main.tsx}, Enregistrez un deuxième <Composition> dans src/Root.tsx, chacun avec son propre beats.json et music.mp3.

• La deuxième vidéo doit avoir sa propre structure de battements (le Shell/ImpactFlash de fx.tsx doit utiliser le cueFrame de cette vidéo, sinon les impacts seront décalés).
• L'audio utilise <Audio startFrom={OFF}>, le contenu global utilise <Sequence from={-OFF}>, ainsi à l'intérieur des scènes, le temps est toujours compté en « images musicales ».
• Voir references/pipeline.md.

Étape 6 : Vérification sur image fixe (ne pas passer si échec)

node <node> node_modules/@remotion/cli/remotion-cli.js still <Comp> out/s1.png --frame=<image médiane de la scène>

Rendez une image par scène, vérifiez visuellement quatre choses :

1. Les sous-titres ne chevauchent-ils pas les éléments de la scène (le plus courant)
2. Chevauchement d'éléments (étiquette sur étiquette, étiquette sur graphique)
3. Zone de sécurité (éléments y ≤ 850)
4. Lisibilité du texte sur un écran de téléphone (chinois ≥24px, titre principal ≥120px)

Étape 7 : Rendu et auto-vérification de la vidéo finie

node <node> node_modules/@remotion/cli/remotion-cli.js render <Comp> out/<nom>.mp4 --codec=h264 --crf=18 --concurrency=6
python scripts/check_mp4.py out/<nom>.mp4      # durée / nombre de pistes / résolution / paramètres audio

check_mp4.py n'a pas besoin de ffprobe : il analyse directement les boîtes mp4, vérifie la présence des pistes vidéo + audio (vide + soun), que la durée correspond, 1920×1080, AAC 48kHz.

Étape 8 : Livraison

python scripts/make_covers.py --src out/<image fixe>.png --crop x0,y0,x1,y1 \
    --title Titre principal --kicker Sous-titre --sub Une phrase --out-prefix out/Couverture_XXX

Livrez les quatre éléments :

1. Vidéo finie mp4 (copiée dans la racine du répertoire de travail, nommée avec le sujet)
2. Trois variantes de couverture (16:9 / 3:4 / 9:16) — ne jamais utiliser une image automatique
3. Dossier de publication (texte principal + commentaire épinglé + propositions de couverture + tableau de décision 24h), modèle dans references/cover-and-publish.md
4. Liste de vérification des faits (obligatoire pour les univers fictifs) + Storyboard (tableau des codes temporels)

---

二、Règles absolues (toutes découvertes par des tests)

1. La 1ère image n'est pas un générique, c'est une accroche : une phrase complète créant un conflit + un objet concret (« L'otage est enfermé dans le micro-ondes, le compte à rebours tourne »).
2. Zone de sécurité des sous-titres : les éléments de la scène sont tous placés à y ≤ 850, les sous-titres entre 870–1000. Lors de la vérification sur image fixe, vérifiez d'abord ce point.
3. Une phrase de sous-titre ≤22 caractères, durée ≥2,2 secondes ; une ligne principale en chinois + une ligne de traduction en anglais.
4. La fin doit pouvoir être capturée : une liste en trois étapes/trois signaux + « Je vous suggère de la sauvegarder » ; une fin qui ne fait que donner une émotion n'obtiendra pas de favoris.
5. Silence = point de retournement : scan_energy.py vous indiquera à quelle mesure se trouve le silence, placez le retournement le plus fort juste après.
6. Points d'impact forts : impact:'big' déclenche un flash blanc + un tremblement d'écran + une dispersion chromatique + une atténuation de la musique ; 5–8 fois par vidéo suffisent, plus provoque l'insensibilisation.
7. Pas de glissement uniforme : toutes les entrées utilisent un easing (Easing.out(cubic)), la sortie des étiquettes comprend un léger décalage + zoom.
8. Polices : n'utilisez pas de « polices en sous-ensemble rognées sur l'ancien texte » (les nouveaux textes risquent de manquer de caractères) — écrivez directement la pile de polices système 'Noto Sans SC','Microsoft YaHei'.
9. Le dossier public/ est copié intégralement : ne conservez que les effets sonores utilisés (dans cet exemple, 148 → 16, chaque rendu économise 60 Mo de copie).
10. L'ETA de Remotion est surestimé au début : ne paniquez pas devant « 3 heures restantes » ; en réalité, le rendu se stabilise à environ ~1,35 image/s, soit environ 35 minutes pour 2700 images.
11. Trois niveaux de marquage pour les univers fictifs : texte original / synthèse du lecteur / ma supposition — dans la vidéo, n'écrivez que ce qui est commun aux deux premiers niveaux, le reste va dans la liste de vérification.
12. N'écrivez pas de nombres absolus dans la vidéo (« quatre animaux du zodiaque » → « plusieurs animaux du zodiaque »), n'écrivez pas de numéro de chapitre absolu (« Chapitre 359 » → « Autour du Chapitre 359 »).

---

三、Convention de répertoire

<project>/
├── public/music.mp3              # BGM de cette vidéo
├── public/music.f32(+.json)      # Pour l'analyse des battements (peut être supprimé)
├── public/sfx/*.wav              # Effets sonores synthétisés selon la tonalité
├── src/beats.json                # Sortie de analyze_beats
├── src/script.ts                 # Tableau général du texte (pour modifier le contenu, ne modifiez que ce fichier)
├── src/timeline.ts               # Mapping scène → temps fort + OFF/TOTAL
├── src/Root.tsx                  # Enregistrement du Composition
├── src/fx.tsx                    # Tremblement d'écran/flash blanc/dispersion chromatique/sous-titres bilingues
├── src/<episode>/**              # Deuxième vidéo et suivantes : script/timeline/fx/kit/scenes/Main indépendants
├── tools/                        # Scripts de ce skill
└── out/                          # Images fixes + vidéo finie + couvertures

四、Fichiers de référence

• references/pipeline.md — Configuration de l'environnement et liste complète des commandes (incluant tous les pièges de cette machine : pas de ffmpeg / scipy / npm)
• references/script-template.md — Modèle de structure de scénario + table de conversion des temps forts + codes temporels réels de deux vidéos dans cet exemple
• references/visual-kit.md — Règles des composants visuels, zone de sécurité, palette de couleurs, pièges de chevauchement courants
• references/sfx-and-mix.md — Synthèse des effets sonores (selon la tonalité), atténuation par sidechain, volume
• references/fact-check.md — Méthode de vérification des faits pour les univers fictifs et règles de marquage des « récits de lecteurs » (avec interface utilisable de Bilibili)
• references/cover-and-publish.md — Règles pour les trois variantes de couverture + modèle de dossier de publication + évaluation à 24h
• examples/ShiRiZhongYuan-deux-episodes.md — Structure, données et décisions de deux cas réels

五、Limites du skill (honnête envers l'utilisateur)

• Ce pipeline ne produit pas de voix off ; pour une narration, vous devez générer un TTS et resynchroniser les sous-titres.
• En environnement réseau restreint (de nombreux domaines sont bloqués par DNS), il est possible que seules des sources de seconde main soient disponibles pour les univers fictifs — dans ce cas, suivez l'étape 8 avec la liste de vérification, n'inventez pas.
• Le rendu est gourmand en calcul : sur un ordinateur portable à 4 cœurs, une vidéo de 89 secondes en 1080p prend environ 35 minutes ; ne promettez pas « quelques minutes ».
• Droits d'auteur : l'extraction de BGM à partir de vidéos Douyin est réservée à un usage de référence personnel ; pour la publication, utilisez la bibliothèque musicale interne de la plateforme ou la carte audio d'origine.