remotion-render
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseRemotion Render
Remotion 视频渲染
Render videos from React/Remotion component code via inference.sh CLI.

通过inference.sh CLI从React/Remotion组件代码渲染视频。

Quick Start
快速开始
bash
undefinedbash
undefinedInstall CLI
安装CLI
curl -fsSL https://cli.inference.sh | sh && infsh login
curl -fsSL https://cli.inference.sh | sh && 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
}'
> **Install note:** The [install script](https://cli.inference.sh) only detects your OS/architecture, downloads the matching binary from `dist.inference.sh`, and verifies its SHA-256 checksum. No elevated permissions or background processes. [Manual install & verification](https://dist.inference.sh/cli/checksums.txt) available.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
}'
> **安装说明:** [安装脚本](https://cli.inference.sh)仅会检测您的操作系统/架构,从`dist.inference.sh`下载匹配的二进制文件,并验证其SHA-256校验和。无需提升权限或后台进程。提供[手动安装与验证](https://dist.inference.sh/cli/checksums.txt)选项。Input Schema
输入参数说明
| Parameter | Type | Required | Description |
|---|---|---|---|
| string | Yes | React component TSX code. Must export default a component. |
| string | No | Composition ID to render |
| object | No | Props passed to the component |
| number | No | Video width in pixels |
| number | No | Video height in pixels |
| number | No | Frames per second |
| number | No | Video duration in seconds |
| string | No | Output codec |
| 参数 | 类型 | 是否必填 | 描述 |
|---|---|---|---|
| string | 是 | React组件TSX代码。必须导出默认组件。 |
| string | 否 | 要渲染的合成ID |
| object | 否 | 传递给组件的属性 |
| number | 否 | 视频宽度(像素) |
| number | 否 | 视频高度(像素) |
| number | 否 | 每秒帧数 |
| number | 否 | 视频时长(秒) |
| string | 否 | 输出编码格式 |
Available Imports
可用导入
Your TSX code can import from and :
remotionreacttsx
// Remotion APIs
import {
useCurrentFrame,
useVideoConfig,
spring,
interpolate,
AbsoluteFill,
Sequence,
Audio,
Video,
Img
} from "remotion";
// React
import React, { useState, useEffect } from "react";您的TSX代码可以从和导入:
remotionreacttsx
// 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
淡入文字
bash
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
}'bash
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
动画计数器
bash
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
}'bash
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
弹性动画
bash
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
}'bash
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
传入属性
bash
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
}'bash
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
序列动画
bash
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
}'bash
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
Python SDK
python
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"])python
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
流式进度
python
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']}")python
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
相关技能
bash
undefinedbash
undefinedRemotion best practices (component patterns)
Remotion最佳实践(组件模式)
npx skills add remotion-dev/skills@remotion-best-practices
npx skills add remotion-dev/skills@remotion-best-practices
AI video generation (for AI-generated clips)
AI视频生成(用于AI生成片段)
npx skills add inference-sh/skills@ai-video-generation
npx skills add inference-sh/skills@ai-video-generation
Image generation (for video assets)
图片生成(用于视频素材)
npx skills add inference-sh/skills@ai-image-generation
npx skills add inference-sh/skills@ai-image-generation
Python SDK reference
Python SDK参考
npx skills add inference-sh/skills@python-sdk
npx skills add inference-sh/skills@python-sdk
Full platform skill
完整平台技能
npx skills add inference-sh/skills@inference-sh
undefinednpx skills add inference-sh/skills@inference-sh
undefinedDocumentation
文档
- Remotion Documentation - Official Remotion docs
- Running Apps - How to run apps via CLI
- Streaming Results - Real-time progress updates
- Remotion官方文档 - Remotion官方文档
- 运行应用 - 如何通过CLI运行应用
- 流式结果 - 实时进度更新