The orb is what an AI product uses instead of a spinner. It is doing a job no loading indicator can: saying that something is listening, thinking or speaking, in a way that reads as presence rather than as a wait. That is why it appeared everywhere within a year of voice interfaces becoming ordinary.
65 public components on 21st have "orb" in the name. They split by what the orb is reacting to, which is the only distinction that matters.
Reacting to the microphone
The strongest case: the orb responds to input level, so the reader can see they are being heard. Voice Powered Orb by Isaiah is the WebGL version driven by audio, and Siri Orb by Umair Waheed is the platform-flavoured take.
The implementation is an AnalyserNode on the microphone stream, feeding an amplitude value into the shader or the transform. The detail people miss: smooth the value over several frames, because raw amplitude jitters and an orb that twitches reads as broken rather than responsive.
The permission question comes first. A microphone prompt on page load is the fastest way to lose someone; ask when the reader presses a button that clearly starts listening, and make stopping obviously available, as the audio guide argues about anything that plays or records.
Reacting to the model
The orb as a thinking state: it pulses while a response is generated and settles when it arrives. Neon Orbs by Le Thanh is the ambient version, and the shader backgrounds in the shader guide are the same technique at full-screen scale.
This is where an orb genuinely beats a spinner: it can express three states - idle, working, speaking - with no text and no layout change. What it cannot do is express progress, so anything with a countable unit still wants a number.
Reacting to nothing
Decorative orbs: a glowing sphere because the page needed a focal point. Orbiting Circles by dillionverma, Orbiting Circles with Globe by ShadcnSpace and Orbiting Skills by olovajs are the integration-ring pattern that every platform page uses to say "we connect to everything".
MultiOrbitSemiCircle by Ruixen UI is the arc variant, and 3d orbit gallery by shadway turns the ring into a gallery.
What it costs
Most orbs are one of three implementations, and the cost differs by an order of magnitude between them.
CSS and SVG. A gradient, a blur and a scale animation. Effectively free, and enough for a decorative or thinking-state orb.
Canvas 2D. Particles or rings drawn per frame. Cheap at small sizes and worth capping the frame rate, per the particles guide.
WebGL. A real shader with noise and displacement. The expensive one, and the only one that looks genuinely liquid. The shader guide has the four settings that make it affordable: cap the pixel ratio, halve the frame rate, stop when offscreen, ship a static fallback.
The accessibility half
An orb is a status indicator that conveys its state visually. That state has to exist in text as well.
Put the container in a live region and announce transitions - "Listening", "Thinking", "Speaking" - or a screen reader user has no signal at all. Under prefers-reduced-motion, render a static state and rely on the text. And never make the orb the only control: pressing it should not be the only way to stop, because a circle with no label is not an obvious button.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| CSS gradients and blur | Decorative and thinking-state orbs, for free | No audio reactivity |
Web Audio AnalyserNode | Driving an orb from a real microphone level | You smooth and map the values |
| A shader | The genuinely liquid look | A WebGL context and a fallback |
| 21st | Voice orbs, orbiting rings and ambient spheres | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue.
Frequently asked
- How does a voice orb react to the microphone?
- An AnalyserNode on the microphone stream feeds an amplitude value into a shader or a transform. The detail most implementations miss is smoothing that value over several frames, because raw amplitude jitters and an orb that twitches reads as broken rather than responsive.
- When is an orb better than a spinner?
- When there are three states rather than one. An orb can express idle, working and speaking with no text and no layout change, which is exactly what a voice or streaming interface needs. What it cannot express is progress, so anything with a countable unit still wants a number.
- What does a voice orb cost to render?
- It depends entirely on the implementation. CSS with a gradient, a blur and a scale is effectively free. Canvas 2D with particles is cheap at small sizes if you cap the frame rate. WebGL with a noise shader is the expensive one and the only one that looks genuinely liquid.
- How do you make an orb accessible?
- Put it in a live region and announce its transitions in words: listening, thinking, speaking. Render a static state under prefers-reduced-motion. And never make the orb the only control, because a circle with no label is not an obvious button and stopping has to stay available.