--- title: "Motion tokens" description: "Durations by role, the duration scale, easing curves by role, where a surface appears from, and springs." url: "https://tanrei.chnotchy.com/tokens/motion/" last_updated: 2026-10-23T17:33:05.000Z --- # Motion tokens > Durations by role, the duration scale, easing curves by role, where a surface appears from, and springs. Motion tokens under `tanrei.sys.motion`. For guidance, read [Motion](https://tanrei.chnotchy.com/foundations/motion/). ## Durations by role How long a change takes, by what moves: a change of state, a selection, a box that resizes, content that opens in place, and each kind of surface that appears and leaves. A component’s duration token aliases its role, so a layer re-times every component of one role in one line. A surface leaves faster than it appears. The roles follow the motion dial. | Token | Value | Preview | | --- | --- | --- | | `--tanrei-sys-motion-role-appear-anchored-enter` | 300ms | | | `--tanrei-sys-motion-role-appear-anchored-exit` | 250ms | | | `--tanrei-sys-motion-role-appear-hint-enter` | 250ms | | | `--tanrei-sys-motion-role-appear-hint-exit` | 200ms | | | `--tanrei-sys-motion-role-appear-modal-enter` | 350ms | | | `--tanrei-sys-motion-role-appear-modal-exit` | 300ms | | | `--tanrei-sys-motion-role-appear-sheet-enter` | 400ms | | | `--tanrei-sys-motion-role-appear-sheet-exit` | 350ms | | | `--tanrei-sys-motion-role-appear-toast-enter` | 350ms | | | `--tanrei-sys-motion-role-appear-toast-exit` | 300ms | | | `--tanrei-sys-motion-role-disclosure` | 400ms | | | `--tanrei-sys-motion-role-feedback` | 450ms | | | `--tanrei-sys-motion-role-reduced` | 100ms | | | `--tanrei-sys-motion-role-resize-default` | 300ms | | | `--tanrei-sys-motion-role-resize-large` | 400ms | | | `--tanrei-sys-motion-role-selection-mark` | 250ms | | | `--tanrei-sys-motion-role-selection-travel` | 250ms | | | `--tanrei-sys-motion-role-show-delay` | 300ms | | | `--tanrei-sys-motion-role-state-compact` | 200ms | | | `--tanrei-sys-motion-role-state-default` | 250ms | | | `--tanrei-sys-motion-role-state-large` | 250ms | | Generated from `design/tokens/tanrei.light.tokens.json`, `tokens/sys/motion.tokens.json` ## Durations The scale the roles are made of. | Token | Value | Preview | | --- | --- | --- | | `--tanrei-sys-motion-duration-short1` | 50ms | | | `--tanrei-sys-motion-duration-press-hold` | 100ms | | | `--tanrei-sys-motion-duration-short2` | 100ms | | | `--tanrei-sys-motion-duration-stagger` | 100ms | | | `--tanrei-sys-motion-duration-short3` | 150ms | | | `--tanrei-sys-motion-duration-short4` | 200ms | | | `--tanrei-sys-motion-duration-medium1` | 250ms | | | `--tanrei-sys-motion-duration-medium2` | 300ms | | | `--tanrei-sys-motion-duration-medium3` | 350ms | | | `--tanrei-sys-motion-duration-medium4` | 400ms | | | `--tanrei-sys-motion-duration-long1` | 450ms | | | `--tanrei-sys-motion-duration-long2` | 500ms | | | `--tanrei-sys-motion-duration-long3` | 550ms | | | `--tanrei-sys-motion-duration-long4` | 600ms | | | `--tanrei-sys-motion-duration-extra-long1` | 700ms | | | `--tanrei-sys-motion-duration-extra-long2` | 800ms | | | `--tanrei-sys-motion-duration-extra-long3` | 900ms | | | `--tanrei-sys-motion-duration-extra-long4` | 1000ms | | Generated from `design/tokens/tanrei.light.tokens.json`, `tokens/sys/motion.tokens.json` ## Easing The curves, and the four roles a component eases a change by: `enter` for a surface that appears, `exit` for one that leaves, `state` for a change of state in place, `spatial` for something that moves or resizes in place. Each role names a curve of the scale. | Token | Value | Curve | | --- | --- | --- | | `--tanrei-sys-motion-easing-emphasized-accelerate` | cubic-bezier(0.3, 0, 0.8, 0.15) | | | `--tanrei-sys-motion-easing-emphasized-decelerate` | cubic-bezier(0.05, 0.7, 0.1, 1) | | | `--tanrei-sys-motion-easing-enter` | cubic-bezier(0.2, 0, 0, 1) | | | `--tanrei-sys-motion-easing-exit` | cubic-bezier(0.3, 0, 1, 1) | | | `--tanrei-sys-motion-easing-linear` | cubic-bezier(0, 0, 1, 1) | | | `--tanrei-sys-motion-easing-spatial` | cubic-bezier(0.2, 0, 0, 1) | | | `--tanrei-sys-motion-easing-standard` | cubic-bezier(0.2, 0, 0, 1) | | | `--tanrei-sys-motion-easing-standard-accelerate` | cubic-bezier(0.3, 0, 1, 1) | | | `--tanrei-sys-motion-easing-standard-decelerate` | cubic-bezier(0, 0, 0, 1) | | | `--tanrei-sys-motion-easing-state` | cubic-bezier(0.2, 0, 0, 1) | | Generated from `design/tokens/tanrei.light.tokens.json`, `tokens/sys/motion.tokens.json` ## Where a surface appears from Every surface that appears — a menu, a list, a popover, a tooltip, a dialog, a snackbar — starts from the same opacity, scale, distance and blur, and leaves the same way back. One choice of kind sets them together; a layer chooses another, or pins one of the values. `tanrei.sys.behavior.appearance` How a surface appears and leaves: a menu, a select's or a combobox's list, a popover, a tooltip, a dialog, a snackbar. fade-scale: it fades in and grows from 0.96 of its size toward its origin. fade: it only fades in. fade-slide: it fades in and travels a short way into place (sys.space.space100). blur-slide: it fades in, travels the same way and comes into focus from a 4 px blur. unfold: it fades in and unfolds from its anchored edge, scaled from 0 along the axis that leaves the anchor. The choice sets sys.motion.appear.\*; a layer that pins one of those keeps it whatever the choice. A surface that leaves runs its appearance back. A sheet slides in from its edge under every choice. fade-scale fade fade-slide blur-slide unfold fade-scale — default, and the fallback of a platform that cannot draw a choice Generated from `tokens/sys/behavior.tokens.json` | Token | Value | | --- | --- | | `--tanrei-sys-motion-appear-blur` | 0px | | `--tanrei-sys-motion-appear-distance` | 0px | | `--tanrei-sys-motion-appear-opacity` | 0 | | `--tanrei-sys-motion-appear-origin` | anchor | | `--tanrei-sys-motion-appear-scale` | 0.96 | Generated from `design/tokens/tanrei.light.tokens.json`, `tokens/sys/motion.tokens.json` ## Springs Each spring has four sub-tokens. `stiffness` and `damping` drive platforms with spring animation; `duration` and `easing` are the approximation used where springs are unavailable, such as CSS. | Token | stiffness | damping | duration | easing | Curve | | --- | --- | --- | --- | --- | --- | | `tanrei.sys.motion.spring.expressive.default-effects` | 1600 | 1 | 200ms | cubic-bezier(0.34, 0.8, 0.34, 1) | | | `tanrei.sys.motion.spring.expressive.default-spatial` | 380 | 0.8 | 500ms | cubic-bezier(0.38, 1.21, 0.22, 1) | | | `tanrei.sys.motion.spring.expressive.fast-effects` | 3800 | 1 | 150ms | cubic-bezier(0.31, 0.94, 0.34, 1) | | | `tanrei.sys.motion.spring.expressive.fast-spatial` | 800 | 0.6 | 350ms | cubic-bezier(0.42, 1.67, 0.21, 0.9) | | | `tanrei.sys.motion.spring.expressive.slow-effects` | 800 | 1 | 300ms | cubic-bezier(0.34, 0.88, 0.34, 1) | | | `tanrei.sys.motion.spring.expressive.slow-spatial` | 200 | 0.8 | 650ms | cubic-bezier(0.39, 1.29, 0.35, 0.98) | | | `tanrei.sys.motion.spring.standard.default-effects` | 1600 | 1 | 200ms | cubic-bezier(0.34, 0.8, 0.34, 1) | | | `tanrei.sys.motion.spring.standard.default-spatial` | 700 | 0.9 | 500ms | cubic-bezier(0.27, 1.06, 0.18, 1) | | | `tanrei.sys.motion.spring.standard.fast-effects` | 3800 | 1 | 150ms | cubic-bezier(0.31, 0.94, 0.34, 1) | | | `tanrei.sys.motion.spring.standard.fast-spatial` | 1400 | 0.9 | 350ms | cubic-bezier(0.27, 1.06, 0.18, 1) | | | `tanrei.sys.motion.spring.standard.slow-effects` | 800 | 1 | 300ms | cubic-bezier(0.34, 0.88, 0.34, 1) | | | `tanrei.sys.motion.spring.standard.slow-spatial` | 300 | 0.9 | 750ms | cubic-bezier(0.27, 1.06, 0.18, 1) | | Generated from `design/tokens/tanrei.light.tokens.json`, `tokens/sys/motion.tokens.json`