ttfake92-lab/skills

YYL Remotion Video

Transformez un article, un script, des notes ou un plan clair en un projet vidéo Remotion. Cette compétence est orientée vidéo : pas de lecteur web piloté par clic, pas de dossier web presentation/, pas de synthèse vocale TTS dans ce workflow.

Résultat principal

my-video/
├── article.md
├── script.md
├── outline.md
├── notes.md
└── remotion/
    ├── src/Root.tsx
    ├── src/Composition.tsx
    ├── src/chapters/<NN>-<id>/
    │   ├── <Chapter>.tsx
    │   ├── narrations.ts
    │   └── timing.ts
    ├── public/assets/
    ├── preview-stills/
    └── out/

Ressources de la compétence groupées :

themes/       # systèmes de couleur / typographie
templates/    # points de départ TSX Remotion copiables
references/   # conseils sur le savoir-faire, les thèmes et les templates

Force d'exécution

Décidez avant d'écrire les fichiers :

Force	Quand l'utiliser	Comportement
Rapide	<= 450 caractères chinois, <= 60s, test de thème, démonstration brouillon	1 chapitre, peu de battements, implémentation directe
Standard	1-4 min, explicateur publiable normal	script + plan, ancrage du premier chapitre, puis continuation
Strict	> 4 min, contenu de marque/commercial/à haut risque	planification plus complète, plus de vérifications d'images, révision plus lente des chapitres

Signalez en une ligne :

J'utiliserai <Rapide/Standard/Strict> car <longueur / risque / cible>.

Workflow

1. Porte d'entrée

   • Procédez uniquement si l'utilisateur fournit un texte source, un script, des notes ou un plan clair.
   • S'il ne donne qu'un sujet, demandez du matériel. N'inventez pas une vidéo complète.

2. Fichiers de contenu

   • Enregistrez le matériel source dans article.md lorsqu'il est fourni.
   • Enregistrez le texte parlé final dans script.md.
   • Enregistrez le plan de développement dans outline.md.
   • outline.md planifie les chapitres, les battements, le contenu à l'écran, le pool d'informations, les ressources.
   • outline.md ne prescrit pas une implémentation d'animation exacte.

3. Choix du thème

   • Utilisez uniquement les thèmes groupés dans cette compétence : themes/command-film, themes/studio-white, themes/research-desk.
   • Ne réutilisez ni n'importez des thèmes depuis web-video-presentation.

4. Choix du template

   • Si l'utilisateur demande une mise en page ou un mécanisme d'animation connu, lisez references/TEMPLATES.md.
   • Utilisez templates/luxury-perspective-gallery pour un portfolio luxueux sombre, un carrousel horizontal 3D en perspective ou des demandes d'agence haut de gamme.

5. Projet Remotion

   • Réutilisez le dossier remotion/ existant s'il est présent.
   • Créez-le uniquement s'il manque :

     npx create-video@latest --yes --blank --no-tailwind remotion
     

   • Si un template sélectionné nécessite Tailwind, créez le projet avec le support Tailwind ou ajoutez Tailwind avant de copier les fichiers du template.
   • Installez les dépendances uniquement si remotion/node_modules est manquant ou si les commandes Remotion échouent parce que les dépendances sont absentes.

6. Temporisation

   • Ne synthétisez pas d'audio.
   • Estimez les durées à partir de la narration et de la complexité visuelle.
   • Valeurs par défaut : fps = 30, width = 1920, height = 1080.
   • Stockez le texte dans narrations.ts ; stockez les durationFrames estimés dans timing.ts.

7. Implémentation

   • Lisez references/REMOTION-CRAFT.md avant chaque chapitre.
   • Animatez avec useCurrentFrame(), interpolate(), Easing, et Sequence.
   • N'utilisez pas de transition CSS / animation CSS / GSAP pour l'animation principale.
   • Tailwind peut styliser la mise en page statique, mais les utilitaires d'animation Tailwind ne sont pas autorisés.

8. Vérification

   • Exécutez :

     cd remotion
     npm run lint
     

   • Rendez au moins une image fixe par chapitre, ou 2 à 4 images fixes pour une courte vidéo complète :

     npx remotion still <composition-id> --frame=<frame> --scale=0.5 --output=preview-stills/<name>.png
     

   • Rendez le MP4 lorsque les images fixes semblent correctes :

     npx remotion render <composition-id> out/<name>.mp4
     

9. Notes

   • Mettez à jour notes.md avec le fps, la résolution, le nombre total d'images, la durée estimée, les images fixes vérifiées, le chemin du MP4 rendu, et le fait que l'audio et les sous-titres sont en post-production.

Sélection du thème

Thème	Idéal pour	Ambiance
command-film	agents, terminal, automatisation, outils développeur	salle de commande cinématographique sombre
studio-white	démos SaaS, lancements, cours, tutoriels produits	studio produit blanc et propre
research-desk	essais, rapports, documents, analyse commerciale	bureau analytique calme

Pour les notes complètes sur les thèmes, lisez references/THEMES.md.

Sélection du template

Template	Idéal pour	Ambiance
luxury-perspective-gallery	portfolio haut de gamme, vitrine produit, carrousel horizontal 3D	curseur d'agence cyber-minimaliste sombre
charity-doodle-poster	affiches caritatives, héros animaux dessinés à la main, effets web éditoriaux en ligne bouillonnante	affiche rétro en stop-motion à l'encre et pinceau

Pour les notes complètes sur les templates, lisez references/TEMPLATES.md.

Règles Remotion

• Utilisez Composition dans Root.tsx.
• Utilisez Sequence pour placer les battements sur la timeline.
• Utilisez useCurrentFrame() + interpolate() pour le mouvement.
• Placez les ressources statiques dans remotion/public/assets/ ; référencez-les avec staticFile().
• Les vérifications d'images fixes sont obligatoires avant le rendu final.
• Le MP4 final est silencieux, sauf si l'utilisateur fournit ultérieurement de l'audio en post-production.