Orb
An animated dotted sphere for what an AI agent is doing.
Installation
import { Orb } from 'nooxit-design-system/components/ai/orb';It needs nothing else: the dots are SVG, drawn in currentColor.
Usage
<Orb />
<Orb state="working" />
<Orb state="searching" variant="lighthouse" size={32} className="text-agent" />States
Each state is one thing an agent does, and some come in more than one look
(variant, default if left out).
state | What the dots do | Variants |
|---|---|---|
base | The sphere turns slowly | — |
working | A ring of light runs down it | gyro: wobbles like a spinning top |
reasoning | A lit trail walks across the front | twins: two trails |
searching | A lens hops from spot to spot | lighthouse: a beam sweeps round |
background | Fewer, larger dots, turning slowly | spiral: eight arms pole to pole |
retrying | It turns, brakes and springs back | surge: launches and eases out |
compacting | A line packs the dots, then lets go | squeeze, fuse |
waiting | A comet laps the sphere | — |
Color
It takes the text color, so tint it with a text-* class.
Options
size is the width and height in px; every look is tuned to read at 20.
speed scales every motion (1 as designed), paused holds it on its frame,
and density, dotSize and tilt change the dots and the angle. label
names it for screen readers; without one it is hidden from them. Only orbs on
screen redraw, every orb of a look turns in step, and reduced motion holds it
still.
Notes
Adapted from Thinking Orb on 21st.dev, kept as written
apart from formatting. mountOrb draws one into any <svg> without React.
Source — src/components/ai/orb.tsx