Motion design principles
How Meridian uses motion to guide attention, communicate state, and make interactions feel responsive without overwhelming the user.
Duration
Keep transitions between 150ms and 300ms. Anything faster feels jarring; anything slower makes the interface feel sluggish. Micro-interactions like hover states use 150ms. Page transitions and panel reveals use 250–300ms.
Easing
Prefer ease-out for entering elements and ease-in for exiting elements. Use cubic-bezier curves for custom spring-like motion. Avoid linear easing — it reads as mechanical and unnatural.
Stagger
When animating lists or groups, stagger children by 50–80ms. This creates a wave effect that draws the eye across content without waiting too long for the final element.
Distance
Elements should travel proportionally to their size. Small elements move 4–8px; larger panels move 16–24px. Overshooting the target by a few pixels on entry adds a polished, bouncy feel.
Performance
Only animate transform and opacity. These properties are GPU-composited and avoid layout thrashing. Never animate width, height, or positional properties that trigger reflow.
Brand note
Meridian motion uses violet (#8B5CF6) as the primary accent and pink (#F472B6) for emphasis states. All motion respects prefers-reduced-motion — users who opt out of animation receive instant transitions.