API overview

Command line

Reference for the npx remotion commands

Configuration file

Reference for the remotion.config.ts file

Options

Find options shared by commands, APIs, and configuration

remotion

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

<AbsoluteFill>

Position content absolutely and in full size

<AnimatedImage>

Display a GIF, AVIF or animated WebP image

<Artifact>

Emit an extra file during rendering

calculateMetadata()

Transform the metadata of a composition

cancelRender()

Abort an error

<CanvasImage>

Render an image into a canvas and apply effects

<Composition>

Define a video

continueRender()

Unblock a render

createEffect()

Create custom effects for canvas components

createEffectImplementation()

Type the state of one backend implementation of an effect

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

getStaticFiles()

Get all files in the public/ folder

<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

Interactive.create()

Add timing and Studio controls to a component

InteractivitySchema

Define timeline controls for components and effects

interpolate()

Map a range of values to another

interpolateColors()

Map a range of values to colors

<Loop>

Play some content repeatedly

measureSpring()

Determine the duration of a spring

<OffthreadVideo>

Alternative to <Html5Video>

prefetch()

Fetch an asset and keep it in memory

random()

Get deterministic pseudorandom values

registerRoot()

Initialize a Remotion project

<Sequence>

Time-shifts it's children

<Series>

Display contents after another

<Solid>

Render a solid-color rectangle on a canvas

spring()

Physics-based animation primitive

staticFile()

Access file from public/ folder

<Still>

Define a still

<Track>

Group clips on one Studio timeline row

useBufferState()

Inform the Player that your component is loading data

useCurrentFrame()

Obtain the current time

useCurrentScale()

Get the scale factor of the canvas

useDelayRender()

Scoped delayRender(), continueRender() and cancelRender()

usePixelDensity()

Get the pixel density factor of the current render or preview

useRemotionEnvironment()

Get information about the current Remotion environment

useVideoConfig()

Get the duration, dimensions and FPS of a composition

VERSION

Get the current version of Remotion

watchStaticFile()

Get notified when a static file changes

@remotion/animated-emoji

Google Fonts Animated Emojis as Remotion Components

<AnimatedEmoji>

Component for rendering an animated emoji.

getAvailableEmojis()

Get a list of available emoji.

@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/bundler

Create a Webpack bundle from Node.JS

bundle()

Create a Webpack bundle

@remotion/captions

Common operations for subtitles.

Caption

An object shape for captions

parseSrt()

Parse a .srt file into a Caption array

parseVtt()

Parse a .vtt file into a Caption array

serializeSrt()

Serialize a Caption array into a .srt file

createTikTokStyleCaptions()

Structure the captions for TikTok-style display

@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/elevenlabs

Work with transcriptions from ElevenLabs

elevenLabsTranscriptToCaptions()

Turn ElevenLabs Speech to Text output into an array of Caption

detectElevenLabsTranscriptFormat()

Recognize ElevenLabs transcript format signatures

@remotion/enable-scss

Bundler override for enabling SASS/SCSS

enableScss()

Override the bundler config to enable SCSS

@remotion/fonts

Load font files onto a page.

loadFont()

Load a font from a URL or a local file

@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/google-fonts

Load Google Fonts onto a page.

loadFont()

Load a Google Font

loadVariableFont()

Load a variable Google Font

getAvailableFonts()

Static list of available fonts

getInfo()

Metadata about a specific font

loadFontFromInfo()

Load a Google Font based on metadata

loadVariableFontFromInfo()

Load a variable Google Font based on metadata

@remotion/gsap

Use GSAP timelines in Remotion.

useGsapTimeline()

Build a GSAP timeline that is driven by the Remotion frame

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

deploySiteFromBundle()

Upload an existing bundle to S3

deploySite()

Deprecated: 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

cancelRenderOnLambda()

Cancel an in-progress render

deleteRender()

Delete a render and its metadata 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

renderFramesOnLambda()

Trigger an image sequence render

renderFramesOnLambdaAndStream()

Render an image sequence and stream progress

renderMediaOnLambda()

Trigger a video or audio render

renderMediaOnLambdaAndStream()

Render a video or audio and stream progress

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

Report and query company license usage

registerUsageEvent()

Register a render

getUsage()

Query usage of company license

@remotion/light-leaks

Light Leak effects

lightLeak()

Apply a light leak as a canvas effect

<LightLeak>

Render a light leak effect

@remotion/rough-notation

Rough annotation primitives

<Box>

Draw a box around text

<Bracket>

Draw brackets beside text

<Circle>

Circle text

