Motion tokens
Durations, curves, and spring presets from The System.
These are tokens and guidance, not an animation engine. No motion runtime or automatic animation is installed.
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
| 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
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
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
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
Read Design principles for shared usage guidance and motion recipes.
Source: The System. Snapshot: 2026-10-12.