ns-ui
A small canvas-2D assistant-state indicator: a soft ink blob traced through 72 points around a circle, each perturbed by one of six distinct motion signatures — idle, thinking, listening, speaking, success, error — with a checkmark or X that strokes itself in for the two settled states.
Use when a conversational assistant whose indicator must cover the whole turn including its ends: idle, thinking, listening, speaking, and the settled success or error states that stroke in a check or X, so one element carries a voice or chat turn from start to resolution; pick status-glyph-cadence instead when the states are agent task states (working, searching, blocked, done) sitting beside a text label and canvas is unwanted, or status-sphere-dots when the same indicator must also work as a large showpiece.
Install
npx shadcn add https://design.helpmarq.comns-ui / loader-ink-blob
Cycles through all six assistant states.
idle
| Prop | Type | Default | Description |
|---|---|---|---|
| state? | ThinkingGlyphState | — | Which motion signature to show. @default "idle" |
| size? | number | — | Rendered diameter in CSS px. @default 48 |
| speed? | number | — | Animation speed multiplier. @default 1 |
| paused? | boolean | — | Freezes the current frame. @default false |
| className? | string | — | — |
| style? | React.CSSProperties | — | — |