Motion that earns its weight

Every animation on a page spends two budgets: the user's attention and the device's frame time. Most sites overspend both, and the tell is that nobody can say what any individual movement is for.

Motion should answer a question the user already has

Good interface motion is almost always answering one of three questions: where did that come from, what just changed, or is this thing responding to me. A transition that answers one of those is doing work. A transition that exists because the section felt static is decoration, and decoration is what you cut first when the frame budget gets tight.

The two-question test

Before keeping a piece of motion, we ask:

• If this played half as far and half as fast, would anything be lost?
• If it did not play at all, would the page be harder to understand?

A surprising amount of motion fails both. The ones that pass usually get shorter as a result, not longer.

Respect the setting

prefers-reduced-motion is not an edge case, and honouring it is not the same as freezing everything in place. A frozen carousel can leave content rotated past legibility or stuck at zero opacity — worse than no animation at all. The reduced-motion path needs to be a real layout, usually a plain list, not the animated one with the clock stopped.

Measure, then argue

Opinions about whether something "feels sluggish" resolve quickly against a frame trace. Anything holding a frame past 32ms is not a matter of taste. Get the number first, then have the design conversation.