ホーム / 全スキル / デザイン＆モーション / micro-interaction
English (EN)简体中文 (ZH)日本語 (JA)
デザイン＆モーション · iart-ai/web-animation-skills

micro-interaction

このスキルは、ユーザーが「ホバー/プレス効果を追加したい」、「トグルやスイッチをアニメーション化したい」、「アニメーション付きのいいねボタンを作りたい」、「トースト/スナックバーをスライドインさせたい」、「ドロワーやモーダルをアニメーション化したい」、「リストの並べ替えや追加/削除をアニメーション化したい」、「共有要素のレイアウト遷移を行いたい」、または「UIフィードバックを磨き上げたい」と求めた場合に使用します。Framer Motion（motion/react）およびモダンCSSを使用したUIモーションをカバーします。

L3 ネットワーク · ドメインとキー範囲を宣言V1 コミット固定ネットワーク通信ファイル書き込みDual-pass Audit
Author iart-aiGitHub iart-ai/web-animation-skills ↗Stars 28License MIT（仓库根 LICENSE 为 MIT License, Copyright (c) 2026 iart.ai；.claude-plugin/plugin.json 的 license 字段同为 MIT）Commit b6dba3eb75
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

インタラクションアニメーションに厳格な時間枠とコンポジタ制約（100–250ms、transform/opacityのみ操作、押下時即座に0.96、非対称な出入り）を定め、操作感を検証可能なパラメータに落とし込む

skills/micro-interaction/SKILL.md
Duration: UI micro-interactions live in **100–250ms**. Anything over ~400ms feels laggy for a click response.
同じ段落で3つのイージングデフォルト値（ease-outイン、オーバーシュート、標準移動）と、「入るときは少し遅く、去るときは速く」という原則を提示。

Framer Motion側はジェスチャー、スプリング、AnimatePresenceの3要素を骨格とし、スプリングはstiffnessとdampingの直感的な2つのパラメータで調整する

skills/micro-interaction/SKILL.md
whileTap={{ scale: 0.96 }}
stiffness: 400, damping: 30のようにそのまま使えるUIデフォルト値を提供し、dampingが反発量に与える影響を解説。

レイアウトアニメーションはFramer Motionの最大の武器：layoutが位置やサイズの変化を自動的にtransformへと変換し、layoutIdがコンポーネント間の共有要素（magic move）遷移を実現する

skills/micro-interaction/SKILL.md
{!open && <motion.div layoutId="card" onClick={() => setOpen(true)} />}
layoutによって角丸やテキストが引き伸ばされる副作用にも言及し、子要素の逆スケーリングやlayout="position"への切り替えを提示。

ピュアCSSでも出入り（display切り替えを含む）が可能：@starting-styleで初回レンダリングの初期値を提供し、transition-behavior: allow-discreteで離散プロパティのトランジションを可能にする

skills/micro-interaction/SKILL.md
transition-behavior: allow-discrete;
JSライブラリなしでトーストやダイアログの出入りを実現可能にし、referencesにはオーバーレイの同様の処理も提示。

ローディングから成功・失敗への遷移を画面の切り替えではなく同一オブジェクトの連続状態（ボタンがスピナーからチェックマークに変形）として扱い、reduced-motionガードを必須とする

skills/micro-interaction/SKILL.md
Loading → success → error should be one continuous motion (e.g. a button morphs spinner → checkmark), not a jump cut.
受入基準もこれに合わせて改定：インタラクションは時間駆動ではなく状態駆動であるため、クロックではなく状態（?state=open）を固定する。

2コア機能

01ホバー、プレス、フォーカスフィードバック（whileHover/whileTap/whileFocusにスプリングを追加）
02出入りアニメーション（AnimatePresenceとinitial/animate/exit、安定したkey。トーストにはmode="popLayout"を使用）
03レイアウトアニメーションと共有要素（layoutおよびlayoutIdによるmagic move）
04ピュアCSSインタラクションレシピ（@starting-style、allow-discrete、popover/dialogの退場、@propertyによるアニメーション可能なカスタムプロパティ、スピナーおよびトグル）
05Framer Motion高度なレシピ（variantsとstagger、Reorderドラッグ並べ替え、ドラッグ制約、ジェスチャーの組み合わせ）
06reduced-motionガード（CSSグローバル0.01msおよびFramer Motion側の処理）
07状態固定ハーネス（?state=idle/hover/openをdata-stateや制御プロパティにマッピング）

3外部依存関係

