Motion

Guiding principles

Wazoo’s motion language has two modes:

1. Purposeful — Motion that communicates meaning (state changes, transitions, feedback)
2. Quirky — Decorative micro-animations that express personality and differentiate the brand

Core animations

Fade in

Default entrance for all content on dark backgrounds.

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

Logo rotate

On hover, the W logo spins 360° with a cubic-bezier overshoot for a playful feel.

@keyframes rotate360 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.logo-image:hover {
  animation: rotate360 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

Quirky animations

Reduced motion

Always respect prefers-reduced-motion. All animations collapse to instant transitions when enabled.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Timing tokens