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.tsxtsx
import {Img ,staticFile } from "remotion";export constMyComp :React .FC = () => {return <Img src ={staticFile ("logo.png")} />;};
src/MyComp.tsxtsx
import {Img ,staticFile } from "remotion";export constMyComp :React .FC = () => {return <Img src ={staticFile ("logo.png")} />;};
Using images
Use the <Img/>
tag from Remotion.
MyComp.tsxtsx
import {Img ,staticFile } from "remotion";export constMyComp :React .FC = () => {return <Img src ={staticFile ("logo.png")} />;};
MyComp.tsxtsx
import {Img ,staticFile } from "remotion";export constMyComp :React .FC = () => {return <Img src ={staticFile ("logo.png")} />;};
You can also pass a URL:
MyComp.tsxtsx
import {Img } from "remotion";export constMyComp :React .FC = () => {return <Img src ="https://picsum.photos/id/237/200/300" />;};
MyComp.tsxtsx
import {Img } from "remotion";export constMyComp :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";constMyComp :React .FC = () => {constframe =useCurrentFrame ();return <Img src ={staticFile (`/frame${frame }.png`)} />;};
tsx
import {Img ,staticFile ,useCurrentFrame } from "remotion";constMyComp :React .FC = () => {constframe =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 constMyComp :React .FC = () => {return <OffthreadVideo src ={staticFile ("vid.webm")} />;};
tsx
import {OffthreadVideo ,staticFile } from "remotion";export constMyComp :React .FC = () => {return <OffthreadVideo src ={staticFile ("vid.webm")} />;};
Loading videos via URL is also possible:
tsx
import {OffthreadVideo } from "remotion";export constMyComp :React .FC = () => {return (<OffthreadVideo src ="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />);};
tsx
import {OffthreadVideo } from "remotion";export constMyComp :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 constMyComp :React .FC = () => {return <Audio src ={staticFile ("tune.mp3")} />;};
tsx
import {Audio ,staticFile } from "remotion";export constMyComp :React .FC = () => {return <Audio src ={staticFile ("tune.mp3")} />;};
Loading audio from an URL is also possible:
tsx
import {Audio } from "remotion";export constMyComp :React .FC = () => {return (<Audio src ="https://file-examples.com/storage/fe48a63c5264cbd519788b3/2017/11/file_example_MP3_700KB.mp3" />);};
tsx
import {Audio } from "remotion";export constMyComp :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.tsxtsx
import "./style.css";
MyComp.tsxtsx
import "./style.css";
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.tsxtsx
import {Img } from "remotion";importlogo from "./logo.png";export constMyComp :React .FC = () => {return <Img src ={logo } />;};
MyComp.tsxtsx
import {Img } from "remotion";importlogo from "./logo.png";export constMyComp :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