Motion Atlas is for choosing UI motion by purpose, not by guessing animation names.
Search and local history stay in your browser. No project text or search term is sent to a server.
Workflow
- Search in normal language. Try words like “soft reveal”, “button feedback”, “shake error”, or “loading bones”.
- Filter by purpose. Category, motion type, trigger, intensity, mobile fit, and accessibility load narrow the list.
- Use Replay deliberately. Cards are quiet by default. Replay only the card or detail demo you are checking.
- Open detail before copying. Detail explains use case, not-for cases, bad request, better request, fallback, and code hint.
- Compare two motions. Add two items to compare purpose, trigger, mobile fit, accessibility load, and prompt clarity.
Reading a motion card
Each card includes a live demo area, English/Japanese labels, category, motion type, trigger, summary, intensity, mobile fit, accessibility load, and actions for detail, compare, favorite, prompt copy, and replay.
Reduced motion
Motion Atlas checks the OS reduced-motion preference and also provides an in-tool toggle. When reduced motion is on, intense demos such as shake, pulse, spinner, and skeleton shimmer use safer fallback behavior.
What this does not guarantee
This is a production decision aid. It does not diagnose accessibility compliance, guarantee exact browser behavior, or replace design review. Always test the actual implementation in context.