A motion system, instead of animations

Motion is usually the last thing added to an app and the first thing that gives away how it was built. Screens animate in whatever way each one was written on the day, durations are typed as numbers wherever they are needed, and the result is an app where nothing is technically wrong and nothing feels like it was made by one person.

The fix is the one that already worked for colour and typography. Motion becomes tokens: a small set of named durations and easing curves that screens spend rather than invent.

“Nobody can tell you that two screens use different easing curves. Everybody can tell you the app feels unfinished.”

One entrance, everywhere

The first thing built on those tokens is a staggered entrance. Content on a screen arrives in sequence rather than all at once, with the stagger defined once and reused. It costs nothing per screen, because a screen opts in by wrapping its content, and it makes every screen in the app feel related to every other one.

The second is a collapsing header that shrinks its title into the navigation bar as you scroll, with a fade at the scroll edge and a frost that responds to scroll position rather than being permanently on. Those are three separate effects that all read as one behaviour, which is only true because they share the same duration and curve.

Transitions carry meaning

Navigation transitions are assigned per intent rather than per route. Going deeper into a hierarchy looks different from opening something modal, which looks different again from switching a tab. The app is telling you what kind of movement just happened, and it stays consistent because the presets live with the route tree instead of being chosen at each call site.

There is one piece of pure decoration and it earns its place: the total counts up rather than appearing. In an app whose entire purpose is producing a number at the end of a shift, animating that number is the app pointing at the thing you came for.

Motion has an off switch

All of it honours the system Reduce Motion setting, which is not a nice-to-have. For somebody with a vestibular disorder, a staggered entrance is not delightful, it is a reason to close the app. Reduce Motion collapses every one of these to an instant state change while press feedback stays, so the interface still answers you.

That is the argument for a system over a set of animations, in one sentence: honouring an accessibility setting across an app is a one-line change when motion is tokenised and an audit of every screen when it is not.