API overview

Command line

Reference for the npx remotion commands

Configuration file

Reference for the remotion.config.ts file

remotion

Core APIs: useCurrentFrame(), interpolate(), etc.

<Composition>

Define a video

<Still>

Define a still

<Folder>

Organize compositions in the Studio sidebar

registerRoot()

Initialize a Remotion project

useCurrentFrame()

Obtain the current time

useVideoConfig()

Get the duration, dimensions and FPS of a composition

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()

<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

<Sequence>

Time-shifts it's children

<Series>

Display contents after another

<Freeze>

Freeze some content in time

<Loop>

Play some content repeatedly

delayRender()

Block a render from continuing

continueRender()

Unblock a render

cancelRender()

Abort an error

getInputProps()

Receive the user-defined input data

getRemotionEnvironment()

Determine if you are currently previewing or rendering

staticFile()

Access file from public/ folder

<AbsoluteFill>

Position content absolutely and in full size

VERSION

Get the current version of Remotion

@remotion/bundler

Create a Webpack bundle from Node.JS

bundle()

Create a Webpack bundle

@remotion/player

Play a Remotion video in the browser.

<Player>

Embed a Remotion composition in a web app

<Thumbnail>

Embed a still in a web app

@remotion/lambda

Render videos and stills on AWS Lambda

estimatePrice()

Estimate the price of a render

deployFunction()

Create a new function in AWS Lambda

deleteFunction()

Delete a function in AWS Lambda

getFunctionInfo()

Gets information about a function

getFunctions()

Lists available Remotion Lambda functions

getCompositionsOnLambda()

Gets list of compositions inside a Lambda function

deleteSite()

Delete a bundle from S3

deploySite()

Bundle and upload a site to S3

getAwsClient()

Access the AWS SDK directly

getRegions()

Get all available regions

getSites()

Get all available sites

downloadMedia()

Download a render artifact from S3

getUserPolicy()

Get the policy JSON for your AWS user

getRolePolicy()

Get the policy JSON for your AWS role

getOrCreateBucket()

Ensure a Remotion S3 bucket exists

getRenderProgress()

Query the progress of a render

presignUrl()

Make a private file public to those with the link

renderMediaOnLambda()

Trigger a video or audio render

renderStillOnLambda()

Trigger a still render

simulatePermissions()

Ensure permissions are correctly set up

speculateFunctionName()

Get the lambda function name based on its configuration

validateWebhookSignature()

Validate an incoming webhook request is authentic

@remotion/cloudrun

Render videos and stills on GCP Cloud Run

getServiceInfo()

Gets information about a service

deployService()

Create a new service in GCP Cloud Run

deleteService()

Delete a service in GCP Cloud Run

getServices()

Lists available Remotion Cloud Run services

speculateServiceName()

Speculate a service name based on its configuration

getRegions()

Get all available regions

deploySite()

Bundle and upload a site to Cloud Storage

deleteSite()

Delete a bundle from Cloud Storage

getSites()

Get all available sites from Cloud Storage

getOrCreateBucket()

Ensure a Remotion Cloud Storage bucket exists

renderMediaOnCloudrun()

Trigger a video or audio render

renderStillOnCloudrun()

Trigger a still render

testPermissions()

Ensure permissions are correctly set up in GCP

@remotion/captions

Common operations for subtitles.

Caption

An object shape for captions

parseSrt()

Parse a .srt file into a Caption array

serializeSrt()

Serialize a .srt file into a Caption array

createTikTokStyleCaptions()

Structure the captions for TikTok-style display

@remotion/gif

Include a GIF in your video.

<Gif>

Render a GIF

getGifDurationInSeconds()

Get the runtime of a GIF

preloadGif()

Prepare a GIF for displaying in the Player

@remotion/media-utils

Obtain info about video and audio.

audioBufferToDataUrl()

Serialize an audio buffer

getAudioData()

Get metadata of an audio source

getAudioDurationInSeconds()

Get the duration of an audio source

getVideoMetadata()

Get metadata of a video source

getWaveformPortion()

Trims audio data into a waveform

useAudioData()

getAudioData() as a hook

visualizeAudio()

Processes a waveform for visualization

@remotion/animation-utils

Obtain info about video and audio.

makeTransform()

Create a value for the CSS transform property

interpolateStyles()

Map a range of values to CSS style values

@remotion/tailwind

Webpack override for using TailwindCSS

enableTailwind()

Override the Webpack config to enable TailwindCSS

@remotion/enable-scss

Webpack override for enabling SASS/SCSS

enableScss()

Override the Webpack config to enable SCSS

@remotion/three

Create 3D videos using React Three Fiber

<ThreeCanvas>

A wrapper for React Three Fiber' Canvas

