masskx/douyin-remotion-video

Douyin Remotion Video

Utilisez cette compétence lorsque l'utilisateur souhaite transformer du matériel de vocabulaire anglais en une vidéo courte et percutante de style Douyin pour l'apprentissage des mots, en particulier :

• Une racine de mot, un préfixe, un suffixe, une famille de mots, une paire de mots confus, ou une liste de vocabulaire doit devenir une courte vidéo.
• Un projet Remotion d'apprentissage de l'anglais nécessite un style de carte de vocabulaire noir/jaune à fort contraste.
• La voix off Alibaba Bailian/DashScope CosyVoice doit piloter les sous-titres et le minutage.
• Des scènes Remotion existantes nécessitent une révision du style, du rythme, des sous-titres, de la voix ou de l'export final.

N'utilisez pas cette compétence pour des explications sur papier, des explications de modules de code, des diagrammes d'architecture, des vidéos de connaissances générales ou des projets de modules prêts à l'emploi. Ceux-ci relèvent de compétences ou de projets distincts.

Cette ligne est gelée : pas de nouveaux épisodes de racines de mots. Les nouveaux épisodes de vocabulaire utilisent l'une des compétences modèles (skills/vocab-dossier, skills/vocab-game-show, skills/vocab-whiteboard ; choisissez avec npm run plan, règles dans skills/_shared/HOUSE_RULES.md). Cette compétence reste uniquement pour re-rendre les épisodes de racines de mots noir/jaune existants (001–059).

Entrées

Entrées typiques :

• Contenu du vocabulaire : racine/affixe cible, liste de mots, significations, phonétique, angle de mémorisation exemple, ou une brève idée pour un épisode d'apprentissage de l'anglais.
• Brief de l'épisode : sujet, public, objectif, plateforme, durée, accroche des trois premières secondes, mots clés.
• Actifs BGM et entrées de registre provenant de public/bgm/, shared-assets/bgm/ et src/data/bgmRegistry.ts.
• Actifs d'icônes d'animaux locaux provenant de public/assets/icons/animals/, shared-assets/icons/animals/ et src/data/animalIconRegistry.ts.
• Fichiers de données : src/data/words.ts, src/data/voiceScript.ts, src/data/episodeConfig.ts, src/data/subtitles.ts en option.
• Projet Remotion existant utilisant React + TypeScript.
• Vidéo de référence ou capture d'écran optionnelle pour le style visuel du vocabulaire anglais.

Sorties

Sorties attendues :

• Un épisode Remotion de vocabulaire anglais exécutable.
• Fichiers de vocabulaire pilotés par les données.
• Segments TTS dans public/audio/segments/.
• Voix off fusionnée dans public/audio/main-voice.mp3.
• Timeline dérivée de l'audio dans src/data/generatedVoiceTimeline.ts.
• MP4 final, généralement out/root-word-template.mp4 ou un chemin de sortie spécifique à l'épisode.
• Une image de couverture Douyin pour chaque épisode, exportée avec les livrables de l'épisode.
• Une légende Douyin d'environ 150 caractères chinois avec des tags # intégrés pour chaque épisode.

Workflow principal

