Motion

Duration and easing tokens for consistent animation timing across components.

Duration

instant

100ms

--duration-instant

fast

150ms

--duration-fast

normal

300ms

--duration-normal

slow

500ms

--duration-slow

Easing

default

--easing-default

cubic-bezier(0.4, 0, 0.2, 1)

--easing-in

cubic-bezier(0.4, 0, 1, 1)

out

--easing-out

cubic-bezier(0, 0, 0.2, 1)

spring

--easing-spring

cubic-bezier(0.34, 1.56, 0.64, 1)

Usage

/* In component CSS */
transition: all var(--duration-fast) var(--easing-default);

/* Tailwind utility */
className="transition-all duration-[--duration-fast]"