Cheatsheet — Remotion

Decision rules

• Animating a value? Simple linear/eased mapping → interpolate(). Bouncy/physical feel → spring(). Never hand-roll animation with setState or CSS transitions inside a composition.
• Displaying a video? During actual rendering, always <OffthreadVideo>, not <Video>/HTML5 <video> — frame extraction accuracy matters once you're capturing frames server-side, not just playing back interactively.
• Video/audio/image/font needs a URL? If it lives in your project's public/ folder, use staticFile(). Never hardcode a relative path.
• Duration/size depends on data? Use calculateMetadata() on <Composition> instead of hardcoding durationInFrames/width/height.
• Component needs to wait on async data before its frame is captured? delayRender() + continueRender(). Skip it entirely for anything that only affects the Studio/Player preview, since it's a no-op there anyway.
• Structuring a multi-scene video? <Sequence> for explicit offsets, <Series> when scenes just play back-to-back.

Render backend trade-off matrix

Option	Control	Scalability	Best for
renderMedia() (self-hosted)	Highest (full machine control)	Manual (you scale it)	Custom codecs/GPU, on-prem constraints
Lambda (@remotion/lambda)	Managed	Highest, official fastest option	Production rendering at scale on AWS
Cloud Run (@remotion/cloudrun)	Managed	High	Teams already on Google Cloud
Studio / Player	None (preview only)	N/A — not a render	Local dev feedback loop, embedding interactive preview

Embedding vs. rendering

• Want users to watch/scrub a video live in your app, no file output → @remotion/player's <Player>.
• Want an actual output file (mp4/webm/gif/png) → the render pipeline (renderMedia() locally, or Lambda/Cloud Run in the cloud).

Frame-purity checklist (before trusting a render)

1. Every animated value derives from useCurrentFrame() — no Date.now(), no setInterval, no external mutable state.
2. Anything async is gated with delayRender()/continueRender(), not assumed to "just be ready."
3. Assets referenced via staticFile(), not ad-hoc paths.
4. Video frame display uses <OffthreadVideo> for anything that will actually be rendered, not just previewed.

Package quick-reference (when you need a specific effect/integration)

• Transitions between scenes → @remotion/transitions
• Sound effects → @remotion/sfx
• Captions/subtitles → @remotion/captions (+ @remotion/whisper-web or ElevenLabs integration to generate them)
• SVG shapes → @remotion/shapes, path helpers → @remotion/paths
• Reading media metadata without a full decode → @remotion/media-parser
• Browser-native encode/decode → @remotion/webcodecs
• Lottie/Rive animations → @remotion/lottie / @remotion/rive
• Recording webcam/screen input → @remotion/recorder