Animation Judgement: UI principle for coding agents

Knowing how to animate is not the same as knowing whether to. Most weak interface motion is technically correct and still wrong: it works, it just had no reason to exist. Decide the reason first, then reach for the technique.

Name the Purpose Before Building

Every animation should answer one question: what does the user understand afterwards that they did not understand before.

Good answers are specific.

Shows where a panel came from, so the way back is obvious
Confirms a press landed before the request returns
Explains a relationship a static image cannot, such as how a process flows
Covers a wait so the delay feels shorter than it measures

If the answer is that it looks nice, cut it. Decoration is not a purpose, and it is the reason most interfaces feel over-animated.

Sort The Purpose Into A Category

"State the purpose" is hard to act on with nothing to choose from. Four categories cover almost every animation worth shipping. Pick the one the animation is for, then judge it against what that category is supposed to deliver.

Physical. Motion that makes the interface obey the rules of the physical world: a panel that takes a moment to open, a card that lifts under the cursor, a control that gives when pressed. Nothing in the world changes state between one frame and the next, and an interface that does feels artificial. Individually these are almost invisible; they work by accumulating
Explanatory. Motion that carries information static content cannot: how a multi-step process flows, how two things connect, what a feature actually does. Judge it on whether someone understands the thing afterwards, not on whether it looked good
Attention-directing. Motion that puts the eye somewhere specific, because humans detect movement before they detect anything else. Error feedback belongs here: a field that shakes on an invalid submit is directing attention, not decorating. So does a nudge toward an action the user has not noticed. This category does the most damage when it misfires, because unwanted movement in the periphery is impossible to ignore
Emotional. Motion that exists for payoff and memorability: a celebration on completion, a signature flourish on a landing page. It does not improve usability, and that is not a disqualification. In a market of comparable products, being the one that made someone smile is worth something

The categories are not mutually exclusive. A hover effect on a feature card can be physical and explanatory at once, and that overlap is usually a sign the animation is earning its place.

An animation that fits none of the four is the one to cut. That is the whole value of the taxonomy: it turns a vague feeling that something is excessive into a specific failed test.

Some teams use a different split, into transitions, supplements, feedback, demonstrations and decorations. Either works. Having a system matters more than which system, because the point is to force the question, not to win the argument about labels.

Explanatory Motion Needs A Static Equivalent

Explanatory motion is the one category with a hard accessibility obligation. A user with reduced motion enabled will never see the animation, so if the animation is the only place the explanation lives, that user gets nothing.

Ship a static version that carries the same meaning: a labelled diagram, an annotated figure, the same steps as text. Not a decorative placeholder, the actual explanation
A frozen first frame is not a substitute. The first frame is the "before" state. It shows the setup and none of the change, which is precisely the part the animation was carrying
Treat the animation as the supplement and the static content as the source. Building it in that order means the reduced-motion path exists by default instead of being retrofitted
accessibility.md owns the mechanics of detecting and honouring the preference

Recognise When Motion Hurts

Animation costs time. On anything repeated, that cost compounds until the interface feels slow.

Remove motion when:

The action repeats many times a session, such as typing, list navigation, or toggling
The user is mid-task and the movement pulls attention away from where they are working
The motion carries no information and only delays the result
The same element animates on every keystroke or every scroll event

Hover feedback in a list is the common offender. A row that eases its background over 200ms lags the cursor as the user scans down the list, so several rows sit part-lit at once and none of them reads as the current one. Make a hover colour change instant. Transition the states a user arrives at and stays in, not the ones they sweep through.

Instant is a legitimate choice. Some design systems deliberately make frequent interactions immediate, because responsiveness matters more than expressiveness at that frequency.

Match Motion to the Product's Character

Duration and easing carry tone the way typography does. Slower, softer motion reads as considered and premium. Fast, near-instant motion reads as efficient and technical. Neither is correct in isolation, but a mismatch is felt immediately.

Decide the character once, then apply the same durations and curves everywhere
A single component moving differently from its neighbours reads as a bug, not a flourish
Marketing pages can carry more motion than product surfaces, because the visit is short and the goal is explanation

Dose Motion, Do Not Sprinkle It

Motion is an ingredient you dose consistently across a whole product, not a garnish added per component. Two components with the same job should move the same way, and every animation should be derivable from a small number of stated ideas.

The most common shape of over-animation is not too much motion, it is unrelated motion. A page ends up as a collection of individually impressive effects, each borrowed from somewhere different, with no shared concept underneath. It reads as generic precisely because each effect's design language appears nowhere else on the page: the effect has no relatives, so it lands as a demo rather than as part of a product.

Write down the one or two motion concepts the product uses, in words. For example, interactive things brighten on hover, or surfaces settle in from the direction they came from
Then vary the execution while keeping the concept. A nav link, a card and a menu item can all express "brightens on hover" differently and still feel like one system
Share the concept, not necessarily the code. One universal animated component applied everywhere goes stale fast; the same idea re-expressed per surface does not
If a new effect cannot be traced back to a stated concept, either extend the concept deliberately or drop the effect
The narrower the visual language, the easier this gets. A monochrome palette rules out hue shifts on hover and leaves lightness, which is a constraint that does the design work for you

Train the Eye by Comparison

Judgement improves through deliberate comparison, not exposure. Put two versions side by side, pick the better one, then force yourself to say why in words.

Name the fault precisely: the easing is wrong, the duration is too long, the origin is off
A vague reaction like it feels cheap cannot be acted on, so keep pushing until it is specific
Rebuild motion you admire from scratch, since copying values teaches less than reproducing the result
Review your own work a day later, when the details you stopped noticing become visible again

This matters more as generated code improves. Motion that runs without errors can still feel mediocre, and a generator cannot see the result it produced. Someone has to judge the output, which means the ability to spot and name the fault is the part that stays scarce.

Audit a Surface for Motion Opportunities

Do not start an audit by adding entrances to everything that is currently static. First map the surface: its primary task, the frequency of each action, the product's character, the existing motion tokens, and the implementation stack. Then collect moments where state changes, hierarchy shifts, feedback arrives, or a wait occurs.

Pass every candidate through four gates:

Frequency: Will this repeat enough that its duration becomes friction?
Purpose: Does motion explain origin, continuity, feedback, progress, or cause and effect?
Response: Does the useful state become available immediately, or is animation making the person wait?
Interference: Could movement steal attention from typing, reading, selection, or another active task?

Keep the report short enough to prioritize. Five strong opportunities are more useful than twenty generic suggestions. For each one, name the trigger, purpose, likely technique, reduced variant, and why it ranks above the others. Add a Keep static list for tempting candidates that failed a gate; rejected ideas are part of the judgement, not missing work.

End with a verdict on the whole surface: too little motion to explain state, coherent as-is, or over-animated. That prevents local improvements from producing a noisy system when combined.

Animation Judgement