Rendervid コンポーネント - レイヤータイプ、React コンポーネント、ビジュアルエディター

Rendervid は、動画作成をモジュラー、拡張可能、開発者フレンドリーにするコンポーネントベースのアーキテクチャで構築されています。Rendervid テンプレート 内のすべての要素はレイヤーであり、各レイヤーにはレンダリング方法を決定する特定のタイプがあります。8つの組み込みレイヤータイプ、増加し続ける構築済み React コンポーネントライブラリ、ビジュアルテンプレートエディター、スタンドアロンプレイヤーにより、Rendervid はプログラマティックにプロフェッショナルな動画コンテンツを制作するために必要なすべてを提供します。

このページでは、テキストやシェイプなどのプリミティブレイヤータイプから、オーディオと動画の再生、無限のクリエイティブな可能性を解き放つ完全カスタム React コンポーネントまで、完全なコンポーネントエコシステムをカバーします。シンプルなタイトルカードを構築する場合でも、複雑なデータドリブンアニメーションを構築する場合でも、これらのコンポーネントを理解することが基礎となります。

組み込みレイヤータイプ

Rendervid テンプレート内のすべてのレイヤーは、type フィールドを持つ JSON オブジェクトとして定義されます。タイプは利用可能なプロパティとレンダリング動作を決定します。以下は、8つの組み込みレイヤータイプそれぞれの詳細なリファレンスです。

テキストレイヤー

text レイヤーは Rendervid で最も機能豊富なプリミティブです。タイポグラフィ、配置、色、エフェクト、アニメーションを完全に制御してスタイル付きテキストをレンダリングします。

タイポグラフィプロパティ：

Rendervid には 100以上の Google フォントが組み込まれています。外部スタイルシートを読み込む必要なく、fontFamily プロパティを指定するだけで、それらのいずれかを使用できます。

配置プロパティ：

スタイリングとエフェクト：

• 基本的な色付け用の color と backgroundColor
• ドロップシャドウ用の textShadow
• アウトラインテキスト用の textStroke
• 下線、取り消し線用の textDecoration
• 大文字、小文字、キャピタライズ用の textTransform
• 自動省略記号切り詰め付きの maxLines
• 文字ごとのテキスト表示用の組み込みタイプライターエフェクト

{
  "type": "text",
  "text": "Welcome to Rendervid",
  "x": 100,
  "y": 200,
  "width": 800,
  "height": 100,
  "fontSize": 64,
  "fontFamily": "Montserrat",
  "fontWeight": 700,
  "color": "#FFFFFF",
  "textAlign": "center",
  "verticalAlign": "middle",
  "textShadow": "2px 2px 8px rgba(0,0,0,0.5)"
}

タイプライターエフェクトなどの高度なテキストアニメーションには、テキストレイヤーをキーフレームアニメーションと組み合わせるか、専用の TypewriterEffect コンポーネント を使用します。

画像レイヤー

image レイヤーは、柔軟なサイジングとクロッピングオプションでラスターおよびベクター画像を表示します。

主要プロパティ：

サポートされる形式： PNG、JPEG、WebP、SVG、GIF

{
  "type": "image",
  "source": "https://example.com/hero-banner.png",
  "x": 0,
  "y": 0,
  "width": 1920,
  "height": 1080,
  "fit": "cover",
  "position": "center center"
}

fit プロパティは CSS の object-fit のように動作します：

• cover – レイヤーを埋めるように画像をスケーリングし、余分な部分をクロップ
• contain – レイヤー内に完全に収まるようにスケーリングし、レターボックスの可能性あり
• fill – レイヤーの寸法に正確に一致するように画像を伸縮
• none – ネイティブ解像度で画像をレンダリング

動画レイヤー

video レイヤーは、完全な再生制御で動画クリップをコンポジションに埋め込みます。

主要プロパティ：

{
  "type": "video",
  "source": "https://cdn.example.com/background-clip.mp4",
  "x": 0,
  "y": 0,
  "width": 1920,
  "height": 1080,
  "startTime": 5.0,
  "playbackRate": 1.0,
  "muted": true,
  "loop": true
}

startTime を使用してイントロをスキップするか、ソース映像の特定のポイントにジャンプします。playbackRate と組み合わせて、スローモーション（0.5）またはタイムラプス（2.0）エフェクトを実現します。

シェイプレイヤー

shape レイヤーは、塗りつぶし、ストローク、グラデーション、角丸を持つベクターシェイプを描画します。

シェイプタイプ：

