AI thinking animations: how to design loading states that feel intelligent

Most AI products show the same three bouncing dots while the model works. ChatGPT, Claude, Gemini, and every AI chatbot built with vibe coding tools use some version of this pattern. The dots pulse. The user waits. Nothing communicates what is happening, how long it will take, or whether the system is still working at all.

The AI loading state is a missed design opportunity. A well designed thinking animation does three things: it communicates what the AI is doing, it reduces perceived wait time, and it makes the interface feel more intelligent than a generic spinner. This article covers how to design an AI thinking animation that does all three, using animated dots on a canvas instead of a static loading indicator.

Why generic loading spinners fail in AI interfaces

A standard web request completes in 200 to 800 milliseconds. An AI task takes 2 to 30 seconds, sometimes longer. The loading indicator designed for a 400ms fetch is not suited to a 15 second reasoning chain. The gap between those durations is where user trust breaks down.

A generic spinner gives no feedback about progress or activity type. The user cannot tell whether the model is searching, reasoning, composing, or stuck. After about five seconds of an unchanging animation, most users assume something has gone wrong. They refresh, they retry, they leave. Research on animated progress indicators shows that purposeful motion reduces perceived wait time by up to 40% compared to static or repetitive spinners. The animation does not make the model faster. It makes the wait feel shorter.

The three bouncing dots have a second problem: they are identical across every product. When your AI loading indicator looks exactly like every other chatbot's loading indicator, you lose the moment where your product could feel distinct. The thinking state is one of the most viewed screens in any AI interface. Treating it as a design surface rather than a placeholder changes how the product feels.

The nine states of an AI thinking animation

Each stage of an AI pipeline has a different character. A well designed thinking animation reflects that character through subtle changes in motion pattern, speed, and dot arrangement. The visual distinction does not need to be dramatic. Small shifts in rhythm and shape communicate state clearly without requiring the user to decode a legend.

1. Working

General computation. Dots orbit steadily around a centre point. The motion is even and continuous, communicating active processing without urgency. This is the default state when you know the model is running but the specific activity is not yet classified.

2. Searching

Retrieving external data. Dots fan outward and contract, like a pulse scanning for information. The expansion and retraction cycle reads as the system reaching out and pulling results back. Use this when the model is calling a search API, querying a database, or browsing the web.

3. Solving

Focused reasoning. Dots tighten into a dense cluster and rotate slowly. The compression communicates concentration. This state maps to chain of thought reasoning, mathematical computation, or code analysis.

4. Listening

Receiving input. Dots settle into a gentle idle pulse, barely moving. The stillness with a slight rhythm reads as attentive. Use this during voice input or while the user is typing a long message.

5. Connecting

Calling an external API or service. Dots form a directional stream, flowing toward a point. The linear motion communicates an outbound request. When the response arrives, the stream reverses direction.

6. Weaving

Combining multiple sources. Dots braid around each other in interleaving paths. The interlocking motion reads as synthesis. This state is suited to retrieval augmented generation, multi-document summarisation, or any task where the model merges inputs from different sources.

7. Composing

Generating output. Dots emerge from the centre and flow outward in a continuous stream. The outward motion reads as creation. This is the state for token generation: the model is writing the response.

8. Breathing

Idle but ready. Dots drift in a slow, organic float with no fixed orbit. The motion reads as alive and available without being active. Use this when the AI agent is waiting between tasks or when no request is pending.

9. Shaping

Refining a result. Dots settle into a form and make small adjustments, shifting positions incrementally. The near-stillness with micro-corrections reads as polishing. This state maps to the final pass of a generation: editing, formatting, or adjusting the output before delivering it.

Designing with dots instead of spinners

Dots work better than spinners for AI loading states because they feel organic. A spinner is mechanical: it rotates at a fixed speed and communicates "waiting." Dots can breathe, cluster, expand, and flow. They feel alive. That quality matters in an AI interface because the product is presenting itself as intelligent. A mechanical spinner undermines that framing. An organic, responsive animation reinforces it.

The most effective approach is to place dots on a sphere and project them to 2D. Each dot has 3D coordinates (x, y, z) that are projected onto the canvas plane. This creates natural depth: dots closer to the viewer appear larger and brighter, dots further away appear smaller and dimmer. The sphere provides an invisible structure that makes the motion feel cohesive rather than random.

Different states rearrange the dots on the sphere. Orbiting dots trace rings around the equator. Braiding dots follow figure-eight paths across the poles. Clustering dots converge toward the centre. The transitions between states are smooth because the dots interpolate from one set of positions to another rather than jumping. The sphere topology keeps every arrangement looking unified.

Use canvas rather than SVG for the rendering. When you are animating dozens of dots with per-frame position updates, canvas gives you direct pixel control and better performance than updating dozens of SVG elements in the DOM. Multiply the canvas dimensions by window.devicePixelRatio and scale the context to render crisp dots on retina displays. Without DPR-aware rendering, the dots appear blurred on high density screens.

Performance and accessibility

An AI thinking animation runs continuously while the user waits, which means performance and accessibility are not optional considerations. A poorly optimised animation drains battery on mobile, drops frames on low-end hardware, and creates accessibility barriers for users with motion sensitivity.

Use requestAnimationFrame for the render loop, never setInterval. requestAnimationFrame synchronises with the display refresh rate, pauses automatically when the tab is backgrounded, and gives the browser control over scheduling. setInterval fires regardless of tab visibility and can stack calls when the frame takes longer than the interval.

Add an IntersectionObserver to pause the animation when it scrolls off screen. If the canvas is not visible, there is no reason to compute dot positions and draw frames. This matters in chat interfaces where the thinking indicator may scroll above the viewport as the user reads earlier messages.

Respect prefers-reduced-motion. When the user has enabled reduced motion at the OS level, replace the animated orb with a static arrangement of dots that still communicates "active" through a subtle opacity pulse or no motion at all. A media query check at initialisation handles this: window.matchMedia('(prefers-reduced-motion: reduce)').matches. Skip the orbit calculations entirely and render a single static frame.

Canvas is more performant than SVG for this use case. Updating thirty SVG circle elements per frame triggers layout recalculation in the browser. Drawing thirty filled arcs on a canvas does not. The performance gap increases with the number of dots. At sixty dots, SVG will drop frames on mobile devices. Canvas stays smooth.

The thinking orb templates on Moon implement all of these: DPR-aware canvas rendering, requestAnimationFrame, IntersectionObserver pausing, and prefers-reduced-motion support. The source is a single self-contained HTML file that runs without dependencies.

How to use a thinking animation in your vibe coded product

Copy the thinking orb template from Moon. Paste it into your project as a component. The template exposes a state property that controls which animation plays. Map that property to your AI pipeline stages.

When the user sends a message, set the state to working. When your backend calls a search API, switch to searching. When the model starts generating tokens, switch to composing. The animation transitions smoothly between states because the dots interpolate positions rather than cutting. The user sees continuous, meaningful motion throughout the entire request lifecycle.

If your AI product is built with Bolt, Replit, Claude Code, or Lovable, paste the template into your prompt and instruct the tool to use it as the loading indicator. The AI tool will integrate the canvas animation into your component structure. The thinking orb replaces the default bouncing dots with an animation that communicates activity, differentiates your product, and respects user preferences.