API overview

remotion

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

<AbsoluteFill>

Position content absolutely and in full size

cancelRender()

<Composition>

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

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

<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

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

serializeSrt()

Serialize a .srt file into a Caption array

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

@remotion/enable-scss

Webpack override for enabling SASS/SCSS

enableScss()

Override the Webpack 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

getAvailableFonts()

Static list of available fonts

getInfo()

Metadata about a specific font

loadFontFromInfo()

Load a Google Font based on metadata

@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

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

getUsage()

Query usage of company license

@remotion/light-leaks

Light Leak effects

<LightLeak>

Render a light leak effect

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

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

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

<Trail>

Add a trail effect to children

<CameraMotionBlur>

Add a natural camera motion blur 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

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

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

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

Low-level graphics using React Native Skia

enableSkia()

Webpack override for enabling Skia

<SkiaCanvas>

React Native Skia <Canvas> wrapper

@remotion/starburst

Starburst Effect

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

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

fade()

Animate the opacity of the scenes

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

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

swap()

HTML-in-canvas

Swap scenes with perspective and reflections

cube()

Paid

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

renderStillOnVercel()

Render a still image in a sandbox

uploadToVercelBlob()

Upload a file from the sandbox to Vercel Blob

Types

TypeScript types reference

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