# Motion

> Data moves, chrome does not. Charts animate when they enter and when their data changes; frames, axes and labels stay still.

## What moves

| Moment | What happens |
| --- | --- |
| Entrance | Marks grow in when the chart scrolls into view. |
| Update | Marks travel from the old values to the new ones. |
| Highlight | Hover and selection lift one mark; the rest step back. |
| Live | Real-time charts tick in new values at the edge. |

## Durations are tokens

Durations and easings are tokens, so a theme can make motion **calmer or quicker** without touching a chart.

## Reduced motion

Charts respect **prefers-reduced-motion**: values appear in place, without travel.

**Note: Replay it.** Every chart on its type page has a Replay button.

## What never moves

- Frames, axes and grid lines.
- Labels, except when their value changes.
- The legend.

- [Tokens](https://usechartory.com/docs/tokens): Durations and easings live with the other tokens.
- [Hearth widget](https://usechartory.com/docs/hearth-widget): Charts in context, with blocks.