sangbiaolaoda-arch/remotion-srt-workflow

Workflow d'animation SRT avec Remotion

Transformez un fichier SRT (transcription orale) en une vidéo animée 2D rendue avec Remotion. Ce processus a été entièrement validé sur un projet réel de 81 phrases / 193 secondes / 35 scènes (avec 12 rendus et 11 vrais bugs détectés par les passes de vérification).

Quand l'utiliser

• L'utilisateur fournit un fichier SRT / une transcription / un script narratif pour créer une « vidéo explicative avec images »
• Un projet Remotion existant doit être complété ou modifié (nouvelles scènes)
• Évaluation de la qualité d'un projet Remotion existant

Principes fondamentaux (non-respect = échec garanti)

1. Limite des preuves : Ne pas inventer d'actions déjà exécutées. Les conclusions sont classées en trois catégories : « fait vérifié / suggestion de conception / élément non vérifié ».
2. Portes obligatoires : Chaque étape se termine par une porte G. Le processus ne progresse pas sans confirmation de l'utilisateur. « Continuez » = autorisation de franchir la porte.
3. Exécution en une seule fois : Si l'utilisateur demande explicitement une livraison complète ("Tu ne peux pas tout faire d'un coup ?"), déroulez toutes les scènes restantes d'affilée, les portes de vérification s'appliquent automatiquement — pas de découpage en plusieurs tours.
4. Précision image par image : La timeline est basée uniquement sur les images. Interdiction d'utiliser CSS animation/transition/@keyframes/Tailwind animate-*, setTimeout pour le timing, et Random doit avoir une graine fixe.
5. Espacement basé sur la boîte de ligne : Pour les polices chinoises (Noto Serif SC, etc.), la boîte de ligne ≈ 1.44 em. Un texte qui ne semble pas se chevaucher visuellement peut le faire en réalité. Prévoyez un espacement ≥ 0.3 em entre les blocs de texte horizontaux et ≥ 1.55 em pour le texte vertical.
6. Zéro ponctuation à l'écran : Les signes de ponctuation SRT sont remplacés par des espaces dans la couche de rendu, sans demander à l'auteur de modifier le fichier source.

Aperçu du processus

Étape	Livrable	Porte
S0	Évaluation de faisabilité (classification / chemin technique / tableau des risques / lacunes du Brief), pas de code ni de téléchargement de médias	G0 : l'utilisateur choisit le chemin
S1	Initialisation du projet : npm installe Remotion, polices dans public/fonts/, tsconfig, Root	—
S2	brief.md + beat-sheet.md (phrases → scènes, cadres dérivés du SRT) + style-guide.md + 3 styleframes rendus réellement	G1 : direction visuelle
S3	assets.md : planification des médias (liste des éléments graphiques + paramètres + risques ; privilégier à 100% les SVG programmatiques, zéro achat externe)	G2 : confirmation de fusion
S4	storyboard.md : storyboard scène par scène (cadres / visuel principal / mouvement principal / raison de la transition / point de contrôle de silence)	G3 : confirmation de fusion
S5	Tranche verticale : sélectionner les 3–4 scènes les plus denses en données, rendu réel + QA par échantillonnage	G4 : échantillon
S6	Rendu complet de toutes les scènes (possible en une seule fois), chaque scène passe la porte de vérification	—
S7	Rendu final + validation en cinq niveaux + livraison	G5 : QA → G6

Les fichiers d'état sont toujours sauvegardés (brief / beat-sheet / style-guide / assets / storyboard / progress / findings). Pour les tâches longues, le fichier sert de source de vérité.

Manuel détaillé (à consulter selon les besoins)

• references/workflow.md — Détails opérationnels de chaque étape, méthodes de recalcul, normes de vérification documentaire
• references/qa-gates.md — Principes des portes de vérification des chevauchements, blackframe, contact print, commandes d'échantillonnage, règles de plage de rendu
• references/remotion-rules.md — Règles strictes Remotion et pièges constatés sur ce projet (images noires entre les scènes, chargement des polices, positionnement absolu, etc.)
• assets/OverlapAudit.tsx — Couche d'audit des chevauchements de texte image par image, à copier directement dans le projet et à monter au-dessus de la Composition principale

Démarrage rapide (10 minutes pour un nouveau projet)

1. npm i remotion @remotion/cli @remotion/bundler react react-dom typescript (+ @remotion/renderer)
2. Police chinoise : cp /c/Windows/Fonts/NotoSerifSC-VF.ttf public/fonts/ (fichier variable unique couvrant toutes les graisses, licence SIL OFL utilisable commercialement). Utilisez staticFile() + FontFace + delayRender/continueRender pour un chargement local. Interdiction d'utiliser Google Fonts en ligne.
3. Copiez assets/OverlapAudit.tsx dans src/audit/, montez-le au-dessus de la Composition principale.
4. Suivez l'étape S2 pour créer le beat-sheet, les cadres sont écrits dans une source unique de vérité src/acts/acts.ts

Commandes de rendu (testées localement)

npx remotion render src/index.ts Main out.mp4 --codec h264 --crf 18 --frames=START-END --log=error
npx remotion still src/index.ts Main out.png --frame=N          # Vérification d'une seule image
npx remotion browser ensure                                     # Premier téléchargement du Headless Shell

Référence de vitesse de rendu : animation complexe en 1080p ≈ 17–27 ips (film complet de 5810 images ≈ 3–6 minutes).