Skip to main content

Search rules

Search all UI Guides rules by name, category, or source

animationsEmil Kowalski

Motion Cohesion and Personality

SHOULD

SHOULD: Define duration and easing once as motion tokens and spend them everywhere, matching the curve to the product's personality (crisp and bounce-free for a dashboard, slower and bouncier for a playful app) rather than letting each component be animated to whoever built it's taste.

Match motion to the component's personality and to the rest of the product — one shared motion language, not per-component taste

Bad

Good

Why it matters

There is no universally correct curve — there is a curve that is correct for this product. A monitoring dashboard wants short, ease-out, bounce-free motion that gets out of the way; a playful consumer app can legitimately be slower and bouncier. What is never right is a surface where each element was animated by whoever happened to build it: one row bouncing, one crawling linearly, one snapping.

Each may be defensible alone, but together they make the product feel assembled rather than designed. Define motion tokens (duration + easing) once and spend them everywhere.

Built by Gleb Stroganov, design engineer at Evil Martians.

The rules come from other people's skills and guidelines — Vercel, Rauno Freiberg, @Ibelick, impeccable, Emil Kowalski, Tailwind, RAMS — each one credited on the Sources page. The work here is extraction and wiring: every rule is pulled into one corpus, given a good and a bad example you can operate, a MUST/SHOULD/NEVER rule an agent can paste, and a link back to where it came from.