1. Lire le sujet du vocabulaire et rédiger un court brief d'épisode.
2. Concevoir l'accroche des trois premières secondes avant d'écrire le corps de la leçon. Choisir un hookType, un texte d'accroche, des mots flash, un texte de racine, un ton, des moments SFX, et une réaction d'animal unique optionnelle.
3. Créer ou mettre à jour les fichiers de données, en particulier voiceScript.ts et les données de vocabulaire comme words.ts.
4. Configurer episodeConfig.ts, y compris hook, bgmId, bgmVolume, voiceVolume et sfxVolume.
5. Choisir un BGM approprié depuis bgmRegistry, configurer le bgmVolume par défaut à 0.32, et planifier la vérification du mixage.
6. Choisir 2 à 4 moments d'icônes d'animaux depuis animalIconRegistry uniquement lorsqu'ils soutiennent les temps forts de l'accroche, de l'erreur courante, de la révélation de la racine ou du résumé.
7. Construire les scènes Remotion à partir des données. Garder le contenu, le timing, les réglages de mixage audio, les moments d'icônes et l'état visuel séparés.
8. Générer la voix off TTS avec DashScope CosyVoice. Ne jamais coder en dur la clé API.
9. Utiliser les durées ffprobe pour générer generatedVoiceTimeline.ts.
10. Piloter les sous-titres, la scène active, le mot-clé actif, les mots flash de l'accroche, le texte de conflit et le zoom percutant à partir de generatedVoiceTimeline.
11. Rendre des images fixes aux temps forts clés, en particulier les images entre 0 et 3 secondes et tous les temps forts d'accroche étirés après le TTS réel, puis inspecter les images vides, les chevauchements et le faible contraste.
12. Générer une couverture Douyin pour l'épisode. Chaque épisode doit être livré avec une image de couverture ; aucune exception.
13. Générer une légende Douyin d'environ 150 caractères chinois avec des tags # intégrés et l'exporter avec les fichiers de publication.
14. Rendre le MP4 final et vérifier l'interruption de l'accroche, la synchronisation audio/vidéo, le ducking BGM, le volume BGM, le placement des icônes d'animaux, le fondu de fin, la lisibilité de la couverture et la qualité de la légende.

Fichiers à charger selon les besoins

• Style visuel : references/visual_rules.md
• Accroche des trois premières secondes : references/hook_rules.md
• Timing et rythme : references/rhythm_rules.md
• Voix off DashScope : references/voice_rules.md
• BGM et mixage audio : references/audio_rules.md
• Utilisation des icônes d'animaux : references/icon_rules.md
• Conception et synchronisation des sous-titres : references/subtitle_rules.md
• Liste de contrôle qualité d'export : references/quality_rules.md
• Procédure de bout en bout : workflow.md
• Exemple actuel : examples/ject_episode_example.md

Structure de projet préférée

Conservez ces fichiers pilotés par les données :

• src/data/voiceScript.ts : source canonique de la narration et des sous-titres pour l'épisode de vocabulaire.
• src/data/generatedVoiceTimeline.ts : généré à partir des durées audio réelles.
• src/data/bgmRegistry.ts : registre BGM local généré à partir de public/bgm/.
• src/data/animalIconRegistry.ts : registre local d'icônes d'animaux généré à partir de public/assets/icons/animals/.
• src/data/episodeConfig.ts : hook, bgmId, bgmVolume, voiceVolume et sfxVolume par épisode.
• src/scenes/HookScene.tsx : le système d'interruption Douyin avec des cuts secs, des flashs de mots, un texte de conflit, un retournement, un SFX local optionnel et au plus une réaction d'animal. Il doit utiliser le timing dérivé de generatedVoiceTimeline après le TTS afin que la narration de l'accroche étirée ne laisse pas d'images vides.
• src/timeline.ts : dérive le timing des scènes à partir de generatedVoiceTimeline.
• src/components/BackgroundMusic.tsx : boucle le BGM, fait du ducking sous la voix et fondu à la fin.
• src/components/AnimatedAnimalIcon.tsx : réactions courtes et locales d'icônes d'animaux pour certains temps forts émotionnels.
• src/CoverThumbnail.tsx : modèle de couverture Douyin unifié canonique. Il doit conserver le look noir/jaune, montrer la marque du créateur 小猪盖被 et utiliser des icônes d'animaux locales lorsque c'est approprié.
• scripts/generate-release-copy.ts : générateur canonique de copie de publication pour la légende de l'épisode et les notes de publication.
• src/utils/audioMixing.ts : helpers partagés pour le volume BGM, le ducking et le fondu.
• src/utils/motion.ts : helpers partagés pour les animations comme slamIn, punchZoom, shake, flashOpacity.
• public/audio/main-voice.mp3 : seul artefact généré que Remotion doit lire avec <Audio>.
• public/bgm/ : BGM local utilisé par Remotion ; ne chargez pas de BGM depuis le réseau pendant le rendu.
• public/assets/icons/animals/ : icônes d'animaux locales utilisées par Remotion ; ne chargez pas d'icônes depuis des URL distantes pendant le rendu.

