Skip to main content

Importing assets

To import assets in Remotion, create a public/ folder in your project and use staticFile() to import it.

txt
my-video/
├─ node_modules/
├─ public/
│  ├─ logo.png
├─ src/
│  ├─ MyComp.tsx
│  ├─ Root.tsx
│  ├─ index.ts
├─ package.json
txt
my-video/
├─ node_modules/
├─ public/
│  ├─ logo.png
├─ src/
│  ├─ MyComp.tsx
│  ├─ Root.tsx
│  ├─ index.ts
├─ package.json
src/MyComp.tsx
tsx
import { Img, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
  return <Img src={staticFile("logo.png")} />;
};
src/MyComp.tsx
tsx
import { Img, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
  return <Img src={staticFile("logo.png")} />;
};

Using images​

Use the <Img/> tag from Remotion.

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

You can also pass a URL:

MyComp.tsx
tsx
import { Img } from "remotion";
 
export const MyComp: React.FC = () => {
  return <Img src="https://picsum.photos/id/237/200/300" />;
};
MyComp.tsx
tsx
import { Img } from "remotion";
 
export const MyComp: React.FC = () => {
  return <Img src="https://picsum.photos/id/237/200/300" />;
};

Using image sequences​

If you have a series of images, for example exported from another program like After Effects or Rotato, you can interpolate the path to create a dynamic import.

txt
my-video/
├─ public/
│  ├─ frame1.png
│  ├─ frame2.png
│  ├─ frame3.png
├─ package.json
txt
my-video/
├─ public/
│  ├─ frame1.png
│  ├─ frame2.png
│  ├─ frame3.png
├─ package.json
tsx
import { Img, staticFile, useCurrentFrame } from "remotion";
 
const MyComp: React.FC = () => {
  const frame = useCurrentFrame();
 
  return <Img src={staticFile(`/frame${frame}.png`)} />;
};
tsx
import { Img, staticFile, useCurrentFrame } from "remotion";
 
const MyComp: React.FC = () => {
  const frame = useCurrentFrame();
 
  return <Img src={staticFile(`/frame${frame}.png`)} />;
};

Using videos​

Use the <OffthreadVideo /> or <Video /> component to keep the timeline and your video in sync.

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

Loading videos via URL is also possible:

tsx
import { OffthreadVideo } from "remotion";
 
export const MyComp: React.FC = () => {
  return (
    <OffthreadVideo src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
  );
};
tsx
import { OffthreadVideo } from "remotion";
 
export const MyComp: React.FC = () => {
  return (
    <OffthreadVideo src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
  );
};

See also: Which video formats does Remotion support?

Using Audio​

Use the <Audio/ > component.

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

Loading audio from an URL is also possible:

tsx
import { Audio } from "remotion";
 
export const MyComp: React.FC = () => {
  return (
    <Audio src="https://file-examples.com/storage/fe48a63c5264cbd519788b3/2017/11/file_example_MP3_700KB.mp3" />
  );
};
tsx
import { Audio } from "remotion";
 
export const MyComp: React.FC = () => {
  return (
    <Audio src="https://file-examples.com/storage/fe48a63c5264cbd519788b3/2017/11/file_example_MP3_700KB.mp3" />
  );
};

See the audio guide for guidance on including audio.

Using CSS​

Put the .css file alongside your JavaScript source files and use an import statement.

txt
my-video/
├─ node_modules/
├─ src/
│  ├─ style.css
│  ├─ MyComp.tsx
│  ├─ Root.tsx
│  ├─ index.ts
├─ package.json
txt
my-video/
├─ node_modules/
├─ src/
│  ├─ style.css
│  ├─ MyComp.tsx
│  ├─ Root.tsx
│  ├─ index.ts
├─ package.json
MyComp.tsx
tsx
import "./style.css";
MyComp.tsx
tsx
import "./style.css";
note

Want to use SASS, Tailwind or similar? See examples on how to override the Webpack configuration.

Using Fonts​

Read the separate page for fonts.

import statements​

As an alternative way to import files, Remotion allows you to import or require() several types of files in your project:

  • Images (.png, .svg, .jpg, .jpeg, .webp, .gif, .bmp)
  • Videos (.webm, .mov, .mp4)
  • Audio (.mp3, .wav, .aac, .m4a)
  • Fonts (.woff, .woff2, .otf, .ttf, .eot)

For example:

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

Caveats​

While this was previously the main way of importing files, we now recommend against it because of the following reasons:

  • Only the above listed file extensions are supported.
  • The maximum file size is 2GB.
  • Dynamic imports such as require('img' + frame + '.png') are funky.

Prefer importing using staticFile() if possible.

Dynamic duration based on assets​

To make your videos duration dependent based on your assets, see: Dynamic duration, FPS & dimensions