Motion

Fluid and snappy, never showy. Every duration and easing is a token, and reduced motion is respected everywhere without any extra work.

See it

The tokens

Three durations (--ub-duration-fast, --ub-duration-base, --ub-duration-slow) and three easings. --ub-ease-spring is a CSS linear() approximation of a light spring; use it for thumbs, toggles, and small position changes. --ub-ease-out covers fades and color shifts.

.my-thing {
  transition: transform var(--ub-duration-slow) var(--ub-ease-spring);
}

Reduced motion

When someone prefers reduced motion, the duration tokens collapse to zero at the token level. Anything built on them, in the library or in your app, goes still automatically. This is the payoff of never hardcoding a millisecond value.