Kit d'outils vidéo Remotion
Écrivez des composants React, obtenez de vraies vidéos MP4. Ce skill apprend à votre agent IA comment construire avec Remotion — d'une première animation à un pipeline de rendu de production.
29 règles. Toutes les fonctionnalités majeures de Remotion couvertes.
Ce que vous pouvez construire avec cela
Vidéo personnalisée à grande échelle Transmettez des données utilisateur sous forme de props JSON, générez une vidéo unique par utilisateur. Pensez à Spotify Wrapped, GitHub Unwrapped, tutoriels d'intégration — un modèle, des milliers de sorties.
Publications automatisées pour les réseaux sociaux Extrayez des données en direct (statistiques, classements, métriques produit) et générez des publications vidéo quotidiennes ou hebdomadaires sans que personne n'utilise un éditeur de timeline.
Publicités et vidéos marketing dynamiques Remplacez le nom du client, l'image du produit, le prix. Même modèle, variations infinies. Rendu côté serveur via API ou Lambda.
Visualisations de données animées Transformez des tableaux de bord et des rapports KPI en clips vidéo partageables avec des graphiques animés et des transitions.
Sous-titres TikTok et Reels Transcrivez l'audio, affichez des sous-titres mot par mot surlignés, exportez prêt à être téléchargé.
Vidéos de démonstration de produits Générez automatiquement à partir de votre base de données — images, spécifications, prix — directement en MP4.
Contenu éducatif et explicatif Matériel de cours animé, vidéos de certificat, tutoriels pas à pas — tous pilotés par le code.
Génération vidéo en tant que service Exposez le rendu en tant que point de terminaison HTTP. Votre application envoie du JSON, reçoit un fichier vidéo.
Prérequis
- Node.js 18+
- React 18+ (Remotion effectue le rendu des composants React image par image)
- Remotion — initialiser avec
npx create-video@latest - FFmpeg — fourni avec
@remotion/renderer, aucune installation séparée nécessaire - Pour le rendu serverless : compte AWS (Lambda) ou GCP (Cloud Run)
Ce qui est inclus
Cœur
| Règle | Description |
|---|---|
| Compositions | Définir des vidéos, des images fixes, des dossiers, des props par défaut, des métadonnées dynamiques |
| Rendu | CLI, API Node.js, AWS Lambda, Cloud Run, modèles de serveur Express |
| Calculer les métadonnées | Définir la durée, les dimensions et les props de manière dynamique au moment du rendu |
Animation et timing
| Règle | Description |
|---|---|
| Animations | Fondu, échelle, rotation, glissement |
| Timing | Courbes d'interpolation, easing, physique des ressorts |
| Séquençage | Retarder, enchaîner et orchestrer les scènes |
| Transitions | Transitions de scène à scène |
| Rognage | Couper le début ou la fin de toute animation |
Texte et typographie
| Règle | Description |
|---|---|
| Animations de texte | Machine à écrire, surlignage de mots, effets de révélation |
| Polices | Google Fonts et chargement de polices locales |
| Mesure du texte | Adapter le texte aux conteneurs, détecter les débordements |
Médias
| Règle | Description |
|---|---|
| Vidéos | Intégrer, rogner, vitesse, volume, boucle, changement de hauteur |
| Audio | Importer, rogner, fondu, contrôle du volume et de la vitesse |
| Images | Le composant Img |
| GIFs | Lecture GIF synchronisée avec la timeline |
| Ressources | Importer n'importe quel média dans les compositions |
| Vérification de décodage | Valider la compatibilité du navigateur |
Sous-titres et légendes
| Règle | Description |
|---|---|
| Transcrire les sous-titres | Audio vers sous-titres via Whisper, Deepgram ou AssemblyAI |
| Afficher les sous-titres | Surlignage mot par mot de style TikTok |
| Importer SRT | Charger des fichiers .srt existants |
Visualisation de données
| Règle | Description |
|---|---|
| Graphiques | Graphiques à barres animés, courbes, visuels basés sur les données |
Avancé
| Règle | Description |
|---|---|
| Contenu 3D | Three.js et React Three Fiber |
| Lottie | Animations After Effects via Lottie |
| TailwindCSS | Styliser les compositions avec Tailwind |
| Mesure DOM | Mesurer les dimensions des éléments au moment du rendu |
Utilitaires médias
| Règle | Description |
|---|---|
| Durée vidéo | Obtenir la durée en secondes |
| Dimensions vidéo | Obtenir la largeur et la hauteur |
| Durée audio | Obtenir la durée audio |
| Extraire des images | Extraire des images à des horodatages spécifiques |
Démarrage rapide
# Créer un projet
npx create-video@latest my-video
# Aperçu dans le navigateur
cd my-video && npm start
# Rendu vers MP4
npx remotion render src/index.ts MyComposition out/video.mp4
# Transmettre des données dynamiques
npx remotion render src/index.ts MyComposition out.mp4 --props '{"title": "Hello"}'
Contribuer
Source : github.com/shreefentsar/remotion-video-toolkit
Quelque chose manque ? Vous avez trouvé une meilleure approche ? Ouvrez une PR — nouvelles règles, exemples améliorés, corrections de bugs, tout est bienvenu.
Construit par Zone 99