foundationsmotion

motion

one easing covers everything: --ease = cubic-bezier(0.22, 1, 0.36, 1). it's a gentle out-quint that feels confident but not springy.

durations are not tokenized — components pick from a small set inline (140 / 180 / 220 / 320 ms). the consistency comes from the easing.

import from @klera/ui/tokens (motion)

variants

--ease
cubic-bezier(0.22, 1, 0.36, 1)

default easing for hover, focus, transitions