remotion-render-config

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Remotion Render Config

Remotion 渲染配置

Generates render configuration documents that define video output settings, codec parameters, format options, and quality settings for Remotion video renders. This skill focuses exclusively on render/export configuration.

生成定义视频输出设置、编解码器参数、格式选项及质量设置的Remotion视频渲染配置文档。本技能仅专注于渲染/导出配置。

What This Skill Does

本技能的功能

Generates render configurations for:

Output format — MP4, WebM, ProRes, etc.
Codec settings — H.264, H.265, VP9 parameters
Quality settings — CRF, bitrate, compression level
Resolution — Output dimensions and scaling
Platform optimization — YouTube, Twitter, Instagram presets

可生成以下类型的渲染配置：

输出格式 — MP4、WebM、ProRes等
编解码器设置 — H.264、H.265、VP9参数
质量设置 — CRF、比特率、压缩级别
分辨率 — 输出尺寸与缩放
平台优化 — YouTube、Twitter、Instagram预设

Scope Boundaries

范围界定

IN SCOPE:

Render command configuration
Codec and format selection
Quality and compression settings
Platform-specific optimizations
Output file parameters

OUT OF SCOPE:

Composition implementation (use
```
/remotion-composition
```
)
Scene logic (use
```
/remotion-component-gen
```
)
Animation parameters (use
```
/remotion-animation
```
)
Asset management (use
```
/remotion-asset-coordinator
```
)

纳入范围：

渲染命令配置
编解码器与格式选择
质量与压缩设置
平台专属优化
输出文件参数

排除范围：

合成实现（使用
```
/remotion-composition
```
）
场景逻辑（使用
```
/remotion-component-gen
```
）
动画参数（使用
```
/remotion-animation
```
）
资源管理（使用
```
/remotion-asset-coordinator
```
）

Input/Output Formats

输入/输出格式

Input Format: Target Platform/Quality Requirements

输入格式：目标平台/质量要求

Accepts render target specifications:

Natural Language:

Render for YouTube at high quality with H.264 codec

Structured Format:

markdown

undefined

接受以下渲染目标规格：

自然语言格式：

Render for YouTube at high quality with H.264 codec

结构化格式：

markdown

undefined

Render Requirements

Target Platform: YouTube Quality Level: High Format: MP4 (H.264) Resolution: 1920x1080 Frame Rate: 30 fps Additional: Upload-ready, optimized file size

undefined

Target Platform: YouTube Quality Level: High Format: MP4 (H.264) Resolution: 1920x1080 Frame Rate: 30 fps Additional: Upload-ready, optimized file size

undefined

Output Format: RENDER_CONFIG.md

输出格式：RENDER_CONFIG.md

Generates complete render configuration document:

markdown

undefined

生成完整的渲染配置文档：

markdown

undefined

Render Configuration: ProductDemo

Status

✅ Render settings defined ⏳ Ready for video render

Render Command

bash

npx remotion render \
  src/index.tsx \
  ProductDemo \
  output.mp4 \
  --codec=h264 \
  --crf=18 \
  --pixel-format=yuv420p \
  --audio-codec=aac \
  --audio-bitrate=320k

bash

npx remotion render \
  src/index.tsx \
  ProductDemo \
  output.mp4 \
  --codec=h264 \
  --crf=18 \
  --pixel-format=yuv420p \
  --audio-codec=aac \
  --audio-bitrate=320k

Configuration Details

Output Format

Container: MP4
Video Codec: H.264 (x264)
Audio Codec: AAC
Pixel Format: yuv420p (for maximum compatibility)

Container: MP4
Video Codec: H.264 (x264)
Audio Codec: AAC
Pixel Format: yuv420p (for maximum compatibility)

Quality Settings

CRF: 18 (high quality, ~15-20 MB/min)
Audio Bitrate: 320 kbps (high quality)
Preset: medium (balanced speed/quality)

CRF: 18 (high quality, ~15-20 MB/min)
Audio Bitrate: 320 kbps (high quality)
Preset: medium (balanced speed/quality)

Resolution

Output: 1920x1080 (16:9)
Frame Rate: 30 fps
Duration: 30 seconds (900 frames)

Output: 1920x1080 (16:9)
Frame Rate: 30 fps
Duration: 30 seconds (900 frames)

