24 · The light shifts
Motion
Nitente motion comes from the symbol: the stripes shift in a wave, one after another. It is slow, smooth and always means something.
Curve test
Durations
| Name | Duration | Use | Curve |
|---|---|---|---|
| Instant | 0 ms | With reduced motion | · |
| Fast | 120 ms | Hover, focus, color changes | Standard |
| Base | 200 ms | Buttons, dropdowns, switches | Standard |
| Slow | 320 ms | Panels, modals, menu | Light |
| Emphasis | 480 ms | Stripe shift, cover | Light |
| Cap | 600 ms | Nothing lasts longer, except the loading animation | · |
The stripe shift
- What it is
- The 7 stripes shift vertically one after another with a 40 ms delay between them, then return to rest.
- When
- Loading screen, cover and transitions between large pages. Once, not in a loop.
- How much
- Up to 12% of the symbol height. Total duration 480 ms plus the delay.
- Never
- It does not bounce, spin or blink. It is never used to draw attention to an error.
Reduced motion
Anyone who asks for less motion in their system sees no shifting: the change happens in 0 ms or with a 120 ms fade.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}Do
- Animate only transform and opacity
- Use a short fade when motion is reduced
- Always leave the final state legible without animation
Don't
- Blinking or flashing (more than 3 per second)
- Infinite loops outside a loading state
- Motion that hides content until it finishes