Motion
Motion
One duration and one easing, emitted into @theme as Tailwind's defaults, so a
bare transition-colors is already the system's motion and a component that
wanted its own would have to say so out loud.
| Token | Value |
|---|---|
--default-transition-duration | 150ms |
--default-transition-timing-function | cubic-bezier(.4,0,.2,1) |
Travelling on cubic-bezier(.4,0,.2,1). The duration is stretched
here so the curve is legible; the token itself is 150ms.
Reduced motion
application.css carries a prefers-reduced-motion: reduce block for the whole
site, outside any component. A component that animated on its own terms would
need its own copy of that rule, which is the second thing to keep in step — so
none of them do. The spinner in ButtonComponent and the one in the playground's
loading state are the only moving parts, and both are covered by it.