Remotion Render
- 299k installs
- 680 repo stars
- Updated August 3, 2026
- qu-skills/skills
This is a copy of remotion-render by halt-catch-fire - installs and ranking accrue to the original listing.
remotion-render is an agent skill that renders React/Remotion TSX components to production MP4 files via inference.sh for developers who need programmatic motion graphics without a local render farm.
About
remotion-render is a qu-skills agent skill that converts React/Remotion TSX component code into MP4 videos through inference.sh. Developers pass TSX using Remotion APIs such as useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, and Sequence, then configure resolution, FPS, duration, and codec remotely. The skill targets programmatic video generation, animated graphics, motion design, and data-driven React animations exported as video. Install the belt CLI skill with `npx skills add belt-sh/cli` before use. Developers reach for remotion-render when code—not diffusion models—defines the motion timeline.
- Renders any Remotion React component (useCurrentFrame, spring, interpolate, AbsoluteFill, Sequence) to MP4 via inference
- Full control over resolution, FPS, duration, codec and all Remotion APIs
- Converts data-driven React animations into shareable video assets in one CLI call
- Supports programmatic video generation for marketing, explainer, and motion design content
- Requires only the belt CLI; no local Remotion installation or heavy compute needed
Remotion Render by the numbers
- 299,330 all-time installs (skills.sh)
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/qu-skills/skills --skill remotion-renderAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 299k |
|---|---|
| repo stars | ★ 680 |
| Last updated | August 3, 2026 |
| Repository | qu-skills/skills ↗ |
How do you render Remotion TSX to MP4 remotely?
Turn React/Remotion TSX component code into production-ready MP4 videos without running a local render farm.
Who is it for?
Frontend developers who already write Remotion React components and want cloud MP4 renders without maintaining local render infrastructure.
Skip if: Teams needing AI-generated cinematic footage from text prompts instead of code-defined Remotion timelines.
When should I use this skill?
User mentions remotion, render video from code, TSX to video, programmatic video, or React animation export.
What you get
Production MP4 videos, rendered motion graphics, data-driven React animation exports
- MP4 video files
- rendered motion graphics
Files
Install the belt CLI skill: npx skills add belt-sh/cliRemotion Render
Render videos from React/Remotion component code via inference.sh CLI.
Quick Start
Requires inference.sh CLI (belt). Install instructionsbelt 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";Examples
Fade-In Text
belt app run infsh/remotion-render --input '{
"code": "import { useCurrentFrame, AbsoluteFill, interpolate } from \"remotion\"; export default function Main() { const frame = useCurrentFrame(); const opacity = interpolate(frame, [0, 30], [0, 1]); return <AbsoluteFill style={{backgroundColor: \"#1a1a2e\", display: \"flex\", justifyContent: \"center\", alignItems: \"center\"}}><h1 style={{color: \"#eee\", fontSize: 80, opacity}}>Welcome</h1></AbsoluteFill>; }",
"duration_seconds": 2,
"fps": 30,
"width": 1920,
"height": 1080
}'Animated Counter
belt app run infsh/remotion-render --input '{
"code": "import { useCurrentFrame, useVideoConfig, AbsoluteFill } from \"remotion\"; export default function Main() { const frame = useCurrentFrame(); const { fps, durationInFrames } = useVideoConfig(); const progress = Math.floor((frame / durationInFrames) * 100); return <AbsoluteFill style={{backgroundColor: \"#000\", display: \"flex\", justifyContent: \"center\", alignItems: \"center\", flexDirection: \"column\"}}><h1 style={{color: \"#fff\", fontSize: 200}}>{progress}%</h1><p style={{color: \"#666\", fontSize: 30}}>Loading...</p></AbsoluteFill>; }",
"duration_seconds": 5,
"fps": 60,
"width": 1080,
"height": 1080
}'Spring Animation
belt app run infsh/remotion-render --input '{
"code": "import { useCurrentFrame, useVideoConfig, spring, AbsoluteFill } from \"remotion\"; export default function Main() { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const scale = spring({ frame, fps, config: { damping: 10, stiffness: 100 } }); return <AbsoluteFill style={{backgroundColor: \"#6366f1\", display: \"flex\", justifyContent: \"center\", alignItems: \"center\"}}><div style={{width: 200, height: 200, backgroundColor: \"white\", borderRadius: 20, transform: `scale(${scale})`}} /></AbsoluteFill>; }",
"duration_seconds": 2,
"fps": 60,
"width": 1080,
"height": 1080
}'With Props
belt app run infsh/remotion-render --input '{
"code": "import { AbsoluteFill } from \"remotion\"; export default function Main({ title, subtitle }) { return <AbsoluteFill style={{backgroundColor: \"#000\", display: \"flex\", justifyContent: \"center\", alignItems: \"center\", flexDirection: \"column\"}}><h1 style={{color: \"#fff\", fontSize: 80}}>{title}</h1><p style={{color: \"#888\", fontSize: 40}}>{subtitle}</p></AbsoluteFill>; }",
"props": {"title": "My Video", "subtitle": "Created with Remotion"},
"duration_seconds": 3,
"fps": 30,
"width": 1920,
"height": 1080
}'Sequence Animation
belt app run infsh/remotion-render --input '{
"code": "import { useCurrentFrame, AbsoluteFill, Sequence, interpolate } from \"remotion\"; function FadeIn({ children }) { const frame = useCurrentFrame(); const opacity = interpolate(frame, [0, 20], [0, 1]); return <div style={{ opacity }}>{children}</div>; } export default function Main() { return <AbsoluteFill style={{backgroundColor: \"#000\", display: \"flex\", justifyContent: \"center\", alignItems: \"center\", flexDirection: \"column\", gap: 20}}><Sequence from={0}><FadeIn><h1 style={{color: \"#fff\", fontSize: 60}}>First</h1></FadeIn></Sequence><Sequence from={30}><FadeIn><h1 style={{color: \"#fff\", fontSize: 60}}>Second</h1></FadeIn></Sequence><Sequence from={60}><FadeIn><h1 style={{color: \"#fff\", fontSize: 60}}>Third</h1></FadeIn></Sequence></AbsoluteFill>; }",
"duration_seconds": 4,
"fps": 30,
"width": 1920,
"height": 1080
}'Python SDK
from inferencesh import inference
client = inference()
result = client.run({
"app": "infsh/remotion-render",
"input": {
"code": """
import { useCurrentFrame, AbsoluteFill, interpolate } from "remotion";
export default function Main() {
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 30], [0, 1]);
return (
<AbsoluteFill style={{
backgroundColor: "#1a1a2e",
display: "flex",
justifyContent: "center",
alignItems: "center"
}}>
<h1 style={{ color: "#eee", fontSize: 80, opacity }}>
Hello from Python
</h1>
</AbsoluteFill>
);
}
""",
"duration_seconds": 3,
"fps": 30,
"width": 1920,
"height": 1080
}
})
print(result["output"]["video"])Streaming Progress
for update in client.run({
"app": "infsh/remotion-render",
"input": {
"code": "...",
"duration_seconds": 10
}
}, stream=True):
if update.get("progress"):
print(f"Rendering: {update['progress']}%")
if update.get("output"):
print(f"Video: {update['output']['video']}")Related Skills
# Remotion best practices (component patterns)
npx skills add remotion-dev/skills@remotion-best-practices
# AI video generation (for AI-generated clips)
npx skills add inference-sh/skills@ai-video-generation
# Image generation (for video assets)
npx skills add inference-sh/skills@ai-image-generation
# Python SDK reference
npx skills add inference-sh/skills@python-sdk
# Full platform skill
npx skills add inference-sh/skills@infsh-cliDocumentation
- Remotion Documentation - Official Remotion docs
- Running Apps - How to run apps via CLI
- Streaming Results - Real-time progress updates
Related skills
Remotion Best PracticesGet Remotion-specific coding guidance that prevents common video rendering mistakes when creating animated React videos.451k4.2k
Ai Video GenerationGenerate videos using 40+ AI models including Veo, Seedance, and others via inference.sh442k665Ai Image GenerationGenerate images using 50+ AI models including FLUX, Gemini, and Replicate via inference.sh441k665Ai Avatar VideoGenerate videos featuring AI avatars for product demos, tutorials, marketing, or explainers441k665Remotion RenderRender videos programmatically using React components and Remotion framework441k665
Remotion RenderGenerate high-quality MP4 videos from React code using Remotion inside an AI coding agent.363k665How it compares
Pick remotion-render for code-defined React/Remotion timelines; pick ai-video-generation for diffusion-model text-to-video instead.
FAQ
Which Remotion APIs does remotion-render support?
remotion-render supports Remotion TSX using useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, and Sequence. Developers pass component code to inference.sh and receive MP4 output with configurable resolution, FPS, duration, and codec.
Does remotion-render need a local render farm?
remotion-render renders React/Remotion TSX to MP4 through inference.sh remotely, so developers avoid running a local render farm. The skill also expects the belt CLI skill installed via `npx skills add belt-sh/cli`.