Sonic Orb
High-end audio testimonial with mesmerizing orb visualization.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| image | string | https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=1200&q=80 | Speaker portrait image URL. |
| backgroundColor | string | #111111 | Background color (hex, rgb, or hsl). |
When to Use
Best for audio-first products, podcast platforms, creator tools, and Uilora premium brand moments where a testimonial needs to feel alive. The orb visualization communicates that something is being said, not just written.
Best Practices
Use a clean, high-contrast portrait photo for the speaker image. The dark default background maximizes the orb glow effect — lighter backgrounds reduce the visual impact of the rings.
Why This Component Matters
Audio testimonials have higher credibility than text, but most sites only use static quotes. The Sonic Orb bridges the gap — it gives the impression of an audio experience through motion alone, with none of the playback complexity.
FAQ
QIs there real audio?
No — the orb rings animate independently to simulate a speaking visualization. This keeps the component lightweight with no audio file dependency.
QCan I change the number of rings?
The ring count is baked as a constant inside the component (default 6). Fork the file and update RING_COUNT to add or remove rings.
QIs it mobile responsive?
The orb and portrait scale proportionally. On small screens the layout switches to a vertical stack with the orb above the quote.
Related Components
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.