Use these where an assistant is doing something the person is waiting on. Every piece takes the brand color, so inside a themed chat it follows the chat's theme, and every piece keeps saying "working" under reduced motion without moving.
A moving mark and a verb that changes every few seconds, like "Imagining…" or "Noodling…". The first render always shows the first verb, so server and client agree; the order shuffles after mount.
Pass verbs to give a product its own voice, or spread workingVerbs to add to the default list. label shows one fixed line instead, for a step you can name.
showElapsed counts seconds since startedAt (or since the indicator appeared), and detail adds a quiet hint after it.
The animation for a voice conversation. Each state moves differently: idle breathes, listening ripples, thinking swirls and speaking pulses like syllables. Give it the microphone stream while listening and the reply's <audio> element while speaking, and it follows the real sound. Use orb for a full-screen voice mode and bars for a composer or a call bar.
Levels are written straight to CSS variables every frame, so a live microphone never re-renders React. When your voice SDK already gives you a loudness number, pass it as level instead. To drive something of your own, useAudioLevel(source) returns the same loudness from 0 to 1.
A companion for an assistant: one soft, single-color shape with a pair of eyes. It idles, listens, thinks, speaks and sleeps, with a mood on top (happy, surprised, sad, skeptical, wink, focused, determined). By default the eyes are tiles of the Once UI mark, and while it thinks they turn like the LogoSpinner. When it looks around, the eyes slide over the body and the one nearer the edge narrows, as if the body were round; while speaking, the body pulses with the reply's audio.
Every part of the look is a prop, so two products never have to share a character. color takes a scheme or any CSS color and every shade comes from it; roundness, aspect or your own bodyPath set the outline; surface is glossy, matte, flat or glass. eyes is tile, pill, round, wide, dot or your own path, placed with eyeSize, eyeSpacing and eyeHeight. mouth, brows and cheeks add features that follow the mood, accessory draws your own SVG with the body, and personality makes it calm or bouncy. Or pass a seed (a product name, a user id) and mascotLook(seed) picks a whole look; props you pass still win.
The four tiles of the Once UI mark, moving. twist parts the tiles, turns a quarter and clicks them back; wave lifts one tile at a time. Keep Spinner for buttons and fields, and use this one where the product's own loader belongs.
WorkingIndicator is one status region with a fixed name, "Working" unless you pass ariaLabel, so a screen reader announces it once instead of reading every new verb. With reduced motion the tiles stop moving and fade in turn, the verbs swap without sliding and the shimmer is off.
VoiceVisualizer is a status region that announces its state ("Listening", "Speaking"). With reduced motion its stand-in animations stop; real audio still shows, as glow on the orb and as bar height, because that is feedback the person needs while they talk.
Mascot is one image named for what it is doing ("Assistant, thinking"). With reduced motion it holds still and keeps its poses and expressions; it does not blink, bob or pulse on its own.