Installation
Playground
Searching
A scan meridian crosses a dotted globe.
Six agent states
Working
Particles travel along tilted orbits.
Searching
A scan meridian crosses a dotted globe.
Solving
Orbital bands scramble and settle.
Listening
A waveform rolls through latitude rings.
Composing
A soft multi-band sash undulates.
Shaping
The outline morphs between three shapes.
Inline status
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| state | "working" | "searching" | "solving" | "listening" | "composing" | "shaping" | "working" | Selects one of six purpose-tuned agent activity animations. |
| size | 64 | 20 | 64 | Uses the avatar or inline preset. Each size has its own dot count, radius, and motion tuning. |
| theme | "auto" | "dark" | "light" | "auto" | Chooses light or dark ink automatically from an ancestor theme or the OS preference. |
| speed | number | 1 | Multiplies the selected preset's baked animation speed. |
| paused | boolean | false | Freezes the canvas on its current frame. |
| aria-label | string | — | Overrides the accessible label supplied for the selected state. |
| Canvas props | CanvasHTMLAttributes<HTMLCanvasElement> | — | Passes className, style, data attributes, and other canvas props through. |
The component renders a transparent 2D canvas, caps device pixel ratio at 2, pauses while offscreen or in a hidden tab, and shows a representative static frame when reduced motion is requested.
Credits
ThinkingOrb is powered by thinking-orbs by Jakub Antalik, released under the MIT License. The original Thinking Orbs demo credits Jakub Antalik and Alex Brinza. The upstream copyright and license notice are preserved in the distributed component source.