Motion
Motion in Charter is quiet and purposeful — it explains a change, never decorates one. Things move fast, ease out (quick to start, soft to land), and stop entirely when a reader asks for less. The one exception that earns more presence is Argus thinking.
Duration & easing
Four durations, three curves — all tokens. UI transitions use --dur with
--ease-out by default; the dot below travels each curve.
| Token | Value | Use |
|---|---|---|
--dur-fast | 120ms | Hover, focus, small toggles |
--dur | 170ms | Default — most transitions |
--dur-slow | 260ms | Entrances, drawers, modals |
--ease-out | cubic-bezier(.16,.84,.44,1) | Default — quick start, soft landing |
--ease | cubic-bezier(.2,.6,.2,1) | Symmetric moves (sliders, reorder) |
Entrance choreography
Content fades up a few pixels and lands. Lists stagger by ~80ms so the eye follows the order. Replay ▸
Loading language
Skeletons for content we can shape; a spinner for indeterminate waits. Both stop under reduced-motion.
The agentic-streaming language
Argus is the one place motion earns more presence — it signals live thinking. Violet, always, so the AI source stays unmistakable.
prefers-reduced-motion: reduce, every animation and transition above collapses to a near-instant
cross-fade and smooth-scroll is disabled — built into the base layer, so each component inherits it. See
Accessibility.