<CrossedOff>

Cross off text with two strokes

<Highlight>

Draw a marker highlight behind text

<StrikeThrough>

Strike through text with one line

<Underline>

Underline text

@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/mac-cursors

Render macOS and custom CSS cursors.

<MacOSCursor>

Render a macOS or custom CSS cursor

@remotion/media

An experimental <NewVideo /> tag for embedding videos.

<Video>

WebCodecs-based tag for embedding videos

<Audio>

WebCodecs-based tag for embedding audio

@remotion/media-parser (deprecated)

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

getImageDimensions()

Get the dimensions of an image

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/motion-blur

Apply motion blur effects to components

<HtmlInCanvasMotionBlur>

Sample HTML across a frame for the best motion blur result

<CameraMotionBlur>

Add a natural camera motion blur effect to children

<Trail>

Add a trail effect to children

@remotion/noise

Generate noise effects

noise2D()

Create 2D noise

noise3D()

Create 3D noise

noise4D()

Create 4D noise

@remotion/openai-whisper

Work with transcriptions from OpenAI Whisper

openAiWhisperApiToCaptions()

Turn OpenAI Whisper API transcriptions into an array of Caption

isOpenAiWhisperTranscript()

Recognize OpenAI Whisper transcript signatures

@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

getInstructionIndexAtLength()

Get the instruction at a certain 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

interpolatePaths()

Interpolate SVG paths across multiple keyframes

evolvePath()

Animate an SVG path

centerPath()

Translates an SVG path to center it around a target point

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

extractAudio()

Extract the audio track of a video file

Types

TypeScript types of @remotion/renderer

ensureFfmpeg()

Check for ffmpeg binary and install if not existing

ensureFfprobe()

Check for ffprobe binary and install if not existing

@remotion/rive

Embed Rive animations in Remotion

<RemotionRiveCanvas>

Render a Rive animation

@remotion/sfx

Sound effects library

whip

Whip sound effect

whoosh

Whoosh sound effect

pageTurn

Page turn sound effect

uiSwitch

UI switch sound effect

mouseClick

Mouse click sound effect

shutterModern

Modern camera shutter sound effect

shutterOld

Vintage camera shutter sound effect

ding

Ding notification sound effect

bruh

Bruh sound effect

vineBoom

Vine boom sound effect

windowsXpError

Windows XP error sound effect

fah

Fah meme sound effect

spongebobFail

SpongeBob fail sound effect

omgHellNah

Oh my god bro hell nah sound effect

priceIsRightFail

Price Is Right fail horn sound effect

romanceMeme

Romance meme sound effect

boneCrack

Bone crack sound effect

animeWow

Anime wow sound effect

yippee

Yippee sound effect

loadingLag

Loading lag sound effect

wilhelmScream

Wilhelm scream sound effect

macQuack

Mac quack sound effect

skedaddle

Skedaddle sound effect

snapchatNotification

Snapchat notification sound effect

nellyAhh

Nelly ahh sound effect

sanctuaryGuardianWhat

Sanctuary Guardian what meme sound effect

minecraftHurt

Minecraft hurt sound effect

ohMyGodVine

Oh my god vine sound effect

illuminatiConfirmed

Illuminati confirmed sound effect

dramaticBoomer

Dramatic boomer sound effect

triggered

Triggered meme sound effect

recordScratch

Record scratch sound effect

@remotion/shapes

Generate SVG shapes

makeArrow()

Generate SVG Path for a arrow

<Arrow/>

Render a arrow

makeRect()

Generate SVG Path for a rect

<Rect/>

Render a rect

makeCallout()

Generate SVG Path for a callout

<Callout/>

Render a callout

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

makeSpark()

Generate SVG Path for a spark

<Spark/>

Render a spark

makePolygon()

Generate SVG Path for a polygon

<Polygon/>

Render a polygon

@remotion/skia

Low-level graphics using React Native Skia

enableSkia()

Webpack override for enabling Skia

<SkiaCanvas>

React Native Skia <Canvas> wrapper

@remotion/starburst

Starburst Effect

Effects

starburst()

Apply a starburst ray effect

Components

<Starburst>

Render a starburst ray effect

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

shutDownStudio()

Shut down 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/studio-protocol

Create Element payloads and send them into Remotion Studio

createElementPayload()

Create a versioned Element payload

staticFileRef()

Reference an Element asset in initial props

buildOpenInRemotionNewUrl()

Build a URL that opens an Element on remotion.new

setStudioDragData()

Put an Element payload on a drag event

installInStudio()

