AI Thinking Orb
Use the orb for ambient state; use timelines or progress for accountable work.
Use
AI assistant, voice interface, agent dashboard, model generation screen, creative tool.
Avoid
Avoid as a replacement for precise progress, errors, or tool-call states. Avoid if it implies sentience or capability the product does not have.
Safer Alternative
Typing Dots (AI Reply)Risk Level
High attention
Timing
Keep loops slow and ambient; use one-shot reveals when the motion is introducing content or explaining a process.
Easing
Use restrained ease-out/ease-in-out curves for UI-adjacent motion; reserve continuous linear motion for flows, orbits, and ambient fields.
Risk
Live Demo
What It Is
An abstract status object pulses, breathes, morphs, or responds to audio/tool activity to communicate processing, listening, generating, or system presence in an AI product.
Decision Guidance
Use the orb for ambient state; use timelines or progress for accountable work.
Best For
AI assistant, voice interface, agent dashboard, model generation screen, creative tool.
Avoid When
Avoid as a replacement for precise progress, errors, or tool-call states. Avoid if it implies sentience or capability the product does not have.
Timing
Keep loops slow and ambient; use one-shot reveals when the motion is introducing content or explaining a process.
Easing
Use restrained ease-out/ease-in-out curves for UI-adjacent motion; reserve continuous linear motion for flows, orbits, and ambient fields.
Risk Tags
✓When to Use
- Product contexts: AI assistant, voice interface, agent dashboard, model generation screen, creative tool.
- Choose it when the product intent matches AI / Tech Expression rather than generic decoration.
- Use the orb for ambient state; use timelines or progress for accountable work.
✕When NOT to Use
- Avoid as a replacement for precise progress, errors, or tool-call states. Avoid if it implies sentience or capability the product does not have.
Configuration Tips
- 01Technical fit: CSS/SVG for simple orbs; Canvas/WebGL for audio-reactive or particle-based forms.
- 02Performance: Keep loops lightweight, pause when inactive, and avoid high-frequency blur/noise.
- 03Accessibility: Pair with truthful status text such as “Searching docs” or “Generating draft”.
- 04Reduced motion: Static orb plus text state or subtle opacity change.
You've Seen It In
AI Implementation Prompts
Move from a fast scaffold to production details, then tune timing and edge states.
Design a AI Thinking Orb for this product context. First explain the product intent, when not to use it, performance budget, accessibility constraints, and reduced-motion fallback. Then propose the simplest implementation family that can express the idea safely.
Code Example (Tailwind CSS)
A focused implementation sketch you can adapt to your product state.
export function MotionDecisionChecklist() {
const steps = [
'Confirm product intent',
'Choose the simplest implementation family',
'Set performance caps and mobile fallback',
'Add reduced-motion behavior',
'Verify accessibility and readable content',
];
return steps;
}Related Effects
Morphing Gradient Blob
An organic 2D shape shifts color, scale, or contour to add warmth and identity. It is lighter than a full shader scene and works well as a supporting accent.
Particle Network Field
Connected points suggest collaboration, intelligence, distributed systems, or data relationships. It can be ambient or interactive, but should remain subtle.
Tool Call Timeline
Sequential operations such as search, read, transform, validate, write, deploy, or review become visible so agent and automation activity is understandable without pretending to reveal hidden reasoning.