Platform: YouTube

Optimized for YouTube upload:

✅ H.264 codec (widely supported)
✅ yuv420p pixel format (required)
✅ AAC audio (recommended)
✅ CRF 18 (high quality, good file size)
✅ Metadata compatible

Estimated File Size: ~45-60 MB

Optimized for YouTube upload:

✅ H.264 codec (widely supported)
✅ yuv420p pixel format (required)
✅ AAC audio (recommended)
✅ CRF 18 (high quality, good file size)
✅ Metadata compatible

Estimated File Size: ~45-60 MB

Alternative Render Options

Web Delivery (Smaller File)

bash

npx remotion render \
  src/index.tsx \
  ProductDemo \
  output.mp4 \
  --codec=h264 \
  --crf=23 \
  --audio-bitrate=192k

File size: ~25-35 MB

bash

npx remotion render \
  src/index.tsx \
  ProductDemo \
  output.mp4 \
  --codec=h264 \
  --crf=23 \
  --audio-bitrate=192k

File size: ~25-35 MB

Maximum Quality (Archive)

bash

npx remotion render \
  src/index.tsx \
  ProductDemo \
  output.mp4 \
  --codec=h264 \
  --crf=15 \
  --audio-bitrate=320k \
  --preset=slower

File size: ~80-100 MB

bash

npx remotion render \
  src/index.tsx \
  ProductDemo \
  output.mp4 \
  --codec=h264 \
  --crf=15 \
  --audio-bitrate=320k \
  --preset=slower

File size: ~80-100 MB

Fast Preview Render

bash

npx remotion render \
  src/index.tsx \
  ProductDemo \
  preview.mp4 \
  --crf=28 \
  --preset=ultrafast

File size: ~15-20 MB

bash

npx remotion render \
  src/index.tsx \
  ProductDemo \
  preview.mp4 \
  --crf=28 \
  --preset=ultrafast

File size: ~15-20 MB

Render Workflow

Test render (first 3 seconds):

bash

npx remotion render src/index.tsx ProductDemo test.mp4 --frames=0-90

Full render with progress:

bash

npx remotion render src/index.tsx ProductDemo output.mp4 --codec=h264 --crf=18

Verify output:
- Check file size
- Play in video player
- Verify audio sync
- Check quality
Upload to platform (YouTube, etc.)

Test render (first 3 seconds):

bash

npx remotion render src/index.tsx ProductDemo test.mp4 --frames=0-90

Full render with progress:

bash

npx remotion render src/index.tsx ProductDemo output.mp4 --codec=h264 --crf=18

Verify output:
- Check file size
- Play in video player
- Verify audio sync
- Check quality
Upload to platform (YouTube, etc.)

Next Steps

Run test render to verify timing and quality
Adjust CRF if file size too large/small
Full render when ready
Upload to target platform

Run test render to verify timing and quality
Adjust CRF if file size too large/small
Full render when ready
Upload to target platform

Troubleshooting

File too large:

Increase CRF (23-28 for web)
Lower audio bitrate (192k or 128k)

Quality issues:

Decrease CRF (15-17 for higher quality)
Use slower preset (slow, slower)

Rendering slow:

Use faster preset (fast, veryfast)
Reduce resolution temporarily for testing

File too large:

Increase CRF (23-28 for web)
Lower audio bitrate (192k or 128k)

Quality issues:

Decrease CRF (15-17 for higher quality)
Use slower preset (slow, slower)

Rendering slow:

Use faster preset (fast, veryfast)
Reduce resolution temporarily for testing

Checklist

Codec Reference

编解码器参考

H.264 (Most Compatible)

H.264（兼容性最强）

Best for: YouTube, web delivery, social media

bash

--codec=h264
--crf=18          # Quality (lower = better, 15-28 typical)
--pixel-format=yuv420p
--audio-codec=aac
--audio-bitrate=320k

Quality Levels:

CRF 15-17: Excellent (large files)
CRF 18-20: High (recommended)
CRF 21-23: Good (web delivery)
CRF 24-28: Acceptable (preview/draft)

适用场景：YouTube、网络分发、社交媒体

bash

