Vidéo Remotion
Créez des vidéos courtes animées (1080x1920) avec Remotion. Six types de vidéos, chacun suivant un flux de travail recherche puis animation.
Pourquoi Remotion
Remotion rend du code, pas des pixels. L'IA comprend le code nativement — changer une variable d'opacité est sans équivoque, contrairement à décider quels pixels constituent un « titre » dans une image matricielle. Le code signifie aussi : sortie indépendante de la résolution, composants réutilisables, aperçu instantané et contrôle de version basé sur Git.
Prérequis
Cette compétence nécessite la compétence de bonnes pratiques Remotion. Avant de commencer, vérifiez si les compétences Remotion sont installées dans le projet. Si ce n'est pas le cas, demandez à l'utilisateur d'exécuter :
npx skills add remotion-dev/skills
Voir la documentation des compétences d'agent Remotion pour plus de détails.
Sélection du type
Déterminez le type de vidéo à partir de l'entrée de l'utilisateur :
| L'utilisateur fournit | Type de vidéo | Charger la référence |
|---|---|---|
| Un sujet à enseigner ou expliquer | Explicatif Éducatif | education-explainer.md |
| Une URL de produit | Démo Produit + Lancement | product-demo.md |
| Un lien Google Business / Maps | Témoignage / Preuve Sociale | testimonial.md |
| Un fichier vidéo tête parlante (9:16) | Avatar + Superpositions Animées | avatar-overlays.md |
| Un fichier CSV ou des données | Tableau de Bord de Visualisation de Données | data-viz.md |
| Une URL de chaîne/marque/réseau social | Incrustation Tiers Inférieure | lower-thirds.md |
Chargez uniquement le fichier de référence du type pertinent ainsi que defaults.md pour la configuration partagée (zone de sécurité, polices, règles d'animation, style visuel).
Références supplémentaires (chargement à la demande)
Ces fichiers ne sont pas nécessaires pour chaque vidéo. Chargez-les uniquement lorsque la situation le nécessite :
- integrations.md — Chargez lorsque l'utilisateur a besoin de Playwright (web scraping), d'animations Lottie, d'actifs 3D, de voix off ou d'images générées par IA. Certaines intégrations nécessitent des clés API — demandez toujours à l'utilisateur d'abord.
- advanced-patterns.md — Chargez lorsque l'utilisateur souhaite des curseurs de timing, des contrôles pour chaque composition, la génération multi-vidéo à partir d'un catalogue, le rendu transparent, des transitions personnalisées ou un flux de travail de sauvegarde basé sur Git.
Flux de travail commun
Tous les types suivent le même modèle en deux étapes :
Étape 1 : Recherche / Scraping / Analyse
Rassemblez les informations en fonction du type de vidéo (recherche de sujet, scraping de site web, scraping d'avis, transcription de vidéo ou analyse de données). Présentez les résultats et un plan de scènes proposé. Attendez l'approbation de l'utilisateur avant d'écrire du code.
Étape 2 : Conception et Animation
Après approbation, construisez toutes les scènes sous forme de composants React Remotion. Suivez les règles d'animation de defaults.md :
- Entrées avec ressort (
damping: 200), pas de mouvement linéaire - Espacez les éléments liés de 8 à 12 images
TransitionSeriesavec des transitions de fondu sur 12 images entre les scènesstroke-dashoffsetSVG pour le dessin de diagrammes/logigrammesinterpolate()+tabular-numspour les animations de comptage- Effets de particules pour les moments de célébration/clôture
Étape 3 : Polissage (optionnel)
Une fois la vidéo lue correctement, proposez d'ajouter des contrôles :
- Curseurs de timing — voir advanced-patterns.md pour ajouter des contrôles en temps réel aux compositions
- Intégrations — voir integrations.md pour les animations Lottie, les effets 3D, les voix off, etc.
Aperçu
Après la construction, lancez Remotion Studio :
npx remotion studio
Principes de conception
- Chaque scène a besoin d'une métaphore visuelle claire — diagrammes, logigrammes, icônes, animations étape par étape
- Pas de murs de texte — informations denses, mouvements élégants, rythme rapide
- Kurzgesagt rencontre Fireship : des idées complexes rendues visuellement intuitives
- Tous les graphiques sont construits en tant que composants SVG par défaut ; Lottie et 3D disponibles via integrations.md
- Respectez la zone de sécurité (voir defaults.md) — rien d'important près des bords
Crédit
Basé sur les prompts vidéo de Sabrina Ramonov et les informations de production du tutoriel de montage vidéo IA Remotion. Adapté en compétence d'agent avec des valeurs par défaut configurables et une divulgation progressive.