Motion AI Thinking Orb
Assistant status next to the chat composer while a reply is thinking or streaming.
Choose the primitives library your project already uses. Both look the same: your theme, not the variant, controls colors, shape, type and motion.
About this motion
What it's for
- Assistant status next to the chat composer while a reply is thinking or streaming.
- Voice mode stage showing whether the assistant listens or speaks, with live levels.
- Recording indicator with an elapsed timer in a voice note or dictation field.
Includes
- Ai state indicator
- Idle state
- Listening state
- Thinking state
- Speaking state
- Error state
- Orb variant
- Ring variant
Works with
- Radix UI and Base UI primitives (pick the one your project uses)
- React 19, Next.js App Router and Tailwind CSS 4, installed with the shadcn CLI
- Your theme tokens, in light and dark mode
Install
Included with Agentic UI Kit (one-time license). Install needs your license key: see pricing · connect your project.
Agentic UI CLI
agentic-ui add motion-ai-thinking-orbInstalls through shadcn and adapts the component to your design tokens.
shadcn CLI
npx shadcn@4.17.0 add @agentic-ui/motion-ai-thinking-orbUsed in
A standalone component: drop it into any screen.
- Type
- Motion
- Variants
- Radix UI and Base UI
- Themes
- Light and dark
- Widths
- Preview it at desktop, tablet and mobile widths above.
- Motion
- Animated, with a reduced-motion fallback
- npm packages
- None beyond your project's React and Next.js
- Registry dependencies
lib-motion- Files
4 files
- components/agentic-ui/motion-ai-thinking-orb/thinking-orb.css
- components/agentic-ui/motion-ai-thinking-orb/index.ts
- components/agentic-ui/motion-ai-thinking-orb/thinking-orb.tsx
- components/agentic-ui/motion-ai-thinking-orb/orb-state.ts
Related components
Motion Accordion
Setup checklist with per-step status.
Details and live previewMotion Achievement Unlock
Learning or fitness app that reveals a badge in a corner toast when the first lesson of the day is done.
Details and live previewMotion Async Button
Save settings button that shows Saving…, then Settings saved or Retry save, without changing width.
Details and live previewMotion Attention Nudge
New-feature dot on a navigation item that pulses three times and then stays as a static dot.
Details and live preview