mcpField
J
json-render-remotion

json-render-remotion

github.com/vercel-labs创意与媒体18.8k153 次安装5 天前更新
代码仓库

关于 json-render-remotion

json-render-remotion 是面向视频开发者的 Remotion 渲染器，可将 JSON 时间线规格转换为视频合成，并提供标准组件及转场支持。

主要功能

  1. 01将 JSON 时间线渲染为 Remotion 合成
  2. 02使用标准场景和叠加组件
  3. 03定义自定义目录组件
  4. 04通过钩子和包装器应用转场

适用场景

  1. 01渲染标题卡、图片幻灯片和分屏
  2. 02为视频添加文字叠加或字幕条
  3. 03为时间线创建自定义片段组件

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/vercel-labs/json-render --skill json-render-remotion

安装后在 Claude Code 中输入/json-render-remotion确认已加载。

详细介绍

@json-render/remotion

Remotion 渲染器，可将 JSON 时间线规格转换为视频合成。

快速开始

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": [] }
}

标准组件

组件类型说明
TitleCard场景带副标题的全屏标题
TypingText场景终端风格的打字动画
ImageSlide图像全屏图像展示
SplitScreen场景双面板对比
QuoteCard场景带署名的引言
StatCard场景动态统计数据展示
TextOverlay叠加层文字叠加层
LowerThird叠加层姓名／职务叠加层

主要导出项

导出项用途
Renderer将规格渲染为 Remotion 合成
schema时间线架构
standardComponents预构建组件注册表
standardComponentDefinitions目录定义
useTransition转场动画钩子
ClipWrapper为片段添加转场效果

评论

支持 Markdown