Componentsv2.189.0
Iconsv1.19.0
MCPv0.8.61
Tokensv0.34.3
Motion
Duration and easing tokens, with live previews of each timing and curve.
Motion
Duration
| Preview | Name | Underlying Value |
|---|---|---|
motion-duration-fast-01 themeVars.motion['duration-fast-01'] | 70ms | |
motion-duration-fast-02 themeVars.motion['duration-fast-02'] | 110ms | |
motion-duration-moderate-01 themeVars.motion['duration-moderate-01'] | 150ms | |
motion-duration-moderate-02 themeVars.motion['duration-moderate-02'] | 240ms | |
motion-duration-slow-01 themeVars.motion['duration-slow-01'] | 400ms | |
motion-duration-slow-02 themeVars.motion['duration-slow-02'] | 700ms |
Easing
| Preview | Name | Underlying Value |
|---|---|---|
motion-easing-entrance-expressive themeVars.motion['easing-entrance-expressive'] | cubic-bezier(0, 0, 0.3, 1) | |
motion-easing-entrance-productive themeVars.motion['easing-entrance-productive'] | cubic-bezier(0, 0, 0.38, 0.9) | |
motion-easing-exit-expressive themeVars.motion['easing-exit-expressive'] | cubic-bezier(0.4, 0.14, 1, 1) | |
motion-easing-exit-productive themeVars.motion['easing-exit-productive'] | cubic-bezier(0.2, 0, 1, 0.9) | |
motion-easing-standard-expressive themeVars.motion['easing-standard-expressive'] | cubic-bezier(0.4, 0.14, 0.3, 1) | |
motion-easing-standard-productive themeVars.motion['easing-standard-productive'] | cubic-bezier(0.2, 0, 0.38, 0.9) |