Durations, curves and what reduced motion does. Each is named as a token and read from the token file, never typed in by hand.
Long enough to see a line being drawn, short enough that it never holds you up. Links pair it with --ease-out: a fast start and a soft landing.
| --dur-instant | 100ms |
| --dur-quick | 160ms |
| --dur-base | 240ms |
| --dur-move | 380ms |
| --dur-stage | 560ms |
| --ease-out | cubic-bezier(0.16, 1, 0.3, 1) |
| --ease-in | cubic-bezier(0.55, 0, 1, 0.45) |
| --ease-in-out | cubic-bezier(0.65, 0, 0.35, 1) |
| --spring | cubic-bezier(0.34, 1.56, 0.64, 1) |
Five durations and four curves, mirrored from the stylesheet into lib/design/tokens.ts and kept in step by a test. New motion names a token instead of writing a number.