Request installation into the active Studio

serializeElementPayloadForHtml()

Embed an Element payload in page HTML

addElementLibraryToStudio()

Add an Element Library to a Studio project

subscribeToCaptionStyleSelection()

Subscribe to your website’s selected caption style

isInsideStudio()

Check whether a library is embedded in Studio

@remotion/tailwind

Bundler override for using TailwindCSS v3

enableTailwind()

Override the bundler config to enable TailwindCSS

@remotion/tailwind-v4

Bundler override for using TailwindCSS v4

enableTailwind()

Override the bundler config to enable TailwindCSS

@remotion/three

Create 3D videos using React Three Fiber

<ThreeCanvas>

A wrapper for React Three Fiber' Canvas

<ThreeWebGPUCanvas>

Use Three.js with the WebGPU renderer

useVideoTexture()

Deprecated. Use a video in React Three Fiber

useOffthreadVideoTexture()

Deprecated. Use an <OffthreadVideo> in React Three Fiber

@remotion/transitions

Transition between scenes

Components

<TransitionSeries>

A <Series> with transitions inbetween

APIs

useTransitionProgress()

Get the progress of the transition inside a scene

makeHtmlInCanvasPresentation()

Create a presentation from an HTML-in-canvas shader

Timings

springTiming()

Transition with a spring()

linearTiming()

Transition linearly with optional Easing

Presentations

Hover over an effect to see the preview.

fade()

Animate the opacity of the scenes

pushCut()

Punch into a hard cut with a brief flash

slide()

Slide in and push out the previous scene

wipe()

Slide over the previous scene

flip()

Rotate the previous scene

clockWipe()

Reveal the new scene in a circular movement

iris()

Reveal the scene through a circular mask from center

zoomBlur()

HTML-in-canvas

Zoom and rotate scenes with a radial blur

dreamyZoom()

HTML-in-canvas

Zoom through a white flash with gentle rotation

filmBurn()

HTML-in-canvas

Burn through scenes with procedural glow and blur

linearBlur()

HTML-in-canvas

Blend scenes with a directional multi-sample blur

bookFlip()

HTML-in-canvas

Turn the scenes like a shaded book page

zoomInOut()

HTML-in-canvas

Zoom one scene in, crossfade, zoom the next out

dissolve()

HTML-in-canvas

Burn through the previous scene with a glowing edge

ripple()

HTML-in-canvas

Ripple the outgoing scene with a sinusoidal wave

crosswarp()

HTML-in-canvas

Warp both scenes across the x-axis and blend them

crossZoom()

HTML-in-canvas

Zoom both scenes through a moving center and blur

swap()

HTML-in-canvas

Swap scenes with perspective and reflections

blurSlide()

HTML-in-canvas

Whip both scenes sideways with a motion blur

cube()

Rotate both scenes with 3D perspective

none()

Have no visual effect.

@remotion/vercel

Render videos on Vercel Sandbox

createSandbox()

Create a sandbox with Remotion installed

addBundleToSandbox()

Copy a Remotion bundle into a sandbox

renderMediaOnVercel()

Render a video in a sandbox

getRenderProgress()

Poll a detached sandbox render

renderStillOnVercel()

Render a still image in a sandbox

uploadToVercelBlob()

Upload a file from the sandbox to Vercel Blob

Types

TypeScript types reference

@remotion/video-matting

Separate video into base and foreground layers

canUseVideoMatting()

Check whether a model is supported

getAvailableModels()

List models and their download sizes

isVideoMattingModelCached()

Check whether a model is downloaded

downloadVideoMattingModel()

Download a model

loadVideoMattingModel()

Initialize a downloaded model

removeVideoMattingModel()

Remove a model from the browser cache

separateVideoLayers()

Create base and foreground WebM layers

disposeVideoMattingModel()

Release model memory

@remotion/webcodecs (deprecated)

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/whisper-webgpu

Transcribe audio in the browser using Whisper and WebGPU

canUseWhisperWebGpu()

Check whether transcription is possible

getAvailableModels()

List models and their download sizes

clearStaleModels()

Remove models discontinued by newer versions

isWhisperModelCached()

Check whether a model is downloaded

downloadWhisperModel()

Download a model

loadWhisperModel()

Initialize a downloaded model

disposeWhisperModel()

Release model memory

removeWhisperModel()

Remove a model from the persistent cache

transcribe()

Transcribe a waveform with word-level timestamps

toCaptions()

Convert a transcription to @remotion/captions

resampleTo16Khz()

Decode and resample browser audio

@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