open-animate

Open Animate — エージェント向けクリエイティブスイート

プロ仕様のモーショングラフィックスを作成し、ビジュアルアセットを生成します。作りたいものを説明するだけで、MP4 が完成します。

前提条件

このスキルは、Remotion API の基本的なパターンに関する Remotion skills を基盤としています。

npx skills add remotion-dev/skills

ワークフロー

1. プロジェクトを初期化する

npx oanim init my-video
cd my-video

2. @oanim/core を使って構成する

import { fadeUp, popIn, Background, SafeArea, palettes } from '@oanim/core';

プリセットの全リファレンスについては、references/animation-cookbook.md を参照してください。

3. プレビューする

npx remotion studio

4. MP4 にレンダリングする

npx oanim render

5. メディアアセットを生成して使用する（任意）

MCP ツール（推奨 — Cowork および MCP 対応環境で利用できます）：

ツール	用途
gen_image	テキストプロンプトから画像を生成します
edit_image	プロンプトを使って既存の画像を編集します
remove_bg	画像の背景を削除します
upscale	画像を 2 倍に拡大します
gen_video	テキストから動画を生成します（非同期。完了するまでポーリングします）
gen_audio	テキストから音声／音楽を生成します（非同期。完了するまでポーリングします）
run_model	カスタム入力を使って任意の fal.ai モデルを実行します

CLI（代替手段 — 外部への HTTP 通信が必要です）：

npx oanim assets gen-image --prompt "dark gradient abstract" --out public/bg.png
npx oanim assets run --model fal-ai/kling-video/v2.5-turbo/pro/text-to-video \
  --input '{"prompt":"cinematic abstract motion","duration":"5"}' --out public/clip.mp4
npx oanim assets run --model beatoven/music-generation \
  --input '{"prompt":"ambient electronic, no vocals","duration_in_seconds":30}' --out public/music.mp3

その後、構成で使用します。

import { Img, OffthreadVideo, Audio, staticFile } from 'remotion';

<Img src={staticFile('bg.png')} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
<OffthreadVideo src={staticFile('clip.mp4')} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
<Audio src={staticFile('music.mp3')} volume={0.25} />

機能

機能	MCP ツール	CLI コマンド
プロジェクトのひな形作成	—	oanim init
アニメーションプリセット（fadeUp、popIn、springs）	—	@oanim/core
コンポーネント（Terminal、Card、Badge、GlowOrb）	—	@oanim/core
シーンのトランジション（fadeBlur、clipCircle、wipe）	—	@oanim/core
タイポグラフィ（AnimatedCharacters、TypewriterText、CountUp）	—	@oanim/core
デザイントークン（5 種類のパレット、フォント、間隔）	—	@oanim/core
動画へのレンダリング	—	oanim render
クラウドレンダリング	—	oanim render --cloud
AI 画像生成	gen_image	oanim assets gen-image
AI 画像編集	edit_image	oanim assets edit-image
背景の削除	remove_bg	oanim assets remove-bg
画像の拡大	upscale	oanim assets upscale
AI 動画生成	gen_video	oanim assets run（動画モデル）
AI 音声生成	gen_audio	oanim assets run（音声モデル）
任意の fal.ai モデル	run_model	oanim assets run
メディアの合成	—	staticFile() を介した <Img>、<OffthreadVideo>、<Audio>

参考資料

• references/workflow.md — エージェントのステップごとのワークフロー
• references/scene-config.md — animate.json のスキーマリファレンス
• references/composition-patterns.md — 複数シーンの構成アーキテクチャ
• references/animation-cookbook.md — @oanim/core のプリセット全リファレンス
• references/asset-generation.md — AI アセット生成ガイド
• references/media-guide.md — 構成で生成済みメディアを使用する方法（Img、Video、Audio）

テンプレート

• templates/launch-video.md — 4 シーンの商品ローンチ（5 秒）
• templates/explainer.md — ステップ形式の解説動画（20 秒）
• templates/logo-reveal.md — グロー効果付きのロゴアニメーション（5 秒）
• templates/meme-caption.md — 縦型ソーシャルクリップ（6 秒）
• templates/investor-update.md — 指標ダッシュボード（15 秒）