Get started
Motion
The shared springs, easings and durations in lib/motion.ts.
Every animated component imports its timing from lib/motion.ts. Components brought in from beUI are retuned to these tokens, so the whole library moves the same way.
Springs
snappy
smooth
pop
gentle
glide
bouncy
snappy for toggles and presses, smooth for panels and layout, pop for arriving messages, gentle for page-level movement, glide for values tracking live input, bouncy only for celebratory moments.
Easings and durations
ease.out
cubic-bezier(0.22, 1, 0.36, 1)
ease.inOut
cubic-bezier(0.65, 0, 0.35, 1)
ease.in
cubic-bezier(0.55, 0, 1, 0.45)
ease.drawer
cubic-bezier(0.32, 0.72, 0, 1)
duration.instant
0.1s
duration.fast
0.16s
duration.base
0.24s
duration.slow
0.4s
duration.slower
0.6s