When does motion help or hurt a product UI, and what is prefers-reduced-motion?

UI motion is not decoration by default. Transitions of a few hundred milliseconds can help users track where a panel came from, what expanded, and what the next focus is. Easing: ease-out often feels more natural for entering elements than linear movement. Excessive, blocking animation before every action, or long intro sequences, can feel like marketing theater in a work tool. Always respect `prefers-reduced-motion: reduce` for vestibular and migraine sensitivity: offer reduced or no non-essential animation. In marketing sites, a hero may animate once; in dashboards, keep motion utilitarian. Auto-playing video backgrounds behind forms are a common accessibility and focus trap. Performance: many animations cost GPU; avoid animating `box-shadow` and large layout on every frame without need.

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* team policy often refines, not a universal hammer */

Start simple: try this concept in a tiny project before moving to advanced tools.