useVideoTexture(

Use a video in React Three Fiber

useOffthreadVideoTexture()

Use an <OffthreadVideo> in React Three Fiber

@remotion/skia

Low-level graphics using React Native Skia

enableSkia()

Webpack override for enabling Skia

<SkiaCanvas>

React Native Skia <Canvas> wrapper

@remotion/lottie

Include a Lottie animation in your video

<Lottie>

Embed a Lottie animation in Remotion

getLottieMetadata()

Get metadata of a Lottie animation

staticFile()

Load Lottie animations from a static file

@remotion/preload

Preload media for the Player

preloadVideo()

Preload a video source

preloadAudio()

Preload an audio source

preloadFont()

Preload a font

preloadImage()

Preload an image

resolveRedirect()

Get the definitive URL after all redirects

@remotion/renderer

Render video, audio and stills from Node.JS or Bun

getCompositions()

List available compositions

selectComposition()

Get a composition

renderMedia()

Render a video or audio

renderFrames()

Render a series of images

renderStill()

Render a single image

stitchFramesToVideo()

Turn images into a video

openBrowser()

Open a Chrome browser to reuse across renders

ensureBrowser()

Open a Chrome browser to reuse across renders

makeCancelSignal()

Create token to later cancel a render

getVideoMetadata()

Get metadata from a video file in Node.js

getSilentParts()

Obtain silent portions of a video or audio

ensureFfmpeg()

Check for ffmpeg binary and install if not existing

ensureFfprobe()

Check for ffprobe binary and install if not existing

getCanExtractFramesFast()

Probes for fast extraction for <OffthreadVideo>

@remotion/paths

Manipulate and obtain info about SVG paths

getLength()

Obtain length of an SVG path

getPointAtLength()

Get coordinates at a certain point of an SVG path

getTangentAtLength()

Gets tangents x and y of a point which is on an SVG path

reversePath()

Switch direction of an SVG path

normalizePath()

Replace relative with absolute coordinates

interpolatePath()

Interpolates between two SVG paths

evolvePath()

Animate an SVG path

translatePath()

Translates the position of an path against X/Y coordinates

warpPath()

Remap the coordinates of a path

scalePath()

Grow or shrink the size of the path

getBoundingBox()

Get the bounding box of a SVG path

resetPath()

Translates an SVG path to (0, 0)

extendViewBox()

Widen an SVG viewBox in all directions

getSubpaths()

Split SVG path into its parts

parsePath()

Parse a string into an array of instructions

serializeInstructions()

Turn an array of instructions into a SVG path

reduceInstructions()

Reduce the amount of instruction types

@remotion/noise

Generate noise effects

noise2D()

Create 2D noise

noise3D()

Create 3D noise

noise4D()

Create 4D noise

@remotion/shapes

Generate SVG shapes

makeRect()

Generate SVG Path for a rect

<Rect/>

Render a rect

makeCircle()

Generate SVG Path for a circle

<Circle/>

Render a circle

makePie()

Generate SVG Path for a pie

<Pie/>

Render a pie

makeEllipse()

Generate SVG Path for a ellipse

<Ellipse/>

Render a ellipse

makeTriangle()

Generate SVG Path for a triangle

<Triangle/>

Render a triangle

makeStar()

Generate SVG Path for a star

<Star/>

Render a star

makePolygon()

Generate SVG Path for a polygon

<Polygon/>

Render a polygon

@remotion/studio

APIs for controlling theRemotion Studio

getStaticFiles()

Get a list of files in the public folder

watchPublicFolder()

Listen to changes in the public folder

watchStaticFile()

Listen to changes of a static file

writeStaticFile()

Save content to a file in the public directory

saveDefaultProps()

Save default props to the root file

updateDefaultProps()

Update default props in the Props editor

deleteStaticFile()

Delete a file from the public directory

restartStudio()

Restart the Studio Server.

focusDefaultPropsPath()

Scrolls to a specific field in the default props editor

reevaluateComposition()

Re-runs calculateMetadata() on the current composition

@remotion/transitions

Transition between scenes

Components

<TransitionSeries>

A <Series> with transitions inbetween

Timings

springTiming()

Transition with a spring()

linearTiming()

Transition linearly with optional Easing

Presentations

Hover over an effect to see the preview.

A

B

fade()

Animate the opacity of the scenes

A

B

slide()

Slide in and push out the previous scene

A

B

wipe()

Slide over the previous scene

A

B

flip()

Rotate the previous scene

A

B

clockWipe()

Reveal the new scene in a circular movement

A

B

cube()

Paid

Rotate both scenes with 3D perspective

A

B

none()

Have no visual effect.

@remotion/layout-utils

Layout helpers

measureText()

Get dimensions of text

fillTextBox()

Find line breaks and overflows in a text box

fitText()

Get font size to fit text in a box

@remotion/install-whisper-cpp

Whisper.cpp installation and transcription

installWhisperCpp()

Install the whisper.cpp software

downloadWhisperModel()

Download a Whisper model

transcribe()

Transcribe an audio file

convertToCaptions()

Postprocessing for TikTok-style captions

@remotion/openai-whisper

Work with transcriptions from OpenAI Whisper

openAiWhisperApiToCaptions()

Turn OpenAI Whisper API transcriptions into an array of Caption

@remotion/animated-emoji

Google Fonts Animated Emojis as Remotion Components

<AnimatedEmoji>

Component for rendering an animated emoji.

getAvailableEmoji()

Get a list of available emoji.

@remotion/google-fonts

Load Google Fonts onto a page.

loadFont()

Load a Google Font

getAvailableFonts()

Static list of available fonts

getInfo()

Metadata about a specific font

@remotion/rive

Embed Rive animations in Remotion

<RemotionRiveCanvas>

Render a Rive animation

@remotion/zod-types

Zod types enabling Remotion Studio UI

zColor()

A Zod Type for colors

zTextarea()

A Zod Type for multiple-line text in a textarea

@remotion/motion-blur

Apply motion blur effects to components

<Trail>

Add a trail effect to children

<CameraMotionBlur>

Add a natural camera motion blur effect to children

@remotion/fonts

Load font files onto a page.

loadFont()

Load a font from a URL or a local file

@remotion/media-parser

A pure JavaScript library for parsing video files

parseMedia()

Parse a media file.

nodeReader

Read a file from the local file system.

fetchReader

Read a file using fetch().

webFileReader

Read a file from <input type="file">.