アニメーションジェネレーター は何をしますか？
自然言語の説明からアニメーションビデオとモーショングラフィックスを作成します。ブラウザで再生されるスタンドアロンのVite + React + Framer Motionプロジェクトを出力します。
ワークフロー
ステップ1: リクエストの解析
ユーザーの説明をシーンプランに分解します:
- 3〜7シーン、各3〜5秒
- ストーリーアークを特定: ヒーロー/イントロ、問題、解決策、機能、CTA/アウトロ
- ブランド/雰囲気に合ったカラーパレットとタイポグラフィを選択
$ARGUMENTSをユーザーのアニメーション説明に使用する
ステップ2: アニメーションスタックの選択
リクエストに基づいて最適なアプローチを自動検出:
| リクエストタイプ | スタック | 使用するタイミング |
|---|---|---|
| 製品イントロ、プレゼンテーション、マーケティング | Framer Motion (デフォルト) | テキスト、アイコン、トランジションを伴うシーンベース |
| ジェネラティブアート、パーティクル、パターン | p5.js | クリエイティブ/アルゴリズム的なビジュアル |
| 3Dオブジェクト、環境、製品レンダリング | Three.js + react-three-fiber | 3Dシーンが必要な場合 |
| シンプルなテキスト/ロゴアニメーション | CSSアニメーションのみ | 最小限、重い依存関係なし |
リクエストが明らかに他のものを必要としない限り、デフォルトでFramer Motionを使用します。
ステップ3: プロジェクトのスキャフォールド
- ディレクトリを作成:
~/animations/[プロジェクト名]/ - スキャフォールドスクリプトを実行:
bash ~/.claude/skills/animate/scripts/scaffold.sh [プロジェクト名] [スタック] ~/.claude/skills/animate/assets/template-files/からプロジェクトにテンプレートファイルをコピー
ステップ4: シーンコンポーネントの生成
アニメーションプリセットとシーンパターンのリファレンスを参照:
references/animation-presets.md— 利用可能なすべてのトランジション、スプリング、イージングreferences/scene-patterns.md— シーンコードパターンの例
各シーンについて、client/src/components/video/video_scenes/ にReactコンポーネントを作成:
- シーントランジションプリセット（fadeBlur、scaleFade、slideLeft、splitHorizontal、morphExpandなど）を使用した
motion.divを使用 - コンテンツの段階的表示には
containerVariantsとitemVariantsを使用 - レスポンシブサイズには
vw単位を使用（任意の解像度で動作） - テーマ設定にはCSS変数（
var(--color-accent)、var(--color-bg-dark)など）を使用 - 視覚要素にはLucideアイコンを使用
- 曇りガラスカードには
.glass-panelクラスを使用 - グラデーションテキストには
.text-gradientと.text-gradient-accentを使用
ステップ5: VideoTemplateの生成
client/src/components/video/VideoTemplate.tsx を作成:
- すべてのシーンコンポーネントをインポート
SCENE_DURATIONSオブジェクトを定義（シーン名 -> ミリ秒）useVideoPlayerフックを使用してシーンの進行を管理- スムーズなトランジションのために
AnimatePresence mode="wait"でシーンをラップ - 各シーンは
currentSceneインデックスに基づいて条件付きでレンダリング
ステップ6: テーマのカスタマイズ
client/src/index.css を適切な色で更新:
- ユーザーがブランドカラーを指定した場合、CSS変数を更新
- 雰囲気に合ったフォントを選択（テクノロジー系にはSpace Grotesk、エレガント系にはPlayfair Displayなど）
- パレットに合わせてグラデーションとグロウスタイルを更新
ステップ7: Gemini 3.1 Proによる拡張（オプション）
GEMINI_API_KEY 環境変数が利用可能な場合:
references/gemini-integration.mdを参照してAPIの詳細を確認- ユーザーの説明をGemini 3.1 Proに送信し、以下を依頼:
- 説明と推奨トランジションを含むシーン分割
- CSS変数としてのカラーパレット
- 各シーンのコピー/見出し
- 該当する場合はSVGグラフィック
- Geminiの出力をシーン生成に使用
- APIキーがない場合、このステップをスキップ — Claudeがすべてのクリエイティブな決定を直接処理
ステップ8: ビルドとプレビュー
cd ~/animations/[プロジェクト名]
npm install
npm run dev
ユーザーにアニメーションが http://localhost:5173 で実行されていることを伝え、ブラウザで開く。
シーントランジションリファレンス（クイック）
ストーリービートに合ったトランジションを選択:
- fadeBlur — ソフトなイントロ/アウトロ、夢のような表示
- scaleFade — 自信に満ちた表示、製品ショーケース
- slideLeft/slideRight — シーケンシャルな進行、タイムラインフロー
- splitHorizontal/splitVertical — ドラマチックな表示、ビフォー/アフター
- morphExpand — グランドフィナーレ、CTA画面
- clipCircle — 注目を集める、スポットライト効果
- perspectiveFlip — カードフリップ、視点の変更
- wipe — クリーンなトランジション、方向性のあるフロー
- zoomThrough — 没入感のある、前向きの勢い
- crossDissolve — 優しい、感情的なトランジション
エレメントアニメーションリファレンス（クイック）
- popIn — アイコン/バッジ用の弾むスケールエントランス
- fadeUp/fadeDown — 微妙なコンテンツ表示
- slideInLeft/slideInRight — 方向性のあるコンテンツ
- blurIn — ソフトフォーカス表示
- elasticScale — 遊び心のある、エネルギッシュなエントランス
- perspectiveRotateIn — 3Dカード表示
- pulse — ループする注目喚起
- float — 優しい浮遊効果
重要なルール
- サイズ設定には常に
vw単位を使用し、アニメーションが任意の解像度で見栄えするようにする - 各シーンは3〜5秒に保つ — 合計ビデオは15〜30秒
AnimatePresence mode="wait"を使用して、1つのシーンが終了してから次のシーンが開始するようにする- すべてのシーンに背景処理（グラデーション、画像、またはアニメーション形状）が必要
- リストとグリッドには段階的アニメーションを使用（staggerChildren: 0.1〜0.2）
- アセットが重い場合はローディング状態を含める
- プロジェクトは完全に自己完結型である必要がある — npmパッケージ以外の外部依存関係はなし
- 生成されたコードやコンテンツのどこにも絵文字を使用しない