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

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.

Structure your markup according to Remotion Interactivity Best Practices. Prefer Interactive.withSchema({wrapInSequence: true}) for custom visual components with editable props, and register reusable scenes as connected compositions. Put timing directly on components that support it; avoid redundant <Sequence> wrappers.

The Studio edits the JSX source node that created an item. Author every composition registration, clip, scene, layer and sequence that should be editable independently as its own JSX node, with its editable props inline. Programmatic loops are suitable when the generated instances are intentionally controlled as one source template, not when users need to edit the instances separately.

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

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

  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.

Example scene

A background video with a lower third. The lower third is an interactive component with its own timeline, registered as a connected composition. Its text is passed as children and accentColor is an editable prop. The fade-in is keyframed inline at the call site.

// MyScene.tsx
import { Video } from "@remotion/media";
import { Easing, interpolate, useCurrentFrame, useVideoConfig } from "remotion";
import { LowerThird } from "./LowerThird";

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

  return (
    <>
      <Video
        name="Background"
        src="https://remotion.media/video.mp4"
        objectFit="cover"
        style={{
          position: "absolute",
          width: "100%",
          height: "100%",
        }}
      />
      <LowerThird
        name="Lower third"
        from={1 * fps}
        accentColor="#0b84f3"
        style={{
          opacity: interpolate(frame, [1 * fps, 2 * fps], [0, 1], {
            extrapolateRight: "clamp",
            extrapolateLeft: "clamp",
            easing: Easing.bezier(0.16, 1, 0.3, 1),
          }),
        }}
      >
        Jane Doe, Product Designer
      </LowerThird>
    </>
  );
};

// LowerThird.tsx
import type React from "react";
import { Interactive, type InteractivitySchema } from "remotion";

type LowerThirdProps = {
  readonly children: string;
  readonly accentColor: string;
  readonly style?: React.CSSProperties;
};

const LowerThirdInner: React.FC<LowerThirdProps> = ({
  children,
  accentColor,
  style,
}) => {
  return (
    <Interactive.Div
      style={{
        position: "absolute",
        left: 80,
        bottom: 80,
        display: "flex",
        alignItems: "center",
        gap: 20,
        backgroundColor: "white",
        borderRadius: 16,
        padding: "20px 32px",
        color: "black",
        fontFamily: "Helvetica, Arial, sans-serif",
        fontSize: 48,
        fontWeight: 600,
        ...style,
      }}
    >
      <div
        style={{
          width: 8,
          alignSelf: "stretch",
          borderRadius: 4,
          backgroundColor: accentColor,
        }}
      />
      {children}
    </Interactive.Div>
  );
};

const lowerThirdSchema = {
  children: { type: "text-content", default: "", description: "Text" },
  accentColor: {
    type: "color",
    default: "#0b84f3",
    description: "Accent color",
  },
} as const satisfies InteractivitySchema;

export const LowerThird = Interactive.withSchema({
  Component: LowerThirdInner,
  componentName: "<LowerThird>",
  schema: lowerThirdSchema,
  wrapInSequence: true,
});

// Root.tsx
import { Composition } from "remotion";
import { LowerThird } from "./LowerThird";
import { MyScene } from "./MyScene";

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="MyScene"
        component={MyScene}
        durationInFrames={60}
        fps={30}
        width={1280}
        height={720}
      />
      <Composition
        id="LowerThird"
        component={LowerThird}
        durationInFrames={30}
        fps={30}
        width={1280}
        height={720}
        defaultProps={{
          children: "Jane Doe, Product Designer",
          accentColor: "#0b84f3",
        }}
      />
    </>
  );
};

Delaying, trimming

The following timing props are supported by built-in components (<AbsoluteFill>, <Interactive.*>, <Img>, <AnimatedImage>, <CanvasImage>, <HtmlInCanvas>, <Solid>, <Sequence> from remotion, <Video> and <Audio> from @remotion/media, <Gif>, and more). Custom components made with Interactive.withSchema({wrapInSequence: true}) accept them too, see Prefer interactive components with their own timelines.

