prefers-reduced-motion: animação com respeito a quem sente desconforto

Animações deixam interfaces mais vivas. Mas pessoas com distúrbios vestibulares, enxaqueca ou sensibilidade a movimento podem sentir tontura, náusea e desconforto com parallax, zoom e transições grandes. Por isso, iOS, Android, Windows e macOS têm a opção "reduzir movimento".

Como respeitar

O CSS informa a preferência:

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

E no JavaScript:

const reduzir = window.matchMedia('(prefers-reduced-motion: reduce)').matches

O que reduzir

• Parallax e movimentos amplos ligados ao scroll (Scroll suave e animações no scroll sem destruir a performance).
• Zoom e rotações de grandes áreas.
• Rolagem suave por JavaScript.
• Cenas 3D em movimento constante (3D na web com Three.js: quando vale a pena e como não pesar o site).
• Vídeos em reprodução automática.

O que pode ficar

Mudanças de cor e opacidade, pequenas transições de estado e feedback de clique costumam ser seguros. Reduzir não precisa significar remover todo o feedback (Micro-interações que convertem: como transições de 200ms a 300ms impactam a retenção do usuário).

No app

React Native oferece a mesma informação via AccessibilityInfo, e animações com Reanimated podem respeitá-la (Animações a 60fps no React Native com Reanimated).

Este site respeita essa preferência. Veja sites da We Codex ou fale com a gente.