json-render-remotion by vercel-labs/json-render
npx skills add https://github.com/vercel-labs/json-render --skill json-render-remotion将 JSON 时间线规范转换为视频合成的 Remotion 渲染器。
import { Player } from "@remotion/player";
import { Renderer, type TimelineSpec } from "@json-render/remotion";
function VideoPlayer({ spec }: { spec: TimelineSpec }) {
return (
<Player
component={Renderer}
inputProps={{ spec }}
durationInFrames={spec.composition.durationInFrames}
fps={spec.composition.fps}
compositionWidth={spec.composition.width}
compositionHeight={spec.composition.height}
controls
/>
);
}
import { defineCatalog } from "@json-render/core";
import {
schema,
standardComponentDefinitions,
standardTransitionDefinitions,
standardEffectDefinitions,
} from "@json-render/remotion";
export const videoCatalog = defineCatalog(schema, {
components: standardComponentDefinitions,
transitions: standardTransitionDefinitions,
effects: standardEffectDefinitions,
});
import { z } from "zod";
const catalog = defineCatalog(schema, {
components: {
...standardComponentDefinitions,
MyCustomClip: {
props: z.object({ text: z.string() }),
type: "scene",
defaultDuration: 90,
description: "My custom video clip",
},
},
});
// 将自定义组件传递给 Renderer
<Player
component={Renderer}
inputProps={{
spec,
components: { MyCustomClip: MyCustomComponent },
}}
/>
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
{
"composition": { "id": "video", "fps": 30, "width": 1920, "height": 1080, "durationInFrames": 300 },
"tracks": [{ "id": "main", "name": "Main", "type": "video", "enabled": true }],
"clips": [
{ "id": "clip-1", "trackId": "main", "component": "TitleCard", "props": { "title": "Hello" }, "from": 0, "durationInFrames": 90 }
],
"audio": { "tracks": [] }
}
| 组件 | 类型 | 描述 |
|---|---|---|
TitleCard | scene | 带有副标题的全屏标题 |
TypingText | scene | 终端风格的打字动画 |
ImageSlide | image | 全屏图像显示 |
SplitScreen | scene | 双面板对比 |
QuoteCard | scene | 带有出处的引用 |
StatCard | scene | 动画统计数据显示 |
TextOverlay | overlay | 文本叠加层 |
LowerThird | overlay | 姓名/标题叠加层 |
| 导出项 | 用途 |
|---|---|
Renderer | 将规范渲染为 Remotion 合成 |
schema | 时间线模式 |
standardComponents | 预构建的组件注册表 |
standardComponentDefinitions | 目录定义 |
useTransition | 过渡动画钩子 |
ClipWrapper | 用过渡效果包装片段 |
每周安装量
153
代码仓库
GitHub 星标数
13.3K
首次出现
2026年2月6日
安全审计
安装于
opencode141
codex141
gemini-cli138
github-copilot134
kimi-cli127
amp126
Remotion renderer that converts JSON timeline specs into video compositions.
import { Player } from "@remotion/player";
import { Renderer, type TimelineSpec } from "@json-render/remotion";
function VideoPlayer({ spec }: { spec: TimelineSpec }) {
return (
<Player
component={Renderer}
inputProps={{ spec }}
durationInFrames={spec.composition.durationInFrames}
fps={spec.composition.fps}
compositionWidth={spec.composition.width}
compositionHeight={spec.composition.height}
controls
/>
);
}
import { defineCatalog } from "@json-render/core";
import {
schema,
standardComponentDefinitions,
standardTransitionDefinitions,
standardEffectDefinitions,
} from "@json-render/remotion";
export const videoCatalog = defineCatalog(schema, {
components: standardComponentDefinitions,
transitions: standardTransitionDefinitions,
effects: standardEffectDefinitions,
});
import { z } from "zod";
const catalog = defineCatalog(schema, {
components: {
...standardComponentDefinitions,
MyCustomClip: {
props: z.object({ text: z.string() }),
type: "scene",
defaultDuration: 90,
description: "My custom video clip",
},
},
});
// Pass custom component to Renderer
<Player
component={Renderer}
inputProps={{
spec,
components: { MyCustomClip: MyCustomComponent },
}}
/>
{
"composition": { "id": "video", "fps": 30, "width": 1920, "height": 1080, "durationInFrames": 300 },
"tracks": [{ "id": "main", "name": "Main", "type": "video", "enabled": true }],
"clips": [
{ "id": "clip-1", "trackId": "main", "component": "TitleCard", "props": { "title": "Hello" }, "from": 0, "durationInFrames": 90 }
],
"audio": { "tracks": [] }
}
| Component | Type | Description |
|---|---|---|
TitleCard | scene | Full-screen title with subtitle |
TypingText | scene | Terminal-style typing animation |
ImageSlide | image | Full-screen image display |
SplitScreen | scene | Two-panel comparison |
QuoteCard | scene | Quote with attribution |
| Export | Purpose |
|---|---|
Renderer | Render spec to Remotion composition |
schema | Timeline schema |
standardComponents | Pre-built component registry |
standardComponentDefinitions | Catalog definitions |
useTransition | Transition animation hook |
ClipWrapper | Wrap clips with transitions |
Weekly Installs
153
Repository
GitHub Stars
13.3K
First Seen
Feb 6, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode141
codex141
gemini-cli138
github-copilot134
kimi-cli127
amp126
MCP图像生成技能:使用Gemini AI为营销、UI设计、演示文稿创建高质量图像
7,600 周安装
StatCard | scene | Animated statistic display |
TextOverlay | overlay | Text overlay |
LowerThird | overlay | Name/title overlay |