Aurora Orb
AI
Visual
Animated AI assistant orb with gradient effects and state transitions. Two variants: Aurora Eyes (clean gradient with animated eyes) and Bubbles (3D with eyes).
Aurora Eyes
Clean gradient orb with animated eyes — ideal for minimalist interfaces
State
Size
idle
active
listening
thinking
Bubbles
3D styled orb with animated eyes, blush, and color options
State
Size
purple
indigo
pink
Props
Component API reference
AuroraEyesOrb Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Orb size: sm (64px), md (96px), lg (128px), xl (160px) |
state | 'idle' | 'active' | 'listening' | 'thinking' | 'idle' | Current state, determines animation |
onClick | () => void | — | Click handler for the orb button |
className | string | — | Additional CSS classes |
BubblesOrb Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Orb size |
color | 'purple' | 'indigo' | 'pink' | 'purple' | Color theme for the orb |
mood | 'happy' | 'neutral' | 'happy' | Mood expression |
isActive | boolean | false | Activates additional animations |
onClick | () => void | — | Click handler |
className | string | — | Additional CSS classes |
Usage
Basic implementation examples
import { AuroraEyesOrb, BubblesOrb } from '@/components/ui/aurora-orb'
// Aurora Eyes — clean gradient with animated eyes<AuroraEyesOrb size="md" state="idle" /><AuroraEyesOrb size="lg" state="thinking" onClick={() => {}} />
// Bubbles — 3D with eyes and color options<BubblesOrb size="md" color="purple" mood="happy" /><BubblesOrb size="md" color="indigo" mood="happy" isActive /><BubblesOrb size="lg" color="pink" mood="neutral" onClick={() => {}} />Features
Built-in functionality
- Aurora Eyes: Clean gradient with animated blinking eyes
- Bubbles: 3D styled orb with eyes, blush, and color options
- State-based animations: Different animations for idle, active, listening, thinking
- Eye animations: Both variants have animated blinking and tracking eyes
- 4 size options: sm (64px), md (96px), lg (128px), xl (160px)
- Keyboard accessible: Button element with focus ring support
Accessibility
ARIA support and keyboard navigation
ARIA Attributes
Uses native <button> element for keyboard accessibilityFocus ring visible on keyboard focus (ring-indigo-500)Keyboard Navigation
| Key | Action |
|---|---|
| Tab | Focus the orb button |
| Enter / Space | Activate the orb (trigger onClick) |
Notes
- Consider adding aria-label to describe the orb function (e.g., "Start AI assistant")
- Animations use CSS keyframes which can be disabled with prefers-reduced-motion