Aryanban/remotion-video-director

Remotion Video Director

Un skill interactif qui guide les utilisateurs de « J'ai besoin d'une vidéo » à un fichier MP4 rendu avec musique, grâce à une délibération experte, une conception de scénario et des motifs Remotion éprouvés.

Quand l'utiliser

Déclenchez ce skill lorsque l'utilisateur :

• Souhaite créer une vidéo avec Remotion
• A besoin d'une démo produit, d'une vidéo de lancement, d'un template de contenu récurrent, d'une vidéo marketing ou d'une intro narrative
• Dit « J'ai besoin d'une vidéo », « fais une vidéo pour… », « crée une vidéo Remotion », « vidéo en code »
• Veut de l'aide pour réfléchir au type de vidéo à réaliser ou à la façon de la structurer
• A un projet Remotion et souhaite une révision experte

Relation avec le skill officiel Remotion

Le package officiel remotion-dev/skills enseigne à Claude l'API Remotion (37 fichiers de règles couvrant animations, audio, sous-titres, transitions, etc.). Ce skill gère la couche créative et stratégique au-dessus :

• Skill officiel : « Comment utiliser interpolate() ? » (référence technique)
• Video Director : « Quelle vidéo dois-je réaliser et comment doit-elle s'enchaîner ? » (processus créatif)

Si le skill Remotion officiel est installé, exploitez-le pour les détails spécifiques à l'API. Sinon, les fichiers references/remotion-patterns.md et references/component-library.md de ce skill fournissent suffisamment de connaissances Remotion pour construire des vidéos de production.

---

Flux de travail en quatre phases

Phase 1 : Cadrage stratégique

Objectif : Comprendre ce dont l'utilisateur a besoin par la conversation, puis rassembler les perspectives d'experts.

CRITIQUE : Cette phase est INTERACTIVE. Posez les questions une par une et ATTENDEZ les réponses. Ne déversez pas toutes les questions à la fois et ne passez pas automatiquement à l'étape suivante sans intervention de l'utilisateur.

Étape 1 – Découverte (Conversationnelle)

Commencez par une question ouverte unique :

« À quoi sert cette vidéo ? Parlez-moi de l'idée, qui la regardera et ce que vous voulez qu'ils fassent après. »

ATTENDEZ la réponse de l'utilisateur. Ensuite, posez des questions de suivi ciblées en fonction de ce qui manque :