Règles de sécurité

• N'écrivez jamais de clés API dans les fichiers source, modèles, exemples, journaux ou documents.
• Utilisez DASHSCOPE_API_KEY depuis l'environnement.
• Traitez l'audio généré et les timelines comme des artefacts remplaçables.
• Ne vous fiez pas à des marques de secondes codées en dur une fois qu'une timeline vocale générée existe.
• Chaque épisode doit exporter une image de couverture Douyin avec les livrables vidéo.
• Chaque épisode doit exporter une légende Douyin avec les livrables vidéo.
• La couverture doit conserver un style de marque unifié : fond noir, accent jaune, nom du créateur 小猪盖被 et un angle de mémorisation basé sur la racine lisible.
• La légende doit faire environ 150 caractères chinois, lisible comme un seul corps de publication Douyin, et inclure des tags de type #英语学习.
• Ne commencez pas un épisode par une page de titre normale. Les 0,5 à 1 première seconde doivent interrompre le défilement avec un grand texte ou un impact visuel fort.
• Ne laissez pas les visuels de l'accroche se terminer à une marque fixe de 3 secondes après le TTS. Si la timeline vocale réelle étire les segments d'ouverture, maintenez les visuels de mots flash et de conflit correspondants à l'écran jusqu'à ce que la racine ou le modèle commence à être révélé.
• Les flashs de mots en orbite/bulle de l'accroche doivent être rythmés par le segment vocal flash-words réel. N'utilisez pas un intervalle fixe de 8 à 10 images pour chaque mot. Répartissez le timing d'apparition des bulles sur le segment parlé afin que chaque mot apparaisse lorsqu'il est entendu, les mots précédents restant visibles.
• Maintenez la rotation de l'orbite modérée. L'ouverture de style 046 doit donner l'impression que les mots sont rassemblés autour d'une famille, et non projetés sur l'écran. Un quart de tour sur le segment est généralement suffisant.
• Les scènes de grille/structure doivent utiliser une disposition symétrique dynamique basée sur le nombre réel de mots. Ne codez pas en dur une disposition à 8 emplacements lorsque l'épisode a 6 ou 7 mots ; centrez les lignes incomplètes et vérifiez qu'aucun mot n'est manquant.
• Les lignes de connexion de la grille doivent partir des bords de la racine/de la carte et rester derrière les modules. Ne dessinez pas de lignes à travers le texte des mots ou le contenu de la carte.
• Si l'instruction DashScope échoue pour une voix système, réessayez sans instruction tout en préservant rate, voice, model et la structure du script.
• Ne chargez pas de BGM depuis des URL distantes pendant l'aperçu ou le rendu Remotion.
• Ne chargez pas d'icônes d'animaux depuis des URL distantes pendant l'aperçu ou le rendu Remotion.
• Si la licence du BGM n'est pas claire, ajoutez license_check_required au fichier notes.md de l'épisode.
• Utilisez les valeurs audio par défaut actuelles à moins qu'il n'y ait une raison documentée de les modifier : bgmVolume : 0.32, facteur de ducking vocal 0.65 et plafond de sécurité BGM 0.32.

Commandes utiles

npm run voice
npm run preview -- --port=3000
npm run render
npx tsc --noEmit

npm run render doit être considéré comme la commande de publication par défaut pour chaque épisode car elle exporte à la fois la vidéo finale et l'image de couverture Douyin. npm run copy peut être utilisé pour remplir ou rafraîchir uniquement la légende Douyin et les notes de publication pour l'épisode actif.

Pour les vérifications d'images clés :

npx remotion still src/index.ts RootWordTemplate out/check.png --frame=150 --scale=0.5