Motion.dev Animations Skill — インストール & ライブデモ

なぜ使うのか

主な機能

アニメーション/Motion.dev プロンプトで自動アクティブ化
入口、スクロール、ジェスチャー、マイクロ、レイアウトのアニメーションパターン
デフォルトで、優先モーションを優先します。
60fps+、<50KB バンドル、ゼロレイアウトシフトをターゲット
GPU アクセラレーションによる変換。レイアウト小道具によるジャンクなし

ライブデモ

実際の動作

motion-dev-animations-skill.replay ▶ 準備完了

0/0

インストール

作者のリポジトリ · Claude Skills の公式ドキュメント

ユースケース

実用的な使い方： Motion.dev Animations Skill

スタッガー付きのヒーローフェードアップ入口を追加

👤 フロントエンド開発者によるランディングページの調整 ⏱ ~15 min beginner

使うタイミング： ヒーローが静止しているように感じられるため、洗練されたロードアニメーションが必要です。

フロー

効果を説明する

ヒーローの H1、小見出し、および CTA に千鳥状のフェードアップ入り口を追加します。 60msのスタッガー。✓ コピーしました

→ motion.div を使用した Motion.dev コード、トランジションスプリング、スタッガーによる遅延
モーションを減らしたフォールバック

prefers-reduced-motion がアニメーションをきれいにスキップしていることを確認してください。✓ コピーしました

→ useReducedMotion フックまたは CSS メディアクエリが適用されました

結果： アクセシビリティを犠牲にすることなく、生きていると感じられるヒーロー。

注意点

レイアウトをトリガーするアニメーションプロパティ (幅、上) — 代わりに変換 (変換/スケール) を使用します — GPU アクセラレーション、CLS なし

組み合わせ： magic-ui-mcp

スクロールトリガーによるリビールと視差を構築する

👤 デザイン先進的なフロントエンド開発者 ⏱ ~25 min intermediate

使うタイミング： 長い形式のランディングページには、スクロールすると展開されるセクションが必要です。

フロー

スクロールで表示

各セクションがビューポートに入るときにアニメーション化します (1 回、30% のしきい値)。✓ コピーしました

→ useInView を 1 回 + 金額で使用
視差前景

装飾的な前景 SVG に微妙な視差オフセットを追加します。✓ コピーしました

→ useScroll + useTransform による、scrollYProgress から y へのマッピング

結果： 気を散らすことなく深みを加えるスクロールエクスペリエンス。

注意点

乗り物酔いの原因となる視差 — オフセットを小さく保ち、prefers-reduced-motion の下では完全にスキップします

ホバーリフトを備えたドラッグ可能な磁気カードを作成する

👤 インタラクションデザイナー / フロントエンド開発者 ⏱ ~20 min intermediate

使うタイミング： 製品カードにはマイクロインタラクションの磨きが必要です。

フロー

ホバーリフト

ホバー時: 4 ピクセルを持ち上げ、微妙なシャドウスケール。休暇から春に戻る。✓ コピーしました

→ その間スプリングでホバリングします。 GPU に適した変換
磁気抵抗

弾性境界を使用してドラッグ可能にします。dragElastic 0.15 を使用します。✓ コピーしました

→ ドラッグ + ドラッグConstraints + ドラッグElastic を適切に設定

結果： パフォーマンスコストのない楽しいカードインタラクション。

レイアウトを使用してリストの並べ替えをアニメーション化する

👤 タスクボード/ギャラリーを構築するフロントエンド開発者 ⏱ ~25 min intermediate

使うタイミング： リストの並べ替えは不快に感じます。スムーズな移行が必要です。

フロー

アイテムのレイアウトを有効にする

レイアウトアニメーションをリスト項目に追加します。アニメーションの出入りも可能です。✓ コピーしました

→ <motion.li レイアウト> + AnimatePresence
動作の軽減

prefers-reduced-motion でレイアウトアニメーションを無効にします。✓ コピーしました

→ 条件が適用されます。リクエストしたユーザーのインスタント再注文

結果： 物理的な再注文ですが、ユーザーの好みを尊重します。

組み合わせ

他のMCPと組み合わせて10倍の力を

motion-dev-animations-skill + magic-ui-mcp

事前に構築されたコンポーネントには Magic UI、カスタムビットには motion.dev

ロゴには Magic UI のマーキーを使用します。以下のカスタムスクロール視差のmotion.dev。✓ コピーしました

motion-dev-animations-skill + claude-design-auditor-skill

モーションを監査してモーションを軽減するサポート

アニメーションを追加した後、scope=motion を指定して監査し、モーションの減少による回帰を検出します。✓ コピーしました

motion-dev-animations-skill + claude-code-design-skills

Figma からコードへ + アニメーションを 1 つのフローで実行

Figma フレームを変換します。次に、指定されたホバーアニメーションと入口アニメーションを追加します。✓ コピーしました

ツール

このMCPが提供する機能

ツール	入力	呼び出すタイミング	コスト
motion-dev (SKILL)	describe the animation (element + intent + constraints)	アニメーションコードが必要なときはいつでも。アクセシビリティとパフォーマンスの制約付き	0

コストと制限

運用コスト

APIクォータ: なし
呼び出しあたりのトークン: コードとしては小さい。複雑なコンポーネントをダンプする場合にのみ大きくなります
金額: 無料
ヒント: アニメーションの意図をしっかりと説明してください。「60 ミリ秒のスタッガー、200 ミリ秒の継続時間によるフェードアップ」が「美しくする」よりも優れています。

セキュリティ

権限、シークレット、影響範囲

認証情報の保管： なし

データ送信先： スキルによるものはありません。ネットワークは関係ありません

生成されたアニメーションコードの安全性は、レビューによって決まります。出荷前に、モーションの削減とレイアウトプロップの選択を確認してください。

トラブルシューティング

よくあるエラーと対処法

スクロール上のジャンク

レイアウトの小道具 (幅/上部) ではなく、変換をアニメーション化していることを確認してください。 will-change は慎重に使用してください。

確認： Chrome DevTools → Performance → layout shift count

モーションを減らすとアニメーションが無視される

useReducedMotion でラップし、アニメーションバリアントを短縮します。

確認： System → Motion preferences → reduce motion; reload

モーション追加後の大きなバンドル

「motion/react」から必要なものだけをインポートします。すべてを再エクスポートすることは避けてください。

確認： Bundle analyzer on the chunks

代替案

Motion.dev Animations Skill 他との比較

代替案	代わりに使う場面	トレードオフ
magic-ui-mcp	カスタムモーションではなく、事前に構築されたアニメーションコンポーネントが必要な場合	カスタムが減り、導入が早くなる
cc-frontend-skill	特に Motion.dev ではなく、一般的なフロントエンドのガイダンスが必要な場合	アニメーション中心ではない
excalidraw-skill	Web アニメーションではなく図が必要です	別の問題

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る