remotion

Remotion Skill

Use Remotion to generate videos as React components, suitable for scenarios such as data visualization, dynamic charts, product demos, and short instructional videos.

When to Use

• The user requests "generate an XX-second video with this data"
• Needs "dynamic chart videos", "data visualization videos", "product demo videos", "instructional/talking-head videos"
• Needs to turn tables/charts/copy into animated short videos

Prerequisites

• Node.js(v18+ recommended) and npx
• The user's environment must have Remotion installed:npm init video or bun create video to create a project, or within an existing project npm install remotion

Workflow

1. Confirm the environment: Confirm that a Remotion project exists in the user's project or working directory (including remotion.config.ts or remotion.config.js and an entry such as src/Root.tsx）。
2. Generate or modify the Composition: Write or modify a React component (Composition) according to the user's needs, which can receive getInputProps() data passed in (such as chart data, copy).
3. Render the video: Execute in the project root directory:

   npx remotion render <entry-point> <composition-id> <output-path>
   

   • entry-point: entry file, such as src/index.tsx or src/Root.tsx
   • composition-id: the Composition's id
   • output-path: output video path, such as ./out/video.mp4
4. Passing props and duration: Use when dynamic data needs to be passed in --props='{"key":"value"}' or --props=./props.json; the duration is determined by the Composition's durationInFrames / fps .

Usage Examples

• "Generate a 30-second dynamic bar chart video with this sales data"
• "Turn these three pages of product highlights into a 15-second demo video"
• "Generate a line chart video of trend changes based on a CSV"

Output

• The default output is MP4 (H.264); you can use --codec to specify another codec.
• The output path is specified by the user or placed in the project's out/ directory.

Limitations

• The user's local machine must already have a Remotion project or agree to create a new project; if Remotion is not available, first guide them to npm init video。
• Complex animations and long video rendering take a long time; you can notify the user or use --concurrency to adjust parallelism.