motion
JavaScriptおよびReact、Vue向けのMotionアニメーションライブラリ。アニメーション、ジェスチャー、レイアウトトランジション、スクロール連動エフェクトの作成や、モーション値・アニメーション制御を扱う際に使用します。
description の原文を見る
Motion animation library for JavaScript, React and Vue. Use when creating animations, gestures, layout transitions, scroll-linked effects, or working with motion values and animation controls.
SKILL.md 本文
Motionは、JavaScript、React、Vueのためのオープンソースアニメーションライブラリです。複数のプラットフォームに対応した簡潔なAPIを提供し、JavaScriptとネイティブブラウザAPIを組み合わせたハイブリッドアニメーションエンジンで120fps GPU高速化アニメーションを実現します。TypeScriptサポート、充実したテストスイート、ツリーシェイク可能なビルド、小さなフットプリントなど、本番環境対応の機能を備えています。ジェスチャー、スプリング、レイアウトトランジション、スクロール連動エフェクト、タイムラインなど、必要な機能がすべて揃っています。
このスキルはMotion v12.29.2に基づいており、2026-02-01に生成されました。
コア リファレンス
| トピック | 説明 | リファレンス |
|---|---|---|
| Motion コンポーネント | 基本的なモーションコンポーネント (motion.div, motion.svg など) | core-components |
| 基本的なアニメーション | animate prop、initial、while states | core-animation |
| JavaScript animate() | Vanilla animate()、シーケンス、createScopedAnimate | core-javascript-animate |
| Vanilla scroll() | 非React向けのimperative scroll()とscrollInfo() | core-vanilla-scroll |
| motionValue | Reactなしでモーションバリューを作成 | core-vanilla-motion-value |
| stagger | バリアントで子要素の遅延をオーケストレート | core-stagger |
| frame / cancelFrame | Motionのアニメーションループ | core-frameloop |
| motion/mini | 最小限のバンドルエントリーポイント | core-motion-mini |
| Variants | 宣言的なアニメーションバリアントとオーケストレーション | core-variants |
| Transitions | アニメーションのタイミング、イージング、スプリングフィジックス | core-transitions |
モーションバリュー
| トピック | 説明 | リファレンス |
|---|---|---|
| useMotionValue | リアクティブアニメーション用のモーションバリューを作成・使用 | values-motion-value |
| useSpring | フィジックスを備えたスプリングベースのモーションバリュー | values-spring |
| useTransform | 関数でモーションバリューを変換 | values-transform |
| useMotionTemplate | モーションバリューを文字列に組み合わせ (filter、boxShadow など) | values-motion-template |
| useFollowValue | ソースを任意のトランジションで追従するモーションバリュー | values-follow |
| useScroll | スクロール連動のモーションバリューとアニメーション | values-scroll |
| useVelocity | モーションバリューの速度にアクセス | values-velocity |
| useTime | 時間ベースのモーションバリュー | values-time |
| useWillChange | アニメーション対象要素のGPUレイヤーヒント | values-will-change |
ジェスチャー
| トピック | 説明 | リファレンス |
|---|---|---|
| Drag | 制約とコントロール付きドラッグジェスチャー | gestures-drag |
| Pan | タッチとポインターイベント用のパンジェスチャー | gestures-pan |
| Tap & Press | タップとプレスのジェスチャーハンドラー | gestures-tap-press |
| Hover & Focus | ホバーとフォーカス状態のアニメーション | gestures-hover-focus |
レイアウト アニメーション
| トピック | 説明 | リファレンス |
|---|---|---|
| AnimatePresence | コンポーネントの出入りのアニメーション | layout-animate-presence |
| usePresence / useIsPresent | AnimatePresenceの子要素内でプレゼンス状態にアクセス | layout-use-presence |
| usePresenceData | AnimatePresence の子孫でカスタムpropを読み取り | layout-presence-data |
| LayoutGroup | コンポーネント間のレイアウトアニメーションを調整 | layout-group |
| Layout アニメーション | layoutId による自動レイアウトアニメーション | layout-animations |
| Reorder | レイアウトアニメーション付きドラッグ・トゥ・リオーダー | layout-reorder |
| useInstantLayoutTransition | 1フレーム分のレイアウト更新をブロック | layout-instant-transition |
| useResetProjection | 構造変更後のレイアウト投影ツリーをリセット | layout-reset-projection |
機能
| トピック | 説明 | リファレンス |
|---|---|---|
| In View | ビューポート・表示状態用のuseInView、inView()、usePageInView | features-in-view |
| Resize | ウィンドウまたは要素サイズ用の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 |
高度な機能
| トピック | 説明 | リファレンス |
|---|---|---|
| Animation Controls | useAnimationでのプログラマティックアニメーション制御 | advanced-animation-controls |
| useAnimate | Imperative アニメーション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 |
ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ
詳細情報
- 作者
- hairyf
- リポジトリ
- hairyf/skills
- ライセンス
- MIT
- 最終更新
- 不明
Source: https://github.com/hairyf/skills / ライセンス: MIT
関連スキル
doubt-driven-development
重要な判断はすべて、本番環境への展開前に新しい視点から対抗的レビューを実施します。速度より正確性が重要な場合、不慣れなコードを扱う場合、本番環境・セキュリティに関わるロジック・取り消し不可の操作など影響度が高い場合、または後でバグを修正するよりも今検証する方が効率的な場合に活用してください。
apprun-skills
TypeScriptを使用したAppRunアプリケーションのMVU設計に関する総合的なガイダンスが得られます。コンポーネントパターン、イベントハンドリング、状態管理（非同期ジェネレータを含む）、パラメータと保護機能を備えたルーティング・ナビゲーション、vistestを使用したテストに対応しています。AppRunコンポーネントの設計・レビュー、ルートの配線、状態フローの管理、AppRunテストの作成時に活用してください。
desloppify
コードベースのヘルスチェックと技術負債の追跡ツールです。コード品質、技術負債、デッドコード、大規模ファイル、ゴッドクラス、重複関数、コードスメル、命名規則の問題、インポートサイクル、結合度の問題についてユーザーが質問した場合に使用してください。また、ヘルススコアの確認、次の改善項目の提案、クリーンアップ計画の作成をリクエストされた際にも対応します。29言語に対応しています。
debugging-and-error-recovery
テストが失敗したり、ビルドが壊れたり、動作が期待と異なったり、予期しないエラーが発生したりした場合に、体系的な根本原因デバッグをガイドします。推測ではなく、根本原因を見つけて修正するための体系的なアプローチが必要な場合に使用してください。
test-driven-development
テスト駆動開発により実装を進めます。ロジックの実装、バグの修正、動作の変更など、あらゆる場面で活用できます。コードが正常に動作することを証明する必要がある場合、バグ報告を受けた場合、既存機能を修正する予定がある場合に使用してください。
incremental-implementation
変更を段階的に実施します。複数のファイルに影響する機能や変更を実装する場合に使用してください。大量のコードを一度に書こうとしている場合や、タスクが一度では完結できないほど大きい場合に活用します。