Video Render

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

Rendering Commands

Preview in Studio (Development)

cd remotion-videos
npm run dev
# Opens at http://localhost:3000

Render Single Composition

cd remotion-videos

# Render with default settings
npx remotion render {CompositionId} output/{filename}.mp4

# Render with custom props
npx remotion render {CompositionId} output/{filename}.mp4 \
  --props='{"title": "My Video", "content": "Hello World"}'

# Render specific frame range
npx remotion render {CompositionId} output/{filename}.mp4 \
  --frames=0-150

Render with Quality Settings

# High quality (slower)
npx remotion render {CompositionId} output/{filename}.mp4 \
  --codec=h264 \
  --crf=18 \
  --pixel-format=yuv420p

# Web optimized (smaller file)
npx remotion render {CompositionId} output/{filename}.mp4 \
  --codec=h264 \
  --crf=23 \
  --pixel-format=yuv420p

Render Formats

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

Performance Tips

1. Use --concurrency: Parallel frame rendering

   npx remotion render MyVideo out.mp4 --concurrency=4
   

2. Use --gl=angle: GPU acceleration on Windows

   npx remotion render MyVideo out.mp4 --gl=angle
   

3. 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