Thinking Orbs

Dotted thought-orb loading indicators for AI & agent UIs — nine hand-tuned animated states, rendered on a plain 2D canvas. No WebGL, no filters, identical pixels in every browser.

working

searching

solving

listening

connecting

weaving

composing

breathing

shaping

Installation

Terminal

npx gotlui add thinking-orbs

Usage

page.tsx

import { ThinkingOrb } from "@/components/gotlui/thinking-orbs"

function Status() {
  return <ThinkingOrb state="searching" size={64} />
}

Key props

Prop	Type	Description
state	'working' \| 'searching' \| 'solving' \| 'listening' \| 'connecting' \| 'weaving' \| 'composing' \| 'breathing' \| 'shaping'	Which of the nine tuned animations to show. Default 'working'.
size	64 \| 32 \| 20	Tuned size preset in CSS px — 64 (avatar) and 20 (inline) are hand-tuned designs, 32 is interpolated. Default 64.
theme	'auto' \| 'dark' \| 'light'	Ink color for the substrate; auto detects from an ancestor's data-theme/.dark class or prefers-color-scheme, live.
speed	number	Multiplier on the preset's baked speed. Default 1.
paused	boolean	Freeze on the current frame. Default false.
color	string	Optional ink tint (#rgb, #rrggbb or rgb()), keeping the depth-shading ramp. Omit for stock grayscale.
dots	number	Density multiplier for dot/strand/node counts. Default 1.
dotSize	number	Radius multiplier for every dot. Default 1.
gravity	boolean \| GravityOptions	The orb pulls the pointer in as it nears, warping a raster of the real cursor toward its centre. Off by default; needs a supplied cursor sprite.