Motion
Duration scales and easing curves. Hover a duration row to feel how long each token takes. Click an easing card to see the curve shape.
Duration Scale
motion.duration.instant0mshover
motion.duration.fast100mshover
motion.duration.normal200mshover
motion.duration.slow400mshover
motion.duration.slower600mshover
motion.duration.crawl1000mshover
Easing Curves
click
motion.easing.linearlinear
click
motion.easing.ease-incubic-bezier(0.4, 0, 1, 1)
click
motion.easing.ease-outcubic-bezier(0, 0, 0.2, 1)
click
motion.easing.ease-in-outcubic-bezier(0.4, 0, 0.2, 1)
click
motion.easing.springcubic-bezier(0.34, 1.56, 0.64, 1)
click
motion.easing.snappycubic-bezier(0.2, 0, 0, 1)