# Motion tokens

Package: @commenda/pathfinder@0.1.0
Page: /docs/foundations/motion

These are tokens and guidance, not an animation engine. No motion runtime or automatic animation is installed.

## Durations [#durations]

| Token      | CSS variable               | Milliseconds |
| ---------- | -------------------------- | ------------ |
| instant    | `--pf-duration-instant`    | 100          |
| fast       | `--pf-duration-fast`       | 150          |
| base       | `--pf-duration-base`       | 200          |
| slow       | `--pf-duration-slow`       | 300          |
| deliberate | `--pf-duration-deliberate` | 500          |

## Easing [#easing]

| Token    | CSS variable           | Value                             |
| -------- | ---------------------- | --------------------------------- |
| out      | `--pf-easing-out`      | `cubic-bezier(0.23, 1, 0.32, 1)`  |
| in-out   | `--pf-easing-in-out`   | `cubic-bezier(0.77, 0, 0.175, 1)` |
| standard | `--pf-easing-standard` | `ease`                            |

## Springs [#springs]

Import `spring` from `@commenda/pathfinder/tokens`. Durations in these presets are seconds, and bounce is dimensionless. Use duration/bounce only with engines that support that model; do not treat them as CSS easing curves.

| Preset     | Seconds | Bounce |
| ---------- | ------- | ------ |
| snappy     | 0.2     | 0      |
| smooth     | 0.3     | 0.15   |
| expressive | 0.4     | 0.25   |

Use snappy for presses and small controls; smooth for sliding and expanding content; expressive only for success. Exits do not bounce. Color hover changes use instant plus standard easing. Closing uses fast plus out. Sheets alone use deliberate with `motionRecipe.sheetEasing`.

## Recipe constants [#recipe-constants]

These constants are available on `motionRecipe`; they are not independently themeable CSS variables. Offsets and blur values are px; stagger is milliseconds; scales are dimensionless.

| Constant        | Value                          |
| --------------- | ------------------------------ |
| pressScale      | 0.97                           |
| smallPressScale | 0.94                           |
| enterScale      | 0.96                           |
| exitScale       | 0.98                           |
| anchoredOffset  | 4                              |
| overlayOffset   | 8                              |
| edgeOffset      | 16                             |
| textBlur        | 1                              |
| iconBlur        | 3                              |
| stagger         | 30                             |
| staggerLimit    | 5                              |
| sheetEasing     | cubic-bezier(0.32, 0.72, 0, 1) |

## Input and reduced motion [#input-and-reduced-motion]

Keyboard-initiated menus, tabs and toggles change instantly. With reduced motion, replace springs with a 150ms fade using out easing; remove scale, offset and blur. Loading indicators can continue. Hover never translates or scales. Animations follow the current state toward a target so interruptions do not restart from a fixed origin.

## Design guidance [#design-guidance]

Read [Design principles](/docs/foundations/design-rules) for shared usage guidance and motion recipes.

Source: [The System](https://www.figma.com/design/dn7BkGYEfIyP0o2zfesfVh/The-System). Snapshot: 2026-10-12.