Écrire du Remotion React Markup pour agents IA

Ceci est un guide pour écrire du Remotion React Markup. Si ce n'est pas pertinent, chargez plutôt les Bonnes pratiques Remotion.

Règles générales

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

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

Utilisez Easing.bezier() pour personnaliser le timing, y compris les mouvements saccadés ou qui dépassent. Utilisez Easing.spring() si vous voulez des animations élastiques.

Les éléments HTML qui ont du sens d'être rendus interactifs dans le Studio doivent utiliser Interactive : <div> -> <Interactive.Div>.
Définissez une prop name descriptive comme 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>
  );
};

Gardez l'appel interpolate() inline dans la prop style. Préférez les propriétés CSS scale, translate, rotate à transform.

// 👍 Keyframes et raccourcis transform éditables inline
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 masquées et les chaînes transform deviennent plus difficiles à éditer dans le Studio
const scale = interpolate(frame, [0, 100], [0, 1]);

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

Les transitions ou animations CSS sont INTERDITES - elles ne s'afficheront pas correctement.
Les noms de classes d'animation Tailwind sont INTERDITS - ils ne s'afficheront pas 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 vidéos et de l'audio en utilisant @remotion/media.
Ajoutez des images en utilisant le composant <Img>. Utilisez staticFile() pour les fichiers dans public/ ou passez 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 retarder du contenu, enveloppez-le dans <Sequence> et utilisez from. Pour limiter la durée d'un élément, utilisez durationInFrames de <Sequence>. <Sequence> est par défaut un remplissage absolu couvrant la scène.
Pour le contenu inline, utilisez 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

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

Voiceover

Consultez voiceover.md pour ajouter un voiceover généré par IA aux compositions Remotion en utilisant ElevenLabs TTS.

Découpe

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

Intégration de vidéos

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

Intégration d'audio

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

Transitions

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

Effets visuels et pixellaires

Lors de la création d'un effet visuel, préférez : 1. une animation Remotion/HTML/CSS/SVG/filter/blend/mask normale, 2. un effet listé via effects.md, y compris sur HTML rendu via <HtmlInCanvas>, 3. un createEffect() personnalisé via effects.md lorsque 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 superpositions de fuites de lumière, consultez light-leaks.md. Documentation : 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

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

Effets sonores

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

Visualisation audio

Lorsque vous avez besoin de visualiser de l'audio (barres de spectre, formes d'onde, effets réactifs à la basse), chargez le fichier ./audio-visualization.md pour plus d'informations.

Sous-titres

Lorsque vous travaillez avec des sous-titres ou des légendes, chargez la compétence Remotion Captions pour plus d'informations.

Google Fonts

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

Polices locales

Consultez local-fonts.md pour savoir comment charger les polices locales.

GIFs

Consultez gifs.md pour savoir comment afficher les GIFs synchronisés avec la timeline de Remotion.

Images avancées

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

Animations Lottie

Consultez lottie.md pour intégrer les animations Lottie dans Remotion.

Timing avancé

Consultez timing.md pour un timing avancé avec interpolate et l'easing de Bézier, et les ressorts.

Vidéos paramétrées

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

Mesure des nœuds DOM

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

Mesure du texte

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

Utilisation de FFmpeg

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

Détection de silence

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

Durée, dimensions et données dynamiques

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

Compositions avancées

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

Séquençage avancé

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

Installer des modules

Utilisez npx remotion add pour ajouter de nouveaux packages avec la bonne version :

npx remotion add @remotion/media

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

Aperçu du markup

Faites ceci uniquement si vous pensez que l'utilisateur veut voir l'aperçu.

npx remotion studio --no-open

Cela 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 s'affichera.

Optionnel : vérification du rendu à une seule image

Vous pouvez rendre une seule image avec la CLI pour vérifier la présentation, les couleurs ou le timing.
Ignorez-le pour les modifications triviales, les refactorisations pures, ou lorsque vous avez déjà suffisamment confiance grâce au Studio ou aux 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