スタイリングプロパティ：

• fill – 単色またはグラデーション
• stroke – ボーダー色
• strokeWidth – ボーダーの太さ
• borderRadius – 矩形の角丸
• グラデーション： linear と radial グラデーション塗りつぶしの両方

{
  "type": "shape",
  "shapeType": "rectangle",
  "x": 100,
  "y": 100,
  "width": 400,
  "height": 300,
  "borderRadius": 16,
  "fill": {
    "type": "linear",
    "colors": ["#6366F1", "#8B5CF6"],
    "angle": 135
  },
  "stroke": "#FFFFFF",
  "strokeWidth": 2
}

カスタムシェイプには、標準 SVG パスデータで path タイプを使用します：

{
  "type": "shape",
  "shapeType": "path",
  "path": "M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80",
  "fill": "#EC4899",
  "stroke": "none"
}

オーディオレイヤー

audio レイヤーは、ボリュームコントロール、フェーディング、完全なエフェクトチェーンを備えたオーディオトラックをコンポジションに追加します。

主要プロパティ：

オーディオエフェクトチェーン：

Rendervid には組み込みのエフェクト処理パイプラインが含まれています。利用可能なエフェクト：

• EQ – トーンシェーピングのためのイコライゼーション
• Compressor – ダイナミックレンジ圧縮
• Reverb – 空間リバーブ
• Delay – エコー/ディレイエフェクト
• Gain – ボリュームブーストまたは減衰
• High-pass filter – 低周波数を除去
• Low-pass filter – 高周波数を除去
• Panning – ステレオ配置（左/右）

{
  "type": "audio",
  "source": "https://cdn.example.com/background-music.mp3",
  "volume": 0.7,
  "fadeIn": 2.0,
  "fadeOut": 3.0,
  "effects": [
    { "type": "highpass", "frequency": 200 },
    { "type": "compressor", "threshold": -24, "ratio": 4 },
    { "type": "reverb", "wet": 0.3, "decay": 2.5 },
    { "type": "gain", "value": 0.8 }
  ],
  "pan": -0.3
}

エフェクトは順番に処理され、洗練されたオーディオ処理チェーンを構築できます。ステレオ配置には -1（完全に左）から 1（完全に右）までの pan 値を使用します。

グループレイヤー

group レイヤーは子レイヤーを保持するコンテナです。グループに適用された変換はすべての子に影響し、複雑なマルチレイヤーコンポジションを単一のユニットとして移動、スケール、回転、またはアニメーション化することが簡単になります。

主要プロパティ：

{
  "type": "group",
  "x": 200,
  "y": 150,
  "rotation": 5,
  "opacity": 0.9,
  "children": [
    {
      "type": "shape",
      "shapeType": "rectangle",
      "x": 0,
      "y": 0,
      "width": 500,
      "height": 300,
      "fill": "#1E293B",
      "borderRadius": 12
    },
    {
      "type": "text",
      "text": "Card Title",
      "x": 24,
      "y": 24,
      "fontSize": 28,
      "fontWeight": 600,
      "color": "#F8FAFC"
    },
    {
      "type": "text",
      "text": "Supporting description text goes here.",
      "x": 24,
      "y": 64,
      "fontSize": 16,
      "color": "#94A3B8"
    }
  ]
}

グループは複雑なテンプレートを整理するのに非常に役立ちます。再利用可能なカードレイアウト、ローワーサード、オーバーレイ、その他の複合要素を作成するために使用します。子の座標はグループの位置に対して相対的です。

Lottie レイヤー

lottie レイヤーは、After Effects、Figma、またはその他のアニメーションツールからエクスポートされた Lottie アニメーションをレンダリングします。

主要プロパティ：

{
  "type": "lottie",
  "source": "https://cdn.example.com/loading-spinner.json",
  "x": 860,
  "y": 440,
  "width": 200,
  "height": 200,
  "speed": 1.5,
  "loop": true,
  "startFrame": 0,
  "endFrame": 60
}

Lottie レイヤーは、フレームごとのコードを書くことなく、洗練されたモーショングラフィックス、アイコン、ローディングインジケーター、ブランドアニメーションを追加するのに最適です。startFrame と endFrame プロパティを使用すると、アニメーションをトリミングして特定のセグメントのみを再生できます。

カスタムレイヤー

custom レイヤーは Rendervid で最も強力なレイヤータイプです。フレームごとにレンダリングする任意の React コンポーネントを記述でき、視覚的な出力を完全に制御できます。

