mcpField
J
json-render-remotion

json-render-remotion

github.com/vercel-labsクリエイティブ・メディア18.8k153 回インストール5 日前に更新
リポジトリ

json-render-remotion について

json-render-remotionは、JSONのタイムライン仕様から動画コンポジションを作るRemotion用レンダラーです。標準コンポーネントに加え、トランジション用のフックやラッパーも備えています。

主な機能

  1. 01JSONタイムラインを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

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

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

標準コンポーネント

コンポーネント種類説明
TitleCardsceneサブタイトル付きの全画面タイトル
TypingTextsceneターミナル風のタイピングアニメーション
ImageSlideimage全画面の画像表示
SplitScreenscene2 パネルの比較
QuoteCardscene引用と出典
StatCardsceneアニメーション付きの統計表示
TextOverlayoverlayテキストオーバーレイ
LowerThirdoverlay名前／タイトルのオーバーレイ

主なエクスポート

エクスポート目的
Renderer仕様を Remotion コンポジションにレンダリングします
schemaタイムラインスキーマ
standardComponents事前構築済みコンポーネントレジストリ
standardComponentDefinitionsカタログ定義
useTransitionトランジションアニメーションフック
ClipWrapperトランジション付きでクリップをラップします

コメント

Markdown 対応