davila7/remotion

Que fait remotion ?

Bonnes pratiques et guide complet pour Remotion – création vidéo programmatique en React avec animations, compositions et gestion multimédia.

Qu'est-ce que Remotion ?

Remotion est une bibliothèque qui vous permet de créer des vidéos en utilisant React. Chaque image d'une vidéo est un composant React que vous contrôlez – vous pouvez utiliser tout le pouvoir de React (composants, props, hooks) pour générer du contenu vidéo.

Concepts clés

1. Compositions

Une composition définit une scène dans votre vidéo. Spécifiez la durée (durationInFrames), les dimensions (fps, width, height) et l'ID.

import { Composition } from 'remotion';

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="HelloWorld"
        component={HelloWorld}
        durationInFrames={150}
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};

2. Images clés et useCurrentFrame()

Récupérez l'image actuelle avec useCurrentFrame() et utilisez interpolate() pour animer les propriétés au fil du temps.

import { useCurrentFrame, interpolate } from 'remotion';

export const MyAnimatedComponent: React.FC = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1]);
  return <div style={{ opacity }}>Bonjour</div>;
};

3. Calques et flexbox

Superposez du contenu en utilisant CSS flexbox dans vos composants React. Aucune limitation – tout ce qui est possible dans le navigateur peut être rendu dans une vidéo.

export const Overlay: React.FC = () => {
  return (
    <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}>
      {/* Votre calque ici */}
    </div>
  );
};

4. Médias et ressources

Importez des images, des vidéos ou de l'audio directement dans vos composants. Utilisez <Img>, <Video> et <Audio> de Remotion pour une gestion correcte du timing.

import { Img, Video, Audio } from 'remotion';

export const MediaExample: React.FC = () => {
  return (
    <>
      <Img src={require('./image.png')} />
      <Video src={require('./video.mp4')} />
      <Audio src={require('./audio.mp3')} />
    </>
  );
};

5. Effets et transitions

Créez des transitions fluides entre les scènes, des fondues, des glissements et bien plus encore. Utilisez interpolate() avec des plages pour contrôler les effets.

const slideIn = interpolate(frame, [0, 30], [-100, 0], {
  extrapolateRight: 'clamp',
  extrapolateLeft: 'clamp',
});

6. Exportation

Rendez votre vidéo depuis la ligne de commande avec npx remotion render.

npx remotion render src/index.ts HelloWorld out/video.mp4

Bonnes pratiques

• Utilisez des composants React – divisez votre vidéo en composants réutilisables.
• Profitez du rendu parallèle – Remotion utilise plusieurs cœurs pour accélérer le rendu.
• Testez avec l'onglet Composition – l'interface de développement permet de prévisualiser chaque image.
• Optimisez avec useMemo() – évitez les recalculs inutiles pour les animations complexes.
• Utilisez le mode parallèle – pour des vidéos longues, activez --parallel lors du rendu.

Ressources

• Documentation officielle Remotion
• Exemples
• Dépôt GitHub

Licence

Ce guide est fourni à titre informatif. Remotion lui-même est sous licence MIT (sauf pour les fonctionnalités avancées sous licence Remotion).

---

Traduit et adapté pour les agents IA.