remotion-render
React/Remotionコードから動画をレンダリング
こちらからも入手できます: inference-sh-8,inference-sh-7
Remotionを使用してReact TSXコードをプロフェッショナルなMP4動画に変換します。開発者、コンテンツクリエイター、自動化ワークフロー向けのプログラム可能な動画生成。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「remotion-render」を使用しています。 アニメーション付きテキストでシンプルなRemotion動画をレンダリング
期待される結果:
スキルはinference.sh APIを呼び出し、動画を返します。ユーザーはレンダリングされたアニメーションを含むダウンロード可能なMP4を受け取ります。
「remotion-render」を使用しています。 0から100へのカウンターアニメーションを作成
期待される結果:
レンダリング中に進捗更新がストリーミングされ、その後アニメーションカウンターを含む最終的なMP4が配信されます。
「remotion-render」を使用しています。 カスタムプロップスで動画を生成
期待される結果:
Remotionコンポーネントはプロップスを受け取り、提供されたtitleとsubtitleを持つパーソナライズされた動画をレンダリングします。
セキュリティ監査
安全All 43 static findings are false positives. External commands (infsh app run) are hardcoded service invocations, not arbitrary execution. Network requests go to the legitimate inference.sh rendering service. No malicious patterns detected.
リスク要因
⚙️ 外部コマンド (31)
🌐 ネットワークアクセス (8)
品質スコア
作れるもの
開発者向けドキュメント動画
動画エディターを使用するのではなく、Reactコンポーネントを作成することでチュートリアルやドキュメント動画の作成を自動化
ソーシャルメディアコンテンツ
コードテンプレートからアニメーション付きソーシャルメディア投稿、アナウンス、プロモーション動画を生成
データ駆動型動画自動化
動的なプロップスをRemotionコンポーネントに渡すことで、データ、メトリクス、分析を可視化する動画を作成
これらのプロンプトを試す
remotion-renderスキルを使用して動画をレンダリングしてください。30fps、1920x1080解像度で3秒かけてフェードインする中央配置的テキスト「Hello World」のシンプルなアニメーションを作成してください。
remotion-renderを使用して、60fpsで5秒間で0から100%へのアニメーション進捗カウンターを作成してください。カウンターは黒い背景に白い大きなテキストで中央に表示されます。
remotion-renderで3つのテキスト要素が次々とフェードインする動画を作成してください。各テキストは1秒間表示され、シーケンスアニメーションを作成します。
titleとsubtitleを受け取るremotion-render動画をレンダリングしてください。title='Welcome'とsubtitle='Created with AI'を渡して、ブランド化されたオープニングスライドを生成します。
ベストプラクティス
- シンプルなアニメーションから始め、Remotion APIを学ぶにつれて徐々に複雑さを追加
- 長い動画にはレンダリング進捗を追跡するためにストリーミングを使用
- エラーを早期に検出するためにレンダリング前にRemotion StudioでTSXコードをテスト
- 開発中は動画の長さを短くしてレンダリング時間を短縮
回避
- ストリーミングなしで非常に長い動画（60秒以上）をレンダリングしようとしない - 進捗看不到達
- レンダリングタイムアウトを超える複雑なネストされたアニメーションを避ける
- 非常に大量のデータをプロップスとして渡さない - プロップスの値はシンプルに保つ
- レンダリング中に読み込みに失敗する可能性のある外部画像やアセットの使用を避ける