Quand l'utiliser
Utilisez cette compétence dès que vous manipulez du code Remotion afin d'obtenir les connaissances spécifiques au domaine.
Configuration d'un nouveau projet
Dans un dossier ou espace de travail vide sans projet Remotion existant, créez-en un avec :
npx create-video@latest --yes --blank --no-tailwind my-video
Remplacez my-video par un nom de projet approprié.
Lancement de la prévisualisation
Lancez le Studio Remotion pour prévisualiser une vidéo :
npx remotion studio
Optionnel : vérification d'une seule image
Vous pouvez effectuer le rendu d'une seule image avec la CLI pour vérifier la mise en page, les couleurs ou le timing. Ignorez cette étape pour des modifications triviales, des refactorisations pures, ou lorsque vous avez déjà suffisamment confiance grâce au Studio ou aux rendus précédents.
npx remotion still [composition-id] --scale=0.25 --frame=30
À 30 images par seconde, --frame=30 correspond à la première seconde (le paramètre --frame est basé sur zéro).
Sous-titres
Lorsque vous traitez des sous-titres, chargez le fichier ./rules/subtitles.md pour plus d'informations.
Utilisation de FFmpeg
Pour certaines opérations vidéo telles que le rognage ou la détection de silence, FFmpeg doit être utilisé. Chargez le fichier ./rules/ffmpeg.md pour plus d'informations.
Détection de silence
Pour détecter et rogner les segments silencieux de fichiers audio ou vidéo, chargez le fichier ./rules/silence-detection.md.
Visualisation audio
Pour visualiser de l'audio (barres de spectre, formes d'onde, effets réactifs aux basses), chargez le fichier ./rules/audio-visualization.md pour plus d'informations.
Effets sonores
Pour utiliser des effets sonores, chargez le fichier ./rules/sfx.md pour plus d'informations.
Comment l'utiliser
Lisez les fichiers de règles individuels pour des explications détaillées et des exemples de code :
- rules/3d.md – Contenu 3D dans Remotion avec Three.js et React Three Fiber
- rules/animations.md – Compétences fondamentales en animation pour Remotion
- rules/assets.md – Importation d'images, vidéos, audio et polices dans Remotion
- rules/audio.md – Utilisation de l'audio et du son dans Remotion – importation, rognage, volume, vitesse, hauteur
- rules/calculate-metadata.md – Définition dynamique de la durée, des dimensions et des propriétés d'une composition
- rules/can-decode.md – Vérification du décodage d'une vidéo par le navigateur avec Mediabunny
- rules/charts.md – Modèles de graphiques et de visualisation de données pour Remotion (barres, secteurs, lignes, graphiques boursiers)
- rules/compositions.md – Définition de compositions, d'images fixes, de dossiers, de propriétés par défaut et de métadonnées dynamiques
- rules/extract-frames.md – Extraction d'images de vidéos à des instants précis avec Mediabunny
- rules/fonts.md – Chargement de polices Google et locales dans Remotion
- rules/get-audio-duration.md – Obtention de la durée d'un fichier audio en secondes avec Mediabunny
- rules/get-video-dimensions.md – Obtention de la largeur et de la hauteur d'un fichier vidéo avec Mediabunny
- rules/get-video-duration.md – Obtention de la durée d'un fichier vidéo en secondes avec Mediabunny
- rules/gifs.md – Affichage de GIF synchronisés avec la timeline de Remotion
- rules/images.md – Intégration d'images dans Remotion avec le composant Img
- rules/light-leaks.md – Effets de superposition de fuites de lumière avec @remotion/light-leaks
- rules/lottie.md – Intégration d'animations Lottie dans Remotion
- rules/measuring-dom-nodes.md – Mesure des dimensions d'éléments DOM dans Remotion
- rules/measuring-text.md – Mesure des dimensions du texte, ajustement du texte dans les conteneurs et détection de débordement
- rules/sequencing.md – Modèles de séquencement pour Remotion – délai, rognage, limitation de la durée des éléments
- rules/tailwind.md – Utilisation de TailwindCSS dans Remotion
- rules/text-animations.md – Modèles de typographie et d'animation de texte pour Remotion
- rules/timing.md – Temporisation avec interpolate et courbes de Bézier, ressorts
- rules/transitions.md – Modèles de transition de scènes pour Remotion
- rules/transparent-videos.md – Rendu d'une vidéo avec transparence
- rules/trimming.md – Modèles de rognage pour Remotion – couper le début ou la fin des animations
- rules/videos.md – Intégration de vidéos dans Remotion – rognage, volume, vitesse, boucle, hauteur
- rules/parameters.md – Rendre une vidéo paramétrable en ajoutant un schéma Zod
- rules/maps.md – Ajouter une carte avec Mapbox et l'animer
- rules/silence-detection.md – Détection adaptative du silence avec FFmpeg loudnorm et silencedetect
- rules/voiceover.md – Ajout d'une voix off générée par IA aux compositions Remotion avec ElevenLabs TTS
Source : remotion-dev/skills