Motion Hierarchy
Motion needs a hierarchy just like type and color. Choose one primary signature motion, support it with secondary interaction motion, then use restrained microinteraction and ambient motion.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Motion Hierarchy · attention follows consequence
Purpose
Motion needs a hierarchy just like type and color. Choose one primary signature motion, support it with secondary interaction motion, then use restrained microinteraction and ambient motion.
A page should not have five competing signature gestures. Use shared Pinky springs, small travel distances and clear timing relationships. Entrance motion should not outrank the action the user came to take, and ambient motion should never compete with reading.
Reduced motion removes transitions without removing content or state. Pause continuous work when it is offscreen, avoid per-frame React state, and prefer transforms/opacity over layout changes.
Source: packages/skills/patterns/motion-hierarchy.md