Remotion Render
Render videos from React/Remotion component code via inference.sh CLI.
Quick Start
Requires inference.sh CLI (infsh ). Get installation instructions: npx skills add inference-sh/skills@agent-tools
infsh login
Render a simple animation
infsh 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
infsh 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
infsh 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
infsh 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
infsh 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
infsh 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@agent-tools
Documentation
-
Remotion Documentation - Official Remotion docs
-
Running Apps - How to run apps via CLI
-
Streaming Results - Real-time progress updates