⚡

Remotion渲染技能Skill remotion-render

这个技能用于通过React/Remotion组件代码渲染视频，支持所有Remotion API，如useCurrentFrame、useVideoConfig、spring、interpolate等。可配置分辨率、FPS、时长和编解码器，适用于程序化视频生成、动画图形、运动设计、数据驱动视频和React动画转视频。关键词：视频渲染、React、Remotion、代码生成视频、程序化视频、动画制作、TSX转MP4、前端动画。

前端开发 0 次安装 0 次浏览 更新于 3/12/2026

name: remotion-render description: “通过 inference.sh 从 React/Remotion 组件代码渲染视频。传递 TSX 代码，获取 MP4 视频。支持所有 Remotion API：useCurrentFrame、useVideoConfig、spring、interpolate、AbsoluteFill、Sequence。可配置分辨率、FPS、时长、编解码器。适用于：程序化视频生成、动画图形、运动设计、数据驱动视频、React 动画转视频。触发词：remotion、从代码渲染视频、tsx 转视频、react 视频、程序化视频、remotion 渲染、代码转视频、动画视频、运动图形代码、react 动画视频” allowed-tools: Bash(infsh *)

Remotion 渲染

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

Remotion 渲染

快速开始

# 安装 CLI
curl -fsSL https://cli.inference.sh | sh && infsh login

# 渲染一个简单动画
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
}'

安装说明： 安装脚本 仅检测您的操作系统/架构，从 dist.inference.sh 下载匹配的二进制文件，并验证其 SHA-256 校验和。无需提升权限或后台进程。提供 手动安装和验证。

输入模式

参数 类型 必填 描述
code 字符串 是 React 组件 TSX 代码。必须导出默认组件。
composition_id 字符串 否 要渲染的组合 ID
props 对象 否 传递给组件的属性
width 数字 否 视频宽度（像素）
height 数字 否 视频高度（像素）
fps 数字 否 每秒帧数
duration_seconds 数字 否 视频时长（秒）
codec 字符串 否 输出编解码器

可用导入

您的 TSX 代码可以从 remotion 和 react 导入：

// Remotion API
import {
  useCurrentFrame,
  useVideoConfig,
  spring,
  interpolate,
  AbsoluteFill,
  Sequence,
  Audio,
  Video,
  Img
} from "remotion";

// React
import React, { useState, useEffect } from "react";

示例

淡入文本

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
}'

动画计数器

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
}'

弹簧动画

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
}'

带属性

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
}'

序列动画

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"])

流式进度

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']}")

相关技能

# Remotion 最佳实践（组件模式）
npx skills add remotion-dev/skills@remotion-best-practices

# AI 视频生成（用于 AI 生成的片段）
npx skills add inference-sh/skills@ai-video-generation

# 图像生成（用于视频素材）
npx skills add inference-sh/skills@ai-image-generation

# Python SDK 参考
npx skills add inference-sh/skills@python-sdk

# 完整平台技能
npx skills add inference-sh/skills@inference-sh

文档