# Gongo Anéis concêntricos que pulsam de dentro para fora atrás de um logo, ícone ou botão, como ondas num lago. > Gongo é um efeito do THM Componentes que coloca anéis concêntricos atrás de um elemento: sete anéis, cada vez mais transparentes, encolhem e voltam ao tamanho em sequência, numa pulsação que corre de dentro para fora. Usa só CSS, pesa pouco e serve para destacar logos, ícones de app e botões principais. - Categoria: Fundos e atmosferas - Origem: Adaptado de código aberto sob licença MIT, com prompt pronto da THM - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript, Tailwind CSS v4 - Interação: Nenhuma: o efeito roda sozinho - URL: https://vibecode.thmtecnologia.com/componentes/gongo/ ## Como ele é Lembra as ondas que se abrem quando uma pedra cai num lago, ou o pulso na tela de um sonar. Sete anéis concêntricos, do menor ao maior, cercam o elemento do centro e encolhem e voltam ao tamanho num ciclo de dois segundos, um pouco depois do outro, o que faz a pulsação correr de dentro para fora. Cada anel é mais transparente que o anterior, então o efeito se apaga em direção às bordas. Na demo, os anéis são círculos com preenchimento translúcido que somem para baixo; também podem ser quadrados ou formas orgânicas. O conteúdo fica no centro, por cima. ## Você pode estar procurando isto se pediu algo assim - “círculos pulsando atrás do logo, tipo onda na água” - “efeito de sonar em volta do ícone do app” - “ondas saindo do botão principal para chamar atenção” - “anéis que pulsam no fundo da seção de baixar o app” - “destacar o logo no meio da página com um efeito discreto” - “fundo de círculos concêntricos animados que não pese no site” - “aquele efeito de radar pulsando atrás de um ícone” ## Também chamado de efeito ripple, ondas concêntricas, círculos concêntricos, anéis pulsantes, pulse effect, sonar effect, radar pulse ## Quando usar - Destacar o logo ou o ícone do app no centro de uma seção - Chamar atenção para o botão principal de download ou de cadastro - Seção de integrações ou de conexão com um ícone central - Telas de espera, de busca ou de conexão em andamento ## Quando evitar - Elementos pequenos dentro de cards, já que os anéis padrão chegam a 700 pixels - Páginas com vários pontos pulsando, em que a atenção se divide ## Como pedir para a sua IA ```text Adicione um efeito de ondas concêntricas em CSS atrás do logo no centro da seção: anéis nas cores da minha marca pulsando de dentro para fora e sumindo para as bordas, parados para quem prefere menos movimento e com tamanho ajustado no celular. ``` Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar. ## Perguntas sobre Gongo ### Gongo pesa na página? Não. Gongo usa só elementos HTML com borda e uma animação CSS de escala, sem canvas, WebGL ou JavaScript de animação, e tem classificação Leve no THM Componentes. O efeito continua pulsando para quem prefere menos movimento, por isso o prompt do THM Componentes pede à IA uma versão estática, com os anéis parados. ### Como deixar os anéis de Gongo redondos e na cor da marca? Pela prop circleClass, que recebe classes CSS aplicadas a cada anel de Gongo. Sem ela, os anéis saem quadrados, com borda fina na cor do texto; a demo usa rounded-full para formar círculos e define a cor da borda e um preenchimento translúcido. O prompt do THM Componentes pede à IA para usar os tokens de cor do projeto. ### Gongo funciona no celular? Funciona, porque Gongo é só CSS. Por padrão, os anéis chegam a 700 pixels e ficam centralizados, então em telas estreitas passam das bordas; o contêiner da demo usa overflow hidden para cortar o excesso. Ajuste baseCircleSize e spaceBetweenCircle para telas pequenas e teste no celular, como o prompt do THM Componentes orienta. ## Componentes relacionados - [Respingo](https://vibecode.thmtecnologia.com/componentes/respingo/): Botão que solta um círculo de cor a partir do ponto exato do clique, que cresce e some em menos de um segundo. - [Planetário](https://vibecode.thmtecnologia.com/componentes/planetario/): Ícones ou pequenos elementos que giram em círculos ao redor de um centro, como planetas em volta do Sol. - [Ribalta](https://vibecode.thmtecnologia.com/componentes/ribalta/): Uma linha de luz ciano se acende no alto de uma seção escura e espalha brilho sobre o título logo abaixo. - [Teleférico](https://vibecode.thmtecnologia.com/componentes/teleferico/): Linhas finas ligam ícones e cards, e um pulso de luz colorida corre por elas, mostrando os dados em movimento. - [Treliça](https://vibecode.thmtecnologia.com/componentes/trelica/): Fundo de grade fina ou de pontos que some nas bordas e pode deslizar devagar numa direção. --- 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.