Vidéo Remotion

Que fait Vidéo Remotion ?

Créez des vidéos courtes animées (1080×1920) avec Remotion. Six types de vidéo, chacun avec un workflow recherche-puis-animation.

Pourquoi Remotion

Remotion rend du code, pas des pixels. L'IA comprend le code nativement — modifier une variable d'opacité est sans ambiguïté, contrairement à décider quels pixels constituent un « titre » dans une image matricielle. Le code offre également : une sortie indépendante de la résolution, des composants réutilisables, un aperçu instantané et un contrôle de version basé sur Git.

Prérequis

Cette compétence nécessite la compétence Remotion best practices. Avant de commencer, vérifiez que 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

Consultez la documentation des compétences Remotion Agent 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	Référence à charger
Un sujet à enseigner ou expliquer	Explication pédagogique	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	Bas de écran / Superposition	lower-thirds.md

Chargez uniquement le fichier de référence du type concerné 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 l'exige :

• integrations.md — À charger 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 — À charger 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, un rendu transparent, des transitions personnalisées ou un workflow de sauvegarde basé sur Git.

Workflow commun

Tous les types suivent le même schéma en deux étapes :

Étape 1 : Recherche / Analyse

Recueillez des informations en fonction du type de vidéo (recherche d'un sujet, scraping d'un site web, analyse d'avis, transcription d'une 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 & 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
• Décalage des éléments connexes de 8 à 12 images
• TransitionSeries avec transitions de fondu de 12 images entre les scènes
• stroke-dashoffset en SVG pour le traçage de diagrammes et de schémas
• interpolate() + tabular-nums pour les animations de comptage
• Effets de particules pour les moments de célébration ou de 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, schémas, icônes, animations étape par étape
• Pas de murs de texte — informations denses, mouvement magnifique, rythme rapide
• Kurzgesagt rencontre Fireship : des idées complexes rendues visuellement intuitives
• Tous les graphiques sont construits par défaut sous forme de composants SVG ; Lottie et 3D disponibles via integrations.md
• Respectez la zone de sécurité (voir defaults.md) — rien d'important près des bords

Crédits

Basé sur les invites vidéo de Sabrina Ramonov et les informations de production du tutoriel de montage vidéo IA Remotion. Adapté en compétence Agent avec des valeurs par défaut configurables et une divulgation progressive.