AI Avatar Idle
The assistant mark keeps a slow breath with a halo swelling a half-beat behind it, so the panel reads as awake.
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 Avatar Idle
*
* The assistant mark at rest: a slow breath in the tile, a halo that
* swells a half-beat behind it, and the glyph turning a few degrees —
* enough for the surface to read as awake rather than frozen.About this pattern
The state an assistant spends most of its life in: nothing running, nobody typing, and a surface that still has to look switched on rather than crashed. A very slow scale cycle in the tile, a halo offset from it by a fraction of a beat, and a few degrees of turn in the glyph — amplitudes small enough that the eye registers presence without being pulled back to it. The offset matters: two elements pulsing in lockstep read as a heartbeat monitor, which is a different and much more urgent message than idle.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- AI assistant
An ambient mark that keeps a slow cycle between requests so the device reads as attentive.
Related patterns
- Regenerate SwapThe old answer dissolves upward while the new one rises into the space it left.
- Agent Step TimelineEach finished stage of an agent run ticks over and grows its connector toward the one after it.
- AI Result RevealThe result card rises into place while its confidence value counts up to the final number.