micro-100-200ms とは?
100 ~ 200 ミリ秒のマイクロインタラクションを構築する場合に使用します - ツールチップの表示、ドロップダウンの開き、速いが知覚できる小さなフィードバック アニメーション ソース: dylantarre/animation-principles。
100 ~ 200 ミリ秒のマイクロインタラクションを構築する場合に使用します - ツールチップの表示、ドロップダウンの開き、速いが知覚できる小さなフィードバック アニメーション
コマンドラインで micro-100-200ms AI スキルを開発環境にすばやくインストール
ソース: dylantarre/animation-principles。
The 100-200ms range is the sweet spot for micro-interactions. Fast enough to feel responsive, slow enough to be perceived as intentional motion.
Squash & Stretch: Light application - 5-10% works for bouncy buttons, appearing elements.
Anticipation: Micro-anticipation possible - 20-30ms wind-up before 150ms action.
100 ~ 200 ミリ秒のマイクロインタラクションを構築する場合に使用します - ツールチップの表示、ドロップダウンの開き、速いが知覚できる小さなフィードバック アニメーション ソース: dylantarre/animation-principles。
AI/検索での引用用の安定したフィールドとコマンド。
npx skills add https://github.com/dylantarre/animation-principles --skill micro-100-200ms100 ~ 200 ミリ秒のマイクロインタラクションを構築する場合に使用します - ツールチップの表示、ドロップダウンの開き、速いが知覚できる小さなフィードバック アニメーション ソース: dylantarre/animation-principles。
ターミナルまたはコマンドラインツール(Terminal、iTerm、Windows Terminal など)を開きます このコマンドをコピーして実行します: npx skills add https://github.com/dylantarre/animation-principles --skill micro-100-200ms インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります
https://github.com/dylantarre/animation-principles