Remotion
Knowledge base from the Remotion (programmatic video creation with React/TypeScript) documentation — core API (Composition, Sequence, hooks), rendering pipeline (local, Lambda, Cloud Run), Studio/Player, and every official package (transitions, captions, media-parser, webcodecs, shapes, recorder, sfx, and more). Use when building or rendering a Remotion video, choosing a rendering backend, looking up a component/hook/API signature, or picking the right package for an effect or integration.
988 capítulos
Remotion
Package: remotion | Chapters: 988 | Generated: 2026-08-25
How to Use This Skill
- Without arguments — load Core Patterns below for the frame-driven animation model and composition structure
- With a topic — ask about
spring,lambda,transitions, or another indexed term/package; I find and read the relevant chapter - With a chapter — ask for
ch075; I load that specific chapter - Browse — ask "what chapters do you have on rendering?" to see the relevant index section
When you ask about something not covered in Core Patterns below, I will read the relevant chapter file before answering.
Core Patterns & Conventions
Remotion videos are React components rendered frame-by-frame, not played back like a normal web animation. The whole framework follows from one rule: every visual must be a pure function of the current frame.
useCurrentFrame()drives everything. Animate by reading this hook and deriving styles/values from it withinterpolate()(linear/eased) orspring()(physics-based). Never usesetState,setInterval, orDate.now()inside a composition — that breaks the determinism that makes distributed/parallel rendering possible (frame 500 must render identically whether it's rendered alone or as part of a full pass).<Composition>registers a video;<Sequence>(and<Series>for the back-to-back case) time-shift child components so each scene'suseCurrentFrame()is relative to its own start, not the whole video's.registerRoot()lives in its own entry file, separate from where compositions are defined, so React Fast Refresh doesn't break.- Metadata can be dynamic. If duration/dimensions/fps depend on external data, use
calculateMetadata()on<Composition>instead of hardcoding them. - Async work is explicit.
delayRender()/continueRender()pause a render for a specific component's async task (data fetch, font load); this has no effect in Studio/Player preview, only in actual renders. - Assets go through
staticFile(). Files inpublic/are referenced bystaticFile('/path'), not relative imports — this is what makes them resolve correctly both in Studio and once bundled. - Preview and render are different environments. Studio and Player approximate the real thing;
<OffthreadVideo>exists specifically because HTML5<video>/<Video>frame extraction isn't accurate enough for real rendering. Always validate against an actual render, not just the Studio preview. - Rendering is pluggable. The same bundled composition can be rendered via
renderMedia()locally/self-hosted, or dispatched to Lambda or Cloud Run for managed, scalable rendering — the choice is about infra control vs. scale, not a different API model. - The ecosystem is packages, not a monolith. Effects, transitions, captions, shapes, media parsing, recording, and third-party integrations (Lottie, Rive, ElevenLabs, Whisper) all ship as separate
@remotion/*packages layered on the same core frame/composition model.
Chapter Index
Fundamentals & Core Concepts
| # | Title |
|---|---|
| ch001 | <AbsoluteFill> |
| ch002 | Animating properties |
| ch003 | Animation math |
| ch004 | Build a timeline-based video editor |
| ch005 | calculateMetadata() |
| ch006 | <Composition> |
| ch007 | Configuration file |
| ch008 | Variable duration and dimensions |
| ch009 | Easing |
| ch010 | <Folder> |
| ch011 | <Freeze> |
| ch012 | interpolate() |
| ch013 | interpolateColors() |
| ch014 | Layers |
| ch015 | <Loop> |
| ch016 | measureSpring() |
| ch017 | Measuring DOM nodes |
| ch018 | random() |
| ch019 | registerRoot() |
| ch020 | <HtmlInCanvas> |
| ch021 | Making components reusable |
| ch022 | Output scaling |
| ch023 | <Sequence> |
| ch024 | <Series> |
| ch025 | spring() |
| ch026 | Remotion Bundle |
| ch027 | Cloud Run URL |
| ch028 | Composition |
| ch029 | Concurrency |
| ch030 | Entry point |
| ch031 | Input Props |
| ch032 | Remotion Player |
| ch033 | Public directory |
| ch034 | Remotion Root |
| ch035 | Root file |
| ch036 | Sequence |
| ch037 | Serve URL |
| ch038 | Service Name |
| ch039 | Remotion Studio |
| ch040 | The fundamentals |
| ch041 | Remotion Timeline |
| ch042 | Remotion Timeline Demo |
| ch043 | Timeline – FAQ |
| ch044 | Timeline – Rendering videos |
| ch045 | Timeline – Setup |
| ch046 | Timeline – Usage |
| ch047 | Transforms |
| ch048 | Using randomness |
Hooks & Data APIs
| # | Title |
|---|---|
| ch049 | cancelRender() |
| ch050 | continueRender() |
| ch051 | Data fetching |
| ch052 | Inferring controls from default props |
| ch053 | delayRender() and continueRender() |
| ch054 | Detect if a video was made with Remotion |
| ch055 | getAudioData() |
| ch056 | getAudioDurationInSeconds() |
| ch057 | Get help |
| ch058 | getImageDimensions() |
| ch059 | getInputProps() |
| ch060 | getRemotionEnvironment() |
| ch061 | getVideoMetadata() |
| ch062 | getWaveformPortion() |
| ch063 | Interactive |
| ch064 | Interactive.withSchema() |
| ch065 | InteractivitySchema |
| ch066 | Setting video metadata |
| ch067 | Passing props to a composition |
| ch068 | How props get resolved |
| ch069 | Defining a schema for your props |
| ch070 | staticFile() |
| ch071 | staticFile() does not support relative paths |
| ch072 | staticFile() does not support remote URLs |
| ch073 | useAudioData() |
| ch074 | useBufferState() |
| ch075 | useCurrentFrame() |
| ch076 | useCurrentScale() |
| ch077 | useDelayRender() |
| ch078 | <Img>, <Video> and <Audio> |
| ch079 | usePixelDensity() |
| ch080 | useRemotionEnvironment() |
| ch081 | useVideoConfig() |
| ch082 | useWindowedAudioData() |
CLI & Bundling
| # | Title |
|---|---|
| ch083 | Authoring a Remotion library |
| ch084 | bundle() |
| ch085 | @remotion/bundler |
| ch086 | Webpack and Rspack |
| ch087 | npx remotion add |
| ch088 | npx remotion benchmark |
| ch089 | npx remotion browser |
| ch090 | npx remotion browser ensure |
| ch091 | npx remotion bundle |
| ch092 | npx remotion compositions |
| ch093 | npx create-video |
| ch094 | npx remotion ffmpeg |
| ch095 | npx remotion ffprobe |
| ch096 | npx remotion gpu |
| ch097 | npx remotion help |
| ch098 | npx remotion install |
| ch099 | npx remotion render |
| ch100 | npx remotion skills |
| ch101 | npx remotion still |
| ch102 | npx remotion studio |
| ch103 | npx remotion upgrade |
| ch104 | npx remotion versions |
| ch105 | enableScss() |
| ch106 | @remotion/enable-scss |
| ch107 | Plain JavaScript |
| ch108 | Using legacy Babel transpilation |
| ch109 | enableTailwind() |
| ch110 | @remotion/tailwind |
| ch111 | enableTailwind() |
| ch112 | @remotion/tailwind-v4 |
| ch113 | TypeScript aliases |
| ch114 | Webpack dynamic imports |
Rendering & SSR
| # | Title |
|---|---|
| ch115 | Chromium flags |
| ch116 | Comparison of server-side rendering options |
| ch117 | Render videos programmatically from a dataset |
| ch118 | Distributed rendering |
| ch119 | DPA Statement |
| ch120 | Encoding Guide |
| ch121 | Environment variables |
| ch122 | --gl flag |
| ch123 | Using the GPU |
| ch124 | Hardware accelerated encoding |
| ch125 | Supporting multiple frame rates |
| ch126 | Parameterized videos |
| ch127 | Performance Tips |
| ch128 | Upload with a presigned URL |
| ch129 | Rendering ProRes |
| ch130 | Quality Guide |
| ch131 | Render your video |
| ch132 | Render all compositions |
| ch133 | Rendering GIFs |
| ch134 | @remotion/renderer |
| ch135 | combineChunks() |
| ch136 | ensureBrowser() |
| ch137 | ensureFfmpeg() |
| ch138 | ensureFfprobe() |
| ch139 | extractAudio() |
| ch140 | getCanExtractFramesFast() |
| ch141 | getCompositions() |
| ch142 | getSilentParts() |
| ch143 | getVideoMetadata() |
| ch144 | makeCancelSignal() |
| ch145 | openBrowser() |
| ch146 | renderFrames() |
| ch147 | renderMedia() |
| ch148 | renderStill() |
| ch149 | selectComposition() |
| ch150 | stitchFramesToVideo() |
| ch151 | TypeScript Types Reference |
| ch152 | Server-Side Rendering |
| ch153 | Server-Side Rendering (v1 and v2) |
| ch154 | Rendering using SSR APIs |
| ch155 | <Still> |
| ch156 | Still images |
Deployment & Runtimes
| # | Title |
|---|---|
| ch157 | Deploying to Azure Container Apps |
| ch158 | Bun support |
| ch159 | Deploying to Cloudflare Containers |
| ch160 | Deno support |
| ch161 | Dockerizing a Remotion app |
| ch162 | Using Remotion in Electron |
| ch163 | Useful functions outside of Remotion |
| ch164 | Remotion on Vercel |
| ch165 | addBundleToSandbox() |
| ch166 | @remotion/vercel |
| ch167 | createSandbox() |
| ch168 | getRenderProgress() |
| ch169 | renderMediaOnVercel() |
| ch170 | renderStillOnVercel() |
| ch171 | TypeScript Types Reference |
| ch172 | uploadToVercelBlob() |
| ch173 | Rendering with Vercel Sandbox |
Assets & Media
| # | Title |
|---|---|
| ch174 | <AnimatedImage> |
| ch175 | Delaying Audio |
| ch176 | Exporting Audio |
| ch177 | Use Audio from video |
| ch178 | Importing Audio |
| ch179 | Muting Audio |
| ch180 | Order of Operations |
| ch181 | Controlling Pitch |
| ch182 | Sound effects |
| ch183 | Controlling playback speed |
| ch184 | Trimming Audio |
| ch185 | Audio Visualization |
| ch186 | Controlling Volume |
| ch187 | audioBufferToDataUrl() |
| ch188 | <CanvasImage> |
| ch189 | Client-side rendering |
| ch190 | Cancelling renders |
| ch191 | How client-side rendering works |
| ch192 | HTML-in-canvas |
| ch193 | Limitations of client-side rendering |
| ch194 | Migrating code to client-side rendering |
| ch195 | Page responsiveness |
| ch196 | Flickering |
| ch197 | Using fonts |
| ch198 | loadFont() |
| ch199 | getStaticFiles() |
| ch200 | @remotion/gif |
| ch201 | getGifDurationInSeconds() |
| ch202 | <Gif> |
| ch203 | preloadGif() |
| ch204 | getAvailableFonts() |
| ch205 | getInfo() |
| ch206 | loadFont() |
| ch207 | loadFontFromInfo() |
| ch208 | HLS support (HTTP Live Streaming) |
| ch209 | <Html5Audio> |
| ch210 | <Html5Video> |
| ch211 | <IFrame> |
| ch212 | <Img> |
| ch213 | @remotion/media |
| ch214 | <Audio> |
| ch215 | In-memory cache for @remotion/media |
| ch216 | Fallback behavior in @remotion/media |
| ch217 | Supported media |
| ch218 | <Video> |
| ch219 | Remotion and Mediabunny |
| ch220 | @remotion/media-parser |
| ch221 | Could not play video/audio with src |
| ch222 | @remotion/media-utils |
| ch223 | Non-seekable media |
| ch224 | <OffthreadVideo> |
| ch225 | prefetch() |
| ch226 | preloadAudio() |
| ch227 | preloadFont() |
| ch228 | preloadImage() |
| ch229 | preloadVideo() |
| ch230 | Audio Sample Rate |
| ch231 | Slow method to extract frame |
| ch232 | Rendering transparent videos |
| ch233 | Validating user videos |
| ch234 | Embedding videos into Remotion |
| ch235 | Change the speed of a video over time |
| ch236 | How do I make the composition the same duration as my video? |
| ch237 | Using a video as a texture in Three.js |
| ch238 | Different segments at different speeds |
| ch239 | Jump Cutting |
| ch240 | #t= Media Fragments |
| ch241 | Embedding ProRes |
| ch242 | Playing videos in sequence |
| ch243 | Embedding transparent videos |
| ch244 | Video manipulation |
| ch245 | Comparison of video tags |
| ch246 | Handling user video uploads |
| ch247 | watchStaticFile() |
Framework & Renderer Integrations
| # | Title |
|---|---|
| ch248 | Using Remotion in Angular |
| ch249 | Import from Figma |
| ch250 | useGsapTimeline() |
| ch251 | HTML-in-canvas |
| ch252 | Map animations in Remotion |
| ch253 | React Native |
| ch254 | Shaders |
| ch255 | enableSkia() |
| ch256 | <SkiaCanvas /> |
| ch257 | <Solid> |
| ch258 | Import from Spline |
| ch259 | Using Remotion in Svelte |
| ch260 | @remotion/three |
| ch261 | <ThreeCanvas> |
| ch262 | <ThreeWebGPUCanvas> |
| ch263 | Using Remotion in Vue |
| ch264 | Using WebGL and WebGPU during renders |
| ch265 | @remotion/web-renderer |
| ch266 | canRenderMediaOnWeb() |
| ch267 | getEncodableAudioCodecs() |
| ch268 | getEncodableVideoCodecs() |
| ch269 | renderMediaOnWeb() |
| ch270 | renderStillOnWeb() |
| ch271 | TypeScript Types Reference |
Troubleshooting & Errors
| # | Title |
|---|---|
| ch272 | How to debug any CORS issue |
| ch273 | ENAMETOOLONG |
| ch274 | Build a Google Font picker |
| ch275 | 'Target closed' error message |
| ch276 | Debugging timeouts |
| ch277 | Flickering when using background-image or mask-image |
| ch278 | Fast Refresh not working |
| ch279 | Failed to launch the browser process |
| ch280 | Calling bundle() in bundled code |
| ch281 | Cannot save default props |
| ch282 | The source provided could not be parsed as a value list |
| ch283 | Could not determine executable to run |
| ch284 | Don't use CSS animations in Remotion |
| ch285 | Debugging render failures |
| ch286 | defaultProps too big - could not serialize |
| ch287 | Loading <Img> with src http://localhost:3000/proxy |
| ch288 | Font loading errors |
| ch289 | Root component Timeout |
| ch290 | Flickering when using Next.js <Image> tag |
| ch291 | No frame found at position error message |
| ch292 | Avoiding flickering in <Player> |
| ch293 | Apple Silicon under Rosetta |
| ch294 | Process quit with signal SIGKILL |
| ch295 | Debugging stuck renders |
| ch296 | Text subpixel rendering |
| ch297 | Timed out evaluating page function |
| ch298 | Why does my video not have sound? |
| ch299 | Failed to acquire WebGL2 context |
| ch300 | Wrongly mounted <Composition> |
Migration & Versioning
| # | Title |
|---|---|
| ch301 | v2.0 Migration |
| ch302 | v3.0 Migration |
| ch303 | v4.0 Migration |
| ch304 | v5.0 Migration |
| ch305 | Upgrade to React 18 |
| ch306 | React 19 |
| ch307 | Upgrading Remotion |
| ch308 | VERSION |
| ch309 | Version mismatch |
AI Tooling Integrations
| # | Title |
|---|---|
| ch310 | Prompt to Motion Graphics SaaS Starter Kit |
| ch311 | Prompting a Remotion video with Bolt.new |
| ch312 | Use the Remotion Chatbot |
| ch313 | Claude Code plugin |
| ch314 | Codex plugin |
| ch315 | Prompting videos with coding agents |
| ch316 | Cursor plugin |
| ch317 | Just-in-time compilation of Remotion code |
| ch318 | Generate Remotion Code using LLMs |
| ch319 | Kimi Code plugin |
| ch320 | Remotion's Model Context Protocol (deprecated) |
| ch321 | Plugins |
| ch322 | Agent Skills |
| ch323 | Remotion System Prompt for LLMs |
| ch324 | elevenLabsTranscriptToCaptions() |
| ch325 | openAiWhisperApiToCaptions() |
Studio, Player & Editing
| # | Title |
|---|---|
| ch326 | <Experimental.Clipper> |
| ch327 | Motion Design Systems |
| ch328 | Editor Starter |
| ch329 | Is Remotion building Lovable for Motion Graphics? |
| ch330 | Creating overlays |
| ch331 | @remotion/player |
| ch332 | Combatting autoplay issues |
| ch333 | Player - Best practices |
| ch334 | The Player buffer state |
| ch335 | Displaying the current time |
| ch336 | Custom controls for the Player |
| ch337 | Examples for @remotion/player |
| ch338 | Installation |
| ch339 | Code sharing |
| ch340 | Media Key Behavior (Web MediaSession API) |
| ch341 | Playback issues in the <Player> |
| ch342 | <Player> |
| ch343 | Preloading assets |
| ch344 | Premounting |
| ch345 | Sizing |
| ch346 | <Thumbnail> |
| ch347 | Turn a <Player> into a Remotion project |
| ch348 | Preview your video |
| ch349 | @remotion/studio |
| ch350 | deleteStaticFile() |
| ch351 | Deploy the Remotion Studio on a VPS |
| ch352 | Deploy Remotion Studio as static site |
| ch353 | focusDefaultPropsPath() |
| ch354 | getStaticFiles() |
| ch355 | goToComposition() |
| ch356 | Interactivity |
| ch357 | Interactivity best practices |
| ch358 | Make a component interactive |
| ch359 | Setting the default code editor |
| ch360 | pause() |
| ch361 | play() |
| ch362 | Quick Switcher |
| ch363 | reevaluateComposition() |
| ch364 | restartStudio() |
| ch365 | saveDefaultProps() |
| ch366 | seek() |
| ch367 | Keyboard navigation |
| ch368 | toggle() |
| ch369 | updateDefaultProps() |
| ch370 | visualControl() |
| ch371 | watchPublicFolder() |
| ch372 | watchStaticFile() |
| ch373 | writeStaticFile() |
| ch374 | Converting a Remotion project to an app |
| ch375 | Remotion Studio Protocol |
| ch376 | Integrating a component library with Studio |
| ch377 | createElementPayload() |
| ch378 | installInStudio() |
| ch379 | Studio Protocol security |
| ch380 | setStudioDragData() |
| ch381 | Text highlights |
| ch382 | Third party integrations |
| ch383 | Transitions |
| ch384 | Edit default props visually |
Legal, Meta & Support
| # | Title |
|---|---|
| ch385 | Accessibility of Remotion products |
| ch386 | Accessibility Statement: remotion.dev |
| ch387 | Accessibility Statement: remotion.pro |
| ch388 | Acknowledgements |
| ch389 | Import from After Effects |
| ch390 | <Artifact> |
| ch391 | Emitting Artifacts |
| ch392 | Ask in public |
| ch393 | Installing Remotion in an existing project |
| ch394 | Buying a video editor template |
| ch395 | Contributing to Remotion |
| ch396 | Contributing to the documentation |
| ch397 | Implementing a new feature |
| ch398 | Formatting in the Remotion repo |
| ch399 | Implementing a new option |
| ch400 | Contribute your own presentation |
| ch401 | Contributing Rust code |
| ch402 | Adding a sound effect |
| ch403 | Contributing to client-side rendering |
| ch404 | DPIA Statement |
| ch405 | Investors |
| ch406 | License and terms |
| ch407 | License FAQ |
| ch408 | License & Pricing |
| ch409 | @remotion/licensing |
| ch410 | getUsage() |
| ch411 | registerUsageEvent() |
| ch412 | Privacy Policy of Remotion (v5.0) |
| ch413 | List of resources |
| ch414 | Security Best Practices |
| ch415 | Support Policy |
| ch416 | Telemetry |
| ch417 | Terms and Conditions of Remotion (v5.0) |
Lambda (@remotion/lambda)
| # | Title |
|---|---|
| ch418 | @remotion/lambda |
| ch419 | appRouterWebhook() |
| ch420 | Authentication |
| ch421 | Auto-delete renders |
| ch422 | AWS China regions |
| ch423 | Bucket names in Remotion Lambda |
| ch424 | Bucket Security |
| ch425 | Cancelling Lambda renders |
| ch426 | cancelRenderOnLambda() |
| ch427 | Prerelease Changelog |
| ch428 | Production Checklist |
| ch429 | @remotion/lambda - CLI |
| ch430 | npx remotion lambda compositions |
| ch431 | npx remotion lambda functions |
| ch432 | npx remotion lambda functions deploy |
| ch433 | npx remotion lambda functions ls |
| ch434 | npx remotion lambda functions rm |
| ch435 | npx remotion lambda functions rmall |
| ch436 | npx remotion lambda policies |
| ch437 | npx remotion lambda quotas |
| ch438 | npx remotion lambda regions |
| ch439 | npx remotion lambda render |
| ch440 | npx remotion lambda sites |
| ch441 | npx remotion lambda sites create |
| ch442 | npx remotion lambda sites ls |
| ch443 | npx remotion lambda sites rm |
| ch444 | npx remotion lambda sites rmall |
| ch445 | npx remotion lambda still |
| ch446 | Concurrency |
| ch447 | How much does Remotion Lambda cost? |
| ch448 | Customizing Lambda output destination |
| ch449 | Custom Layers |
| ch450 | Data transfer cost |
| ch451 | deleteFunction() |
| ch452 | deleteRender() |
| ch453 | deleteSite() |
| ch454 | deployFunction() |
| ch455 | deploySite() |
| ch456 | deploySiteFromBundle() |
| ch457 | Disk size |
| ch458 | downloadMedia() |
| ch459 | downloadVideo() |
| ch460 | Authenticating Lambda with EC2 |
| ch461 | estimatePrice() |
| ch462 | expressWebhook() |
| ch463 | FAQ |
| ch464 | Faster progress polling |
| ch465 | February 2022 Outage |
| ch466 | Upgrade your Lambda functions to prevent breakage |
| ch467 | getAwsClient() |
| ch468 | getCompositionsOnLambda() |
| ch469 | getFunctionInfo() |
| ch470 | getFunctions() |
| ch471 | getOrCreateBucket() |
| ch472 | getRegions() |
| ch473 | getRenderProgress() |
| ch474 | getRolePolicy() |
| ch475 | getSites() |
| ch476 | getUserPolicy() |
| ch477 | Triggering renders from Go |
| ch478 | How Remotion Lambda works |
| ch479 | Enable Lambda Insights |
| ch480 | Light client |
| ch481 | Lambda Limits |
| ch482 | Multiple buckets in Remotion Lambda |
| ch483 | Function naming convention |
| ch484 | Optimizing for cost |
| ch485 | Optimizing for speed |
| ch486 | pagesRouterWebhook() |
| ch487 | Permissions |
| ch488 | Triggering renders from PHP |
| ch489 | presignUrl() |
| ch490 | Using a proxy with Remotion Lambda |
| ch491 | Triggering renders from Python |
| ch492 | Using Remotion Lambda with R2 |
| ch493 | Region selection |
| ch494 | renderMediaOnLambda() |
| ch495 | renderStillOnLambda() |
| ch496 | renderVideoOnLambda() |
| ch497 | Triggering renders from Ruby |
| ch498 | Runtime |
| ch499 | Cannot create a S3 bucket using Remotion |
| ch500 | Separating production and testing environments |
| ch501 | Using the Serverless Framework with Remotion Lambda |
| ch502 | Setup |
| ch503 | simulatePermissions() |
| ch504 | speculateFunctionName() |
| ch505 | Using Lambda with SQS |
| ch506 | Using Remotion Lambda with Supabase |
| ch507 | The bucket does not allow ACLs |
| ch508 | Debugging failed Lambda renders |
| ch509 | AWS Permissions Troubleshooting |
| ch510 | AWS Rate Limit Troubleshooting |
| ch511 | "The security token included in the request is invalid" |
| ch512 | UnrecognizedClientException |
| ch513 | Uninstall Lambda |
| ch514 | Upgrading Lambda |
| ch515 | validateWebhookSignature() |
| ch516 | Webhooks |
| ch517 | Using Lambda with IAM roles |
| ch518 | Example setup without IAM user |
Cloud Run (@remotion/cloudrun)
| # | Title |
|---|---|
| ch519 | @remotion/cloudrun |
| ch520 | Production Checklist |
| ch521 | @remotion/cloudrun - CLI |
| ch522 | npx remotion cloudrun permissions |
| ch523 | npx remotion cloudrun regions |
| ch524 | npx remotion cloudrun render |
| ch525 | npx remotion cloudrun services |
| ch526 | npx remotion cloudrun services deploy |
| ch527 | npx remotion cloudrun services ls |
| ch528 | npx remotion cloudrun services rm |
| ch529 | npx remotion cloudrun services rmall |
| ch530 | npx remotion cloudrun sites |
| ch531 | npx remotion cloudrun sites create |
| ch532 | npx remotion cloudrun sites ls |
| ch533 | npx remotion cloudrun sites rm |
| ch534 | npx remotion cloudrun sites rmall |
| ch535 | npx remotion cloudrun still |
| ch536 | deleteService() |
| ch537 | deleteSite() |
| ch538 | deployService() |
| ch539 | deploySite() |
| ch540 | Generate .env File |
| ch541 | getOrCreateBucket() |
| ch542 | getRegions() |
| ch543 | getServiceInfo() |
| ch544 | getServices() |
| ch545 | getSites() |
| ch546 | Instance Count |
| ch547 | Light client |
| ch548 | Cloud Run Limits |
| ch549 | Multiple buckets in Remotion Cloud Run |
| ch550 | Permissions |
| ch551 | Region selection |
| ch552 | renderMediaOnCloudrun() |
| ch553 | renderStillOnCloudrun() |
| ch554 | Setup |
| ch555 | speculateServiceName() |
| ch556 | Status |
| ch557 | testPermissions() |
| ch558 | Uninstall Cloud Run |
| ch559 | Upgrading Cloud Run |
Effects Library
| # | Title |
|---|---|
| ch560 | <AnimatedEmoji> |
| ch561 | getAvailableEmoji() |
| ch562 | @remotion/effects |
| ch563 | barrelDistortion() |
| ch564 | blur() |
| ch565 | brightness() |
| ch566 | burlap() |
| ch567 | checkerboard() |
| ch568 | chromaticAberration() |
| ch569 | colorCorrection() |
| ch570 | colorKey() |
| ch571 | contourLines() |
| ch572 | contrast() |
| ch573 | cornerPin() |
| ch574 | dotGrid() |
| ch575 | dropShadow() |
| ch576 | duotone() |
| ch577 | emboss() |
| ch578 | evolve() |
| ch579 | exposure() |
| ch580 | fisheye() |
| ch581 | flannel() |
| ch582 | glow() |
| ch583 | grayscale() |
| ch584 | gridlines() |
| ch585 | halftone() |
| ch586 | halftoneLinearGradient() |
| ch587 | hue() |
| ch588 | invert() |
| ch589 | levels() |
| ch590 | lightLeak() |
| ch591 | lightTrail() |
| ch592 | linearGradient() |
| ch593 | linearGradientTint() |
| ch594 | linearProgressiveBlur() |
| ch595 | linearProgressivePixelate() |
| ch596 | lines() |
| ch597 | liquidContours() |
| ch598 | mirror() |
| ch599 | noise() |
| ch600 | noiseDisplacement() |
| ch601 | outline() |
| ch602 | paper() |
| ch603 | pattern() |
| ch604 | pixelate() |
| ch605 | pixelDissolve() |
| ch606 | radialProgressiveBlur() |
| ch607 | radialProgressivePixelate() |
| ch608 | regionBlur() |
| ch609 | rings() |
| ch610 | roughenEdges() |
| ch611 | saturation() |
| ch612 | scale() |
| ch613 | scanlines() |
| ch614 | shadowsHighlights() |
| ch615 | shine() |
| ch616 | shrinkwrap() |
| ch617 | skew() |
| ch618 | speckle() |
| ch619 | starburst() |
| ch620 | thermalVision() |
| ch621 | tile() |
| ch622 | tint() |
| ch623 | tvSignalOff() |
| ch624 | uvTranslate() |
| ch625 | venetianBlinds() |
| ch626 | vibrance() |
| ch627 | vignette() |
| ch628 | wave() |
| ch629 | waves() |
| ch630 | whiteBalance() |
| ch631 | whiteNoise() |
| ch632 | xyTranslate() |
| ch633 | zigzag() |
| ch634 | zoomBlur() |
| ch635 | <MacOSCursor> |
| ch636 | createRoundedTextBox() |
Transitions (@remotion/transitions)
| # | Title |
|---|---|
| ch637 | Transitioning with audio |
| ch638 | makeHtmlInCanvasPresentation() |
| ch639 | Presentations |
| ch640 | bookFlip() |
| ch641 | clockWipe() |
| ch642 | crosswarp() |
| ch643 | crossZoom() |
| ch644 | cube() |
| ch645 | Custom presentations |
| ch646 | Custom HTML-in-canvas presentations |
| ch647 | dissolve() |
| ch648 | dreamyZoom() |
| ch649 | fade() |
| ch650 | filmBurn() |
| ch651 | flip() |
| ch652 | iris() |
| ch653 | linearBlur() |
| ch654 | none() |
| ch655 | pushCut() |
| ch656 | ripple() |
| ch657 | slide() |
| ch658 | swap() |
| ch659 | wipe() |
| ch660 | zoomBlur() |
| ch661 | zoomInOut() |
| ch662 | Timings |
| ch663 | Custom timings |
| ch664 | linearTiming() |
| ch665 | springTiming() |
| ch666 | <TransitionSeries> |
| ch667 | useTransitionProgress() |
Captions (@remotion/captions)
| # | Title |
|---|---|
| ch668 | @remotion/captions |
| ch669 | createTikTokStyleCaptions() |
| ch670 | Displaying captions |
| ch671 | ensureMaxCharactersPerLine() |
| ch672 | Exporting subtitles |
| ch673 | Importing .srt subtitles into Remotion |
| ch674 | parseSrt() |
| ch675 | serializeSrt() |
| ch676 | Transcribing audio |
Media Parser (@remotion/media-parser)
| # | Title |
|---|---|
| ch677 | Download and Parse Videos or Audio simultaneously |
| ch678 | downloadAndParseMedia() |
| ch679 | Fast and slow operations |
| ch680 | Available Fields |
| ch681 | Foreign file types |
| ch682 | Format support |
| ch683 | hasBeenAborted() |
| ch684 | mediaParserController() |
| ch685 | Getting metadata from videos using @remotion/media-parser |
| ch686 | nodeReader |
| ch687 | nodeWriter |
| ch688 | parseMedia() |
| ch689 | parseMediaOnServerWorker() |
| ch690 | parseMediaOnWebWorker() |
| ch691 | Pause, resume and abort parsing |
| ch692 | Readers |
| ch693 | Runtime support |
| ch694 | Extract samples |
| ch695 | Seeking |
| ch696 | Seeking Hints |
| ch697 | Stream selection |
| ch698 | Extract ID3 tags and EXIF data |
| ch699 | TypeScript Types Reference |
| ch700 | universalReader |
| ch701 | Processing video with WebCodecs and @remotion/media-parser |
| ch702 | WEBCODECS_TIMESCALE |
| ch703 | webReader |
| ch704 | Parsing on Web Workers |
WebCodecs (@remotion/webcodecs)
| # | Title |
|---|---|
| ch705 | bufferWriter |
| ch706 | canCopyAudioTrack() |
| ch707 | canCopyVideoTrack() |
| ch708 | canReencodeAudioTrack() |
| ch709 | canReencodeVideoTrack() |
| ch710 | convertAudioData() |
| ch711 | Convert a video |
| ch712 | convertMedia() |
| ch713 | createAudioDecoder() |
| ch714 | createVideoDecoder() |
| ch715 | defaultOnAudioTrackHandler() |
| ch716 | defaultOnVideoTrackHandler() |
| ch717 | extractFrames() |
| ch718 | extractFramesOnWebWorker() |
| ch719 | Fixing a MediaRecorder video |
| ch720 | getAvailableAudioCodecs() |
| ch721 | getAvailableContainers() |
| ch722 | getAvailableVideoCodecs() |
| ch723 | getDefaultAudioCodec() |
| ch724 | getDefaultVideoCodec() |
| ch725 | getPartialAudioData() |
| ch726 | Clearing up WebCodecs misconceptions |
| ch727 | Pause, resume and abort conversion |
| ch728 | Resample audio to 16kHz |
| ch729 | Resize a video |
| ch730 | rotateAndResizeVideoFrame() |
| ch731 | Rotate a video |
| ch732 | Track Transformation |
| ch733 | webcodecsController() |
| ch734 | webFsWriter |
Mediabunny (@remotion/mediabunny)
| # | Title |
|---|---|
| ch735 | Check if a video can be decoded using Mediabunny |
| ch736 | Extracting frames from a video in JavaScript |
| ch737 | Extracting a thumbnail from a video in JavaScript |
| ch738 | Supported formats and codecs by Mediabunny |
| ch739 | Getting the frame rate of a video |
| ch740 | Getting metadata from a video in JavaScript |
| ch741 | <Video> and <Audio> tags |
| ch742 | Mediabunny version used by Remotion |
| ch743 | WebCodecs Bugs |
Whisper Web (@remotion/whisper-web)
| # | Title |
|---|---|
| ch744 | convertToCaptions() |
| ch745 | downloadWhisperModel() |
| ch746 | installWhisperCpp() |
| ch747 | toCaptions() |
| ch748 | transcribe() |
| ch749 | canUseWhisperWeb() |
| ch750 | downloadWhisperModel() |
| ch751 | getAvailableModels() |
| ch752 | getLoadedModels() |
| ch753 | resampleTo16Khz() |
| ch754 | toCaptions() |
| ch755 | transcribe() |
Editor Starter Template
| # | Title |
|---|---|
| ch756 | Asset cleanup |
| ch757 | Asset uploads |
| ch758 | Backend routes in the Editor Starter |
| ch759 | Before you buy the Editor Starter |
| ch760 | Buy the Editor Starter |
| ch761 | Captioning in the Editor Starter |
| ch762 | Client-side rendering in the Editor Starter |
| ch763 | Copy and Paste in the Editor Starter |
| ch764 | Cropping in the Editor Starter |
| ch765 | Editor Starter Demo |
| ch766 | Dependencies of the Editor Starter |
| ch767 | Frequently asked questions about the Editor Starter |
| ch768 | Features in the Editor Starter |
| ch769 | Features not included in the Editor Starter |
| ch770 | Fonts in the Editor Starter |
| ch771 | Persistance in the Editor Starter |
| ch772 | Production Checklist |
| ch773 | Rendering with Remotion Lambda in the Editor Starter |
| ch774 | Setup |
| ch775 | Snapping in the Editor Starter |
| ch776 | State management in the Editor Starter |
| ch777 | Tracks, items and assets in the Editor Starter |
| ch778 | Undo and Redo |
| ch779 | Editor Starter vs. Remotion Studio |
Shapes (@remotion/shapes)
| # | Title |
|---|---|
| ch780 | <Arrow /> |
| ch781 | <Callout /> |
| ch782 | <Circle /> |
| ch783 | <Ellipse /> |
| ch784 | <Heart /> |
| ch785 | makeArrow() |
| ch786 | makeCallout() |
| ch787 | makeCircle() |
| ch788 | makeEllipse() |
| ch789 | makeHeart() |
| ch790 | makePie() |
| ch791 | makePolygon() |
| ch792 | makeRect() |
| ch793 | makeSpark() |
| ch794 | makeStar() |
| ch795 | makeTriangle() |
| ch796 | <Pie /> |
| ch797 | <Polygon /> |
| ch798 | <Rect /> |
| ch799 | <Spark /> |
| ch800 | <Star /> |
| ch801 | <Triangle /> |
Paths (@remotion/paths)
| # | Title |
|---|---|
| ch802 | centerPath() |
| ch803 | cutPath() |
| ch804 | evolvePath() |
| ch805 | extendViewBox() |
| ch806 | getBoundingBox() |
| ch807 | getInstructionIndexAtLength() |
| ch808 | getLength() |
| ch809 | getParts() |
| ch810 | getPointAtLength() |
| ch811 | getSubpaths() |
| ch812 | getTangentAtLength() |
| ch813 | interpolatePath() |
| ch814 | normalizePath() |
| ch815 | parsePath() |
| ch816 | reduceInstructions() |
| ch817 | resetPath() |
| ch818 | reversePath() |
| ch819 | scalePath() |
| ch820 | serializeInstructions() |
| ch821 | translatePath() |
| ch822 | warpPath() |
Recorder (@remotion/recorder)
| # | Title |
|---|---|
| ch823 | Generate captions |
| ch824 | Create a new video |
| ch825 | Remotion Recorder Demo |
| ch826 | B-Roll |
| ch827 | Edit captions |
| ch828 | Chapters |
| ch829 | Cutting clips |
| ch830 | Endcard |
| ch831 | Layout |
| ch832 | Adding music |
| ch833 | Normalizing audio levels |
| ch834 | Scenes |
| ch835 | Silence removal |
| ch836 | Transitions |
| ch837 | Experiments |
| ch838 | Exporting a video |
| ch839 | Exporting subtitles |
| ch840 | External recordings |
| ch841 | Our Gear |
| ch842 | Is Remotion Recorder for me? |
| ch843 | Render on Lambda |
| ch844 | Our Recorder |
| ch845 | Record using the interface |
| ch846 | Cropping sources |
| ch847 | Delete a recording |
| ch848 | Manually add recordings |
| ch849 | Roadmap |
| ch850 | Setup |
| ch851 | Source Control |
| ch852 | Get Help |
| ch853 | Cannot read properties of undefined (reading 'decode') |
SFX (@remotion/sfx)
| # | Title |
|---|---|
| ch854 | animeWow |
| ch855 | boneCrack |
| ch856 | bruh |
| ch857 | ding |
| ch858 | dramaticBoomer |
| ch859 | fah |
| ch860 | illuminatiConfirmed |
| ch861 | loadingLag |
| ch862 | macQuack |
| ch863 | minecraftHurt |
| ch864 | mouseClick |
| ch865 | nellyAhh |
| ch866 | ohMyGodVine |
| ch867 | omgHellNah |
| ch868 | pageTurn |
| ch869 | priceIsRightFail |
| ch870 | recordScratch |
| ch871 | romanceMeme |
| ch872 | sanctuaryGuardianWhat |
| ch873 | shutterModern |
| ch874 | shutterOld |
| ch875 | skedaddle |
| ch876 | snapchatNotification |
| ch877 | spongebobFail |
| ch878 | triggered |
| ch879 | uiSwitch |
| ch880 | vineBoom |
| ch881 | whip |
| ch882 | whoosh |
| ch883 | wilhelmScream |
| ch884 | windowsXpError |
| ch885 | yippee |
Layout Utils (@remotion/layout-utils)
| # | Title |
|---|---|
| ch886 | Best practices for @remotion/layout-utils |
| ch887 | fillTextBox() |
| ch888 | fitText() |
| ch889 | fitTextOnNLines() |
| ch890 | measureText() |
Lottie (@remotion/lottie)
| # | Title |
|---|---|
| ch891 | getLottieMetadata() |
| ch892 | <Lottie> |
| ch893 | Finding Lottie files to use |
| ch894 | Loading Lottie animations from a URL |
| ch895 | Loading Lottie animations from staticFile() |
Rive (@remotion/rive)
| # | Title |
|---|---|
| ch896 | <RemotionRiveCanvas> |
Rough Notation (@remotion/rough-notation)
| # | Title |
|---|---|
| ch897 | @remotion/rough-notation |
| ch898 | <Box> |
| ch899 | <Bracket> |
| ch900 | <Circle> |
| ch901 | <CrossedOff> |
| ch902 | <Highlight> |
| ch903 | <StrikeThrough> |
| ch904 | <Underline> |
Motion Blur (@remotion/motion-blur)
| # | Title |
|---|---|
| ch905 | <CameraMotionBlur> |
| ch906 | Common mistake with <MotionBlur> and <Trail> |
| ch907 | <MotionBlur> |
| ch908 | <Trail> |
Noise (@remotion/noise)
| # | Title |
|---|---|
| ch909 | noise2D() |
| ch910 | noise3D() |
| ch911 | noise4D() |
Light Leaks (@remotion/light-leaks)
| # | Title |
|---|---|
| ch912 | @remotion/light-leaks |
| ch913 | <LightLeak> |
| ch914 | lightLeak() |
Starburst (@remotion/starburst)
| # | Title |
|---|---|
| ch915 | @remotion/starburst |
| ch916 | <Starburst> |
| ch917 | starburst() |
Animation Utils (@remotion/animation-utils)
| # | Title |
|---|---|
| ch918 | interpolateStyles() |
| ch919 | makeTransform() |
Media Utils (@remotion/media-utils)
| # | Title |
|---|---|
| ch920 | createSmoothSvgPath() |
| ch921 | visualizeAudioWaveform() |
Zod Types (@remotion/zod-types)
| # | Title |
|---|---|
| ch922 | @remotion/zod-types-v3 |
| ch923 | zColor() |
| ch924 | zMatrix() |
| ch925 | zTextarea() |
Miscellaneous (Core)
| # | Title |
|---|---|
| ch926 | v4.0 Alpha |
| ch927 | Building with Remotion and AI |
| ch928 | @remotion/animated-emoji |
| ch929 | @remotion/animation-utils |
| ch930 | Importing assets |
| ch931 | Captions |
| ch932 | @remotion/cloudrun |
| ch933 | createEffect() |
| ch934 | Effects |
| ch935 | @remotion/elevenlabs |
| ch936 | Installing FFmpeg |
| ch937 | Greenscreen |
| ch938 | @remotion/gsap |
| ch939 | High Dynamic Range and Remotion |
| ch940 | @remotion/install-whisper-cpp |
| ch941 | @remotion/lambda |
| ch942 | @remotion/layout-utils |
| ch943 | Light Leaks |
| ch944 | @remotion/mac-cursors |
| ch945 | Files with absolute paths |
| ch946 | Calculating the duration of a composition automatically |
| ch947 | Changing the temporary directory |
| ch948 | Chrome Headless Shell |
| ch949 | Using the GPU in the cloud |
| ch950 | Setup EC2 for Docker with GPU |
| ch951 | Cross-Origin Isolation |
| ch952 | Can I embed the Remotion Studio? |
| ch953 | Emojis |
| ch954 | FFmpeg license |
| ch955 | Linux Dependencies |
| ch956 | Multiple cores on Linux |
| ch957 | Can Remotion be used for live streaming? |
| ch958 | Using @remotion/renderer in Next.js |
| ch959 | Timeouts with Pexels videos |
| ch960 | Can I render videos in the browser? |
| ch961 | Can I render videos on the edge? |
| ch962 | How do I combine compositions? |
| ch963 | Freeze portions of a sequence |
| ch964 | Embedding a <Player> into an <iframe> |
| ch965 | Which video formats does Remotion support? |
| ch966 | @remotion/motion-blur |
| ch967 | @remotion/noise |
| ch968 | Noise visualization |
| ch969 | @remotion/openai-whisper |
| ch970 | @remotion/paths |
| ch971 | Posterization |
| ch972 | Remotion Recorder |
| ch973 | remotion |
| ch974 | @remotion/rive |
| ch975 | @remotion/rounded-text-box |
| ch976 | @remotion/sfx |
| ch977 | @remotion/shapes |
| ch978 | Starburst |
| ch979 | TailwindCSS |
| ch980 | TailwindCSS v2 (Legacy) |
| ch981 | Terminology |
| ch982 | Testing Remotion components |
| ch983 | @remotion/transitions |
| ch984 | Using audio |
| ch985 | visualizeAudio() |
| ch986 | @remotion/webcodecs |
| ch987 | @remotion/whisper-web |
| ch988 | @remotion/zod-types |
Topic Index
- Animation (interpolate/spring) → ch012, ch016
- AssetLoading (staticFile) → ch070
- Async gating (delayRender/continueRender) → ch053
- Bundling → ch026
- Captions/subtitles → see Captions section, ch324
- CLI → ch093, ch429
- Cloud Run → see Cloud Run section
- Composition → ch006
- Dynamic metadata (calculateMetadata) → ch005
- Effects library → see Effects Library section
- Fundamentals → ch040
- Lambda (serverless rendering) → see Lambda section
- Media parsing (@remotion/media-parser) → ch220
- OffthreadVideo (frame-accurate video) → ch224
- Player (embedding) → ch032
- Recorder → ch844
- registerRoot → ch019
- renderMedia → ch147
- Sequence / Series → ch023, ch024
- SFX (sound effects) → ch182
- Shapes & Paths → ch977, ch071
- SSR / server-side rendering → ch116
- Studio → see Studio, Player & Editing section
- Transitions → see Transitions section
- useCurrentFrame → ch075
- useVideoConfig → ch081
- WebCodecs → ch701
- Zod Types → ch988
Supporting Files
- glossary.md — all key terms with definitions
- patterns.md — all techniques and composition patterns
- cheatsheet.md — quick reference tables and decision guides
Scope & Limits
This skill covers the Remotion documentation as fetched from remotion.dev/docs on 2026-08-25. It combines the core framework docs (React/TypeScript API), the rendering pipeline (local, Lambda, Cloud Run), Studio/Player, and every official @remotion/* package. Chapters were generated with a mix of mechanical extraction (title, headings, first code sample, first reference table from each source page) and hand-written synthesis for this file, the glossary, patterns, and cheatsheet — chapter prose is denser summary, not verbatim doc text. Some low-signal index/landing pages (e.g. bare category overview pages with no unique content beyond linking to subpages) were skipped rather than duplicated as thin chapters; skipped pages are: use-offthread-video-texture (404 disfarçado — página de índice sem .md próprio); use-video-texture (404 disfarçado — página de índice sem .md próprio); cli (404 disfarçado — página de índice sem .md próprio); fonts-api (404 disfarçado — página de índice sem .md próprio); google-fonts (404 disfarçado — página de índice sem .md próprio); preload (404 disfarçado — página de índice sem .md próprio); preload/resolve-redirect (404 disfarçado — página de índice sem .md próprio); null (404 disfarçado — página de índice sem .md próprio); player/drag-and-drop (404 disfarçado — página de índice sem .md próprio); studio (404 disfarçado — página de índice sem .md próprio); api (sem conteúdo real após limpeza); legal (sem conteúdo real após limpeza); captions/caption (404 disfarçado — página de índice sem .md próprio); recorder/editing (404 disfarçado — página de índice sem .md próprio); layout-utils/debug (404 disfarçado — página de índice sem .md próprio); lottie (404 disfarçado — página de índice sem .md próprio); skia (404 disfarçado — página de índice sem .md próprio).