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