remotion-markup

This is guidance for writing Remotion React Markup. If this is not relevant, load Remotion Best Practices instead.

Preserve user changes

Users may make edits in the code outside of the conversation.

If you detect a surprising change made in the meanwhile, don't overwrite it, assume it was intentional or ask for confirmation.

General rules

Inside a composition or scene component, get fps from useVideoConfig() for all seconds-to-frames calculations, including timing props such as from, trimBefore and durationInFrames. Keeping the expression on the JSX node, such as trimBefore={4 * fps}, lets Studio edit the timing and keeps it correct if the composition frame rate changes.

Drive animations using useCurrentFrame() and interpolate().
CSS transition or animation will not render correctly, they need to refactored.
Tailwind animation class will not render correctly, they need to be refactored.

Use Easing.bezier() and Easing.spring() to customize timing.

Before choosing the markup hierarchy, read editable timeline structure. Choose editing units first, then the tracks or shared timing boundaries they need. It includes a complete example with interactive components and their registrations. For source-editable styles, schemas, and keyframes, see Remotion Interactivity.

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

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

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

Keep the interpolate() call inline in the style prop. Use scale, translate, rotate CSS properties over transform.

// 👍 Inline editable keyframes and transform shorthands
style={{
  scale: interpolate(frame, [0, 100], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: Easing.spring({damping: 200}),
    output: 'perceptual-scale' // For `scale` animations, use "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}),
  }),
}}

// 👎 Non-inline values and transform strings become harder to edit in Studio
const scale = interpolate(frame, [0, 100], [0, 1]);

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

Assets

Place assets in the public/ folder at your project root. Use staticFile() to reference files from the public/ folder.

Media components

Add video and audio using <Video> and <Audio> from @remotion/media.
Add images using the <CanvasImage> component. Add animated GIFs, APNG, WebP or AVIF images using <AnimatedImage>, use @remotion/gif if not using Chrome. Use staticFile() for files in public/ or pass a remote URL directly:

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

export const MyComposition = () => {
  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')} />
    </>
  );
};

If the composition is primarily a timeline of video or audio clips, read video-editing.md before choosing its source structure.

Delaying, trimming

Use sequencing to choose the timing boundary and timing props for the supported props and order of operations.

Maps

See Remotion Maps if wanting to include maps in the video.

Text highlights and annotations

See text-highlights.md for text highlights (highlight markers), circles, underlines, strike-throughs, crossed-off text, boxes.

Multi-scene videos

See multi-scene-video.md if planning to make a video with multiple subsequent scenes.

Connected compositions

Read connected compositions when a scene or group needs its own editable timeline, or when handling a Studio pre-compose request. It covers extraction, registration, inherited styles, and verification in both the parent and standalone views.

Voiceover

See voiceover.md for adding an AI-generated voiceover to Remotion compositions using ElevenLabs TTS.

Embedding Videos

See embedding-videos.md for advanced knowledge about embedding videos - trimming, volume, speed, looping, pitch.

Embedding Audio

See audio.md for advanced audio features like trimming, volume, speed, pitch.

Cropping

See cropping.md if needing to crop the visible rectangle of a component.

Transitions

See transitions.md for scene transition patterns.

Motion blur

When adding motion blur or a movement trail, read motion-blur.md for the preferred HTML-in-canvas approach, preview requirements, and alternatives.

Visual and pixel effects

When adding a visual effect, first identify the element or group it should affect. If the target component supports effects and a built-in effect below matches the request, prefer that effect over a CSS approximation. For example, apply vignette() directly to a <Video>'s effects prop when the vignette should affect that video.

These components accept effects directly:

Import from	Components
remotion	<Img>, <CanvasImage>, <AnimatedImage>, <Solid>, <HtmlInCanvas>
@remotion/media	<Video>
@remotion/gif	<Gif>
@remotion/rive	<RemotionRiveCanvas>
@remotion/shapes	<Arrow>, <Callout>, <Circle>, <Ellipse>, <Heart>, <Pie>, <Polygon>, <Rect>, <Spark>, <Star>, <Triangle>

Ordinary HTML elements, <Interactive.*> DOM wrappers, <AbsoluteFill>, and <Sequence> do not accept effects directly. To apply effects to their content, wrap them in <HtmlInCanvas> and put the effects prop on the wrapper.