--codec=h264
--crf=18          # Quality (lower = better, 15-28 typical)
--pixel-format=yuv420p
--audio-codec=aac
--audio-bitrate=320k

质量级别：

CRF 15-17：极佳（文件体积大）
CRF 18-20：高（推荐）
CRF 21-23：良好（网络分发）
CRF 24-28：可接受（预览/草稿）

H.265 (HEVC) - Better Compression

H.265 (HEVC) - 压缩效率更高

Best for: Modern platforms, smaller files, 4K video

bash

--codec=h265
--crf=23
--pixel-format=yuv420p10le

Note: Not universally supported, but ~50% smaller files at same quality

适用场景：现代平台、更小文件体积、4K视频

bash

--codec=h265
--crf=23
--pixel-format=yuv420p10le

注意： 并非所有平台都支持，但相同质量下文件体积可减小约50%

VP9 (Open Source)

VP9（开源）

Best for: WebM format, web delivery, Chrome/Firefox

bash

--codec=vp9
--crf=30
--pixel-format=yuv420p

适用场景：WebM格式、网络分发、Chrome/Firefox浏览器

bash

--codec=vp9
--crf=30
--pixel-format=yuv420p

ProRes (Professional)

ProRes（专业级）

Best for: Video editing, maximum quality, no compression

bash

--codec=prores
--prores-profile=3  # HQ profile

Warning: Very large files (~1-2 GB/minute)

适用场景：视频编辑、最高质量、无压缩

bash

--codec=prores
--prores-profile=3  # HQ profile

警告： 文件体积极大（约1-2 GB/分钟）

Quality vs File Size Reference

质量与文件体积参考

For 30-second 1080p video at 30fps:

CRF	Quality	File Size	Use Case
15	Excellent	80-100 MB	Archive, editing
18	High	45-60 MB	YouTube, high quality
21	Good	30-40 MB	Web, social media
23	Acceptable	20-30 MB	Web delivery
28	Preview	10-15 MB	Draft, testing

针对30秒1080p、30fps的视频：

CRF	质量	文件体积	适用场景
15	极佳	80-100 MB	存档、编辑
18	高	45-60 MB	YouTube、高质量需求
21	良好	30-40 MB	网页、社交媒体
23	可接受	20-30 MB	网络分发
28	预览	10-15 MB	草稿、测试

Platform-Specific Presets

平台专属预设

YouTube

bash

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=18 \
  --pixel-format=yuv420p \
  --audio-codec=aac \
  --audio-bitrate=320k

Specifications:

Resolution: 1920x1080 or higher
Frame rate: 24, 25, 30, 48, 50, or 60 fps
Codec: H.264 or H.265
Audio: AAC-LC, 320 kbps

bash

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=18 \
  --pixel-format=yuv420p \
  --audio-codec=aac \
  --audio-bitrate=320k

规格要求：

分辨率：1920x1080或更高
帧率：24、25、30、48、50或60 fps
编解码器：H.264或H.265
音频：AAC-LC，320 kbps

Twitter/X

bash

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=20 \
  --audio-bitrate=192k

Specifications:

Max duration: 2:20 (140 seconds)
Max file size: 512 MB
Resolution: Up to 1920x1200 or 1200x1920

bash

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=20 \
  --audio-bitrate=192k

规格要求：

最长时长：2分20秒（140秒）
最大文件体积：512 MB
分辨率：最高1920x1200或1200x1920

Instagram Feed

bash

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=20 \
  --audio-bitrate=192k

Specifications:

Max duration: 60 seconds
Resolution: 1080x1080 (1:1) or 1080x1350 (4:5)
Frame rate: 30 fps
Codec: H.264

bash

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=20 \
  --audio-bitrate=192k

规格要求：

最长时长：60秒
分辨率：1080x1080（1:1）或1080x1350（4:5）
帧率：30 fps
编解码器：H.264

Instagram Reels/Stories

bash

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=20 \
  --audio-bitrate=192k

Specifications:

Resolution: 1080x1920 (9:16)
Max duration: 90 seconds (Reels), 15 seconds (Stories)
Frame rate: 30 fps

bash

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=20 \
  --audio-bitrate=192k

规格要求：

分辨率：1080x1920（9:16）
最长时长：90秒（Reels）、15秒（Stories）
帧率：30 fps

