ドキュメントへのインタラクティブデモの追加
インタラクティブデモは、@remotion/playerを使用してRemotionコンポジションをドキュメントページ内に直接レンダリングします。これらはpackages/docs/components/demos/に配置されます。
手順
-
コンポーネントを作成：
packages/docs/components/demos/に（例：MyDemo.tsx）標準のReactコンポーネントを作成し、useCurrentFrame()やuseVideoConfig()などのRemotionフックを使用します。 -
デモを登録：
packages/docs/components/demos/types.tsで以下の操作を行います。- コンポーネントをインポートする
- 次のフィールドを持つ
DemoTypeオブジェクトをエクスポートする:id:<Demo type="..." />で使用される一意の文字列comp: ReactコンポーネントcompWidth/compHeight: キャンバスサイズ（例：1280x720）fps: フレームレート（通常30）durationInFrames: アニメーションの長さautoPlay: 自動再生するかどうかoptions: インタラクティブコントロールの配列（空の[]も可）
-
デモ配列に追加：
packages/docs/components/demos/index.tsxで以下の操作を行います。./typesからデモ定数をインポートするdemos配列に追加する
-
MDXで使用：
<Demo type="your-id" />と記述します。
オプション
オプションは、プレーヤーの下にインタラクティブなコントロールを追加します。各オプションにはnameとoptional（'no'、'default-enabled'、または'default-disabled'）が必要です。
サポートされているタイプ:
type: 'numeric'—min、max、step、default付きのスライダーtype: 'boolean'—default付きのチェックボックスtype: 'enum'—values配列とdefault付きのドロップダウンtype: 'string'—default付きのテキスト入力
オプションの値は、inputPropsとしてコンポーネントに渡されます。通常のReactプロパティとしてアクセスします。
登録例
const myDemo: DemoType = {
comp: MyDemoComp,
compHeight: 720,
compWidth: 1280,
durationInFrames: 150,
fps: 30,
id: 'my-demo',
autoPlay: true,
options: [],
};