Tide
Tide is a field whose edge reports what the model is doing. It rests while idle, runs while the model thinks, stops dead on an error and settles into a solid line once valid. Each keystroke sends one ripple.
Switch between the four states, and type in the field to send ripples along its edge.
Anatomy
When to use
- Fields that send what you type to the model: ask boxes, smart search, prompts.
- Fields the model validates as you type.
- Not for ordinary form fields. A plain field with a focus ring is enough.
Behaviour
| State | Edge | Colour |
|---|---|---|
| Idle | Still. Lapis while focused. | Lapis |
| Thinking | Three packets travel the edge | Tyrian |
| Error | A frozen wave | Madder |
| Valid | Settles into a solid line | Viridian |
The guide’s question field in this app is a Tide: it runs while the guide writes an answer.
Best practices
- Only the thinking state loops, and only while the model works.
- Pair every state with words: “State: thinking”.
- Keep ripples small. They acknowledge typing; they don’t decorate it.
Accessibility
- The edge is decorative to assistive tech; the state label is a polite live region.
- With Still on, the edge shows each state as a still shape and colour.
Specifications
- Edge
- 2 px stroke, 12 px outside the field
- Thinking
- 3 packets, one lap every 3 s
- Ripple
- Decays over 1.4 s
- Rest
- Draws nothing while idle and unfocused