Utilisation de l’éditeur vidéo

L’éditeur est l’endroit où vous écrivez le code de composition Remotion, prévisualisez les images et générez des vidéos.

Disposition de l’éditeur

• Barre supérieure — Nom du projet, bouton retour, Modèles, Bibliothèque de médias, Paramètres et commandes de rendu
• Panneau gauche (Chat IA) — Assistant IA capable de générer et de modifier le code Remotion
• Panneau central (Éditeur de code) — Éditeur de code Monaco avec prise en charge TypeScript/JSX et coloration syntaxique
• Onglet Aperçu — Visualiser des images fixes ou la sortie vidéo rendue

Éditeur de code

L’éditeur de code utilise Monaco (moteur identique à VS Code) avec prise en charge complète de TypeScript :

• Coloration syntaxique pour TypeScript et JSX
• Auto-complétion pour les API Remotion (AbsoluteFill, useCurrentFrame, interpolate, etc.)
• Ctrl+S pour sauvegarder
• Sauvegarde automatique lors de l’application du code IA

Aperçu

Cliquez sur le bouton Aperçu pour générer une image fixe de votre composition. Vous pouvez spécifier l’image à prévisualiser et utiliser l’onglet aperçu pour consulter le résultat.

Code de composition

Votre code doit exporter un composant UserComp qui utilise les API Remotion :

• useCurrentFrame() — Obtenir le numéro de l’image courante
• useVideoConfig() — Obtenir la FPS, la largeur, la hauteur, la durée
• interpolate() — Animer des valeurs entre les images clés
• spring() — Interpolation d’animation basée sur un ressort
• AbsoluteFill — Conteneur plein cadre
• Sequence — Sections décalées dans le temps