Foundations

Motion

Motion in Mix is gentle and purposeful. One signature transition — fade-in-up — used for content entrances. No bouncing, no twirling.

fade-in-up

The canonical Mix entrance. 600ms, custom cubic-bezier, with a soft blur dissolve.

Tile 1

Delay 0ms

Tile 2

Delay 80ms

Tile 3

Delay 160ms

css

.fade-in-up { animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

Easing & duration

Easing

cubic-bezier(0.16, 1, 0.3, 1)

Soft, decelerating curve. Used everywhere.

Durations

150ms — hover, color
300ms — modals, overlays
600ms — content entrance