カスタムコンポーネントには3つのデプロイメントタイプがあります：

インラインデプロイメント

JavaScript コードを JSON テンプレートに直接埋め込みます。小さな自己完結型コンポーネントに最適です。

{
  "type": "custom",
  "deployment": {
    "type": "inline",
    "code": "function Component({ frame, fps, sceneDuration, layerSize, props }) { const progress = frame / (fps * sceneDuration); const size = 50 + progress * 100; return React.createElement('div', { style: { width: size, height: size, borderRadius: '50%', backgroundColor: props.color || '#6366F1', display: 'flex', alignItems: 'center', justifyContent: 'center' } }); }"
  },
  "props": {
    "color": "#EC4899"
  }
}

URL デプロイメント

CDN などの外部 URL からコンポーネントを読み込みます。テンプレート間で共有される再利用可能なコンポーネントに最適です。

{
  "type": "custom",
  "deployment": {
    "type": "url",
    "url": "https://cdn.example.com/components/animated-counter.js"
  },
  "props": {
    "startValue": 0,
    "endValue": 1000,
    "prefix": "$",
    "color": "#10B981"
  }
}

参照デプロイメント

名前で事前登録されたコンポーネントを使用します。@rendervid/components パッケージまたはカスタムレジストリのコンポーネントに最適です。

{
  "type": "custom",
  "deployment": {
    "type": "reference",
    "name": "AnimatedLineChart"
  },
  "props": {
    "data": [10, 25, 40, 35, 60, 80, 72, 95],
    "lineColor": "#6366F1",
    "gradientOpacity": 0.3
  }
}

すべてのカスタムコンポーネントは標準のプロパティセットを受け取ります：

カスタムコンポーネントは、プロパティのスキーマ検証もサポートしており、テンプレートが各コンポーネントに正しいデータ型と必須フィールドを渡すことを保証します。

構築済み React コンポーネント

@rendervid/components パッケージには、テンプレートですぐに使用できる本番環境対応のコンポーネントセットが付属しています。

AnimatedLineChart

スムーズなグラデーション塗りつぶし、設定可能なデータポイント、軸ラベル、アニメーション描画エフェクトを備えたアニメーション折れ線グラフをレンダリングします。レポート、ダッシュボード、プレゼンテーションなどのデータドリブン動画コンテンツに最適です。

主要プロパティ： data、lineColor、gradientOpacity、strokeWidth、labels、animationStyle

AuroraBackground

レイヤードグラデーションと流体モーションを使用して、魅惑的なオーロラ（オーロラボレアリス）エフェクトを作成します。雰囲気のある背景、イントロシーケンス、アンビエントビジュアルに最適です。

主要プロパティ： colors、speed、intensity、blur

WaveBackground

設定可能な色、振幅、周波数で流体波アニメーションを生成します。スタイリッシュな背景、音楽ビジュアライザー、海をテーマにしたコンテンツに使用します。

主要プロパティ： waveCount、colors、amplitude、frequency、speed

SceneTransition

シーン間を移動するための17種類のプロフェッショナルトランジションタイプを提供します。ワイプ、フェード、ズーム、スライドなどが含まれます。各トランジションはフレーム精度で設定可能です。

主要プロパティ： transitionType、duration、direction、easing

TypewriterEffect

点滅カーソル付きの文字ごとのテキスト表示をレンダリングします。設定可能なタイピング速度、カーソルスタイル、単語間の遅延をサポートします。コードデモ、チャットシミュレーション、ドラマチックなテキスト表示に最適です。

主要プロパティ： text、typingSpeed、cursorChar、cursorBlinkRate、startDelay

カスタムコンポーネント開発

独自のカスタムコンポーネントを構築することは、Rendervid が真に輝く場所です。JavaScript と CSS で作成できる視覚エフェクトは、すべて Rendervid コンポーネントになります。

コンポーネント構造

Rendervid カスタムコンポーネントは、プロパティを受け取り React 要素を返す標準的な JavaScript 関数です。典型的な React コンポーネントとの主な違いは、レンダリングがイベント駆動ではなくフレーム駆動であることです。

function MyComponent({ frame, fps, sceneDuration, layerSize, props }) {
  // アニメーション進行状況を計算（0から1）
  const totalFrames = fps * sceneDuration;
  const progress = frame / totalFrames;

  // 進行状況を使用してアニメーションを駆動
  const opacity = Math.min(progress * 2, 1);
  const scale = 0.5 + progress * 0.5;

  return React.createElement("div", {
    style: {
      width: layerSize.width,
      height: layerSize.height,
      opacity: opacity,
      transform: `scale(${scale})`,
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      color: props.color || "#FFFFFF",
      fontSize: props.fontSize || 48,
      fontWeight: 700,
    },
  }, props.text || "Hello, Rendervid!");
}

