AI Dynamic Island 01 React component

AI Dynamic Island 01 is a free, Dynamic Island style status pill for an AI agent. It springs between idle, listening, thinking, working and done: its width follows the length of each label, and in the working state it unfolds downward into a checklist where each step shows a spinner and then a check. A small canvas orb of particles with rippling curves leads the pill, a colored glow runs along its edge per state, and done swaps the orb for a check mark next to a View button.

status defaults to "auto", which plays the sequence once (loop repeats it) with stageSeconds per state and stepSeconds per step; a fixed state lets your app drive it. steps takes up to six labels, expandedWidth sets the minimum width of the unfolded list, and listenColors, thinkColors and doneColors color the glow. Clicking the idle pill starts it, the Stop button or Escape (with focus inside) stops it, onStart, onStop, onComplete and onView report each change, a live region reads the state and current step, and reduced motion removes the morphing and holds the orb still.

Use it at the top of an app or chat window to show what an AI agent is doing, for example searching, reading sources and writing, without giving up a whole panel.

For a voice assistant that unfolds into a card with spoken questions and answers, use AI Dynamic Island 02.