# Sopro A glowing sphere that breathes while idle and pulses with the voice when the assistant listens or speaks. > Sopro is an exclusive THM Componentes component for voice assistants: a WebGL sphere with inner waves, an iridescent rim and a halo that moves smoothly between idle, listening, thinking and speaking. It reacts to the audio level from the microphone, from a prop or from a simulated voice. It suits telehealth, support lines and AI training simulators. - Category: AI interfaces - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Medium: canvas or continuous animation; fine for one section - Technology: Vue 3, TypeScript, WebGL - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/sopro/ ## What it looks like It looks like a soap bubble filled with colored clouds, floating in the middle. Inside, indigo and cyan waves swirl slowly and thin threads of light cross the surface; the rim glows with lilac and sky blue reflections, and a white highlight sits at the top left. While idle, the sphere breathes. Listening, its outline ripples with the volume and thin rings appear around it. Thinking, the inside twists into a whirl and a comet of light circles the rim. Speaking, it pulses and sends out rings in time with the voice. Below, a label with a colored dot names the state, and the background stays transparent. ## You may be looking for this if you asked for something like - “that orb that moves while the AI is talking” - “an animated sphere for my voice assistant” - “an animation that reacts to the microphone while someone speaks” - “show that the AI is listening, thinking or answering” - “a glowing orb like Siri for my app” - “a voice indicator for an AI telehealth app” - “make my voice support line look like a real AI product” - “a circle that pulses with the synthesized voice” ## Also known as AI assistant orb, AI voice visualizer, audio reactive orb, voice assistant animation, speaking indicator, listening indicator, voice activity orb ## When to use - Voice assistants in telehealth, teletherapy and customer support - Simulators and training tools where people talk to an AI by voice - AI call screens that need to show who is speaking - AI product openers where the orb is the centerpiece ## When to avoid - Pages that already run another WebGL effect - Dark backgrounds unless you adjust the labels, which come in navy - English interfaces as is, since the mic button and its messages are in Portuguese ## How to ask your AI ```text Create a WebGL voice orb for my AI assistant with idle, listening, thinking and speaking states, reacting to the audio level from the microphone or the synthesized voice, in my brand colors, with a still frame for reduced motion and a CSS fallback without WebGL. ``` With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising. ## Questions about Sopro ### How do I make Sopro react to the AI voice? Set the state prop to speaking and send the synthesized audio level, from 0 to 1, in the level prop, measured in your own player. For the user's voice, turn on useMic: Sopro shows a mic button and measures the volume itself. Without either, it simulates a voice with syllables and pauses while listening or speaking. ### Does Sopro work on phones and without WebGL? Yes. Sopro tries WebGL2, then WebGL1, and without either it shows a CSS gradient sphere that breathes and grows with the sound. It caps pixel density at 2 and pauses off screen. The microphone only works over HTTPS, and permission messages are in Brazilian Portuguese. ### Does Sopro respect reduced motion settings? Yes. With reduced motion on, Sopro draws a still frame for each state and redraws only when the state changes; the label dot stops pulsing and the label swap becomes a simple fade. The demo auto cycle keeps going, at a slower pace. ## Related components - [Mote](https://vibecode.thmtecnologia.com/en/components/mote/): An AI app message box that grows with the text, takes files, records audio and opens commands when you type a slash. - [Prosa](https://vibecode.thmtecnologia.com/en/components/prosa/): An assistant reply that shows up bit by bit, word by word, coming out of a soft blur like in an AI chat. - [Pandeiro](https://vibecode.thmtecnologia.com/en/components/pandeiro/): A disc ringed by bars that dance with the sound, or flowing wave lines, playing ambient audio or listening to the mic. - [Pingue-pongue](https://vibecode.thmtecnologia.com/en/components/pingue-pongue/): An AI assistant conversation where answers stream in, and people can regenerate, edit their question and rate replies. - [Gude](https://vibecode.thmtecnologia.com/en/components/gude/): A glass ball with an indigo and cyan ink swirl inside, slowly turning over a light floor. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).