remotion

Use when working with Remotion for programmatic video creation, rendering compositions, animations with interpolate/spring, embedding the Player in React apps, serverless Lambda rendering, or generating stills.

Model	Source
sonnet	pack: video

Full Reference

┏━ 🔧 remotion ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ Use when working with Remotion for programmati… ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

Remotion

Remotion v4.0 lets you create videos programmatically with React. Components are rendered frame-by-frame using a Rust-powered embedded FFmpeg. Outputs video, stills (PNG/JPEG/WebP/PDF), and GIF.

Quick Reference

Item	Value
Current Version	4.0.423
Create Project	npx create-video@latest
Start Studio	npx remotion studio
Render Video	npx remotion render src/index.ts CompId out/video.mp4
Render Still	npx remotion still src/index.ts StillId out/still.png
Player Package	@remotion/player
Lambda Package	@remotion/lambda
Config File	remotion.config.ts
Licensing	Free <=3 employees; Company License above (remotion.pro)

Reference Index

I want to…	File
Create a project, configure remotion.config.ts, or set up the entry point	setup.md
Use Composition, Still, Sequence, Series, AbsoluteFill, Loop, Freeze, or hooks	composition.md
Animate with interpolate(), spring(), Easing, interpolateColors(), or stagger	animations.md
Use Img, Video, OffthreadVideo, Audio, staticFile(), Tailwind, or Google Fonts	media.md
Fetch data with calculateMetadata(), delayRender(), or getInputProps()	data-fetching.md
Render via CLI (render/still/studio) or Node.js SSR (bundle, renderMedia)	rendering.md
Set up Lambda, configure IAM, call renderMediaOnLambda, or poll progress	lambda.md
Embed the Player in React, use PlayerRef methods, or integrate with Next.js	player.md
Find available packages, use transitions/shapes/Three.js, or check licensing	ecosystem.md

Usage: Read the reference file matching your current task from the index above. Each file is self-contained with code examples and inline gotchas.