For other elements, prefer regular HTML and CSS where suitable. Consider wrapping a group in <HtmlInCanvas> when post-processing the whole group is appropriate and the environment supports it.

Read effects.md before applying an effect for imports, parameters, and setup. It also covers reusable custom effects with createEffect() when no built-in effect matches.

Available effects

Built-in effects from @remotion/effects:

• Color and tone: brightness(), colorCorrection(), colorKey(), contrast(), duotone(), exposure(), grayscale(), hue(), invert(), levels(), linearGradient(), linearGradientTint(), lut(), saturation(), shadowsHighlights(), thermalVision(), tint(), vibrance(), whiteBalance().
• Blur and trails: blur(), lightTrail(), linearProgressiveBlur(), radialProgressiveBlur(), regionBlur(), zoomBlur().
• Lighting: dropShadow(), glow(), lightLeak(), shine(), starburst(), vignette().
• Distortion and transforms: barrelDistortion(), chromaticAberration(), cornerPin(), fisheye(), mirror(), noiseDisplacement(), scale(), skew(), tile(), uvTranslate(), wave(), xyTranslate().
• Textures and patterns: burlap(), checkerboard(), contourLines(), dotGrid(), emboss(), flannel(), gridlines(), halftone(), halftoneLinearGradient(), lines(), liquidContours(), noise(), paper(), pattern(), rings(), scanlines(), speckle(), tvSignalOff(), waves(), whiteNoise(), zigzag().
• Edges: outline(), roughenEdges(), shrinkwrap(), tear().
• Pixelation and transitions: evolve(), linearProgressivePixelate(), pixelate(), pixelDissolve(), radialProgressivePixelate(), venetianBlinds().

Color correction

Read color-correction.md for how to apply color correction, either using the colorCorrection() effect or lut() to apply a 3D .cube color grade.

3D content

See ./3d.md for 3D content in Remotion using Three.js and React Three Fiber.

Sound effects

When needing to use sound effects, load the ./sfx.md file for more information.

Audio visualization

When needing to visualize audio (spectrum bars, waveforms, bass-reactive effects), load the ./audio-visualization.md file for more information.

Maps

For static maps, animated routes and markers, geographic explainers, Mapbox, MapLibre, MapTiler, GeoJSON, or 3D geographic flyovers, load Remotion Maps.

Captions

When dealing with captions or subtitles, load the Remotion Captions skill for more information.

Arabic and right-to-left text

For Arabic, Persian, Urdu or Hebrew text, read arabic-text.md: set the base direction, animate by word, and split letters only in a way that keeps them joined.

Google Fonts

Is the recommended way to load fonts in Remotion. See google-fonts.md for how to load Google Fonts.

Local fonts

See local-fonts.md for how to load local fonts.

GIFs

See gifs.md for how to display GIFs synchronized with Remotion's timeline.

Advanced Images

See images.md for sizing and positioning images, dynamic image paths, and getting image dimensions.

Lottie animations

See lottie.md for embedding Lottie animations in Remotion.

Timing

See timing.md for more timing techniques for interpolate().

Parameterized videos

See parameters.md for making a composition parametrizable by adding a Zod schema.

Measuring DOM nodes

See measuring-dom-nodes.md for measuring DOM element dimensions in Remotion.

Measuring text

See measuring-text.md for measuring text dimensions, fitting text to containers, and checking overflow.

Using FFmpeg

For some video operations, such as trimming videos or detecting silence, FFmpeg should be used. Load the ./ffmpeg.md file for more information.

Silence detection

When needing to detect and trim silent segments from video or audio files, load the ./silence-detection.md file.

Dynamic duration, dimensions and data

See calculate-metadata.md for dynamically set composition duration, dimensions, and props.

Compositions and stills

Before registering <Composition> or <Still> elements, read compositions.md for source-editable registrations, folders, default props and nesting. For Studio navigation into a scene's own timeline, use connected compositions.

Advanced sequencing

See sequencing.md for more sequencing patterns - delay, trim, limit duration of items.

Install modules

Use npx remotion add to add new packages with the right version:

npx remotion add @remotion/media

This goes for @remotion/* packages, mediabunny, @mediabunny/*, zod, and @huggingface/transformers.

Visual checks

Open the Remotion Studio to check visual changes. When changing timeline structure, inspect the full composition as well as any connected components; verify the visible layers, cut timing, and synchronized content.

You can also use Rendering to inspect one or several frames as images.