Écrire du Remotion React Markup pour vos agents

Ceci est un guide pour écrire du Remotion React Markup. Si ce n'est pas pertinent, charger plutôt Remotion Best Practices.

Règles générales

Animer les propriétés en utilisant useCurrentFrame() et interpolate().

Préférer interpolate() à spring().

Utiliser Easing.bezier() pour personnaliser le timing, y compris les mouvements saccadés ou dépassants. Utiliser Easing.spring() si vous voulez des animations à ressort.

Les éléments HTML qui ont du sens à rendre interactifs dans le Studio doivent utiliser Interactive : <div> -> <Interactive.Div>.
Définir une prop name descriptive telle que name="Hero title" pour Interactive, Solid, Sequence.

import { useCurrentFrame, Easing, interpolate, Interactive } from "remotion";

export const FadeIn = () => {
  const frame = useCurrentFrame();

  return (
    <Interactive.Div
      name="Title"
      style={{
        opacity: interpolate(frame, [0, 60], [0, 1], {
          extrapolateRight: "clamp",
          extrapolateLeft: "clamp",
          easing: Easing.bezier(0.16, 1, 0.3, 1),
        }),
      }}
    >
      Hello World!
    </Interactive.Div>
  );
};

Garder l'appel interpolate() en ligne dans la prop style. Préférer les propriétés CSS scale, translate, rotate à transform.

// 👍 Images clés modifiables en ligne et raccourcis de transformation
style={{
  scale: interpolate(frame, [0, 100], [0, 1]),
  translate: interpolate(frame, [0, 100], ["0px 0px", "100px 100px"]),
  rotate: interpolate(frame, [0, 100], ["20deg", "90deg"]),
}}

// 👎 Les valeurs cachées et les chaînes de transformation deviennent plus difficiles à modifier dans Studio
const scale = interpolate(frame, [0, 100], [0, 1]);

style={{
  transform: `scale(${scale})`,
}}

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

Placer les ressources dans le dossier public/ à la racine du projet.

Utiliser staticFile() pour référencer des fichiers du dossier public/.

Ajouter de la vidéo et de l'audio avec @remotion/media.
Ajouter des images avec le composant <Img>. Utiliser staticFile() pour les fichiers dans public/ ou passer directement une URL distante :

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

export const MyComposition = () => {
  return (
    <>
      <Video src={staticFile("video.mp4")} style={{ opacity: 0.5 }} />
      <Audio src={staticFile("audio.mp3")} />
      <Img src={staticFile("logo.png")} style={{ width: 100, height: 100 }} />
      <Video src="https://remotion.media/video.mp4" />
    </>
  );
};

Pour délayer le contenu, l'envelopper dans <Sequence> et utiliser from. Pour limiter la durée d'un élément, utiliser durationInFrames de <Sequence>. <Sequence> est par défaut un remplissage absolu couvrant la scène.
Pour le contenu en ligne, utiliser layout="none".

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

  return (
    <AbsoluteFill>
      <Sequence name="Background">
        <Background />
      </Sequence>
      <Sequence name="Title" from={30} durationInFrames={60} layout="none">
        <Title />
      </Sequence>
      <Sequence name="Subtitle" from={60} durationInFrames={60} layout="none">
        <Subtitle />
      </Sequence>
    </AbsoluteFill>
  );
}

export const Title = () => {
  const frame = useCurrentFrame();

  return (
    <div
      style={{
        opacity: interpolate(frame, [0, 60], [0, 1], {
          extrapolateRight: "clamp",
          extrapolateLeft: "clamp",
          easing: Easing.bezier(0.16, 1, 0.3, 1),
        }),
      }}
    >
      Title
    </div>
  );
};

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

Cartes

Voir map.md pour choisir entre les cartes statiques simples, les cartes Mapbox et les cartes MapLibre.

Voix off

Voir voiceover.md pour ajouter une voix off générée par IA aux compositions Remotion en utilisant ElevenLabs TTS.

Découpe

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

Intégration de vidéos

Voir embedding-videos.md pour des connaissances avancées sur l'intégration de vidéos - découpe, volume, vitesse, boucle, hauteur tonale.

Intégration d'audio

Voir audio.md pour les fonctionnalités audio avancées comme la découpe, le volume, la vitesse, la hauteur tonale.

Transitions

Voir transitions.md pour les modèles de transition de scène.

Effets visuels et de pixels

