Design systems are full of buttons and toasts. Few ship a pattern for machine attention. The four-state mind is a small vocabulary that product, design, and eng can share without a 40-page spec.
The four states
| State | User-facing meaning | Typical trigger |
|---|---|---|
| Idle | Here, not working | App ready / turn complete |
| Listening | Receiving you | Focus in composer, voice capture, drag-drop |
| Thinking | Working on it | Request in flight, tool calls, retrieval |
| Talking | Answering | Token stream, TTS playback, final message |
Why four beats “loading: boolean”
A boolean collapses listening and thinking into the same gray spinner. Users lose the difference between “type whenever” and “I heard you; computing.” Four states restore conversational turn-taking.
Implementation sketch
// Pseudocode — works with Glim or your own renderer
onComposerFocus() -> mind.set('listening')
onSubmit() -> mind.set('thinking')
onFirstToken() -> mind.set('talking')
onStreamEnd() -> mind.set('idle')
onAbort() -> mind.set('idle')
onError() -> mind.set('idle') // plus a toastMotion and color rules
- Keep idle calm; avoid competitive motion in the corner.
- Raise energy for thinking; do not fake progress percentages.
- Talking can type captions or pulse with stream chunks.
- Respect
prefers-reduced-motionwith opacity/color-only fallbacks.
Glim as a reference implementation
Glim encodes this pattern as Glim.mount(el, type, opts) plus setState. Themes remap the mood palette without rewriting creatures. Free types are MIT; try before you invent a parallel state enum in every app.
Try Glim free. Offline starter + MIT creatures. No fake checkout.