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​

npm i remotion

API​

The following functions and components are exposed:

<AbsoluteFill>
Position content absolutely and in full size
cancelRender()
Abort an error
<Composition>
Define a video
continueRender()
Unblock a render
delayRender()
Block a render from continuing
Easing
Customize animation curve of interpolate()
<Folder>
Organize compositions in the Studio sidebar
<Freeze>
Freeze some content in time
getInputProps()
Receive the user-defined input data
getRemotionEnvironment()
Determine if you are currently previewing or rendering
<Html5Audio>
Synchronize <audio> with Remotion's time
<Html5Video>
Synchronize a <video> with Remotion's time
<HtmlInCanvas>
Draw DOM content into a canvas via HTML-in-canvas
<IFrame>
Render an <iframe> tag and wait for it to load
<Img>
Render an <img> tag and wait for it to load
<CanvasImage>
Render an image into a canvas and apply effects
createEffect()
Create custom effects for canvas components
interpolateColors()
Map a range of values to colors
interpolate()
Map a range of values to another
<Loop>
Play some content repeatedly
measureSpring()
Determine the duration of a spring
<OffthreadVideo>
Alternative to <Html5Video>
<AnimatedImage>
Disply a GIF, AVIF or animated WebP image
registerRoot()
Initialize a Remotion project
<Sequence>
Time-shifts it's children
InteractivitySchema
Define timeline controls for components and effects
<Series>
Display contents after another
spring()
Physics-based animation primitive
staticFile()
Access file from public/ folder
<Still>
Define a still
useCurrentFrame()
Obtain the current time
useVideoConfig()
Get the duration, dimensions and FPS of a composition
VERSION
Get the current version of Remotion
Interactive.withSchema()
Expose component props as Studio timeline controls

License​

Remotion License