ns-ui
A 20-64px inline status glyph for agent work where the motion pattern itself is the signal — five states, five distinct cadences, no color and no swapped icon.
Use when an agent's work state has to survive being read by someone who cannot see color or is only glancing, so each state is a different motion cadence over the same six-dot ring rather than a swapped icon or a red/green change, and blocked is drawn as a ring that cannot close; pick status-sphere-dots instead when the same indicator must also hold up at 200px as a centerpiece rather than only at 20-64px beside a label, or loader-ink-blob when the states are conversational (listening, speaking) rather than task states.
Install
npx shadcn add https://design.helpmarq.comns-ui / status-glyph-cadence
Solving the integral…
current run
motion is the signal — five distinct cadences, no color, no swapped icon
| Prop | Type | Default | Description |
|---|---|---|---|
| state | BeaconCadenceState | — | which cadence to render — the motion pattern IS the state, color never is |
| size? | number | — | glyph size in px, meant to sit inline beside a text label. legible 20-64. |
| label? | string | — | accessible text announced via the component's own aria-live region on every state change (e.g. "Solving…"). Defaults to a plain state name. If the consumer already renders a visible adjacent label that updates with state, either pass that same string here (redundant but harmless for sighted users) or aria-hide their own label to avoid a double announcement — the glyph is the one guaranteed to announce transitions. |
| className? | string | — | — |