inference-sh-5/remotion-render
tools/video/remotion-render/SKILL.md
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 --global
skillsauthnpx skillsauth add inference-sh-5/skills remotion-renderInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Error
VirusTotalMulti-engine malware detection
70%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 12, 2026, 11:24 PM115.0s1 file scanned
SKILL.md
- name:
- remotion-render
- 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
- allowed-tools:
- Bash(belt *)
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";
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-cli
Documentation
- Remotion Documentation - Official Remotion docs
- Running Apps - How to run apps via CLI
- Streaming Results - Real-time progress updates
Related Skills
inference-sh-5/ai-podcast
data-ai
VerifiedTrustedCommunity
Generate multi-person talking head podcast videos from scratch using AI — character creation, TTS, avatar animation, and video stitching. Use when the user wants to create a podcast, talking head video, or multi-speaker conversation video.
457SKILL.mdUpdated May 21, 2026
inference-sh-5/seedance
tools
Community
Generate videos with ByteDance Seedance 2.0 via inference.sh CLI. Unified model for text-to-video, image-to-video, and reference-to-video with synchronized audio, up to 1080p, 4-15s duration. Pro and Fast variants. Studio variants with private asset library for portrait consistency. Use for: social media videos, music videos, product demos, animated content, AI video with sound. Triggers: seedance, seedance 2, bytedance video, seedance t2v, seedance i2v, seedance r2v, video with audio, seedance 2.0, bytedance seedance, seedance studio
450SKILL.mdUpdated May 13, 2026
inference-sh-5/p-video-avatar
tools
Community
Generate talking head avatar videos with Pruna P-Video-Avatar via inference.sh CLI. Turn a portrait image into a realistic speaking video with built-in TTS. 18x faster and 6x cheaper than competitors. Models: P-Video-Avatar, P-Image (for portrait generation). Capabilities: text-to-avatar, audio-driven avatars, 30 voices, 10 languages, 720p/1080p, built-in TTS, dynamic backgrounds, full-body control. Use for: AI presenters, product demos, explainer videos, virtual influencers, marketing, education, multilingual content, UGC, gaming avatars. Triggers: avatar video, talking head, ai avatar, p-video-avatar, pruna avatar, video avatar, ai presenter, digital human, virtual presenter, lipsync, talking avatar, ai spokesperson, heygen alternative, synthesia alternative, veed alternative, fabric alternative, omnihuman alternative
450SKILL.mdUpdated May 13, 2026
inference-sh-5/happyhorse
tools
Community
Generate and edit videos with Alibaba HappyHorse 1.0 models via inference.sh CLI. Models: HappyHorse T2V, I2V, R2V, Video Edit. Capabilities: text-to-video, image-to-video, reference-to-video, video editing with natural language, character preservation, 720P/1080P, up to 15 seconds. Use for: physically realistic video, video editing, character-consistent content, product demos, social media. Triggers: happyhorse, happy horse, alibaba video, happyhorse 1.0, dashscope video, alibaba happyhorse, video editing ai, ai video editor
450SKILL.mdUpdated May 13, 2026