| name | video-render |
| description | Render videos using Remotion React-based video framework |
| allowed-tools | ["Bash","Read","Write"] |
Video Render Skill
Render professional videos using Remotion (React-based video framework).
Prerequisites
- Node.js v18+ installed
- Remotion project set up in
remotion-videos/
- ffmpeg installed for post-processing
Available Compositions
| Composition | Duration | Description |
|---|
| CodeExplainer | Variable | Animated code tutorials |
| GitHubRecap | 30-60s | GitHub activity summary |
| ThreadToVideo | Variable | Twitter thread as video |
| Audiogram | Variable | Audio with waveform |
| VerticalShort | 15-60s | 9:16 vertical format |
| KineticTypography | 14s | Animated text |
| CountdownTimer | 7s | 3-2-1 countdown |
| DataDashboard | 12s | Animated charts |
| AsciiArt | 10s | ASCII art animation |
Rendering Commands
Preview in Studio (Development)
cd remotion-videos
npm run dev
Render Single Composition
cd remotion-videos
npx remotion render {CompositionId} output/{filename}.mp4
npx remotion render {CompositionId} output/{filename}.mp4 \
--props='{"title": "My Video", "content": "Hello World"}'
npx remotion render {CompositionId} output/{filename}.mp4 \
--frames=0-150
Render with Quality Settings
npx remotion render {CompositionId} output/{filename}.mp4 \
--codec=h264 \
--crf=18 \
--pixel-format=yuv420p
npx remotion render {CompositionId} output/{filename}.mp4 \
--codec=h264 \
--crf=23 \
--pixel-format=yuv420p
Render Formats
| Format | Use Case | Command |
|---|
| MP4 (H.264) | YouTube, general | --codec=h264 |
| WebM (VP9) | Web embedding | --codec=vp9 |
| ProRes | Professional editing | --codec=prores |
| GIF | Social previews | --codec=gif |
| PNG Sequence | After Effects | --sequence |
Composition Props Examples
CodeExplainer Props
{
"code": "function hello() {\n console.log('Hello');\n}",
"language": "javascript",
"explanation": "This function logs a greeting",
"title": "JavaScript Basics"
}
GitHubRecap Props
{
"username": "octocat",
"commits": 42,
"prs": 5,
"issues": 12,
"repos": ["repo1", "repo2"],
"period": "This Week"
}
AsciiArt Props
{
"asciiArt": " /\\_/\\\n ( o.o )\n > ^ <",
"title": "Cat Art",
"animationType": "typewriter",
"backgroundColor": "#0a0e27",
"asciiColor": "#00ff88"
}
Output Specifications
| Platform | Resolution | Aspect | Duration |
|---|
| YouTube | 1920x1080 | 16:9 | Any |
| TikTok | 1080x1920 | 9:16 | 15-60s |
| Instagram Reels | 1080x1920 | 9:16 | 15-90s |
| YouTube Shorts | 1080x1920 | 9:16 | <60s |
| Twitter | 1280x720 | 16:9 | <140s |
Performance Tips
-
Use --concurrency: Parallel frame rendering
npx remotion render MyVideo out.mp4 --concurrency=4
-
Use --gl=angle: GPU acceleration on Windows
npx remotion render MyVideo out.mp4 --gl=angle
-
Reduce resolution for tests:
npx remotion render MyVideo out.mp4 --scale=0.5
Output Files
- Rendered videos:
output/{composition}_{date}.mp4
- Props files:
output/props/{composition}_props.json
- Logs:
output/logs/render_{date}.log