利用可能なプロパティ

すべてのカスタムコンポーネントは、これらの標準プロパティを受け取ります：

• frame – 0から始まる現在のフレーム番号。これがプライマリアニメーションドライバーです。
• fps – 1秒あたりのフレーム数（通常30または60）。フレームを秒に変換するために使用します。
• sceneDuration – 現在のシーンの時間（秒）。fps で乗算して総フレーム数を取得します。
• layerSize – テンプレートで定義されたレイヤー寸法に一致する、width と height をピクセル単位で持つオブジェクト。
• props – テンプレート JSON で定義されたカスタムプロパティを含むオブジェクト。

React.createElement() パターン

Rendervid コンポーネントはレンダリング環境で実行されるため、JSX ではなく React.createElement() を使用します。パターンは簡単です：

// JSX 相当：<div className="container"><span>Hello</span></div>
React.createElement("div", { className: "container" },
  React.createElement("span", null, "Hello")
);

プロパティスキーマ検証

テンプレート読み込み時にデータを検証するために、コンポーネントのプロパティのスキーマを定義できます：

MyComponent.schema = {
  text: { type: "string", required: true },
  color: { type: "string", default: "#FFFFFF" },
  fontSize: { type: "number", default: 48, min: 8, max: 200 },
  animate: { type: "boolean", default: true },
};

例：パーティクルシステム

物理演算で150以上のパーティクルをシミュレートするパーティクルシステムコンポーネント：

function ParticleExplosion({ frame, fps, sceneDuration, layerSize, props }) {
  const particleCount = props.particleCount || 150;
  const gravity = props.gravity || 0.5;
  const time = frame / fps;

  const particles = [];
  for (let i = 0; i < particleCount; i++) {
    const angle = (i / particleCount) * Math.PI * 2;
    const speed = 2 + Math.random() * 4;
    const x = layerSize.width / 2 + Math.cos(angle) * speed * time * 60;
    const y = layerSize.height / 2 + Math.sin(angle) * speed * time * 60
              + gravity * time * time * 100;
    const opacity = Math.max(0, 1 - time / sceneDuration);
    const size = 3 + Math.random() * 5;

    particles.push(
      React.createElement("div", {
        key: i,
        style: {
          position: "absolute",
          left: x,
          top: y,
          width: size,
          height: size,
          borderRadius: "50%",
          backgroundColor: props.color || "#F59E0B",
          opacity: opacity,
        },
      })
    );
  }

  return React.createElement("div", {
    style: {
      position: "relative",
      width: layerSize.width,
      height: layerSize.height,
      overflow: "hidden",
    },
  }, ...particles);
}

例：アニメーションカウンター

開始値と終了値の間を補間する数値カウントアニメーション：

function AnimatedCounter({ frame, fps, sceneDuration, layerSize, props }) {
  const progress = Math.min(frame / (fps * sceneDuration), 1);
  const eased = 1 - Math.pow(1 - progress, 3); // ease-out cubic
  const value = Math.round(
    props.startValue + (props.endValue - props.startValue) * eased
  );
  const formatted = value.toLocaleString();

  return React.createElement("div", {
    style: {
      width: layerSize.width,
      height: layerSize.height,
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      fontSize: props.fontSize || 72,
      fontWeight: 800,
      color: props.color || "#FFFFFF",
      fontFamily: "Inter, sans-serif",
    },
  }, (props.prefix || "") + formatted + (props.suffix || ""));
}

カスタムコンポーネントがより広範なテンプレート構造にどのように適合するかについては、テンプレートシステムドキュメント を参照してください。

テンプレートエディター

@rendervid/editor パッケージは、開発者以外と開発者の両方が JSON を手書きせずに Rendervid テンプレートを構築できるようにする、フル機能のビジュアルテンプレートエディターを提供します。

タイムラインベースの編集

エディターには、各レイヤーがドラッグ、リサイズ、再配置できるブロックとして表されるマルチトラックタイムラインが備わっています。開始時刻、時間、レイヤーの順序を視覚的に調整します。フレームレベルの精度のためにズームインするか、高レベルの概要のためにズームアウトします。

レイヤー管理パネル

