Foundations
Motion tokens define the duration and easing curves used across all transition animations. They're exposed as --duration-* and --ease-* CSS custom properties, and used by the Fade, Slide, Scale, and Collapse motion components.
--duration-instant0ms--duration-fast150ms--duration-normal200ms--duration-slow300ms--duration-slower500ms--ease-linearcubic-bezier(0, 0, 1, 1)--ease-incubic-bezier(0.4, 0, 1, 1)--ease-outcubic-bezier(0, 0, 0.2, 1)--ease-in-outcubic-bezier(0.4, 0, 0.2, 1)--ease-out-expocubic-bezier(0.16, 1, 0.3, 1)--ease-springcubic-bezier(0.34, 1.56, 0.64, 1)Use the built-in motion primitives from @nexub/react for consistent animations: