Ceci est un guide pour l'écriture de code React Markup dans Remotion. Si cela n'est pas pertinent, chargez plutôt les Bonnes Pratiques Remotion.
Préserver les modifications utilisateur
Les utilisateurs peuvent effectuer des modifications dans le code en dehors de la conversation.
Si vous détectez un changement surprenant effectué entre-temps, ne l'écrasez pas, supposez qu'il était intentionnel ou demandez une confirmation.
Règles générales
Animez en utilisant useCurrentFrame() et interpolate().
Les transition ou animation CSS ne s'afficheront pas correctement, elles doivent être refactorisées.
Les classes d'animation Tailwind ne s'afficheront pas correctement, elles doivent être refactorisées.
Utilisez Easing.bezier() et Easing.spring() pour personnaliser le timing.
Structurez votre code selon les Bonnes Pratiques d'Interactivité Remotion
import { useCurrentFrame, Easing, interpolate, Interactive } from "remotion";
export const FadeIn = () => {
const frame = useCurrentFrame();
return (
<Interactive.Div
name="Titre"
style={{
opacity: interpolate(frame, [0, 2 * fps], [0, 1], {
extrapolateRight: "clamp",
extrapolateLeft: "clamp",
easing: Easing.bezier(0.16, 1, 0.3, 1),
}),
}}
>
Bonjour le monde !
</Interactive.Div>
);
};
Gardez l'appel interpolate() en ligne dans la propriété style.
Utilisez les propriétés CSS scale, translate, rotate plutôt que transform.
// 👍 Images clés éditables en ligne et raccourcis de transformation
style={{
scale: interpolate(frame, [0, 100], [0, 1], {
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp',
easing: Easing.spring({damping: 200}),
output: 'perceptual-scale' // Pour les animations `scale`, utilisez "output: 'perceptual-scale'"
}),
translate: interpolate(frame, [0, 100], ["0px 0px", "100px 100px"], {
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp',
easing: Easing.spring({damping: 200}),
}),
rotate: interpolate(frame, [0, 100], ["20deg", "90deg"], {
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp',
easing: Easing.spring({damping: 200}),
}),
}}
// 👎 Les valeurs non en ligne et les chaînes transform deviennent plus difficiles à éditer dans Studio
const scale = interpolate(frame, [0, 100], [0, 1]);
style={{
transform: `scale(${scale})`,
}}
Assets
Placez les assets dans le dossier public/ à la racine de votre projet.
Utilisez staticFile() pour référencer les fichiers du dossier public/.
Composants médias
Ajoutez des vidéos et de l'audio avec <Video> et <Audio> de @remotion/media.
Ajoutez des images avec le composant <CanvasImage>.
Ajoutez des GIFs animés, APNG, WebP ou AVIF avec <AnimatedImage>, utilisez @remotion/gif si vous n'utilisez pas Chrome.
Utilisez staticFile() pour les fichiers dans public/ ou passez une URL distante directement :
import { Audio, Video } from "@remotion/media";
import { staticFile, CanvasImage, AnimatedImage } from "remotion";
export const MaComposition = () => {
return (
<>
<Video src={staticFile("video.mp4")} style={{ opacity: 0.5 }} />
<Audio src={staticFile("audio.mp3")} />
<CanvasImage
src={staticFile("logo.png")}
style={{ width: 100, height: 100 }}
/>
<Video src="https://remotion.media/video.mp4" />
<AnimatedImage src={staticFile('nyancat.gif')} />
</>
);
};
Exemple de scène
import {
AbsoluteFill,
Easing,
Interactive,
interpolate,
useCurrentFrame,
useVideoConfig
} from "remotion";
export const Vide = () => {
const {fps} = useVideoConfig();
const frame = useCurrentFrame();
return (
<AbsoluteFill
name="Scène"
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white'
}}
>
<Interactive.Div
name="Titre"
style={{
opacity: interpolate(frame, [1 * fps, 2 * fps], [0, 1], {
extrapolateRight: "clamp",
extrapolateLeft: "clamp",
easing: Easing.bezier(0.16, 1, 0.3, 1),
}),
fontSize: 88
}}
>
Titre
</Interactive.Div>
<Interactive.Div
name="Sous-titre"
style={{
opacity: interpolate(frame, [2 * fps, 3 * fps, 8 * fps, 10 * fps], [0, 1, 1, 0], {
extrapolateRight: "clamp",
extrapolateLeft: "clamp",
easing: [Easing.bezier(0.16, 1, 0.3, 1), Easing.linear, Easing.bezier(0.16, 1, 0.3, 1)],
}),
fontSize: 32
}}
>
Sous-titre
</Interactive.Div>
</AbsoluteFill>
);
}
Délai, recadrage temporel
La plupart des composants (<AbsoluteFill>, <Interactive.*> <Img>, <AnimatedImage>, <CanvasImage>, <HtmlInCanvas>, <Solid>, <Sequence> de remotion, <Video> et <Audio> de @remotion/media, <Gif>, et plus) prennent en charge les propriétés suivantes :
from
<Img from={1 * fps} {/* ... */}/>
<Video from={1 * fps} {/* ... */}/>
<Interactive.Div from={1 * fps} {/* ... */}/>
Quand l'élément commence à apparaître dans la timeline.
durationInFrames
<Img durationInFrames={20 * fps} {/* ... */}/>
<Interactive.Div durationInFrames={20 * fps} {/* ... */}/>
Pendant combien de temps le calque joue dans la timeline.
Pour les médias, passez la durée naturelle du média : <Video durationInFrames={29.322 * fps}/>
trimBefore
Utile pour les composants dont l'horloge interne doit démarrer plus tard :
// Supprime les 2 premières secondes de la vidéo
<Video trimBefore={2 * fps} {/* ... */} />
// `useCurrenFrame()` pour les enfants commence à `10 * fps`
<Sequence trimBefore={10 * fps} {/* ... */} />
Fallback
Si un composant ne prend pas en charge ces propriétés, enveloppez-le dans <Sequence> de remotion, qui les possède.
layout="absolute-fill"fait que le Sequence se comporte comme AbsoluteFilllayout="none"est le mode "headless", aucun élément wrapper n'est utilisé.
Cartes
Voir Remotion Maps si vous souhaitez inclure des cartes dans la vidéo.
Surlignements de texte et annotations
Voir text-highlights.md pour les surlignements de texte (marqueurs de surlignage), les cercles, les soulignements, les barrés, le texte rayé, les boîtes.
Vidéos multi-scènes
Voir multi-scene-video.md si vous prévoyez de réaliser une vidéo avec plusieurs scènes successives.
Voix off
Voir voiceover.md pour ajouter une voix off générée par IA aux compositions Remotion en utilisant ElevenLabs TTS.
Intégration de vidéos
Voir embedding-videos.md pour des connaissances avancées sur l'intégration de vidéos - rognage, volume, vitesse, boucle, pitch.
Intégration d'audio
Voir audio.md pour des fonctionnalités audio avancées comme le rognage, le volume, la vitesse, le pitch.
Montage vidéo
Voir video-editing.md pour structurer des timelines vidéo modifiables dans Remotion Studio.
Recadrage
Voir cropping.md si vous devez recadrer le rectangle visible d'un composant.
Transitions
Voir transitions.md pour les modèles de transition de scène.
Effets visuels et pixel
Lors de la création d'un effet visuel, déterminez s'il est réalisable avec CSS et HTML, ou si un shader est nécessaire. Ordre de préférence :
- HTML + CSS classiques ou autres techniques web
- Un effet appliqué directement à l'élément (
<Video>,<Img>), ou en enveloppant le contenu dans<HtmlInCanvas>, qui accepte aussieffects:
- Un effet listé via effects.md
- Un
createEffect()personnalisé via effects.md lorsqu'aucun préréglage n'est disponible.
Contenu 3D
Voir ./3d.md pour le contenu 3D dans Remotion avec Three.js et React Three Fiber.
Effets sonores
Lorsque vous devez utiliser des effets sonores, chargez le fichier ./sfx.md pour plus d'informations.
Visualisation audio
Lorsque vous devez visualiser de l'audio (barres de spectre, formes d'onde, effets réactifs aux basses), chargez le fichier ./audio-visualization.md pour plus d'informations.
Cartes
Pour les cartes statiques, les itinéraires animés et les marqueurs, les explications géographiques, Mapbox, MapLibre, MapTiler, GeoJSON, ou les survols géographiques 3D, chargez Remotion Maps.
Sous-titres
Lorsque vous traitez des sous-titres, chargez la compétence Remotion Captions pour plus d'informations.
Google Fonts
Est la méthode recommandée pour charger des polices dans Remotion. Voir google-fonts.md pour savoir comment charger des 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 timeline de Remotion.
Images avancées
Voir images.md pour le dimensionnement et le positionnement des images, les chemins d'image dynamiques, et l'obtention des dimensions d'image.
Animations Lottie
Voir lottie.md pour intégrer des animations Lottie dans Remotion.
Timing
Voir timing.md pour plus de techniques de timing pour interpolate().
Vidéos paramétrées
Voir parameters.md pour rendre une composition paramétrable en ajoutant un schéma Zod.
Mesure des nœuds DOM
Voir measuring-dom-nodes.md pour mesurer les dimensions des éléments DOM dans Remotion.
Mesure du 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, telles que le rognage 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 devez détecter et rogner les segments silencieux de fichiers vidéo ou audio, chargez le fichier ./silence-detection.md.
Durée, dimensions et données dynamiques
Voir calculate-metadata.md pour définir dynamiquement la durée, les dimensions et les propriétés d'une composition.
Compositions avancées
Voir compositions.md pour savoir comment définir des images fixes, des dossiers, des propriétés par défaut et comment imbriquer des compositions.
Séquençage avancé
Voir sequencing.md pour plus de motifs de séquençage - délai, rognage, 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.
Prévisualisation du code
npx remotion studio --no-open
Ceci démarre un processus long et affiche l'URL du serveur pour la prévisualisation.
Si le serveur est déjà démarré, il affichera l'URL.
Vous pouvez visiter une composition spécifique en naviguant vers /[composition-id], par exemple http://localhost:3000/MapAnimation.
Optionnel : vérification d'un seul rendu image
Vous pouvez rendre une seule image avec la CLI pour vérifier la mise en page, les couleurs ou le timing. Sautez cette étape pour les modifications triviales, les refactorisations pures, ou lorsque vous avez déjà suffisamment confiance grâce à Studio ou aux rendus précédents.
npx remotion still [composition-id] --scale=0.25 --frame=30
À 30 ips, --frame=30 correspond à la marque d'une seconde (--frame est basé sur zéro).