Robot-heads is a React avatar that shows an AI agent's state
Robot-heads is a free MIT-licensed React component by Fayaz Ahmed that draws a TV-headed robot avatar with nine states for an AI agent, drawn on a 2D canvas with no WebGL dependency, with 264 stars on GitHub three days after it was published.
Image: GitHub
Why it mattersA product team building an AI assistant can drop one component in to show the user whether the agent is thinking, searching, speaking or has hit an error, and the state can be read at a glance without reading a status label.
Most AI chat apps tell the user what the agent is doing with a word, and that word is almost always the same spinning "Thinking...". Robot-heads is a new MIT-licensed React component that replaces the word with a glossy TV-headed robot avatar whose LED-matrix face, antenna light and head motion all change with the state, so the state is read as a picture.
Fayaz Ahmed published the project on 9 October. The GitHub REST API shows 264 stars and 45 forks. The author ships a live playground at robot-heads.fayaz.workers.dev, run on Cloudflare Workers.
Nine states, four shapes, 2D canvas
The component carries nine named states: idle, thinking, searching, listening, speaking, working, happy, error and sleeping. Each has its own face, head motion and antenna light. Thinking tilts the head up with three pulsing dots and an amber light. Listening cocks the head, draws an equaliser on the face and holds a steady green light. Working looks down at a progress bar with a busy bob. Error shakes the head with red X eyes and a blinking red light. A switch between two states plays a short glitch and a cross-fade.
The head is drawn on a 2D canvas, so a page using it needs no WebGL context. The author lists no runtime dependency beyond React 18 or newer, which is a peer. Every head on the page shares one animation loop that sleeps when the tab is hidden, and heads of the same shape and size share baked textures, so a list of agents with their own avatars is not a per-head render cost. Four outline shapes are supported: rectangle, square, circle and hexagon, with the same screen, ears, antenna, screws and back panel on each.
Props and accessibility
The component takes props for shape, state, size, shell colour, trim colour, LED colour, speed, pause, interactivity, antenna toggle, floor shadow and a seed. The seed desynchronises blinks and glances in a row of avatars, so a page with five robots does not blink in unison. With interactive on, the head and eyes follow a nearby pointer, and a click makes it hop with a spin and a happy face.
The canvas is rendered with role="img" and an auto-generated aria-label naming the state, for example "Robot, thinking". A caller can override the label with its own aria-label. Under prefers-reduced-motion: reduce, or when paused is set, the still pose of the current state is drawn instead of the animation.
The one layout trap
The size prop sets the box the robot rests in, and the motion is drawn past that box. Hops, the antenna's glow and the floor shadow overflow like a CSS box-shadow and take no layout room, but a parent with overflow: hidden right around the robot will cut off a hop.
The package is distributed on npm as robot-heads, under the MIT licence. The library at the root of the repository runs through a pnpm workspace, with a playground in the site/ folder built on Vite and served by a Cloudflare Worker.
Source
This item was written by an AI system from the linked source. Reveneau is responsible for what it publishes.
Get AI News in your inbox
New developer tools, model and agent releases, and how teams are actually using them to release software. Short, and only when there is something worth reading.
