Skip to content
Sign in

AI Orbs for React and Tailwind

An assistant needs a face, and most products now give it an orb. These spheres, blobs and glowing shapes stand in for the model and change as it listens, thinks and speaks. Some are drawn with shaders, others with plain CSS, and the best ones stay smooth on an ordinary laptop. Watch each one move live, then install it and drive its states from your own voice or chat events.

Ai Blob Warp
Ai Blob Warp

About AI orbs

AI orbs are the animated spheres and blobs that represent an assistant on screen, the way Siri's glowing ball and many voice agents do. They breathe while idle, ripple while listening, swirl while thinking and pulse with the voice while speaking, drawn with shaders, canvas or layered CSS gradients.

Pick an orb that can show distinct states clearly, then drive those states from real events: microphone input level, a pending request, audio output. Keep it light on the GPU, pause it when off screen, and give it a text label so people who can't see the motion still know what's happening.

Frequently asked questions

A moving shape, usually a sphere or blob, that stands in for an assistant. It shows whether the assistant is idle, listening, thinking or speaking, giving a voice product something to look at.

Layer a few blurred, coloured gradients inside a circle and rotate or morph them at different speeds. Shader versions use noise to distort the shape, and a glow behind it adds depth.

Read the microphone with the Web Audio API's AnalyserNode, take the volume each frame and feed it into the orb's scale, distortion or brightness. Smooth the value so it doesn't jitter.

CSS gradients and blur are simpler and work everywhere, but get heavy at large sizes. WebGL shaders give richer motion at a steady cost. Either way, test on an ordinary laptop and phone.

At least idle, listening, thinking and speaking, each visibly different. Add an error or muted state if your product has one, and switch between states with a short transition.

Yes. A small orb beside the composer or at the top of a thread can show when a reply is being prepared, then settle once text arrives.

Pause it when the tab is hidden or the orb is off screen, lower the frame rate while idle and avoid redrawing large blurred layers every frame.

Explore more