AI Thinking Pulse
A calm breathing dot with a soft expanding ring — the app is thinking, not stuck.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · AI Thinking Pulse
*
* A calm breathing dot with a soft expanding ring, for open-ended
* AI waiting states (analyzing, generating, streaming).
*About this pattern
Open-ended waiting states for AI inference: analyzing an image, generating a reply, streaming a response. A spinner promises determinate progress it can't deliver; a breathing pulse communicates "alive and working" without promising when it will finish. The core dot breathes on a slow cycle while a ring expands and fades — quiet enough to sit inside a chat bubble without demanding attention.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- AI assistant
Breathing dot shown while a response is being generated.
Related patterns
- Agent Step TimelineEach finished stage of an agent run ticks over and grows its connector toward the one after it.
- Retry Backoff CountdownA ring empties over the wait while the seconds count down to the next automatic attempt.
- Reasoning Steps UnfoldA collapsed trace line opens into numbered reasoning steps, each arriving as the panel grows.