Motion
Values from achery-ui/tokens; in vanilla-extract use vars.duration and vars.ease. If your device is set to reduce motion, the demos jump instead of moving.
Minimal and purposeful. Nothing bounces without reason.
| Duration | Value | Use |
|---|---|---|
fast |
120ms | Hover colours, focus ring |
base |
180ms | Standard transitions |
slow |
320ms | Modal entrance, toast |
Two easing curves:
out— decelerates naturally; the defaultsnap— slight spring overshoot; use for toggle, confirmation actions
Durations
At their real speed, with easing.out.
Easing
Slowed to one second so the curve shows. easing.in isn't in the guidance above: it accelerates away, for things leaving.