quyen2867/remotion-video-template

Compétence de Vidéo Explicative Remotion (50–60s)

Cette compétence vous guide dans la création de vidéos explicatives courtes de haute qualité, de 50 à 60 secondes (format TikTok / YouTube Shorts / Reels : 1080x1920 à 30 ips) sur n'importe quel sujet.

Elle combine :

1. Les meilleures pratiques visuelles de remotion-dev/skills (animations ressort précises, interpolation avec clamp, composition de séquences, hiérarchie typographique).
2. La synthèse vocale IA via TTS_PROVIDER dans .env : edge (edge-tts-universal, en ligne, gratuit) ou cit (CIT Voice Studio, voix vietnamiennes hors ligne - téléchargement sur github.com/quyen2867/cit-voice-studio, documentation API : docs/cit-voice-studio.md).
3. La synchronisation temporelle exacte qui mappe la durée des voix off directement dans les séquences d'images de Remotion.

---

1. Structure de la Vidéo & Timing (50–60s / 1500–1800 images @ 30 ips)

Une vidéo courte captivante suit le framework Accroche-Problème-Solution-Valeur-Outro :

Scène	Nom	Temps	Plage d'images (@ 30 ips)	Objectif & Visuels
1	Accroche	0s – 5s	~150 images	Attirer l'attention immédiatement : grand titre, question qui suscite la curiosité, badge flottant.
2	Contexte / Point douloureux	5s – 15s	~300 images	Présenter le problème ou le contexte expliquant pourquoi ce sujet est important. Icône d'avertissement/comparaison.
3	Concept de base Partie 1	15s – 28s	~390 images	Expliquer le premier principe fondamental : carte vitrée, icône d'illustration, mots-clés en évidence.
4	Concept de base Partie 2	28s – 42s	~420 images	Détailler ou expliquer le mécanisme de fonctionnement : processus en 3 étapes, diagramme de flux fluide.
5	Impact réel	42s – 52s	~300 images	Application concrète, conseils pratiques ou chiffres impressionnants.
6	Outro & Appel à l'action	52s – 60s	~240 images	Résumer en une phrase choc, appeler à Like/Partager/Suivre et à la marque personnelle.

Durée totale : 1500 – 1800 images (environ 50 – 60 secondes).

---

2. Génération de la Voix Off TTS (edge | cit)

2.1 Configuration de la Voix via .env

Assurez-vous que le fichier .env est configuré (voir .env.example pour la version complète) :

TTS_PROVIDER=edge                    # edge | cit
TTS_OUTPUT_DIR=public/audio

# Edge TTS (TTS_PROVIDER=edge)
EDGE_TTS_VOICE=vi-VN-HoaiMyNeural    # ou vi-VN-NamMinhNeural, en-US-ChristopherNeural
EDGE_TTS_RATE=+10%                   # +10% à +15% pour un rythme rapide et captivant dans les vidéos courtes

# CIT Voice Studio (TTS_PROVIDER=cit)
CIT_TTS_BASE_URL=http://127.0.0.1:8001
CIT_TTS_VOICE=Hải Đăng               # liste des voix : docs/cit-voice-studio.md ou GET /voices
CIT_TTS_SPEED=1.1                    # 0.5 - 2.0

Lorsque TTS_PROVIDER=cit :

• L'application CIT Voice Studio doit être ouverte. Le script appelle automatiquement GET /health avant de générer l'audio ; s'il signale une impossibilité de connexion, il invite l'utilisateur à ouvrir l'application (ou à la télécharger depuis github.com/quyen2867/cit-voice-studio).
• Les répliques peuvent inclure des balises d'émotion [rire], [soupir], [raclement de gorge] et des balises de pause [pause 0.5s] (elles ne sont pas lues à voix haute). Ne pas abuser : maximum 1 balise par scène.
• Erreur 400 Voice not found = nom de voix incorrect (sensible aux accents). Vérifiez CIT_TTS_VOICE.

2.2 Processus de Génération des Fichiers Audio

Lors de la réception d'un sujet, créez un fichier de script de voix off et exécutez le script scripts/generate-tts.ts pour générer l'audio :

import { generateTopicVoices } from "../../scripts/generate-tts";

