Remotion Render
Render videos from React/Remotion component code via inference.sh.
Install
npx skills add inference-sh/skills --skill remotion-render -g -a claude-code -y- Repository
- inference-sh/skills795
- Category
- Design
- Updated
- 20d ago
- License
- See repository
- Context cost
- Mediumabout 1,842 tokens
- Runs scripts
- No, instructions only
What it does
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
Install the belt CLI skill:
npx skills add belt-sh/cli
Remotion Render
Render videos from React/Remotion component code via inference.sh CLI.
Quick Start
Requires inference.sh CLI (
belt). Install instructions
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:
// Remotion APIs
import {
useCurrentFrame,
useVideoConfig,
spring,
interpolate,
AbsoluteFill,
Sequence,
Audio,
Video,
Img
} from "remotion";
// React
import React, { useState, useEffect } from "react";
