Skip to content
Components

ThinkingOrb

Dotted thought-orb for AI & agent status.

Usage

import { OrbSize, OrbState, OrbTheme, THINKING_ORB_SIZES, THINKING_ORB_STATES, ThinkingOrb, ThinkingOrbProps } from "@instruments/materia-ui/components/thinking-orb";

Best practices

  • Use size 64 for chat-avatar / panel status; use 20 for inline text-adjacent cues. They are separate designs, not a scale factor.

  • Prefer theme="auto" so the orb follows data-theme / system preference; pin dark or light only when the surrounding surface is fixed.

  • Pass a specific aria-label when the state text is not otherwise announced (e.g. next to a ThinkingLoader that already speaks).

Props

PropTypeDefaultDescription
stateOrbState"working"

Which animation to show.

sizeOrbSize64

Tuned size preset - 64 (avatar) or 20 (inline). Separate designs, not a scale.

themeOrbTheme"auto"

Theme mode; auto detects from the host project.

speednumber1

Animation speed multiplier on top of the preset's baked speed.

pausedbooleanfalse

Freeze the animation on the current frame.

styleCSSProperties

Inline styles for the canvas element.

classNamestring

Additional CSS class names for the canvas element.

aria-labelstring

Accessible name. Overrides the per-state default when provided.

Also exports

  • typeOrbSize
  • typeOrbState
  • typeOrbTheme
  • constTHINKING_ORB_SIZES
  • constTHINKING_ORB_STATES
  • interfaceThinkingOrbProps

Composition

Used by

ThinkingLoader