# Sopro Uma esfera luminosa que respira em espera e pulsa no ritmo da voz quando o assistente ouve ou fala. > Sopro é um componente exclusivo do THM Componentes para assistentes de voz: uma esfera em WebGL com ondas internas, borda iridescente e halo, que muda suavemente entre em espera, ouvindo, pensando e falando. Reage ao nível de áudio do microfone, de uma prop ou de uma voz simulada. Serve para telemedicina, atendimento e simuladores com IA. - Categoria: Interfaces de IA - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Médio: canvas ou animação contínua; bom para uma seção - Tecnologia: Vue 3, TypeScript, WebGL - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/sopro/ ## Como ele é Parece uma bolha de sabão cheia de nuvens coloridas, flutuando no centro. Por dentro, ondas de índigo e ciano giram devagar e filetes de luz atravessam a superfície; a borda brilha com reflexos de lilás e azul-céu, e um ponto de brilho branco fica no alto à esquerda. Em espera, a esfera respira. Ouvindo, o contorno ondula com o volume e anéis finos aparecem em volta. Pensando, o interior se torce em turbilhão e um cometa de luz dá voltas na borda. Falando, ela pulsa e solta ondas no ritmo da voz. Embaixo, um rótulo com bolinha colorida indica o estado, e o fundo fica transparente. ## Você pode estar procurando isto se pediu algo assim - “aquela bolinha que mexe quando a IA fala” - “esfera animada para o meu assistente de voz” - “animação que reage ao microfone enquanto a pessoa fala” - “mostrar que a IA está ouvindo, pensando ou respondendo” - “orbe brilhante tipo o da Siri para o meu app” - “indicador visual de voz para telemedicina com IA” - “deixar o atendimento por voz com cara de produto de IA” - “círculo que pulsa no ritmo da voz sintetizada” ## Também chamado de orbe de voz, orbe de IA, indicador de voz, esfera reativa ao áudio, AI voice visualizer, audio reactive orb, voice assistant animation ## Quando usar - Assistentes de voz em telemedicina, telepsicologia e atendimento - Simuladores e treinos em que a pessoa conversa com uma IA por voz - Tela de chamada com IA que precisa mostrar quem está falando - Abertura de produto de IA em que o orbe é o elemento central ## Quando evitar - Páginas que já rodam outro efeito em WebGL - Assistentes só de texto, em que um orbe animado não tem função - Fundos escuros sem ajustar os rótulos, que vêm em azul-marinho ## Como pedir para a sua IA ```text Crie um orbe de voz em WebGL para o meu assistente de IA, com estados de espera, ouvindo, pensando e falando, reação ao nível de áudio do microfone ou da voz sintetizada, cores da minha marca, quadro estático para movimento reduzido e reserva em CSS sem WebGL. ``` Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Sopro ### Como faço Sopro reagir à voz da IA? Coloque o estado speaking na prop state e envie na prop level o nível do áudio sintetizado, de 0 a 1, medido no seu player. Para a voz da pessoa, ative useMic: Sopro mostra um botão de microfone e mede o volume por conta própria. Sem nenhum dos dois, o componente simula uma voz com sílabas e pausas nos estados ouvindo e falando. ### Sopro funciona no celular e sem WebGL? Funciona. Sopro tenta WebGL2, depois WebGL1, e sem nenhum dos dois mostra uma esfera em CSS com degradê que respira e cresce com o som. O componente limita a densidade de pixels a 2 e pausa fora da tela. O microfone só funciona em HTTPS, e os avisos de permissão aparecem em português. ### Sopro respeita quem prefere menos movimento? Sim. Com movimento reduzido, Sopro desenha um quadro estático para cada estado e só redesenha quando o estado muda; a bolinha do rótulo para de pulsar e a troca de rótulo vira um esmaecer simples. O ciclo automático da demonstração continua, num ritmo mais lento. ## Componentes relacionados - [Mote](https://vibecode.thmtecnologia.com/componentes/mote/): Caixa de mensagem de app de IA que cresce com o texto, aceita arquivos, grava áudio e abre comandos ao digitar barra. - [Prosa](https://vibecode.thmtecnologia.com/componentes/prosa/): A resposta do assistente aparece aos poucos, palavra por palavra, saindo de um leve desfoque, como num chat de IA. - [Pandeiro](https://vibecode.thmtecnologia.com/componentes/pandeiro/): Um disco cercado de barras que dançam com o som, ou linhas em ondas, tocando um som ambiente ou ouvindo o microfone. - [Pingue-pongue](https://vibecode.thmtecnologia.com/componentes/pingue-pongue/): Conversa com a IA em que a resposta chega aos poucos, dá para gerar outra versão, editar a pergunta e avaliar. - [Gude](https://vibecode.thmtecnologia.com/componentes/gude/): Uma bola de vidro com um redemoinho de tinta índigo e ciano dentro, que gira devagar sobre um chão claro. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.