from

When the item starts appearing in the timeline. Its children start at frame 0 when it appears.

<Img from={1 * fps} {/* ... */}/>
<Video from={1 * fps} {/* ... */}/>
<Interactive.Div from={1 * fps} {/* ... */}/>
<LowerThird from={1 * fps} {/* ... */}/>

trimBefore

Sets the first frame of the item's own timeline:

// Trim away first 2 seconds of footage
<Video trimBefore={2 * fps} {/* ... */} />

// `useCurrentFrame()` of the children starts at `10 * fps`
<Interactive.Div trimBefore={10 * fps} {/* ... */} />

durationInFrames

How many frames of the item's own timeline are shown, starting at trimBefore. Use it to end media early instead of cutting the file:

// Play the footage from second 2 to second 5
<Video trimBefore={2 * fps} durationInFrames={3 * fps} {/* ... */} />
<Img durationInFrames={20 * fps} {/* ... */}/>
<LowerThird durationInFrames={5 * fps} {/* ... */}/>

playbackRate

Changes the speed of the item. Children calling useCurrentFrame() advance playbackRate frames per frame of the parent. The item occupies durationInFrames / playbackRate frames in its parent timeline.

// 2x speed
<Video playbackRate={2} {/* ... */} />
<LowerThird playbackRate={0.5} durationInFrames={2 * fps} {/* ... */} />

loop

Repeats the range selected by trimBefore and durationInFrames until the parent ends. <Video>, <Audio>, <Gif> and <AnimatedImage> may omit durationInFrames; the media's own duration after trimBefore then defines the loop range. Other items need durationInFrames to define the loop range:

<Video loop {/* ... */} />
<Interactive.Div durationInFrames={2 * fps} loop {/* ... */} />

To limit the total length of a loop, wrap it in an outer item with durationInFrames.

<Img>, <CanvasImage>, <Solid> and shapes do not support loop because their output does not change over time.

Order of operations

1. from positions the item in its parent timeline.
2. trimBefore sets the first frame of the item's own timeline.
3. durationInFrames selects the range of the item's own timeline.
4. playbackRate stretches or compresses the selected range.
5. loop repeats the selected range until the parent ends.

Children calling useCurrentFrame() get trimBefore + (frame - from) * playbackRate.

See Timing and trimming for more details.

Fallback

If a component does not support these props, wrap it in <Sequence> from remotion, which has them.

• layout="absolute-fill" makes the Sequence behave like AbsoluteFill
• layout="none" is "headless" mode, no wrapper element is used.

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

When a scene or group of layers deserves its own editable timeline, follow connected-compositions.md. Prefer this structure for substantial scenes in a multi-scene video.

Pre-compose action

For a Studio request such as Pre-compose Ambient glow (src/BarChart.tsx:134), find the selected sequence markup at the given location. Make a connected composition, following connected-compositions.md: extract the markup into a named component, preferably make it interactive with Interactive.withSchema({wrapInSequence: true}), and register the same exported component reference with a unique <Composition> in the root. Render the interactive component directly with its timing props, or as the only child of a sequence when that wrapper has a purpose. If the selected node is already a sequence, keep its props and extract its children. The registration needs dimensions, fps, duration, and defaultProps equivalent to its parent use. A component extraction without a registered composition does not complete a pre-compose request.

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 creating a visual effect, consider whether it is feasible using CSS and HTML, or whether a shader is needed.
Order or preference:

1. Regular HTML + CSS or other web techniques
2. An effect applied to the element directly (<Video>, <Img>), or by wrapping the content in <HtmlInCanvas>, which also accepts effects:

• A listed effect via effects.md
• A custom createEffect() via effects.md when no preset is available.

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.

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

When a visual check is useful, open the Remotion Studio for an interactive preview.

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