const scenes = [
  {
    id: "scene1_hook",
    text: "Saviez-vous ce qu'est Docker en réalité et pourquoi tous les développeurs en ont besoin ?",
  },
  {
    id: "scene2_problem",
    text: "Avant, la phrase 'ça marche sur ma machine' était un véritable cauchemar lors de la livraison du produit.",
  },
  {
    id: "scene3_concept1",
    text: "Docker résout ce problème grâce aux conteneurs : il empaquette tout le code et l'environnement en un seul bloc.",
  },
  {
    id: "scene4_concept2",
    text: "Contrairement aux machines virtuelles lourdes, Docker partage le noyau du système d'exploitation, ce qui permet un démarrage en un clin d'œil.",
  },
  {
    id: "scene5_impact",
    text: "Grâce à cela, vous déployez votre application sans accroc sur n'importe quel serveur, d'AWS, GCP jusqu'au VPS bon marché.",
  },
  {
    id: "scene6_outro",
    text: "Suivez la chaîne pour maîtriser chaque jour des connaissances technologiques concises !",
  },
];

await generateTopicVoices("DockerShort", scenes);

Les fichiers audio seront automatiquement enregistrés dans public/audio/<NomDuSujet>/<sceneId>.<ext> (.mp3 avec edge, .wav avec cit) accompagnés d'un fichier manifest.json qui enregistre précisément le nombre d'images (durationInFrames) et le audioPath pour chaque scène.

• Options par scène : voice (voix du fournisseur sélectionné), rate/pitch/volume (edge uniquement), speed 0.5-2.0 (cit uniquement).
• Les fichiers existants sont réutilisés (cache). Pour régénérer après avoir modifié les répliques ou changé de voix, supprimez d'abord le fichier audio correspondant.

---

3. Règles de Codage Remotion (de remotion-dev/skills)

Lors de l'écriture du code source Remotion, il est OBLIGATOIRE de respecter les principes suivants :

3.1 Utilisation des Animations Ressort (Spring)

N'utilisez pas d'animations CSS keyframes/transitions ou d'easing linéaire. Utilisez spring() :

import { spring, useCurrentFrame, useVideoConfig } from "remotion";

const frame = useCurrentFrame();
const { fps } = useVideoConfig();

// Ressort fluide pour les cartes/icônes
const scale = spring({
  frame,
  fps,
  config: {
    damping: 12,    // Inférieur à 15 crée un rebond élastique naturel
    stiffness: 100,  // Tension
    mass: 0.8,
  },
});

const entrance = spring({
  frame: frame - 10, // Décalage de 10 images
  fps,
  from: 50,
  to: 0,
});

3.2 Interpolation Sûre (Toujours Clamp)

Fournissez toujours extrapolateLeft: "clamp" et extrapolateRight: "clamp" pour éviter les dépassements de valeur lorsque la timeline sort de la plage :

import { interpolate } from "remotion";

const opacity = interpolate(frame, [0, 15], [0, 1], {
  extrapolateLeft: "clamp",
  extrapolateRight: "clamp",
});

3.3 Intégration Audio et Synchronisation des Séquences

Chaque scène dans la Composition utilise <Sequence> ou <Series> pour gérer le timing avec précision :

import { Audio, staticFile, Sequence } from "remotion";

// Dans un composant de scène - utilisez le chemin du manifest, NE PAS coder en dur l'extension .mp3 (le fournisseur cit génère .wav) :
<Sequence from={0} durationInFrames={durationScene}>
  <Audio src={staticFile(audioManifest.scenes[0].audioPath)} />
  <ContenuScene />
</Sequence>

4. Tampon de Transition Concis (Snappy Transition Buffer) :
   • Le délai entre les scènes doit être de +3 à +4 images (environ 0,1 s) après la fin de la voix off.
   • Évitez les délais trop longs (+15 à +20 images) qui créeraient des silences/morts entre les scènes. La scène suivante doit apparaître immédiatement après la fin de la phrase précédente pour maintenir un rythme soutenu et captivant pour les vidéos courtes.

// Exemple de calcul des durées des scènes dans Series
const d1 = audioManifest.scenes[0].durationInFrames + 3;
const d2 = audioManifest.scenes[1].durationInFrames + 3;
// ...

