# Remotion Render

Render videos from React/Remotion component code via inference.sh.

- Repository: https://github.com/inference-sh/skills (795 stars)
- Category: Design
- License: see repository
- Last updated: 2026-10-15
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add inference-sh/skills --skill remotion-render -g -a claude-code -y`
Codex: `npx skills add inference-sh/skills --skill remotion-render -g -a codex -y`
Cursor: `npx skills add inference-sh/skills --skill remotion-render -g -a cursor -y`
Gemini CLI: `npx skills add inference-sh/skills --skill remotion-render -g -a gemini-cli -y`

## Description

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

> **Install the belt CLI skill:** `npx skills add belt-sh/cli`

# Remotion Render

Render videos from React/Remotion component code via [inference.sh](https://inference.sh) CLI.

![Remotion Render](https://cloud.inference.sh/app/files/u/4mg21r6ta37mpaz6ktzwtt8krr/01kg2c0egyg243mnyth4y6g51q.jpeg)

## Quick Start

> Requires inference.sh CLI (`belt`). [Install instructions](https://raw.githubusercontent.com/inference-sh/skills/refs/heads/main/cli-install.md)

```bash
belt login

# Render a simple animation
belt app run infsh/remotion-render --input '{
  "code": "import { useCurrentFrame, AbsoluteFill } from \"remotion\"; export default function Main() { const frame = useCurrentFrame(); return <AbsoluteFill style={{backgroundColor: \"#000\", display: \"flex\", justifyContent: \"center\", alignItems: \"center\"}}><h1 style={{color: \"white\", fontSize: 100, opacity: frame / 30}}>Hello World</h1></AbsoluteFill>; }",
  "duration_seconds": 3,
  "fps": 30,
  "width": 1920,
  "height": 1080
}'
```


## Input Schema

| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| `code` | string | Yes | React component TSX code. Must export default a component. |
| `composition_id` | string | No | Composition ID to render |
| `props` | object | No | Props passed to the component |
| `width` | number | No | Video width in pixels |
| `height` | number | No | Video height in pixels |
| `fps` | number | No | Frames per second |
| `duration_seconds` | number | No | Video duration in seconds |
| `codec` | string | No | Output codec |

## Available Imports

Your TSX code can import from `remotion` and `react`:

```tsx
// Remotion APIs
import {
  useCurrentFrame,
  useVideoConfig,
  spring,
  interpolate,
  AbsoluteFill,
  Sequence,
  Audio,
  Video,
  Img
} from "remotion";

// React
import React, { useState, useEffect } from "react";
```

## Examples

### Fade-In Text

The rest: https://github.com/inference-sh/skills/blob/HEAD/tools/video/remotion-render/SKILL.md