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