An animated orb that shows what an AI assistant is doing, such as listening or working.
| – |
The colour of the dots, as a hex ( |
glow | "none"|"intense"|"subtle" | none | How strongly the orb glows in its own colour. |
intent | "default"|"info"|"success"|"warning"|"destructive"|"secondary"|"primary" | default | The theme colour of the glow around the orb. The dots stay neutral unless you set |
interactive | boolean | false | Whether the orb speeds up while the pointer is over it. |
labels | Partial<OrbLabels> | – | Replaces the built-in text (the name read for each state) for this instance. See |
paused | boolean | false | Whether the animation is paused. It also stays still when the user prefers reduced motion. |
pixelSize | number | – | The orb's width and height in pixels. Takes precedence over |
size | "lg"|"md"|"sm"|"2xl"|"xl"|"xs" | lg | The size of the component. |
speed | number | 1 | How fast the orb animates, as a multiple of its normal speed. |
state | "thinking"|"searching"|"spiral"|"pulse"|"helix"|"matrix"|"processing"|"spark"|"quantum"|"supernova"|"working"|"solving"|"listening"|"composing"|"shaping"|"pulsing"|"vortex"|"atom"|"radar"|"galaxy"|"torus"|"network"|"analyzing"|"beacon"|"swarm"|"nucleus"|"dna"|"sonar"|"nebula"|"donut"|"ring_torus"|"cube"|"constellation"|"nodes"|"burst" | working | What the orb is doing, which picks its animation. Some names share an animation, such as |
theme | "auto"|"dark"|"light" | auto | Whether the orb is drawn for a dark or light background. |
variant | "default"|"diamond"|"expressive"|"sharp"|"ring"|"classic"|"cross" | default | The visual style of the component. |
Accepts render, plus every native <div> attribute.
Accepts render, plus every native <span> attribute.