Motion is the cheapest way to make software feel expensive — and the fastest way to make it feel cheap. The difference is rarely the animation itself; it's the easing curve, the duration, and whether the motion has a reason to exist.
Easing is a personality
Ease-in-out is the default of defaults, which is exactly why your UI feels like everyone else's. We keep a tiny library of curves on every project — an assertive one for entrances, a soft one for exits, and a barely-there one for hover states that should whisper.
:root {
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
--ease-whisper: cubic-bezier(0.4, 0, 0.2, 1);
}The twelve principles reduce to four behaviours:
- Entrances assert: 300–400ms, expo-out, always towards the user.
- Exits recede: 200–250ms, soft curve, never towards the user.
- States whisper: 150ms, subtle, and reversible under the cursor.
- Reduced motion is a first-class citizen, not a checkbox.
If you remove the animation and nobody asks where it went, it was decoration. If they ask, it was doing its job.
Motion should tell the user where they are and where they're going. Everything else is confetti.