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 Hello World
; }",
"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 Welcome
; }",
"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 {progress}%
Loading...
; }",
"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 scale(${scale})}} />; }",
"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
{title}
{subtitle}
; }",
"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
{children}
; } export default function Main() { return
First
Second
Third
; }",
"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 (
Hello from Python
);
}
"""
,
"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'
]
}
"
)
← 返回排行榜