Motion
Duration and easing tokens, and when to use which.
Motion in Plinth is quick and matter-of-fact: transitions confirm what happened, they don't perform. Everything derives from four durations and three easings.
--duration-fast
100ms · state flips (hover tints)
--duration-base
150ms · most transitions
--duration-slow
250ms · overlays entering
--duration-slower
400ms · large surfaces, drawers
--ease-out
cubic-bezier(0.16, 1, 0.3, 1) · enter
--ease-in-out
cubic-bezier(0.65, 0, 0.35, 1) · move / morph
--ease-bounce
cubic-bezier(0.34, 1.4, 0.64, 1) · playful emphasis
Rules
- Hover and pressed states use
--duration-fast, or no transition at all. Feedback must feel instant. - Most transitions (fades, color shifts, small movements) use
--duration-basewith--ease-out. - Overlays entering (popovers, dialogs) use
--duration-slow,--ease-out, and a subtle scale from 97% rather than a slide. - Exits are faster than entrances. Leaving UI should get out of the way; roughly half the enter duration works well.
- Respect
prefers-reduced-motion. Components swap movement for opacity fades when the user asks for less motion.