Production Vidéo Remotion

Compétence de production vidéo programmable utilisant Remotion. Générez des vidéos automatisées à partir d'instructions textuelles et produisez des vidéos cohérentes et alignées sur la marque à grande échelle.

Quand utiliser cette compétence

Génération automatisée de vidéos : Générez des vidéos à partir d'instructions textuelles
Production vidéo de marque : Vidéos en grand volume avec un style cohérent
Contenu programmable : Combinez narration, visuels et animation
Contenu marketing : Présentations produits, intégrations, vidéos promotionnelles

Instructions

Étape 1 : Définir le Cahier des Charges Vidéo

video_spec:
  audience: [public cible]
  goal: [objectif vidéo]
  duration: [durée totale - 30s, 60s, 90s]
  aspect_ratio: "16:9" | "1:1" | "9:16"
  tone: "fast" | "calm" | "cinematic"
  voice:
    style: [style de narration]
    language: [langue]

Étape 2 : Définir les Scènes

Gabarit de structuration des scènes :

## Plan des Scènes

### Scène 1 : Accroche (0:00 - 0:05)
- **Visuel** : Apparition du logo produit
- **Audio** : Intro entraînante
- **Texte** : "Transformez votre flux de travail"
- **Transition** : Fondu → Scène 2

### Scène 2 : Problème (0:05 - 0:15)
- **Visuel** : Illustration de l'état problématique
- **Audio** : Début de la narration
- **Texte** : Superposition du message clé
- **Transition** : Glissement vers la gauche

### Scène 3 : Solution (0:15 - 0:30)
...

Étape 3 : Préparer les Assets

# Liste de vérification des assets
assets/
├── logos/
│   ├── logo-main.svg
│   └── logo-white.svg
├── screenshots/
│   ├── dashboard.png
│   └── feature-1.png
├── audio/
│   ├── bgm.mp3
│   └── narration.mp3
└── fonts/
    └── brand-font.woff2

Règles de préparation des assets :

Logo : SVG ou PNG haute résolution
Captures d'écran : Normaliser au format cible
Audio : MP3 ou WAV ; normaliser le volume
Polices : Webfont ou fichiers de polices locales

Étape 4 : Implémenter la Composition Remotion

// src/Video.tsx
import { Composition } from 'remotion';
import { IntroScene } from './scenes/IntroScene';
import { ProblemScene } from './scenes/ProblemScene';
import { SolutionScene } from './scenes/SolutionScene';
import { CTAScene } from './scenes/CTAScene';

export const RemotionVideo: React.FC = () => {
  return (
    <>
      <Composition
        id="ProductIntro"
        component={ProductIntro}
        durationInFrames={1800} // 60s at 30fps
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};

// Exemple de composant de scène
const IntroScene: React.FC<{ frame: number }> = ({ frame }) => {
  const opacity = interpolate(frame, [0, 30], [0, 1]);

  return (
    <AbsoluteFill style={{ opacity }}>
      <Logo />
      <Title>Transformez votre flux de travail</Title>
    </AbsoluteFill>
  );
};

Étape 5 : Rendu et Validation Qualité

# 1. Rendu d'aperçu (basse qualité)
npx remotion preview src/Video.tsx

# 2. Vérifications qualité
- [ ] Timing
- [ ] Synchronisation audio
- [ ] Lisibilité du texte
- [ ] Transitions fluides

# 3. Rendu final
npx remotion render src/Video.tsx ProductIntro out/video.mp4

Exemples

Exemple 1 : Vidéo de Présentation Produit

Invite :

Crée une vidéo de présentation produit de 60s avec 6 scènes,
ton entraînant et sortie 16:9. Inclus un appel à l'action à la fin.

Sortie attendue :

## Répartition des Scènes
1. Accroche (0:00-0:05) : Logo + slogan
2. Problème (0:05-0:15) : Visualisation du point de douleur
3. Solution (0:15-0:30) : Démo du produit
4. Fonctionnalités (0:30-0:45) : Avantages clés (3 éléments)
5. Preuve sociale (0:45-0:55) : Témoignage/statistiques
6. CTA (0:55-1:00) : Appel à l'action + contact

## Structure Remotion
- src/scenes/HookScene.tsx
- src/scenes/ProblemScene.tsx
- src/scenes/SolutionScene.tsx
- src/scenes/FeaturesScene.tsx
- src/scenes/SocialProofScene.tsx
- src/scenes/CTAScene.tsx

Exemple 2 : Parcours d'Intégration

Invite :

Génère un parcours d'intégration de 45s utilisant des captures d'écran,
avec annotations et format 9:16 pour mobile.

Sortie attendue :

Plan de scène avec 5 étapes
Liste des assets (captures d'écran, flèches d'annotation)
Superpositions de texte et transitions
Marges appliquées pour la sécurité mobile

Bonnes pratiques

Scènes courtes : Gardez chaque scène claire de 5 à 10 secondes
Typographie cohérente : Définissez une échelle typographique
Synchronisation audio : Alignez les indices de narration avec les visuels
Réutilisation des modèles : Sauvegardez les compositions réutilisables
Zones de sécurité : Réservez des marges pour les formats mobiles

Pièges courants

Surcharge de texte : Limitez la quantité de texte par scène
Ignorer les zones de sécurité mobile : Vérifiez les bords pour les sorties 9:16
Rendu final avant validation qualité : Vérifiez toujours d'abord dans l'aperçu

Dépannage

Problème : Audio et visuels désynchronisés

Cause : Décalage de timing des images Solution : Recalculez les images et alignez les horodatages

Problème : Le rendu est lent ou échoue

Cause : Assets ou effets lourds Solution : Compressez les assets et simplifiez les animations

Problème : Texte illisible

Cause : Taille de police trop petite ou contraste insuffisant Solution : Utilisez des polices d'au moins 24px et des couleurs à fort contraste

Format de sortie

## Rapport de Production Vidéo

### Spécifications
- Durée : 60s
- Format : 16:9
- FPS : 30

### Plan des Scènes
| Scène | Durée | Visuel | Audio | Transition |
|---|---|---|---|---|
| Accroche | 0:00-0:05 | Apparition logo | Début BGM | Fondu |
| ... | ... | ... | ... | ... |

### Assets
- [ ] logo.svg
- [ ] captures d'écran (3)
- [ ] bgm.mp3
- [ ] narration.mp3

### Liste de Vérification du Rendu
- [ ] Validation qualité de l'aperçu réussie
- [ ] Synchronisation audio vérifiée
- [ ] Zones de sécurité vérifiées
- [ ] Rendu final terminé

Workflow Multi-Agent

Validation et Rétrospectives

Round 1 (Orchestrateur) : Complétude du cahier des charges, couverture des scènes
Round 2 (Analyste) : Cohérence narrative, révision du rythme
Round 3 (Exécuteur) : Valider la liste de vérification de la préparation au rendu

Rôles des Agents

Agent	Rôle
Claude	Planification des scènes, rédaction du script
Gemini	Analyse des assets, suggestions d'optimisation
Codex	Générer le code Remotion, exécuter les rendus

Métadonnées

Version

Version actuelle : 1.0.0
Dernière mise à jour : 2026-01-21
Plateformes compatibles : Claude, ChatGPT, Gemini, Codex

JEO-tech-ai/oh-my-unity3d

Qu'est-ce que oh-my-unity3d ?

Demander à votre IA préférée

Documentation