States

States describe what your app is doing. Each one has its own frames and timing.

An indicator usually starts idle, moves to thinking while work runs, and ends in success or error. Success and error play once and hold their finished mark; every other state loops. A set can have just one state: Life is a single thinking state.

<DotIndicator set="snake" state={status} />
// status: 'idle' | 'thinking' | 'success' | 'error'

Custom states sit after the standard ones. Built-in sets use them for agents and voice: Tool Call adds waiting and cancelled, Attention adds waiting and warning, and Equalizer adds listening and connecting.

Transitions

When the state changes, the transition runs between the last frame shown and the first frame of the new state. Flip wipe turns columns left to right; crossfade dips the whole grid; cut swaps instantly.