Motion That Means Something

Motion answers a question the eye is already asking: where did that come from, where did it go, and what just changed? When it answers clearly, an interface feels obvious. When it answers loudly, it feels slow.

Every animation on this journal follows three rules. They are simple enough to remember and strict enough to prevent most of the problems I see in polished-but-tiring interfaces.

Rule one: have a reason

Each transition should encode one of four things — continuity between states, a change in hierarchy, direct manipulation, or a spatial relationship. "It looks nice" is not on the list. A card lifting on hover says this is clickable. A drawer sliding from the right says you can go back the way you came. A number counting up says nothing, which is why I keep counters short and rare.

Rule two: be quick, then be consistent

Most micro-interactions land between 140ms and 280ms. Enter animations can take a little longer than exits, because the user is arriving rather than waiting to leave. Pick three durations and one easing curve, then use them everywhere.

Copy:root {
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: 160ms;
  --t-base: 260ms;
  --t-slow: 480ms;
}

Consistency is what makes motion feel like a material property rather than a collection of effects. A single shared curve does more for perceived quality than any bespoke spring.

Rule three: let go

Nothing should block a user. No animation may delay a click, hold a page hostage, or require the user to wait before reading. That is also why the page transitions on this site are an enhancement layered on real links: if the script fails, navigation still works instantly.

The small things that add up

• A chip that fills on selection explains filtering without a label.
• An underline that grows from the left tells you which section you are in.
• A progress bar at the top of an essay turns scroll depth into a quiet promise about length.

None of these need a library. They are a few transitions, one IntersectionObserver, and the discipline to delete the ones that do not earn their place.

Good motion is mostly editing. The best interaction I shipped this year was removed after a week — it was delightful twice and annoying on the tenth visit.