TikTok

bash

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=20 \
  --audio-bitrate=192k

Specifications:

Resolution: 1080x1920 (9:16)
Max duration: 10 minutes
Max file size: 287.6 MB
Frame rate: 30 or 60 fps

bash

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=20 \
  --audio-bitrate=192k

规格要求：

分辨率：1080x1920（9:16）
最长时长：10分钟
最大文件体积：287.6 MB
帧率：30或60 fps

bash

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=20 \
  --audio-bitrate=192k

Specifications:

Max file size: 5 GB
Resolution: 256x144 to 4096x2304
Frame rate: 10-60 fps

bash

npx remotion render src/index.tsx VideoName output.mp4 \
  --codec=h264 \
  --crf=20 \
  --audio-bitrate=192k

规格要求：

最大文件体积：5 GB
分辨率：256x144至4096x2304
帧率：10-60 fps

Advanced Render Options

高级渲染选项

Concurrency (Faster Renders)

并发渲染（提升速度）

bash

--concurrency=8  # Use 8 CPU cores

bash

--concurrency=8  # Use 8 CPU cores

Image Sequence (for Post-Processing)

图像序列（用于后期制作）

bash

--sequence
--image-format=png

Outputs PNG sequence for After Effects, Premiere, etc.

bash

--sequence
--image-format=png

输出PNG序列，用于After Effects、Premiere等后期软件。

Specific Frame Range

指定帧范围

bash

--frames=30-90  # Render frames 30-90 only

bash

--frames=30-90  # Render frames 30-90 only

Scale Output

缩放输出

bash

--scale=0.5  # Render at 50% resolution (960x540)

Useful for quick previews.

bash

--scale=0.5  # Render at 50% resolution (960x540)

适用于快速预览。

Overwrite Existing File

覆盖现有文件

bash

--overwrite

bash

--overwrite

Custom Output Name

自定义输出文件名

bash

npx remotion render src/index.tsx VideoName "output/final-video.mp4"

bash

npx remotion render src/index.tsx VideoName "output/final-video.mp4"

Environment Variables

环境变量

bash

undefined

bash

undefined

Number of CPU cores to use

export REMOTION_CONCURRENCY=8

Disable browser sandbox (Docker)

export REMOTION_DISABLE_CHROMIUM_SANDBOX=true

Set custom Chromium path

export REMOTION_CHROMIUM_PATH=/path/to/chromium

undefined

export REMOTION_CHROMIUM_PATH=/path/to/chromium

undefined

Render Configuration File

渲染配置文件

Create

remotion.config.ts

typescript

import { Config } from "@remotion/cli/config";

Config.setCodec("h264");
Config.setCrf(18);
Config.setPixelFormat("yuv420p");
Config.setAudioBitrate("320k");
Config.setAudioCodec("aac");
Config.setConcurrency(8);
Config.setOverwriteOutput(true);

Then render with:

bash

npx remotion render

创建

remotion.config.ts

：

typescript

import { Config } from "@remotion/cli/config";

Config.setCodec("h264");
Config.setCrf(18);
Config.setPixelFormat("yuv420p");
Config.setAudioBitrate("320k");
Config.setAudioCodec("aac");
Config.setConcurrency(8);
Config.setOverwriteOutput(true);

随后执行以下命令进行渲染：

bash

npx remotion render

Render Scripts

渲染脚本

Add to

package.json

json

{
  "scripts": {
    "render:preview": "remotion render src/index.tsx VideoName preview.mp4 --crf=28 --preset=ultrafast",
    "render:draft": "remotion render src/index.tsx VideoName draft.mp4 --crf=23",
    "render:final": "remotion render src/index.tsx VideoName output.mp4 --codec=h264 --crf=18",
    "render:youtube": "remotion render src/index.tsx VideoName youtube.mp4 --codec=h264 --crf=18 --audio-bitrate=320k"
  }
}

Usage:

bash

npm run render:youtube

添加至

package.json

：

json

{
  "scripts": {
    "render:preview": "remotion render src/index.tsx VideoName preview.mp4 --crf=28 --preset=ultrafast",
    "render:draft": "remotion render src/index.tsx VideoName draft.mp4 --crf=23",
    "render:final": "remotion render src/index.tsx VideoName output.mp4 --codec=h264 --crf=18",
    "render:youtube": "remotion render src/index.tsx VideoName youtube.mp4 --codec=h264 --crf=18 --audio-bitrate=320k"
  }
}

