Importing assets

Remotion allows you to include several types of files in your project:

• Images (.png, .svg, .jpg, .jpeg, .webp, .gif, .bmp)
• Videos (.webm, .mov, .mp4)
• Audio (.mp3, .wav, .aac)
• Webfonts - read the separate page for fonts
• Arbitrary files using the staticFile() API

Using images

Require images using an import statement and pass them to the <Img/> tag.

tsx
import { Img } from "remotion";
import logo from "./logo.png";
 
export const MyComp: React.FC = () => {
  return <Img src={logo} />;
};

tsx
import { Img } from "remotion";
import logo from "./logo.png";
 
export const MyComp: React.FC = () => {
  return <Img src={logo} />;
};

Using image sequences

If you have a series of images, for example exported from another program like After Effects or Rotato, you can use a dynamic require statement to import the images as they are needed.

tsx
import { useCurrentFrame } from "remotion";
 
/*
  Assuming your file structure is:
  assets/
    frame1.png
    frame2.png
    frame3.png
    ...
*/
 
const MyComp: React.FC = () => {
  const frame = useCurrentFrame();
  const src = require("./assets/frame" + frame + ".png");
 
  return <img src={src} />;
};

tsx
import { useCurrentFrame } from "remotion";
 
/*
  Assuming your file structure is:
  assets/
    frame1.png
    frame2.png
    frame3.png
    ...
*/
 
const MyComp: React.FC = () => {
  const frame = useCurrentFrame();
  const src = require("./assets/frame" + frame + ".png");
 
  return <img src={src} />;
};

tip

Avoid writing a require statement that requires a file that doesn't exist. If your project throws an error because your composition is longer than than your image sequence, clamp the file name using Math.min() or Remotion's interpolate().

Using videos

Import your files using an import statement. Use the <Video /> component to keep the timeline and your video in sync.

tsx
import { Video } from "remotion";
import vid from "./vid.webm";
 
export const MyComp: React.FC = () => {
  return <Video src={vid} />;
};

tsx
import { Video } from "remotion";
import vid from "./vid.webm";
 
export const MyComp: React.FC = () => {
  return <Video src={vid} />;
};

Be aware that if you are rendering using Chromium (as opposed to Chrome), the codec for MP4 videos is not included. Read the section on the <Video/ > page for more information.

Using Audio

Import your audio using an import statement and pass it to the <Audio/ > component.

tsx
import { Audio } from "remotion";
import tune from "./tune.mp3";
 
export const MyComp: React.FC = () => {
  return <Audio src={tune} />;
};

tsx
import { Audio } from "remotion";
import tune from "./tune.mp3";
 
export const MyComp: React.FC = () => {
  return <Audio src={tune} />;
};

See the audio guide for guidance on including audio.

Using fonts

See the dedicated page about fonts.

Importing arbitrary files

Create a public/ folder in your project and use the staticFile() API to get a URL reference of the asset that you can load into your project.