Skip to main content

remotion

A package containing the essential building blocks of expressing videos in Remotion.

Some pure functions such as interpolate() and interpolateColors() can also be used outside of Remotion.

Installation​

bash
npm i remotion
bash
npm i remotion

API​

The following functions and components are exposed:

Defining compositions

Declare renderable assets.

<Composition>
Define a video
<Still>
Define a still
<Folder>
Organize compositions in the Studio sidebar
registerRoot()
Initialize a Remotion project

Hooks

To be used inside a composition.

useCurrentFrame()
Obtain the current time
useVideoConfig()
Get the duration, dimensions and FPS of a composition

Animations

interpolate()
Map a range of values to another
spring()
Physics-based animation primitive
interpolateColors()
Map a range of values to colors
measureSpring()
Determine the duration of a spring
Easing
Customize animation curve of interpolate()

Media

<Img>
Render an <img> tag and wait for it to load
<Video>
Synchronize a <video> with Remotion's time
<Audio>
Synchronize <audio> with Remotion's time
<OffthreadVideo>
Alternative to <Video>
<IFrame>
Render an <iframe> tag and wait for it to load

Timing

<Sequence>
Time-shifts it's children
<Series>
Display contents after another
<Freeze>
Freeze some content in time
<Loop>
Play some content repeatedly

Async

delayRender()
Block a render from continuing
continueRender()
Unblock a render
cancelRender()
Abort an error

Dynamic data

getInputProps()
Receive the user-defined input data
getRemotionEnvironment()
Determine if you are currently previewing or rendering

Assets

staticFile()
Access file from public/ folder

Layout

<AbsoluteFill>
Position content absolutely and in full size

License​

Remotion License