Animation

Reshaped splits motion into two sets of tokens: durations that define how long a transition runs, and easings that define how it accelerates. Combining them instead of hardcoding values keeps animations feeling like they belong to the same system, and lets you retune motion globally from the theme.

/* Duration */
--rs-duration-rapid /* 100ms */
--rs-duration-fast /* 150ms */
--rs-duration-medium /* 200ms */
--rs-duration-slow /* 300ms */

/* Easing */
--rs-easing-standard /* cubic-bezier(0.2, 0, 0, 1) */
--rs-easing-accelerate /* cubic-bezier(0.4, 0, 1, 1) */
--rs-easing-decelerate /* cubic-bezier(0, 0, 0.2, 1) */

/* Usage */
.element {
  transition: transform var(--rs-duration-fast) var(--rs-easing-standard);
}

Shorter durations feel snappier and suit small, frequent changes, while longer ones give larger surfaces enough time to read as a single movement.

--rs-duration-rapid is used for immediate feedback on direct interaction, like Button press states or Flyout and MenuItem responding to pointer changes.

--rs-duration-fast is the default for most component transitions, such as hover, focus and color changes on Button, Card, Checkbox, Switch and many others.

--rs-duration-medium is used for larger moving surfaces, like the Overlay backdrop, Toast, ProgressBar and LoaderText.

--rs-duration-slow is reserved for the longest transitions where an element travels a large distance, like the animated Tabs indicator.

Easing controls the acceleration curve of a transition, which is what makes motion feel natural rather than mechanical.

--rs-easing-standard is the default curve for elements that move within the layout while staying on screen.

--rs-easing-accelerate speeds up towards the end and is used for elements leaving the screen, like Modal, Flyout, Overlay and Toast on close.

--rs-easing-decelerate slows down towards the end and is used for elements entering the screen, like the same overlay components on open.