Motion principles

Case study preview

Short guidelines for hover, page transitions, and reduced-motion defaults.

Principles

Motion explains hierarchy: it should clarify where you came from and where focus landed, not decorate for its own sake.

Durations stay short; easing follows natural deceleration so the UI feels responsive without feeling flashy.

Motion study clip—hosted file embed.

We respect `prefers-reduced-motion`: transitions collapse to instant or near-instant changes when that preference is set.