What animations should AI products use during loading?

Use skeleton screens with a subtle shimmer to indicate content is loading. For chat interfaces, show a pulsing dot indicator or animated ellipsis. For generation tasks, use a progress bar if duration is predictable or a looping animation with status text if not. Avoid static spinners that give no sense of progress.

How do you animate streaming text from an LLM?

Render tokens as they arrive with a blinking cursor at the insertion point. Use a slight fade-in or slide-up per word group for readability. Auto-scroll the container smoothly rather than jumping. For markdown content, progressively render formatted blocks. The key is making the stream feel natural and readable, not jarring.

What motion durations work best for software products?

Micro-interactions like button presses should be 100-150ms. Content transitions use 200-300ms. Page-level transitions can go up to 400-500ms. Use ease-out for entrances (elements decelerating into place) and ease-in for exits. Never exceed 500ms for UI animations as they will feel sluggish to users.

How does animation reduce perceived latency in AI products?

Animation fills the gap between a user action and the AI response. Streaming text feels faster than waiting for a complete response. Skeleton screens make 2-second loads feel shorter than blank screens. Progressive reveals keep users engaged during generation. Studies show animated feedback can make wait times feel up to 40% shorter.

Should AI products use reduced-motion settings?

Yes. Always respect the prefers-reduced-motion media query. Replace animations with instant state changes or simple opacity fades. Never remove the informational value, only the motion. This is both an accessibility requirement and a best practice for users who experience motion sickness or vestibular disorders.

AI-Native DesignPattern Posts

Motion Design for AI Products: Less Is More

Loading states, streaming animations, and transitions that feel fast.

The Prompt Engineering Project February 20, 2025 6 min read

Quick Answer

AI product animations reduce perceived latency and build user trust by providing visual feedback during model inference. Key patterns include skeleton shimmer states, streaming text cursors, progressive content reveals, tool-use spinners, and confidence-based transitions. Keep durations between 150-300ms for interactions and use ease-out curves. Every animation should communicate system status, not just decorate.

Motion design in AI products is a discipline of restraint. The instinct is to add animation everywhere -- loading spinners, bouncing indicators, progress bars, celebratory confetti. But in a professional tool where users spend hours per day, every unnecessary animation is a distraction. Every motion that does not communicate state or guide attention is noise. The best motion design in AI interfaces is the kind users never consciously notice, because it aligns so precisely with their expectations that it feels like the system is simply responding naturally.

This article covers the motion patterns that work in AI product interfaces, the anti-patterns that degrade the experience, and the token-based system the Prompt Engineering Project uses to keep animation consistent, performant, and accessible.

Streaming Text Animation

The defining interaction of modern AI products is streaming text generation. Tokens arrive from the model one at a time, and the interface renders them as they appear. This is not decorative animation. It is a direct representation of the system doing work in real time, and it is the single most important motion pattern in any AI interface.

The key to good streaming text is word-by-word appearance rather than character-by-character. Character-level rendering creates a typewriter effect that feels performative and slow. Word-level rendering matches how humans read -- in chunks, not letters -- and communicates progress without demanding attention. The text simply appears at the pace the model generates it, and the user reads along naturally.

Avoid adding fade-in effects to individual tokens. Each word should appear instantly at full opacity. The motion is in the flow of new content arriving, not in the rendering of each piece. Adding per-token transitions creates a shimmering effect that is visually fatiguing over long outputs and adds computational overhead that compounds with output length.

The best motion design in AI interfaces is the kind users never consciously notice, because it aligns so precisely with their expectations that it feels like the system is simply responding naturally.

Skeleton Loading States

Before a model begins generating output, the interface must communicate that work has been initiated. Skeleton loading -- showing the expected shape of the output with placeholder blocks -- is the correct pattern here. It sets spatial expectations. The user sees where the response will appear, how much space it will occupy, and that the system has acknowledged their request.

Skeleton states should match the actual layout of the expected output. If the model will return a code block, show a skeleton that resembles a code block. If it will return a paragraph of text, show lines of varying width. The goal is to reduce layout shift when real content arrives. A skeleton that bears no resemblance to the final output is just a different kind of loading spinner.

Skeleton placeholders should use a subtle pulse animation at the duration-slow token (500ms) to indicate activity. A static skeleton looks broken. An aggressively animated skeleton looks anxious. A slow, gentle pulse communicates calm confidence that the system is working.

Subtle Pulse Animations

When a model is processing but has not yet begun streaming output, the interface needs a thinking indicator. The correct pattern is a subtle opacity pulse on a small, contained element -- a dot, a short bar, or the cursor position where text will begin to appear. The pulse should cycle between two close opacity values, such as 0.4 and 1.0, on a slow cadence. This communicates activity without urgency.

The critical constraint is containment. A pulse animation on a small element is informative. A pulse animation on the entire response container, or on multiple elements simultaneously, creates visual noise that pulls focus from whatever the user was doing while waiting. The thinking state should be noticeable when the user looks for it, not demanding when they are looking elsewhere.

