Remotion best practices pour créer des vidéos React

Quand l'utiliser

Utilisez cette skill chaque fois que vous travaillez avec du code Remotion pour obtenir des connaissances spécifiques au domaine.

Configuration d'un nouveau projet

Lorsque vous êtes dans un dossier vide ou un workspace sans projet Remotion existant, générez-en un avec :

npx create-video@latest --yes --blank --no-tailwind my-video

Remplacez my-video par un nom de projet approprié.

Concevoir une vidéo

Animez les propriétés avec useCurrentFrame() et interpolate(). Utilisez Easing pour personnaliser le timing de l'animation.

import { useCurrentFrame, Easing } from "remotion";

export const FadeIn = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateRight: "clamp",
    extrapolateLeft: "clamp",
    easing: Easing.bezier(0.16, 1, 0.3, 1),
  });

  return <div style={{ opacity }}>Hello World!</div>;
};

Les transitions ou animations CSS sont INTERDITES - elles ne seront pas rendues correctement. Les noms de classes d'animation Tailwind sont INTERDITS - ils ne seront pas rendus correctement.

Placez les assets dans le dossier public/ à la racine de votre projet.

Utilisez staticFile() pour référencer les fichiers du dossier public/.

Ajoutez des images avec le composant <Img> :

import { Img, staticFile } from "remotion";

export const MyComposition = () => {
  return <Img src={staticFile("logo.png")} style={{ width: 100, height: 100 }} />;
};

Ajoutez des vidéos avec le composant <Video> de @remotion/media :

import { Video } from "@remotion/media";
import { staticFile } from "remotion";

export const MyComposition = () => {
  return <Video src={staticFile("video.mp4")} style={{ opacity: 0.5 }} />;
};

Ajoutez du son avec le composant <Audio> de @remotion/media :

import { Audio } from "@remotion/media";
import { staticFile } from "remotion";

export const MyComposition = () => {
  return <Audio src={staticFile("audio.mp3")} />;
};

Les assets peuvent aussi être référencés par des URLs distantes :

import { Video } from "@remotion/media";

export const MyComposition = () => {
  return <Video src="https://remotion.media/video.mp4" />
};

Pour retarder le contenu, enveloppez-le dans <Sequence> et utilisez from. Pour limiter la durée d'un élément, utilisez durationInFrames de <Sequence>. Par défaut, <Sequence> remplit l'espace absolu. Pour du contenu inline, utilisez layout="none".

import { Sequence } from "remotion";

export const Title = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateRight: "clamp",
    extrapolateLeft: "clamp",
    easing: Easing.bezier(0.16, 1, 0.3, 1),
  });

  return <div style={{ opacity }}>Title</div>;
};

export const Subtitle = () => {
  return <div>Subtitle</div>;
};

const Main = () => {
  const {fps} = useVideoConfig();

  return (
    <AbsoluteFill>
      <Sequence>
        <Background />
      </Sequence>
      <Sequence from={1 * fps} durationInFrames={2 * fps} layout="none">
        <Title />
      </Sequence>
      <Sequence from={2 * fps} durationInFrames={2 * fps} layout="none">
        <Subtitle />
      </Sequence>
    </AbsoluteFill>
  );
}

La largeur, la hauteur, les fps et la durée d'une vidéo sont définis dans src/Root.tsx :

import { Composition } from "remotion";
import { MyComposition } from "./MyComposition";

export const RemotionRoot = () => {
  return (
    <Composition
      id="MyComposition"
      component={MyComposition}
      durationInFrames={100}
      fps={30}
      width={1080}
      height={1080}
    />
  );
};

Les métadonnées peuvent aussi être calculées dynamiquement :

import { Composition, CalculateMetadataFunction } from "remotion";
import { MyComposition, MyCompositionProps } from "./MyComposition";

const calculateMetadata: CalculateMetadataFunction<
  MyCompositionProps
> = async ({ props, abortSignal }) => {
  const data = await fetch(`https://api.example.com/video/${props.videoId}`, {
    signal: abortSignal,
  }).then((res) => res.json());

  return {
    durationInFrames: Math.ceil(data.duration * 30),
    props: {
      ...props,
      videoUrl: data.url,
    },
    width: 1080,
    height: 1080,
  };
};

export const RemotionRoot = () => {
  return (
    <Composition
      id="MyComposition"
      component={MyComposition}
      fps={30}
      width={1080}
      height={1080}
      defaultProps={{ videoId: "abc123" }}
      calculateMetadata={calculateMetadata}
    />
  );
};

Démarrer l'aperçu

Lancez Remotion Studio pour prévisualiser une vidéo :

npx remotion studio

