Product Design
Beginner3 usesThinking Orbs — Animated Thinking Orbs for AI UIs
Animated thinking orbs for AI UIs. A small, expressive component that visualizes agent states — working, searching, solving, listening, composing, shaping — as a living orb. Configurable state, size, and speed. One npm install, then render and ship.
ai-agentsanimationreactfrontendthinkingorb
📋
Spec
Thinking Orbs — Animated Thinking Orbs for AI UIs
Animated thinking orbs for AI UIs. A small, expressive component that visualizes agent states as a living orb.
States
working · searching · solving · listening · composing · shaping
Install
npm install thinking-orbs
Usage
import { ThinkingOrb } from 'thinking-orbs';
<ThinkingOrb state="listening" size={64} />
Props
- state — working | searching | solving | listening | composing | shaping
- size — px (range ~20–64)
- speed — multiplier (e.g. 1.00x)
How to use
- npm install thinking-orbs
- Import ThinkingOrb.
- Pick a state, size, and speed in the playground.
- Copy the generated code and ship.
Related
Part of the Jakub Antalik component family, alongside Border Beam (animated border beam) and Metal (liquid metal button effect).
