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
- bun
- pnpm
- yarn
npm i remotionbun i remotionpnpm i remotionyarn add remotionAPI
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 loadinterpolateColors()
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
<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