Motion Atlas — 動くサンプルで分かるUIモーション辞典

実際に動くサンプルを見ながら、UIモーションの違い・使いどころ・AIへの頼み方を確認できます。

検索、お気に入り、最近見た項目、比較対象はこのブラウザ内で処理します。検索語をサーバーへ送信しません。

比較（最大4件）

無料で利用できます拡張比較、実装ハンドオフ、Markdown / JSON出力を含む全機能を利用できます。

選択中モーションの実装依頼文、比較ハンドオフ、Markdown / JSONを書き出せます。これらの機能は無料です。

選択モーション、理由、使う場面、使わない場面、リスク、代替、実装メモ、レビュー項目。

対象コンポーネント、initial / animate / transition、duration、easing、reduced motion対応、禁止する動き。

keyframes、class設計、duration、easing、media query、replay設計。

Reactコンポーネント、Tailwind class、state/replay、reduced motion、アクセシビリティ注意。

対象ファイル、実装目的、変更内容、acceptance criteria、reduced motion要件、regression check。

title、background、requirements、accessibility、acceptance criteria、test checklist。

prefers-reduced-motion、transform削除、loop停止、shake/pulse/bounce代替、autoplay、replay、pause、focus影響。

比較モーション、推奨、理由、除外案、代替、実装メモ、Codex handoff。

Motion Atlasは無料で利用できます。カタログ、デモ、日英メモ、実装出力の維持に支援を使います。