Motion design principles
How Meridian uses motion to guide, delight, and never distract.
1. Purpose over polish
Every animation must earn its frame budget. Motion exists to clarify spatial relationships, signal state changes, or provide feedback — never purely for decoration.
2. Duration discipline
Micro-interactions complete in 150–250ms. Page transitions cap at 300ms. Anything slower feels sluggish; anything faster goes unnoticed. Respect the user's perception threshold.
3. Easing with intent
Default to ease-out for entering elements (deceleration signals arrival). Ease-in for exiting elements (acceleration signals departure). Reserve spring curves for playful moments — never for critical workflows.
4. Stagger, don't flood
When animating lists or grids, stagger children by 30–50ms. Simultaneous motion overwhelms; staggered motion creates a natural visual rhythm the eye can follow.
5. Respect reduced motion
Always honor prefers-reduced-motion. When the user requests stillness, collapse all animations to instant state changes. Accessibility is not optional.
6. GPU-aware layering
Animate only transform and opacity. Avoid animating layout-inducing properties like width, height, or margin. Keep the compositor thread happy — your users' frame rate depends on it.
These principles apply across every Meridian surface — dashboard, docs, and landing. Consistency in motion builds trust; inconsistency breaks it.