Score
8.5
/ 10
Installs
300K
Repo Stars
6.6K
Last Updated
3d ago
Quality Ratio
96%
Description
Verified
Language
TypeScript
First Published
Jul 2026
Summary
The Remotion Render agent skill enables developers to programmatically generate high-quality videos directly from React/Remotion component code, outputting them as MP4 files. This skill is ideal for frontend developers, motion designers, and content automation specialists who need to create dynamic video content, animated graphics, or data-driven videos at scale using a code-first approach. It is a well-adopted skill with solid traction in the registry. Users provide TSX code that exports a default React component, which can utilize all standard Remotion APIs like `useCurrentFrame`, `spring`, `interpolate`, `AbsoluteFill`, and `Sequence` to define complex animations. It supports customizable output settings including video resolution, frames per second, duration, and codec, along with the ability to pass dynamic props to the Remotion components. This agent skill requires the `inference.sh` CLI to be installed for local execution.
Skill Definition
General rendering strategy
Use Remotion's bundled browser for rendering, including compositions using
<HtmlInCanvas>. It includes the required browser APIs and Remotion's browser
fixes. Let Remotion download or update it as needed. Do not reuse a recording
browser or set --browser-executable, browserExecutable, or chromeMode
unless the user explicitly requests a different browser.
Render a video using:
npx remotion render
Full list of options: https://www.remotion.dev/docs/cli/render.md
Render a still using:
npx remotion still
Full list of options: https://www.remotion.dev/docs/cli/still.md
To render several frames as images in one call, use render --frames:
npx remotion render [composition-id] out/frames --frames=0,30,90 --image-format=png
See https://www.remotion.dev/docs/cli/render.md#--frames for more options.
Transparent videos
See Transparent videos for rendering out a video with transparency.