Chat Orb
The AI's face: a soft white sphere with two black eyes. It is the assistant avatar in AiMessage, and works alone as a chat launcher or greeter.
The eyes turn toward your pointer anywhere on the page, a little further the further away it is, and ease rather than snap. Every few seconds they blink. The ball is white in both colour modes, so it reads on light and dark surfaces alike. It is decorative by default (aria-hidden); the message beside it carries the meaning.
Basic
Move your pointer around it, and over it: the eyes squint a little under the pointer.
Thinking and glance
While the AI works, set thinking and the eyes look up and sweep slowly from side to side instead of following the pointer. When the reply starts, set glance to true: the eyes turn toward the text for 1.4 seconds, then look straight and go back to the pointer. AiMessage sets both for you.
Move your pointer around it, and over it.
Sizes
Everything inside scales with size (px). 28 is the AiMessage avatar, 44 the welcome greeting.
Still
Turn off the pointer and the blink for a static mark, for example in a screenshot or a print. Reduced motion does the same automatically.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 28 | Diameter in px. Everything inside scales with it. |
| look | boolean | true | The eyes follow the pointer anywhere on the page. |
| blink | boolean | true | The eyes blink every 3 to 6 seconds, now and then twice. |
| thinking | boolean | false | The AI is working: the eyes look up and sweep side to side instead of following the pointer. |
| glance | boolean | false | Each time it turns true, the eyes turn toward the response (to the right) for 1.4s, then look straight. |
| squintOnHover | boolean | true | The eyes narrow while the pointer is over the orb (mouse and pen only). |
| label | string | Accessible name. Omit for a decorative orb (aria-hidden); pass it to expose the orb as an image. | |
| className | string | Extra class on the root. | |
| style | CSSProperties | Inline style on the root. |