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>

<AnimatedImage>

Disply a GIF, AVIF or animated WebP image

<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/video

An experimental <NewVideo /> tag for embedding videos.

<NewVideo>

Tag for reliable and accurate video embedding

@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

appRouterWebhook()

Handle incoming webhooks specifically for the Next.js app router

pagesRouterWebhook()

Handle incoming webhooks specifically for the Next.js pages router

expressWebhook()

Handle incoming webhooks specifically for Express.js

@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

useWindowedAudioData()

Optimized for fetching only current data, works only with .wav

visualizeAudio()

Process a music waveform for visualization

visualizeAudioWaveform()

Process a voice waveform for visualization

createSmoothSvgPath()

Turn waveform points into a smooth SVG path

@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 v3

enableTailwind()

Override the Webpack config to enable TailwindCSS

@remotion/tailwind-v4

Webpack override for using TailwindCSS v4

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

combineChunks()

Combine chunks of partial renders

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

cutPath()

Cut an SVG path at a specified length

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

makeHeart()

Generate SVG Path for a heart

<Heart/>

Render a heart

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.

play()

Start playback in the timeline

pause()

Pause playback in the timeline

toggle()

Toggle playback in the timeline

seek()

Jump to a position in the timeline

goToComposition()

Select a composition in the composition selector

focusDefaultPropsPath()

Scrolls to a specific field in the default props editor

reevaluateComposition()

Re-runs calculateMetadata() on the current composition

visualControl()

Create a control in the right sidebar of the Studio

@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

iris()

Reveal the scene through a circular mask from center

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

fitTextOnNLines()

Get font size to fit text on n lines

@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

toCaptions()

Converts the output from transcribe() into an array of Caption objects

@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

loadFontFromInfo()

Load a Google Font based on metadata

@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

zMatrix()

A Zod Type for editing matrices

@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.

downloadAndParseMedia()

Download and parse a media file.

parseMediaOnWebWorker()

Parse a media file in the browser on a separate thread.

parseMediaOnServerWorker()

Parse a media file on the server on a separate thread.

mediaParserController()

Pause, resume and abort the parsing.

hasBeenAborted()

Determine from an error if the parsing has been aborted.

WEBCODECS_TIMESCALE

The global timescale (1_000_000) of WebCodecs as a constant.

@remotion/webcodecs

Converting media using WebCodecs

convertMedia()

Converts a video using WebCodecs and Media Parser

getAvailableContainers()

Get a list of containers @remotion/webcodecs supports.

webcodecsController()

Pause, resume and abort the conversion.

canReencodeVideoTrack()

Determine if a video track can be re-encoded

canReencodeAudioTrack()

Determine if a audio track can be re-encoded

canCopyVideoTrack()

Determine if a video track can be copied without re-encoding

canCopyAudioTrack()

Determine if a audio track can be copied without re-encoding

getDefaultAudioCodec()

Gets the default audio codec for a container if no other audio codec is specified.

getDefaultVideoCodec()

Gets the default video codec for a container if no other audio codec is specified.

defaultOnAudioTrackHandler()

The default track transformation function for audio tracks.

defaultOnVideoTrackHandler()

The default track transformation function for video tracks.

getAvailableAudioCodecs()

Get the audio codecs that can fit in a container.

getAvailableVideoCodecs()

Get the video codecs that can fit in a container.

convertAudioData()

Change the format or sample rate of an AudioData object.

createAudioDecoder()

Create an AudioDecoder object.

createVideoDecoder()

Create a VideoDecoder object.

extractFrames()

Extract frames from a video at specific timestamps.

getPartialAudioData()

Extract audio data from a specific time window of a media file.

rotateAndResizeVideoFrame()

Rotate and resize a video frame.

webFsWriter

Writer that saves to browser file system using File System Access API.

bufferWriter

Writer that saves to an in-memory resizable ArrayBuffer.

@remotion/licensing

Report and query company license usage

registerUsagePoint()

Register a cloud render or WebCodecs conversion

getUsage()

Query usage of company license