What does motion design for AI actually involve?

Motion design for AI is the craft of making waiting, generating and uncertainty feel understandable. Traditional interfaces mostly animate transitions between known states: a menu opens, a card slides in, a button confirms. AI features spend much of their time in unknown states: the model is thinking, text is streaming, a result might change, an agent is working somewhere out of view. Motion is the main tool you have to explain what is happening in those moments.

The short answer for product and design leads: stop treating AI latency as a loading problem to hide behind a spinner. Treat it as a design material. The best AI interfaces show progress that means something, reveal output in a readable rhythm, signal confidence and change honestly, and settle clearly when the work is done. Get this right and a slow model feels deliberate. Get it wrong and a fast model feels broken.

Why the spinner stopped working

The spinner was designed for a world where waits were short and outcomes were binary. Data loads, or it fails. A few hundred milliseconds of rotation communicated "wait" well enough.

AI changed both assumptions. Waits are longer and more variable: a quick answer may appear almost instantly, while a reasoning model or an agent task can take many seconds or minutes. Outcomes are no longer binary: output arrives in pieces, can be revised, and may be partly right. A spinner says nothing about any of that. Worse, an indefinite spinner on a long task reads as a freeze, and users give up or retry, which often makes things slower.

Meanwhile users have learned new expectations from the AI tools they use every day. They are used to text that streams word by word, to visible "thinking" summaries from reasoning models, and to agents that narrate their steps. A product that shows a blank panel and a spinner now feels older than it is.

Spinner-era feedback vs AI-native feedback

Here is how the job of motion changes, state by state.

The verdict: the spinner is still fine for sub-second waits. For anything longer, replace it with feedback that describes real progress.

The Four Waiting States

A useful framework is the Four Waiting States. Most AI features move through some or all of them, and each needs its own motion treatment.

1. Acknowledged. The request has been received. This should happen within a fraction of a second, even if the model has not started. A subtle echo of the user's input, a pressed state that resolves, or the request moving into the conversation all work. The goal is to remove any doubt that the click registered.

2. Working. The model or agent is processing and nothing is visible yet. Most products put a spinner here, and it is where the biggest gain is. Show named stages when you have them ("reading your files", "comparing options", "drafting"). If you do not have real stages, use a calm, low-contrast ambient motion rather than a busy one. Busy motion makes waiting feel longer.

3. Streaming. Output is arriving. The mistake here is revealing text as fast as tokens arrive, which produces uneven bursts that are tiring to read. Smooth the reveal to a steady pace, keep the layout stable so paragraphs do not jump, and avoid a cursor that flickers aggressively. For structured output like tables or cards, reveal the frame first and fill it in, so the eye knows where things will land.

4. Settled. The output is final. This transition is underrated. Users need a clear signal that the result will not change any more, because that is when they can trust it, copy it or act on it. Stop all ambient motion, bring in the action buttons (copy, regenerate, accept) and let the content sit still.

Many AI interfaces blur states 3 and 4, so users are never sure whether they are reading a draft or an answer. Separating them clearly is one of the cheapest improvements available.

Motion for uncertainty and change

AI output is not always stable. It may be regenerated, corrected by a follow-up step, or partially confident. Motion can carry that information without adding more words.

When content is revised, animate the change instead of swapping it silently. A brief highlight on the changed sentence, fading back to normal, tells the user exactly what moved. When a result is provisional (for example, a value the agent still needs to verify), give it slightly lighter styling and a gentle transition to full weight once confirmed. When the user regenerates, keep the previous version reachable and animate between them, so comparison feels natural rather than destructive.

These are small touches, and they belong in the design system as reusable tokens and components, not as one-off animations. The same principles behind good UI/UX design apply: consistency beats cleverness. Error states deserve the same care, and they are covered in more depth in the article on AI product design.

Where to be careful

Motion that is only decoration makes waiting worse. Elaborate shimmer effects, orbiting particles and pulsing gradients look good in a demo and become irritating on the tenth request of the day. The more often a state appears, the quieter its motion should be.

Respect reduced-motion preferences. Users who turn off animation still need to know what state the system is in, so every motion signal needs a static equivalent: a label, an icon change or a color shift.

Be honest. Fake progress that races to near-complete and then stalls teaches users that your indicators lie. If you cannot measure progress, show activity and stages rather than a percentage.

Finally, performance is part of motion design. Streaming reveals and animated layouts must stay smooth on mid-range phones. A janky animation during a wait makes the product feel slower than a still screen would. This is especially true in mobile app design, where the model call and the animation compete for the same limited resources.

Frequently asked questions

Should AI interfaces still use loading spinners?

Only for very short waits. For anything longer than a moment, a spinner hides useful information. Replace it with named stages when you have them, or calm ambient motion when you do not, and move to a streamed reveal as soon as output starts arriving.

How fast should streamed AI text appear?

At a steady, readable pace rather than as fast as tokens arrive. Smoothing the reveal avoids bursts and jumps, keeps the layout stable and lets users read along. The right speed is one that a person can follow without feeling held back.

How do you show that an AI answer is finished?

Make the settle state explicit. Stop all ambient motion, remove any cursor or typing indicator, and bring in the actions such as copy, accept or regenerate. That transition tells users the content will not change and is ready to use.

How can motion show AI uncertainty?

Give provisional content lighter visual weight and transition it to full weight once confirmed. Highlight revised sections briefly so users see what changed. Keep earlier versions reachable when users regenerate. Each of these carries uncertainty without adding extra explanation.

Does motion design matter for AI agents that run in the background?

Yes, but the job changes. For background tasks, motion should summarize rather than perform: a step list that ticks off real events, a clear notification when the task completes, and a settled result view the user can review when they return.

A quick audit you can run this week

Open your AI feature and record yourself using it three times with different requests. Watch the recording and mark each of the four waiting states. For each one, ask two questions: does the screen tell me what is happening, and does it tell me when it is safe to act? Wherever the answer is no, you have found your next motion design task.

Digcy designs product experiences across web and mobile, including the motion systems behind AI features. If yours feels slower than it should, get in touch.