# Video Render

> Render videos using Remotion React-based video framework

- Skill: `majiayu000/video-render` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/video-render`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/video-render/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/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

| 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)

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

### Render Single Composition

```bash
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

```bash
# 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

| 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

```json
{
  "code": "function hello() {\n  console.log('Hello');\n}",
  "language": "javascript",
  "explanation": "This function logs a greeting",
  "title": "JavaScript Basics"
}
```

### GitHubRecap Props

```json
{
  "username": "octocat",
  "commits": 42,
  "prs": 5,
  "issues": 12,
  "repos": ["repo1", "repo2"],
  "period": "This Week"
}
```

### AsciiArt Props

```json
{
  "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

1. **Use `--concurrency`**: Parallel frame rendering
   ```bash
   npx remotion render MyVideo out.mp4 --concurrency=4
   ```

2. **Use `--gl=angle`**: GPU acceleration on Windows
   ```bash
   npx remotion render MyVideo out.mp4 --gl=angle
   ```

3. **Reduce resolution for tests**:
   ```bash
   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`