WAPER / UI
Motion
Press play to compare curves and durations.
Light
Loading preview…
Dark
Loading preview…
WaperDesignColour changes
100ms · (.4, 0, .2, 1)Default
150ms · (.4, 0, .2, 1)Menus, popovers and tooltips open
100ms · (.16, 1, .3, 1)Rail and list row backgrounds
200ms · (.22, 1, .36, 1)Rail width, dialogs
200ms · (.23, 1, .32, 1)Toasts in and out
400ms · (.23, 1, .32, 1)Phone drawer
500ms · (.32, .72, 0, 1)Only the composer’s send and voice keys.
Thinking · reading 12 sources
Disabled buttons drop their text to 30% ink. Reduced motion turns all of this off.
Colour changes
100ms · (.4, 0, .2, 1)Default
150ms · (.4, 0, .2, 1)Menus, popovers and tooltips open
100ms · (.16, 1, .3, 1)Rail and list row backgrounds
200ms · (.22, 1, .36, 1)Rail width, dialogs
200ms · (.23, 1, .32, 1)Toasts in and out
400ms · (.23, 1, .32, 1)Phone drawer
500ms · (.32, .72, 0, 1)Only the composer’s send and voice keys.
Thinking · reading 12 sources
Disabled buttons drop their text to 30% ink. Reduced motion turns all of this off.