Transition Easing

Every transition in the system uses the PEP ease curve: cubic-bezier(0.25, 0.46, 0.45, 0.94). This curve accelerates gently and decelerates smoothly, producing motion that feels organic without being dramatic. It avoids the mechanical feel of linear easing and the exaggerated bounce of aggressive ease-out curves. For a professional tool, this is the right balance: motion that feels natural and gets out of the way.

Avoid ease-in curves for UI transitions. Ease-in starts slow and accelerates, which makes elements feel heavy and sluggish at the moment the user is paying the most attention -- the beginning of the transition. Ease-out or custom curves that front-load the movement create the perception of responsiveness even when the total duration is identical.

Anti-Patterns: What to Avoid

Three motion patterns are endemic in AI products and all three are wrong. Spinners promise completion. They communicate that the system is working toward a definite end state, which is misleading for AI operations where response time is unpredictable and the output length is unknown. A spinner that runs for two seconds feels fine. A spinner that runs for thirty seconds feels broken. AI responses regularly take thirty seconds or more.

Bouncing dots are the second anti-pattern. Three dots bouncing in sequence became the default chat thinking indicator, borrowed from consumer messaging apps. In a professional context, they read as childish and unserious. They also communicate nothing about what the system is doing -- they are pure decoration masquerading as status information.

Progress bars are the third and most damaging anti-pattern. A progress bar asserts a known total and a measurable position within it. AI model inference has neither. Every progress bar in an AI product is either fake -- advancing on a timer unrelated to actual progress -- or stuck at an arbitrary percentage while the model works. Users learn quickly that the progress bar lies, and that erodes trust in every other status indicator in the interface.

Never use a progress bar for AI model inference. There is no reliable way to estimate completion percentage for token generation, and a dishonest progress indicator damages user trust more than no indicator at all.

PEP Motion Tokens

The Prompt Engineering Project defines motion as a token system, just like color and spacing. Three duration tokens cover every animation in the interface. Faster interactions -- hover states, button presses, focus rings -- use duration-fast. Standard transitions -- panel reveals, accordion expansions, tooltip appearances -- use duration-base. Slower, ambient animations -- skeleton pulses, thinking indicators, background transitions -- use duration-slow.

This constraint is intentional. Three durations are enough. Adding more creates inconsistency, because developers will choose different values for similar interactions and the interface will feel disjointed. A small token set forces consistency the way a small color palette forces visual coherence.

motion-tokens.css

/* -- PEP Motion Tokens -------------------------------- */

:root {
  /* Duration tokens */
  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   500ms;

  /* Easing token */
  --ease-pep:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* -- Usage examples ----------------------------------- */

.button {
  transition: background var(--duration-fast) var(--ease-pep),
              color var(--duration-fast) var(--ease-pep);
}

.panel-reveal {
  transition: transform var(--duration-base) var(--ease-pep),
              opacity var(--duration-base) var(--ease-pep);
}

.skeleton-pulse {
  animation: pulse var(--duration-slow) var(--ease-pep) infinite alternate;
}

@keyframes pulse {
  from { opacity: 0.4; }
  to   { opacity: 1.0; }
}

/* -- Reduced motion ----------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Respecting prefers-reduced-motion

The prefers-reduced-motion media query is not optional. Vestibular disorders affect a meaningful percentage of users, and animations that are subtle and pleasant for most people can cause nausea, dizziness, or disorientation for users with these conditions. Every animation in the system must be disabled or reduced to near-zero duration when the user has indicated a preference for reduced motion at the operating system level.

The implementation is straightforward: a single media query block that overrides all animation and transition durations to a near-instant value. This preserves the final state of every transition -- elements still move to their destination positions -- but eliminates the perceptible motion between states. The result is an interface that functions identically but without the motion that triggers vestibular responses.

Test your interface with prefers-reduced-motion enabled. On macOS, this is System Settings, Accessibility, Display, Reduce motion. If any animation still plays visibly after enabling this setting, your reduced-motion implementation is incomplete.

Key Takeaways

Streaming text should render word-by-word at full opacity. The flow of new content is the animation -- do not add per-token transitions.

Skeleton loading states should match the expected output shape and use a slow, subtle pulse to indicate activity.

Avoid spinners, bouncing dots, and progress bars. Spinners promise completion, bouncing dots are unserious, and progress bars lie about AI inference timing.

Three duration tokens (150ms, 300ms, 500ms) and a single easing curve are sufficient for an entire AI product interface.

prefers-reduced-motion is not optional. A single media query block disabling all animation durations ensures accessibility for users with vestibular disorders.

Frequently Asked Questions

Common questions about this topic

Building a Design System Documentation Site The Typography Stack: Why Font Choice Signals Product Quality

AI-Native Design