rendiv-video

Rendiv Video Skills

Rendiv のコードを扱う際は、コンポジションの作成、要素のアニメーション、メディアの埋め込み、出力のレンダリングなど、常にこれらのスキルを活用してください。

コアとなる考え方

Rendiv は、動画をフレーム番号の純粋関数として扱います。位置、透明度、色、スケールなど、すべての視覚プロパティは useFrame() を介して現在のフレームから導き出されます。タイムラインのステートマシンや命令型のキーフレーム API はありません。フレームを受け取り JSX を返す React コンポーネントを作成すれば、あとは rendiv が処理します。

import { useFrame, interpolate } from '@rendiv/core';

export const FadeIn: React.FC = () => {
  const frame = useFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: 'clamp' });
  return <div style={{ opacity }}>Hello rendiv</div>;
};

主な原則

• すべてのアニメーションは useFrame() によって制御する必要があります。CSS アニメーションとトランジションは禁止です。これらは実時間に基づいて動作するため、フレームごとのレンダリング中に同期がずれます。
• 線形マッピングには interpolate() を、物理ベースの動きには spring() を使用します。
• ネイティブ HTML 要素の代わりに、@rendiv/core の <Img>、<Video>、<Audio>、<AnimatedImage> を使用してください。これらは holdRender を介してレンダリングのライフサイクルに統合されます。
• コンポジションは <Composition> と <Still> を介して宣言的に登録します。これらは null をレンダリングし、フレームワークにメタデータのみを提供します。

クイックスタート

最小限の rendiv プロジェクトのエントリーポイント：

// FadeIn.tsx — composition component
import { useFrame, interpolate, CanvasElement } from '@rendiv/core';

export const FadeIn: React.FC = () => {
  const frame = useFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: 'clamp' });
  return (
    <CanvasElement id="FadeIn">
      <div style={{ opacity }}>Hello rendiv</div>
    </CanvasElement>
  );
};

// index.tsx — entry point
import { setRootComponent, Composition } from '@rendiv/core';
import { FadeIn } from './FadeIn';

const Root: React.FC = () => (
  <>
    <Composition
      id="FadeIn"
      component={FadeIn}
      durationInFrames={90}
      fps={30}
      width={1920}
      height={1080}
    />
  </>
);

setRootComponent(Root);

MP4 にレンダリングするには、rendiv render src/index.tsx FadeIn out/fade-in.mp4 を実行します。

トピックガイド

作業内容に応じて、該当するルールファイルを参照してください。

作業	ルールファイル
interpolate、spring、Easing、blendColors を使ったアニメーション	animation.md
コンポジション、スティル、フォルダー、エントリーポイントの設定	composition-setup.md
Sequence、Series、Loop、Freeze による時間のシフト	sequencing-and-timing.md
z オーダーとタイムラインのオーバーライドの制御	timeline-overrides.md
画像、動画、音声、GIF、iframe の埋め込み	media-components.md
再生制御付きのアニメーション GIF のレンダリング	gif.md
字幕、SRT の解析、単語のハイライトの追加	captions.md
holdRender、環境モード、レンダリングパイプラインの理解	render-lifecycle.md
TransitionSeries を使ったシーン間のアニメーション	transitions.md
SVG シェイプの生成、またはパスの操作	shapes-and-paths.md
ノイズ駆動の動きやモーションブラーの追加	procedural-effects.md
文字、単語、行ごとのテキストアニメーション	text-animation.md
視覚効果と CSS フィルターの適用	visual-effects.md
Google Fonts またはローカルフォントファイルの読み込み	typography.md
Lottie アニメーションの埋め込み	lottie.md
Three.js / R3F による 3D シーンの追加	three.md
CLI、Studio、Player の使用	cli-and-studio.md

重要な制約

1. CSS アニメーションやトランジションは使用しないでください。 すべて useFrame() によるフレーム駆動にする必要があります。
2. rendiv のメディアコンポーネント（<Img>、<Video>、<Audio>、<AnimatedImage>）を使用し、ネイティブ HTML 要素は使用しないでください。これらのコンポーネントは holdRender を自動的に管理します。
3. コンポジションのコンテンツは必ず <CanvasElement id="..."> で囲んでください。 これによりコンポジションが自己完結し、別のコンポジション内にネストされた場合もタイムラインのオーバーライドが正しく機能します。id は <Composition> の id と一致させる必要があります。
4. <Composition> は null をレンダリングします。 <Composition> はメタデータを登録するだけです。実際のコンポーネントをレンダリングするのは Player、Studio、Renderer であり、<Composition> 自体ではありません。
5. setRootComponent は一度だけ呼び出せます。 これは、すべてのコンポジションを定義するルートを登録します。
6. interpolate() と blendColors() の inputRange は単調非減少でなければなりません。 どちらの範囲も長さが等しく、2 つ以上の要素を含む必要があります。
7. <Series.Sequence> は <Series> の直接の子でなければなりません。 <Series> の親要素の外でレンダリングすると、エラーが発生します。
8. morphPath ではセグメントを一致させる必要があります。 2 つのパスは、セグメント数とコマンドの種類が一致していなければなりません。

パッケージ

パッケージ	用途
@rendiv/core	フック、コンポーネント、アニメーション、コンテキスト
@rendiv/player	ブラウザー用 <Player> コンポーネント
@rendiv/renderer	Playwright + FFmpeg によるレンダリング
@rendiv/bundler	Vite ベースのプロジェクトバンドラー
@rendiv/cli	CLI：render、still、compositions、studio
@rendiv/studio	レンダリングキューを備えた Studio 開発サーバー
@rendiv/transitions	フェード、スライド、ワイプ、フリップ、clockWipe を備えた TransitionSeries
@rendiv/shapes	SVG シェイプジェネレーター（円、長方形、星、多角形など）
@rendiv/paths	SVG パスの解析、測定、モーフィング、ストロークの表示
@rendiv/noise	Simplex ノイズ（2D、3D、4D）
@rendiv/fonts	holdRender によるローカルフォントの読み込み
@rendiv/google-fonts	holdRender による Google Fonts の読み込み
@rendiv/motion-blur	MotionTrail および ShutterBlur コンポーネント
@rendiv/gif	速度制御とフィットモードに対応したアニメーション GIF の再生
@rendiv/captions	SRT/Whisper の解析、単語ごとのハイライト、キャプションのオーバーレイ
@rendiv/text	アニメーションテキスト：文字・単語・行ごとの分割、スタッガー、プリセット
@rendiv/effects	ビジュアルエフェクト：組み合わせ可能な CSS フィルター、グロー、グリッチ、ビネット
@rendiv/lottie	lottie-web によるフレーム精度の Lottie アニメーション
@rendiv/three	コンテキストブリッジングを使用した React Three Fiber による 3D シーン

アセットの例

• アニメーション付き棒グラフ — Spring でアニメーションする棒と、時間差をつけた登場
• テキストの表示 — 文字ごとのテキストアニメーション