Remotion | Make videos programmatically

Remotion – Créez des Vidéos Programmiquement avec React

Qu'est-ce que Remotion ?

Remotion est un framework de création vidéo qui permet aux développeurs de construire des vidéos de haute qualité en utilisant des composants React. Vous écrivez du code au lieu d'utiliser des éditeurs de timeline. Les vidéos sont rendues image par image, offrant un contrôle total sur les mises en page, les animations et le contenu basé sur des données.

Pourquoi Utiliser Remotion ?

• Génération de vidéos basée sur du code : Utilisez React/JavaScript pour créer des visuels dynamiques, des graphiques animés et des animations.
• Composabilité complète : Réutilisez des composants, des modèles et intégrez avec CSS, SVG, Canvas, WebGL.
• Options de rendu évolutives : Rendu local, côté serveur ou via des services cloud comme Remotion Lambda.
• Fonctionnalités prêtes pour l'entreprise : Inclut des options de licence pour les équipes, un support prioritaire et une utilisation à grande échelle.

Fonctionnalités Principales

• Rendu par frame React : Utilisez useCurrentFrame() et useVideoConfig() pour contrôler ce qui apparaît à chaque frame.
• Compositions : Définissez plusieurs "vidéos" avec différentes dimensions, durées et taux de frame dans un seul projet.
• Timeline & Éditeur Starter : Inclut une interface utilisateur de timeline intégrée, plusieurs couches, prévisualisation en filmstrip, glisser-déposer, zoom et édition basique.
• Support d'API riche : Accédez à des composants comme <Video>, <Audio>, <Image>, fonctions d'interpolation (interpolate, spring, etc.), intégrations Lottie, Three.js.
• Contenu dynamique et basé sur des données : Utilisez des appels API, des données JSON ou des sources externes pour générer des vidéos personnalisées ou automatisées (par exemple, style YouTube Wrapped).

Comment Commencer

1. Installez les prérequis : Node.js ≥ 16 ou Bun ≥ 1.0.3.

2. Structurez un nouveau projet :

   npx create-video@latest
   

   ou utilisez pnpm, yarn, ou bun.

3. Lancez l'environnement de développement :

   npm run dev
   

   ou npm run remotion pour ouvrir le Remotion Studio.

4. Définissez vos composants <Composition /> dans src/Root.tsx, en spécifiant la largeur, la hauteur, la durée et le taux de frame.

5. Dans votre composition, utilisez des composants React et des hooks d'animation (useCurrentFrame, useVideoConfig) pour rendre les visuels au fil du temps.

6. Rendez la sortie finale :

   npx remotion render [composition-id] [output-file.mp4]
   

7. Pour le rendu cloud ou l'automatisation, explorez Remotion Lambda ou des outils côté serveur similaires.

Conseils d'Utilisation

• Utilisez des animations via du code : interpolate, spring, interpolateColors offrent un contrôle précis.
• Structurez des visuels complexes avec des composants React réutilisables.
• Prévisualisez fréquemment en utilisant le studio intégré pour une itération plus rapide.
• Pour un rendu évolutif, connectez des outils cloud ou serveur—idéal pour des campagnes dynamiques automatisées.

FAQ

Q : Remotion est-il gratuit ?
R : Une licence gratuite couvre une utilisation individuelle et jusqu'à 3 développeurs. Les équipes (4+) ou les entreprises ont besoin d'une licence Company ou Enterprise payante (à partir de 100–500$/mois) avec un support prioritaire et des crédits.

Q : Comment le code React se transforme-t-il en vidéo ?
R : Remotion vous donne un numéro de frame et un canvas vide. Il rend chaque frame en exécutant vos composants React, puis les assemble en une vidéo MP4 complète en utilisant Puppeteer + FFMPEG ou WebCodecs.

Q : Comment Remotion se compare-t-il à Motion Canvas ?
R : Remotion utilise un arbre DOM complet pour le rendu avec React, tandis que Motion Canvas fonctionne via un seul contexte <canvas> et une API impérative. Remotion prend en charge l'intégration de contenu web complexe, tandis que Motion Canvas est optimisé pour les animations vectorielles. Remotion offre des fonctionnalités évolutives et pour entreprises ; Motion Canvas est plus simple et entièrement open-source.

Q : Ai-je besoin d'une interface graphique ?
R : Non. Vous écrivez du code React pour construire votre vidéo. Remotion Studio fournit une interface visuelle pour la prévisualisation et l'édition mais toute la logique réside dans le code.

Q : Puis-je récupérer des données et générer des vidéos dynamiquement ?
R : Oui. Vous pouvez intégrer des APIs, des données JSON ou des données runtime pour produire des vidéos programmatiquement (par exemple, des clips personnalisés hebdomadaires).