Dot Orb: a loader for thinking
A spinning sphere of dots with depth fade. A calm React loader for an AI agent that is thinking. One file, install with the shadcn CLI.
Installation
Install with the shadcn CLI, or copy the component file. It only needs React.
npx shadcn@latest add https://oxyn.space/r/dot-orb.jsonUsage
Updates live with the parameters you set.
import { DotOrb } from "@/components/dot-orb";
export function Thinking() {
return (
<DotOrb />
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| pattern | "rings"|"fibonacci"|"grid" | "rings" | How the dots are laid out on the sphere. |
| dotSize | number | 3 | Diameter of the front dots in px. Back dots scale down automatically. |
| density | number | 12 | Rows of dots. Higher means more dots. |
| size | number | 160 | Width and height of the orb in px. |
| duration | number | 3 | Seconds for one full 360° turn. |
| gap | number | 0 | Seconds to rest between turns. 0 spins continuously; above 0 each turn eases in and out. |
| direction | "left"|"right" | "left" | Spin direction around the vertical axis. |
| tilt | number | 18 | Lean toward the viewer in degrees, so the top shows. |
| backOpacity | number | 0.2 | Opacity of the furthest dots. Front dots are always fully opaque. |
| color | string | "#e4e4e7" | Dot color. |
| paused | boolean | false | Coast to a stop on the current frame without unmounting. Turning it off eases back up to speed. |
| label | string | "Thinking" | Accessible name; the wrapper is role="status". |
| className / style | — | — | Spread onto the wrapper div, along with any other div props. |
Switch states
Dot Orb is one of the animations in Dot Globe. Use the group when the agent's state changes, and it morphs between them.