# remotion-render

This skill sends a Remotion React component to inference.sh and gets back an MP4. Useful when video should come from code, not from a timeline editor.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 109700 installs · ★ 12
- Author: 101-skills
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/101-skills/superpowers/tree/HEAD/tools/video/remotion-render/SKILL.md
- Updated: 2026-08-31
- HTML: https://affpapa.org/en/nevibecode/skills/101-skills-remotion-render

## What it does

You hand the skill TSX code for a component that exports a default component, and it renders through the `belt` CLI from inference.sh. The result is an MP4. Width, height, FPS, duration and codec are set in the same call, so the same component can be re-rendered for a vertical or square cut.

Your code can import from `remotion` and `react`: `useCurrentFrame`, `useVideoConfig`, `spring`, `interpolate`, `AbsoluteFill`, `Sequence`, `Audio`, `Video`, `Img`. Props can be passed to the component, which is how you feed changing data into a template.

Before the first render you need the `belt` CLI and a session from `belt login`. The skill allows only `Bash(belt *)`, so rendering happens on inference.sh rather than on your machine — no access to that service means no output.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add 101-skills/superpowers --skill remotion-render -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/remotion-render/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/remotion-render/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add 101-skills/superpowers --skill remotion-render -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/remotion-render/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add 101-skills/superpowers --skill remotion-render -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/remotion-render/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install 101-skills/superpowers remotion-render
```

2. **Manually: put the files in place**
- File: `.github/skills/remotion-render/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add 101-skills/superpowers --skill remotion-render -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/101-skills/superpowers --path tools/video/remotion-render
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/remotion-render/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add 101-skills/superpowers --skill remotion-render -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/101-skills/superpowers/tree/HEAD/tools/video/remotion-render/SKILL.md

## When to use it
- turn a React component into an MP4 without a video editor
- animate text fading in frame by frame
- build a counter or progress bar that grows through the clip
- feed data into a template through props and render it
- stitch a scene from several timed fragments

## Example prompts
- Render this Remotion component to MP4 at 1920x1080, 30 fps, 3 seconds
- Make a video where the title fades in with interpolate
- Build a clip from three scenes using Sequence, one second each

## Similar
- [remotion](https://affpapa.org/en/nevibecode/skills/vercel-labs-remotion.md) — skill · 1700 installs
- [remotion-saas](https://affpapa.org/en/nevibecode/skills/remotion-saas.md) — skill · 3 installs
- [remotion-best-practices](https://affpapa.org/en/nevibecode/skills/remotion-dev-remotion-best-practices.md) — skill · 684500 installs
- [remotion-create](https://affpapa.org/en/nevibecode/skills/remotion-dev-remotion-create.md) — skill · 214000 installs
- [remotion-video-creation](https://affpapa.org/en/nevibecode/skills/remotion-video-creation.md) — skill · 4900 installs
- [remotion-video](https://affpapa.org/en/nevibecode/skills/remotion-video.md) — skill · 2600 installs

## Other versions with the same name
- [remotion-render · openai](https://affpapa.org/en/nevibecode/skills/remotion-render.md) — 3 installs

From the same set: [101-skills/superpowers](https://affpapa.org/en/nevibecode/by/101-skills/superpowers.md) — 22 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md