KindDependency / Endpoint
packagemotion（Framer Motion，v11+ 以 motion/react 导入）
network交付页从 CDN 取 React 与 motion（正文点名 esm.sh；产物期引用，不判级）
api现代 CSS 原语：@starting-style、transition-behavior: allow-discrete、@property、popover/dialog 的 overlay 离散属性
clinpx / Playwright（宿主侧截图工具）与仓库根 scripts/ 助手（seek-shot.sh、contact-sheet.sh 依赖 ffmpeg）

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
アクセス可能ドメインとキー範囲を宣言
管理者向け
最小権限のキー、リクエストログを保持
判定根拠（ファイルパスと抜粋）
  • 网络端点: 外部ネットワークアクセスの宣言: 実行時の外部通信ゼロ。成果物ページはCDNからReactとmotionを取得（本文でesm.shを指定。成果物フェーズでの参照であり評価対象外）
  • 本地工作目录: ファイルI/Oと成果物出力: 当該スキルディレクトリへの書き込みゼロ。成果物はエージェントが出力する自己完結型の1つの.html（ピュアCSSまたはCDN経由のインラインtype=module）
監査ノート： 評価基準はスキル自身のディレクトリ（skills/micro-interaction/ = SKILL.md + 0バイトREADME.md + references/{framer-motion-recipes,css-recipes}.md、findで全件照合済み）のみに基づきます：スクリプトゼロ、認証情報ゼロ、ディスク書き込みゼロ、実行時外部通信ゼロ（トークンスキャンfetch(/XMLHttpRequest/curl/wget/child_process/process.env/API_KEY|TOKEN|SECRET/.env/eval(のヒットゼロ）。本文で指定されたesm.sh（ReactとmotionのCDN）は出力規約内に登場しており、成果物フェーズの参照（ブラウザで成果物ページを開いた際に取得）に該当するため、第4バッチの基準に基づき評価対象外としてエンドポイントのみ記載。npmパッケージはユーザーのプロジェクト側でインストールされます。

5二重目の独立検証

  • [unlocatable] transition-behavior: allow-discrete 与 @starting-style 的支持面 — SKILL.md 写 Baseline in Chrome/Edge/Safari、references 写 Baseline-available in current Chrome/Edge/Safari/Firefox——两处描述不同（SKILL.md 未含 Firefox），且均无源码内依据。正文要求读者 verify @starting-style and allow-discrete for your support floor，即文档自己把核实责任交给使用者，故按文档声明记录并在 risks 提示。
  • [ok] layout 造成圆角与文字变形的告诫是否与配方一致 — SKILL.md 的 Gotcha 段与 references 的 magic-move/layout 小节都提示需子元素反向缩放或改用 layout="position"；references 另给 useMotionValue 加 useSpring 的免重渲染建议，互不矛盾。
  • [ok] 验收方式与动效性质是否匹配（状态驱动 vs 时间驱动） — SKILL.md 明写 A micro-interaction's frames are its states (idle / hover / pressed / open) 并给 ?state= 方案，同时保留 CSS 循环动画的 animationDelay 加 paused 冻结写法，两路都对得上其讨论的动效类型。
  • [discrepancy] Packaged helper 的路径基准与语义 — SKILL.md 写 scripts/seek-shot.sh anim.html 0 1.5 3（秒制、时间冻结），但本 skill 的验收是状态冻结（?state=open），helper 与之不匹配；且 scripts/ 在仓库根，单装形态下相对路径亦不成立。

6結論

  • 操作感を検証可能なパラメータ（100–250msの時間枠、押下時0.96、3つのデフォルトイージング）に定量化し、そのままコードレビューに適用可能
  • JSエコシステム（Framer Motion）と依存関係ゼロのCSSアプローチを両方提供し、プロジェクトの制約に応じて選択可能
  • レイアウトアニメーションと共有要素（layout、layoutId）をレシピレベルで解説し、その副作用についても事前に警告
  • 状態の連続性という主張（スピナーからチェックマークへ切り替えなしで変形）により、単なる装飾ではなくインタラクションモーションを真のUX目標と結合
    • 最適な用途： 適しているケース：① UIの応答性の高いディテール向上（ホバー、プレス、フォーカスフィードバック、スイッチ、いいね、トースト、ドロワー、モーダル、アコーディオン）；② リストの追加・削除・並べ替えおよび共有要素（magic move）遷移；③ ローディングから成功・失敗への連続状態設計；④ JSライブラリなしのピュアCSSで出入りやポップアップアニメーションを実装したいプロジェクト。
    不向きな用途： 適していないケース：① ページまたはルート単位のトランジション（page-transition-animationを使用）；② スクロールテリングや複雑なタイムラインの演出（gsap-webを使用）；③ パフォーマンスプロファイリングおよび負荷の高いプロパティの系統的ガバナンス（60fps-animationを使用）；④ フレームごとの確定的な検証が必要な時間駆動型アニメーション（本スキルの検証エビデンスはフレームではなく状態）。
    Install Agent-Ready
    ① Verified Mirror 2026-09-28
    Option A · Direct DownloadDownload micro-interaction.tar.gz
    sha256: 17fbed1b9f12f5ad…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit b6dba3eb75.