• Si le public n'est pas clair : « Qui spécifiquement regardera cette vidéo ? (clients, équipe, investisseurs, réseaux sociaux ?) »
• Si l'action souhaitée n'est pas claire : « Après avoir regardé, que doivent FAIRE les spectateurs ? (s'inscrire, comprendre quelque chose, partager ?) »
• Si aucune contrainte n'est mentionnée : « Y a-t-il des contraintes à connaître ? Durée, couleurs de marque, actifs existants, date limite ? »
• S'ils mentionnent un produit : « Pouvez-vous partager des captures d'écran du produit/de l'interface ? »

N'avancez pas tant que vous n'avez pas compris : le but, le public, l'action souhaitée et les contraintes.

Étape 2 – Direction créative

Présentez les options de direction créative et demandez à l'utilisateur de choisir :

Style	Ambiance	Idéal pour
Minimal/Jobs	Fond noir, pauses dramatiques, une idée par image, police Impact	Lancements de produits, grandes idées, discours clés
Riche en données/Bloomberg	Fond bleu marine foncé, graphiques animés, dense mais organisé	Résumés de réunions, rapports, tableaux de bord
Chaleureux/Narratif	Tons chauds, citations personnelles, accents serif	Introductions de cours, histoires d'équipe, communauté
Terminal/Hacker	Thème sombre de code, machine à écrire, monospace partout	Démonstrations techniques, outils de développeur, ingénierie
Personnalisé	L'utilisateur décrit ou fournit des captures d'écran/vidéos de référence	Tout ce qui est spécifique

« Quelle direction stylistique convient à votre vidéo ? Ou partagez des captures d'écran de vidéos que vous avez aimées. »

ATTENDEZ la réponse.

Lisez references/video-archetypes.md pour les spécifications complètes de la direction choisie (couleurs, polices, style d'animation, règles de timing).

Étape 3 – Entrée de référence (Optionnelle)

« Avez-vous des vidéos de référence, des captures d'écran ou des styles visuels que vous aimeriez que j'émule ? (Ignorez si rien) »

Si l'utilisateur fournit des références, analysez-les pour : la palette de couleurs, la typographie, la vitesse d'animation, la densité de la mise en page, l'ambiance générale. Incorporez-les dans le brief créatif.

ATTENDEZ la réponse ou une confirmation pour passer.

Étape 4 – Constitution du panel d'experts

En fonction de l'archétype sélectionné (dans references/video-archetypes.md) et de la direction créative, constituez un panel de 3 à 4 experts à partir de references/expert-definitions.md.

Générez des perspectives d'experts – pour chaque expert, générez 2 à 3 phrases :

• Une recommandation spécifique
• Un risque à surveiller

Restez concis. Présentez-le sous forme d'une brève table ronde. Mettez en évidence uniquement les points où les experts sont en désaccord (cela signale une décision que l'utilisateur doit prendre).

Étape 5 – Brief créatif

Synthétisez en un brief structuré :

## Brief créatif

**Objectif** : [une phrase]
**Public** : [qui, ce qui les intéresse]
**Message principal** : la SEULE chose dont les spectateurs doivent se souvenir
**Action souhaitée** : ce que les spectateurs doivent faire ensuite
**Durée** : [secondes] ([images] images à 30 ips)
**Direction créative** : [style sélectionné – Minimal/Jobs, Bloomberg, etc.]
**Arc émotionnel** : [ex. : curiosité -> preuve -> confiance -> action]

## Stratégie audio
- Musique : [ambiant/entraînant/dramatique/clairsemé] depuis Pixabay
- Voix-off : [oui/non]
- Ambiance musicale : [description correspondant à la direction créative]

## Séquence des scènes
| # | Scène | Durée | Objectif |
|---|-------|-------|----------|
| 1 | ...   | Xs    | ...      |

## Modèle de données (si applicable)
[Ce qui est paramétré vs codé en dur – la structure du template réutilisable]

## Style visuel
- Thème : [nom de la direction créative]
- Fond : [couleur]
- Couleurs : [primaire, accent, secondaire]
- Typographie : [police de titres, police de corps, police monospace]
- Sensation d'animation : [vive/douce/dramatique/machine à écrire]

« Voici le brief créatif. Souhaitez-vous ajuster quelque chose avant que nous concevions les scènes ? »

ATTENDEZ la confirmation ou les ajustements.

---

Phase 2 : Conception du scénario

Objectif : Transformer le brief en un scénario détaillé, scène par scène.

Étape 6 – Conception des scènes

Pour chaque scène de la séquence, spécifiez :

• Contenu : Texte exact, données, visuels
• Composants : Quels composants réutilisables utiliser (depuis references/component-library.md)
• Animation : Animations d'entrée/sortie, timing en images
• Transitions : Fondu enchaîné entre toutes les scènes (8 à 12 images)

Lisez references/remotion-patterns.md pour les contraintes critiques de Remotion et les modèles de style premium.

Règle de concentration de la scène : Chaque scène doit servir UNE idée qui se connecte au message principal. Si une scène est tangentielle au message principal, SUPPRIMEZ-LA. Quelques scènes ciblées valent toujours mieux que beaucoup de scènes dispersées.

Budget d'images : Cartographiez toute la chronologie :

const TIMING = {
  scene1: { start: 0, dur: 6 },   // Accroche
  scene2: { start: 6, dur: 10 },  // ...
  // Le total doit correspondre à durationInFrames / fps de la composition
};

Étape 7 – Architecture des données

Si la vidéo est pilotée par les données (rapport récurrent, marketing multivariante) :

• Concevez l'objet de configuration qui change entre les rendus
• Identifiez ce qui reste constant (modèle visuel) par rapport à ce qui varie (contenu)
• Montrez à l'utilisateur la forme de la configuration et confirmez

Exemple de modèle (d'après WeeklyIntro) :

const weekData = {
  weekLabel: "Mar 3 - Mar 9",
  heroNumber: 312,
  heroLabel: "new signups",
  // ... champs qui changent chaque semaine
};

Étape 8 – Confirmation de l'utilisateur

Présentez le scénario complet.

« Prêt à construire, ou voulez-vous ajuster quelque chose ? »

ATTENDEZ la confirmation.

---

Phase 3 : Construction

Objectif : Créer le projet Remotion et effectuer le rendu de la première version.

CRITIQUE : N'exécutez jamais une commande qui lance un assistant CLI interactif ou qui demande une entrée. Cela inclut npx create-video, npx remotion init, npm init, ou un simple npx remotion render sans arguments. Créez toujours les fichiers manuellement et passez tous les arguments explicitement aux commandes CLI.

Étape 9 – Structure du projet

Créez la structure du projet Remotion manuellement (n'utilisez PAS les assistants de scaffolding – voir l'en-tête de la Phase 3) :

<projet>/
├── src/
│   ├── Root.tsx
│   ├── Video.tsx           # ou <NomVideo>.tsx
│   ├── theme/
│   │   ├── colors.ts
│   │   ├── fonts.ts
│   │   └── springs.ts
│   ├── scenes/
│   │   ├── Scene1Accroche.tsx
│   │   └── ...
│   ├── components/
│   │   ├── FadeIn.tsx
│   │   └── ...
│   └── data/
│       └── config.ts       # si piloté par les données
├── public/
│   ├── music.mp3           # musique de fond
│   └── illustrations/      # si utilisation d'images de fond
├── package.json
├── tsconfig.json
└── remotion.config.ts

Installez les dépendances : pnpm install

Étape 10 – Construction des scènes

Construisez chaque composant de scène en suivant le scénario de la Phase 2. Utilisez les composants de references/component-library.md.

Règles de construction critiques (d'après references/remotion-patterns.md) :

• Toute animation via useCurrentFrame() + interpolate()/spring() – JAMAIS de transitions CSS
• Serrez toujours l'interpolation : { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
• useCurrentFrame() est relatif au <Sequence> le plus proche, pas à la chronologie globale
• Fondu enchaîné entre chaque scène (enveloppe de 8 à 12 images ; exception : le style Terminal/Hacker où les coupures franches conviennent)
• Chaque élément doit apparaître animé – ne jamais apparaître statique sur une coupure

Règles de style premium (d'après references/remotion-patterns.md) :

• Variété de polices : mélangez police de titres + police de corps + police monospace (pas Inter partout)
• Contraste de taille extrême : titres 72-96pt, corps 20-24pt
• Centrez verticalement les questions/titres importants
• Maximum 15-20 mots par diapositive de corps, 7 mots pour les diapositives de titres (style Jobs)
• Gardez le texte dans les 85 % supérieurs du cadre
• Police minimale de 24pt pour la lisibilité
• Marge de 80 à 120 pixels depuis les bords

Étape 11 – Intégration audio

Lisez references/music-and-audio.md pour le guide audio complet.

« Voulez-vous ajouter une musique de fond ? Je recommande de parcourir pixabay.com/music/ pour un morceau libre de droits qui correspond au style [direction créative sélectionnée]. Partagez le lien de téléchargement ou le fichier et je l'intégrerai avec des courbes de volume appropriées. »

ATTENDEZ la réponse de l'utilisateur.

Si l'utilisateur fournit de la musique :

1. Téléchargez/sauvegardez dans public/music.mp3
2. Ajoutez le composant <Audio> avec une courbe de volume fondu entrée/sortie
3. Baissez le volume de la musique pendant les scènes riches en données (0,30 -> 0,15)
4. Si le morceau est plus long que la vidéo, utilisez startFrom pour jouer la section de fin

Si l'utilisateur veut une voix-off :

1. Générez un script de narration à partir du contenu des scènes (~3 mots/seconde)
2. L'utilisateur enregistre ou utilise ElevenLabs
3. Intégrez avec une diminution de la musique (la musique descend à 0,10-0,12 pendant la narration)

Si l'utilisateur ignore l'audio : effectuez le rendu avec l'indicateur --muted.

Étape 12 – Rendu et aperçu

CRITIQUE : Passez toujours le fichier d'entrée pour éviter les invites interactives. N'exécutez jamais un simple npx remotion render – cela peut lancer un sélecteur de composition interactif. Spécifiez toujours le fichier d'entrée et l'ID de composition explicitement :

# Rendu final MP4 – spécifiez toujours le point d'entrée + l'ID de composition
npx remotion render src/Root.tsx <IDComposition> out/<nom>.mp4 --codec=h264 --crf=18

# Sans audio :
npx remotion render src/Root.tsx <IDComposition> out/<nom>.mp4 --codec=h264 --crf=18 --muted

Ouvrez la vidéo pour que l'utilisateur la révise.

---

Phase 4 : Révision

Objectif : Affiner la vidéo grâce à une révision experte et aux retours de l'utilisateur jusqu'à ce qu'elle soit prête à être diffusée.

Étape 13 – Révision multi-experte

Après que l'utilisateur a vu la vidéo, exécutez le protocole de révision à partir de references/expert-definitions.md.

Générez un tableau de bord (voir references/expert-definitions.md pour le modèle complet) :

| Dimension                        | Priorité | Score |
|----------------------------------|----------|-------|
| Clarté de l'accroche (3-5 premières s) | Critique | ?/5   |
| Message principal transmis       | Critique | ?/5   |
| Rythme / dynamisme               | Élevée   | ?/5   |
| Lisibilité visuelle              | Élevée   | ?/5   |
| Action cible claire              | Élevée   | ?/5   |
| Adéquation au public             | Moyenne  | ?/5   |

Ajoutez 2 à 3 dimensions spécifiques au type (par exemple, « Sensation premium visuelle » pour Minimal/Jobs, « Harmonie audio-visuelle » si de la musique a été ajoutée, « Réutilisabilité de la configuration » pour les rapports de données).

Chaque expert révise depuis son angle, y compris le Directeur de la photographie pour la composition visuelle et le Directeur musical pour l'audio (si de la musique a été ajoutée). Synthétisez en :

1. Points forts – ce qui fonctionne bien
2. Améliorations – changements spécifiques et actionnables
3. Verdict – diffuser tel quel, nécessite encore une passe, ou nécessite une refonte significative

Demandez à l'utilisateur quelles améliorations appliquer.

Étape 14 – Révision utilisateur et itération

La révision experte détecte les problèmes techniques, mais seul l'utilisateur sait si la vidéo semble juste.

« Maintenant que vous avez vu la vidéo et la révision experte – qu'en pensez-vous ?

1. Quelles scènes fonctionnent bien ?
2. Quelles scènes nécessitent des changements ? (capture d'écran des images spécifiques si possible)
3. Y a-t-il des problèmes de texte, de timing ou visuels ?
4. Quelque chose manque ou devrait être supprimé ? »

ATTENDEZ les retours de l'utilisateur.

Lorsque l'utilisateur fournit des retours :

1. Reconnaissez ce qu'il a aimé (renforce la direction)
2. Listez les changements spécifiques que vous allez apporter en fonction de ses notes
3. Apportez les modifications – modifiez les composants de scène, ajustez le timing, corrigez le texte
4. Effectuez un nouveau rendu et présentez la vidéo mise à jour
5. Demandez à nouveau : « Mieux ? Autre chose à ajuster ? »

Répétez cette boucle jusqu'à ce que l'utilisateur soit satisfait. Les vidéos typiques nécessitent 1 à 3 cycles de raffinement.

Modèles de retours courants et comment les gérer :

• « Trop rapide » → Augmentez les durées des scènes de 30 à 50 %, ajoutez plus de pauses dramatiques
• « Trop de texte » → Divisez les scènes, réduisez à 7 mots par image (style Jobs)
• « N'a pas l'air premium » → Passez à la direction Minimal/Jobs, ajoutez de l'espace négatif
• « La musique ne convient pas » → Essayez un autre morceau Pixabay, ajustez la courbe de volume
• « Mauvais ton » → Revenez à la direction créative, ajustez la palette de couleurs et la vitesse d'animation
• « La scène X est confuse » → Simplifiez à UNE idée, ajoutez une hiérarchie visuelle

---

Directives d'adaptation

Lorsque l'utilisateur a déjà un projet Remotion

Sautez l'étape de mise en place des Phases 1 et 2. Concentrez-vous sur la révision du code existant, la suggestion d'améliorations ou l'ajout de nouvelles scènes/compositions.

Lorsque l'utilisateur souhaite une vidéo rapide (sans délibération)

Compressez la Phase 1 en : demandez le type de vidéo + la direction créative en une seule question. Choisissez les 2 meilleurs experts, générez un scénario bref. Passer rapidement à la construction. Posez encore des questions sur la musique.

Lorsque l'utilisateur veut uniquement le concept (pas de code)

Exécutez les Phases 1 et 2 complètement. Produisez le brief créatif et le scénario sous forme de document. Sautez la Phase 3.

Lorsque l'utilisateur souhaite des vidéos à plusieurs variantes

Utilisez l'archétype Growth Marketing. Concevez la matrice des variantes (ce qui change par variante). Construisez une vidéo de base, puis montrez comment paramétrer les variations.