Motion

Motion is used to support clarity, not decoration. Most transitions in this UI system are subtle and functional, helping users understand state changes without adding noise.

Principles

Keep it quiet

Motion should feel like polish, not personality. If an animation draws attention to itself, it’s probably too much.

Motion should explain state

Transitions are most useful when they reinforce meaning:

• hover and focus feedback
• expanding/collapsing content
• opening/closing overlays
• loading states

Respect reduced motion

If a user prefers reduced motion, transitions should be minimized or removed.

Where motion shows up

Hover and focus feedback

• small color or opacity shifts
• focus-visible rings
• minimal transform (only when it helps affordance)

Enter/exit transitions

Use for UI that appears/disappears, like:

• menus
• popovers
• dialogs
• collapsible sections

Keep transitions short and consistent.

Practical defaults

A few defaults I use often:

• short transitions (duration-150 to duration-200)
• simple easing (ease-out is usually enough)
• opacity + small translate for menus/popovers (when used)

Reduced motion

When motion is used, it should degrade gracefully.

For global styling, support:

• prefers-reduced-motion: reduce

The goal is that the UI still works and still feels polished even when animations are turned off.

Avoid

• infinite animations (unless it’s a loading indicator)
• bouncy/overshoot easing for system UI
• motion that triggers on scroll
• large transforms that shift layout

Notes

Motion is easy to overuse. This system treats it like seasoning: a little improves clarity, too much overwhelms the experience.