# Pandeiro Um disco cercado de barras que dançam com o som, ou linhas em ondas, tocando um som ambiente ou ouvindo o microfone. > Pandeiro é um componente exclusivo do THM Componentes que desenha o som na tela: barras em volta de um disco pulsante, ou linhas em ondas, reagem a um som ambiente sintetizado no navegador ou ao microfone. O som só toca depois do clique, e o componente serve para podcasts, música, eventos e produtos de voz ou bem-estar. - Categoria: Imagem e mídia - 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, Canvas 2D - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/pandeiro/ ## Como ele é No modo radial, um disco com degradê de anil e ciano pulsa no centro, cercado por um halo e por barras espelhadas que crescem conforme as frequências do som, das graves às agudas. Dois anéis finos ondulam em volta, girando devagar em sentidos opostos. No modo ondas, sete linhas atravessam a tela como fitas e se agitam mais no meio. Sem som, tudo respira de leve. Embaixo, uma pílula traz os botões de tocar e de microfone e uma linha de status. O som sintetizado é um acorde suave com notas soltas e eco. ## Você pode estar procurando isto se pediu algo assim - “barrinhas que mexem com o som para a página do meu podcast” - “aquele círculo que pulsa com a música, tipo player de rádio” - “visualizador de som que funciona com o microfone da pessoa” - “ondas animadas que reagem à voz para um app de meditação” - “efeito de equalizador redondo em volta de um disco” - “mostrar o som de forma visual na página do evento” ## Também chamado de visualizador de áudio, espectro de áudio, equalizador animado, sound visualizer, music visualizer, onda sonora animada, barras que dançam com o som ## Quando usar - Página de podcast, programa de rádio ou lançamento musical - Produtos de voz, meditação ou bem-estar que usam som ambiente - Abertura de evento ou festival com uma peça sonora - Teste de microfone antes de uma gravação ou chamada ## Quando evitar - Quando o som não faz parte da proposta e o visual vira só enfeite - Sites servidos sem HTTPS, em que o microfone fica indisponível ## Como pedir para a sua IA ```text Crie um visualizador de áudio em Canvas 2D com barras radiais em volta de um disco que pulsa e um modo em ondas, reagindo a um som ambiente que só toca após clique ou ao microfone, com mensagens claras de permissão, cores da marca e animação parada para movimento reduzido. ``` 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 Pandeiro ### Pandeiro toca som por conta própria? Não. Pandeiro só cria o som ambiente depois que a pessoa clica em tocar, com volume que sobe aos poucos em pouco mais de dois segundos. O microfone também só é ativado pelo botão, e o componente mostra uma mensagem quando a permissão é negada, quando não há microfone ou quando a página não está em HTTPS. ### Pandeiro respeita quem prefere menos movimento? Sim. Com a redução de movimento ativa e sem som tocando, Pandeiro congela a animação de espera e mostra uma imagem parada. Quando a pessoa liga o som ou o microfone, as barras voltam a reagir ao áudio. O desenho também para quando o componente sai da tela. ### O microfone de Pandeiro grava ou envia a voz? Não há gravação nem envio no código. Pandeiro liga o microfone a um analisador de frequências só para desenhar as barras, sem reproduzir a voz nos alto-falantes, e encerra o acesso quando a pessoa clica em parar ou quando o componente sai da página. ## Componentes relacionados - [Sopro](https://vibecode.thmtecnologia.com/componentes/sopro/): Uma esfera luminosa que respira em espera e pulsa no ritmo da voz quando o assistente ouve ou fala. - [Sarau](https://vibecode.thmtecnologia.com/componentes/sarau/): Player de podcast com capítulos na barra e uma transcrição que destaca e rola a frase que está tocando. - [Fatia](https://vibecode.thmtecnologia.com/componentes/fatia/): Uma forma de onda com duas alças para escolher o trecho, ouvir o recorte, aplicar fades e baixar em WAV. - [Matinê](https://vibecode.thmtecnologia.com/componentes/matine/): Player com barra de progresso, miniatura ao passar o mouse, capítulos, legendas, velocidade e tela cheia. - [Maré](https://vibecode.thmtecnologia.com/componentes/mare/): Cinco ondas de luz neon, grossas e desfocadas, ondulando sem parar no meio de um fundo escuro. --- 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.