Design Principle
Excessive motion interrupts tasks, especially in dense tools.
Principle
Excessive motion interrupts tasks, especially in dense tools.
Design action
Motion should be short, light, and predictable; tool pages prioritize state feedback, respect reduced-motion, and avoid unrelated looping decoration.
Examples
Positive example: Menu expansion, state switches, generation progress, and list updates. Counterexample: Every card has strong entrance animation.
Apply when
Menu expansion, state switches, generation progress, and list updates. Cause or hierarchy changes need explanation.
Source notes
Source note: Synthesized from Apple HIG, Material Design, GOV.UK/Polaris/Atlassian component practices, and interaction accessibility principles. Apple HIG Motion: https://developer.apple.com/design/human-interface-guidelines/motion Material Design Motion: https://m3.material.io/styles/motion/overview/how-it-works GOV.UK Design System Patterns: https://design-system.service.gov.uk/patterns/ Shopify Polaris Patterns: https://polaris-react.shopify.com/patterns Atlassian Empty State: https://atlassian.design/components/empty-state
Agent Directive
Motion should be short, light, and predictable; tool pages prioritize state feedback, respect reduced-motion, and avoid unrelated looping decoration.