Lors de la création d'un effet visuel, préférer : 1. l'animation normale Remotion/HTML/CSS/SVG/filter/blend/mask, 2. un effet listé via effects.md, y compris sur le HTML affiché via <HtmlInCanvas>, 3. un createEffect() personnalisé via effects.md quand l'utilisateur demande un effet réutilisable/spécifique au projet, 4. un <HtmlInCanvas onPaint> personnalisé via html-in-canvas.md uniquement si aucun effet ne convient.

Pour les chevauchements de fuite de lumière, voir light-leaks.md. Docs : https://www.remotion.dev/docs/effects

Effets disponibles : brightness(), contrast(), colorKey(), duotone(), grayscale(), hue(), invert(), saturation(), tint(), linearGradient(), linearGradientTint(), thermalVision(), blur(), linearProgressiveBlur(), radialProgressiveBlur(), zoomBlur(), dropShadow(), glow(), lightTrail(), evolve(), venetianBlinds(), mirror(), scale(), uvTranslate(), xyTranslate(), barrelDistortion(), chromaticAberration(), fisheye(), cornerPin(), wave(), burlap(), emboss(), dotGrid(), halftone(), noise(), noiseDisplacement(), paper(), roughenEdges(), pattern(), pixelate(), pixelDissolve(), scanlines(), speckle(), shine(), shrinkwrap(), vignette(), contourLines(), checkerboard(), halftoneLinearGradient(), gridlines(), whiteNoise(), tvSignalOff(), lines(), rings(), waves(), zigzag(), lightLeak(), starburst().

Contenu 3D

Voir 3d.md pour le contenu 3D dans Remotion en utilisant Three.js et React Three Fiber.

Effets sonores

Quand il faut utiliser des effets sonores, charger le fichier ./sfx.md pour plus d'informations.

Visualisation audio

Quand il faut visualiser l'audio (barres de spectre, formes d'onde, effets réactifs à la basse), charger le fichier ./audio-visualization.md pour plus d'informations.

Sous-titres

Quand il s'agit de sous-titres ou de captions, charger la compétence Remotion Captions pour plus d'informations.

Google Fonts

Est la façon recommandée de charger des polices dans Remotion. Voir google-fonts.md pour savoir comment charger Google Fonts.

Polices locales

Voir local-fonts.md pour savoir comment charger des polices locales.

GIFs

Voir gifs.md pour savoir comment afficher des GIFs synchronisés avec la chronologie de Remotion.

Images avancées

Voir images.md pour le dimensionnement et le positionnement d'images, les chemins d'images dynamiques et l'obtention des dimensions d'images.

Animations Lottie

Voir lottie.md pour intégrer des animations Lottie dans Remotion.

Timing avancé

Voir timing.md pour le timing avancé avec interpolate et le easing Bézier, et les ressorts.

Vidéos paramétrées

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

Mesure de nœuds DOM

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

Mesure de texte

Voir measuring-text.md pour mesurer les dimensions du texte, ajuster le texte aux conteneurs et vérifier le débordement.

Utilisation de FFmpeg

Pour certaines opérations vidéo, comme la découpe de vidéos ou la détection de silence, FFmpeg doit être utilisé. Charger le fichier ./ffmpeg.md pour plus d'informations.

Détection de silence

Quand il faut détecter et découper les segments silencieux des fichiers vidéo ou audio, charger le fichier ./silence-detection.md.

Durée dynamique, dimensions et données

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

Compositions avancées

Voir compositions.md pour savoir comment définir des images fixes, des dossiers, des props par défaut et comment imbriquer les compositions.

Séquençage avancé

Voir sequencing.md pour plus de modèles de séquençage - délai, découpe, limitation de durée des éléments.

Installer des modules

Utiliser npx remotion add pour ajouter de nouveaux paquets avec la bonne version :

npx remotion add @remotion/media

Ceci s'applique aux paquets @remotion/*, mediabunny, @mediabunny/*, et zod.

Aperçu du markup

Ne faire ceci que si vous pensez que l'utilisateur veut voir l'aperçu.

npx remotion studio --no-open

Ceci démarrera un processus de longue durée et affichera l'URL du serveur pour l'aperçu.
Si déjà démarré, l'URL sera affichée.

Optionnel : contrôle de rendu d'une seule image

Vous pouvez afficher une seule image avec la CLI pour vérifier la mise en page, les couleurs ou le timing.
L'ignorer pour les modifications triviales, les refactorisations pures ou quand vous avez déjà suffisamment de confiance à partir de Studio ou des rendus antérieurs.

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

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

remotion-markup