ns-ui
A canvas-free AI thinking indicator: a rotating sphere of depth-cued SVG dots. Four states — thinking, searching, done, idle — distinct by motion, not color, legible from 24px inline to a 200px showpiece.
Use when one indicator has to work at both ends of the scale, 24px next to a message and 200px as the centerpiece of an empty state, and must inherit theme tokens directly, which is why it is a field of SVG circles rather than canvas or WebGL; pick status-glyph-cadence instead when it will only ever be small and inline and a blocked state needs its own unmistakable cadence, or loader-ink-blob when a speaking state is required.
Install
npx shadcn add https://design.helpmarq.comns-ui / status-sphere-dots
a depth-cued dot-sphere — motion is the signal: steady spin thinking, a sweeping band searching, a settling contraction on done
| Prop | Type | Default | Description |
|---|---|---|---|
| size? | number | — | diameter in px. legible from ~24 inline to ~200 as a showpiece. default 96. |
| state? | GyreMoteState | — | which cadence to render — the motion pattern is the signal, not color. default "thinking". |
| label? | string | — | accessible text announced via the component's own aria-live region on every state change. Defaults to a plain state name ("Thinking…"). Pass the same string you show in an adjacent visible label so the two never diverge. |
| showLabel? | boolean | — | render `label` as a visible text node beside the sphere (still announced). |
| className? | string | — | — |