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

> Respingo é um componente do THM Componentes que confirma cada clique com uma onda: um círculo de cor nasce no ponto exato tocado, cresce e some em 0,6 segundo. A cor e a duração são ajustáveis, cliques seguidos geram várias ondas e o evento de clique segue normal. Serve para formulários e ações de app.

- Categoria: Botões e cursores
- 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: Mouse, Toque, Teclado
- URL: https://vibecode.thmtecnologia.com/componentes/respingo/

## Como ele é

Lembra uma pedra caindo num lago, só que dentro do botão. Em repouso, é um botão simples de cantos arredondados, borda de 2 pixels, fundo na cor de fundo do tema e texto na cor principal. A cada clique ou toque, um círculo azul-claro aparece exatamente onde o dedo ou o mouse tocou, cresce até passar das bordas e vai sumindo, num movimento que desacelera no fim e dura 0,6 segundo. As bordas do botão cortam a onda, e cliques rápidos criam ondas sobrepostas.

## Você pode estar procurando isto se pediu algo assim

- “botão que faz uma onda quando clico”
- “efeito de toque no botão igual aplicativo de celular”
- “botão com círculo que se espalha a partir do clique”
- “feedback visual quando a pessoa aperta o botão de enviar”
- “aquele efeito de clique estilo Android no meu site”
- “botão de formulário que mostra que o clique funcionou”

## Também chamado de

onda no clique, efeito ripple, botão com onda, ripple effect, click ripple, efeito de toque no botão

## Quando usar

- Botões de enviar, salvar e confirmar em formulários
- Apps e painéis em que a pessoa precisa sentir que o clique foi registrado
- Interfaces pensadas para toque, como PWAs e versões mobile
- Ações repetidas, como adicionar ao carrinho ou curtir

## Quando evitar

- Botões de destaque que precisam chamar atenção antes do clique, já que a onda só aparece depois
- Marcas com paleta própria, sem trocar o azul-claro padrão da onda

## Como pedir para a sua IA

```text
Crie um botão com efeito ripple: a cada clique ou toque, um círculo nasce no ponto exato e se espalha até sumir. Use a cor da minha marca na onda, centralize a onda quando o clique vier do teclado e desligue a animação para quem prefere menos movimento.
```

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 Respingo

### Dá para mudar a cor e a velocidade de Respingo?

Sim. Respingo tem duas propriedades: rippleColor define a cor da onda, azul-claro por padrão, e duration define a duração em milissegundos, 600 por padrão. O fundo e o texto usam as cores do tema do projeto, então o botão acompanha o modo claro e o escuro.

### Respingo funciona com teclado?

Funciona como botão: Respingo usa o elemento button nativo, recebe foco e dispara o clique com Enter ou espaço. A onda, porém, nasce nas coordenadas do ponteiro, que num acionamento por teclado não apontam para o botão, então ela pode não aparecer. Vale pedir à IA para centralizar a onda nesse caso.

### Respingo deixa o site lento?

Não. Respingo cria um pequeno círculo por clique, anima com CSS e o remove ao fim da duração, sem laço de animação rodando o tempo todo. Tem classificação Leve no THM Componentes. Para movimento reduzido, o prompt do THM Componentes pede uma versão estática; aqui, pode ser só uma leve mudança de cor no clique.

## Componentes relacionados

- [Adiante](https://vibecode.thmtecnologia.com/componentes/adiante/): Botão em pílula com um ponto que cresce até preencher tudo no hover, enquanto o texto troca de lugar e ganha uma seta.
- [Lampejo](https://vibecode.thmtecnologia.com/componentes/lampejo/): Botão preto em pílula com um feixe de luz que percorre a borda sem parar e um brilho interno que cresce no hover.
- [Cata-vento](https://vibecode.thmtecnologia.com/componentes/cata-vento/): Botão com uma borda fina de arco-íris que gira sem parar em volta do texto, com leve desfoque.
- [Gongo](https://vibecode.thmtecnologia.com/componentes/gongo/): Anéis concêntricos que pulsam de dentro para fora atrás de um logo, ícone ou botão, como ondas num lago.
- [Folia](https://vibecode.thmtecnologia.com/componentes/folia/): Uma explosão de papeizinhos coloridos sobe e cai na tela quando a pessoa conclui uma compra, um cadastro ou uma meta.

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