184 Components
AI Voice Orb
MotionSiri and GPT-4o style dynamic chromatic voice visualizer orb built with Canvas 2D. Smoothly transitions across idle, listening, thinking, and speaking states with organic fluid harmonic blobs.
Click orb or switch states to preview fluid reactive modes
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/ai-voice-orb.json"
Props
TypeScript props supported by <AIVoiceOrb />.
| Prop | Type | Default | Description |
|---|---|---|---|
| state | "idle" | "listening" | "thinking" | "speaking" | "idle" | Active lifecycle interaction state of the voice orb. |
| size | number | 240 | Diameter of the voice canvas in pixels. |
| theme | "chromatic" | "aurora" | "monochrome" | "chromatic" | Color palette gradient combination. |
| audioLevel | number | 0 | Audio amplitude from 0 to 1 for live acoustic reaction. |
Key Features
- Pure Canvas 2D implementation without heavy Three.js or WebGL dependencies.
- 4 interactive states: idle, listening, thinking, and speaking.
- 3 aesthetic palettes: chromatic, aurora, and monochrome.
- Responsive audioLevel input for real mic or speech synthesis reactivity.
- Zero layout shift with automatic high-DPI (Retina) screen scaling.
Keyboard & Accessibility
- Gracefully stops organic oscillation when prefers-reduced-motion is enabled.
- Accessible as an interactive voice trigger button.