Aurora Orb
Animated AI assistant orb with gradient effects and state transitions. Available in multiple variants including Aurora, Aurora Eyes, and Bubbles styles.
Interactive Demo
Click the orb or change settings below
State
Size
Props
AuroraOrb component API reference
| 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 of the orb, determines animation style |
showIcon | boolean | true | Whether to show the center icon |
icon | React.ReactNode | — | Custom icon element to display in the center |
onClick | () => void | — | Click handler for the orb button |
className | string | — | Additional CSS classes for the container |
Usage
Basic implementation examples
import { AuroraOrb, IdleOrb, ActiveOrb, ListeningOrb, ThinkingOrb } from '@/blocks/ai-transparency/aurora-orb'
import { Mic, MessageSquare } from 'lucide-react'
// Basic usage
<AuroraOrb size="md" state="idle" />
// With click handler
<AuroraOrb
size="lg"
state="active"
onClick={() => console.log('Clicked')}
/>
// State preset components
<IdleOrb size="md" /> // Ready state
<ActiveOrb size="md" /> // Processing
<ListeningOrb size="md" /> // Voice input
<ThinkingOrb size="md" /> // Generating
// Custom icon
<AuroraOrb
size="md"
state="listening"
icon={<Mic className="w-8 h-8 text-white" />}
/>
// Without icon
<AuroraOrb size="md" state="idle" showIcon={false} />Orb States
Different states for various AI interactions
Idle
Ready for input
Active
Processing
Listening
Voice input
Thinking
Generating
Sizes
Four size options for different contexts
Orb Variants
Different visual styles for various use cases
Aurora
Gradient with icon
Aurora Eyes
Clean with eyes
Bubbles
3D with eyes
Aurora Eyes Orb
Clean gradient with animated eyes - ideal for minimalist interfaces
Idle
Eyes look around
Active
Pulsing gradient
Listening
Breathing effect
Thinking
Processing
Bubbles Orb
3D styled orb with animated eyes, blush, and color options
Custom Icons
Override the default icon with custom elements
AI Assistant Example
How the orb might be used in a chat interface
Click to start a conversation
Features
Built-in functionality
- Indigo to Teal gradient: Beautiful matte finish gradient styling
- Floating animation: Subtle vertical float animation
- State-based animations: Different animations for idle, active, listening, thinking
- Ambient glow effect: Soft radial gradient glow around the orb
- Inner rotating ring: Dashed ring rotates when in active states
- Eye animations: Aurora Eyes and Bubbles variants have animated blinking eyes
- Custom icons: Override the default icon with any React element
- Keyboard accessible: Button element with focus ring support
- 4 size options: sm, md, lg, xl for different contexts
- 3 visual variants: Aurora, Aurora Eyes, and Bubbles styles
Accessibility
ARIA support and keyboard navigation
ARIA Attributes
Uses native <button> element for keyboard accessibilityFocus ring visible on keyboard focus (ring-indigo-500)Click handler for interactive functionalityKeyboard 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
- High contrast colors ensure visibility against various backgrounds
- Interactive states are visually distinct for clarity