HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
OrbView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorAn animated shape that shows what an agent is doing.StableSince 0.8.0FeedbackUsageimport'@fusion.dev/helix/orb'Preview
API ReferenceRoothelix-orbAn animated shape that shows what an agent is doing.
PropTypeDescriptionannouncebooleanDefaultfalseSays each new state politely, such as "Working" and then "Done".labelstringDefault""The name read by screen readers. Defaults to the name of the state, such
as "Thinking".size"sm"|"md"|"lg"The diameter, relative to the surrounding text.state"waiting"|"connecting"|"thinking"|"fetching"|"listening"|"working"|"done"Default"thinking"What the agent is doing.stateLabelsPartial<Record<OrbState, string>>Default{ connecting: "Connecting", done: "Done", fetching: "Fetching", listening: "Listening", thinking: "Thinking", waiting: "Waiting", working: "Working", }The word for each state, for a page in another language.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)A shape of your own, drawn over the orb's box in place of the dots.
PartDescriptioncanvasThe canvas the dots are drawn on. Hidden while the default slot holds a shape.liveThe word for the state, which the orb says as it changes when announce is set. Rendered only then, and clipped out of view.
CSS PropertyDescription--orb-colorThe color of the nearest dots. Defaults to currentColor.--orb-groundThe color the farthest dots fade toward. Defaults to the page's background.--orb-sizeThe diameter. Overrides size.--orb-speedHow fast the dots move, as a multiple of each state's own tempo. Defaults to 1.
Custom stateDescriptionconnectingThe orb shows connecting.doneThe orb shows done.fetchingThe orb shows fetching.listeningThe orb shows listening.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.thinkingThe orb shows thinking, which is also what a state it does not draw shows.waitingThe orb shows waiting.workingThe orb shows working.
Examples
NameDescriptionPreviewAn orb that shows an agent at work.Sized To TextAn orb sized to the line of text it sits beside.SizesThe orb at each size it comes in.StatesThe orb in each of its seven states, side by side.