24 · La luz se desplaza
Movimiento
El movimiento de Nitente nace del símbolo: las franjas se desplazan en onda, una tras otra. Es lento, suave y siempre significa algo.
Prueba de curvas
Duraciones
| Nombre | Duración | Uso | Curva |
|---|---|---|---|
| Instantáneo | 0 ms | Con reducción de movimiento | · |
| Rápido | 120 ms | Hover, foco, cambios de color | Estándar |
| Base | 200 ms | Botones, desplegables, interruptores | Estándar |
| Lento | 320 ms | Paneles, modales, menú | Luz |
| Énfasis | 480 ms | Desplazamiento de franjas, portada | Luz |
| Tope | 600 ms | Nada dura más, salvo la animación de carga | · |
El desplazamiento de franjas
- Qué es
- Las 7 franjas se desplazan en vertical una tras otra con un retardo de 40 ms entre ellas, y vuelven al reposo.
- Cuándo
- Pantalla de carga, portada y cambio entre páginas grandes. Una vez, no en bucle.
- Cuánto
- Hasta 12 % del alto del símbolo. Duración total 480 ms más el retardo.
- No
- No rebota, no gira ni parpadea. Nunca se usa para llamar la atención sobre un error.
Reducción de movimiento
Quien pide menos movimiento en su sistema no ve desplazamientos: el cambio ocurre en 0 ms o con un fundido de 120 ms.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}Sí
- Animar solo transform y opacity
- Dar un fundido corto cuando se reduce el movimiento
- Dejar siempre el estado final legible sin animación
No
- Parpadeos o destellos (más de 3 por segundo)
- Bucles infinitos fuera de una carga
- Movimiento que oculta contenido hasta que termina