mcpField
A
animate

animate

github.com/onewave-aiクリエイティブ・メディア398403 回インストール1 週間前に更新
リポジトリ

animate について

animateは、自然言語の説明からアニメーション動画やモーショングラフィックスを作るスキルです。単体で動作するVite + React + Framer Motionプロジェクトを出力し、内容に合わせてシーンを計画して技術スタックを選び、ブラウザーでプレビューします。

主な機能

  1. 01説明からシーンを計画
  2. 02アニメーション技術スタックの選択
  3. 03Reactシーンコンポーネントの生成
  4. 04色とタイポグラフィの調整
  5. 05ブラウザーでのビルドとプレビュー

活用シーン

  1. 01製品紹介アニメーションの作成
  2. 02プレゼンやマーケティング用の映像制作
  3. 03パーティクルやパターン表現の生成
  4. 043Dシーンやロゴのアニメーション化

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/onewave-ai/claude-skills --skill animate

インストール後、Claude Code で/animateを入力して読み込まれたか確認します。

詳細

アニメーションジェネレーター

自然言語による説明から、アニメーション動画やモーショングラフィックスを作成します。ブラウザーで再生できる、単体で動作する Vite + React + Framer Motion プロジェクトを出力します。

ワークフロー

ステップ 1: リクエストを解析する

ユーザーの説明をシーン構成に分解します。

  • 3〜7 個のシーンを作成し、それぞれの長さを 3〜5 秒にします
  • ストーリーの流れを特定します。ヒーロー／導入、課題、解決策、機能、CTA／締めくくり
  • ブランドや雰囲気に合ったカラーパレットとタイポグラフィを選びます
  • ユーザーのアニメーションの説明には $ARGUMENTS を使用します
ステップ 2: アニメーションスタックを選択する

リクエストに応じて、最適なアプローチを自動検出します。

リクエストの種類スタック使用する場面
製品紹介、プレゼンテーション、マーケティングFramer Motion（デフォルト）テキスト、アイコン、トランジションを含むシーンベースの構成
ジェネレーティブアート、パーティクル、パターンp5.jsクリエイティブ／アルゴリズムによるビジュアル
3D オブジェクト、環境、製品のレンダリングThree.js + react-three-fiber3D シーンが必要な場合
シンプルなテキスト／ロゴアニメーションCSS animations only最小限で、重い依存関係を必要としない場合

リクエストで明確に別のものが必要とされていない限り、デフォルトで Framer Motion を使用します。

ステップ 3: プロジェクトをスキャフォールドする
  1. ディレクトリを作成します: ~/animations/[project-name]/
  2. スキャフォールドスクリプトを実行します: bash ~/.claude/skills/animate/scripts/scaffold.sh [project-name] [stack]
  3. ~/.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 環境変数が利用可能な場合:

  1. API の詳細について references/gemini-integration.md を読み込みます
  2. ユーザーの説明を Gemini 3.1 Pro に送り、以下を依頼します。
    • 説明と推奨トランジションを含むシーン構成
    • CSS 変数としてのカラーパレット
    • 各シーンのコピー／見出し
    • 該当する場合は SVG グラフィック
  3. Gemini の出力をシーン生成に活用します
  4. API キーがない場合はこのステップを省略します。クリエイティブな判断はすべて Claude が直接行います
ステップ 8: ビルドしてプレビューする
cd ~/animations/[project-name]
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 — ゆるやかに浮遊する効果

重要なルール

  1. どの解像度でもアニメーションがきれいに見えるよう、サイズ指定には必ず vw 単位を使います
  2. 各シーンは 3～5 秒にし、動画全体は 15～30 秒にします
  3. AnimatePresence mode="wait" を使い、次のシーンが始まる前に現在のシーンを終了させます
  4. すべてのシーンに背景処理（グラデーション、画像、またはアニメーションする図形）を含めます
  5. リストやグリッドには、開始時間をずらしたアニメーションを使います（staggerChildren: 0.1-0.2）
  6. アセットが重い場合は、読み込み状態を含めます
  7. プロジェクトは完全に自己完結している必要があります。npm パッケージ以外の外部依存関係は使用しないでください
  8. 生成するコードやコンテンツ内では、絵文字を絶対に使用しないでください

コメント

Markdown 対応