EpicutsDesign
Design system

Motion

One easing curve for everything, short durations, and no animation for anyone who asks for reduced motion.

Easing

Every transition and Motion animation uses the same curve. Hover a curve to play it.

ease-apple

cubic-bezier(0.28, 0.11, 0.32, 1)

apple.com's ease. The default for every transition and Motion animation.

Durations

var(--duration-base)

240ms

Default for transition-* utilities.

var(--duration-collapse)

350ms

Expanding and collapsing panels, the accordion icon.

Reduced motion

MotionProvider respects the visitor's setting, marquees become scroll areas and the page never scroll-animates content in.