motion について
Motion は JavaScript、React、Vue の開発者向けアニメーションライブラリで、Motion v12.29.2 のスキルリファレンスも含みます。アニメーション API、ジェスチャー、レイアウト遷移、スクロール連動エフェクトを扱います。
主な機能
- 01Motion コンポーネントと命令型 API
- 02スプリング、バリアント、タイムライン
- 03ドラッグ、ホバーなどのジェスチャー
- 04レイアウトと表示・退出アニメーション
- 05スクロール連動エフェクトと Motion Values
活用シーン
- 01画面要素へのアニメーション追加
- 02ドラッグやプレス操作の実装
- 03コンポーネントのレイアウト変更の調整
- 04スクロール連動エフェクトの作成
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/motionを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
GENERATION.mdreferences/advanced-animation-controls.mdadvanced-lazy-motion.mdadvanced-motion-config.mdadvanced-scale-corrector.mdadvanced-scroll-animations.mdadvanced-transform-template.mdadvanced-use-animate.mdbest-practices-bundle.mdcore-animation.mdcore-components.mdcore-frameloop.mdcore-javascript-animate.mdcore-motion-mini.mdcore-stagger.mdcore-transitions.mdcore-vanilla-motion-value.mdcore-vanilla-scroll.mdcore-variants.mdfeatures-in-view.mdfeatures-optimized-appear.mdfeatures-react-client.mdfeatures-resize.mdfeatures-svg-path.mdgestures-drag.mdgestures-hover-focus.mdgestures-pan.mdgestures-tap-press.mdlayout-animate-presence.mdlayout-animations.md詳細
Motion は、JavaScript、React、Vue 向けのオープンソースアニメーションライブラリです。複数のプラットフォームを第一級でサポートするシンプルな API、JavaScript とブラウザーのネイティブ API を組み合わせたハイブリッドアニメーションエンジンによる 120fps の GPU アクセラレーションアニメーション、そして TypeScript サポート、充実したテストスイート、ツリーシェイク可能なビルド、軽量なサイズなど、本番環境に対応した機能を提供します。必要な機能をすべて備えており、ジェスチャー、スプリング、レイアウトトランジション、スクロール連動エフェクト、タイムラインを利用できます。
このスキルは Motion v12.29.2 を基にしており、2026-02-01 に生成されました。
コアリファレンス
| トピック | 説明 | リファレンス |
|---|---|---|
| Motion コンポーネント | 基本的な Motion コンポーネント（motion.div、motion.svg など） | core-components |
| 基本的なアニメーション | animate プロパティ、initial、while の状態 | core-animation |
| JavaScript animate() | Vanilla の animate()、シーケンス、createScopedAnimate | core-javascript-animate |
| Vanilla scroll() | React 以外で使用する命令型の scroll() と scrollInfo() | core-vanilla-scroll |
| motionValue | React を使わずに MotionValues を作成 | core-vanilla-motion-value |
| stagger | バリアントで子要素の遅延を調整 | core-stagger |
| frame / cancelFrame | Motion のアニメーションループ | core-frameloop |
| motion/mini | 最小限のバンドルエントリーポイント | core-motion-mini |
| バリアント | 宣言型のアニメーションバリアントとオーケストレーション | core-variants |
| トランジション | アニメーションのタイミング、イージング、スプリング物理 | core-transitions |
Motion Values
| トピック | 説明 | リファレンス |
|---|---|---|
| useMotionValue | リアクティブなアニメーション用の Motion values を作成して使用 | values-motion-value |
| useSpring | 物理特性に基づくスプリング型 Motion values | values-spring |
| useTransform | 関数を使って Motion values を変換 | values-transform |
| useMotionTemplate | Motion values を文字列に結合（例：filter、boxShadow） | values-motion-template |
| useFollowValue | 任意のトランジションでソースを追従する Motion value | values-follow |
| useScroll | スクロール連動の Motion values とアニメーション | values-scroll |
| useVelocity | Motion values の速度にアクセス | values-velocity |
| useTime | 時間ベースの Motion values | values-time |
| useWillChange | 要素のアニメーション用 GPU レイヤーのヒント | values-will-change |
ジェスチャー
| トピック | 説明 | リファレンス |
|---|---|---|
| ドラッグ | 制約とコントロールを備えたドラッグジェスチャー | gestures-drag |
| パン | タッチイベントとポインターイベント用のパンジェスチャー | gestures-pan |
| タップとプレス | タップおよびプレスのジェスチャーハンドラー | gestures-tap-press |
| ホバーとフォーカス | ホバーおよびフォーカス状態のアニメーション | gestures-hover-focus |
レイアウトアニメーション
| トピック | 説明 | リファレンス |
|---|---|---|
| AnimatePresence | コンポーネントの登場と退出をアニメーション化します | layout-animate-presence |
| usePresence / useIsPresent | AnimatePresence の子要素でプレゼンス状態にアクセスします | layout-use-presence |
| usePresenceData | 子孫要素で AnimatePresence のカスタムプロパティを読み取ります | layout-presence-data |
| LayoutGroup | コンポーネント間のレイアウトアニメーションを調整します | layout-group |
| レイアウトアニメーション | layoutId を使用した自動レイアウトアニメーション | layout-animations |
| Reorder | レイアウトアニメーションを使ったドラッグによる並べ替え | layout-reorder |
| useInstantLayoutTransition | 1 フレームの間、レイアウト更新をブロックします | layout-instant-transition |
| useResetProjection | 構造変更後にレイアウトプロジェクションツリーをリセットします | layout-reset-projection |
機能
| トピック | 説明 | リファレンス |
|---|---|---|
| ビューポート内判定 | ビューポートや可視性を判定する useInView、inView()、usePageInView | features-in-view |
| リサイズ | ウィンドウや要素のサイズを監視する resize() | features-resize |
| 最適化された表示 | ハンドオフに対応した SSR フレンドリーな表示アニメーション | features-optimized-appear |
| SVG パス | パスアニメーション用の pathLength、pathOffset、pathSpacing | features-svg-path |
| motion/client | Next.js の "use client" とツリーシェイキング可能なコンポーネント | features-react-client |
ユーティリティ
| トピック | 説明 | リファレンス |
|---|---|---|
| useReducedMotion | 視差効果を減らす設定に関するフック | utils-reduced-motion |
| useAnimationFrame | Motion のループを使ったフレーム同期コールバック | utils-animation-frame |
| useCycle | 状態のリストを順に切り替えます | utils-cycle |
| useMotionValueEvent | モーション値のイベントを購読します | utils-motion-value-event |
| delay | フレーム同期の遅延実行 | utils-delay |
| interpolate | 入力範囲を出力にマッピングします | utils-interpolate |
| useDomEvent | DOM イベントリスナーを登録します | utils-dom-event |
| useInstantTransition | 更新中にレイアウトアニメーションをブロックします | utils-instant-transition |
| calcLength / createBox / distance | プロジェクションの幾何情報と距離 | utils-path-geometry |
応用
| トピック | 説明 | リファレンス |
|---|---|---|
| アニメーションコントロール | useAnimation を使ったプログラムによるアニメーション制御 | advanced-animation-controls |
| useAnimate | 命令型アニメーション API | advanced-use-animate |
| LazyMotion | パフォーマンス向上のためのコード分割アニメーション | advanced-lazy-motion |
| MotionConfig | グローバル設定と視差効果の軽減 | advanced-motion-config |
| スクロールアニメーション | スクロールに連動するアニメーションと視差効果 | advanced-scroll-animations |
| transformTemplate | カスタム変換出力 | advanced-transform-template |
| addScaleCorrector | レイアウトプロジェクションのスケール補正 | advanced-scale-corrector |
ベストプラクティス
| トピック | 説明 | 参照 |
|---|---|---|
| バンドルサイズ | エントリーポイントと最適化戦略 | best-practices-bundle |
コメント
Markdown 対応