3.4 Normes de Conception Visuelle (Vertical 1080x1920)

1. Arrière-plan : Mode sombre haut de gamme (bg-slate-950 ou dégradé from-slate-950 via-zinc-900 to-black) combiné à un effet de lueur radiale/quadrillage subtil.
2. Cartes Glassmorphism :
   • backdrop-blur-xl bg-white/10 border border-white/20 rounded-3xl p-8 shadow-2xl
3. Marque de la Chaîne en Haut (Brand Header) :
   • Affichez toujours un composant de marque ⚡ [NOM_CHAÎNE] en haut au centre (top: 150px, left: 50% translate-x) lu depuis la variable d'environnement CHANNEL_NAME (par défaut : "mquyen") pour éviter qu'il ne soit masqué par la barre de recherche et les onglets Abonnements / Pour vous de la plateforme (TikTok, Shorts, Reels).
4. Typographie Optimisée pour Mobile (1080x1920) :
   • Titre principal : 72px - 96px, gras font-black, dégradé net.
   • Contenu des cartes / citations : 40px - 50px font-extrabold.
   • Texte secondaire / explications : 28px - 36px font-semibold.
   • Badge de catégorie : 28px - 32px font-black majuscules.
5. Mise en Page Centrée & Sous-titres sur une Ligne (Single-Line Chunked Caption) :
   • Mise en page principale : Tout le contenu important DOIT être situé au centre de l'écran (justify-center verticalement).
   • Position des sous-titres : Sous le bloc central avec un espacement généreux (mt-64), non masqués par la barre d'outils inférieure de TikTok/Reels.
   • Format d'une ligne : Les sous-titres n'apparaissent que sur une seule ligne (environ 5 à 7 mots), en grandes lettres text-4xl font-black, coupés automatiquement en groupes de mots et qui changent en douceur au rythme de la voix off (durationInFrames). Utilisez une carte pastille rounded-full bg-slate-950/95 border-2 border-sky-400/50 px-10 py-5 avec surbrillance des mots-clés.

---

4. Processus de Création de Vidéo Étape par Étape pour Antigravity / Codex

Lorsque vous recevez une demande : "Créez une vidéo expliquant [Sujet X]" :

Étape 1 : Rédaction du Script (Scripting)

1. Identifiez les 6 scènes (Accroche, Problème, Concept 1, Concept 2, Impact, Outro).
2. Écrivez des répliques naturelles, concises, avec des phrases courtes (15 à 30 mots par scène).

Étape 2 : Génération de la Voix Off (TTS Generation)

1. Lisez TTS_PROVIDER dans .env pour savoir si vous utilisez edge ou cit.
2. Créez le script scripts/generate-<sujet>-audio.ts qui appelle generateTopicVoices, exécutez npx tsx scripts/generate-<sujet>-audio.ts.
3. Obtenez la liste des durées en images réelles depuis manifest.json / src/<NomDuSujet>/audioData.ts.

Étape 3 : Création du Dossier de Code src/<NomDuSujet>/

Structure de dossier standard :

src/<NomDuSujet>/
├── <NomDuSujet>.tsx          # Composition principale regroupant les Series.Sequence
├── types.ts                 # Schéma & Props
├── audioData.ts             # Métadonnées de durée audio
└── scenes/
    ├── Scene1Accroche.tsx
    ├── Scene2Probleme.tsx
    ├── Scene3Concept1.tsx
    ├── Scene4Concept2.tsx
    ├── Scene5Impact.tsx
    └── Scene6Outro.tsx

Étape 4 : Enregistrement de la Composition dans src/Root.tsx

Ajoutez une nouvelle Composition dans src/Root.tsx :

<Composition
  id="<NomDuSujet>"
  component={<NomDuSujet>}
  durationInFrames={totalImages}
  fps={30}
  width={1080}
  height={1920}
  defaultProps={{}}
/>

Étape 5 : Vérification et Rapport

1. Exécutez npm run lint pour vérifier les erreurs TypeScript/ESLint.
2. Rapportez à l'utilisateur le lien pour ouvrir la Composition dans Remotion Studio (http://localhost:3000) ou la commande pour rendre le MP4 :

   npx remotion render <NomDuSujet> out/<NomDuSujet>.mp4