Movimiento
El movimiento es discreto y rápido. Confirma una acción o suaviza un cambio de estado; nunca es decoración. Y se detiene en cuanto un visitante pide menos.
Duraciones y curvas
La mayoría de las transiciones duran una quinta parte de segundo sobre una curva ease: un cambio de color al pasar el cursor, un borde que se asienta. El cambio de tema dura un poco más para que el repintado de toda la página no dé un salto brusco. Las páginas aparecen con un desvanecido de unos píxeles al cargar. Los paneles inferiores son el único movimiento expresivo, que entra deslizándose sobre una curva de muelle.
| Movimiento | Valor |
|---|---|
| Transición por defecto | 0.2s ease |
| Cambio de tema | 0.3s ease |
| Desvanecido de entrada de página | 0.3s, up 8px |
| Elevación al pasar el cursor | up 2px + shadow |
| Muelle del panel | cubic-bezier(0.32, 0.72, 0, 1) |
Movimiento reducido
Cuando el sistema de un visitante pide movimiento reducido, el sitio lo respeta sin excepción. Las animaciones y transiciones se reducen a un pelo por encima de cero, y el desplazamiento suave vuelve a ser un salto. Esta es la regla, no un detalle:
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}