json-render-remotion

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

@json-render/remotion

Remotion renderer that converts JSON timeline specs into video compositions.

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

Quick Start

快速开始

typescript

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
    />
  );
}

typescript

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
    />
  );
}

Using Standard Components

使用标准组件

typescript

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,
});

typescript

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,
});

Adding Custom Components

添加自定义组件

typescript

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 },
  }}
/>

typescript

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 },
  }}
/>

Timeline Spec Structure

时间线规格结构

json

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

json

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

Standard Components

标准组件

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
`StatCard`	scene	Animated statistic display
`TextOverlay`	overlay	Text overlay
`LowerThird`	overlay	Name/title overlay

组件	类型	描述
`TitleCard`	场景	带副标题的全屏标题
`TypingText`	场景	终端风格的打字动画
`ImageSlide`	图片	全屏图片展示
`SplitScreen`	场景	双面板对比展示
`QuoteCard`	场景	带署名的引用卡片
`StatCard`	场景	带动画的统计数据展示
`TextOverlay`	叠加层	文字叠加层
`LowerThird`	叠加层	名称/职位叠加层

Key Exports

主要导出项

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

导出项	用途
`Renderer`	将规格渲染为Remotion合成内容
`schema`	时间线规格 schema
`standardComponents`	预构建组件注册表
`standardComponentDefinitions`	目录定义
`useTransition`	过渡动画钩子
`ClipWrapper`	为剪辑添加过渡效果的包装组件