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
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.