専用パネルには、ドラッグアンドドロップでの並べ替え、表示切り替え、ロックコントロール、グループ化を備えたコンポジション内のすべてのレイヤーがリストされます。8つの組み込みタイプと登録されたカスタムコンポーネントをすべて含むコンポーネントパレットから新しいレイヤーを追加します。

プロパティパネル

任意のレイヤーを選択して、構造化されたフォームでそのプロパティを表示および編集します。プロパティパネルはレイヤータイプに適応し、関連するフィールドのみを表示します。カラーピッカー、スライダー、ドロップダウン、テキスト入力により、すべての詳細を簡単に調整できます。変更はプレビューに即座に反映されます。

元に戻す/やり直しの履歴

すべての変更は、完全な元に戻すとやり直しのサポートを備えた履歴スタックに記録されます。以前の状態にいつでも戻せることを知って、自信を持って編集履歴をナビゲートします。

リアルタイムプレビュー

エディターには、変更を加えながらテンプレートをリアルタイムでレンダリングする埋め込み Player コンポーネント が含まれています。エクスポートやレンダリングをする必要なく、編集中のいつでも完全なコンポジションをプレビューします。

Player コンポーネント

@rendervid/player パッケージは、ブラウザで Rendervid テンプレートをプレビューするためのスタンドアロン React コンポーネントを提供します。

React 統合

任意の React アプリケーションにプレイヤーをインストールして埋め込みます：

import { Player } from "@rendervid/player";

function Preview({ template }) {
  return (
    <Player
      template={template}
      width={1920}
      height={1080}
      onComplete={() => console.log("Playback finished")}
    />
  );
}

キーボードショートカット

プレイヤーは、効率的なプレビューのための組み込みキーボードコントロールをサポートしています：

速度コントロール

0.25倍（1/4速度）から4倍（4倍速度）まで再生速度を調整します。スローモーション再生はフレームごとにアニメーションをレビューするのに役立ち、早送りは長いコンポジションをスキャンするのに役立ちます。

コールバックとイベント

プレイヤーは、プログラマティックコントロールのためのコールバックを公開します：

これらのコールバックを使用して、プレイヤーを外部 UI 要素、分析、またはインタラクティブエクスペリエンスと同期します。

コンポーネントギャラリー

これらのカスタムコンポーネントの例は、Rendervid のカスタムレイヤータイプで可能なことの範囲を示しています。それぞれが上記で説明したのと同じ React.createElement() パターンを使用して構築されています。

パーティクル爆発

150以上のパーティクル、設定可能な重力、色、爆発半径を持つ物理ベースのパーティクルシステム。パーティクルは中心点から生成され、リアルなモーションで外側に弧を描きます。

波の可視化

周波数データに反応するオーディオリアクティブ波パターン。設定可能な振幅、周波数、色を持つ複数の波レイヤーが、ダイナミックでオーガニックなビジュアルを作成します。

ネオンテキストエフェクト

フリッカー、パルス、カラーサイクリングを含む、アニメーションネオンライトエフェクトを持つ光るテキスト。カスタマイズ可能なグロー半径、色、アニメーション速度。

ホログラフィックインターフェース

スキャンライン、データ読み出し、グリッドオーバーレイ、アニメーション UI 要素を備えた SF にインスパイアされたホログラフィック UI。テクノロジーをテーマにした動画や未来的なイントロに最適です。

3D キューブ回転

テクスチャ付きの面とスムーズな回転を持つハードウェアアクセラレーション CSS 3D キューブ。WebGL なしでパフォーマンスの高い 3D レンダリングのために CSS の perspective と transform3d を使用します。

データ可視化ダッシュボード

アニメーション棒グラフ、折れ線グラフ、統計カウンターを備えたマルチチャートダッシュボードコンポーネント。レポート、プレゼンテーション、データストーリーテリング用にデータドリブンで設定可能です。

追加のカスタムコンポーネントの例には次のものが含まれます：

• アニメーションカウンター – イージング関数を使った数値カウントアニメーション
• プログレスリング – 設定可能な円弧と色を持つ円形プログレスインジケーター
• タイプライター – カーソルと可変速度を持つテキストタイピングアニメーション

次のステップ

• シーンとコンポジションの構造化については、Rendervid テンプレートシステム をご覧ください
• 自然言語でテンプレートを生成するには、AI 統合 を探索してください
• 最終動画のレンダリングとエクスポートについては、デプロイメントガイド を参照してください
• 高レベルの紹介については、Rendervid 概要 に戻ってください