---
url: "https://vueda.dev/v3/reference/theming/tokens/motion.md"
title: "Motion tokens"
---

# Motion tokens

Instruments feel responsive, not soft. Short, ease-out only.
One duration and one easing define the interaction motion contract.

| Name | Light | Dark | Description | Tailwind utility |
| --- | --- | --- | --- | --- |
| `--vueda-duration-interaction` | `120ms` |  | canonical interaction duration. Every UI transition resolves through this single value. |  |
| `--vueda-ease-interaction` | `cubic-bezier(         0.2,         0,         0,         1     )` |  | canonical interaction easing — ease-out only. No ease-in-out, no bounce, no springs. |  |
| `--vueda-loading-slow-ms` | `3000` |  | slow-path threshold for ViewLoading: after this long under sustained load the indicator shifts to a warning tone. Override per-route via the ViewLoading `slowAfterMs` prop for known-slow views (reports, exports). |  |

## Tokens

<a id="css-token-vueda-duration-interaction"></a>

### --vueda-duration-interaction

| Field | Value |
| --- | --- |
| Light | `120ms` |
| Source | `client/lib/theme/vueda-tailwind/base.css:677` |

canonical interaction duration. Every UI transition resolves through this single value.

<a id="css-token-vueda-ease-interaction"></a>

### --vueda-ease-interaction

| Field | Value |
| --- | --- |
| Light | `cubic-bezier(         0.2,         0,         0,         1     )` |
| Source | `client/lib/theme/vueda-tailwind/base.css:678` |

canonical interaction easing — ease-out only. No ease-in-out, no bounce, no springs.

<a id="css-token-vueda-loading-slow-ms"></a>

### --vueda-loading-slow-ms

| Field | Value |
| --- | --- |
| Light | `3000` |
| Source | `client/lib/theme/vueda-tailwind/base.css:684` |

slow-path threshold for ViewLoading: after this long under sustained load the indicator shifts to a warning tone. Override per-route via the ViewLoading `slowAfterMs` prop for known-slow views (reports, exports).