Optionnel : vérification du rendu d'une seule frame

Vous pouvez rendre une seule frame avec la CLI pour vérifier la mise en page, les couleurs ou le timing. Ignorez-le pour les modifications triviales, les refactorisations pures, ou quand vous avez déjà assez de confiance avec Studio ou les rendus précédents.

npx remotion still [composition-id] --scale=0.25 --frame=30

À 30 fps, --frame=30 est la marque d'une seconde (--frame est zéro-basé).

Sous-titres

Quand vous travaillez avec des sous-titres, chargez le fichier ./rules/subtitles.md pour plus d'informations.

Utiliser FFmpeg

Pour certaines opérations vidéo, comme couper des vidéos ou détecter du silence, FFmpeg devrait être utilisé. Chargez le fichier ./rules/ffmpeg.md pour plus d'informations.

Détection de silence

Quand vous avez besoin de détecter et découper les segments silencieux des fichiers vidéo ou audio, chargez le fichier ./rules/silence-detection.md.

Visualisation audio

Quand vous avez besoin de visualiser 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

Quand vous avez besoin d'utiliser des effets sonores, chargez le fichier ./rules/sfx.md pour plus d'informations.

Contenu 3D

Consultez rules/3d.md pour le contenu 3D dans Remotion avec Three.js et React Three Fiber.

Audio avancé

Consultez rules/audio.md pour les fonctionnalités audio avancées comme la découpe, le volume, la vitesse, le pitch.

Durée, dimensions et données dynamiques

Consultez rules/calculate-metadata.md pour définir dynamiquement la durée, les dimensions et les props de composition.

Compositions avancées

Consultez rules/compositions.md pour apprendre comment définir les stills, les dossiers, les props par défaut et comment imbriquer les compositions.

Google Fonts

C'est la méthode recommandée pour charger les polices dans Remotion. Consultez rules/google-fonts.md pour apprendre comment charger les Google Fonts.

Polices locales

Consultez rules/local-fonts.md pour charger les polices locales.

Obtenir la durée du son

Consultez rules/get-audio-duration.md pour obtenir la durée d'un fichier audio en secondes avec Mediabunny.

Obtenir les dimensions de la vidéo

Consultez rules/get-video-dimensions.md pour obtenir la largeur et la hauteur d'un fichier vidéo avec Mediabunny.

Obtenir la durée de la vidéo

Consultez rules/get-video-duration.md pour obtenir la durée d'un fichier vidéo en secondes avec Mediabunny.

GIFs

Consultez rules/gifs.md pour apprendre comment afficher des GIFs synchronisés avec la timeline de Remotion.

Images avancées

Consultez rules/images.md pour le dimensionnement et le positionnement des images, les chemins d'images dynamiques, et l'obtention des dimensions d'une image.

Fuites de lumière

Consultez rules/light-leaks.md pour les effets de superposition de fuites de lumière avec @remotion/light-leaks.

Animations Lottie

Consultez rules/lottie.md pour l'intégration des animations Lottie dans Remotion.

Mesurer les nœuds DOM

Consultez rules/measuring-dom-nodes.md pour mesurer les dimensions des éléments DOM dans Remotion.

Mesurer le texte

Consultez rules/measuring-text.md pour mesurer les dimensions du texte, adapter le texte aux conteneurs, et vérifier le débordement.

Séquençage avancé

Consultez rules/sequencing.md pour d'autres modèles de séquençage - retard, découpe, limitation de la durée des éléments.

TailwindCSS

Consultez rules/tailwind.md pour utiliser TailwindCSS dans Remotion.

Animations de texte

Consultez rules/text-animations.md pour la typographie et les modèles d'animation de texte.

Timing avancé

Consultez rules/timing.md pour le timing avancé avec interpolate et l'easing Bézier, et les ressorts.

Transitions

Consultez rules/transitions.md pour les modèles de transition de scène.

Vidéos transparentes

Consultez rules/transparent-videos.md pour rendre une vidéo avec transparence.

Découpe

Consultez rules/trimming.md pour les modèles de découpe - couper le début ou la fin des animations.

Vidéos avancées

Consultez rules/videos.md pour les connaissances avancées sur l'intégration de vidéos - découpe, volume, vitesse, boucle, pitch.

Vidéos paramétrées

Consultez rules/parameters.md pour rendre une composition paramétrizable en ajoutant un schéma Zod.

Cartes

Consultez rules/maps.md pour ajouter une carte avec Mapbox et l'animer.

Voix-off

Consultez rules/voiceover.md pour ajouter une voix-off générée par IA à des compositions Remotion avec ElevenLabs TTS.

remotion-best-practices