Tokens
Motion
Durations, easings and stagger steps. Beam switches to the Reduced values automatically under prefers-reduced-motion. Hover a row to run its sample.
Default to duration-base with ease-standard. Use fast-* for small state changes (hover, toggle), slow-* for larger movement (panels, drawers), and deliberate only for one-off, attention-worthy moments. Never hard-code a duration: the Reduced mode only works if you use the tokens.
Duration
| Token | Sample | Full | Reduced (prefers-reduced-motion) |
|---|---|---|---|
| duration.instant | 0ms | 0ms | |
| duration.fast-1 | 100ms | 0ms | |
| duration.fast-2 | 150ms | 0ms | |
| duration.base | 200ms | 100ms | |
| duration.slow-1 | 300ms | 100ms | |
| duration.slow-2 | 500ms | 100ms | |
| duration.deliberate | 800ms | 100ms |
Easing
ease-enter for things arriving (decelerate), ease-exit for things leaving (accelerate), ease-standard for things moving within the page. ease-spring overshoots — use it sparingly.
| Token | Sample | Full | Reduced (prefers-reduced-motion) |
|---|---|---|---|
| ease.enter | cubic-bezier(0, 0, 0.2, 1) | cubic-bezier(0, 0, 0.2, 1) | |
| ease.exit | cubic-bezier(0.4, 0, 1, 1) | cubic-bezier(0.4, 0, 1, 1) | |
| ease.linear | linear | linear | |
| ease.spring | cubic-bezier(0.34, 1.56, 0.64, 1) | cubic-bezier(0.34, 1.56, 0.64, 1) | |
| ease.standard | cubic-bezier(0.2, 0, 0, 1) | cubic-bezier(0.2, 0, 0, 1) |
Stagger
Delay between items animating in sequence, e.g. list rows: item n waits n × stagger-1.
| Token | Full | Reduced (prefers-reduced-motion) |
|---|---|---|
| stagger.1 | 20ms | 0ms |
| stagger.2 | 40ms | 0ms |
| stagger.3 | 80ms | 0ms |
Generated from beam.manifest.json v0.1.0 · 2026-11-06T09:38:51.936Z · source 8dcb01076f81