使用方式：

bash

npm run render:youtube

Render Performance Tips

渲染性能优化技巧

Use concurrency to utilize all CPU cores
Close other applications during render
Use SSD for faster file I/O
Reduce composition complexity if render is too slow
Test render small ranges before full render
Use image-format prop if you need transparency

启用并发渲染以利用所有CPU核心
关闭其他应用程序以提升渲染速度
使用SSD硬盘加快文件读写速度
降低合成复杂度如果渲染过慢
先渲染小范围帧进行测试，再执行完整渲染
如需透明背景使用image-format参数

Quality Verification Checklist

质量验证清单

Integration Workflow

集成工作流

Complete composition via other skills
Generate render config using this skill → RENDER_CONFIG.md
Run test render (first few seconds)
Verify quality and timing
Run full render
Upload to target platform

完成合成制作通过其他技能
使用本技能生成渲染配置 → 得到RENDER_CONFIG.md
执行测试渲染（前几秒内容）
验证质量与时序
执行完整渲染
上传至目标平台

Integration with Other Skills

与其他技能的集成

This skill is the FINAL STEP in the pipeline:

remotion-render-config (this skill)
    ↓ outputs: RENDER_CONFIG.md
    ↓ used after: All implementation is complete
    ↓ produces: Final video file

Works with:

```
/remotion-scaffold
```
— Render outputs completed project
```
/remotion-composition
```
— Renders structured composition
```
/remotion-component-gen
```
— Renders implemented scenes
```
/remotion-spec-translator
```
— Orchestrates this as final step

This skill provides production-ready render configurations that ensure high-quality video output optimized for target platforms.

本技能是工作流中的最后一步：

remotion-render-config (this skill)
    ↓ outputs: RENDER_CONFIG.md
    ↓ used after: All implementation is complete
    ↓ produces: Final video file

适配技能：

```
/remotion-scaffold
```
— 渲染已完成的项目
```
/remotion-composition
```
— 渲染结构化合成内容
```
/remotion-component-gen
```
— 渲染已实现的场景
```
/remotion-spec-translator
```
— 将本技能作为最后一步编排

本技能可提供生产级别的渲染配置，确保输出针对目标平台优化的高质量视频。

remotion-render-config

Original

Translation

Remotion Render Config

Remotion 渲染配置

What This Skill Does

本技能的功能

Scope Boundaries

范围界定

Input/Output Formats

输入/输出格式

Input Format: Target Platform/Quality Requirements

输入格式：目标平台/质量要求

Render Requirements

Render Requirements

Output Format: RENDER_CONFIG.md

输出格式：RENDER_CONFIG.md

Render Configuration: ProductDemo

Render Configuration: ProductDemo

Status

Status

Render Command

Render Command

Configuration Details

Configuration Details

Output Format

Output Format

Quality Settings

Quality Settings

Resolution

Resolution

Platform: YouTube

Platform: YouTube

Alternative Render Options

Alternative Render Options

Web Delivery (Smaller File)

Web Delivery (Smaller File)

Maximum Quality (Archive)

Maximum Quality (Archive)

Fast Preview Render

Fast Preview Render

Render Workflow

Render Workflow

Next Steps

Next Steps

Troubleshooting

Troubleshooting

Checklist

Checklist

Codec Reference

编解码器参考

H.264 (Most Compatible)

H.264（兼容性最强）

H.265 (HEVC) - Better Compression

H.265 (HEVC) - 压缩效率更高

VP9 (Open Source)

VP9（开源）

ProRes (Professional)

ProRes（专业级）

Quality vs File Size Reference

质量与文件体积参考

Platform-Specific Presets

平台专属预设

YouTube

YouTube

Twitter/X

Twitter/X

Instagram Feed

Instagram Feed

Instagram Reels/Stories

Instagram Reels/Stories

TikTok

TikTok

LinkedIn

LinkedIn

Advanced Render Options

高级渲染选项

Concurrency (Faster Renders)

并发渲染（提升速度）

Image Sequence (for Post-Processing)