Assistant face

Use it for

• AI assistants and support bots that need a face for their state
• Hero sections that show a conversation without a chat log
• Voice or chat widgets where listening and thinking must read at a glance

Avoid

• Serious contexts such as billing errors or security alerts
• Next to a real chat, where two talking surfaces compete

How it works

The mood is one data attribute on the root, and CSS turns it into a pose: eye scale, a squint arc swapped in for the pill, the visible mouth shape, a glance keyframe, a shimmer, a bounce or a tremor. Blinks are random timeouts that set a data attribute on the svg, doubled while listening. The eyes lean toward a mouse or pen through a transform on a wrapping group, written from pointermove and smoothed by a CSS transition, and a timeout chain tours the moods until a button pins one for a few seconds.

Accessibility

The face is an image whose label names the mood, the status title and line are a polite live region and the mood switches are real toggle buttons with aria-pressed. Touch skips the eye follow and gets the automatic tour. Reduced motion stops the tour, blinks, bounce, tremor and shimmer, leaving a still pose per mood.