製品デモ動画を作るのは通常、1週間のプロジェクトです：エディタでフェード、ワイプ、キネティックタイトルを調整し、キーフレームと格闘し、見た目が良くなるまで何度も書き出しを繰り返します。
Remocnはそれを同日のタスクにするために存在します。Remotion ↗ — Reactベースの動画フレームワーク — のためのコピーペーストコンポーネントライブラリで、プロダクションレディなアニメーション、トランジション、背景、シーンを1コマンドで追加でき、その後は完全に所有できます。
Remocnとは#
RemocnはRemotionで動画を構築するためのコピーペーストコンポーネントライブラリです。すべてのフェード、ワイプ、キネティックタイトルをゼロから書く代わりに、npx shadcn addで洗練されたプリミティブをプロジェクトに追加すれば、そのコードはあなたのものになります。
今日のうちに製品デモ動画を出荷する必要があるソロビルダーと小規模チームのために作られています。
Remocnの利点#
プロダクションレディなコード#
すべてのコンポーネントはuseCurrentFrame()、interpolate()、spring()を正しく使用しています。フレームが変わるとレンダリングを壊すMath.random()トラップはありません。コンポーネントはRemotionの決定論的レンダーパイプラインで確実に動作するよう設計されています。
コードを所有する#
コンポーネントは依存関係としてインストールされるのではなく、プロジェクトにコピーされます。ブラックボックスはありません — 自由に調整できます。色、タイミング、イージング、レイアウトの変更 — すべてコードベースに直接あります。
ライブプレビュー#
各コンポーネントページには実際の@remotion/playerがマウントされ、フレーム単位でスクラブできます。追加する前にアニメーションが何をするかを正確に確認できます — インストール後の驚きはありません。
インストール方法#
Remotionが前提条件です。まだ持っていなければ、まずRemotionプロジェクトをセットアップ：
npx create-video@latest次にレジストリから任意のコンポーネントを追加：
npx shadcn@latest add @remocn/blur-revealコンポーネントとその依存関係はプロジェクトに直接コピーされ、調整可能な状態になります。
AIでセットアップ#
RemocnはAIコーディングエージェントと連携するように設計されています。必要なのは2つ：AIコーディングエージェントと空のフォルダ。
- エージェントを入手（Claude Code、ChatGPT、OpenCodeなどすべて動作）
- 空のフォルダでエージェントを開き、以下を貼り付け：
Set up a new Remotion video project in this folder, then install the remocn agent skill:
npx skills add Remocn/remocn --yes. When you’re done, start the preview studio so I can watch the video while we work
空の動画プレイヤーでブラウザタブが開いたら準備完了です。ガイドを選んで、自分流にアレンジしましょう。
このワークフローはモダンな「AIネイティブ」開発ループの良い例です：エージェントがプロジェクトをスキャフォールドし、スキルをインストールし、プレビュースタジオを起動し、あなたがリアルタイムで見ながら動画を反復します。
ライブラリの内容#
Remocnレジストリには、以下のプロダクションレディコンポーネントが含まれます：
- トランジション — フェード、ワイプ、シーン遷移
- アニメーション — キネティックタイトル、リビール、モーションプリミティブ
- 背景 — アニメーション背景シーン
- シーン — 再利用可能な完全なシーンテンプレート
それぞれshadcnスタイルのレジストリエントリです：追加して、所有して、カスタマイズ。
比較#
| 側面 | Remocn | ゼロから書く | After Effects |
|---|---|---|---|
| 最初の動画までの時間 | 同日 | 数日〜数週間 | 数週間〜数ヶ月 |
| コード所有 | ✅ 完全（コピペ） | ✅ 完全 | ❌ バイナリプロジェクト |
| 決定論的レンダリング | ✅ Remotionネイティブ | ⚠️ 人次第 | ❌ キーフレーム地獄 |
| バージョン管理 | ✅ Gitフレンドリー | ✅ Gitフレンドリー | ❌ バイナリ差分 |
| AIフレンドリー | ✅ エージェントスキル付き | ⚠️ 変動 | ❌ |
| コスト | ✅ 無料、オープンソース | ✅ 無料 | ❌ サブスクリプション |
重要な理由#
動画はマーケティングで最もコンバージョン率の高いメディアですが、製品デモ動画の制作は常に遅く、高価で、反復が困難でした。Remocnはその摩擦を取り除きます：
- 同日出荷 — 1週間のキーフレーム作業なしで洗練されたデモ動画
- 完全なコード所有 — 依存関係のロックインなし、すべて調整可能
- 決定論的でテスト可能 — 動画はコードなので、バージョン管理、レビュー、再構築が可能
- AIネイティブワークフロー — 付属のエージェントスキルで「製品デモを作って」が1プロンプトで実現
製品チーム、ファウンダー、ソロビルダーにとって、Remocnは動画制作をプロジェクトからタスクに変えます。